/* =================================================================
   FunClicker.com — Site stylesheet

   Design rules locked across the whole site:
   - Press Start 2P is only used at >= 8px rendered.
     Anything that would be smaller uses .pico (Nunito 800 uppercase).
   - All interactive elements meet a 44x44 minimum touch target.
   ================================================================= */

/* ---- Reset + tokens ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0c0c10; --bg2:#13131a; --bg3:#1c1c26; --bg4:#232330;
  --border:#252532;
  --green:#5dfb5d; --green2:#3dc83d;
  --red:#ff4444; --red2:#7a1c1c;
  --gold:#ffd700; --gold2:#a08800;
  --blue:#5577ff; --purple:#9966ff;
  --text:#e2e2f0; --text2:#7878a0; --text3:#3a3a52;
  --sb-icon:52px;
  --sb-full:220px;
  --top-h:56px;
  --touch:44px;
}
html,body{background:var(--bg);color:var(--text);font-family:'Nunito',sans-serif;min-height:100%}
body{overflow-x:hidden;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:3px}

/* ---- Type helpers ----
   .ps2p  = Press Start 2P, only used >= 8px
   .pico  = Nunito 800 uppercase letter-spacing 1.2px — the swap-in for
            anything that would otherwise be Press Start 2P below 8px.
            Stays legible at small sizes while keeping the retro tone.
*/
.ps2p{font-family:'Press Start 2P',monospace}
.pico{font-family:'Nunito',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:1.2px}

/* ---- Scanlines ---- */
#scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.055) 2px,rgba(0,0,0,.055) 4px);
}

/* =================================================================
   SIDEBAR — fixed overlay, never shifts content
   ================================================================= */
#sidebar{
  position:fixed;top:0;left:0;bottom:0;
  width:var(--sb-icon);background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  z-index:500;overflow:hidden;
  transition:width .2s ease, box-shadow .2s ease;
}
#sidebar:hover, #sidebar.open{width:var(--sb-full);box-shadow:6px 0 32px rgba(0,0,0,.65)}

.sb-head{
  height:var(--top-h);flex-shrink:0;
  display:flex;align-items:center;gap:8px;
  padding:0;border-bottom:1px solid var(--border);
  white-space:nowrap;overflow:hidden;
}
/* Brand logo fills the icon strip width when collapsed (52px) so the
   image stays perfectly centred. No negative-margin hacks. */
.sb-logo-mark{
  width:var(--sb-icon);height:var(--top-h);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.sb-logo-mark img{width:36px;height:36px;flex-shrink:0;display:block;border-radius:6px}
.sb-logo-text{
  font-family:'Press Start 2P',monospace;font-size:11px;color:var(--green);
  line-height:1.7;opacity:0;transition:opacity .18s;
  pointer-events:none;white-space:nowrap;letter-spacing:.6px;
}
.sb-logo-text span{color:var(--text2)}  /* legible muted — was #38385a (unreadable) */
#sidebar:hover .sb-logo-text, #sidebar.open .sb-logo-text{opacity:1}

.sb-nav{flex:1;overflow-y:hidden;overflow-x:hidden;padding:6px 0 16px;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent}
/* Only show scrollbar when sidebar is expanded — collapsed strip stays clean */
#sidebar:hover .sb-nav,
#sidebar.open .sb-nav{overflow-y:auto}
.sb-nav::-webkit-scrollbar{width:3px}
.sb-nav::-webkit-scrollbar-thumb{background:var(--border)}

.sb-section{
  /* swapped from PS2P 5px to Nunito 800 11px */
  font-family:'Nunito',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:11px;color:var(--text3);letter-spacing:1.8px;
  padding:14px 0 6px 17px;
  white-space:nowrap;overflow:hidden;opacity:0;transition:opacity .18s;
}
#sidebar:hover .sb-section, #sidebar.open .sb-section{opacity:1}

.sb-divider{height:1px;background:var(--border);margin:5px 0}

.ni{
  display:flex;align-items:center;
  min-height:var(--touch);
  color:var(--text2);border-left:3px solid transparent;
  white-space:nowrap;overflow:hidden;position:relative;
  transition:background .1s,color .1s;text-decoration:none;
}
.ni:hover{background:var(--bg3);color:var(--text)}
.ni.active{background:var(--bg3);border-left-color:var(--green);color:var(--green)}
.ni.active .ni-ico{color:var(--green)}

.ni-ico{
  /* Fixed icon column width — decoupled from --sb-icon, so when the
     drawer opens on mobile (where --sb-icon collapses to 0) icons stay
     in their column and don't overlap the labels. */
  flex-shrink:0;
  width:52px;
  min-height:var(--touch);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;color:var(--text2);transition:color .1s;
}
.ni:hover .ni-ico{color:var(--text)}

.ni-lbl{font-size:14px;font-weight:700;flex:1;opacity:0;transition:opacity .18s}
#sidebar:hover .ni-lbl, #sidebar.open .ni-lbl{opacity:1}

.ni-bdg{
  /* swapped from PS2P 5px to Nunito 800 10px */
  font-family:'Nunito',sans-serif;font-weight:800;
  font-size:10px;letter-spacing:.5px;
  background:var(--red);color:#fff;
  padding:3px 7px;margin-right:10px;flex-shrink:0;line-height:1.4;border-radius:3px;
  opacity:0;transition:opacity .18s;
}
.ni-bdg.gold{background:var(--gold);color:#1a1300}
.ni-bdg.blue{background:var(--blue);color:#fff}
#sidebar:hover .ni-bdg, #sidebar.open .ni-bdg{opacity:1}

/* Collapsed-strip tooltip — swapped to Nunito 700 11px */
.ni::after{
  content:attr(data-tip);
  position:absolute;left:calc(var(--sb-icon) + 8px);top:50%;
  transform:translateY(-50%);
  font-family:'Nunito',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.8px;text-transform:uppercase;
  background:#000;color:var(--green);
  padding:7px 10px;border:1px solid var(--green2);border-radius:3px;
  white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .12s;z-index:600;
}
#sidebar:not(:hover):not(.open) .ni:hover::after{opacity:1}

/* =================================================================
   TOP BAR
   ================================================================= */
#topbar{
  position:fixed;top:0;left:var(--sb-icon);right:0;
  height:var(--top-h);background:var(--bg2);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;
  padding:0 18px;z-index:400;
}
.t-ham{
  display:none;
  width:var(--touch);height:var(--touch);
  align-items:center;justify-content:center;
  font-size:20px;color:var(--text2);
}
.t-logo{
  font-family:'Press Start 2P',monospace;font-size:12px;
  color:var(--green);white-space:nowrap;letter-spacing:1.2px;
  min-height:var(--touch);display:flex;align-items:center;
}
.t-logo span{color:var(--text2)}  /* legible muted — was #38385a (unreadable) */

.srch-wrap{flex:1;max-width:420px;position:relative;margin-left:12px}
.srch-wrap input{
  width:100%;height:var(--touch);
  background:var(--bg3);
  border:1px solid var(--border);border-radius:6px;
  color:var(--text);font-family:'Nunito',sans-serif;font-size:14px;font-weight:600;
  padding:0 12px 0 40px;outline:none;
  transition:border-color .15s;
}
.srch-wrap input:focus{border-color:var(--green)}
.srch-wrap input::placeholder{color:var(--text3)}
.srch-icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--text3);font-size:15px;pointer-events:none;
}

