/* ============================================================================
   communitypolls.ripz.one — stylesheet.  MOBILE FIRST.

   The palette, type and spacing are lifted straight from ripz_deploy/assets/
   ripz.css so this feels like part of the same family. It is a SEPARATE file
   rather than an import because this is a separate Vercel project and a public
   page: it must not depend on anything behind the ripz login.

   Same house rules as the main stylesheet:
     - phone layout is the real design; desktop is the min-width variant
     - touch targets >= 44px, never smaller
     - no data tables (they can't be read at 380px) — stacked rows instead
     - horizontal scrolling is a bug, except deliberately swipeable strips
   ========================================================================== */

:root{
  /* OFFICIAL RIPZ palette (brand board, 2026-07-27) */
  --bg:#111111; --bg2:#17171a; --panel:#1f1f22; --panel2:#26262c;
  --line:#2c2c31; --line2:#3a3a41;
  --ink:#f8f8f6; --muted:#b9b9b8; --dim:#6f7074;
  --gold:#d8b04a; --gold-hi:#ffd86c; --gold-lo:#b6862a; --gold-bright:#f5d36b;
  --bronze:#7c5720; --bronze-dk:#3c2912;
  --silver:#d8d8d6;
  --emer:#37e0a0; --red:#ff6a75; --blue:#5aa9ff; --violet:#b18cff; --amber:#f2a65a;
  --radius:14px; --tap:44px; --pad:14px;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;overflow-x:clip}
body{
  background:
    radial-gradient(600px 320px at 80% -6%,rgba(216,176,74,.12),transparent 60%),
    radial-gradient(500px 400px at 0% 0%,rgba(216,216,214,.03),transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.5;
}
.wrap{padding:14px var(--pad) 90px;position:relative;z-index:1;max-width:1200px;margin:0 auto}
a{color:var(--gold-hi)}
.metal-gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- header + countdown -------------------------------------------------- */
header.top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  padding:12px 0 10px;border-bottom:1px solid var(--line)}
.brand{font-family:'Orbitron',sans-serif;font-weight:800;font-size:17px;letter-spacing:1px}
.brand small{display:block;font-family:'Inter',sans-serif;font-weight:400;font-size:11px;
  letter-spacing:.4px;color:var(--dim);text-transform:uppercase}
.whoami{font-size:12px;color:var(--muted)}
.whoami b{color:var(--gold-hi)}

.clock{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.clock .seg{background:var(--panel);border:1px solid var(--line2);border-radius:10px;
  padding:6px 9px;min-width:52px;text-align:center}
.clock .seg b{display:block;font-family:var(--mono);font-size:17px;color:var(--gold-hi);line-height:1.1}
.clock .seg span{font-size:9.5px;letter-spacing:.8px;color:var(--dim);text-transform:uppercase}
.clock.ended .seg b{color:var(--red)}

/* ---- top-level nav ------------------------------------------------------- */
nav.views{display:flex;gap:8px;margin:12px 0 4px;overflow-x:auto;padding-bottom:2px}
nav.views button{flex:0 0 auto;min-height:var(--tap);background:var(--panel);color:var(--muted);
  border:1px solid var(--line2);border-radius:11px;padding:0 15px;font:inherit;font-size:13.5px;
  font-weight:700;cursor:pointer}
nav.views button[aria-current="true"]{color:var(--bg);border-color:var(--gold);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 60%,var(--gold-lo))}

/* ---- panels -------------------------------------------------------------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px;margin-top:14px}
.panel h2{margin:0 0 4px;font-size:19px;font-weight:700}
.panel p.sub{margin:0 0 12px;font-size:13px;color:var(--muted)}
.hint{font-size:12px;color:var(--dim);margin-top:8px}
.warn{color:var(--amber)} .bad{color:var(--red)} .good{color:var(--emer)}

/* ---- form controls ------------------------------------------------------- */
label.fld{display:block;font-size:11px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--dim);font-weight:700;margin-bottom:4px}
input[type=text],input[type=password],input[type=number],select{
  width:100%;min-height:var(--tap);background:var(--panel2);border:1px solid var(--line2);
  color:var(--ink);font-family:inherit;font-size:15px;padding:9px 11px;border-radius:10px;outline:none}
