/* 何もない白い空間。UIは下の2つの操作盤と、上の数字だけ。色はナッツそのものの色 */
:root{
  --void:#f3f3f0;
  --ink:#1e1d1a;
  --ink-soft:#77746c;
  --peanut:#cfa36a;
  --peanut-deep:#8a6235;
  --pista:#a9bd70;
  --pista-deep:#5d7330;
  --alarm:#d0402a;
  --panel:rgba(30,29,26,.82);
  --f-ui:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  --f-num:"Jost","Futura","Century Gothic",sans-serif;
  --f-title:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  color-scheme:light;
}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--void);color:var(--ink);font-family:var(--f-ui);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
button{font:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- 数字（4種類）。数字はFutura系のJostで、細く、静かに ---------- */
.hud{position:fixed;top:calc(env(safe-area-inset-top,0px) + 18px);left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;z-index:5;transition:opacity .4s;--r:1;--fill:var(--ink)}
.hud.low{--fill:var(--alarm)}
#count{font-family:var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.bar{display:none!important}
.bar i{display:block;height:100%;width:100%;background:var(--fill);transform-origin:left center}
#big{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 28px);z-index:1;pointer-events:none;display:none;text-align:center;
  font:200 clamp(88px,23vw,300px)/1 var(--f-num);letter-spacing:-.01em;color:rgba(30,29,26,.07);font-variant-numeric:tabular-nums}
/* 1 細い数字 */
.hud[data-s="1"] #count{font-weight:300;font-size:30px;line-height:1;letter-spacing:.05em}
.hud[data-s="1"] .bar{width:110px;height:1px}
/* 2 背景の大きな数字 ＋ 画面の上端いっぱいの時間 */
.hud[data-s="2"]{top:0;left:0;right:0;transform:none}
.hud[data-s="2"] #count{display:none}
.hud[data-s="2"] .bar{width:100%;height:2px;margin:0;background:transparent}
.hud[data-s="2"]~#big{display:block}
/* 3 数字そのものが、時間とともに薄れていく */
.hud[data-s="3"] #count{font-weight:300;font-size:42px;line-height:1;letter-spacing:.03em;color:transparent;
  background:linear-gradient(90deg,var(--fill) calc(var(--r)*100%),rgba(30,29,26,.13) calc(var(--r)*100%));-webkit-background-clip:text;background-clip:text}
.hud[data-s="3"] .bar{display:none}
/* 4 下に小さく（上は何もない空間のまま） */
.hud[data-s="4"]{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 112px)}
.hud[data-s="4"] #count{font-weight:400;font-size:13px;letter-spacing:.32em;color:var(--ink-soft);margin-right:-.32em}
.hud[data-s="4"] .bar{width:48px;height:1px;margin-top:8px}

