/* ══════════════════════════════════════════════════════════════════════
   PIXEL UP! · arcade design system
   Comic + anime read comes from SHAPE, not from a novelty typeface:
   heavy ink outlines, hard offset shadows, halftone dots, speed lines and
   panel gutters. One family (Inter) throughout, so weight carries the
   hierarchy and nothing ever fights itself for legibility.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ── ink & paper · the arcade is a lit room at night ── */
  --ink:#0b0710;
  --ink-2:#171024;
  --panel:#1c1330;
  --panel-2:#241838;
  --line:#3a2a55;
  --paper:#fdf6ea;

  /* ── neon · one hot, one cool, one warm, used sparingly ── */
  --hot:#ff2d78;
  --cool:#22e3ff;
  --sun:#ffd21f;
  --slime:#7dff5a;
  --violet:#a06bff;

  --txt:#f4ecff;
  --txt-2:#bda9d8;
  --dim:#8f7cae;

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  /* ── ONE depth scale · every raised object uses these ── */
  --pop-0:2px 2px 0 var(--ink);
  --pop-1:4px 4px 0 var(--ink);
  --pop-2:7px 7px 0 var(--ink);
  --bevel:inset 2px 2px 0 rgba(255,255,255,.14), inset -2px -2px 0 rgba(0,0,0,.42);
  --bevel-in:inset 3px 3px 0 rgba(0,0,0,.5), inset -2px -2px 0 rgba(255,255,255,.1);

  --rail:1420px;
  --gut:20px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);background:var(--ink);color:var(--txt);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  /* the halftone the whole page sits on */
  background-image:
    radial-gradient(rgba(160,107,255,.10) 1px, transparent 1px),
    radial-gradient(1200px 600px at 50% -10%, rgba(255,45,120,.16), transparent 70%);
  background-size:14px 14px, 100% 100%;
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--cool);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--rail);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ══ HEADER ══════════════════════════════════════════════════════════ */
.top{position:sticky;top:0;z-index:60;background:rgba(11,7,16,.94);
  backdrop-filter:blur(10px);border-bottom:3px solid var(--ink);box-shadow:0 4px 0 rgba(0,0,0,.5)}
.top-in{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand .mark{width:38px;height:38px;flex:none}
.brand .wm{font-weight:900;font-size:21px;letter-spacing:-.035em;line-height:1;white-space:nowrap}
.brand .wm i{font-style:normal;color:var(--sun)}
.brand .wm b{font-weight:900;color:var(--hot)}

.nav{display:flex;gap:4px;margin-left:8px}
.nav a{padding:7px 13px;border-radius:10px;font-weight:800;font-size:13.5px;letter-spacing:.02em;
  color:var(--txt-2);border:2px solid transparent;transition:.14s}
.nav a:hover{color:var(--txt);background:var(--panel);border-color:var(--line)}
.nav a.on{color:var(--ink);background:var(--sun);border-color:var(--ink);box-shadow:var(--pop-0)}

.search{margin-left:auto;position:relative;flex:1;max-width:340px}
.search input{width:100%;height:40px;padding:0 38px 0 14px;border-radius:12px;
  border:2.5px solid var(--line);background:var(--panel);color:var(--txt);font-weight:600;font-size:14px}
.search input::placeholder{color:var(--dim)}
.search input:focus{border-color:var(--cool);outline:none}
.search .mag{position:absolute;right:12px;top:11px;color:var(--dim);pointer-events:none}

.xp-pill{display:flex;align-items:center;gap:8px;flex:none;padding:6px 12px;border-radius:999px;
  border:2.5px solid var(--ink);background:linear-gradient(150deg,var(--hot),var(--violet));
  box-shadow:var(--bevel),var(--pop-0);font-weight:900;font-size:12.5px;letter-spacing:.04em;white-space:nowrap}
.xp-pill .lv{background:var(--ink);color:var(--sun);border-radius:6px;padding:1px 7px;font-size:11px}
.burger{display:none;flex:none;width:42px;height:40px;border:2.5px solid var(--line);border-radius:11px;
  background:var(--panel);align-items:center;justify-content:center;font-size:18px}

/* ══ CATEGORY RAIL ═══════════════════════════════════════════════════ */
.catrail{border-bottom:3px solid var(--ink);background:var(--ink-2)}
.catrail-in{display:flex;gap:9px;overflow-x:auto;padding:12px 0;scrollbar-width:none}
.catrail-in::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  border:2.5px solid var(--line);background:var(--panel);font-weight:800;font-size:12.5px;
  letter-spacing:.03em;color:var(--txt-2);white-space:nowrap;transition:.14s}
.chip:hover{color:var(--txt);border-color:var(--cool);transform:translateY(-2px)}
.chip.on{background:var(--cool);color:var(--ink);border-color:var(--ink);box-shadow:var(--pop-0)}
.chip .g{font-size:14px}

/* ══ SPOTLIGHT ═══════════════════════════════════════════════════════ */
.spot{padding:26px 0 6px;position:relative}
.spot-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:16px}
@media(max-width:900px){ .spot-grid{grid-template-columns:1fr} }
.spot-lead{position:relative;border:4px solid var(--ink);border-radius:20px;overflow:hidden;
  box-shadow:var(--pop-2);background:var(--panel);cursor:pointer;min-height:330px;display:flex}
.spot-lead .art{position:absolute;inset:0;z-index:0}
.spot-lead .art svg{width:100%;height:100%;object-fit:cover}
.spot-lead .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,7,16,0) 28%,rgba(11,7,16,.62) 62%,rgba(11,7,16,.95))}
.spot-lead .meat{position:relative;z-index:2;margin-top:auto;padding:22px 24px}
.spot-lead h2{margin:0 0 8px;font-size:clamp(26px,3.4vw,42px);font-weight:900;letter-spacing:-.035em;line-height:1.03}
.spot-lead p{margin:0 0 14px;color:var(--txt-2);max-width:52ch;font-weight:500;font-size:14.5px}
.spot-side{display:grid;grid-template-rows:repeat(3,1fr);gap:14px}
.spot-mini{position:relative;display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:center;
  border:3.5px solid var(--ink);border-radius:16px;background:var(--panel);box-shadow:var(--pop-1);
  overflow:hidden;cursor:pointer;transition:transform .14s,box-shadow .14s}
.spot-mini:hover{transform:translate(-3px,-3px);box-shadow:var(--pop-2)}
.spot-mini .th{height:100%;min-height:96px;border-right:3.5px solid var(--ink);overflow:hidden}
.spot-mini .th svg{width:100%;height:100%}
.spot-mini .b{padding:10px 14px 10px 0;min-width:0}
.spot-mini h3{margin:0 0 4px;font-size:16px;font-weight:900;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spot-mini .sub{font-size:12px;color:var(--dim);font-weight:700}

/* ══ SECTION HEADS ═══════════════════════════════════════════════════ */
.sec{padding:30px 0 4px}
.sec-head{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.sec-head h2{margin:0;font-size:clamp(19px,2.2vw,25px);font-weight:900;letter-spacing:-.03em;
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.sec-head h2 .g{font-size:1.15em}
/* the rule is a comic panel gutter, not a hairline */
.sec-head .rule{flex:1;height:6px;border-radius:3px;background:
  repeating-linear-gradient(90deg,var(--line) 0 10px,transparent 10px 18px)}
.sec-head .more{flex:none;font-weight:900;font-size:12.5px;letter-spacing:.06em;color:var(--sun);
  border:2.5px solid var(--line);border-radius:999px;padding:5px 13px;transition:.14s}
.sec-head .more:hover{color:var(--ink);background:var(--sun);border-color:var(--ink);box-shadow:var(--pop-0)}

/* ══ GAME GRID + ROW ═════════════════════════════════════════════════ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:16px}
.row{display:grid;grid-auto-flow:column;grid-auto-columns:236px;gap:16px;overflow-x:auto;
  padding:4px 2px 18px;scroll-snap-type:x proximity;scrollbar-width:thin}
.row::-webkit-scrollbar{height:8px}
.row::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.row>*{scroll-snap-align:start}

/* ══ GAME CARD ═══════════════════════════════════════════════════════ */
.card{position:relative;display:flex;flex-direction:column;text-align:left;width:100%;
  background:var(--panel);border:3.5px solid var(--ink);border-radius:16px;overflow:hidden;
  box-shadow:var(--bevel),var(--pop-1);cursor:pointer;transition:transform .16s,box-shadow .16s}
.card:hover{transform:translate(-4px,-4px);box-shadow:var(--bevel),9px 9px 0 var(--ink);z-index:2}
.card:active{transform:translate(1px,1px);box-shadow:var(--bevel-in),var(--pop-0)}
.card .th{position:relative;aspect-ratio:4/3;border-bottom:3.5px solid var(--ink);overflow:hidden;background:var(--ink-2)}
.card .th svg{width:100%;height:100%}
/* halftone over the art, the way a printed panel screens down */
.card .th::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:radial-gradient(rgba(255,255,255,.9) 1.1px,transparent 1.1px);background-size:7px 7px}
.card .play{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  background:rgba(11,7,16,.55);opacity:0;transition:opacity .16s}
.card:hover .play,.card:focus-visible .play{opacity:1}
.card .play span{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:12px;
  background:var(--sun);color:var(--ink);border:3px solid var(--ink);box-shadow:var(--pop-1);
  font-weight:900;font-size:14px;letter-spacing:.04em}
.card .b{padding:11px 13px 13px;display:flex;flex-direction:column;gap:7px;flex:1}
.card h3{margin:0;font-size:15px;font-weight:900;letter-spacing:-.02em;line-height:1.22}
.card .meta{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;color:var(--dim)}
.card .stars{color:var(--sun);letter-spacing:-1px}
.card .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto}
.tag{font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;padding:2px 7px;
  border-radius:6px;border:2px solid var(--line);color:var(--txt-2);background:var(--ink-2)}
.card .best{position:absolute;top:9px;left:9px;z-index:3;font-size:10.5px;font-weight:900;letter-spacing:.06em;
  padding:3px 9px;border-radius:999px;background:var(--slime);color:var(--ink);
  border:2.5px solid var(--ink);box-shadow:var(--pop-0)}
.card .fav{position:absolute;top:8px;right:8px;z-index:4;width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-size:15px;
  background:rgba(11,7,16,.72);border:2.5px solid var(--line);transition:.14s}
.card .fav:hover{border-color:var(--hot);transform:scale(1.08)}
.card .fav.on{background:var(--hot);border-color:var(--ink);box-shadow:var(--pop-0)}
/* the corner flash — a cover price worn like a comic */
.card .flash{position:absolute;z-index:3;bottom:-2px;right:-2px;font-size:10.5px;font-weight:900;
  letter-spacing:.06em;padding:3px 10px;border-radius:10px 0 12px 0;background:var(--hot);color:#fff;
  border:2.5px solid var(--ink)}

/* ══ CATEGORY TILES ══════════════════════════════════════════════════ */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:13px}
.cat{position:relative;display:flex;align-items:center;gap:11px;padding:15px 14px;border-radius:15px;
  border:3.5px solid var(--ink);background:var(--panel);box-shadow:var(--bevel),var(--pop-1);
  font-weight:900;font-size:14.5px;letter-spacing:-.01em;overflow:hidden;transition:transform .14s,box-shadow .14s}
.cat:hover{transform:translate(-3px,-3px);box-shadow:var(--bevel),var(--pop-2)}
.cat .g{font-size:24px;line-height:1;flex:none}
.cat .n{font-size:11px;font-weight:800;color:var(--dim);display:block;letter-spacing:.05em}
/* speed lines behind the label */
.cat::before{content:'';position:absolute;inset:0;opacity:.2;pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 9px,rgba(255,255,255,.09) 9px 11px)}

/* ══ TOP 100 / LEADERBOARD ═══════════════════════════════════════════ */
.board{border:3.5px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:var(--bevel),var(--pop-2)}
.board-row{display:grid;grid-template-columns:54px 76px 1fr auto auto;gap:14px;align-items:center;
  padding:10px 14px;background:var(--panel);border-bottom:2.5px solid var(--ink-2);transition:.12s;cursor:pointer}
