/* Hop In Play v3: portal shell (top bar + icon rail), dense game grids, ad-ready game page.
   Flat graphite surfaces, sun yellow accent, line icons, 3D illustrations. No gradients. */
:root {
  --night:#0e1114; --deck:#171b20; --deck2:#20252c; --deck3:#2c323b; --line:#262c34; --ink:#f4f6f8; --muted:#a2abb6; --dim:#6b7480;
  --sun:#ffc20e; --sun-h:#ffd23f; --on-sun:#0e1114; --bg:#0e1114; --chip:#0e1114; --chip-ink:#f4f6f8; --body-ink:#d9dee4; --foot:#0b0d10; --lift:none; --sky:#5cc8ff; --berry:#ff6b6b; --shadow:#06080a;
  --display:'Fredoka', 'Trebuchet MS', system-ui, sans-serif; --body:'Nunito', 'Segoe UI', system-ui, sans-serif;
  --top:64px; --rail:72px; --rail-open:236px; --r:8px;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 var(--body); }
a { color:var(--sky); }
a:hover { color:var(--ink); }
:focus-visible { outline:3px solid var(--sun); outline-offset:2px; }
img { max-width:100%; height:auto; display:block; }
h1, h2, h3 { font-family:var(--display); font-weight:700; line-height:1.15; margin:0; text-wrap:balance; letter-spacing:.01em; }
h1 { font-size:clamp(28px, 3.4vw, 40px); }
h2 { font-size:clamp(21px, 2.2vw, 26px); }
h3 { font-size:19px; }
p { margin:0; }
.ic { width:1em; height:1em; display:block; flex-shrink:0; }
img.art { display:block; object-fit:contain; pointer-events:none; user-select:none; }
.muted { color:var(--muted); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- top bar ---------- */
.top { position:fixed; top:0; left:0; right:0; height:calc(var(--top) + env(safe-area-inset-top, 0px)); padding-top:env(safe-area-inset-top, 0px); z-index:40;
  background:var(--bg); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px;
  padding-left:max(12px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); }
.icon-btn { width:44px; height:44px; display:grid; place-items:center; border:none; background:transparent; color:var(--ink); cursor:pointer; font-size:20px; border-radius:var(--r); flex-shrink:0; }
.icon-btn:hover { background:var(--deck2); }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font:700 22px/1 var(--display); white-space:nowrap; }
.brand svg { width:32px; height:32px; }
.brand .in { color:var(--sun); }
.search { position:relative; flex:1; max-width:560px; margin:0 auto; }
.search input { width:100%; height:44px; border-radius:999px; border:1px solid var(--line); background:var(--deck); color:var(--ink); font:500 15px var(--body); padding:0 46px 0 18px; outline:none; }
.search input::placeholder { color:var(--dim); }
.search input:focus { border-color:var(--sky); }
.search .glass { position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:18px; pointer-events:none; }
.results { position:absolute; top:52px; left:0; right:0; background:var(--deck); border:1px solid var(--line); border-radius:12px; padding:6px; box-shadow:0 20px 50px rgba(0,0,0,.5); }
.results a { display:flex; align-items:center; gap:12px; padding:7px; border-radius:8px; color:var(--ink); text-decoration:none; }
.results a:hover, .results a.on { background:var(--deck2); }
.results img { width:72px; aspect-ratio:16/10; object-fit:cover; border-radius:5px; }
.results b { font:700 16px var(--display); }
.results .none { padding:12px; color:var(--muted); font-size:15px; }
.top-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.pill { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px; border:none; cursor:pointer; text-decoration:none;
  font:600 15px/1 var(--display); letter-spacing:.01em; background:var(--deck2); color:var(--ink); }
.pill:hover { background:var(--deck3); color:var(--ink); }
.pill.sun { background:var(--sun); color:var(--on-sun); }
.pill.sun:hover { background:var(--sun-h); color:var(--on-sun); }
.pill .ic { font-size:18px; }

/* ---------- left rail ---------- */
.rail { position:fixed; z-index:35; top:calc(var(--top) + env(safe-area-inset-top, 0px)); bottom:0; left:0; width:var(--rail); background:var(--bg); border-right:1px solid var(--line);
  overflow-y:auto; overflow-x:hidden; padding:10px 10px 20px; padding-left:max(10px, env(safe-area-inset-left, 0px)); transition:width .18s ease, transform .2s ease; scrollbar-width:none; }
