@font-face{font-family:DotGothic16;src:url('/fonts/dotgothic16-subset.woff2') format('woff2');font-display:swap}:root{color-scheme:dark;--bg:#0f1220;--panel:#18243a;--line:#5c7691;--ink:#f4f7fb;--muted:#c9d6e8;--mint:#72e0a8;--hit:#ff8f91;--gold:#ffe181;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -10%,#24395e,var(--bg) 52%);color:var(--ink);line-height:1.55}button,input,select{font:inherit}button,a{min-width:44px;min-height:44px}button{border:1px solid var(--line);border-radius:10px;background:#24344e;color:var(--ink);padding:.45rem .7rem;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.panel{display:none;max-width:960px;margin:auto;padding:.55rem .75rem 1rem}.panel.active{display:block}.gamebar,.subhead,.hud,.controls,.result-actions,.personal{display:flex;align-items:center}.gamebar{justify-content:space-between;min-height:48px}.gamebar h1,h2,.title-badge,button{font-family:DotGothic16,ui-monospace,"SFMono-Regular",monospace}.gamebar h1{font-size:1.1rem;letter-spacing:-.04em;margin:0}.utility{min-width:42px;min-height:40px;padding:.2rem;margin-left:.2rem}.hud{height:42px;gap:.2rem;overflow:hidden;white-space:nowrap;font-size:1rem;font-feature-settings:"tnum"}.hud span{display:inline-flex;gap:.15rem;align-items:center}.hud b{font-weight:800}.hp{width:92px;height:26px;position:relative;padding:0 .25rem;color:#fff}.hp:before,.hp.hurt i{background:#ff6b6b}.hp i{position:absolute;inset:3px;background:#303b50;border-radius:3px;content:""}.hp i{right:auto;background:var(--mint);transition:width .1s}.hp b{z-index:1;font-size:.875rem;text-shadow:0 1px 2px #000}.minor{margin-left:auto;font-size:.875rem}.streak{color:#ffcc67}.canvas-wrap{border:3px solid #8bc68d;background:#193a2c;box-shadow:0 0 0 2px #12233a,0 13px 35px rgba(0,0,0,.28);overflow:hidden;margin:auto}.canvas-wrap canvas{display:block;width:100%;height:auto;image-rendering:pixelated;touch-action:manipulation}.sr-message{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.controls{justify-content:space-between;gap:.75rem;margin:.65rem auto 0;max-width:470px}.dpad{display:grid;grid-template-columns:repeat(3,56px);gap:3px}.dpad button{font-size:1.35rem;background:#263b59}.action-buttons{display:grid;grid-template-columns:112px 58px;gap:.35rem}.attack{background:#b9575c;border-color:#ffafb0;font-weight:800;font-size:1rem;white-space:nowrap}.action-buttons button:last-child{background:#306978}.result{border:2px solid var(--gold);background:#17243a;padding:1rem;border-radius:12px;margin:.75rem 0;box-shadow:0 15px 34px rgba(0,0,0,.35)}.title-badge{margin:0;color:var(--gold);font-weight:900;font-size:1.2rem}.result h2{margin:.1rem 0}.personal{gap:.7rem;flex-wrap:wrap;color:var(--muted)}.result input{display:block;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:.4rem;background:#101a2a;color:var(--ink);margin:.25rem 0}.result-actions{gap:.4rem;flex-wrap:wrap}.result-actions a{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;background:#283a56;color:var(--ink);padding:.45rem .7rem;text-decoration:none}.share{background:var(--mint);color:#102019;font-weight:800;flex:1}.result-actions a{flex:1}.subhead{gap:.5rem}.subhead h2{margin:.25rem 0}.back{min-width:44px}.ranking-list{list-style:none;padding:0;margin:.75rem 0}.ranking-row{display:grid;grid-template-columns:2.8rem minmax(0,1fr) auto;gap:.15rem .4rem;padding:.65rem .35rem;border-bottom:1px solid var(--line);font-feature-settings:"tnum"}.ranking-row.mine{background:#284c58;outline:1px solid var(--mint)}.rank,.ranking-score{font-weight:900}.ranking-details{grid-column:2/-1;color:var(--muted);font-size:.875rem}.place-1 .rank{color:var(--gold)}.place-2 .rank{color:#d7e3f7}.place-3 .rank{color:#e6aa78}.prose{max-width:65ch}.prose a,dialog a{color:var(--mint)}dialog{border:0;padding:0;background:transparent;color:var(--ink);width:min(100%,420px);height:100%;margin-left:auto}dialog::backdrop{background:rgba(0,0,0,.66)}dialog section{min-height:100%;background:#18243a;padding:1rem;display:grid;align-content:start;gap:.55rem}dialog header{display:flex;justify-content:space-between;align-items:center}dialog h2{margin:0}dialog nav{display:grid;gap:.55rem;margin-top:.75rem}.message{color:var(--muted);font-size:.875rem}@media(max-width:600px){.canvas-wrap{width:100%;max-width:390px}.panel{padding:.35rem .55rem .8rem}.controls{margin-top:.55rem}.result{margin-bottom:.35rem}}@media(min-width:601px){.controls{max-width:560px}.gamebar h1{font-size:1.4rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* result-v2: 結果画面は「シェア」を主役にする（Bandle・flappy.io・Worldle の結果画面を参考） */
.result{padding:1.1rem 1rem 1.2rem}
.title-badge{font-size:2rem;letter-spacing:.06em;text-shadow:0 2px 0 #6b5200;line-height:1.2}
.result h2{font-size:1.35rem}
.result label{display:block;margin-top:.7rem;color:var(--muted)}
.result input{width:100%;font-size:1rem;margin-top:.3rem}
#register{width:100%;margin-top:.2rem}
.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.9rem}
.result-actions>*{flex:none}
#share{grid-column:1/-1;order:-1;min-height:58px;font-size:1.2rem;font-family:DotGothic16,ui-monospace,monospace;background:var(--mint);color:#0d1f17;font-weight:800;border-color:#b9f5d4;box-shadow:0 4px 0 #2f8f64}
#copy,#again{background:#283a56;color:var(--ink);font-weight:600;flex:none}
#countdown{margin:.9rem 0 0;text-align:center;font-size:1.05rem;color:var(--gold);font-family:DotGothic16,ui-monospace,monospace}
.rank-result,#rank-result{font-size:1.4rem;font-family:DotGothic16,ui-monospace,monospace;color:var(--gold);margin:.4rem 0}

/* v3: title/quests/achievements */
.gamebar{max-width:960px;margin:auto;padding:.35rem .75rem 0;display:flex;align-items:center;justify-content:space-between}
.gametitle{font-family:DotGothic16,ui-monospace,monospace;font-size:1.1rem;letter-spacing:-.04em}
body.on-title .gametitle{visibility:hidden}
.title-screen{text-align:center;padding-top:.2rem}
.title-screen.active{display:flex;flex-direction:column;align-items:center}
#title-art{width:100%;max-width:360px;height:auto;image-rendering:pixelated;border:3px solid #8bc68d;border-radius:12px;background:#55995b;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.logo{font-family:DotGothic16,ui-monospace,monospace;font-size:2.6rem;line-height:1.08;margin:.7rem 0 .1rem;color:var(--gold);text-shadow:0 3px 0 #6b5200,0 6px 18px rgba(255,225,129,.25);letter-spacing:.02em}
.tagline{margin:.1rem 0 .9rem;color:var(--muted)}
.cta{width:min(100%,340px);min-height:64px;font-family:DotGothic16,ui-monospace,monospace;font-size:1.7rem;font-weight:800;background:var(--mint);color:#0d1f17;border:2px solid #b9f5d4;border-radius:14px;box-shadow:0 5px 0 #2f8f64;letter-spacing:.2em}
.cta:active{transform:translateY(3px);box-shadow:0 2px 0 #2f8f64}
.today{margin:.9rem 0 0;font-size:1rem;color:var(--ink)}
.record{margin:.1rem 0 .4rem;color:var(--gold);min-height:1.5em}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:.4rem 0 0;max-width:420px}
.chip{border-radius:999px;padding:.45rem .95rem;font-size:1rem;background:#24344e}
.chip b{color:var(--gold)}
.countdown{margin:.8rem 0 0;color:var(--muted);font-family:DotGothic16,ui-monospace,monospace}
.title-foot{display:flex;flex-wrap:wrap;gap:.2rem .5rem;justify-content:center;margin-top:.7rem}
.title-foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 .5rem;color:var(--muted);font-size:.9rem}
.objective{margin:.15rem 0 .3rem;min-height:34px;display:flex;align-items:center;gap:.4rem;padding:.2rem .7rem;border-radius:999px;background:#1b2b45;border:1px solid #3f5877;font-size:.95rem;color:var(--gold);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.objective b{color:#fff;font-family:DotGothic16,ui-monospace,monospace}
.sheet{border:0;padding:0;background:transparent;color:var(--ink);width:min(100%,460px);max-height:100%;margin:auto}
.sheet::backdrop{background:rgba(0,0,0,.66)}
.sheet section{background:#18243a;border:2px solid var(--gold);border-radius:14px;padding:1rem;margin:.6rem}
.sheet header{display:flex;justify-content:space-between;align-items:center}
.sheet h2{margin:0}
.sheet-note{color:var(--muted);font-size:.9rem;margin:.3rem 0 .6rem}
.quest-list,.ach-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.quest-list li,.ach-list li{display:grid;grid-template-columns:2rem 1fr;gap:.2rem .5rem;align-items:center;padding:.55rem .6rem;border:1px solid var(--line);border-radius:10px;background:#101a2c}
.quest-list li.done,.ach-list li.done{border-color:var(--mint);background:#17352f}
.quest-list .tier{grid-column:2;font-size:.8rem;color:var(--muted)}
.mark{font-size:1.3rem;text-align:center}
.ach-list li.locked{opacity:.65}
.ach-list .desc{grid-column:2;font-size:.85rem;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:50;max-width:min(92vw,420px);padding:.7rem 1rem;border-radius:12px;background:#10301f;border:2px solid var(--mint);color:#eafff3;font-family:DotGothic16,ui-monospace,monospace;box-shadow:0 10px 30px rgba(0,0,0,.5);text-align:center}
.result-extra{margin:.2rem 0;color:var(--muted);white-space:pre-line}
.result.dead #again{grid-column:1/-1;order:-2;min-height:58px;font-size:1.2rem;font-family:DotGothic16,ui-monospace,monospace;background:var(--mint);color:#0d1f17;font-weight:800;box-shadow:0 4px 0 #2f8f64}
.result.dead #share{order:-1;min-height:48px;font-size:1rem;background:#283a56;color:var(--ink);box-shadow:none}
@media(max-width:600px){.logo{font-size:2.3rem}}
@media(prefers-reduced-motion:reduce){.cta:active{transform:none}}

dialog.sheet{height:auto;margin:auto}
dialog.sheet section{min-height:0;display:block}

/* v4: title board / users / transfer */
.title-board{width:min(100%,420px);margin:.6rem 0 .2rem;text-align:left}
.title-board h2{font-size:1rem;margin:0 0 .2rem;color:var(--gold);font-family:DotGothic16,ui-monospace,monospace;text-align:center}
.ranking-list.compact{margin:.2rem 0}
.ranking-list.compact .ranking-row{padding:.35rem .35rem;grid-template-columns:2.6rem minmax(0,1fr) auto}
.ranking-list.compact .ranking-details{display:none}
.code-label{margin:.8rem 0 .2rem;color:var(--muted);font-size:.9rem}
.code{font-family:ui-monospace,"SFMono-Regular",monospace;font-size:1rem;word-break:break-all;background:#101a2c;border:1px dashed var(--gold);border-radius:8px;padding:.6rem;margin:.2rem 0 .5rem;user-select:all}
.code-input{width:100%;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:.4rem;background:#101a2c;color:var(--ink);font:inherit;font-family:ui-monospace,monospace;margin-bottom:.5rem}
#transfer button{width:100%}
#transfer .sheet-close{width:auto}
