/* ── JVDS Site Nav ── */


:root{
    --bg:#0a0a12;--panel:#0f1521;--panel2:#161f30;--panel3:#1c2840;
    --border:rgba(255,255,255,.06);--border2:rgba(255,255,255,.11);
    --purple:#7c3aed;--purple-lt:#a78bfa;--purple-dim:rgba(124,58,237,.18);
    --green:#22c55e;--green-dk:#16a34a;--amber:#f59e0b;--red:#ef4444;--cyan:#00d4aa;
    --beige:#F0EAD6;--tan:#D2B48C;--rose:#BC4749;--teal:#70A3A7;
    --muted:rgba(240,234,214,.5);--text:#e8edf8;
}
body.theme-light{
    --bg:#f0f4ff;--panel:#ffffff;--panel2:#f1f5fb;--panel3:#e8edf8;
    --border:rgba(0,0,0,.08);--border2:rgba(0,0,0,.13);
    --muted:rgba(30,41,59,.5);--text:#1e293b;--beige:#1e293b;
}
body.theme-light .tab-btn{color:rgba(30,41,59,.5);}
body.theme-light .tab-btn.on{color:var(--purple);}
body.theme-light .bp-code{color:rgba(30,41,59,.8);}
body.theme-light input[type=text],body.theme-light input[type=number],body.theme-light select,body.theme-light textarea{background:rgba(0,0,0,.04);color:var(--text);}
body.theme-light .btn-sm{background:rgba(0,0,0,.06);color:rgba(30,41,59,.8);border-color:rgba(0,0,0,.1);}
body.theme-light #game-container{background:#f0f4ff;}
body.overlay-active .panel-fab{display:none!important;}
/* Theme toggle button */
#themeToggle{background:none;border:1px solid var(--border2);padding:4px 9px;border-radius:7px;cursor:pointer;font-size:.8rem;color:var(--muted);transition:color .15s,border-color .15s;}
#themeToggle:hover{color:var(--text);border-color:var(--purple-lt);}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);overflow:hidden;height:100vh;display:flex;flex-direction:column;}
a{text-decoration:none;color:inherit;}
/* ── Performance hints ───────────────────────────────────────────────────── */
/* Promote game canvas area to its own compositor layer, reduces repaints */
#gameWrap{contain:layout style;will-change:transform;}
/* Joystick/knob animate frequently, hint GPU compositing */
.joystick-wrap{will-change:opacity,transform;}
.joystick-knob{will-change:transform;}
/* Game/intro overlays slide in, composited separately */
.go-overlay,.intro-overlay{will-change:opacity;}
.go-box,.intro-box{will-change:transform,opacity;}
/* Tab panels not visible: use content-visibility to skip layout/paint */
.tab-content{content-visibility:auto;contain-intrinsic-size:0 600px;}
.tab-content.on{content-visibility:visible;}
/* Studio panel scroll, contain paint to avoid full-page repaints */
.studio-panel{contain:layout paint;}

/* ── PWA INSTALL BANNER ──────────────────────────────────────────────────── */
#pwa-install-banner{
  position:fixed;bottom:max(70px,calc(env(safe-area-inset-bottom,0px) + 62px));left:50%;transform:translateX(-50%) translateY(120px);
  background:rgba(17,13,32,.97);border:1px solid rgba(124,58,237,.45);
  border-radius:14px;padding:10px 16px;display:flex;align-items:center;gap:10px;
  font-size:.78rem;color:var(--beige);white-space:nowrap;max-width:92vw;
  box-shadow:0 4px 24px rgba(0,0,0,.5);z-index:9000;
  transition:transform .35s cubic-bezier(.2,1.4,.4,1),opacity .35s;opacity:0;pointer-events:none;
}
#pwa-install-banner.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto;}
#pwa-install-banner button{
  background:linear-gradient(135deg,var(--purple),#6d28d9);border:none;border-radius:8px;
  color:#fff;font-size:.75rem;font-weight:700;padding:5px 12px;cursor:pointer;flex-shrink:0;
  transition:filter .15s;
}
#pwa-install-banner button:hover{filter:brightness(1.15);}
#pwa-install-dismiss{
  background:none!important;color:var(--muted)!important;padding:4px 6px!important;font-size:.9rem!important;
}

/* HEADER */
.site-header{height:52px;flex-shrink:0;background:rgba(10,10,18,.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--border2);display:flex;align-items:center;}
.header-inner{width:100%;padding:0 20px;display:flex;align-items:center;gap:8px;}
.logo-link{display:flex;align-items:center;gap:9px;font-size:1.1rem;margin-right:auto;font-weight:800;color:var(--beige);}
.logo-link img{height:30px;border-radius:7px;}
@keyframes logo-shift{0%{color:var(--tan)}33%{color:var(--rose)}66%{color:var(--teal)}100%{color:var(--tan)}}
.logo-name{animation:logo-shift 6s infinite alternate ease-in-out;}
.main-nav{display:flex;align-items:center;gap:2px;}
.nav-link{font-size:.78rem;font-weight:600;color:rgba(240,234,214,.55);padding:5px 9px;border-radius:7px;white-space:nowrap;transition:background .15s,color .15s;}
.nav-link:hover{background:rgba(255,255,255,.07);color:var(--beige);}
.nav-link.active{background:rgba(124,58,237,.2);color:var(--purple-lt);border:1px solid rgba(124,58,237,.3);}
.nav-toggle{display:none;background:none;border:none;padding:6px 10px;font-size:1.3rem;cursor:pointer;color:var(--beige);}
.main-nav{position:absolute;top:52px;left:0;right:0;z-index:300;background:#0d0d18;border-top:2px solid var(--purple);box-shadow:0 8px 32px rgba(0,0,0,.5);max-height:0;overflow:hidden;transition:max-height .35s ease;}
.main-nav.open{max-height:calc(100vh - 52px);overflow-y:auto;}
.main-nav a{display:flex;align-items:center;gap:10px;padding:12px 20px;font-size:.95rem;font-weight:600;color:rgba(240,234,214,.7);border-bottom:1px solid rgba(240,234,214,.05);transition:background .12s;}
.main-nav a:hover{background:rgba(255,255,255,.05);color:var(--beige);}
@media(max-width:1024px){.main-nav{display:none!important;}.nav-toggle{display:block!important;}}
@media(min-width:1025px){.main-nav{display:none!important;}}
/* Landscape nudge, small dismissible hint bar at top of canvas (not a blocker) */
#landscape-nudge{display:none;position:absolute;top:0;left:0;right:0;z-index:50;background:rgba(5,3,15,.88);backdrop-filter:blur(8px);color:#e8edf8;align-items:center;gap:8px;padding:9px 14px;font-family:'Fredoka',sans-serif;font-size:.9rem;border-bottom:1px solid rgba(124,58,237,.3);animation:nudge-in .22s ease;}
#landscape-nudge .nudge-close{margin-left:auto;background:none;border:none;color:rgba(240,234,214,.5);font-size:1.3rem;cursor:pointer;padding:0 4px;line-height:1;-webkit-tap-highlight-color:transparent;}
@keyframes nudge-in{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px) and (orientation:portrait){
    #landscape-nudge.game-active{display:flex!important;}
}

/* STUDIO */
.studio{display:flex;flex:1;min-height:0;overflow:hidden;}
.studio-panel{width:360px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;}

/* TABS */
.tab-bar{display:flex;flex-shrink:0;border-bottom:1px solid var(--border2);background:rgba(0,0,0,.3);}
.tab-btn{flex:1;padding:10px 2px 8px;font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s,background .15s;font-family:'Inter',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;align-items:center;gap:3px;}
.tab-btn:hover{color:var(--text);background:rgba(255,255,255,.04);}
.tab-btn.on{color:var(--purple-lt);border-bottom-color:var(--purple);background:rgba(124,58,237,.1);}
.tab-icon{font-size:1.15rem;line-height:1;display:block;}
.tab-lbl{font-size:.65rem;letter-spacing:.04em;display:block;font-weight:600;}
/* Very small phones: tab bar can scroll horizontally if 6 tabs don't fit */
@media(max-width:360px){
  .tab-bar{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .tab-bar::-webkit-scrollbar{display:none;}
  .tab-btn{flex:0 0 56px;min-width:56px;}
}

/* TAB CONTENT */
.tab-content{
  display:none;flex:1;flex-direction:column;overflow-y:auto;padding:14px;gap:11px;
  animation:tab-fade-in .2s ease-out;
}
.tab-content.on{display:flex;}
@keyframes tab-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes error-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes error-slide-down {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(20px); opacity: 0; }
}

/* SECTION LABELS */
.sec-label{font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-lt);border-bottom:1px solid rgba(124,58,237,.22);padding-bottom:6px;margin-bottom:-2px;flex-shrink:0;display:flex;align-items:center;}

