/* THE LOBBY — slots-casino style (top bar, live vault ticker, category tabs, portrait game tiles) */
/* studio chrome = Lollygag brand: ink #0E0F13, off-white #F4F2EE, magenta #FF2E88; the game tiles keep their own gold */
:root{--bg:#0E0F13;--bar:#15161C;--tile:#141A2B;--line:rgba(255,255,255,.08);--text:#F4F2EE;--magenta:#FF2E88;--ink:#0E0F13;--dim:#98A2BA;--gold:#F5C542;--gold2:#FFE08A;--red:#FF4D5E;--green:#3DDC97}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:500 14px/1.4 Manrope,system-ui,sans-serif}
body{min-height:100vh;overflow-x:hidden;background:radial-gradient(1200px 500px at 50% -10%,rgba(255,46,136,.08),transparent),var(--bg)}
.testbanner{background:#2DD47E;color:#06200F;text-align:center;font-weight:800;font-size:12px;padding:3px 8px}
.cz-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));background:rgba(14,15,19,.96);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cz-logo{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;min-width:0}
/* the Lollygag Studios lockup (1142x300 SVG): 40px tall on desktop, 37px on phones (= 141px wide, the brand minimum is
   140), never stretched; the admin entrance puts ADMIN next to it */
.cz-wordmark{display:block;height:40px;width:auto;aspect-ratio:1142/300;flex:none}
.cz-logo small{display:block;font-size:10px;font-weight:800;letter-spacing:3px;color:var(--dim);white-space:nowrap}
.cz-right{display:flex;align-items:center;gap:8px}
.cz-lang{min-height:40px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:#161C2E;color:var(--text);font:800 12px Manrope,sans-serif;cursor:pointer}
.cz-btn{min-height:40px;padding:0 16px;border-radius:10px;font:800 13px Manrope,sans-serif;cursor:pointer;border:1px solid var(--line)}
.cz-btn.ghost{background:transparent;color:var(--text)}
.cz-btn.accent{background:var(--magenta);color:var(--ink);border-color:var(--magenta)}
/* the vault ticker */
.cz-ticker{display:flex;align-items:stretch;background:linear-gradient(90deg,#2A1606,#3B2108 40%,#2A1606);border-bottom:1px solid rgba(245,197,66,.35);overflow:hidden}
.cz-tlbl{flex:none;display:flex;align-items:center;padding:0 14px;font:400 18px Bangers,Impact,sans-serif;letter-spacing:1.5px;color:#2A1D04;background:var(--gold)}
.cz-track{display:flex;gap:28px;padding:8px 16px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.cz-track::-webkit-scrollbar{display:none}
.cz-jp{display:inline-flex;align-items:baseline;gap:8px}
.cz-jp span{font-size:11px;font-weight:800;letter-spacing:1px;color:#E9C98A;text-transform:uppercase}
.cz-jp b{font:700 18px 'JetBrains Mono',monospace;color:var(--gold2);text-shadow:0 0 12px rgba(255,200,80,.45);font-variant-numeric:tabular-nums}
/* categories */
.cz-cats{display:flex;gap:6px;padding:14px 16px 4px;overflow-x:auto;scrollbar-width:none;max-width:1400px;margin:0 auto}
.cz-cats::-webkit-scrollbar{display:none}
.cz-cats button{flex:none;min-height:40px;padding:0 16px;border-radius:99px;border:1px solid var(--line);background:#121827;color:var(--dim);font:800 13px Manrope,sans-serif;cursor:pointer}
.cz-cats button[aria-pressed=true]{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2A1D04;border-color:var(--gold)}
/* the tiles */
.cz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:14px 16px 24px;max-width:1400px;margin:0 auto}
.cz-empty{grid-column:1/-1;color:var(--dim)}
.cz-tile{position:relative;display:block;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:var(--tile);color:var(--text);text-decoration:none;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.45);transform:translateZ(0);transition:transform .25s,box-shadow .25s,border-color .25s}
.cz-tile img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,30% 50%);transition:transform .45s}
.cz-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.35) 50%,rgba(5,6,12,.96) 88%)}
.cz-tile:hover,.cz-tile:focus-visible{transform:translateY(-4px) scale(1.03);border-color:rgba(255,46,136,.75);box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 0 2px rgba(255,46,136,.35)}
.cz-tile:hover img.bg{transform:scale(1.08)}
.cz-badge{position:absolute;z-index:2;top:10px;right:10px;padding:4px 8px;border-radius:7px;font:800 10.5px Manrope,sans-serif;letter-spacing:1px;background:rgba(10,12,20,.82);border:1px solid rgba(255,255,255,.2)}
.cz-hot{position:absolute;z-index:2;top:10px;left:10px;padding:4px 9px;border-radius:7px;font:400 16px/1 Bangers,Impact,sans-serif;letter-spacing:1.5px;background:linear-gradient(180deg,#FF6A4D,#E0262E);color:#fff;box-shadow:0 0 14px rgba(255,60,60,.6)}
.cz-info{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:12px}
.cz-name{font:400 clamp(22px,2.4vw,32px)/.95 Bangers,Impact,sans-serif;letter-spacing:1px;text-shadow:0 3px 0 #000,0 0 18px rgba(0,0,0,.8)}
.cz-vault{margin-top:6px;font:700 clamp(16px,1.6vw,22px) 'JetBrains Mono',monospace;color:var(--gold2);font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(255,200,80,.35)}
.cz-vlbl{font-size:10px;font-weight:800;letter-spacing:1px;color:#E9C98A;text-transform:uppercase}
.cz-meta{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:12px;color:#C9D0E2}
.cz-meta i{font-style:normal;display:inline-flex;align-items:center;gap:5px}
.cz-meta i::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.cz-live{position:absolute;z-index:2;top:44px;left:10px;font:800 10.5px Manrope,sans-serif;letter-spacing:1px;padding:3px 7px;border-radius:6px;background:rgba(229,38,46,.9)}
.cz-play{position:absolute;z-index:3;left:50%;top:44%;transform:translate(-50%,-50%) scale(.85);opacity:0;padding:14px 28px;border-radius:99px;font:400 26px/1 Bangers,Impact,sans-serif;letter-spacing:2px;color:#2A1D04;background:linear-gradient(180deg,var(--gold2),var(--gold));box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 4px rgba(255,224,138,.25);transition:opacity .2s,transform .2s;pointer-events:none}
.cz-tile:hover .cz-play,.cz-tile:focus-visible .cz-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cz-tile.soon{filter:grayscale(.7);pointer-events:none}
.cz-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:9;background:#1A1B22;border:1px solid rgba(255,46,136,.6);border-radius:12px;padding:10px 16px;font-weight:700;max-width:calc(100vw - 32px)}
.cz-foot{text-align:center;color:var(--dim);font-size:12px;padding:8px 16px max(28px,env(safe-area-inset-bottom))}
.cz-footlogo{display:block;height:37px;width:auto;aspect-ratio:1142/300;margin:6px auto 12px;opacity:.9}
@media (max-width:900px){.cz-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px}}
@media (max-width:520px){
  .cz-wordmark{height:37px}.cz-logo{flex-direction:column;align-items:center;gap:3px}.cz-logo small{font-size:8px;line-height:1;letter-spacing:3px;margin-right:-3px}
  .cz-btn{padding:0 11px}.cz-btn.ghost{display:none}
  .cz-play{font-size:20px;padding:11px 20px}
  .cz-tile:hover{transform:none}
}
@media (hover:none){.cz-play{opacity:.95;transform:translate(-50%,-50%) scale(.8)}}
@media (prefers-reduced-motion:reduce){.cz-tile,.cz-tile img.bg,.cz-play{transition:none}.cz-tile:hover{transform:none}}
.cz-lang{display:inline-flex;align-items:center;gap:6px}.cz-flag{width:22px;height:11px;border-radius:2px}
/* (2026-10-09) BUDGET RUSH's small "Stupid Bureaucracy" line under the name (lobby + admin entrance tiles) */
.cz-sub{margin-top:2px;font:400 clamp(11px,1.05vw,14px)/1.1 "Special Elite","Courier New",monospace;letter-spacing:.5px;color:#E9DFC6;text-shadow:0 2px 0 #000,0 0 10px rgba(0,0,0,.8)}
/* phones: PLAY (always shown there) sits higher on the tile so it never covers the game's name + subtitle (2026-10-09) */
@media (max-width:520px){ .cz-play{top:38%} }