/* Direction C · "זהב לילה" (gold night): the original dark+gold Kamario, warmed up. Warm-black, gold + one teal accent, Secular One wordmark/headings + Rubik body, tiles tinted by their category. */
:root{--fd:"Secular One","Rubik",system-ui,sans-serif;--fb:"Rubik",system-ui,sans-serif;
  --ink:#0e0b09;--ink-2:#17120e;--ink-3:#221a14;--line:rgba(255,226,180,.11);
  --paper:#f6eee2;--paper-dim:rgba(246,238,226,.72);--paper-mute:rgba(246,238,226,.48);--dim:var(--paper-dim);--mute:var(--paper-mute);
  --gold:#f2b441;--gold-2:#ffd47e;--teal:#35d0bf;--ember:#ff7a4d;--slate:#9a8f80;
  --nav-bg:rgba(14,11,9,.94);--chip-bg:rgba(255,226,180,.07);--chip-on:var(--gold);--chip-on-ink:#1a1206;
  --cat-football:#3ddc84;--cat-quick:#ffcf4d;--cat-action:#ff7a4d;--cat-satire:#35d0bf;--cat-brain:#b996ff;--cat-creators:#5aa9ff;--cat-arcade:#ff7ad9;--cat-misc:var(--gold)}
body{font-family:var(--fb);background-color:var(--ink);background-image:radial-gradient(1200px 600px at 85% -10%,rgba(242,180,65,.10),transparent 60%),radial-gradient(900px 500px at 0% 30%,rgba(53,208,191,.06),transparent 60%);color:var(--paper)}
h1,h2,h3,.brand-name,.stat b,.pl-title,.acard-body b,.pl-pc strong,.hrow-h h2,.tile::after{font-family:var(--fd)!important;font-weight:400!important;letter-spacing:0}
.h-badge,.pl-btn,.brand-name small{font-family:var(--fb)!important}
/* header */
.nav{border-bottom:1px solid var(--line)}
.brand-mark,.nav .brand-mark{background:linear-gradient(160deg,var(--gold-2),var(--gold) 55%,#b9781c);box-shadow:0 3px 0 #7a4c0e}
.brand-name{color:var(--gold-2)}
.nav-search label{background:var(--chip-bg);border:1.5px solid var(--line)}
.nav-search label:focus-within{border-color:var(--gold)}
.cats{border-bottom:1px solid var(--line)}
.cat{background:var(--chip-bg);border:1.5px solid color-mix(in srgb,var(--cc) 30%,transparent);color:var(--paper);transition:transform .15s var(--ease)}
.cat:hover{transform:translateY(-2px)}.cat:active{transform:translateY(1px)}
.cat.on{background:var(--cc);border-color:var(--cc);color:#140e08}
/* hero: big gold wordmark with a teal offset shadow (no blur filter) */
.eyebrow{color:var(--teal);font-weight:600;letter-spacing:.04em}
.h-big{background:linear-gradient(180deg,#fff3d6 0%,var(--gold-2) 40%,var(--gold) 70%,#c27f1d 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:none;line-height:.95}
.h-big::after{display:none}
.h-small{color:var(--paper);font-family:var(--fd);letter-spacing:0}
.lede{color:var(--paper-dim)}
.btn{background:var(--gold);color:#1a1206;box-shadow:0 5px 0 #9a6214;border-radius:14px;font-family:var(--fd);font-size:18px;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 #9a6214}.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #9a6214}.btn::before{display:none}
.stat b{color:var(--gold)}
.halo{background:radial-gradient(circle,rgba(242,180,65,.32),transparent 65%)}
.tile{border:3px solid rgba(255,212,126,.55);border-radius:16px}
/* rows */
.hrow-h h2{color:var(--paper);font-size:25px}
.hrow-h h2::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--gold);box-shadow:5px 5px 0 var(--teal);margin-inline-end:14px;transform:rotate(45deg) translateY(-3px)}
/* tiles: warm card, category colour lip + glow on hover, transform/opacity only */
.ht{position:relative;background:linear-gradient(180deg,color-mix(in srgb,var(--c,var(--gold)) 9%,var(--ink-2)),var(--ink-2));border:1px solid color-mix(in srgb,var(--c,var(--gold)) 22%,transparent);border-radius:18px;padding:6px 6px 10px;gap:8px;box-shadow:inset 0 -3px 0 var(--c,var(--gold));transition:transform .2s var(--ease)}
.ht::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px var(--c,var(--gold)),0 18px 36px -14px color-mix(in srgb,var(--c,var(--gold)) 60%,transparent);opacity:0;transition:opacity .2s var(--ease)}
.ht:hover,.ht:focus-visible{transform:translateY(-6px) scale(1.015)}
.ht:hover::before,.ht:focus-visible::before{opacity:1}
.ht:active{transform:translateY(-1px) scale(.985);transition-duration:.08s}
.ht-media{border-radius:13px;border:0}
.ht:hover .ht-media,.ht:focus-visible .ht-media{transform:none;box-shadow:none;border:0}
.ht-body{padding-inline:6px}
.ht-body b{font-family:var(--fd);font-weight:400;font-size:18px;color:var(--paper)}
.ht-big .ht-body b{font-size:26px;color:var(--gold-2)}
.ht-body small{color:var(--paper-mute)}
.htop{gap:16px}.hstrip{gap:16px;padding:4px 4px 16px}
/* size variety in strips: every 5th tile in a normal strip is wider */
@media (min-width:901px){.hstrip:not(.hstrip-sm){grid-auto-columns:auto;align-items:start}.hstrip:not(.hstrip-sm)>.ht{width:calc((min(100vw,var(--max)) - 2*var(--gutter) - 64px)/4.6)}.hstrip:not(.hstrip-sm)>.ht:nth-child(5n+1){width:calc((min(100vw,var(--max)) - 2*var(--gutter) - 64px)/3)}}
.hrow-arc .ht{border-radius:14px}.hrow-arc .ht-media{aspect-ratio:1/1;border-radius:10px}
.hstrip-sm{grid-auto-columns:calc((100% - 80px)/7)}
.b-hot{background:var(--ember);color:#1a0b04}.b-new{background:var(--teal);color:#05201c}.b-top{background:var(--gold);color:#1a1206}
.h-badge{border-radius:999px;padding:4px 10px;font-weight:700}
.hres-n{background:var(--gold);color:#1a1206}
.hclr{color:var(--gold);background:var(--chip-bg)}
.hm-count b{color:var(--gold)}
/* pages */
.foot a{color:var(--gold)}
.chip{background:var(--chip-bg);color:var(--paper-dim)}
.pl-btn{background:var(--chip-bg);border-color:var(--line);color:var(--paper)}
.sg-m{box-shadow:inset 0 -4px 0 var(--c)}
@media (max-width:860px){.ht{border-radius:15px;padding:5px 5px 8px}.ht-body b{font-size:16px}.hrow-h h2{font-size:22px}.hstrip-sm{grid-auto-columns:30%}}
/* compact hero: slim band, BIG wordmark, small ring beside it on desktop, none on phone */
.hero-compact .hero{height:auto;min-height:0;padding:14px var(--gutter) 4px;grid-template-columns:minmax(0,1fr) 440px;gap:24px;overflow:visible;overflow-x:clip}
.hero-compact .hero-copy{display:flex;flex-direction:column;justify-content:center}
.hero-compact .eyebrow{margin:0 0 2px}
.hero-compact .h-big{font-size:clamp(72px,6.8vw,100px)}
.hero-compact .hero .lede,.hero-compact .hero .hero-actions{display:none}
.hero-compact .stage{height:160px;min-height:0;perspective:700px;perspective-origin:50% 40%}
.hero-compact .tile{width:140px;left:calc(50% - 70px);top:calc(50% - 48px);transform:rotateY(var(--a)) translateZ(165px);border-width:2px;border-radius:12px}
.hero-compact .tile::after{font-size:12px;padding:16px 8px 6px}
.hero-compact .halo{width:280px;height:280px}.hero-compact .shadow{width:240px;bottom:-6px}
.hero-compact .hm-intro{padding:6px 0 0}
.hero-compact .hm-intro p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.hero-compact .hrow:first-child,.hero-compact #hcont[hidden]+.hrow{margin-top:8px}
.hero-compact .hrow-h{margin-bottom:10px}
@media (max-width:900px){
 .hero-compact .hero{grid-template-columns:1fr;padding:8px var(--gutter) 0;gap:0}
 .hero-compact .hero-copy{display:block}
 .hero-compact .stage{display:none}
 .hero-compact .h-big{font-size:clamp(54px,15vw,66px)}.hero-compact .h-small{font-size:19px}
 .hero-compact .hero h1{gap:12px}
}
/* badges sit on the body strip beside the title, never over key art */
.ht-media{overflow:visible}
.ht-media img,.ht-media video{border-radius:inherit}
.ht .h-badge,.ht-sugg .h-sugg{top:calc(100% + 10px);bottom:auto;inset-inline-start:auto;inset-inline-end:4px;font-size:11px;padding:3px 9px}
.ht-sugg .h-sugg{background:var(--chip-bg);color:var(--gold)}
.ht-sugg .h-badge{display:none}
.ht .h-pc{top:8px;inset-inline-end:8px;font-size:10.5px;padding:2px 7px;background:rgba(14,11,9,.85);color:var(--paper)}
.htop .ht-big .ht-media{flex:none;aspect-ratio:16/10}
.ht-big .ht-media img{object-position:center}
.htop .ht-big .ht-body{flex:1;justify-content:center}
.ht:has(.h-badge:not([hidden])) .ht-body{padding-inline-end:52px}.ht-sugg:has(.h-sugg) .ht-body{padding-inline-end:52px}
/* ===== final round: contrast, pop accent, one-row hero, featured art, sheet scrim, chip hint ===== */
:root{--paper-dim:rgba(246,238,226,.80);--paper-mute:rgba(246,238,226,.66);--pop:#ff5fa8;--pop-2:#ff8cc4}
.h-small{color:var(--pop-2)}
.brand-name small{color:var(--pop-2)}
.cat small{opacity:1;color:var(--pop-2)}
.cat.on small{color:inherit;opacity:.85}
.hrow-h h2::before{box-shadow:5px 5px 0 var(--pop)}
.b-new{background:var(--pop);color:#2a0716}
.eyebrow b{color:var(--pop-2);font-weight:700}
/* hero: wordmark + small ring in ONE row, intro lines folded into the eyebrow */
.hero-compact .hero{grid-template-columns:minmax(0,1fr) 340px;padding:10px var(--gutter) 0;gap:16px;align-items:center}
.hero-compact .hero h1{margin:0}
.hero-compact .h-big{font-size:clamp(76px,7vw,104px)}
.hero-compact .eyebrow{margin:4px 0 0;color:var(--paper-dim)}
.hero-compact .stage{height:128px;perspective:600px}
.hero-compact .tile{width:116px;left:calc(50% - 58px);top:calc(50% - 40px);transform:rotateY(var(--a)) translateZ(138px)}
.hero-compact .halo{width:220px;height:220px}.hero-compact .shadow{width:180px;bottom:-4px}
.hero-compact .hero-copy{order:0}
.hero-compact .hm-intro{display:none}
.hero-compact .hrow:first-child,.hero-compact #hcont[hidden]+.hrow{margin-top:4px}
/* featured: whole key art visible (contain on the art's own navy), title + badge tight under it */
.htop .ht-big .ht-media{flex:1;aspect-ratio:auto;min-height:0;background:#070b16;border-radius:13px}
.htop .ht-big .ht-media img{object-fit:contain;object-position:center;height:100%}
.htop .ht-big .ht-body{flex:none;justify-content:flex-start;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding-inline-end:6px!important}
.htop .ht-big .ht-body small{width:auto}
/* phone */
@media (max-width:900px){
 .hero-compact .hero{grid-template-columns:1fr;padding:6px var(--gutter) 0}
 .hero-compact .stage{display:none}
 .hero-compact .h-big{font-size:clamp(56px,16vw,68px)}
 .hero-compact .eyebrow{font-size:12.5px}
 .htop .ht-big .ht-media{aspect-ratio:16/10;flex:none}
 .cats{position:sticky}
 .cats::after{content:"‹";direction:ltr;position:absolute;inset-block:0;left:0;width:64px;display:flex;align-items:center;justify-content:flex-start;padding-left:8px;font:700 26px/1 var(--fb);color:var(--gold-2);text-shadow:0 0 8px rgba(242,180,65,.6);background:linear-gradient(to right,var(--ink) 35%,rgba(14,11,9,.85) 60%,rgba(14,11,9,0));pointer-events:none}
}
/* player sheet: dark scrim so the game reads as dimmed, readable computer-only titles */
.pl-shade{background:rgba(6,4,2,.86)}
.is-touch .sg.pc-only b{opacity:1;color:var(--paper-dim)}
.is-touch .sg.pc-only img{filter:grayscale(1) brightness(.6)}
.is-touch .ht.pc-only .ht-body{opacity:1}.is-touch .ht.pc-only .ht-body b{color:var(--paper-dim)}
.pl-shade{background:linear-gradient(rgba(8,6,4,.72),rgba(8,6,4,.72)),var(--poster,none) center 64px/100% auto no-repeat,#07080c}
@media (min-width:720px){.pl-shade{background:rgba(6,4,2,.78)}}
.is-touch .ht.pc-only{--c:#4a453e}.is-touch .ht.pc-only .ht-media img{filter:grayscale(1) brightness(.6)}
/* desktop compact hero: a calm, complete fan of 3 labelled games instead of a spinning, clipped ring */
@media (min-width:901px){
 .hero-compact .stage{height:auto;min-height:0;perspective:none;display:flex;align-items:center;justify-content:center;padding:10px 0}
 .hero-compact .ring{position:relative;inset:auto;display:flex;align-items:center;justify-content:center;gap:12px;transform:none!important;animation:none!important;transform-style:flat}
 .hero-compact .tile{position:relative;left:auto;top:auto;width:136px;flex:none;transform:none!important;backface-visibility:visible;border-width:2px;border-radius:12px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
 .hero-compact .tile:nth-child(n+4){display:none}
 .hero-compact .tile:nth-child(1){transform:rotate(3deg) translateY(4px)!important}
 .hero-compact .tile:nth-child(3){transform:rotate(-3deg) translateY(4px)!important}
 .hero-compact .tile:hover,.hero-compact .tile:focus-visible{transform:translateY(-6px) scale(1.04)!important;box-shadow:0 18px 40px -16px rgba(0,0,0,.9),0 0 0 2px var(--gold)}
 .hero-compact .tile.off{pointer-events:auto}
 .hero-compact .tile::after{font-size:13px}
 .hero-compact .shadow{display:none}
}
@media (min-width:901px){
 .hero-compact .hero{grid-template-columns:minmax(0,1fr) minmax(0,780px)}
 .hero-compact .ring{gap:14px}
 .hero-compact .tile{width:176px}
 .hero-compact .tile:nth-child(n+4){display:block}.hero-compact .tile:nth-child(n+5){display:none}
 .hero-compact .tile:nth-child(1){transform:rotate(2.5deg) translateY(3px)!important}
 .hero-compact .tile:nth-child(3){transform:rotate(-1.5deg) translateY(2px)!important}
 .hero-compact .tile:nth-child(4){transform:rotate(-3deg) translateY(5px)!important}
 .hero-compact .tile::after{font-size:15px;padding:22px 10px 8px}
}
@media (min-width:901px) and (max-width:1250px){.hero-compact .tile{width:140px}.hero-compact .tile:nth-child(n+4){display:none}}

/* owner 2026-10-27: desktop top felt cramped — drop the fan, let the big wordmark breathe, one calm eyebrow line */
.hero-compact .stage{display:none!important}
.hero-compact .hero{grid-template-columns:1fr!important;justify-items:start;padding-block:28px 12px}
.hero-compact .hero-copy{max-width:none}
.hero-compact .eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* rows scroll by swipe/trackpad; no visible white scrollbar */
.hstrip{scrollbar-width:none}.hstrip::-webkit-scrollbar{display:none}
@media (min-width:861px){
 .hstrip{grid-auto-flow:row;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-auto-columns:auto;overflow:visible}
 #hcont-g{--n:4}
 #hcont-g>:nth-child(n+5){display:none}
}
@media (min-width:861px){.hstrip:not(.hstrip-sm)>.ht,.hstrip:not(.hstrip-sm)>.ht:nth-child(5n+1){width:auto}.hstrip{align-items:stretch}}
@media (min-width:861px){#creators .hstrip{--n:5}}
/* owner: arcade = one small strip, all in one row on desktop */
@media (min-width:861px){
 .hrow-arc .hstrip-sm{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(0,150px);justify-content:start;gap:12px}
 .hrow-arc .ht{padding:4px 4px 6px}
 .hrow-arc .ht-body{padding-top:4px}
 .hrow-arc .ht-body b{font-size:13px}
 .hrow-arc .ht-body small{display:none}
}
@media (min-width:861px){.hrow-arc .hstrip-sm{grid-auto-columns:minmax(0,112px)}.hrow-arc .ht-media{aspect-ratio:4/3}}
.foot-about{display:grid;gap:10px;max-width:68ch;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid rgba(242,180,65,.18)}
.foot-about h2{font-family:var(--display,'Secular One'),sans-serif;font-weight:400;font-size:26px;margin:0;color:var(--gold,#f2b441)}
.foot-about p{margin:0;line-height:1.65;color:rgba(246,238,226,.82)}
.foot-about strong{color:#f6eee2}
.foot-about a{color:var(--gold,#f2b441)}