/* ==========================================================================
   Pablo — shared marketing site styles
   Used by every page EXCEPT play.html (the game), which is self-contained.

   Type system: 'Press Start 2P' for headings/nav (matches the game's arcade
   identity), a clean system sans for body copy. The game itself uses VT323 for
   body text, but these pages carry long-form prose — rules, policies, FAQs —
   where a pixel font gets tiring to read and hurts both accessibility and how
   search engines' readability heuristics score the page.
   ========================================================================== */

:root{
  /* "Sidi Bou Said" — the same palette and type the game uses, so the site and
     the app read as one product. Token names match play.html deliberately. */
  --felt:#17423c; --felt-dark:#0e1b22; --gold:#d8a648; --gold-dark:#9a6f26;
  --ui-bg:#132630; --ui-border:#2f5560;
  --text-main:#efe3cf; --text-body:#cdd8d4; --text-dim:#8fa3a0;
  --card-bg:#f6ecd8; --suit-red:#b4553a;
  --brass:#d8a648; --brass-hi:#f0cd84; --brass-lo:#9a6f26;
  --plaster:#efe3cf; --cobalt:#2f6fa8; --cobalt-lo:#1d4a75;
  --terracotta:#b4553a; --verdigris:#4f9d8b;
  --ink-2:#132630; --ink-3:#1a323d;
  --max:1080px;
  --display:'Yeseva One', Georgia, serif;
  --pixel:'Press Start 2P', 'Courier New', monospace;
  --body:'Spectral', Georgia, serif;
  /* Zellige lattice — the octagram ground the game sits on */
  --zellige:
    repeating-linear-gradient(45deg,transparent 0 17px,rgba(216,166,72,.055) 17px 18px),
    repeating-linear-gradient(-45deg,transparent 0 17px,rgba(216,166,72,.055) 17px 18px),
    repeating-linear-gradient(0deg,transparent 0 24px,rgba(47,111,168,.05) 24px 25px),
    repeating-linear-gradient(90deg,transparent 0 24px,rgba(47,111,168,.05) 24px 25px);
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--felt-dark);
  color:var(--text-body);
  font-family:var(--body);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  /* Same subtle CRT grid the game uses, so the site and app feel like one product */
  background-image:var(--zellige);
  background-attachment:fixed;
}

img{max-width:100%;height:auto;}

/* ── Accessibility ─────────────────────────────────────────────────────── */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--gold);color:#000;padding:12px 20px;
  font-family:var(--pixel);font-size:10px;text-decoration:none;
}
.skip-link:focus{left:0;}

:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}

/* ── Header / nav ──────────────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(19,38,48,0.96);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--gold-dark);
  padding:calc(10px + env(safe-area-inset-top)) 0 10px;
}
.nav-inner{
  max-width:var(--max);margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:20px;
}
.brand{
  font-family:var(--display);font-size:23px;color:var(--plaster);
  text-shadow:0 2px 0 rgba(0,0,0,.5);letter-spacing:.5px;
  text-decoration:none;white-space:nowrap;flex-shrink:0;
}
.brand:hover{color:var(--brass-hi);}

.nav-links{
  display:flex;gap:22px;align-items:center;
  margin-left:auto;list-style:none;
}
.nav-links a{
  color:var(--text-dim);text-decoration:none;
  font-size:15px;font-weight:600;letter-spacing:.4px;
  padding:4px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
.nav-links a:hover{color:var(--text-main);}
.nav-links a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold);}

/* The corner login/play pair — always visible, on every page, at every width */
.nav-cta{display:flex;gap:8px;align-items:center;flex-shrink:0;margin-left:20px;}
.nav-links + .nav-cta{margin-left:20px;}

/* Sign In lives in the CTA pair on desktop; on narrow screens it moves into the
   collapsed menu instead (see the 620px breakpoint) so the brand, the primary
   CTA and the hamburger all fit on one row. */
.nav-signin-item{display:none;}