/* FORM */
.form-group{display:flex;flex-direction:column;gap:4px;}
label{font-size:.72rem;font-weight:700;color:var(--muted);}
input[type=text],input[type=number],select,textarea{background:rgba(0,0,0,.4);border:1px solid var(--border2);color:var(--text);padding:8px 10px;border-radius:7px;font-family:'Inter',sans-serif;font-size:.85rem;transition:border-color .15s;width:100%;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 2px rgba(124,58,237,.15);}
select option{background:#1a2340;}
textarea{height:56px;resize:none;font-family:'JetBrains Mono',monospace;font-size:.72rem;line-height:1.5;}
.range-row{display:flex;align-items:center;gap:8px;}
.range-row input[type=range]{flex:1;accent-color:var(--purple);border:none;background:transparent;padding:0;}
.range-val{font-family:'JetBrains Mono',monospace;font-size:.74rem;color:var(--purple-lt);min-width:32px;text-align:right;}

/* BUTTONS */
.btn-run{background:var(--green);color:white;border:none;padding:11px 16px;border-radius:9px;font-weight:800;font-size:.9rem;cursor:pointer;transition:filter .15s,transform .1s;box-shadow:0 3px 0 var(--green-dk);letter-spacing:.02em;font-family:'Inter',sans-serif;width:100%;}
.btn-run:hover{filter:brightness(1.1);transform:translateY(-1px);}
.btn-run:active{transform:translateY(1px);box-shadow:0 1px 0 var(--green-dk);}
@keyframes run-pulse{0%{box-shadow:0 3px 0 var(--green-dk),0 0 0 0 rgba(34,197,94,.55);}70%{box-shadow:0 3px 0 var(--green-dk),0 0 0 10px rgba(34,197,94,0);}100%{box-shadow:0 3px 0 var(--green-dk),0 0 0 0 rgba(34,197,94,0);}}
.btn-run.pulsing{animation:run-pulse 2s ease-out infinite;}
@keyframes run-launch{0%{filter:brightness(1.8);transform:scale(.95);}60%{filter:brightness(1.3);transform:scale(1.02);}100%{filter:brightness(1);transform:scale(1);}}
.btn-run.launching{animation:run-launch .38s ease-out;}
@keyframes run-success{0%{box-shadow:0 3px 0 var(--green-dk),0 0 0 0 rgba(34,197,94,.6);}50%{box-shadow:0 3px 0 var(--green-dk),0 0 0 8px rgba(34,197,94,0);}100%{box-shadow:0 3px 0 var(--green-dk),0 0 0 0 rgba(34,197,94,0);}}
.btn-run.success{animation:run-success .6s ease-out;}
@keyframes spin{to{transform:rotate(360deg);}}
.save-row{display:flex;gap:6px;}
.btn-sm{flex:1;background:rgba(255,255,255,.06);color:rgba(240,234,214,.8);border:1px solid var(--border2);padding:8px 6px;border-radius:7px;font-weight:700;font-size:.72rem;cursor:pointer;transition:background .15s;font-family:'Inter',sans-serif;white-space:nowrap;text-align:center;}
.btn-sm:hover{background:rgba(255,255,255,.11);color:var(--beige);}
.btn-sm.purple{background:rgba(124,58,237,.2);color:var(--purple-lt);border-color:rgba(124,58,237,.3);}
.btn-sm.purple:hover{background:rgba(124,58,237,.35);}

/* BLUEPRINT CARDS */
.bp-card{
  background:var(--panel2);border:1px solid var(--border2);border-radius:10px;
  overflow:hidden;flex-shrink:0;transition:all .2s,border-color .2s;
  cursor:pointer;animation:blueprint-enter .3s ease-out backwards;
}
.bp-card:nth-child(1){animation-delay:0;}
.bp-card:nth-child(2){animation-delay:.05s;}
.bp-card:nth-child(3){animation-delay:.1s;}
.bp-card:nth-child(n+4){animation-delay:.15s;}
@keyframes blueprint-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.bp-card:hover{
  border-color:rgba(124,58,237,.4);background:var(--panel3);
  box-shadow:0 4px 16px rgba(124,58,237,.15);transform:translateY(-2px);
}
.bp-card.selected {
  border-color:rgba(124,58,237,.6);background:var(--panel3);
  box-shadow:0 8px 24px rgba(124,58,237,.25);
}
.bp-card[data-favorite] .bp-fav-btn{color:#fbbf24;}
.bp-head{
  display:flex;align-items:center;gap:9px;padding:10px 12px;
  border-bottom:1px solid var(--border);position:relative;
}
.bp-icon{font-size:1.3rem;line-height:1;flex-shrink:0;}
.bp-name{font-size:.8rem;font-weight:800;color:white;line-height:1.2;}
.bp-sub{font-size:.62rem;color:var(--muted);margin-top:1px;}
.bp-badge{
  font-size:.52rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;flex-shrink:0;
}
.bp-fav-btn{
  margin-left:auto;background:none;border:none;font-size:1.1rem;cursor:pointer;
  color:rgba(255,255,255,.3);transition:color .15s;padding:0 4px;
  flex-shrink:0;-webkit-tap-highlight-color:transparent;
}
.bp-fav-btn:hover{color:#fbbf24;}
.bp-badge.green{background:rgba(34,197,94,.15);color:#4ade80;border:1px solid rgba(34,197,94,.25);}
.bp-badge.amber{background:rgba(245,158,11,.15);color:#fbbf24;border:1px solid rgba(245,158,11,.25);}
.bp-badge.cyan{background:rgba(0,212,170,.12);color:#34d399;border:1px solid rgba(0,212,170,.2);}
.bp-code{background:rgba(0,0,0,.5);padding:9px 12px;font-family:'JetBrains Mono',monospace;font-size:.7rem;line-height:1.8;color:rgba(240,234,214,.75);border-bottom:1px solid var(--border);white-space:pre;}
.c-kw{color:#c084fc;font-weight:700;}.c-fn{color:#60a5fa;}.c-num{color:#34d399;font-weight:700;background:rgba(52,211,153,.1);border-radius:3px;padding:0 2px;border-bottom:1px dashed rgba(52,211,153,.4);}.c-comment{color:rgba(240,234,214,.3);}
.code-editor{width:100%;min-height:175px;background:#070a0f;border:1px solid rgba(124,58,237,.35);color:#a5f3fc;font-family:'JetBrains Mono',monospace;font-size:.68rem;line-height:1.65;padding:9px 11px;border-radius:8px;resize:vertical;tab-size:2;-moz-tab-size:2;}
.code-editor:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 2px rgba(124,58,237,.15);}
.code-status{font-family:'JetBrains Mono',monospace;font-size:.62rem;padding:4px 8px;border-radius:5px;min-height:20px;}
.code-status.ok{color:#4ade80;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.18);}
.code-status.err{color:#f87171;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.18);}
.bp-tweaks{padding:9px 12px;display:flex;flex-direction:column;gap:6px;border-bottom:1px solid var(--border);}
.tweak-row{display:flex;align-items:center;gap:7px;}
.tweak-label{font-size:.64rem;font-weight:700;color:var(--muted);white-space:nowrap;min-width:100px;}
.tweak-row input[type=range]{flex:1;accent-color:var(--purple);}
.tweak-val{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:#34d399;min-width:28px;text-align:right;}
.bp-explain{padding:8px 12px;font-size:.69rem;color:var(--muted);line-height:1.55;}

/* BLUEPRINT SEARCH & FILTER */
.bp-search-row{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;}
.bp-search-input{
  flex:1;min-width:140px;background:rgba(0,0,0,.4);border:1px solid var(--border2);
  color:var(--text);padding:8px 10px;border-radius:7px;font-family:'Inter',sans-serif;
  font-size:.85rem;transition:border-color .15s;
}
.bp-search-input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 2px rgba(124,58,237,.15);}
.bp-filter-btn{
  background:rgba(255,255,255,.06);color:rgba(240,234,214,.8);border:1px solid var(--border2);
  padding:8px 12px;border-radius:7px;font-size:.72rem;font-weight:700;cursor:pointer;
  transition:background .15s,border-color .15s;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.bp-filter-btn:hover{background:rgba(255,255,255,.11);border-color:rgba(124,58,237,.3);}
.bp-filter-btn.active{
  background:rgba(124,58,237,.25);color:var(--purple-lt);border-color:rgba(124,58,237,.4);
}
.bp-no-results{
  text-align:center;padding:20px 12px;font-size:.85rem;color:var(--muted);
  font-style:italic;
}

/* Genre visibility, cards are hidden until a genre class is set on #studioRoot */
.bp-card[data-genre]{display:none;}
#studioRoot.genre-SHOOTER   .bp-card[data-genre~="SHOOTER"]{display:block;}
#studioRoot.genre-PLATFORMER .bp-card[data-genre~="PLATFORMER"]{display:block;}
#studioRoot.genre-DODGE      .bp-card[data-genre~="DODGE"]{display:block;}
#studioRoot.genre-BREAKER    .bp-card[data-genre~="BREAKER"]{display:block;}
#studioRoot.genre-RUNNER     .bp-card[data-genre~="RUNNER"]{display:block;}
#studioRoot.genre-FLAPPY     .bp-card[data-genre~="FLAPPY"]{display:block;}
#studioRoot.genre-INVADERS   .bp-card[data-genre~="INVADERS"]{display:block;}
#studioRoot.genre-PONG       .bp-card[data-genre~="PONG"]{display:block;}
#studioRoot.genre-SNAKE      .bp-card[data-genre~="SNAKE"]{display:block;}
#studioRoot.genre-ASTEROIDS  .bp-card[data-genre~="ASTEROIDS"]{display:block;}
#studioRoot.genre-RACING     .bp-card[data-genre~="RACING"]{display:block;}
#studioRoot.genre-HOPPER     .bp-card[data-genre~="HOPPER"]{display:block;}
#studioRoot.genre-BEAT       .bp-card[data-genre~="BEAT"]{display:block;}
#studioRoot.genre-PUZZLE     .bp-card[data-genre~="PUZZLE"]{display:block;}
#studioRoot.genre-RHYTHM     .bp-card[data-genre~="RHYTHM"]{display:block;}
#studioRoot.genre-DEFENSE    .bp-card[data-genre~="DEFENSE"]{display:block;}
#studioRoot.genre-PINBALL    .bp-card[data-genre~="PINBALL"]{display:block;}
#studioRoot.genre-ROGUELIKE  .bp-card[data-genre~="ROGUELIKE"]{display:block;}
#studioRoot.genre-CLICKER    .bp-card[data-genre~="CLICKER"]{display:block;}
#studioRoot.genre-MEMORY     .bp-card[data-genre~="MEMORY"]{display:block;}
#studioRoot.genre-WAVESURVIVAL .bp-card[data-genre~="WAVESURVIVAL"]{display:block;}
#studioRoot.genre-PAPERTOSS  .bp-card[data-genre~="PAPERTOSS"]{display:block;}
.bp-card[data-genre~="ALL"]{display:block!important;}

/* ASSETS */
.asset-block{background:var(--panel2);border:1px solid var(--border2);border-radius:10px;padding:11px 13px;display:flex;flex-direction:column;gap:9px;}
.asset-block-title{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--purple-lt);}
.asset-preview-row{display:flex;align-items:center;gap:11px;}
.asset-thumb{width:60px;height:60px;flex-shrink:0;background:rgba(0,0,0,.5);border:1px solid var(--border2);border-radius:7px;display:flex;align-items:center;justify-content:center;overflow:hidden;image-rendering:pixelated;}
.asset-thumb img,.asset-thumb canvas{max-width:100%;max-height:100%;image-rendering:pixelated;}
.asset-thumb .no-art{font-size:.58rem;color:rgba(255,255,255,.2);text-align:center;padding:4px;font-family:'JetBrains Mono',monospace;}
.asset-info-name{font-size:.76rem;font-weight:700;color:white;margin-bottom:2px;}
.asset-info-desc{font-size:.63rem;color:var(--muted);line-height:1.5;}
.asset-btns{display:flex;flex-wrap:wrap;gap:5px;}
.asset-btn{font-size:.66rem;font-weight:700;padding:5px 9px;border-radius:6px;cursor:pointer;border:1px solid var(--border2);background:rgba(255,255,255,.05);color:rgba(240,234,214,.8);font-family:'Inter',sans-serif;transition:background .15s;white-space:nowrap;}
.asset-btn:hover{background:rgba(255,255,255,.1);color:var(--beige);}
.asset-btn.import{background:rgba(124,58,237,.18);color:var(--purple-lt);border-color:rgba(124,58,237,.3);}
.asset-btn.import:hover{background:rgba(124,58,237,.32);}
.asset-btn.clear{background:rgba(239,68,68,.1);color:#f87171;border-color:rgba(239,68,68,.2);}
.asset-btn.clear:hover{background:rgba(239,68,68,.2);}
.asset-status{font-size:.63rem;font-family:'JetBrains Mono',monospace;padding:3px 7px;border-radius:5px;text-align:center;}
.asset-status.ok{color:#4ade80;background:rgba(34,197,94,.1);}
.asset-status.none{color:var(--muted);}
.level-mini{background:rgba(0,0,0,.5);border:1px solid var(--border2);border-radius:6px;overflow:hidden;height:52px;display:flex;align-items:center;justify-content:center;}
.level-mini canvas{display:block;image-rendering:pixelated;}
.level-mini .no-level{font-size:.6rem;color:rgba(255,255,255,.2);font-family:'JetBrains Mono',monospace;}
.asset-links{display:flex;flex-wrap:wrap;gap:5px;}
.asset-link{font-size:.65rem;font-weight:700;padding:4px 9px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--muted);transition:all .15s;}
.asset-link:hover{color:var(--beige);background:rgba(255,255,255,.08);}
.upload-input{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

/* WORKSHOP OVERLAY */
.wk-overlay{position:fixed;inset:0;z-index:900;background:rgba(5,3,18,.94);backdrop-filter:blur(8px);display:none;flex-direction:column;}
.wk-overlay.open{display:flex;}
/* Side-by-side Workshop: dock the tool to the right edge while the game keeps
   running on the left , draw a sprite and watch it in-game without tab flipping */
.wk-overlay.wk-split{left:auto;width:min(680px,58vw);min-width:380px;border-left:2px solid rgba(124,58,237,.45);box-shadow:-16px 0 56px rgba(0,0,0,.65);}
.wk-overlay.wk-split .wk-hint{display:none;}
@media(max-width:1024px){.wk-overlay.wk-split{left:0;width:100vw;min-width:0;border-left:none;box-shadow:none;}}
/* ── PLAYER MODE: shared links open as a clean published game, not a dev studio ──
   Editor chrome hides, a floating player bar appears (Fullscreen · Remix).
   Removing the body class restores the full studio instantly. */
body.player-mode .studio-panel,
body.player-mode #studio-splitter,
body.player-mode .panel-fab,
body.player-mode #mobile-run-bar,
body.player-mode .mission-strip,
body.player-mode .vp-btn-row,
body.player-mode .controls-hint,
body.player-mode #controlsHint,
body.player-mode #shortcutsHint,
body.player-mode .handbook-fab{display:none!important;}
#playerBar{display:none;}
body.player-mode #playerBar{
    display:flex;position:fixed;bottom:max(14px,calc(env(safe-area-inset-bottom,0px) + 10px));
    left:50%;transform:translateX(-50%);z-index:6000;align-items:center;gap:9px;
    background:rgba(5,3,15,.92);backdrop-filter:blur(10px);
    border:1px solid rgba(124,58,237,.5);border-radius:999px;
    padding:7px 8px 7px 16px;max-width:min(94vw,480px);
    box-shadow:0 6px 28px rgba(0,0,0,.55),0 0 24px rgba(124,58,237,.18);
    animation:pb-in .35s cubic-bezier(.34,1.4,.64,1);
}
@keyframes pb-in{from{opacity:0;transform:translateX(-50%) translateY(70px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
#playerBar .pb-title{
    font-family:'Fredoka',sans-serif;font-weight:700;font-size:.82rem;color:#fff;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw;letter-spacing:.01em;
}
#playerBar button{
    background:rgba(124,58,237,.25);border:1px solid rgba(167,139,250,.55);color:#e8e0ff;
    border-radius:999px;padding:7px 14px;font-weight:700;font-size:.76rem;cursor:pointer;
    font-family:'Fredoka',sans-serif;-webkit-tap-highlight-color:transparent;white-space:nowrap;
    transition:background .14s,transform .1s;
}
#playerBar button:hover{background:rgba(124,58,237,.45);}
#playerBar button:active{transform:scale(.94);}
.wk-header{display:flex;align-items:center;gap:10px;padding:11px 18px;background:rgba(10,8,22,.99);border-bottom:2px solid rgba(124,58,237,.35);flex-shrink:0;}
.wk-logo{font-size:1.3rem;line-height:1;}
.wk-title{font-size:.88rem;font-weight:800;color:var(--purple-lt);white-space:nowrap;}
.wk-hint{font-size:.63rem;color:var(--muted);flex:1;padding:0 10px;line-height:1.4;}
.wk-close{background:rgba(239,68,68,.14);color:#f87171;border:1px solid rgba(239,68,68,.28);border-radius:8px;padding:6px 15px;font-size:.76rem;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;white-space:nowrap;transition:background .15s;}
.wk-close:hover{background:rgba(239,68,68,.28);}
.wk-tabs{display:flex;gap:5px;padding:9px 16px;background:rgba(0,0,0,.5);flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.05);flex-wrap:wrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.wk-tabs::-webkit-scrollbar{display:none;}
.wk-tab{padding:8px 14px;min-height:38px;font-size:.74rem;font-weight:700;border-radius:8px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.04);color:rgba(240,234,214,.48);cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif;-webkit-tap-highlight-color:transparent;}
.wk-tab:hover{color:var(--beige);background:rgba(255,255,255,.09);}
.wk-tab.on{background:rgba(124,58,237,.24);color:var(--purple-lt);border-color:rgba(124,58,237,.42);}
.wk-step{font-size:.58rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;margin-left:auto;color:rgba(167,139,250,.45);white-space:nowrap;}
.wk-frame{flex:1;min-height:0;position:relative;}
.wk-frame iframe{width:100%;height:100%;border:none;background:#0a0a12;}
.wk-badge{position:absolute;bottom:16px;right:16px;background:rgba(34,197,94,.18);border:1px solid rgba(34,197,94,.38);border-radius:10px;padding:10px 18px;font-size:.8rem;font-weight:800;color:#4ade80;box-shadow:0 6px 28px rgba(0,0,0,.55);pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;z-index:10;white-space:nowrap;}
.wk-badge.show{opacity:1;transform:translateY(0);}
.btn-workshop{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,rgba(124,58,237,.28),rgba(0,212,170,.12));border:1px solid rgba(124,58,237,.38);color:var(--purple-lt);padding:10px 16px;border-radius:9px;font-weight:800;font-size:.82rem;cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif;width:100%;letter-spacing:.01em;}
.btn-workshop:hover{background:linear-gradient(135deg,rgba(124,58,237,.44),rgba(0,212,170,.22));border-color:rgba(124,58,237,.6);color:white;}

/* SOUND TAB */
.sound-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);}
.sound-row:last-child{border-bottom:none;}
.sound-event{font-size:.7rem;font-weight:700;color:var(--text);min-width:60px;}
.sound-event-icon{font-size:.9rem;min-width:22px;}
select.sound-pick{flex:1;padding:5px 7px;font-size:.72rem;background:rgba(0,0,0,.4);border:1px solid var(--border2);color:var(--text);border-radius:6px;font-family:'JetBrains Mono',monospace;}
.sound-import-btn{font-size:.6rem;font-weight:700;padding:4px 7px;border-radius:5px;cursor:pointer;background:rgba(124,58,237,.2);color:var(--purple-lt);border:1px solid rgba(124,58,237,.3);font-family:'Inter',sans-serif;white-space:nowrap;}
.sound-import-btn:hover{background:rgba(124,58,237,.35);}
.sound-custom-badge{font-size:.58rem;color:#4ade80;font-family:'JetBrains Mono',monospace;white-space:nowrap;}
.toggle-row{display:flex;align-items:center;justify-content:space-between;}
.toggle-label{font-size:.74rem;font-weight:700;color:var(--text);}
.toggle-sub{font-size:.62rem;color:var(--muted);}
.toggle-switch{position:relative;width:38px;height:22px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-knob{position:absolute;cursor:pointer;inset:0;background:#2a2a3e;border-radius:22px;transition:.2s;}
.toggle-knob::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:var(--muted);border-radius:50%;transition:.2s;}
.toggle-switch input:checked+.toggle-knob{background:var(--purple);}
.toggle-switch input:checked+.toggle-knob::before{transform:translateX(16px);background:white;}

/* PILLS (Custom tab) */
.pill-row{display:flex;gap:5px;flex-wrap:wrap;}
.pill{flex:1;min-width:0;padding:6px 8px;border-radius:7px;font-size:.68rem;font-weight:700;background:rgba(255,255,255,.05);border:1px solid var(--border2);color:var(--muted);cursor:pointer;transition:background .12s,color .12s,border-color .12s;font-family:'Inter',sans-serif;text-align:center;}
.pill:hover{background:rgba(255,255,255,.1);color:var(--text);}
.pill.active{background:rgba(124,58,237,.3);color:var(--purple-lt);border-color:var(--purple);}

/* HEARTS DISPLAY */
#heartsDisplay{position:absolute;top:6px;right:8px;font-size:1.1rem;z-index:50;pointer-events:none;line-height:1;letter-spacing:1px;}

/* GAME OVER OVERLAY */
.go-overlay{display:none;position:absolute;inset:0;background:rgba(5,3,15,.9);backdrop-filter:blur(6px);flex-direction:column;align-items:center;justify-content:center;z-index:200;border-radius:inherit;overflow-y:auto;}
.go-overlay.show{display:flex;}
.go-overlay.show .go-box{animation:go-box-in .38s cubic-bezier(.2,1.3,.4,1) forwards;}
.go-box{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 36px;text-align:center;flex-shrink:0;width:100%;box-sizing:border-box;}
@keyframes go-box-in{0%{opacity:0;transform:translateY(22px) scale(.92);}100%{opacity:1;transform:none;}}
.go-title{font-size:2.4rem;font-weight:900;font-family:'Fredoka',sans-serif;color:white;text-shadow:0 0 24px rgba(124,58,237,.6);letter-spacing:.04em;}
.go-overlay.win .go-title{color:#fbbf24;text-shadow:0 0 32px rgba(251,191,36,.55),0 0 8px rgba(251,191,36,.3);}
.go-overlay.win{background:rgba(5,3,15,.88);}
.go-score{font-size:1.5rem;font-weight:800;color:var(--purple-lt);font-family:'JetBrains Mono',monospace;}
.go-hiscore{font-size:.88rem;color:var(--amber);font-family:'JetBrains Mono',monospace;opacity:.8;}
.go-newbest{font-size:1rem;font-weight:800;color:var(--amber);animation:go-pop .4s ease;}
@keyframes go-pop{0%{transform:scale(.5);opacity:0;}60%{transform:scale(1.2);}100%{transform:scale(1);opacity:1;}}
/* Grade badge */
#goGrade{font-size:2.8rem;font-weight:900;font-family:'Fredoka',sans-serif;width:64px;height:64px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 2px;animation:go-grade-pop .5s cubic-bezier(.2,1.4,.4,1) forwards;opacity:0;}
@keyframes go-grade-pop{0%{opacity:0;transform:scale(.3) rotate(-15deg);}65%{transform:scale(1.25) rotate(4deg);}100%{opacity:1;transform:scale(1) rotate(0deg);}}
#goGrade.grade-s{background:rgba(251,191,36,.18);color:#fbbf24;border:2px solid rgba(251,191,36,.45);}
#goGrade.grade-a{background:rgba(167,139,250,.18);color:#a78bfa;border:2px solid rgba(167,139,250,.45);}
#goGrade.grade-b{background:rgba(56,189,248,.18);color:#38bdf8;border:2px solid rgba(56,189,248,.45);}
#goGrade.grade-c{background:rgba(74,222,128,.18);color:#4ade80;border:2px solid rgba(74,222,128,.35);}
#goGrade.grade-d{background:rgba(248,113,113,.15);color:#f87171;border:2px solid rgba(248,113,113,.35);}
.go-play{font-size:1rem;padding:13px 36px;margin-top:6px;}
#goWinBanner{font-size:.9rem;color:#4ade80;font-weight:700;animation:go-pop .5s ease;}
.go-credit{font-size:.6rem;color:rgba(240,234,214,.25);margin-top:4px;font-family:'JetBrains Mono',monospace;}

/* INTRO OVERLAY */
.intro-overlay{display:none;position:absolute;inset:0;background:rgba(5,3,15,.93);backdrop-filter:blur(8px);flex-direction:column;align-items:center;justify-content:center;z-index:200;border-radius:inherit;overflow-y:auto;}
.intro-overlay.show{display:flex;touch-action:pan-y;}
.intro-overlay.show .intro-box{animation:intro-box-in .42s cubic-bezier(.2,1.3,.4,1) forwards;}
.intro-overlay.show .intro-genre-icon{animation:intro-icon-bounce .5s cubic-bezier(.2,1.4,.4,1) .15s both, intro-icon-idle 2.2s ease-in-out 0.7s infinite;}
@keyframes intro-icon-idle{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-7px) scale(1.06);}}
@keyframes intro-box-in{0%{opacity:0;transform:translateY(18px) scale(.94);}100%{opacity:1;transform:none;}}
@keyframes intro-icon-bounce{0%{transform:scale(.5) rotate(-12deg);opacity:0;}70%{transform:scale(1.2) rotate(5deg);}100%{transform:scale(1) rotate(0deg);opacity:1;}}
.intro-box{max-width:460px;display:flex;flex-direction:column;align-items:center;gap:14px;padding:32px 28px;text-align:center;flex-shrink:0;width:100%;box-sizing:border-box;}
.intro-genre-icon{font-size:2.8rem;line-height:1;}
.intro-game-title{font-size:2rem;font-weight:900;font-family:'Fredoka',sans-serif;color:white;line-height:1.2;}
.intro-story{font-size:.88rem;color:rgba(240,234,214,.78);line-height:1.75;max-height:110px;overflow-y:auto;}
.intro-start{font-size:1rem;padding:13px 40px;margin-top:6px;}
@keyframes intro-blink{0%,100%{opacity:.35;}50%{opacity:1;}}
/* ── Compact overlays on small landscape phones (canvas ~230-280px tall) ── */
@media(max-height:320px){
  .go-box{padding:10px 18px;gap:5px;}
  .go-title{font-size:1.5rem;}
  .go-score{font-size:1rem;}
  #goGrade{width:44px;height:44px;font-size:1.9rem;margin-bottom:0;}
  .go-newbest,.go-hiscore{font-size:.72rem;}
  .go-name-row{display:none!important;}
  .go-play{padding:9px 18px;font-size:.82rem;margin-top:2px;}
  .go-credit{display:none;}
  .intro-box{padding:10px 16px;gap:8px;}
  .intro-genre-icon{font-size:2rem;}
  .intro-game-title{font-size:1.35rem;}
  .intro-story{max-height:48px;font-size:.76rem;line-height:1.5;}
  .intro-start{padding:9px 28px;font-size:.85rem;margin-top:2px;}
}

/* TOAST */
.toast{
  position:fixed;bottom:22px;left:50%;
  transform:translateX(-50%) translateY(90px);
  background:rgba(124,58,237,.96);
  border:1.5px solid rgba(167,139,250,.55);
  border-radius:12px;padding:10px 20px;
  font-size:.82rem;font-weight:600;
  color:#fff;font-family:'Inter','Lora',sans-serif;
  letter-spacing:.015em;line-height:1.4;
  box-shadow:0 10px 36px rgba(0,0,0,.55);
  transition:transform .3s cubic-bezier(.34,1.35,.64,1),opacity .2s,background .18s,border-color .18s;
  z-index:9100;pointer-events:none;
  white-space:nowrap;max-width:92vw;text-align:center;
}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast.toast-success{background:rgba(5,150,105,.96);border-color:rgba(0,212,170,.6);}
.toast.toast-error  {background:rgba(185,28,28,.96);border-color:rgba(248,113,113,.6);}
.toast.toast-warn   {background:rgba(146,64,14,.96);border-color:rgba(251,191,36,.6);}

/* VIEWPORT */
.studio-viewport{flex:1;min-width:0;background:#06060e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:18px 14px;overflow:hidden;}
#engine-branding{font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;color:rgba(167,139,250,.55);letter-spacing:.02em;margin-right:auto;}
#engine-branding.playing{color:rgba(74,222,128,.75);}
#game-container {
    width: 100%;
    /* aspect-ratio keeps the container sized to the 640×400 game, no fixed px height needed */
    aspect-ratio: 1.6 / 1;
    overflow: hidden;
    display: block;
}
/* Idle viewport placeholder */
#gameWrap.idle{aspect-ratio:1.6/1;}
#idle-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  pointer-events:none;z-index:2;border-radius:10px;
  background:radial-gradient(ellipse at 50% 40%,rgba(124,58,237,.12) 0%,transparent 68%);
}
/* Genre carousel scrolling marquee */
.idle-carousel{
  width:100%;overflow:hidden;white-space:nowrap;
  display:flex;gap:0;
  -webkit-mask:linear-gradient(90deg,transparent,#fff 15%,#fff 85%,transparent);
  mask:linear-gradient(90deg,transparent,#fff 15%,#fff 85%,transparent);
}
.idle-carousel span{
  display:inline-block;font-size:.78rem;color:rgba(167,139,250,.55);font-family:'Fredoka',sans-serif;
  padding:3px 14px;margin:0 4px;background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.2);
  border-radius:20px;animation:carousel-scroll 22s linear infinite;white-space:nowrap;
}
.idle-carousel span:nth-child(even){animation-duration:26s;}
.idle-carousel span:nth-child(3n){animation-duration:19s;}
@keyframes carousel-scroll{0%{transform:translateX(120px);}100%{transform:translateX(-900px);}}
@keyframes idle-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
.idle-heading{font-family:'Fredoka One',sans-serif;font-size:1.65rem;font-weight:400;color:#fff;letter-spacing:.01em;text-align:center;line-height:1.25;}
.idle-heading span{color:#a78bfa;}
.idle-sub{font-size:.82rem;color:rgba(240,234,214,.45);font-family:'Inter',sans-serif;text-align:center;margin-top:-6px;letter-spacing:.01em;}
/* Step-by-step CTA row */
.idle-cta-row{display:flex;align-items:center;gap:8px;margin-top:4px;}
.idle-step{display:flex;align-items:center;gap:6px;font-size:.72rem;font-family:'Fredoka',sans-serif;color:rgba(240,234,214,.55);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:5px 10px;}
.idle-step-num{width:18px;height:18px;background:#7c3aed;color:#fff;border-radius:50%;font-size:.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;}
.idle-step-arrow{color:rgba(167,139,250,.35);font-size:.9rem;}
.idle-hint{font-size:.72rem;color:rgba(240,234,214,.22);font-family:'Inter',sans-serif;text-align:center;letter-spacing:.01em;}
.idle-hint strong{color:rgba(240,234,214,.4);font-weight:700;}
.controls-hint{font-size:.7rem;font-family:'JetBrains Mono',monospace;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--border);padding:5px 14px;border-radius:20px;flex-shrink:0;}
.mission-strip{width:100%;max-width:640px;background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.2);border-radius:8px;padding:7px 13px;display:flex;align-items:center;gap:9px;flex-shrink:0;}
.mission-text{font-size:.7rem;color:rgba(167,139,250,.85);line-height:1.4;}
.mission-text strong{color:var(--purple-lt);}

/* GAME WRAP + TOUCH CONTROLS */
.game-wrap{position:relative;flex-shrink:0;width:100%;max-width:640px;}
/* Prevent browser scroll / pinch-zoom hijacking touch events during gameplay */
#gameWrap,#game-container,#gameWrap canvas{touch-action:none;}
/* Fullscreen, JS sizes #game-container to fill screen; Phaser Scale.FIT letterboxes inside */
#gameWrap:fullscreen,#gameWrap:-webkit-full-screen,#gameWrap:-moz-full-screen,#gameWrap:-ms-fullscreen{
    width:100vw!important;height:100vh!important;max-width:none!important;
    background:#000!important;overflow:hidden!important;position:fixed!important;
    top:0!important;left:0!important;
}
#gameWrap:fullscreen #game-container,#gameWrap:-webkit-full-screen #game-container,
#gameWrap:-moz-full-screen #game-container,#gameWrap:-ms-fullscreen #game-container{
    border:none!important;border-radius:0!important;box-shadow:none!important;
    background:#000!important;display:block!important;
}
/* CSS-only fullscreen fallback for environments without the Fullscreen API
   (notably the Android WebView used by the packaged app). toggleFullscreen()
   adds .css-fs when requestFullscreen is unavailable, giving the same
   fill-the-viewport result without the native API. */
#gameWrap.css-fs{
    position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;
    max-width:none!important;z-index:2147483000!important;background:#000!important;overflow:hidden!important;
}
#gameWrap.css-fs #game-container{
    border:none!important;border-radius:0!important;box-shadow:none!important;
    background:#000!important;display:block!important;
}
/* ── Pinball split-screen flipper zones ─────────────────────────────────── */
.pb-flip-zone{
  position:absolute;top:0;bottom:0;width:50%;
  z-index:17;pointer-events:none;touch-action:none;
  -webkit-tap-highlight-color:transparent;display:none;
}
#pb-zone-l{left:0;}
#pb-zone-r{right:0;}
.pb-flip-hint{
  position:absolute;bottom:22px;
  width:88px;height:88px;border-radius:50%;
  background:rgba(124,58,237,.12);
  border:2px solid rgba(167,139,250,.28);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  transition:background .08s,border-color .08s,transform .07s,box-shadow .08s;
  pointer-events:none;user-select:none;
}
#pb-zone-l .pb-flip-hint{left:14px;}
#pb-zone-r .pb-flip-hint{right:14px;}
.pb-flip-hint .pb-icon{font-size:1.8rem;line-height:1;}
.pb-flip-hint .pb-lbl{font-size:.58rem;color:rgba(167,139,250,.65);letter-spacing:.06em;font-family:'Fredoka',sans-serif;font-weight:700;}
.pb-zone-active .pb-flip-hint{
  background:rgba(124,58,237,.55);
  border-color:rgba(167,139,250,.9);
  transform:scale(.9);
  box-shadow:0 0 22px rgba(124,58,237,.6);
}
.touch-controls{position:absolute;bottom:0;left:0;right:0;height:114px;display:none;justify-content:space-between;align-items:flex-end;padding:0 12px 10px;padding-bottom:max(10px,calc(env(safe-area-inset-bottom,0px) + 6px));pointer-events:none;z-index:20;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.4) 70%,transparent 100%);animation:tc-fade-in .3s ease-out;}
.tc-side{display:flex;gap:10px;pointer-events:auto;align-items:flex-end;}
.tc-btn{
  width:68px;height:68px;border-radius:50%;border:2px solid rgba(255,255,255,.22);
  background:rgba(10,8,22,.65);backdrop-filter:blur(10px);color:rgba(255,255,255,.92);
  font-size:1.45rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;
  transition:background .12s cubic-bezier(.4,0,.2,1),border-color .12s,transform .12s,box-shadow .12s;
  font-family:'Inter',sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.45);
  position:relative;pointer-events:auto;
}
.tc-btn:active,
.tc-btn:focus {
  background:rgba(124,58,237,.75);
  border-color:rgba(167,139,250,.9);
  transform:scale(.88);
  box-shadow:0 0 20px rgba(124,58,237,.6),0 2px 6px rgba(0,0,0,.3);
  outline:none;
}
.tc-btn.tc-pressed {
  background:rgba(124,58,237,.75)!important;
  border-color:rgba(167,139,250,.9)!important;
  transform:scale(.88)!important;
  box-shadow:0 0 20px rgba(124,58,237,.6),0 2px 6px rgba(0,0,0,.3)!important;
}
.tc-fire{background:rgba(239,68,68,.42);border-color:rgba(239,68,68,.6);}
.tc-fire:active,.tc-fire.tc-pressed{background:rgba(239,68,68,.88)!important;border-color:rgba(248,113,113,.95)!important;box-shadow:0 0 18px rgba(239,68,68,.5)!important;}
/* ── Rhythm lane tap buttons ─────────────────────────────────────────────── */
#rhythm-lanes{
  position:absolute;bottom:0;left:0;right:0;height:80px;
  display:none;flex-direction:row;z-index:18;
  -webkit-tap-highlight-color:transparent;
}
.rhythm-lane-btn{
  flex:1;height:100%;border:none;
  background:rgba(10,8,22,.6);backdrop-filter:blur(8px);
  border-top:3px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.75);font-size:1.05rem;font-weight:700;
  font-family:'Fredoka',sans-serif;letter-spacing:.06em;
  cursor:pointer;touch-action:none;user-select:none;
  transition:background .07s,border-color .07s,transform .06s;
  display:flex;align-items:center;justify-content:center;
  pointer-events:auto;
}
.rhythm-lane-btn:not(:last-child){border-right:1px solid rgba(255,255,255,.08);}
.rhythm-lane-btn.rl-pressed{transform:scaleY(.92);}
.rhythm-lane-btn[data-lane="0"]{border-top-color:rgba(167,139,250,.7);}
.rhythm-lane-btn[data-lane="1"]{border-top-color:rgba(248,113,113,.7);}
.rhythm-lane-btn[data-lane="2"]{border-top-color:rgba(251,191,36,.7);}
.rhythm-lane-btn[data-lane="3"]{border-top-color:rgba(0,212,170,.7);}
.rhythm-lane-btn[data-lane="0"].rl-pressed{background:rgba(124,58,237,.55);}
.rhythm-lane-btn[data-lane="1"].rl-pressed{background:rgba(239,68,68,.55);}
.rhythm-lane-btn[data-lane="2"].rl-pressed{background:rgba(245,158,11,.55);}
.rhythm-lane-btn[data-lane="3"].rl-pressed{background:rgba(0,212,170,.35);}
/* Dynamic floating joystick, spawns wherever the finger lands */
#tc-joy-zone{
  position:absolute;left:0;top:0;bottom:0;width:58%;
  z-index:15;pointer-events:auto;touch-action:none;
  -webkit-tap-highlight-color:transparent;display:none;
}
.joystick-wrap{
  position:absolute;width:124px;height:124px;
  margin-left:-62px;margin-top:-62px;
  opacity:0;pointer-events:none;
  transition:opacity .12s ease;
  z-index:16;left:0;top:0;
}
.joystick-wrap.joy-active{opacity:1;}
.joystick-base{
  width:124px;height:124px;border-radius:50%;
  background:rgba(8,6,20,.52);
  border:2px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);
  position:absolute;top:0;left:0;
}
.joystick-knob{
  width:50px;height:50px;border-radius:50%;
  background:rgba(124,58,237,.88);
  border:2.5px solid rgba(167,139,250,.96);
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  box-shadow:0 0 20px rgba(124,58,237,.7),0 0 6px rgba(167,139,250,.4);
}
/* Directional arrows inside joystick base, subtle hint */
.joystick-base::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 18%,rgba(255,255,255,.08) 0 4px,transparent 4px),
    radial-gradient(circle at 50% 82%,rgba(255,255,255,.08) 0 4px,transparent 4px),
    radial-gradient(circle at 18% 50%,rgba(255,255,255,.08) 0 4px,transparent 4px),
    radial-gradient(circle at 82% 50%,rgba(255,255,255,.08) 0 4px,transparent 4px);
  border-radius:50%;
}
.tc-jump{background:rgba(34,197,94,.28);border-color:rgba(34,197,94,.5);}
.tc-jump:active,.tc-jump.tc-pressed{background:rgba(34,197,94,.75)!important;border-color:rgba(74,222,128,.9)!important;}
/* Game error overlay */
.game-err-overlay{
  position:absolute;inset:0;z-index:220;
  background:rgba(5,3,15,.93);backdrop-filter:blur(12px);
  display:none;flex-direction:column;
  align-items:center;justify-content:center;
  gap:10px;padding:28px;text-align:center;
}
.game-err-icon{font-size:2.4rem;}
.game-err-msg{font-size:.9rem;font-weight:700;color:#f87171;font-family:'Inter',sans-serif;line-height:1.45;max-width:340px;}
.game-err-detail{font-size:.67rem;color:rgba(240,234,214,.5);font-family:'JetBrains Mono',monospace;max-width:320px;line-height:1.65;word-break:break-word;}

/* PANEL FAB (mobile only) */
@keyframes fab-pulse {
  0% { box-shadow: 0 4px 28px rgba(0,0,0,.6), 0 0 0 0 rgba(124,58,237,.8); }
  60% { box-shadow: 0 4px 28px rgba(0,0,0,.6), 0 0 0 14px rgba(124,58,237,0); }
  100% { box-shadow: 0 4px 28px rgba(0,0,0,.6), 0 0 0 0 rgba(124,58,237,0); }
}
@keyframes fab-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes tc-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.panel-fab{position:fixed;bottom:18px;right:18px;z-index:400;height:44px;border-radius:22px;background:var(--purple);border:2px solid rgba(167,139,250,.5);color:white;font-size:.9rem;font-weight:800;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0 16px;gap:6px;box-shadow:0 4px 28px rgba(0,0,0,.6);-webkit-tap-highlight-color:transparent;transition:background .15s,transform .12s;font-family:'Inter',sans-serif;letter-spacing:.01em;
  /* lift above iPhone home bar */
  bottom:max(18px,calc(env(safe-area-inset-bottom,0px) + 10px));
  right:max(18px,calc(env(safe-area-inset-right,0px) + 18px));
}
.panel-fab:active{background:#5b21b6;transform:scale(.92);}
.panel-fab[data-first-visit] {
  animation: fab-pulse 2.5s ease-out infinite, fab-bounce 1.4s ease-in-out infinite;
}

/* WELCOME OVERLAY */
#welcome-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
#welcome-overlay.show {
  display: flex;
  animation: overlay-fade-in 0.3s ease-out;
}
@keyframes overlay-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
#welcome-box {
  background: var(--panel);
  border: 2px solid rgba(124, 58, 237, 0.4);
  border-radius: 16px;
  padding: 32px;
  max-width: 440px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  animation: box-slide-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes box-slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
#welcome-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: white;
  margin-bottom: 12px;
  font-family: 'Fredoka', sans-serif;
}
#welcome-subtitle {
  font-size: 0.95rem;
  color: rgba(240, 234, 214, 0.7);
  margin-bottom: 20px;
  line-height: 1.6;
}
/* First-run starter picker (A1546) */
.welcome-tpl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.welcome-tpl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1.5px solid rgba(124, 58, 237, 0.35);
  background: rgba(124, 58, 237, 0.1);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.welcome-tpl:hover {
  background: rgba(124, 58, 237, 0.22);
  border-color: rgba(124, 58, 237, 0.7);
}
.welcome-tpl:active { transform: translateY(1px); }
.welcome-tpl .wt-ico { font-size: 1.4rem; line-height: 1; }
.welcome-tpl .wt-name { font-size: 0.86rem; font-weight: 700; color: #fff; }
.welcome-tpl .wt-tag { font-size: 0.62rem; color: rgba(240, 234, 214, 0.6); }
.welcome-hint {
  font-size: 0.72rem;
  color: rgba(240, 234, 214, 0.55);
  line-height: 1.5;
  margin-top: 12px;
}
.welcome-step {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.15);
}
.welcome-step:last-child {
  border-bottom: none;
  margin-bottom: 24px;
  padding-bottom: 0;
}
.step-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.step-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.step-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: white;
}
.step-desc {
  font-size: 0.8rem;
  color: rgba(240, 234, 214, 0.6);
  line-height: 1.4;
}
.welcome-buttons {
  display: flex;
  gap: 8px;
}
.welcome-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
  -webkit-tap-highlight-color: transparent;
}
.welcome-btn.primary {
  background: var(--purple);
  color: white;
  box-shadow: 0 4px 0 #5b21b6;
}
.welcome-btn.primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #5b21b6;
}
.welcome-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(240, 234, 214, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.welcome-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

/* TOOLTIPS */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted rgba(124, 58, 237, 0.5);
  cursor: help;
}
.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 1000;
  border: 1px solid rgba(124, 58, 237, 0.3);
  animation: tooltip-fade 0.2s ease-out;
}
@keyframes tooltip-fade {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* MOBILE HINT TOAST */
#mobile-hint-toast {
  position: fixed;
  bottom: max(75px, calc(env(safe-area-inset-bottom, 0px) + 65px));
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: rgba(10, 8, 22, 0.98);
  border: 1.5px solid rgba(124, 58, 237, 0.4);
  border-radius: 14px;
  padding: 12px 16px;
  color: rgba(240, 234, 214, 0.95);
  font-size: 0.85rem;
  font-weight: 600;
  max-width: 280px;
  text-align: center;
  z-index: 500;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s;
  opacity: 0;
}
#mobile-hint-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
#mobile-hint-toast .hint-close {
  margin-left: 8px;
  cursor: pointer;
  user-select: none;
}

