/* -- JVDS Site Nav -- */


:root{
  --bg:#0d0d14;--panel:#13131f;--panel2:#1a1a2e;--panel3:#222238;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.14);
  --accent:#e94560;--accent2:#f5a623;--accent3:#00d4aa;--accent4:#5bc0f8;
  --text:#f0f0f0;--muted:#8b93a0;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{height:100%;}
body{height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);color:var(--text);font-family:'JetBrains Mono',monospace;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;}
input,select{user-select:text;-webkit-user-select:text;}
#canvas-area{touch-action:none;}
#left-panel,#right-panel,.layer-list,.frame-scroll{touch-action:pan-y;}
.bb-content,.bb-panel,#bbPal{touch-action:pan-x;}
button,a,.tb,.bb-tb,.sw,.bb-sw,.rc,.frame-item,.layer-item,.z-btn,.lb,.size-btn,.play-btn,.ab,.bb-tab{touch-action:manipulation;}

.classic-bridge{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border2);background:linear-gradient(135deg,rgba(233,69,96,.16),rgba(0,212,170,.08),rgba(13,13,20,.96));flex-shrink:0;}
.classic-bridge strong{display:block;font-family:'Fredoka',cursive;font-size:1rem;color:var(--accent2);margin-bottom:2px;}
.classic-bridge span{display:block;font-size:.62rem;color:rgba(240,240,240,.72);line-height:1.35;}
.classic-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.classic-actions a,.help-btn{background:none;border:1px solid var(--border2);color:var(--muted);border-radius:999px;font-family:inherit;font-size:.68rem;padding:6px 10px;cursor:pointer;transition:all .12s;text-decoration:none;white-space:nowrap;}
.classic-actions a{background:var(--accent3);border-color:var(--accent3);color:#001713;font-family:'Fredoka',cursive;font-weight:700;}
.classic-actions a:hover,.help-btn:hover{filter:brightness(1.08);color:var(--text);}

/* APP */
#app{flex:1;display:flex;min-height:0;}

/* LEFT PANEL */
#left-panel{width:160px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;}
#right-panel{width:160px;flex-shrink:0;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;}

/* CANVAS AREA */
#canvas-area{flex:1;min-width:0;position:relative;overflow:hidden;background:#111118;display:flex;align-items:center;justify-content:center;}
#canvas-wrap{position:relative;line-height:0;display:inline-block;}
#main-canvas{position:relative;display:block;cursor:crosshair;touch-action:none;image-rendering:pixelated;image-rendering:crisp-edges;}
#onion-canvas{position:absolute;top:0;left:0;pointer-events:none;image-rendering:pixelated;image-rendering:crisp-edges;}
#cursor-canvas{position:absolute;top:0;left:0;pointer-events:none;image-rendering:pixelated;image-rendering:crisp-edges;}

/* PANEL SECTIONS */
.ps{padding:6px 8px;}
.pt{font-size:.5rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.pdiv{height:1px;background:var(--border);margin:2px 0;}

/* TOOLS */
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;}
.tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:7px 4px;border-radius:7px;border:1px solid transparent;background:rgba(255,255,255,.03);cursor:pointer;font-size:.5rem;color:var(--muted);transition:all .12s;user-select:none;}
.tb:hover{background:rgba(255,255,255,.07);color:var(--text);}
.tb.on{background:rgba(233,69,96,.15);border-color:var(--accent);color:var(--accent);}
.tb .ico{font-size:1rem;line-height:1;}

