:root{
  --bg:#08080f;--panel:#0f0f1e;--panel2:#161628;--panel3:#1e1e38;
  --border:rgba(255,255,255,.05);--border2:rgba(255,255,255,.11);
  --accent:#f472b6;--accent2:#f59e0b;--accent3:#10b981;--accent4:#7c3aed;
  --text:#f0f0ff;--muted:#8b93a0;--dim:#2a2a4a;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;}
body{display:flex;flex-direction:column;background:var(--bg);color:var(--text);font-family:'JetBrains Mono',monospace;}

.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(244,114,182,.18),rgba(124,58,237,.1),rgba(8,8,15,.96));flex-shrink:0;}
.classic-bridge strong{display:block;font-family:'Fredoka',cursive;font-size:1rem;color:var(--accent);margin-bottom:2px;}
.classic-bridge span{display:block;font-size:.62rem;color:rgba(240,240,255,.72);line-height:1.35;}
.classic-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.classic-actions a,.classic-actions button{border:1px solid var(--border2);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 button{background:rgba(255,255,255,.05);color:var(--muted);}
.classic-actions a:hover,.classic-actions button:hover{filter:brightness(1.08);color:var(--text);}

#app{flex:1;display:flex;min-height:0;overflow:hidden;}

/* UPLOAD / PREVIEW */
#left{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;}
#preview-area{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:var(--bg);}

/* checkerboard bg */
#preview-area::before{content:'';position:absolute;inset:0;background-image:repeating-conic-gradient(#1a1a2e 0% 25%,#0d0d18 0% 50%);background-size:16px 16px;opacity:.6;pointer-events:none;}

#preview-canvas{position:relative;z-index:1;image-rendering:pixelated;image-rendering:crisp-edges;border:2px solid var(--border2);border-radius:4px;}

.upload-prompt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:2;pointer-events:none;}
.upload-prompt.hidden{display:none;}
.upload-icon{font-size:3rem;opacity:.4;}
.upload-text{font-size:.75rem;color:var(--muted);text-align:center;line-height:1.6;}
.upload-btn-label{padding:9px 24px;border-radius:9px;background:var(--accent);color:#000;font-family:'Fredoka',cursive;font-size:.9rem;font-weight:700;cursor:pointer;pointer-events:all;transition:filter .12s;}
.upload-btn-label:hover{filter:brightness(1.1);}

/* playback controls */
#playback-bar{height:52px;background:var(--panel);border-top:1px solid var(--border2);display:flex;align-items:center;gap:10px;padding:0 14px;flex-shrink:0;}
.pb-btn{width:34px;height:34px;border-radius:8px;border:none;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .12s;flex-shrink:0;}
.pb-play{background:var(--accent);color:#000;}
.pb-play:hover{filter:brightness(1.1);}
.pb-prev,.pb-next{background:var(--panel3);color:var(--text);border:1px solid var(--border2);}
.pb-prev:hover,.pb-next:hover{background:var(--dim);}
.pb-loop{background:transparent;color:var(--muted);border:1px solid var(--border2);font-size:.7rem;padding:0 10px;width:auto;}
.pb-loop.on{background:rgba(244,114,182,.15);border-color:var(--accent);color:var(--accent);}
.pb-label{font-size:.55rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
.pb-val{font-size:.85rem;color:var(--accent2);font-weight:700;min-width:28px;text-align:center;}
.fps-slider{accent-color:var(--accent);width:80px;cursor:pointer;}
.frame-counter{font-size:.7rem;color:var(--muted);margin-left:auto;}
.frame-counter span{color:var(--accent);}
.zoom-btns{display:flex;gap:3px;}
.z-btn{width:26px;height:26px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--muted);font-size:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.z-btn:hover{color:var(--text);background:var(--panel3);}

/* bg toggle */
.bg-toggle{display:flex;gap:4px;}
.bg-opt{width:20px;height:20px;border-radius:4px;border:2px solid transparent;cursor:pointer;}
.bg-opt.on{border-color:var(--accent);}

/* SIDEBAR */
#sidebar{width:280px;flex-shrink:0;background:var(--panel);border-left:1px solid var(--border2);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;}
.sa-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:10004;align-items:center;justify-content:center;backdrop-filter:blur(6px);padding:16px;}
.sa-overlay.open{display:flex;}
.sa-box{background:var(--panel);border:1px solid var(--border2);border-radius:14px;padding:22px;max-width:640px;width:100%;max-height:88vh;overflow-y:auto;}
.sa-title{font-family:'Fredoka',cursive;font-size:1.2rem;color:var(--accent4);margin-bottom:6px;}
.sa-lead{font-size:.68rem;color:var(--muted);line-height:1.7;margin-bottom:16px;}
.sa-sec{font-size:.48rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.sa-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:9px;list-style:none;margin:0;padding:0;}
.sa-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:.62rem;line-height:1.6;color:var(--text);}
.sa-steps b{color:var(--accent3);display:block;font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px;}
.sa-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;}
.sa-btn{padding:7px 16px;border-radius:7px;border:1px solid var(--border2);background:rgba(255,255,255,.06);color:var(--text);cursor:pointer;font-family:'Fredoka',cursive;font-size:.75rem;font-weight:600;}
.sa-btn.primary{background:var(--accent4);color:#fff;border-color:transparent;}
.sa-btn:hover{filter:brightness(1.15);}
.sb-section{padding:12px;border-bottom:1px solid var(--border2);}
#sb-sticky{position:sticky;bottom:0;margin-top:auto;background:var(--panel);border-top:1px solid var(--border2);padding:8px 10px;box-shadow:0 -8px 14px rgba(0,0,0,.45);z-index:6;display:flex;flex-direction:column;gap:5px;}
#sb-sticky .exp-btn{margin:0;}
.sb-title{font-size:.5rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.ctrl-row{display:flex;flex-direction:column;gap:3px;margin-bottom:8px;}
.ctrl-row label{font-size:.55rem;color:var(--muted);display:flex;justify-content:space-between;}
.ctrl-row label span{color:var(--accent2);font-weight:700;}
.ctrl-row input[type=number]{width:100%;background:var(--panel2);border:1px solid var(--border2);color:var(--text);padding:5px 8px;border-radius:7px;font-size:.7rem;font-family:inherit;}
.ctrl-row-h{display:flex;gap:6px;margin-bottom:8px;min-width:0;}
.ctrl-row-h label{flex:1;min-width:0;}
.ctrl-row-h input[type=number]{min-width:0;width:100%;}
.ctrl-row-h input[type=number]{flex:1;background:var(--panel2);border:1px solid var(--border2);color:var(--text);padding:5px 8px;border-radius:7px;font-size:.7rem;font-family:inherit;}
.ctrl-row-h label{font-size:.55rem;color:var(--muted);display:flex;align-items:center;gap:4px;}
.icon-btn{padding:5px 12px;border-radius:7px;border:1px solid var(--border2);background:transparent;color:var(--muted);cursor:pointer;font-size:.65rem;font-family:inherit;transition:all .1s;}
.icon-btn:hover{color:var(--text);background:var(--panel3);}
.icon-btn.primary{background:var(--accent4);color:white;border-color:var(--accent4);}
.dtool.on{background:rgba(244,114,182,.2);color:var(--accent);border-color:var(--accent);}
#preview-canvas.drawing{cursor:crosshair;}

/* Frame strip */
#frame-strip-wrap{flex:1;overflow-y:auto;padding:8px;}
.strip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:4px;}
.frame-thumb{border-radius:6px;border:2px solid var(--border2);overflow:hidden;cursor:pointer;position:relative;aspect-ratio:1;background:var(--panel2);transition:all .1s;display:flex;align-items:center;justify-content:center;}
.frame-thumb:hover{border-color:rgba(255,255,255,.3);}
.frame-thumb.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.frame-thumb.disabled{opacity:.35;}
.frame-thumb canvas{image-rendering:pixelated;max-width:100%;max-height:100%;}
.frame-num{position:absolute;bottom:2px;right:3px;font-size:.4rem;color:rgba(255,255,255,.5);}
.frame-x{position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;background:rgba(239,68,68,.8);color:white;font-size:.45rem;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;}

/* export */
.export-btns{padding:10px 12px;border-top:1px solid var(--border2);display:flex;flex-direction:column;gap:6px;}
.exp-btn{padding:8px;border-radius:8px;border:none;cursor:pointer;font-family:'Fredoka',cursive;font-size:.82rem;font-weight:600;transition:all .12s;display:inline-flex;align-items:center;justify-content:center;min-height:44px;}
.exp-gif{background:var(--accent);color:#000;}
.exp-json{background:var(--accent4);color:white;}
.exp-png{background:var(--accent3);color:#000;}

/* project + restore */
.proj-row{display:flex;gap:4px;margin-top:6px;}
.kbd-hint{font-size:.52rem;color:var(--muted);line-height:1.7;padding:7px 12px;border-top:1px solid var(--border2);}
.restore-banner{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;background:var(--panel2);border:1px solid var(--accent);border-radius:9px;padding:8px 10px;display:flex;align-items:center;gap:8px;font-size:.65rem;color:var(--text);}
.restore-banner.hidden{display:none;}
.restore-banner .icon-btn{padding:4px 10px;font-size:.6rem;flex-shrink:0;}

#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--accent);color:var(--accent);padding:6px 16px;border-radius:8px;font-size:.72rem;z-index:999;opacity:0;transition:opacity .3s;pointer-events:none;}

@media(max-width:700px){
  .classic-bridge{align-items:flex-start;flex-direction:column;padding:9px 12px;gap:8px;}
  .classic-actions{width:100%;overflow-x:auto;padding-bottom:2px;}
  #sidebar{width:100%;max-height:42vh;border-left:none;border-top:1px solid var(--border2);}
  #app{flex-direction:column;}
  #preview-area{min-height:180px;}
  #playback-bar{flex-wrap:wrap;height:auto;min-height:44px;padding:6px 10px;gap:6px;}
  .frame-counter{margin-left:0;width:100%;text-align:center;}
}

/* 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:32px;
  }
  .seq-cell{ height:36px !important; min-height:36px !important; }
  .z-btn,.lb{ min-width:32px; min-height:32px; }
}
/* Sprite Animator accessibility and mobile fit */
main#main-content{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
@media(max-width:700px){
  main#main-content{overflow:hidden;}
  .site-header .header-inner{width:100%;max-width:100%;padding-left:8px!important;padding-right:8px!important;gap:8px!important;overflow:hidden;}
  .site-header .nav-toggle{width:34px!important;min-width:34px!important;max-width:34px!important;margin-left:auto!important;padding-left:0!important;padding-right:0!important;}
  #app{width:100%;}
  #sidebar{max-width:100%;}
  #playback-bar{overflow-x:auto;}
}