/* PERFORMANCE METRICS */
#fps-counter {
  position: fixed;
  top: 60px;
  right: 12px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: #4ade80;
  z-index: 100;
  display: none;
  backdrop-filter: blur(8px);
  font-weight: 700;
  gap: 8px;
  flex-direction: column;
}
#fps-counter.show {
  display: flex;
}
.fps-metric {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 80px;
}
.fps-label {
  opacity: 0.7;
}
.fps-value {
  color: #86efac;
  font-weight: 800;
}

/* FULLSCREEN / SCREENSHOT BUTTONS */
.vp-btn-row{display:flex;gap:6px;align-items:center;flex-shrink:0;}
.vp-btn{background:rgba(255,255,255,.06);border:1px solid var(--border2);color:rgba(240,234,214,.7);padding:5px 10px;border-radius:7px;font-size:.7rem;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:background .14s;white-space:nowrap;}
.vp-btn:hover{background:rgba(255,255,255,.12);color:var(--beige);}

/* PRESET PILLS */
.preset-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px;}
.preset-pill{flex:1;min-width:0;padding:10px 5px;border-radius:10px;font-size:.68rem;font-weight:800;background:rgba(255,255,255,.05);border:1px solid var(--border2);color:var(--muted);cursor:pointer;transition:all .12s;font-family:'JetBrains Mono',monospace;text-align:center;}
.preset-pill:hover{background:rgba(255,255,255,.1);color:var(--text);}
.preset-pill.easy{border-color:rgba(34,197,94,.35);color:#4ade80;}
.preset-pill.easy:hover{background:rgba(34,197,94,.15);}
.preset-pill.normal{border-color:rgba(124,58,237,.35);color:var(--purple-lt);}
.preset-pill.normal:hover{background:rgba(124,58,237,.15);}
.preset-pill.hard{border-color:rgba(245,158,11,.35);color:#fbbf24;}
.preset-pill.hard:hover{background:rgba(245,158,11,.15);}
.preset-pill.chaos{border-color:rgba(239,68,68,.35);color:#f87171;}
.preset-pill.chaos:hover{background:rgba(239,68,68,.15);}

/* TUTORIAL OVERLAY */
.tut-overlay{display:none;position:fixed;inset:0;z-index:800;background:rgba(5,3,18,.88);backdrop-filter:blur(10px);flex-direction:column;align-items:center;justify-content:center;padding:20px;}
.tut-overlay.show{display:flex;}
.tut-box{max-width:500px;width:100%;background:var(--panel2);border:1px solid rgba(124,58,237,.4);border-radius:16px;padding:28px 28px 22px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;}
.tut-step-dots{display:flex;gap:7px;}
.tut-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);transition:background .2s;}
.tut-dot.on{background:var(--purple);}
.tut-icon{font-size:3rem;line-height:1;}
.tut-title{font-size:1.3rem;font-weight:900;color:white;font-family:'Fredoka',sans-serif;}
.tut-body{font-size:.88rem;color:rgba(240,234,214,.75);line-height:1.7;max-width:380px;}
.tut-actions{display:flex;gap:8px;width:100%;justify-content:center;}
.tut-skip{background:none;border:none;color:var(--muted);font-size:.72rem;cursor:pointer;font-family:'Inter',sans-serif;padding:4px 8px;text-decoration:underline;}
.tut-skip:hover{color:var(--beige);}

/* ACHIEVEMENTS in Game Over */
.go-achs{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;max-width:380px;}
.go-ach{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.28);border-radius:8px;padding:5px 10px;font-size:.68rem;font-weight:700;color:#fbbf24;font-family:'JetBrains Mono',monospace;animation:go-pop .4s ease;}
/* Attention pulse for the Result Code button after beating a friend's challenge */
@keyframes attention-pulse{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.6);}70%{box-shadow:0 0 0 12px rgba(251,191,36,0);}}
.btn-attention{animation:attention-pulse 1.5s ease-out infinite;}
#goBeatCreator{display:none;font-size:.85rem;font-weight:800;color:#fbbf24;background:rgba(251,191,36,.12);border:1px dashed rgba(251,191,36,.45);border-radius:9px;padding:6px 14px;animation:go-pop .5s ease;}

