:root{
  --paper:#FFF1F7; --dot:#FFD3E6; --card:#FFFFFF; --ink:#3B2B5E; --ink-soft:#7D6E9C;
  --pink:#FF5C9E; --pink-soft:#FFE0EE; --lemon:#FFE15A; --lemon-soft:#FFF6C2;
  --sky:#BDEBFF; --sky-soft:#E6F7FF; --mint:#5FDDB0; --grape:#8A63F2; --grass:#CFF3DF;
  --display:"Mochiy Pop One","Hiragino Maru Gothic ProN","Arial Rounded MT Bold",sans-serif;
  --body:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  color-scheme:light;
}
html,body{height:100%}
[hidden]{display:none!important}
body{
  background:var(--paper);
  background-image:radial-gradient(var(--dot) 1.6px,transparent 1.8px);
  background-size:18px 18px;
  color:var(--ink); font-family:var(--body); font-weight:500;
  overscroll-behavior:none; -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
}
button,select{font:inherit;color:inherit;touch-action:manipulation}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--grape);outline-offset:2px}

.app{
  height:100%; max-width:440px; margin:0 auto; box-sizing:border-box;
  padding-inline:16px; padding-block:8px 10px;
  display:flex; flex-direction:column; gap:8px;
}

/* header */
.top{display:flex;align-items:center;gap:8px}
.hapi{
  display:flex;align-items:center;gap:6px;
  background:var(--pink);color:#fff;border:3px solid var(--ink);border-radius:999px;
  padding:2px 14px 2px 6px;box-shadow:0 3px 0 var(--ink);
}
.hapi .heart{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:#fff;color:var(--pink);font-size:18px;line-height:1;
}
.hapi b{font-family:var(--display);font-weight:400;font-size:20px;font-variant-numeric:tabular-nums;min-width:2ch}
.hapi small{font-size:12px;font-weight:800}
.hapi.bump{animation:bump .25s}
@keyframes bump{50%{transform:scale(1.12)}}
.combo{font-size:12px;font-weight:800;color:var(--ink-soft);line-height:1.1}
.combo b{display:block;font-family:var(--display);font-weight:400;font-size:18px;color:var(--ink)}
.combo.hot b{color:var(--pink)}
.toggles{margin-left:auto;display:flex;gap:6px}
.toggles button{
  border:2.5px solid var(--ink);border-radius:999px;background:#fff;
  font-size:12px;font-weight:800;padding:5px 10px;
}
.toggles button[aria-pressed="true"]{background:var(--lemon)}
.dot{position:absolute;top:8px;right:10px;width:14px;height:14px;border-radius:50%;background:var(--lemon);border:2px solid var(--ink);animation:pulse2 1s ease-in-out infinite}
/* play header: keep everything on one line even with a 4-5 digit hapi count */
.top .hapi small{display:none}
.top .hapi{padding-right:12px}
.combo,.toggles button{white-space:nowrap}
.toggles button{padding:5px 9px}
.homeBtn{flex:none;width:36px;height:36px;border:2.5px solid var(--ink);border-radius:12px;background:#fff;font-size:20px;line-height:1;display:grid;place-items:center;box-shadow:0 3px 0 var(--ink)}
.combo em{display:block;font-style:normal;font-size:11px;color:var(--pink)}
@keyframes pulse2{50%{transform:scale(1.3)}}

/* gacha screen */
.gacha{
  position:fixed;inset:0;z-index:40;overflow-y:auto;
  background:var(--paper);background-image:radial-gradient(var(--dot) 1.6px,transparent 1.8px);background-size:18px 18px;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
.gachaIn{max-width:440px;margin:0 auto;padding-inline:16px;padding-block:10px 24px;display:grid;gap:14px}
.gTop{display:flex;align-items:center;gap:10px}
.gTop h2{margin:0;font-family:var(--display);font-weight:400;font-size:22px;flex:1;text-align:center}
.back{border:2.5px solid var(--ink);border-radius:999px;background:#fff;font-weight:800;font-size:13px;padding:6px 12px}
.machineWrap{position:relative;display:grid;justify-items:center}
.machine{width:min(230px,62vw);height:auto;overflow:visible}
.machine .handle{transform-box:fill-box;transform-origin:center}
.machine.spin .handle{animation:turn .9s cubic-bezier(.5,0,.3,1)}
.machine.spin .balls{animation:jiggle .15s linear 6}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes jiggle{50%{transform:translate(2px,-3px)}}
.gPrice{font-weight:800;font-size:13px;color:var(--ink-soft);text-align:center;margin:0}
.spinBtn{
  justify-self:center;min-width:220px;border:3px solid var(--ink);border-radius:20px;box-shadow:0 5px 0 var(--ink);
  background:linear-gradient(#FFEE8A,var(--lemon));font-family:var(--display);font-size:24px;padding:10px 20px;
}
.spinBtn small{display:block;font-family:var(--body);font-weight:800;font-size:13px}
.spinBtn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.spinBtn:disabled{background:#EEE6F2;color:var(--ink-soft);box-shadow:0 5px 0 #B9ABCB;border-color:#B9ABCB}
.dropCap{position:absolute;left:50%;top:calc(100% - 44px);width:46px;height:46px;margin-left:-23px;z-index:2;pointer-events:none}
.book{background:#fff;border:3px solid var(--ink);border-radius:22px;padding:12px;display:grid;gap:10px}
.bookHead{display:flex;justify-content:space-between;align-items:baseline}
.bookHead h3{margin:0;font-family:var(--display);font-weight:400;font-size:17px}
.bookHead span{font-weight:800;font-size:13px;color:var(--ink-soft)}
.slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} /* minmax: a missing image cannot widen a column */
.slot{position:relative;aspect-ratio:1;border-radius:14px;background:#F7F0FA;display:grid;place-items:center;border:2px dashed #D9C9E6}
.slot img{width:92%;height:92%;object-fit:contain;font-size:0;color:transparent;overflow:hidden} /* no alt text spilling out if an image fails */
.slot.no img{filter:brightness(0);opacity:.12}
.slot.has{border-style:solid;border-color:var(--r)}
.slot .n{position:absolute;right:3px;bottom:2px;font-size:11px;font-weight:800;background:var(--ink);color:#fff;border-radius:999px;padding:0 5px}
.slot .rk{position:absolute;left:3px;top:2px;font-size:9px;font-weight:800;color:#fff;background:var(--r);border-radius:6px;padding:0 4px}
.slot.stuck{animation:stuck .5s cubic-bezier(.3,1.8,.5,1)}
.slot.stuck::after{content:"";position:absolute;inset:0;border-radius:12px;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.9) 50%,transparent 70%);background-size:250% 100%;animation:shine .8s ease-out forwards;pointer-events:none}
@keyframes stuck{0%{transform:scale(1.25)}100%{transform:none}}
@keyframes shine{from{background-position:120% 0}to{background-position:-60% 0}}
.flySticker{position:fixed;z-index:70;object-fit:contain;pointer-events:none;filter:drop-shadow(0 6px 0 rgba(0,0,0,.25))}
.rates{margin:0;font-size:11px;color:var(--ink-soft);text-align:center}
.parent{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:800;color:var(--ink-soft)}
.parent button{border:2.5px solid var(--ink);border-radius:999px;background:#fff;font-size:12px;font-weight:800;padding:5px 10px;color:var(--ink)}
.parent button[aria-pressed="true"]{background:var(--lemon)}

/* UR / LR: 確定演出 before the capsule drops (slow glows only, no fast flashing) */
.omen{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s}
.gacha.omenUR .omen{opacity:1;background:radial-gradient(circle at 50% 30%,rgba(255,92,158,.35),rgba(143,211,255,.25) 40%,transparent 70%);animation:omenPulse 1s ease-in-out infinite alternate}
.gacha.omenLR .omen{opacity:1;background:
  repeating-conic-gradient(from 0deg at 50% 28%,rgba(255,197,61,.55) 0 8deg,transparent 8deg 22deg),
  radial-gradient(circle at 50% 28%,rgba(255,230,128,.5),rgba(20,10,40,.88) 60%);animation:omenSpin 6s linear infinite}
@keyframes omenPulse{to{filter:hue-rotate(60deg) brightness(1.15)}}
@keyframes omenSpin{to{background-position:0 0,0 0;filter:hue-rotate(30deg)}}
.gachaIn>*{position:relative;z-index:2;transition:opacity .5s}
.gachaIn>.omen{position:fixed;z-index:1}
.gacha.omenLR .gachaIn>:not(.machineWrap):not(.omen){opacity:.15}
.gacha.omenUR .gachaIn>:not(.machineWrap):not(.omen){opacity:.5}
.machine.rumble{animation:rumble .12s linear infinite}
.gacha.omenUR .machine{filter:drop-shadow(0 0 14px #FF5C9E) drop-shadow(0 0 24px #8FD3FF)}
.gacha.omenLR .machine{filter:drop-shadow(0 0 18px #FFC53D) drop-shadow(0 0 36px #FFE680)}
@keyframes rumble{25%{transform:translate(-3px,1px) rotate(-1deg)}75%{transform:translate(3px,-1px) rotate(1deg)}}
.lrRate{background:linear-gradient(90deg,#C8901A,#FF5C9E,#8A63F2);-webkit-background-clip:text;background-clip:text;color:transparent}

/* LR reveal */
.cap.lr{filter:drop-shadow(0 0 16px #FFC53D);animation:capShake .5s ease-in-out infinite,capGlow 1.2s ease-in-out infinite alternate}
@keyframes capGlow{to{filter:drop-shadow(0 0 30px #FFE680) drop-shadow(0 0 8px #fff)}}
/* rays are absolutely positioned, so the capsule and the prize need their own layer above them */
.revealCard>.cap,.revealCard>.tapMsg,.revealCard>.prize{position:relative;z-index:1}
.rays.rainbow{background:repeating-conic-gradient(#FF5C9E 0 6deg,transparent 6deg 15deg,#FFE15A 15deg 21deg,transparent 21deg 30deg,#8FD3FF 30deg 36deg,transparent 36deg 45deg);animation-direction:reverse;animation-duration:12s;opacity:.45}
.revealCard.legend .rank{font-size:32px;color:#FFE680;-webkit-text-stroke:7px #7A4A00}
.revealCard.legend .prize img{width:260px;height:260px}
.holo{position:relative;display:inline-block}
.holo::after{
  content:"";position:absolute;inset:6%;border-radius:40%;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.75) 35%,rgba(255,92,158,.4) 45%,rgba(143,211,255,.45) 55%,transparent 70%);
  background-size:250% 250%;animation:holo 2.4s ease-in-out infinite;
}
@keyframes holo{0%{background-position:100% 100%}100%{background-position:0 0}}
.rconf{position:fixed;top:-30px;z-index:61;font-size:18px;pointer-events:none;animation:rfall 2.6s ease-in forwards}
@keyframes rfall{to{transform:translateY(120vh) rotate(540deg);opacity:.3}}
body.calm .gacha .omen,body.calm .holo::after,body.calm .cap.lr{animation:none}

/* the legend slot in the book */
.slot.legend{border:3px solid #FFC53D;background:linear-gradient(135deg,#FFF6C8,#FFE0EE,#E6F7FF)}
.slot.legend.no{border-style:dashed}
.slot.legend.no::before{content:"？";position:absolute;font-family:var(--display);font-size:28px;color:#C8901A}
.slot.legend.has{box-shadow:0 0 0 3px #fff,0 0 14px 3px #FFC53D}
.slot.legend .rk{background:linear-gradient(90deg,#C8901A,#FF5C9E)}

/* 5-problem round: progress dots and result */
.dots{display:flex;gap:4px;align-items:center}
.dots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);background:#fff;box-sizing:border-box}
.dots i.p{background:var(--pink)}
.dots i.m{background:var(--lemon)}
.dots i.now{animation:pulse2 1s ease-in-out infinite;background:var(--sky)}
.result{position:fixed;inset:0;z-index:55;display:grid;place-items:center;background:rgba(40,24,70,.6);padding-inline:16px;overflow:auto}
.resultCard{
  position:relative;width:min(360px,100%);background:#fff;border:3px solid var(--ink);border-radius:26px;box-shadow:0 6px 0 var(--ink);
  padding:18px 16px 16px;display:grid;justify-items:center;gap:8px;text-align:center;animation:prize .5s cubic-bezier(.3,1.6,.5,1);
}
.resultCard h3{margin:0;font-family:var(--display);font-weight:400;font-size:18px;color:var(--ink-soft)}
.resultCard .score{font-family:var(--display);font-size:56px;line-height:1;color:var(--pink);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.resultCard .score small{font-size:.4em;-webkit-text-stroke:0;color:var(--ink)}
.resultCard .rchar{height:120px;width:auto}
.resultCard .rdots{display:flex;gap:6px}
.resultCard .rdots i{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--ink);font-style:normal;font-size:12px;display:grid;place-items:center;color:#fff}
.resultCard .rdots i.p{background:var(--pink)}
.resultCard .rdots i.m{background:var(--lemon);color:var(--ink)}
.resultCard .line{margin:0;font-weight:800;font-size:15px}
.resultCard .bonus{font-family:var(--display);font-size:18px;color:#fff;background:linear-gradient(90deg,#FF5C9E,#FFB800,#5FDDB0,#8FD3FF,#8A63F2);border:2.5px solid var(--ink);border-radius:14px;padding:4px 14px}
.resultCard .btns{display:grid;gap:8px;width:100%;margin-top:4px}
.resultCard .btns button{border:3px solid var(--ink);border-radius:18px;box-shadow:0 4px 0 var(--ink);font-family:var(--display);font-size:18px;padding:9px}
.resultCard .again{background:var(--lemon)}
.resultCard .toGacha{background:var(--grape);color:#fff}
.resultCard .toGacha:disabled{background:#EEE6F2;color:var(--ink-soft);border-color:#B9ABCB;box-shadow:0 4px 0 #B9ABCB}

/* reveal */
.reveal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(40,24,70,.72);padding-inline:16px}
.revealCard{position:relative;display:grid;justify-items:center;gap:6px;text-align:center;width:min(340px,100%)}
.rays{
  position:absolute;left:50%;top:44%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;
  background:repeating-conic-gradient(var(--rc) 0 10deg,transparent 10deg 20deg);opacity:.55;
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 65%);mask:radial-gradient(circle,#000 20%,transparent 65%);
  animation:rays 8s linear infinite;pointer-events:none;
}
@keyframes rays{to{transform:rotate(360deg)}}
.cap{position:relative;width:120px;height:120px;cursor:pointer}
.cap .top,.cap .bot{position:absolute;left:0;width:100%;height:50%;border:4px solid var(--ink);box-sizing:border-box}
.cap .top{top:0;border-radius:60px 60px 0 0;background:var(--cc);border-bottom-width:2px}
.cap .bot{bottom:0;border-radius:0 0 60px 60px;background:#fff;border-top-width:2px}
.cap.shake{animation:capShake .5s ease-in-out infinite}
@keyframes capShake{25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
.cap.open .top{animation:capTop .5s ease-in forwards}
.cap.open .bot{animation:capBot .5s ease-in forwards}
@keyframes capTop{to{transform:translate(-40px,-120px) rotate(-40deg);opacity:0}}
@keyframes capBot{to{transform:translate(40px,120px) rotate(30deg);opacity:0}}
.tapMsg{color:#fff;font-weight:800;font-size:15px}
.prize{display:grid;justify-items:center;gap:4px;animation:prize .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes prize{from{transform:scale(.2);opacity:0}}
.prize img{width:200px;height:200px;object-fit:contain;filter:drop-shadow(0 6px 0 rgba(0,0,0,.25))}
.rank{font-family:var(--display);font-size:26px;color:#fff;-webkit-text-stroke:6px var(--rc);paint-order:stroke fill}
.pname{font-weight:800;font-size:18px;color:#fff}
.newTag{font-family:var(--display);font-size:14px;background:var(--pink);color:#fff;border:2.5px solid #fff;border-radius:10px;padding:1px 10px;transform:rotate(-6deg)}
/* 10れん */
.tenBtn{background:linear-gradient(#FF9CC7,var(--pink));color:#fff}
.tenBtn small{color:#fff}
.revealCard.ten{width:min(390px,100%);gap:10px}
.tenTitle{position:relative;z-index:1;margin:0;font-family:var(--display);font-weight:400;font-size:26px;color:#FFE680;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill}
.tenGrid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%}
.tcap{position:relative;aspect-ratio:1;border:none;background:none;padding:0;cursor:pointer;animation:tDrop .5s cubic-bezier(.3,1.5,.5,1) var(--d) both}
.tcap .top,.tcap .bot{position:absolute;left:6%;width:88%;height:44%;border:3px solid var(--ink);box-sizing:border-box}
.tcap .top{top:6%;border-radius:999px 999px 0 0;border-bottom-width:1.5px}
.tcap .bot{bottom:6%;border-radius:0 0 999px 999px;background:#fff;border-top-width:1.5px}
.tcap.hot:not(.opened){animation:tDrop .5s cubic-bezier(.3,1.5,.5,1) var(--d) both,capShake .6s ease-in-out 1s infinite}
.tcap.opened{background:#fff;border:3px solid var(--rc);border-radius:14px;box-shadow:0 0 12px var(--rc);animation:tOpen .4s cubic-bezier(.3,1.6,.5,1)}
.tcap.opened img{width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box}
.tcap.r-LR.opened{box-shadow:0 0 18px 5px #FFC53D}
.trk{position:absolute;left:2px;top:2px;font-size:9px;font-weight:800;color:#fff;background:var(--rc);border-radius:6px;padding:0 3px}
.tnew{position:absolute;right:-5px;top:-7px;font-family:var(--display);font-size:9px;color:#fff;background:var(--pink);border:2px solid #fff;border-radius:8px;padding:0 3px;transform:rotate(8deg)}
@keyframes tDrop{from{transform:translateY(-70px) scale(.5);opacity:0}}
@keyframes tOpen{from{transform:scale(.5) rotate(-12deg)}}
body.calm .tcap,body.calm .tcap.hot:not(.opened){animation:none}
.okBtn:disabled{opacity:.5}
.okBtn{margin-top:6px;border:3px solid var(--ink);border-radius:18px;box-shadow:0 4px 0 var(--ink);background:var(--lemon);font-family:var(--display);font-size:20px;padding:8px 28px}

/* stage */
.stage{
  position:relative;flex:none;height:92px;overflow:hidden;
  border:3px solid var(--ink);border-radius:22px;
  background:linear-gradient(var(--sky) 0%,var(--sky-soft) 72%,var(--grass) 72%);
}
.stage::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background-image:radial-gradient(#fff 2px,transparent 2.5px),radial-gradient(#FFF6A8 1.5px,transparent 2px);
  background-size:46px 38px,30px 26px;background-position:0 0,14px 11px;
}
.stage.s1::before{opacity:.9;animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.35}}
.stage.fever{
  background:linear-gradient(90deg,#FFB8D5,#FFE88F,#AEF0D6,#BADFFF,#DCCBFF,#FFB8D5);
  background-size:300% 100%;animation:rainbow 6s linear infinite;
}
@keyframes rainbow{to{background-position:300% 0}}
/* small stage while playing: characters on the left, speech bubble on the right */
.bubble{
  position:absolute;top:50%;right:8px;left:196px;transform:translateY(-50%);z-index:3;
  background:#fff;border:2.5px solid var(--ink);border-radius:14px;
  padding:4px 10px;font-weight:800;font-size:13px;line-height:1.35;text-wrap:balance;
}
.bubble::after{
  content:"";position:absolute;left:-8px;top:50%;width:11px;height:11px;background:#fff;
  border-left:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);
  transform:translateY(-50%) rotate(45deg);
}
.bubble.pop{animation:bpop .3s cubic-bezier(.3,1.8,.5,1)}
@keyframes bpop{from{transform:translateY(-50%) scale(.6)}}
.charas{position:absolute;left:4px;bottom:1px;display:flex;align-items:flex-end;gap:0;z-index:2}
.chara{height:var(--s);transform-origin:50% 100%}
.chara .body{height:100%;transform-origin:50% 100%;animation:idle 1.8s ease-in-out infinite}
.chara img{display:none;height:100%;width:auto;pointer-events:none;-webkit-user-drag:none}
.chara:not(.happy):not(.oshii):not(.wow) .f-normal,.chara.happy .f-happy,.chara.oshii .f-oops,.chara.wow .f-wow{display:block}
.c0{--s:84px}.c1,.c2{--s:64px}
.c1 .body{animation-delay:-.6s}.c2 .body{animation-delay:-1.2s}
.stage.s2 .chara .body{animation-duration:.9s}
@keyframes idle{0%,100%{transform:scale(1,1)}50%{transform:scale(1.05,.94)}}
.chara.hop{animation:hop .6s cubic-bezier(.3,.7,.4,1)}
.chara.bighop{animation:bighop 1s cubic-bezier(.3,.7,.4,1)}
@keyframes hop{
  0%{transform:scale(1.2,.8)}25%{transform:translateY(-8px) scale(.88,1.14)}
  50%{transform:translateY(-10px) scale(1,1)}78%{transform:translateY(0) scale(1.22,.8)}100%{transform:none}
}
@keyframes bighop{
  0%{transform:scale(1.25,.75)}18%{transform:translateY(-10px) scale(.85,1.18)}
  38%{transform:translateY(0) scale(1.25,.78)}56%{transform:translateY(-6px) scale(.92,1.1)}
  76%{transform:translateY(0) scale(1.15,.86)}100%{transform:none}
}

/* せいかい: over the board, the three jump up big */
.burst{
  position:absolute;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;gap:2px;
  pointer-events:none;opacity:0;border-radius:22px;background:radial-gradient(circle,rgba(255,255,255,.85) 30%,rgba(255,255,255,0) 70%);
}
.burst.show{animation:burst 1.8s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes burst{0%{opacity:0;transform:scale(.3)}15%{opacity:1;transform:scale(1.08)}25%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.cheerChars{display:flex;align-items:flex-end;height:min(130px,22vh)}
.cheerChars img{height:80%;width:auto}
.cheerChars img:nth-child(2){height:100%}
.burst.show .cheerChars img{animation:cheer .9s cubic-bezier(.3,1.6,.5,1) both}
.burst.show .cheerChars img:nth-child(2){animation-delay:.08s}
.burst.show .cheerChars img:nth-child(3){animation-delay:.16s}
@keyframes cheer{0%{transform:translateY(60%) scale(.6)}50%{transform:translateY(-14%) scale(1.05,.95)}100%{transform:none}}
body.calm .burst.show .cheerChars img{animation:none}
.burst .big{
  font-family:var(--display);font-size:40px;color:var(--lemon);line-height:1.1;
  -webkit-text-stroke:7px var(--ink);paint-order:stroke fill;
}
.burst .plus{
  font-family:var(--display);font-size:20px;color:#fff;
  -webkit-text-stroke:5px var(--pink);paint-order:stroke fill;
}
.feverTag{
  position:absolute;top:4px;left:8px;z-index:3;display:none;
  font-family:var(--display);font-size:12px;color:#fff;background:var(--pink);
  border:2.5px solid var(--ink);border-radius:10px;padding:2px 8px;transform:rotate(6deg);
}
.stage.fever .feverTag{display:block}
.conf{position:absolute;top:-24px;z-index:1;font-size:16px;animation:fall 1.7s ease-in forwards}
@keyframes fall{to{transform:translateY(190px) rotate(420deg);opacity:.15}}

/* guide */
.guide{flex:none;display:grid;gap:4px}
.guideTop{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap}
.lvWrap{position:relative;flex:none}
.lvWrap::after{content:"▾";position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:12px}
.lvWrap select{
  appearance:none;-webkit-appearance:none;background:#fff;
  border:2.5px solid var(--ink);border-radius:999px;padding:4px 26px 4px 12px;
  font-size:12px;font-weight:800;
}
/* memo button on the left, the four steps on the right, one line */
.guideRow{position:relative;display:flex;align-items:center;gap:6px;min-height:30px}
.steps{display:flex;gap:3px;margin:0 0 0 auto;padding:0;list-style:none;flex:none}
.steps li{white-space:nowrap;
  font-size:11px;font-weight:800;color:var(--ink-soft);padding:3px 7px;border-radius:999px;
  border:2px solid transparent;
}
.steps li.on{background:var(--ink);color:#fff}
.say{margin:0;font-size:17px;font-weight:800;text-align:center;min-height:1.5em;text-wrap:balance}
.say b{font-family:var(--display);font-weight:400;color:var(--pink);font-size:1.12em;padding-inline:1px}
.hint{
  margin:0;font-size:13px;font-weight:800;text-align:center;
  background:var(--lemon-soft);border:2px dashed #E3C12A;border-radius:12px;padding:4px 10px;
}

/* board */
.board{
  flex:1;min-height:0;overflow:auto;background:var(--card);
  border:3px solid var(--ink);border-radius:22px;box-shadow:0 5px 0 var(--ink);
  display:flex;justify-content:center;padding:10px 8px 14px;
}
.grid{
  --cw:clamp(34px,10vw,42px);
  display:grid;grid-auto-rows:calc(var(--cw)*1.06);align-content:start;
  font-family:var(--display);font-size:calc(var(--cw)*.7);
}
.grid.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.cell{position:relative;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.cell.row0{color:var(--pink)}
.cell.top{border-top:3px solid var(--ink)}
.cell.br::before{
  content:"";position:absolute;left:0;top:-3px;bottom:5px;width:55%;
  border-right:3px solid var(--ink);border-top:3px solid var(--ink);
  border-radius:0 14px 22px 0/0 30% 70% 0;
}
.cell.ul{border-bottom:3px solid var(--ink)}
.cell.focus{background:var(--sky-soft);color:#1C7FB0}
.cell.target{
  background:var(--lemon-soft);border-radius:8px;
  box-shadow:inset 0 0 0 3px #F1C21B;animation:pulse 1.1s ease-in-out infinite;
}
@keyframes pulse{50%{box-shadow:inset 0 0 0 3px #F1C21B,0 0 0 4px rgba(255,225,90,.55)}}
.cell.pick{color:var(--pink);background:var(--pink-soft);border-radius:8px}
.cell.typed{color:var(--grape)}
/* a wrong number: red with an × badge until it is cleared */
.cell.wrong{color:#D93A3A;background:#FFE4E4;border-radius:8px;box-shadow:inset 0 0 0 3px #F08080;animation:none}
.cell.wrong::after{content:"×";position:absolute;top:-7px;right:-5px;width:17px;height:17px;border-radius:50%;background:#D93A3A;color:#fff;font-family:var(--body);font-weight:800;font-size:12px;line-height:17px;text-align:center}
.msay .ng{color:#D93A3A;font-family:var(--display);font-weight:400}
/* 指かくし: the digit stays readable but faded under a see-through pink cover */
.cell.hide{color:#C9B8D8}
.cell.hide::before{
  content:"";position:absolute;inset:4px 3px;border-radius:10px 10px 12px 12px;z-index:1;
  background:repeating-linear-gradient(-45deg,rgba(255,120,170,.28) 0 5px,rgba(255,190,215,.18) 5px 10px);
  border:2px dashed var(--pink);
}
.say .yubi{display:inline-block;font-size:.72em;color:var(--ink-soft);background:var(--pink-soft);border-radius:999px;padding:0 8px}
/* くりさげ marks: crossed-out digit with the new small digit, and the small borrowed 1 */
.cell.strike{background-image:linear-gradient(to top right,transparent 44%,var(--pink) 44%,var(--pink) 52%,transparent 52%)}
.cell i.sm,.cell i.b1{position:absolute;top:-3px;font-style:normal;font-size:.46em;color:var(--pink);line-height:1}
.cell i.sm{right:1px}
.cell i.b1{left:2px}
.orosu .arrow.side{animation:arrowSide .8s ease-in-out infinite}
@keyframes arrowSide{50%{transform:translateX(-6px)}}
.cell.used::after{content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--pink)}
.cell.pop{animation:cpop .35s cubic-bezier(.3,1.8,.5,1)}
@keyframes cpop{from{transform:scale(.3)}}
.cell.drop{animation:cdrop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes cdrop{from{transform:translateY(-240%);color:var(--pink)}}

/* side calculation: multiplication 筆算 memo */
.boardWrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}
.boardWrap .board{flex:1;min-height:0}
.memoBtn{
  flex:none;border:2.5px solid var(--ink);border-radius:999px;white-space:nowrap;
  background:var(--lemon);box-shadow:0 3px 0 var(--ink);font-weight:800;font-size:12px;padding:3px 9px;
  animation:memoPulse 1.2s ease-in-out infinite;
}
@keyframes memoPulse{50%{transform:scale(1.06)}}
body.calm .memoBtn{animation:none}
.memo{
  position:absolute;inset:0;z-index:4;background:#FFFDF2;border:3px solid var(--ink);border-radius:22px;
  box-shadow:0 5px 0 var(--ink);display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:10px 12px 14px;overflow:auto;
  background-image:linear-gradient(#E9E3F2 1px,transparent 1px);background-size:100% 26px;
}
/* while the memo is open it gets the space of the characters and the guide */
body.memoOpen .stage,body.memoOpen .guide{display:none}
.memoHead{align-self:stretch;flex:none;display:flex;justify-content:space-between;align-items:center}
.memoHead b{font-family:var(--display);font-weight:400;font-size:15px}
.memoClose{border:2.5px solid var(--ink);border-radius:999px;background:#fff;font-weight:800;font-size:12px;padding:4px 10px}
.mgrid{--mw:clamp(38px,11vw,48px);flex:none;margin-block:auto 0;display:grid;grid-template-columns:repeat(4,var(--mw));grid-template-rows:calc(var(--mw)*.62) repeat(3,calc(var(--mw)*1.02));font-family:var(--display);font-size:calc(var(--mw)*.7)}
.mgrid.shake{animation:shake .4s}
.mgrid .cell.carry{font-size:.55em;color:var(--pink);align-items:flex-end;justify-content:flex-end;padding-right:4px}
.mgrid .cell.carryUp{animation:carryUp .7s cubic-bezier(.4,0,.3,1.3)}
@keyframes carryUp{from{transform:translateY(calc(var(--mw)*3)) translateX(calc(var(--mw)*-.1)) scale(1.8)}}
/* center the calculation between the header and the bottom */
.memo::after{content:"";margin-top:auto}
.memo .mgrid{margin-block:auto 0}
.mgrid .cell.op{color:var(--ink-soft)}
.msay{margin:0;font-size:17px;font-weight:800;text-align:center;min-height:1.5em}
.msay b{font-family:var(--display);font-weight:400;color:var(--pink)}
.msay .mtyped{display:inline-block;min-width:2.2em;border-bottom:3px solid #F1C21B;background:var(--lemon-soft);border-radius:6px;font-family:var(--display);font-weight:400;color:var(--grape)}
.msay small{display:block;font-size:12px;color:var(--ink-soft)}
.paste{
  border:3px solid var(--ink);border-radius:18px;box-shadow:0 4px 0 var(--ink);
  background:linear-gradient(#FF8BBC,var(--pink));color:#fff;font-family:var(--display);font-size:20px;padding:8px 22px;
}
.paste:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}

/* controls */
.controls{flex:none;display:grid}
.controls > *{grid-area:1/1}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.key{
  height:46px;border:3px solid var(--ink);border-radius:16px;background:#fff;
  box-shadow:0 4px 0 var(--ink);font-family:var(--display);font-size:22px;
}
.key:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.key.hintKey{background:var(--lemon);font-family:var(--body);font-weight:800;font-size:15px}
.key.back{background:var(--sky);font-size:18px}
.orosu{
  border:3px solid var(--ink);border-radius:20px;box-shadow:0 5px 0 var(--ink);
  background:linear-gradient(#FF8BBC,var(--pink));color:#fff;
  font-family:var(--display);font-size:30px;display:grid;place-content:center;gap:2px;
}
.orosu:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.orosu .arrow{display:block;animation:arrow .8s ease-in-out infinite}
.orosu small{font-family:var(--body);font-weight:800;font-size:13px}
@keyframes arrow{50%{transform:translateY(6px)}}

.fly{position:fixed;z-index:80;pointer-events:none;font-size:22px;line-height:1;text-shadow:0 0 0 #fff,0 2px 0 var(--ink)}

/* short screens (e.g. inside an app's viewer): give the height to the board */
@media (max-height:740px){
  .stage{height:80px}.c0{--s:74px}.c1,.c2{--s:56px}.bubble{left:172px}
  .key{height:40px;font-size:19px}.pad{gap:6px}.say{font-size:15px}
  .burst .big{font-size:32px}
}
@media (max-height:640px){
  .stage{height:68px}.c0{--s:62px}.c1,.c2{--s:48px}.bubble{left:148px;font-size:12px}
  .key{height:38px;font-size:18px;border-radius:13px}.say{font-size:14px}
  .app{gap:6px}
}
/* keypad in 2 rows of 6 on shorter phones: 1-6 / 7 8 9 0 ヒント ⌫ */
@media (max-height:760px){
  .pad{grid-template-columns:repeat(6,1fr);gap:5px}
  .key{height:42px}
  .key.hintKey{order:1;font-size:11px;white-space:nowrap;padding:0}.key.back{order:2}
}
@media (max-height:640px){.key{height:38px}}
body.calm .stage::before,body.calm .stage.fever,body.calm .orosu .arrow,
body.calm .chara .body,body.calm .cell.target{animation:none}
body.calm .chara.hop,body.calm .chara.bighop{animation-duration:.35s}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}
/* ---------- home ---------- */
.home{min-height:100%;overflow-y:auto}
.homeIn{max-width:440px;margin:0 auto;padding-inline:16px;padding-block:10px 28px;display:grid;gap:12px}
.hTop{display:flex;align-items:center;gap:8px}
.streakPill{font-size:12px;font-weight:800;background:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:4px 10px;white-space:nowrap}
.streakPill b{font-family:var(--display);font-weight:400;font-size:16px;color:var(--pink)}
.iconBtn{width:38px;height:38px;border:2.5px solid var(--ink);border-radius:50%;background:#fff;font-family:var(--display);font-size:18px;display:grid;place-items:center;box-shadow:0 3px 0 var(--ink);flex:none}
.hTop .iconBtn:first-of-type{margin-left:auto}
.logo{margin:4px 0 0;text-align:center;font-family:var(--display);font-weight:400;font-size:46px;line-height:1.1;color:var(--grape);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;letter-spacing:.02em}
.logo .l1{display:block;font-size:.62em;color:var(--grape)}
.logo .l2{color:var(--pink)}
.logo .l2 i{font-style:normal;display:inline-block;color:#FF3D7F;animation:pulse2 1.2s ease-in-out infinite}
body.calm .logo .l2 i{animation:none}
.logo small{display:block;font-size:14px;-webkit-text-stroke:0;color:var(--ink-soft);letter-spacing:.1em;margin-top:4px}
.homeCharas{display:flex;justify-content:center;align-items:flex-end;gap:0;height:120px}
.homeCharas img{height:100px;width:auto;transform-origin:50% 100%;animation:idle 1.8s ease-in-out infinite}
.homeCharas img:nth-child(2){height:120px;animation-delay:-.6s}
.homeCharas img:nth-child(3){animation-delay:-1.2s}
.menu{display:grid;gap:10px}
.mRow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mBtn{position:relative;border:3px solid var(--ink);border-radius:20px;box-shadow:0 5px 0 var(--ink);padding:10px 14px;text-align:left;display:grid;gap:2px;overflow:hidden;font-family:var(--display);font-size:18px}
.mBtn b{font-weight:400;font-size:24px}
.mBtn small{font-family:var(--body);font-weight:800;font-size:12px;opacity:.85}
.mBtn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.mBtn.practice{background:linear-gradient(#FF9CC7,var(--pink));color:#fff}
.mBtn.test{background:linear-gradient(#B79CFF,var(--grape));color:#fff}
.mBtn.review{background:var(--lemon)}
.mBtn.review:disabled{background:#EEE6F2;color:var(--ink-soft);border-color:#B9ABCB;box-shadow:0 5px 0 #B9ABCB}
.mBtn.gacha{background:var(--mint)}
.mBtn.trophy{background:var(--sky)}
.card{background:#fff;border:3px solid var(--ink);border-radius:22px;padding:12px 14px;display:grid;gap:8px}
.cardHead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cardHead h2{margin:0;font-family:var(--display);font-weight:400;font-size:17px}
.cardHead span{font-size:12px;font-weight:800;color:var(--ink-soft)}
.questList{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.questList li{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;font-weight:800;font-size:14px}
.questList .bar{grid-column:1/-1;height:8px;border-radius:99px;background:#F1E9F6;overflow:hidden}
.questList .bar i{display:block;height:100%;background:var(--pink);border-radius:99px}
.questList .n{font-family:var(--display);font-weight:400;font-size:13px;color:var(--ink-soft)}
.questList li.done{color:var(--ink-soft)}
.questList li.done .bar i{background:var(--mint)}
.questList li.done .n{color:#1E9E6E}
.calGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:12px;font-weight:800}
.calGrid .wd{color:var(--ink-soft);font-size:11px}
.calGrid .d{aspect-ratio:1;border-radius:10px;display:grid;place-items:center;background:#F7F0FA;color:var(--ink-soft);position:relative}
.calGrid .d.today{outline:2.5px solid var(--grape)}
.calGrid .d.play{background:var(--pink);color:#fff}
.calGrid .d.play::after{content:"♥";position:absolute;right:2px;bottom:0;font-size:9px}
.calGrid .d.rest{background:var(--sky);color:var(--ink)}
.calGrid .d.rest::after{content:"やすみ";position:absolute;bottom:1px;font-size:7px}

/* test / review badges in the play screen */
.modePill{font-family:var(--display);font-size:13px;background:var(--grape);color:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:2px 10px;white-space:nowrap}
.modePill b{font-weight:400;font-variant-numeric:tabular-nums;margin-left:4px}
.modePill.review{background:var(--lemon);color:var(--ink)}
.key.hintKey:disabled{background:#EEE6F2;color:#B9ABCB;border-color:#B9ABCB;box-shadow:0 4px 0 #B9ABCB}
/* the banner and the tip float so the board never jumps */
/* sits at the left of the steps row (the memo button is never shown at the same time) */
.lastOne{position:absolute;left:0;top:50%;margin-top:-13px;z-index:3;font-family:var(--display);font-size:13px;color:#fff;background:var(--pink);border:2.5px solid var(--ink);border-radius:999px;padding:1px 10px;pointer-events:none;white-space:nowrap;animation:lastPop .6s cubic-bezier(.3,1.8,.5,1),pulse2 1s ease-in-out .6s infinite}
@keyframes lastPop{from{transform:scale(.3)}}
.memoTip{position:absolute;left:4px;top:calc(100% + 6px);z-index:5;font-size:12px;font-weight:800;background:#fff;border:2px solid var(--ink);border-radius:12px;padding:2px 8px;pointer-events:none;white-space:nowrap}
.memoTip::after{content:"";position:absolute;left:18px;top:-7px;width:10px;height:10px;background:#fff;border-left:2px solid var(--ink);border-top:2px solid var(--ink);transform:rotate(45deg)}

/* sheets and popups */
.sheet,.popup,.tutorial{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(40,24,70,.6);padding-inline:16px;overflow:auto}
.sheetCard,.popCard,.tutCard{width:min(380px,100%);background:#fff;border:3px solid var(--ink);border-radius:26px;box-shadow:0 6px 0 var(--ink);padding:18px 16px 16px;display:grid;gap:12px;animation:prize .45s cubic-bezier(.3,1.6,.5,1)}
.sheetCard h2,.popCard h2{margin:0;text-align:center;font-family:var(--display);font-weight:400;font-size:20px}
.sheetClose,.sheetBtn{border:2.5px solid var(--ink);border-radius:16px;background:#fff;font-weight:800;font-size:15px;padding:9px}
.sheetBtn{background:var(--sky-soft)}
.testList{display:grid;gap:10px}
.testList button{border:3px solid var(--ink);border-radius:18px;box-shadow:0 4px 0 var(--ink);background:var(--lemon-soft);text-align:left;padding:10px 12px;display:grid;gap:2px}
.testList b{font-family:var(--display);font-weight:400;font-size:18px}
.testList small{font-size:12px;font-weight:800;color:var(--ink-soft)}
.setList{display:grid;gap:4px}
.setRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 4px;border-bottom:2px dashed #EADCF0;font-weight:800;font-size:15px}
.setRow small{display:block;font-size:11px;color:var(--ink-soft)}
.setRow input{width:26px;height:26px;accent-color:var(--pink);flex:none}
.volList{display:grid;gap:2px;padding:6px 4px 8px;border-bottom:2px dashed #EADCF0}
.volRow{display:grid;grid-template-columns:5.5em 1fr 2.2em;align-items:center;gap:8px;font-weight:800;font-size:14px}
.volRow input{width:100%;height:28px;accent-color:var(--pink)}
.volRow b{font-family:var(--display);font-weight:400;font-size:14px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.popCard{justify-items:center;text-align:center}
.popCard .big{font-family:var(--display);font-size:30px;color:var(--pink);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.popCard img{height:110px;width:auto}
.popCard p{margin:0;font-weight:800;font-size:15px}
.popCard .go{border:3px solid var(--ink);border-radius:18px;box-shadow:0 4px 0 var(--ink);background:var(--pink);color:#fff;font-family:var(--display);font-size:20px;padding:9px 30px}
.loginDays{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%}
.loginDays div{border:2px dashed #CDBDDF;border-radius:12px;padding:4px 2px;font-size:11px;font-weight:800;color:var(--ink-soft);display:grid;gap:2px;justify-items:center}
.loginDays b{font-family:var(--display);font-weight:400;font-size:15px;color:var(--ink)}
.loginDays .got{border-style:solid;border-color:var(--pink);background:var(--pink-soft)}
.loginDays .now{border:3px solid var(--pink);background:var(--lemon-soft);animation:pulse2 1s ease-in-out infinite}
.loginDays .d7{background:linear-gradient(135deg,#FFF6C8,#FFD66B);border-style:solid;border-color:#E3A800}

/* toasts */
.toasts{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:90;display:grid;justify-items:center;gap:6px;pointer-events:none;padding-inline:16px}
.toast{display:flex;align-items:center;gap:8px;background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink);padding:6px 12px;font-weight:800;font-size:14px;max-width:360px;animation:toastIn .45s cubic-bezier(.3,1.6,.5,1),toastOut .4s ease-in 2.8s forwards}
.toast .ti{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);color:#fff;background:var(--grape);border:2px solid var(--ink);font-size:14px}
.toast.trophy .ti{background:#E3A800}
.toast.quest .ti{background:var(--mint);color:var(--ink)}
.toast small{display:block;font-size:11px;color:var(--pink)}
@keyframes toastIn{from{transform:translateY(-40px) scale(.8);opacity:0}}
@keyframes toastOut{to{transform:translateY(-30px);opacity:0}}

/* trophies */
.trophies{position:fixed;inset:0;z-index:40;overflow-y:auto;background:var(--paper);background-image:radial-gradient(var(--dot) 1.6px,transparent 1.8px);background-size:18px 18px;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.tCount{font-family:var(--display);font-weight:400;font-size:16px;color:var(--grape)}
.tTabs{display:flex;gap:6px;justify-content:center}
.tTabs button{border:2.5px solid var(--ink);border-radius:999px;background:#fff;font-weight:800;font-size:13px;padding:5px 12px}
.tTabs button.on{background:var(--ink);color:#fff}
.tList{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tList li{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:10px 12px;display:grid;gap:6px}
.tList .tHead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tList .tName{font-family:var(--display);font-weight:400;font-size:15px}
.medals{display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end}
.medals i{width:14px;height:14px;border-radius:50%;border:2px solid #CDBDDF;background:#F7F0FA}
.medals i.g{border-color:#B07A00;background:radial-gradient(circle at 35% 35%,#FFF3B0,#FFC53D 60%,#C8901A)}
.tList .tNext{font-size:12px;font-weight:800;color:var(--ink-soft)}
.tList .bar{height:8px;border-radius:99px;background:#F1E9F6;overflow:hidden}
.tList .bar i{display:block;height:100%;background:linear-gradient(90deg,#FFC53D,var(--pink));border-radius:99px}
.tList li.all{background:linear-gradient(135deg,#FFF6C8,#fff)}

/* tutorial */
.tutCard{justify-items:center;text-align:center;gap:10px}
.tutCard .tSkip{justify-self:end;border:2px solid var(--ink);border-radius:999px;background:#fff;font-size:12px;font-weight:800;padding:3px 10px}
.tutCard h2{margin:0;font-family:var(--display);font-weight:400;font-size:21px}
.tutCard p{margin:0;font-weight:800;font-size:15px;line-height:1.6}
.tutArt{min-height:150px;display:grid;place-items:center;width:100%}
.tutArt img{height:130px;width:auto}
.tutArt .row{display:flex;justify-content:center;align-items:flex-end}
.tutSteps{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.tutSteps span{font-weight:800;font-size:14px;padding:6px 10px;border-radius:999px;border:2.5px solid var(--ink);background:#fff;animation:tutStep 3.2s infinite}
.tutSteps span:nth-child(2){animation-delay:.8s}.tutSteps span:nth-child(3){animation-delay:1.6s}.tutSteps span:nth-child(4){animation-delay:2.4s}
@keyframes tutStep{0%,20%{background:var(--ink);color:#fff}25%,100%{background:#fff;color:var(--ink)}}
.tutMini{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.tutMini .chip{font-family:var(--display);font-size:14px;border:2.5px solid var(--ink);border-radius:14px;padding:6px 10px;box-shadow:0 3px 0 var(--ink)}
.tutAdd{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.tutAdd .step{font-weight:800;font-size:14px;background:#fff;border:2.5px solid var(--ink);border-radius:14px;padding:6px 10px;box-shadow:0 3px 0 var(--ink)}
.tutAdd .arr{font-family:var(--display);font-size:18px;color:var(--pink)}
.tutIcon{width:72px;height:72px;border-radius:18px;border:2.5px solid var(--ink);margin-top:10px}
.tutDots{display:flex;gap:6px}
.tutDots i{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);background:#fff}
.tutDots i.on{background:var(--pink)}
.tutNav{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;width:100%}
.tutNav button{border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink);font-family:var(--display);font-size:17px;padding:8px;background:#fff}
.tutNav button.next{background:var(--pink);color:#fff}
.tutNav button:disabled{opacity:.35}

/* ごほうびイラスト */
.reward{position:fixed;inset:0;z-index:75;display:grid;place-items:center;background:rgba(40,24,70,.82);padding:12px 16px;overflow:auto}
.rewardCard{position:relative;display:grid;justify-items:center;gap:8px;width:min(420px,100%);animation:prize .6s cubic-bezier(.3,1.6,.5,1)}
.rewardTitle{margin:0;text-align:center;font-family:var(--display);font-size:38px;line-height:1.1;color:#FFE680;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill}
.rewardTitle small{display:block;font-size:17px;color:#fff;-webkit-text-stroke:0}
.rewardCard .newTag{margin-top:-4px}
.rewardImg{width:100%;max-height:66vh;object-fit:contain;border:4px solid #fff;border-radius:22px;box-shadow:0 0 0 3px #FFC53D,0 0 34px 6px rgba(255,197,61,.7);background:#fff}
.rewardSlot{display:flex;align-items:center;gap:10px;width:100%;border:3px solid #FFC53D;border-radius:16px;background:linear-gradient(135deg,#FFF6C8,#FFE0EE);padding:8px 10px;text-align:left;box-shadow:0 0 12px rgba(255,197,61,.6)}
.rewardSlot img{flex:none;width:58px;height:86px;object-fit:cover;border-radius:10px;border:2px solid var(--ink)}
.rewardSlot.locked{box-shadow:none;border-style:dashed;cursor:default}
.rewardSlot.locked img{filter:brightness(0);opacity:.2}
.rewardSlot b{display:block;font-family:var(--display);font-weight:400;font-size:15px}
.rewardSlot small{font-size:11px;font-weight:800;color:var(--ink-soft)}