input:focus,select:focus{border-color:var(--gold-lo)}
.btn{min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--panel2);color:var(--ink);border:1px solid var(--line2);border-radius:11px;
  padding:0 16px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn.gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold) 60%,var(--gold-lo));
  color:#171208;border-color:var(--gold-lo)}
.btn.danger{border-color:#5a2a2e;color:var(--red)}
.btn.sm{min-height:36px;font-size:12.5px;padding:0 11px}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* ---- the Discord identity gate ------------------------------------------- */
/* Discord brand blurple, used only on the one button that hands off to Discord,
   so it reads as "this leaves our site" rather than as a ripz action. */
.btn.discord{background:#5865f2;border-color:#4752c4;color:#fff;font-size:15px;padding:0 20px}
.btn.discord:hover{background:#4752c4}
.btn.discord .dmark{font-size:11px;opacity:.85}
.gateerr{margin:0 0 12px;padding:10px 13px;border-radius:11px;font-size:13.5px;
  background:rgba(255,106,117,.09);border:1px solid #5a2a2e;color:var(--red)}

/* ---- category tabs ------------------------------------------------------- */
.cats{display:flex;gap:7px;overflow-x:auto;padding:4px 0 6px;margin:0 -2px}
.cats button{flex:0 0 auto;min-height:40px;background:var(--panel2);border:1px solid var(--line2);
  color:var(--muted);border-radius:999px;padding:0 13px;font:inherit;font-size:13px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;gap:6px}
.cats button[aria-current="true"]{color:var(--gold-hi);border-color:var(--gold-lo);
  background:rgba(216,176,74,.13)}
.cats .pip{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.cats button[aria-current="true"] .pip{color:var(--gold)}
.cats .done{color:var(--emer)}

/* ---- two-column layout: picker left, board right ------------------------- */
.cols{display:flex;gap:20px;align-items:flex-start;margin-top:12px}
.colpick{flex:0 0 340px;max-width:360px;min-width:0}
.colboard{flex:1;min-width:0}
@media(max-width:860px){ .cols{flex-direction:column;align-items:stretch} .colpick{flex-basis:auto;max-width:none;width:100%} .colboard{width:100%;min-width:0} }
/* belt-and-braces: never let a slot row exceed the screen — keep the grip on-canvas */
.slots{width:100%;max-width:100%}
.slot{max-width:100%}
.slot .body{overflow:hidden}

/* ---- the cascading picker ------------------------------------------------ */
.pk{display:flex;flex-direction:column;gap:10px}
.pk-row{display:flex;flex-direction:column;gap:4px}
.pk-row[hidden]{display:none}
.pk-row label{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--dim);font-weight:700}

.preview{margin-top:12px;border:1px solid var(--line2);border-radius:12px;padding:11px;
  background:var(--panel2);display:flex;gap:11px;align-items:flex-start}
.preview .pv-img{flex:0 0 78px}
.preview .pv-meta{min-width:0;flex:1}
.preview .pv-meta h4{margin:0 0 3px;font-size:14px;line-height:1.25}
.preview .pv-meta div{font-size:11.5px;color:var(--muted);word-break:break-word}
.preview .pv-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px;width:100%}
.pvph{border:1px dashed var(--line2);border-radius:12px;padding:20px;text-align:center;
  color:var(--dim);font-size:13px;margin-top:12px}

/* card thumbnails, and the "no image yet" placeholder (never looks like an error) */
.thumb{width:100%;aspect-ratio:5/7;object-fit:cover;border-radius:8px;background:var(--bg2);
  border:1px solid var(--line2);display:block}
.thumb.ph{display:flex;align-items:center;justify-content:center;font-size:9px;line-height:1.2;
  text-align:center;color:var(--dim);padding:4px}
.thumb.ph::after{content:"Image coming soon"}

/* ---- the 25-slot ranking board ------------------------------------------- */
.boardhead{display:flex;flex-wrap:wrap;gap:9px;align-items:center;justify-content:space-between}
.progress{font-family:var(--mono);font-size:13px;color:var(--gold-hi)}
.progress.short{color:var(--amber)}
.bar{height:5px;border-radius:4px;background:var(--panel2);border:1px solid var(--line);
  overflow:hidden;margin:9px 0 3px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi))}

.slots{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.slot{display:flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line);
  border-radius:11px;padding:7px 9px;min-height:60px}
.slot.empty{background:transparent;border-style:dashed;color:var(--dim);min-height:44px}
.slot .num{flex:0 0 26px;text-align:center;font-family:var(--mono);font-size:13px;color:var(--dim)}
.slot.top3 .num{color:var(--gold-hi);font-weight:700}
.slot .sthumb{flex:0 0 34px}
.slot .sthumb .thumb{aspect-ratio:5/7}
.slot .body{flex:1;min-width:0}
.slot .body b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.slot .body span{display:block;font-size:11px;color:var(--dim);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.slot .grip{flex:0 0 auto;width:34px;height:44px;display:flex;align-items:center;justify-content:center;
  color:var(--dim);cursor:grab;touch-action:none;font-size:15px;user-select:none;-webkit-user-select:none}
.slot .grip:active{cursor:grabbing;color:var(--gold-hi)}
.slot .kill{flex:0 0 auto;width:34px;height:38px;background:transparent;border:0;color:var(--dim);
  font-size:17px;cursor:pointer;border-radius:8px}
.slot .kill:hover{color:var(--red);background:rgba(255,106,117,.08)}
.slot.dragsrc{opacity:.35}
.slot.dropinto{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-lo) inset}

/* the element that follows the finger/cursor while dragging */
.ghost{position:fixed;z-index:70;pointer-events:none;opacity:.94;width:min(320px,80vw);
  box-shadow:0 12px 30px rgba(0,0,0,.55);transform:translate(-24px,-26px)}
.dragging{cursor:grabbing}
body.dragging{overflow:hidden}

/* ---- leaderboard --------------------------------------------------------- */
.state{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;border-radius:999px;padding:5px 11px;
  border:1px solid var(--line2);color:var(--amber)}
.state.final{color:var(--emer);border-color:#1f5540}
.lb{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.lb li{display:flex;gap:10px;align-items:center;background:var(--panel2);border:1px solid var(--line);
  border-radius:11px;padding:8px 10px}
.lb .pos{flex:0 0 30px;text-align:center;font-family:var(--mono);font-size:14px;color:var(--dim)}
.lb li:nth-child(1) .pos,.lb li:nth-child(2) .pos,.lb li:nth-child(3) .pos{color:var(--gold-hi);font-weight:700}
.lb .lthumb{flex:0 0 40px}
.lb .body{flex:1;min-width:0}
.lb .body b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .body span{display:block;font-size:11px;color:var(--dim)}
.lb .pts{flex:0 0 auto;text-align:right}
.lb .pts b{display:block;font-family:var(--mono);font-size:15px;color:var(--gold-hi)}
.lb .pts span{font-size:10px;color:var(--dim)}
.statline{font-size:11px;color:var(--dim);font-family:var(--mono)}

.roll{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.roll span{font-size:11.5px;background:var(--panel2);border:1px solid var(--line);
  border-radius:999px;padding:4px 10px;color:var(--muted)}

/* ---- archive ------------------------------------------------------------- */
.arch{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.arch li{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:11px}
.arch b{font-size:14px}
.arch span{font-size:11.5px;color:var(--dim)}

/* ---- toast --------------------------------------------------------------- */
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(20px);
  background:var(--panel2);border:1px solid var(--gold-lo);color:var(--ink);border-radius:11px;
  padding:11px 15px;font-size:13.5px;max-width:min(440px,92vw);text-align:center;z-index:90;
  opacity:0;transition:opacity .18s,transform .18s;pointer-events:none;box-shadow:0 8px 26px rgba(0,0,0,.5)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

.spin{color:var(--dim);font-size:13px;padding:22px;text-align:center}