/* COLOURS */
.pal{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;margin-bottom:5px;}
.sw{aspect-ratio:1;border-radius:3px;cursor:pointer;border:1.5px solid transparent;transition:transform .1s;}
.sw:hover{transform:scale(1.15);}
.sw.on{border-color:white;transform:scale(1.15);}
.colour-row{display:flex;gap:4px;align-items:center;margin-bottom:5px;}
.cur-colours{position:relative;width:34px;height:34px;flex-shrink:0;cursor:pointer;}
.cur-bg{width:22px;height:22px;border-radius:4px;border:2px solid rgba(255,255,255,.3);position:absolute;bottom:0;right:0;z-index:1;background:#000;}
.cur-fg{width:24px;height:24px;border-radius:4px;border:2px solid white;position:absolute;top:0;left:0;z-index:2;}
.recent-row{display:flex;gap:2px;flex-wrap:wrap;}
.rc{width:14px;height:14px;border-radius:2px;cursor:pointer;border:1px solid rgba(255,255,255,.1);}
input[type=color]{width:28px;height:22px;border:none;border-radius:4px;cursor:pointer;background:none;padding:0;flex-shrink:0;}

/* SIZE */
.size-row{display:flex;gap:3px;flex-wrap:wrap;}
.size-btn{font-size:.5rem;padding:2px 5px;border-radius:4px;border:1px solid var(--border2);background:transparent;color:var(--muted);cursor:pointer;font-family:inherit;transition:all .12s;}
.size-btn:hover,.size-btn.on{background:var(--accent3);color:#000;border-color:var(--accent3);}
.cust-size{display:flex;gap:3px;align-items:center;margin-top:4px;}
.cust-size input{width:34px;padding:2px 3px;border-radius:3px;border:1px solid var(--border2);background:var(--panel3);color:var(--text);font-size:.55rem;font-family:inherit;}
.cust-size button{font-size:.5rem;padding:2px 5px;border-radius:3px;border:none;background:var(--accent3);color:#000;cursor:pointer;}

/* ZOOM */
.zoom-row{display:flex;align-items:center;gap:3px;}
.z-btn{min-width:20px;height:20px;padding:0 5px;border-radius:4px;border:1px solid var(--border2);background:transparent;color:var(--text);cursor:pointer;font-size:.65rem;display:flex;align-items:center;justify-content:center;font-family:inherit;}
.z-btn:hover{background:var(--panel3);}
.z-val{font-size:.6rem;color:var(--accent2);min-width:26px;text-align:center;}

/* ACTION BUTTONS */
.ab{width:100%;padding:5px 6px;border-radius:6px;border:none;cursor:pointer;font-family:'Fredoka',cursive;font-size:.75rem;font-weight:600;margin-bottom:3px;transition:all .12s;text-align:center;}
.ab-p{background:var(--accent);color:white;}
.ab-s{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--border2);}
.ab-g{background:var(--accent3);color:#000;}
.ab-r{background:rgba(233,69,96,.1);color:var(--accent);border:1px solid rgba(233,69,96,.3);}
.ab-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:3px;}
.ab-grid .ab{margin-bottom:0;font-size:.62rem;padding:5px 2px;}
#left-sticky{position:sticky;bottom:0;margin-top:auto;background:var(--panel);border-top:1px solid var(--border);padding:7px 8px 8px;box-shadow:0 -8px 14px rgba(0,0,0,.45);z-index:6;}
#left-sticky .ab-grid{margin-bottom:0;}
/* -- Start / help overlay -- */
.start-modal{max-width:680px!important;width:calc(100vw - 32px);text-align:left!important;}
.start-lead{font-size:.8rem;color:var(--muted);line-height:1.6;margin:0 0 14px;}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px;}
.tpl{background:var(--panel3,rgba(255,255,255,.04));border:1px solid var(--border2);border-radius:10px;padding:12px 10px;cursor:pointer;text-align:center;transition:transform .12s,border-color .12s,background .12s;font-family:inherit;color:var(--text);}
.tpl:hover,.tpl:focus-visible{transform:translateY(-3px);border-color:var(--accent);background:rgba(233,69,96,.08);outline:none;}
.tpl .tpl-ico{font-size:1.6rem;display:block;margin-bottom:6px;}
.tpl .tpl-name{font-size:.78rem;font-weight:700;display:block;margin-bottom:3px;}
.tpl .tpl-desc{font-size:.6rem;color:var(--muted);line-height:1.45;display:block;}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:0 0 6px;padding:0;list-style:none;}
.steps li{background:rgba(255,255,255,.03);border-left:3px solid var(--accent3);border-radius:0 8px 8px 0;padding:9px 11px;font-size:.68rem;line-height:1.55;color:var(--text);}
.steps b{color:var(--accent3);display:block;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px;}