/* Mobile menu toggle (hidden on desktop) */
.nav-toggle{
  display:none;background:transparent;border:2px solid var(--ui-border);
  color:var(--gold);font-family:var(--pixel);font-size:11px;
  padding:8px 10px;cursor:pointer;line-height:1;
}
.nav-toggle:hover{border-color:var(--gold-dark);}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-block;font-family:var(--pixel);font-size:10px;
  padding:12px 18px;text-decoration:none;cursor:pointer;
  border:2px solid var(--ui-border);background:var(--ui-bg);color:var(--text-main);
  letter-spacing:1px;line-height:1.4;transition:transform .08s, background .15s, color .15s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-gold{background:linear-gradient(180deg,var(--brass),var(--brass-lo));border-color:var(--brass-hi);color:#2a1c05;box-shadow:0 3px 0 #6d4d18;}
.btn-gold:hover{filter:brightness(1.08);}
.btn-ghost{background:transparent;border-color:var(--ui-border);color:var(--text-dim);}
.btn-ghost:hover{color:var(--gold);border-color:var(--gold-dark);}
.btn-sm{font-size:8px;padding:9px 12px;}
.btn-lg{font-size:12px;padding:16px 26px;}

/* ── Layout primitives ─────────────────────────────────────────────────── */
main{display:block;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px;}
.narrow{max-width:760px;}
section{padding:64px 0;}
section.tight{padding:40px 0;}

.section-title{
  font-family:var(--display);font-size:34px;color:var(--plaster);
  text-shadow:0 2px 0 rgba(0,0,0,.5);letter-spacing:.5px;
  line-height:1.15;margin-bottom:14px;
}
.section-sub{color:var(--text-dim);font-size:18px;margin-bottom:36px;max-width:62ch;}

h1,h2,h3,h4{color:var(--text-main);line-height:1.4;}
h2{font-family:var(--display);font-size:29px;color:var(--plaster);letter-spacing:.5px;
   line-height:1.2;margin:44px 0 14px;text-shadow:0 2px 0 rgba(0,0,0,.5);}
h3{font-family:var(--pixel);font-size:10px;color:var(--brass);letter-spacing:1.5px;
   line-height:1.9;margin:30px 0 10px;}
h4{font-size:18px;color:var(--gold);margin:22px 0 8px;}
p{margin-bottom:18px;}
a{color:var(--gold);}
a:hover{color:var(--brass-hi);}

ul,ol{margin:0 0 20px 22px;}
li{margin-bottom:9px;}

strong{color:var(--text-main);}
code{
  font-family:'Courier New',monospace;background:var(--ui-bg);
  border:1px solid var(--ui-border);padding:1px 6px;font-size:15px;color:var(--gold);
}
hr{border:none;border-top:1px solid var(--ui-border);margin:36px 0;}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{
  padding:76px 0 64px;text-align:center;
  border-bottom:1px solid var(--ui-border);
  background:radial-gradient(ellipse at 50% 0%, rgba(47,111,168,.28), transparent 68%);
}
.hero-cards{font-size:52px;line-height:1;margin-bottom:18px;
  filter:drop-shadow(2px 4px 6px rgba(0,0,0,.7));letter-spacing:4px;}
.hero h1{
  font-family:var(--display);font-size:clamp(46px,8vw,78px);color:var(--plaster);
  text-shadow:0 4px 0 rgba(0,0,0,.5),0 0 34px rgba(216,166,72,.2);letter-spacing:2px;
  margin-bottom:12px;line-height:1.04;
}
.hero-tagline{
  font-size:15px;color:var(--text-dim);letter-spacing:5px;
  text-transform:uppercase;margin-bottom:26px;
}
.hero-lede{font-size:20px;max-width:60ch;margin:0 auto 34px;color:var(--text-body);}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:16px;}
.hero-note{font-size:15px;color:var(--text-dim);}

/* ── Page header (interior pages) ──────────────────────────────────────── */
.page-head{
  padding:56px 0 36px;border-bottom:1px solid var(--ui-border);
  background:radial-gradient(ellipse at 50% 0%, rgba(47,111,168,.2), transparent 70%);
}
.page-head h1{
  font-family:var(--display);font-size:clamp(32px,5vw,46px);color:var(--plaster);
  text-shadow:0 3px 0 rgba(0,0,0,.5);letter-spacing:.5px;
  line-height:1.12;margin-bottom:12px;
}
.page-head p{font-size:19px;color:var(--text-dim);max-width:64ch;margin-bottom:0;}
.updated{font-size:15px;color:var(--text-dim);margin-top:14px;font-style:italic;}

/* ── Cards / grids ─────────────────────────────────────────────────────── */
.grid{display:grid;gap:18px;}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}

.card{
  background:radial-gradient(110% 80% at 20% 0%,rgba(240,205,132,.05),transparent 60%),
             linear-gradient(170deg,var(--ink-3),var(--ink-2));
  border:1px solid rgba(216,166,72,.28);border-radius:3px;
  box-shadow:0 12px 26px rgba(0,0,0,.4),0 1px 0 rgba(240,205,132,.12) inset;
  padding:24px;transition:border-color .15s,transform .15s;
}
.card:hover{border-color:var(--brass);transform:translateY(-3px);}
.card .icon{font-size:32px;line-height:1;margin-bottom:12px;display:block;}
.card h3{font-family:var(--pixel);font-size:10px;color:var(--brass);margin:0 0 10px;letter-spacing:1.5px;line-height:1.9;}
.card p{font-size:16px;color:var(--text-dim);margin-bottom:0;}