/* ---------- ボタン（4種類） ---------- */
.pad{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:0 calc(env(safe-area-inset-bottom,0px) + 24px);transition:opacity .4s,transform .4s}
.pad.off{opacity:0;transform:translateY(16px);pointer-events:none}
.nb{position:relative;min-width:0;border:0;margin:0;padding:0;cursor:pointer;touch-action:manipulation;background:none;color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-family:var(--f-ui);-webkit-tap-highlight-color:transparent}
.nb .sil{display:none}.nb .sil svg{display:block;width:100%;height:100%}
/* 1 文字だけ：画面の下の両端に、言葉だけが置いてある */
.pad[data-s="1"]{justify-content:space-between;padding-block-end:calc(env(safe-area-inset-bottom,0px) + 18px)}
.pad[data-s="1"] .nb{padding:18px 6px 12px;font-weight:500;font-size:19px;letter-spacing:.26em}
.pad[data-s="1"] .lb{position:relative;margin-right:-.26em}
.pad[data-s="1"] .lb::after{content:"";position:absolute;left:0;right:.26em;bottom:-9px;height:1.5px;background:var(--ink);transform:scaleX(.18);transition:transform .25s ease-out}
.pad[data-s="1"] .pea .lb::after{transform-origin:left center}.pad[data-s="1"] .pis .lb::after{transform-origin:right center}
.pad[data-s="1"] .nb.hit .lb::after,.pad[data-s="1"] .nb:active .lb::after{transform:scaleX(1);transition:none}
/* 2 黒いカプセル：ひとつの道具を、左右で押し分ける */
.pad[data-s="2"]{justify-content:center}
.pad[data-s="2"] .nb{flex:0 1 158px;height:62px;background:var(--ink);color:var(--void);font-weight:500;font-size:15px;letter-spacing:.2em;transition:background .12s,color .12s}
.pad[data-s="2"] .lb{margin-right:-.2em}
.pad[data-s="2"] .pea{border-radius:31px 0 0 31px}
.pad[data-s="2"] .pis{border-radius:0 31px 31px 0;box-shadow:inset 1px 0 0 rgba(243,243,240,.22)}
.pad[data-s="2"] .nb.hit,.pad[data-s="2"] .nb:active{background:#fff;color:var(--ink);transition:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
/* 3 左右半分：画面の左半分と右半分が、そのままボタン */
.pad[data-s="3"]{top:0;padding:0;align-items:stretch}
.pad[data-s="3"] .nb{flex:1;align-items:flex-end;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 30px);font-weight:500;font-size:12px;letter-spacing:.34em;color:var(--ink-soft);transition:background .3s}
.pad[data-s="3"] .pea{justify-content:flex-start;padding-left:max(26px,env(safe-area-inset-left,0px))}
.pad[data-s="3"] .pis{justify-content:flex-end;padding-right:max(26px,env(safe-area-inset-right,0px))}
.pad[data-s="3"] .pis .lb{margin-right:-.34em}
.pad[data-s="3"]::after{content:"";position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);width:1px;height:22px;background:rgba(30,29,26,.28)}
.pad[data-s="3"] .nb.hit,.pad[data-s="3"] .nb:active{background:rgba(30,29,26,.035);transition:none}
.pad[data-s="3"] .nb.hit .lb,.pad[data-s="3"] .nb:active .lb{color:var(--ink)}
/* 4 シルエット：文字を使わず、形だけで */
.pad[data-s="4"]{justify-content:center;gap:36px}
.pad[data-s="4"] .nb{width:80px;height:80px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(30,29,26,.32);transition:background .12s,color .12s}
.pad[data-s="4"] .lb{display:none}
.pad[data-s="4"] .sil{display:block;width:24px;height:38px}
.pad[data-s="4"] .pea .sil{transform:rotate(-24deg)}.pad[data-s="4"] .pis .sil{transform:rotate(22deg)}
.pad[data-s="4"] .nb.hit,.pad[data-s="4"] .nb:active{background:var(--ink);color:var(--void);transition:none}

.tools{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:max(16px,env(safe-area-inset-right,0px));z-index:10}
/* 音のボタン：音ありは暗いガラスの小さな丸、音なしは白く大きく、朱色のスピーカーと、広がり続ける白い輪 */
.snd{position:relative;display:flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 10px;border-radius:15px;cursor:pointer;
  font:400 11px/1 var(--f-ui);letter-spacing:.14em;color:rgba(255,255,255,.94);background:rgba(30,29,26,.36);
  border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:0 2px 10px rgba(30,29,26,.1);
  transition:height .3s cubic-bezier(.2,.9,.3,1),padding .3s cubic-bezier(.2,.9,.3,1),border-radius .3s,font-size .3s,background .3s,color .3s,box-shadow .3s,border-color .3s}
