:root{
  --bg:#030303;--metal:#151515;--metal2:#242424;--plate:#090909;
  --orange:#ff6a00;--hot:#ff9d00;--gold:#ffc43d;--white:#fff4dc;--red:#ff3b16;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#000;color:var(--white)}
[hidden]{display:none!important}
body{font-family:Impact,"Arial Black",Arial,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100dvh;overflow:hidden;background:radial-gradient(ellipse 70% 55% at 50% 0,rgba(255,91,0,.22),transparent 58%),#000}
button,input{font:inherit}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* powered cabinet — V0.9 production shell (IMAGE 03) */
.gomba-fx-host{position:absolute;inset:0;z-index:36;pointer-events:none;overflow:hidden}
.gomba-fx-host canvas{pointer-events:none!important;display:block;width:100%;height:100%}
.cabinet{position:relative;width:min(100vw,430px);height:100dvh;min-height:640px;padding:max(6px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));overflow:hidden;background:#050505;border:0 solid transparent;box-shadow:0 0 0 1px #000,0 0 40px rgba(255,100,0,.22)}
/* REAL shell — full opacity; no transform/filter on #appShell (dragGhost uses machine-local coords) */
.cab-skin{position:absolute;inset:0;z-index:0;pointer-events:none;background:url("./assets/ui/cabinet-skin-v027.png") center top / 100% 100% no-repeat;opacity:1;filter:none}
/* Hide old CSS decor that fights the bitmap shell */
.energy-tube,.cab-haze,.cab-streaks,.bolt,.pipe{display:none!important}
.cabinet:before,.cabinet:after{content:none!important;display:none!important}
.cab-stamp{display:none!important}

/* V0.9.4 — lock cabinet to skin bitmap aspect so % openings match art */
.cabinet.skin-v09{
  width:min(100vw,430px,calc(100dvh * 941 / 1672));
  height:auto;
  aspect-ratio:941/1672;
  max-height:100dvh;
  min-height:0;
  padding:0;
  margin:0 auto;
  border:0;
  box-sizing:border-box;
}
.cabinet.skin-v09 .cab-skin{
  inset:0;
  background-size:100% 100%;
  background-position:center top;
  background-repeat:no-repeat;
}
.cabinet.skin-v09 .screen.active{
  height:100%;
  min-height:0;
}

.screen{display:none;position:relative;z-index:2}.screen.active{display:flex;flex-direction:column;height:calc(100dvh - 28px);min-height:610px}
.fx-flash{position:absolute;inset:-10px;z-index:80;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 47%,rgba(255,255,240,.94) 0,rgba(255,160,35,.48) 20%,transparent 58%)}
.fx-flash.on{animation:screenFlash .31s ease-out}@keyframes screenFlash{0%{opacity:1}100%{opacity:0}}
.cabinet.shaking{animation:shake .25s ease-out}.cabinet.power-hit{animation:frameHit .62s ease-out}.cabinet.power-max{animation:frameMax .95s ease-out}
@keyframes shake{0%,100%{transform:translate(0)}20%{transform:translate(-5px,2px)}42%{transform:translate(6px,-3px)}66%{transform:translate(-4px,2px)}82%{transform:translate(3px,-1px)}}
@keyframes frameHit{0%{box-shadow:inset 0 0 0 2px #fff,inset 0 0 85px #ff6a00,0 0 58px #ff7b00}100%{box-shadow:inset 0 0 0 2px #080808,inset 0 0 55px rgba(255,80,0,.16),0 0 55px rgba(255,100,0,.24)}}
@keyframes frameMax{0%,20%{filter:brightness(2.2);box-shadow:inset 0 0 100px #ff8a00,0 0 85px #ff6a00}100%{filter:none}}
.overdrive-dark:before{background:rgba(0,0,0,.5)}

/* landing */
#landing.active{justify-content:center}.landing-stack{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:0;height:100%;padding:10px 8px}
.title-logo,.logo-lockup{text-align:center;text-transform:uppercase;letter-spacing:.07em;filter:drop-shadow(0 0 11px rgba(255,108,0,.4))}
.title-logo span,.logo-lockup span{display:block;color:#ffd55b;font-size:32px;line-height:.9;-webkit-text-stroke:1px #6f2500;text-shadow:0 2px 0 #301000,0 0 18px #ff6a00,0 0 36px rgba(255,98,0,.85)}
.title-logo strong,.logo-lockup strong{display:block;color:#fff0c2;font-size:43px;line-height:.86;font-style:italic;-webkit-text-stroke:2px #5b1900;text-shadow:0 4px 0 #1b0700,0 0 14px #ff9c00,0 0 40px #ff5a00;transform:skewX(-5deg)}
.title-logo.compact span{font-size:24px}.title-logo.compact strong{font-size:30px}
.hero-reactor{position:relative;width:min(82vw,310px);height:min(39vh,270px);display:grid;place-items:center;pointer-events:none}
.hero-reactor:before{content:"";position:absolute;width:86%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 10%,#ff6300 13%,transparent 17% 35%,#ffc53d 39%,transparent 43% 65%,#ff5800 70%,transparent 75%);filter:blur(2px) drop-shadow(0 0 12px #ff7200);animation:spin 4.4s linear infinite;opacity:.84}
.hero-reactor:after{content:"";position:absolute;width:72%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,179,55,.7);box-shadow:inset 0 0 35px rgba(255,86,0,.65),0 0 28px #ff6500,0 0 70px rgba(255,90,0,.65)}
@keyframes spin{to{transform:rotate(360deg)}}
.reactor-ring{position:absolute;width:74%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff8c7 0 6%,#ffc12f 14%,rgba(255,96,0,.62) 34%,rgba(255,60,0,.16) 55%,transparent 71%);animation:pulse 1.55s ease-in-out infinite}
.reactor-ring.inner{width:54%;opacity:.65;animation-delay:.35s}@keyframes pulse{50%{transform:scale(1.1);filter:brightness(1.3)}}
.hero-img,.hud-mascot,.result-mascot{position:relative;z-index:4;object-fit:contain;background:transparent;filter:drop-shadow(0 0 12px #ff8a00) drop-shadow(0 0 28px rgba(255,75,0,.45)) drop-shadow(0 12px 14px #000)}
.hero-img{width:76%;max-height:96%}.hero-sparks i,.chamber-sparks i{position:absolute;z-index:6;width:6px;height:12px;border-radius:5px;background:linear-gradient(#fff7c8,#ff7a00);box-shadow:0 0 8px #ff8a00;animation:sparkFloat 1.15s linear infinite}
.hero-sparks i:nth-child(1){left:13%;top:18%}.hero-sparks i:nth-child(2){right:12%;top:22%;animation-delay:.2s}.hero-sparks i:nth-child(3){left:18%;bottom:20%;animation-delay:.42s}.hero-sparks i:nth-child(4){right:16%;bottom:18%;animation-delay:.6s}.hero-sparks i:nth-child(5){left:7%;top:48%;animation-delay:.3s}.hero-sparks i:nth-child(6){right:8%;top:46%;animation-delay:.74s}
@keyframes sparkFloat{0%{opacity:0;transform:translateY(8px) scale(.5)}40%{opacity:1}100%{opacity:0;transform:translateY(-22px) scale(1.3)}}
.tagline,.meta-line{text-align:center;margin:0;letter-spacing:.17em}.tagline{font-size:13px;color:#fff1d4;text-shadow:0 0 12px rgba(255,117,0,.45)}.meta-line{font-size:11px;color:#ff9b18}
.play-btn{position:relative;z-index:4;width:min(88%,330px);min-height:62px;margin:5px auto;border:1px solid #ffe08a;border-radius:7px;cursor:pointer;color:#130700;font-size:27px;letter-spacing:.13em;background:linear-gradient(180deg,#ffd056 0,#ff7b00 34%,#ff4300 100%);box-shadow:inset 0 2px rgba(255,255,255,.6),0 7px 0 #651d00,0 0 18px #ff7600,0 0 44px rgba(255,91,0,.82)}
.play-btn:active{transform:translateY(3px);box-shadow:inset 0 2px rgba(255,255,255,.5),0 4px 0 #651d00,0 0 28px #ff7600}
.ghost-btn{width:min(88%,330px);min-height:46px;margin:5px auto;border:1px solid #4b351f;border-radius:6px;color:#ddd;background:linear-gradient(#171717,#080808)}

/* game header / reactor */
#game.active{gap:6px}.arcade-header{height:50px;flex:0 0 50px;display:flex;align-items:center;justify-content:space-between;padding:5px 9px;background:linear-gradient(180deg,rgba(52,52,52,.72) 0,rgba(8,8,8,.82) 100%);border:2px solid #ff7a00;box-shadow:inset 0 1px #888,inset 0 -1px #000,0 0 18px rgba(255,112,0,.45)}
.logo-lockup{text-align:left}.logo-lockup span{font-size:16px}.logo-lockup strong{font-size:20px;-webkit-text-stroke:1px #5b1900}.header-controls{display:flex;gap:6px}.metal-btn{min-height:34px;padding:0 10px;border:1px solid #ff8a22;border-radius:5px;color:#ffc04a;background:linear-gradient(#303030,#0b0b0b);box-shadow:inset 0 1px #777,0 2px #000,0 0 12px rgba(255,115,0,.45);font-size:10px;letter-spacing:.06em;cursor:pointer}.metal-btn.close{width:34px;padding:0;font-size:22px}.metal-btn.abs{position:absolute;top:10px;right:12px;z-index:8}
.reactor-hud{height:108px;flex:0 0 108px;display:grid;grid-template-columns:102px 1fr;gap:8px;padding:7px;background:linear-gradient(180deg,rgba(24,24,24,.7),rgba(6,6,6,.78));border:2px solid #ff7a18;box-shadow:inset 0 0 0 1px #000,inset 0 0 22px rgba(255,100,0,.12),0 0 18px rgba(255,106,0,.4)}
.mascot-chamber{position:relative;height:92px;border-radius:50%;overflow:visible;display:grid;place-items:end center;background:radial-gradient(circle at 50% 52%,#fff3ae 0 5%,#ffb418 14%,#ff6a00 30%,#4b1400 52%,#090909 72%);border:3px solid #ff9a20;box-shadow:inset 0 0 22px #ff5e00,0 0 0 3px #1a0a00,0 0 16px #ff7600,0 0 34px rgba(255,80,0,.62)}
.mascot-chamber:before{content:"";position:absolute;inset:7px;border-radius:50%;border:2px solid rgba(255,220,130,.58);box-shadow:0 0 13px #ff8400;animation:reactorArc 2s linear infinite}
@keyframes reactorArc{50%{transform:scale(1.08);opacity:.7}}
.chamber-core{position:absolute;inset:19%;border-radius:50%;background:radial-gradient(circle,#fff9c9,rgba(255,140,0,.58) 30%,transparent 72%);animation:pulse 1.3s ease-in-out infinite}.chamber-arcs{position:absolute;inset:3%;border-radius:50%;background:conic-gradient(transparent 0 15%,rgba(255,221,140,.8) 17%,transparent 20% 51%,rgba(255,111,0,.9) 54%,transparent 58%);filter:drop-shadow(0 0 7px #ff7500);animation:spin 3.2s linear infinite}.hud-mascot{width:89%;max-height:101px;margin-bottom:-5px}.mascot-chamber.charged{filter:brightness(1.15);box-shadow:inset 0 0 26px #ff6a00,0 0 20px #ff9800,0 0 42px rgba(255,90,0,.72)}
.mascot-chamber.react-great{animation:bounce .3s ease-out}.mascot-chamber.react-amazing{animation:bounce .34s ease-out;filter:brightness(1.35)}.mascot-chamber.react-excellent{animation:bounce .38s ease-out;filter:brightness(1.7)}.mascot-chamber.react-unstoppable,.mascot-chamber.react-overdrive{animation:bounce .42s ease-out;box-shadow:0 0 32px #fff,0 0 55px #ff6500}.mascot-chamber.react-gameover{filter:grayscale(.4) brightness(.62);box-shadow:none}
@keyframes bounce{40%{transform:translateY(-5px) scale(1.12)}}
.chamber-sparks i:nth-child(1){left:8%;top:15%}.chamber-sparks i:nth-child(2){right:8%;top:20%;animation-delay:.25s}.chamber-sparks i:nth-child(3){left:16%;bottom:10%;animation-delay:.5s}
.dash{display:flex;flex-direction:column;justify-content:center;gap:5px}.core-row{display:flex;justify-content:space-between;font-size:13px;color:#ffc13d}.core-track{height:18px;border:1px solid #ff8a22;border-radius:4px;background:#050505;overflow:hidden;box-shadow:inset 0 0 8px #000,0 0 12px rgba(255,112,0,.45)}.core-fill{position:relative;width:0;height:100%;background:linear-gradient(90deg,#ff5600,#ff8a00 40%,#ffd057 78%,#fff4c2);box-shadow:0 0 14px #ff7500,0 0 30px rgba(255,80,0,.75);transition:width .18s ease}.core-fill:after{content:"";position:absolute;inset:0;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:shimmer 1.25s linear infinite}@keyframes shimmer{from{transform:translateX(-120%)}to{transform:translateX(330%)}}.core-fill.hot{background:linear-gradient(90deg,#fff,#ffc13a,#fff)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.stat-grid div{padding:5px 2px;text-align:center;border:1px solid #ff7a18;border-radius:3px;background:linear-gradient(#1d1d1d,#080808);box-shadow:inset 0 1px #555,inset 0 -2px #000,0 0 10px rgba(255,108,0,.28)}.stat-grid span{display:block;font-size:7px;color:#ffb12a;letter-spacing:.07em}.stat-grid strong{display:block;font-size:13px;color:#fff3d7;text-shadow:0 0 8px rgba(255,140,0,.45)}
.status-bar{height:28px;flex:0 0 28px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;border:1px solid #ff7a18;background:linear-gradient(#21170f,#090909);box-shadow:inset 0 0 10px rgba(255,112,0,.12),0 0 10px rgba(255,94,0,.28);font-size:9px;letter-spacing:.08em;color:#ffad24;position:relative}.status-bar:before{content:"";position:absolute;left:38%;right:38%;top:7px;bottom:7px;background:repeating-linear-gradient(45deg,#111 0 5px,#ff7a00 5px 9px);opacity:.55;pointer-events:none}.status-bar b{color:#fff0d2;font-weight:700;position:relative}

/* deep energy grid */
.board-machine{position:relative;flex:0 0 auto;padding:11px;border:7px solid #2a2a2a;background:linear-gradient(145deg,#3a3a3a 0,#101010 18%,#050505 72%,#1c0c04 100%);box-shadow:inset 0 0 0 2px #050505,inset 0 0 0 4px #ff6a00,inset 0 0 36px rgba(255,91,0,.22),0 0 0 1px #000,0 0 24px rgba(255,92,0,.55);overflow:visible}
.board-machine:before,.board-machine:after{content:"";position:absolute;z-index:3;width:19px;height:19px;border:2px solid #ff8500;filter:drop-shadow(0 0 6px #ff6a00)}.board-machine:before{left:4px;top:4px;border-right:0;border-bottom:0}.board-machine:after{right:4px;bottom:4px;border-left:0;border-top:0}
.board{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:7px;aspect-ratio:1/1;background:radial-gradient(circle at 50% 45%,rgba(255,111,0,.16),transparent 52%),linear-gradient(180deg,#050505,#010101);border:2px solid #ff6a00;box-shadow:inset 0 0 36px #000,inset 0 0 22px rgba(255,88,0,.14),0 0 18px rgba(255,96,0,.4)}
.cell{position:relative;aspect-ratio:1;border-radius:4px;border:1px solid #171717;background:linear-gradient(145deg,#1a1a1a 0,#101010 48%,#050505 100%);box-shadow:inset 2px 2px 4px #000,inset -1px -1px rgba(255,255,255,.04),0 0 0 1px #000;transition:filter .08s,box-shadow .08s,transform .08s}.cell:before{content:"";position:absolute;inset:4px;border-top:1px solid rgba(255,255,255,.02);border-left:1px solid rgba(255,255,255,.02)}
.cell.filled{border-color:#ffc043;background:linear-gradient(145deg,#ffe08a 0,#ffb41a 10%,#ff7800 38%,#ff4300 72%,#6d1200 100%);box-shadow:inset 0 2px rgba(255,255,255,.58),inset 0 -5px 9px rgba(105,22,0,.6),0 0 10px #ff9b00,0 0 22px rgba(255,91,0,.9);animation:blockPulse 1.55s ease-in-out infinite alternate}.cell.filled:before{inset:3px;border:1px solid rgba(255,228,143,.42);background:linear-gradient(135deg,rgba(255,255,255,.3),transparent 35%,rgba(255,64,0,.08));box-shadow:inset 0 0 8px rgba(255,238,180,.22)}
@keyframes blockPulse{to{filter:brightness(1.14);box-shadow:inset 0 2px rgba(255,255,255,.55),inset 0 -5px 9px rgba(105,22,0,.6),0 0 11px #ffad00,0 0 24px rgba(255,76,0,.8)}}
.cell.preview-ok{transform:scale(.94);border-color:#fff2a8!important;box-shadow:inset 0 0 14px rgba(255,225,110,.55),0 0 10px #ffd04b,0 0 24px #ff7600!important}.cell.preview-bad{transform:scale(.94);border-color:#ff3e18!important;box-shadow:inset 0 0 12px rgba(255,40,10,.35),0 0 15px #ff2d0b!important}.cell.clearing{z-index:10;animation:clearPop .48s cubic-bezier(.15,.8,.25,1)!important;box-shadow:0 0 16px #fff,0 0 38px #ffb400,0 0 78px #ff5100!important}
@keyframes clearPop{0%{transform:scale(1)}24%{transform:scale(1.2);filter:brightness(3)}44%{background:#fff8d0}72%{transform:scale(.68) rotate(4deg)}100%{transform:scale(.08);opacity:0}}
.first-hint{position:absolute;z-index:18;left:50%;top:50%;transform:translate(-50%,-50%);padding:12px 18px;text-align:center;border:1px solid #7b3a12;border-radius:5px;background:rgba(5,5,5,.88);box-shadow:0 0 28px rgba(255,103,0,.3);font-size:12px;letter-spacing:.08em}.first-hint span{display:block}.first-hint .hint-arrow{color:#ff9800;font-size:20px}.first-hint.gone{display:none}

/* tray */
.tray{height:100px;flex:0 0 100px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:2px}.piece{position:relative;display:grid;place-items:center;min-width:0;border:3px solid #ff7a18;background:radial-gradient(circle at 50% 88%,rgba(255,103,0,.22),transparent 42%),linear-gradient(#121212,#050505);box-shadow:inset 0 0 0 1px #4c1c08,inset 0 0 20px #000,inset 0 -18px 16px rgba(255,90,0,.18),0 0 12px rgba(255,93,0,.35)}.piece:after{content:"";position:absolute;left:9px;right:9px;bottom:6px;height:3px;background:linear-gradient(90deg,transparent,#ff8a00,transparent);box-shadow:0 0 9px #ff6400}.piece.used{opacity:.35}.piece-grid{display:grid;gap:3px;place-items:center}.mini{display:block;width:17px;height:17px;border-radius:3px;background:linear-gradient(145deg,#ffe08a,#ff9100 32%,#ff5100 76%);border:1px solid #ffc043;box-shadow:inset 0 1px rgba(255,255,255,.55),0 0 8px #ff8a00,0 0 16px rgba(255,81,0,.65)}.rotate{position:absolute;z-index:4;top:5px;right:5px;width:29px;height:29px;border-radius:50%;border:1px solid #ff9a2a;color:#ffb637;background:#160b05;box-shadow:inset 0 0 8px rgba(255,90,0,.2),0 0 9px rgba(255,90,0,.35);cursor:pointer}
.drag-ghost{position:absolute;left:0;top:0;z-index:40;pointer-events:none;opacity:.95;filter:drop-shadow(0 0 10px #ff7900);transform:none}.drag-ghost .piece-grid{display:grid;place-items:start;margin:0;padding:0}.drag-ghost .mini{margin:0}.drag-ghost.valid .mini{border-color:#fff6b2;box-shadow:inset 0 0 8px #fff1a7,0 0 9px #ffd049,0 0 22px #ff6a00}.drag-ghost.invalid{opacity:.58;filter:drop-shadow(0 0 10px #ff2910)}.drag-ghost.invalid .mini{border-color:#ff3b18;filter:saturate(.6)}

/* explosive FX */
.fx-layer{position:absolute;z-index:30;inset:-18px;pointer-events:none;overflow:visible}.beam{position:absolute;display:block;pointer-events:none;z-index:44;background:linear-gradient(90deg,rgba(255,80,0,.15),#fff 42%,#fff 58%,rgba(255,80,0,.15));filter:blur(.15px);box-shadow:0 0 8px #fff,0 0 18px #fff6c8,0 0 36px #ffd339,0 0 70px #ff7a00,0 0 110px #ff3e00;transform-origin:center;animation:beamBlast .65s ease-out forwards}.beam.row{left:-8%;width:116%;height:14px;transform:translateY(-50%) scaleX(.08)}.beam.col{top:-8%;height:116%;width:16px;transform:translateX(-50%) scaleY(.08);background:linear-gradient(180deg,rgba(255,80,0,.12),#fff 38%,#fff 62%,rgba(255,80,0,.12))}
@keyframes beamBlast{0%{opacity:0}.12%{opacity:1}.42%{transform:translateY(-50%) scaleX(1);filter:brightness(2)}100%{opacity:0}}
.beam.col{animation-name:beamBlastCol}@keyframes beamBlastCol{0%{opacity:0}.12%{opacity:1}.42%{transform:translateX(-50%) scaleY(1);filter:brightness(2)}100%{opacity:0}}
.beam.cross{left:50%;top:50%;width:150px;height:150px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff 0 7%,#ffd246 13%,rgba(255,97,0,.88) 22%,rgba(255,63,0,.15) 52%,transparent 70%);box-shadow:0 0 30px #fff,0 0 85px #ff6a00;animation:crossBoom .76s ease-out forwards}@keyframes crossBoom{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}}
.shard,.spark,.core-bit{position:absolute;display:block;pointer-events:none;z-index:50}.shard{width:11px;height:7px;border-radius:1.5px;background:linear-gradient(180deg,#fff6b0 0%,#ffc43d 28%,#ff8500 62%,#ff3a00 100%);box-shadow:0 0 6px #ffb000,0 0 14px #ff7200,inset 0 1px 0 rgba(255,255,220,.75),inset 0 -2px 0 rgba(120,20,0,.45);animation:debris .76s ease-out forwards;transform:rotate(var(--rot,25deg))}.spark{width:4px;height:4px;border-radius:50%;background:#fff6c8;box-shadow:0 0 6px #fff,0 0 12px #ff8a00,0 0 20px #ff5a00;animation:debris .82s ease-out forwards}@keyframes debris{to{transform:translate(var(--dx),var(--dy)) rotate(520deg);opacity:0}}
.core-bit{width:7px;height:7px;border-radius:50%;background:#fff4a6;box-shadow:0 0 8px #ff8a00,0 0 15px #ff4d00;animation:toCore .85s cubic-bezier(.18,.7,.3,1) forwards}@keyframes toCore{to{transform:translate(var(--tx),var(--ty)) scale(.2);opacity:0}}
.praise{position:absolute;z-index:60;left:50%;top:48%;width:100%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;animation:praiseHit 1.15s cubic-bezier(.12,.9,.2,1);will-change:transform,opacity;transform-origin:50% 50%}.praise:before{content:"";position:absolute;left:2%;right:2%;top:42%;height:8px;background:linear-gradient(90deg,transparent,#ff9a20 12%,#fff8b8 36%,#fff 50%,#fff8b8 64%,#ff9a20 88%,transparent);box-shadow:0 0 14px #fff,0 0 36px #ffae00,0 0 72px #ff5700,0 0 110px rgba(255,70,0,.75);z-index:-1;filter:blur(.3px)}.praise .word{display:inline-block;font-size:clamp(48px,14vw,78px);line-height:.86;font-style:italic;font-weight:900;letter-spacing:.01em;color:#ffb020;background-image:linear-gradient(180deg,#fff8c0 0%,#ffe566 22%,#ffc020 52%,#ff8a00 82%,#ff5a00 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:5px #1a0800;paint-order:stroke fill;filter:drop-shadow(0 4px 0 #120500) drop-shadow(0 0 10px rgba(255,255,200,.95)) drop-shadow(0 0 22px #ffb000) drop-shadow(0 0 48px #ff5a00) drop-shadow(0 0 80px rgba(255,70,0,.9));transform:skewX(-10deg)}.praise .plate{display:block;width:max-content;margin:12px auto 0;padding:7px 22px;border:2.5px solid #ff9a28;border-radius:999px;background:linear-gradient(180deg,#1c0c04 0%,#080808 100%);color:#ffe066;letter-spacing:.14em;font-size:clamp(14px,4vw,18px);font-weight:800;text-shadow:0 0 8px rgba(255,180,40,.55);box-shadow:0 0 10px #ff8a00,0 0 26px rgba(255,100,0,.85),0 0 48px rgba(255,70,0,.45),inset 0 0 14px rgba(255,140,0,.28);animation:platePop .55s cubic-bezier(.2,1.4,.3,1)}
@keyframes praiseHit{0%{opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(-8deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.28) rotate(2deg)}38%{transform:translate(-50%,-50%) scale(.96) rotate(-1deg)}55%{transform:translate(-50%,-50%) scale(1.06)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) scale(1.08)}}
@keyframes platePop{0%{transform:scale(.6);opacity:0}40%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}

/* stage / result / CTA */
.stage-banner{position:absolute;z-index:100;left:50%;top:45%;transform:translate(-50%,-50%);min-width:230px;text-align:center;padding:18px;border:2px solid #ff7600;background:rgba(5,5,5,.94);box-shadow:0 0 45px #ff6100}.stage-banner strong,.stage-banner span{display:block}.stage-banner strong{font-size:34px;color:#fff}.stage-banner span{color:#ffad20;letter-spacing:.15em;margin-top:5px}.result-reactor{position:relative;width:200px;height:210px;margin:15px auto 5px;display:grid;place-items:center;background:radial-gradient(circle,#ff9c16 0,rgba(255,79,0,.38) 38%,transparent 68%)}.result-mascot{max-width:180px;max-height:205px}.result-smoke i{position:absolute;width:30px;height:30px;border-radius:50%;background:rgba(160,160,160,.18);filter:blur(8px)}#result h2,#cta h2{text-align:center;color:#ff9d18;letter-spacing:.08em}.new-best{text-align:center;color:#ffd04c}.score-card{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px}.score-card div{padding:10px;text-align:center;border:1px solid #503019;background:#0b0b0b}.score-card span,.score-card strong{display:block}.score-card span{font-size:9px;color:#ffad23}.score-card strong{font-size:20px}.score-card .span-2{grid-column:span 2}.cta-copy,.offline-note,.success{text-align:center}.cta-form{display:flex;flex-direction:column;gap:7px;margin:10px}.cta-form input{min-height:48px;padding:0 13px;border:1px solid #4a3324;border-radius:5px;background:#0a0a0a;color:#fff}.or{text-align:center;margin:0;color:#999}.success{color:#ffc13d;font-size:22px}

@media(max-height:720px){.arcade-header{height:44px;flex-basis:44px}.reactor-hud{height:94px;flex-basis:94px;grid-template-columns:86px 1fr;padding:5px}.mascot-chamber{height:80px}.hud-mascot{max-height:90px}.status-bar{height:25px;flex-basis:25px}.tray{height:88px;flex-basis:88px}.board-machine{padding:8px;border-width:5px}.board{padding:5px;gap:3px}.piece .mini{width:15px;height:15px}}
@media(max-width:370px){.cabinet{padding-left:6px;padding-right:6px;border-width:6px}.reactor-hud{grid-template-columns:84px 1fr}.status-bar{font-size:8px}.praise .word{font-size:36px}.tray{gap:4px}}


/* ===== V0.9.4 skin align — aspect box + absolute % openings ===== */

/* Screens fill the aspect-locked cabinet (no 100dvh flex stack) */
.skin-v09 .screen.active{
  position:absolute;
  inset:0;
  height:100%;
  min-height:0;
  z-index:2;
}

/* Landing: hero + PLAY inside BOARD window; skin paints logo */
.skin-v09 #landing.active{
  display:block;
  padding:0;
  background:transparent;
  justify-content:unset;
}
.skin-v09 #landing .title-logo{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
}
.skin-v09 #landing .landing-stack{
  position:absolute;
  top:33.8%;
  left:14.5%;
  width:71%;
  height:36.2%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(6px,1.2vh,12px);
  margin:0;
  padding:2% 3%;
  box-sizing:border-box;
  min-height:0;
}
.skin-v09 #landing .hero-reactor{
  width:min(78%,240px);
  height:min(62%,210px);
  margin:0;
  flex:0 1 auto;
  filter:drop-shadow(0 0 18px rgba(255,120,0,.55)) drop-shadow(0 0 40px rgba(255,70,0,.35));
}
.skin-v09 #landing .hero-reactor:before,
.skin-v09 #landing .hero-reactor:after,
.skin-v09 #landing .reactor-ring,
.skin-v09 #landing .hero-sparks{opacity:.72}
.skin-v09 #landing .tagline{
  font-size:clamp(10px,2.4vw,13px);
  letter-spacing:.18em;
  color:#ffe7b0;
  text-shadow:0 0 14px rgba(255,120,0,.7),0 2px 0 #1a0700;
}
.skin-v09 #landing .play-btn{
  width:min(88%,260px);
  min-height:clamp(46px,7.2vh,60px);
  margin:4px auto 0;
  font-size:clamp(22px,5.8vw,28px);
  border-radius:10px;
  border:1px solid #ffe7a8;
  box-shadow:inset 0 2px rgba(255,255,255,.7),0 8px 0 #5a1800,0 0 26px #ff7600,0 0 58px rgba(255,90,0,.95),0 0 90px rgba(255,60,0,.45);
}
.skin-v09 #landing .meta-line{
  color:#ffb24a;opacity:.92;font-size:clamp(9px,2vw,11px);
  text-shadow:0 0 10px rgba(255,110,0,.45);
}

/* V0.9.17 — fill empty painted chamber on landing (hero stays in board window) */
.skin-v09 #landing .landing-chamber{
  position:absolute;
  top:8.4%;
  left:5.2%;
  width:24.5%;
  height:13.8%;
  margin:0;
  padding:0;
  border-radius:50%;
  overflow:hidden;
  display:grid;
  place-items:end center;
  z-index:3;
  pointer-events:none;
  background:radial-gradient(circle at 50% 44%,#fffce8 0 7%,#ffe08a 12%,#ffb000 22%,#ff7a00 38%,rgba(255,60,0,.7) 55%,rgba(40,10,0,.35) 72%,transparent 84%);
  box-shadow:0 0 16px #fff6c8,0 0 28px #ffb000,0 0 48px rgba(255,100,0,.85),inset 0 0 22px rgba(255,210,90,.55);
}
.skin-v09 #landing .landing-chamber img{
  width:82%;
  max-height:94%;
  margin-bottom:-2%;
  object-fit:contain;
  filter:drop-shadow(0 0 6px #ffd24a) drop-shadow(0 0 16px rgba(255,110,0,.9)) brightness(1.12) saturate(1.2);
}


/* Result / CTA overlay the cabinet */
.skin-v09 #result .title-logo,
.skin-v09 #cta .title-logo{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
}
.skin-v09 #result.active,
.skin-v09 #cta.active{
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.82));
  padding:8% 6% 6%;
  overflow:auto;
}

/* Game: stop flex stacking — absolute fill + % slots */

/* ===================================================================== */
/* ===== V0.9.29 — Single cabinet slot map (941x1672 design space) ===== */
/* Skin SoT: assets/ui/cabinet-skin-v027.png. Every live zone is a % slot */
/* of the cabinet. No device offsets. No stacked version overrides.       */
/* Drag ghost stays board-machine-local (#dragGhost absolute in machine). */
/* ===================================================================== */
.cabinet.skin-v09{
  container-type:inline-size;
  --hdr-y:5.8%;   --hdr-h:3.1%;
  --snd-x:71.4%;  --snd-w:18.2%;
  --gear-x:90.9%; --gear-w:5.3%;
  --cham-x:6.4%;  --cham-y:6.7%;  --cham-w:25.5%; --cham-h:14.85%;
  --core-x:36.2%; --core-y:13.1%; --core-w:49.9%; --core-h:1.4%;
  --pct-x:86.3%;  --pct-y:11.9%;  --pct-w:9.4%;   --pct-h:3.2%;
  --stat-x:35.2%; --stat-y:17.5%; --stat-w:60.5%; --stat-h:2.8%; --stat-gap:.85%;
  --stat-l-x:9%;  --stat-l-y:23.4%; --stat-l-w:35.6%; --stat-l-h:2.3%;
  --board-x:7.65%; --board-y:27.33%; --board-w:84.7%; --board-h:46.9%;
  --praise-y:50.8%;
  --tray-x:9.5%;  --tray-y:77.5%; --tray-w:80.4%; --tray-h:9.7%; --tray-gap:6.5%;
}
.cabinet.skin-v09 .cab-skin{
  /* skin on top; powered-down recessed panels painted UNDER every alpha cutout (CORE / stats / status / trays) */
  --p:linear-gradient(180deg,#101010,#070707);
  background:
    url("./assets/ui/cabinet-skin-v027.png") center top / 100% 100% no-repeat,
    var(--p) calc(36.2 / (100 - 49.9) * 100%) calc(13.1 / (100 - 1.4) * 100%) / 49.9% 1.4% no-repeat,
    var(--p) calc(35.2 / (100 - 60.5) * 100%) calc(17.5 / (100 - 2.8) * 100%) / 60.5% 2.8% no-repeat,
    var(--p) calc(9 / (100 - 35.6) * 100%) calc(23.4 / (100 - 2.3) * 100%) / 35.6% 2.3% no-repeat,
    var(--p) calc(9.5 / (100 - 80.4) * 100%) calc(77.5 / (100 - 9.7) * 100%) / 80.4% 9.7% no-repeat,
    #050505;
  filter:none;opacity:1;
}
.cabinet.skin-v09 .gomba-fx-host{z-index:55}
.cabinet.skin-v09 .game-footer-tag{display:none}

/* ---------- landing: dedicated hero screen, no gameplay HUD / trays ---------- */
.skin-v09 #landing.active{
  position:absolute;inset:.8% 3.6% 2.2%;display:block;height:auto;min-height:0;padding:0;margin:0;z-index:12;overflow:hidden;
  border:1px solid rgba(255,126,24,.72);border-radius:12px;background:#050505;
  box-shadow:0 0 0 2px #130800,0 0 34px rgba(255,92,0,.38),inset 0 0 44px #000;
  container-type:size;
}
.skin-v09 #landing.active:before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.02) 18%,rgba(0,0,0,.00) 55%,rgba(0,0,0,.08) 78%,rgba(0,0,0,.22) 100%);
}
.skin-v09 #landing.active:after{
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  box-shadow:inset 0 0 28px #000,inset 0 0 0 2px rgba(255,123,0,.14);
}
.skin-v09 #landing .landing-visual{
  position:absolute;inset:0;z-index:1;margin:0;padding:0;overflow:hidden;pointer-events:none;
}
.skin-v09 #landing .landing-hero-img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center center;filter:none;
}
.skin-v09 #landing .landing-stack{
  position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;display:block;overflow:hidden;background:none;z-index:8;
}
.skin-v09 #landing .landing-stack:before{content:none}
.skin-v09 #landing .landing-chamber,
.skin-v09 #landing .hero-reactor{display:none!important}
/* Title / slogan / offline are already painted in landing-screen-v1.jpg — keep in DOM for a11y, hide visually */
.skin-v09 #landing .title-logo,
.skin-v09 #landing .tagline,
.skin-v09 #landing .meta-line{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap;
}
/* Transparent hit target aligned to painted PLAY in the art */
.skin-v09 #landing .play-btn{
  position:absolute;z-index:9;left:50%;top:75.0%;bottom:auto;transform:translateX(-50%);width:60%;min-height:0;margin:0;
  padding:0;height:8.2%;border:0;border-radius:10px;font-size:0;line-height:0;color:transparent;text-indent:-9999px;
  background:transparent;box-shadow:none;cursor:pointer;
}
.skin-v09 #landing .play-btn:active{transform:translateX(-50%) scale(.98);filter:brightness(1.08)}
.skin-v09 #landing .play-btn:before{content:none}
.cabinet.skin-v09:has(#landing.active) #game,
.cabinet.skin-v09:has(#landing.active) #tray{visibility:hidden;pointer-events:none}
@media (max-width:430px){
  .skin-v09 #landing .play-btn{top:75.0%;bottom:auto;width:60%;height:8.2%}
  .skin-v09 #landing .landing-hero-img{object-position:center 48%}
}
/* ---------- game screen ---------- */
.skin-v09 #game.active{position:absolute;inset:0;display:block;height:100%;min-height:0;gap:0;padding:0;z-index:2}

/* header: painted logo + illuminated buttons; live transparent hit targets */
.skin-v09 #game.active .arcade-header{
  position:absolute;inset:0;height:auto;flex:none;margin:0;padding:0;
  display:block;background:transparent;border:0;box-shadow:none;pointer-events:none;z-index:5;
}
.skin-v09 #game.active .logo-lockup{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.skin-v09 #game.active .header-controls{position:absolute;inset:0;display:block;margin:0;gap:0}
.skin-v09 #game.active #soundBtn,
.skin-v09 #game.active #gameClose{
  position:absolute;top:var(--hdr-y);height:var(--hdr-h);min-width:0;min-height:0;margin:0;padding:0;
  pointer-events:auto;border-radius:8px;border:0;background:transparent;box-shadow:none;
  color:transparent;font-size:0;text-shadow:none;
}
.skin-v09 #game.active #soundBtn{left:var(--snd-x);width:var(--snd-w)}
.skin-v09 #game.active #gameClose{left:var(--gear-x);width:var(--gear-w)}
.skin-v09 #game.active #soundBtn[aria-pressed="false"]{
  background:linear-gradient(to top right,transparent 47%,#ff3b16 47% 53%,transparent 53%),rgba(0,0,0,.6);
  box-shadow:inset 0 0 0 1px rgba(255,60,20,.6);
}
.skin-v09 #game.active #soundBtn:active,
.skin-v09 #game.active #gameClose:active{background:rgba(255,200,120,.22)}
.skin-v09 #game.active #soundBtn:focus-visible,
.skin-v09 #game.active #gameClose:focus-visible{outline:2px solid rgba(255,170,60,.85);outline-offset:2px}

/* HUD container becomes a passthrough; children map to slots */
.skin-v09 #game.active .reactor-hud{
  position:absolute;inset:0;height:auto;flex:none;margin:0;padding:0;display:block;
  background:transparent;border:0;box-shadow:none;pointer-events:none;z-index:4;
}
.skin-v09 #game.active .dash{position:absolute;inset:0;display:block;gap:0;padding:0}

/* mascot chamber: art is painted in the skin (approved reference); live element only adds reaction glow */
.skin-v09 #game.active .mascot-chamber{
  position:absolute;left:var(--cham-x);top:var(--cham-y);width:var(--cham-w);height:var(--cham-h);
  margin:0;border:0;border-radius:0;box-shadow:none;filter:none;background:transparent;
  clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%);
  overflow:hidden;pointer-events:none;
}
.skin-v09 #game.active .mascot-chamber:before{content:none}
.skin-v09 #game.active .chamber-core,
.skin-v09 #game.active .chamber-arcs,
.skin-v09 #game.active .chamber-sparks,
.skin-v09 #game.active .hud-mascot{display:none}
.skin-v09 #game.active .mascot-chamber.charged{
  background:radial-gradient(ellipse 70% 70% at 50% 55%,rgba(255,200,90,.22),transparent 70%);
}
.skin-v09 #game.active .mascot-chamber.react-great,
.skin-v09 #game.active .mascot-chamber.react-amazing,
.skin-v09 #game.active .mascot-chamber.react-excellent,
.skin-v09 #game.active .mascot-chamber.react-unstoppable,
.skin-v09 #game.active .mascot-chamber.react-overdrive{
  animation:chamberFlash .5s ease-out;
  background:radial-gradient(ellipse 70% 70% at 50% 55%,rgba(255,240,180,.45),rgba(255,140,0,.18) 60%,transparent 80%);
}
@keyframes chamberFlash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

/* CORE: painted label, live track + live percent */
.skin-v09 #game.active .core-row span,
.skin-v09 #game.active .stat-grid span{display:none}
.skin-v09 #game.active .core-track{
  position:absolute;left:var(--core-x);top:var(--core-y);width:var(--core-w);height:var(--core-h);
  margin:0;padding:0;border:0;border-radius:999px;overflow:hidden;
  background:linear-gradient(180deg,#050505,#141414);
  box-shadow:inset 0 1px 2px #000,inset 0 0 0 1px rgba(255,140,40,.25);
}
.skin-v09 #game.active .core-fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg,#ff5a00 0%,#ff9000 40%,#ffc23a 80%,#fff0a0 100%);
  box-shadow:0 0 6px #ff9a00,0 0 14px rgba(255,120,0,.9),inset 0 1px 0 rgba(255,255,255,.55);
}
.cabinet.skin-v09.praising .core-fill{filter:brightness(1.12) saturate(1.2)}
.skin-v09 #game.active .core-row{
  position:absolute;left:var(--pct-x);top:var(--pct-y);width:var(--pct-w);height:var(--pct-h);
  margin:0;display:flex;align-items:center;justify-content:center;
}
.skin-v09 #game.active .core-row strong{
  font-size:clamp(11px,2.9cqw,16px);font-weight:900;color:#fff4dc;letter-spacing:.02em;
  text-shadow:0 1px 0 #000,0 0 6px rgba(255,170,60,.7);
}

/* stat values inside painted SCORE / BEST / COMBO / STAGE panels */
.skin-v09 #game.active .stat-grid{
  position:absolute;left:var(--stat-x);top:var(--stat-y);width:var(--stat-w);height:var(--stat-h);
  margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--stat-gap);
}
.skin-v09 #game.active .stat-grid div{
  margin:0;padding:0;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;box-shadow:none;border-radius:0;
}
.skin-v09 #game.active .stat-grid strong{
  display:block;line-height:1;transform:none;
  font-size:clamp(14px,4.2cqw,24px);font-weight:900;color:#fff6e4;letter-spacing:.01em;
  text-shadow:0 1px 0 #1a0800,0 0 6px rgba(255,180,80,.55),0 0 14px rgba(255,120,0,.35);
}
.skin-v09 #game.active .stat-grid div:nth-child(3) strong{
  color:#ffb424;text-shadow:0 1px 0 #1a0800,0 0 8px #ff8a00,0 0 18px rgba(255,110,0,.75);
}

/* status strip: live OFFLINE MODE / ENERGY GRID on the left, painted right copy */
.skin-v09 #game.active .status-bar{
  position:absolute;left:var(--stat-l-x);top:var(--stat-l-y);width:var(--stat-l-w);height:var(--stat-l-h);
  margin:0;padding:0 0 0 1.5%;flex:none;border:0;box-shadow:none;background:transparent;
  display:flex;align-items:center;justify-content:flex-start;pointer-events:none;z-index:3;
}
.skin-v09 #game.active .status-bar:before{display:none}
.skin-v09 #game.active .status-bar b{display:none}
.skin-v09 #game.active .status-bar #statusLeft{
  font-size:clamp(9px,2.4cqw,13px);font-weight:700;letter-spacing:.2em;color:#eadfc8;
  white-space:nowrap;text-shadow:0 1px 0 #000;
}

/* board: live 8x8 centred in the painted recessed playfield */
.skin-v09 #game.active #boardMachine,
.skin-v09 #game.active .board-machine{
  position:absolute;left:var(--board-x);top:var(--board-y);width:var(--board-w);height:var(--board-h);
  margin:0;padding:0;border:0;border-radius:6px;flex:none;overflow:visible;z-index:3;
  background:
    radial-gradient(ellipse 70% 60% at 50% 48%,rgba(255,110,0,.12),transparent 70%),
    #060606;
  box-shadow:inset 0 0 34px #000;
}
.skin-v09 #game.active .board-machine:before,
.skin-v09 #game.active .board-machine:after{content:none}
.skin-v09 #game.active .board{
  position:absolute;top:1.8%;left:50%;transform:translateX(-50%);
  height:96.4%;width:auto;max-width:none;aspect-ratio:1/1;
  margin:0;padding:0;gap:1.6%;border:0;border-radius:0;background:transparent;box-shadow:none;
}
.skin-v09 #game.active .cell{
  border-radius:8%;border:0;transform:none;
  background:url("./assets/ui/cell-empty.png") center/100% 100% no-repeat;
  box-shadow:none;
}
.skin-v09 #game.active .cell:before{content:none}
.skin-v09 #game.active .cell.filled{
  border:0;animation:none;filter:none;
  background:url("./assets/ui/cell-filled.png") center/100% 100% no-repeat;
  box-shadow:none;
}
.skin-v09 #game.active .cell.filled:before{content:none}
.skin-v09 #game.active .cell.preview-ok{
  transform:scale(.94);border:0;
  background:url("./assets/ui/cell-filled.png") center/100% 100% no-repeat;
  filter:brightness(1.12) saturate(1.12);
  box-shadow:0 0 12px rgba(255,180,40,.75);
}

/* first hint plate inside the recessed board */
.skin-v09 #game.active .first-hint{
  border:1px solid rgba(255,150,50,.55);border-radius:4px;background:rgba(6,4,3,.9);
  box-shadow:0 0 0 1px #000,0 0 22px rgba(255,100,0,.35);
  font-size:clamp(10px,3cqw,13px);letter-spacing:.14em;
}
.cabinet.skin-v09.praising #firstHint,
.cabinet.skin-v09:has(#praise:not([hidden])) #firstHint{display:none}

/* clear FX (DOM layer complements Phaser) */
.skin-v09 #game.active .beam.row{height:8px}
.skin-v09 #game.active .beam.col{width:12px}
.skin-v09 #game.active .beam.cross{display:none}

/* praise: white/orange fill, dark outline, orange bloom; combo plate below */
.cabinet.skin-v09 #praise{top:var(--praise-y);z-index:92}
.cabinet.skin-v09 #praise:before{height:3px;opacity:.5;top:44%}
.cabinet.skin-v09 #praise .word{
  display:block;width:min(82cqw,560px);aspect-ratio:3/1;margin:0 auto;
  font-size:0;line-height:0;color:transparent;text-shadow:none;-webkit-text-stroke:0;
  -webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:transparent;
  transform:none;background-position:center;background-repeat:no-repeat;background-size:contain;
  filter:drop-shadow(0 0 16px rgba(255,140,0,.7));
}
.cabinet.skin-v09 #praise.tier-nice .word{background-image:url("./assets/ui/praise-nice.png")}
.cabinet.skin-v09 #praise.tier-great .word{background-image:url("./assets/ui/praise-great.png")}
.cabinet.skin-v09 #praise.tier-amazing .word{background-image:url("./assets/ui/praise-amazing.png")}
.cabinet.skin-v09 #praise.tier-excellent .word{background-image:url("./assets/ui/praise-excellent.png")}
.cabinet.skin-v09 #praise.tier-unstoppable .word{background-image:url("./assets/ui/praise-unstoppable.png")}
.cabinet.skin-v09 #praise.tier-overdrive .word{background-image:url("./assets/ui/praise-overdrive.png")}
.cabinet.skin-v09 #praise .plate{
  width:min(52cqw,360px);aspect-ratio:900/220;margin:-1.4cqw auto 0;padding:0;border:0;border-radius:0;
  display:flex;align-items:center;justify-content:center;clip-path:none;
  background:url("./assets/ui/combo-plate.png") center/100% 100% no-repeat;
  color:#ffd76a;font-size:clamp(12px,3.8cqw,20px);font-weight:900;font-style:italic;letter-spacing:.08em;
  text-shadow:0 1px 0 #000,0 0 8px rgba(255,180,60,.7);box-shadow:none;
}

/* tray: three painted bays, live pieces centred, rotate top-right */
.skin-v09 #game.active #tray,
.skin-v09 #game.active .tray{
  position:absolute;left:var(--tray-x);top:var(--tray-y);width:var(--tray-w);height:var(--tray-h);
  margin:0;padding:0;flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--tray-gap);z-index:4;
}
.skin-v09 #game.active .piece{
  min-height:0;height:100%;padding:8% 6%;border:0;border-radius:6px;overflow:hidden;clip-path:none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 60%,rgba(255,110,0,.10),transparent 70%),
    radial-gradient(circle,rgba(255,255,255,.07) 0 .6px,transparent 1.3px) 0 0 / .9cqw .9cqw,
    linear-gradient(180deg,#0c0c0c,#050505);
  box-shadow:inset 0 0 22px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.04);
}
.skin-v09 #game.active .piece:before,
.skin-v09 #game.active .piece:after{content:none}
.skin-v09 #game.active .piece.used{opacity:1}
.skin-v09 #game.active .piece .piece-grid{gap:.55cqw;transform:none}
.skin-v09 #game.active .piece .mini{
  width:3.3cqw;height:3.3cqw;border-radius:14%;border:0;filter:none;
  background:url("./assets/ui/cell-filled.png") center/100% 100% no-repeat;
  box-shadow:none;
}
.skin-v09 #game.active .rotate{
  top:5%;right:5%;width:clamp(18px,5.2cqw,30px);height:clamp(18px,5.2cqw,30px);
  border:0;border-radius:0;color:transparent;font-size:0;line-height:0;
  background:url("./assets/ui/btn-rotate.png") center/contain no-repeat;
  box-shadow:none;
}