:root { color-scheme: dark; --bg: #101916; --panel: #18221e; --panel-raised: #202b26; --line: #334039; --muted: #8b9a90; --text: #e9eee8; --lime: #d2e58c; --blue: #5b94e4; font-family: 'Avenir Next', 'Segoe UI', system-ui, sans-serif; } * { box-sizing: border-box; } [hidden] { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(ellipse at 49% -15%, #31443a 0, var(--bg) 58%); color: var(--text); } button { font: inherit; } .shell { width: min(1280px, 100%); margin: auto; padding: 28px 36px 20px; } body:has(#title-screen:not([hidden])) { background: #000; } body:has(#mode-screen:not([hidden])) { background: radial-gradient(ellipse at 50% 35%, #1d3028 0, #101a16 74%); } body:has(#title-screen:not([hidden])) .shell, body:has(#mode-screen:not([hidden])) .shell { width: 100%; max-width: none; margin: 0; padding: 0; } .topbar, .brand, .build-tag, .intro, .panel-heading, .map-foot, footer, .section-title, .section-row, .unit-top, .unit-meta, .status-label { display: flex; align-items: center; } .topbar, .intro, .panel-heading, .map-foot, footer, .section-title { justify-content: space-between; } .topbar { padding-bottom: 25px; border-bottom: 1px solid #45534a; } .brand { gap: 12px; color: inherit; text-decoration: none; } .brand-mark { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid #a3bc7d; border-radius: 12px 4px 12px 4px; color: var(--lime); font: 500 14px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -1px; } .brand strong, .brand small { display: block; letter-spacing: .13em; } .brand strong { font-size: 12px; } .brand small { margin-top: 4px; color: var(--muted); font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; } .build-tag, .raw-tag { gap: 9px; color: #aab7ad; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; } .build-version { padding: 4px 7px; border: 1px solid #435347; border-radius: 4px; color: var(--lime); } .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #b9d878; box-shadow: 0 0 9px #b9d87880; } .intro { padding: 27px 0 23px; } .eyebrow { color: #9aaa9e; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; } h1, h2, p { margin: 0; } h1 { margin-top: 7px; font-size: clamp(26px, 4vw, 37px); line-height: 1.08; letter-spacing: -.045em; } .intro-copy { margin-top: 8px; color: #a4b0a7; font-size: 13px; } .turn-card { min-width: 104px; padding: 10px 14px; border: 1px solid #536046; border-radius: 8px; background: #222c20a6; } .turn-card strong { display: block; margin-top: 4px; color: var(--lime); font: 500 23px ui-monospace, SFMono-Regular, Menlo, monospace; } .layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: stretch; } .board-panel, .control-panel { border: 1px solid var(--line); border-radius: 12px; background: #18211eeF; box-shadow: 0 18px 50px #0002; } .board-panel { min-width: 0; padding: 17px; } .panel-heading { margin-bottom: 14px; } h2 { margin-top: 4px; font-size: 16px; letter-spacing: -.025em; } h2 span { color: var(--lime); font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; } .raw-tag { padding: 6px 8px; border: 1px solid #455449; border-radius: 4px; color: #c2d0bc; font-size: 9px; } .board-scroll { overflow: auto; max-height: min(70vh, 760px); padding: 7px; border: 1px solid #3b493f; border-radius: 8px; background: #0d1412; } .board { display: grid; width: 100%; aspect-ratio: 1; grid-template-columns: repeat(var(--cols, 19), minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid #637158; border-radius: 5px; background: #28372e; } .tile { position: relative; min-width: 0; padding: 0; border: 0; border-radius: 1px; cursor: pointer; transition: filter .12s ease, outline-color .12s ease; } .tile:hover { z-index: 1; filter: brightness(1.28); outline: 1px solid #e2edb3; } .tile.move-range::after { position: absolute; inset: 16%; border: 1px solid #f2dc8c; border-radius: 3px; background: #f2dc8c26; content: ''; pointer-events: none; } .tile.selected-tile { outline: 2px solid #fff2a5; z-index: 2; } .unit-token { position: absolute; inset: 12%; z-index: 1; display: grid; place-items: center; border: 1px solid #ffffffa8; border-radius: 7px 3px 7px 3px; color: #fff; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; text-shadow: 0 1px 2px #0009; box-shadow: 0 2px 5px #0006; pointer-events: none; } .section-1 { background: #3878bf; } .section-2 { background: #b95147; } .section-3 { background: #43895b; } .section-4 { background: #b18a3d; } .map-foot { padding: 12px 2px 0; color: #9ca99f; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; } .map-foot span:first-child { display: flex; align-items: center; gap: 7px; } .legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; } .terrain-dot { background: linear-gradient(135deg,#657b50,#77805a); } .control-panel { display: flex; flex-direction: column; padding: 17px; } .side-heading { margin-bottom: 17px; } .command-icon { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #49584b; border-radius: 7px; color: var(--lime); } .status-box { min-height: 87px; padding: 12px; border: 1px solid #485647; border-radius: 8px; background: #222d24; } .status-label { gap: 7px; color: #a9bb9a; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; } .status-label .live-dot { width: 6px; height: 6px; } #message { margin-top: 10px; color: #e0e8dc; font-size: 12px; line-height: 1.45; } .section-title { margin: 20px 0 9px; color: #a2afa5; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; } .sections { display: grid; gap: 5px; } .section-row { justify-content: flex-start; gap: 9px; padding: 7px 8px; border-radius: 6px; color: #d5ddd4; font-size: 11px; } .section-swatch { width: 10px; height: 10px; border: 1px solid #ffffff66; border-radius: 3px; } .section-row small { margin-left: auto; color: #9aa79d; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; } .unit-card { margin-top: 17px; min-height: 101px; padding: 11px; border: 1px solid #3b4940; border-radius: 8px; background: #131b18; } .empty-unit { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: #91a096; font-size: 11px; line-height: 1.4; } .crosshair { color: #9fb58b; font-size: 24px; } .unit-top { gap: 8px; margin-top: 10px; } .unit-top strong { font-size: 13px; } .unit-chip { margin-left: auto; padding: 4px 6px; border-radius: 4px; color: white; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; } .unit-meta { justify-content: space-between; margin-top: 9px; color: #a8b4aa; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; } .health-track { height: 3px; margin-top: 7px; border-radius: 3px; background: #374339; overflow: hidden; } .health-fill { height: 100%; background: #bed783; } .actions { display: grid; gap: 7px; margin-top: auto; padding-top: 17px; } .primary-button, .secondary-button { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 7px; cursor: pointer; } .primary-button { border: 1px solid #d8e5a1; background: var(--lime); color: #1a251b; font-weight: 700; font-size: 12px; } .primary-button:hover { background: #e2efaa; } kbd { min-width: 21px; padding: 3px 5px; border: 1px solid #687d46; border-radius: 4px; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; } .secondary-button { border: 1px solid #47544b; background: #202a25; color: #d2ddd3; font-size: 11px; } .secondary-button:hover { background: #2a3830; } .secondary-button span:last-child { font-size: 16px; } .prototype-note { display: flex; gap: 8px; margin-top: 13px; color: #9da99f; font-size: 10px; line-height: 1.45; } .prototype-note > span:first-child { display: grid; flex: 0 0 15px; height: 15px; place-items: center; border: 1px solid #a18b55; border-radius: 50%; color: #ddc475; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; } .prototype-note strong { color: #d5d9c5; font-weight: 600; } footer { margin-top: 15px; color: #718076; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .07em; } footer b { color: #b9c99b; font-weight: 400; } .error { margin: 60px auto; max-width: 520px; padding: 24px; border: 1px solid #874d48; border-radius: 10px; background: #2a1c1b; color: #efd3cf; line-height: 1.5; } @media (max-width: 880px) { .shell { padding: 20px 18px; } .layout { grid-template-columns: 1fr; } .control-panel { min-height: 550px; } .board-scroll { max-height: none; } } @media (max-width: 520px) { .shell { padding: 16px 10px; } .topbar { padding-bottom: 17px; } .build-tag { font-size: 8px; gap: 5px; } .intro-copy { max-width: 270px; font-size: 11px; } .turn-card { min-width: 78px; padding: 8px; } .turn-card .eyebrow { font-size: 8px; } .board-panel, .control-panel { padding: 12px; } .board-scroll { padding: 4px; } .unit-token { font-size: 7px; } footer { align-items: flex-start; gap: 8px; font-size: 7px; } } #battle-screen[hidden], .mode-screen[hidden], .title-screen[hidden] { display: none; } .title-screen, .mode-screen { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 0; } .dual-screen { display: grid; width: 100%; margin: 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; border: 0; border-radius: 0; background: #000; box-shadow: none; } .ds-screen { position: relative; display: block; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; border: 0; border-radius: 0; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; } .title-hint { margin: 0 auto; color: #b6beb1; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; text-align: center; } .title-hint span { margin: 0 8px; color: #c5d38f; } .mode-deck { align-items: stretch; } .mode-screen .mode-deck { width: min(79vw, 1216px); } .mode-backdrop { background-image: url("./assets/mode_select_bg_main.png"); background-position: center center; background-size: 100% auto; } .mode-right { background-image: url("./assets/mode_select_bg_sub.png"); } .mode-left { padding: 0; color: #f0ede2; background-image: url("./assets/mode_select_bg_main.png"); background-size: 100% auto; background-position: center center; } .mode-logo-small { position: absolute; top: 5%; left: 6%; color: #fff0d7; font: italic 900 clamp(10px, 1.4vw, 17px) Impact, Haettenschweiler, sans-serif; text-shadow: 1px 2px #140f0b, 2px 2px #a1241b; } .mode-logo-small strong { display: block; margin: 2px 0 0 12px; font-size: .72em; letter-spacing: .05em; } .mode-feature { position: absolute; top: 29%; right: 9.4%; left: 6.25%; height: 42%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 3%; border: 0; border-radius: 0; background: transparent; } .screen-kicker, .menu-topline, .menu-index { color: #cbdc9d; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; } .mode-heading-art { display: block; margin: 0; color: #d8e5a2; font: 700 clamp(13px, 1.25vw, 16px) ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 2px #000; } .mode-feature p { margin-top: 7px; max-width: 100%; color: #e6e7dc; font-size: clamp(9px, 1.1vw, 13px); line-height: 1.25; text-shadow: 0 1px 2px #000; } .mode-launch { display: flex; } .menu-proof { display: none; } .mode-right { padding: 0; } .menu-topline { display: flex; align-items: center; justify-content: space-between; position: absolute; inset: 4% 5% auto; z-index: 1; padding: 0 0 7px; border-bottom: 1px solid #d2d29d80; } .menu-title-art { color: #d8e5a2; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; } .menu-index { color: #c1c9bb; } .mode-list { position: absolute; inset: 15% 4% 13%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent; } .mode-choice { display: block; flex: 0 0 auto; width: 62%; padding: 0 9px; border: 0; border-radius: 0; background: transparent; cursor: pointer; text-align: left; } .mode-choice:hover, .mode-choice.active { border-color: #d1e18f; color: #f2f7dc; background: linear-gradient(90deg, #70824d, #303a2c); } .choice-number { color: #aab78a; font-size: 8px; } .choice-arrow { margin-left: auto; color: #d1e18f; font-size: 20px; line-height: 12px; } .submode-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; } .submode-choice { padding: 5px 10px; border: 1px solid #9dafb4; border-radius: 0; color: #f5f3e9; background: linear-gradient(#647c85, #405760); box-shadow: inset 1px 1px #e0e7dd66, inset -2px -2px #1b2b3199; font: 700 10px 'Avenir Next', 'Segoe UI', system-ui, sans-serif; text-shadow: 0 1px 1px #142026; cursor: pointer; } .submode-choice[aria-current="true"], .submode-choice:hover { border-color: #e0d295; color: #fffdeb; background: linear-gradient(#7d9399, #526871); box-shadow: inset 1px 1px #f4eed07d, inset -2px -2px #25383e99; } .return-title, .menu-disclaimer, .title-screen > .title-hint, .mode-screen > .title-hint { display: none; } @media (max-width: 720px) { .title-screen, .mode-screen { min-height: calc(100vh - 32px); } .dual-screen { width: 100%; gap: 4px; padding: 4px; } .mode-feature { inset: 20% 5% 8%; padding: 6%; } .mode-list { inset: 14% 4% 12%; padding: 4%; gap: 3px; } .mode-choice { min-height: 28px; padding: 0 5px; gap: 5px; } .menu-proof { font-size: 6px; } } /* Recovered DS presentation: keep each screen at its 4:3 aspect and use the extracted backgrounds/label graphics at a single, readable scale. */ .title-screen, .mode-screen { min-height: 100vh; padding: 14px 0 20px; gap: 14px; } .mode-screen { padding-top: 36px; } .dual-screen { width: min(100%, 1536px); gap: 12px; padding: 12px; border: 1px solid #84908070; border-radius: 10px; background: #111612; box-shadow: 0 20px 70px #0009; } .ds-screen { aspect-ratio: 4 / 3; border: 1px solid #9fa49366; border-radius: 4px; } .title-screen > .title-hint, .mode-screen > .title-hint { display: block; min-height: 12px; } .mode-deck { align-items: stretch; } .mode-backdrop { background-size: 100% 100%; } .mode-feature { top: 16%; right: 7%; left: 7%; height: 75%; padding: 5%; border: 1px solid #c8c7a080; border-radius: 4px; background: #0c1310dd; box-shadow: 0 6px 20px #0007; } .mode-heading-art { width: fit-content; max-width: 100%; max-height: none; } .mode-feature p { margin-top: 12px; max-width: 38ch; font-size: clamp(11px, 1.15vw, 15px); line-height: 1.45; } .submode-list { gap: 7px; margin-top: 16px; } .submode-choice { min-width: 112px; min-height: 36px; padding: 7px 14px; border: 1px solid #9dafb4; border-radius: 0; font-size: 10px; text-align: center; } .submode-choice img { width: 108px; } .submode-choice:disabled { opacity: .38; cursor: not-allowed; } .mode-right { padding: 0; } .menu-topline { inset: 6% 6% auto; justify-content: space-between; padding-bottom: 7px; } .menu-title-art { width: auto; } .mode-list { inset: 15% 5% 9%; align-items: stretch; gap: 5px; padding: 6% 7%; border: 1px solid #d4d1a077; border-radius: 5px; background: #111713df; } .mode-choice { position: relative; width: 100%; min-height: 30px; padding: 0 9px; border: 1px solid transparent; border-radius: 3px; color: #e6e6d8; background: #ffffff14; overflow: hidden; font: 700 clamp(12px, 1.05vw, 15px) ui-monospace, SFMono-Regular, Menlo, monospace; text-align: left; } .mode-choice::after { position: absolute; right: 9px; top: 50%; color: #e0ecaa; content: '›'; font: 700 22px/1 Arial, sans-serif; transform: translateY(-53%); pointer-events: none; } .mode-choice:hover, .mode-choice.active:not(:disabled) { border-color: #d1e18f; background: #718348bb; } .mode-choice:disabled { opacity: .48; cursor: not-allowed; } .mode-choice:focus-visible, .submode-choice:focus-visible, button:focus-visible { outline: 2px solid #ecf2ba; outline-offset: 2px; } .mode-screen > .menu-disclaimer { display: block; color: #9ca99f; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; } .multiplayer-screen { width: min(1100px, 100%); min-height: 100vh; margin: auto; padding: clamp(20px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: 18px; } .multi-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; } .multi-header h1 { margin-top: 5px; color: #f0f0df; } .multi-kicker { display: block; color: #cfdf98; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; } .multi-back, .multi-quiet { border: 1px solid #47544b; border-radius: 5px; padding: 9px 12px; color: #dce5d4; background: #202a25; font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; } .transport-note, .multi-card { border: 1px solid #596452; border-radius: 7px; background: linear-gradient(130deg, #222a24f2, #141b18f5); box-shadow: 0 18px 50px #0003; } .transport-note { padding: 13px 16px; color: #bbc5b7; font-size: 12px; line-height: 1.5; } .transport-note strong { color: #e8efce; } .multi-card { padding: clamp(18px, 4vw, 34px); } .entry-card { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; } .entry-column { display: grid; gap: 10px; } .entry-column label, .selection-box label { color: #aebba5; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; } .entry-column input, .selection-box select { min-width: 0; min-height: 42px; border: 1px solid #596754; border-radius: 4px; padding: 8px 11px; color: #f1f2e5; background: #0d1411; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; } .entry-column input:focus, .selection-box select:focus { outline: 2px solid #cadb87; } .entry-divider { color: #7f8c7f; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; } .multi-primary, .multi-secondary { min-height: 40px; border: 1px solid #d4e69b; border-radius: 4px; padding: 9px 14px; font: 800 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; cursor: pointer; } .multi-primary { color: #172016; background: #d3e58f; } .multi-secondary { color: #e4eadc; border-color: #64705e; background: #28332c; } .multi-primary:disabled, .multi-secondary:disabled { opacity: .42; cursor: not-allowed; } .lobby-title { display: flex; align-items: center; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid #455248; } .lobby-title strong { display: block; margin-top: 5px; color: #eaf2c5; font: 700 24px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; } .connection-status { border: 1px solid #786c4e; border-radius: 12px; padding: 5px 9px; color: #dfc88c; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; } .connection-status.connected { border-color: #597652; color: #cce49a; } .player-list { display: grid; gap: 7px; margin: 17px 0; } .player-row { display: flex; justify-content: space-between; gap: 12px; border-radius: 4px; padding: 12px; color: #e5e8dc; background: #ffffff0c; font-size: 12px; } .player-row span { color: #aab89d; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; } .selection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .selection-box { display: grid; gap: 8px; } .selection-box small { color: #b8c4b4; font-size: 10px; line-height: 1.4; } .selection-box select:disabled { color: #9ba397; opacity: .8; } .data-gate, .rule-gate { margin-top: 13px; border-left: 2px solid #c0a762; padding: 7px 10px; color: #ddce9d; background: #a47c1a13; font-size: 11px; line-height: 1.5; } .rule-gate { margin-top: 7px; border-color: #728264; color: #adb9a7; background: #0002; } .lobby-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; } .multi-status { min-height: 18px; color: #9eaa9e; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.5; } .multi-status[data-kind="good"] { color: #c8e094; } .multi-status[data-kind="bad"] { color: #efaaa0; } .result-card h2 { margin: 10px 0; color: #eff1df; font-size: 27px; } .result-card p { color: #bcc8b9; font-size: 13px; line-height: 1.5; } .multiplayer-match-screen[hidden] { display: none !important; } .multiplayer-match-screen { width: min(1280px, 100%); min-height: 100vh; margin: auto; padding: clamp(16px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 18px; } .match-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; } .match-header h1 { margin: 7px 0 0; color: #eff1df; font-size: clamp(23px, 3vw, 38px); } .match-header-state { display: grid; gap: 5px; text-align: right; color: #b3beaa; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; } .match-header-state strong { color: #dbe99e; font-size: 12px; } .match-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 290px); gap: 14px; align-items: stretch; } .match-board-panel, .match-command-panel { min-width: 0; border: 1px solid #596452; border-radius: 6px; background: linear-gradient(130deg, #222a24f2, #141b18f5); box-shadow: 0 18px 50px #0003; } .match-board-panel { padding: clamp(10px, 2vw, 20px); } .match-board-heading { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; color: #cbd5c2; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; } .match-board-scroll { max-width: 100%; max-height: 62vh; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 8px; border: 1px solid #39453b; background: #090e0b; } .match-board { display: grid; grid-template-columns: repeat(var(--cols), var(--cell-size, 28px)); width: max-content; margin: auto; } .board-canvas { display: block; margin: 0 auto; max-width: 100%; max-height: 100%; image-rendering: pixelated; cursor: pointer; } .board-canvas:focus-visible { outline: 2px solid #f3df90; outline-offset: -2px; } .match-cell { position: relative; width: var(--cell-size, 28px); height: var(--cell-size, 28px); padding: 0; border: 1px solid #17201955; border-radius: 0; cursor: pointer; } .match-cell:hover { z-index: 1; outline: 2px solid #e7efb0; } .match-cell.selected { z-index: 2; outline: 2px solid #fff2a5; } .match-cell.moveable::before, .match-cell.attackable::before { position: absolute; inset: 2px; z-index: 1; border: 1px solid; border-radius: 3px; content: ""; pointer-events: none; } .match-cell.moveable::before { border-color: #f0d982; background: #e8c84b38; } .match-cell.attackable::before { border-color: #ff9588; background: #d84c4438; } .match-cell.move-route::after { position: absolute; z-index: 3; background: #fff0a6; box-shadow: 0 0 5px #f6d677; content: ""; pointer-events: none; } .match-cell.move-route[data-route-direction="east"]::after { top: calc(50% - 1px); left: 50%; width: 50%; height: 2px; } .match-cell.move-route[data-route-direction="west"]::after { top: calc(50% - 1px); right: 50%; width: 50%; height: 2px; } .match-cell.move-route[data-route-direction="south"]::after { top: 50%; left: calc(50% - 1px); width: 2px; height: 50%; } .match-cell.move-route[data-route-direction="north"]::after { bottom: 50%; left: calc(50% - 1px); width: 2px; height: 50%; } .match-cell.route-origin::before { position: absolute; z-index: 4; top: calc(50% - 4px); left: calc(50% - 4px); width: 8px; height: 8px; border: 1px solid #fff5c5; border-radius: 50%; background: #d8b94a; box-shadow: 0 0 5px #f6d677; content: ""; pointer-events: none; } .match-cell.route-destination::after { top: calc(50% - 4px); left: calc(50% - 4px); width: 8px; height: 8px; border: 1px solid #fff5c5; border-radius: 50%; background: #d8b94a; box-shadow: 0 0 5px #f6d677; } .match-unit { position: absolute; inset: 3px; display: grid; place-items: center; border: 1px solid #ffffffbb; border-radius: 45% 45% 35% 35%; color: #fff; font: 700 9px ui-monospace, SFMono-Regular, Menlo, monospace; text-shadow: 0 1px 2px #000; box-shadow: 0 1px 4px #0008; pointer-events: none; } .match-unit.slot-0 { background: #3078c9; } .match-unit.slot-1 { background: #c44f43; } .match-map-note { margin: 9px 0 0; color: #98a395; font: 9px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; } .match-command-panel { display: flex; flex-direction: column; gap: 13px; padding: 18px; } .match-status { min-height: 40px; margin: 0; color: #e3e8d7; font-size: 13px; line-height: 1.5; } .unit-production { display: grid; gap: 6px; padding: 10px; border: 1px solid #d8c56b66; border-radius: 8px; background: #28301a; } .unit-production[hidden] { display: none; } .production-heading { display: flex; justify-content: space-between; color: #f4e7a1; font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; } .production-heading span, .unit-production small { color: #c3c9ad; font: 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; } .unit-production button { min-height: 34px; border: 1px solid #8c8150; border-radius: 5px; color: #f1f0d8; background: #394127; font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: left; padding: 0 9px; } .unit-production button:disabled { opacity: .42; cursor: not-allowed; } .match-squad-list { display: grid; gap: 6px; } .match-squad-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-left: 3px solid #65715f; color: #e5e8dc; background: #ffffff0b; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; } .match-squad-row.slot-0 { border-color: #428ee0; } .match-squad-row.slot-1 { border-color: #d45c4f; } .match-squad-row small { color: #bbc6ae; } .match-actions { display: grid; gap: 8px; margin-top: auto; } @media (max-width: 800px) { .match-layout { grid-template-columns: minmax(0, 1fr); } .match-command-panel { min-height: 190px; } } @media (max-width: 520px) { .multiplayer-match-screen { min-height: 100svh; padding: 14px 10px; } .match-header { align-items: start; flex-direction: column; } .match-header-state { text-align: left; } .match-unit { inset: 2px; font-size: 8px; } } body:has(#multiplayer-match-screen:not([hidden])) { background: #000; overflow: hidden; } /* The match screen is full-bleed: kill the page (html) scrollbar too, not just the body one. */ html:has(#multiplayer-match-screen:not([hidden])) { overflow: hidden; height: 100%; } #multiplayer-match-screen:not([hidden]) { padding: 0; overflow: hidden; } #multiplayer-match-screen:not([hidden]) { position: fixed; z-index: 100; inset: 0; width: 100vw; height: 100vh; min-height: 0; margin: 0; padding: 0; display: block; background: #000; } #multiplayer-match-screen .match-commanders { position: absolute; z-index: 2; inset: auto 0 0; display: flex; align-items: end; justify-content: space-between; padding: 0 clamp(8px, 2.5vw, 38px); pointer-events: none; } .match-commander { position: relative; display: grid; justify-items: center; width: clamp(86px, 12vw, 142px); min-height: 204px; padding: 6px 4px 8px; overflow: hidden; border: 1px solid #ffffff35; border-bottom: 0; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, #13221ac9, #0b120ee8); box-shadow: 0 0 20px #0008; color: #f3f0d7; font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; text-shadow: 0 2px 3px #000; } .match-commander[hidden] { display: none; } .match-commander canvas { position: absolute; inset: auto 0 0; display: block; width: 100% !important; max-width: 100%; height: auto !important; object-fit: contain; object-position: bottom; } .match-commander span { position: relative; z-index: 1; margin-top: auto; padding: 3px 7px; border-radius: 3px; background: #101710df; letter-spacing: .08em; } .match-commander.slot-0 { border-color: #d45c4faa; } /* slot 0 = red army (matches board, battle scene and emblem) */ .match-commander.slot-1 { border-color: #428ee0aa; } .match-commander[data-seat]::before { position: absolute; z-index: 4; top: 3px; left: 4px; padding: 2px 4px; border-radius: 3px; color: #fff; background: var(--seat-color, #505a50); content: "P" attr(data-seat); font: 700 9px ui-monospace, monospace; } .match-commander[data-eliminated="true"] { opacity: .3; } .match-commanders[hidden] { display: none; } .match-player-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 7px; border: 1px solid #52634e; border-radius: 5px; background: #0d1711d9; } .match-player-roster[hidden] { display: none; } #multiplayer-match-screen.eight-player .match-player-roster { position: fixed; z-index: 116; top: 16px; right: 16px; width: min(280px, calc(100vw - 32px)); box-sizing: border-box; box-shadow: 0 8px 24px #0009; backdrop-filter: blur(7px); } .match-player-seat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 5px; min-width: 0; padding: 4px; border-left: 3px solid var(--seat-color); color: #f3f0d7; background: #ffffff0b; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; } .match-player-seat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .match-player-seat small { color: #aab69f; font-size: 8px; } .match-player-seat[data-eliminated="true"] { opacity: .42; } .match-player-seat[data-active="true"] { outline: 1px solid #dbe99e; background: #dbe99e22; } .match-commander[data-active="true"] { border-color: #e1ed9b; box-shadow: 0 0 28px #d1e97555, 0 0 14px #000b; } .match-commander[data-active="true"] canvas { animation: commander-idle 2.8s ease-in-out infinite; transform-origin: 50% 100%; } .match-commander[data-active="true"][data-commander="brenner"] canvas { animation-duration: 3.1s; } .match-commander[data-active="true"][data-commander="lin"] canvas { animation-duration: 2.6s; } .match-commander[data-active="true"][data-commander="isabella"] canvas { animation-duration: 2.9s; } .match-commander[data-active="false"] { opacity: .68; } @keyframes commander-idle { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.015); } } @media (prefers-reduced-motion: reduce) { .match-commander[data-active="true"] canvas { animation: none; } } #multiplayer-match-screen .match-header, #multiplayer-match-screen .match-board-heading, #multiplayer-match-screen .match-map-note, #multiplayer-match-screen .match-command-panel { display: none; } #multiplayer-match-screen.factory-selected .match-command-panel { position: fixed; z-index: 115; top: 16px; right: 16px; bottom: 214px; display: flex; width: min(320px, calc(100vw - 32px)); min-height: 280px; overflow-y: auto; border: 1px solid #b5c47b88; border-radius: 10px; background: #111a13ed; box-shadow: 0 10px 35px #000b; backdrop-filter: blur(8px); } #multiplayer-match-screen .match-layout, #multiplayer-match-screen .match-board-panel, #multiplayer-match-screen .match-board-scroll, #multiplayer-match-screen #match-board { display: block; width: 100vw; height: 100vh; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; background: #000; scrollbar-width: none; -ms-overflow-style: none; } #multiplayer-match-screen #match-board::-webkit-scrollbar, #multiplayer-match-screen .match-board-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; } /* Native art is never resampled down: the canvas keeps its own pixel size (tile px * zoom) and the container scrolls. The player starts looking straight at their pieces and can zoom out. */ #multiplayer-match-screen #match-board .board-canvas { display: block; margin: 0; height: auto; width: auto; max-width: none; max-height: none; } /* Floating magnifier, top-right of the match screen: zoom in/out and reset; the board is panned by dragging. */ .board-zoom { position: fixed; top: 12px; right: 12px; z-index: 40; display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border: 1px solid #596452; border-radius: 999px; background: #101712ee; box-shadow: 0 6px 20px #0008; color: #e9f0e2; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; } .board-zoom-glass { font-size: 16px; line-height: 1; filter: grayscale(0.2) brightness(1.2); } .board-zoom button { min-width: 28px; height: 26px; padding: 0 8px; border: 1px solid #596452; border-radius: 999px; background: #1b241e; color: #e9f0e2; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; } .board-zoom button:hover { background: #2a352c; } .board-zoom-hint { opacity: 0.55; font-size: 10px; } #multiplayer-match-screen #match-board { cursor: grab; touch-action: none; } #multiplayer-match-screen #match-board.panning { cursor: grabbing; } .match-pause-menu:not([hidden]) { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; background: #0009; } .match-disconnect-banner { position: fixed; z-index: 121; top: max(12px, env(safe-area-inset-top)); left: 50%; display: grid; gap: 4px; width: min(620px, calc(100vw - 24px)); padding: 12px 16px; transform: translateX(-50%); border: 2px solid #f0bd72; background: #2b1d13f2; box-shadow: 0 4px 16px #000b; color: #fff3dc; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; } .match-disconnect-banner[hidden] { display: none; } .match-disconnect-banner strong { color: #ffd487; font-size: 13px; letter-spacing: .08em; } #multiplayer-match-screen[data-connection-lost="true"] #match-board { pointer-events: none; } .match-pause-card { display: grid; width: min(340px, calc(100vw - 32px)); gap: 8px; padding: 22px; border: 3px solid #c4d5a1; background: #17201d; box-shadow: 0 8px 0 #080c0a, 0 0 0 3px #080c0a; color: #f0f2e4; font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace; } .match-pause-card h2 { margin: 0 0 8px; color: #d8e990; font: inherit; letter-spacing: .1em; } .match-pause-card button { min-height: 42px; border: 2px solid #94a79d; background: #415357; color: #fff; cursor: pointer; font: inherit; } .match-pause-card button:hover, .match-pause-card button:focus-visible { border-color: #e0edaa; background: #586c70; outline: 2px solid #e0edaa; } @media (max-width: 720px) { .title-screen, .mode-screen { min-height: 100svh; justify-content: center; padding: 12px 0; gap: 10px; } .dual-screen { width: 100%; gap: 4px; padding: 4px; border-radius: 5px; } .mode-screen .mode-deck { width: 100%; } .mode-feature { inset: 18% 5% 7%; height: auto; padding: 5%; } .mode-heading-art { max-height: 30px; } .mode-feature p { margin-top: 7px; font-size: clamp(8px, 1.6vw, 12px); } .submode-list { margin-top: 8px; } .submode-choice { min-width: 98px; min-height: 32px; padding: 6px 10px; } .submode-choice img { width: 76px; } .mode-list { inset: 15% 4% 8%; gap: 3px; padding: 4%; } .mode-choice { min-height: 20px; } .mode-screen > .menu-disclaimer { max-width: 85%; font-size: 7px; } .multiplayer-screen { min-height: 100svh; padding: 18px 14px; gap: 12px; } .entry-card { grid-template-columns: 1fr; gap: 14px; } .entry-divider { text-align: center; } .selection-grid { grid-template-columns: 1fr; } } /* Opening visual: the local title reference is a supplied composite capture, not a recovered logo sprite. Use it intact so the visible title matches the user's game reference while keeping the start target interactive. */ body:has(#title-screen:not([hidden])) .title-scene, body:has(#title-screen:not([hidden])) .title-deck > .copyright, body:has(#title-screen:not([hidden])) .touch-prompt-half { display: none; } body:has(#title-screen:not([hidden])) #touch-to-start { top: 40.5%; left: 61.5%; width: 28%; height: 11%; opacity: 0; } /* Browser room screens reuse the supplied two-screen menu framing and its extracted mode backgrounds. Room content placement is a remake inference, not a recovered native WFC lobby layout. */ body:has(#multiplayer-screen:not([hidden])) { min-height: 100svh; background: #000; } body:has(#multiplayer-screen:not([hidden])) .shell { display: grid; width: 100%; max-width: none; min-height: 100svh; margin: 0; padding: 0; place-items: center; } body:has(#multiplayer-screen:not([hidden])) .multiplayer-screen { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 14% 19% 1fr 7%; align-content: stretch; gap: 1% 5%; width: min(100vw, 1516px, calc(100svh * 2.391167)); min-height: 0; aspect-ratio: 1516 / 634; margin: auto; padding: 5% 4% 3.2%; overflow: hidden; color: #f5f3e9; } body:has(#multiplayer-screen:not([hidden])) .multiplayer-screen::before, body:has(#multiplayer-screen:not([hidden])) .multiplayer-screen::after { position: absolute; z-index: -1; top: .8%; bottom: 8.7%; width: 50%; background-position: center; background-size: 100% 100%; content: ''; } body:has(#multiplayer-screen:not([hidden])) .multiplayer-screen::before { left: 0; background-image: linear-gradient(#0a14171c, #0a14171c), url("./assets/mode_select_bg_main.png"); } body:has(#multiplayer-screen:not([hidden])) .multiplayer-screen::after { right: 0; background-image: linear-gradient(#0a14171c, #0a14171c), url("./assets/mode_select_bg_sub.png"); } body:has(#multiplayer-screen:not([hidden])) .multi-header { grid-column: 1; grid-row: 1; align-self: end; display: flex; align-items: center; justify-content: space-between; gap: 12px; } body:has(#multiplayer-screen:not([hidden])) .multi-header h1 { margin-top: 5px; line-height: 0; } body:has(#multiplayer-screen:not([hidden])) .multi-header h1 img { display: block; width: clamp(190px, 22vw, 300px); height: auto; image-rendering: pixelated; } body:has(#multiplayer-screen:not([hidden])) .multi-kicker { display: block; color: #f3f0dc; font: 700 clamp(9px, .75vw, 11px) ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-shadow: 1px 1px #18232a; } body:has(#multiplayer-screen:not([hidden])) .multi-back, body:has(#multiplayer-screen:not([hidden])) .multi-quiet, body:has(#multiplayer-screen:not([hidden])) .multi-primary, body:has(#multiplayer-screen:not([hidden])) .multi-secondary { min-height: 32px; border: 0; border-radius: 0; padding: 6px 8px; color: #fffdf0; background: transparent; box-shadow: none; font: 800 clamp(10px, .8vw, 12px) ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .07em; text-shadow: 1px 1px #18232a, 0 0 3px #18232a; text-decoration: underline; text-decoration-color: #81c1bf; text-underline-offset: 4px; cursor: pointer; } body:has(#multiplayer-screen:not([hidden])) button:hover:not(:disabled) { color: #fff2b5; text-decoration-thickness: 2px; } body:has(#multiplayer-screen:not([hidden])) button:disabled { opacity: .5; cursor: not-allowed; } body:has(#multiplayer-screen:not([hidden])) .transport-note { grid-column: 1; grid-row: 2; align-self: start; max-width: 46ch; border: 0; border-radius: 0; padding: 4px 0; color: #f5f3e9; background: transparent; box-shadow: none; font-size: clamp(11px, .92vw, 14px); line-height: 1.4; text-shadow: 0 1px 2px #132129; } body:has(#multi-lobby:not([hidden])) .transport-note { display: none; } body:has(#multiplayer-screen:not([hidden])) .transport-note strong { color: #fffdf0; } body:has(#multiplayer-screen:not([hidden])) .entry-card { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 8%; padding: 0 4%; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body:has(#multiplayer-screen:not([hidden])) .entry-column { display: grid; align-content: center; gap: 9px; min-width: 0; } body:has(#multiplayer-screen:not([hidden])) .entry-column label, body:has(#multiplayer-screen:not([hidden])) .selection-box label { color: #fffdf0; font: 700 clamp(10px, .8vw, 12px) ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; text-shadow: 0 1px 2px #142026; } body:has(#multiplayer-screen:not([hidden])) .entry-column input, body:has(#multiplayer-screen:not([hidden])) .selection-box select { width: 100%; min-width: 0; min-height: 42px; border: 1px solid #c1cdca; border-radius: 0; padding: 8px 11px; color: #fffdf0; background: #23373dcc; box-shadow: inset 1px 1px #e0e7dd33, inset -2px -2px #13202799; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; } body:has(#multiplayer-screen:not([hidden])) .entry-column input:focus, body:has(#multiplayer-screen:not([hidden])) .selection-box select:focus, body:has(#multiplayer-screen:not([hidden])) button:focus-visible { outline: 2px solid #f4e6a1; outline-offset: 2px; } body:has(#multiplayer-screen:not([hidden])) .entry-divider { display: none; } body:has(#multiplayer-screen:not([hidden])) .multi-primary:disabled, body:has(#multiplayer-screen:not([hidden])) .multi-secondary:disabled { opacity: .5; } body:has(#multiplayer-screen:not([hidden])) .lobby-card { grid-column: 1 / -1; grid-row: 2 / span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; align-content: start; align-items: center; gap: 10px 5%; padding: 0 2%; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body:has(#multiplayer-screen:not([hidden])) .lobby-title { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 0 8px; border-bottom: 1px solid #eceddfaa; } body:has(#multiplayer-screen:not([hidden])) .lobby-title strong { display: block; margin-top: 4px; color: #fffdf0; font: 800 clamp(19px, 1.7vw, 27px) ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-shadow: 1px 1px #17242a; } body:has(#multiplayer-screen:not([hidden])) .connection-status { border: 0; border-radius: 0; padding: 5px 0 5px 8px; color: #fffdf0; background: transparent; font: 700 9px ui-monospace, SFMono-Regular, Menlo, monospace; text-shadow: 1px 1px #18232a, 0 0 3px #18232a; } body:has(#multiplayer-screen:not([hidden])) .connection-status.connected { color: #fffdf0; } body:has(#multiplayer-screen:not([hidden])) .player-list { grid-column: 1; grid-row: 2; align-self: start; display: grid; align-content: start; gap: 6px; width: 100%; margin: 0; } body:has(#multiplayer-screen:not([hidden])) .player-row { display: flex; justify-content: space-between; gap: 10px; border: 0; border-radius: 0; padding: 8px 0; color: #fffdf0; background: transparent; font-size: clamp(11px, .9vw, 13px); text-shadow: 1px 1px #17242a, 0 0 3px #17242a; } body:has(#multiplayer-screen:not([hidden])) .player-row span { color: #fffdf0; } body:has(#multiplayer-screen:not([hidden])) .selection-grid { grid-column: 2; grid-row: 1; align-self: start; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } body:has(#multiplayer-screen:not([hidden])) .selection-box { display: grid; gap: 6px; min-width: 0; } body:has(#multiplayer-screen:not([hidden])) .selection-box select:disabled { color: #e3e8dd; opacity: .95; } body:has(#multiplayer-screen:not([hidden])) .data-gate, body:has(#multiplayer-screen:not([hidden])) .rule-gate { grid-column: 2; margin: 0; border: 0; border-radius: 0; padding: 4px 0; color: #fffdf0; background: transparent; font-size: clamp(10px, .78vw, 12px); line-height: 1.35; text-shadow: 1px 1px #17242a, 0 0 3px #17242a; } body:has(#multiplayer-screen:not([hidden])) .data-gate { grid-row: 3; } body:has(#multiplayer-screen:not([hidden])) .rule-gate { grid-row: 4; } body:has(#multiplayer-screen:not([hidden])) .lobby-actions { grid-column: 2; grid-row: 5; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } body:has(#multiplayer-screen:not([hidden])) .multi-status { grid-column: 1 / -1; grid-row: 4; align-self: center; pointer-events: none; min-height: 0; color: #fffdf0; font: 700 clamp(9px, .72vw, 11px) ui-monospace, SFMono-Regular, Menlo, monospace; text-shadow: 0 1px 2px #17242a; } body:has(#multiplayer-screen:not([hidden])) .result-card { grid-column: 1 / -1; grid-row: 3; align-self: center; padding: 12px 4%; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body:has(#multiplayer-screen:not([hidden])) .result-card h2, body:has(#multiplayer-screen:not([hidden])) .result-card p { color: #fffdf0; text-shadow: 0 1px 2px #17242a; } @media (max-width: 720px) { body:has(#multiplayer-screen:not([hidden])) .multiplayer-screen { width: 100%; min-height: 100svh; aspect-ratio: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 12px; padding: 24px 18px; overflow: visible; } body:has(#multiplayer-screen:not([hidden])) .multiplayer-screen::before { inset: 0; width: 100%; background-size: cover; } body:has(#multiplayer-screen:not([hidden])) .multiplayer-screen::after { display: none; } body:has(#multiplayer-screen:not([hidden])) .multi-header, body:has(#multiplayer-screen:not([hidden])) .transport-note, body:has(#multiplayer-screen:not([hidden])) .entry-card, body:has(#multiplayer-screen:not([hidden])) .lobby-card, body:has(#multiplayer-screen:not([hidden])) .result-card, body:has(#multiplayer-screen:not([hidden])) .multi-status { grid-column: 1; grid-row: auto; } body:has(#multiplayer-screen:not([hidden])) .entry-card, body:has(#multiplayer-screen:not([hidden])) .lobby-card { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0; } body:has(#multiplayer-screen:not([hidden])) .lobby-title, body:has(#multiplayer-screen:not([hidden])) .player-list, body:has(#multiplayer-screen:not([hidden])) .selection-grid, body:has(#multiplayer-screen:not([hidden])) .data-gate, body:has(#multiplayer-screen:not([hidden])) .rule-gate, body:has(#multiplayer-screen:not([hidden])) .lobby-actions { grid-column: 1; grid-row: auto; } body:has(#multiplayer-screen:not([hidden])) .multi-header h1 img { width: min(68vw, 280px); } body:has(#multiplayer-screen:not([hidden])) .selection-grid { grid-template-columns: minmax(0, 1fr); } } /* Keep the room controls inside the usable viewport on laptop-sized and short windows. The two-screen art is a backdrop; lobby content must be allowed to use the full viewport height instead of being clipped to its aspect ratio. */ @media (max-width: 1100px), (max-height: 650px) { body:has(#multiplayer-screen:not([hidden])) .multiplayer-screen { width: min(100vw, 1516px); min-height: 100svh; height: auto; aspect-ratio: auto; grid-template-rows: auto auto auto; align-content: start; gap: clamp(10px, 1.8vh, 18px) 4%; padding: clamp(14px, 3vh, 36px) clamp(18px, 4vw, 48px); overflow-x: hidden; overflow-y: auto; } body:has(#multiplayer-screen:not([hidden])) .lobby-card { grid-row: 2; grid-template-rows: auto auto auto auto auto; align-content: start; gap: clamp(8px, 1.4vh, 12px) 4%; } body:has(#multiplayer-screen:not([hidden])) .multi-status { grid-row: 3; } } @media (min-width: 901px) and (max-width: 1100px), (min-width: 1101px) and (max-height: 650px) { body:has(#multiplayer-screen:not([hidden])) .selection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } body:has(#multiplayer-screen:not([hidden])) .selection-box small { display: none; } body:has(#multiplayer-screen:not([hidden])) .selection-box select { min-height: 36px; padding: 6px 8px; font-size: 11px; } } @media (min-width: 721px) and (max-width: 900px) { body:has(#multiplayer-screen:not([hidden])) .lobby-card { grid-template-columns: minmax(0, 1fr); } body:has(#multiplayer-screen:not([hidden])) .lobby-title, body:has(#multiplayer-screen:not([hidden])) .player-list, body:has(#multiplayer-screen:not([hidden])) .selection-grid, body:has(#multiplayer-screen:not([hidden])) .data-gate, body:has(#multiplayer-screen:not([hidden])) .rule-gate, body:has(#multiplayer-screen:not([hidden])) .lobby-actions { grid-column: 1; grid-row: auto; } body:has(#multiplayer-screen:not([hidden])) .selection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } #multiplayer-screen[hidden] { display: none; } .route-loading { color: #f0ede2; font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; } /* Recompose the title from extracted game art. Screen-scale placement follows the supplied reference; native OBJ/OAM composition remains under study. */ body:has(#title-screen:not([hidden])) .title-screen { min-height: 100vh; align-items: center; justify-content: center; padding: 0; } body:has(#title-screen:not([hidden])) .title-deck { position: relative; display: block; width: min(100vw, 1516px, calc(100vh * 2.391167)); height: auto; aspect-ratio: 1516 / 634; margin: 0; overflow: hidden; background: #000 url("./assets/title/title-reference.png") center / 100% 100% no-repeat; transform: none; } .title-scene { position: absolute; top: .8%; display: block; width: 50%; height: 90.5%; object-fit: fill; user-select: none; } .title-scene-left { left: 0; } .title-scene-right { left: 50%; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body:has(#title-screen:not([hidden])) #touch-to-start { position: absolute; top: 38%; left: 62.5%; width: 24.5%; height: 15.1%; display: grid; grid-template-columns: 1fr 1fr; padding: 0; appearance: none; border: 0; background: transparent; cursor: pointer; } .touch-prompt-half { display: block; width: 100%; height: 100%; object-fit: fill; image-rendering: pixelated; user-select: none; } body:has(#title-screen:not([hidden])) .title-deck > .copyright { position: absolute; left: 75.5%; top: 82.2%; transform: translateX(-50%); width: 47%; color: #fff; font: 700 clamp(8px, 2vw, 28px)/1 Arial, sans-serif; letter-spacing: .015em; text-align: center; text-shadow: -2px -2px 0 #111, 2px -2px 0 #111, -2px 2px 0 #111, 2px 2px 0 #111, 0 0 3px #000; white-space: nowrap; } body:has(#title-screen:not([hidden])) #touch-to-start:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } body:has(#title-screen:not([hidden])) .title-hint { display: none; } /* Use the extracted English mode-select label strips instead of web-drawn menu lettering and cards. Screen placement remains a guided reconstruction. */ .mode-feature { border: 0; border-radius: 0; background: transparent; box-shadow: none; } .mode-heading-art { width: min(72%, 330px); max-height: none; } .mode-heading-art img { display: block; width: 100%; height: auto; image-rendering: pixelated; } .menu-topline { inset: 3% 5% auto; justify-content: center; padding: 0; border: 0; } .menu-title-art { display: block; width: min(68%, 320px); height: auto; image-rendering: pixelated; } .mode-list { inset: 15% 5% 9%; gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent; } .mode-choice { display: flex; flex: 1 1 0; align-items: center; justify-content: center; width: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; } .mode-choice img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; } .mode-heading-art > span:not(.visually-hidden) { display: block; font: inherit; letter-spacing: inherit; text-transform: inherit; } .mode-choice:hover, .mode-choice.active, .mode-choice.active:not(:disabled) { border: 0; background: transparent; } .mode-choice::after { content: none; } .mode-choice:disabled { opacity: .48; } .mode-choice:focus-visible img { outline: 2px solid #f3df90; outline-offset: -2px; } .mode-screen > .title-hint, .mode-screen > .menu-disclaimer { display: none; } /* Battle / Trade Maps use newly drawn remake button faces. They are custom art, not recovered ROM button pixels. */ .submode-choice { min-width: 0; min-height: 28px; border: 0; border-radius: 0; padding: 6px 8px; color: #fffdf0; background: transparent; box-shadow: none; font: 700 clamp(10px, .85vw, 12px) ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; text-align: left; text-shadow: 1px 1px #17242a, 0 0 3px #17242a; text-decoration: underline; text-decoration-color: #e5d18b; text-underline-offset: 4px; cursor: pointer; } .submode-choice[aria-current="true"], .submode-choice:hover:not(:disabled) { color: #fff; background: transparent; box-shadow: none; text-decoration-thickness: 2px; text-decoration-color: #81c1bf; } .submode-choice:disabled { opacity: .48; cursor: not-allowed; } .submode-choice:focus-visible { outline: 2px solid #fff2b5; outline-offset: 1px; } /* Keep the mode page inside the same dual-screen viewport as the title. The panel art and label pixels are recovered; their internal placements remain guided by the browser reconstruction until a native layout trace is found. */ body:has(#mode-screen:not([hidden])) .mode-screen { min-height: 100vh; align-items: center; justify-content: center; padding: 0; background: #000; } body:has(#mode-screen:not([hidden])) .mode-screen .mode-deck { position: relative; display: grid; width: min(100vw, 1516px, calc(100vh * 2.391167)); height: auto; aspect-ratio: 1516 / 634; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: #000; box-shadow: none; } body:has(#mode-screen:not([hidden])) .mode-deck > .ds-screen { align-self: start; width: 100%; height: 90.5%; margin-top: .8%; aspect-ratio: auto; border: 0; border-radius: 0; } /* Direct Multi-Card route. Its geometry follows the supplied dual-screen reference; menu layout and selection styling remain informed approximations. */ body:has(#mode-screen.multi-card-route:not([hidden])) { min-height: 100svh; background: #000; } body:has(#mode-screen.multi-card-route:not([hidden])) .shell { width: 100%; max-width: none; margin: 0; padding: 0; } body:has(#mode-screen.multi-card-route:not([hidden])) .mode-screen { min-height: 100svh; padding: 0; background: #000; } body:has(#mode-screen.multi-card-route:not([hidden])) .mode-screen .mode-deck { width: min(100vw, 1536px, calc(100svh * 2.666667)); height: auto; aspect-ratio: 8 / 3; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 0; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: #000; box-shadow: none; } body:has(#mode-screen.multi-card-route:not([hidden])) .mode-deck > .ds-screen { width: 100%; height: auto; margin: 0; aspect-ratio: 4 / 3; align-self: stretch; border: 0; border-radius: 0; } body:has(#mode-screen.multi-card-route:not([hidden])) .mode-feature { inset: 18% 8% 10%; height: auto; justify-content: center; gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body:has(#mode-screen.multi-card-route:not([hidden])) .mode-heading-art { width: min(80%, 380px); } body:has(#mode-screen.multi-card-route:not([hidden])) .mode-right .menu-topline, body:has(#mode-screen.multi-card-route:not([hidden])) .mode-right .mode-list { display: none; } body:has(#mode-screen.multi-card-route:not([hidden])) .mode-feature p { max-width: 36ch; margin-top: clamp(10px, 1.2vw, 18px); font-size: clamp(12px, 1.2vw, 17px); line-height: 1.4; } body:has(#mode-screen.multi-card-route:not([hidden])) .submode-list { position: absolute; inset: 16% 10% 13%; z-index: 2; width: auto; display: grid; align-content: center; gap: 6px; margin: 0; } body:has(#mode-screen.multi-card-route:not([hidden])) .submode-choice { position: relative; display: flex; align-items: center; min-height: 36px; padding: 6px 12px 6px 52px; border: 0; border-radius: 0; color: #fffdf0; background: transparent; box-shadow: none; font: 700 clamp(14px, 1.25vw, 18px)/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: left; text-shadow: 1px 1px #17242a, 0 0 3px #17242a; text-decoration: underline; text-decoration-color: #81c1bf; text-underline-offset: 4px; cursor: pointer; } body:has(#mode-screen.multi-card-route:not([hidden])) .submode-choice > .submode-art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: fill; pointer-events: none; } body:has(#mode-screen.multi-card-route:not([hidden])) .submode-choice[aria-current="true"] { color: #fff; background: transparent; text-decoration-thickness: 2px; text-decoration-color: #81c1bf; } body:has(#mode-screen.multi-card-route:not([hidden])) .submode-choice:disabled { opacity: .55; } body:has(#mode-screen.multi-card-route:not([hidden])) .mode-right .mode-list { inset: 14% 8% 9%; } body:has(#mode-screen.multi-card-route:not([hidden])) .mode-choice { min-height: 0; } @media (max-width: 720px) { body:has(#mode-screen.multi-card-route:not([hidden])) .mode-screen .mode-deck { width: 100vw; height: auto; aspect-ratio: auto; grid-template-columns: 1fr; } body:has(#mode-screen.multi-card-route:not([hidden])) .mode-deck > .ds-screen { height: auto; aspect-ratio: 4 / 3; } body:has(#mode-screen.multi-card-route:not([hidden])) .mode-feature { inset: 18% 8% 8%; } } /* Basic DS-style battle scene overlay (art decoded from battle/hohei_*) */ #battle-scene { position: fixed; z-index: 110; inset: 0; display: grid; grid-template-rows: 1fr 1fr; pointer-events: none; background: #000b; } #battle-scene[hidden] { display: none; } #battle-scene.cut { background: #000; } #battle-scene.cut .battle-panel { visibility: hidden; } /* DS: scene ends with both screens black (flow-s6) */ #battle-scene .battle-panel { position: relative; overflow: hidden; border-block: 3px solid #0a1210; background: #8aa0b3 center top / 100% 114.3% no-repeat; image-rendering: pixelated; } /* DS backdrop files are 256x256 with a filler strip in the bottom 12.5%: show only the top 87.5% */ #battle-scene .battle-panel.attacker { justify-self: start; width: 100%; } /* DS squad layout (flow-s2/s3): one BIG soldier in front and two small ones behind. 2026-11-01 native captures: the TOP screen is the attacker (squad at ~31% from the left, faces right); the BOTTOM screen is the defender (squad at ~66%, faces left). */ #battle-scene .battle-squad { position: absolute; inset: 0 0 44px 0; } #battle-scene .soldier { position: absolute; image-rendering: pixelated; transform-origin: 50% 100%; } /* anchored 144x144 canvases from decode_battle_sprite.py (frame*_anchored.png) */ /* Crisp pixel grid: the DS draws these 144 px canvases at 1:1. A CSS `33vh` box gave 297/144 = 2.0625x, so nearest-neighbour turned the 1 px ROM outline into a ragged 2-or-3 px edge ("weird outline"). playBattleScene() now sets --soldier-size and --soldier-sub-size to whole multiples of 144 px, so every ROM pixel is exactly N screen pixels and the outline keeps a constant width. */ #battle-scene .soldier[data-family="bazooka"][data-frame="0"], #battle-scene .soldier[data-family="bazooka"][data-frame="1"], #battle-scene .soldier[data-family="bazooka"][data-frame="2"] { translate: 0 22.222%; } /* bazooka CTC frames 0-2 occupy y=-16..48 around the decoded origin; the 144px export puts that origin at y=64, leaving 32px below the art. Frame 3 uses rows y=-48..80 and already reaches the canvas bottom, so keep that firing pose unshifted. */ #battle-scene .soldier.s0, #battle-scene .soldier-entries.s0 { width: var(--soldier-size, 288px); height: var(--soldier-size, 288px); bottom: -6%; } #battle-scene .soldier.s1, #battle-scene .soldier.s2, #battle-scene .soldier-entries.s1, #battle-scene .soldier-entries.s2 { width: var(--soldier-sub-size, 144px); height: var(--soldier-sub-size, 144px); bottom: 22%; } /* small tanks sit further back (higher) than the big one */ /* supertank CTC frames are a 200x168 union bbox, not the 144x144 square canvas the other vehicle stems use. Keep the natural aspect so the War Tank is not squashed square. Scope the big size to .s0: the background layers .s1/.s2 must stay at the small squad size, otherwise all three War Tanks render at full size on top of each other (owner: "busted"). */ #battle-scene .soldier[data-family="supertank"].s0 { height: var(--soldier-size, 288px); width: auto; aspect-ratio: 200 / 168; } #battle-scene .soldier[data-family="supertank"].s1, #battle-scene .soldier[data-family="supertank"].s2 { height: var(--soldier-sub-size, 144px); width: auto; aspect-ratio: 200 / 168; } /* Fighter frames use a 192x144 canvas with origin (80,72); preserve the previous (72,64) anchor while allowing the full wingspan to render. */ #battle-scene .soldier[data-family="fighter"] { width: auto; aspect-ratio: 192 / 144; } #battle-scene .battle-panel.defender .soldier[data-family="fighter"].s0 { left: calc(34% - var(--soldier-size, 288px) / 2 - var(--soldier-size, 288px) / 18); bottom: calc(-6% + var(--soldier-size, 288px) / 18); } #battle-scene .battle-panel.attacker .soldier[data-family="fighter"].s0 { left: calc(66% - var(--soldier-size, 288px) / 2 - var(--soldier-size, 288px) * 5 / 18); bottom: calc(-6% + var(--soldier-size, 288px) / 18); } #battle-scene .battle-panel.defender .soldier[data-family="fighter"].s1 { left: calc(13% - var(--soldier-sub-size, 144px) / 2 - var(--soldier-sub-size, 144px) / 18); bottom: calc(22% + var(--soldier-sub-size, 144px) / 18); } #battle-scene .battle-panel.defender .soldier[data-family="fighter"].s2 { left: calc(87% - var(--soldier-sub-size, 144px) / 2 - var(--soldier-sub-size, 144px) / 18); bottom: calc(22% + var(--soldier-sub-size, 144px) / 18); } #battle-scene .battle-panel.attacker .soldier[data-family="fighter"].s1 { left: calc(87% - var(--soldier-sub-size, 144px) / 2 - var(--soldier-sub-size, 144px) * 5 / 18); bottom: calc(22% + var(--soldier-sub-size, 144px) / 18); } #battle-scene .battle-panel.attacker .soldier[data-family="fighter"].s2 { left: calc(13% - var(--soldier-sub-size, 144px) / 2 - var(--soldier-sub-size, 144px) * 5 / 18); bottom: calc(22% + var(--soldier-sub-size, 144px) / 18); } /* Layer entries (FUN_021e3100/3210/3578 + FUN_021e749c): the ROM's up-to-five entries are kept as METADATA (.entry carries data-tile / data-object / data-rect). The layer's composite is the single pixel source - drawing the entries as clipped pieces chopped the sprite into fragments. */ #battle-scene .soldier-entries { position: absolute; pointer-events: none; } /* Entries are metadata only (count / tile / object / rect); the layer's composite paints. They must not create boxes that could ever paint pixels. */ #battle-scene .soldier-entries .entry { display: none; } #battle-scene .battle-panel.attacker .soldier-entries { transform: scaleX(-1); } #battle-scene .soldier.gone + .soldier-entries { visibility: hidden; } /* .soldier.clipped is retired: a live layer is never hidden behind partial pieces. */ #battle-scene .battle-panel.attacker .soldier { transform: scaleX(-1); } /* decoded battle PNGs face left; the top (attacker) squad faces right */ #battle-scene .battle-panel.defender .s0, #battle-scene .battle-panel.defender .soldier-entries.s0 { left: calc(34% - var(--soldier-size, 288px) / 2); } #battle-scene .battle-panel.defender .s1, #battle-scene .battle-panel.defender .soldier-entries.s1 { left: calc(13% - var(--soldier-sub-size, 144px) / 2); } #battle-scene .battle-panel.defender .s2, #battle-scene .battle-panel.defender .soldier-entries.s2 { left: calc(87% - var(--soldier-sub-size, 144px) / 2); } /* geometry measured from the original game's render (tank battle scene, bottom screen): big tank centre-left 36%, small behind at 16% and 87% */ #battle-scene .battle-panel.attacker .s0, #battle-scene .battle-panel.attacker .soldier-entries.s0 { left: calc(66% - var(--soldier-size, 288px) / 2); } #battle-scene .battle-panel.attacker .s1, #battle-scene .battle-panel.attacker .soldier-entries.s1 { left: calc(87% - var(--soldier-sub-size, 144px) / 2); } #battle-scene .battle-panel.attacker .s2, #battle-scene .battle-panel.attacker .soldier-entries.s2 { left: calc(13% - var(--soldier-sub-size, 144px) / 2); } /* attacker = defender geometry mirrored (big 0.66, small 0.87 / 0.13) */ #battle-scene .soldier.gone { visibility: hidden; } #battle-scene .soldier.down { opacity: .85; transition: opacity 1s; } /* DS HUD (paused emulator scene): defender/top = big digit left, gauge centre, COMMANDER right; attacker/bottom = COMMANDER left, gauge centre, digit right */ #battle-scene .battle-hud { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 12px; background: linear-gradient(#0b2b2bcc, #0b2b2b); color: #fff; } #battle-scene .battle-hud.blue { flex-direction: row-reverse; } /* DS HUD side depends on ARMY, not top/bottom (flow-s3 vs scene-in-scene): red = stars+portrait left, digit right; blue = mirror. DOM order [commander, gauge, digit] */ #battle-scene .battle-hud .battle-bar { flex: 0 1 44%; } #battle-scene .battle-hud .battle-co { font: 700 13px ui-monospace, Menlo, monospace; letter-spacing: 1px; padding: 3px 10px; color: #1a2630; background: linear-gradient(90deg, #cdd9e4, #fff); transform: skewX(-18deg); } #battle-scene .battle-hud.red .battle-hp { margin-left: auto; } #battle-scene .battle-hud.blue .battle-hp { margin-right: auto; } #battle-scene .battle-bar { flex: 1; height: 14px; display: flex; gap: 3px; padding: 2px; background: #0a1010; border: 1px solid #5a6a6a; } #battle-scene .battle-bar i { flex: 1; background: #202828; transform: skewX(-20deg); } /* 10 segments like the DS gauge (battle/gauge_cg slanted tiles) */ #battle-scene .battle-hud.red .battle-bar i.on { background: linear-gradient(#ff9494, #ff3131); } /* gauge_cl bank 0 ramp */ #battle-scene .battle-hud.blue .battle-bar i.on { background: linear-gradient(#6a6aff, #3939e6); } /* gauge_cl bank 1 ramp */ #battle-scene .battle-def { position: absolute; top: 10px; font: 700 20px ui-monospace, Menlo, monospace; color: #fff; text-shadow: 0 2px 3px #000; letter-spacing: 2px; } #battle-scene .battle-panel.red .battle-def { left: 16px; } #battle-scene .battle-panel.blue .battle-def { right: 16px; } /* DS: stars on the same side as the commander portrait: red left, blue right */ #battle-scene .battle-def b { color: #ffe23a; font-size: 24px; } #battle-scene .battle-def u { text-decoration: none; color: #4a5560; } /* gold = terrain defence stars, dark = empty of 4; star sprite not decoded, text stars stand in */ #battle-scene .battle-hp { display: inline-flex; align-items: center; height: 40px; } #battle-scene .battle-hp img { height: 40px; width: auto; image-rendering: pixelated; } #multiplayer-match-screen .match-board-scroll { max-height: none; } #battle-scene .fx { position: absolute; border: 0; outline: 0; background: none; image-rendering: pixelated; pointer-events: none; z-index: 3; } /* DS muzzle flash / impact spark sprites */ /* Turn emblem (middle of the board) + live CO stats on the commander cards. */ #turn-emblem { position: fixed; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; gap: 8px; pointer-events: none; } #turn-emblem[hidden] { display: none; } .co-stats { position: relative; z-index: 2; display: grid; gap: 2px; width: 100%; padding: 3px 5px; background: #0a100cdd; text-align: left; font: 700 10px ui-monospace, Menlo, monospace; color: #f3f0d7; } .co-stats b { font-weight: 700; letter-spacing: .06em; } .co-bar { display: block; height: 6px; background: #000a; border: 1px solid #ffffff40; } .co-bar u { display: block; height: 100%; background: linear-gradient(90deg, #63d65a, #e1ed9b); transition: width .6s ease; } .match-commander.slot-0 .co-bar u { background: linear-gradient(90deg, #d45c4f, #ff9a8d); } .match-commander.slot-1 .co-bar u { background: linear-gradient(90deg, #428ee0, #8fc3ff); } @media (prefers-reduced-motion: reduce) { #turn-emblem.show img, #turn-emblem.show strong { animation: none; } } /* DS-style map HUD: Day counter top-left, selected unit + terrain strip bottom-left of the board. */ .match-board-panel { position: relative; } #ds-hud { position: absolute; inset: 0; pointer-events: none; z-index: 3; } #ds-hud .ds-day { position: absolute; left: 6px; top: 6px; display: grid; justify-items: center; padding: 2px 8px; border-radius: 4px; background: #14283cdd; border: 1px solid #9fc0e0; color: #fff; font: 700 11px ui-monospace, Menlo, monospace; line-height: 1; } #ds-hud .ds-day b { font-size: 22px; } #ds-hud .ds-unit { position: fixed; left: clamp(160px, 17vw, 210px); bottom: 8px; min-width: 170px; padding: 4px 8px; border-radius: 4px; background: #101820e6; border-left: 4px solid #428ee0; color: #fff; font: 700 13px ui-monospace, Menlo, monospace; } #ds-hud .ds-unit.red { border-left-color: #d45c4f; } #ds-hud .ds-unit[hidden] { display: none; } #ds-hud .ds-row { display: flex; justify-content: space-between; gap: 14px; } #ds-hud .ds-row b { color: #ff7b7b; margin-left: 2px; } #ds-hud .ds-stars { color: #ffd54a; letter-spacing: 1px; } #ds-hud .ds-stars u { text-decoration: none; color: #ffffff40; } .ds-glyph { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; } #ds-hud .ds-day { padding: 0; background: none; border: 0; align-items: center; gap: 0; } #ds-hud .ds-day .ds-glyph.day { width: 64px; height: 32px; } #ds-hud .ds-day b { margin-top: -2px; font-size: 24px; text-shadow: -2px 0 #14283c, 2px 0 #14283c, 0 -2px #14283c, 0 2px #14283c; } #ds-hud .ds-stars { display: inline-flex; gap: 0; } #ds-hud .ds-stars .ds-glyph { width: 18px; height: 18px; } /* DS player panel rows on the commander cards (units / properties / funds). */ .co-stats b { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; } .co-stats b em { font-style: normal; color: #9fb2a6; letter-spacing: .08em; } .co-stats b.funds { color: #ffd54a; font-size: 13px; } .co-stats b.funds em { color: #ffd54a; } #ds-hud .ds-day { position: fixed; z-index: 4; } /* DS Day banner: 'Day' plate over the big Day digits (bmap_fs/e_under_info.cg), drawn at 4x like the DS banner, no extra frame. */ #ds-hud .ds-day { display: block; padding: 0; border: 0; background: none; line-height: 0; } #ds-hud .ds-day .ds-glyph { display: block; width: auto; height: auto; image-rendering: pixelated; } #ds-hud .ds-day .ds-glyph.day { width: 64px; height: 32px; } #ds-hud .ds-day-digits { display: flex; } #ds-hud .ds-day-digits .ds-glyph { width: 32px; height: 64px; } /* DS turn call (see showTurnEmblem): band + map name, "Fight!", emblem on the right. Timings from the emulator recordings. */ #turn-emblem, #turn-emblem * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; } #turn-emblem ::selection, #turn-emblem::selection { background: transparent; } #turn-emblem { position: fixed; inset: auto; display: block; overflow: hidden; z-index: 30; pointer-events: none; } #turn-emblem[hidden] { display: none; } /* DAY counter in the turn call, tinted by the active CO's army colour (red army = red, blue army = blue). */ #turn-emblem .tc-day { position: absolute; left: 4%; top: 5%; display: grid; justify-items: center; gap: 2px; line-height: 1; } #turn-emblem .tc-day-label { padding: 0.12em 0.6em; border-radius: 0.22em; background: #8b2929; color: #fff; font: 900 calc(var(--tc-day-font, 70px) * 0.4) ui-monospace, Menlo, monospace; letter-spacing: .1em; box-shadow: 0 0.08em 0 #3a0c0c; } #turn-emblem .tc-day-num { font: 900 var(--tc-day-font, 70px) ui-monospace, Menlo, monospace; color: #fff; text-shadow: -0.03em 0 #8b2929, 0.03em 0 #8b2929, 0 -0.03em #8b2929, 0 0.03em #8b2929, 0 0.1em #3a0c0c; } #turn-emblem.army-blue .tc-day-label { background: #185a83; box-shadow: 0 0.08em 0 #06202f; } #turn-emblem.army-blue .tc-day-num { text-shadow: -0.03em 0 #185a83, 0.03em 0 #185a83, 0 -0.03em #185a83, 0 0.03em #185a83, 0 0.1em #06202f; } #turn-emblem .tc-band { position: absolute; left: 0; top: 55.5%; width: 47.5%; padding: clamp(8px, 1.6vh, 16px) clamp(10px, 0.9vw, 18px); text-align: center; clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%); color: #fff; font: 700 var(--tc-font, 12px) ui-monospace, Menlo, monospace; background: linear-gradient(#f6e6e6 0 2px, #8b2929 2px calc(100% - 2px), #310808 calc(100% - 2px)); transform: translateX(-105%); } /* colours = daycall/obj.cl bank 0 */ #turn-emblem.army-blue .tc-band { background: linear-gradient(#e6f0f6 0 2px, #185a83 2px calc(100% - 2px), #002031 calc(100% - 2px)); } /* obj.cl bank 1 */ #turn-emblem .tc-fight { position: absolute; left: 12.5%; top: 70%; width: var(--tc-fight, 24%); height: auto; image-rendering: pixelated; opacity: 0; transform: scale(.4); transform-origin: left center; } /* Big, centred CO emblem, sized from the device width/height (--tc-emblem) and animated in the centre. */ #turn-emblem .tc-emblem { position: absolute; right: 7%; top: 52%; width: var(--tc-emblem, 42%); height: auto; margin-top: calc(var(--tc-emblem, 42%) / -2); image-rendering: pixelated; opacity: 0; transform: scale(.5); } /* size/place measured from ds-turn-mid.mov: ~42% of the screen width, vertically centred, right half */ #turn-emblem.show .tc-day { animation: tc-emblem 2.5s ease-in-out both; transform-origin: center top; } #turn-emblem.show .tc-band { animation: tc-band 2.5s ease-out both; } #turn-emblem.show .tc-fight { animation: tc-fight 2.5s ease-out both; } #turn-emblem.show .tc-emblem { animation: tc-emblem 2.5s ease-in-out both; } @keyframes tc-band { 0%, 12% { transform: translateX(-105%); } 24% { transform: translateX(0); } 76% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); opacity: 0; } } @keyframes tc-fight { 0%, 20% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.12); } 36%, 76% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } @keyframes tc-emblem { 0%, 12% { opacity: 0; transform: scale(.5); } 36% { opacity: 1; transform: scale(1); } 76% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } } @media (prefers-reduced-motion: reduce) { #turn-emblem.show .tc-band, #turn-emblem.show .tc-fight, #turn-emblem.show .tc-emblem { animation: none; opacity: 1; transform: none; } } /* the match board overlays (Day banner, unit strip, battle scene) must never show a blue text-selection box over their art */ #ds-hud, #ds-hud *, #battle-scene, #battle-scene * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; } /* DS barracks build menu (emulator capture): funds equation bar + two unit columns, teal outline on the picked row. Colours are picked by eye from that capture (the menu art/palette is not decoded); units/costs are the DS list. */ .unit-production.ds-build { padding: 8px; gap: 8px; border: 0; border-radius: 4px; background: #5f7388; } .ds-funds { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px 6px; background: #1d3040; border-radius: 3px; font: 700 13px ui-monospace, Menlo, monospace; color: #f7f7f7; } .ds-funds span { padding: 2px 6px; border: 1px solid #8fa3b5; background: #2a4358; color: #fff; } .ds-funds span:first-child, .ds-funds span:nth-child(3), .ds-funds span:last-child { color: #ffd84a; } .ds-funds i { font-style: normal; color: #cfe0ee; } .ds-build-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .ds-build-col { display: grid; gap: 2px; padding: 3px; background: #4b5f73; border: 1px solid #1d3040; } .unit-production.ds-build button { min-height: 26px; display: flex; justify-content: space-between; align-items: center; padding: 0 6px; border: 2px solid transparent; border-radius: 3px; background: #21374b; color: #fff; font: 700 12px ui-monospace, Menlo, monospace; text-align: left; } .unit-production.ds-build button:disabled { opacity: 1; color: #7d91a4; background: #2c4054; cursor: not-allowed; } .unit-production.ds-build button.picked:not(:disabled), .unit-production.ds-build button:not(:disabled):hover, .unit-production.ds-build button:not(:disabled):focus-visible { border-color: #28e6c8; background: #2b4a63; outline: none; } .unit-production.ds-build button.unaffordable b { color: #ff7b7b; } /* factory selected: show ONLY the DS-style build menu, centred at the bottom of the board like the DS bottom screen */ #multiplayer-match-screen.factory-selected .match-command-panel { top: auto; right: auto; bottom: 20px; left: 50%; transform: translateX(-50%); width: min(520px, calc(100vw - 32px)); min-height: 0; padding: 0; gap: 0; border: 0; border-radius: 4px; background: transparent; box-shadow: 0 8px 28px #000a; backdrop-filter: none; overflow: visible; } #multiplayer-match-screen.factory-selected .match-command-panel > :not(#unit-production) { display: none; } /* DS bottom-screen backdrop behind a small map: smooth diagonal gradient, light blue-white top-left -> grey-blue -> dark teal bottom-right. SAMPLED BY EYE from hot-reload-screenshots/ds-day-corner.png (the ROM backdrop itself is not decoded: bmap_fs/bmap.narc sea.tex is only a 32x32 blue tile). */ #multiplayer-match-screen .match-layout { background: radial-gradient(120% 90% at 0% 0%, #cfe6f5 0%, #a7c6d6 22%, transparent 60%), linear-gradient(to bottom right, #aac7da 0%, #6f98a5 38%, #3f7a73 68%, #1c4a4a 100%); } #multiplayer-match-screen .match-board-panel, #multiplayer-match-screen .match-board-scroll, #multiplayer-match-screen #match-board { background: transparent; } /* DS player panel (see renderCommanderPortraits): 80x36 DS px at 3x. Template/portraits are an emulator-capture FALLBACK; digits are ROM glyphs. */ /* Size the CO card from the viewport width so two cards fit on a laptop or a phone: card = 80 u, u = min(3px, 0.5vw) -> 240px on desktop, ~156px on a 390px phone. The portrait scales with the card. */ .match-commander { --u: min(3px, 0.5vw); width: calc(80 * var(--u)); min-height: calc(84 * var(--u)); padding: 0 0 6px; overflow: visible; border: 0; background: transparent; box-shadow: none; } .match-commander .co-stats.ds-panel { position: relative; z-index: 3; display: block; width: calc(80 * var(--u)); height: calc(36 * var(--u)); padding: 0; margin: 0; background: none; box-shadow: none; } .co-stats.ds-panel.active { box-shadow: 0 0 0 calc(2 * var(--u)) #00ffc4; } .ds-panel img { position: absolute; display: block; image-rendering: pixelated; } .ds-panel .ds-panel-bg { inset: 0; width: 100%; height: 100%; } .ds-panel .ds-face { left: calc(35 * var(--u)); top: calc(1 * var(--u)); width: calc(45 * var(--u)); height: calc(14 * var(--u)); } .ds-n, .ds-funds-n { position: absolute; display: block; height: calc(8 * var(--u)); } .ds-n .ds-d { position: static; display: inline-block; width: calc(8 * var(--u)); height: calc(8 * var(--u)); } .ds-unit-n { left: calc(26 * var(--u)); top: calc(2 * var(--u)); } .ds-prop-n { left: calc(25 * var(--u)); top: calc(18 * var(--u)); } .ds-funds-n { right: 0; top: calc(27 * var(--u)); width: calc(35 * var(--u)); display: flex; justify-content: flex-end; padding-right: calc(1 * var(--u)); box-sizing: border-box; } .ds-funds-n .ds-fd { position: static; width: calc(8 * var(--u)); height: calc(8 * var(--u)); margin-left: calc(-1 * var(--u)); filter: invert(1); } .match-commander canvas { top: auto; } .match-commander .co-stats.ds-panel span { position: absolute; z-index: 1; margin: 0; padding: 0; border-radius: 0; background: none; letter-spacing: 0; text-shadow: none; } .match-commander .co-stats.ds-panel .ds-n { height: calc(8 * var(--u)); display: flex; } .match-commander .co-stats.ds-panel .ds-funds-n { right: 0; left: auto; top: calc(27 * var(--u)); } .match-commander[data-active="false"] { opacity: 1; } .match-commander[data-active="false"] canvas { opacity: .68; } /* the DS shows only the panel (no full-body CO figure): hide the animated body canvas and the name tag, keep the card as the panel */ .match-commander canvas, .match-commander > span:not(.ds-n):not(.ds-funds-n) { display: none; } .match-commander { min-height: 0; padding: 0; } /* panels are bottom-left/right, so the DS bottom-screen unit/terrain strip moves to the bottom centre instead of overlapping Will's panel */ #ds-hud .ds-unit { left: 50%; transform: translateX(-50%); } #multiplayer-match-screen .match-commanders { padding-bottom: 6px; } /* DS capture scene panel (measured from an emulator recording; 1 DS px = var(--u)) */ #capture-scene { position: fixed; z-index: 6; display: flex; align-items: stretch; pointer-events: none; animation: cs-in .2s ease-out; } #capture-scene .cs-photo { position: relative; width: calc(72 * var(--u)); height: calc(64 * var(--u)); background: #17353f; } #capture-scene .cs-pic { display: block; width: 100%; height: 100%; image-rendering: pixelated; } #capture-scene .cs-label { position: absolute; inset: auto 0 0 0; height: calc(18 * var(--u)); background: #17353f; color: #fff; font: 700 calc(11 * var(--u)) ui-monospace, Menlo, monospace; display: flex; align-items: center; padding-left: calc(8 * var(--u)); } #capture-scene .cs-num { position: absolute; left: calc(4 * var(--u)); top: calc(2 * var(--u)); display: flex; } #capture-scene .cs-d { width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin-right: calc(-12 * var(--u)); image-rendering: pixelated; } #capture-scene .cs-of { position: absolute; right: calc(2 * var(--u)); bottom: calc(20 * var(--u)); width: calc(32 * var(--u)); image-rendering: pixelated; } #capture-scene .cs-gauge { width: calc(24 * var(--u)); height: calc(64 * var(--u)); display: flex; flex-direction: column; gap: calc(0.6 * var(--u)); background: #000; padding: calc(0.6 * var(--u)); box-sizing: border-box; } #capture-scene .cs-gauge i { flex: 1; background: #fff; } #capture-scene .cs-gauge i.on { background: #0000ff; } #capture-scene .cs-done { position: absolute; left: calc(-76 * var(--u)); top: calc(24 * var(--u)); width: calc(64 * var(--u)); image-rendering: pixelated; } @keyframes cs-in { from { opacity: 0; } to { opacity: 1; } } /* DS command menu (Capture / Wait) opened when a unit is sent onto an enemy or neutral building. */ #command-menu { position: fixed; z-index: 40; display: grid; gap: 2px; min-width: 104px; padding: 6px; border: 2px solid #e8f0f8; border-radius: 4px; background: #21374b; box-shadow: 0 0 0 2px #0b1a28; } #command-menu button { min-height: 28px; padding: 0 10px; border: 2px solid transparent; border-radius: 3px; background: transparent; color: #fff; font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: left; cursor: pointer; } #command-menu button:hover, #command-menu button:focus-visible { border-color: #ffdc50; background: #3b5a78; outline: 0; } /* ========================================================================== Free Battle lobby Layout: topbar > maps > seats (P1..P8) > [CO grid | CO options] > footer. Every tunable value is a custom property in the token block below; the rules underneath only read tokens. Mobile-first; the desktop layout is added at --fb-bp-desktop (keep the @media width below in sync). ========================================================================== */ body:has(#multiplayer-screen:not([hidden])) { /* colour */ --fb-bg: #6f8294; --fb-bg-edge: #1b2a33; --fb-panel: #4a6275; --fb-panel-raised: #5a7488; --fb-panel-dark: #2b4252; --fb-border: #1f323d; --fb-border-soft: #8fa3b1; --fb-text: #eef1e6; --fb-text-dim: #b9c6cc; --fb-ink: #1b2b30; --fb-paper: #e4e3d8; --fb-select-top: #f1f4f6; --fb-select-bottom: #d5dde3; --fb-select-ink: #1d2b33; --fb-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231d2b33' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --fb-accent: #f2d768; --fb-p1: #c9484f; --fb-cpu: #2f6ea8; --fb-ok: #3fcf5b; --fb-start-top: #3fb6b0; --fb-start-bottom: #1f8a8a; --fb-start-border: #0f4f57; /* type */ --fb-font: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fb-fs-xs: 10px; --fb-fs-sm: 12px; --fb-fs-md: 14px; --fb-fs-lg: 22px; /* space & shape */ --fb-gap: 8px; --fb-gap-lg: 12px; --fb-pad: 10px; --fb-radius: 3px; --fb-border-w: 2px; --fb-max-width: 1236px; --fb-mobile-max-width: 420px; /* component sizes */ --fb-control-h: 32px; --fb-map-h: 52px; --fb-seat-face-m: 72px; --fb-seat-face-d: 88px; --fb-co-tile-h: 52px; --fb-options-w: 300px; --fb-start-h: 54px; --fb-start-w: 320px; min-height: 100svh; background: radial-gradient(ellipse at 50% 0%, var(--fb-bg) 0, var(--fb-bg-edge) 100%); color: var(--fb-text); font-family: var(--fb-font); } body:has(#multiplayer-screen:not([hidden])) .shell { width: 100%; max-width: none; height: auto; margin: 0; padding: var(--fb-gap); } .freebattle-screen { display: grid; gap: var(--fb-gap); width: 100%; max-width: var(--fb-mobile-max-width); min-height: 0; margin: 0 auto; padding: var(--fb-pad); border: var(--fb-border-w) solid var(--fb-border); background: var(--fb-bg); box-shadow: inset 0 0 0 1px var(--fb-border-soft); position: relative; } .freebattle-screen::before { display: none; } .freebattle-screen button, .freebattle-screen select, .freebattle-screen input { font-family: var(--fb-font); } .freebattle-screen :focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 1px; } /* ---- shared pieces ---- */ .fb-kicker { color: var(--fb-text); font-size: var(--fb-fs-sm); font-weight: 800; letter-spacing: .12em; } .fb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--fb-ok); box-shadow: 0 0 4px var(--fb-ok); } .fb-panel { border: var(--fb-border-w) solid var(--fb-border); background: var(--fb-panel); box-shadow: inset 0 0 0 1px var(--fb-border-soft); } .fb-panel-title { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 6px var(--fb-pad); background: var(--fb-panel-dark); color: var(--fb-text); font-size: var(--fb-fs-md); font-weight: 800; letter-spacing: .08em; } .fb-co-state { color: var(--fb-text-dim); font-size: var(--fb-fs-xs); font-weight: 700; letter-spacing: 0; } .fb-button, .fb-icon-button, .fb-select, .fb-map-select { min-height: var(--fb-control-h); border: var(--fb-border-w) solid var(--fb-border); border-radius: var(--fb-radius); background: linear-gradient(var(--fb-paper), #c3c8c0); color: var(--fb-ink); font-size: var(--fb-fs-sm); font-weight: 800; cursor: pointer; } .fb-button { padding: 0 var(--fb-pad); letter-spacing: .06em; } .fb-icon-button { min-width: var(--fb-control-h); padding: 0; background: transparent; border-color: var(--fb-border-soft); color: var(--fb-text); font-size: var(--fb-fs-md); } .fb-select, .fb-map-select { width: 100%; padding: 0 6px; } .fb-button:disabled, .fb-select:disabled, .fb-map-select:disabled, .fb-start:disabled { opacity: .55; cursor: not-allowed; } /* ---- topbar ---- */ .fb-topbar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--fb-gap); } .fb-brand { display: flex; align-items: center; gap: var(--fb-gap); grid-column: 1 / -1; margin: 0; color: var(--fb-text); font-size: var(--fb-fs-lg); font-style: italic; font-weight: 900; letter-spacing: .04em; } .fb-brand-mark { width: 22px; height: 22px; background: repeating-linear-gradient(115deg, var(--fb-accent) 0 6px, transparent 6px 10px); } .fb-room { display: flex; align-items: center; gap: var(--fb-gap); } .fb-room-code { color: var(--fb-accent); font-size: var(--fb-fs-lg); letter-spacing: .06em; white-space: nowrap; } .fb-connection { display: flex; align-items: center; gap: 6px; color: var(--fb-text); font-size: var(--fb-fs-sm); font-weight: 800; } .fb-connection .connection-status { color: var(--fb-text-dim); } .fb-seat-count { color: var(--fb-accent); } .fb-leader { display: flex; align-items: stretch; grid-column: 1 / -1; border: var(--fb-border-w) solid var(--fb-accent); background: var(--fb-paper); } .fb-leader-badge { display: grid; place-items: center; padding: 0 var(--fb-pad); background: var(--fb-panel-dark); color: var(--fb-accent); font-size: var(--fb-fs-sm); font-weight: 800; } .fb-leader input { flex: 1; min-width: 0; min-height: var(--fb-control-h); padding: 0 var(--fb-pad); border: 0; background: transparent; color: var(--fb-ink); font-size: var(--fb-fs-md); font-weight: 800; } /* ---- maps ---- */ .fb-maps { display: flex; align-items: stretch; gap: var(--fb-gap); } .fb-maps-label { display: grid; place-items: center; min-width: 56px; padding: 0 var(--fb-pad); border: var(--fb-border-w) solid var(--fb-border); background: var(--fb-panel-dark); font-size: var(--fb-fs-md); font-weight: 800; } .fb-map-list { display: none; } .fb-map-select { flex: 1; min-width: 0; height: var(--fb-map-h); } .fb-map-note { display: none; } .fb-map-card { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: 1fr 1fr; align-items: center; column-gap: var(--fb-gap); min-width: 0; padding: 4px var(--fb-gap) 4px 4px; border: var(--fb-border-w) solid var(--fb-border); background: var(--fb-panel); color: var(--fb-text); text-align: left; cursor: pointer; } .fb-map-card.selected { border-color: var(--fb-accent); background: var(--fb-accent); color: var(--fb-ink); } .fb-map-preview { grid-row: 1 / 3; width: 64px; height: 100%; border: 1px solid var(--fb-border); image-rendering: pixelated; } .fb-map-name { align-self: end; overflow: hidden; font-size: var(--fb-fs-md); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .fb-map-card small { align-self: start; opacity: .85; font-size: var(--fb-fs-xs); } /* ---- seats (mobile = stacked rows, desktop = columns) ---- */ .fb-seats { display: grid; gap: var(--fb-gap); } .fb-seat { display: grid; grid-template-columns: var(--fb-seat-face-m) 1fr; grid-template-areas: "face head" "face pick" "face music"; align-items: center; gap: 4px var(--fb-gap); padding: var(--fb-gap); border: var(--fb-border-w) solid var(--fb-border); background: var(--fb-panel); box-shadow: inset 0 0 0 1px var(--fb-border-soft); color: var(--fb-text); } .fb-seat.you { border-color: var(--fb-accent); box-shadow: 0 0 0 1px var(--fb-accent), inset 0 0 0 1px var(--fb-border-soft); } .fb-seat.is-target { outline: 2px solid var(--fb-accent); outline-offset: 1px; } .fb-seat[role="button"] { cursor: pointer; } .fb-seat-head { grid-area: head; display: flex; align-items: center; justify-content: space-between; font-size: var(--fb-fs-md); font-weight: 800; } .fb-seat.you .fb-seat-head { color: var(--fb-accent); } .fb-seat-pick { grid-area: pick; display: block; overflow: hidden; padding: 4px 8px; background: var(--fb-paper); color: var(--fb-ink); font-size: var(--fb-fs-md); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .fb-seat-face { grid-area: face; position: relative; align-self: start; aspect-ratio: 1; border: var(--fb-border-w) solid var(--fb-border); background: var(--fb-panel-dark); } .fb-seat-face img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; } .fb-seat-unknown { display: grid; place-items: center; height: 100%; color: var(--fb-accent); font-size: var(--fb-fs-lg); font-weight: 900; } .fb-seat-badge { display: none; padding: 1px 0; background: var(--fb-p1); color: #fff; font-size: var(--fb-fs-md); font-weight: 900; text-align: center; } .fb-seat.cpu .fb-seat-badge { background: var(--fb-cpu); } .fb-seat-music { grid-area: music; min-width: 0; min-height: 28px; font-size: var(--fb-fs-xs); } span.fb-seat-music { display: flex; align-items: center; padding: 0 6px; border: 1px solid var(--fb-border-soft); background: var(--fb-panel-dark); color: var(--fb-text-dim); } .fb-seat-eyes { display: none; width: 100%; height: 32px; object-fit: cover; border: var(--fb-border-w) solid var(--fb-border); image-rendering: pixelated; } .fb-seat-action { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: var(--fb-border-w) solid var(--fb-border); background: var(--fb-paper); color: var(--fb-ink); font-size: var(--fb-fs-md); font-weight: 900; line-height: 1; cursor: pointer; } .fb-seat-action:disabled { opacity: .45; cursor: default; } /* open seats: one compact "add CPU" row on mobile, a dashed column on desktop */ .fb-seat.open { grid-template-areas: "head add"; grid-template-columns: 1fr auto; border-style: dashed; background: transparent; box-shadow: none; } .fb-seat.open:not(:first-of-type) { } .fb-seats > .fb-seat.open ~ .fb-seat.open { display: none; } .fb-seat-icon { display: none; width: 40px; height: 40px; border-radius: 50% 50% 4px 4px; background: var(--fb-border-soft); } .fb-add-cpu { grid-area: add; min-height: var(--fb-control-h); padding: 0 var(--fb-pad); border: var(--fb-border-w) solid var(--fb-border-soft); border-radius: var(--fb-radius); background: var(--fb-panel-raised); color: var(--fb-text); font-size: var(--fb-fs-sm); font-weight: 800; cursor: pointer; } .fb-add-cpu:disabled { opacity: .5; cursor: default; } /* ---- lower area: CO grid + options ---- */ .fb-lower { display: grid; gap: var(--fb-gap); } .fb-co-dots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: var(--fb-gap); } .fb-co-dot { height: var(--fb-co-tile-h); padding: 0; overflow: hidden; border: var(--fb-border-w) solid var(--fb-border); background: var(--fb-panel-dark); cursor: pointer; } .fb-co-dot img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; } .fb-co-dot[aria-selected="true"] { border-color: var(--fb-accent); box-shadow: 0 0 0 1px var(--fb-accent); } .fb-options { display: grid; align-content: start; } .fb-option-block { display: grid; gap: 6px; padding: var(--fb-gap) var(--fb-pad); border-top: 1px solid var(--fb-border); } .fb-option-label { color: var(--fb-text); font-size: var(--fb-fs-md); font-weight: 800; } .fb-audio { width: 100%; height: 36px; } .fb-logo-row { display: grid; grid-template-columns: 1fr auto; gap: var(--fb-gap); align-items: stretch; } .fb-profile-preview { display: grid; place-items: center; min-height: 44px; overflow: hidden; border: var(--fb-border-w) solid var(--fb-border); background: var(--fb-panel-dark); color: var(--fb-text-dim); font-size: var(--fb-fs-xs); } .fb-profile-preview img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; } /* ---- footer ---- */ .fb-footer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fb-gap); align-items: center; } .fb-status { display: flex; align-items: center; gap: 6px; margin: 0; padding: 4px var(--fb-pad); background: var(--fb-panel-dark); color: var(--fb-text); font-size: var(--fb-fs-xs); font-weight: 700; } .fb-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fb-ok); } .fb-status[data-kind="bad"]::before { background: var(--fb-p1); } .fb-start { width: 100%; min-height: var(--fb-start-h); border: var(--fb-border-w) solid var(--fb-start-border); border-radius: var(--fb-radius); background: linear-gradient(var(--fb-start-top), var(--fb-start-bottom)); box-shadow: inset 0 1px rgba(255, 255, 255, .45); color: #fff; font-size: var(--fb-fs-lg); font-style: italic; font-weight: 900; letter-spacing: .04em; text-shadow: 1px 1px var(--fb-start-border); cursor: pointer; } .fb-start:not(:disabled):hover { filter: brightness(1.08); } /* ---- result overlay (kept from the original lobby) ---- */ .fb-result { position: absolute; z-index: 5; inset: 20% 8%; display: grid; align-content: center; justify-items: center; gap: var(--fb-gap-lg); padding: 24px; border: var(--fb-border-w) solid var(--fb-border); background: var(--fb-panel-dark); text-align: center; } .fb-result h2 { margin: 0; color: var(--fb-accent); font-size: var(--fb-fs-lg); } .fb-result p { margin: 0; font-size: var(--fb-fs-sm); } /* ---- desktop ---- */ @media (min-width: 761px) { .freebattle-screen { max-width: var(--fb-max-width); padding: var(--fb-gap-lg); gap: var(--fb-gap-lg); } .fb-topbar { display: flex; flex-wrap: wrap; } .fb-brand { grid-column: auto; margin-right: auto; } .fb-leader { grid-column: auto; min-width: 220px; margin-left: auto; } .fb-map-select { display: none; } .fb-map-list { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fb-gap); } .fb-map-card { height: var(--fb-map-h); } .fb-seats { display: flex; align-items: stretch; gap: var(--fb-gap); } .fb-seat { flex: 1 1 0; min-width: 0; grid-template-columns: 1fr; grid-template-areas: "head" "pick" "face" "badge" "music" "eyes"; justify-items: stretch; align-content: start; min-height: 320px; } .fb-seat:not(.open) { flex-grow: 1.6; } .fb-seat-face { width: var(--fb-seat-face-d); justify-self: center; } .fb-seat-badge { display: block; grid-area: badge; width: var(--fb-seat-face-d); justify-self: center; } .fb-seat-eyes { display: block; grid-area: eyes; } .fb-seat.open { grid-template-columns: 1fr; grid-template-areas: "icon" "head" "add"; justify-items: center; align-content: center; gap: var(--fb-gap); } .fb-seats > .fb-seat.open ~ .fb-seat.open { display: grid; } .fb-seat.open .fb-seat-head { justify-content: center; font-size: var(--fb-fs-lg); } .fb-seat-icon { display: block; grid-area: icon; } .fb-lower { grid-template-columns: minmax(0, 1fr) var(--fb-options-w); align-items: start; } .fb-co-dots { grid-template-columns: repeat(4, 1fr); } .fb-co-dot { height: calc(var(--fb-co-tile-h) + 8px); } .fb-footer { grid-template-columns: 1fr var(--fb-start-w) 1fr; } .fb-start { grid-column: 2; } .fb-status { grid-column: 1; grid-row: 1; } } @media (min-width: 761px) and (max-width: 1100px) { .fb-seats { flex-wrap: wrap; } .fb-seat { flex: 1 1 22%; min-height: 0; } } /* ---- logo editor dialog (unchanged) ---- */ .fb-logo-dialog { width: min(420px, calc(100vw - 32px)); max-width: calc(100vw - 32px); padding: 0; border: 3px solid #435c68; background: #78909e; color: #f4f0df; box-shadow: 0 6px #1c3037, inset 0 0 0 2px #c0ccca; } .fb-logo-dialog::backdrop { background: #0b171dcc; } .fb-logo-dialog-inner { display: grid; gap: 10px; padding: 16px; } .fb-logo-dialog h2 { font: 900 15px ui-monospace, Menlo, monospace; } .fb-logo-dialog p { font: 700 11px/1.3 ui-monospace, Menlo, monospace; } .fb-logo-upload { display: inline-flex; justify-self: start; align-items: center; min-height: 32px; padding: 5px 9px; border: 2px solid #334d59; background: linear-gradient(#b1c2c3, #728996); color: #162f38; font: 900 10px ui-monospace, Menlo, monospace; cursor: pointer; } .fb-logo-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .fb-logo-stage { position: relative; display: inline-block; justify-self: center; max-width: 100%; min-width: 90px; min-height: 48px; background: #314954; touch-action: none; } .fb-logo-stage img { display: block; max-width: min(70vw, 340px); max-height: 38vh; object-fit: contain; image-rendering: auto; } .fb-logo-crop-window { position: absolute; top: 32%; right: 0; left: 0; height: 20%; border: 2px solid #f6dc64; background: #f8edaf38; box-shadow: 0 0 0 1px #162c37; cursor: ns-resize; touch-action: none; } .fb-logo-range { width: 100%; accent-color: #f3db63; } .fb-logo-actions { display: flex; justify-content: flex-end; gap: 7px; } .fb-logo-actions button { min-height: 30px; padding: 4px 8px; border: 2px solid #334d59; background: linear-gradient(#b1c2c3, #728996); color: #162f38; font: 900 9px ui-monospace, Menlo, monospace; } .fb-logo-actions #fb-logo-save { background: linear-gradient(#74c9c5, #3e9a9d); color: #fff; } .fb-logo-actions button:disabled { opacity: .45; } /* ---- Free Battle lobby: fit the viewport, never scroll the page ---- */ body:has(#multiplayer-screen:not([hidden])) { height: 100svh; overflow: hidden; } body:has(#multiplayer-screen:not([hidden])) .shell { height: 100svh; padding: var(--fb-gap); } .freebattle-screen { height: 100%; grid-template-rows: auto auto minmax(0, 1fr) auto auto; } .fb-seats { min-height: 0; align-content: start; } .fb-lower { min-height: 0; } .fb-co-dots { padding: 6px; } .fb-co-dot { height: clamp(32px, 5.5svh, var(--fb-co-tile-h)); } .fb-option-block { padding: 6px var(--fb-pad); } .fb-audio { height: 32px; } @media (min-width: 761px) { .fb-seats { overflow: hidden; } .fb-seat { min-height: 0; } .fb-co-dot { height: clamp(36px, 7svh, calc(var(--fb-co-tile-h) + 8px)); } } @media (max-width: 760px) { .freebattle-screen { gap: 6px; padding: 8px; } .fb-brand { font-size: var(--fb-fs-md); } .fb-start { min-height: 44px; font-size: var(--fb-fs-md); } .fb-status { display: none; } } /* Mobile: compact every section so all seats fit with no scrolling. */ @media (max-width: 760px) { body:has(#multiplayer-screen:not([hidden])) { --fb-seat-face-m: 52px; --fb-co-tile-h: 36px; --fb-map-h: 40px; --fb-control-h: 28px; } .fb-seat { padding: 6px; gap: 2px var(--fb-gap); } .fb-seat-pick { padding: 2px 6px; font-size: var(--fb-fs-sm); } .fb-seat-music { min-height: 24px; } .fb-co-dot { height: var(--fb-co-tile-h); } .fb-audio { display: none; } .fb-leader input { min-height: var(--fb-control-h); } } /* Mobile only: the seat list is an appending list. It never scrolls inside itself; each added CPU pushes the CO grid, options and footer down, and the page grows. */ @media (max-width: 760px) { body:has(#multiplayer-screen:not([hidden])) { height: auto; min-height: 100svh; overflow-x: hidden; overflow-y: auto; } body:has(#multiplayer-screen:not([hidden])) .shell { height: auto; min-height: 100svh; } .freebattle-screen { height: auto; grid-template-rows: none; } .fb-seats { overflow: visible; } } /* Mobile: trim outer and inner padding so content uses the full width. */ @media (max-width: 760px) { body:has(#multiplayer-screen:not([hidden])) .shell { padding: 4px; } .freebattle-screen { --fb-pad: 6px; --fb-gap: 6px; max-width: none; padding: 8px; border-width: 0; box-shadow: none; } .fb-seat { padding: 4px; } .fb-co-dots { padding: 4px; } .fb-option-block { padding: 4px 6px; } .fb-panel-title { padding: 4px 6px; } .fb-maps-label { min-width: 44px; padding: 0 6px; } } /* Mobile: your own seat is larger than the other players' cards. */ @media (max-width: 760px) { .fb-seat:not(.open) { --fb-seat-face-m: 96px; min-height: 124px; padding: 8px; gap: 6px var(--fb-gap); } .fb-seat:not(.open) .fb-seat-head { font-size: var(--fb-fs-lg); } .fb-seat:not(.open) .fb-seat-pick { padding: 6px 8px; font-size: var(--fb-fs-md); } .fb-seat:not(.open) .fb-seat-music { min-height: 32px; font-size: var(--fb-fs-sm); } } /* Name editing: pencil button beside the yellow title; editing swaps in a borderless input. 16px minimum font size stops iOS Safari from zooming the page when an input is focused. */ .fb-seat-head { gap: 6px; } .fb-seat-head { justify-content: flex-start; } .fb-seat-head > .fb-seat-action { margin-left: auto; } .fb-seat-head > span:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fb-edit-button { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: var(--fb-border-w) solid var(--fb-accent); border-radius: var(--fb-radius); background: var(--fb-panel-dark); color: var(--fb-accent); font-size: 24px; line-height: 1; cursor: pointer; } .fb-seat-head .fb-seat-name { flex: 1; min-width: 0; padding: 0; border: 0; border-bottom: 1px solid var(--fb-accent); border-radius: 0; background: transparent; color: var(--fb-accent); font: inherit; font-size: 16px; outline: 0; } @media (pointer: coarse) { .freebattle-screen input, .freebattle-screen select, .freebattle-screen textarea { font-size: max(16px, 1em); } } .freebattle-screen, .freebattle-screen button { touch-action: manipulation; } /* Mobile: the portrait fills its whole grid area (no gap under it); the card height follows the text column. */ @media (max-width: 760px) { .fb-seat:not(.open) { min-height: 0; } .fb-seat:not(.open) .fb-seat-face { align-self: stretch; aspect-ratio: auto; min-height: var(--fb-seat-face-m); } .fb-seat:not(.open) .fb-seat-face img { object-position: center top; } } /* Music / map dropdowns: pale blue-white pill with dark text and a dark chevron (matches the reference). */ .freebattle-screen select.fb-select, .freebattle-screen select.fb-map-select { appearance: none; -webkit-appearance: none; padding: 0 28px 0 8px; border: var(--fb-border-w) solid var(--fb-border); border-radius: 4px; background: var(--fb-select-chevron) no-repeat right 8px center / 12px 8px, linear-gradient(var(--fb-select-top), var(--fb-select-bottom)); box-shadow: inset 0 1px #fff, inset 0 -1px #aab6bf; color: var(--fb-select-ink); font-weight: 800; text-overflow: ellipsis; } /* Desktop: every player card uses identical rows so title, name, portrait, badge and music line up across cards. */ @media (min-width: 761px) { .fb-seat:not(.open) { grid-template-rows: 40px 32px auto auto 32px auto; align-content: start; align-items: center; } .fb-seat:not(.open) .fb-seat-head { min-height: 40px; } .fb-seat:not(.open) .fb-seat-face { align-self: start; } } /* Desktop card, per the reference: dark centered title band, pale name pill, large portrait with a full-width team badge, music pill, then the eye strip. All sizes are tokens. */ body:has(#multiplayer-screen:not([hidden])) { --fb-seat-face-d: 112px; --fb-seat-eyes-h: 36px; --fb-seat-w: 190px; } @media (min-width: 761px) { .fb-seat:not(.open) { flex: 0 0 var(--fb-seat-w); padding: 0 var(--fb-gap) var(--fb-gap); grid-template-rows: 36px 32px auto auto 32px auto; gap: 6px; } .fb-seat:not(.open) .fb-seat-head { position: relative; justify-content: center; margin: 0 calc(var(--fb-gap) * -1); padding: 0 var(--fb-gap); background: var(--fb-panel-dark); min-height: 36px; font-size: var(--fb-fs-md); } .fb-seat:not(.open) .fb-seat-head > .fb-seat-action { position: absolute; right: 6px; top: 6px; } .fb-seat:not(.open) .fb-seat-head > .fb-edit-button { position: absolute; right: 2px; top: 0; width: 36px; height: 36px; font-size: 18px; border: 0; background: transparent; } .fb-seat:not(.open) .fb-seat-pick { border-radius: 4px; text-align: left; box-shadow: inset 0 1px #fff, inset 0 -1px #aab6bf; background: linear-gradient(var(--fb-select-top), var(--fb-select-bottom)); } .fb-seat.you { border-width: 3px; } .fb-seat:not(.open) .fb-seat-eyes { width: var(--fb-seat-face-d); height: var(--fb-seat-eyes-h); justify-self: center; } .fb-seat-badge { font-size: var(--fb-fs-lg); border-radius: 2px; } } /* Audio snackbar (top right) and per-seat mute button. */ .fb-snackbars { position: fixed; z-index: 20; top: 8px; right: 8px; display: grid; justify-items: end; gap: var(--fb-gap); max-width: calc(100vw - 16px); } .fb-snackbar { display: flex; align-items: center; gap: var(--fb-gap); max-width: calc(100vw - 16px); padding: 6px 6px 6px var(--fb-pad); border: var(--fb-border-w) solid var(--fb-accent); border-radius: var(--fb-radius); background: var(--fb-panel-dark); color: var(--fb-text); font-size: var(--fb-fs-sm); font-weight: 800; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); } .fb-snackbar-button { min-height: var(--fb-control-h); padding: 0 var(--fb-pad); border: 0; border-radius: var(--fb-radius); background: var(--fb-accent); color: var(--fb-ink); font: inherit; cursor: pointer; } .fb-mute-button { display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; font-size: 16px; line-height: 1; cursor: pointer; } .fb-seat-head > .fb-mute-button { margin-left: auto; } .fb-seat-head > .fb-mute-button + .fb-seat-action { margin-left: 0; } @media (min-width: 761px) { .fb-seat:not(.open) .fb-seat-head > .fb-mute-button { position: absolute; right: 34px; top: 4px; margin: 0; } .fb-seat:not(.open) .fb-seat-head > .fb-mute-button:last-child { right: 4px; } } .fb-snackbar-close { display: grid; place-items: center; width: var(--fb-control-h); height: var(--fb-control-h); padding: 0; border: 0; background: transparent; color: var(--fb-text); font-size: var(--fb-fs-md); cursor: pointer; } .fb-start[aria-disabled="true"] { opacity: .55; filter: grayscale(.4); } /* In-match commander panels: per-listener mute button. */ .match-commander { position: relative; } .match-mute-button { position: absolute; z-index: 5; top: 4px; right: 4px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: var(--fb-border-w, 2px) solid #1f323d; border-radius: 4px; background: #2b4252cc; font-size: 18px; line-height: 1; cursor: pointer; } .match-mute-button[aria-pressed="true"] { background: #7a2f35cc; } /* Commander HUD mute button: sits in the funds row, just right of the "F" and left of the number. #match-commanders ignores pointer events, so the button opts back in to be clickable. */ .match-commander .match-mute-button { top: calc(26 * var(--u)); right: auto; left: calc(45 * var(--u)); width: calc(10 * var(--u)); height: calc(10 * var(--u)); min-width: 24px; min-height: 24px; font-size: calc(6 * var(--u)); pointer-events: auto; } /* Bigger commander HUD. The mute control is an icon only (no emoji, no text), drawn in the HUD's own pale ink so it blends with the card; it sits in the funds row between the "F" and the number. */ .match-commander { --u: min(4px, 0.5vw); } .match-commander .match-mute-button { --icon-speaker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3z'/%3E%3Cpath d='M16 8a5 5 0 010 8M18.5 5.5a9 9 0 010 13' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); --icon-speaker-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3z'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); top: calc(27 * var(--u)); left: calc(27 * var(--u)); width: calc(8 * var(--u)); height: calc(8 * var(--u)); min-width: 0; min-height: 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0; background: transparent; color: #f6e9d4; opacity: .9; font-size: 0; cursor: pointer; } .match-commander .match-mute-button::before { content: ""; width: 100%; height: 100%; background: currentColor; -webkit-mask: var(--icon-speaker) center / contain no-repeat; mask: var(--icon-speaker) center / contain no-repeat; } .match-commander .match-mute-button:hover, .match-commander .match-mute-button:focus-visible { opacity: 1; outline: 0; filter: drop-shadow(0 0 calc(1 * var(--u)) #fff); } .match-commander .match-mute-button[aria-pressed="true"] { color: #ffb0a8; background: transparent; } .match-commander .match-mute-button[aria-pressed="true"]::before { -webkit-mask-image: var(--icon-speaker-off); mask-image: var(--icon-speaker-off); } /* Searchable CO music picker. Looks like the pale dropdown pill; the list is a scrollable popover on . 16px+ inputs keep iOS from zooming when the search box is focused. */ .fb-picker-host { display: grid; } .fb-picker-button { width: 100%; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .freebattle-screen button.fb-picker-button { padding: 0 28px 0 8px; border: var(--fb-border-w) solid var(--fb-border); border-radius: 4px; background: var(--fb-select-chevron) no-repeat right 8px center / 12px 8px, linear-gradient(var(--fb-select-top), var(--fb-select-bottom)); box-shadow: inset 0 1px #fff, inset 0 -1px #aab6bf; color: var(--fb-select-ink); } .fb-picker-popover { position: fixed; z-index: 40; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; padding: 8px; border: var(--fb-border-w, 2px) solid #1f323d; border-radius: 4px; background: #2b4252; color: #eef1e6; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } .fb-picker-search { width: 100%; min-height: 36px; padding: 0 10px; border: 2px solid #1f323d; border-radius: 4px; background: #f1f4f6; color: #1d2b33; font: 700 16px ui-monospace, Menlo, monospace; } .fb-picker-list { margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; min-height: 0; } .fb-picker-item { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 6px; border-radius: 3px; font-size: 13px; font-weight: 800; cursor: pointer; } .fb-picker-item:hover, .fb-picker-item[aria-selected="true"] { background: #4a6275; } .fb-picker-item[aria-selected="true"] { box-shadow: inset 3px 0 #f2d768; } .fb-picker-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fb-picker-play { flex: none; width: 28px; height: 28px; padding: 0; border: 2px solid #8fa3b1; border-radius: 50%; background: transparent; cursor: pointer; position: relative; } .fb-picker-play::before { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 9px solid #eef1e6; border-top: 6px solid transparent; border-bottom: 6px solid transparent; transform: translateX(1px); } .fb-picker-play.playing { border-color: #f2d768; } .fb-picker-play.playing::before { width: 8px; height: 8px; border: 0; background: #f2d768; transform: none; } .fb-picker-note { margin: 0; min-height: 1.2em; color: #b9c6cc; font-size: 11px; font-weight: 700; } /* Picker popover blends with the dropdown pill it opens from: same width, same pale fill and dark ink. */ .fb-picker-popover { gap: 4px; padding: 4px; border-color: var(--fb-border, #1f323d); border-radius: 4px; background: linear-gradient(var(--fb-select-top, #f1f4f6), var(--fb-select-bottom, #d5dde3)); color: var(--fb-select-ink, #1d2b33); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); } .fb-picker-search { min-height: 32px; border: 1px solid #aab6bf; background: #fff; } .fb-picker-item { min-height: 32px; gap: 6px; padding: 0 4px; font-size: 12px; } .fb-picker-item:hover { background: #c3cdd5; } .fb-picker-item[aria-selected="true"] { background: #b3c0ca; box-shadow: inset 3px 0 #2b4252; } .fb-picker-play { width: 22px; height: 22px; border-color: #1d2b33; } .fb-picker-play::before { border-left-color: #1d2b33; border-left-width: 7px; border-top-width: 5px; border-bottom-width: 5px; } .fb-picker-play.playing { border-color: #c9484f; } .fb-picker-play.playing::before { width: 7px; height: 7px; background: #c9484f; } .fb-picker-note { color: #4a6275; font-size: 10px; } /* Search box: compact everywhere; only touch screens keep a 16px font (iOS zooms into smaller focused fields). */ .fb-picker-search { min-height: 24px; height: 24px; padding: 0 6px; font-size: 12px; line-height: 1; } @media (pointer: coarse) { .fb-picker-search { min-height: 30px; height: 30px; font-size: 16px; } } /* Picker colours: steel gray (the bottom half of the dropdown pill), not white. */ .fb-picker-popover { background: linear-gradient(#c3ced6, #aebbc5); border-color: #1f323d; } .fb-picker-search { border-color: #7f919d; background: #d3dce2; color: #1d2b33; } .fb-picker-search::placeholder { color: #4a6275; } .fb-picker-item:hover { background: #9fb0bc; } .fb-picker-item[aria-selected="true"] { background: #8fa2b0; } /* Watch latest move toggle: right-aligned directly under the magnifier (+ / - / 1:1) pill, same palette so it blends with it */ #watch-move-button { position: fixed; top: 58px; right: 12px; z-index: 40; padding: 5px 11px; border: 1px solid #596452; border-radius: 999px; background: #101712ee; box-shadow: 0 6px 20px #0008; color: #aab5a3; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; } #watch-move-button:hover { background: #2a352c; color: #e9f0e2; } #watch-move-button[aria-pressed="true"] { color: #e9f0e2; } #multiplayer-match-screen[hidden] #watch-move-button { display: none; } /* Test links: CPU music picker under the watch button */ #cpu-music-picker { position: fixed; top: 92px; right: 12px; z-index: 40; width: 170px; display: grid; gap: 3px; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: #aab5a3; } #cpu-music-picker .fb-picker-button { width: 100%; font-size: 11px; padding: 5px 8px; } #multiplayer-match-screen[hidden] #cpu-music-picker { display: none; } /* Play/stop control at the start of a seat's music button */ .fb-picker-play { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; font-size: 9px; line-height: 1; color: inherit; background: rgba(255, 255, 255, .14); cursor: pointer; vertical-align: middle; } .fb-picker-play:hover, .fb-picker-play:focus-visible { background: rgba(255, 255, 255, .3); outline: none; } .fb-picker-play.playing { background: rgba(255, 255, 255, .34); } /* Timed status banner (replaces the inline status line): top right, below the audio banner; click to dismiss */ .fb-status-banner { margin: 0; cursor: pointer; } .fb-status-banner[data-kind="bad"] { border-color: var(--fb-p1); } .fb-status-banner[data-kind="good"] { border-color: var(--fb-ok); } .fb-status-banner[hidden] { display: none; }