:root{
  color-scheme:dark;
  --ink:#f4faef;
  --muted:#bdcbb6;
  --glass:rgba(13,28,15,.78);
  --line:rgba(255,255,255,.14);
  --accent:#dff58a;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;min-height:100%;background:#102b14;color:var(--ink)}
body{overflow:hidden;touch-action:pan-x pan-y pinch-zoom}
button{font:inherit;cursor:pointer;touch-action:manipulation}
#app{width:100%;height:100vh;height:100dvh;max-width:620px;margin:auto;position:relative;overflow:hidden;background:#173b1c}
.hud{position:absolute;z-index:5;left:10px;right:10px;top:max(10px,env(safe-area-inset-top));display:flex;align-items:flex-start;justify-content:space-between;gap:10px;pointer-events:none}
.title-block{min-width:0;flex:1;padding:9px 11px;border:1px solid var(--line);border-radius:15px;background:var(--glass);backdrop-filter:blur(7px);box-shadow:0 5px 18px #0004;overflow:hidden}
.kicker,.panel-kicker{margin:0 0 3px;font-size:9px;font-weight:1000;letter-spacing:.17em;color:#d9ed9c}
h1{margin:0;font-size:clamp(11px,3.15vw,14px);line-height:1.22;white-space:normal;overflow-wrap:anywhere}
.hud-numbers{display:flex;gap:6px;flex:0 0 auto}
.meter{min-width:72px;padding:8px 9px;text-align:center;border:1px solid var(--line);border-radius:14px;background:var(--glass);backdrop-filter:blur(7px);box-shadow:0 5px 18px #0004}
.meter span{display:block;font-size:8px;font-weight:900;letter-spacing:.1em;color:var(--muted)}
.meter strong{display:block;font-size:18px;line-height:1.1;font-variant-numeric:tabular-nums}
.field-wrap{position:absolute;inset:0;overflow:hidden;background:#214a24}
#gameCanvas{width:100%;height:100%;display:block;touch-action:pan-x pan-y pinch-zoom}
.miss-layer{position:absolute;inset:0;z-index:3;pointer-events:none}
.miss{position:absolute;transform:translate(-50%,-50%);font-size:16px;font-weight:1000;color:#ffd9d9;text-shadow:0 2px 8px #000;animation:miss .55s ease forwards}
@keyframes miss{0%{opacity:0;transform:translate(-50%,-35%) scale(.8)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-115%) scale(1.05)}}
.overlay{position:absolute;z-index:10;inset:0;display:grid;place-items:center;padding:18px;background:rgba(3,12,5,.48);backdrop-filter:blur(4px)}
.overlay.hidden{display:none}
.panel{width:min(92vw,420px);padding:24px 20px;border-radius:22px;text-align:center;border:1px solid rgba(255,255,255,.14);background:rgba(14,30,16,.91);box-shadow:0 18px 50px #0008}
.panel h2{margin:0 0 12px;font-size:26px;line-height:1.25}
.panel p{margin:0 0 13px;color:#d3ded0;font-size:14px;line-height:1.6}
.panel .warning{color:#f0f7ad;font-weight:1000}
.panel button{width:100%;min-height:50px;border:0;border-radius:15px;padding:0 18px;background:linear-gradient(#e9fb9b,#bbd862);color:#1b3218;font-size:18px;font-weight:1000;box-shadow:0 5px 0 #789237,0 10px 22px #0005}
.panel button:active{transform:translateY(3px);box-shadow:0 2px 0 #789237}
.result-main{margin:11px 0 17px}
.result-main strong{font-size:48px;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.result-main span{margin-left:5px;font-weight:900;color:#d8e4d3}
.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px}
.result-stats div{padding:12px 8px;border-radius:13px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}
.result-stats dt{font-size:10px;color:#afc0aa;font-weight:900}
.result-stats dd{margin:4px 0 0;font-size:18px;font-weight:1000}
.record-text{min-height:22px!important;color:#e7f58e!important;font-weight:1000!important}
100%{transform:scale(1.25);opacity:0}}
@media(max-width:390px){
  .hud{gap:6px}
  .title-block{padding:8px}
  h1{font-size:11px}
  .meter{min-width:58px;padding:7px 5px}
  .meter strong{font-size:15px}
}

.compat-marker{display:none!important}
.panel button:disabled{opacity:.62;cursor:default;transform:none;box-shadow:0 3px 0 #789237,0 7px 16px #0004}