.rail::-webkit-scrollbar { display:none; }
.rail nav { display:flex; flex-direction:column; gap:3px; }
.rail .sep { height:1px; background:var(--line); margin:10px 6px; }
.rail a, .rail span.item { position:relative; display:flex; align-items:center; gap:14px; height:46px; padding:0 13px; border-radius:var(--r); color:var(--muted); text-decoration:none; white-space:nowrap; font:500 16px/1 var(--display); }
.rail .ic { font-size:22px; color:var(--c, var(--muted)); }
.rail a:hover { background:var(--deck2); color:var(--ink); }
.rail a[aria-current="page"] { background:var(--deck2); color:var(--ink); }
.rail a[aria-current="page"]::before { content:""; position:absolute; left:-10px; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; background:var(--sun); }
.rail .label { opacity:0; transition:opacity .12s; }
.rail .soon { font:500 11px/1 var(--display); background:var(--berry); color:#fff; padding:3px 5px; border-radius:4px; }
.rail span.item { opacity:.6; cursor:default; }
body.rail-open .rail { width:var(--rail-open); }
body.rail-open .rail .label { opacity:1; }
@media (min-width: 761px) { .content { transition:margin-left .18s ease; } body.rail-open .content { margin-left:var(--rail-open); } }
.rail:not(:hover) .tip, .rail .tip { display:none; }
.scrim { position:fixed; inset:0; z-index:30; background:rgba(5,7,9,.6); display:none; }

/* ---------- content ---------- */
.content { margin-left:var(--rail); padding-top:calc(var(--top) + env(safe-area-inset-top, 0px)); min-height:100vh; display:flex; flex-direction:column; }
.inner { padding:22px max(24px, env(safe-area-inset-right, 0px)) 0 24px; display:flex; flex-direction:column; gap:34px; width:100%; max-width:1680px; }
.row-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:14px; }
.row-head h2 { display:flex; align-items:center; gap:10px; }
.row-head h2 .ic { font-size:22px; color:var(--c, var(--sun)); }
.row-head h2 .art { width:40px; height:40px; margin:-8px 0; }
.row-head a { display:inline-flex; align-items:center; gap:2px; font:500 15px var(--display); color:var(--muted); text-decoration:none; white-space:nowrap; }
.row-head a .ic { font-size:17px; }
.row-head a:hover { color:var(--ink); }

/* mood tiles: solid vivid colour, title top-left, illustration bleeding off the bottom-right */
.moods { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:14px; }
.mood { position:relative; height:128px; border-radius:16px; overflow:hidden; text-decoration:none; color:var(--t, var(--night)); padding:16px;
  background:var(--c); display:flex; align-items:flex-start; transition:transform .15s, box-shadow .15s; }