#srch-results{
  position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:var(--bg2);border:1px solid var(--border);border-radius:6px;
  max-height:380px;overflow-y:auto;display:none;
  box-shadow:0 12px 32px rgba(0,0,0,.6);
}
#srch-results.show{display:block}
.sr-item{
  display:flex;align-items:center;gap:12px;
  min-height:var(--touch);padding:8px 12px;
  border-bottom:1px solid var(--border);cursor:pointer;
}
.sr-item:last-child{border-bottom:0}
.sr-item:hover{background:var(--bg3)}
.sr-thumb{
  width:36px;height:36px;border-radius:4px;flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:20px;position:relative;
}
.sr-thumb.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sr-info{flex:1;min-width:0}
.sr-name{
  /* bumped from PS2P 6px to PS2P 8px (compliant) */
  font-family:'Press Start 2P',monospace;font-size:8px;color:var(--text);line-height:1.7;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sr-cat{font-size:12px;color:var(--text3);font-weight:600;margin-top:3px}
.sr-empty{padding:18px;text-align:center;font-size:13px;color:var(--text3)}

.t-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.tbtn{
  background:var(--bg3);border:1px solid var(--border);border-radius:6px;
  color:var(--text2);font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;
  min-height:var(--touch);padding:0 16px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
  transition:border-color .15s,color .15s;
}
.tbtn:hover{border-color:var(--green);color:var(--green)}
.tbtn .cnt{color:var(--text3);font-size:11px;font-weight:800}
.tbtn.pri{background:var(--green);color:#041204;border-color:var(--green2);font-weight:800}
.tbtn.pri:hover{background:var(--green2);color:#041204}

/* =================================================================
   MAIN
   ================================================================= */
#main{
  margin-left:var(--sb-icon);
  padding-top:var(--top-h);
  min-height:100vh;
}
#home{
  padding:24px 24px 60px;
  display:flex;flex-direction:column;gap:30px;
  max-width:1480px;
}

/* =================================================================
   HERO
   ================================================================= */
.hero{
  display:grid;grid-template-columns:260px 1fr;
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  overflow:hidden;min-height:240px;
}
.hero-art{
  background:#060e06;display:flex;align-items:center;justify-content:center;
  position:relative;border-right:1px solid var(--border);
}
.hero-badge{
  position:absolute;top:10px;left:10px;
  /* swapped from PS2P 5.5px to Nunito 800 10px */
  font-family:'Nunito',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:10px;letter-spacing:1.2px;
  background:var(--red2);border:1px solid var(--red);color:#fff;
  padding:6px 10px;border-radius:3px;
  display:inline-flex;align-items:center;gap:5px;
}
.hero-plays{
  position:absolute;top:10px;right:10px;
  background:rgba(0,0,0,.65);border:1px solid var(--border);
  color:var(--text2);font-size:12px;font-weight:700;
  padding:5px 10px;border-radius:4px;
  display:inline-flex;align-items:center;gap:5px;
}
.hero-body{padding:26px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.hero-title{
  font-family:'Press Start 2P',monospace;font-size:16px;color:var(--green);
  display:flex;align-items:center;gap:8px;line-height:1.5;letter-spacing:1px;
}
.cursor{display:inline-block;width:11px;height:18px;background:var(--green);animation:blink 1s step-end infinite;vertical-align:middle}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hero-desc{font-size:14px;color:var(--text2);line-height:1.75;max-width:580px}
.hero-desc strong{color:var(--text)}
.hero-tags{display:flex;flex-wrap:wrap;gap:6px}

/* Tag chips — swapped from PS2P 5.5px to Nunito 800 10px */
.tag{
  font-family:'Nunito',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:10px;letter-spacing:1.2px;
  padding:6px 9px;border-radius:3px;border:1px solid;
  display:inline-flex;align-items:center;gap:5px;line-height:1;
}
.t-horror {background:#1c0808;color:var(--red);border-color:#5a1515}
.t-clicker{background:#081c08;color:var(--green);border-color:#1a4a1a}
.t-new    {background:#08081e;color:var(--blue);border-color:#202060}
.t-daily  {background:#1c1600;color:var(--gold);border-color:#4a3800}
.t-lb     {background:#1c1400;color:var(--gold);border-color:#3a2800}
.t-idle   {background:#12082a;color:var(--purple);border-color:#3a1878}
.t-puzzle {background:#0a0e1c;color:var(--blue);border-color:#1a2a55}
.t-arcade {background:#0e0e16;color:var(--text);border-color:var(--border)}
.t-action {background:#1e0a0a;color:#ff8866;border-color:#5a2210}
.t-2p     {background:#0a1c12;color:#5dd9a0;border-color:#1a4a30}

.btn-play{
  font-family:'Press Start 2P',monospace;font-size:9px;
  background:var(--green);color:#041204;border:2px solid var(--green2);
  padding:14px 22px;border-radius:4px;
  text-decoration:none;display:inline-flex;align-items:center;gap:10px;
  min-height:var(--touch);
  transition:background .15s,transform .1s;letter-spacing:1.2px;
}
.btn-play:hover{background:var(--green2)}
.btn-play:active{transform:translateY(1px)}
.hero-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:4px}
.hero-meta span{font-size:12px;color:var(--text3);font-weight:700;display:inline-flex;align-items:center;gap:6px}

/* =================================================================
   SECTION + ROW
   ================================================================= */
.sec{display:flex;flex-direction:column;gap:0}
.sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:12px;min-height:var(--touch)}
.sec-title{
  font-family:'Press Start 2P',monospace;font-size:10px;color:var(--text);
  display:flex;align-items:center;gap:10px;letter-spacing:1.2px;
}
.sec-dot{width:11px;height:11px;border-radius:2px;flex-shrink:0}
.d-r{background:var(--red)}.d-g{background:var(--green)}.d-gold{background:var(--gold)}.d-blue{background:var(--blue)}
.sec-sub{
  font-size:12.5px;color:var(--text3);font-weight:600;
  margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}

.countdown{
  font-family:'Press Start 2P',monospace;font-size:9px;color:var(--gold);
  background:var(--bg2);border:1px solid var(--border);
  padding:8px 11px;border-radius:3px;letter-spacing:1.5px;
}

/* "See all" — swapped from PS2P 5.5px to Nunito 800 11px, padded to 44 hit */
.see-all{
  font-family:'Nunito',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:11px;letter-spacing:1.5px;color:var(--green);
  padding:12px 6px;min-height:var(--touch);
  display:inline-flex;align-items:center;gap:6px;
  cursor:pointer;
}
.see-all:hover{color:var(--text)}

.row-wrap{position:relative}
/* overflow-x:auto makes overflow-y computed as auto too — without extra
   vertical padding, the .gc:hover -3px lift + drop-shadow get clipped. */
.game-row{
  display:flex;gap:12px;overflow-x:auto;padding:14px 2px 16px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.game-row::-webkit-scrollbar{height:6px}
.game-row::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

.row-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:var(--touch);height:64px;
  background:rgba(12,12,16,.88);
  border:1px solid var(--border);border-radius:4px;
  color:var(--text);
  display:none;align-items:center;justify-content:center;
  cursor:pointer;z-index:5;font-size:15px;
  transition:background .12s,border-color .12s,color .12s;
}
.row-arrow:hover{background:var(--bg3);border-color:var(--green);color:var(--green)}
.row-arrow.left{left:-8px}
.row-arrow.right{right:-8px}
.row-wrap:hover .row-arrow.show{display:flex}

/* =================================================================
   GAME CARD
   ================================================================= */
.gc{
  flex-shrink:0;width:172px;background:var(--bg2);
  border:1px solid var(--border);border-radius:8px;
  position:relative;overflow:hidden;
  transition:border-color .15s,transform .12s,box-shadow .15s;
  scroll-snap-align:start;display:block;
}
.gc:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.gc.lb-card{border-color:#2e2200}.gc.lb-card:hover{border-color:var(--gold)}
.gc.dc-card{border-color:#2a1800}.gc.dc-card:hover{border-color:var(--gold)}
.gc.ghost{border-style:dashed;border-color:var(--border)!important;opacity:.35;pointer-events:none}

.gc-thumb{
  height:104px;display:flex;align-items:center;justify-content:center;
  font-size:42px;border-bottom:1px solid var(--border);position:relative;
}
/* When a real thumbnail image is dropped into /assets/thumbs/<slug>.* it
   fills the whole thumb area edge-to-edge, on top of the .bg-* colour
   class which remains as a load-state placeholder. */
.gc-thumb.has-img{padding:0}
.gc-thumb .gc-art{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
}
.gc-emoji{position:relative;z-index:1}
.bg-green{background:#060e06}
.bg-dark{background:#0e060e}
.bg-blue{background:#060614}
.bg-gray{background:#0d0d14}
.bg-warm{background:#120e00}
.bg-purple{background:#0e0618}

/* 44x44 hit area, visible star smaller */
.gc-fav{
  position:absolute;top:0;right:0;
  width:var(--touch);height:var(--touch);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--text3);z-index:3;line-height:1;
  background:transparent;
  transition:color .1s,transform .1s;
}
.gc-fav:hover{transform:scale(1.1);color:var(--gold)}
.gc-fav.on{color:var(--gold)}

.gc-badge{position:absolute;bottom:7px;left:7px;z-index:2}
/* Card badges sit on a dark thumb — make tag smaller variant for cards */
.gc-badge.tag{font-size:9px;padding:5px 7px;letter-spacing:.8px}

/* Rank — swapped from PS2P 5px to Nunito 800 11px */
.gc-rank{
  position:absolute;top:7px;left:7px;z-index:2;
  font-family:'Nunito',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:11px;letter-spacing:.8px;
  background:rgba(0,0,0,.85);color:var(--gold);
  padding:4px 8px;border:1px solid var(--gold2);border-radius:2px;
  display:inline-flex;align-items:center;gap:3px;
}

.gc-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s;pointer-events:none;
}
.gc:hover .gc-overlay{opacity:1}
.gc-overlay span{
  /* bumped from PS2P 7px to PS2P 8px (compliant) */
  font-family:'Press Start 2P',monospace;font-size:8px;color:var(--green);
  border:2px solid var(--green);padding:8px 14px;
  background:rgba(0,0,0,.7);border-radius:3px;letter-spacing:1.2px;
}

.gc-body{padding:11px 12px 13px}
.gc-name{
  /* bumped from PS2P 6px to PS2P 8px (compliant) */
  font-family:'Press Start 2P',monospace;font-size:8px;color:var(--text);
  margin-bottom:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.6;letter-spacing:.6px;
}
.gc-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gc-cat,.gc-stat{
  font-size:12.5px;color:var(--text2);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gc-stat.g{color:var(--green)}.gc-stat.gold{color:var(--gold)}

/* =================================================================
   FAQ
   ================================================================= */
.faq{
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:24px 26px;display:flex;flex-direction:column;gap:6px;
}
.faq h2{
  font-family:'Press Start 2P',monospace;font-size:11px;color:var(--green);
  margin-bottom:10px;letter-spacing:1.2px;
}
.faq details{border-bottom:1px solid var(--border);padding:6px 0}
.faq details:last-child{border-bottom:0}
.faq summary{
  font-weight:700;font-size:15px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;color:var(--text);
  min-height:var(--touch);padding:10px 0;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green);font-size:20px;font-weight:700;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--text2);font-size:14px;line-height:1.75;padding:4px 0 14px}

/* =================================================================
   FOOTER
   ================================================================= */
#footer{
  /* Sits beside #main, never under the sidebar strip */
  margin-left:var(--sb-icon);
  border-top:1px solid var(--border);background:var(--bg2);
  padding:22px 24px;
  display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;
}
#footer .f-logo{
  font-family:'Press Start 2P',monospace;font-size:11px;color:var(--green);
  letter-spacing:1.2px;line-height:1.5;
}
#footer .f-logo span{color:var(--text2)}
#footer .f-nav{display:flex;flex-wrap:wrap;gap:4px}
#footer .f-nav a{
  color:var(--text2);font-weight:700;font-size:13px;
  padding:12px 12px;min-height:var(--touch);
  display:inline-flex;align-items:center;
}
#footer .f-nav a:hover{color:var(--green)}

/* Social icons — separate block so they read as "find us elsewhere" */
#footer .f-socials{display:flex;gap:8px;flex-wrap:wrap}
#footer .f-soc{
  width:var(--touch);height:var(--touch);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg3);border:1px solid var(--border);border-radius:6px;
  color:var(--text);
  transition:border-color .12s,color .12s,background .12s,box-shadow .12s;
}
#footer .f-soc:hover{
  border-color:var(--green);color:var(--green);background:var(--bg4);
  box-shadow:0 0 0 1px var(--green2);
}
#footer .f-soc svg{width:20px;height:20px;fill:currentColor;display:block}
/* Per-platform brand colours on hover (subtle — keeps the green primary) */
#footer .f-soc-facebook:hover{color:#1877F2;border-color:#1877F2;box-shadow:0 0 0 1px #1877F2}
#footer .f-meta{
  /* swapped from PS2P 5.5px to Nunito 700 11px */
  font-family:'Nunito',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:11px;color:var(--text3);letter-spacing:1.2px;
}
#footer .f-meta .g{color:var(--green)}

/* =================================================================
   LISTING PAGE — /games/, /popular/, /category/<x>/, etc.
   Responsive auto-fill grid, cross-nav chips, in-grid MPU.
   ================================================================= */
#listing{
  padding:22px 24px 60px;
  max-width:1480px;margin:0 auto;
  display:flex;flex-direction:column;gap:22px;
}
.lp-hero{
  display:flex;flex-direction:column;gap:8px;
}
.lp-title{
  font-family:'Press Start 2P',monospace;font-size:18px;color:var(--green);
  letter-spacing:2px;line-height:1.4;
}
.lp-desc{font-size:14.5px;color:var(--text2);line-height:1.7;max-width:760px}
.lp-meta{
  display:flex;gap:14px;flex-wrap:wrap;margin-top:4px;
  font-size:12px;color:var(--text3);font-weight:700;
}
.lp-meta i{margin-right:5px;color:var(--green)}

/* Cross-nav chip strip — scrollable on narrow viewports */
.lp-chips{
  display:flex;gap:8px;flex-wrap:wrap;
}
.lp-chips .chip{
  min-height:var(--touch);padding:0 16px;
  display:inline-flex;align-items:center;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:12.5px;
  text-transform:uppercase;letter-spacing:1px;
  background:var(--bg2);border:1px solid var(--border);
  color:var(--text2);border-radius:22px;text-decoration:none;
  transition:border-color .12s,color .12s,background .12s;
}
.lp-chips .chip:hover{border-color:var(--green);color:var(--green)}
.lp-chips .chip.active{
  background:var(--green);color:#041204;border-color:var(--green2);
}

/* Responsive grid — auto-fill at min 168px, fills width */
.lp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
  gap:14px;
}
.lp-grid .gc{width:auto}
.lp-grid .gc-thumb{height:104px}
/* In-grid ad spans the full row */
.lp-grid .ad-slot.in-grid{
  grid-column:1 / -1;
  margin:6px 0;
}

.lp-empty{
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:36px 24px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
/* [hidden] attribute must beat the display:flex above. Without this, the
   empty state shows EVEN WHEN favs/recent has matching cards — contradicts
   the page itself. (Same bug pattern as HTB .handle had earlier.) */
.lp-empty[hidden]{display:none !important}
.lp-empty p{font-size:15px;color:var(--text2);font-weight:600}
.lp-empty-cta{
  font-family:'Press Start 2P',monospace;font-size:9px;
  background:var(--green);color:#041204;border:2px solid var(--green2);
  padding:14px 22px;border-radius:4px;letter-spacing:1.2px;
  text-decoration:none;min-height:var(--touch);
  display:inline-flex;align-items:center;gap:8px;
}
.lp-empty-cta:hover{background:var(--green2)}

@media(max-width:768px){
  #listing{padding:14px 14px 50px;gap:18px}
  .lp-title{font-size:14px}
  .lp-desc{font-size:13.5px}
  .lp-grid{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));gap:10px}
  .lp-grid .gc-thumb{height:92px;font-size:36px}
}

/* =================================================================
   GAME PAGE
   Locked: 16:9 canvas with same dimensions across every game page.
   Two-column on desktop (canvas + info | right rail), single on mobile.
   ================================================================= */
#game-page{
  padding:18px 22px 60px;
  max-width:1480px;
  margin:0 auto;
}
.gp-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:22px;
  align-items:start;
}
.gp-left{min-width:0;display:flex;flex-direction:column;gap:20px}

/* Canvas — sizes from TWO caps + aspect-ratio:
     1) Column width (so it never overflows the layout horizontally).
     2) max-height = min(720px, viewport - topbar) — ceiling so big games
        don't dominate the page on ultrawide screens, AND clamp on
        landscape phones so the canvas fits the visible viewport.

   Trick: browsers won't auto-shrink an explicit `width:100%` to maintain
   aspect-ratio when max-height kicks in (Chromium just clips height,
   ignoring aspect). So we compute width directly from max-height ×
   aspect, then clamp to column width via min(100%, ...). Then
   aspect-ratio derives the height. Inline `--aspect-w` / `--aspect-h`
   custom properties come from inc/games.php `canvas_aspect` field. */
.game-canvas{
  --aspect-w:16;
  --aspect-h:9;
  --max-h:min(720px, calc(100svh - var(--top-h) - 16px));
  position:relative;
  width:min(100%, calc(var(--max-h) * var(--aspect-w) / var(--aspect-h)));
  aspect-ratio:var(--aspect-w) / var(--aspect-h);
  background:#050a05;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  flex-shrink:0;
  /* Centre when max-height kicks in (landscape, or wide desktop) — the
     column letterboxes evenly either side of the now-narrower canvas. */
  margin-left:auto;margin-right:auto;
}
/* Older browsers that don't grok svh use the legacy vh as a fallback */
@supports not (height:100svh){
  .game-canvas{--max-h:min(720px, calc(100vh - var(--top-h) - 16px))}
}
.canvas-stage{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:#020402;
}
.canvas-stage iframe{
  width:100%;height:100%;border:0;display:block;
  background:#020402;
}

/* Fullscreen handled natively (Poki/CrazyGames pattern). iPhone Safari
   doesn't support fullscreen on non-video elements at all (WebKit bug
   240312) so the button is hidden there via JS — no pseudo-fs fakery. */

/* Play overlay — covers canvas until user clicks PLAY */
.play-overlay{
  position:absolute;inset:0;z-index:5;
  /* Default fallback gradient (no splash image set). Inline style
     on the element overrides background-image with the splash. */
  background:radial-gradient(circle at 50% 50%, rgba(20,40,20,.35) 0%, rgba(0,0,0,.92) 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:18px;padding-bottom:8%;
  cursor:pointer;position:relative;
}
/* When a splash artwork backdrop is present, darken the lower
   portion so the PLAY button has contrast against any artwork. */
.play-overlay[style*="background-image"]::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,.45) 75%,
    rgba(0,0,0,.85) 100%);
}
.play-overlay > *{position:relative;z-index:1}
.play-overlay.hidden{display:none}
.play-overlay-art{
  font-size:96px;line-height:1;filter:drop-shadow(0 0 12px rgba(93,251,93,.4));
}
.play-overlay-title{
  font-family:'Press Start 2P',monospace;font-size:14px;color:var(--green);
  letter-spacing:1.5px;text-shadow:0 2px 0 #041204;
}
.play-overlay-btn{
  font-family:'Press Start 2P',monospace;font-size:14px;
  background:var(--green);color:#041204;border:3px solid var(--green2);
  padding:18px 32px;border-radius:6px;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;letter-spacing:1.5px;
  min-height:var(--touch);
  transition:transform .1s,background .15s;
  box-shadow:0 6px 0 var(--green2), 0 0 24px rgba(93,251,93,.4);
}
.play-overlay-btn:hover{background:var(--green2);transform:translateY(2px);box-shadow:0 4px 0 var(--green2)}
.play-overlay-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--green2)}

