:root {
  color-scheme: dark;
  --black: #07090b; --panel: #101419; --panel-2: #171c22; --paper: #d8d0bf;
  --ink: #111315; --white: #f2efe8; --muted: #858d94; --orange: #e45f25;
  --red: #c63d35; --green: #6ea46d; --yellow: #d5a647; --line: rgba(255,255,255,.115);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--black); }
body { margin: 0; min-height: 100vh; background: var(--black); color: var(--white); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .5; }
.hidden { display: none !important; }
.screen { min-height: 100vh; padding: clamp(22px, 4vw, 58px); position: relative; overflow: hidden; }
.panel { background: rgba(16,20,25,.94); border: 1px solid var(--line); box-shadow: 0 24px 80px rgba(0,0,0,.35); }
.eyebrow { color: var(--orange); letter-spacing: .2em; font-weight: 900; font-size: 10px; margin: 0 0 8px; text-transform: uppercase; }
.error { color: #ff827d; min-height: 18px; margin: 0; font-size: 12px; }
.danger-text { color: #ff6d64 !important; }
.sound-toggle { position: fixed; z-index: 1000; right: 14px; bottom: 14px; padding: 9px 11px; border: 1px solid rgba(228,95,37,.55); background: rgba(8,10,13,.9); color: var(--orange); font: 900 8px monospace; letter-spacing: .1em; backdrop-filter: blur(8px); }
.sound-toggle:hover { color: white; border-color: var(--orange); }.sound-toggle.muted { color: #687078; border-color: var(--line); }

.auth-screen { display: grid; place-content: center; gap: 32px; background: radial-gradient(circle at 72% 14%, #552619 0, transparent 29%), linear-gradient(145deg, #080a0d 0%, #12171c 55%, #07080a 100%); }
.grain { position: absolute; inset: 0; opacity: .22; pointer-events: none; background-image: repeating-linear-gradient(90deg, transparent 0 3px, rgba(255,255,255,.018) 4px); }
.brand-lockup, .auth-panel { width: min(455px, 88vw); position: relative; }
.brand-lockup h1 { margin: 0; font-size: clamp(78px, 18vw, 136px); letter-spacing: -.09em; line-height: .8; font-weight: 950; }
.subtitle { letter-spacing: .36em; margin: 14px 0 15px 5px; font-size: 12px; }
.build-badge { display: inline-block; padding: 7px 10px; border: 1px solid var(--line); color: var(--muted); font: 700 9px/1 monospace; letter-spacing: .09em; }
.auth-panel { padding: 25px; display: grid; gap: 16px; }
label { color: #b8bdc1; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
input, select, textarea { width: 100%; margin-top: 8px; padding: 14px 15px; color: white; background: #090b0e; border: 1px solid #30363c; border-radius: 2px; outline: none; }
textarea { min-height: 105px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--orange); }
.primary { border: 0; padding: 15px 20px; background: var(--orange); color: #fff; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.primary:hover { background: #f36b2f; }
.text-button, .icon-button, .back-button, .install-button { border: 0; background: transparent; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.text-button:hover, .back-button:hover, .install-button:hover { color: white; }

.topbar, .game-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; z-index: 2; }
.topbar h2 { font-size: clamp(34px, 7vw, 72px); margin: 0; line-height: .9; letter-spacing: -.055em; }
.slots { max-width: 1180px; margin: 9vh auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; z-index: 2; }
.slot-wrap { min-width: 0; position: relative; }.slot { width: 100%; min-height: 410px; padding: 24px; border: 1px solid var(--line); background: linear-gradient(160deg, #161b20, #0c0e11); text-align: left; color: white; position: relative; overflow: hidden; transition: .2s ease; }
.slot::after { content: ""; position: absolute; inset: auto -20% -35% 20%; height: 220px; background: radial-gradient(circle, rgba(228,95,37,.17), transparent 65%); }
.slot:hover { border-color: var(--orange); transform: translateY(-3px); }
.slot-number { color: #555e66; font-size: 62px; font-weight: 950; letter-spacing: -.08em; }
.slot h3 { font-size: 31px; margin: 105px 0 5px; text-transform: uppercase; letter-spacing: -.04em; }
.slot p { color: var(--muted); margin: 5px 0; }
.slot.empty { background: transparent; border-style: dashed; display: grid; place-content: center; text-align: center; }
.slot.empty h3 { margin: 0; }
.slot-tag { position: absolute; top: 24px; right: 24px; color: var(--orange); font-size: 9px; letter-spacing: .14em; font-weight: 900; }
.slot-status { display: flex; gap: 6px; margin-top: 18px; }
.slot-status b { padding: 5px 7px; color: #aeb4b8; border: 1px solid var(--line); font: 700 9px monospace; text-transform: uppercase; }
.delete-life { position: absolute; z-index: 4; right: 15px; bottom: 15px; padding: 8px 10px; border: 1px solid rgba(198,61,53,.45); background: rgba(24,10,11,.86); color: #c96b66; font: 900 8px monospace; letter-spacing: .08em; }.delete-life:hover { border-color: #ff6d64; color: white; background: #7f2523; }
.keyboard-hint { color: #4e555c; font-size: 9px; letter-spacing: .11em; text-align: center; margin-top: 40px; }

.case-file { max-width: 1440px; margin: 36px auto 80px; padding: clamp(24px, 3.5vw, 54px); color: var(--ink); background: var(--paper); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
#create-screen { overflow: visible; }
.file-heading { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 3px solid var(--ink); font-family: monospace; font-weight: bold; }
.case-file h2 { font-size: clamp(38px, 6vw, 70px); letter-spacing: -.06em; margin: 29px 0 8px; }
.file-intro { max-width: 720px; margin: 0; color: #514f49; line-height: 1.6; }
.creator-title-row { display: flex; justify-content: space-between; gap: 32px; align-items: flex-end; margin-bottom: 34px; }
.randomize-all { flex: 0 0 auto; padding: 13px 16px; border: 2px solid var(--ink); background: transparent; color: var(--ink); font: 900 10px monospace; letter-spacing: .08em; }
.randomize-all:hover { color: white; background: var(--ink); }
.creator-shell { display: block; }
.intake-stack { display: grid; gap: 18px; }
.intake-section { padding: 22px; border: 1px solid rgba(0,0,0,.22); background: rgba(255,255,255,.24); }
.intake-section > header { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(0,0,0,.18); }
.intake-section > header div { display: flex; align-items: center; gap: 12px; }.intake-section > header span { display: grid; place-items: center; width: 29px; height: 29px; color: white; background: var(--ink); font: 900 9px monospace; }
.intake-section h3 { margin: 0; font-size: 16px; letter-spacing: .04em; }.intake-section > header button { border: 0; background: transparent; color: #6f512e; font: 900 9px monospace; letter-spacing: .08em; }
.intake-section > header button:hover { color: var(--orange); }
.city-builder-row { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 17px; border-top: 1px dashed rgba(0,0,0,.24); }
.city-builder-row button { flex: 0 0 auto; padding: 12px 14px; border: 2px solid #6f512e; background: transparent; color: #6f512e; font: 900 9px monospace; letter-spacing: .08em; }
.city-builder-row button:hover { color: white; background: #6f512e; }.city-builder-row button:disabled { opacity: .55; }
.city-builder-row p { margin: 0; color: #716d64; font: 9px/1.5 monospace; }
.city-map-preview { display: grid; gap: 6px; margin-top: 12px; padding: 13px 15px; border-left: 4px solid #6f512e; background: rgba(111,81,46,.08); color: #4d4940; }
.city-map-preview b { font: 900 11px monospace; letter-spacing: .06em; }.city-map-preview span { font: 10px/1.5 monospace; }.city-map-preview.ready { border-left-color: #4c7b54; background: rgba(76,123,84,.09); }.city-map-preview.warn { border-left-color: #b56636; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid.three-up { grid-template-columns: repeat(3, 1fr); }
.form-grid .span-2 { grid-column: span 2; }
.case-file label { color: #4b4943; }
.case-file input, .case-file select, .case-file textarea { background: rgba(255,255,255,.72); border-color: rgba(0,0,0,.28); color: var(--ink); }
.custom-city-input { margin-top: 7px; border-style: dashed !important; }
.story-section textarea { min-height: 150px; }
.automatic-note { margin: 18px 0 0; padding: 13px 15px; border-left: 4px solid #6f512e; background: rgba(111,81,46,.08); color: #4d4940; font: 900 9px/1.55 monospace; letter-spacing: .04em; }
.creator-submit-row { position: sticky; z-index: 15; bottom: 16px; display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: center; gap: 18px; margin-top: 22px; padding: 18px 20px; color: white; background: rgba(21,25,29,.97); border: 1px solid #3b4247; box-shadow: 0 14px 35px rgba(15,17,18,.28); backdrop-filter: blur(8px); }
.creator-submit-row b { color: var(--orange); font: 900 9px monospace; letter-spacing: .11em; }.creator-submit-row p { margin: 5px 0 0; color: #aeb4b8; font-size: 10px; line-height: 1.5; }.creator-submit-row .error { grid-column: 1 / -1; color: #ff938e; }.create-life-button { width: 100%; }
.creator-preview { position: sticky; top: 22px; padding: 21px; color: white; background: #15191d; border: 1px solid #3b4247; box-shadow: 12px 15px 0 rgba(15,17,18,.13); }
.creator-preview h3 { margin: 4px 0 5px; font-size: 28px; line-height: 1; text-transform: uppercase; }.creator-preview > p:not(.eyebrow):not(.error) { color: #aeb4b8; font-size: 10px; line-height: 1.5; }
.preview-facts { display: grid; grid-template-columns: 1fr; gap: 9px; margin: 18px 0; }.preview-facts div { padding-bottom: 9px; border-bottom: 1px solid var(--line); }.preview-facts dd { margin: 3px 0 0; text-transform: uppercase; }
.ai-portrait-option { margin: 18px 0; padding: 13px; border: 1px solid rgba(228,95,37,.32); background: rgba(228,95,37,.07); }.ai-portrait-option p { margin: 7px 0 0; color: #8e989f; font: 8px/1.45 monospace; }.check-row { display: flex; align-items: center; gap: 9px; color: #ddd !important; }.check-row input { width: 16px; height: 16px; margin: 0; accent-color: var(--orange); }.check-row span { font-size: 9px; letter-spacing: .04em; }
.creator-preview .mini-scene { margin-top: 16px; }.creator-preview .start-copy { margin-bottom: 16px; }.create-life-button { width: 100%; }.creator-preview .error { margin-top: 10px; color: #ff938e; }
.mini-scene { height: 120px; position: relative; overflow: hidden; background: linear-gradient(#c87544 0 52%, #292d2f 53% 100%); border: 1px solid #5d6366; }
.mini-scene i, .mini-scene b, .mini-scene em { position: absolute; bottom: 38px; width: 62px; height: 43px; background: #171a1c; border-top: 12px solid #101214; }
.mini-scene i { left: 15px; }.mini-scene b { left: 88px; height: 60px; }.mini-scene em { right: 10px; height: 50px; }

.game-screen { padding: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.game-header { height: 63px; padding: 0 20px; border-bottom: 1px solid var(--line); background: #090b0e; }
.game-logo { font-weight: 950; font-size: 22px; letter-spacing: -.05em; }
.game-logo small { margin-left: 10px; color: #5d656c; font-size: 8px; letter-spacing: .18em; }
.header-actions { display: flex; gap: 12px; }
.install-button { color: var(--orange); }
.stat-strip { height: 62px; display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); background: #0b0e11; }
.stat-strip div { padding: 10px 20px; border-right: 1px solid var(--line); position: relative; }
.stat-strip span, dt { display: block; color: var(--muted); font-size: 8px; letter-spacing: .16em; font-weight: 900; }
.stat-strip strong { font-size: 20px; }
.stat-strip i { --value: 0%; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--value); background: var(--green); transition: width .3s; }
#heat-bar { background: var(--red); }

.game-layout { height: calc(100vh - 125px); height: calc(100dvh - 125px); min-height: 0; display: grid; grid-template-columns: 270px minmax(520px, 1fr) 390px; gap: 10px; padding: 10px; background: #07090b; }
.identity-card { height: 100%; overflow-y: auto; padding: 22px; border: 1px solid var(--line); }
.identity-card h2 { font-size: 27px; margin: 12px 0 4px; text-transform: uppercase; letter-spacing: -.04em; }
.identity-card > p:not(.eyebrow) { color: var(--muted); margin-top: 0; font-size: 11px; line-height: 1.45; }
.portrait-frame { height: 210px; margin: 10px 0 7px; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 25%, #36424b, #171b20 58%, #0b0e11 80%); border: 3px solid #111; box-shadow: inset 0 0 0 1px #e45f25; }
.portrait-frame > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.portrait-loading { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: rgba(8,10,12,.82); color: var(--orange); font: 900 10px/1.7 monospace; letter-spacing: .1em; }
.portrait-button { width: 100%; padding: 9px 8px; border: 1px solid rgba(228,95,37,.4); background: rgba(228,95,37,.08); color: #d9784c; font: 900 8px monospace; letter-spacing: .08em; }.portrait-button:hover { color: white; border-color: var(--orange); }.portrait-status { min-height: 14px; margin: 6px 0 0 !important; font: 8px/1.45 monospace !important; }
.css-avatar { --skin: #6f3f29; --shirt: #16191d; height: 230px; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 26%, #59636b 0, #22282d 44%, #0c0f12 82%); }
.css-avatar[data-skin="dark-brown"] { --skin: #4b2a1e; }.css-avatar[data-skin="rich-brown"] { --skin: #70432d; }.css-avatar[data-skin="medium-brown"] { --skin: #956144; }.css-avatar[data-skin="light-brown"] { --skin: #b47b5a; }.css-avatar[data-skin="tan"] { --skin: #c58f6d; }.css-avatar[data-skin="light"] { --skin: #d8aa87; }.css-avatar[data-skin="fair"] { --skin: #ebc7ac; }
.avatar-head { position: absolute; z-index: 3; left: 50%; top: 36px; width: 84px; height: 103px; transform: translateX(-50%); border-radius: 46% 46% 43% 43%; background: var(--skin); box-shadow: inset 8px -9px rgba(0,0,0,.09); }.avatar-head i,.avatar-head b { position: absolute; top: 45px; width: 8px; height: 4px; border-radius: 50%; background: #17120f; }.avatar-head i { left: 21px; }.avatar-head b { right: 21px; }.avatar-head em { position: absolute; left: 50%; bottom: 23px; width: 25px; height: 8px; transform: translateX(-50%); border-bottom: 2px solid rgba(60,24,18,.68); border-radius: 50%; }
.avatar-hair { position: absolute; z-index: 5; left: 50%; top: 22px; width: 94px; height: 50px; transform: translateX(-50%); border-radius: 48% 48% 30% 30%; background: #0c0b0b; }.css-avatar[data-hair="long"] .avatar-hair { height: 128px; width: 109px; border-radius: 45% 45% 28% 28%; }.css-avatar[data-hair="braids"] .avatar-hair { height: 116px; width: 103px; background: repeating-linear-gradient(90deg,#080808 0 8px,#171313 9px 12px); }.css-avatar[data-hair="bald"] .avatar-hair { display: none; }.css-avatar[data-hair="fade"] .avatar-hair { top: 29px; width: 88px; height: 27px; }.css-avatar[data-hair="afro"] .avatar-hair { top: 5px; width: 126px; height: 76px; border-radius: 50%; }
.avatar-neck { position: absolute; z-index: 2; left: 50%; top: 125px; width: 35px; height: 40px; transform: translateX(-50%); background: var(--skin); }.avatar-body { position: absolute; z-index: 1; left: 50%; bottom: -35px; width: 205px; height: 126px; transform: translateX(-50%); border-radius: 48% 48% 0 0; background: var(--shirt); box-shadow: inset 0 8px rgba(255,255,255,.035); }.css-avatar[data-build="slim"] .avatar-body { width: 165px; }.css-avatar[data-build="broad"] .avatar-body { width: 240px; }
.creator-preview .css-avatar { margin: -21px -21px 19px; height: 285px; }.game-avatar { height: 100%; }.game-avatar .avatar-head { top: 27px; }.game-avatar .avatar-hair { top: 14px; }.game-avatar[data-hair="afro"] .avatar-hair { top: 0; }.game-avatar .avatar-neck { top: 116px; }.game-avatar .avatar-body { bottom: -39px; }
dl { margin: 25px 0 18px; display: grid; gap: 4px; }
dd { margin: 0 0 13px; font-size: 12px; }
.status-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.status-chips span { padding: 5px 6px; border: 1px solid var(--line); color: #aeb4b8; font: 800 8px monospace; text-transform: uppercase; }
.status-chips .good { color: #82b981; border-color: rgba(110,164,109,.35); }.status-chips .warn { color: #e0b458; }.status-chips .bad { color: #ff766d; }

.play-column { height: 100%; min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto; border: 1px solid var(--line); background: radial-gradient(circle at 50% 25%, #1d252c 0, #090b0e 65%); }
.play-main { min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.scene-board { padding: 8px 12px 10px; border-bottom: 1px solid var(--line); background: #0c1014; }
.scene-board-top { display: grid; grid-template-columns: 1.4fr .8fr 1.3fr; gap: 10px; }
.scene-board-top span, .scene-board-stats span, .scene-board-grid span { display: block; color: #6f787f; font: 800 7px monospace; letter-spacing: .1em; }
.scene-board-top strong { display: block; margin-top: 3px; font-size: 15px; letter-spacing: -.02em; text-transform: uppercase; }
.scene-board-compact { margin: 8px 0 0; color: #c5c8c9; font: 12px/1.4 Georgia, serif; }
.scene-board-activity { margin: 10px 0 0; color: #c5c8c9; font: 12px/1.45 Georgia, serif; }
.scene-board-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.scene-board-stats div { padding: 7px 8px; border: 1px solid var(--line); background: #11161a; }
.scene-board-stats b { display: block; margin-top: 3px; font: 800 12px/1.2 monospace; color: #ece8de; }
.scene-board-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.scene-board-grid article { padding: 8px 9px; border: 1px solid var(--line); background: #10151a; min-height: 58px; }
.scene-board-grid p { margin: 4px 0 0; color: #d7d3c9; font: 11px/1.4 Georgia, serif; }
.critical-banner { padding: 9px 16px; color: #fff; background: linear-gradient(90deg, #9f2c29, #591a1b); font: 900 9px monospace; letter-spacing: .08em; }
.roll-card { margin: 12px 18px 0; padding: 12px 14px; border: 1px solid rgba(213,166,71,.45); background: rgba(48,36,16,.86); }
.roll-card h3 { margin: 0 0 10px; font-size: 17px; }.range-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }.range-grid div { padding: 7px; background: rgba(0,0,0,.22); }.range-grid span { display: block; color: #a99b79; font-size: 8px; text-transform: uppercase; }.range-grid strong { font-size: 13px; }
.story-feed { min-height: 0; overflow-y: auto; padding: 26px 36px 30px; display: flex; flex-direction: column; gap: 22px; overscroll-behavior: contain; }
.story-entry { max-width: 780px; padding-left: 16px; border-left: 3px solid var(--orange); animation: reveal .35s ease both; }
.story-entry > div { display: flex; gap: 12px; align-items: center; }.story-entry time, .story-entry span { color: var(--orange); font-size: 8px; letter-spacing: .11em; text-transform: uppercase; }.story-entry span { color: #717981; }
.story-entry p { margin: 7px 0 0; font: 16px/1.62 Georgia, serif; color: #dad8d2; }
.story-entry .stat-line { font: 800 11px/1.55 "IBM Plex Mono", Consolas, monospace; letter-spacing: .03em; color: #9aa3aa; }
.story-entry .stat-health { color: #7dce8a; font-weight: 800; }
.story-entry .stat-cash { color: #e4c15a; font-weight: 800; }
.story-entry .stat-rep { color: #6eb4e0; font-weight: 800; }
.story-entry .stat-heat { color: #e45f25; font-weight: 800; }
.story-entry .stat-place { color: #d9dcde; font-weight: 800; }
.story-entry .stat-gear { color: #c9b48a; font-weight: 800; }
.story-entry q { color: #f0e6c8; font-style: italic; }
.choice-dock { position: relative; z-index: 30; bottom: 0; min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); border-top: 1px solid var(--line); background: #0e1216; box-shadow: 0 -12px 30px rgba(0,0,0,.42); }
.choice-dock:empty, .choice-dock.idle { border-top: 0; box-shadow: none; }
.choice-dock.expanded { max-height: min(34vh, 240px); }
.choice-dock.expanded .suggested-row { display: flex; overflow-x: auto; }
.choice-dock.expanded .suggested-row button { flex: 0 0 46%; min-height: 44px; }
.suggested-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.suggested-row.hidden { display: none; }
.suggested-row button { min-height: 52px; padding: 8px 10px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #151b20; color: #ece8de; text-align: left; }
.suggested-row button:hover { background: #1c2329; box-shadow: inset 0 3px var(--orange); }
.suggested-row button.risk:hover { box-shadow: inset 0 3px var(--red); }
.suggested-row strong { display: block; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.suggested-row span { color: #6a7278; font: 800 7px monospace; }
.more-moves { min-height: 24px; padding: 0 10px; border: 1px solid var(--line); background: #11161a; color: #7b858d; font: 800 8px monospace; letter-spacing: .1em; }
.more-moves.open { color: var(--orange); border-color: var(--orange); }
.more-dock { min-height: 0; overflow: auto; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.more-dock.hidden { display: none; }
.typed-move { position: relative; z-index: 50; flex-shrink: 0; padding: 8px 10px 10px; border-top: 2px solid var(--orange); background: #0a0d10; }
.typed-move-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.typed-move-head .eyebrow { margin: 0; color: var(--orange); }
.typed-move-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.typed-mode { display: grid; grid-template-columns: 1fr 1fr; }
.typed-mode button { min-width: 46px; border: 1px solid var(--line); background: #11161a; color: #7b858d; font: 900 9px monospace; }
.typed-mode button.active { color: #160d08; background: var(--orange); border-color: var(--orange); }
.typed-move input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); background: #11161a; color: #ece8de; font: 14px/1.4 Georgia, serif; }
.typed-move button[type="submit"] { min-width: 64px; border: 0; background: var(--orange); color: #160d08; font: 900 11px monospace; letter-spacing: .08em; }
.typed-move.busy { pointer-events: none; opacity: .55; }
.choice-dock.busy::after { content: "SAVING DECISION…"; position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; color: var(--orange); background: rgba(8,11,14,.72); font: 900 10px monospace; letter-spacing: .12em; pointer-events: all; }
.action-groups { display: flex; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }.action-groups button { flex: 0 0 auto; padding: 9px 12px; border: 0; border-right: 1px solid var(--line); background: transparent; color: #646d74; font: 900 8px monospace; text-transform: uppercase; letter-spacing: .08em; }.action-groups button.active { color: var(--orange); background: #171c21; }
.action-grid { min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); align-content: start; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.action-grid button { min-height: 65px; padding: 10px 12px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #11161a; color: #d9dcde; text-align: left; }
.action-grid button:hover { background: #1c2329; box-shadow: inset 0 3px var(--orange); }.action-grid button.risk:hover { box-shadow: inset 0 3px var(--red); }
.action-grid button span { display: block; margin-bottom: 5px; color: #535b62; font: 800 8px monospace; }.action-grid button strong { font-size: 9px; letter-spacing: .055em; text-transform: uppercase; }.action-grid button i { float: right; color: var(--orange); font: 800 7px monospace; }

.intel-panel { height: 100%; overflow: hidden; border: 1px solid var(--line); background: #0d1013; display: grid; grid-template-rows: auto 1fr; }
.intel-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; padding: 10px; background: #080a0d; border-bottom: 1px solid var(--line); }
.intel-nav.three-up { grid-template-columns: repeat(2, 1fr); }
.phone-book { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.phone-book div { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0; font: 800 10px/1.4 monospace; color: #d7dde2; }
.phone-book span { color: var(--orange); }
.intel-nav button { min-height: 45px; padding: 9px 11px; border: 1px solid var(--line); background: #101419; color: #7b858d; font: 900 8px monospace; letter-spacing: .09em; text-align: left; }.intel-nav button.active { border-color: rgba(228,95,37,.5); background: #1a2026; color: var(--orange); box-shadow: inset 3px 0 var(--orange); }.intel-nav span { color: white; }
.intel-content { overflow-y: auto; padding: 28px; }
.intel-content h2 { margin: 0 0 14px; font-size: 25px; letter-spacing: -.04em; text-transform: uppercase; }.intel-content h3 { margin: 24px 0 9px; color: #7e878e; font: 900 8px monospace; letter-spacing: .12em; }
.intel-copy { color: #a2a8ac; font-size: 11px; line-height: 1.6; }
.map-attribution { margin: 18px 0 7px; color: #5f686f; font: 8px/1.5 monospace; }
.info-card { margin-bottom: 8px; padding: 13px 14px; border: 1px solid var(--line); background: #12171b; }.info-card span { display: block; color: #6f787f; font: 900 7px monospace; letter-spacing: .1em; }.info-card strong { display: block; margin-top: 4px; font-size: 12px; text-transform: uppercase; }.info-card p { margin: 5px 0 0; color: #899198; font-size: 9px; line-height: 1.45; }
.data-row { display: grid; grid-template-columns: 42% 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 10px; }.data-row b { color: #737c83; text-transform: uppercase; }.data-row span { text-align: right; overflow-wrap: anywhere; }
.message { margin-bottom: 8px; padding: 10px; border: 1px solid var(--line); background: #11161b; }.message.unread { border-color: rgba(228,95,37,.5); }.message b { font-size: 11px; }.message small { color: #687179; }.message p { margin: 6px 0; font-size: 11px; line-height: 1.45; }.message time { color: #5f676d; font: 700 7px monospace; }.notepad { padding: 8px; margin-bottom: 5px; border: 1px dashed #4b5359; font: 10px monospace; color: #c9c5bb; }.empty-copy { color: #596168; font-size: 10px; }
.log-entry { padding: 10px 0; border-bottom: 1px solid var(--line); }.log-entry b { color: var(--orange); font: 800 8px monospace; text-transform: uppercase; }.log-entry p { margin: 6px 0; color: #b3b7b9; font: 10px/1.5 Georgia, serif; }.log-entry small { color: #596168; font: 7px monospace; }

dialog { width: min(480px, 92vw); padding: 0; border: 1px solid #3a4248; background: #11161a; color: white; box-shadow: 0 25px 100px #000; }dialog::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(5px); }dialog form { padding: 25px; }dialog h2 { margin: 0 0 20px; font-size: 26px; text-transform: uppercase; }.dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px; }.dialog-actions .primary { padding: 11px 16px; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1180px) {
  .form-grid.three-up { grid-template-columns: 1fr 1fr; }
  .game-layout { grid-template-columns: 220px 1fr 320px; }.identity-card { padding: 16px; }.intel-content { padding: 18px; }.story-feed { padding: 20px 24px; }
}
@media (max-width: 920px) {
  .game-screen { height: 100vh; height: 100dvh; min-height: 100dvh; overflow: hidden; }.game-layout { height: calc(100dvh - 125px); min-height: 0; grid-template-columns: minmax(0, 1fr) 300px; overflow: hidden; }.identity-card { display: none; }.play-column { height: 100%; min-height: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr) auto; }.choice-dock { position: relative; bottom: auto; height: auto; }.intel-panel { min-height: 0; }
}
@media (max-width: 700px) {
  .screen { padding: 19px; }.slots { grid-template-columns: 1fr; margin-top: 35px; }.slot { min-height: 190px; }.slot h3 { margin-top: 38px; }.keyboard-hint { display: none; }.creator-title-row { display: block; }.randomize-all { width: 100%; margin-top: 20px; }.form-grid, .form-grid.three-up { grid-template-columns: 1fr; }.form-grid .span-2 { grid-column: auto; }.intake-section { padding: 17px; }.intake-section > header { align-items: flex-start; }.intake-section > header button { max-width: 90px; }.creator-submit-row { grid-template-columns: 1fr; bottom: 8px; }.mini-scene { display: none; }
  .game-header { height: 56px; padding: 0 12px; }.game-logo small, #export-life { display: none; }.stat-strip { height: 54px; overflow-x: auto; grid-template-columns: repeat(5, minmax(86px, 1fr)); }.stat-strip div { padding: 8px 10px; }.stat-strip strong { font-size: 16px; }
  .game-layout { display: grid; height: calc(100dvh - 110px); min-height: 0; grid-template-columns: 1fr; padding: 0; overflow: hidden; }.play-column { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }.intel-panel { display: none; }.scene-board-top { grid-template-columns: 1fr; }.suggested-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }.story-feed { padding: 18px 18px; }.story-entry p { font-size: 15px; }.choice-dock { position: relative; bottom: auto; z-index: 20; }.choice-dock.expanded { max-height: min(32vh, 220px); }.typed-move { position: relative; z-index: 50; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }.action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.action-grid button { min-height: 61px; }.intel-nav { grid-template-columns: repeat(2, 1fr); position: sticky; top: 0; z-index: 10; }.intel-content { min-height: 440px; }.range-grid { grid-template-columns: 1fr; }.sound-toggle { bottom: 9px; right: 9px; }
}

/* v0.8.15 type-first play */
.utility-nav { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.suggested-row button span { font-size: 14px; font-weight: 900; }
#more-dock { display: none !important; }
@media (max-width: 900px) { .utility-nav { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }