:root{
  --bg:#0a0618;
  --bg2:#150a2e;
  --ink:#f4ecff;
  --dim:#a495c8;
  --pink:#ff2e88;
  --cyan:#00f0ff;
  --lime:#b6ff3c;
  --gold:#ffd53d;
  --violet:#8b5cff;
  --panel:rgba(28,14,58,.72);
  --edge:rgba(139,92,255,.45);
  --arcade:"Press Start 2P",monospace;
  --body:"Space Grotesk",system-ui,sans-serif;
}
*{box-sizing:border-box}
/* Class selectors beat the UA [hidden] rule, so restate it with weight. */
[hidden]{display:none !important}

html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1000px 600px at 15% -10%,rgba(255,46,136,.22),transparent 60%),
    radial-gradient(900px 500px at 85% 0%,rgba(0,240,255,.18),transparent 60%),
    linear-gradient(180deg,var(--bg2),var(--bg) 45%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--body);
  min-height:100vh;
  overflow-x:hidden;
}
.scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:9;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.55;
}
.grid-floor{
  position:fixed;left:0;right:0;bottom:0;height:38vh;pointer-events:none;z-index:0;
  background:
    linear-gradient(to top,rgba(10,6,24,0) 0%,rgba(10,6,24,.95) 82%),
    repeating-linear-gradient(to right,rgba(0,240,255,.35) 0 1px,transparent 1px 60px),
    repeating-linear-gradient(to top,rgba(255,46,136,.3) 0 1px,transparent 1px 42px);
  transform:perspective(300px) rotateX(62deg);
  transform-origin:bottom;opacity:.5;
}

