/* 駄菓子屋の、台紙つき玉よせおもちゃ: ラムネの水色の台紙に、朱 ・ 卵黄 ・ 墨の3色で刷る */
:root{
  --ramune:#9AD7D0; --shu:#EC3A2C; --shu2:#D92E22; --kimi:#FFCC33; --sumi:#23262B; --shiro:#FFFFFF; --well:#86CCC4;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  /* Darumadrop One は、かな ・ 数字 ・ 欧文だけに使う ( 漢字と × は .u で丸ゴシックに ) */
  --disp:'Darumadrop One','Hiragino Maru Gothic ProN','M PLUS Rounded 1c',system-ui,sans-serif;
  --ui:'M PLUS Rounded 1c','Hiragino Maru Gothic ProN','Hiragino Sans',system-ui,sans-serif;
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --tb:max(0px,calc(100% - 100svh)); /* iOS 26 の下のツールバーの分 */
}
[hidden]{display:none!important}
html{font-synthesis:none}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ramune);color:var(--sumi);font-family:var(--ui);font-weight:800;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;touch-action:none;-webkit-font-smoothing:antialiased}
#app{position:fixed;inset:0;bottom:var(--tb);overflow:hidden}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
button{font-family:var(--ui);color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
.hide{display:none!important}
svg{display:block}
.u{font-family:var(--ui);font-weight:900}
.lab{font-size:11px;font-weight:800;letter-spacing:.08em;opacity:.72;white-space:nowrap;flex:none}

/* ---------- 丸いボタン ( シール ) : 押すと中の色だけがつぶれて、行き過ぎて戻る。白い縁はつぶれない ---------- */
.sl{position:relative;border-radius:50%;background:var(--shiro);padding:5px;box-shadow:0 6px 0 0 rgba(35,38,43,.14)}
.sl > .in{position:relative;width:100%;height:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  transition:transform .26s var(--bounce)}
.sl > .in::before{content:"";position:absolute;inset:7px;border-radius:50%;border:2px solid rgba(255,255,255,.75);pointer-events:none}
.sl:active > .in,.rb:active{transform:scale(.94,.9) translateY(2px);transition-duration:.08s;transition-timing-function:ease-out}
.sl.shu > .in{background:var(--shu2);color:var(--shiro)}
.sl.kimi > .in{background:var(--kimi);color:var(--sumi)}
.sl.kimi > .in::before{border-color:rgba(35,38,43,.25)}
.rb{pointer-events:auto;border-radius:50%;background:var(--shiro);box-shadow:0 0 0 2.5px var(--sumi);display:grid;place-items:center;text-align:center;font-weight:900;transition:transform .26s var(--bounce)}
.rb.ink{background:var(--sumi);color:var(--shiro);box-shadow:none}
.rb svg{width:18px;height:18px}

/* ---------- HUD ---------- */
#hud{position:absolute;left:0;right:0;top:0;padding:calc(var(--st) + 14px) calc(var(--sr) + 14px) 0 calc(var(--sl) + 16px);
  display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;transition:opacity .4s}
