/* ==========================================================================
   Gamescom attendee card generator — app chrome only.
   Nothing in this file affects the exported image; the card is drawn on a
   <canvas> by js/card.js and js/ascii.js.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --bg:#0E1116;
  --panel:#151A22;
  --panel-2:#1B212B;
  --line:#28303C;
  --ink:#E9EDF3;
  --muted:#8A94A5;
  --accent:#FFCE45;
  --accent-ink:#171200;
  --star:#5FD7FF;      /* the featured social, kept distinct from the accent */
  --star-ink:#04222B;
  --warn:#FF8A6B;
  --radius:12px;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--display);
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

/* ---------- header ---------- */
.bar{
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#151A22,#10141B);
  position:sticky;top:0;z-index:20;
}
.bar .mark{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent);padding:5px 9px;border-radius:4px;font-weight:700;
}
.bar h1{font-size:15px;font-weight:700;margin:0;letter-spacing:-.01em}
.bar .sub{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em;margin-left:auto}

/* ---------- layout ---------- */
main{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:0;align-items:start}
@media (max-width:980px){main{grid-template-columns:1fr}}

.stage{padding:22px;min-width:0}
.stage-inner{max-width:760px;margin:0 auto}

/* ---------- canvas ---------- */
.canvas-wrap{
  background:
    linear-gradient(45deg,#151A22 25%,transparent 25%) -10px 0/20px 20px,
    linear-gradient(-45deg,#151A22 25%,transparent 25%) -10px 0/20px 20px,
    linear-gradient(45deg,transparent 75%,#151A22 75%) 0 0/20px 20px,
    linear-gradient(-45deg,transparent 75%,#151A22 75%) 0 0/20px 20px,
    #10141B;
  border:1px solid var(--line);border-radius:14px;padding:16px;
  transition:border-color .12s,box-shadow .12s;
}
.canvas-wrap.dropping{border-color:var(--accent);box-shadow:inset 0 0 0 2px rgba(255,206,69,.25)}
canvas{display:block;width:100%;height:auto;border-radius:6px;cursor:grab;touch-action:none}
canvas.dragging{cursor:grabbing}
.hint{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:10px;letter-spacing:.04em}
.stage-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

/* ---------- control panel ---------- */
.panel{
  border-left:1px solid var(--line);background:var(--panel);
  padding:20px 18px 60px;min-height:100vh;
}
@media (max-width:980px){.panel{border-left:0;border-top:1px solid var(--line);min-height:0}}
.group{margin-bottom:22px}
.group > .label{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px;display:flex;align-items:center;gap:8px;
}
.group > .label::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- segmented buttons ---------- */
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{
  flex:1;min-width:74px;padding:9px 8px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--muted);font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.12s;
}
.seg button:hover{color:var(--ink);border-color:#3A4453}
.seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}

.modebar{display:flex;gap:6px;margin-bottom:12px}
.modebar button{
  padding:8px 16px;border-radius:9px;border:1px solid var(--line);background:var(--panel);
  color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;
}
.modebar button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}

/* ---------- themes ---------- */
.themes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.themes button{
  height:52px;border-radius:10px;border:2px solid transparent;cursor:pointer;padding:0;position:relative;overflow:hidden;
}
.themes button[aria-pressed="true"]{border-color:var(--accent)}
.themes button span{
  position:absolute;left:5px;right:5px;bottom:4px;font-family:var(--mono);font-size:8px;
  letter-spacing:.06em;text-transform:uppercase;text-align:center;
}

/* ---------- form controls ---------- */
label.field{display:block;margin-bottom:10px}
label.field > span{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px;
}
input[type=text],textarea,select{
  width:100%;padding:9px 11px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink);font-family:var(--display);font-size:14px;
}
input[type=text]:focus,textarea:focus,select:focus,button:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;border-color:transparent;
}
textarea{resize:vertical;min-height:56px}
input[type=color]{
  width:100%;height:36px;padding:2px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:9px;cursor:pointer;
}
input[type=range]{width:100%;accent-color:var(--accent)}
.row{display:flex;gap:8px}
.row > *{flex:1;min-width:0}
.check{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.check input{accent-color:var(--accent);width:15px;height:15px}

/* The file input is driven by buttons, but it has to stay clickable in every
   browser, so it is hidden visually instead of with display:none. */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- buttons ---------- */
.btn{
  padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:.12s;
}
.btn:hover{border-color:#3A4453}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.btn.ghost{background:transparent}
.btn.small{padding:7px 10px;font-size:10px}

/* ---------- photo slots and role cards ---------- */
.slot{border:1px solid var(--line);border-radius:11px;padding:11px;margin-bottom:10px;background:var(--panel-2)}
.slot .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.slot .name{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.slot .thumbrow{display:flex;gap:9px;align-items:center}
.slot .thumb{
  width:46px;height:46px;border-radius:8px;background:#0E1116;border:1px dashed var(--line);
  background-size:cover;background-position:center;flex:none;
}
.card-item{border:1px solid var(--line);border-radius:11px;padding:11px;margin-bottom:10px;background:var(--panel-2)}
.card-item .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.swatch{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:7px;vertical-align:middle}

/* the reorder grip on a role or social row */
.grip{
  width:24px;height:26px;flex:none;margin-right:6px;border-radius:7px;cursor:grab;
  border:1px solid var(--line);background:var(--panel-2);color:var(--muted);
  font-size:13px;line-height:1;letter-spacing:-.08em;vertical-align:middle;touch-action:none;
}
.grip:hover{color:var(--ink);border-color:#3A4453}
.grip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sorting{cursor:grabbing}
.sorting .grip{cursor:grabbing}
.dragging{opacity:.55}
.social-field .grip{height:36px;align-self:flex-end;margin-right:0}

/* ---------- social picker ---------- */
.netgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px}
.netgrid button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:8px 4px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--muted);cursor:pointer;transition:.12s;
}
.netgrid button:hover{color:var(--ink);border-color:#3A4453}
.netgrid button svg{width:18px;height:18px;fill:currentColor;display:block}
.netgrid button i{
  font-family:var(--mono);font-size:8px;font-style:normal;letter-spacing:.06em;
  text-transform:uppercase;line-height:1;
}
.netgrid button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.netgrid button.featured{background:var(--star);border-color:var(--star);color:var(--star-ink)}
.netgrid button.maxed{opacity:.35}
.netgrid button.maxed:hover{color:var(--muted);border-color:var(--line)}
.social-field{display:flex;align-items:flex-end;gap:9px;margin-bottom:10px}
.social-field .glyph{
  width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
}
.social-field .glyph svg{width:17px;height:17px;fill:currentColor;display:block}
.social-field label.field{flex:1;margin-bottom:0;min-width:0}
.social-field .star{
  width:36px;height:36px;flex:none;border-radius:9px;cursor:pointer;font-size:15px;line-height:1;
  border:1px solid var(--line);background:var(--panel-2);color:#4A5462;transition:.12s;
}
.social-field .star:hover{color:var(--ink);border-color:#3A4453}
.social-field .star[aria-pressed="true"]{background:var(--star);border-color:var(--star);color:var(--star-ink)}

/* the compact Image / QR switch inside a slot */
.seg.tiny{display:flex;gap:4px;flex:none}
.seg.tiny button{
  flex:none;min-width:0;padding:5px 9px;border-radius:7px;font-size:10px;letter-spacing:.06em;
}

/* the format segment carries five ratios, so the labels have to stay narrow */
#formatSeg button{padding-left:6px;padding-right:6px;letter-spacing:.04em}

/* ---------- share sheet ---------- */
.sharebar{
  margin-top:10px;padding:11px;border:1px solid var(--line);
  border-radius:11px;background:var(--panel-2);max-width:420px;
}
.sharebar .netgrid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}
.sharebar .note{margin-top:9px}

/* ---------- notes and status ---------- */
.note{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.04em;margin-top:6px}
.status{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.06em;min-height:16px;margin-top:8px}

/* ---------- plain-text ASCII preview ----------
   Background and foreground come from the active palette, set by js/ascii.js.

   This deliberately does NOT use var(--mono). JetBrains Mono has no box
   drawing or block glyphs, so the browser falls back per character to a font
   whose advance width is not the mono cell — and the frame stops lining up
   with the body. The stack below leads with faces that carry the full
   box-drawing and block ranges at a fixed advance, and ligatures are switched
   off so sequences like -- and |- are not fused into one glyph. */
.ascii-out{
  margin:0;padding:18px;border-radius:6px;overflow-x:auto;
  font-family:"DejaVu Sans Mono","Cascadia Mono",Consolas,"Liberation Mono",
              Menlo,"Courier New",ui-monospace,monospace;
  font-size:12px;line-height:1.18;white-space:pre;
  font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0;
  background:#05070A;color:#C8D0DA;border:1px solid var(--line);
}
@media (max-width:620px){.ascii-out{font-size:9px;padding:10px}}