/* HERO */
.hero{position:relative;z-index:2;text-align:center;padding:34px 16px 10px}
.coin-row{letter-spacing:.5em;font-size:15px;opacity:.85;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
.logo{
  font-family:var(--arcade);
  font-size:clamp(26px,7.5vw,62px);
  margin:14px 0 8px;line-height:1.1;letter-spacing:1px;
}
.logo .l1{color:var(--cyan);text-shadow:0 0 18px rgba(0,240,255,.8),4px 4px 0 #06202a}
.logo .l2{color:var(--pink);text-shadow:0 0 18px rgba(255,46,136,.8),4px 4px 0 #2a0616}
.tag{color:var(--dim);font-size:15px;margin:0 0 18px}
.tag b{color:var(--lime)}
.hud{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}
.hud-cell{
  background:var(--panel);border:2px solid var(--edge);border-radius:10px;
  padding:8px 16px;min-width:104px;backdrop-filter:blur(6px);
}
.hud-cell span{display:block;font-family:var(--arcade);font-size:8px;color:var(--dim);margin-bottom:6px}
.hud-cell b{font-family:var(--arcade);font-size:13px;color:var(--gold)}

/* LAYOUT */
.wrap{
  position:relative;z-index:2;
  max-width:1080px;margin:0 auto;padding:18px 16px 90px;
  display:grid;gap:18px;
  grid-template-columns:340px 1fr;
  align-items:start;
}
.board-wrap{grid-column:2;grid-row:1 / span 3}
.rules{grid-column:1 / -1}
@media(max-width:860px){
  .wrap{grid-template-columns:1fr}
  .board-wrap{grid-column:1;grid-row:auto}
}

.panel,.board-wrap,.rules{
  background:var(--panel);
  border:2px solid var(--edge);
  border-radius:14px;
  padding:16px;
  backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 16px 40px rgba(0,0,0,.45);
}
.panel-title{font-family:var(--arcade);font-size:11px;color:var(--cyan);margin:0 0 14px;letter-spacing:1px}

/* FORM */
form label{display:block;font-family:var(--arcade);font-size:8px;color:var(--dim);margin-bottom:12px;letter-spacing:.5px}
form label em{color:#6f5f92;font-style:normal}
input,textarea{
  width:100%;margin-top:7px;
  background:#0d0722;color:var(--ink);
  border:2px solid rgba(139,92,255,.5);border-radius:8px;
  padding:10px 12px;font-family:var(--body);font-size:15px;
  transition:border-color .15s,box-shadow .15s;
}
textarea{resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,240,255,.18)}

.btn{
  font-family:var(--arcade);font-size:9px;letter-spacing:.5px;
  background:linear-gradient(180deg,var(--pink),#c4176a);
  color:#fff;border:none;border-radius:9px;
  padding:13px 16px;cursor:pointer;
  line-height:1.7;
  box-shadow:0 4px 0 #7c0e43;
  transition:transform .08s,box-shadow .08s,filter .15s;
}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 #7c0e43}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.big{width:100%;font-size:11px;padding:16px}
.btn.ghost{background:transparent;border:2px solid var(--edge);color:var(--dim);box-shadow:0 4px 0 rgba(139,92,255,.25)}
.btn.cyan{background:linear-gradient(180deg,var(--cyan),#0aa6b6);color:#04202a;box-shadow:0 4px 0 #076b77}
.fineprint{font-size:12px;color:#6f5f92;margin:10px 0 0;line-height:1.5}
.hint{font-size:13px;color:var(--dim);margin:10px 0 0;min-height:18px}

/* ME */
.me-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.me-stats div{background:#0d0722;border:2px solid rgba(139,92,255,.3);border-radius:8px;padding:8px 4px;text-align:center}
.me-stats span{display:block;font-family:var(--arcade);font-size:7px;color:var(--dim);margin-bottom:6px}
.me-stats b{font-family:var(--arcade);font-size:12px;color:var(--lime)}
.me-actions{display:flex;gap:8px}
.me-actions .btn{flex:1}

/* BOARD */
.board-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.board-head .panel-title{margin:0}
.live{font-family:var(--arcade);font-size:8px;color:var(--lime);animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.board{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.row{
  display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;
  background:linear-gradient(90deg,rgba(13,7,34,.9),rgba(21,10,46,.9));
  border:2px solid rgba(139,92,255,.3);border-radius:12px;padding:12px;
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.row:hover{transform:translateX(3px);border-color:var(--violet)}
.row.mine{border-color:var(--lime);box-shadow:0 0 22px rgba(182,255,60,.2)}
.row.r1{border-color:var(--gold);box-shadow:0 0 26px rgba(255,213,61,.25)}
.rank{font-family:var(--arcade);font-size:15px;color:var(--gold);text-align:center}
.row.r1 .rank{font-size:19px}
.rank small{display:block;font-size:7px;color:var(--dim);margin-top:5px}
.who{min-width:0}
.who .name{font-weight:700;font-size:16px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.who .name a{color:var(--cyan);text-decoration:none;font-size:12px;font-weight:600;opacity:.85;word-break:break-all}
.who .name a:hover{text-decoration:underline}
.who .bio{color:var(--dim);font-size:13px;margin:4px 0 0;line-height:1.4;overflow-wrap:anywhere}
.who .meta{font-size:11px;color:#6f5f92;margin-top:5px;font-family:var(--arcade);font-size:7px}
.badge{font-family:var(--arcade);font-size:7px;padding:3px 6px;border-radius:5px;background:rgba(182,255,60,.15);color:var(--lime);border:1px solid rgba(182,255,60,.4)}
.side{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.score{font-family:var(--arcade);font-size:13px;color:var(--lime)}
.rowbtns{display:flex;gap:6px}
.mini{
  font-family:var(--arcade);font-size:7px;border:none;border-radius:6px;padding:8px 9px;cursor:pointer;
  background:rgba(139,92,255,.25);color:var(--ink);border:1px solid var(--edge);white-space:nowrap;
  transition:filter .12s,transform .08s;
}
.mini:hover{filter:brightness(1.3)}
.mini:active{transform:translateY(2px)}
.mini.visit{background:rgba(0,240,255,.14);color:var(--cyan);border-color:rgba(0,240,255,.45);text-decoration:none;display:inline-flex;align-items:center;line-height:1}
.mini.pass{background:linear-gradient(180deg,var(--cyan),#0aa6b6);color:#04202a;border-color:transparent}
.mini.hit{background:linear-gradient(180deg,var(--pink),#c4176a);color:#fff;border-color:transparent}
.empty{color:var(--dim);text-align:center;padding:26px;font-size:14px}

/* FEED */
.feed-list{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto;display:grid;gap:6px}
.feed-list li{font-size:12.5px;color:var(--dim);border-left:3px solid var(--violet);padding:5px 9px;background:rgba(13,7,34,.6);border-radius:0 6px 6px 0;line-height:1.4}
.feed-list li.climb{border-color:var(--cyan)}
.feed-list li.strike{border-color:var(--pink)}
.feed-list li.join{border-color:var(--lime)}
.feed-list time{display:block;font-size:10px;color:#5d4f80;margin-top:2px}

/* RULES */
.rules ol{margin:0;padding-left:20px;color:var(--dim);line-height:1.65;font-size:14px}
.rules li{margin-bottom:8px}
.rules b{color:var(--ink)}
.rules code{background:#0d0722;border:1px solid var(--edge);border-radius:5px;padding:1px 6px;color:var(--gold);font-size:13px}

/* MODAL */
.modal{position:fixed;inset:0;z-index:30;background:rgba(6,3,16,.82);display:grid;place-items:center;padding:20px}
.modal-box{background:var(--bg2);border:2px solid var(--pink);border-radius:14px;padding:22px;max-width:380px;width:100%;box-shadow:0 0 50px rgba(255,46,136,.35)}
.modal-box h3{font-family:var(--arcade);font-size:12px;color:var(--pink);margin:0 0 12px}
.modal-box p{color:var(--dim);font-size:13px;margin:0 0 12px}
.quick{display:flex;gap:6px;margin-top:9px}
.quick button{flex:1;font-family:var(--arcade);font-size:8px;padding:9px 0;border-radius:6px;border:1px solid var(--edge);background:rgba(139,92,255,.2);color:var(--ink);cursor:pointer}
.quick button:hover{filter:brightness(1.3)}
.modal-actions{display:flex;gap:8px;margin-top:16px}
.modal-actions .btn{flex:1}

/* TOAST */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:40;
  background:var(--bg2);border:2px solid var(--lime);color:var(--ink);
  font-family:var(--arcade);font-size:9px;line-height:1.6;
  padding:14px 18px;border-radius:10px;max-width:88vw;text-align:center;
  box-shadow:0 0 34px rgba(182,255,60,.3);
}
.toast.bad{border-color:var(--pink);box-shadow:0 0 34px rgba(255,46,136,.35)}

/* ROLL */
.roll-overlay{position:fixed;inset:0;z-index:50;background:rgba(6,3,16,.93);display:grid;place-items:center}
.roll-box{text-align:center}
.roll-box p{font-family:var(--arcade);font-size:11px;color:var(--cyan);margin:0 0 18px}
.roll-num{
  font-family:var(--arcade);font-size:clamp(50px,16vw,110px);color:var(--gold);
  text-shadow:0 0 30px rgba(255,213,61,.7);
}
.roll-sub{margin-top:18px !important;color:var(--lime) !important;font-size:13px !important}
@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}