:root { --ink:#edf3ff; --muted:#98a7bd; --navy:#0b1322; --navy-2:#111d31; --panel:rgba(13,24,42,.86); --line:rgba(148,174,210,.16); --blue:#49a7ff; --blue-deep:#2469ae; --red:#f56767; --red-deep:#9b3c4d; --gold:#e8bb68; --green:#73d6a4; --shadow:0 18px 60px rgba(0,0,0,.28); }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; min-height:100%; height:100%; height:100dvh; overflow:hidden; overscroll-behavior:none; background:var(--navy); color:var(--ink); font-family:Manrope,system-ui,sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.result-stats { grid-template-columns:repeat(5,1fr); }
.app-shell { position:relative; width:100%; min-height:100%; height:100%; height:100dvh; overflow:hidden; background:#0b1422; }
#game-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; contain:strict; touch-action:none; overscroll-behavior:none; -webkit-user-select:none; user-select:none; }
.screen { position:absolute; inset:0; z-index:10; }
.hidden { display:none !important; }
.boot-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 45%, #1f3046 0, #0b1422 58%); }
.boot-screen:before,.menu-screen:before { content:""; position:absolute; inset:0; opacity:.18; background-image:linear-gradient(115deg,transparent 0 48%,rgba(232,187,104,.2) 48.2%,transparent 48.5%),linear-gradient(25deg,transparent 0 64%,rgba(232,187,104,.12) 64.2%,transparent 64.5%); background-size:240px 240px,330px 330px; pointer-events:none; }
.boot-screen h1,.menu-screen h1 { position:relative; z-index:1; margin:14px 0 24px; text-align:center; font:700 clamp(38px,7vw,78px)/.92 Cinzel,serif; letter-spacing:-.04em; text-transform:uppercase; }
h1 em,h2 em { font-style:normal; color:var(--gold); }
.eyebrow { position:relative; margin:0; color:var(--gold); font:500 10px/1.2 'DM Mono',monospace; letter-spacing:.22em; text-transform:uppercase; }
.load-track { width:min(220px,55vw); height:3px; border-radius:4px; background:rgba(255,255,255,.12); overflow:hidden; }
.load-track span { display:block; width:62%; height:100%; background:linear-gradient(90deg,var(--blue),var(--gold)); animation:load 1.25s ease-in-out infinite; }
.load-label { margin:14px 0 0; color:var(--muted); font-size:12px; }
@keyframes load { 0%{transform:translateX(-120%)} 50%,100%{transform:translateX(260%)} }
.crest { position:relative; display:grid; place-items:center; border:1px solid rgba(232,187,104,.52); background:linear-gradient(145deg,rgba(232,187,104,.15),rgba(49,104,157,.1)); clip-path:polygon(50% 0,92% 15%,84% 76%,50% 100%,16% 76%,8% 15%); box-shadow:0 0 0 6px rgba(232,187,104,.04), inset 0 0 22px rgba(232,187,104,.12); }
.crest:before,.crest:after,.crest span:before { content:""; position:absolute; background:var(--gold); opacity:.8; }
.crest:before { width:42%; height:5px; top:43%; left:29%; }
.crest:after { width:5px; height:42%; top:25%; left:48%; }
.crest span:before { width:18%; height:18%; top:21%; left:41%; border-radius:50%; }
.crest-large { width:74px; height:88px; }
.menu-screen { display:flex; align-items:center; justify-content:center; background:linear-gradient(90deg,rgba(8,16,29,.7),rgba(8,16,29,.2)),radial-gradient(circle at 66% 48%,rgba(59,113,153,.28),transparent 42%),#0b1422; overflow:hidden; }
.menu-screen:after { content:""; position:absolute; width:min(62vw,680px); height:min(62vw,680px); right:-8vw; top:8vh; border:1px solid rgba(232,187,104,.14); transform:rotate(45deg); box-shadow:0 0 0 38px rgba(232,187,104,.025),0 0 0 78px rgba(232,187,104,.018); pointer-events:none; }
.menu-content { position:relative; z-index:1; width:min(840px,92vw); padding:6vh 5vw; }
.brand-lockup { display:flex; align-items:center; gap:32px; margin-bottom:44px; }
.brand-lockup h1 { margin:10px 0 10px; text-align:left; font-size:clamp(36px,6vw,70px); }
.tagline { margin:0; color:#b6c4d5; font-size:clamp(13px,2vw,16px); letter-spacing:.08em; }
.crest-menu { width:112px; height:134px; flex:none; }
.menu-columns { display:grid; grid-template-columns:minmax(280px,380px) minmax(300px,1fr); align-items:stretch; gap:14px; }
.menu-actions { display:grid; width:100%; gap:10px; }
.primary-button,.secondary-button,.text-button { min-height:52px; border:1px solid transparent; border-radius:4px; color:var(--ink); letter-spacing:.03em; font-weight:700; transition:.18s ease; }
.primary-button { padding:0 20px; text-align:left; background:linear-gradient(100deg,#276ca8,#3d8bc5); box-shadow:0 8px 24px rgba(38,108,168,.22); }
.primary-button span { float:right; font-size:19px; }
.primary-button:hover { filter:brightness(1.12); transform:translateY(-1px); }
.secondary-button { padding:0 18px; text-align:left; border-color:rgba(148,174,210,.19); background:rgba(23,39,62,.68); }
.secondary-button:hover { background:rgba(37,64,93,.82); border-color:rgba(232,187,104,.45); }
.secondary-button small { float:right; color:var(--muted); font-weight:500; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.secondary-button.disabled { opacity:.46; cursor:not-allowed; }
.text-button { min-height:40px; padding:0 12px; color:var(--muted); background:transparent; }
.text-button:hover { color:var(--ink); }
.profile-card { display:grid; gap:18px; min-height:232px; padding:19px; color:var(--ink); text-align:left; border:1px solid rgba(232,187,104,.24); border-radius:8px; background:linear-gradient(145deg,rgba(29,55,80,.84),rgba(14,27,45,.92)); box-shadow:inset 0 0 0 1px rgba(111,177,211,.05),0 18px 36px rgba(0,0,0,.15); transition:.18s ease; }
.profile-card:hover { transform:translateY(-2px); border-color:rgba(232,187,104,.56); box-shadow:inset 0 0 0 1px rgba(111,177,211,.08),0 22px 42px rgba(0,0,0,.22); }
.profile-card-head { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.profile-card-head > span:first-child { display:grid; gap:5px; }
.profile-card .eyebrow { margin:0; color:#90a6be; font-size:9px; }
.profile-card-head strong { font:600 20px Cinzel,serif; }
.profile-sync-badge { padding:4px 7px; color:#8bdab0; border:1px solid rgba(139,218,176,.33); border-radius:999px; font:9px 'DM Mono',monospace; letter-spacing:.08em; white-space:nowrap; }
.profile-sync-badge.local { color:#e8bb68; border-color:rgba(232,187,104,.35); }
.profile-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.profile-stat-grid > span { display:grid; gap:5px; padding-right:8px; border-right:1px solid rgba(148,174,210,.12); }
.profile-stat-grid > span:last-child { padding-right:0; border-right:0; }
.profile-stat-grid strong { color:#eef5ff; font:700 25px Cinzel,serif; }
.profile-stat-grid small { color:#8296ae; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.profile-stat-grid .profile-win strong { color:#82d9ac; }.profile-stat-grid .profile-loss strong { color:#ff938c; }
.profile-footer { display:flex; align-items:end; justify-content:space-between; padding-top:12px; border-top:1px solid rgba(148,174,210,.13); }
.profile-footer > span:first-child { display:grid; gap:3px; }.profile-footer small { color:#71869d; font:9px 'DM Mono',monospace; letter-spacing:.1em; }.profile-footer strong { color:var(--gold); font:600 16px 'DM Mono',monospace; }.profile-open { color:#b8c8d9; font-size:10px; }
.menu-tip { width:min(450px,100%); margin:38px 0 0; color:#8999ae; font-size:12px; line-height:1.6; }
.tip-mark,.banner-spark { color:var(--gold); margin-right:8px; }
.version-label { position:fixed; top:max(14px,env(safe-area-inset-top)); right:max(14px,env(safe-area-inset-right)); z-index:2; margin:0; padding:5px 8px; color:#71829a; font:10px 'DM Mono',monospace; letter-spacing:.15em; border:1px solid rgba(148,174,210,.14); border-radius:4px; background:rgba(8,16,29,.48); }
.sound-toggle { position:fixed; left:max(138px,calc(10px + env(safe-area-inset-left))); bottom:max(20px,env(safe-area-inset-bottom)); z-index:20; display:flex; align-items:center; gap:7px; min-height:36px; padding:0 11px; color:#cbd7e8; border:1px solid rgba(148,174,210,.24); border-radius:6px; background:rgba(16,31,52,.88); box-shadow:0 8px 24px rgba(0,0,0,.24); font-size:11px; transition:.18s ease; }
.glass-panel.sound-toggle { border-color:rgba(148,174,210,.24); background:rgba(16,31,52,.88); box-shadow:0 8px 24px rgba(0,0,0,.24); }
.sound-toggle:hover { color:var(--gold); border-color:rgba(232,187,104,.55); background:#1e3857; }
.sound-toggle.muted { color:#8495aa; border-color:rgba(148,174,210,.17); }
.sound-icon { width:16px; font-size:15px; line-height:1; }
.glass-panel { border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow); backdrop-filter:none; }
.game-ui { position:absolute; inset:0; z-index:5; pointer-events:none; }
.game-ui > * { pointer-events:auto; }
.topbar { position:absolute; top:max(14px,env(safe-area-inset-top)); left:max(14px,env(safe-area-inset-left)); right:max(14px,env(safe-area-inset-right)); height:58px; display:flex; align-items:center; padding:0 10px; border-radius:8px; }
.brand-button { display:flex; align-items:center; gap:10px; border:0; background:transparent; color:var(--ink); padding:6px 10px; }
.mini-crest { width:22px; height:28px; display:block; border:1px solid var(--gold); clip-path:polygon(50% 0,92% 15%,84% 76%,50% 100%,16% 76%,8% 15%); }
.brand-short { font:700 12px Cinzel,serif; letter-spacing:.13em; }
.match-status { display:flex; align-items:center; gap:10px; margin-left:clamp(12px,4vw,54px); color:#dbe6f4; font-size:12px; font-weight:700; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 10px var(--blue); }
.turn-divider { color:#5e718a; }
.top-actions { display:flex; align-items:center; gap:12px; margin-left:auto; }
.timer-wrap { display:flex; align-items:baseline; gap:8px; padding-right:8px; }
.timer-label { color:#71829a; font:10px 'DM Mono',monospace; }
#timer { min-width:52px; font:600 16px 'DM Mono',monospace; letter-spacing:.04em; }
.pause-button,.surrender-button,.icon-button { color:#dce8f8; border:1px solid rgba(148,174,210,.2); background:rgba(26,43,68,.75); border-radius:4px; }
.pause-button { width:34px; height:34px; font-weight:800; }
.surrender-button { padding:9px 12px; color:#c6d1df; font-size:10px; text-transform:uppercase; letter-spacing:.11em; }
.pause-button:hover,.surrender-button:hover,.icon-button:hover { border-color:var(--gold); }
.faction-card { position:absolute; top:90px; width:190px; padding:16px; border-radius:8px; }
.player-card { left:max(14px,env(safe-area-inset-left)); border-left:2px solid var(--blue); }
.bot-card { right:max(14px,env(safe-area-inset-right)); border-right:2px solid var(--red); }
.player-card.red-side { border-left-color:var(--red); }.bot-card.blue-side { border-right-color:var(--blue); }
.faction-header { display:flex; align-items:center; gap:9px; min-height:33px; }
.faction-flag { display:grid; place-items:center; width:25px; height:31px; clip-path:polygon(0 0,100% 13%,100% 82%,50% 100%,0 82%); color:#fff; font-size:10px; }
.blue-flag { background:linear-gradient(150deg,#60baff,#1d5c9d); }.red-flag { background:linear-gradient(150deg,#fc8780,#9b3044); }
.faction-kicker { margin:0 0 3px; color:#6e819b; font:9px 'DM Mono',monospace; letter-spacing:.08em; }
.faction-header h2 { margin:0; font:600 14px Cinzel,serif; letter-spacing:.01em; }
.active-mark { width:6px; height:6px; margin-left:auto; border-radius:50%; background:var(--blue); box-shadow:0 0 9px var(--blue); }
.thinking-mark { margin-left:auto; color:var(--red); letter-spacing:4px; animation:pulse 1s infinite; }
@keyframes pulse { 50%{opacity:.25} }
.score-line { display:flex; align-items:baseline; gap:8px; margin:14px 0 12px; }
.score-line strong { font:700 34px/1 Cinzel,serif; color:#fff; }.score-line span { color:#91a0b3; font-size:11px; }
.stat-list { display:grid; gap:6px; padding-top:10px; border-top:1px solid rgba(148,174,210,.12); }.stat-list div { display:flex; justify-content:space-between; color:#8091a8; font-size:10px; }.stat-list b { color:#dbe6f4; font:500 11px 'DM Mono',monospace; }
.board-hint { position:absolute; left:50%; bottom:20px; transform:translateX(-50%); display:flex; align-items:center; padding:9px 14px; border-radius:999px; color:#aab8ca; font-size:11px; white-space:nowrap; }
.cursor-icon { color:var(--gold); margin-right:8px; }
.event-log { position:absolute; right:max(14px,env(safe-area-inset-right)); bottom:20px; width:270px; padding:12px 14px; border-radius:8px; background:rgba(10,19,34,.72); }
.log-head { display:flex; justify-content:space-between; align-items:center; color:#708198; font:10px 'DM Mono',monospace; letter-spacing:.12em; }.log-toggle { color:var(--gold); border:0; background:transparent; font-size:17px; line-height:1; }
#event-items { margin-top:8px; display:grid; gap:7px; }.event-item { color:#b8c6d7; font-size:10px; line-height:1.45; }.event-item time { display:block; color:#60738d; font:9px 'DM Mono',monospace; }.event-accent { color:var(--gold); }
.zoom-controls { position:absolute; left:max(14px,env(safe-area-inset-left)); bottom:20px; display:flex; border-radius:6px; overflow:hidden; }.zoom-controls button { width:36px; height:36px; border:0; border-right:1px solid rgba(148,174,210,.15); color:#cbd7e8; background:rgba(16,31,52,.83); font-size:20px; }.zoom-controls button:last-child { border-right:0; font-size:16px; }.zoom-controls button:hover { color:var(--gold); background:#1e3857; }
.replay-controls { position:absolute; left:50%; bottom:20px; z-index:8; display:grid; gap:10px; width:min(430px,calc(100% - 28px)); padding:12px 14px; transform:translateX(-50%); border-radius:8px; background:rgba(10,19,34,.9); box-shadow:0 12px 32px rgba(0,0,0,.32); }.replay-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; color:#7e91a9; font:10px 'DM Mono',monospace; letter-spacing:.12em; }.replay-heading strong { color:#e8bb68; font-weight:500; letter-spacing:.04em; text-align:right; }.replay-buttons { display:grid; grid-template-columns:1fr 1fr auto; gap:7px; }.replay-buttons button { min-height:34px; padding:0 10px; font-size:10px; }.replay-buttons button:disabled { opacity:.35; cursor:not-allowed; }.replay-result-button { min-width:92px; padding:0 8px; }.replay-mode .pause-button,.replay-mode .surrender-button { visibility:hidden; pointer-events:none; }
.expansion-banner { position:absolute; top:82px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:10px 20px; border:1px solid rgba(232,187,104,.42); background:rgba(26,41,60,.92); box-shadow:0 0 42px rgba(232,187,104,.14); border-radius:5px; animation:banner-in .35s ease-out; }.expansion-banner b { display:block; color:var(--gold); font:600 11px Cinzel,serif; letter-spacing:.12em; }.expansion-banner small { display:block; color:#93a4b8; margin-top:2px; font-size:10px; }.banner-spark { font-size:20px; }.expansion-banner.hidden { display:none; }
@keyframes banner-in { from{opacity:0; transform:translate(-50%,-12px)} to{opacity:1;transform:translate(-50%,0)} }
.overlay-screen { display:grid; place-items:center; padding:20px; background:rgba(4,9,17,.68); backdrop-filter:none; overflow-x:hidden; overflow-y:auto; }
.modal-frame { position:relative; width:min(740px,94vw); max-height:94vh; overflow:auto; padding:40px clamp(22px,5vw,56px); border:1px solid rgba(232,187,104,.24); border-radius:10px; background:linear-gradient(150deg,rgba(20,36,58,.98),rgba(11,21,36,.98)); box-shadow:0 24px 100px rgba(0,0,0,.45); }.modal-frame h2 { margin:8px 0 8px; font:700 clamp(28px,5vw,48px) Cinzel,serif; letter-spacing:-.03em; }.modal-lede { margin:0 0 25px; color:#9caec4; font-size:13px; line-height:1.6; }.small-frame { width:min(420px,94vw); text-align:center; }.small-frame .eyebrow { text-align:center; }.small-frame .primary-button { width:100%; margin-top:22px; }.close-button { position:absolute; top:15px; right:15px; width:30px; height:30px; font-size:20px; line-height:1; }
.difficulty-frame { width:min(680px,94vw); }.difficulty-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.difficulty-button { display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto 1fr; gap:5px 10px; min-height:144px; padding:16px 13px; color:#dce8f8; text-align:left; border:1px solid rgba(148,174,210,.18); border-radius:7px; background:rgba(14,28,47,.8); transition:.18s ease; }.difficulty-button:hover { transform:translateY(-2px); border-color:var(--difficulty-color); background:rgba(39,65,92,.9); }.difficulty-button.easy { --difficulty-color:#73d6a4; }.difficulty-button.medium { --difficulty-color:#e8bb68; }.difficulty-button.hard { --difficulty-color:#f56767; }.difficulty-mark { grid-row:1 / span 2; display:grid; place-items:center; width:30px; height:30px; color:var(--difficulty-color); border:1px solid var(--difficulty-color); border-radius:50%; font:600 11px 'DM Mono',monospace; }.difficulty-button strong { color:#f0f5fc; font:600 16px Cinzel,serif; }.difficulty-button small { color:#879ab2; font-size:10px; line-height:1.5; }.chapter-difficulty { float:right; padding:3px 6px; border:1px solid currentColor; border-radius:999px; font-size:8px; letter-spacing:.08em; }.chapter-difficulty.easy { color:#73d6a4; }.chapter-difficulty.medium { color:#e8bb68; }.chapter-difficulty.hard { color:#f56767; }
.friends-frame { width:min(450px,94vw); }.friend-actions { display:grid; gap:9px; }.friend-actions .secondary-button { text-align:left; }.room-status { min-height:18px; margin:16px 0 0; color:#91a4bb; font-size:11px; line-height:1.5; }.room-status.error { color:#ff9a91; }.room-status.success { color:#82d9ac; }.room-code { margin:10px 0 3px; padding:18px 10px; color:#f2d38e; border:1px solid rgba(232,187,104,.35); border-radius:7px; background:rgba(7,16,28,.38); font:700 clamp(34px,10vw,54px)/1 'DM Mono',monospace; letter-spacing:.18em; text-indent:.18em; text-shadow:0 0 25px rgba(232,187,104,.22); }.copy-code-button { margin-top:10px !important; text-align:center; }.copy-code-button span { float:none; margin-left:14px; }.join-form { display:grid; gap:10px; }.join-form .primary-button { margin-top:0; text-align:center; }.join-code-input { width:100%; min-height:56px; padding:0 16px; color:#f0f5fc; border:1px solid rgba(148,174,210,.3); border-radius:5px; outline:0; background:rgba(7,16,28,.65); font:700 25px 'DM Mono',monospace; letter-spacing:.16em; text-align:center; text-transform:uppercase; }.join-code-input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,187,104,.12); }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.time-limit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.time-limit-button { display:grid; gap:5px; min-height:78px; padding:14px 13px; text-align:left !important; }.time-limit-button strong { color:#f0f5fc; font:600 15px Cinzel,serif; }.time-limit-button small { color:#879ab2; font-size:10px; line-height:1.4; }
.profile-frame { width:min(500px,94vw); }.profile-detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:22px 0; overflow:hidden; border:1px solid rgba(148,174,210,.15); border-radius:6px; background:rgba(148,174,210,.15); }.profile-detail-grid div { display:grid; gap:6px; min-height:72px; padding:12px 8px; background:rgba(9,20,34,.82); text-align:center; }.profile-detail-grid strong { color:#eef5ff; font:600 22px Cinzel,serif; }.profile-detail-grid span { color:#8194ab; font-size:9px; text-transform:uppercase; letter-spacing:.06em; }.profile-detail-grid .profile-win strong { color:#82d9ac; }.profile-detail-grid .profile-loss strong { color:#ff938c; }.profile-code-box { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; padding:13px; border:1px solid rgba(232,187,104,.2); border-radius:6px; background:rgba(7,16,28,.4); }.profile-code-box > span { grid-column:1/-1; color:#8598af; font:9px 'DM Mono',monospace; letter-spacing:.1em; }.profile-code-box strong { color:var(--gold); font:700 22px 'DM Mono',monospace; letter-spacing:.13em; }.profile-code-box .secondary-button { min-height:36px; padding:0 10px; font-size:10px; }.profile-claim-form { margin-top:20px; }.profile-claim-form > label { color:#9aacc1; font-size:11px; }.profile-claim-form > div { display:grid; grid-template-columns:1fr auto; gap:8px; }.profile-claim-form .join-code-input { min-height:48px; font-size:19px; }.profile-claim-form .primary-button { min-height:48px; padding:0 13px; font-size:11px; }
.campaign-grid { display:grid; grid-template-columns:repeat(5,minmax(92px,1fr)); gap:9px; }.chapter-label { grid-column:1/-1; margin:15px 0 0; color:var(--gold); font:10px 'DM Mono',monospace; letter-spacing:.15em; text-transform:uppercase; }.level-button { min-height:72px; padding:10px; color:#cfdaea; text-align:left; border:1px solid rgba(148,174,210,.17); border-radius:5px; background:rgba(14,28,47,.78); }.level-button:hover { border-color:var(--gold); background:rgba(39,65,92,.8); }.level-button.locked { opacity:.45; cursor:not-allowed; }.level-button.complete { border-color:rgba(115,214,164,.52); }.level-button strong { display:block; color:#eaf0f8; font:600 18px Cinzel,serif; }.level-button small { color:#7d90a8; font-size:9px; }.level-stars { float:right; color:var(--gold); letter-spacing:-2px; }
.settings-list { display:grid; gap:15px; padding:14px 0 23px; }.range-row,.toggle-row { display:grid; grid-template-columns:1fr 1.4fr 42px; align-items:center; gap:12px; color:#bac8d9; font-size:12px; }.range-row output { text-align:right; color:var(--gold); font:10px 'DM Mono',monospace; }.range-row input { width:100%; accent-color:var(--gold); }.toggle-row { grid-template-columns:1fr auto; position:relative; }.toggle-row input { position:absolute; opacity:0; }.toggle-ui { position:relative; width:42px; height:22px; border:1px solid rgba(148,174,210,.32); border-radius:20px; background:#14253c; }.toggle-ui:after { content:""; position:absolute; width:14px; height:14px; left:3px; top:3px; border-radius:50%; background:#7990a9; transition:.16s; }.toggle-row input:checked + .toggle-ui { background:#275f89; border-color:#63a8d4; }.toggle-row input:checked + .toggle-ui:after { left:22px; background:var(--gold); }.rules-card { padding:16px; border:1px solid rgba(148,174,210,.13); border-radius:5px; background:rgba(7,16,28,.32); }.rules-card h3 { margin:0 0 8px; font:600 15px Cinzel,serif; color:var(--gold); }.rules-card p { margin:0; color:#98a9bd; font-size:11px; line-height:1.65; }.rule-icons { display:flex; flex-wrap:wrap; gap:14px; margin-top:13px; color:#8293aa; font-size:10px; }.dot { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; }.blue-dot{background:var(--blue)}.red-dot{background:var(--red)}.white-dot{background:#eaf3ff}
.result-frame { width:min(500px,94vw); text-align:center; }.result-ribbon { display:inline-block; margin:-40px auto 25px; padding:6px 14px; color:#1a2736; background:var(--gold); font:600 10px 'DM Mono',monospace; letter-spacing:.13em; }.result-frame .eyebrow { text-align:center; }.result-frame h2 { font-size:48px; }.result-score { display:flex; align-items:end; justify-content:center; gap:26px; margin:26px 0; }.result-score div:not(.result-vs) { display:grid; gap:5px; }.result-score span { color:#8598af; font:10px 'DM Mono',monospace; letter-spacing:.12em; }.result-score strong { font:700 48px Cinzel,serif; }.result-score div:first-child strong { color:var(--blue); }.result-score div:last-child strong { color:var(--red); }.result-vs { color:#6c7d92; font:10px 'DM Mono',monospace; padding-bottom:10px; }.result-stats { display:grid; grid-template-columns:repeat(4,1fr); margin:0 0 27px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; }.result-stats div { display:grid; gap:6px; }.result-stats span { color:#7b8ea5; font-size:10px; }.result-stats b { color:#dbe7f4; font:500 13px 'DM Mono',monospace; }.result-actions { display:grid; gap:8px; }.result-actions .primary-button,.result-actions .secondary-button { text-align:center; }.result-actions .primary-button span,.result-actions .secondary-button span { float:none; margin-left:14px; }
@media (max-width:760px) { .topbar { height:50px; }.brand-short { display:none; }.match-status { margin-left:4px; font-size:10px; gap:6px; }.turn-divider,.mode-label { display:none; }.surrender-button { display:none; }.faction-card { top:calc(58px + env(safe-area-inset-top)); width:calc(50% - 20px); padding:10px; }.faction-card .stat-list div:nth-child(4) { display:none; }.faction-header h2 { font-size:11px; }.faction-kicker { font-size:8px; }.score-line { margin:8px 0; }.score-line strong { font-size:25px; }.stat-list { padding-top:7px; }.board-hint { left:auto; right:10px; transform:none; max-width:calc(100% - 140px); overflow:hidden; text-overflow:ellipsis; }.event-log { right:10px; bottom:58px; width:min(250px,calc(100% - 20px)); max-height:30dvh; overflow:auto; }.zoom-controls { bottom:max(10px,env(safe-area-inset-bottom)); left:max(10px,env(safe-area-inset-left)); }.zoom-controls button { width:42px; height:42px; }.sound-toggle { left:max(145px,calc(10px + env(safe-area-inset-left))); bottom:max(10px,env(safe-area-inset-bottom)); min-height:42px; }.version-label { top:max(10px,env(safe-area-inset-top)); right:max(10px,env(safe-area-inset-right)); font-size:9px; }.brand-lockup { gap:20px; margin-bottom:30px; }.crest-menu { width:72px; height:88px; }.menu-content { max-height:100dvh; overflow:auto; -webkit-overflow-scrolling:touch; }.menu-columns { grid-template-columns:1fr; }.profile-card { min-height:206px; }.campaign-grid { grid-template-columns:repeat(5,1fr); gap:5px; }.level-button { min-height:59px; padding:6px; }.level-button strong { font-size:15px; }.level-button small { display:none; }.overlay-screen { padding:12px; }.modal-frame { max-height:calc(100dvh - 24px); padding:34px 20px; }.result-stats { grid-template-columns:repeat(2,1fr); row-gap:12px; }.result-score { gap:13px; }.result-score strong { font-size:37px; } }
@media (max-width:760px) { .replay-controls { bottom:max(68px,calc(58px + env(safe-area-inset-bottom))); width:calc(100% - 20px); }.replay-buttons { grid-template-columns:1fr 1fr; }.replay-buttons button:last-child { grid-column:1/-1; } }
@media (max-width:760px) { .difficulty-grid { grid-template-columns:1fr; }.difficulty-button { min-height:92px; } }
@media (max-width:420px) { .faction-card { width:calc(50% - 14px); }.faction-card .stat-list div:nth-child(3) { display:none; }.bot-card { right:7px; }.player-card { left:7px; }.timer-wrap { gap:4px; }.timer-label { display:none; }.top-actions { gap:5px; }.pause-button { width:34px; height:34px; }.event-log { bottom:56px; }.menu-content { padding:5vh 7vw; } }
@media (min-width:1100px) { .faction-card { width:220px; padding:20px; } }
@media (max-height:520px) and (orientation:landscape) { .topbar { top:max(6px,env(safe-area-inset-top)); height:44px; }.faction-card { top:52px; width:180px; padding:7px 9px; }.faction-card .stat-list div:nth-child(n+3) { display:none; }.score-line { margin:5px 0; }.score-line strong { font-size:24px; }.event-log { right:8px; bottom:8px; width:220px; max-height:112px; }.zoom-controls { left:8px; bottom:8px; }.zoom-controls button { width:38px; height:38px; }.sound-toggle { left:122px; bottom:8px; min-height:38px; }.board-hint { bottom:8px; }.expansion-banner { top:58px; transform:translateX(-50%) scale(.86); } }
@media (prefers-reduced-motion:reduce) { * { animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* Live phone viewport + automatic orientation layouts. */
html, body, .app-shell {
  width: var(--game-viewport-width, 100vw);
  height: var(--game-viewport-height, 100dvh);
  min-height: 0;
}

@media (orientation:portrait) and (max-width:760px) {
  .topbar { padding-right:max(8px,env(safe-area-inset-right)); padding-left:max(8px,env(safe-area-inset-left)); }
  .faction-card { top:calc(56px + env(safe-area-inset-top)); width:calc(50% - 13px); padding:8px; }
  .player-card { left:max(6px,env(safe-area-inset-left)); }
  .bot-card { right:max(6px,env(safe-area-inset-right)); }
  .board-hint { bottom:max(60px,calc(50px + env(safe-area-inset-bottom))); }
  .event-log { max-height:24dvh; }
}

@media (orientation:landscape) and (max-height:600px) {
  .topbar { top:max(4px,env(safe-area-inset-top)); height:42px; }
  .faction-card { top:48px; width:clamp(150px,22vw,190px); padding:6px 8px; }
  .faction-card .stat-list div:nth-child(n+3) { display:none; }
  .score-line { margin:4px 0; }
  .event-log { right:max(7px,env(safe-area-inset-right)); bottom:max(7px,env(safe-area-inset-bottom)); width:min(210px,28vw); max-height:96px; }
  .zoom-controls { left:max(7px,env(safe-area-inset-left)); bottom:max(7px,env(safe-area-inset-bottom)); }
  .sound-toggle { left:max(120px,calc(7px + env(safe-area-inset-left))); bottom:max(7px,env(safe-area-inset-bottom)); }
  .board-hint { bottom:max(7px,env(safe-area-inset-bottom)); max-width:42vw; }
  .menu-content { max-height:var(--game-viewport-height,100dvh); padding:4vh 5vw; }
  .brand-lockup { margin-bottom:18px; }
  .crest-menu { width:58px; height:70px; }
  .menu-columns { grid-template-columns:minmax(240px,340px) minmax(260px,1fr); }
  .primary-button,.secondary-button { min-height:44px; }
}