/* ---------- arcade: cartridge grid ---------- */
.carts{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2.6vw,28px);margin-top:clamp(24px,4vw,48px)}
@media (max-width:760px){.carts{grid-template-columns:repeat(2,1fr)}}
.carts li{display:block}
.cart{position:relative;width:100%;aspect-ratio:1/1.02;display:grid;grid-template-rows:minmax(0,1fr) auto auto;justify-items:center;align-items:center;gap:2px;padding:clamp(10px,2vw,18px) 10px 12px;background:var(--c);border:var(--bd);border-radius:clamp(22px,3vw,32px);box-shadow:0 9px 0 var(--ink);overflow:hidden;transition:transform .2s var(--spring),box-shadow .2s;touch-action:manipulation}
.cart::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 1px 1px,rgba(26,16,51,.18) 2px,transparent 2.6px) 0 0/20px 20px;opacity:.6;pointer-events:none}
.carts li:nth-child(odd) .cart{transform:rotate(-1.2deg)}.carts li:nth-child(even) .cart{transform:rotate(1.2deg)}
.cart:hover,.cart:focus-visible{transform:translateY(-8px) rotate(0) scale(1.03);box-shadow:0 17px 0 var(--ink)}
.cart:active{transform:translateY(5px) scale(.98);box-shadow:0 2px 0 var(--ink)}
.cart .art{position:relative;display:grid;place-items:center;width:100%;height:100%;min-height:0}
.cart .art{position:relative;min-height:0;width:100%;height:100%}
.cart .art svg{position:absolute;inset:0;margin:auto;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 0 rgba(26,16,51,.18))}
.cart .name{position:relative;font-family:var(--f-display);font-size:clamp(1.5rem,3.6vw,2.3rem);line-height:1;color:var(--ink);text-shadow:0 2px 0 rgba(255,255,255,.55)}
.cart .cstars{position:relative;display:flex;gap:3px;height:22px}
.star-i{width:20px;height:20px;fill:rgba(255,255,255,.55);stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.star-i.on{fill:var(--sun);animation:starWin .6s var(--spring)}
.cart:hover .art svg,.cart:focus-visible .art svg{animation:cartWig .6s ease-in-out infinite alternate}
@keyframes cartWig{to{transform:rotate(3deg) scale(1.05)}}

/* ---------- arcade: cabinet overlay ---------- */
.cab{position:fixed;inset:0;z-index:150;display:grid;grid-template-rows:auto 1fr;overflow:hidden;--w1:#FFC27A;--w2:#FF8A4C;--fg:var(--ink);
  background:linear-gradient(var(--w1),var(--w2));color:var(--fg);clip-path:circle(0 at var(--ox,50%) var(--oy,50%));visibility:hidden;
  transition:clip-path .6s cubic-bezier(.22,.8,.2,1),visibility 0s .6s;overscroll-behavior:contain;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.cab.open{clip-path:circle(150vmax at var(--ox,50%) var(--oy,50%));visibility:visible;transition:clip-path .65s cubic-bezier(.22,.8,.2,1),visibility 0s}
html.cab-open,html.cab-open body{overflow:hidden}
.cab-world{position:absolute;inset:0;pointer-events:none}
.cab-top{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:max(10px,env(safe-area-inset-top)) 12px 6px}
.cab-x{width:46px;height:46px;flex:none;border-radius:50%;background:var(--paper);border:var(--bd);box-shadow:0 4px 0 var(--ink);display:grid;place-items:center;color:var(--ink);transition:transform .15s var(--spring)}
.cab-x:hover{transform:scale(1.1) rotate(8deg)}
.cab-x svg{width:20px;height:20px}
.cab-snd{width:46px;height:46px;box-shadow:0 4px 0 var(--ink);background:var(--paper)}
.cab-snd[aria-pressed="true"]{background:var(--mint)}
.t-sound.pulse{animation:sndPulse 1.1s ease-in-out infinite}
@keyframes sndPulse{50%{transform:scale(1.18) rotate(-6deg);background:var(--sun)}}
.cab-dots{display:flex;gap:8px;list-style:none;padding:0;flex:1;justify-content:center;flex-wrap:wrap}
.cab-dots li{width:clamp(14px,3.4vw,20px);height:clamp(14px,3.4vw,20px);border-radius:50%;border:3px solid var(--ink);background:rgba(255,255,255,.6);transition:transform .25s var(--spring),background .25s}
.cab-dots li.now{background:var(--sun);transform:scale(1.3)}
.cab-dots li.won{background:var(--mint)}
.cab-dots li.miss{background:#ff9aa2}
.cab-stage{position:relative;z-index:2;min-height:0;overflow:hidden}
.cab.shake .cab-stage{animation:cabShake .4s}
@keyframes cabShake{15%{transform:translate(-7px,3px)}30%{transform:translate(6px,-3px)}45%{transform:translate(-5px,2px)}60%{transform:translate(4px,-2px)}80%{transform:translate(-2px,1px)}}
.cab-omo{position:absolute;z-index:4;left:8px;bottom:max(8px,env(safe-area-inset-bottom));width:clamp(60px,12vw,92px);pointer-events:none}
.cab-omo .speech{left:78%;bottom:78%;right:auto;width:max-content;max-width:min(52vw,230px)}
.cab-omo .speech::after{right:auto;left:16px}
.cab-omo .omo{filter:drop-shadow(0 5px 0 rgba(26,16,51,.2))}
.omo[data-mood="oops"] .omo-soot,.omo[data-mood="sweat"] .omo-sweat{opacity:1}
.omo .omo-sweat{opacity:0;transition:opacity .2s}
.omo .omo-soot{transition:opacity .2s}
.omo[data-mood="oops"] .mouth-w{display:none}.omo[data-mood="oops"] .mouth-m{display:block}
.omo[data-mood="sweat"] .mouth-w{display:none}.omo[data-mood="sweat"] .mouth-m{display:block}
.omo[data-mood="oops"] .omo-soot{opacity:.62}

/* ---------- results ---------- */
.cab-res{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(26,16,51,.55);backdrop-filter:blur(3px);animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}}
.res-card{background:var(--paper);color:var(--ink);border:var(--bd);border-radius:34px;box-shadow:0 10px 0 var(--ink);padding:clamp(20px,4vw,38px);text-align:center;display:grid;gap:18px;justify-items:center;width:min(92vw,440px);animation:popIn .5s var(--spring)}
.res-card h2{font-family:var(--f-display);font-weight:400;font-size:clamp(2.2rem,9vw,3.6rem);line-height:1;color:var(--orange);text-shadow:0 3px 0 var(--ink)}
.bigstars{display:flex;gap:8px}
.bs svg{width:clamp(48px,14vw,72px);height:auto;fill:#e5dccb;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;display:block}
.bs.on svg{fill:var(--sun);animation:starWin .7s var(--spring) backwards;animation-delay:calc(var(--i)*.18s + .2s)}
.res-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.res-row .btn{min-height:54px}
.res-row .mini-art svg{width:30px;height:30px;display:block}
.res-join{font-weight:700;font-size:.95rem;opacity:.8}
@keyframes starWin{0%{transform:scale(0) rotate(-180deg)}60%{transform:scale(1.4) rotate(15deg)}}
@keyframes popIn{from{transform:scale(.5) rotate(-6deg);opacity:0}}
[hidden]{display:none!important}

@media (max-width:700px){
  .cab-omo .speech{left:2px;bottom:106%;max-width:min(56vw,230px)}
  .cab-omo .speech::after{left:24px}
}