/* LAYERS */
.layer-list{display:flex;flex-direction:column;gap:2px;max-height:120px;overflow-y:auto;}
.layer-item{display:flex;align-items:center;gap:4px;padding:4px 5px;border-radius:5px;border:1px solid transparent;background:rgba(255,255,255,.02);cursor:pointer;transition:all .12s;}
.layer-item:hover{background:rgba(255,255,255,.05);}
.layer-item.on{background:rgba(91,192,248,.1);border-color:rgba(91,192,248,.25);}
.layer-vis{font-size:.7rem;cursor:pointer;opacity:.35;}
.layer-vis.show{opacity:1;}
.layer-name{font-size:.55rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);}
.layer-thumb{width:18px;height:18px;border-radius:2px;border:1px solid var(--border2);background:repeating-conic-gradient(#333 0% 25%,#222 0% 50%) 0 0/6px 6px;flex-shrink:0;overflow:hidden;}
.layer-thumb canvas{width:100%;height:100%;image-rendering:pixelated;}
.row-btns{display:flex;gap:2px;margin-top:4px;}
.lb{flex:1;height:18px;border-radius:3px;border:1px solid var(--border2);background:transparent;color:var(--muted);cursor:pointer;font-size:.55rem;display:flex;align-items:center;justify-content:center;font-family:inherit;}
.lb:hover{color:var(--text);background:var(--panel3);}

/* FRAMES */
.frame-scroll{display:flex;gap:3px;overflow-x:auto;padding-bottom:2px;}
.frame-item{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;}
.frame-thumb{width:32px;height:32px;border-radius:4px;border:2px solid var(--border2);background:repeating-conic-gradient(#333 0% 25%,#222 0% 50%) 0 0/6px 6px;overflow:hidden;transition:border-color .12s;}
.frame-thumb canvas{width:100%;height:100%;image-rendering:pixelated;}
.frame-item.on .frame-thumb{border-color:var(--accent);}
.frame-num{font-size:.45rem;color:var(--muted);}
.fps-row{display:flex;align-items:center;gap:4px;margin-top:4px;}
.fps-row input{width:32px;padding:2px 3px;border-radius:3px;border:1px solid var(--border2);background:var(--panel3);color:var(--text);font-size:.55rem;font-family:inherit;}
.play-btn{padding:3px 8px;border-radius:5px;border:none;background:var(--accent);color:white;font-family:'Fredoka',cursive;font-size:.7rem;cursor:pointer;}
.play-btn.playing{background:#555;}

/* BOTTOM BAR (mobile) */
#bottom-bar{display:none;flex-direction:column;background:var(--panel);border-top:1px solid var(--border2);flex-shrink:0;position:relative;z-index:20;}
.bb-tabs{display:flex;}
.bb-tab{flex:1;padding:5px 2px;font-size:.55rem;text-align:center;cursor:pointer;color:var(--muted);border:none;background:transparent;border-bottom:2px solid transparent;font-family:inherit;}
.bb-tab.on{color:var(--accent);border-bottom-color:var(--accent);}
.bb-content{height:134px;padding:5px 8px;overflow-x:auto;overflow-y:auto;}
.bb-panel{display:none;gap:6px;align-items:center;flex-wrap:wrap;row-gap:8px;}
.bb-panel.on{display:flex;}
.bb-tb{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 7px;border-radius:6px;border:1px solid transparent;background:rgba(255,255,255,.03);cursor:pointer;font-size:.45rem;color:var(--muted);flex-shrink:0;}
.bb-tb.on{background:rgba(233,69,96,.15);border-color:var(--accent);color:var(--accent);}
.bb-tb .ico{font-size:.9rem;}
.bb-sw{width:22px;height:22px;border-radius:3px;cursor:pointer;border:2px solid transparent;flex-shrink:0;}
.bb-sw.on{border-color:white;}

/* FOOTER */
.site-footer{height:30px;background:rgba(8,8,16,.98);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:14px;flex-shrink:0;}
.site-footer a{font-size:.58rem;color:rgba(255,255,255,.22);text-decoration:none;}
.site-footer a:hover{color:rgba(255,255,255,.55);}

/* MODAL - sits below sticky header so nav stays clickable */
.modal-overlay{display:none;position:fixed;inset:68px 0 0 0;background:rgba(0,0,0,.75);z-index:999;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal{background:var(--panel2);border:1px solid var(--border2);border-radius:12px;padding:18px;min-width:260px;max-width:320px;width:90%;}
.modal h3,.modal h2{font-family:'Fredoka',cursive;font-size:1rem;color:var(--accent2);margin-bottom:10px;}
.modal p{font-size:.68rem;color:var(--muted);margin-bottom:10px;line-height:1.55;}
.modal-btns{display:flex;gap:7px;}
.modal-btns button{flex:1;padding:7px;border-radius:7px;border:none;cursor:pointer;font-family:'Fredoka',cursive;font-size:.8rem;}
.m-ok{background:var(--accent);color:white;}
.m-cancel{background:rgba(255,255,255,.08);color:var(--text);}
#preview-canvas{border:1px solid var(--border2);border-radius:5px;image-rendering:pixelated;max-width:100%;display:block;margin:6px auto;}

/* TOAST */
#toast{position:fixed;bottom:44px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--accent);color:var(--accent2);padding:5px 14px;border-radius:7px;font-size:.72rem;z-index:10005;opacity:0;transition:opacity .3s;pointer-events:none;max-width:90vw;text-align:center;white-space:normal;word-break:break-word;}

::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px;}

/* SIDEBAR GROUPS (desktop declutter) */
.ps-group{border-top:1px solid var(--border);}
.ps-group>summary{list-style:none;cursor:pointer;padding:8px;font-size:.55rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px;transition:color .12s;}
.ps-group>summary:hover{color:var(--text);background:rgba(255,255,255,.03);}
.ps-group>summary::-webkit-details-marker{display:none;}
.ps-group>summary::after{content:"▾";margin-left:auto;font-size:.6rem;}
.ps-group[open]>summary{color:var(--text);}
.ps-group[open]>summary::after{transform:rotate(180deg);}
.ps-group .ps{padding-top:2px;}

/* Keep the coach and the floating feedback/share buttons from stacking on top
   of a first-run or dialog modal */
body.ps-modal-open .mascot-coach{display:none!important;}
body.ps-modal-open #jvfb-btn,
body.ps-modal-open #jvfb-panel,
body.ps-modal-open #jvds-share-btn,
body.ps-modal-open .jvds-share-toast{display:none!important;}
/* Focus mode (first-mission): hide competing feedback/share buttons while the
   learner works through the guided steps; they return at the finish step. */
body.ps-focus #jvfb-btn,
body.ps-focus #jvfb-panel,
body.ps-focus #jvds-share-btn,
body.ps-focus .jvds-share-toast{display:none!important;}

/* MOBILE */
@media(max-width:699px){
  .site-header .header-inner{max-width:100%;padding-inline:10px;gap:6px;}
  .site-header .logo-link{gap:6px;font-size:1rem;min-width:0;}
  .site-header .logo-name{display:none;}
  .site-header .theme-toggle,.site-header .nav-toggle{padding-inline:8px;}
  .classic-bridge{align-items:flex-start;flex-direction:column;padding:9px 12px;gap:8px;}
  /* In column mode the inline flex-basis values (170px / 360px) would become
     heights and balloon the bar, starving #canvas-area to 0. Let the rows size
     to their content instead. */
  .classic-bridge>div{flex:0 0 auto!important;min-width:0!important;width:100%;}
  .classic-actions{width:100%;overflow-x:auto;padding-bottom:2px;justify-content:flex-start!important;flex-wrap:nowrap!important;}
  #left-panel,#right-panel{display:none!important;}
  #bottom-bar{display:flex!important;padding-bottom:env(safe-area-inset-bottom);}
  .bb-tab{padding:10px 2px;font-size:.65rem;}
  .bb-tb{min-width:46px;padding:8px 10px;font-size:.5rem;gap:2px;}
  .bb-tb .ico{font-size:1.05rem;}
  #bb0 .z-btn{width:34px;height:34px;font-size:1.05rem;flex-shrink:0;}
  .bb-sw{width:28px;height:28px;}
  #bbFg{width:32px;height:32px;}
  #bbBrush{width:90px;height:34px;}
  #bb3 .ab{padding:9px 12px;font-size:.7rem;}
  #bb2 .lb{height:30px;font-size:.75rem;}
  .play-btn{padding:7px 14px;font-size:.8rem;}
  .fps-row input{width:40px;padding:5px;}
  .frame-thumb{width:40px;height:40px;}
  .rc{width:18px;height:18px;}
}
@media(min-width:700px) and (max-width:899px){
  /* Tablets: keep the desktop shell but give the panels readable, touch-friendly
     sizing instead of squeezing them to 130px with 0.45rem labels. */
  #left-panel,#right-panel{width:150px;}
  .tb{padding:6px 3px;font-size:.5rem;}
  .tb .ico{font-size:.95rem;}
  .pt{font-size:.52rem;}
}
@media(min-width:700px){
  #bottom-bar{display:none!important;}
  .pal{grid-template-columns:repeat(8,1fr);}
  #left-sticky .ab-grid{grid-template-columns:repeat(3,1fr);}
}
@media(min-width:1100px){
  #left-panel,#right-panel{width:176px;}
}



/* Touch target safety */
@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:44px;
  }
  .seq-cell{ height:44px !important; min-height:44px !important; }
  .z-btn,.lb{ min-width:32px; min-height:44px; }
}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus{left:50%;transform:translateX(-50%);top:8px;width:auto;height:auto;padding:10px 20px;background:#BC4749;color:white;font-weight:700;font-size:.9rem;border-radius:8px;z-index:9999;text-decoration:none;white-space:nowrap;}

/* Keep the global cookie banner compact on phones so it does not dominate the
   fixed-height tool (the page JS re-fits the canvas once it is dismissed). */
@media(max-width:520px){
  #cookie-banner{padding:9px 14px!important;}
  #cookie-banner p{font-size:.78rem!important;min-width:0!important;}
  #cookie-banner button{padding:7px 14px!important;font-size:.8rem!important;}
}