1/* ==========================================================================2 * TRIBES — 1-bit terminal wargame console.3 *4 * Design language: near-black ground, panels drawn as 1px box frames with5 * their titles punched into the border (roguelike box style), VT323 pixel6 * type for all HUD text/headings/numbers/feeds, reversed-video active7 * states, square corners, faint scanlines over the game screen. Tribe8 * identity colors (viz/palette.ts) are the only saturated hues.9 * ========================================================================== */1011:root {12 --bg: #060708;13 --bg-raised: #0a0c0f;14 --bg-inset: #000000;15 --chart-bg: #08090c;16 --border: #2b313c;17 --border-dim: #1a1e26;18 --border-bright: #4c5567;19 --text: #d6dae2;20 --text-dim: #808a9a;21 --accent: #e0a458;22 --accent-dim: #8a6534;23 --danger: #e6533c;24 --ok: #58c15c;25 --radius: 0;26 --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;27 --pixel: 'VT323', 'Courier New', monospace;28}2930* { box-sizing: border-box; }3132/* thin 1-bit scrollbars for all internal scroll regions */33* { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg-inset); }3435/* Single fullscreen console: the page NEVER scrolls — panes scroll inside. */36html, body {37 margin: 0;38 padding: 0;39 height: 100dvh;40 overflow: hidden;41 background: var(--bg);42 color: var(--text);43 font: 13px/1.55 var(--mono);44}4546#app {47 height: 100dvh;48 overflow: hidden;49 display: grid;50 grid-template-rows: auto minmax(0, 1fr) auto; /* title bar / main / status line */51}5253::selection { background: var(--accent); color: #000; }5455a { color: var(--accent); text-decoration: none; }56a:hover { text-decoration: underline; }5758h1, h2, h3 {59 font-family: var(--pixel);60 font-weight: 400;61 margin: 0 0 0.5rem;62 letter-spacing: 0.05em;63 text-transform: uppercase;64}65h1 { font-size: 1.55rem; }66h2 { font-size: 1.25rem; }67h3 { font-size: 1.1rem; color: var(--accent); }6869/* ------- shell: title bar + status line ------- */70.topbar {71 display: flex; align-items: baseline; gap: 1rem;72 padding: 0.45rem 1.2rem 0.4rem;73 border-bottom: 1px solid var(--border);74 background: var(--bg-inset);75 position: relative;76}77.topbar::after {78 /* second hairline under the title bar — double-rule frame */79 content: '';80 position: absolute; left: 0; right: 0; bottom: -4px;81 border-bottom: 1px solid var(--border-dim);82 pointer-events: none;83}84.topbar .brand {85 font-family: var(--pixel);86 font-size: 1.7rem;87 line-height: 1;88 letter-spacing: 0.22em;89 color: var(--accent);90 text-shadow: 0 0 12px rgba(224, 164, 88, 0.35);91}92.topbar .brand:hover { text-decoration: none; color: #f0be79; }93.topbar > .muted { font-family: var(--pixel); font-size: 1.05rem; letter-spacing: 0.06em; }94.topbar .spacer { flex: 1; }95.topbar .who { color: var(--text-dim); font-family: var(--pixel); font-size: 1.05rem; }9697main.page {98 width: 100%; max-width: 1100px; margin: 0 auto;99 padding: 0.9rem 1.2rem;100 min-height: 0;101 display: flex; flex-direction: column;102 /* fallback scroll for simple pages (sign-in, load errors); fullscreen103 layouts (.home-grid / .game-screen) size to 1fr and never trip it */104 overflow-y: auto;105}106main.page.wide { max-width: 1560px; padding: 0.7rem 1rem 0.8rem; }107108/* ------- home: two internally-scrolling columns, no page scroll ------- */109.home-grid {110 flex: 1; min-height: 0;111 display: grid;112 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);113 gap: 0 1.2rem;114}115.home-col {116 min-height: 0;117 overflow-y: auto;118 scrollbar-gutter: stable;119 padding: 0.9rem 0.4rem 0.4rem 0; /* top room for punched card titles */120}121@media (max-width: 900px) {122 /* one internally-scrolling column — still no body scroll */123 .home-grid { display: block; overflow-y: auto; scrollbar-gutter: stable; padding: 0.9rem 0.4rem 0.4rem 0; }124 .home-col { overflow: visible; padding: 0; }125}126127footer.credits {128 border-top: 1px solid var(--border);129 padding: 0.22rem 1.2rem 0.18rem;130 white-space: nowrap;131 overflow: hidden;132 text-overflow: ellipsis;133 color: var(--text-dim);134 font-family: var(--pixel);135 font-size: 1rem;136 letter-spacing: 0.05em;137 text-align: center;138 background: var(--bg-inset);139}140141/* ------- HUD box: 1px frame, title punched into the border ------- */142.card {143 position: relative;144 background: var(--bg);145 border: 1px solid var(--border);146 padding: 1.2rem 1rem 1rem;147 margin-bottom: 1.6rem;148}149.card > h2 {150 position: absolute;151 top: -0.78em;152 left: 12px;153 margin: 0;154 padding: 0 0.55em;155 background: var(--bg);156 color: var(--accent);157 font-size: 1.2rem;158 line-height: 1.15;159}160.card > h2::before { content: '» '; color: var(--border-bright); }161.card h3 {162 margin-top: 1.1rem;163 color: var(--text);164 border-bottom: 1px solid var(--border-dim);165 padding-bottom: 0.2rem;166}167.card h3::before { content: '\25B8 '; color: var(--accent-dim); }168169/* ------- controls ------- */170button, .btn {171 font-family: var(--pixel);172 font-size: 1.05rem;173 line-height: 1.25;174 text-transform: uppercase;175 letter-spacing: 0.06em;176 background: var(--bg-inset);177 color: var(--text);178 border: 1px solid var(--border);179 border-radius: 0;180 padding: 0.16rem 0.7rem 0.12rem;181 cursor: pointer;182}183button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }184button:active:not(:disabled) { background: var(--accent); color: #000; }185button:disabled { opacity: 0.4; cursor: default; }186button.primary { background: var(--accent); color: #000; border-color: var(--accent); }187button.primary:hover:not(:disabled) { background: #f0be79; border-color: #f0be79; color: #000; }188button.small { padding: 0.08rem 0.5rem 0.05rem; font-size: 0.95rem; }189button.active { background: var(--accent); color: #000; border-color: var(--accent); }190button.danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }191192input[type="text"], input[type="number"], select, textarea {193 background: var(--bg-inset);194 color: var(--text);195 border: 1px solid var(--border);196 border-radius: 0;197 padding: 0.3rem 0.55rem;198 font: inherit;199}200select { font-family: var(--pixel); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; max-width: 100%; }201textarea { font-family: var(--mono); font-size: 12px; width: 100%; resize: vertical; }202input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }203204.row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }205.muted { color: var(--text-dim); font-size: 0.9em; }206.mono { font-family: var(--mono); font-size: 0.9em; }207.error-text { color: var(--danger); font-size: 0.9em; white-space: pre-wrap; }208.ok-text { color: var(--ok); font-size: 0.9em; }209210.star-btn { background: none; border: none; font-size: 1rem; padding: 0 0.2rem; color: var(--text-dim); }211.star-btn.starred { color: var(--accent); }212.star-btn:hover { color: var(--accent); border: none; background: none; }213214table.list { width: 100%; border-collapse: collapse; }215table.list th {216 text-align: left; color: var(--text-dim);217 font-family: var(--pixel); font-weight: 400; font-size: 1rem;218 text-transform: uppercase; letter-spacing: 0.08em;219 padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--border);220}221table.list td { padding: 0.32rem 0.5rem; border-bottom: 1px solid var(--border-dim); overflow-wrap: anywhere; }222table.list tr:last-child td { border-bottom: none; }223table.list tr.sel td { background: rgba(224, 164, 88, 0.07); }224table.list tr.clickable { cursor: pointer; }225table.list tr.clickable:hover td { background: rgba(224, 164, 88, 0.06); }226227pre.snippet {228 background: var(--bg-inset);229 border: 1px solid var(--border);230 padding: 0.7rem;231 font-family: var(--mono);232 font-size: 12px;233 overflow-x: auto;234}235236.token-once {237 background: var(--bg-inset);238 border: 1px dashed var(--accent-dim);239 padding: 0.6rem;240 margin: 0.6rem 0;241}242243.notice {244 padding: 2rem;245 text-align: center;246 color: var(--text-dim);247 font-family: var(--pixel);248 font-size: 1.2rem;249 letter-spacing: 0.06em;250}251252/* ------- topbar tab nav (Connect / Create / Browse / Simulate) ------- */253.topbar .tab-nav { align-self: center; margin-left: 0.4rem; }254.topbar .tab-nav .mode-btn { padding: 0.14rem 0.85rem 0.1rem; }255@media (max-width: 720px) {256 .topbar { flex-wrap: wrap; row-gap: 0.3rem; }257 .topbar > .muted { display: none; }258}259260/* ------- create: script row badges + actions ------- */261.badge-row { gap: 0.35rem; margin-top: 0.15rem; }262.badge {263 font-family: var(--pixel);264 font-size: 0.92rem;265 line-height: 1.2;266 letter-spacing: 0.08em;267 text-transform: uppercase;268 color: var(--text-dim);269 border: 1px solid var(--border);270 padding: 0 0.35em;271}272.badge.listed { color: var(--ok); border-color: var(--ok); }273.badge.model-chip {274 color: var(--accent);275 border-color: var(--accent-dim);276 white-space: nowrap;277}278td.badges-cell { white-space: nowrap; }279td.badges-cell .badge { margin-right: 0.3rem; }280td.actions-cell { white-space: nowrap; }281td.actions-cell button { margin-right: 0.25rem; }282283/* ------- create: meta editor drawer ------- */284.meta-editor {285 background: var(--bg-inset);286 border: 1px solid var(--border);287 border-left: 3px solid var(--accent-dim);288 padding: 0.7rem 0.8rem 0.8rem;289 margin-top: 0.8rem;290 display: flex; flex-direction: column; gap: 0.55rem;291}292.meta-editor label { display: flex; flex-direction: column; gap: 0.2rem; }293.meta-editor label.row { flex-direction: row; align-items: center; }294.meta-editor .field-label {295 font-family: var(--pixel);296 font-size: 0.98rem;297 letter-spacing: 0.1em;298 text-transform: uppercase;299 color: var(--text-dim);300}301.meta-editor input[type='text'] { width: 100%; }302303/* ------- create: read-only source viewer + JS highlighter tokens ------- */304pre.source-view {305 background: var(--bg-inset);306 border: 1px solid var(--border);307 padding: 0.7rem;308 margin: 0.5rem 0 0;309 font-family: var(--mono);310 font-size: 12px;311 line-height: 1.5;312 max-height: 24rem;313 overflow: auto;314 scrollbar-gutter: stable;315}316/* Syntax highlighting (web/src/highlight.ts) — one palette, both viewers */317.tok-comment { color: var(--text-dim); font-style: italic; }318.tok-string { color: var(--ok); }319.tok-number { color: #d4a3e8; }320.tok-keyword { color: var(--accent); }321.tok-literal { color: #d4a3e8; }322.tok-builtin { color: #6db4e8; }323.tok-fn { color: #e8d76d; }324.tok-prop { color: var(--text); }325326/* ------- create: trash rows ------- */327.trash-row {328 border-top: 1px solid var(--border-dim);329 padding: 0.45rem 0.1rem;330 flex-wrap: nowrap;331}332.trash-row:first-child { border-top: none; }333.trash-days {334 font-family: var(--pixel);335 font-size: 1rem;336 letter-spacing: 0.06em;337 text-transform: uppercase;338 color: var(--danger);339 white-space: nowrap;340}341342/* ------- connect: sharing toggle + danger zone ------- */343.toggle-row { font-family: var(--pixel); font-size: 1.1rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }344.toggle-row input[type='checkbox'] { accent-color: var(--accent); }345346.card.danger-zone { border-color: var(--danger); }347.card.danger-zone > h2 { color: var(--danger); }348.card.danger-zone > h2::before { color: var(--danger); }349.card.danger-zone button.danger { border-color: var(--danger); color: var(--danger); }350.card.danger-zone button.danger:hover:not(:disabled) { background: var(--danger); color: #000; }351352.example-row { border-top: 1px solid var(--border-dim); padding: 0.6rem 0; }353.example-row pre.source {354 background: var(--bg-inset);355 border: 1px solid var(--border);356 padding: 0.7rem;357 font-family: var(--mono);358 font-size: 12px;359 max-height: 20rem;360 overflow: auto;361}362363/* ==========================================================================364 * GAME SCREEN (/s/:id) — framed viewport + HUD, not tabs-over-cards365 * ========================================================================== */366367/* fixed-viewport game screen: HUD bar / (transient note) / battle area */368main.page.game-screen {369 position: relative;370 overflow: hidden;371 display: grid;372 grid-template-rows: auto auto minmax(0, 1fr);373}374/* faint scanlines + vignette over the whole game screen; stays classy */375.game-screen::after {376 content: '';377 position: absolute; inset: 0;378 pointer-events: none;379 z-index: 40;380 background:381 radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, 0.28) 100%),382 repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px);383}384385/* ------- top status bar: sim identity - mode toggle - transport - clock --- */386.hud-status {387 display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;388 background: var(--bg-inset);389 border: 1px solid var(--border);390 padding: 0.35rem 0.8rem;391 margin-bottom: 0.8rem;392 font-family: var(--pixel);393}394.hud-ident { display: flex; align-items: baseline; gap: 0.7rem; min-width: 0; overflow: hidden; }395.hud-ident h1 { margin: 0; font-size: 1.45rem; line-height: 1.1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }396.hud-ident h1::before { content: '» '; color: var(--accent-dim); }397.hud-ident .sub { color: var(--text-dim); font-size: 1rem; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }398.hud-mock { color: var(--danger); font-size: 1rem; letter-spacing: 0.08em; }399400.mode-toggle { display: inline-flex; border: 1px solid var(--border); }401button.mode-btn {402 border: none; border-radius: 0;403 background: var(--bg-inset);404 color: var(--text-dim);405 font-size: 1.1rem;406 letter-spacing: 0.1em;407 padding: 0.18rem 1rem 0.12rem;408}409button.mode-btn + button.mode-btn { border-left: 1px solid var(--border); }410button.mode-btn.active { background: var(--accent); color: #000; }411button.mode-btn:hover:not(.active):not(:disabled) { color: var(--accent); }412413.transport { display: flex; gap: 0.35rem; align-items: center; }414.transport button { min-width: 2.2rem; text-align: center; }415416.hud-clock {417 display: flex; align-items: center; gap: 0.6rem;418 margin-left: auto;419 min-width: 220px; flex: 1; max-width: 380px;420}421.tick-label {422 font-family: var(--pixel);423 font-size: 1.3rem;424 color: var(--accent);425 letter-spacing: 0.05em;426 white-space: nowrap;427 font-variant-numeric: tabular-nums;428}429.progress-bar {430 flex: 1; height: 12px; min-width: 90px;431 background: var(--bg-inset);432 border: 1px solid var(--border);433 overflow: hidden;434 position: relative;435}436.progress-bar > div { height: 100%; background: var(--accent); width: 0; }437.progress-bar::after {438 /* segment the fill into chunky cells */439 content: '';440 position: absolute; inset: 0;441 background: repeating-linear-gradient(90deg, transparent 0 7px, var(--bg-inset) 7px 9px);442 pointer-events: none;443}444445/* ------- layout: viewport left, one scrolling rail right ------- */446.game-layout {447 display: grid;448 grid-template-columns: minmax(0, 1fr) 316px;449 gap: 0.9rem;450 min-height: 0;451 overflow: hidden;452}453.game-main { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0.45rem; }454.game-side {455 min-height: 0;456 overflow-y: auto;457 scrollbar-gutter: stable;458 display: flex; flex-direction: column; gap: 0.9rem;459 padding: 2px 2px 0.5rem 0;460}461@media (max-width: 980px) {462 .game-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr); }463}464465/* the framed viewport (double frame: border + offset outline) */466.viewport {467 position: relative;468 border: 1px solid var(--border);469 outline: 1px solid var(--border-dim);470 outline-offset: 3px;471 background: var(--bg-inset);472 padding: 0.7rem;473 margin: 12px 4px 4px; /* room for the outline + punched label above */474 flex: 1;475 min-height: 0;476 display: flex; flex-direction: column;477}478/* internal scroll region for the chronicle telemetry */479.viewport-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: 0.2rem 0.3rem 0.2rem 0; }480.viewport-label {481 position: absolute;482 top: -0.72em; left: 14px;483 padding: 0 0.5em;484 background: var(--bg);485 font-family: var(--pixel);486 font-size: 1.15rem;487 letter-spacing: 0.14em;488 text-transform: uppercase;489 color: var(--accent);490 z-index: 2;491}492.viewport-label::before { content: '\2508 '; color: var(--border-bright); }493.viewport-label::after { content: ' \2508'; color: var(--border-bright); }494495.world-toolbar { margin-bottom: 0.55rem; }496497/* invitation overlay for the instant-chronicle path */498.replay-invite {499 display: flex; flex-direction: column; align-items: center; justify-content: center;500 gap: 0.9rem;501 flex: 1;502 min-height: 0;503 text-align: center;504}505.replay-invite .glyphs { display: flex; gap: 0.7rem; }506.replay-invite canvas { image-rendering: pixelated; }507button.replay-btn {508 font-size: 1.6rem;509 padding: 0.35rem 1.6rem 0.25rem;510 border-width: 1px;511 background: var(--bg-inset);512 color: var(--accent);513 border-color: var(--accent);514 box-shadow: 0 0 0 1px var(--bg-inset), 0 0 0 2px var(--accent-dim);515}516button.replay-btn:hover:not(:disabled) { background: var(--accent); color: #000; }517.replay-invite .hint { color: var(--text-dim); font-family: var(--pixel); font-size: 1.05rem; max-width: 40ch; }518519/* simulating-world strip (auto max-speed run when no stored metrics) */520.simulating-note {521 border: 1px solid var(--accent-dim);522 background: var(--bg-inset);523 margin-bottom: 0.8rem;524 padding: 0.45rem 0.9rem;525 font-family: var(--pixel);526 font-size: 1.15rem;527 letter-spacing: 0.08em;528 color: var(--accent);529 text-transform: uppercase;530}531.simulating-note .blink { animation: cursor-blink 1s steps(1) infinite; }532533.hash-line {534 color: var(--text-dim);535 font-family: var(--mono);536 font-size: 0.72rem;537 margin: 0;538 overflow-wrap: anywhere;539}540541/* ------- terminal feeds ------- */542.feed-panel {543 position: relative;544 background: var(--bg-inset);545 border: 1px solid var(--border);546 display: flex;547 flex-direction: column;548 min-height: 0;549 overflow: visible;550}551.feed-head {552 position: absolute;553 top: -0.72em; left: 10px;554 padding: 0 0.5em;555 background: var(--bg);556 font-family: var(--pixel);557 font-size: 1.05rem;558 letter-spacing: 0.12em;559 text-transform: uppercase;560 color: var(--text-dim);561 z-index: 2;562}563.feed-head::before { content: '\25AA '; color: var(--accent-dim); }564.feed-body {565 font-family: var(--pixel);566 font-size: 1.02rem;567 line-height: 1.35;568 letter-spacing: 0.02em;569 padding: 0.9rem 0.6rem 0.35rem;570 height: 190px;571 overflow-y: auto;572 overflow-x: hidden;573}574.feed-body::after {575 content: '\2588';576 color: var(--accent);577 animation: cursor-blink 1.1s steps(1) infinite;578}579@keyframes cursor-blink { 50% { opacity: 0; } }580.feed-line { overflow-wrap: anywhere; color: var(--text); }581.feed-tick { color: var(--text-dim); }582.feed-name { font-weight: 400; }583.feed-swatch {584 display: inline-block;585 width: 7px; height: 7px;586 margin-right: 0.35em;587 vertical-align: baseline;588}589.feed-say .feed-say-text { color: var(--accent); }590.feed-fate { color: var(--danger); }591.feed-log { color: var(--text-dim); }592.feed-panel.in-card { margin-top: 0.85rem; }593.feed-body.compact { height: 108px; font-size: 0.95rem; padding: 0.45rem 0.5rem 0.25rem; }594595/* the world log strip under the viewport */596.world-log .feed-body { height: 150px; }597598/* ------- faction HUD panels ------- */599.tribe-panel {600 position: relative;601 background: var(--bg-inset);602 border: 1px solid var(--border);603 border-left-width: 3px; /* tribe color set inline */604 padding: 0.55rem 0.65rem 0.6rem;605 font-size: 0.85rem;606}607.tribe-panel.dead { opacity: 0.45; filter: grayscale(0.6); }608.tribe-panel .head {609 display: flex; align-items: center; gap: 0.5rem;610 font-family: var(--pixel);611 font-size: 1.2rem;612 letter-spacing: 0.05em;613 text-transform: uppercase;614 min-width: 0;615}616.tribe-panel .head .t-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }617.tribe-panel canvas.portrait { image-rendering: pixelated; width: 30px; height: 30px; flex-shrink: 0; }618.tribe-panel .status-word { font-size: 0.95rem; letter-spacing: 0.1em; }619.tribe-panel .stats {620 display: flex; gap: 0.75rem; margin-top: 0.3rem;621 color: var(--text-dim); flex-wrap: wrap;622 font-family: var(--pixel); font-size: 1rem;623}624.tribe-panel .stat { display: inline-flex; align-items: baseline; gap: 0.3rem; text-transform: uppercase; letter-spacing: 0.04em; }625.tribe-panel .stat .mono { font-family: var(--pixel); font-size: 1.05rem; color: var(--text); }626.dot { display: inline-block; width: 8px; height: 8px; }627.dot.over { background: var(--danger); box-shadow: 0 0 6px var(--danger); }628629/* ------- map tooltip (created by render/map-view.ts) ------- */630.map-tooltip {631 position: fixed;632 z-index: 50;633 pointer-events: none;634 background: rgba(0, 0, 0, 0.95);635 border: 1px solid var(--border-bright);636 padding: 0.3rem 0.55rem;637 font-family: var(--pixel);638 font-size: 1rem;639 line-height: 1.3;640 color: var(--text);641 max-width: 240px;642 white-space: nowrap;643 box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6);644}645.map-tooltip .tt-title { color: var(--accent); }646.map-tooltip .tt-dim { color: var(--text-dim); }647648/* ------- endgame: dismissible overlay over a dimmed viewport ------- */649.viewport-overlay {650 position: absolute;651 inset: 0;652 z-index: 30; /* under the scanline layer (40) — the CRT stays on top */653 display: flex;654 align-items: center;655 justify-content: center;656 padding: 1.2rem;657 background: rgba(3, 4, 5, 0.82);658}659660.result-banner {661 position: relative;662 border: 1px solid var(--accent);663 outline: 1px solid var(--accent-dim);664 outline-offset: 3px;665 background: var(--bg);666 padding: 1rem 1.2rem 0.9rem;667 margin: 4px;668 max-width: min(820px, 100%);669 max-height: 100%;670 display: flex; flex-direction: column;671 min-height: 0;672 box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.1), 8px 8px 0 rgba(0, 0, 0, 0.55);673}674/* wide score table scrolls INSIDE the frame — never widens the layout */675.result-banner .result-scroll { min-height: 0; overflow: auto; scrollbar-gutter: stable; }676.result-banner .result-actions { justify-content: center; margin-top: 0.8rem; flex-wrap: nowrap; }677.result-banner .result-actions button { font-size: 1.15rem; padding: 0.22rem 1rem 0.16rem; }678.result-banner h2 {679 color: var(--accent);680 text-align: center;681 font-size: 2rem;682 margin-bottom: 0.2rem;683 text-shadow: 0 0 16px rgba(224, 164, 88, 0.4);684}685.result-banner .result-sub {686 text-align: center;687 font-family: var(--pixel);688 font-size: 1.1rem;689 color: var(--text-dim);690 letter-spacing: 0.08em;691 text-transform: uppercase;692 margin: 0 0 0.7rem;693}694.result-banner table { margin-top: 0.4rem; }695.result-banner td.mono { font-family: var(--pixel); font-size: 1.05rem; }696.result-banner.failed { border-color: var(--danger); outline-color: var(--danger); }697.result-banner.failed h2 { color: var(--danger); text-shadow: none; }698.result-rank { color: var(--accent); font-family: var(--pixel); }699700/* compact victory chip that stays in the HUD bar after dismissal */701button.victor-chip {702 border-color: var(--accent-dim);703 color: var(--accent);704 max-width: 240px;705 white-space: nowrap;706 overflow: hidden;707 text-overflow: ellipsis;708 padding: 0.1rem 0.6rem 0.06rem;709}710button.victor-chip:hover:not(:disabled) { border-color: var(--accent); }711712/* ==========================================================================713 * CHRONICLE (stats) — in-game telemetry styling714 * ========================================================================== */715.dash { display: flex; flex-direction: column; gap: 1.2rem; }716.dash-empty { padding: 0.8rem; }717718.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; }719.kpi-tile {720 background: var(--chart-bg);721 border: 1px solid var(--border);722 padding: 0.45rem 0.8rem 0.5rem;723}724.kpi-label {725 font-family: var(--pixel); font-size: 0.95rem;726 letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);727}728.kpi-value { font-family: var(--pixel); font-size: 1.9rem; line-height: 1.1; color: var(--text); }729.kpi-sub { font-family: var(--pixel); font-size: 0.95rem; color: var(--text-dim); letter-spacing: 0.04em; }730731.dash-tribe-legend { padding: 0 0.2rem; }732733.lens { display: flex; flex-direction: column; gap: 0.6rem; }734.lens-title {735 font-family: var(--pixel);736 font-size: 1.2rem;737 letter-spacing: 0.18em;738 text-transform: uppercase;739 color: var(--accent);740 margin: 0.3rem 0 0;741 border-bottom: 1px solid var(--border);742 padding-bottom: 0.15rem;743}744.lens-title::before { content: '\2261 '; color: var(--border-bright); }745746.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }747@media (max-width: 1100px) { .chart-grid { grid-template-columns: 1fr; } }748749.chart-card {750 background: var(--chart-bg);751 border: 1px solid var(--border);752 padding: 0.5rem 0.75rem 0.5rem;753 min-width: 0;754}755.chart-title {756 font-family: var(--pixel);757 font-size: 1.1rem;758 letter-spacing: 0.06em;759 text-transform: uppercase;760 color: var(--text);761 margin-bottom: 0.3rem;762}763.chart-title::before { content: '\25B8 '; color: var(--accent-dim); }764.chart-plot { min-width: 0; }765canvas.chart { display: block; width: 100%; }766767.chart-legend {768 display: flex; flex-wrap: wrap; gap: 0.15rem 0.8rem;769 padding: 0.1rem 0 0.3rem;770 font-family: var(--pixel);771 font-size: 0.98rem;772 letter-spacing: 0.04em;773 color: var(--text-dim);774}775.legend-item { display: inline-flex; align-items: center; gap: 0.35em; }776.legend-key { display: inline-block; width: 9px; height: 9px; flex-shrink: 0; }777.legend-key.line { height: 3px; width: 12px; }778779/* small-multiples grids (per-tribe cards) */780.sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.6rem; }781.sm-grid.econ { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }782.sm-card {783 background: var(--bg-inset);784 border: 1px solid var(--border-dim);785 border-left: 3px solid var(--border);786 padding: 0.45rem 0.6rem;787 min-width: 0;788}789.sm-head {790 display: flex; align-items: center; gap: 0.4em;791 font-family: var(--pixel);792 font-size: 1.05rem;793 letter-spacing: 0.05em;794 text-transform: uppercase;795 margin-bottom: 0.3rem;796}797798.spark-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.12rem 0; }799.spark-label {800 width: 64px; flex-shrink: 0;801 font-family: var(--pixel); font-size: 0.95rem;802 letter-spacing: 0.04em; color: var(--text-dim); text-transform: uppercase;803}804.spark-row .spark { flex: 1; min-width: 0; }805.spark-value { width: 48px; flex-shrink: 0; text-align: right; font-family: var(--pixel); font-size: 1rem; color: var(--text); }806807.metrics-table td, .metrics-table th { font-variant-numeric: tabular-nums; }808.metrics-table td.mono { font-family: var(--pixel); font-size: 1.02rem; }809.metrics-table tr.dead-row td { opacity: 0.45; }810811/* ------- chart tooltip ------- */812.chart-tip {813 position: fixed;814 z-index: 60;815 pointer-events: none;816 background: rgba(0, 0, 0, 0.95);817 border: 1px solid var(--border-bright);818 padding: 0.3rem 0.55rem;819 font-family: var(--pixel);820 font-size: 1rem;821 line-height: 1.35;822 color: var(--text);823 max-width: 260px;824 box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6);825}826.chart-tip .ct-title { color: var(--accent); margin-bottom: 0.1rem; }827.chart-tip .ct-row { display: flex; align-items: center; gap: 0.45em; white-space: nowrap; }828.chart-tip .ct-key { display: inline-block; width: 10px; height: 3px; flex-shrink: 0; }829.chart-tip .ct-val { min-width: 3.5em; }830.chart-tip .ct-name { color: var(--text-dim); }831832/* ------------------------------------------------------------------------833 * map-view (Urizen renderer) — owned by web/src/render/map-view.ts.834 * The canvas renders 1:1 at 12px/tile; the view is a camera (zoom + center)835 * applied as a CSS transform by map-view.ts inside this clipped host.836 * Wheel zooms at the cursor, drag pans, the corner minimap navigates.837 * ---------------------------------------------------------------------- */838.map-host {839 position: relative;840 background: var(--bg-inset);841 border: 1px solid var(--border);842 border-radius: var(--radius);843 flex: 1;844 min-height: 0;845 overflow: hidden;846 cursor: grab;847 touch-action: none; /* pointer events drive pan/pinch — no native gestures */848 user-select: none;849}850.map-host.panning { cursor: grabbing; }851.map-host canvas.urizen-map {852 position: absolute;853 left: 0;854 top: 0;855 transform-origin: 0 0; /* map-view.ts sets translate+scale */856 image-rendering: pixelated;857 display: block;858 will-change: transform;859}860/* corner minimap: snapshot + viewport rectangle (hidden at zoom-to-fit) */861.map-host canvas.map-minimap {862 position: absolute;863 right: 10px;864 bottom: 10px;865 width: 140px;866 height: 140px;867 background: #000;868 border: 1px solid var(--border-bright);869 box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6);870 cursor: crosshair;871 z-index: 3;872}873874/* ------- chronicle identity cards (rail content in chronicle mode) ------- */875.identity-card .identity-desc {876 margin: 0.35rem 0 0.15rem;877 font-size: 0.82rem;878 line-height: 1.45;879 color: var(--text);880}881.identity-card .identity-ref { font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }882.rail-group { display: flex; flex-direction: column; gap: 0.7rem; }883884/* Connect: semantic column headers */885.home-col .col-title {886 margin: 0 0 0.2rem;887 font-size: 0.85rem;888 letter-spacing: 0.2em;889 color: var(--text-dim, #888);890 text-transform: uppercase;891}892893/* Create: the scripts table earns the wider column; cells never wrap mid-word */894.create-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }895table.list td.nowrap, table.list td.mono { white-space: nowrap; }896table.list td { overflow-wrap: normal; word-break: keep-all; }