#hud.off{opacity:0}
#hud.off button{pointer-events:none}
.hs{display:flex;flex-direction:column;align-items:flex-start;flex:none;width:150px} /* つなぎの行は右へはみ出して描く ( 右の列を押さない ) */
#score{font-family:var(--disp);font-size:46px;line-height:1;margin-top:2px;letter-spacing:.01em;transform-origin:0 75%;font-variant-numeric:tabular-nums}
#score.bump{animation:bump .3s var(--bounce)}
@keyframes bump{0%{transform:scale(1.14,1.05)}100%{transform:none}}
#subl{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13px;font-weight:900}
#cdots{display:flex;gap:4px}
#cdots i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--sumi)}
#cdots i.new{animation:dotIn .45s var(--bounce)}
@keyframes dotIn{0%{transform:translateY(-9px) scale(.3)}100%{transform:none}}
#linkBox{display:flex;align-items:center;gap:8px;margin-top:12px;opacity:.35;transition:opacity .2s;width:max-content}
#linkBox.on{opacity:1}
#linkN{font-family:var(--disp);font-size:24px;line-height:1;min-width:12px}
#linkM{width:42px;height:42px;flex:none;border-radius:50%;background:var(--kimi);display:grid;place-items:center;font-size:14px;font-weight:900;letter-spacing:-.02em;transform:rotate(-8deg);box-shadow:0 0 0 2.5px var(--sumi)}
#linkBar{position:relative;display:block;width:96px;height:8px;border-radius:4px;box-shadow:0 0 0 2px var(--sumi);overflow:hidden;background:var(--shiro)}
#linkFill{position:absolute;left:0;top:0;bottom:0;width:0;background:repeating-linear-gradient(-45deg,var(--shu) 0 5px,var(--shiro) 5px 10px)}
#linkBox.up #linkN{animation:bump .3s var(--bounce)}
#linkBox.up #linkM{animation:sealUp .32s var(--bounce)}
@keyframes sealUp{0%{transform:rotate(-8deg) scale(1.3)}100%{transform:rotate(-8deg) scale(1)}}
#linkBox.crack{animation:crack .5s ease-out}
#linkBox.crack #linkFill{background:var(--shu)}
#linkBox.pulse2,.wl.pulse2{animation:pulse2 .5s ease-in-out 2}
@keyframes pulse2{0%,100%{scale:1}50%{scale:1.12}}
@keyframes crack{0%{transform:translateX(0)}15%{transform:translateX(-5px) rotate(-3deg)}30%{transform:translateX(5px) rotate(2deg)}45%{transform:translateX(-3px)}60%{transform:translateX(2px)}100%{transform:none}}
.hr{display:flex;align-items:flex-start;gap:8px}
#nextBox{display:flex;flex-direction:column;align-items:flex-end;margin-top:2px}
#nextBox .lab{margin-right:16px}
#nextRow{margin-top:4px;height:52px;padding:0 8px 0 10px;border-radius:26px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 2.5px var(--sumi);display:flex;align-items:center;gap:4px}
#nextRow canvas{width:44px;height:44px;border-radius:50%}
#nextRow canvas:nth-child(2){width:36px;height:36px}
#nextRow canvas:nth-child(3){width:30px;height:30px}
#pauseBtn{width:44px;height:44px;margin-top:16px}
/* あふれゲージ ( 盆の奥の縁の上 ) : 紅白のひもと同じ形の帯、中は朱の1色。危ないときは震える */
#gauge{position:absolute;left:50%;top:calc(var(--st) + 14px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none}
#gauge .lab{white-space:nowrap;opacity:1}
#gbar{position:relative;width:96px;height:8px;border-radius:4px;box-shadow:0 0 0 2px var(--sumi);background:var(--shiro);overflow:hidden}
#gfill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--shu)}
#gauge.warn .lab{color:var(--shu2)}
#gauge.hot #gbar{animation:shiver .1s steps(2) infinite}
@keyframes shiver{0%{transform:translateX(-2px)}100%{transform:translateX(2px)}}

/* ---------- 盤上の字 ---------- */
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wl{position:absolute;left:0;top:0;font-size:16px;font-weight:900;color:var(--sumi);white-space:nowrap;transition:color .2s}
.wl.on{color:var(--shu2)}
/* 浮く得点: 卵黄の面に墨の線を 2px ずらして重ねる ( 版ずれ ) */
.pts{position:absolute;font-family:var(--disp);font-size:30px;line-height:1;white-space:nowrap;animation:rise 1.1s cubic-bezier(.3,.7,.4,1) forwards}
.pts .f{color:var(--kimi)}
.pts .k{position:absolute;left:-2px;top:-2px;color:transparent;-webkit-text-stroke:2.2px var(--sumi)}
.pts small{font-family:var(--ui);font-weight:900;font-size:.5em;margin-left:.18em;vertical-align:.12em}
.pts.cr{font-size:24px}
.pts.cr .f{color:var(--shiro)}
@keyframes rise{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}14%{opacity:1;transform:translate(calc(-50% + 2px),-70%) scale(1.12)}55%{transform:translate(calc(-50% + 6px),-150%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + 4px),-205%)}}