.board-row:last-child{border-bottom:0}
.board-row:hover{background:var(--panel-2)}
.board-row .rk{font-weight:900;font-size:19px;color:var(--dim);text-align:center;letter-spacing:-.04em}
.board-row:nth-child(1) .rk{color:var(--sun)}
.board-row:nth-child(2) .rk{color:#d9d3e6}
.board-row:nth-child(3) .rk{color:#e08b4a}
.board-row .th{border:2.5px solid var(--ink);border-radius:9px;overflow:hidden;aspect-ratio:4/3}
.board-row .nm{font-weight:900;font-size:14.5px;letter-spacing:-.02em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-row .nm small{display:block;font-size:11.5px;color:var(--dim);font-weight:700;letter-spacing:.02em}
.board-row .sc{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--cool);white-space:nowrap}
.board-row .go{font-weight:900;font-size:11.5px;letter-spacing:.06em;color:var(--sun);white-space:nowrap}
@media(max-width:640px){ .board-row{grid-template-columns:40px 60px 1fr auto} .board-row .go{display:none} }

/* ══ PLAYER (the cabinet) ════════════════════════════════════════════ */
.cab{position:fixed;inset:0;z-index:200;display:none;background:rgba(6,3,10,.93);
  backdrop-filter:blur(8px);padding:16px}
.cab.open{display:flex;align-items:center;justify-content:center}
.cab-in{width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;
  border:4px solid var(--ink);border-radius:20px;background:var(--panel);
  box-shadow:var(--bevel),0 20px 60px rgba(0,0,0,.7);overflow:hidden}
.cab-top{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--ink-2);
  border-bottom:3px solid var(--ink);flex:none}
.cab-top h2{margin:0;font-size:17px;font-weight:900;letter-spacing:-.025em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cab-top .sp{margin-left:auto}
.cab-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:10px;
  border:2.5px solid var(--line);background:var(--panel);font-weight:900;font-size:12.5px;
  letter-spacing:.04em;transition:.14s;white-space:nowrap}
.cab-btn:hover{border-color:var(--cool);color:var(--cool)}
.cab-btn.hot{background:var(--hot);border-color:var(--ink);color:#fff;box-shadow:var(--pop-0)}
.cab-btn.sun{background:var(--sun);border-color:var(--ink);color:var(--ink);box-shadow:var(--pop-0)}
.cab-stage{position:relative;background:#07040c;display:flex;align-items:center;justify-content:center;
  min-height:0;flex:1;padding:10px}
.cab-stage canvas{display:block;max-width:100%;max-height:100%;image-rendering:pixelated;
  border:3px solid var(--ink);border-radius:10px;background:#0a0614;touch-action:none}
.cab-hud{display:flex;align-items:center;gap:16px;padding:10px 14px;background:var(--ink-2);
  border-top:3px solid var(--ink);flex:none;flex-wrap:wrap;font-weight:800;font-size:12.5px}
.cab-hud .k{color:var(--dim);letter-spacing:.08em;font-size:10.5px;text-transform:uppercase;display:block}
.cab-hud .v{font-family:var(--mono);font-size:16px;color:var(--cool);font-weight:700}
.cab-hud .keys{margin-left:auto;color:var(--dim);font-weight:700;font-size:11.5px;letter-spacing:.02em}
kbd{font-family:var(--mono);font-size:11px;background:var(--panel);border:2px solid var(--line);
  border-bottom-width:3px;border-radius:5px;padding:1px 5px;color:var(--txt-2)}

/* the overlay the games raise for menus, pause and game over */
.cab-over{position:absolute;inset:10px;z-index:5;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center;padding:22px;
  background:rgba(11,7,16,.9);border-radius:10px}
.cab-over.show{display:flex}
.cab-over h3{margin:0;font-size:clamp(26px,5vw,44px);font-weight:900;letter-spacing:-.04em;line-height:1}
.cab-over h3.win{color:var(--slime)} .cab-over h3.lose{color:var(--hot)}
.cab-over p{margin:0;color:var(--txt-2);max-width:44ch;font-weight:600}
.cab-over .big{font-family:var(--mono);font-size:clamp(30px,7vw,54px);color:var(--sun);font-weight:700;line-height:1}

/* ══ FOOTER ══════════════════════════════════════════════════════════ */
.foot{margin-top:46px;border-top:3px solid var(--ink);background:var(--ink-2);padding:30px 0 40px}
.foot-in{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start}
.foot .fb{flex:1;min-width:210px}
.foot h4{margin:0 0 10px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.foot a{display:block;padding:3px 0;color:var(--txt-2);font-weight:600;font-size:13.5px}
.foot a:hover{color:var(--sun)}
.foot .fine{margin-top:22px;padding-top:16px;border-top:2px solid var(--line);
  color:var(--dim);font-size:12px;font-weight:600}

/* ══ MISC ════════════════════════════════════════════════════════════ */
.empty{padding:46px 20px;text-align:center;color:var(--dim);font-weight:700}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:300;
  padding:11px 20px;border-radius:12px;background:var(--sun);color:var(--ink);border:3px solid var(--ink);
  box-shadow:var(--pop-1);font-weight:900;font-size:13.5px;opacity:0;pointer-events:none;transition:.22s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:860px){
  .nav{display:none}
  .burger{display:flex}
  .search{max-width:none}
  .brand .wm{font-size:18px}
}
@media(max-width:640px){
  /* long section titles must wrap here — `nowrap` on the h2 was pushing the
     whole page 76px wide on a 375px screen and letting it scroll sideways */
  .sec-head{flex-wrap:wrap;row-gap:8px}
  .sec-head h2{white-space:normal;min-width:0;font-size:17px}
  .sec-head .rule{min-width:24px}
}
@media(max-width:520px){
  :root{--gut:13px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
  .row{grid-auto-columns:176px;gap:11px}
  .card h3{font-size:13.5px}
  .xp-pill .lvname{display:none}
  .spot-mini{grid-template-columns:92px 1fr}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ══ WAGER ARENA · staked tables live in wager.html, the arcade links in ══ */
.px-pill{background:linear-gradient(150deg,#14b8a6,#ff8c3a);color:var(--ink)}
.px-pill .lv{color:#2dd4bf}
.card.wager{border-color:var(--ink)}
.card.wager .flash{background:#ff8c3a;color:var(--ink)}
.card.wager .play span{background:#2dd4bf}
.wager-note{margin:14px 0 0;font-size:13px;font-weight:600;color:var(--dim);max-width:78ch}
.wager-note b{color:var(--txt-2)}
@media (max-width:760px){ .px-pill .lvname{display:none} }
@media (max-width:560px){ .px-pill{display:none} }

/* ══ TIP JAR ════════════════════════════════════════════════════════ */
.tipjar{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:18px;margin-top:34px;
  border:4px solid var(--ink);border-radius:20px;background:linear-gradient(140deg,var(--panel),var(--panel-2));box-shadow:var(--bevel),var(--pop-2);
  position:relative;overflow:hidden}
.tipjar::before{content:'';position:absolute;inset:0;opacity:.18;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 12% 50%,rgba(255,210,31,.5) 0 6deg,transparent 6deg 18deg)}
.tipjar .jar{position:relative;width:96px;height:110px;flex:none}
.tipjar .jar svg{width:100%;height:100%}
.tipjar .jar .coin{animation:drop 2.8s ease-in infinite}
@keyframes drop{0%{transform:translateY(-40px);opacity:0}25%{opacity:1}55%,100%{transform:translateY(34px);opacity:0}}
.tipjar .tj-b{position:relative;min-width:0}
.tipjar h3{margin:0 0 4px;font-size:22px;font-weight:900;letter-spacing:-.03em}
.tipjar p{margin:0 0 12px;color:var(--txt-2);font-weight:600;font-size:13.5px;max-width:60ch}
.tipjar .tj-ways{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tipjar .tj-addr{font-family:var(--mono);font-size:12px;padding:7px 10px;border-radius:10px;background:var(--ink);border:2.5px solid var(--line);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tipjar .tj-note{font-size:11.5px;color:var(--dim);font-weight:700;margin-top:10px}
@media(max-width:560px){ .tipjar{grid-template-columns:1fr;text-align:left} .tipjar .jar{width:76px;height:88px} }

@media (prefers-reduced-motion: reduce){ .tipjar .jar .coin{animation:none} }