:root { color-scheme:dark; --navy:#081426; --glass:#0c2135; --bronze:#b78c4b; --ivory:#f6e8b1; --cyan:#42d6d0; --coral:#d86155; --muted:#b2c7cf; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { margin:0; background:#06101d; color:var(--ivory); font-family:Georgia,"Times New Roman",serif; }
body { display:flex; justify-content:center; padding:12px; }
button { font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; }
button:focus-visible { outline:2px solid #f6e8b1; outline-offset:3px; }
#game { width:min(1100px,100%); height:calc(100svh - 24px); min-height:420px; display:flex; flex-direction:column; overflow:hidden; border:1px solid #c79855; border-radius:22px; background:radial-gradient(circle at 50% 20%,#14314a 0,#071222 55%); box-shadow:0 0 0 1px #2f5570,0 20px 60px #0009; outline:none; }
.topbar { display:grid; grid-template-columns:auto minmax(0,1fr) 40px 40px; align-items:center; gap:10px 14px; padding:12px 18px; border-bottom:1px solid #b78c4b88; background:linear-gradient(180deg,#112a40ee,#091a2aee); z-index:4; flex-shrink:0; }
.brand { display:flex; flex-direction:column; line-height:1.2; }
.brand-en { font-size:17px; letter-spacing:.12em; color:#fff8dd; }
.brand-zh { font-size:14px; letter-spacing:.06em; color:#f0d18c; margin-top:4px; max-width:230px; overflow-wrap:anywhere; }
.level-label { font-size:13px; color:#b2d4d5; padding-inline-start:10px; border-inline-start:1px solid #b78c4b88; overflow-wrap:anywhere; }
.readouts { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; grid-column:1/-1; grid-row:2; font-size:12px; color:#e0eadc; }
.readouts span { padding:5px 9px; border:1px solid #b78c4b66; border-radius:999px; background:#071526cc; white-space:nowrap; }
.readouts #overflow { color:var(--cyan); }
.readouts #overflow.danger { color:#ffd2b8; border-color:#d86155aa; background:#481d24; }
.icon-button { width:40px; height:40px; padding:0; border:1px solid #b78c4b88; border-radius:50%; background:#0c2032; color:var(--ivory); font-size:19px; line-height:1; }
.icon-button:hover,.icon-button:focus-visible { background:#1f4660; box-shadow:0 0 0 3px #42d6d044; }
.stage { position:relative; flex:1; min-height:0; overflow:hidden; background:#081426; }
#canvas { position:absolute; inset:0; touch-action:none; outline:none; }
.stage canvas { display:block; }
.yard-readouts { position:absolute; inset:0; z-index:3; pointer-events:none; }
.yard { position:absolute; right:12px; top:22%; transform:translateY(-50%); width:clamp(96px,23%,160px); padding:9px 10px; border:1px solid #b78c4b99; border-radius:12px; background:#071a2bef; box-shadow:0 5px 16px #0006; }
.yard:nth-child(2) { top:50%; }
.yard:nth-child(3) { top:78%; }
.yard strong { display:block; font-size:13px; color:#f6e8b1; }
.yard span { display:block; margin-top:3px; font-size:12px; color:#c1dcdc; }
.yard i { display:block; height:5px; margin-top:6px; border-radius:999px; background:#23485b; overflow:hidden; }
.yard b { display:block; height:100%; width:0; background:linear-gradient(90deg,#1e8f9c,#f6e8b1); transition:width .18s; }
.yard.stable { border-color:#f6e8b1; box-shadow:0 0 18px #f6e8b144; }
.overlay { position:absolute; inset:0; display:grid; place-items:center; padding:12px; background:linear-gradient(180deg,#06132266,#061322cc); z-index:8; }
.overlay.hidden { display:none; }
.modal { width:min(520px,100%); max-height:100%; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#b78c4b #0c2135; padding:28px; border:1px solid #d4a867; border-radius:18px; background:linear-gradient(145deg,#0c2336fa,#081426fa); box-shadow:0 16px 45px #000b,inset 0 0 0 7px #b78c4b0c; text-align:center; }
.modal-kicker { font-size:11px; letter-spacing:.2em; color:#a3d5d2; line-height:1.5; overflow-wrap:anywhere; }
.modal h1 { margin:12px 0 10px; font-size:clamp(26px,4vw,40px); letter-spacing:.1em; color:#fff2c5; line-height:1.25; overflow-wrap:anywhere; text-shadow:0 0 22px #42d6d066; }
.modal p { margin:0 auto; color:#d2dfd9; line-height:1.6; font-size:15px; overflow-wrap:anywhere; }
.loading { height:8px; border:1px solid #b78c4b77; border-radius:999px; overflow:hidden; margin-bottom:18px; background:#071320; }
.loading span { display:block; width:0; height:100%; background:linear-gradient(90deg,#42d6d0,#f6e8b1); transition:width .2s; }
.actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:22px; }
.actions:has(> :only-child) { grid-template-columns:minmax(0,1fr); max-width:240px; margin-inline:auto; }
.action { min-width:0; min-height:46px; padding:10px 12px; border:1px solid #c69d5c; border-radius:10px; background:linear-gradient(180deg,#3b5660,#142b3b); color:#fff0c3; box-shadow:inset 0 1px #ffffff22,0 4px 12px #0005; font-size:15px; line-height:1.4; overflow-wrap:anywhere; }
.action:hover,.action:focus-visible { background:linear-gradient(180deg,#56777b,#1f3e4c); box-shadow:0 0 0 3px #42d6d055; }
.action.primary { background:linear-gradient(180deg,#e9c989,#9c6e36); color:#101e2d; border-color:#fff0b9; font-weight:700; }
.action.primary:hover,.action.primary:focus-visible { background:linear-gradient(180deg,#ffdea0,#c89753); color:#101e2d; }
.action:active { transform:translateY(1px); }
.console { display:flex; align-items:center; gap:16px; padding:12px 18px; border-top:1px solid #b78c4b88; background:linear-gradient(180deg,#0c1e2e,#081523); z-index:4; flex-shrink:0; }
.gate-controls { display:flex; gap:8px; flex:1; min-width:0; }
.gate-controls button { flex:1; min-width:0; min-height:46px; padding:8px; border:1px solid #b78c4b99; border-radius:10px; background:linear-gradient(180deg,#15374b,#0a1b2a); color:#e3f0dc; font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.gate-controls button:hover,.gate-controls button:focus-visible { background:#1d5362; box-shadow:0 0 0 3px #42d6d044; }
.gate-controls button.selected { border-color:#f6e8b1; color:#fff6d4; box-shadow:0 0 14px #42d6d055; }
.gate-controls button:disabled { color:#bdced0; background:#132b39; cursor:not-allowed; }
.console p { margin:0; max-width:280px; font-size:12px; line-height:1.5; color:var(--muted); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:700px) {
  body { padding:0; }
  #game { height:100svh; border-radius:0; border-left:0; border-right:0; }
  .topbar { padding:10px; gap:8px; }
  .brand-en { font-size:13px; letter-spacing:.06em; }
  .brand-zh { font-size:12px; }
  .brand { max-width:145px; }
  .level-label { font-size:11px; padding-inline-start:6px; }
  .readouts { gap:4px; font-size:11px; }
  .readouts span { padding:5px 6px; }
  .yard { right:8px; width:96px; padding:7px; }
  .yard strong,.yard span { font-size:12px; }
  .console { display:block; padding:9px 10px; }
  .gate-controls { gap:5px; }
  .gate-controls button { font-size:12px; padding:6px 3px; }
  .console p { text-align:center; max-width:none; margin-top:7px; font-size:11px; }
  .modal { padding:22px 16px; }
  .modal h1 { font-size:28px; }
  .modal p { font-size:13px; }
  .action { font-size:13px; padding:9px 6px; }
}
@media(max-height:600px) {
  #game { min-height:320px; }
  .modal { padding-block:16px; }
  .modal h1 { margin:8px 0; font-size:26px; }
  .actions { gap:7px; margin-top:14px; }
  .action { min-height:42px; }
}
@media(min-width:600px) and (max-height:500px) {
  .overlay { position:fixed; inset:12px; }
  .yard { padding:4px 6px; }
  .yard strong,.yard span { font-size:11px; line-height:1.1; }
  .yard span { margin-top:2px; }
  .yard i { height:3px; margin-top:3px; }
}