/* ---------- 連鎖の字 ( 9こ消し ) : 朱の面 + 墨の線の版ずれ。最後は下へ落ちて消える ---------- */
#banner{position:absolute;left:0;right:0;top:18%;display:flex;flex-direction:column;align-items:center;pointer-events:none}
#banner .big{position:relative;font-family:var(--disp);font-size:44px;line-height:1.05;white-space:nowrap}
#banner .big .f{color:var(--shu)}
#banner .big .k{position:absolute;left:-2px;top:-2px;color:transparent;-webkit-text-stroke:2.4px var(--sumi)}
#banner .bRow{display:flex;align-items:center;gap:8px;margin-top:8px}
#banner .sm{font-size:14px;font-weight:900;color:var(--sumi);background:var(--kimi);padding:3px 11px 4px;border-radius:12px;box-shadow:0 0 0 2px var(--sumi)}
#banner .sm:empty{display:none}
#bIcon{width:30px;height:30px;display:none}
#bIcon.on{display:block}
#banner.cr .big .f{color:var(--shiro)}
#banner.show{animation:bnr 1.1s linear forwards}
#banner.long{animation:bnrL 2.6s linear forwards}
#banner.stay{animation:bnrStay .5s var(--bounce) forwards}
@keyframes bnr{0%{opacity:0;transform:scale(.6)}10%{opacity:1;transform:scale(1.12)}24%{transform:scale(1)}82%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(10px)}}
@keyframes bnrL{0%{opacity:0;transform:scale(.6)}4%{opacity:1;transform:scale(1.12)}10%{transform:scale(1)}90%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(10px)}}
@keyframes bnrStay{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}

/* ---------- はじめの案内: 墨の吹き出し、しっぽはパッドへ ---------- */
#guide{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:calc(var(--sb) + 196px);max-width:min(calc(100% - 24px),420px);z-index:2;
  display:flex;align-items:center;padding:10px 16px 11px;background:var(--sumi);color:var(--shiro);border-radius:14px;font-size:14px;font-weight:800;line-height:1.4;
  pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .32s var(--bounce)}
#guide.on{opacity:1;transform:none}
#guide::after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-10px;border-style:solid;border-width:10px 10px 0;border-color:var(--sumi) transparent transparent}
#guide.side::after{left:56px}
#gIcon{display:none}

/* ---------- かたむけるパッド: 水色のくぼみ + 手まりのつまみ ---------- */
#pad{position:absolute;left:0;right:0;bottom:0;height:calc(var(--sb) + 186px);pointer-events:none;transition:opacity .4s}
#pad.off{opacity:0}
#stickV{position:absolute;left:50%;top:calc(50% - var(--sb) / 2);width:136px;height:136px;margin:-68px 0 0 -68px}
#stickV > svg{position:absolute;inset:0;width:100%;height:100%}
#knob{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px}
#knob svg{width:100%;height:100%}
#padL{position:absolute;left:calc(var(--sl) + 28px);top:calc(50% - var(--sb) / 2);transform:translateY(-50%);display:flex;flex-direction:column;gap:2px}
#padL b{font-size:22px;font-weight:900}
#padL b.big{color:var(--shu2)}
#pad.wide{left:calc(var(--sl) + 12px);right:auto;bottom:calc(var(--sb) + 12px);width:300px;height:132px}
#pad.wide #stickV{left:auto;right:6px;top:50%;width:124px;height:124px;margin:-62px 0 0 0}
#pad.wide #padL{left:16px;top:32px;transform:none}
#pad.wide.small #stickV{width:104px;height:104px;margin-top:-52px}
#pad.wide.small #knob{width:48px;height:48px;margin:-24px 0 0 -24px}
#pad.wide.small #padL b{font-size:18px}
#touchDot{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;border:2.5px solid var(--sumi);background:rgba(255,255,255,.5);pointer-events:none;opacity:0;transition:opacity .12s}
#touchDot.on{opacity:1}