.snd svg{position:relative;width:14px;height:14px;flex:none;transition:width .3s,height .3s,color .3s}
.snd .sl{position:relative;white-space:nowrap;margin-right:-.14em}
.snd .wave{display:none}.snd[aria-pressed="false"] .wave{display:inline}.snd[aria-pressed="false"] .mute{display:none}
.snd .rg{position:absolute;inset:-1px;border-radius:inherit;border:2px solid #fff;box-shadow:0 0 0 1px rgba(30,29,26,.1);opacity:0;pointer-events:none}
.snd[aria-pressed="false"]{height:46px;padding:0 20px 0 16px;border-radius:23px;gap:9px;font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--ink);
  background:#fff;border-color:rgba(255,255,255,0);box-shadow:0 8px 26px rgba(30,29,26,.22)}
.snd[aria-pressed="false"] svg{width:22px;height:22px;color:var(--alarm)}
.snd[aria-pressed="false"] .rg{animation:sndRing 2.6s cubic-bezier(.2,.6,.35,1) infinite}
.snd[aria-pressed="false"] .r2{animation-delay:1.3s}
@keyframes sndRing{0%{opacity:.95;transform:scale(1)}70%{opacity:0}100%{opacity:0;transform:scale(1.55,1.9)}}
.fdark .snd[aria-pressed="false"],.hdark .snd[aria-pressed="false"]{--ink:#1e1d1a}
@media (prefers-reduced-motion:reduce){.snd,.snd svg{transition:none}.snd .rg{animation:none!important;opacity:0}}

.veil{position:fixed;inset:0;z-index:20;display:grid;place-items:center;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));transition:opacity .8s}
.veil.fade{opacity:0;pointer-events:none}
.btn{display:flex;align-items:center;justify-content:center;height:54px;padding:0 30px;border-radius:27px;border:0;cursor:pointer;text-decoration:none;
  font:700 16px var(--f-ui);letter-spacing:.14em;background:var(--ink);color:var(--void);box-shadow:0 10px 26px rgba(30,29,26,.2)}
.btn.sub{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.res{width:100%;max-width:300px;max-height:calc(100% - 32px);overflow:auto;display:grid;gap:16px;text-align:left;
  background:rgba(243,243,240,.92);border-radius:18px;padding:22px 22px 20px;box-sizing:border-box;box-shadow:0 20px 60px rgba(30,29,26,.14)}
.res .lbl{margin:0;font-size:11px;letter-spacing:.24em;color:var(--ink-soft)}
.stats{margin:8px 0 0;display:grid}
.stats div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid rgba(30,29,26,.09)}
.stats div:last-child{border-bottom:0}
.stats dt{font-size:12px;letter-spacing:.14em;color:var(--ink-soft)}
.stats dd{margin:0;font:300 20px/1 var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
.stats dd small{font:500 11px var(--f-ui);margin-left:3px;color:var(--ink-soft)}
.stats .now dt{color:var(--ink)}
.stats .now dd{font-size:38px}
.last{margin:0;display:grid;gap:8px}
.last img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:rgba(30,29,26,.06)}
.acts{display:grid;gap:10px}
@media (min-aspect-ratio:1/1) and (min-width:560px){
  .res{max-width:640px;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);grid-template-areas:"rs last" "acts last";column-gap:24px;align-items:start}
  .rs{grid-area:rs}.last{grid-area:last}.acts{grid-area:acts;align-self:end}}
@media (max-height:520px){.res{padding:16px 18px;gap:12px}.stats div{padding:5px 0}.stats .now dd{font-size:30px}.btn{height:44px}}


