/*
Theme Name: Tablemela
Theme URI: https://tablemela.com/
Author: Zargham Labs LLC
Description: Marketing theme for tablemela.com. Game content is generated from data/games.json (the single source of truth). No third-party requests, no visitor cookies, no forms.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
License: Proprietary
Text Domain: tablemela
*/

@font-face{font-family:Bricolage;src:url(assets/fonts/BricolageGrotesque-VF.ttf) format("truetype");font-weight:200 800;font-display:swap}
@font-face{font-family:Manrope;src:url(assets/fonts/Manrope-VF.ttf) format("truetype");font-weight:200 800;font-display:swap}

:root{
  --tm-navy:#14213D;--tm-sky:#2563EB;--tm-ivory:#FFF7E8;--tm-gold:#C88400;--tm-text:#1C263D;
  --tm-muted:#56627A;--tm-border:#D6DDE7;--tm-felt:#006B5E;--tm-wood:#C78F52;--tm-gold-text:#8A5B00;
  --tm-radius-lg:22px;--tm-radius-md:14px;
  --tm-shadow-card:0 1px 2px rgba(20,33,61,.06),0 8px 24px rgba(20,33,61,.08);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tm-ivory);color:var(--tm-text);font:500 17px/1.65 Manrope,system-ui,sans-serif}