/* ── WIN CONFETTI ──────────────────────────────────────────── */
.confetti-wrap{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;z-index:1;}
.confetti-piece{position:absolute;top:-12px;animation:confetti-fall linear forwards;}
@keyframes confetti-fall{0%{opacity:1;transform:translateY(0) rotate(0deg) scaleX(1);}80%{opacity:.85;}100%{opacity:0;transform:translateY(440px) rotate(660deg) scaleX(-1);}}

/* ── GAME OVER TITLE GLITCH ─────────────────────────────────── */
@keyframes go-glitch{
  0%,94%,100%{text-shadow:0 0 24px rgba(124,58,237,.6);transform:none;}
  96%{text-shadow:3px 0 0 #f87171,-3px 0 0 #38bdf8;transform:skewX(-7deg) translateX(2px);}
  97%{text-shadow:-2px 0 0 #f87171,2px 0 0 #38bdf8;transform:skewX(5deg);}
  98%{text-shadow:0 0 24px rgba(124,58,237,.6);transform:skewX(-1deg);}
}
.go-overlay:not(.win) .go-title{animation:go-glitch 5.5s ease-in-out infinite 0.5s;}

/* ── TIME PLAYED ────────────────────────────────────────────── */
.go-time{font-size:.68rem;color:var(--muted);font-family:'JetBrains Mono',monospace;opacity:.8;}

/* ── CONTROLS HINT KEY BADGES ───────────────────────────────── */
.ctrl-key{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-bottom:2px solid rgba(255,255,255,.07);border-radius:4px;padding:1px 6px;font-family:'JetBrains Mono',monospace;font-size:.63rem;color:var(--beige);font-style:normal;display:inline-block;line-height:1.5;vertical-align:middle;}

/* ── BUTTON PRESS FEEDBACK ──────────────────────────────────── */
.btn-run:not(:disabled):active{transform:translateY(2px)!important;box-shadow:0 1px 0 var(--green-dk)!important;}
.btn-run.restarting:active{box-shadow:0 1px 0 #4c1d95!important;}
.btn-sm:active{transform:scale(0.95) translateY(1px)!important;opacity:.82!important;}

/* ── RANGE SLIDER STYLING ───────────────────────────────────── */
input[type=range]{-webkit-appearance:none;appearance:none;height:5px;background:rgba(255,255,255,.1);border-radius:99px;outline:none;cursor:pointer;border:none;padding:0;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--purple-lt);cursor:pointer;box-shadow:0 0 0 3px rgba(124,58,237,.22);transition:box-shadow .12s,transform .1s;}
input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 5px rgba(124,58,237,.35);transform:scale(1.15);}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--purple-lt);cursor:pointer;border:none;box-shadow:0 0 0 3px rgba(124,58,237,.22);}
input[type=range]::-moz-range-track{height:5px;background:rgba(255,255,255,.1);border-radius:99px;}