/* ---------- フィーバー：ゲージと、画面の上に出る文字（4種類） ---------- */
/* ゲージ：数字の下の、薄いFEVERの5文字。リズムよく置くと1文字ずつネオンが点く（音も1段ずつ上がる） */
.fword{display:flex;justify-content:center;gap:.5em;margin:9px auto 0;font:500 15px/1 var(--f-num);letter-spacing:0;color:rgba(30,29,26,.13)}
.fword b{font-weight:500;transition:color .5s,text-shadow .5s}
.fword b.on{color:#ff2fae;text-shadow:0 0 1px #fff,0 0 6px rgba(255,47,174,.85),0 0 14px rgba(255,120,60,.55);transition:none;animation:lit .35s ease-out}
.fword.ready b.on{animation:lit2 .4s ease-in-out infinite alternate}
@keyframes lit{0%{transform:scale(1.9);color:#fff}100%{transform:none}}
@keyframes lit2{to{text-shadow:0 0 2px #fff,0 0 10px rgba(255,47,174,1),0 0 22px rgba(255,140,60,.8)}}
.hud[data-s="2"] .fword{margin-top:10px}
.hud[data-s="4"] .fword{font-size:11px;margin-top:6px}
.pad.lock .nb{opacity:.18;filter:grayscale(1);transition:opacity .12s}
.fever.ending .fw{animation:fblink .22s steps(1) infinite!important}
@keyframes fblink{50%{opacity:.25}}
.fdark .hud,.fdark .pad{--ink:#f3f1f6;--void:#191520;--ink-soft:#c8bfd8}
.hdark .hud,.hdark .pad{--ink:#f3f1f6;--void:#191520;--ink-soft:#c8bfd8}
.hblind .pad .nb{opacity:0;transition:opacity .7s}
.pad .nb{transition-property:opacity,background,color}
.hdark .ct{--ink:#f3f1f6;--ink-soft:#c8bfd8}
.fdark .hud .bar,.fdark .hud .fg{background:rgba(255,255,255,.12)}
.nb.next{animation:nx .75s ease-in-out infinite alternate}
@keyframes nx{from{filter:drop-shadow(0 0 0 rgba(255,190,60,0))}to{filter:drop-shadow(0 0 3px rgba(255,226,150,1)) drop-shadow(0 0 12px rgba(255,176,46,.95))}}
.nb.dim{opacity:.3;transition:opacity .3s}
.fev .hud{opacity:0!important}

.fever{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 10px);z-index:7;text-align:center;pointer-events:none;opacity:0;transition:opacity .6s}
.fever.on{opacity:1;transition:opacity .25s}
.fw{display:inline-flex;font-family:var(--f-num);font-size:clamp(46px,min(14vw,15vh),112px);line-height:1}
.fw span{display:inline-block}
.fs{margin:6px 0 0;font:700 13px/1.5 var(--f-ui);letter-spacing:.24em;margin-right:-.24em}
/* フィーバー中の並べた数：いつもより大きく、そのフィーバーの色で光る。置くたびに弾む */
.fc{--fc:#ff4fd8;margin:8px 0 0;font:300 clamp(30px,6vh,44px)/1 var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#fffafd;
  text-shadow:0 0 1px #fff,0 0 6px var(--fc),0 0 16px var(--fc),0 0 32px var(--fc)}
.fc.pop{animation:fcPop .28s cubic-bezier(.2,1.6,.4,1)}
@keyframes fcPop{from{transform:scale(1.22)}to{transform:none}}
.fever[data-s="2"] .fc{--fc:#ffb21e}.fever[data-s="3"] .fc{--fc:#ff6a1f}.fever[data-s="4"] .fc{--fc:#ffb030}.fever[data-s="5"] .fc{--fc:#ff2a8a}
.ft{width:120px;height:2px;margin:10px auto 0;border-radius:1px;background:rgba(127,127,127,.18)}
.ft i{display:block;height:100%;transform-origin:left center;border-radius:1px}
/* 1 ディスコ：ネオン管。一文字ずつ点灯し、色が回る */
.fever[data-s="1"] .fw{font-weight:500;letter-spacing:.06em;color:#fff6fd;animation:hue 3s linear infinite;
  text-shadow:0 0 2px #fff,0 0 7px #ff5ade,0 0 16px #ff2fc0,0 0 34px #c42cff,0 0 70px #6a2cff}
.fever.on[data-s="1"] .fw span{animation:flick .9s steps(1) both;animation-delay:calc(var(--i)*.09s)}
@keyframes flick{0%{opacity:0}12%{opacity:1}16%{opacity:.15}22%{opacity:1}30%{opacity:.35}36%,100%{opacity:1}}
@keyframes hue{to{filter:hue-rotate(360deg)}}
.fever[data-s="1"] .fs{color:#ffe8fb;text-shadow:0 0 6px #ff4fd8,0 0 16px #a02cff}
.fever[data-s="1"] .ft i{background:#ff7be3;box-shadow:0 0 8px #ff4fd8,0 0 18px #a02cff}
/* 2 確変：虹がうねる太い文字、金の縁取り。当たりの瞬間にドンと迫る */
.fever[data-s="2"] .fw{font-weight:300;letter-spacing:.08em;margin-right:-.08em}
.fever[data-s="2"] .fw span{--c:#ff2a6a;color:#fff4fa;
  text-shadow:0 0 1px #fff,0 0 3px #fff,0 0 7px var(--c),0 0 14px var(--c),0 0 28px var(--c),0 0 56px var(--c),0 0 90px var(--c);
  animation:tubeOn .9s steps(1) both,tubeHue 2.4s linear infinite;animation-delay:calc(var(--i)*.07s),calc(var(--i)*-.48s)}
.fever[data-s="2"] .fw span:nth-child(1){--c:#ff2a5a}.fever[data-s="2"] .fw span:nth-child(2){--c:#ffb21e}.fever[data-s="2"] .fw span:nth-child(3){--c:#3cff7a}
.fever[data-s="2"] .fw span:nth-child(4){--c:#2ec8ff}.fever[data-s="2"] .fw span:nth-child(5){--c:#d24bff}
.fever.on[data-s="2"]{animation:slam .5s cubic-bezier(.2,1.5,.4,1) both,quake .09s linear .5s 6}
@keyframes tubeOn{0%{opacity:0}8%{opacity:1}12%{opacity:.1}18%{opacity:.9}24%{opacity:.2}30%,100%{opacity:1}}
@keyframes tubeHue{to{filter:hue-rotate(360deg)}}
@keyframes slam{from{transform:scale(2.2);opacity:0}60%{opacity:1}to{transform:none}}
@keyframes quake{25%{transform:translate(2px,-1px)}75%{transform:translate(-2px,1px)}}
.fever[data-s="2"] .fs{color:#fff3c4;text-shadow:0 0 6px #ff9a1e,0 0 14px #ff3bb0}
.fever[data-s="2"] .ft i{background:linear-gradient(90deg,#ff3b3b,#ffb21e,#fff04a,#3ee86a,#33c8ff,#ff4fd8);box-shadow:0 0 10px rgba(255,200,60,.9)}
/* 3 夏祭り：提灯の明かりのような暖かい光。吊られているように、ゆっくり揺れる */
.fever[data-s="3"] .fw{font-weight:400;letter-spacing:.1em;margin-right:-.1em;color:#fff3dc;transform-origin:50% -60%;
  text-shadow:0 0 1px #fff,0 0 4px #ffd59a,0 0 10px #ffa040,0 0 22px #ff6a1f,0 0 44px #e2341a,0 0 80px #a8121a}
.fever.on[data-s="3"] .fw{animation:lanternIn .9s ease-out both,sway 2.6s ease-in-out .9s infinite}
@keyframes lanternIn{from{opacity:0;filter:blur(8px) brightness(.4)}to{opacity:1}}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.fever[data-s="3"] .fs{color:#ffe7c4;text-shadow:0 0 6px #ff7a2a,0 0 14px #c0201a}
.fever[data-s="3"] .ft i{background:linear-gradient(90deg,#ff5a1f,#ffd08a);box-shadow:0 0 10px rgba(255,140,50,.9)}
/* 4 竜宮城：金と朱の光。1文字ずつ、波に揺られて漂う */
.fever[data-s="4"] .fw{font-weight:400;letter-spacing:.1em;margin-right:-.1em;color:#fff6d6;
  text-shadow:0 0 1px #fff,0 0 5px #ffe08a,0 0 13px #ffb030,0 0 28px #ff5a2a,0 0 56px #e0204a,0 0 90px #ff4a8a}
.fever.on[data-s="4"] .fw span{animation:surface 1s ease-out both,drift4 2.2s ease-in-out infinite;animation-delay:calc(var(--i)*.1s),calc(var(--i)*-.44s)}
@keyframes surface{from{opacity:0;transform:translateY(30px) scale(.6);filter:blur(6px)}to{opacity:1}}
@keyframes drift4{0%,100%{transform:translateY(-5px) rotate(-3deg)}50%{transform:translateY(5px) rotate(3deg)}}
.fever[data-s="4"] .fs{color:#fff0c8;text-shadow:0 0 6px #ff7a2a,0 0 16px #c0204a}
.fever[data-s="4"] .ft i{background:linear-gradient(90deg,#ff3a5a,#ffd25a);box-shadow:0 0 10px rgba(255,170,60,.9)}
/* 5 サンバ：金の芯に、色とりどりの光。1文字ずつ、サンバのリズムで跳ねる */
.fever[data-s="5"] .fw{font-weight:500;letter-spacing:.06em;margin-right:-.06em}
.fever[data-s="5"] .fw span{--c:#ff3ab0;color:#fff6d8;text-shadow:0 0 1px #fff,0 0 5px #ffe17a,0 0 12px var(--c),0 0 26px var(--c),0 0 50px var(--c),0 0 80px #ffb21e;
  animation:sIn .5s cubic-bezier(.2,1.6,.4,1) both,sBounce .5s ease-in-out infinite;animation-delay:calc(var(--i)*.07s),calc(var(--i)*.1s + .5s)}
.fever[data-s="5"] .fw span:nth-child(1){--c:#ff2a8a}.fever[data-s="5"] .fw span:nth-child(2){--c:#ff9a1a}.fever[data-s="5"] .fw span:nth-child(3){--c:#2ad6ff}
.fever[data-s="5"] .fw span:nth-child(4){--c:#3aff7a}.fever[data-s="5"] .fw span:nth-child(5){--c:#b04aff}
@keyframes sIn{from{opacity:0;transform:translateY(-40px) rotate(-20deg) scale(.4)}to{opacity:1;transform:none}}
@keyframes sBounce{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-8px) rotate(-5deg)}75%{transform:translateY(-3px) rotate(5deg)}}
.fever[data-s="5"] .fs{color:#ffe9f6;text-shadow:0 0 6px #ff2a8a,0 0 16px #b04aff}
.fever[data-s="5"] .ft i{background:linear-gradient(90deg,#ff2a8a,#ffd21a,#2ad6ff,#3aff7a);box-shadow:0 0 10px rgba(255,120,200,.9)}
/* ---------- 支援：カード（中央で表を向く）と、効いているあいだのしるし ---------- */
.card{position:fixed;left:30%;top:34%;z-index:9;width:132px;height:178px;margin:-89px 0 0 -66px;pointer-events:none;perspective:600px;--a:#3ab0ff;--b:#1a5ad0}
.card[data-k="x3"]{--a:#ffd25a;--b:#d08a10}.card[data-k="auto"]{--a:#4ae09a;--b:#13905a}.card[data-k="fever"]{--a:#ff5ac8;--b:#a01a8a}
.cin{position:absolute;inset:0;border-radius:14px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(160deg,#fff 0%,var(--a) 18%,var(--b) 100%);box-shadow:0 0 0 3px rgba(255,255,255,.9) inset,0 0 0 1px rgba(0,0,0,.08),0 10px 30px rgba(0,0,0,.25),0 0 40px var(--a)}
.cin::before{content:"";position:absolute;inset:9px;border-radius:9px;border:1.5px solid rgba(255,255,255,.7)}
.cin::after{content:"";position:absolute;top:-50%;left:-80%;width:60%;height:200%;transform:rotate(20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}
.card.go{animation:cfrom .5s cubic-bezier(.25,1.2,.4,1) both}.card.go .cin{animation:cflip .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes cfrom{from{transform:translate(var(--fx,0),var(--fy,0)) scale(.12)}to{transform:none}}.card.go .cin::after{animation:csheen .9s ease-out .45s both}
.card.out{transition:transform .45s ease-in,opacity .45s;transform:translateY(-34vh) scale(.25);opacity:0}
.cl{position:relative;font:700 30px/1.1 var(--f-ui);color:#fff;letter-spacing:.06em;text-align:center;text-shadow:0 2px 0 rgba(0,0,0,.18),0 0 12px rgba(255,255,255,.6)}
.card[data-k="fever"] .cl{font-size:22px}
@keyframes cflip{from{transform:rotateY(180deg) scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes csheen{to{left:130%}}
.cw{position:relative;display:inline-block}
.skb{--r:1;--a:#2f9cff;position:absolute;left:100%;top:50%;width:40px;height:40px;margin:-20px 0 0 12px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,#fff 0 58%,transparent 59%),conic-gradient(var(--a) calc(var(--r)*360deg),rgba(30,29,26,.1) 0);
  box-shadow:0 0 12px color-mix(in srgb,var(--a) 55%,transparent);animation:skIn .45s cubic-bezier(.2,1.6,.4,1) both}
.skb[hidden]{display:none}
.skb b{font:700 11px/1 var(--f-ui);color:var(--a);letter-spacing:0}
.skb[data-k="x3"]{--a:#e09a10}.skb[data-k="auto"]{--a:#1fae6c}
@keyframes skIn{from{transform:scale(.2);opacity:0}}
.hud[data-s="4"] .skb{width:30px;height:30px;margin-top:-15px}.hud[data-s="4"] .skb b{font-size:9px}
.skb.end{animation:fblink .3s steps(1) infinite}
/* ---------- タイトル：始まりの画面は大きく、プレイ中は左上に小さく、結果にも ---------- */
/* 始まりの画面：縦書きで3行。右から読む。いちばん左の行を大きく */
.tt{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,4.5vh,40px);margin-top:-4vh;justify-self:end;margin-right:clamp(8px,13vw,220px)}
.gt{margin:0;writing-mode:vertical-rl;display:flex;flex-direction:column;align-items:flex-start;gap:.62em;font-size:clamp(10px,2.75vh,27px);font-family:var(--f-title);color:var(--ink);font-feature-settings:"vpal" 1,"vkrn" 1}
.gt span{display:block;line-height:1;white-space:nowrap}
.gt .g1{font-size:1em;font-weight:500;letter-spacing:.15em;color:#2e2c28}
.gt .g1+.g1{margin-top:.05em}   /* 漢字は枠いっぱいまで墨があるので、かなの「ピ」と墨の頭を合わせる */
.gt .g2{font-size:1.82em;font-weight:800;letter-spacing:.06em;margin-top:-.02em}
.ct{position:fixed;top:calc(env(safe-area-inset-top,0px) + 16px);left:max(14px,env(safe-area-inset-left,0px));z-index:5;margin:0;pointer-events:none;
  writing-mode:vertical-rl;display:flex;flex-direction:column;gap:4px;font:500 11px/1.3 var(--f-title);letter-spacing:.1em;font-feature-settings:"vpal" 1;color:var(--ink-soft);transition:opacity .4s}
.ct .gtail{font-weight:800;color:var(--ink);font-size:12.5px}
#title:not(.fade)~.ct{opacity:0}
.fev .ct{opacity:.0}
.fdark .ct{--ink:#f3f1f6;--ink-soft:#c8bfd8}
.rt{margin:0 0 10px;display:flex;flex-direction:column;gap:3px;font:500 10.5px/1.45 var(--f-title);letter-spacing:.06em;font-feature-settings:"palt" 1;color:var(--ink-soft)}
.rt .gtail{font-weight:800;font-size:13px;color:var(--ink)}
@media (max-height:520px){.tt{gap:12px;margin-top:0}#startBtn{height:44px;padding:0 24px;font-size:14px}
.ct{font-size:9px;letter-spacing:.08em}.ct .gtail{font-size:10px}}
body:not(.started) .hud{opacity:0!important}
#big{transition:opacity .6s}body:not(.started) #big{opacity:0}   /* 始まりの画面では、背景の数字を出さない（題と重なる） */
/* 縦長の画面では、男と列が右寄りに見えるので、タイトルは左上の空いた所へ */
@media (max-aspect-ratio:1/1){.tt{justify-self:start;align-self:start;margin:calc(env(safe-area-inset-top,0px) + 8vh) 0 0 5vw}
  .gt{font-size:min(4.1vw,2.6vh)}
  #startBtn{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 9vh);transform:translateX(-50%)}}
/* ---------- 居眠りのカウントダウン：細い線のストップウォッチ。減っていく弧だけ朱色 ---------- */
.doze{position:fixed;z-index:8;width:64px;height:70px;margin:-35px 0 0 -32px;pointer-events:none;opacity:0;transform:scale(.85);transition:opacity .25s,transform .35s cubic-bezier(.2,1.4,.4,1)}
.doze.on{opacity:1;transform:none}
.doze svg{display:block;width:100%;height:100%;overflow:visible}
.dz-crown{fill:var(--ink)}
.dz-face{fill:rgba(243,243,240,.88)}
.dz-track{fill:none;stroke:rgba(30,29,26,.16);stroke-width:1}
.dz-arc{fill:none;stroke:var(--alarm);stroke-width:2.2;stroke-dasharray:163.4;stroke-dashoffset:0;stroke-linecap:butt}
.dz-ticks line{stroke:var(--ink);stroke-width:1}
.dz-hand{stroke:var(--alarm);stroke-width:1;opacity:.55}
.dz-pin{fill:var(--alarm)}
#dozeN{position:absolute;left:0;right:0;top:35px;transform:translateY(-50%);text-align:center;font:300 26px/1 var(--f-num);font-variant-numeric:tabular-nums;color:var(--ink)}
.doze.beat #dozeN{animation:dzBeat .45s ease-out}
@keyframes dzBeat{0%{transform:translateY(-50%) scale(1.35);color:var(--alarm)}100%{transform:translateY(-50%) scale(1)}}

/* ---------- 阻害：ここをタップ、の合図 ---------- */
.tap{position:fixed;z-index:8;width:0;height:0;pointer-events:none}
.tap i{position:absolute;left:-28px;top:-28px;width:56px;height:56px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 0 0 1.5px rgba(30,29,26,.35),0 0 18px rgba(255,255,255,.9);animation:tapR 1s ease-out infinite}
.tap i+i{animation-delay:.5s}
@keyframes tapR{from{transform:scale(.4);opacity:1}to{transform:scale(1.5);opacity:0}}
/* 確認用（仮）のパネル。公開前に外す */
.dbg{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);left:max(54px,calc(env(safe-area-inset-left,0px) + 40px));z-index:15;
  background:var(--panel);color:#f3f3f0;border-radius:12px;padding:6px 8px;font-size:12px;display:flex;flex-direction:column;gap:6px;
  max-width:min(300px,calc(100% - 150px));max-height:calc(100% - 140px);overflow:auto;box-sizing:border-box}
.dbg button{background:rgba(255,255,255,.1);color:#f3f3f0;border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:5px 8px;font-size:12px;cursor:pointer}
.dbg button[aria-pressed="true"]{background:#f3f3f0;color:var(--ink)}
.dbg #dbgT{border:0;background:transparent;padding:2px 4px;font-weight:700;text-align:left}
.dbg .row{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.dbg h4{margin:8px 0 0;font-size:11px;font-weight:500;opacity:.7}
.dbg p{margin:6px 0 0;opacity:.75}
@media (prefers-reduced-motion:reduce){.veil,.pad,.hud,.nb,.lb::after{transition:none!important}.fever *,.fever,.nb.next{animation:none!important}}