img{max-width:100%;height:auto}
a{color:var(--tm-sky)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--tm-sky);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--tm-navy);color:var(--tm-ivory);padding:10px 16px;border-radius:999px;font-weight:800}
.skip:focus{left:16px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.narrow{max-width:860px}

/* Header */
.site-header{background:var(--tm-ivory);border-bottom:1px solid var(--tm-border);position:sticky;top:0;z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.brand img{height:40px;width:auto;display:block}
.links{display:flex;gap:28px;align-items:center}
.links a{color:var(--tm-text);text-decoration:none;font-weight:700}
.links a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.menu-btn{display:none;border:2px solid var(--tm-navy);background:none;border-radius:999px;padding:8px 18px;font:800 15px Manrope,system-ui,sans-serif;color:var(--tm-navy);min-height:44px;cursor:pointer}
.sheet{display:none}
.sheet[data-open="true"]{display:block;position:fixed;inset:72px 0 0 0;background:var(--tm-ivory);z-index:19;padding:24px;overflow:auto}
.sheet ul{list-style:none;margin:0;padding:0}
.sheet li a{display:block;padding:14px 4px;font-size:20px;font-weight:800;color:var(--tm-navy);text-decoration:none;border-bottom:1px solid var(--tm-border)}
.sheet .btn{margin-top:20px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 22px;font-weight:800;text-decoration:none;font-size:16px;min-height:48px}
.btn-p{background:var(--tm-sky);color:#fff}
.btn-s{border:2px solid var(--tm-navy);color:var(--tm-navy)}
.band .btn-s{border-color:var(--tm-ivory);color:var(--tm-ivory)}

/* Type */
h1,h2{font-family:Bricolage,system-ui,sans-serif;color:var(--tm-navy);font-weight:750;letter-spacing:-.01em}
h1{font-size:clamp(2.5rem,5vw + 1rem,4.5rem);line-height:1.02;margin:12px 0 18px}
h2{font-size:clamp(1.75rem,2.5vw + 1rem,2.75rem);line-height:1.1;margin:0 0 12px}
h3{font-size:20px;line-height:1.3;margin:12px 0 6px;color:var(--tm-navy)}
.page-title{font-size:clamp(2.25rem,4vw + 1rem,3.75rem)}
.eyebrow{display:inline-block;background:var(--tm-navy);color:var(--tm-ivory);font-weight:800;font-size:13px;padding:6px 12px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}
.lead{font-size:19px;max-width:620px}
.small{font-size:14px;color:var(--tm-muted);font-weight:600}
.tag{color:var(--tm-muted);margin:0 0 12px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 10px}

/* Layout */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding:56px 0 64px}
.hero figure{margin:0}
.hero figure img{width:100%;border-radius:var(--tm-radius-lg);box-shadow:0 1px 2px rgba(20,33,61,.06),0 8px 24px rgba(20,33,61,.12);display:block}
.cap{font-size:12px;color:var(--tm-muted);margin-top:8px}
section{padding:56px 0}
.page-head{padding:40px 0 8px}
.alt{background:#fff;border-top:1px solid var(--tm-border);border-bottom:1px solid var(--tm-border)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--tm-border);border-radius:var(--tm-radius-lg);padding:22px;box-shadow:var(--tm-shadow-card)}
.alt .card{background:var(--tm-ivory)}
.card .ic{width:64px;height:64px}
.card h3 a{color:var(--tm-navy);text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.card .more{display:inline-block;margin-top:6px;font-weight:800}

/* Status + platform */
.badge{display:inline-block;font-size:13px;font-weight:800;padding:4px 12px;border-radius:999px}
.b-plan{background:var(--tm-navy);color:var(--tm-ivory)}
.b-con{background:#E9EDF3;color:var(--tm-text);border:1px solid var(--tm-border)}
.status-note{font-size:14px;color:var(--tm-muted);font-weight:600;margin-left:6px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.chip{font-size:13px;font-weight:700;color:var(--tm-muted);border:1.5px dashed var(--tm-muted);border-radius:999px;padding:4px 12px}

/* Game grid */
.grid10{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.grid10.three{grid-template-columns:repeat(3,1fr)}
.mini{background:#fff;border:1px solid var(--tm-border);border-radius:18px;padding:16px;text-decoration:none;color:var(--tm-text);display:block}
.alt .mini{background:var(--tm-ivory)}
.mini:hover{border-color:var(--tm-navy)}
.mini img{width:52px;height:52px}
.mini b{display:block;margin:8px 0 6px;font-size:15px;line-height:1.3;color:var(--tm-navy)}

/* Bands */
.band{background:var(--tm-navy);color:var(--tm-ivory)}
.band h2{color:var(--tm-ivory)}
.band li{margin:6px 0}

/* FAQ */
.faq details{background:#fff;border:1px solid var(--tm-border);border-radius:var(--tm-radius-md);padding:14px 18px;margin:10px 0}
.faq summary{font-weight:800;color:var(--tm-navy);cursor:pointer}
.faq details p{margin:10px 0 0}

/* Game page */
.crumb{font-size:14px;color:var(--tm-muted);margin:28px 0 0}
.crumb a{color:var(--tm-muted)}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumb li+li::before{content:"›";margin-right:6px}
.game-hero{padding-top:24px}
.game-hero .lockup{height:72px;width:auto}
.game-hero .tagline{margin-top:24px;font-size:30px}
.icon-card{text-align:center;padding:40px}
.icon-card img{width:240px;height:240px}

/* Roadmap */
.stages{display:grid;gap:20px}
.stage h2{font-size:clamp(1.4rem,1.5vw + 1rem,2rem)}

/* Prose (about, legal, editable content) */
.prose{max-width:760px}
.prose h2{margin-top:32px}
.prose ul{padding-left:22px}
.notice{background:#fff;border:1px solid var(--tm-border);border-left:6px solid var(--tm-gold);border-radius:var(--tm-radius-md);padding:18px 22px;max-width:760px}

/* Footer */
.site-footer{background:var(--tm-navy);color:var(--tm-ivory);padding:48px 0 32px;font-size:15px}
.site-footer a{color:var(--tm-ivory);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}
.site-footer h2{font-size:18px;margin:0 0 10px;color:var(--tm-ivory)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:6px 0}
.site-footer .flogo{height:40px;width:auto}
.legal-lines{border-top:1px solid #2A3B63;margin-top:28px;padding-top:18px;color:var(--tm-border);font-size:13.5px}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .grid3,.grid10.three{grid-template-columns:1fr}
  .grid10{grid-template-columns:repeat(2,1fr)}
  .fcols{grid-template-columns:1fr 1fr}
  .links a{display:none}
  .menu-btn{display:inline-block}
  .icon-card img{width:160px;height:160px}
}
@media (max-width:420px){.wrap{padding:0 16px}.fcols{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}