/* ArcadeGridz front page: art-first, rounded, glowing. Scoped to .hp so other views are untouched. */
.hp{--hp-r:18px;--hp-ink:#fff7ec;--hp-dim:#b8acd0;--hp-bg:#0b0816;position:relative;display:flex;flex-direction:column;gap:26px;padding-bottom:40px;isolation:isolate}
.hp::before{content:"";position:absolute;inset:-40px -30px auto;height:900px;z-index:-1;pointer-events:none;
 background:radial-gradient(40% 50% at 15% 10%,rgba(255,58,167,.22),transparent 70%),radial-gradient(35% 45% at 85% 5%,rgba(34,227,212,.18),transparent 70%),radial-gradient(45% 50% at 55% 60%,rgba(159,124,255,.16),transparent 70%);filter:blur(10px);animation:hpAurora 18s ease-in-out infinite alternate}
@keyframes hpAurora{to{transform:translate3d(0,30px,0) scale(1.06)}}
.hp [data-tone=violet]{--tone:#b46bff}.hp [data-tone=cyan]{--tone:#22e3d4}.hp [data-tone=magenta]{--tone:#ff3aa7}.hp [data-tone=amber]{--tone:#ffc14d}
.hp [data-tone=red]{--tone:#ff5266}.hp [data-tone=green]{--tone:#7cff6a}.hp [data-tone=purple]{--tone:#9a5aff}.hp [data-tone=blue]{--tone:#5a9aff}
.hp h1,.hp h2,.hp-tile-name strong,.hp-queue-item strong,.hp-arcade strong,.hp-chip{font-family:"Bungee",var(--arcade-display);letter-spacing:.02em}
.hp button{font:inherit;color:inherit;cursor:pointer}

/* ---------- hero ---------- */
.hp-hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;min-height:430px}
.hp-stage{position:relative;overflow:hidden;border-radius:calc(var(--hp-r) + 6px);background:#000;box-shadow:0 0 0 1px color-mix(in srgb,var(--tone) 55%,transparent),0 20px 60px -20px color-mix(in srgb,var(--tone) 70%,transparent),0 30px 80px -30px #000}
.hp-stage-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:hpKen 14s ease-out forwards}
@keyframes hpKen{from{transform:scale(1.08)}to{transform:scale(1)}}
.hp-stage-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,4,20,.92) 0%,rgba(8,4,20,.55) 38%,transparent 70%),linear-gradient(0deg,rgba(8,4,20,.85),transparent 45%)}
.hp-stage-copy{position:absolute;left:clamp(18px,4vw,46px);bottom:clamp(22px,4vw,44px);max-width:min(560px,70%);display:flex;flex-direction:column;gap:12px;animation:hpRise .55s cubic-bezier(.2,.8,.2,1)}
@keyframes hpRise{from{opacity:0;transform:translateY(16px)}}
.hp-kicker{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--tone) 22%,rgba(0,0,0,.5));border:1px solid color-mix(in srgb,var(--tone) 70%,transparent);font:800 11px/1 var(--arcade-ui);letter-spacing:.16em;color:#fff;backdrop-filter:blur(6px)}
.hp-kicker i{width:8px;height:8px;border-radius:50%;background:var(--tone);box-shadow:0 0 10px var(--tone);animation:hpPulse 1.4s infinite}
@keyframes hpPulse{50%{opacity:.35}}
.hp-stage-copy h1{margin:0;font-size:clamp(34px,4.6vw,66px);line-height:.95;color:#fff;text-shadow:0 3px 0 color-mix(in srgb,var(--tone) 70%,#000),0 0 30px color-mix(in srgb,var(--tone) 60%,transparent)}
.hp-stage-copy p{margin:0;color:#e9e1f5;font:500 15px/1.5 var(--arcade-ui);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 6px #000}
.hp-stage-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.hp-play{border:0;border-radius:999px;padding:14px 26px;background:linear-gradient(180deg,#ffe27a,#ffb020);color:#2a1300!important;font:900 15px/1 var(--arcade-ui)!important;letter-spacing:.08em;box-shadow:0 6px 0 #a35d00,0 10px 30px -6px rgba(255,176,32,.7);transition:transform .12s,box-shadow .12s}
.hp-play:hover{transform:translateY(-2px);box-shadow:0 8px 0 #a35d00,0 14px 36px -6px rgba(255,176,32,.9)}
.hp-play:active{transform:translateY(4px);box-shadow:0 2px 0 #a35d00}
.hp-ghost{border-radius:999px;padding:12px 20px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);font:800 13px/1 var(--arcade-ui)!important;letter-spacing:.08em;backdrop-filter:blur(6px)}
.hp-ghost:hover{background:rgba(255,255,255,.18)}
.hp-meta{color:var(--hp-dim);font:700 12px/1 var(--arcade-ui);letter-spacing:.08em}
.hp-dots{position:absolute;right:20px;bottom:20px;display:flex;gap:7px}
.hp-dots button{width:10px;height:10px;padding:0;border-radius:999px;border:0;background:rgba(255,255,255,.35);transition:width .25s,background .25s}
.hp-dots button.on{width:30px;background:var(--tone);box-shadow:0 0 12px var(--tone)}
.hp-queue{display:flex;flex-direction:column;gap:10px;min-width:0}
.hp-queue>small{font:800 11px/1 var(--arcade-ui);letter-spacing:.2em;color:var(--hp-dim);padding:4px 4px 0}
.hp-queue-item{flex:1;display:flex;align-items:stretch;gap:12px;padding:8px;border-radius:var(--hp-r);border:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));text-align:left;transition:transform .15s,border-color .15s,background .15s;min-height:0}
.hp-queue-item img{width:42%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;align-self:center}
.hp-queue-item span{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.hp-queue-item strong{font-size:13px;line-height:1.1;color:#fff;overflow:hidden;text-overflow:ellipsis}
.hp-queue-item small{font:600 10px/1.2 var(--arcade-ui);letter-spacing:.08em;color:var(--hp-dim)}
.hp-queue-item:hover{transform:translateX(-4px);border-color:var(--tone);background:color-mix(in srgb,var(--tone) 14%,transparent)}

/* ---------- category chips ---------- */
.hp-chips{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}
.hp-chips::-webkit-scrollbar{display:none}
.hp-chip{flex:none;display:inline-flex;align-items:center;gap:9px;padding:10px 16px 10px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);font-size:13px;color:#fff;transition:transform .15s,background .15s,border-color .15s}
.hp-chip i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-style:normal;font-size:14px;background:var(--chip,#9f7cff);color:#0b0816;box-shadow:0 0 14px color-mix(in srgb,var(--chip,#9f7cff) 60%,transparent)}
.hp-chip b{font:800 11px/1 var(--arcade-ui);padding:4px 7px;border-radius:999px;background:rgba(0,0,0,.35);color:var(--hp-dim)}
.hp-chip:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--chip,#9f7cff) 18%,transparent);border-color:var(--chip,#9f7cff)}
.hp-chip.all{--chip:#ffc14d}.hp-chip[data-cat=arcade]{--chip:#ff3aa7}.hp-chip[data-cat=action]{--chip:#ff5266}.hp-chip[data-cat=puzzle]{--chip:#22e3d4}.hp-chip[data-cat=adventure]{--chip:#7cff6a}.hp-chip[data-cat=strategy]{--chip:#ffc14d}.hp-chip[data-cat=cards]{--chip:#b46bff}
.hp-chip.ghost{--chip:#5a9aff;background:transparent}
.hp-chip-sep{flex:none;width:1px;margin:6px 4px;background:rgba(255,255,255,.14)}

/* ---------- section heads ---------- */
.hp-shelf>header,.hp-mosaic-wrap>header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 12px}
.hp h2{margin:0;font-size:clamp(18px,2vw,24px);color:#fff;display:flex;align-items:center;gap:10px}
.hp h2 span{font-family:initial;font-size:.95em;filter:drop-shadow(0 0 8px rgba(255,180,80,.6))}
.hp-mosaic-wrap>header p{margin:0;color:var(--hp-dim);font:600 12px/1 var(--arcade-ui);letter-spacing:.06em}
.hp-more{border:0;background:none;color:#ffc14d;font:800 12px/1 var(--arcade-ui)!important;letter-spacing:.12em}
.hp-more:hover{text-decoration:underline}

/* ---------- tiles ---------- */
.hp-tile{--tone:#9f7cff;position:relative;display:block;padding:0;border:0;border-radius:var(--hp-r);overflow:hidden;background:#140f22;aspect-ratio:16/9;isolation:isolate;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 10px 24px -14px #000;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s}
.hp-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .3s}
.hp-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,3,16,.92) 0%,rgba(6,3,16,.15) 48%,transparent 70%);z-index:1}
.hp-tile:hover,.hp-tile:focus-visible{transform:translateY(-4px) scale(1.025);box-shadow:0 0 0 2px var(--tone),0 0 26px -2px color-mix(in srgb,var(--tone) 70%,transparent),0 18px 30px -16px #000;outline:none;z-index:2}
.hp-tile:hover img{transform:scale(1.08);filter:saturate(1.2) brightness(1.08)}
.hp-tile-name{position:absolute;left:12px;right:12px;bottom:10px;z-index:2;display:flex;flex-direction:column;gap:3px;text-align:left}
.hp-tile-name strong{font-size:14px;line-height:1.05;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-tile-name small{font:700 10px/1.2 var(--arcade-ui);letter-spacing:.08em;color:var(--hp-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-tile-play{position:absolute;z-index:2;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.92);color:#1a0d2e;font-size:20px;padding-left:4px;box-shadow:0 0 0 6px color-mix(in srgb,var(--tone) 45%,transparent),0 0 30px var(--tone);opacity:0;transform:scale(.6);transition:opacity .18s,transform .18s}
.hp-tile:hover .hp-tile-play,.hp-tile:focus-visible .hp-tile-play{opacity:1;transform:scale(1)}
.hp-badge{position:absolute;z-index:2;top:10px;left:10px;padding:5px 9px;border-radius:999px;font:900 10px/1 var(--arcade-ui);letter-spacing:.14em;color:#fff}
.hp-badge.hot{background:linear-gradient(90deg,#ff3a5a,#ff8a2a);box-shadow:0 0 14px rgba(255,80,60,.7)}
.hp-badge.new{background:linear-gradient(90deg,#22e3d4,#5a9aff);color:#05141a;box-shadow:0 0 14px rgba(34,227,212,.6)}
.hp-rank{position:absolute;z-index:2;right:10px;top:4px;font:400 46px/1 "Bungee",var(--arcade-display);color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.85);text-shadow:0 0 18px color-mix(in srgb,var(--tone) 80%,transparent)}
.hp-champ{display:flex;align-items:center;gap:6px;margin-top:3px;font:700 11px/1.1 var(--arcade-ui);font-style:normal;color:#ffe08a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-champ i{font-style:normal;color:#ffc14d}.hp-champ b{color:#fff}

/* ---------- shelves (horizontal) ---------- */
.hp-row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,22vw,300px);gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 4px 16px;margin:0 -4px;scrollbar-width:thin;scrollbar-color:#3b3044 transparent}
.hp-row>.hp-tile{scroll-snap-align:start}

/* ---------- mosaic (all games) ---------- */
.hp-mosaic{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));grid-auto-rows:minmax(96px,auto);grid-auto-flow:dense;gap:12px}
.hp-mosaic .hp-tile{aspect-ratio:auto;min-height:96px}
.hp-mosaic .hp-tile.big{grid-column:span 2;grid-row:span 2}
.hp-mosaic .hp-tile.wide{grid-column:span 2}
.hp-mosaic .hp-tile.big .hp-tile-name strong{font-size:20px}
.hp-mosaic .hp-tile.big .hp-tile-play{width:66px;height:66px;margin:-33px 0 0 -33px;font-size:26px}

/* ---------- arcade services ---------- */
.hp-arcade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hp-arcade button{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:18px;border-radius:var(--hp-r);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 22%,#120d20),#120d20 70%);text-align:left;transition:transform .15s,box-shadow .15s}
.hp-arcade button:hover{transform:translateY(-3px);box-shadow:0 0 26px -6px var(--c)}
.hp-arcade i{grid-row:span 2;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;font-style:normal;font-size:22px;background:var(--c);color:#120d20;box-shadow:0 0 18px color-mix(in srgb,var(--c) 70%,transparent)}
.hp-arcade strong{font-size:15px;color:#fff}
.hp-arcade small{font:500 12px/1.35 var(--arcade-ui);color:var(--hp-dim)}

/* ---------- responsive ---------- */
@media (max-width:1100px){.hp-hero{grid-template-columns:1fr}.hp-queue{flex-direction:row;overflow-x:auto}.hp-queue>small{display:none}.hp-queue-item{flex:0 0 240px}.hp-arcade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.hp{gap:20px}.hp-hero{min-height:0}.hp-stage{min-height:380px}.hp-stage-copy{max-width:none;right:18px}.hp-stage-shade{background:linear-gradient(0deg,rgba(8,4,20,.95) 10%,rgba(8,4,20,.4) 60%,transparent)}
 .hp-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(90px,auto)}.hp-mosaic .hp-tile.wide{grid-column:span 2}.hp-row{grid-auto-columns:72%}.hp-arcade{grid-template-columns:1fr}.hp-tile-play{display:none}}
@media (prefers-reduced-motion:reduce){.hp::before,.hp-stage-art,.hp-stage-copy,.hp-kicker i{animation:none}.hp-tile,.hp-tile img{transition:none}}

/* ================= NEON PASS: 80s cyberpunk arcade ================= */
.hp{--pink:#ff2bd6;--cyan:#22f0ff;--lime:#7dff5a;--gold:#ffd23a;--hp-dim:#c9b8ec}
/* arcade hall backdrop behind the hero, fading into the night */
.hp::before{inset:-34px -34px auto;height:760px;filter:none;animation:none;
 background:linear-gradient(180deg,rgba(9,6,22,.15) 0%,rgba(9,6,22,.55) 55%,#09080f 100%),url("/assets/arcadegridz-80s-hall.jpg") center top/cover no-repeat}
/* CRT scanlines over the whole page */
.hp::after{content:"";position:absolute;inset:-34px;z-index:5;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;opacity:.55}
/* neon sign headings */
.hp h2{color:#fff;text-transform:uppercase}
.hp h2 span{font-family:"Bungee",var(--arcade-display);filter:none}
.hp .neon-pink{--n:var(--pink)}.hp .neon-cyan{--n:var(--cyan)}.hp .neon-green{--n:var(--lime)}.hp .neon-amber{--n:var(--gold)}
.hp h2[class^=neon]{text-shadow:0 0 2px #fff,0 0 8px var(--n),0 0 18px var(--n),0 0 36px var(--n);animation:hpBuzz 7s infinite}
.hp h2[class^=neon] span{color:var(--n)}
@keyframes hpBuzz{0%,92%,100%{opacity:1}93%{opacity:.55}94%{opacity:1}96%{opacity:.7}97%{opacity:1}}
.hp-shelf>header,.hp-mosaic-wrap>header{position:relative;padding-bottom:12px}
.hp-shelf>header::after,.hp-mosaic-wrap>header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--pink),var(--cyan) 50%,transparent);box-shadow:0 0 10px var(--pink),0 0 18px var(--cyan)}
.hp-more{color:var(--cyan);text-shadow:0 0 8px var(--cyan)}

/* hero: double neon tube with corner brackets */
.hp-hero{position:relative;z-index:1;padding-top:6px}
.hp-stage{border:2px solid var(--pink);box-shadow:0 0 0 4px rgba(9,6,22,.9),0 0 0 6px var(--cyan),0 0 22px 6px rgba(255,43,214,.55),0 0 60px 10px rgba(34,240,255,.25),inset 0 0 30px rgba(255,43,214,.35);animation:hpFlicker 1.2s steps(1) 1}
@keyframes hpFlicker{0%{opacity:.2}10%{opacity:1}14%{opacity:.4}20%{opacity:1}26%{opacity:.6}30%,100%{opacity:1}}
.hp-stage::before,.hp-stage::after{content:"";position:absolute;z-index:3;width:46px;height:46px;pointer-events:none;border:3px solid var(--gold);filter:drop-shadow(0 0 6px var(--gold))}
.hp-stage::before{top:12px;left:12px;border-right:0;border-bottom:0}.hp-stage::after{right:12px;bottom:12px;border-left:0;border-top:0}
.hp-stage-shade{background:linear-gradient(90deg,rgba(20,4,40,.92) 0%,rgba(20,4,40,.6) 36%,transparent 68%),linear-gradient(0deg,rgba(20,4,40,.9),transparent 50%),linear-gradient(180deg,rgba(255,43,214,.18),transparent 30%)}
.hp-stage-copy h1{font-size:clamp(38px,5vw,74px);background:linear-gradient(180deg,#fff 0%,#ffe9ff 38%,#ff7ae6 52%,#8a2be2 54%,#22f0ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
 filter:drop-shadow(0 3px 0 #1a0230) drop-shadow(0 0 14px rgba(255,43,214,.75));text-shadow:none}
.hp-kicker{background:rgba(9,6,22,.75);border:1px solid var(--cyan);color:var(--cyan);box-shadow:0 0 12px rgba(34,240,255,.6),inset 0 0 10px rgba(34,240,255,.25);text-shadow:0 0 8px var(--cyan)}
.hp-kicker i{background:var(--pink);box-shadow:0 0 10px var(--pink)}
.hp-play{background:linear-gradient(180deg,#ff8af0,#ff2bd6 55%,#c3009e);color:#fff!important;text-shadow:0 1px 0 #6d0058;box-shadow:0 6px 0 #6d0058,0 0 26px rgba(255,43,214,.8),inset 0 2px 0 rgba(255,255,255,.5)}
.hp-play:hover{box-shadow:0 8px 0 #6d0058,0 0 40px rgba(255,43,214,1),inset 0 2px 0 rgba(255,255,255,.5)}
.hp-play:active{box-shadow:0 2px 0 #6d0058,0 0 20px rgba(255,43,214,.8)}
.hp-ghost{border:2px solid var(--cyan);color:var(--cyan)!important;background:rgba(9,6,22,.6);text-shadow:0 0 8px var(--cyan);box-shadow:0 0 14px rgba(34,240,255,.45),inset 0 0 10px rgba(34,240,255,.2)}
.hp-ghost:hover{background:rgba(34,240,255,.15)}
.hp-meta{color:#fff;text-shadow:0 0 8px var(--pink)}
.hp-dots button{background:rgba(255,255,255,.25)}.hp-dots button.on{background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.hp-queue>small{color:var(--gold);text-shadow:0 0 8px var(--gold);font-family:"Bungee",var(--arcade-display);letter-spacing:.1em;font-size:13px}
.hp-queue-item{background:rgba(12,6,30,.78);border:2px solid color-mix(in srgb,var(--tone) 70%,transparent);box-shadow:0 0 14px -2px color-mix(in srgb,var(--tone) 70%,transparent),inset 0 0 14px -4px color-mix(in srgb,var(--tone) 60%,transparent);backdrop-filter:blur(6px)}
.hp-queue-item img{border:1px solid color-mix(in srgb,var(--tone) 60%,transparent)}
.hp-queue-item strong{text-shadow:0 0 10px var(--tone)}
.hp-queue-item:hover{background:color-mix(in srgb,var(--tone) 22%,rgba(12,6,30,.8));box-shadow:0 0 26px 0 var(--tone)}

/* chips: neon outline pills */
.hp-chips{position:relative;z-index:1}
.hp-chip{background:rgba(9,6,22,.75);border:2px solid var(--chip,#9f7cff);color:var(--chip,#9f7cff);text-shadow:0 0 8px var(--chip,#9f7cff);box-shadow:0 0 12px -2px var(--chip,#9f7cff),inset 0 0 10px -4px var(--chip,#9f7cff);backdrop-filter:blur(4px)}
.hp-chip i{background:transparent;border:2px solid var(--chip,#9f7cff);color:var(--chip,#9f7cff);box-shadow:0 0 10px var(--chip,#9f7cff),inset 0 0 8px var(--chip,#9f7cff)}
.hp-chip b{color:#fff;background:color-mix(in srgb,var(--chip,#9f7cff) 30%,#000);text-shadow:none}
.hp-chip:hover{color:#0b0816;background:var(--chip,#9f7cff);text-shadow:none;box-shadow:0 0 26px var(--chip,#9f7cff)}
.hp-chip:hover i{color:#0b0816;border-color:#0b0816;box-shadow:none}
.hp-chip.all{--chip:var(--gold)}.hp-chip[data-cat=arcade]{--chip:var(--pink)}.hp-chip[data-cat=puzzle]{--chip:var(--cyan)}.hp-chip[data-cat=adventure]{--chip:var(--lime)}.hp-chip.ghost{--chip:#8f8bff}

/* tiles: every game sits in a neon tube */
.hp-tile{border-radius:14px;box-shadow:0 0 0 2px color-mix(in srgb,var(--tone) 75%,transparent),0 0 16px -2px color-mix(in srgb,var(--tone) 65%,transparent),0 14px 24px -14px #000}
.hp-tile::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 45%,transparent 60%);transform:translateX(-120%)}
.hp-tile:hover::before{transform:translateX(120%);transition:transform .7s ease}
.hp-tile::after{background:linear-gradient(0deg,rgba(14,3,32,.95) 0%,rgba(14,3,32,.25) 45%,transparent 70%)}
.hp-tile:hover,.hp-tile:focus-visible{box-shadow:0 0 0 3px var(--tone),0 0 30px 2px var(--tone),0 0 60px -6px var(--tone),0 18px 30px -16px #000}
.hp-tile:hover img{filter:saturate(1.3) brightness(1.1) drop-shadow(3px 0 0 rgba(255,43,214,.6)) drop-shadow(-3px 0 0 rgba(34,240,255,.6))}
.hp-tile-name strong{text-shadow:0 0 10px var(--tone),0 2px 0 #000}
.hp-tile-name small{color:color-mix(in srgb,var(--tone) 55%,#fff)}
.hp-tile-play{background:var(--pink);color:#fff;box-shadow:0 0 0 4px rgba(9,6,22,.8),0 0 0 6px var(--cyan),0 0 30px var(--pink)}
.hp-rank{-webkit-text-stroke:2px var(--pink);text-shadow:0 0 10px var(--pink),0 0 22px var(--pink);font-size:50px}
.hp-badge{border:1px solid rgba(255,255,255,.6)}
.hp-badge.hot{background:var(--pink);box-shadow:0 0 14px var(--pink)}
.hp-badge.new{background:var(--lime);color:#06210a;box-shadow:0 0 14px var(--lime)}
.hp-champ{color:var(--gold);text-shadow:0 0 8px var(--gold)}

/* mosaic sits on a synthwave grid floor */
.hp-mosaic-wrap{position:relative;padding:20px;border-radius:22px;background:
 linear-gradient(rgba(34,240,255,.07) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(255,43,214,.07) 1px,transparent 1px) 0 0/40px 40px,
 radial-gradient(120% 80% at 50% 0%,rgba(138,43,226,.28),transparent 60%),rgba(10,5,24,.85);
 border:2px solid transparent;background-clip:padding-box;box-shadow:0 0 0 2px rgba(34,240,255,.55),0 0 30px -4px rgba(34,240,255,.45),inset 0 0 40px -10px rgba(255,43,214,.5)}
.hp-mosaic{gap:14px}

/* arcade services: neon marquee buttons */
.hp-arcade button{background:rgba(10,5,24,.85);border:2px solid var(--c);box-shadow:0 0 16px -2px var(--c),inset 0 0 16px -6px var(--c)}
.hp-arcade strong{color:var(--c);text-shadow:0 0 10px var(--c)}
.hp-arcade i{background:transparent;border:2px solid var(--c);color:var(--c);box-shadow:0 0 12px var(--c),inset 0 0 10px var(--c);text-shadow:0 0 8px var(--c)}
.hp-arcade button:hover{background:color-mix(in srgb,var(--c) 18%,rgba(10,5,24,.9));box-shadow:0 0 30px 0 var(--c),inset 0 0 20px -6px var(--c)}
@media (prefers-reduced-motion:reduce){.hp h2[class^=neon],.hp-stage{animation:none}}

/* ================= header: the real ArcadeGridz logo ================= */
/* THEME.md: logo artwork only; the 48px row, control baseline and padding stay canonical. 40px desktop, 30px tablet/phone. */
.gn2-header[data-gn-site=arcadegridz] .gn2-brand{width:120px;height:40px;background:url("/assets/arcadegridz-logo-header.png") left center/contain no-repeat;filter:drop-shadow(0 0 8px rgba(255,43,214,.45))}
@media (max-width:900px){.gn2-header[data-gn-site=arcadegridz] .gn2-brand{width:90px;height:30px}}
.gn2-header[data-gn-site=arcadegridz] .gn2-brand>*{display:none!important}
.gn2-header[data-gn-site=arcadegridz] .gn2-brand:hover{filter:drop-shadow(0 0 12px rgba(34,240,255,.8))}

.hp-stage-copy{max-width:min(620px,78%)}
.hp-stage-copy h1.len-m{font-size:clamp(32px,4vw,58px)}
.hp-stage-copy h1.len-l{font-size:clamp(28px,3.2vw,48px)}
.hp{padding-bottom:90px}
@media (max-width:640px){.hp-dots{top:18px;bottom:auto;right:18px}}

/* beta welcome banner (arrives via griddim.com/beta/continue/arcadegridz) */
.hp-welcome{position:relative;z-index:2;display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:18px;background:linear-gradient(90deg,rgba(255,43,214,.22),rgba(34,240,255,.16)),rgba(10,5,24,.9);border:2px solid var(--gold);box-shadow:0 0 22px rgba(255,210,58,.55),inset 0 0 18px rgba(255,210,58,.25);animation:hpRise .5s cubic-bezier(.2,.8,.2,1)}
.hp-welcome>i{font-style:normal;font-size:30px;color:var(--gold);text-shadow:0 0 14px var(--gold)}
.hp-welcome strong{font-family:"Bungee",var(--arcade-display);color:var(--gold);text-shadow:0 0 10px var(--gold);font-size:16px}
.hp-welcome p{margin:4px 0 0;color:#efe6ff;font:500 14px/1.4 var(--arcade-ui)}.hp-welcome b{color:#fff}
.hp-welcome button{margin-left:auto;align-self:flex-start;border:0;background:none;color:#fff;font-size:22px;line-height:1;opacity:.7}.hp-welcome button:hover{opacity:1}