/* ── TEXT SELECTION ─────────────────────────────────────────── */
::selection{background:rgba(124,58,237,.4);color:#fff;}


/* INITIALS / NAME ENTRY */
.go-name-row{display:flex;flex-direction:column;align-items:center;gap:6px;}
.go-name-label{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.go-initials-wrap{display:flex;align-items:center;gap:7px;}
.go-initials{width:68px;padding:7px 10px;font-size:1.3rem;font-weight:900;font-family:'JetBrains Mono',monospace;text-align:center;text-transform:uppercase;letter-spacing:.25em;background:rgba(124,58,237,.14);border:2px solid rgba(124,58,237,.4);border-radius:8px;color:#fff;outline:none;}
.go-initials:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,58,237,.25);}
.go-initials-save{padding:7px 14px;background:var(--purple);border:none;border-radius:8px;color:white;font-weight:800;font-size:.78rem;cursor:pointer;transition:background .15s;}
.go-initials-save:hover{background:#6d28d9;}

/* SPRITE EDITOR */
.se-wrap{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;}
.se-canvas-wrap{position:relative;flex-shrink:0;}
#spriteEdCanvas{display:block;border-radius:6px;border:2px solid rgba(124,58,237,.35);cursor:crosshair;image-rendering:pixelated;}
.se-palette{display:flex;flex-wrap:wrap;gap:5px;max-width:168px;}
.se-swatch{width:24px;height:24px;border-radius:5px;cursor:pointer;border:2px solid transparent;transition:transform .1s,border-color .1s;flex-shrink:0;position:relative;}
.se-swatch:hover{transform:scale(1.15);}
.se-swatch.active{border-color:#fff;transform:scale(1.18);}
.se-swatch.se-eraser{background:linear-gradient(135deg,#1c2840 50%,#334155 50%);font-size:.7rem;display:flex;align-items:center;justify-content:center;}
.se-swatch.se-custom{background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);font-size:.68rem;display:flex;align-items:center;justify-content:center;}
.se-tools{display:flex;flex-direction:column;gap:8px;}

/* TOP-3 LEADERBOARD */
.go-lb{display:flex;flex-direction:column;gap:5px;min-width:220px;background:rgba(0,0,0,.3);border-radius:10px;padding:10px 14px;}
.go-lb-title{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--purple-lt);margin-bottom:2px;}
.go-lb-row{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:.73rem;}
.go-lb-rank{width:18px;text-align:center;color:var(--muted);}
.go-lb-rank.gold{color:#fbbf24;}
.go-lb-rank.silver{color:#94a3b8;}
.go-lb-rank.bronze{color:#c8956c;}
.go-lb-name{color:#a78bfa;font-weight:800;min-width:32px;letter-spacing:.05em;}
.go-lb-score{flex:1;color:var(--text);font-weight:700;}
.go-lb-date{color:var(--muted);font-size:.62rem;}
.go-lb-new{color:#4ade80;font-size:.62rem;font-weight:800;}

/* POWER-UP INDICATOR (top of viewport) */
.powerup-hud{position:absolute;top:6px;left:8px;display:flex;gap:5px;z-index:50;pointer-events:none;}
.pu-badge{font-size:.72rem;font-weight:800;padding:3px 8px;border-radius:6px;font-family:'JetBrains Mono',monospace;animation:pu-pop .25s ease;opacity:0;transition:opacity .2s;}
.pu-badge.show{opacity:1;}
@keyframes pu-pop{0%{transform:scale(.5) translateY(8px);opacity:0;}100%{transform:scale(1) translateY(0);opacity:1;}}
.pu-shield{background:rgba(56,189,248,.18);border:1px solid rgba(56,189,248,.4);color:#7dd3fc;}
.pu-x2{background:rgba(245,158,11,.18);border:1px solid rgba(245,158,11,.4);color:#fbbf24;}
.pu-speed{background:rgba(34,197,94,.18);border:1px solid rgba(34,197,94,.4);color:#4ade80;}
.pu-life{background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.4);color:#f87171;}

/* ── EVENTS TAB ─────────────────────────────────────────────────────────── */
#tab-btn-events{display:none;}
#studioRoot.advanced-unlocked #tab-btn-events{display:block;}
@keyframes tab-pulse{0%,100%{color:var(--muted);}50%{color:white;background:rgba(124,58,237,.3);}}
.tab-btn.just-revealed{animation:tab-pulse 0.7s ease 4;}
.evt-intro{font-size:.68rem;color:var(--muted);line-height:1.65;background:rgba(124,58,237,.07);border:1px solid rgba(124,58,237,.18);border-radius:8px;padding:8px 10px;}
.evt-list{display:flex;flex-direction:column;gap:7px;}
.evt-row{background:var(--panel2);border:1px solid var(--border2);border-radius:9px;padding:9px 10px 8px;display:flex;flex-direction:column;gap:6px;position:relative;}
.evt-row.evt-disabled{opacity:.38;}
.evt-half{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.evt-half+.evt-half{border-top:1px solid var(--border);padding-top:6px;}
.evt-chip{font-size:.55rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:2px 6px;border-radius:4px;flex-shrink:0;}
.evt-chip.when{background:rgba(56,189,248,.13);color:#7dd3fc;border:1px solid rgba(56,189,248,.22);}
.evt-chip.then{background:rgba(52,211,153,.11);color:#6ee7b7;border:1px solid rgba(52,211,153,.2);}
/* ── VISUAL BLOCK EVENT EDITOR ──────────────────────────────────────────── */
.evt-card{background:var(--panel2);border:1px solid var(--border2);border-radius:12px;padding:10px 10px 8px;display:flex;flex-direction:column;gap:7px;}
.evt-card.evt-disabled{opacity:.38;}
.evt-card-head{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.evt-card-preview{font-size:.6rem;color:var(--muted);font-family:'Inter',sans-serif;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.evt-card-btns{display:flex;gap:4px;flex-shrink:0;}
.evt-blk-toggle{background:none;border:1px solid var(--border2);border-radius:4px;color:var(--muted);font-size:.58rem;font-weight:700;cursor:pointer;padding:2px 7px;font-family:'JetBrains Mono',monospace;}
.evt-blk-toggle.on{color:#4ade80;border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.08);}
.evt-blk-del{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);border-radius:4px;color:#f87171;font-size:.6rem;cursor:pointer;padding:2px 7px;}
.evt-blocks{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.evt-block{flex:1;min-width:130px;border-radius:9px;padding:7px 9px;display:flex;flex-direction:column;gap:5px;}
.evt-block-when{background:rgba(34,197,94,.09);border:1.5px solid rgba(34,197,94,.28);}
.evt-block-then{background:rgba(239,68,68,.09);border:1.5px solid rgba(239,68,68,.26);}
.evt-blk-label{font-size:.52rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:3px;margin-bottom:1px;}
.evt-block-when .evt-blk-label{color:#4ade80;}
.evt-block-then .evt-blk-label{color:#f87171;}
.evt-blk-body{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.evt-blk-arr{font-size:1.2rem;color:rgba(240,234,214,.25);flex-shrink:0;align-self:center;}
.evt-blk-sel{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:var(--text);font-size:.66rem;padding:4px 5px;outline:none;font-family:'Inter',sans-serif;cursor:pointer;flex:1;min-width:0;}
.evt-blk-num{width:54px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:var(--text);font-size:.66rem;padding:4px 5px;outline:none;font-family:'JetBrains Mono',monospace;flex-shrink:0;}
.evt-blk-txt{flex:1;min-width:80px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:var(--text);font-size:.66rem;padding:4px 5px;outline:none;font-family:'Inter',sans-serif;}
.evt-blk-unit{font-size:.58rem;color:var(--muted);font-family:'JetBrains Mono',monospace;flex-shrink:0;}
/* ── STUDIO SPLIT HANDLE ─────────────────────────────────────────────────── */
#studio-splitter{width:6px;background:rgba(255,255,255,.03);border-left:1px solid var(--border);cursor:col-resize;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;user-select:none;}
#studio-splitter:hover,#studio-splitter.dragging{background:rgba(124,58,237,.3);border-color:rgba(124,58,237,.45);}
.splitter-grip{width:3px;height:32px;background:rgba(255,255,255,.14);border-radius:99px;pointer-events:none;}
/* ── GO STATS ROW ────────────────────────────────────────────────────────── */
.go-stats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.go-stat{display:flex;flex-direction:column;align-items:center;gap:1px;background:rgba(255,255,255,.04);border:1px solid var(--border2);border-radius:8px;padding:5px 11px;}
.go-stat-val{font-size:.88rem;font-weight:800;color:var(--text);font-family:'JetBrains Mono',monospace;}
.go-stat-lbl{font-size:.5rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.evt-sel{flex:1;min-width:0;background:rgba(0,0,0,.4);border:1px solid var(--border2);color:var(--text);padding:4px 5px;border-radius:6px;font-size:.68rem;font-family:'Inter',sans-serif;cursor:pointer;}
.evt-num{width:52px;background:rgba(0,0,0,.4);border:1px solid var(--border2);color:var(--text);padding:4px 5px;border-radius:6px;font-size:.68rem;text-align:center;font-family:'JetBrains Mono',monospace;}
.evt-txt{flex:1;min-width:60px;background:rgba(0,0,0,.4);border:1px solid var(--border2);color:var(--text);padding:4px 6px;border-radius:6px;font-size:.68rem;}
.evt-unit{font-size:.6rem;color:var(--muted);flex-shrink:0;}
.evt-row-btns{position:absolute;top:6px;right:6px;display:flex;gap:2px;}
.evt-ibtn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.75rem;padding:2px 5px;border-radius:4px;line-height:1;transition:color .12s,background .12s;}
.evt-ibtn:hover{color:var(--beige);background:rgba(255,255,255,.08);}
.evt-ibtn.del:hover{color:#f87171;background:rgba(239,68,68,.1);}
.btn-add-evt{width:100%;padding:9px;border-radius:8px;background:rgba(124,58,237,.08);border:1px dashed rgba(124,58,237,.3);color:var(--purple-lt);font-size:.74rem;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:background .14s;margin-top:2px;}
.btn-add-evt:hover{background:rgba(124,58,237,.2);}
.evt-empty{text-align:center;padding:22px 10px 14px;color:var(--muted);font-size:.72rem;line-height:1.8;}
.evt-empty-icon{font-size:2rem;display:block;margin-bottom:6px;opacity:.45;}
.evt-log{font-size:.62rem;font-family:'JetBrains Mono',monospace;color:rgba(52,211,153,.65);min-height:16px;transition:opacity .4s;}

/* ── NODE EVENT EDITOR ───────────────────────────────────────────────────── */
.node-rule{background:var(--panel2);border:1px solid var(--border2);border-radius:13px;padding:10px;display:flex;flex-direction:column;gap:8px;}
.node-rule.node-disabled{opacity:.38;}
.node-row{display:flex;align-items:stretch;gap:7px;flex-wrap:wrap;}
.node{flex:1;min-width:130px;display:flex;align-items:flex-start;gap:9px;border-radius:11px;padding:10px 12px;cursor:pointer;transition:filter .14s,transform .1s,box-shadow .14s;-webkit-tap-highlight-color:transparent;user-select:none;position:relative;}
.node:hover{filter:brightness(1.13);box-shadow:0 0 0 2px rgba(124,58,237,.25);}
.node:active{transform:scale(.97);}
.node-when{background:rgba(34,197,94,.1);border:2px solid rgba(34,197,94,.32);}
.node-then{background:rgba(239,68,68,.09);border:2px solid rgba(239,68,68,.28);}
.node-icon{font-size:1.5rem;line-height:1;flex-shrink:0;margin-top:1px;}
.node-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.node-chip{font-size:.48rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;}
.node-when .node-chip{color:#4ade80;}
.node-then .node-chip{color:#f87171;}
.node-label{font-size:.76rem;font-weight:700;color:var(--text);line-height:1.3;}
.node-val-row{display:flex;align-items:center;gap:4px;margin-top:2px;}
.node-num-inp{width:54px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.15);border-radius:6px;color:var(--text);font-size:.7rem;padding:3px 6px;outline:none;font-family:'JetBrains Mono',monospace;}
.node-num-inp:focus{border-color:var(--purple);}
.node-txt-inp{width:100%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.15);border-radius:6px;color:var(--text);font-size:.7rem;padding:3px 6px;outline:none;font-family:'Inter',sans-serif;margin-top:2px;}
.node-txt-inp:focus{border-color:var(--purple);}
.node-unit{font-size:.6rem;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.node-tap{font-size:.48rem;color:rgba(255,255,255,.22);text-transform:uppercase;letter-spacing:.08em;margin-top:3px;}
.node-connector{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex-shrink:0;padding:4px 0;align-self:center;}
.node-conn-line{width:2px;height:14px;background:linear-gradient(180deg,rgba(34,197,94,.4),rgba(239,68,68,.4));border-radius:1px;}
.node-conn-arrow{font-size:.75rem;color:rgba(240,234,214,.3);line-height:1;}
.node-btns{display:flex;gap:5px;align-items:center;flex-shrink:0;align-self:flex-start;padding-top:1px;}
.node-tog{background:none;border:1px solid var(--border2);border-radius:5px;color:var(--muted);font-size:.58rem;font-weight:700;cursor:pointer;padding:5px 9px;font-family:'JetBrains Mono',monospace;transition:all .12s;white-space:nowrap;}
.node-tog.on{color:#4ade80;border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.08);}
.node-del{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);border-radius:5px;color:#f87171;font-size:.72rem;cursor:pointer;padding:5px 9px;transition:background .12s;}
.node-del:hover{background:rgba(239,68,68,.22);}
/* Node picker overlay */
#nodePicker{display:none;position:fixed;inset:0;z-index:9200;touch-action:pan-y;}
#nodePicker.open{display:flex;flex-direction:column;justify-content:flex-end;}
.np-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(5px);}
.np-box{position:relative;background:var(--panel);border-radius:20px 20px 0 0;border-top:1px solid var(--border2);padding:18px 14px max(18px,calc(env(safe-area-inset-bottom,0px)+14px));max-height:78vh;overflow-y:auto;display:flex;flex-direction:column;gap:13px;animation:np-slide .24s cubic-bezier(.2,1.3,.4,1);}
@keyframes np-slide{from{transform:translateY(100%);}to{transform:translateY(0);}}
.np-title{font-family:'Fredoka',sans-serif;font-size:1.1rem;font-weight:700;color:white;text-align:center;}
.np-subtitle{font-size:.68rem;color:var(--muted);text-align:center;margin-top:-8px;}
.np-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
@media(min-width:420px){.np-grid{grid-template-columns:repeat(3,1fr);}}
.np-opt{background:var(--panel2);border:1.5px solid var(--border2);border-radius:11px;padding:11px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;transition:background .12s,border-color .12s,transform .1s;-webkit-tap-highlight-color:transparent;}
.np-opt:hover{background:rgba(124,58,237,.13);border-color:rgba(124,58,237,.35);}
.np-opt:active{transform:scale(.95);}
.np-opt.np-sel{background:rgba(124,58,237,.22);border-color:rgba(124,58,237,.55);box-shadow:0 0 0 2px rgba(124,58,237,.2);}
.np-opt-icon{font-size:1.5rem;line-height:1;}
.np-opt-label{font-size:.62rem;font-weight:700;color:var(--text);line-height:1.3;}
.np-cancel{background:rgba(255,255,255,.06);border:1px solid var(--border2);border-radius:11px;color:var(--muted);font-size:.82rem;font-weight:700;cursor:pointer;padding:11px;font-family:'Inter',sans-serif;transition:background .12s;}
.np-cancel:hover{background:rgba(255,255,255,.11);}

/* ── GENRE PICKER ───────────────────────────────────────────────────────────── */
.genre-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
.starter-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(240,234,214,.8);padding:8px 6px;border-radius:8px;font-size:.72rem;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s,border-color .15s;text-align:center;}
.starter-btn:hover{background:rgba(124,58,237,.18);border-color:rgba(124,58,237,.4);color:#a78bfa;}
.genre-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:10px 5px 8px;cursor:pointer;text-align:center;transition:background .14s,border-color .14s,transform .1s,box-shadow .14s;display:flex;flex-direction:column;align-items:center;gap:4px;-webkit-tap-highlight-color:transparent;user-select:none;}
.genre-card:hover{background:rgba(124,58,237,.15);border-color:rgba(124,58,237,.4);transform:translateY(-1px);}
.genre-card:active{transform:scale(.94);background:rgba(124,58,237,.25);transition-duration:.05s;}
.genre-card.on{background:rgba(124,58,237,.22);border-color:var(--purple);box-shadow:0 0 0 2px rgba(124,58,237,.28),inset 0 1px 0 rgba(167,139,250,.12);}
.gc-icon{font-size:1.65rem;line-height:1;display:block;transition:transform .18s cubic-bezier(.2,1.4,.4,1);}
.genre-card:hover .gc-icon{transform:scale(1.25) rotate(-8deg);}
.genre-card.on .gc-icon{transform:scale(1.1);}
.gc-name{font-size:.59rem;font-weight:700;color:var(--muted);line-height:1.2;text-align:center;}
.genre-card.on .gc-name{color:var(--purple-lt);}
/* Genre description */
.genre-desc{font-size:.67rem;color:rgba(240,234,214,.4);line-height:1.55;min-height:16px;transition:opacity .2s;margin-top:1px;font-style:italic;}
/* Step number badges */
.step-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;background:linear-gradient(135deg,var(--purple),#a78bfa);color:white;border-radius:50%;font-size:.58rem;font-weight:900;margin-right:6px;flex-shrink:0;vertical-align:middle;line-height:1;box-shadow:0 2px 8px rgba(124,58,237,.45);}
/* Autosave badge */
#autosave-badge{font-size:.56rem;color:#4ade80;font-family:'JetBrains Mono',monospace;opacity:0;transition:opacity .4s;font-weight:700;margin-left:auto;}
#autosave-badge.show{opacity:1;}
/* Run button kbd chip */
.run-kbd{font-size:.6rem;background:rgba(255,255,255,.18);border-radius:4px;padding:1px 6px;font-family:'JetBrains Mono',monospace;font-weight:700;letter-spacing:.02em;margin-left:6px;vertical-align:middle;}
/* Resume last game button */
.btn-resume{width:100%;background:rgba(167,139,250,.12);color:var(--purple-lt);border:1px dashed rgba(124,58,237,.4);padding:9px 14px;border-radius:9px;font-weight:700;font-size:.78rem;cursor:pointer;transition:background .15s,border-color .15s;font-family:'Inter',sans-serif;text-align:center;letter-spacing:.01em;}
.btn-resume:hover{background:rgba(124,58,237,.25);border-color:var(--purple);border-style:solid;}
/* Shortcuts modal */
.sk-grid{display:flex;flex-direction:column;gap:2px;}
.sk-row{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.sk-row:last-child{border-bottom:none;}
.sk-key{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-bottom:2px solid rgba(255,255,255,.08);border-radius:5px;padding:2px 8px;font-family:'JetBrains Mono',monospace;font-size:.68rem;color:rgba(240,234,214,.9);flex-shrink:0;min-width:60px;text-align:center;}
.sk-label{font-size:.72rem;color:rgba(240,234,214,.65);font-family:'Inter',sans-serif;}
/* Mobile quick-run bar */
#mobile-run-bar{display:none;align-items:center;gap:8px;background:rgba(8,6,18,.98);border-top:1px solid rgba(124,58,237,.28);padding:8px 12px;flex-shrink:0;width:100%;padding-bottom:max(8px,calc(env(safe-area-inset-bottom,0px) + 6px));}
#mrb-genre{flex:1;font-size:.72rem;font-weight:700;color:var(--purple-lt);font-family:'Inter',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#mrb-run{background:var(--green);color:white;border:none;padding:9px 18px;border-radius:9px;font-weight:800;font-size:.82rem;cursor:pointer;box-shadow:0 3px 0 var(--green-dk);font-family:'Inter',sans-serif;-webkit-tap-highlight-color:transparent;flex-shrink:0;}
#mrb-run.restarting{background:var(--purple);box-shadow:0 3px 0 #4c1d95;}
#mrb-fs{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.6);border-radius:8px;padding:8px 10px;font-size:.88rem;cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0;}

@media(max-width:900px){.studio-panel{width:280px;}}
@media(pointer:coarse){
  .touch-controls{display:flex!important;}
  .controls-hint{display:none;}
}
@media(max-width:768px){
  body{overflow:hidden;}
  .studio{flex-direction:column;}
  .studio-viewport{flex:1;min-height:0;padding:6px 4px 4px;overflow:hidden;}
  .studio-panel{
    position:fixed;bottom:0;left:0;right:0;width:100%;max-height:75vh;
    z-index:300;border-radius:18px 18px 0 0;border-right:none;
    border-top:2px solid rgba(124,58,237,.45);
    box-shadow:0 -12px 64px rgba(0,0,0,.85),0 -2px 16px rgba(124,58,237,.15);
    transform:translateY(102%);
    transition:transform .32s cubic-bezier(.34,1.56,.64,1),box-shadow .32s;
    overflow-y:auto;
    /* push content above iPhone home bar */
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .studio-panel.panel-open{
    transform:translateY(0);
    box-shadow:0 -12px 64px rgba(0,0,0,.85),0 -2px 16px rgba(124,58,237,.25);
  }
  .panel-fab{display:flex!important;}
  .touch-controls{display:flex!important;}
  .controls-hint{display:none;}
  .mission-strip{display:none;}
  #engine-branding{display:none;}
  /* Preview control row: wrap instead of overflowing the clipped viewport */
  .vp-btn-row{flex-wrap:wrap;justify-content:center;width:100%;flex-shrink:1;row-gap:4px;}
  .vp-btn{font-size:.62rem;padding:5px 8px;}
  /* Bigger touch targets on small screens */
  .tc-btn{width:74px;height:74px;font-size:1.55rem;}
  #tc-pause{width:50px!important;height:50px!important;font-size:1.05rem!important;}
  .touch-controls{height:120px;padding:0 10px 11px;}
  /* Game wrap fills available space fully */
  .game-wrap{width:100%!important;max-width:100%!important;}
  /* Idle placeholder on mobile */
  #gameWrap.idle{aspect-ratio:unset;min-height:160px;max-height:200px;}
  #idle-placeholder .idle-heading{font-size:1.1rem;}
  #idle-placeholder .idle-sub{font-size:.7rem;}
  #idle-placeholder .idle-cta-row{display:none;} /* too cramped on small screens */
  .idle-carousel{margin-bottom:0;}
  /* Mobile run bar visible */
  #mobile-run-bar{display:flex!important;}
  /* Genre grid: 4 columns on mobile to fit more above the fold */
  .genre-grid{grid-template-columns:repeat(4,1fr)!important;gap:4px!important;}
  .gc-icon{font-size:1.45rem;}
  .gc-name{font-size:.52rem;}
  .genre-card{padding:7px 2px 5px;border-radius:8px;}
  /* Shortcuts modal not shown on mobile */
  #shortcutsModal .sk-grid .sk-key{min-width:50px;}
  /* Compact form groups */
  .form-group{padding: 0;}
  .form-group label{font-size:.65rem;margin-bottom:2px;}
  /* Hide number inputs next to range (range is sufficient on mobile) */
  .form-group>input[type=number]{display:none!important;}
  /* Compact section labels */
  .sec-label{font-size:.68rem;}
  /* Tab bar text smaller */
  .tab-btn{font-size:.56rem;padding:9px 2px 7px;}
  .tab-icon{font-size:1.05rem;}
  .tab-lbl{font-size:.58rem;}
  /* Asset blocks more compact */
  .asset-block{padding:8px 10px;gap:6px;}
  /* Overlays must be full-screen on mobile, the scaled canvas is too small */
  .go-overlay.show, .intro-overlay.show {
    position: fixed !important;
    inset: 0 !important;
    z-index: 7000 !important;
    border-radius: 0 !important;
    touch-action: pan-y !important;
  }
  .go-box { padding: 14px 20px; gap: 7px; max-height: 100vh; overflow-y: auto; }
  .go-title { font-size: 1.8rem; }
  .go-score { font-size: 1.2rem; }
  #goGrade { width: 48px; height: 48px; font-size: 2rem; }
  .go-play { font-size: .9rem; padding: 11px 20px; }
}
/* ── Portrait phone: optimise layout so canvas sits at top and controls below ── */
@media(max-width:700px) and (orientation:portrait){
  /* Align canvas to top so space below it is free for touch controls */
  .studio-viewport{justify-content:flex-start!important;padding-top:2px!important;}
  /* Game wrap: full width, no max-width cap (canvas uses aspect-ratio) */
  .game-wrap{max-width:100%!important;}
  /* Slightly smaller buttons in portrait, less canvas overlap */
  .tc-btn{width:60px!important;height:60px!important;font-size:1.3rem!important;}
  #tc-pause{width:44px!important;height:44px!important;font-size:.95rem!important;}
  /* Slightly wider joystick zone so it's easier to grab in portrait */
  #tc-joy-zone{width:62%!important;}
  /* Mobile run bar compact */
  #mobile-run-bar{padding:6px 10px;}
}
/* ── HANDBOOK MODAL ─────────────────────────────────────────────────────── */
#handbookModal{display:none;position:fixed;inset:0;z-index:9500;background:rgba(5,3,15,.96);backdrop-filter:blur(10px);overflow-y:auto;-webkit-overflow-scrolling:touch;}
#handbookModal.open{display:block;}
.hb-wrap{max-width:640px;margin:0 auto;padding:20px 16px 60px;display:flex;flex-direction:column;gap:20px;}
.hb-header{display:flex;align-items:center;gap:12px;padding:4px 0 8px;border-bottom:1px solid rgba(124,58,237,.3);}
.hb-header-icon{font-size:2.4rem;line-height:1;flex-shrink:0;}
.hb-header-text{flex:1;}
.hb-header-title{font-family:'Fredoka',sans-serif;font-size:1.55rem;font-weight:700;color:white;line-height:1.2;}
.hb-header-sub{font-size:.72rem;color:var(--muted);margin-top:2px;}
.hb-close{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:10px;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:8px 12px;flex-shrink:0;transition:background .15s;}
.hb-close:hover{background:rgba(255,255,255,.16);color:white;}
/* Section cards */
.hb-section{background:var(--panel2);border:1px solid var(--border2);border-radius:14px;overflow:hidden;}
.hb-sec-head{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;}
.hb-sec-head:hover{background:rgba(255,255,255,.03);}
.hb-sec-icon{font-size:1.5rem;line-height:1;flex-shrink:0;}
.hb-sec-title{font-family:'Fredoka',sans-serif;font-size:1.05rem;font-weight:700;color:white;flex:1;}
.hb-sec-caret{font-size:.8rem;color:var(--muted);transition:transform .2s;flex-shrink:0;}
.hb-section.open .hb-sec-caret{transform:rotate(180deg);}
.hb-sec-body{display:none;padding:0 16px 16px;border-top:1px solid var(--border);}
.hb-section.open .hb-sec-body{display:block;}
/* Steps */
.hb-steps{display:flex;flex-direction:column;gap:12px;margin-top:12px;}
.hb-step{display:flex;gap:12px;align-items:flex-start;}
.hb-step-num{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--purple),#a78bfa);color:white;font-family:'Fredoka',sans-serif;font-size:1rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 10px rgba(124,58,237,.4);}
.hb-step-body{flex:1;padding-top:4px;}
.hb-step-title{font-size:.9rem;font-weight:700;color:white;margin-bottom:3px;}
.hb-step-desc{font-size:.78rem;color:var(--muted);line-height:1.6;}
/* Slider cards */
.hb-sliders{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.hb-slider-card{background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.18);border-radius:10px;padding:10px 13px;display:flex;gap:11px;align-items:flex-start;}
.hb-slider-icon{font-size:1.4rem;line-height:1;flex-shrink:0;margin-top:1px;}
.hb-slider-title{font-size:.85rem;font-weight:700;color:var(--purple-lt);margin-bottom:3px;}
.hb-slider-desc{font-size:.76rem;color:var(--muted);line-height:1.55;}
/* If/Then table */
.hb-ifthen{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.hb-rule{background:rgba(0,0,0,.3);border-radius:10px;overflow:hidden;border:1px solid var(--border2);}
.hb-rule-when{background:rgba(34,197,94,.1);border-bottom:1px solid rgba(34,197,94,.2);padding:8px 12px;display:flex;gap:8px;align-items:center;}
.hb-rule-then{background:rgba(239,68,68,.08);border-bottom:1px solid rgba(239,68,68,.15);padding:8px 12px;display:flex;gap:8px;align-items:center;}
.hb-rule-result{background:rgba(0,0,0,.2);padding:7px 12px;font-size:.7rem;color:var(--muted);line-height:1.5;}
.hb-rule-badge{font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:99px;flex-shrink:0;}
.hb-rule-badge.when{background:rgba(34,197,94,.2);color:#4ade80;border:1px solid rgba(34,197,94,.3);}
.hb-rule-badge.then{background:rgba(239,68,68,.2);color:#f87171;border:1px solid rgba(239,68,68,.3);}
.hb-rule-text{font-size:.8rem;color:white;line-height:1.4;}
/* Tip / challenge card */
.hb-tip{background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.25);border-radius:10px;padding:12px 14px;margin-top:12px;display:flex;gap:10px;}
.hb-tip-icon{font-size:1.3rem;flex-shrink:0;}
.hb-tip-body{font-size:.78rem;color:rgba(240,234,214,.8);line-height:1.65;}
.hb-tip-body strong{color:#fbbf24;}
/* FAQ */
.hb-faq{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.hb-q{background:rgba(255,255,255,.04);border:1px solid var(--border2);border-radius:10px;overflow:hidden;}
.hb-q-head{padding:10px 13px;font-size:.82rem;font-weight:700;color:var(--purple-lt);cursor:pointer;display:flex;align-items:center;gap:8px;-webkit-tap-highlight-color:transparent;}
.hb-q-head::before{content:'Q:';font-family:'Fredoka',sans-serif;font-size:.9rem;color:#a78bfa;flex-shrink:0;}
.hb-q-body{display:none;padding:0 13px 11px;font-size:.77rem;color:var(--muted);line-height:1.65;border-top:1px solid var(--border);}
.hb-q.open .hb-q-body{display:block;}
/* Guide trigger button (inside panel + floating) */
.btn-handbook{display:flex;align-items:center;justify-content:center;gap:7px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.28);color:#fbbf24;padding:9px 14px;border-radius:9px;font-weight:800;font-size:.78rem;cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif;width:100%;}
.btn-handbook:hover{background:rgba(251,191,36,.2);border-color:rgba(251,191,36,.5);}
.handbook-fab{position:fixed;bottom:70px;right:18px;z-index:401;width:44px;height:44px;border-radius:50%;background:rgba(251,191,36,.9);border:none;color:#0a0a12;font-size:1.2rem;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(251,191,36,.4);-webkit-tap-highlight-color:transparent;transition:background .15s;}
.handbook-fab:hover{background:#fbbf24;}
@media(max-width:768px){.handbook-fab{display:flex!important;}}
/* ── EXTRAS CARD GRID ──────────────────────────────────────────── */
.extras-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px;}
.ec-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:11px 6px 9px;border-radius:12px;border:1px solid rgba(124,58,237,.22);background:rgba(124,58,237,.08);cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;font-family:'Fredoka',sans-serif;}
.ec-btn:hover{background:rgba(124,58,237,.18);border-color:rgba(124,58,237,.4);}
.ec-btn.open{background:rgba(124,58,237,.28);border-color:rgba(124,58,237,.6);box-shadow:0 0 0 2px rgba(124,58,237,.25);}
.ec-icon{font-size:1.5rem;line-height:1;}
.ec-name{font-size:.6rem;font-weight:700;color:#a78bfa;text-align:center;line-height:1.2;}
.extra-panel{display:none;background:rgba(0,0,0,.2);border:1px solid rgba(124,58,237,.2);border-radius:10px;padding:12px;margin-bottom:8px;flex-direction:column;gap:9px;}
.extra-panel.open{display:flex;}
/* ── POWER PICKS ────────────────────────────────────────────────────────────
   The draft overlay sits inside #gameWrap, not over the whole page, so it
   still reads correctly in immersive play, in the split-pane studio, and in a
   shared player-mode link without three separate layouts. Sizes are in cqw/vmin
   so a card is thumb-sized on a phone and still proportionate on a desktop. */
#ppOverlay{
  position:absolute;inset:0;z-index:210;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2.2vmin,16px);
  padding:clamp(10px,3vmin,26px);
  background:radial-gradient(ellipse at 50% 40%,rgba(30,12,60,.93),rgba(5,3,15,.97));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  font-family:'Fredoka',system-ui,sans-serif;text-align:center;
  animation:pp-fade .18s ease;
}
@keyframes pp-fade{from{opacity:0}to{opacity:1}}
#ppOverlay .pp-head{display:flex;flex-direction:column;gap:2px;}
#ppOverlay .pp-title{
  font-size:clamp(.95rem,3.4vmin,1.5rem);font-weight:800;letter-spacing:.10em;color:#fff;
  text-shadow:0 0 18px rgba(192,132,252,.75);
}
#ppOverlay .pp-sub{font-size:clamp(.56rem,1.7vmin,.78rem);color:rgba(240,234,214,.62);}
#ppOverlay .pp-cards{
  display:flex;gap:clamp(6px,1.6vmin,12px);justify-content:center;align-items:stretch;
  flex-wrap:nowrap;width:100%;max-width:640px;
}
#ppOverlay .pp-card{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:clamp(7px,1.8vmin,14px) clamp(4px,1.2vmin,10px);
  border-radius:clamp(9px,1.8vmin,14px);
  border:1.5px solid var(--rc);
  background:linear-gradient(165deg,rgba(255,255,255,.10),rgba(255,255,255,.02));
  box-shadow:0 0 0 rgba(0,0,0,0),0 6px 22px rgba(0,0,0,.45);
  color:#e8edf8;cursor:pointer;font-family:inherit;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  animation:pp-deal .34s cubic-bezier(.2,1.3,.4,1) backwards;
  transition:transform .12s ease,box-shadow .18s ease,background .18s ease;
}
@keyframes pp-deal{from{opacity:0;transform:translateY(26px) rotate(-4deg) scale(.9)}to{opacity:1;transform:none}}
#ppOverlay .pp-card:hover,#ppOverlay .pp-card:focus-visible{
  background:linear-gradient(165deg,rgba(255,255,255,.18),rgba(255,255,255,.05));
  box-shadow:0 0 26px var(--rg),0 8px 26px rgba(0,0,0,.5);outline:none;
}
#ppOverlay .pp-card:active{transform:scale(.95);}
#ppOverlay .pp-rar{
  font-size:clamp(.4rem,1.05vmin,.5rem);font-weight:800;letter-spacing:.14em;color:var(--rc);
  display:flex;align-items:center;justify-content:center;gap:4px;
}
#ppOverlay .pp-key{
  display:inline-flex;align-items:center;justify-content:center;min-width:11px;height:11px;
  border-radius:3px;border:1px solid var(--rc);color:var(--rc);
  font-size:.42rem;letter-spacing:0;opacity:.8;
}
/* Touch devices have no keyboard, so the hint is noise there. */
@media (hover:none) and (pointer:coarse){ #ppOverlay .pp-key{display:none;} }
#ppOverlay .pp-icon{font-size:clamp(1.4rem,4.6vmin,2.1rem);line-height:1.1;
  filter:drop-shadow(0 0 10px var(--rg));}
#ppOverlay .pp-name{font-size:clamp(.62rem,1.9vmin,.9rem);font-weight:700;line-height:1.15;}
#ppOverlay .pp-desc{font-size:clamp(.5rem,1.45vmin,.68rem);color:rgba(240,234,214,.7);line-height:1.3;}
#ppOverlay .pp-owned{font-size:clamp(.45rem,1.2vmin,.58rem);color:rgba(240,234,214,.45);margin-top:2px;}
#ppOverlay .pp-feeds{
  margin-top:3px;font-size:clamp(.45rem,1.2vmin,.58rem);font-weight:700;color:#fbbf24;
  text-shadow:0 0 8px rgba(251,191,36,.6);
}
#ppOverlay .pp-foot{display:flex;gap:10px;align-items:center;}
#ppOverlay .pp-reroll,#ppOverlay .pp-skip{
  font-family:inherit;font-size:clamp(.55rem,1.6vmin,.74rem);cursor:pointer;
  padding:clamp(5px,1.2vmin,9px) clamp(11px,2.6vmin,20px);border-radius:999px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
#ppOverlay .pp-reroll{background:rgba(124,58,237,.28);border:1px solid rgba(167,139,250,.5);color:#ddd6fe;}
#ppOverlay .pp-reroll:disabled{opacity:.35;cursor:default;}
#ppOverlay .pp-skip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:rgba(240,234,214,.65);}

/* Build strip , always-on readout of what the run has become. */
#ppHud{
  position:absolute;left:6px;bottom:6px;z-index:120;display:none;
  gap:3px;flex-wrap:wrap;max-width:65%;pointer-events:none;
}
#ppHud .pp-chip{
  display:inline-flex;align-items:center;gap:1px;
  font-size:clamp(.6rem,1.7vmin,.8rem);line-height:1;
  padding:2px 4px;border-radius:6px;
  background:rgba(5,3,15,.62);border:1px solid var(--rc,rgba(255,255,255,.2));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
#ppHud .pp-chip b{font-size:.62em;color:#fff;opacity:.85;}
#ppHud .pp-chip-syn{
  border-color:#fbbf24;background:rgba(251,191,36,.2);
  animation:pp-syn-pulse 1.8s ease-in-out infinite;
}
@keyframes pp-syn-pulse{0%,100%{box-shadow:0 0 0 rgba(251,191,36,0)}50%{box-shadow:0 0 10px rgba(251,191,36,.8)}}

/* Synergy announcement. Deliberately the loudest thing in the game. */
#ppSynergy{
  position:absolute;left:50%;top:34%;transform:translate(-50%,-50%) scale(.7);
  z-index:230;pointer-events:none;opacity:0;text-align:center;
  font-family:'Fredoka',system-ui,sans-serif;
}
#ppSynergy.show{animation:pp-syn-in 2.6s cubic-bezier(.2,1.4,.4,1) forwards;}
@keyframes pp-syn-in{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(-6deg)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(2deg)}
  20%{transform:translate(-50%,-50%) scale(1) rotate(0)}
  80%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-58%) scale(.96)}
}
#ppSynergy .pp-syn-tag{
  font-size:clamp(.5rem,1.5vmin,.66rem);font-weight:800;letter-spacing:.22em;color:#fbbf24;
}
#ppSynergy .pp-syn-name{
  font-size:clamp(1.2rem,5.2vmin,2.3rem);font-weight:900;letter-spacing:.04em;color:#fff;
  text-shadow:0 0 14px #fbbf24,0 0 38px rgba(251,191,36,.75),0 3px 0 rgba(0,0,0,.6);
}
#ppSynergy .pp-syn-desc{
  font-size:clamp(.56rem,1.7vmin,.8rem);color:rgba(255,255,255,.85);margin-top:2px;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}

/* Run summary on the game-over card. */
.pp-summary{margin:8px 0 2px;display:flex;flex-direction:column;gap:5px;align-items:center;}
.pp-sum-head{font-size:.54rem;font-weight:800;letter-spacing:.18em;color:rgba(240,234,214,.5);}
.pp-sum-row{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;}
.pp-sum-chip{
  font-size:.58rem;padding:2px 7px;border-radius:999px;
  border:1px solid var(--rc,rgba(255,255,255,.2));color:#e8edf8;
  background:rgba(255,255,255,.05);
}
.pp-sum-chip.pp-sum-syn{border-color:#fbbf24;color:#fbbf24;background:rgba(251,191,36,.14);font-weight:700;}

/* Very short landscape phones: drop the descriptions so three cards still fit. */
@media (max-height:430px){
  #ppOverlay .pp-desc{display:none;}
  #ppOverlay .pp-icon{font-size:1.5rem;}
}
@media (prefers-reduced-motion:reduce){
  #ppOverlay,#ppOverlay .pp-card,#ppSynergy.show{animation-duration:.01ms!important;}
  #ppHud .pp-chip-syn{animation:none;}
}


/* ── Header consolidation: second bar slimmed to save VH (auto-injected) ── */
.jvds-site-nav + .site-header,
.jvds-site-nav + .hdr,
.jvds-site-nav + header.site-header,
.jvds-site-nav + header.hdr {
  height:36px !important;
  min-height:36px !important;
  padding:0 10px !important;
}
.jvds-site-nav + .site-header .site-logo img,
.jvds-site-nav + .hdr .hdr-logo img { display:none !important; }
@media(pointer:coarse){
  .tb,.bb-tb,.tool-btn,.shape-btn,.char-btn,.tb-btn,.sw,.bb-sw,.colour-swatch,.seq-cell,.loop-dot,.pad,.kit-btn,button {
    min-height:32px;
  }
  .seq-cell{ height:36px !important; min-height:36px !important; }
  .z-btn,.lb{ min-width:32px; min-height:32px; }
}
.tb-row{animation:go-pop .35s ease backwards;}${rows.map((_, i) => `.tb-row:nth-child(${i + 1}){animation-delay:${Math.min(i * 60, 600)}ms;}`).join('')}