/* Pre-play interstitial scaffold */
.interstitial{
  position:absolute;inset:0;z-index:6;
  background:rgba(8,8,12,.96);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:18px;
}
.interstitial[hidden]{display:none}
.interstitial-label{
  font-family:'Nunito',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:11px;letter-spacing:1.5px;color:var(--text3);
}
.interstitial-frame{
  width:300px;height:250px;max-width:100%;max-height:60vh;
  background:#0a0a0e;border:1px dashed var(--border);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
}
.interstitial-frame::before{
  content:"AD";font-family:'Press Start 2P',monospace;font-size:12px;
  color:#1f1f2e;letter-spacing:2px;
}
.interstitial-skip{
  min-height:var(--touch);padding:0 18px;
  font-family:'Press Start 2P',monospace;font-size:9px;
  color:var(--text2);background:var(--bg3);border:1px solid var(--border);
  border-radius:4px;cursor:pointer;letter-spacing:1px;
}
.interstitial-skip:not(:disabled):hover{border-color:var(--green);color:var(--green)}
.interstitial-skip:disabled{opacity:.6;cursor:default}

/* =================================================================
   ACTION BAR — sits flush under the game canvas (CrazyGames pattern).
   Replaces the old canvas-chrome / ratings-bar / share-row stack.
   ================================================================= */
