/* ─────────────────────────────────────────────────────────────
   HoodStreet Media GIF Machine
   Global CSS — tokens and layout per the design handoff.
   ───────────────────────────────────────────────────────────── */

@font-face{font-family:'Space Grotesk';src:url('./assets/fonts/spacegrotesk-400.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Space Grotesk';src:url('./assets/fonts/spacegrotesk-600.woff2') format('woff2');font-weight:600;font-display:block}
@font-face{font-family:'Space Grotesk';src:url('./assets/fonts/spacegrotesk-700.woff2') format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'PressStart';src:url('./assets/fonts/pressstart-latin.woff2') format('woff2');font-weight:400;font-display:block}

/* faces offered for the headline burned into the GIF */
@font-face{font-family:'Anton';src:url('./assets/fonts/anton-latin.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Bungee';src:url('./assets/fonts/bungee-latin.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Silkscreen';src:url('./assets/fonts/silkscreen-700-latin.woff2') format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'InterHS';src:url('./assets/fonts/inter-600.woff2') format('woff2');font-weight:600;font-display:block}
@font-face{font-family:'InterHS';src:url('./assets/fonts/inter-800.woff2') format('woff2');font-weight:800;font-display:block}

:root{
  /* surfaces */
  --page:#08090a; --hero:#0b0d09; --card:#0d0f0c; --well:#08090a;
  --drop:#0a0b09; --foot:#070806; --btn:#14170f;

  /* accent */
  --acc:#c3f53c; --acc-hi:#d3ff5c; --on-acc:#0b0d08;
  --acc-06:rgba(195,245,60,.06); --acc-07:rgba(195,245,60,.07);
  --acc-08:rgba(195,245,60,.08); --acc-30:rgba(195,245,60,.30);
  --acc-35:rgba(195,245,60,.35); --acc-45:rgba(195,245,60,.45);
  --acc-55:rgba(195,245,60,.55); --acc-60:rgba(195,245,60,.6);

  /* borders */
  --b-card:#1b1f18; --b-input:#23281f; --b-btn:#262b21; --b-dash:#2a3023;
  --b-chip:#1e2219; --rule:#191c17; --rule2:#16190f; --rule3:#1a1e17;

  /* text */
  --t1:#f3f7ec; --t2:#eef2e9; --t3:#cfd6c6; --t4:#b9c0b0; --t5:#9aa192;
  --t6:#8b917f; --t7:#7e857a; --t8:#6b7166; --t9:#61675c;
  --ph:#5d635a; --legal:#4f544b;

  --ui:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --px:'PressStart','Courier New',monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--page); color:var(--t2);
  font-family:var(--ui); font-weight:400; font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 600px at 78% -10%, rgba(195,245,60,.07), transparent 60%);
  background-attachment:fixed;
}
a{color:var(--acc)}
button,input{font-family:inherit}

/* ── header ─────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:14px 28px;background:rgba(8,9,10,.82);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand>img{width:34px;height:34px;border-radius:9px;border:1px solid #23281f;display:block;flex:none}
.brand-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand-row{display:flex;align-items:center;gap:9px}
.brand-row strong{font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--t2);white-space:nowrap}
.beta{font-family:var(--px);font-size:7.5px;letter-spacing:.04em;color:var(--acc);
  border:1px solid var(--acc-35);background:var(--acc-08);border-radius:5px;padding:4px 6px}
.brand-txt>span{font-size:12px;color:var(--t7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xlink{display:inline-flex;align-items:center;gap:9px;flex:none;text-decoration:none;
  font-family:var(--px);font-size:9.5px;color:var(--t2);border:1px solid var(--b-btn);
  background:#101208;border-radius:999px;padding:9px 15px 9px 10px;transition:border-color .12s,color .12s}
.xlink:hover{border-color:rgba(195,245,60,.5);color:var(--acc)}
.xtile{width:20px;height:20px;border-radius:6px;background:var(--acc);color:var(--on-acc);
  display:grid;place-items:center;font-family:var(--px);font-size:10px;padding-top:1px;flex:none}

/* ── hero ───────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule2);
  background:linear-gradient(180deg,#0b0d09 0%,#08090a 100%)}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,rgba(195,245,60,.055) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(195,245,60,.055) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(900px 300px at 50% 20%,#000,transparent 75%);
  mask-image:radial-gradient(900px 300px at 50% 20%,#000,transparent 75%)}
.hero-in{position:relative;max-width:1360px;margin:0 auto;padding:52px 28px 44px;
  display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.live{display:inline-flex;align-items:center;gap:9px;font-family:var(--px);font-size:9px;
  letter-spacing:.06em;color:var(--acc);border:1px solid var(--acc-30);background:var(--acc-06);
  border-radius:6px;padding:8px 12px}
.live i{width:6px;height:6px;background:var(--acc);display:block;flex:none;
  animation:eq 1.1s ease-in-out infinite}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.live i{animation:none}}
.hero h1{margin:0;font-family:var(--px);line-height:1.14;text-transform:uppercase;
  display:flex;flex-direction:column;gap:14px}
.hero h1 .l1{font-size:clamp(15px,2.5vw,30px);color:var(--t5);text-shadow:3px 3px 0 rgba(195,245,60,.14)}
.hero h1 .l2{font-size:clamp(30px,7.4vw,92px);color:var(--acc);
  text-shadow:5px 5px 0 #1c2312, 9px 9px 0 rgba(0,0,0,.55)}
.hero p{margin:0;max-width:620px;font-size:14.5px;line-height:1.6;color:var(--t6)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chips span{font-family:var(--px);font-size:8.5px;color:var(--t8);
  border:1px solid var(--b-chip);border-radius:6px;padding:9px 12px}

/* ── main grid ──────────────────────────────────────────── */
.wrap{max-width:1360px;margin:0 auto;padding:26px 28px 46px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:22px;align-items:start}
.controls{display:flex;flex-direction:column;gap:16px;min-width:0}
.stage{position:sticky;top:92px;display:flex;flex-direction:column;gap:14px;min-width:0}
@media (max-width:1000px){
  .wrap{grid-template-columns:minmax(0,1fr)}
  .stage{position:static;order:-1}
}

/* ── card shell ─────────────────────────────────────────── */
.block{background:var(--card);border:1px solid var(--b-card);border-radius:16px;padding:20px 22px 22px}
.block h2{display:flex;align-items:center;gap:11px;margin:0 0 16px;font-weight:400}
.block h2 .n{width:22px;height:22px;border-radius:7px;background:var(--acc);color:var(--on-acc);
  display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.block h2 .lbl{font-family:var(--px);font-size:9.5px;letter-spacing:.05em;color:var(--t4)}
.block h2::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,#1e2219,transparent)}

/* ── 1 · artwork ────────────────────────────────────────── */
.drop{height:236px;border:1px dashed var(--b-dash);border-radius:13px;background:var(--drop);
  display:grid;place-items:center;cursor:pointer;overflow:hidden;transition:border-color .12s,background .12s}
.drop:hover,.drop:focus-visible{border-color:var(--acc-45);background:#0b0d09;outline:none}
.drop.over{border-color:var(--acc);background:#0d1208}
.drop-in{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;padding:16px}
.drop-in .plus{width:38px;height:38px;border-radius:11px;border:1px solid var(--b-dash);
  display:grid;place-items:center;color:var(--acc);font-size:17px;line-height:1}
.drop-in b{font-weight:600;font-size:13px;color:var(--t3)}
.drop-in span{font-family:var(--px);font-size:8px;line-height:1.6;color:var(--t9)}
.drop.has img{max-height:204px;max-width:80%;image-rendering:pixelated;border-radius:6px;display:block}
.drop.has .drop-in{display:none}

.url-row{display:flex;gap:9px;margin-top:13px}
.url-row input{flex:1;min-width:0}
.meta-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:12px;margin-top:13px}
.note{margin:0;font-size:12.5px;color:var(--t7)}
.note b{color:var(--acc);font-weight:600}
.note.err{color:#ff6b6b}

/* ── inputs ─────────────────────────────────────────────── */
/* the field labels are pixel-font; the inputs themselves must not inherit that */
input[type=text]{width:100%;background:var(--well);border:1px solid var(--b-input);color:var(--t2);
  border-radius:11px;padding:12px 14px;font-size:13.5px;font-family:var(--ui);font-weight:400}
input[type=text]:focus{outline:none;border-color:var(--acc-55)}
input[type=text]::placeholder{color:var(--ph)}
.check{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--t3);cursor:pointer}
.check input{accent-color:var(--acc);width:16px;height:16px;flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--b-btn);
  background:var(--btn);color:var(--t2);font-size:13.5px;font-weight:600;padding:12px 20px;
  border-radius:11px;cursor:pointer;text-decoration:none;transition:border-color .12s,color .12s,background .12s}
.btn:hover:not(:disabled){border-color:var(--acc-55);color:var(--acc)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-size:15px;
  font-weight:700;padding:15px 0;width:100%;border-radius:12px;box-shadow:0 8px 30px rgba(195,245,60,.16)}
.btn.primary:hover:not(:disabled){background:var(--acc-hi);border-color:var(--acc-hi);color:var(--on-acc)}
.btn.sm{padding:10px 14px;font-size:13px}

/* ── 2 · motion style ───────────────────────────────────── */
.tpl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:560px){.tpl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tpl{text-align:left;background:var(--drop);border:1px solid var(--b-input);border-radius:12px;
  padding:13px 14px 14px;min-height:104px;display:flex;flex-direction:column;gap:6px;
  cursor:pointer;color:var(--t2);transition:border-color .12s,background .12s}
.tpl:hover{border-color:#3a4231}
.tpl.on{border-color:var(--acc-60);background:var(--acc-07)}
.tpl-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tpl b{font-weight:700;font-size:13.5px;letter-spacing:-.01em;color:var(--t1)}
.tpl .dot{width:7px;height:7px;border-radius:99px;background:#22271d;flex:none}
.tpl.on .dot{background:var(--acc);box-shadow:0 0 10px rgba(195,245,60,.8)}
.tpl span{font-size:11.5px;line-height:1.45;color:var(--t7)}

/* ── 3 · words ──────────────────────────────────────────── */
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.fields label{display:grid;gap:7px;align-content:start;font-family:var(--px);font-size:8px;
  letter-spacing:.04em;color:var(--t8)}
.fields label.wide{grid-column:1/-1}
.fields label.wide#x{}
#f-title{font-size:15px;font-weight:700;color:var(--t1)}
@media (max-width:520px){.fields{grid-template-columns:minmax(0,1fr)}}

.font-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.fnt{background:var(--drop);border:1px solid var(--b-input);border-radius:10px;padding:9px 8px;
  cursor:pointer;color:var(--t2);display:grid;gap:4px;justify-items:center;overflow:hidden;
  transition:border-color .12s,background .12s}
.fnt:hover{border-color:#3a4231}
.fnt.on{border-color:var(--acc-60);background:var(--acc-07)}
.fnt i{font-style:normal;font-size:19px;line-height:1.15;color:var(--t1)}
.fnt em{font-style:normal;font-family:var(--px);font-size:7px;letter-spacing:.03em;color:var(--t8);
  white-space:nowrap}

/* ── 4 · output ─────────────────────────────────────────── */
.seg{display:grid;gap:6px;background:var(--well);border:1px solid var(--b-chip);border-radius:12px;padding:5px}
#ratio{grid-template-columns:repeat(2,1fr)}
#preset{grid-template-columns:repeat(3,1fr);margin-top:9px}
.seg button{background:none;border:0;color:var(--t5);font-size:13px;font-weight:600;
  padding:10px 0;border-radius:9px;cursor:pointer;white-space:nowrap}
.seg button.on{background:var(--acc);color:var(--on-acc)}
.hint{font-family:var(--px);font-size:8px;line-height:1.7;color:var(--t8);margin:12px 0 0}

.adv{margin-top:18px;border-top:1px solid var(--rule3);padding-top:0}
.adv summary{list-style:none;cursor:pointer;font-family:var(--px);font-size:8.5px;letter-spacing:.05em;
  color:var(--t5);padding-top:14px;display:flex;align-items:center;gap:8px}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{content:'▸';color:var(--acc)}
.adv[open] summary::before{content:'▾'}
.adv summary:hover{color:var(--acc)}
.adv-in{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
@media (max-width:520px){.adv-in{grid-template-columns:repeat(2,1fr)}}
.rng{display:grid;gap:8px;font-family:var(--px);font-size:8px;letter-spacing:.03em;color:var(--t8)}
.rng .rng-top{display:flex;justify-content:space-between;gap:6px}
.rng output{color:var(--acc)}
.rng input{width:100%;accent-color:var(--acc)}
.adv .check{margin-top:16px}

/* ── preview card ───────────────────────────────────────── */
.pane{background:var(--card);border:1px solid var(--b-card);border-radius:16px;padding:14px}
.pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 4px 12px;
  font-family:var(--px);font-size:8.5px}
.pane-head .k{color:var(--t8)}
.pane-head .v{color:var(--acc)}
.canvas-hold{position:relative;border-radius:11px;overflow:hidden;background:#06070a;min-height:120px}
#preview{display:block;width:100%;height:auto;background:#06070a}

.actions-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.track{margin-top:12px;height:4px;border-radius:99px;background:#181c14;overflow:hidden}
#progbar{height:100%;width:0;background:var(--acc);transition:width .12s linear}
.status{font-family:var(--px);font-size:8px;line-height:1.7;color:var(--t6);text-align:center;
  margin:10px 0 0}

/* ── results ────────────────────────────────────────────── */
.pane.out{border-color:rgba(195,245,60,.28)}
.gallery{display:grid;gap:12px}
.card{background:var(--drop);border:1px solid var(--b-input);border-radius:12px;padding:10px}
.card img{display:block;width:100%;height:auto;border-radius:11px;background:#06070a}
.card-meta{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 9px}
.pill{font-family:var(--px);font-size:7.5px;letter-spacing:.03em;padding:5px 8px;border-radius:6px;
  background:var(--acc-08);color:var(--acc);border:1px solid var(--acc-35)}
.pill.dim{background:transparent;color:var(--t8);border-color:var(--b-chip)}
.pill.warn{background:rgba(255,176,32,.08);color:#ffb020;border-color:rgba(255,176,32,.32)}
.card-actions{display:grid;grid-template-columns:1.2fr 1fr;gap:8px}
.card-actions.three{grid-template-columns:1.2fr 1fr 1fr}
.foot-note{font-size:12.5px;line-height:1.5;color:var(--t7);margin:13px 0 0}
.foot-note b{color:var(--acc);font-weight:600}

/* ── footer ─────────────────────────────────────────────── */
.foot{border-top:1px solid var(--rule2);background:var(--foot)}
.foot-in{max-width:1360px;margin:0 auto;padding:22px 28px 26px;display:flex;flex-direction:column;gap:18px}
.foot-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-size:12.5px;color:var(--t8)}
.foot-row .r{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.xtile.sm{width:16px;height:16px;border-radius:5px;font-size:8px}
.plate{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:11px;
  padding:14px 18px;border:1px solid #1b1f13;border-radius:14px;
  background:linear-gradient(180deg,rgba(195,245,60,.05),rgba(195,245,60,0));
  font-size:13px;color:var(--t5);text-align:center}
.plate img{width:28px;height:28px;border-radius:8px;border:1px solid #262b1c;display:block;flex:none}
.plate b{color:var(--t2);font-weight:700}
.plate a{font-weight:600;text-decoration:none}
.plate a:hover{text-decoration:underline}
.legal{max-width:900px;margin:0 auto;text-align:center;font-size:11px;line-height:1.65;color:var(--legal)}
.legal strong{color:var(--t8);font-weight:600}

/* ─────────────────────────────────────────────────────────────
   Mobile. Most members will open this on a phone, from X.
   ───────────────────────────────────────────────────────────── */

/* Tablet / small laptop */
@media (max-width:760px){
  .top{padding:11px 16px;gap:12px}
  .brand>img{width:30px;height:30px}
  .brand-row strong{font-size:13.5px;white-space:normal}
  .brand-txt>span{display:none}          /* the hero says the same thing */
  .xlink{font-size:8.5px;padding:8px 12px 8px 8px;gap:7px}
  .xtile{width:18px;height:18px;font-size:9px}

  .hero-in{padding:34px 16px 30px;gap:16px}
  .hero h1{gap:10px}
  .hero p{font-size:13.5px}
  .chips{gap:7px}
  .chips span{font-size:7.5px;padding:8px 10px}

  .wrap{padding:16px 16px 34px;gap:14px}
  .controls{gap:14px}
  .block{padding:16px 15px 18px;border-radius:14px}
  .block h2{margin-bottom:13px}
  .block h2 .lbl{font-size:8.5px}

  .drop{height:190px}
  .pane{padding:11px;border-radius:14px}

  .foot-in{padding:18px 16px 24px;gap:15px}
  .foot-row{justify-content:center;text-align:center}
  .plate{font-size:12.5px;padding:13px 15px;gap:9px}
  .legal{font-size:10.5px}
}

/* Phones */
@media (max-width:520px){
  /* The header eats a third of a small screen when it sticks. Let it scroll away. */
  .top{position:static}
  .stage{position:static}

  .hero h1 .l2{text-shadow:3px 3px 0 #1c2312, 6px 6px 0 rgba(0,0,0,.55)}
  .hero-in{padding:26px 14px 24px}

  .wrap{padding:14px 14px 30px}
  .block{padding:15px 13px 17px}

  /* two across stays readable; three does not */
  .tpl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tpl{min-height:92px;padding:11px 12px 12px}
  .tpl b{font-size:12.5px}
  .tpl span{font-size:10.5px}

  .fields{grid-template-columns:minmax(0,1fr);gap:11px}
  .font-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .fnt i{font-size:17px}
  .fnt em{font-size:6.5px}

  .adv-in{grid-template-columns:minmax(0,1fr);gap:14px}

  /* full-width tap targets, no cramped side-by-side buttons */
  .actions-row{grid-template-columns:minmax(0,1fr);gap:7px}
  .card-actions,.card-actions.three{grid-template-columns:minmax(0,1fr);gap:7px}
  .btn{padding:13px 16px}          /* ≥44px tall */
  .btn.sm{padding:12px 14px}
  .seg button{padding:12px 0}

  .url-row{flex-wrap:wrap}
  .url-row input{flex:1 1 100%}
  .url-row .btn{flex:1 1 100%}

  .meta-row{gap:10px}
  .drop{height:170px}
  .drop.has img{max-height:150px;max-width:88%}
  .drop-in .plus{width:34px;height:34px}
  .drop-in b{font-size:12.5px}
  .drop-in span{font-size:7px}

  .foot-row{font-size:12px}
  .plate{flex-direction:column;gap:8px}
}

/* iOS zooms the page in when a focused input is under 16px. */
@media (max-width:520px){
  input[type=text]{font-size:16px;padding:13px 14px}
  #f-title{font-size:16px}
}

/* Very narrow (SE-class) */
@media (max-width:360px){
  .tpl-grid{grid-template-columns:minmax(0,1fr)}
  .tpl{min-height:0}
  .font-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #preset{grid-template-columns:minmax(0,1fr)}
}