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

.hdr{height:46px;background:rgba(8,8,18,.98);border-bottom:1px solid var(--border2);display:flex;align-items:center;justify-content:space-between;padding:0 14px;flex-shrink:0;position:sticky;top:0;z-index:50;}
.hdr-logo{display:flex;align-items:center;gap:8px;font-family:'Fredoka',cursive;font-size:1rem;font-weight:700;color:var(--text);text-decoration:none;}
.hdr-logo img{height:26px;width:auto;flex-shrink:0;border-radius:5px;}
.hdr-title{font-family:'Fredoka',cursive;font-size:1rem;font-weight:700;color:var(--accent);}
.hdr-back{font-size:.6rem;font-weight:700;color:var(--muted);padding:4px 10px;border-radius:7px;border:1px solid var(--border2);text-decoration:none;}

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

/* SIDEBAR */
#controls{width:300px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border2);overflow-y:auto;padding:14px 14px 130px;}
.ctrl-section{margin-bottom:16px;}
.ctrl-section h3,.ctrl-section h2{font-family:'Fredoka',cursive;font-size:.9rem;color:var(--accent);margin-bottom:10px;}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
.field label{font-size:.55rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
.field input,.field textarea,.field select{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:vertical;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);}
.field textarea{min-height:52px;}
.color-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.color-chip{width:26px;height:26px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:all .1s;flex-shrink:0;}
.color-chip.on{border-color:white;transform:scale(1.15);}
.color-chip.custom{background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);position:relative;}
.type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:8px;}
.type-btn{padding:6px 4px;border-radius:7px;border:1px solid var(--border2);background:var(--panel2);cursor:pointer;font-size:.6rem;color:var(--muted);text-align:center;transition:all .1s;font-family:'Fredoka',cursive;}
.type-btn:hover{background:var(--panel3);color:var(--text);}
.type-btn.on{border-color:var(--accent);color:var(--accent);background:rgba(245,158,11,.12);}
.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px;}
.template-btn{padding:8px 4px;border-radius:8px;border:1px solid var(--border2);background:var(--panel2);cursor:pointer;font-size:.58rem;color:var(--muted);text-align:center;transition:all .1s;font-family:'Fredoka',cursive;display:flex;flex-direction:column;align-items:center;gap:3px;}
.template-btn:hover{background:var(--panel3);color:var(--text);}
.template-btn.on{border-color:var(--accent);color:var(--accent);background:rgba(245,158,11,.12);}
.template-icon{font-size:1.4rem;}
.stat-row{display:flex;gap:6px;align-items:center;margin-bottom:6px;}
.stat-row label{font-size:.55rem;color:var(--muted);width:60px;flex-shrink:0;}
.stat-row input[type=text]{flex:1;background:var(--panel2);border:1px solid var(--border2);color:var(--text);padding:4px 7px;border-radius:6px;font-size:.7rem;font-family:inherit;}
.stat-row input[type=range]{flex:1;accent-color:var(--accent);cursor:pointer;}
.stat-row .stat-val{font-size:.65rem;color:var(--accent2);font-weight:700;width:24px;text-align:right;flex-shrink:0;}
.add-stat-btn{width:100%;padding:5px;border-radius:7px;border:1px dashed var(--border2);background:transparent;color:var(--muted);cursor:pointer;font-size:.65rem;font-family:inherit;margin-top:4px;}
.add-stat-btn:hover{color:var(--text);border-color:var(--accent2);}
.upload-zone{border:2px dashed var(--border2);border-radius:10px;padding:16px;text-align:center;cursor:pointer;transition:all .15s;margin-bottom:8px;}
.upload-zone:hover{border-color:var(--accent);background:rgba(245,158,11,.05);}
.upload-zone-text{font-size:.65rem;color:var(--muted);line-height:1.6;}
.rarity-btns{display:flex;gap:5px;flex-wrap:wrap;}
.rarity-btn{padding:4px 10px;border-radius:999px;border:1px solid var(--border2);background:transparent;cursor:pointer;font-size:.6rem;color:var(--muted);transition:all .1s;font-family:'Fredoka',cursive;}
.rarity-btn:hover{color:var(--text);}
.rarity-btn.on{color:#000;}
.exp-btn{width:100%;padding:9px;border-radius:9px;border:none;cursor:pointer;font-family:'Fredoka',cursive;font-size:.9rem;font-weight:700;margin-bottom:6px;transition:all .12s;display:inline-flex;align-items:center;justify-content:center;min-height:44px;}
.exp-png{background:var(--accent);color:#000;}
.exp-save{background:var(--accent2);color:white;}
.exp-load{background:var(--panel3);color:var(--text);border:1px solid var(--border2);}
.range-row{display:flex;flex-direction:column;gap:3px;margin-bottom:8px;}
.range-row label{font-size:.55rem;color:var(--muted);display:flex;justify-content:space-between;}
.range-row label span{color:var(--accent2);}
.range-row input[type=range]{accent-color:var(--accent);width:100%;cursor:pointer;}

/* LIBRARY */
.lib-actions{display:flex;gap:6px;margin-bottom:8px;}
.lib-item{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--border2);border-radius:9px;padding:6px;margin-bottom:6px;cursor:pointer;transition:border-color .12s;}
.lib-item:hover{border-color:var(--accent);}
.lib-thumb{width:34px;height:48px;border-radius:6px;object-fit:cover;background:var(--panel3);flex-shrink:0;}
div.lib-thumb{display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--muted);}
.lib-meta{flex:1;min-width:0;}
.lib-name{font-size:.7rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lib-sub{font-size:.55rem;color:var(--muted);margin-top:2px;}
.lib-del{width:20px;height:20px;border-radius:50%;border:1px solid var(--accent4);background:transparent;color:var(--accent4);cursor:pointer;font-size:.6rem;flex-shrink:0;line-height:1;}
.lib-del:hover{background:var(--accent4);color:#fff;}
.lib-empty{font-size:.62rem;color:var(--muted);text-align:center;padding:10px 0;border:1px dashed var(--border2);border-radius:9px;}

/* PREVIEW */
#preview-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto;background:var(--bg);}
#card-canvas{border-radius:14px;box-shadow:0 20px 80px rgba(0,0,0,.7);}

#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){
  /* Split view: a compact card preview stays pinned under the header while the
     control panel scrolls underneath, so the card is always visible as you edit. */
  html,body{height:100%;overflow:hidden;}
  #app{flex-direction:column;width:100%;height:100%;overflow:hidden;}
  #preview-wrap{order:-1;flex:0 0 auto;width:100%;padding:8px;overflow:visible;border-bottom:1px solid var(--border2);}
  /* !important beats the tool's inline HiDPI canvas sizing (width set in JS). */
  #card-canvas{width:min(46vw,200px)!important;height:auto!important;}
  #controls{flex:1 1 auto;min-height:0;width:100%;max-width:100%;overflow-y:auto;border-right:none;border-bottom:none;}
}
/* Short phones: shrink the pinned preview so the controls keep usable room. */
@media(max-width:700px) and (max-height:700px){
  #card-canvas{width:min(36vw,140px)!important;}
}



/* ── 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; }
}
/* Welcome modal , dark-panel style (matches Story Editor) */
.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-size:.9rem;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;font-size:.85rem;background:rgba(255,255,255,.06);color:var(--text);}
.m-ok:hover{filter:brightness(1.07);} .m-cancel:hover{background:rgba(255,255,255,.1);}
/* Mobile fit repair for card designer */
main#main-content{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
@media(max-width:700px){
  main#main-content{height:auto;overflow:hidden;}
  .hdr{max-width:100vw;overflow:hidden;}
  .hdr-title{font-size:.86rem;white-space:nowrap;}
  .hdr-logo span{display:none;}
}
@media(max-width:420px){
  .type-grid{grid-template-columns:repeat(2,1fr);}
}

/* Desktop: pin the workspace to the viewport so the tall control sidebar
   scrolls internally and the centred card preview stays visible. Without this
   html/body min-height:100% lets #app grow to the sidebar height and the
   preview is pushed off-screen. */
@media(min-width:701px){
  html,body{height:100%;overflow:hidden;}
}

/* Narrow screen overflow guardrails */
body{overflow-x:hidden;}
.site-header,.header-inner{max-width:100vw;}
.nav-toggle{flex-shrink:0;}
.stat-row{min-width:0;}
.stat-row input[type=text],.stat-row input[type=range]{min-width:0;}
.modal-overlay,#cookie-banner{max-width:100vw;}
@media(max-width:700px){
  .stat-row{gap:4px;}
  .stat-row label{width:42px;}
  .stat-row .stat-val{width:20px;}
}

/* Trading card shared header mobile fit */
@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;}
}