.mood:hover { transform:translateY(-4px); color:var(--t, var(--night)); box-shadow:0 12px 26px color-mix(in srgb, var(--c) 35%, transparent); }
.mood b { position:relative; z-index:1; font:700 19px/1.12 var(--display); max-width:62%; }
.mood .art { position:absolute; right:-6px; bottom:-10px; width:108px; height:108px; transition:transform .2s ease; filter:drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.mood:hover .art { transform:rotate(-8deg) scale(1.1); }
.mood.soon { cursor:default; }
.mood.soon b { margin-top:24px; }
.mood.soon:hover { transform:none; box-shadow:none; }
.mood.soon:hover .art { transform:none; }
.mood .badge { position:absolute; left:16px; top:14px; font:700 12px/1 var(--display); background:var(--chip); color:var(--chip-ink); padding:4px 7px; border-radius:6px; }

/* promo banner: solid yellow, illustration on the left */
.banner { display:flex; align-items:center; gap:8px 20px; padding:14px 22px 14px 14px; border-radius:14px; background:var(--sun); color:var(--on-sun); flex-wrap:wrap; }
.banner .art { width:84px; height:84px; margin:-6px 0; }
.banner b { font:700 24px/1.1 var(--display); }
.banner p { font-size:15px; font-weight:600; flex:1; min-width:220px; }
.banner .pill { background:var(--chip); color:var(--chip-ink); }
.banner .pill:hover { background:var(--deck2); }

/* bento: one big tile + three */
.bento { display:grid; grid-template-columns:1.6fr 1fr 1fr; grid-template-rows:repeat(2, minmax(0, 1fr)); gap:14px; grid-template-areas:"a b c" "a d d"; height:clamp(320px, 31vw, 520px); }
.bento .card { height:100%; }
.bento .card:nth-child(1) { grid-area:a; } .bento .card:nth-child(2) { grid-area:b; } .bento .card:nth-child(3) { grid-area:c; } .bento .card:nth-child(4) { grid-area:d; }
.bento .card .thumb { aspect-ratio:auto; height:100%; }


/* game cards */
.card { position:relative; display:block; border-radius:10px; overflow:hidden; text-decoration:none; color:var(--ink); background:var(--deck); outline-offset:3px; min-width:0; box-shadow:var(--lift); }
.card .thumb { width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .25s ease; }
.card:hover .thumb { transform:scale(1.04); }
.card .name { position:absolute; left:8px; bottom:8px; max-width:calc(100% - 16px); padding:7px 10px; border-radius:8px; font:600 15px/1.2 var(--display); background:var(--chip); color:var(--chip-ink);
  opacity:0; transform:translateY(4px); transition:opacity .15s, transform .15s; }
.card:hover .name, .card:focus-visible .name { opacity:1; transform:none; }
.card .flag { position:absolute; right:8px; top:8px; font:700 12px/1 var(--display); padding:5px 7px; border-radius:6px; background:var(--sun); color:var(--on-sun); }
.card:hover { box-shadow:0 0 0 3px var(--c, var(--sun)); }
.card .play-dot { position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; display:grid; place-items:center;
  background:var(--sun); color:var(--on-sun); font-size:24px; opacity:0; transform:scale(.6); transition:opacity .15s, transform .18s; box-shadow:0 8px 20px rgba(0,0,0,.35); }
.card .play-dot .ic { margin-left:3px; }
.card:hover .play-dot, .card:focus-visible .play-dot { opacity:1; transform:none; }
.bento .card:nth-child(1) .play-dot { width:76px; height:76px; margin:-38px 0 0 -38px; font-size:32px; }
.bento .card:nth-child(1) .name { font-size:20px; padding:9px 14px; left:14px; bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; }
.strip { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px, 260px); gap:14px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.strip .card { scroll-snap-align:start; }

/* text block */
.seo { background:var(--deck); border-radius:12px; padding:26px 28px; display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:18px 40px; }
.seo h2 { grid-column:1 / -1; }
.seo div { display:flex; flex-direction:column; gap:8px; }
.seo h3 { font-size:17px; color:var(--sun); }
.seo p { color:var(--muted); font-size:15px; }

/* ---------- game page ---------- */
.game-wrap { display:grid; grid-template-columns:minmax(0, 1fr) 336px; gap:22px; align-items:start; }
.stage { display:flex; flex-direction:column; gap:14px; min-width:0; }
.player { position:relative; background:#000; border-radius:12px; overflow:hidden; aspect-ratio:16/9; width:100%; max-height:calc(100vh - var(--top) - 150px); margin:0 auto; }
.player img.cover { position:absolute; inset:-30px; width:calc(100% + 60px); height:calc(100% + 60px); max-width:none; object-fit:cover; filter:blur(18px) brightness(.45) saturate(1.2); }
.player .start { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:16px; }
.player .start img.logo { width:min(460px, 58%); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.45); }
.player .start b { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); font:700 clamp(24px, 3vw, 38px)/1.1 var(--display); }
.play-btn { display:inline-flex; align-items:center; gap:10px; font:700 22px/1 var(--display); letter-spacing:.02em; color:var(--on-sun); background:var(--sun); border:none;
  padding:17px 32px 16px 28px; border-radius:999px; cursor:pointer; box-shadow:0 10px 28px rgba(0,0,0,.4); transition:transform .12s, background-color .12s; }
