/* Copyright (C) 2026 Libre Arcade contributors; SPDX-License-Identifier: AGPL-3.0-or-later */
:root { color-scheme: dark; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; background:#101419; color:#eef4f8; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
button, a { touch-action:manipulation; }
button { font:inherit; cursor:pointer; }
button:focus-visible,a:focus-visible { outline:3px solid #f4cf77; outline-offset:3px; }
a { color:#a8d8f6; }
[hidden] { display:none !important; }
.app { min-height:100dvh; height:100dvh; height:100svh; display:flex; flex-direction:column; background:radial-gradient(ellipse at 50% 25%,#1e303b 0%,#101419 75%); }
.topbar { flex:0 0 auto; min-height:56px; padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left)); display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid #ffffff16; }
.brand { font-weight:750; font-size:14px; letter-spacing:.02em; color:#e7f2f7; text-decoration:none; white-space:nowrap; }
.top-actions { display:flex; align-items:center; gap:4px; }
.text-button,.lang-button,.sound-button { padding:9px 10px; border:1px solid transparent; background:none; color:#d7e6ed; border-radius:10px; font-weight:550; font-size:13px; }
.text-button:hover,.lang-button:hover,.sound-button:hover { background:#ffffff17; }
.sound-button { border-color:#ffffff30; min-width:40px; min-height:38px; font-size:17px; line-height:1; }
.sound-button:disabled {opacity:.4;cursor:default;}
.compact-icon {display:none;}
.lang-button { border-color:#ffffff30; min-width:42px; font-weight:750; }
.main { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:8px 12px max(8px,env(safe-area-inset-bottom)); }
.menu-screen { width:100%; max-width:480px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; }
.menu-icon { display:grid; grid-template-columns:repeat(2,44px); gap:7px; transform:rotate(-8deg); margin:0 0 12px; }
.menu-icon span { aspect-ratio:1; border-radius:10px; border:2px solid #7199a7; background:#1f3641; display:grid; place-items:center; font-weight:850; font-size:22px; }
.menu-icon span:first-child { background:#a8b0b5; color:#101419; }
h1,h2,p { margin:0; }
.menu-screen h1 { font-size:clamp(29px,8vw,54px); line-height:1.07; letter-spacing:-.045em; }
.menu-caption { font-size:14px; color:#a2b3bf; letter-spacing:.01em; }
.primary { background:#a8d8f6; color:#10212c; border:0; font-weight:760; border-radius:12px; padding:13px 22px; }
.primary:hover { background:#c5eaff; }
.menu-play { min-width:min(80vw,220px); margin-top:12px; }
.game-screen { width:100%; max-width:670px; height:100%; min-height:0; display:flex; flex-direction:column; align-items:center; gap:8px; }
.game-heading { flex:0 0 auto; width:100%; max-width:560px; min-height:36px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.game-heading h1 { font-weight:740; font-size:clamp(15px,4.5vw,22px); letter-spacing:-.025em; }
.counter { flex:0 0 auto; display:flex; align-items:baseline; gap:2px; color:#9bafbc; font-size:13px; font-variant-numeric:tabular-nums; }
.counter strong { color:#ecf5f8; font-size:23px; }
.board-area { flex:1 1 auto; width:100%; min-height:0; display:flex; align-items:center; justify-content:center; }
.board { width:min(100%,560px); max-height:100%; aspect-ratio:1; display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); grid-template-rows:repeat(10,minmax(0,1fr)); gap:clamp(1px,.35vmin,3px); background:#06080a; padding:clamp(3px,.65vmin,7px); border:1px solid #52626d; border-radius:12px; box-shadow:0 12px 36px #0005; container-type:inline-size; }
.cell { min-width:0; min-height:0; padding:0; border:1px solid #c4ccd1; border-radius:25%; background:#070a0c; color:#b5bec5; font-size:clamp(10px,3.35cqw,20px); font-family:Georgia,serif; font-variant-numeric:tabular-nums; font-weight:750; display:flex; align-items:center; justify-content:center; line-height:1; }
.cell.available { background:#909ca5; border-color:#e0e5e7; color:#0c1318; }
.cell.available:hover { background:#d7e6ec; }
.cell.latest { color:#ff5151; }
.cell.selected { outline:2px solid #e9cf7c; outline-offset:-3px; }
.cell:focus-visible { outline:2px solid #f4cf77; outline-offset:-3px; }
.status { flex:0 0 auto; min-height:18px; text-align:center; color:#b5c7d0; font-size:clamp(10px,2.8vw,12px); line-height:1.25; }
.game-actions { flex:0 0 auto; width:100%; max-width:560px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.game-actions button { padding:11px 5px; min-height:44px; border:1px solid #66808f; background:#263943; border-radius:9px; color:#e7f1f6; font-weight:650; font-size:clamp(10px,2.6vw,13px); line-height:1.18; }
.game-actions button:hover { background:#365260; }
.game-actions button:disabled { opacity:.45; cursor:default; }
.dialog-backdrop { position:fixed; inset:0; background:#04080bdb; display:flex; justify-content:center; align-items:center; padding:20px; z-index:10; }
.dialog { background:#1c2a32; border:1px solid #67808b; box-shadow:0 20px 80px #000a; border-radius:18px; width:min(100%,540px); max-height:85dvh; overflow:auto; display:flex; flex-direction:column; gap:14px; padding:20px; }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dialog h2 { font-size:22px; }
.dialog p { font-size:15px; line-height:1.5; color:#d6e2e8; }
.close-button { border:0; background:transparent; color:#eaf4f8; font-size:29px; line-height:1; width:32px; height:32px; }
.dialog-links { display:flex; flex-wrap:wrap; gap:12px; font-size:14px; }
.dialog .primary { align-self:flex-end; }
@media (max-height:500px) { .topbar { min-height:38px;padding-top:3px;padding-bottom:3px; } .game-heading { min-height:24px; } .game-heading h1 { font-size:15px; } .counter strong { font-size:17px; } .game-screen { gap:3px; } .game-actions button { min-height:34px; padding:5px 3px; } .main { padding-top:3px;padding-bottom:3px; } .status { min-height:14px; } .menu-screen { gap:7px; }.menu-icon { margin-bottom:3px; grid-template-columns:repeat(2,30px); }.menu-icon span { font-size:16px; }.menu-play {margin-top:4px;} }
@media (max-width:360px) { .top-actions {gap:0;} .text-button {font-size:11px; padding:8px 6px;} .brand {font-size:12px;} .topbar {padding-left:8px;padding-right:8px;} .main {padding-left:5px;padding-right:5px;} .game-actions {gap:4px;} }

@media (max-width:410px) {
  .topbar {gap:3px;}
  .top-actions {gap:1px;}
  .top-actions .text-button {min-width:34px; min-height:38px; padding:6px 2px; font-size:17px;}
  .top-actions .text-button > [data-i18n] {display:none;}
  .compact-icon {display:inline;}
  .lang-button {min-width:37px;padding:7px 5px;}
  .sound-button {min-width:37px;padding:7px 5px;}
}