/* =========================================================================
   Sim Royale — shared design system
   Deep forest felt + pale gold, spade motif. Cream "cheat sheet" paper for
   reading surfaces, dark felt for chrome (header/hero/footer) and for the
   trainer table.
   ========================================================================= */

:root{
  /* felt (forest green) */
  --felt-950:#0B1D17;
  --felt-900:#12251E;
  --felt-800:#173129;
  --felt-700:#1F4234;
  --felt-600:#295746;

  /* gold */
  --gold-100:#F3E9C8;
  --gold-200:#EAD9A0;
  --gold-300:#DCBE72;
  --gold-400:#C9A227;
  --gold-600:#96741B;

  /* paper (cream) */
  --paper-50:#FBF8F0;
  --paper-100:#F5EFDE;
  --paper-200:#EDE3C8;

  /* ink / neutrals, on paper */
  --ink-900:#17231C;
  --ink-700:#33453A;
  --ink-500:#5B6B60;
  --line:#DCD0AC;

  /* ink / neutrals, on felt */
  --felt-ink:#F2EEDD;
  --felt-muted:#AEBDB0;
  --felt-line:rgba(234,217,160,.18);

  /* semantic */
  --good:#2C6B47;
  --good-bg:#E1EEE2;
  --bad:#9A3324;
  --bad-bg:#F3E2DA;
  --red-suit:#9A3324;

  color-scheme: light;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper-50);
  color:var(--ink-900);
  font-family:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.disp{font-family:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;}
[hidden]{display:none!important;}

::selection{background:var(--gold-300);color:var(--felt-950);}

/* ---------- layout helpers ---------- */
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px;}
.wrap-narrow{max-width:760px;margin:0 auto;padding-inline:20px;}
.stack{display:flex;flex-direction:column;}
section{padding-block:56px;}
section.tight{padding-block:36px;}
@media (max-width:640px){
  section{padding-block:40px;}
}

/* ---------- spade motif ---------- */
.spade{display:inline-block;}
.spade svg{display:block;width:100%;height:100%;}
.watermark-spade{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; overflow:hidden; z-index:0;
}
.watermark-spade svg{width:64vmin;height:64vmin;max-width:640px;max-height:640px;opacity:.06;}

/* ---------- top nav ---------- */
.site-header{
  background:var(--felt-950);
  color:var(--felt-ink);
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  border-bottom:1px solid var(--felt-line);
}
.site-header .bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:14px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--felt-ink);}
.brand .spade{width:22px;height:22px;color:var(--gold-300);}
.brand b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;letter-spacing:.04em;text-transform:uppercase;}
.brand b .accent{color:var(--gold-200);}
.nav-links{display:flex;gap:4px;align-items:center;}
.nav-links a{
  text-decoration:none;color:var(--felt-muted);font-size:14px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:10px 14px;border-radius:8px;
  transition:color .15s;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--gold-200);}
.nav-toggle{
  display:none; background:none;border:1px solid var(--felt-line);color:var(--felt-ink);
  border-radius:8px; width:40px;height:40px; align-items:center;justify-content:center;
}
@media (max-width:720px){
  .nav-links{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--felt-950); border-bottom:1px solid var(--felt-line);
    flex-direction:column; align-items:stretch; gap:0; padding:6px 20px 14px;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 4px;}
  .nav-toggle{display:inline-flex;}
}

/* ---------- breadcrumb ---------- */
.crumbs{font-size:13px;color:var(--felt-muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.crumbs a{text-decoration:none;color:var(--felt-muted);}
.crumbs a:hover{color:var(--gold-200);}
.crumbs .sep{opacity:.5;}
.crumbs.on-paper,.crumbs.on-paper a{color:var(--ink-500);}
.crumbs.on-paper a:hover{color:var(--gold-600);}

/* ---------- hero (felt) ---------- */
.hero{
  position:relative; background:radial-gradient(120% 140% at 50% -10%, var(--felt-700) 0%, var(--felt-950) 62%);
  color:var(--felt-ink); overflow:hidden;
}
.hero .wrap{position:relative;z-index:1;}
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-200);
  border:1px solid var(--felt-line);border-radius:999px;padding:6px 14px;
}
.hero h1{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(34px,6vw,58px);line-height:1.03;letter-spacing:-.01em;margin:.5em 0 .3em;
}
.hero h1 .accent{color:var(--gold-200);}
.hero p.lede{font-size:clamp(16px,2.4vw,19px);color:var(--felt-muted);max-width:60ch;margin:0 0 1.6em;}

