:root{
  --bg:#08080f;--panel:#0f0f1e;--panel2:#161628;--panel3:#1e1e38;
  --border:rgba(255,255,255,.05);--border2:rgba(255,255,255,.11);
  --accent:#10b981;--accent2:#f59e0b;--accent3:#7c3aed;--accent4:#ef4444;
  --text:#f0f0ff;--muted:#8b93a0;--dim:#2a2a4a;
  --on:#10b981;--off:#1a1a2e;
}
*{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;}

.bitmap-brief{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 16px;border-bottom:1px solid var(--border2);background:linear-gradient(135deg,rgba(16,185,129,.16),rgba(124,58,237,.1) 45%,rgba(8,8,15,.95));box-shadow:0 16px 40px rgba(0,0,0,.18);flex-shrink:0;}
.bitmap-brief h1{font-family:'Fredoka',cursive;font-size:1.26rem;line-height:1;color:var(--accent);margin-bottom:4px;}
.bitmap-brief p{max-width:720px;color:rgba(240,240,255,.76);font-size:.72rem;line-height:1.45;}
.brief-kicker{margin-bottom:3px !important;color:var(--accent2) !important;text-transform:uppercase;letter-spacing:.14em;font-size:.54rem !important;font-weight:700;}
.brief-steps{display:flex;gap:8px;list-style:none;flex-shrink:0;}
.brief-steps li{display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid var(--border2);border-radius:999px;background:rgba(255,255,255,.04);font-size:.58rem;color:rgba(240,240,255,.72);white-space:nowrap;}
.brief-steps strong{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#04110d;font-family:'Fredoka',cursive;font-size:.72rem;}

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

/* ── LEFT: char picker ── */
#chars-panel{width:190px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border2);display:flex;flex-direction:column;overflow:hidden;}
.cp-hdr{padding:8px 10px;border-bottom:1px solid var(--border2);font-size:.5rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;}
#char-scroll{flex:1;overflow-y:auto;padding:6px;}
.char-cat-label{font-size:.45rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;padding:6px 4px 3px;}
.char-row{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:3px;}
.char-btn{aspect-ratio:1;border-radius:4px;border:1px solid var(--border2);background:var(--panel2);cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:background .1s,color .1s;}
.char-btn:hover{background:var(--panel3);color:var(--text);}
.char-btn.active{background:rgba(16,185,129,.25);border-color:var(--accent);color:var(--accent);}
.char-btn.drawn{border-color:rgba(16,185,129,.4);}

/* ── CENTRE: pixel canvas editor ── */
#editor-col{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;}

.toolbar{height:44px;padding:0 10px;border-bottom:1px solid var(--border2);display:flex;align-items:center;gap:6px;flex-shrink:0;overflow-x:auto;}
.toolbar-lbl{font-size:.55rem;color:var(--muted);white-space:nowrap;}
.cur-char{font-family:'Fredoka',cursive;font-size:1.4rem;color:var(--accent2);min-width:28px;text-align:center;flex-shrink:0;}
.tb-btn{width:28px;height:28px;border-radius:7px;border:1px solid var(--border2);background:transparent;color:var(--muted);cursor:pointer;font-size:.75rem;display:flex;align-items:center;justify-content:center;transition:all .1s;flex-shrink:0;}
.tb-btn:hover{color:var(--text);background:var(--panel3);}
.tb-btn.on{background:rgba(16,185,129,.2);border-color:var(--accent);color:var(--accent);}
select.tb-sel{background:var(--panel2);border:1px solid var(--border2);color:var(--text);padding:3px 7px;border-radius:7px;font-size:.65rem;font-family:inherit;cursor:pointer;height:26px;}
.sep{width:1px;height:22px;background:var(--border2);flex-shrink:0;}

#canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg);}
#grid-canvas{cursor:crosshair;touch-action:none;display:block;}

.statusbar{height:24px;border-top:1px solid var(--border);padding:0 12px;display:flex;align-items:center;gap:16px;font-size:.5rem;color:var(--muted);flex-shrink:0;}
.statusbar span{color:var(--accent2);}

/* ── RIGHT: preview & export ── */
#preview-panel{width:230px;flex-shrink:0;background:var(--panel);border-left:1px solid var(--border2);display:flex;flex-direction:column;overflow:hidden;}
.pv-hdr{padding:8px 12px;border-bottom:1px solid var(--border2);font-size:.5rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;}
.pv-body{flex:1;overflow-y:auto;padding:10px;}
#pv-text{width:100%;background:var(--panel2);border:1px solid var(--border2);color:var(--text);padding:6px 8px;border-radius:7px;font-size:.72rem;font-family:inherit;resize:none;min-height:48px;margin-bottom:10px;}
#pv-canvas{width:100%;image-rendering:pixelated;border-radius:6px;display:block;}
.pv-ctrl{display:flex;flex-direction:column;gap:4px;margin-top:10px;margin-bottom:6px;}
.pv-ctrl label{font-size:.55rem;color:var(--muted);display:flex;justify-content:space-between;}
.pv-ctrl label span{color:var(--accent2);}
.pv-ctrl input[type=range]{accent-color:var(--accent);width:100%;cursor:pointer;}
.color-row{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.color-row label{font-size:.55rem;color:var(--muted);flex:1;}
.color-swatch{width:28px;height:22px;border-radius:5px;border:1px solid var(--border2);cursor:pointer;}

.exp-btns{padding:10px 12px;border-top:1px solid var(--border2);display:flex;flex-direction:column;gap:5px;}
.exp-btn{padding:7px;border-radius:8px;border:none;cursor:pointer;font-family:'Fredoka',cursive;font-size:.8rem;font-weight:600;transition:filter .12s;width:100%;display:inline-flex;align-items:center;justify-content:center;min-height:44px;}
.exp-btn:hover{filter:brightness(1.1);}
.ep-png{background:var(--accent);color:#000;}
.ep-json{background:var(--accent3);color:white;}
.ep-xml{background:var(--accent2);color:#000;}
.ep-save{background:var(--panel3);color:var(--text);border:1px solid var(--border2);}

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

@media(max-width:840px){
  #chars-panel{display:none;}
  #preview-panel{width:170px;}
}
@media(max-width:560px){
  #layout{ flex-direction:column; }
  #preview-panel{
    display:flex !important;
    width:100% !important;
    height:200px;
    border-left:none;
    border-top:1px solid var(--border2);
    flex-shrink:0;
  }
  .toolbar{ height:auto; min-height:44px; flex-wrap:wrap; padding:6px 8px; }
  .tb-btn{ width:40px; height:40px; font-size:.85rem; }
  #chars-panel{ display:none; }
}
@media(pointer:coarse){
  .tb-btn{ width:40px; height:40px; }
  .char-btn{ min-height:40px; }
}

/* 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; }
}
/* Welcome modal , dark-panel standard */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:500;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px);}
.modal-overlay.open{display:flex;}
.modal{background:var(--panel2);border:1px solid var(--border2);border-radius:16px;padding:20px;width:min(460px,94vw);max-height:82vh;overflow:auto;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.6);}
.modal h3,.modal h2{font-family:'Fredoka',cursive;font-size:1.05rem;color:var(--accent);margin-bottom:10px;}
.modal-btns{display:flex;gap:8px;margin-top:12px;}
.m-ok{flex:1;padding:9px;border-radius:9px;border:none;cursor:pointer;font-family:'Fredoka',cursive;font-weight:700;background:var(--accent);color:#000;}
.m-cancel{flex:1;padding:9px;border-radius:9px;border:1px solid var(--border2);cursor:pointer;font-family:'Fredoka',cursive;background:rgba(255,255,255,.06);color:var(--text);}
/* Bitmap Font Maker accessibility and mobile fit */
main#main-content{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
body{overflow-x:hidden;}
.site-header,.header-inner{max-width:100vw;}
@media(max-width:700px){
  .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;}
  .bitmap-brief{align-items:flex-start;flex-direction:column;padding:10px 12px;gap:9px;}
  .bitmap-brief p{font-size:.66rem;}
  .brief-steps{width:100%;overflow-x:auto;padding-bottom:2px;}
  .brief-steps li{font-size:.52rem;}
  #layout{width:100%;overflow:hidden;}
  #editor-col,#preview-panel{max-width:100%;}
  .statusbar{overflow-x:auto;gap:10px;}
}