:root{
  --ink:#2a231f; --ink2:#62554a; --rice:#fbf7ef; --paper:#f4ede0; --paper2:#eadfcb;
  --hinoki:#efdcb8; --hinoki-d:#b89463;
  --ai:#1d2b47; --ai2:#33476e; --shu:#c4432f; --shu-d:#93301f; --gold:#d4a547; --matcha:#5f7f36;
  --p1:#2f7bd8; --p2:#e2662a;
  --f-body:"Zen Maru Gothic","Hiragino Maru Gothic ProN","BIZ UDPGothic","Noto Sans JP",sans-serif;
  --f-brush:"Yuji Syuku","Hiragino Mincho ProN","Noto Serif CJK JP","Noto Serif JP",serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#140f0b;color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
[hidden]{display:none!important}
button{font-family:inherit}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:default}
body.playing.mouse #gl{cursor:none}
#vig{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(120% 90% at 50% 55%,rgba(0,0,0,0) 55%,rgba(10,6,3,.42) 100%)}
#cam{position:fixed;width:2px;height:2px;opacity:0;pointer-events:none;left:-10px;top:-10px}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center}
.screen.dim{background:rgba(16,11,8,.55);backdrop-filter:blur(3px)}

#title{pointer-events:none;background:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.title-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);text-align:center;color:#fbf3e2;text-shadow:0 2px 10px rgba(0,0,0,.8);white-space:nowrap;padding:10px 22px 11px;border-radius:14px;background:rgba(18,11,6,.52);backdrop-filter:blur(3px)}
.title-hint b{display:block;font-size:clamp(18px,1.6vw,24px);font-weight:700;letter-spacing:.14em;animation:hintpulse 1.6s ease-in-out infinite}
.title-hint span{display:block;font-size:12.5px;margin-top:6px;color:#d8c7a6;font-weight:700}
@keyframes hintpulse{50%{opacity:.55}}
.title-wrap{margin-left:clamp(20px,6vw,96px);width:min(460px,calc(100vw - 40px))}
.logo{font-family:var(--f-brush);font-weight:400;color:var(--rice);margin:0;line-height:.95;text-shadow:0 2px 0 rgba(0,0,0,.4),0 10px 34px rgba(0,0,0,.5)}
.logo .l1{display:block;font-size:clamp(26px,3vw,40px);letter-spacing:.32em;margin-left:.1em;color:#f1d9a8}
.logo .l2{display:block;font-size:clamp(58px,7.2vw,104px);letter-spacing:.02em;margin-top:6px}
.sub{font-weight:700;letter-spacing:.46em;font-size:11px;color:#d9bf8c;margin:14px 0 22px 4px}
.menu{background:var(--paper);border-radius:10px;padding:10px 18px 18px;box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.6)}
.row{display:grid;grid-template-columns:84px 1fr;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed #d4c4a8}
.lab{font-weight:700;font-size:14px;color:var(--ink2)}
.seg{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ai);border-radius:7px;overflow:hidden;background:var(--rice)}
.seg button{font-weight:700;font-size:17px;background:transparent;color:var(--ai);border:0;padding:8px 4px 7px;cursor:pointer;line-height:1.15;min-height:50px}
.seg button+button{border-left:2px solid var(--ai)}
.seg button small{display:block;font-size:10.5px;font-weight:500;opacity:.78;margin-top:3px;letter-spacing:.02em}
.seg button.on{background:var(--ai);color:var(--rice)}
.seg button:disabled{opacity:.32;cursor:not-allowed}
.note{min-height:1.4em;margin:10px 0 0;font-size:12.5px;color:var(--shu-d);font-weight:700}
.primary{display:block;width:100%;font-weight:700;font-size:22px;letter-spacing:.24em;text-indent:.24em;color:#fff;background:var(--shu);border:0;border-radius:8px;padding:14px 18px;margin-top:10px;cursor:pointer;box-shadow:0 4px 0 var(--shu-d),0 10px 24px rgba(160,40,20,.35);transition:transform .08s,box-shadow .08s}
.primary:hover{filter:brightness(1.06)}
.primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--shu-d)}
.ghost{display:block;width:100%;font-weight:700;font-size:17px;letter-spacing:.1em;color:var(--ai);background:transparent;border:2px solid var(--ai);border-radius:8px;padding:12px 14px;margin-top:10px;cursor:pointer}
.ghost:hover{background:rgba(29,43,71,.06)}
.privacy{position:absolute;left:18px;bottom:14px;margin:0;color:#cdb98f;font-size:11.5px;line-height:1.6;text-shadow:0 1px 6px rgba(0,0,0,.8)}

.howto{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vh,32px);width:300px;color:var(--rice);background:rgba(20,14,10,.72);border-radius:10px;padding:14px 18px 12px;backdrop-filter:blur(4px)}
.howto h3{margin:0 0 8px;font-size:13px;letter-spacing:.2em;color:#e6c98f}
.howto ol{margin:0;padding:0;list-style:none;counter-reset:s}
.howto li{counter-increment:s;position:relative;padding:6px 0 6px 34px;font-size:12.5px;line-height:1.45;color:#e9dfcc;border-top:1px solid rgba(255,255,255,.08)}
.howto li:first-child{border-top:0}
.howto li::before{content:counter(s);position:absolute;left:0;top:7px;width:22px;height:22px;border:1.5px solid #e6c98f;border-radius:50%;text-align:center;line-height:19px;font-weight:700;font-size:12px;color:#e6c98f}
.howto li b{display:block;font-size:14.5px;color:#fff}
.best{position:absolute;right:18px;top:14px;color:#e6cf9f;font-size:12px;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.8)}

/* ---------- check ---------- */
#check{background:rgba(16,11,8,.82)}
.check-wrap{width:min(860px,94vw);text-align:center;color:var(--rice)}
.check-wrap h2{font-family:var(--f-brush);font-weight:400;font-size:clamp(26px,5vh,40px);margin:0 0 1.2vh;letter-spacing:.1em}
.check-view{position:relative;display:inline-block;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);background:#000;line-height:0}
#checkCv{height:min(50vh,600px);width:auto;max-width:94vw;display:block}
#checkStatus{position:absolute;left:0;right:0;top:12px;text-align:center;line-height:1.3;font-weight:700;font-size:clamp(15px,3.2vh,20px);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.check-steps{display:flex;justify-content:center;gap:8px;list-style:none;padding:0;margin:1.6vh 0 .6vh;flex-wrap:wrap}
.check-steps li{display:flex;align-items:center;gap:7px;font-weight:700;font-size:14px;padding:6px 11px;border-radius:8px;background:rgba(255,255,255,.08);color:#d9cdb8}
.check-steps li i{width:18px;height:18px;border-radius:50%;border:2px solid #9c8f7c;flex:none}
.check-steps li.ok{background:rgba(95,127,54,.35);color:#fff}
.check-steps li.ok i{background:#9cd35a;border-color:#9cd35a;box-shadow:inset 0 0 0 3px #3b5a1c}
.check-hint{font-size:13px;color:#cbbd9f;margin:.6vh 0 .4vh}
.btns{display:flex;gap:12px;justify-content:center;margin-top:8px}
.btns .primary,.btns .ghost{width:auto;min-width:180px}
.check-wrap .ghost{color:var(--rice);border-color:rgba(251,247,239,.6)}
.btns.col{flex-direction:column;gap:0}
.btns.col .primary,.btns.col .ghost{width:100%}

/* ---------- cards ---------- */
.card{background:var(--paper);border-radius:12px;padding:24px 30px 22px;box-shadow:0 30px 80px rgba(0,0,0,.55);width:min(600px,92vw);max-height:96vh;overflow:auto}
.card.small{width:min(360px,90vw);text-align:center}
.card h2{font-family:var(--f-brush);font-weight:400;font-size:34px;margin:0 0 12px;letter-spacing:.06em}
#err{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(16,11,8,.6)}
#errText{font-weight:700;line-height:1.7;margin:0 0 8px}

.result{text-align:center}
.r-kicker{margin:0 0 4px;font-size:13px;letter-spacing:.18em;color:var(--ink2);font-weight:700}
.result h2{font-family:var(--f-body);font-weight:700;font-size:clamp(20px,2.6vw,27px);line-height:1.45;margin:6px 0 14px;letter-spacing:.02em}
.result h2 em{font-style:normal;color:var(--shu);font-size:1.3em}
.r-rank{display:inline-flex;flex-direction:column;align-items:center;padding:12px 34px 10px;margin:0 0 14px;background:var(--ai);color:var(--rice);border-radius:8px;position:relative}
.r-rank span{font-size:12px;letter-spacing:.2em;color:#c9d3e6}
.r-rank b{font-family:var(--f-brush);font-weight:400;font-size:42px;line-height:1.12;letter-spacing:.08em}
.stars{display:flex;gap:6px;margin-top:2px}
.stars i{width:20px;height:20px;background:var(--gold);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.stars i.off{background:rgba(255,255,255,.18)}
.r-list{display:grid;grid-template-columns:1fr auto 1fr auto;column-gap:14px;margin:0 auto 6px;max-width:540px;text-align:left}
.r-list dt,.r-list dd{margin:0;padding:8px 2px;border-bottom:1px dashed #d2c1a4;font-size:14px}
.r-list dd{padding-right:10px}
.r-list dt{color:var(--ink2);font-weight:700}
.r-list dd{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.r-best{font-size:12.5px;color:var(--shu-d);font-weight:700;min-height:1.2em;margin:8px 0 0}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
.tag{position:absolute;top:14px;background:linear-gradient(#f3e3c4,#e3c895);border:1px solid #a98457;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.55);color:var(--ink)}
.hudbar{top:auto;right:14px;bottom:14px;display:flex;align-items:stretch;padding:6px 2px 7px}
.st{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:2px;align-items:end;padding:0 13px;border-left:1px solid rgba(110,80,40,.28)}
.st:first-child{border-left:0}
.st small{grid-column:1 / span 2;font-size:10.5px;font-weight:700;color:#6d5638;letter-spacing:.08em;line-height:1.3}
.st b{font-weight:700;font-variant-numeric:tabular-nums;line-height:1;font-size:24px}
.st small.u{grid-column:auto;font-size:11px;letter-spacing:0;line-height:1;padding-bottom:2px}
.clock b{font-size:26px;min-width:3.1em}
.clock.hurry b{color:var(--shu)}
.hud-btns{position:absolute;right:16px;top:16px;display:flex;gap:8px;pointer-events:auto}
.iconbtn{width:44px;height:44px;border-radius:8px;border:1px solid #a98457;background:linear-gradient(#f3e3c4,#e3c895);box-shadow:0 4px 14px rgba(0,0,0,.35);cursor:pointer;display:grid;place-items:center;padding:0}
.bars{display:flex;gap:5px}
.bars i{width:5px;height:16px;background:var(--ink);border-radius:1px}
.spk{position:relative;width:20px;height:16px}
.spk::before{content:"";position:absolute;left:0;top:4px;width:6px;height:8px;background:var(--ink)}
.spk::after{content:"";position:absolute;left:3px;top:0;border-style:solid;border-width:8px 9px 8px 0;border-color:transparent var(--ink) transparent transparent}
.iconbtn.off .spk{opacity:.35}
.iconbtn.off{position:relative}
.iconbtn.off::after{content:"";position:absolute;width:26px;height:3px;background:var(--shu);transform:rotate(-40deg);border-radius:2px}

#guide{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:12;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;transition:opacity .25s}
#guide.coop .gline{font-size:clamp(15px,1.3vw,19px);padding:8px 16px 9px}
.gline{display:flex;align-items:center;gap:10px;padding:10px 18px 11px;background:rgba(251,247,239,.95);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);font-weight:700;font-size:clamp(16px,1.5vw,21px);color:var(--ink);white-space:nowrap}
.gline em{font-style:normal;color:var(--shu)}
.grole{font-size:12.5px;font-weight:700;color:#fff;padding:4px 9px;border-radius:5px;letter-spacing:.06em}
.grole.p1{background:var(--p1)} .grole.p2{background:var(--p2)}
#toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,10px);z-index:13;padding:9px 18px;background:var(--ai);color:#fff;font-weight:700;font-size:16px;border-radius:8px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}
#toast.show{opacity:1;transform:translate(-50%,0)}

#banner{position:fixed;left:0;right:0;top:30%;text-align:center;z-index:14;pointer-events:none;font-family:var(--f-brush);font-size:clamp(48px,7vw,96px);line-height:1.15;color:#fff;opacity:0;text-shadow:0 4px 0 rgba(0,0,0,.35),0 0 40px rgba(0,0,0,.45)}
#banner.show{animation:banner 2.1s ease-out forwards}
#banner small{display:block;font-family:var(--f-body);font-weight:700;font-size:18px;letter-spacing:.2em;margin-top:6px}
@keyframes banner{0%{opacity:0;transform:scale(1.25)}12%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.98) translateY(-12px)}}

#pip{position:fixed;left:16px;bottom:16px;z-index:11;border-radius:8px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.5);border:2px solid rgba(251,247,239,.85);line-height:0;pointer-events:none;background:#000}
#pipCv{width:240px;height:auto;display:block}
.pip-lab{position:absolute;left:6px;bottom:5px;line-height:1;font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 3px #000}

/* ---------- fx layer ---------- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:9;overflow:hidden}
.pop{position:absolute;left:0;top:0;white-space:nowrap;font-weight:700;font-size:24px;color:#fff;-webkit-text-stroke:6px #2a231f;paint-order:stroke fill;letter-spacing:.02em;will-change:transform,opacity}
.pop.good{color:#ffd54d}
.pop.great{color:#ffd54d;font-size:30px}
.pop.bad{color:#b9c9da}
.pop.exp{color:#ff8a5c}
.pop.info{color:#fff;font-size:19px}
.pop.small{font-size:18px}
.bubble{position:absolute;left:0;top:0;width:78px;height:78px;margin:-39px 0 0 -39px;will-change:transform;transform-origin:50% 50%}
.bubble .bg{position:absolute;inset:6px;background:#e4e1db;border-radius:50%;box-shadow:0 6px 16px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.7)}
.bubble .bg::after{content:"";position:absolute;left:50%;bottom:-10px;margin-left:-8px;border-style:solid;border-width:12px 8px 0;border-color:#e4e1db transparent transparent}
.bubble img{position:absolute;left:11px;top:9px;width:56px;height:56px;object-fit:contain}
.bubble svg{position:absolute;inset:0;width:78px;height:78px;transform:rotate(-90deg)}
.bubble svg circle{fill:none;stroke-width:5;stroke-linecap:round}
.bubble .trk{stroke:rgba(0,0,0,.08)}
.bubble .val{stroke:#5f9e3a;transition:stroke .3s}
.bubble.warn .val{stroke:#e0a020}
.bubble.late .val{stroke:#d9432c}
.bubble .rib{position:absolute;left:50%;top:-12px;transform:translateX(-50%);background:var(--shu);color:#fff;font-size:11px;font-weight:700;padding:3px 7px;border-radius:4px;letter-spacing:.06em;opacity:0;transition:opacity .2s}
.bubble.incoming .rib{opacity:1}
.bubble.pop-in{animation:bubin .35s cubic-bezier(.3,1.6,.5,1)}
.bubble.match .bg{box-shadow:0 0 0 4px #ffd54d,0 6px 18px rgba(0,0,0,.4);animation:bgpulse .45s ease-in-out infinite alternate}
@keyframes bgpulse{to{transform:scale(1.1)}}
.bubble .rib{display:none}
@keyframes bubin{from{transform:scale(.2)}}
.pips{position:absolute;left:0;top:0;display:flex;gap:5px;padding:5px 7px;background:rgba(42,35,31,.72);border-radius:7px;will-change:transform}
.pips i{width:13px;height:13px;border-radius:50%;border:2px solid #fff;background:transparent}
.pips i.on{background:#ffd54d;border-color:#ffd54d}
.pips i.over{background:#e2533b;border-color:#e2533b}
.pips.done{background:rgba(95,127,54,.9)}

/* ---------- loading ---------- */
#loading{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(16,11,8,.7)}
.ld-box{text-align:center;color:var(--rice);font-weight:700}
.ld-dot{display:inline-block;width:46px;height:46px;border-radius:50%;border:4px solid rgba(255,255,255,.2);border-top-color:#f1d9a8;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}


@media (max-height:640px){
  .card{padding:16px 22px 16px}
  .result h2{margin:2px 0 8px}
  .r-rank{padding:8px 26px 6px;margin-bottom:8px}
  .r-rank b{font-size:34px}
  .logo .l2{font-size:56px}
  .sub{margin:8px 0 12px}
  .row{padding:6px 0}
}

/* ---------- table-seat order slips ---------- */
#tickets{position:fixed;right:16px;top:70px;z-index:10;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.ticket{width:136px;background:#fbf8f1;border-radius:4px;box-shadow:0 6px 16px rgba(0,0,0,.35);overflow:hidden;font-weight:700;color:var(--ink)}
.ticket .t-head{display:flex;align-items:baseline;gap:3px;padding:3px 9px 3px;background:var(--shu);color:#fff;font-size:12px;letter-spacing:.06em}
.ticket .t-head b{font-size:17px;line-height:1}
.t-items{display:flex;flex-wrap:wrap;gap:3px;padding:4px 5px 5px}
.ti{display:flex;align-items:center;gap:2px;background:#e4e1db;border-radius:6px;padding:1px 6px 1px 1px}
.ti img{width:28px;height:28px;display:block}
.ti i{font-style:normal;font-size:13px}
.ti.done{opacity:.5}
.ti.done i{color:#3b7a2a}
.t-bar{height:4px;background:rgba(0,0,0,.08)}
.t-bar i{display:block;height:100%;background:#5f9e3a;transform-origin:left;transition:transform .25s linear}
.ticket.late .t-bar i{background:#d9432c}
.ticket.in{animation:tin .38s cubic-bezier(.3,1.5,.5,1)}
@keyframes tin{from{transform:translateX(40px) rotate(5deg);opacity:0}}
.ticket.done{animation:tdone .6s ease-in forwards}
@keyframes tdone{0%{transform:scale(1)}30%{transform:scale(1.08)}100%{transform:translateX(70px);opacity:0}}
.ticket.miss{animation:tmiss .6s ease-in forwards}
@keyframes tmiss{to{transform:translateY(24px) rotate(-7deg);opacity:0}}

/* ---------- calibration ---------- */
.linkbtn{background:none;border:0;color:#e6c98f;font-weight:700;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin:2px 0 0;padding:4px 8px}
#checkStatus .pct{display:inline-block;margin-left:10px;padding:2px 10px;border-radius:999px;background:rgba(0,0,0,.45);font-size:16px}
#checkStatus .count{display:block;font-family:var(--f-brush);font-weight:400;font-size:64px;margin-top:8px}

/* ---------- practice ---------- */
#practice{position:fixed;left:14px;top:12px;z-index:12;width:224px;padding:10px 12px 10px;border-radius:12px;background:rgba(251,246,236,.95);color:var(--ink);box-shadow:0 10px 28px rgba(0,0,0,.35);transition:opacity .35s,transform .35s}
#practice.out{opacity:0;transform:translateY(-10px)}
.pr-kicker{margin:0 0 4px 2px;font-family:var(--f-brush);font-size:20px;letter-spacing:.04em;color:var(--shu-d);white-space:nowrap}
.pr-steps{list-style:none;margin:0;padding:0}
.pr-steps li{display:flex;align-items:center;gap:9px;padding:4px 7px;border-radius:7px;font-weight:700;font-size:14px;color:#8a7a66;transition:background .25s,color .25s}
.pr-steps li i{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #c9b998;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px;line-height:1;color:#b3a281;background:#fff}
.pr-steps li small{font-size:11.5px;font-weight:700;color:inherit;opacity:.85}
.pr-steps li.now{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--shu)}
.pr-steps li.now i{border-color:var(--shu);color:#fff;background:var(--shu);animation:prpulse 1.2s ease-in-out infinite}
.pr-steps li.ok{color:#4d6b28}
.pr-steps li.ok i{border-color:#7fb048;background:#7fb048;color:#fff;font-size:0}
.pr-steps li.ok i::after{content:"";width:9px;height:5px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:translate(0,-2px) rotate(-45deg)}
@keyframes prpulse{50%{transform:scale(1.15)}}
.pr-note{margin:6px 2px 6px;font-size:11.5px;line-height:1.5;color:var(--ink2);font-weight:700}
#prSkip{width:100%;border:1.5px solid #b9a888;background:transparent;border-radius:7px;padding:5px 8px;font-weight:700;font-size:12px;color:var(--ink2);cursor:pointer}
#prSkip:hover{background:rgba(0,0,0,.04)}
.check-wrap .btns .primary,.check-wrap .btns .ghost{font-size:17px;padding:9px 14px;margin-top:6px;min-width:150px}


/* ---------- タイトル前の読みこみ（ひのきの地・藍ののれん・AMIX GAMES KIDS・回転レーンを流れるお皿） */
#boot{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;text-align:center;overflow-y:auto;color:var(--ink);
  background:linear-gradient(180deg,#f3e6cc 0%,var(--hinoki) 60%,#e3caa0 100%);transition:opacity .45s ease,visibility .45s;touch-action:manipulation}
#boot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(92deg,rgba(184,148,99,.0) 0 22px,rgba(184,148,99,.35) 22px 23px,rgba(184,148,99,0) 23px 61px)}
#boot.done{opacity:0;visibility:hidden;pointer-events:none}
.bt-noren{position:fixed;left:0;right:0;top:0;display:flex;justify-content:center;gap:6px;pointer-events:none}
.bt-noren i{font-style:normal;font-family:var(--f-brush);color:#f4ede0;font-size:clamp(20px,3.2vw,30px);width:clamp(54px,9vw,92px);height:clamp(62px,10vh,96px);background:var(--ai);
  display:grid;place-items:center;padding-top:10px;border-radius:0 0 6px 6px;box-shadow:0 6px 14px rgba(29,43,71,.25);transform-origin:50% 0;animation:noren 3.2s ease-in-out infinite}
.bt-noren i:nth-child(2){animation-delay:-.4s}.bt-noren i:nth-child(3){animation-delay:-.8s}.bt-noren i:nth-child(4){animation-delay:-1.2s}
@keyframes noren{0%,100%{transform:skewX(0)}50%{transform:skewX(-2deg)}}
.bt-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:clamp(100px,16vh,140px) 16px max(24px,env(safe-area-inset-bottom));margin:auto;width:min(560px,100%)}
.brand{--bh:26px;display:block;line-height:0}
.kl-logo{display:block;height:var(--bh);width:calc(var(--bh)*6.918);overflow:visible}
.kl-k{transform-box:fill-box;transform-origin:50% 100%;animation:klHop 2.6s ease-in-out infinite}
.kl-k2{animation-delay:.12s}.kl-k3{animation-delay:.24s}.kl-k4{animation-delay:.36s}
@keyframes klHop{0%,70%,100%{transform:translateY(0) rotate(0)}78%{transform:translateY(-8px) rotate(-6deg)}86%{transform:translateY(0) rotate(4deg)}}
.bt-name{margin:2px 0 0;font-family:var(--f-brush);font-weight:400;font-size:clamp(34px,8vw,58px);line-height:1.15;color:var(--ink);letter-spacing:.06em}
.bt-name small{display:block;font-family:var(--f-body);font-weight:700;font-size:13px;letter-spacing:.3em;color:var(--shu);margin-bottom:6px}
.bt-lane{position:relative;width:min(420px,84vw);height:78px;margin-top:6px}
.bt-belt{position:absolute;left:0;right:0;bottom:6px;height:30px;border-radius:15px;background:repeating-linear-gradient(90deg,#d9d2c4 0 26px,#c9c0ae 26px 28px);border:3px solid var(--ink);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.5);background-size:28px 100%;animation:belt .9s linear infinite}
@keyframes belt{to{background-position:28px 0}}
.bt-plates{position:absolute;left:0;top:0;bottom:0;width:100%;--p:0;clip-path:inset(-20px calc((1 - var(--p)) * 100%) -20px 0)}
.bt-pl{position:absolute;bottom:14px;width:64px;height:40px;animation:bob 1.2s ease-in-out infinite}
.bt-pl.p1{left:4%}.bt-pl.p2{left:28%;animation-delay:-.3s}.bt-pl.p3{left:52%;animation-delay:-.6s}.bt-pl.p4{left:76%;animation-delay:-.9s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.bt-pct{font-family:var(--f-body);font-weight:700;font-size:24px;line-height:1;font-variant-numeric:tabular-nums}
.bt-pct b{font-weight:700}
.bt-msg{margin:0;font-weight:700;font-size:14px;color:var(--ink2);min-height:1.5em}
.bt-gate{display:none;flex-direction:column;align-items:center;gap:10px;margin-top:4px}
#boot.ready .bt-gate{display:flex;animation:gatein .4s cubic-bezier(.2,1.5,.4,1)}
@keyframes gatein{from{transform:scale(.85)}to{transform:scale(1)}}
#boot.ready .bt-pct,#boot.ready .bt-msg{display:none}
#btnGate{min-width:min(280px,80vw);font-size:20px}
.bt-snd{display:inline-flex;align-items:center;gap:6px;background:transparent;border:2px solid rgba(42,35,31,.35);border-radius:999px;padding:6px 14px;font-weight:700;font-size:14px;color:var(--ink);cursor:pointer}
.bt-snd svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bt-snd[aria-pressed="true"] .x,.bt-snd[aria-pressed="false"] .w{display:none}
.bt-err{margin:0;font-size:14px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:8px}
@media (max-height:520px){.bt-in{gap:8px;padding-top:84px}.bt-name{font-size:30px}}
@media (prefers-reduced-motion:reduce){.kl-k,.bt-noren i,.bt-belt,.bt-pl{animation:none!important}}
/* タイトルの右下：紹介・ライセンス・作者 */
.t-foot{position:absolute;right:18px;bottom:14px;margin:0;display:flex;gap:4px 8px;flex-wrap:wrap;justify-content:flex-end;font-size:11.5px;font-weight:700;color:#cdb98f;text-shadow:0 1px 6px rgba(0,0,0,.8);pointer-events:auto}
.t-foot a{color:inherit;text-underline-offset:3px}
.t-foot>*+*::before{content:"/";display:inline-block;opacity:.55;text-decoration:none;margin-right:8px}
.t-foot a:hover{color:#f1d9a8}
@media (max-width:720px){.t-foot{left:18px;right:18px;bottom:40px;justify-content:center}}

/* タッチ端末とマウスで 案内の言い方を変える ( クリック / タップ・Enter ) */
.title-hint .pc,.title-hint .tp{display:inline;font-size:inherit;margin:0;color:inherit;font-weight:inherit}
@media (hover:none){.title-hint .pc{display:none}}
@media (hover:hover){.title-hint .tp{display:none}}
/* 画質 ( きれい / かるい )。はじめは かるい */
.qual{position:absolute;left:18px;top:14px;display:flex;align-items:center;gap:6px;pointer-events:auto;padding:5px 6px 5px 12px;border-radius:12px;background:rgba(18,11,6,.52);backdrop-filter:blur(3px)}
.qual .q-lab{color:#e6cf9f;font-size:12px;font-weight:700;letter-spacing:.12em;margin-right:2px;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.qual button{font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:#e6cf9f;background:transparent;border:1.5px solid rgba(230,207,159,.45);border-radius:8px;padding:4px 11px 5px;cursor:pointer;touch-action:manipulation}
.qual button[aria-pressed="true"]{background:#f3e7cc;color:#1f2a4a;border-color:#f3e7cc}
.qual button:focus-visible{outline:2px solid #f1d9a8;outline-offset:2px}
@media (hover:hover){.qual button[aria-pressed="false"]:hover{border-color:#e6cf9f;color:#fbf3e2}}
/* せまい画面・縦長の画面：下の案内・カメラの注意書き・フッターを重ねず 縦に積む */
@media (max-width:720px),(max-aspect-ratio:1/1){
  .title-hint{left:50%!important;bottom:calc(98px + env(safe-area-inset-bottom));white-space:normal;width:max-content;max-width:calc(100% - 32px);padding:9px 16px 10px}
  .title-hint span{font-size:12px}
  .privacy{left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));text-align:center;font-size:11px}
  .t-foot{left:16px;right:16px;bottom:calc(36px + env(safe-area-inset-bottom));justify-content:center;font-size:11px}
  .qual{left:16px;top:calc(12px + env(safe-area-inset-top))}
  .best{right:16px;top:calc(14px + env(safe-area-inset-top))}
}
/* 指で タイトルの看板・のれんを 続けてたたいても ページが拡大しない ( GAME_TOUCH_RULES ) */
#gl,.qual,.t-foot,#boot button{touch-action:manipulation}
/* 遊んで いる あいだは、指で 画面が 動いたり 拡大されたり しないように ( GAME_TOUCH_RULES ) */
body.playing #gl{touch-action:none}
body.playing{overscroll-behavior:none}
.rotate-card{text-align:center}
.rotate-card p{margin:6px 0 0;font-size:15px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
.rot-ic{width:92px;height:92px;fill:none;stroke:var(--ai,#1d2b47);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;animation:rotTip 2.4s ease-in-out infinite;transform-origin:50% 50%}
@keyframes rotTip{0%,30%{transform:rotate(-90deg)}60%,100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.rot-ic{animation:none}}
/* 高さの 低い 横長 ( スマホの よこ向き )：下の 案内を 左に よせて、右下の 記録と 重ねない */
@media (max-height:500px) and (min-aspect-ratio:3/2){
  #guide{left:16px;bottom:12px;transform:none;align-items:flex-start;max-width:calc(100% - 360px)}
}
.rotate-card h2{word-break:keep-all;font-size:30px;letter-spacing:.02em}
/* スマホ ( たて向き専用の ならび・JS で body.tall ) ：記録は 画面の下に 横長で、案内は その上 */
body.tall .hudbar{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));justify-content:space-around;padding:5px 0 6px}
body.tall .st{padding:0 6px}
body.tall .st b{font-size:21px}
body.tall .clock b{font-size:22px;min-width:2.9em}
body.tall #guide{bottom:calc(74px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 24px)}
body.tall .gline{white-space:normal;text-align:center;font-size:15.5px;padding:8px 14px 9px;word-break:keep-all;overflow-wrap:anywhere}
body.tall #toast{bottom:calc(74px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 24px);white-space:normal;text-align:center;font-size:14.5px;line-height:1.55;word-break:keep-all;overflow-wrap:anywhere}
body.tall #tickets{right:10px;top:68px}
body.tall .ticket{width:122px}
body.tall #practice{left:10px;top:calc(10px + env(safe-area-inset-top));width:212px;padding:7px 9px 8px}
body.tall .pr-kicker{font-size:17px;margin-bottom:2px}
body.tall .pr-steps li{padding:2px 6px;font-size:13px}
body.tall .pr-steps li i{width:20px;height:20px;font-size:12px}
/* 済みの 丸は 数字を 消して チェックだけ（上の font-size:12px が 消す指定に 勝って、数字が 残り チェックが 下に ずれていた。2026-10-15） */
body.tall .pr-steps li.ok i{font-size:0}
body.tall .pr-note{display:none}
body.tall #prSkip{margin-top:5px}
/* おもてなし コンボ ( おとなだけ・2026-10-15 )：左上に 大きな 数字。5・10・15 で 色が 金 → 朱 */
.combo{position:absolute;left:16px;top:14px;display:grid;justify-items:start;gap:2px;padding:8px 14px 10px;border-radius:12px;background:rgba(24,16,10,.42);color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 18px rgba(0,0,0,.35);pointer-events:none}
.combo b{font-family:var(--f-brush);font-weight:400;font-size:clamp(40px,4.6vw,62px);line-height:1;letter-spacing:.02em}
.combo span{font-weight:700;font-size:14px;letter-spacing:.2em;margin-top:-2px}
.combo .combo-bar{display:block;width:100px;height:5px;border-radius:3px;background:rgba(255,255,255,.28);overflow:hidden;margin-top:4px}
.combo .combo-bar i{display:block;height:100%;background:currentColor;transform-origin:0 50%}
.combo[data-lv="1"]{color:#ffe08a}
.combo[data-lv="2"]{color:#ffc24a}
.combo[data-lv="3"]{color:#ff8a5c}
.combo.bump b{animation:comboBump .38s cubic-bezier(.3,1.6,.5,1)}
@keyframes comboBump{0%{transform:scale(1.45)}100%{transform:scale(1)}}
#comboGlow{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 6px rgba(255,214,110,.85),inset 0 0 90px 24px rgba(255,190,70,.45)}
#comboGlow.on{animation:comboGlow .9s ease-out}
@keyframes comboGlow{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
body.tall .combo{top:calc(70px + env(safe-area-inset-top))}
body.tall .combo b{font-size:40px}
/* 帯の文字：いちばん長い「いらっしゃいませ！」（9文字）が1行に収まる大きさに。1文字だけ次の行に落ちないように（2026-10-15） */
body.tall #banner{font-size:min(48px,calc((100vw - 28px) / 9.6));white-space:nowrap}
body.tall #banner small{font-size:15px;letter-spacing:.14em;margin-top:8px}
@media (prefers-reduced-motion:reduce){.combo.bump b,#comboGlow.on{animation:none}}
/* 結果：せまい画面は 記録を 1列に（2列だと 語の とちゅうで 折り返した）。ボタンは 横に 2つ 並べて 枠の 中に おさめ、下に 固定（2026-10-15） */
@media (max-width:560px){
  .card.result{padding:18px 22px 16px}
  .result h2{word-break:keep-all;overflow-wrap:anywhere;font-size:20px}
  .r-list{grid-template-columns:1fr auto;column-gap:10px;max-width:none}
  .r-list dt,.r-list dd{padding:6px 2px;font-size:13.5px}
  .r-list dd{padding-right:4px}
  .result .btns{position:sticky;bottom:-16px;margin:8px -22px -16px;padding:10px 16px calc(14px + env(safe-area-inset-bottom));background:var(--paper);gap:10px}
  .result .btns .primary,.result .btns .ghost{flex:1;min-width:0;width:auto;margin-top:0;white-space:nowrap;padding:12px 8px}
  .result .btns .primary{font-size:18px;letter-spacing:.12em;text-indent:.12em}
  .result .btns .ghost{font-size:16px;letter-spacing:.06em}
}
/* エンドレスの のこり回数（はいきの 位置に 出す）。へったら ゆれる */
.lives{display:flex;gap:5px;align-items:center;height:24px}
.lives i{width:15px;height:15px;border-radius:50%;background:var(--shu);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.lives i.off{background:transparent;box-shadow:inset 0 0 0 2px rgba(110,80,40,.35)}
#livesBox.hit{animation:liveHit .5s ease-out}
@keyframes liveHit{0%,100%{transform:none}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}}
body.tall .lives{height:21px;gap:4px}
body.tall .lives i{width:13px;height:13px}
/* テーブル席の でんぴょう：締め切りが 近いと 枠も 赤く、小さく ゆれる（気づけるように・2026-10-17） */
.ticket.late:not(.miss):not(.done){box-shadow:0 0 0 2px #d9432c,0 6px 18px rgba(0,0,0,.35);animation:tLate 1.1s ease-in-out infinite}
@keyframes tLate{0%,100%{transform:rotate(0)}10%{transform:rotate(-2deg)}20%{transform:rotate(2deg)}30%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.ticket.late:not(.miss):not(.done),#livesBox.hit{animation:none}}