:root { color-scheme: dark; font-family: "Arial Narrow", "Segoe UI", sans-serif; background: #03050c; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100%; overflow: hidden; overscroll-behavior: none; background: #03050c; color: #e9f7ff; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.app-shell { position: relative; width: 100vw; height: 100vh; height: 100dvh; min-height: 100svh; overflow: hidden; }
.background-art { position: absolute; inset: 0; z-index: 0; background: linear-gradient(rgba(2, 5, 15, .62), rgba(2, 5, 15, .78)), url('./img/background.png') center / cover no-repeat; filter: saturate(.72) brightness(.72); }
#game-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.vignette { pointer-events: none; position: absolute; z-index: 2; inset: 0; background: radial-gradient(ellipse at center, transparent 28%, rgba(0,0,10,.58) 100%); }
.topbar, .controls, .play-stats, .judgement, .countdown, .hint { z-index: 3; }
.result { z-index: 4; }.editor { z-index: 5; }
.topbar { position: absolute; top: calc(env(safe-area-inset-top, 0px) + clamp(16px, 3vw, 38px)); left: calc(env(safe-area-inset-left, 0px) + clamp(18px, 4vw, 62px)); display: flex; align-items: flex-start; gap: 25px; }
.brand { letter-spacing: .19em; font-size: clamp(18px, 2vw, 28px); font-weight: 800; line-height: .8; text-shadow: 0 0 18px #42dfff; }
.brand span { color: #55dcff; } .brand small { display: block; margin-top: 10px; color: #8297aa; font-size: 9px; letter-spacing: .26em; text-shadow: none; }
.status { padding: 6px 9px; border: 1px solid #26718b; color: #76eaff; font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.play-stats { position: absolute; top: calc(env(safe-area-inset-top, 0px) + clamp(74px, 8vw, 104px)); right: calc(env(safe-area-inset-right, 0px) + clamp(18px, 4vw, 62px)); display: flex; gap: 18px; text-align: right; pointer-events: none; }
.play-stats div { min-width: 68px; } .play-stats small { display: block; margin-bottom: 2px; color: #6e99aa; font-size: 8px; font-weight: 700; letter-spacing: .16em; } .play-stats strong { color: #d9f9ff; font-size: 18px; font-style: italic; letter-spacing: .06em; text-shadow: 0 0 12px #167e99; }
.controls { position: absolute; right: calc(env(safe-area-inset-right, 0px) + clamp(18px, 4vw, 62px)); top: calc(env(safe-area-inset-top, 0px) + clamp(16px, 3vw, 38px)); display: flex; gap: 8px; }
button { appearance: none; border: 1px solid #315466; background: rgba(5,15,25,.72); color: #bdd9e5; padding: 10px 14px; cursor: pointer; font: 700 10px/1 inherit; letter-spacing: .13em; transition: .18s; }
button:hover:not(:disabled) { border-color: #74e9ff; color: white; box-shadow: 0 0 16px #167c9b88; } button:disabled { opacity: .4; cursor: default; }
button.primary { border-color: #3fd8ff; color: #e9fbff; background: #0c4b61aa; }
.speed-control { display: flex; align-items: center; gap: 6px; padding: 0 3px 0 7px; border: 1px solid #315466; background: rgba(5,15,25,.72); color: #83a9b9; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.speed-control select { appearance: none; border: 0; min-width: 27px; padding: 10px 5px; background: #0b2432; color: #d8f6ff; font: 700 10px/1 inherit; text-align: center; cursor: pointer; outline: none; }
.editor { position: absolute; z-index: 3; top: 0; right: 0; width: min(340px, 92vw); height: 100%; padding: 18px; overflow: auto; border-left: 1px solid #2f9db9; background: rgba(3, 12, 23, .96); transform: translateX(102%); transition: transform .24s ease; }
.editor.show { transform: translateX(0); } .editor-head { display: flex; justify-content: space-between; align-items: center; color: #8deeff; font-size: 11px; font-weight: 800; letter-spacing: .16em; } .editor-head button { padding: 7px 8px; }
.editor-time { margin: 20px 0 13px; color: #7b9ba8; font-size: 10px; letter-spacing: .15em; } .editor-time strong { color: #e9fcff; font-size: 22px; letter-spacing: .04em; }
.editor-transport { display: flex; gap: 6px; margin: 0 0 13px; }.editor-transport button { flex: 1; }
.editor-lanes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: 13px; } .editor-lanes button { padding: 11px 2px; } .editor-lanes button.selected { border-color: #77edff; background: #12627d; color: white; }
.editor label { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; color: #83a5b2; font-size: 10px; letter-spacing: .12em; } .editor label select { width: 120px; border: 1px solid #315466; background: #0b2432; color: #e4faff; padding: 7px; }
.editor > .primary { width: 100%; margin: 9px 0 13px; }.editor-events { max-height: 180px; overflow: auto; border-top: 1px solid #234657; border-bottom: 1px solid #234657; }.editor-event { display: flex; justify-content: space-between; padding: 8px 3px; color: #b7dbe5; font-size: 10px; }.editor-event button { padding: 3px 5px; }
.editor-auto { width: 100%; margin: -5px 0 13px; border-color: #437485; color: #9bdbe9; }
.editor-actions { display: flex; gap: 6px; margin: 12px 0; }.editor-actions button { flex: 1; padding: 9px 5px; }.editor textarea { width: 100%; min-height: 150px; resize: vertical; border: 1px solid #315466; background: #06111b; color: #a6eafa; padding: 8px; font: 10px/1.35 Consolas, monospace; }
.judgement { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%) scale(.82); min-width: 180px; text-align: center; color: #fff; font-size: clamp(20px, 3.4vw, 42px); font-weight: 900; font-style: italic; letter-spacing: .1em; opacity: 0; pointer-events: none; text-shadow: 0 0 20px currentColor; }
.countdown { position: absolute; left: 50%; top: 37%; transform: translate(-50%, -50%); color: #c4f7ff; font-size: clamp(34px, 5vw, 64px); font-weight: 900; font-style: italic; letter-spacing: .08em; opacity: 0; pointer-events: none; text-shadow: 0 0 26px #32cfff; }
.countdown.show { animation: countdown-pop .65s ease-out both; }
.result { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(390px, calc(100vw - 38px)); padding: 30px; transform: translate(-50%, -50%) scale(.94); border: 1px solid #3bcff3; background: rgba(3, 13, 25, .92); text-align: center; opacity: 0; pointer-events: none; box-shadow: 0 0 48px #168ba844, inset 0 0 36px #0d527122; transition: opacity .25s, transform .25s; }
.result.show { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; } .result p { margin: 0; color: #7ccfe1; font-size: 10px; font-weight: 700; letter-spacing: .22em; } .result h2 { margin: 8px 0 22px; color: #dffcff; font-size: 30px; font-style: italic; letter-spacing: .12em; text-shadow: 0 0 18px #35d7ff; }
.result-score small, .result-combo small { display: block; color: #7394a3; font-size: 9px; letter-spacing: .18em; } .result-score strong { display: block; margin: 4px 0 14px; font-size: 32px; color: #e8fcff; letter-spacing: .08em; } .result-combo strong { font-size: 20px; color: #8ff5ff; }
.result-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin: 22px 0; color: #8baebc; font-size: 10px; letter-spacing: .08em; text-align: left; } .result-counts span { display: flex; justify-content: space-between; } .result-counts b { color: #e4fbff; }
.judgement.show { animation: judgement-pop .48s ease-out both; }
@keyframes judgement-pop { 0% { opacity: 0; transform: translate(-50%, -35%) scale(.72); } 16% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -70%) scale(.96); } }
@keyframes countdown-pop { 0% { opacity: 0; transform: translate(-50%, -42%) scale(.65); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } 100% { opacity: 0; transform: translate(-50%, -62%) scale(.95); } }
.hint { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); width: 100%; margin: 0; text-align: center; color: #688291; font-size: 9px; letter-spacing: .13em; }
@media (max-width: 520px), (hover: none) and (pointer: coarse) {
  .controls { left: calc(env(safe-area-inset-left, 0px) + 10px); right: calc(env(safe-area-inset-right, 0px) + 10px); top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); justify-content: center; gap: 4px; }
  .controls button { padding: 9px 7px; font-size: 8px; letter-spacing: .08em; }
  .controls #editor-button { display: block; position: fixed; z-index: 4; right: 0; top: 50%; padding: 12px 5px; border-right: 0; writing-mode: vertical-rl; transform: translateY(-50%); background: #0b3d50; font-size: 8px; }
  .speed-control { gap: 3px; padding-left: 5px; font-size: 8px; }.speed-control select { min-width: 24px; padding: 9px 3px; font-size: 9px; }
  .hint { display: none; } .topbar { gap: 10px; } .play-stats { top: calc(env(safe-area-inset-top, 0px) + 68px); gap: 11px; } .play-stats strong { font-size: 15px; }
}
@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  /* Landscape has horizontal room: keep the lower play field completely clear. */
  .topbar { top: calc(env(safe-area-inset-top, 0px) + 10px); left: calc(env(safe-area-inset-left, 0px) + 14px); gap: 7px; transform: scale(.76); transform-origin: top left; }
  .brand { font-size: 20px; } .brand small { margin-top: 7px; font-size: 8px; }
  .controls { left: auto; right: calc(env(safe-area-inset-right, 0px) + 12px); top: calc(env(safe-area-inset-top, 0px) + 10px); bottom: auto; gap: 3px; }
  .controls button { padding: 8px 6px; font-size: 8px; } .speed-control select { padding: 8px 3px; }
  .play-stats { top: calc(env(safe-area-inset-top, 0px) + 52px); right: calc(env(safe-area-inset-right, 0px) + 16px); }
  .controls #editor-button { top: 50%; }
}