*{box-sizing:border-box} :root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} html,body{margin:0;min-height:100%;background:#050208} body{min-height:100vh;display:grid;place-items:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:radial-gradient(circle at 50% 7%,rgba(126,39,203,.35),transparent 36%),radial-gradient(circle at 15% 70%,rgba(90,25,145,.19),transparent 34%),#050208;overflow-x:hidden}.shell{width:min(100%,690px)}.game-header{display:grid;grid-template-columns:92px 1fr 92px;align-items:center;gap:8px}.title{display:block;width:min(100%,430px);max-height:104px;object-fit:contain;margin:auto}.icon-button{height:48px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #c8952b;color:#fff;background:linear-gradient(180deg,#44106f,#170623);border-radius:13px;font-weight:900;cursor:pointer;box-shadow:inset 0 0 14px #a94dff55,0 6px 18px #0007}.icon-button img{width:28px;height:28px;object-fit:contain}.icon-button span{font-size:11px;letter-spacing:.08em}.mode-line{display:flex;justify-content:center;align-items:center;gap:10px;margin:-2px 0 9px}.mode-line strong,.mode-line span{border:1px solid #8050a1;background:#170821;border-radius:999px;padding:5px 12px;font-size:11px;letter-spacing:.14em}.mode-line strong{color:#ffd665;border-color:#c6972e}.mode-line span{color:#d7b8ef}.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}.hud.time-mode{grid-template-columns:repeat(4,1fr)}.hud div{text-align:center;padding:8px 5px;border:1px solid #d4a93d;border-radius:12px;background:linear-gradient(#511584,#170826);box-shadow:inset 0 0 14px #8e35ff55,0 4px 12px #0007;min-width:0}.hud span{display:block;color:#d9baf8;font-size:10px;letter-spacing:.12em}.hud strong{display:block;color:#ffd85d;font-size:clamp(18px,4vw,27px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-wrap{position:relative;aspect-ratio:3/4;overflow:hidden;border:2px solid #e5b53c;border-radius:19px;background:#07030c;box-shadow:0 0 30px #8e35ff44,inset 0 0 40px #8e35ff33}canvas{display:block;width:100%;height:100%;touch-action:none}.overlay{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:15px;padding:28px;background:#040108c7;backdrop-filter:blur(4px)}.overlay.hidden{display:none}.overlay img{width:min(84%,470px);max-height:150px;object-fit:contain}.overlay p{margin:0;color:#d7c5e5;font-weight:700;font-size:14px;max-width:360px}.overlay button,.dpad button{border:1px solid #e5b53c;color:#fff;background:linear-gradient(#681bae,#260a42);border-radius:12px;font-weight:900;cursor:pointer;box-shadow:inset 0 0 12px #b34dff66,0 6px 18px #0008}.overlay button{min-width:180px;padding:13px 24px;font-size:18px}.dpad{display:none;grid-template-columns:repeat(3,58px);grid-template-areas:". u ." "l d r";justify-content:center;gap:7px;margin-top:12px}.dpad button{width:58px;height:48px;font-size:20px}.dpad button:nth-child(1){grid-area:u}.dpad button:nth-child(2){grid-area:l}.dpad button:nth-child(3){grid-area:d}.dpad button:nth-child(4){grid-area:r}.note,.authority-note{text-align:center;color:#bda8cb;font-size:11px;margin:8px 0 0}.authority-note{color:#8f7b9c;margin-top:4px}@media(max-width:760px),(pointer:coarse){body{place-items:start center}.dpad{display:grid}.game-header{grid-template-columns:70px 1fr 70px}.icon-button{height:42px;padding:4px}.icon-button span{display:none}.title{max-height:82px}.hud div{padding:6px 3px}.hud span{font-size:8px}.board-wrap{max-height:calc(100vh - 285px);margin:auto}.note{display:none}}@media(max-width:430px){.shell{width:100%}.hud{gap:4px}.hud.time-mode{grid-template-columns:repeat(2,1fr)}.board-wrap{border-radius:15px}.overlay img{max-height:112px}.authority-note{font-size:9px}}@media(orientation:landscape) and (max-height:620px){body{display:block;padding:8px}.shell{width:min(100%,1020px);display:grid;grid-template-columns:minmax(280px,480px) minmax(230px,1fr);grid-template-rows:auto auto 1fr;gap:8px 18px;margin:auto}.game-header{grid-column:1/3}.mode-line{grid-column:2;grid-row:2;margin:0;align-self:end}.hud{grid-column:2;grid-row:3;align-self:start;grid-template-columns:repeat(2,1fr);margin:0}.board-wrap{grid-column:1;grid-row:2/5;height:calc(100vh - 78px);width:auto;max-height:none}.dpad{grid-column:2;grid-row:4;display:grid;align-self:center}.note,.authority-note{grid-column:2}.title{max-height:58px}}

/* v0.6.1 — compact portrait D-pad safe area. */
@media(max-width:760px),(pointer:coarse){
  body{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .board-wrap{max-height:clamp(220px,calc(100dvh - 315px),440px)}
  .dpad{margin-bottom:max(12px,env(safe-area-inset-bottom))}
}
@media(max-width:390px) and (max-height:610px){
  .game-header{grid-template-columns:62px 1fr 62px}
  .title{max-height:62px}
  .mode-line{margin-bottom:5px}
  .hud{margin-bottom:6px}
  .board-wrap{max-height:clamp(205px,calc(100dvh - 300px),330px)}
  .dpad{grid-template-columns:repeat(3,52px);gap:5px;margin-top:8px}
  .dpad button{width:52px;height:44px}
}

/* v0.6.1 — narrow landscape overlay controls must fit inside the board. */
.overlay{padding-inline:10px}
.overlay button{min-width:min(180px,100%);max-width:100%}
.overlay p{max-width:100%;overflow-wrap:anywhere}