:root{
  --pink:#ff4bd8;
  --pink2:#9b145e;
  --cyan:#35f5ff;
  --purple:#7b3cff;
  --dark:#05060c;
  --panel:#0c1018;
  --line:#2e4057;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
 }
 *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
 html,body{
  margin:0;width:100vw;height:100dvh;overflow:hidden;background:#000;color:#fff;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  touch-action:none;user-select:none;-webkit-user-select:none;
 }
 #app{
  width:100vw;height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) auto auto auto;
  background:radial-gradient(circle at 50% 10%,#18233a 0%,#05060b 45%,#000 100%);
  overflow:hidden;
 }
 #stage{
  position:relative;min-height:0;overflow:hidden;background:#02050c;
  border-bottom:2px solid #15243a;
 }
 #game{
  width:100%;height:100%;display:block;background:#030611;image-rendering:pixelated;
  touch-action:none;user-select:none;
 }
 #overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.12) 45%,rgba(0,0,0,.55));
 }
 #overlay.hidden{display:none}

 #overlay.storyPause{
  align-items:flex-end;justify-content:center;padding:12px 12px calc(12px + var(--safe-bottom));
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.10) 42%,rgba(0,0,0,.62));
 }
 #overlay.storyPause .menuBox{
  width:min(94vw,820px);max-height:min(48dvh,390px);overflow-y:auto;text-align:left;padding:16px 16px 14px;
  border-color:rgba(255,227,107,.88);background:rgba(4,7,14,.84);
  box-shadow:0 0 24px rgba(255,75,216,.35), inset 0 0 18px rgba(255,227,107,.10);
 }
 #overlay.storyPause .title{
  font-size:clamp(19px,5.3vw,33px);text-align:left;margin-bottom:6px;text-shadow:3px 3px 0 #2b0622,0 0 12px #ff4bd8;
 }
 #overlay.storyPause .subtitle{
  font-size:clamp(13px,3.3vw,17px);line-height:1.35;color:#eefbff;margin-bottom:10px;
 }
 #overlay.storyPause .startBtn{min-height:56px;font-size:clamp(18px,5.5vw,28px);margin-top:6px;}
 #overlay.menuScreen{
  background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.18) 42%,rgba(0,0,0,.28));
 }
 #overlay.menuScreen .menuBox{
  width:min(90vw,480px);background:rgba(5,8,16,.72);border-color:rgba(255,75,216,.70);
 }

 .menuBox{
  width:min(92vw,540px);max-height:min(86dvh,720px);overflow-y:auto;padding:22px;border:3px solid rgba(53,245,255,.72);
  background:rgba(6,10,18,.92);box-shadow:0 0 30px rgba(255,75,216,.35), inset 0 0 24px rgba(53,245,255,.12);
  text-align:center;border-radius:18px;pointer-events:auto;
 }
 .title{
  margin:0 0 8px;font-size:clamp(28px,8vw,48px);letter-spacing:.04em;text-transform:uppercase;
  color:#fff;text-shadow:3px 3px 0 #9b145e,0 0 18px #35f5ff;
 }
 .subtitle{margin:0 0 16px;color:#bfefff;font-weight:800;font-size:clamp(13px,3vw,17px);line-height:1.32;white-space:pre-line}
 .startBtn{
  width:100%;min-height:76px;margin-top:8px;border:4px solid #fff;border-radius:16px;
  font-size:clamp(22px,7vw,34px);font-weight:1000;letter-spacing:.06em;color:white;
  background:linear-gradient(180deg,#ff5ee3,#9b145e);box-shadow:0 8px 0 #4b0a31,0 0 22px rgba(255,75,216,.7);
  touch-action:none;user-select:none;
 }
 .startBtn:active{transform:translateY(5px);box-shadow:0 3px 0 #4b0a31}
 #menuActions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
 .miniBtn{min-height:48px;border:2px solid rgba(255,255,255,.82);border-radius:13px;background:rgba(9,16,28,.88);color:#fff;font-weight:1000;font-size:clamp(12px,3.4vw,16px);letter-spacing:.05em;box-shadow:0 4px 0 rgba(0,0,0,.55)}
 .miniBtn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.55)}
 .settingsPanel{margin-top:12px;text-align:left;border:2px solid rgba(53,245,255,.35);border-radius:14px;background:rgba(3,7,14,.82);padding:12px;color:#eafcff;font-weight:800}
 .settingsPanel.hidden{display:none}
 .settingsPanel h2{margin:0 0 8px;font-size:clamp(16px,4.8vw,22px);color:#ffe36b;text-transform:uppercase}
 .settingRow{display:grid;grid-template-columns:minmax(96px,1fr) minmax(128px,1.2fr);align-items:center;gap:10px;margin:9px 0;font-size:clamp(12px,3.4vw,15px)}
 .settingRow input[type=range], .settingRow select{width:100%}
 .settingRow select{min-height:40px;border:2px solid rgba(255,255,255,.70);border-radius:10px;background:#08111e;color:#fff;font-weight:900;padding:0 8px}
 .settingRow input[type=checkbox]{width:28px;height:28px;justify-self:start}
 .garageGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
 .garageGrid .miniBtn.selected{border-color:#ffe36b;background:rgba(255,227,107,.18);color:#fff}
 #app.highContrast #game{filter:contrast(1.18) brightness(1.04)}
 #app.highContrast #debug{background:#000;color:#fff}
 #roster{
  height:clamp(48px,7dvh,62px);display:grid;grid-template-columns:repeat(4,1fr);gap:5px;
  padding:3px 7px;background:linear-gradient(180deg,#050912,#000);border-top:2px solid #111827;
 }
 .card{
  position:relative;min-width:0;border:2px solid #38566a;border-radius:10px;background:#08101a;
  overflow:hidden;box-shadow:inset 0 0 12px rgba(53,245,255,.14);
 }
 .card.active{border-color:#ff8de9;box-shadow:0 0 12px rgba(255,75,216,.75),inset 0 0 18px rgba(255,75,216,.22)}
 .card img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;display:block}
 .tag{
  position:absolute;left:5px;bottom:3px;font-size:clamp(11px,3.2vw,18px);font-weight:1000;
  color:white;text-shadow:2px 2px 0 #9b145e;letter-spacing:.04em;
 }
 .miniHp{position:absolute;left:8px;right:8px;bottom:4px;height:7px;background:#102114;border:1px solid #92ffb5}
 .miniHp:after{content:"";display:block;height:100%;width:78%;background:#60ff85}
 .locked{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#b992ff;text-align:center;font-weight:1000;font-size:clamp(9px,2.4vw,13px)}
 .lockIcon{font-size:clamp(18px,5.6vw,28px);filter:grayscale(1)}
 #debug{
  height:11px;display:flex;align-items:center;justify-content:center;padding:0 8px;
  background:rgba(3,6,12,.92);color:#a7d8e6;font-size:7px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-top:1px solid #111827;border-bottom:1px solid #000;letter-spacing:.02em;
 }
 #controls{
  height:calc(clamp(74px,12dvh,102px) + var(--safe-bottom));
  padding:5px 8px calc(5px + var(--safe-bottom));
  display:grid;grid-template-columns:1.12fr .88fr;gap:7px;background:#070912;
  border-top:2px solid #1a2132;
 }
 #app.puzzleMode #controls{display:none}
 #app.puzzleMode #roster{height:clamp(38px,5.8dvh,48px)}
 #app.puzzleMode #debug{height:13px;font-size:7px}
 #autoLabel{font-size:clamp(8px,2vw,11px);line-height:1.05;padding:0 2px}
 .ctrl{
  min-height:66px;border:3px solid rgba(255,255,255,.8);border-radius:15px;color:white;
  font-weight:1000;font-size:clamp(16px,4.8vw,27px);letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px;
  text-shadow:2px 2px 0 rgba(0,0,0,.6);touch-action:none;user-select:none;-webkit-user-select:none;
  box-shadow:0 5px 0 rgba(0,0,0,.55),inset 0 0 12px rgba(255,255,255,.14);
 }
 .ctrl .icon{font-size:clamp(18px,5.6vw,30px);line-height:.85}
 #leftBtn,#rightBtn{display:none}
 #strikeBtn{background:linear-gradient(180deg,#9c4dff,#351372);font-size:clamp(22px,6.2vw,35px);box-shadow:0 5px 0 rgba(0,0,0,.55),0 0 18px rgba(156,77,255,.45),inset 0 0 14px rgba(255,255,255,.16)}
 #specialBtn{background:linear-gradient(180deg,#ffb84d,#9b4b00);font-size:clamp(14px,4vw,22px);box-shadow:0 5px 0 rgba(0,0,0,.55),0 0 18px rgba(255,184,77,.34),inset 0 0 14px rgba(255,255,255,.16)}
 #specialBtn.ready{background:linear-gradient(180deg,#ffe36b,#b64bff);box-shadow:0 5px 0 rgba(0,0,0,.55),0 0 24px rgba(255,227,107,.72),inset 0 0 16px rgba(255,255,255,.22)}
 #specialBtn.empty{background:linear-gradient(180deg,#3b4658,#151b27);color:#b8c8d8;border-color:rgba(255,255,255,.34);box-shadow:0 5px 0 rgba(0,0,0,.55),inset 0 0 10px rgba(255,255,255,.08)}
 .ctrl.down,.ctrl:active{transform:translateY(5px);box-shadow:0 3px 0 rgba(0,0,0,.55),inset 0 0 26px rgba(255,255,255,.32);filter:brightness(1.22)}
 #cinematicOverlay{
  position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  background:#000;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;
 }
 #cinematicOverlay.active{display:flex}
 #cinematicVideo{
  width:100vw;height:100dvh;object-fit:contain;background:#000;display:block;
 }
 .cinematicHud{
  position:absolute;left:0;right:0;bottom:calc(12px + var(--safe-bottom));
  display:flex;align-items:center;justify-content:center;gap:10px;padding:0 12px;pointer-events:none;
 }
 #cinematicTitle{
  max-width:min(62vw,520px);padding:10px 12px;border:2px solid rgba(255,227,107,.85);border-radius:12px;
  background:rgba(0,0,0,.62);font-weight:1000;font-size:clamp(12px,3.3vw,17px);
  letter-spacing:.05em;text-transform:uppercase;color:#fff;text-shadow:2px 2px 0 #2b0622;
 }
 #cinematicSkip{
  min-width:104px;min-height:48px;border:3px solid #fff;border-radius:14px;
  background:linear-gradient(180deg,#ff5ee3,#9b145e);color:white;font-weight:1000;
  font-size:clamp(13px,3.7vw,18px);letter-spacing:.05em;box-shadow:0 5px 0 #4b0a31;
  pointer-events:auto;touch-action:none;
 }
 #cinematicSkip:active{transform:translateY(4px);box-shadow:0 1px 0 #4b0a31}
 @media (max-height:750px){
  #roster{height:50px;padding:3px 6px}
  #controls{height:calc(70px + var(--safe-bottom));padding-top:4px}
  .ctrl{min-height:64px}
  #debug{height:10px;font-size:6px}
 }

 /* v23 lean-cut: fewer visible systems, less chrome, faster play. */
 #garageBtn,#garagePanel{display:none!important}
 #roster,#debug{display:none!important}
 #app{grid-template-rows:minmax(0,1fr) auto}
 #overlay.menuScreen .menuBox{width:min(88vw,430px);background:rgba(5,8,16,.66)}
 .menuBox{padding:18px;border-radius:16px;max-height:min(82dvh,620px)}
 .subtitle{margin-bottom:12px}
 .settingsPanel{padding:10px;margin-top:8px}
 .settingRow{grid-template-columns:72px 1fr;margin:7px 0}
 #controls{height:calc(clamp(70px,11dvh,94px) + var(--safe-bottom));grid-template-columns:1fr 1fr;gap:8px;padding:5px 8px calc(5px + var(--safe-bottom))}
 .ctrl{min-height:62px;border-radius:14px}
 #strikeBtn{font-size:clamp(23px,6.5vw,38px)}
 #specialBtn{font-size:clamp(17px,4.8vw,25px)}
 #app.puzzleMode #controls{display:none}
 @media (max-height:750px){#controls{height:calc(66px + var(--safe-bottom))}.ctrl{min-height:58px}}


.shake { animation: juiceShake 0.4s cubic-bezier(.36,.07,.19,.97) both !important; }
@keyframes juiceShake {
    10%, 90% { transform: translate3d(-4px, 0, 0); }
    20%, 80% { transform: translate3d(6px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-8px, 0, 0); }
    40%, 60% { transform: translate3d(8px, 0, 0); }
}
.juice-particle {
    position: fixed; pointer-events: none; border-radius: 50%; z-index: 999999;
    box-shadow: 0 0 10px currentColor;
    animation: juiceBurst 0.7s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
@keyframes juiceBurst {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}