/* ---------- pillars (Learn/Practice/Play row) ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.pillar{
  background:rgba(255,255,255,.02); border:1px solid var(--felt-line); border-radius:14px;
  padding:20px 14px; text-align:center; display:flex;flex-direction:column;align-items:center;gap:8px;
}
.pillar .icon{width:30px;height:30px;color:var(--gold-300);}
.pillar .label{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-200);}
.pillar p{margin:0;font-size:13px;color:var(--felt-muted);line-height:1.4;}
@media (max-width:640px){
  .pillars{grid-template-columns:1fr;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:15px;
  padding:13px 22px;border-radius:11px;text-decoration:none;border:2px solid transparent;
  cursor:pointer;transition:transform .12s,box-shadow .12s;
}
.btn:active{transform:translateY(1px);}
.btn-gold{background:linear-gradient(180deg,var(--gold-200),var(--gold-400));color:var(--felt-950);}
.btn-gold:hover{box-shadow:0 6px 18px rgba(201,162,39,.35);}
.btn-outline{background:transparent;border-color:var(--felt-line);color:var(--felt-ink);}
.btn-outline:hover{border-color:var(--gold-300);color:var(--gold-200);}
.btn-ink{background:var(--ink-900);color:var(--paper-50);}
.btn-ink:hover{background:var(--felt-900);}
.btn-outline-ink{background:transparent;border-color:var(--line);color:var(--ink-900);}
.btn-outline-ink:hover{border-color:var(--gold-600);color:var(--gold-600);}
.btn[disabled]{opacity:.45;cursor:default;}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;}

/* ---------- section headings (on paper) ---------- */
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-600);
  display:flex;align-items:center;gap:8px;
}
.eyebrow .spade{width:12px;height:12px;}
h2.section-title{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(24px,3.4vw,34px);
  margin:.25em 0 .3em;letter-spacing:-.01em;
}
.section-lede{color:var(--ink-500);max-width:64ch;margin:0 0 1.6em;font-size:16px;}

/* ---------- cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media (max-width:900px){.card-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.card-grid{grid-template-columns:1fr;}}

.game-card{
  position:relative;border-radius:18px;overflow:hidden;background:var(--felt-900);
  color:var(--felt-ink);text-decoration:none;display:flex;flex-direction:column;
  min-height:220px;border:1px solid var(--felt-line);
}
.game-card .top{
  flex-grow:1;padding:22px 20px 12px;position:relative;z-index:1;
  background:radial-gradient(140% 100% at 20% 0%,var(--felt-700),transparent 70%);
}
.game-card .spade-mark{width:26px;height:26px;color:var(--gold-300);margin-bottom:10px;}
.game-card h3{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;margin:0 0 6px;font-weight:800;}
.game-card p{margin:0;font-size:14px;color:var(--felt-muted);line-height:1.45;}
.game-card .bottom{
  padding:14px 20px;border-top:1px solid var(--felt-line);display:flex;align-items:center;
  justify-content:space-between;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-200);
}
.game-card.soon{opacity:.68;}
.game-card.soon .bottom{color:var(--felt-muted);}
.tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;background:var(--felt-700);color:var(--gold-200);
}

.link-card{
  background:var(--paper-100);border:1px solid var(--line);border-radius:16px;padding:22px;
  text-decoration:none;color:var(--ink-900);display:flex;flex-direction:column;gap:10px;
  transition:border-color .15s,transform .15s;
}
.link-card:hover{border-color:var(--gold-400);transform:translateY(-2px);}
.link-card .icon{width:28px;height:28px;color:var(--gold-600);}
.link-card h3{font-family:'Bricolage Grotesque',sans-serif;margin:0;font-size:19px;font-weight:800;}
.link-card p{margin:0;font-size:14px;color:var(--ink-500);line-height:1.45;flex-grow:1;}
.link-card .go{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gold-600);}
.link-card.disabled{opacity:.55;pointer-events:none;}

.fact-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
@media (max-width:720px){.fact-row{grid-template-columns:repeat(2,1fr);}}
.fact{background:var(--paper-100);border:1px solid var(--line);border-radius:12px;padding:14px 12px;text-align:center;}
.fact b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800;}
.fact span{font-size:12px;color:var(--ink-500);}

/* ---------- playing-card chip (mini card graphic) ---------- */
.pc{
  width:38px;aspect-ratio:5/7;background:var(--paper-50);color:var(--ink-900);
  border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;font-size:15px;line-height:1;flex:none;
}
.pc .s{font-size:1.15em;margin-top:2px;}
.pc.red{color:var(--red-suit);}
.pc.lg{width:48px;font-size:18px;}
.hand{display:flex;gap:4px;}

/* ---------- badges (bet levels) ---------- */
.badge{
  display:inline-flex;align-items:center;font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 11px;border-radius:8px;white-space:nowrap;
}
.badge.bet30{background:var(--felt-800);color:var(--gold-200);}
.badge.bet10{background:var(--gold-100);color:var(--gold-600);}
.badge.fold{background:var(--bad-bg);color:var(--bad);}