/* ---------- 画面 ( タイトル ・ 結果 ・ 一時停止 ) ---------- */
.scr{position:absolute;inset:0;pointer-events:none}
.scr > *{pointer-events:auto}
/* タイトル: 左上に題字 ( 盆がかたむくと字が寄り、手まりが転がる ) 、中央に盆、下に丸いシール */
#title .tt{position:absolute;left:calc(var(--sl) + 14px);top:calc(var(--st) + 66px);pointer-events:none}
#title h1{margin:0}
/* 題字: 本人のロゴ。玉の4色で落ちてきて、右から手まりが転がって字を寄せ、カチッと朱にそろう。濁点は最後に卵黄で */
.lg{display:block;width:min(344px,calc(100vw - 30px));height:auto;overflow:visible}
.ls{fill:var(--sumi)}
.lf{fill:var(--shu)}
.lfk{fill:var(--kimi)}
.lg .lw{transform:translateX(calc(var(--tl, 0) * 2px))}
.lg .li{transform:translateX(calc(var(--tl, 0) * var(--k, 1) * 1px))} /* 盆がかたむくと、字が少しずつ違う量で寄る */
.lg .lb{transform-box:fill-box;transform-origin:center;transform:translateX(calc(var(--tl, 0) * 7px)) rotate(calc(var(--tl, 0) * 70deg))}
.lg.play .lc{animation:ldrop .48s var(--bounce) backwards,lgather .34s cubic-bezier(.3,.05,.2,1) backwards;animation-delay:calc(var(--i) * 70ms + 80ms),calc(1250ms - var(--i) * 60ms);--from:calc(var(--sx) * 1px)}
.lg.play .lc .ld{animation:lclack .3s ease-out 1.56s}
.lg.play .lf{animation:lflip .22s linear backwards;animation-delay:calc(1.56s + var(--fi, 0) * 40ms)}
.lg.play .l0{--c0:#EC3A2C;--fi:0}
.lg.play .l1{--c0:#f5b62e;--fi:1}
.lg.play .l2{--c0:#2a5fc2;--fi:2}
.lg.play .l3{--c0:#2f9e52;--fi:3}
.lg.play .ldk{transform-box:fill-box;transform-origin:50% 100%;animation:ldak .34s var(--bounce) 1.74s backwards}
.lg.play .lbm{animation:lroll .46s cubic-bezier(.2,.5,.3,1) .86s backwards}
@keyframes ldrop{0%{translate:0 -96px;opacity:0}45%{opacity:1}100%{translate:0 0}}
@keyframes lgather{0%,0.1%{transform:translateX(var(--from))}100%{transform:none}}
@keyframes lclack{0%{transform:none}30%{transform:translateX(-3px)}100%{transform:none}}
@keyframes lflip{0%{fill:var(--c0)}40%{fill:#FFFFFF}100%{fill:var(--shu)}}
@keyframes ldak{0%{transform:translateY(-16px) scale(.4);opacity:0}60%{opacity:1}100%{transform:none}}
@keyframes lroll{0%{transform:translateX(170px) rotate(-420deg);opacity:0}25%{opacity:1}100%{transform:none}}
.lg.play .lbm{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){.lg.play .lc,.lg.play .lc .ld,.lg.play .lf,.lg.play .ldk,.lg.play .lbm{animation:none}}
.en{display:flex;align-items:center;gap:10px;margin:6px 0 0 4px;font-family:var(--disp);font-size:21px;letter-spacing:.04em;line-height:1}
.en i{display:block;width:26px;height:2.5px;background:var(--sumi);border-radius:2px}
.rule{margin:10px 0 0 4px;font-size:15px;font-weight:800;letter-spacing:.02em}
.rule b{font-weight:800;background:linear-gradient(transparent 56%,var(--kimi) 56%,var(--kimi) 92%,transparent 92%);padding:0 2px}
#btnSound{position:absolute;right:calc(var(--sr) + 16px);top:calc(var(--st) + 24px);width:44px;height:44px}
#title .menu{position:absolute;left:0;right:0;bottom:calc(var(--sb) + 104px);display:flex;justify-content:center;gap:22px;pointer-events:none}
#title .menu > *{pointer-events:auto}
#title .sl{width:138px;height:138px}
#btnEndless{transform:rotate(-4deg)}
#btnDaily{transform:rotate(5deg) translateY(10px)}
.sl .k{font-size:17.5px;font-weight:900;letter-spacing:0;line-height:1.1;white-space:nowrap}
.sl .s{font-size:12px;font-weight:800;margin-top:7px;opacity:.85;line-height:1.15}
.sl .s b{display:block;font-family:var(--disp);font-weight:400;font-size:21px;letter-spacing:.02em;margin:1px 0 2px;opacity:1}

body.gated .lg.play *{animation-play-state:paused!important}
/* オンライン対戦の入口とクレジット ( 主操作のシールより弱く ) */
.vsb{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--sb) + 48px);height:44px;padding:0 22px;border-radius:22px;background:var(--shiro);box-shadow:0 0 0 2.5px var(--sumi);font-size:15px;font-weight:900;white-space:nowrap;transition:transform .26s var(--bounce)}
.vsb:active{transform:translateX(-50%) scale(.96)}
#credit{position:absolute;left:0;right:0;bottom:calc(var(--sb) + 6px);margin:0;padding:0 8px;text-align:center;font-size:11px;font-weight:700;line-height:1.55;color:var(--sumi);touch-action:manipulation}
#credit a{color:inherit;text-underline-offset:2px}
#credit .cg{white-space:nowrap}
@media (max-width:372px){#credit .cs{display:none}#credit .cg{display:block}} /* 2行に折れる幅では、行末に区切りを残さない */
#notice{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--st) + 14px);max-width:calc(100% - 90px);margin:0;padding:8px 14px;border-radius:12px;background:var(--sumi);color:var(--shiro);font-size:13px;font-weight:800;line-height:1.4;z-index:2}
/* 結果: くじの半券を切った札。札とボタンをひとまとまりにして、盆はその残りに置く */
#result .rcol{position:absolute;left:calc(var(--sl) + 18px);right:calc(var(--sr) + 18px);bottom:calc(var(--sb) + 30px);max-width:440px;margin:0 auto;pointer-events:none}
#result .rcol > *{pointer-events:auto}
.card{position:relative;background:var(--shiro);border-radius:18px;box-shadow:0 0 0 2.5px var(--sumi),0 8px 0 2.5px rgba(35,38,43,.16);transform:rotate(-1.5deg)}
#result .card{animation:cardIn .42s var(--bounce) backwards}
@keyframes cardIn{0%{opacity:0;transform:translateY(70px) rotate(-6deg)}100%{opacity:1;transform:rotate(-1.5deg)}}
.stub{background:var(--shu2);color:var(--shiro);border-radius:16px 16px 0 0;min-height:50px;display:flex;align-items:center;gap:9px;padding:8px 18px;font-size:14px;font-weight:900;line-height:1.3}
.stub svg{flex:none;width:18px;height:18px}
.stub small{display:block;font-size:11px;font-weight:800;opacity:.85;margin-top:1px}
.perf{position:relative;height:0;border-top:2.5px dotted var(--sumi);margin:0 14px}
.perf::before,.perf::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--ramune);box-shadow:inset 0 0 0 2.5px var(--sumi)}
.perf::before{left:-28.5px;clip-path:inset(0 0 0 50%)} /* 札の枠線 ( 2.5px ) より外まで半円で覆う。線が残らないように */
.perf::after{right:-28.5px;clip-path:inset(0 50% 0 0)}
.cbody{position:relative;padding:16px 20px 16px}
.cbody .mode{font-size:12px;font-weight:800;letter-spacing:.08em;opacity:.7}
.cbody .sc{font-family:var(--disp);font-size:70px;line-height:1;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.cbody .best{font-size:13px;font-weight:800;opacity:.7}
.new{position:absolute;right:16px;top:12px;width:92px;height:92px;border-radius:50%;background:var(--kimi);box-shadow:0 0 0 2.5px var(--sumi);display:grid;place-items:center;text-align:center;font-size:16px;font-weight:900;line-height:1.2;transform:rotate(12deg);opacity:0}
.new.on{animation:stick .2s .35s var(--bounce) forwards}
@keyframes stick{0%{opacity:0;transform:rotate(20deg) scale(1.4)}100%{opacity:1;transform:rotate(12deg) scale(1)}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:16px;padding-top:14px;border-top:2.5px dotted rgba(35,38,43,.35)}
.stats div{text-align:center}
.stats b{display:block;font-family:var(--disp);font-weight:400;font-size:28px;line-height:1}
.stats span{display:block;margin-top:5px;font-size:11px;font-weight:800;opacity:.72}
#copyMsg{display:block;font-size:12px;font-weight:800;text-align:center;margin-top:10px}
#copyMsg:empty{display:none}
#copyTxt{display:none;margin-top:8px;width:100%;height:72px;font-family:var(--ui);font-size:12px;border:2px solid var(--sumi);border-radius:10px;background:#fff;color:var(--sumi);padding:6px 8px;resize:none;-webkit-user-select:text;user-select:text}
#copyTxt.on{display:block}
.racts{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:28px}
.racts .sl{width:122px;height:122px}
.racts .sl .k{font-size:20px}
.racts .rb{width:86px;height:86px;font-size:13px;line-height:1.25}

/* 一時停止: 水色を重ねて、半券のない小さなくじ札 */
#pause{display:flex;align-items:center;justify-content:center;background:rgba(154,215,208,.7);z-index:3}
#pause .card{width:300px;padding:22px 18px 28px;text-align:center}
#pause h2{margin:0 0 18px;font-size:20px;font-weight:900}
.pacts{display:flex;justify-content:center;align-items:center;gap:18px}
.pacts .sl{width:104px;height:104px}
.pacts .sl .k{font-size:17px}
.pacts .rb{width:86px;height:86px;font-size:12px;line-height:1.25}

#fade{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}

/* 横持ち ( 小さい画面 ) : PC の組みを縮める */
@media (min-aspect-ratio:21/20){
  #title .tt{left:calc(var(--sl) + 28px);top:calc(var(--st) + 20px)}
  .lg{width:280px}
  .en{font-size:20px} /* Darumadrop One は 20px 未満で使わない */
  #title .menu{left:calc(var(--sl) + 28px);right:auto;justify-content:flex-start;gap:20px;bottom:calc(var(--sb) + 88px)}
  #title .sl{width:112px;height:112px}
  .sl .k{font-size:14px}
  .vsb{left:calc(var(--sl) + 28px);transform:none;bottom:calc(var(--sb) + 34px)}
  .vsb:active{transform:scale(.96)}
  #credit{right:auto;left:calc(var(--sl) + 28px);text-align:left}
  #result .rcol{left:auto;right:calc(var(--sr) + 4vw);top:50%;bottom:auto;width:min(420px,52vw);transform:translateY(-50%)}
}
/* PC ( 横持ちのスマホのように低い画面は、上の縮めた組みのまま ) */
@media (min-width:760px) and (min-aspect-ratio:21/20) and (min-height:560px){
  #score{font-size:52px}
  #title .tt{left:calc(var(--sl) + 72px);top:calc(var(--st) + min(104px,9vh))}
  .lg{width:min(540px,42vw)}
  .en{font-size:28px;margin-top:10px}
  .en i{width:36px;height:3px}
  .rule{font-size:18px;margin-top:16px}
  #title .menu{left:calc(var(--sl) + 80px);right:auto;top:min(424px,calc(100% - 290px));bottom:auto;justify-content:flex-start;gap:26px}
  .vsb{left:calc(var(--sl) + 80px);top:min(612px,calc(100% - 96px));bottom:auto;transform:none}
  .vsb:active{transform:scale(.96)}
  #credit{left:calc(var(--sl) + 72px);bottom:calc(var(--sb) + 14px);font-size:12px}
  #title .sl{width:168px;height:168px}
  .sl .k{font-size:23px}
  #btnSound{right:calc(var(--sr) + 32px);top:calc(var(--st) + 32px)}
  #result .rcol{right:calc(var(--sr) + 8vw);width:420px}
}
/* 背の低いスマホの縦 ( Safari のバーが出ているときなど ): HUD とくぼみを詰めて、盆に高さを回す */
@media (max-height:760px) and (max-aspect-ratio:21/20){
  #hud{padding-top:calc(var(--st) + 8px)}
  #linkBox{margin-top:6px}
  #pad:not(.wide){height:calc(var(--sb) + 150px)}
  #pad:not(.wide) #stickV{width:118px;height:118px;margin:-59px 0 0 -59px}
  #pad:not(.wide) #knob{width:52px;height:52px;margin:-26px 0 0 -26px}
  body:not(.wide) #oppCv{width:70px;height:102px} /* 対戦の相手の盆も、詰めたくぼみの高さに収める */
}
@media (max-height:700px) and (max-aspect-ratio:21/20){
  .rule{display:none}
  #title .sl{width:112px;height:112px}
  .sl .k{font-size:14px}
}

/* ---------- オンライン対戦 ---------- */
#vs{display:flex;align-items:center;justify-content:center;background:rgba(154,215,208,.86);z-index:3;padding:calc(var(--st) + 12px) 14px calc(var(--sb) + 12px);overflow:auto;touch-action:pan-y pinch-zoom}
.vcard{width:min(380px,100%);padding:20px 20px 18px;transform:none;font-weight:700}
.vcard h2{margin:0 0 12px;font-size:20px;font-weight:900;text-align:center}
.vp{display:none}
.vp.on{display:block}
.vcard p{margin:0 0 10px;font-size:14px;line-height:1.6}
.vcard ul{margin:0 0 12px;padding:0 0 0 1.1em;font-size:13px;line-height:1.55}
.vcard li+li{margin-top:5px}
.chk{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:15px;font-weight:900;cursor:pointer}
.chk input{width:22px;height:22px;margin:0;accent-color:var(--shu2)}
.vbtns{display:flex;flex-direction:column;align-items:center;gap:8px}
.pb{min-width:210px;height:50px;padding:0 20px;border-radius:25px;background:var(--shu2);color:var(--shiro);font-size:17px;font-weight:900;box-shadow:0 0 0 2.5px var(--sumi);transition:transform .26s var(--bounce)}
.pb:active{transform:scale(.95)}
.pb[disabled]{background:#b9b1a6;color:#f4f5f7;cursor:default}
.pb.on{background:var(--kimi);color:var(--sumi)}
.pb.sm{min-width:0;height:46px;font-size:15px;padding:0 18px}
.tb{min-height:40px;padding:0 14px;font-size:14px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.join{margin:14px 0 12px;padding-top:14px;border-top:2.5px dotted rgba(35,38,43,.35)}
.join label{display:block;margin-bottom:6px;font-size:13px;font-weight:900}
.jrow{display:flex;gap:8px}
#vsCode{flex:1;min-width:0;height:46px;padding:0 12px;border:2.5px solid var(--sumi);border-radius:12px;background:#fff;color:var(--sumi);font-family:var(--ui);font-size:20px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;-webkit-user-select:text;user-select:text}
#vsCode::placeholder{font-size:15px;letter-spacing:0;color:#9a948b}
.vlab{text-align:center;font-weight:900;font-size:13px!important;margin-bottom:0!important}
.vcode{text-align:center;font-family:var(--ui);font-size:40px!important;font-weight:900;letter-spacing:.14em;margin:0 0 12px!important;-webkit-user-select:all;user-select:all}
.vboth{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.vboth div{padding:10px 8px;border-radius:12px;box-shadow:inset 0 0 0 2.5px var(--sumi);text-align:center}
.vboth b{display:block;margin-top:2px;font-size:16px;font-weight:900}
.vboth b.ok{color:var(--shu2)}
.vrule b{font-weight:900;background:linear-gradient(transparent 56%,var(--kimi) 56%,var(--kimi) 92%,transparent 92%)}
#vsMsg{min-height:1.5em;margin:10px 0 0;font-size:13px;font-weight:800;text-align:center}
#vsMsg:empty{min-height:0;margin:0}
/* 届いた鉄の玉 ( つぎの列の下 ) */
#gqBox{position:absolute;right:0;top:100%;margin-top:6px;display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:14px;background:var(--sumi);color:var(--shiro);white-space:nowrap}
#gqBox .lab{font-size:11px;opacity:1}
#gqPips{display:flex;align-items:center;gap:3px;font-size:12px;font-weight:900}
#gqPips i{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d7dbe2 0 18%,#7c818a 40%,#3e4148 100%)}
#gqBox.bump{animation:gqBump .3s var(--bounce)}
#gqBox.soon #gqPips i:first-child{animation:gqSoon .3s ease-in-out infinite alternate}
@keyframes gqBump{0%{transform:scale(1.2)}100%{transform:none}}
@keyframes gqSoon{0%{transform:none}100%{transform:scale(1.28)}}
#nextBox{position:relative}
/* 相手の盆 ( スマホはパッドの右、PC は盆の右 ) */
#opp{position:absolute;right:calc(var(--sr) + 12px);bottom:calc(var(--sb) + 10px);display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
#oppCv{width:88px;height:128px;border-radius:9px;box-shadow:0 0 0 2.5px var(--sumi);background:#f2ece2}
#oppScore{font-family:var(--disp);font-weight:400;font-size:20px;line-height:1}
#opp.danger #oppCv{animation:oppHot .36s ease-in-out infinite alternate}
@keyframes oppHot{0%{box-shadow:0 0 0 2.5px var(--sumi)}100%{box-shadow:0 0 0 2.5px var(--shu),0 0 14px var(--shu)}}
body.wide #opp{right:calc(var(--sr) + 3vw);top:50%;bottom:auto;transform:translateY(-50%)}
body.wide #oppCv{width:min(14vw,132px);height:auto;aspect-ratio:176/256}
body.vs #padL{left:calc(var(--sl) + 12px)}
/* 飛ぶ印 ・ 待ち ・ 秒読み */
#fly{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#fly i{position:absolute;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 16%,#8a8f98 44%,#3e4148 100%);box-shadow:0 0 0 2px var(--sumi)}
#vsWait{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);max-width:calc(100% - 40px);padding:10px 16px;border-radius:14px;background:var(--sumi);color:var(--shiro);font-size:14px;font-weight:800;text-align:center;z-index:2}
#vsCount{position:absolute;left:0;right:0;top:34%;text-align:center;font-family:var(--disp);font-size:96px;line-height:1;color:var(--shu);-webkit-text-stroke:0;text-shadow:3px 3px 0 var(--sumi);pointer-events:none;z-index:2}
#vsCount.tick{animation:cnt .5s var(--bounce)}
@keyframes cnt{0%{transform:scale(1.7);opacity:0}100%{transform:none;opacity:1}}
/* 結果の勝敗 */
.new.vsr{opacity:1;transform:rotate(12deg);font-size:22px;background:var(--kimi)}
.new.vsr.lose{background:#cfd3da}
#pNote{margin:-8px 0 14px;font-size:13px;line-height:1.5}
/* はじめの画面 */
#gate{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:0 15px;background:var(--ramune);transition:opacity .42s,visibility .42s;touch-action:manipulation;cursor:pointer}
#gate.out{opacity:0;visibility:hidden;pointer-events:none}
#gate .lg{width:min(380px,calc(100vw - 30px))}
#gate .lg.wait .lc .ld{animation:lbob 1.5s ease-in-out infinite;animation-delay:calc(var(--i) * 130ms)}
#gate .lg.wait .lbm{transform-box:fill-box;transform-origin:center;animation:lspin 3s linear infinite}
#gate .lf{fill:var(--shu)}
@keyframes lbob{0%,100%{transform:none}40%{transform:translateY(-5px)}}
@keyframes lspin{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}}
.gbar{display:flex;gap:8px;height:12px}
.gbar i{width:12px;height:12px;border-radius:50%;background:var(--sumi);animation:gbar 1s ease-in-out infinite}
.gbar i:nth-child(2){animation-delay:.14s;background:var(--shu2)}
.gbar i:nth-child(3){animation-delay:.28s;background:var(--kimi);box-shadow:inset 0 0 0 1.5px var(--sumi)}
@keyframes gbar{0%,100%{transform:none}50%{transform:translateY(-6px)}}
#gate.ready .gbar{visibility:hidden}
#gateGo{min-width:230px;height:60px;padding:0 24px;border-radius:30px;background:var(--shiro);box-shadow:0 0 0 2.5px var(--sumi);font-size:15px;font-weight:800;opacity:.75}
#gate.ready #gateGo{background:var(--shu2);color:var(--shiro);font-size:19px;font-weight:900;opacity:1;animation:gGo 1.5s ease-in-out infinite}
@keyframes gGo{0%,100%{transform:none}50%{transform:scale(1.04)}}
#gateSnd{display:flex;align-items:center;gap:6px;height:44px;padding:0 16px;font-size:14px;font-weight:900;border-radius:22px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 2px var(--sumi)}
#gateSnd svg{width:20px;height:20px}
.nw{white-space:nowrap}
/* 正方形に近い窓 ・ タブレット縦: 縦に積む組みのまま、字とシールを大きく */
@media (min-width:600px) and (max-aspect-ratio:21/20) and (min-height:720px){
  #title .tt{left:calc(var(--sl) + 40px);top:calc(var(--st) + 36px)}
  .lg{width:min(540px,calc(100vw - 150px))}
  .en{font-size:26px;margin-top:10px}
  .en i{width:34px;height:3px}
  .rule{font-size:18px;margin-top:14px}
  #title .menu{gap:30px;bottom:calc(var(--sb) + 112px)}
  #title .sl{width:168px;height:168px}
  .sl .k{font-size:23px}
  #btnSound{right:calc(var(--sr) + 28px);top:calc(var(--st) + 28px)}
  #result .rcol{max-width:480px}
}