.action-bar{
  /* container-type drives container queries below for icon/count sizing. */
  container-type:inline-size;
  container-name:actionbar;
  display:flex;align-items:center;gap:14px;
  /* flex-wrap means tools wrap to a NEW LINE under meta when cramped — used
     to use overflow-x:auto (clipped the right edge) before. */
  flex-wrap:wrap;
  background:var(--bg2);border:1px solid var(--border);border-top:0;
  border-radius:0 0 8px 8px;
  padding:10px 12px;
  margin-top:-1px; /* sit flush against canvas border */
}
/* Canvas's bottom edge meets the bar — drop its bottom corner radius */
.gp-left .game-canvas{border-radius:8px 8px 0 0}

/* ab-meta groups the brand logo + game name. Only the BRAND is the
   clickable "home" link — the game name is plain text (clicking it
   shouldn't take you off the game page you're already on). */
.ab-meta{
  display:flex;align-items:center;gap:12px;flex:1 1 0;min-width:0;
}
.ab-brand{
  width:40px;height:40px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;overflow:hidden;
}
.ab-brand img{
  width:40px;height:40px;display:block;
  image-rendering:auto;
}
.ab-name{
  font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;color:var(--text);
  white-space:nowrap;overflow:hidden;
  letter-spacing:.2px;
  /* No ellipsis — when there isn't room, the name is removed cleanly
     via the media query below rather than being chopped mid-word. */
}

.ab-tools{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;
}
.ab-tools::-webkit-scrollbar{display:none}
/* If the bar fits with room to spare, drop the fade hint (no need). */
@container actionbar (min-width: 700px){
  .ab-tools{-webkit-mask-image:none;mask-image:none}
}

/* Pixel-retro buttons — sharp 4px corners (not CrazyGames pill style),
   double-edge border lift, brighter icon default, green glow on hover. */
.ab-btn{
  min-height:var(--touch);min-width:var(--touch);padding:0 13px;
  background:var(--bg3);
  border:1px solid var(--border);border-bottom-width:2px;
  border-radius:4px;
  color:var(--text);  /* brighter default than CrazyGames' grey */
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;
  transition:border-color .12s,color .12s,background .12s,box-shadow .12s,transform .08s;
  flex-shrink:0;position:relative;
}
/* :hover only on devices that actually hover (mouse). On mobile the tap
   triggers :hover which then STICKS until the user taps elsewhere — looks
   like a glitch (button stays "lit up" after click). hover:hover gates it. */
@media (hover: hover){
  .ab-btn:hover{
    border-color:var(--green);color:var(--green);
    background:var(--bg4);
    box-shadow:0 0 0 1px var(--green2), 0 6px 16px rgba(93,251,93,.15);
  }
}
.ab-btn:active{transform:translateY(1px);border-bottom-width:1px}
.ab-btn:focus{outline:none}
.ab-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* SVG icons — Tabler-style stroke icons. Uniform 2px stroke + round
   caps + currentColor inherit. Filled icons (e.g. brand glyphs) declare
   their own fill via path attributes — see #i-facebook. */