/* Rule rows — mirrors the in-game rules panel */
.rule-item{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--ui-bg);border:2px solid var(--ui-border);
  border-left:4px solid var(--gold-dark);
  padding:16px 20px;margin-bottom:12px;
}
.rule-item .rule-key{
  font-family:var(--pixel);font-size:10px;color:var(--gold);
  letter-spacing:1px;line-height:1.7;min-width:132px;flex-shrink:0;
}
.rule-item .rule-txt{font-size:16px;color:var(--text-body);}
.rule-item .rule-txt p:last-child{margin-bottom:0;}

/* Card-value table */
.val-table{width:100%;border-collapse:collapse;margin-bottom:22px;font-size:16px;}
.val-table th,.val-table td{
  border:1px solid var(--ui-border);padding:11px 14px;text-align:left;
}
.val-table th{
  background:var(--ui-bg);color:var(--gold);font-family:var(--pixel);
  font-size:9px;letter-spacing:1px;line-height:1.8;font-weight:normal;
}
.val-table td{color:var(--text-body);}
.val-table tr:nth-child(even) td{background:rgba(255,255,255,.02);}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:22px;}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq-item{
  border:2px solid var(--ui-border);background:var(--ui-bg);margin-bottom:12px;
}
.faq-item summary{
  cursor:pointer;padding:18px 22px;font-size:18px;color:var(--text-main);
  font-weight:600;list-style:none;display:flex;align-items:center;gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{
  content:'▸';color:var(--gold);flex-shrink:0;transition:transform .15s;display:inline-block;
}
.faq-item[open] summary::before{transform:rotate(90deg);}
.faq-item summary:hover{color:var(--gold);}
.faq-answer{padding:0 22px 20px 46px;color:var(--text-body);font-size:16px;}
.faq-answer p:last-child,.faq-answer ul:last-child{margin-bottom:0;}

/* ── Roadmap ───────────────────────────────────────────────────────────── */
.road-col{
  background:var(--ui-bg);border:2px solid var(--ui-border);padding:22px;
}
.road-col.now{border-color:var(--gold-dark);}
.road-label{
  font-family:var(--pixel);font-size:11px;letter-spacing:2px;
  margin-bottom:6px;line-height:1.7;
}
.road-col.now .road-label{color:var(--gold);}
.road-col.next .road-label{color:#7ab8e8;}
.road-col.later .road-label{color:var(--text-dim);}
.road-caption{font-size:15px;color:var(--text-dim);margin-bottom:18px;}
.road-list{list-style:none;margin:0;}
.road-list li{
  padding:12px 0;border-top:1px solid var(--ui-border);
  font-size:16px;color:var(--text-body);margin:0;
}
.road-list li:first-child{border-top:none;}
.road-list li strong{display:block;color:var(--text-main);margin-bottom:3px;}
.road-list li span{font-size:15px;color:var(--text-dim);}
.ship-item{
  display:flex;gap:12px;align-items:flex-start;padding:12px 0;
  border-top:1px solid var(--ui-border);font-size:16px;
}
.ship-item:first-child{border-top:none;}
.ship-item .tick{color:var(--gold);flex-shrink:0;}

/* ── Callouts ──────────────────────────────────────────────────────────── */
.callout{
  background:linear-gradient(135deg,rgba(216,166,72,.09),rgba(216,166,72,.03));
  border:2px solid var(--gold-dark);border-left-width:5px;
  padding:20px 24px;margin:26px 0;
}
.callout p:last-child{margin-bottom:0;}
.callout .callout-title{
  font-family:var(--pixel);font-size:10px;color:var(--gold);
  letter-spacing:1px;margin-bottom:10px;line-height:1.7;
}

/* ── CTA band ──────────────────────────────────────────────────────────── */
.cta-band{
  text-align:center;padding:60px 20px;margin-top:20px;
  background:linear-gradient(135deg,rgba(216,166,72,.08),rgba(216,166,72,.02));
  border-top:2px solid var(--gold-dark);border-bottom:2px solid var(--gold-dark);
}
.cta-band h2{margin-top:0;font-size:18px;}
.cta-band p{color:var(--text-dim);max-width:52ch;margin:0 auto 26px;}

/* ── Forms (contact) ───────────────────────────────────────────────────── */
.field{margin-bottom:20px;}
.field label{
  display:block;font-family:var(--pixel);font-size:9px;color:var(--gold);
  letter-spacing:1px;margin-bottom:9px;line-height:1.7;
}
.field .hint{font-size:14px;color:var(--text-dim);margin-top:7px;}
.field input,.field textarea,.field select{
  width:100%;background:var(--felt-dark);border:2px solid var(--ui-border);
  color:var(--text-main);font-family:var(--body);font-size:16px;
  padding:13px 15px;outline:none;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold-dark);}
.field textarea{resize:vertical;min-height:170px;line-height:1.65;}
.form-msg{padding:15px 18px;margin-bottom:20px;font-size:16px;display:none;}
.form-msg.err{background:rgba(180,85,58,.16);border:1px solid var(--terracotta);color:#e8ab97;}
.form-msg.ok{background:rgba(216,166,72,.12);border:1px solid var(--brass-lo);color:var(--brass-hi);}
/* Honeypot — bots fill it, humans never see it */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ── Ad slots ──────────────────────────────────────────────────────────── */
/* Reserved placements, dormant until AdSense approval. `.ad-slot` stays
   display:none so nothing renders (and no empty gap appears) until the
   `ads-live` class is added to <html> — see site.js. */
.ad-slot{display:none;margin:40px auto;text-align:center;max-width:970px;min-height:90px;}
html.ads-live .ad-slot{display:block;}
.ad-slot .ad-label{
  font-family:var(--pixel);font-size:7px;color:var(--text-dim);
  letter-spacing:2px;margin-bottom:8px;line-height:1.6;text-transform:uppercase;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer{
  border-top:2px solid var(--gold-dark);background:var(--ui-bg);
  padding:48px 0 calc(32px + env(safe-area-inset-bottom));margin-top:40px;
}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;
  max-width:var(--max);margin:0 auto;padding:0 20px;
}
.footer-brand .brand{font-size:15px;display:inline-block;margin-bottom:12px;}
.footer-brand p{font-size:15px;color:var(--text-dim);max-width:38ch;}
.footer-col h4{
  font-family:var(--pixel);font-size:9px;color:var(--gold);
  letter-spacing:1px;margin:0 0 14px;line-height:1.7;
}
.footer-col ul{list-style:none;margin:0;}
.footer-col li{margin-bottom:10px;}
.footer-col a{color:var(--text-dim);text-decoration:none;font-size:15px;}
.footer-col a:hover{color:var(--gold);}
.footer-bottom{
  max-width:var(--max);margin:36px auto 0;padding:22px 20px 0;
  border-top:1px solid var(--ui-border);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:14px;color:var(--text-dim);
}
.footer-bottom a{color:var(--text-dim);text-decoration:none;}
.footer-bottom a:hover{color:var(--gold);}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .nav-inner{gap:10px;}
  .nav-toggle{display:block;order:3;}
  /* The brand takes the free space instead of the CTA pair, so the CTAs and the
     hamburger stay together on the first row rather than the toggle wrapping
     onto a second one. */
  .brand{margin-right:auto;}
  .nav-cta{order:2;margin-left:0;gap:6px;}
  .nav-links{
    display:none;order:4;width:100%;
    flex-direction:column;align-items:flex-start;gap:0;
    margin:14px 0 0;padding-top:12px;border-top:1px solid var(--ui-border);
  }
  .nav-links.open{display:flex;}
  .nav-links li{width:100%;}
  .nav-links a{display:block;width:100%;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.04);}
  .nav-links a[aria-current="page"]{border-bottom-color:var(--ui-border);}
  .nav-inner{flex-wrap:wrap;}
  .footer-grid{grid-template-columns:1fr;gap:30px;}
}

