/* 土台：余白なし、hidden属性で確実に隠す、端末の安全領域を上下に空ける */
html{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;font-size:14px}
img{max-width:100%}
[hidden]{display:none!important}
/* 夜のOEDO：藍の空、金の福、朱は要所だけ。9:16の一画面にドット描画キャンバスとHTMLのHUDを重ねる */
:root{
  --ink:#14112a;
  --panel:#221c44;
  --line:#463c80;
  --text:#f3ecd9;
  --dim:#a79fca;
  --gold:#f2c14e;
  --shu:#e0603a;
  --good:#7fd88a;
  --font:"DotGothic16","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{
  background:var(--ink);color:var(--text);font-family:var(--font);
  overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:0;box-sizing:border-box;
}
#app{height:100%;display:grid;place-items:center}
.stage{
  position:relative;aspect-ratio:9/16;
  height:min(100%, calc((100vw - 32px) * 16 / 9));
  max-width:100%;background:#1a1638;overflow:hidden;
  border:2px solid var(--line);box-sizing:border-box;
  touch-action:none;
}
canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;display:block}
#play{position:absolute;inset:0}
.hud{position:absolute;left:0;right:0;top:0;padding:10px 10px 0;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.hud-row{display:flex;align-items:center;gap:8px}
.back{pointer-events:auto;font:inherit;font-size:13px;color:var(--text);background:rgba(20,17,42,.75);border:2px solid var(--line);padding:4px 8px;cursor:pointer}
.back:focus-visible,.btn:focus-visible,.pick:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.who{display:flex;align-items:center;gap:6px;font-size:14px}
.sq{width:14px;height:14px;box-shadow:inset -2px -2px 0 rgba(0,0,0,.35),inset 2px 2px 0 rgba(255,255,255,.25)}
.best{margin-left:auto;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.dist{font-size:34px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;text-shadow:2px 2px 0 #000}
.dist small{font-size:16px;margin-left:2px}
.wind{font-size:12px;color:var(--text);background:rgba(20,17,42,.7);padding:3px 6px;align-self:flex-start;display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.wind.locked{opacity:.6}
.wtrack{position:relative;width:72px;height:6px;background:#14112a;outline:1px solid var(--line)}
.wtrack::after{content:"";position:absolute;left:50%;top:-2px;width:1px;height:10px;background:var(--text)}
.wfill{position:absolute;top:0;height:100%}
.how{font-size:13px;color:var(--text);text-shadow:1px 1px 0 #000;margin-top:2px;text-wrap:balance}
.pop{position:absolute;left:0;right:0;top:34%;text-align:center;font-size:26px;color:var(--gold);text-shadow:2px 2px 0 #000;pointer-events:none;opacity:0}
.pop.on{animation:pop .7s steps(6) forwards}
.pop.bad{color:var(--shu)}
.pop.ok{color:var(--good)}
.pop.big{font-size:44px;color:#fff3c4;text-shadow:3px 3px 0 #e0603a,6px 6px 0 #000}
@keyframes pop{0%{opacity:1;transform:translateY(6px) scale(.9)}30%{opacity:1;transform:translateY(0) scale(1.1)}100%{opacity:0;transform:translateY(-14px) scale(1)}}
.zone{position:absolute;left:0;right:0;top:46%;text-align:center;pointer-events:none;opacity:0}
.zone span{display:inline-block;font-size:18px;letter-spacing:.2em;color:var(--text);background:rgba(20,17,42,.8);border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);padding:4px 18px}
.zone.on{animation:zone 1.6s steps(12) forwards}
@keyframes zone{0%{opacity:0;transform:translateX(40%)}15%{opacity:1;transform:translateX(0)}80%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-40%)}}
.rank{align-self:center;font-size:30px;line-height:1;padding:6px 14px;border:3px solid currentColor;color:var(--shu);transform:rotate(-6deg)}
.rank.on{animation:stamp .5s steps(5) both}
@keyframes stamp{0%{opacity:0;transform:rotate(-6deg) scale(2.4)}60%{opacity:1;transform:rotate(-6deg) scale(.92)}100%{opacity:1;transform:rotate(-6deg) scale(1)}}

.snd{min-width:44px}
.snd[aria-pressed="false"]{color:var(--dim);text-decoration:line-through}
.snd.sel{position:absolute;right:10px;top:10px}
.dist{transform-origin:left center;transition:transform .2s steps(3)}
.dist.d1{color:#fff3c4;text-shadow:2px 2px 0 #e0603a,4px 4px 0 #000}
.dist.d2{transform:scale(1.15);animation:hue 1s steps(8) infinite}
.dist.d3{transform:scale(1.3);animation:hue .5s steps(8) infinite,jit .12s steps(2) infinite}
@keyframes hue{0%{color:#ff9a8a}25%{color:#ffe08a}50%{color:#9affb0}75%{color:#9ad8ff}100%{color:#ff9a8a}}
@keyframes jit{0%{translate:0 0}50%{translate:1px -1px}}
.cut{position:absolute;left:0;right:0;top:40%;pointer-events:none;opacity:0;--cc:#e0603a}
.cut span{display:block;text-align:center;font-size:34px;color:#fff;text-shadow:3px 3px 0 #000;padding:10px 0;
  background:repeating-linear-gradient(-60deg,var(--cc) 0 14px,#14112a 14px 18px);border-top:3px solid #fff3c4;border-bottom:3px solid #fff3c4;transform:skewY(-4deg)}
.cut.on{animation:cut 1.15s steps(12) forwards}
@keyframes cut{0%{opacity:1;transform:translateX(110%)}12%{transform:translateX(0)}80%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-110%)}}
@media (prefers-reduced-motion:reduce){.dist.d2,.dist.d3{animation:none}.cut.on{animation:cutr 1.15s steps(1) forwards}}
@keyframes cutr{0%{opacity:1}100%{opacity:0}}
.hspr{height:30px;width:auto;image-rendering:pixelated;filter:drop-shadow(1px 1px 0 #000)}
.lspr{height:46px;width:auto;image-rendering:pixelated;justify-self:center;filter:drop-shadow(1px 1px 0 #000)}
/* タイトル */
.title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;cursor:pointer;background:linear-gradient(rgba(20,17,42,.65),rgba(20,17,42,0) 50%)}
.title:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.tlogo{margin-top:18%;font-size:60px;line-height:1;color:var(--gold);letter-spacing:.04em;text-shadow:3px 3px 0 var(--shu),6px 6px 0 var(--ink);animation:float 2s steps(4) infinite}
.tsub{margin-top:16px;font-size:15px;color:var(--text);text-shadow:2px 2px 0 #000;letter-spacing:.08em}
.tstart{position:absolute;left:0;right:0;bottom:10%;text-align:center;font-size:18px;color:#fff3c4;text-shadow:2px 2px 0 #000;animation:blink 1.1s steps(2) infinite}
.tcredit{position:absolute;left:0;right:0;bottom:3%;text-align:center;font-size:12px;color:var(--dim);letter-spacing:.1em}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes blink{0%{opacity:1}100%{opacity:.2}}
.shead{font-size:24px;color:var(--gold);text-shadow:2px 2px 0 #000;text-align:center;letter-spacing:.1em;margin-top:4px}
@media (prefers-reduced-motion:reduce){.tlogo,.tstart{animation:none}}
/* 選択画面 */
.select{position:absolute;inset:0;display:flex;flex-direction:column;padding:18px 12px 12px;gap:10px;background:linear-gradient(rgba(20,17,42,.55),rgba(20,17,42,.88) 40%);overflow-y:auto}
.logo{font-size:40px;line-height:1;color:var(--gold);text-shadow:3px 3px 0 #000;letter-spacing:.06em;text-align:center}
.sub{font-size:13px;color:var(--dim);text-align:center}
.list{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.pick{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;color:var(--text);background:rgba(34,28,68,.92);border:2px solid var(--line);padding:7px 10px;cursor:pointer}
.pick:active{transform:translateY(1px);border-color:var(--gold)}
.pick .sq{width:26px;height:26px}
.pick .nm{font-size:16px}
.pick .tg{font-size:11px;color:var(--dim)}
.pick .bs{font-size:13px;color:var(--gold);font-variant-numeric:tabular-nums;text-align:right}
.pick .bs span{display:block;font-size:10px;color:var(--dim)}

/* 結果 */
.result{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,17,42,.55)}
.card{width:82%;background:var(--panel);border:2px solid var(--line);box-shadow:4px 4px 0 #000;padding:16px;display:flex;flex-direction:column;gap:10px;text-align:center}
.card .lbl{font-size:12px;color:var(--dim)}
.card .big{font-size:44px;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums;text-shadow:2px 2px 0 #000}
.card .big small{font-size:18px}
.card .note{font-size:14px;min-height:1.2em}
.card .note.new{color:var(--shu)}
.btn{font:inherit;font-size:16px;color:var(--ink);background:var(--gold);border:0;box-shadow:inset -3px -3px 0 rgba(0,0,0,.25);padding:10px;cursor:pointer}
.btn.sub2{background:transparent;color:var(--text);border:2px solid var(--line);box-shadow:none;font-size:14px;padding:8px}
.btn:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){.pop.on,.zone.on{animation:none;opacity:1}.rank.on{animation:none}}
/* 開発用の表示 */
.dbg{font-size:10px;color:var(--dim);line-height:1.4;word-break:break-all;font-variant-numeric:tabular-nums}
/* 入力欄 */
input{-webkit-user-select:text;user-select:text}
.inp{font:inherit;font-size:16px;color:var(--text);background:var(--ink);border:2px solid var(--line);padding:6px 8px;width:100%;min-width:0;box-sizing:border-box;border-radius:0}
.inp:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.inp::placeholder{color:var(--dim);opacity:.7}
/* ランキングへの登録 */
.reg{display:flex;flex-direction:column;gap:6px;border-top:2px solid var(--line);padding-top:10px}
.regrow{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px}
.regwho{font-size:14px;display:flex;align-items:baseline;justify-content:center;gap:10px}
.link{font:inherit;font-size:12px;color:var(--dim);background:none;border:0;padding:2px 4px;text-decoration:underline;cursor:pointer}
.link:focus-visible{outline:2px solid var(--gold)}
.btn.regbtn{background:var(--shu);color:#fff3c4}
.btn:disabled{opacity:.55;cursor:default}
.regmsg{font-size:12px;color:var(--dim);min-height:1.2em;text-wrap:balance}
.regmsg.bad{color:var(--shu)}
.place{align-self:center;font-size:30px;line-height:1;color:var(--gold);padding:6px 16px;border:3px solid currentColor;text-shadow:2px 2px 0 #000;transform:rotate(4deg)}
.place.on{animation:placein .5s steps(5) both}
@keyframes placein{0%{opacity:0;transform:rotate(4deg) scale(2.4)}60%{opacity:1;transform:rotate(4deg) scale(.92)}100%{opacity:1;transform:rotate(4deg) scale(1)}}
.btnrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.off{position:absolute;left:6px;bottom:6px;font-size:10px;color:var(--dim);background:rgba(20,17,42,.7);padding:2px 5px;pointer-events:none}
.rksel{margin-top:4px;background:rgba(34,28,68,.92)}
/* ランキング画面 */
.rankscr{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:10px 12px 12px;background:linear-gradient(rgba(20,17,42,.9),rgba(20,17,42,.97) 30%)}
.rkhead{position:relative;display:flex;align-items:center;justify-content:center;min-height:32px}
.rkhead .back{position:absolute;left:0;top:0}
.rkhead .shead{margin-top:0;font-size:20px}
.rktabs{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.rktab{padding:3px 0 0;height:36px;background:rgba(34,28,68,.92);border:2px solid var(--line);cursor:pointer;display:grid;place-items:start center;overflow:hidden}
.rktab img{width:36px;height:28px;object-fit:none;object-position:50% 0;image-rendering:pixelated;max-width:none}
.rktab.on{border-color:var(--gold);background:#3a2f70}
.rktab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rkchar{text-align:center;font-size:16px;letter-spacing:.1em;text-shadow:1px 1px 0 #000}
.rklist{flex:1;min-height:0;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:3px;padding-right:2px}
.rkrow{display:grid;grid-template-columns:30px 1fr auto;align-items:baseline;gap:8px;padding:5px 8px;background:rgba(34,28,68,.85);border-left:3px solid var(--line);font-size:14px}
.rkrow .rkno{text-align:right;color:var(--dim);font-variant-numeric:tabular-nums}
.rkrow .rknm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rkrow .rkds{color:var(--gold);font-variant-numeric:tabular-nums;font-size:13px}
.rkrow.top1{border-left-color:#f2c14e}.rkrow.top1 .rkno{color:#f2c14e}
.rkrow.top2{border-left-color:#cfd6e4}.rkrow.top2 .rkno{color:#cfd6e4}
.rkrow.top3{border-left-color:#c98a56}.rkrow.top3 .rkno{color:#c98a56}
.rkrow.top1 .rkno,.rkrow.top2 .rkno,.rkrow.top3 .rkno{font-size:16px}
.rkrow.me{background:#3a2f70;outline:1px solid var(--gold);outline-offset:-1px}
.rksep{text-align:center;color:var(--dim);font-size:12px;letter-spacing:.3em;padding:2px 0}
.rkmsg{margin:auto;text-align:center;font-size:14px;color:var(--dim);padding:0 12px;text-wrap:balance;line-height:1.6}
.rkmsg.bad{color:var(--shu)}
@media (prefers-reduced-motion:reduce){.place.on{animation:none}}