.ab-ico{
  /* Lock both axes — SVG flex children otherwise get squashed by some
     UA flex algorithms (Chromium will compress an SVG's width below its
     declared CSS width if the parent flex container is at all crowded). */
  width:26px;height:26px;
  min-width:26px;min-height:26px;
  display:block;flex-shrink:0;flex:0 0 26px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ab-btn .ab-count{font-size:13px;color:var(--text);font-weight:800;letter-spacing:.3px}
@media (hover: hover){
  .ab-btn:hover .ab-count{color:var(--green)}
}

/* Active states — each button has its own brand colour to telegraph state */
.ab-btn[aria-pressed="true"]{background:var(--bg4)}
.ab-btn.ab-up[aria-pressed="true"]   {color:var(--green);border-color:var(--green2);box-shadow:0 0 0 1px var(--green2)}
.ab-btn.ab-up[aria-pressed="true"] .ab-count{color:var(--green)}
.ab-btn.ab-down[aria-pressed="true"] {color:var(--red);border-color:#5a1515;box-shadow:0 0 0 1px #5a1515}
.ab-btn.ab-fav[aria-pressed="true"]  {color:var(--gold);border-color:var(--gold2);box-shadow:0 0 0 1px var(--gold2)}
@media (hover: hover){
  .ab-btn.ab-report:hover{border-color:var(--red);color:var(--red);box-shadow:0 0 0 1px #5a1515, 0 6px 16px rgba(255,68,68,.15)}
}

/* Sound icon swap (on/off) */
.ab-ico-sound-off{display:none}
.ab-btn.ab-sound:not(.on) .ab-ico-sound-on {display:none}
.ab-btn.ab-sound:not(.on) .ab-ico-sound-off{display:block;color:var(--text3)}

/* Action-bar progressive shrink. The bar must always fit its row of
   buttons + the brand logo. Game name disappears first; then buttons
   tighten; then the like-count hides; then the icons shrink.
   These container queries sit AFTER the base .ab-btn / .ab-ico rules
   so they win the cascade at narrow widths. */

/* Below 1000px of bar width: hide game name + slightly tighten buttons.
   Reality check: typical game-page bar at 1280 viewport = ~880px wide
   (sidebar 52 + right rail 280 + padding/gap eats ~70). So the name is
   only ever shown on truly wide screens (1100+ bar = ultrawide / no
   right rail context). Keeping the name space-free is the price for
   never showing a half-word truncation. */
@container actionbar (max-width: 1000px){
  .ab-name{display:none}
  .ab-tools{gap:5px}
  .ab-btn{padding:0 10px;gap:7px}
}

/* Below 580px: tighten button padding, reduce gap. */
@container actionbar (max-width: 580px){
  .ab-tools{gap:4px}
  .ab-btn{padding:0 9px;gap:6px;min-width:42px}
  .ab-ico{width:23px;height:23px;min-width:23px;min-height:23px;flex-basis:23px}
}

/* Below 460px: tools wrap to a NEW LINE below meta and centre across
   the full bar width. Meta keeps its own row at the top, centered. */
@container actionbar (max-width: 460px){
  .action-bar{gap:8px;padding:8px}
  .ab-meta{flex:1 1 100%;justify-content:center;gap:8px;padding:0}
  .ab-name{white-space:normal;text-align:center}
  .ab-tools{flex:1 1 100%;justify-content:center;gap:6px;width:100%}
  .ab-btn{padding:0 9px;min-width:42px}
  .ab-btn .ab-count{display:none}
  .ab-ico{width:21px;height:21px;min-width:21px;min-height:21px;flex-basis:21px}
  .ab-brand{width:36px;height:36px}
  .ab-brand img{width:36px;height:36px}
}

/* Below 380px: tightest squares, still stacked + wrapping. */
@container actionbar (max-width: 380px){
  .action-bar{gap:6px;padding:6px}
  .ab-btn{padding:0;width:36px;min-width:36px;border-bottom-width:1px}
  .ab-ico{width:20px;height:20px;min-width:20px;min-height:20px;flex-basis:20px}
}

.rate-summary{
  font-size:12.5px;color:var(--text3);font-weight:600;
  margin-top:8px;text-align:center;min-height:18px;
}

/* =================================================================
   GAME-PAGE MODALS (action-bar driven)
   ================================================================= */
.gp-modal-scrim{
  position:fixed;inset:0;background:rgba(4,8,4,.78);z-index:600;
  backdrop-filter:blur(3px);
}
.gp-modal-scrim[hidden]{display:none}
.gp-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:601;width:min(440px, calc(100vw - 32px));max-height:calc(100vh - 48px);
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.7);
}
.gp-modal[hidden]{display:none}
.gp-mh{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--border);
}
.gp-mh h3{
  font-family:'Press Start 2P',monospace;font-size:11px;color:var(--green);
  letter-spacing:1.2px;line-height:1.5;
}
.gp-mx{
  width:var(--touch);height:var(--touch);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;line-height:1;color:var(--text2);cursor:pointer;
  background:transparent;border:0;
}
.gp-mx:hover{color:var(--green)}
.gp-mb{
  padding:18px 22px;overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;
  font-size:14px;color:var(--text2);line-height:1.7;
}
.gp-mb strong{color:var(--text)}

/* Controls list */
.controls-list{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px;margin:0}
.controls-list li{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--text2)}
.controls-list kbd{
  font-family:'Press Start 2P',monospace;font-size:9px;
  background:var(--bg3);border:1px solid var(--border);border-bottom-width:3px;
  padding:6px 10px;border-radius:4px;color:var(--text);
  min-width:48px;text-align:center;flex-shrink:0;letter-spacing:.5px;
}
.ctrl-fallback{font-size:14px;color:var(--text2);line-height:1.7}

/* QR modal */
.gp-mb-qr{align-items:center;text-align:center}
.qr-box{
  width:240px;height:240px;background:#fff;border-radius:8px;padding:12px;
  display:flex;align-items:center;justify-content:center;
}
.qr-box img{width:100%;height:100%;display:block}
.qr-url{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  color:var(--text3);word-break:break-all;
  background:var(--bg3);border:1px solid var(--border);
  padding:8px 12px;border-radius:6px;
}

/* Share modal */
.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.share-tile{
  min-height:60px;padding:0 14px;
  background:var(--bg3);border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-family:'Nunito',sans-serif;font-weight:700;font-size:14px;
  display:flex;align-items:center;gap:12px;cursor:pointer;
  text-decoration:none;
  transition:border-color .12s,color .12s;
}
.share-tile i{font-size:20px;color:var(--green)}
.share-tile:hover{border-color:var(--green);color:var(--green)}
.share-tile.copied{border-color:var(--green);color:var(--green)}
.share-copy-label{font-size:14px}

/* Embed modal — wider than other modals to fit code comfortably */
.gp-modal.gp-modal-wide{width:min(640px, calc(100vw - 32px))}

/* Handle picker — 3x3 grid of generated handles, click one to set it.
   Pure curation (no typed input) keeps the COPPA-safe handle promise. */
.handle-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;
  margin:8px 0 4px;
}
.handle-tile{
  font-family:'Press Start 2P',monospace;font-size:9px;letter-spacing:.6px;
  background:var(--bg3);color:var(--text);
  border:1px solid var(--border);border-radius:6px;
  padding:14px 10px;cursor:pointer;
  min-height:var(--touch);
  display:flex;align-items:center;justify-content:center;
  text-align:center;line-height:1.5;
  transition:border-color .12s,color .12s,background .12s,transform .08s;
}
.handle-tile:hover{
  border-color:var(--green);color:var(--green);background:var(--bg4);
  box-shadow:0 0 0 1px var(--green2);
}
.handle-tile:active{transform:translateY(1px)}

.handle-row{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;
  margin-top:10px;
}
.handle-row .cf-submit, .handle-row .result-btn{margin:0;flex:0 0 auto}
.handle-foot{font-size:12px;color:var(--text3);font-weight:600;margin-top:6px;text-align:center}