@media (max-width:620px){
  body{font-size:16px;}
  section{padding:46px 0;}
  .hero{padding:52px 0 46px;}
  .hero h1{font-size:26px;letter-spacing:5px;}
  .hero-cards{font-size:38px;}
  .hero-lede{font-size:18px;}
  .hero-tagline{font-size:12px;letter-spacing:3px;}
  .page-head h1{font-size:19px;}
  .page-head p{font-size:17px;}
  .section-title{font-size:15px;}
  h2{font-size:14px;}
  h3{font-size:11px;}
  .brand{font-size:14px;letter-spacing:2px;}
  .btn{font-size:9px;padding:11px 14px;}
  .btn-lg{font-size:10px;padding:14px 18px;}
  .nav-cta .btn{font-size:8px;padding:9px 11px;}
  /* Drop the secondary CTA and surface it in the menu instead — three buttons
     plus the wordmark overflow 375px and wrap the hamburger onto its own row. */
  .nav-cta .btn-ghost{display:none;}
  .nav-signin-item{display:block;}
  /* Rule rows stack so the pixel-font key never squeezes the text column */
  .rule-item{flex-direction:column;gap:8px;padding:15px 17px;}
  .rule-item .rule-key{min-width:0;}
  .faq-answer{padding-left:22px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}