.play-btn:hover { transform:translateY(-2px); background:var(--sun-h); }
.play-btn:active { transform:translateY(1px); }
.play-btn .ic { font-size:20px; }
.player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#000; }
.player:fullscreen { max-height:none; border-radius:0; }
.gamebar { display:flex; align-items:center; gap:14px; background:var(--deck); border-radius:12px; padding:10px 12px; flex-wrap:wrap; }
.gamebar img { width:64px; aspect-ratio:16/10; object-fit:cover; border-radius:6px; }
.gamebar .t { display:flex; flex-direction:column; flex:1; min-width:160px; }
.gamebar .t b { font:700 19px/1.2 var(--display); }
.gamebar .t span { font-size:13px; color:var(--muted); }
.gamebar .acts { display:flex; gap:8px; flex-wrap:wrap; }
.side { display:flex; flex-direction:column; gap:16px; min-width:0; }
.side h3 { font-size:18px; }
.next { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.next .card .name { font-size:13px; padding:5px 7px; left:6px; bottom:6px; }
.details { display:grid; grid-template-columns:minmax(0, 1fr) 336px; gap:22px; align-items:start; }
.info { background:var(--deck); border-radius:12px; padding:24px 26px; display:flex; flex-direction:column; gap:26px; min-width:0; }
.crumbs { font-size:14px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; }
.crumbs a { color:var(--muted); }
.info header { display:flex; flex-direction:column; gap:10px; }
.info .summary { font-size:18px; color:var(--muted); max-width:70ch; }
.tags { display:flex; flex-wrap:wrap; gap:8px; }
.tag { font:500 14px/1 var(--display); padding:8px 11px; border-radius:999px; background:var(--deck2); color:var(--ink); text-decoration:none; border:1px solid var(--line); }
a.tag:hover { border-color:var(--sun); color:var(--ink); }
.prose { max-width:72ch; display:flex; flex-direction:column; gap:12px; }
.prose p, .prose li { color:var(--body-ink); }
.prose ul { margin:0; padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.prose li::marker { color:var(--sun); }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
.controls { width:100%; border-collapse:collapse; font-size:15px; min-width:440px; }
.controls th, .controls td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.controls tr:last-child td { border-bottom:none; }
.controls th { font:500 13px/1.2 var(--display); letter-spacing:.06em; color:var(--muted); text-transform:uppercase; background:var(--deck2); }
.controls td:first-child { font-weight:700; }
.facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; }
.facts div { background:var(--deck2); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:2px; }
.facts dt { font-size:13px; color:var(--muted); }
.facts dd { margin:0; font:700 16px/1.3 var(--display); }
.faq { display:flex; flex-direction:column; gap:8px; }
.faq details { background:var(--deck2); border-radius:10px; padding:0 16px; }
.faq summary { cursor:pointer; padding:13px 0; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::after { content:"+"; font:700 20px/1 var(--display); color:var(--sun); }
.faq details[open] summary::after { content:"–"; }
.faq details p { padding:0 0 14px; color:var(--body-ink); }

/* ad slots: hidden until ads are live, or shown as placeholders with ?showads */
.ad { display:none; align-items:center; justify-content:center; border-radius:10px; background:var(--deck);
  border:1px dashed var(--deck3); color:var(--dim); font:500 13px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; margin:0 auto; max-width:100%; }
html.ads .ad { display:flex; }
.ad-leader { width:728px; height:90px; }
.ad-mrec { width:300px; height:250px; }
.ad-sky { width:300px; height:600px; }
.side .ad-sky { position:sticky; top:calc(var(--top) + 16px); }

/* simple pages */
.page { display:flex; flex-direction:column; gap:18px; max-width:860px; }
.page .prose h2 { margin-top:12px; }
.cat-head { display:flex; align-items:center; gap:16px; }
.cat-head .art { width:84px; height:84px; flex-shrink:0; }
.cat-head .ic-tile { width:64px; height:64px; display:grid; place-items:center; border-radius:16px; flex-shrink:0; background:color-mix(in srgb, var(--c, var(--sun)) 16%, var(--deck)); color:var(--c, var(--sun)); font-size:30px; }
.cat-head .ic-tile .ic { font-size:30px; }
.cat-head > .ic { font-size:40px; color:var(--c, var(--sun)); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }

/* footer */
footer { margin-top:48px; border-top:1px solid var(--line); background:var(--foot); }
footer .f { padding:26px 24px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; font-size:14px; color:var(--muted); max-width:1680px; }
footer nav { display:flex; gap:18px; flex-wrap:wrap; }
footer a { color:var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .moods { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .game-wrap, .details { grid-template-columns:1fr; }
  .side .ad-sky { display:none; }
  .next { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); }
  .ad-leader { width:100%; max-width:728px; }
}
@media (max-width: 900px) {
  .bento { grid-template-columns:1fr 1fr; grid-template-rows:auto; grid-template-areas:"a a" "b c" "d d"; height:auto; }
  .bento .card .thumb, .bento .card:nth-child(1) .thumb { aspect-ratio:16/10; height:auto; }
  .bento .card:nth-child(4) .thumb { aspect-ratio:2/1; }
}
@media (max-width: 760px) {
  :root { --top:58px; }
  .rail { transform:translateX(-102%); width:var(--rail-open); }
  .rail .label { opacity:1; }
  body.rail-open .rail { transform:none; }
  body.rail-open .scrim { display:block; }
  .content { margin-left:0; }
  .inner { padding:16px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); gap:28px; }
  .top { gap:6px; }
  .brand { font-size:19px; } .brand svg { width:28px; height:28px; }
  .brand-text { display:none; }
  .search { max-width:none; }
  .top-actions .pill span { display:none; }
  .top-actions .pill { width:40px; padding:0; justify-content:center; }
  .moods { grid-auto-flow:column; grid-template-columns:none; overflow-x:auto; padding-bottom:4px; }
  .moods { grid-auto-columns:160px; }
  .mood { height:124px; padding:12px 14px; }
  .mood b { font-size:16px; max-width:100%; }
  .card .play-dot { display:none; }
  .mood .art { width:72px; height:72px; right:-4px; bottom:-6px; }
  .mood.soon b { margin-top:20px; }
  .banner .art { width:64px; height:64px; }
  .card .name { display:none; } /* covers carry the title */
  .grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .strip { grid-auto-columns:46%; }
  .info { padding:18px; }
  .seo { padding:20px; }
  .player { aspect-ratio:4/3; }
  .ad-leader { height:100px; }
}
@media (pointer: coarse) { .card .name { display:none; } }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }

/* =====================================================================
   v6 skin: matched to the user's mobile-game menu reference.
   Indigo-violet world with a magenta glow + sparkles, translucent navy
   panels with soft rims, glossy gradient buttons (yellow Select, green
   Upgrade, navy Customize), lavender selected tile, red "New" tags.
   ===================================================================== */
:root {
  --bg:#0f1138; --night:#0f1138; --deck:rgba(34,38,120,.55); --deck2:rgba(10,12,44,.8); --deck3:#2d3499; --line:rgba(132,140,255,.55);
  --ink:#ffffff; --muted:#d3d6ff; --dim:#9aa0ec; --body-ink:#eceeff; --cyan:#4fe3ff; --mint:#43f08a;
  --edge:#06071f; --on-sun:#2a1f3d; --hot:#ff4d5e; --chip:#1b1e66; --chip-ink:#ffffff; --foot:rgba(24,26,96,.8); --sky:#4fe3ff; --lift:none;
  --t-shadow:0 2px 0 rgba(22,22,80,.45);
  --g-sun:linear-gradient(180deg, #ffe066 0%, #ffcb2e 48%, #f5a91c 100%);
  --g-go:linear-gradient(180deg, #5af29a 0%, #2fd679 50%, #1bb862 100%);
  --g-navy:linear-gradient(180deg, #2f39a8 0%, #222a86 100%);
  --g-lav:linear-gradient(180deg, #eceeff 0%, #c4c8fb 100%);
}
body { background:linear-gradient(160deg, #0c0e2e 0%, #10123a 50%, #170f40 100%) fixed; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 12% 30%, rgba(255,255,255,.55) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 34% 72%, rgba(255,255,255,.45) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 63% 18%, rgba(255,255,255,.5) 0 2px, transparent 3px),
    radial-gradient(circle at 81% 64%, rgba(255,255,255,.45) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 92% 22%, rgba(255,255,255,.4) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 48% 90%, rgba(255,255,255,.4) 0 1.5px, transparent 2.5px),
    radial-gradient(ellipse 55% 45% at 55% 32%, rgba(190,56,230,.16), rgba(190,56,230,0) 70%),
    radial-gradient(ellipse 40% 35% at 10% 95%, rgba(80,70,220,.18), rgba(80,70,220,0) 70%); }
h1, h2, h3 { text-shadow:var(--t-shadow); letter-spacing:.005em; }
a { color:var(--cyan); }
a:hover { color:#fff; }

/* top bar with the dark diagonal title wedge */
.top { background:rgba(16,18,60,.92); border-bottom:none; box-shadow:0 2px 0 rgba(20,22,80,.35); backdrop-filter:blur(8px); }
.top::before { content:""; position:absolute; left:0; top:0; bottom:0; width:330px; z-index:-1; background:#080a26; clip-path:polygon(0 0, 100% 0, 86% 100%, 0 100%); }
.brand { text-shadow:var(--t-shadow); }
.search input { background:rgba(20,22,86,.8); border:2px solid transparent; color:#fff; font-weight:700; }
.search input::placeholder { color:var(--dim); }
.search input:focus { border-color:var(--cyan); }
.results { background:rgba(30,33,118,.95); border:2px solid var(--line); border-radius:18px; backdrop-filter:blur(10px); }
.rail { background:rgba(12,14,46,.85); border-right:none; backdrop-filter:blur(8px); }
.rail .sep { background:var(--line); }
.rail a { color:var(--muted); font-weight:700; border-radius:12px; }
.rail a:hover { background:rgba(255,255,255,.1); color:#fff; }
.rail a[aria-current="page"] { background:var(--g-lav); color:#2b2f8f; box-shadow:0 3px 0 #6f74cf; }
.rail a[aria-current="page"] .ic { color:#2b2f8f; }
.rail a[aria-current="page"]::before { display:none; }
.rail .ic { color:var(--c, #fff); }

/* buttons */
.pill { height:44px; padding:0 18px; border:2px solid #5a66e6; border-radius:12px; font:700 16px/1 var(--display);
  background:var(--g-navy); color:#fff; box-shadow:0 3px 0 var(--edge), inset 0 1px 0 rgba(255,255,255,.18); text-shadow:var(--t-shadow); transition:transform .08s, filter .12s; }
.pill:hover { filter:brightness(1.12); color:#fff; transform:translateY(-1px); }
.pill:active { transform:translateY(2px); box-shadow:0 1px 0 var(--edge); }
.pill.sun { background:var(--g-sun); border-color:var(--edge); color:var(--on-sun); text-shadow:none; box-shadow:0 3px 0 var(--edge), inset 0 2px 0 rgba(255,255,255,.55); }
.pill.sun:hover { color:var(--on-sun); }
.pill.go, .banner .pill.go { background:var(--g-go); border:2px solid var(--edge); color:#fff; box-shadow:0 3px 0 var(--edge), inset 0 2px 0 rgba(255,255,255,.45); }
.pill.go:hover, .banner .pill.go:hover { color:#fff; }
.play-btn { background:var(--g-sun); border:3px solid var(--edge); border-radius:16px; font-size:26px; padding:18px 46px 18px 38px; color:var(--on-sun);
  box-shadow:0 4px 0 var(--edge), inset 0 3px 0 rgba(255,255,255,.55), 0 14px 30px rgba(20,16,80,.45); }
.play-btn:hover { background:var(--g-sun); filter:brightness(1.06); }
.play-btn:active { transform:translateY(3px); box-shadow:0 1px 0 var(--edge), inset 0 3px 0 rgba(255,255,255,.55); }

/* section heads */
.row-head h2 .ic { filter:drop-shadow(0 2px 0 rgba(22,22,80,.45)); }
.row-head a { height:34px; padding:0 8px 0 14px; border-radius:10px; background:var(--g-navy); border:2px solid #5a66e6; color:#fff; font-weight:700; box-shadow:0 3px 0 var(--edge); text-shadow:var(--t-shadow); }
.row-head a:hover { color:#fff; filter:brightness(1.12); }

/* mood tiles: glossy item tiles */
.mood { border:2px solid rgba(255,255,255,.55); border-radius:18px; color:#fff;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 82%, #1a1c56) 100%);
  box-shadow:0 4px 0 var(--edge), inset 0 -4px 0 rgba(0,0,0,.12); }
.mood b { font-size:19px; text-shadow:0 2px 0 rgba(20,20,70,.5); }
.mood:hover { color:#fff; transform:translateY(-3px); box-shadow:0 7px 0 var(--edge), inset 0 -4px 0 rgba(0,0,0,.12); }
.mood .art { filter:drop-shadow(0 4px 6px rgba(20,20,80,.35)); }
.mood .badge { background:var(--hot); color:#fff; border:none; border-radius:999px; padding:4px 9px; box-shadow:0 2px 0 rgba(20,20,80,.4); }

/* banner: the yellow Select slab */
.banner { background:var(--g-sun); border:3px solid var(--edge); border-radius:20px; box-shadow:0 4px 0 var(--edge), inset 0 3px 0 rgba(255,255,255,.5); padding:12px 20px 14px 14px; color:var(--on-sun); }
.banner b { font-size:28px; color:var(--on-sun); text-shadow:none; }
.banner p { color:var(--on-sun); font-weight:700; }

/* game cards: rimmed tiles, New tag sits on the top edge */
.card { overflow:visible; border:2px solid rgba(160,168,255,.7); border-radius:16px; background:#2a2f9c; box-shadow:0 4px 0 var(--edge); transition:transform .12s, box-shadow .12s; }
.card .thumb { border-radius:14px; }
.card:hover { transform:translateY(-3px); box-shadow:0 7px 0 var(--edge), 0 0 0 3px #ffd84a; }
.card:hover .thumb { transform:none; }
.card .flag { top:-10px; right:10px; background:var(--hot); color:#fff; border-radius:999px; padding:5px 11px; font-size:13px; box-shadow:0 2px 0 rgba(20,20,80,.45); }
.card .name { background:rgba(20,22,86,.85); border-radius:10px; font-weight:700; }
.card .play-dot { width:60px; height:60px; margin:-30px 0 0 -30px; background:var(--g-sun); border:3px solid var(--edge); box-shadow:0 3px 0 var(--edge), inset 0 2px 0 rgba(255,255,255,.55); color:var(--on-sun); }
.bento .card:nth-child(1) .play-dot { width:80px; height:80px; margin:-40px 0 0 -40px; }
.bento .card .thumb { border-radius:14px; }
.strip { padding-top:12px; margin-top:-12px; }

/* translucent panels */
.seo, .info, .gamebar { background:var(--deck); border:2px solid var(--line); border-radius:20px; backdrop-filter:blur(8px); box-shadow:none; }
.seo h3 { color:var(--cyan); }
.seo p, .info .summary, .crumbs, .crumbs a { color:var(--muted); }
.info .crumbs a { color:var(--cyan); }
.facts div, .faq details { background:var(--deck2); border:none; border-radius:12px; }
.facts dt { color:var(--muted); }
.facts dd { color:#fff; }
.faq summary::after { color:var(--mint); }
.prose li::marker { color:var(--cyan); }
.tag { background:var(--g-navy); border:2px solid #5a66e6; color:#fff; font-weight:700; box-shadow:0 2px 0 var(--edge); }
a.tag:hover { border-color:#8a94ff; color:#fff; }
.table-wrap { border:2px solid var(--line); border-radius:14px; }
.controls th { background:rgba(20,22,86,.8); color:var(--muted); }
.controls th, .controls td { border-bottom:1px solid var(--line); }
.player { border:2px solid var(--line); border-radius:20px; box-shadow:0 4px 0 #0c0e33; background:#181c5c; }
.player img.cover { filter:blur(26px) saturate(1.2); opacity:.22; }
.player .start::before { content:""; position:absolute; left:50%; top:42%; width:120%; height:170%; transform:translate(-50%, -50%); background:radial-gradient(ellipse at center, rgba(220,80,245,.7) 0%, rgba(200,62,235,.38) 28%, rgba(196,60,235,.1) 48%, rgba(226,70,245,0) 66%); pointer-events:none; }
.player .start > * { position:relative; }
.player .start img.logo { border:2px solid rgba(255,255,255,.6); border-radius:14px; }
.gamebar img { border:2px solid rgba(255,255,255,.5); border-radius:10px; }
.gamebar .t span { color:var(--cyan); }
.cat-head .ic-tile { border:2px solid var(--line); background:var(--deck); }
.ad { background:var(--deck2); border:2px dashed var(--line); color:var(--dim); }
footer { background:var(--foot); border-top:none; }
footer a, footer .f { color:var(--muted); }
:focus-visible { outline:3px solid var(--cyan); }
@media (max-width: 760px) { .top::before { width:150px; } }
.info .sub { font:700 20px/1.2 var(--display); color:var(--cyan); text-shadow:var(--t-shadow); margin-top:-4px; }

/* ---------- stage 1: leaderboard card, challenge bar, share page, stats page ---------- */
.board { background:var(--deck); border:2px solid var(--line); border-radius:20px; padding:14px; backdrop-filter:blur(8px); display:flex; flex-direction:column; gap:10px; }
.board-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.board-head h3 { display:flex; align-items:center; gap:8px; margin:0; }
.board-head h3 .ic { width:20px; height:20px; color:var(--sun); }
.board-reset { font-size:12px; }
.board-tabs { display:flex; gap:6px; }
.board-tabs button { flex:1; height:32px; border-radius:10px; border:0; background:var(--deck2); color:var(--muted); font:800 13px var(--body); cursor:pointer; }
.board-tabs button.on { background:var(--g-sun, var(--sun)); color:var(--on-sun); }
.board-list { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.board-list li { display:grid; grid-template-columns:26px 1fr auto; gap:8px; align-items:center; padding:6px 10px; border-radius:10px; background:var(--deck2); font-size:14px; }
.board-list li.me { outline:2px solid var(--sun); background:rgba(255,201,51,.14); }
.board-list .n { font-weight:800; color:var(--cyan, var(--sky)); text-align:center; }
.board-list .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.board-list .sc { font:700 15px var(--display); }
.board-list .board-empty { display:block; text-align:center; color:var(--muted); padding:12px; }
.board-me { margin:0; font-size:13px; }
.board-me b { color:#fff; }
.challenge-bar { background:rgba(255,201,51,.16); border:2px solid var(--sun); border-radius:14px; padding:10px 14px; color:#fff; }
.challenge-bar b { color:var(--sun); }
.challenge-bar b:first-child { color:#fff; }

.share-page { min-height:100vh; display:grid; place-items:center; padding-block:24px; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); }
.challenge { width:min(520px, 100%); text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; background:var(--deck); border:2px solid var(--line); border-radius:24px; padding:20px; }
.challenge .brand { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font:700 20px var(--display); }
.challenge .art { width:100%; height:auto; border-radius:16px; margin:6px 0; }
.challenge .eyebrow { margin:0; color:var(--cyan, var(--sky)); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:13px; }
.challenge h1 { margin:0; font-size:24px; text-wrap:balance; }
.challenge h1 span { color:var(--cyan, var(--sky)); }
.challenge .big { font:700 72px/1 var(--display); color:var(--sun); }
.challenge .btn-play { margin-top:8px; display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 30px; border-radius:999px; background:var(--g-sun, var(--sun)); color:var(--on-sun); font:700 20px var(--display); text-decoration:none; }
.challenge .more { color:var(--muted); font-weight:700; }

.admin-page { padding-block:24px; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); }
.admin { max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.admin .kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.admin .kpi { background:var(--deck); border:2px solid var(--line); border-radius:16px; padding:12px 14px; }
.admin .kpi b { display:block; font:700 30px var(--display); }
.admin .kpi span { color:var(--muted); font-size:13px; }
.admin section { background:var(--deck); border:2px solid var(--line); border-radius:16px; padding:14px; min-width:0; }
.admin h2 { font-size:18px; margin:0 0 8px; }
.admin .tbl { overflow-x:auto; }
.admin table { width:100%; border-collapse:collapse; font-size:14px; }
.admin th, .admin td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.admin th { color:var(--muted); font-weight:800; }
.admin td.num, .admin th.num { text-align:right; font-variant-numeric:tabular-nums; }
.admin .two { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:16px; }
.admin form { display:flex; gap:8px; flex-wrap:wrap; }
.admin input { height:40px; border-radius:10px; border:2px solid var(--line); background:var(--deck2); color:#fff; padding:0 12px; font:inherit; min-width:0; flex:1; }
.admin button { height:40px; border-radius:10px; border:0; padding:0 16px; background:var(--sun); color:var(--on-sun); font-weight:800; cursor:pointer; }

/* brand logo (rabbit + wordmark); the mark alone on small screens */
.brand img { display:block; height:40px; width:auto; }
.brand .logo-mark { display:none; }
@media (max-width: 760px) { .brand .logo-full { display:none; } .brand .logo-mark { display:block; height:40px; } }
.challenge .brand img { height:44px; width:auto; }

[hidden] { display:none !important; }
.card .flag.hot { background:#ff7a1a; }
.card .flag.upd { background:#22b06b; }

/* admin tools */
.admin a { color:var(--cyan, var(--sky)); }
.tabsx { display:flex; gap:6px; flex-wrap:wrap; }
.tabsx a { padding:9px 14px; border-radius:12px; background:var(--deck2); color:var(--muted) !important; font-weight:800; text-decoration:none; }
.tabsx a.on { background:var(--sun); color:var(--on-sun) !important; }
.admin .row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.admin .acts { margin-top:10px; }
.admin select, .admin textarea { min-height:40px; border-radius:10px; border:2px solid var(--line); background:var(--deck2); color:#fff; padding:6px 10px; font:inherit; max-width:100%; }
.admin textarea { width:100%; resize:vertical; line-height:1.45; }
.admin .fieldx input { width:100%; flex:none; }
.admin .fieldx { display:flex; flex-direction:column; gap:6px; padding:12px 0; border-top:1px solid var(--line); }
.admin .fieldx label, .admin #feat label { font-weight:800; }
.admin .b { height:38px; border-radius:10px; border:2px solid var(--line); padding:0 14px; background:var(--deck2); color:#fff; font-weight:800; cursor:pointer; }
.admin .b.y { background:var(--sun); color:var(--on-sun); border-color:transparent; }
.admin .b.red { background:#5a1622; border-color:#ff4d5e; }
.admin .b.sm { height:30px; padding:0 10px; font-size:13px; }
.admin .phead p { margin:4px 0 0; }
.admin .err { color:#ff8a95; }
.tagx { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:800; background:rgba(79,227,255,.16); color:#bff4ff; }
.tagx.red { background:rgba(255,77,94,.2); color:#ffb3bb; } .tagx.green { background:rgba(67,240,138,.18); color:#b5ffd3; }
.tagx.amber { background:rgba(255,201,51,.18); color:#ffe39a; } .tagx.dim { background:rgba(255,255,255,.08); color:var(--muted); }
.toastx { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#163d2a; border:2px solid #43f08a; color:#fff; padding:10px 16px; border-radius:12px; font-weight:800; z-index:50; }
.toastx.err { background:#4a1520; border-color:#ff4d5e; }