/* Purundo: the whole screen is the table. HUD pieces sit on the lacquered cabinet around the board. */
:root{
 font-family:"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Noto Sans JP",YuGothic,Meiryo,sans-serif;
 color:#fff4d8;background:#13261e;
 --mint:#7ff2be;--cream:#fff3d6;--ink:#1d3a2f;--gold:#f1d38a;
 --glass:linear-gradient(170deg,#ffffff2e,#ffffff08 45%,#ffffff03);
 --bl:16px;--br:16px;--bt:120px;--bb:120px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none;background:#13261e}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;color:inherit}
button:focus-visible{outline:3px solid #fff1c4;outline-offset:3px}

.stage{position:fixed;inset:0;isolation:isolate;touch-action:none;overflow:hidden;
 background:
  radial-gradient(ellipse 70% 45% at 50% 0%,#4f7a63aa,transparent 70%),
  radial-gradient(ellipse 80% 40% at 50% 100%,#0a1711,transparent 70%),
  repeating-linear-gradient(90deg,#ffffff05 0 2px,transparent 2px 9px),
  linear-gradient(#25463a,#183327 55%,#10231b)}
#game{position:absolute;inset:0;display:block;width:100%;height:100%;outline:none}

/* ---- HUD: top marquee ---- */
.hud{position:absolute;left:var(--bl);right:var(--br);display:flex;pointer-events:none;z-index:4}
.hud>*{pointer-events:auto}
.hud-top{top:0;height:var(--bt);min-height:76px;padding:calc(8px + env(safe-area-inset-top)) 4px 10px;align-items:center;gap:10px}
.marquee{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 18px;border-radius:999px;
 background:var(--glass),linear-gradient(#0d1f17d9,#112a20e6);border:1px solid #d9f7e133;
 box-shadow:inset 0 1px 0 #ffffff30,inset 0 -6px 12px #00000040,0 10px 24px #02090666;max-width:360px;margin:auto}
.hud-label{font:700 9px/1 ui-rounded,system-ui,sans-serif;letter-spacing:.2em;color:#a9cdb7}
.marquee-score{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:10px}
.marquee-score .hud-label{grid-column:1/3}
#score{font:800 34px/1.05 ui-rounded,"Hiragino Maru Gothic ProN",system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.03em;color:#fff6d3;
 text-shadow:0 0 14px #ffe9a055,0 2px 0 #0a1a12}
#best{font-size:10px;color:#9cbfa9;letter-spacing:.06em}
.marquee-stock{display:flex;align-items:center;gap:6px}
#stock{font:800 30px/1 ui-rounded,system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#e9fff1;text-shadow:0 0 12px #7ff2be66}
.stock-jelly,.next-swatch{--c:var(--next,#52f5aa);display:block;flex:none;border-radius:48% 52% 44% 50%;
 background:radial-gradient(ellipse at 32% 26%,#fff 0 9%,color-mix(in srgb,var(--c) 40%,#fff) 17%,var(--c) 46%,color-mix(in srgb,var(--c) 55%,#043) 100%);
 box-shadow:inset -3px -4px 6px #0005,inset 2px 2px 3px #fff6,0 3px 8px #0007;animation:wobble 2.2s ease-in-out infinite}
.stock-jelly{width:26px;height:26px}
.hud-icon{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid #d9f7e133;font:700 19px ui-rounded,system-ui,sans-serif;color:#f4ecd0;
 background:var(--glass),#0e2219cc;box-shadow:inset 0 1px 0 #ffffff30,0 6px 14px #02090666;display:grid;place-items:center;transition:transform .15s}
.hud-icon:active{transform:scale(.9,.84)}
.hud-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sound-wave{display:none}.sound-on .sound-wave{display:block}.sound-on .sound-off{display:none}

/* ---- HUD: bottom rail ---- */
.hud-bottom{bottom:0;height:var(--bb);min-height:64px;padding:10px 8px calc(10px + env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:12px}
.bottom-left{min-width:0}
.next-shape{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#e7ffe9;padding:6px 14px 6px 8px;border-radius:999px;background:#0d1f17b3;border:1px solid #d9f7e126}
.next-swatch{width:20px;height:20px}
#hint{margin:8px 0 0 4px;font-size:12px;color:#c9dcc8;letter-spacing:.04em}
#hint:before{content:"";display:inline-block;width:10px;height:14px;margin-right:7px;vertical-align:-2px;border-radius:5px;border:2px solid #c9dcc8;animation:pull-hint 1.6s ease-in-out infinite}
.bottom-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.hud-pill{border:1px solid #d9f7e133;border-radius:999px;padding:9px 16px;font-size:12px;font-weight:700;background:var(--glass),#0e2219cc;box-shadow:inset 0 1px 0 #ffffff26}
.hud-pill:active{transform:scale(.95,.9)}
.free-play{font-size:9px;letter-spacing:.12em;color:#86a892}

/* Accessible launch button: hidden until keyboard focus. */
.launch-access{position:absolute;right:calc(var(--br) + 10px);bottom:calc(var(--bb) + 10px);z-index:6;padding:10px 18px;border-radius:999px;border:0;background:#7ff2be;color:#11352a;font-weight:800;opacity:0;pointer-events:none}
.launch-access:focus-visible{opacity:1;pointer-events:auto}

/* ---- Pull ring follows the finger ---- */
.pull-ring{--p:0;position:absolute;width:104px;height:104px;margin:-52px 0 0 -52px;z-index:7;pointer-events:none;opacity:0;transform:scale(.6);transition:opacity .15s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.pull-ring.show{opacity:1;transform:scale(calc(1 + var(--p)*.12),calc(1 - var(--p)*.1))}
.pull-ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ring-bg{fill:#0d1f1766;stroke:#ffffff30;stroke-width:9}
.ring-fill{fill:none;stroke:#7ff2be;stroke-width:9;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 6px #7ff2be)}
.pull-ring b{position:absolute;inset:0;display:grid;place-items:center;font:800 18px ui-rounded,system-ui,sans-serif;color:#fff;text-shadow:0 2px 4px #0009}

/* Gate lamps float on the board edge only while something is open. */
.gate-lamps{display:flex;gap:5px;margin:0 0 8px 4px;min-height:12px;align-items:center}
.gate-lamps span{font-size:0;width:10px;height:10px;border-radius:50%;background:#3d5246;box-shadow:inset 0 1px 2px #0007;transition:all .25s}
.gate-lamps span.open{font-size:10px;width:auto;height:auto;padding:3px 9px;border-radius:999px;color:#173b22;font-weight:800;background:radial-gradient(ellipse at 35% 25%,#fff,#c9ff9f 40%,#79d876);box-shadow:0 0 12px #b8ff9c}

/* ---- Messages ---- */
.toast{position:absolute;left:50%;bottom:calc(var(--bb) + 18px);transform:translate(-50%,10px);width:max-content;max-width:85%;text-align:center;border-radius:999px;background:#10261ce8;border:1px solid #d9f7e133;color:#fff3cc;font-size:13px;font-weight:700;padding:10px 18px;box-shadow:0 8px 22px #05120c66;pointer-events:none;opacity:0;transition:opacity .3s,transform .35s cubic-bezier(.3,1.6,.5,1);z-index:5}
.toast.visible{opacity:1;transform:translate(-50%,0)}
#floating{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.float-label{position:absolute;color:#fff6cf;text-shadow:0 3px 0 #2d6a4f,0 0 14px #1c3e2a;font:900 28px ui-rounded,system-ui,sans-serif;animation:float-up 1.3s ease-out forwards;transform:translate(-50%,-50%);text-align:center;white-space:nowrap}
.float-label small{display:block;font:700 11px sans-serif;margin-top:2px}
.float-label.jackpot{font-size:40px;color:#ffe07a}
.float-label.squish-word{font-size:18px;color:#dbffed;text-shadow:0 2px #2e8062,0 0 6px #154c3c;animation-duration:.7s}
@keyframes float-up{0%{opacity:0;translate:0 12px;scale:.4 .7}14%{opacity:1;scale:1.25 .85}26%{scale:.92 1.1}38%{scale:1}75%{opacity:1}100%{opacity:0;translate:0 -58px}}
.jackpot-banner{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.85);opacity:0;pointer-events:none;width:min(92%,420px);padding:16px 5px;text-align:center;color:#ffe6a3;text-shadow:0 2px 3px #2b2719;background:linear-gradient(90deg,transparent,#163a2ff0 12%,#163a2ffc 50%,#163a2ff0 88%,transparent);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1);z-index:6}
.jackpot-banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.jackpot-banner span{display:block;font-size:11px;letter-spacing:.28em}
.jackpot-banner b{display:block;font:900 28px ui-rounded,system-ui,sans-serif;margin-top:4px}
.score-pop{animation:score-pop .32s cubic-bezier(.3,1.8,.5,1)}
@keyframes score-pop{35%{transform:scale(1.18,.86);color:#c2ffd2}65%{transform:scale(.95,1.06)}}

.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#183327;color:#e8d8ae;font-size:13px;transition:opacity .4s;z-index:10}
.loading-ball{width:48px;height:48px;background:radial-gradient(circle at 30% 22%,#fff 0 8%,#98f0c4 30%,#3fbf8f);border-radius:45% 48% 43% 44%;animation:loading .55s infinite alternate cubic-bezier(.4,0,.6,1)}
@keyframes loading{from{transform:translateY(0) scale(1.2,.8)}to{transform:translateY(-22px) scale(.88,1.12)}}
@keyframes wobble{0%,100%{border-radius:48% 52% 44% 50%;transform:scale(1)}30%{border-radius:42% 56% 50% 46%;transform:scale(1.06,.94)}65%{border-radius:53% 45% 42% 52%;transform:scale(.96,1.04)}}
@keyframes pull-hint{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px) scale(1.1,.85)}}

/* ---- Dialogs ---- */
dialog{background:#fff3d8;border:0;color:#294238;border-radius:30px;box-shadow:0 24px 80px #000a,inset 0 2px 0 #fff;max-width:360px;width:calc(100% - 32px);padding:32px 26px 24px;max-height:90dvh;overflow:auto}
dialog[open]{animation:pop-in .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop-in{from{transform:scale(.7,.5);opacity:0}60%{transform:scale(1.04,.97)}to{transform:none;opacity:1}}
dialog::backdrop{background:#0b1c15c7;backdrop-filter:blur(6px)}
.modal-close{position:absolute;right:14px;top:10px;border:0;background:none;font:26px sans-serif;color:#45624c;padding:6px}
.eyebrow{font:700 9px ui-monospace,monospace;letter-spacing:.16em;color:#7d8b6b}
h2{font:800 24px/1.5 ui-rounded,"Hiragino Maru Gothic ProN",system-ui,sans-serif;letter-spacing:.03em;margin:12px 0 20px}
ol{padding-left:20px;margin:0}
li{padding-left:5px;margin-bottom:16px;font-size:12px;color:#7b8a6d}
li::marker{font:900 15px ui-rounded,system-ui,sans-serif;color:#3f7a5d}
li b{display:block;font-size:14px;color:#2f4c3b;margin-bottom:4px}
li span{line-height:1.75;font-size:12px;color:#5f6e58}
.modal-note{font-size:10px;line-height:1.9;color:#819174;margin:16px 0}
.modal-note a{color:#36644b}
.primary-button{width:100%;border:0;border-radius:999px;color:#fff3cd;font-size:15px;font-weight:800;padding:14px;letter-spacing:.08em;background:linear-gradient(180deg,#4b8c6a,#2c5843);box-shadow:inset 0 2px 0 #ffffff40,0 4px #1d402e,0 10px 20px #1d402e40;transition:transform .15s cubic-bezier(.3,1.6,.5,1)}
.primary-button:active{transform:translateY(3px) scale(1.03,.92)}
.text-button{padding:0;background:none;border:none;color:#788566;font-size:12px;text-decoration:underline;text-underline-offset:3px}
.result-label{font-size:12px;margin:0;color:#829072}
.result-score{display:block;font:900 64px/1.25 ui-rounded,system-ui,sans-serif;color:#315d48}
.result-score + p{font-size:12px;color:#708164;margin:8px 0 24px}
#end-dialog{text-align:center}
.end-close{display:block;margin:18px auto 0}
.error-screen{position:fixed;inset:0;z-index:100;background:#183327;text-align:center;padding:25vh 30px 0}
.error-screen[hidden]{display:none}
.error-screen p{font-size:13px;line-height:1.8}
.error-screen button{padding:10px 25px;border:0;border-radius:20px;background:#9ce8bd;color:#264438}

@media(max-height:700px){#score{font-size:28px}#stock{font-size:24px}.hud-icon{width:38px;height:38px}#hint{display:none}.marquee{padding:6px 14px}}
@media(prefers-reduced-motion:reduce){.stock-jelly,.next-swatch,.loading-ball,#hint:before{animation:none}.float-label{animation-duration:.6s}dialog[open]{animation:none}}
#best{white-space:nowrap}

/* ---- FEVER loop ---- */
.marquee{flex-wrap:wrap;row-gap:6px}
.gauge{--g:0;order:3;flex-basis:100%;position:relative;height:9px;border-radius:999px;background:#06120dcc;box-shadow:inset 0 1px 3px #000a;overflow:hidden}
.gauge i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--g));border-radius:inherit;background:linear-gradient(90deg,#52f5aa,#50dfff,#b08aff,#ff7eac,#ffd15f);box-shadow:0 0 10px #7ff2be;transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.gauge span{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:7px;letter-spacing:.14em;color:#ffffffb0}
.fever .gauge i{animation:gauge-flow .6s linear infinite;background-size:200% 100%;background-image:linear-gradient(90deg,#52f5aa,#50dfff,#b08aff,#ff7eac,#ffd15f,#52f5aa)}
@keyframes gauge-flow{to{background-position:-200% 0}}
.combo{position:absolute;right:calc(var(--br) + 14px);top:calc(var(--bt) + 54px);z-index:6;pointer-events:none;text-align:center;opacity:0;color:#fff;transform-origin:center}
.combo b{display:block;font:900 54px/1 ui-rounded,system-ui,sans-serif;background:linear-gradient(#fff6c8,#ffb84d);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #a2491f) drop-shadow(0 0 12px #ffcc6688)}
.combo small{display:block;font:900 13px ui-rounded,system-ui,sans-serif;letter-spacing:.16em;color:#ffe9a8;text-shadow:0 2px 0 #7a3a18}
.combo.show{animation:combo-pop 1.6s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes combo-pop{0%{opacity:0;transform:scale(.3,.6) rotate(-12deg)}12%{opacity:1;transform:scale(1.35,.8) rotate(6deg)}24%{transform:scale(.9,1.15) rotate(-3deg)}36%{transform:scale(1) rotate(0)}80%{opacity:1}100%{opacity:0;transform:translateY(-20px) scale(.9)}}
.fever-banner{position:absolute;left:50%;top:38%;z-index:7;pointer-events:none;text-align:center;opacity:0;transform:translate(-50%,-50%)}
.fever-banner b{display:block;font:900 clamp(56px,18vw,96px)/1 ui-rounded,system-ui,sans-serif;letter-spacing:.02em;background:linear-gradient(90deg,#52f5aa,#50dfff,#b08aff,#ff7eac,#ffd15f,#52f5aa);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 5px 0 #0c2a1f) drop-shadow(0 0 22px #fff8);animation:gauge-flow 1s linear infinite}
.fever-banner span{display:inline-block;margin-top:8px;padding:6px 16px;border-radius:999px;background:#0c2a1fe6;font-weight:900;font-size:14px;color:#fff3c4}
.fever-banner.show{animation:fever-in 2.2s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes fever-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.2,.5)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.25,.85)}26%{transform:translate(-50%,-50%) scale(.92,1.1)}38%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%) scale(1.05)}}
.fever-frame{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .5s;
 box-shadow:inset 0 0 40px 8px var(--fc,#7ff2be),inset 0 0 120px 10px #ffffff22;animation:fever-hue 1.2s linear infinite}
.fever .fever-frame{opacity:1}
@keyframes fever-hue{0%{--fc:#52f5aacc}25%{--fc:#50dfffcc}50%{--fc:#b08affcc}75%{--fc:#ff7eaccc}100%{--fc:#52f5aacc}}
@property --fc{syntax:'<color>';inherits:false;initial-value:#7ff2be}
.stage.fever{background:radial-gradient(ellipse 70% 45% at 50% 0%,#7a5fb8aa,transparent 70%),radial-gradient(ellipse 80% 40% at 50% 100%,#1b0e2a,transparent 70%),linear-gradient(#2a3f5a,#1c2a40 55%,#121a2a)}
.fever #score{color:#ffe9a0;text-shadow:0 0 18px #ffcf6a,0 2px 0 #0a1a12}
.shake #game{animation:shake .38s cubic-bezier(.3,1.6,.5,1)}
@keyframes shake{0%{transform:none}20%{transform:translate(calc(var(--shake,1)*-6px),calc(var(--shake,1)*4px)) scale(calc(1 + var(--shake,1)*.012),calc(1 - var(--shake,1)*.012))}45%{transform:translate(calc(var(--shake,1)*5px),calc(var(--shake,1)*-3px))}70%{transform:translate(calc(var(--shake,1)*-2px),1px)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.fever-frame,.fever .gauge i,.fever-banner b{animation:none}}
.marquee-score{display:block;flex:none}.marquee-score .hud-label{display:flex;gap:8px;align-items:center;margin-bottom:2px}
.marquee-score #best{font:600 9px/1 ui-rounded,system-ui,sans-serif;letter-spacing:.04em;color:#9cbfa9}
.marquee-stock{flex:none}