@media(max-width:520px){
  .handle-grid{grid-template-columns:repeat(2, 1fr)}
  .handle-tile{font-size:8.5px;padding:12px 8px}
  .handle-row{flex-direction:column}
  .handle-row > *{width:100%;justify-content:center}
}
.embed-code{
  width:100%;min-height:120px;resize:vertical;
  background:#0a0a10;border:1px solid var(--border);border-radius:6px;
  color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;padding:14px 16px;outline:none;line-height:1.7;
  word-break:break-all;
}
.embed-code:focus{border-color:var(--green)}
.embed-copy{width:100%;justify-content:center}
.embed-copy.copied{background:var(--green2)}
.embed-perks{padding-left:20px;display:flex;flex-direction:column;gap:6px;margin:6px 0 4px}
.embed-perks li{font-size:13.5px;color:var(--text2);line-height:1.6}
.embed-perks li strong{color:var(--text)}
.embed-more{font-size:13px;text-align:center;margin-top:4px}
.embed-more a{color:var(--green);text-decoration:none;font-weight:800}
.embed-more a:hover{text-decoration:underline}

/* Report modal */
.report-cta{
  display:inline-flex;align-items:center;gap:10px;
  min-height:var(--touch);padding:0 18px;
  font-family:'Press Start 2P',monospace;font-size:9px;letter-spacing:1.2px;
  background:var(--green);color:#041204;border:2px solid var(--green2);border-radius:4px;
  text-decoration:none;
}
.report-cta:hover{background:var(--green2)}

/* Save code modal */
.save-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:8px}
.save-tab{
  flex:1;min-height:var(--touch);padding:0 12px;
  background:transparent;border:0;border-bottom:2px solid transparent;
  color:var(--text2);font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;
  text-transform:uppercase;letter-spacing:1px;cursor:pointer;
}
.save-tab.active{color:var(--green);border-bottom-color:var(--green)}
.save-pane{display:flex;flex-direction:column;gap:12px}
.save-pane[hidden]{display:none}
.save-textarea{
  width:100%;min-height:120px;resize:vertical;
  background:var(--bg3);border:1px solid var(--border);border-radius:6px;
  color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;padding:12px 14px;outline:none;line-height:1.6;
}
.save-textarea:focus{border-color:var(--green)}
.save-status{font-size:13px;font-weight:700;min-height:18px}
.save-status.ok{color:var(--green)}
.save-status.err{color:var(--red)}
.cf-submit.secondary{background:var(--bg3);color:var(--text);border-color:var(--border)}
.cf-submit.secondary:hover{border-color:var(--green);color:var(--green);background:var(--bg3)}

/* Game info block */
.game-info{display:flex;flex-direction:column;gap:18px}
.breadcrumb{font-size:12px;color:var(--text3);font-weight:600;min-height:var(--touch);display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.breadcrumb a{color:var(--text2)}
.breadcrumb a:hover{color:var(--green)}
.breadcrumb .here{color:var(--green)}
.gi-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.gi-title{font-family:'Press Start 2P',monospace;font-size:16px;color:var(--green);letter-spacing:1px;line-height:1.5}

/* Meta table */
.gi-meta-table{
  display:grid;grid-template-columns:auto 1fr;gap:8px 18px;
  font-size:13px;background:var(--bg2);border:1px solid var(--border);
  border-radius:8px;padding:14px 18px;
}
.gi-meta-table dt{color:var(--text3);font-weight:700;white-space:nowrap}
.gi-meta-table dd{color:var(--text);font-weight:600}
.gi-meta-table dd a{color:var(--green)}
.gi-meta-table dd .muted{color:var(--text3);font-size:12px}

/* External-credit attribution line (shown beneath meta table for games
   imported from elsewhere — Scratch, TurboWarp, etc.). */
.gi-credit{
  font-size:12.5px;color:var(--text3);font-weight:600;
  background:var(--bg2);border:1px solid var(--border);border-radius:6px;
  padding:10px 14px;display:flex;align-items:center;gap:8px;
}
.gi-credit i{color:var(--green)}
.gi-credit a{color:var(--green);font-weight:700;text-decoration:none}
.gi-credit a:hover{text-decoration:underline}

/* Per-game rich content (e.g. fun-clicker-scratch shop guide / endings tables) */
.gi-article table.guide-table{
  width:100%;border-collapse:collapse;
  background:var(--bg3);border:1px solid var(--border);border-radius:6px;
  overflow:hidden;font-size:13px;
}
.gi-article table.guide-table th,
.gi-article table.guide-table td{
  padding:9px 12px;border-bottom:1px solid var(--border);text-align:left;
}
.gi-article table.guide-table th{
  background:var(--bg2);color:var(--text);font-weight:800;
  font-size:11px;letter-spacing:1px;text-transform:uppercase;
}
.gi-article table.guide-table tr:last-child td{border-bottom:0}
.gi-article table.guide-table td{color:var(--text2)}
.gi-article table.guide-table td strong{color:var(--text)}

.gi-article .ending-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:8px;
  padding:14px 18px;display:flex;flex-direction:column;gap:8px;margin:10px 0;
}
.gi-article .ending-card h4{
  font-family:'Press Start 2P',monospace;font-size:10px;color:var(--gold);
  letter-spacing:1px;line-height:1.5;
}
.gi-article .ending-card .ending-meta{
  display:flex;flex-wrap:wrap;gap:14px;
  font-size:11.5px;color:var(--text3);font-weight:700;
}
.gi-article .ending-card .ending-meta strong{color:var(--text)}
.gi-article .ending-card p{font-size:13.5px}

.gi-article details.faq-q{
  border:1px solid var(--border);border-radius:6px;
  margin:6px 0;background:var(--bg3);overflow:hidden;
}
.gi-article details.faq-q summary{
  font-weight:700;font-size:14.5px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;color:var(--text);
  min-height:var(--touch);padding:0 16px;
}
.gi-article details.faq-q summary::-webkit-details-marker{display:none}
.gi-article details.faq-q summary::after{content:"+";color:var(--green);font-size:20px;font-weight:700;line-height:1}
.gi-article details.faq-q[open] summary::after{content:"−"}
.gi-article details.faq-q p{padding:0 16px 16px;color:var(--text2);font-size:14px;line-height:1.75}

/* Tag chips */
.gi-tags{display:flex;flex-wrap:wrap;gap:8px}
.gi-tag{
  min-height:var(--touch);padding:0 14px;
  font-size:12.5px;font-weight:700;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:20px;color:var(--text2);
  display:inline-flex;align-items:center;
  transition:border-color .12s,color .12s;text-decoration:none;
}
.gi-tag:hover{border-color:var(--green);color:var(--green)}

/* Article */
.gi-article{
  background:var(--bg2);border:1px solid var(--border);border-radius:8px;
  padding:22px 24px;display:flex;flex-direction:column;gap:14px;
}
.gi-article h2{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--green);letter-spacing:1px;line-height:1.6}
.gi-article h3{font-size:16px;font-weight:800;color:var(--text);margin-top:6px}
.gi-article p{font-size:14px;color:var(--text2);line-height:1.8}
.gi-article p strong{color:var(--text)}
.gi-article ul{padding-left:20px;display:flex;flex-direction:column;gap:8px}
.gi-article li{font-size:14px;color:var(--text2);line-height:1.7}

/* Top scores */
.top-scores{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.top-scores li{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;
  font-size:13px;color:var(--text2);
}
.top-scores li.ts-empty{justify-content:center;color:var(--text3);font-style:italic;font-weight:600}
.top-scores li .ts-rank{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--gold);width:36px}
.top-scores li .ts-name{flex:1;font-weight:700;color:var(--text);margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-scores li .ts-score{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--green)}

/* More like this */
.more-like{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.more-like-title{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--text);letter-spacing:1.2px}
.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.more-grid .gc{width:auto}