/* ---------- decision rows (guide tables) ---------- */
.decision{
  display:grid;grid-template-columns:200px 1fr;gap:14px;border:1px solid var(--line);
  border-radius:14px;padding:16px;background:var(--paper-50);align-items:center;
}
.decision + .decision{margin-top:10px;}
.decision .rule b{display:block;font-size:15px;margin-top:6px;}
.decision .rule .note{font-size:13px;color:var(--ink-500);margin-top:4px;line-height:1.4;}
.examples{display:flex;gap:14px;flex-wrap:wrap;}
.example{
  display:flex;align-items:center;gap:10px;background:var(--paper-100);border:1px solid var(--line);
  border-radius:10px;padding:8px 12px;font-size:13px;color:var(--ink-700);
}
.example .stat{line-height:1.35;}
.example .stat .ev{font-weight:800;}
.example .stat .ev.pos{color:var(--good);}
.example .stat .ev.neg{color:var(--bad);}
.examplewrap{display:flex;flex-direction:column;gap:4px;}
.examplewrap .statline{font-size:12px;color:var(--ink-500);padding-left:2px;}
.pair-examples{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;}
@media (max-width:680px){.pair-examples{grid-template-columns:1fr;}}
.ex-head{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);margin-bottom:6px;}
.rule-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;justify-content:space-between;}
.rule-head .txt{flex:1;min-width:200px;}
.rule-head .txt b{display:block;font-size:15px;}
.rule-head .txt .note{font-size:13px;color:var(--ink-500);margin-top:3px;line-height:1.4;}
.points-strip{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--paper-100);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:13px;color:var(--ink-700);}
.points-strip .k{font-weight:700;color:var(--ink-900);}
.points-legend{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-end;background:var(--paper-100);border:1px solid var(--line);border-radius:14px;padding:14px 16px;}
.points-legend .ptg{display:flex;flex-direction:column;gap:7px;align-items:flex-start;}
.points-legend .hand{gap:4px;}
.pts-badge{font-size:12px;color:var(--ink-500);white-space:nowrap;}
.pts-badge b{color:var(--gold-600);font-weight:800;}
@media (max-width:560px){.points-legend{gap:14px;}}
.steps-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
@media (max-width:720px){.steps-strip{grid-template-columns:repeat(2,1fr);}}
.step-box{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--paper-50);}
.step-box .n{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-600);}
.step-box .t{font-weight:700;font-size:14px;margin-top:2px;}
.step-box .d{font-size:12px;color:var(--ink-500);margin-top:3px;line-height:1.4;}
.step-box .in{font-size:12px;font-weight:700;color:var(--good);margin-top:6px;}
.lite-row{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--paper-50);}
.lite-row + .lite-row{margin-top:8px;}
.lite-row .hand{flex:none;}
.lite-row .rule-head{flex:1;}
@media (max-width:680px){
  .decision{grid-template-columns:1fr;}
}

/* ---------- tabs (guide sections) ---------- */
.tabbar{
  position:sticky;top:calc(env(safe-area-inset-top,0px) + 61px);z-index:30;
  background:var(--paper-50);border-bottom:1px solid var(--line);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.tabbar .wrap{display:flex;gap:4px;padding-block:10px;}
.tabbtn{
  flex:none;background:none;border:1px solid transparent;color:var(--ink-500);
  font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:14px;
  padding:9px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;
}
.tabbtn[aria-selected="true"]{background:var(--felt-900);color:var(--gold-200);}
.tabpanel{display:none;}
.tabpanel.active{display:block;}

/* ---------- callouts ---------- */
.callout{border:1px dashed var(--gold-400);background:var(--gold-100);border-radius:12px;padding:14px 16px;font-size:14px;color:var(--ink-700);}
.callout.plain{border-style:solid;border-color:var(--line);background:var(--paper-100);}

/* ---------- footer ---------- */
.site-footer{background:var(--felt-950);color:var(--felt-muted);border-top:1px solid var(--felt-line);}
.site-footer .wrap{padding-block:34px;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start;}
.site-footer .brand b{color:var(--felt-ink);}
.site-footer nav{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;}
.site-footer nav a{text-decoration:none;color:var(--felt-muted);}
.site-footer nav a:hover{color:var(--gold-200);}
.site-footer .fine{font-size:12px;line-height:1.6;max-width:60ch;color:var(--felt-muted);opacity:.85;}
.site-footer .legal{border-top:1px solid var(--felt-line);padding-block:16px;font-size:12px;text-align:center;opacity:.7;}

/* ---------- misc utility ---------- */
.muted{color:var(--ink-500);}
.center{text-align:center;}
.divider{height:1px;background:var(--line);border:0;margin:0;}
.divider.on-felt{background:var(--felt-line);}