/* Right rail */
.gp-right{position:relative}
.rr-sticky{
  position:sticky;top:calc(var(--top-h) + 14px);
  display:flex;flex-direction:column;gap:14px;
  max-height:calc(100vh - var(--top-h) - 28px);
}
.rr-hdr{
  font-family:'Press Start 2P',monospace;font-size:9px;color:var(--text);
  letter-spacing:1.2px;
  background:var(--bg2);border:1px solid var(--border);
  border-bottom:0;border-radius:8px 8px 0 0;
  padding:14px 14px 12px;
  display:flex;align-items:center;gap:8px;
}
.rr-games{
  flex:1;min-height:0;overflow-y:auto;
  background:var(--bg2);border:1px solid var(--border);border-radius:0 0 8px 8px;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.rr-games::-webkit-scrollbar{width:4px}
.rr-games::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

.rr-gc{
  display:grid;grid-template-columns:76px 1fr;
  border-bottom:1px solid var(--border);
  text-decoration:none;color:inherit;cursor:pointer;
  transition:background .1s;
  min-height:var(--touch);
}
.rr-gc:last-child{border-bottom:0}
.rr-gc:hover{background:var(--bg3)}
.rr-thumb{
  height:76px;display:flex;align-items:center;justify-content:center;
  font-size:30px;border-right:1px solid var(--border);position:relative;overflow:hidden;
}
.rr-thumb .rr-art{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
}
.rr-badge{
  position:absolute;top:4px;left:4px;
  font-size:8px;padding:3px 5px;letter-spacing:.5px;
}
.rr-info{padding:10px 12px;display:flex;flex-direction:column;justify-content:center;gap:3px}
.rr-name{
  font-family:'Press Start 2P',monospace;font-size:8px;color:var(--text);
  line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:.4px;
}
.rr-cat{font-size:11.5px;color:var(--text3);font-weight:700}
.rr-stat{font-size:11px;color:var(--green);font-weight:700}

.rr-ad-wrap{flex-shrink:0}

/* =================================================================
   404 PAGE — image-as-hero design.
   The image at /assets/brand/404.png already contains a "CLICK TO GO
   HOME" pixel button + the 404 title + speech bubble, so it IS the
   primary CTA. Whole image is wrapped in <a href="/"> so any click on
   it routes home. CSS adds a subtle hover lift + green glow to confirm
   interactivity without competing with the artwork.
   ================================================================= */
.page-404{
  max-width:980px;margin:0 auto;
  padding:40px 24px 60px;
  display:flex;flex-direction:column;gap:36px;align-items:center;
  text-align:center;
}

/* The hero — clickable image. No border, no card chrome; the artwork
   carries the whole composition on its own. Drop-shadow gives it a
   slight pixel-arcade lift off the dark page. */
.p404-hero{
  display:block;width:100%;max-width:780px;
  outline:none;
  transition:transform .18s ease, filter .18s ease;
  filter:drop-shadow(0 8px 24px rgba(93,251,93,.18))
         drop-shadow(0 2px 0 rgba(0,0,0,.5));
  cursor:pointer;
}
.p404-hero:hover{
  transform:translateY(-4px) scale(1.015);
  filter:drop-shadow(0 14px 36px rgba(93,251,93,.35))
         drop-shadow(0 4px 0 rgba(0,0,0,.6));
}
.p404-hero:active{transform:translateY(-1px) scale(1.01)}
.p404-hero:focus-visible{
  outline:3px solid var(--green);outline-offset:6px;border-radius:8px;
}
.p404-hero img{
  width:100%;height:auto;display:block;
  image-rendering:pixelated;  /* keep pixel-art crisp at any scale */
}

/* "Or try one of these" suggestion block — secondary, smaller scale
   than the hero so it doesn't compete. */
.p404-suggest{
  display:flex;flex-direction:column;gap:14px;align-items:center;
  width:100%;max-width:720px;
  padding-top:18px;border-top:1px solid var(--border);
}
.p404-suggest h2{
  font-family:'Press Start 2P',monospace;font-size:10px;color:var(--text2);
  letter-spacing:1.8px;line-height:1.5;
}
.p404-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:12px;width:100%;
}
.p404-card{
  display:flex;align-items:center;gap:12px;
  background:var(--bg2);border:1px solid var(--border);border-radius:8px;
  padding:10px 12px;text-decoration:none;
  transition:border-color .12s,background .12s,transform .12s;
}
.p404-card:hover{border-color:var(--green);background:var(--bg3);transform:translateY(-2px)}
.p404-thumb{
  width:48px;height:48px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;flex-shrink:0;overflow:hidden;position:relative;
}
.p404-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p404-card-body{display:flex;flex-direction:column;gap:3px;min-width:0;text-align:left;flex:1}
.p404-card-name{
  font-family:'Press Start 2P',monospace;font-size:8px;color:var(--text);
  letter-spacing:.4px;line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.p404-card-cat{font-size:11.5px;color:var(--text3);font-weight:700}
.p404-foot{font-size:13px;margin-top:4px}
.p404-foot a{color:var(--green);text-decoration:none;font-weight:800}
.p404-foot a:hover{text-decoration:underline}

@media(max-width:768px){
  .page-404{padding:24px 14px 50px;gap:24px}
  .p404-grid{grid-template-columns:1fr}
}

/* =================================================================
   SYSTEM PAGES — about, privacy, terms, contact.
   Long-form readable layout, no horizontal scroll.
   ================================================================= */
.system-page{
  max-width:880px;margin:0 auto;
  padding:24px 24px 60px;
  display:flex;flex-direction:column;gap:22px;
}
.sp-hero{
  display:flex;flex-direction:column;gap:8px;
  border-bottom:1px solid var(--border);padding-bottom:18px;
}
.sp-title{
  font-family:'Press Start 2P',monospace;
  font-size:18px;color:var(--green);
  letter-spacing:2px;line-height:1.4;
}
.sp-lede{font-size:15px;color:var(--text2);line-height:1.7;max-width:680px}
.sp-meta{font-size:12.5px;color:var(--text3);font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.sp-article{
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:28px 32px;
  display:flex;flex-direction:column;gap:14px;
}
.sp-article h2{
  font-family:'Press Start 2P',monospace;
  font-size:11px;color:var(--green);letter-spacing:1.2px;
  margin-top:12px;line-height:1.7;
}
.sp-article h2:first-of-type{margin-top:0}
.sp-article h3{font-size:15px;font-weight:800;color:var(--text);margin-top:8px}
.sp-article p{font-size:14.5px;color:var(--text2);line-height:1.8}
.sp-article p a, .sp-article li a{color:var(--green);text-decoration:none;font-weight:700}
.sp-article p a:hover, .sp-article li a:hover{text-decoration:underline}
.sp-article ul, .sp-article ol{padding-left:22px;display:flex;flex-direction:column;gap:8px;margin:4px 0}
.sp-article li{font-size:14.5px;color:var(--text2);line-height:1.7}
.sp-article strong{color:var(--text)}
.sp-article code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;background:var(--bg3);border:1px solid var(--border);
  border-radius:4px;padding:1px 6px;color:var(--text);
}
.sp-summary{
  background:var(--bg3);border:1px solid var(--border);border-left:3px solid var(--green);
  border-radius:6px;padding:14px 18px;font-size:14px;color:var(--text2);line-height:1.75;
}
.sp-summary strong{color:var(--text)}
.sp-thanks{
  font-size:14px;color:var(--text3);text-align:center;
  padding-top:18px;border-top:1px solid var(--border);margin-top:10px;
  font-style:italic;
}

/* Contact — prominent email channel block above the form (AdSense
   trust signal: visible, human-reachable address) */
.contact-channel{
  background:linear-gradient(180deg, var(--bg3) 0%, var(--bg2) 100%);
  border:1px solid var(--green2);border-radius:10px;
  padding:18px 22px;display:flex;flex-direction:column;gap:10px;
}
.cc-email{display:flex;flex-direction:column;gap:4px}
.cc-label{
  font-family:'Nunito',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:11px;letter-spacing:1.5px;color:var(--text3);
}
.cc-addr{
  font-family:'Press Start 2P',monospace;font-size:11px;color:var(--green);
  letter-spacing:1px;line-height:1.6;
  text-decoration:none;word-break:break-all;
}
.cc-addr:hover{color:var(--green2);text-decoration:underline}
.cc-meta{
  display:flex;gap:18px;flex-wrap:wrap;
  font-size:12.5px;color:var(--text3);font-weight:700;
}
.cc-meta i{color:var(--green);margin-right:5px}

/* Contact form */
.contact-form-wrap{margin-top:18px}
.contact-form{display:flex;flex-direction:column;gap:14px}
.cf-row{display:flex;flex-direction:column;gap:6px}
.cf-label{
  font-size:13px;font-weight:800;color:var(--text);
  text-transform:uppercase;letter-spacing:1px;
}
.cf-label small{font-weight:600;color:var(--text3);letter-spacing:.5px;text-transform:none}
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form select,
.contact-form textarea{
  width:100%;
  background:var(--bg3);border:1px solid var(--border);border-radius:6px;
  color:var(--text);font-family:'Nunito',sans-serif;font-size:14.5px;font-weight:600;
  padding:12px 14px;outline:none;min-height:var(--touch);
  transition:border-color .15s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{border-color:var(--green)}
.contact-form textarea{resize:vertical;min-height:140px;font-family:'Nunito',sans-serif}
.cf-honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-actions{display:flex;align-items:center;gap:14px;margin-top:6px;flex-wrap:wrap}
.cf-submit{
  font-family:'Press Start 2P',monospace;font-size:9px;
  background:var(--green);color:#041204;border:2px solid var(--green2);
  padding:14px 22px;border-radius:4px;cursor:pointer;letter-spacing:1.2px;
  min-height:var(--touch);
  display:inline-flex;align-items:center;gap:10px;
  transition:background .15s,transform .1s;
}
.cf-submit:hover{background:var(--green2)}
.cf-submit:active{transform:translateY(1px)}
.cf-status{font-size:13px;font-weight:700}
.cf-status.sending{color:var(--text2)}
.cf-status.success{color:var(--green)}
.cf-status.error  {color:var(--red)}
.cf-fine{font-size:12px;color:var(--text3);font-weight:600;line-height:1.7}

@media(max-width:768px){
  .system-page{padding:14px 14px 50px;gap:16px}
  .sp-title{font-size:14px}
  .sp-article{padding:20px 18px}
  .sp-article h2{font-size:10px}
  .sp-article h3{font-size:14px}
}

/* =================================================================
   AD SLOTS
   Sizes per ad brief:
     .ad-lb   728x90 desktop / 320x50 mobile (leaderboard)
     .ad-mpu  300x250 (medium rectangle, all viewports)
     .ad-sticky pinned bottom, lb sized; collapsible via x
   "Advertisement" label sits above the frame (Google policy + UX).
   Frame min-height holds layout even before/without an ad load.
   ================================================================= */
.ad-slot{
  margin:0 auto;display:block;width:100%;text-align:center;
}
.ad-label{
  font-family:'Nunito',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:10px;letter-spacing:1.5px;color:var(--text3);
  margin-bottom:6px;line-height:1.4;
}
.ad-frame{
  margin:0 auto;
  background:#0a0a0e;border:1px dashed var(--border);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text3);font-size:12px;font-weight:600;
  overflow:hidden;
}
.ad-frame::before{
  content:"AD"; /* demo placeholder until AdSense is live */
  font-family:'Press Start 2P',monospace;font-size:10px;
  color:#1f1f2e;letter-spacing:2px;
}

/* Leaderboard 728x90 / 320x50 */
.ad-lb .ad-frame{width:728px;max-width:100%;height:90px}
/* MPU 300x250 */
.ad-mpu .ad-frame{width:300px;max-width:100%;height:250px}

/* Sticky bottom anchor */
.ad-sticky{
  position:fixed;left:50%;bottom:0;
  transform:translateX(-50%);
  z-index:350;
  width:auto;max-width:100vw;
  padding:6px 10px 8px;
  background:rgba(12,12,16,.94);
  border-top:1px solid var(--border);
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
  border-radius:6px 6px 0 0;
  backdrop-filter:blur(6px);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.ad-sticky.closed{display:none}
.ad-sticky .ad-label{margin-bottom:4px}
.ad-sticky .ad-frame{width:728px;max-width:calc(100vw - 24px);height:90px}

.ad-close{
  position:absolute;
  top:-2px;right:-2px;
  width:var(--touch);height:var(--touch);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;color:var(--text2);
  background:transparent;cursor:pointer;
}
.ad-close::before{
  content:"";
  position:absolute;width:28px;height:28px;border-radius:50%;
  background:rgba(12,12,16,.92);border:1px solid var(--border);
  z-index:-1;
}
.ad-close > *,.ad-close{
  /* keep × glyph centred over the circle */
}
.ad-close:hover{color:var(--green)}
.ad-close:hover::before{border-color:var(--green)}

/* Body padding so content never hides under the sticky bar */
body:has(.ad-sticky:not(.closed)){padding-bottom:110px}

/* =================================================================
   MOBILE
   ================================================================= */
#scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:450;display:none}
#scrim.show{display:block}

@media(max-width:768px){
  :root{--sb-icon:0px}
  /* Drawer slides in BELOW the topbar so the hamburger stays
     visible and clickable to toggle close. */
  #sidebar{width:0;top:var(--top-h)}
  #sidebar:hover{width:0;box-shadow:none}
  #sidebar.open{width:var(--sb-full);box-shadow:8px 0 32px rgba(0,0,0,.8)}
  /* Sidebar logo lockup is redundant with the topbar logo on mobile. */
  .sb-head{display:none}
  /* Scrim sits below the topbar so hamburger stays interactive. */
  #scrim{top:var(--top-h)}
  .t-ham{display:flex}
  #topbar{padding:0 10px;gap:8px}
  .t-logo{font-size:10px}
  .srch-wrap{margin-left:0}
  /* Favs/Recent are accessible via the sidebar drawer on mobile —
     hide the topbar shortcuts to give Search the full width. */
  .t-actions{display:none}

  .hero{grid-template-columns:1fr;min-height:0}
  .hero-art{height:180px;border-right:0;border-bottom:1px solid var(--border)}
  .hero-body{padding:20px}
  .hero-title{font-size:14px}
  .hero-desc{font-size:13.5px}
  .btn-play{font-size:9px;padding:13px 20px}

  #home{padding:14px 14px 50px;gap:24px}
  .gc{width:150px}
  .gc-thumb{height:88px;font-size:36px}
  .sb-head{padding:0 13px}
  #footer{padding:18px;flex-direction:column;text-align:center;align-items:center}

  /* Ad slots on mobile */
  .ad-lb .ad-frame{width:320px;height:50px}
  .ad-sticky .ad-frame{width:320px;max-width:calc(100vw - 24px);height:50px}
  body:has(.ad-sticky:not(.closed)){padding-bottom:78px}

  /* Game page — single column, right rail hidden */
  #game-page{padding:12px 12px 50px}
  .gp-layout{grid-template-columns:1fr;gap:16px}
  .gp-right{display:none}
  /* Mobile canvas: aspect-ratio is now driven inline per-game (no forced
     viewport stretch). The CSS just lets the inline style win. */
  .canvas-stage{inset:0}
  .play-overlay{inset:0;gap:14px}
  .play-overlay-art{font-size:72px}
  .play-overlay-title{font-size:11px}
  .play-overlay-btn{font-size:12px;padding:14px 22px}
  .interstitial{inset:0}
  .more-grid{grid-template-columns:repeat(2,1fr)}
  .gi-title{font-size:13px}
  .gi-article{padding:18px}
  .gi-article h2{font-size:10px}
  .gi-article h3{font-size:14px}

  /* Action bar mobile: keep the brand logo, hide the game name entirely
     (no ellipsis-truncated half-word). Tighter padding, buttons scroll
     horizontally if needed, share modal goes single-column. */
  .action-bar{padding:8px 8px;gap:8px}
  .ab-meta{flex:0 0 auto;min-width:0}
  .ab-name{display:none}
  .ab-brand{width:36px;height:36px}
  .ab-brand img{width:36px;height:36px}
  .ab-btn{padding:0 10px;font-size:12px}
  .ab-btn .ab-count{font-size:12px}
  .share-grid{grid-template-columns:1fr}
}