/* Sixpence — shared site styles */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --forest-deep:#122019;
  --forest-mid:#1c3125;
  --forest-glow:#24402f;
  --parchment:#f2ecdc;
  --parchment-dim:#b9b39e;
  --sage:#a7cdae;
  --coin-gold:#cfa84e;
  --token-red:#c15b54;
  --token-blue:#6c86c9;
  --token-orange:#d98a3d;
  --token-teal:#4fb3a0;
  --line:rgba(242,236,220,0.12);
  --radius-lg:28px;
  --radius-md:18px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(ellipse 900px 600px at 15% -10%, var(--forest-glow) 0%, transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 20%, #2a2013 0%, transparent 55%),
    linear-gradient(180deg, var(--forest-deep) 0%, #0e1a13 100%);
  background-attachment:fixed;
  color:var(--parchment);
  font-family:'Inter', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
a{color:inherit;}
h1,h2,h3{font-family:'Fraunces', Georgia, serif; margin:0; font-weight:600;}
p{margin:0;}
img{max-width:100%; display:block;}

/* Keyboard users need to see where they are; the old sheet gave them nothing. */
:focus-visible{outline:2px solid var(--sage); outline-offset:3px; border-radius:6px;}
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:100;
  background:var(--sage); color:#0f1d15; padding:10px 18px; border-radius:999px;
  font-size:14px; font-weight:600; text-decoration:none; transition:top 0.18s ease;
}
.skip-link:focus{top:12px;}

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background:rgba(18,32,25,0.72);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; max-width:1120px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand-coin{
  width:32px; height:32px; border-radius:9px;
  background:linear-gradient(155deg, var(--forest-mid), var(--forest-deep));
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-size:17px; color:var(--parchment); flex-shrink:0;
}
.brand-coin.sm{width:26px; height:26px; font-size:13px;}
.brand-name{font-family:'Fraunces', serif; font-size:19px; letter-spacing:0.01em; color:var(--parchment);}
.nav-cta{
  font-size:14px; font-weight:600; text-decoration:none;
  background:var(--sage); color:#0f1d15; padding:9px 18px; border-radius:999px;
  transition:transform 0.15s ease, background 0.15s ease;
}
.nav-cta:hover{transform:translateY(-1px); background:#b8dabf;}

.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 26px; border-radius:999px; font-size:15px; font-weight:600;
  text-decoration:none; border:1px solid transparent; transition:all 0.18s ease;
}
.btn svg{flex-shrink:0;}
.btn-primary{background:var(--sage); color:#0f1d15;}
.btn-primary:hover{background:#b8dabf; transform:translateY(-2px);}
.btn-secondary{
  background:rgba(242,236,220,0.06); color:var(--parchment); border-color:var(--line);
}
.btn-secondary:hover{background:rgba(242,236,220,0.12); border-color:rgba(207,168,78,0.45); transform:translateY(-2px);}
.eyebrow{
  display:inline-block; font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--coin-gold); font-weight:600;
}

/* ---------- HERO ---------- */
.hero{padding:96px 28px 64px; text-align:center; position:relative;}
.coin-stage{position:relative; width:220px; height:220px; margin:0 auto 40px;}
.orbit-ring{position:absolute; inset:0; border:1px dashed rgba(242,236,220,0.18); border-radius:50%;}
.orbit-ring.inner{inset:26px; border-color:rgba(207,168,78,0.28);}
.token-dot{position:absolute; width:11px; height:11px; border-radius:50%; box-shadow:0 0 10px currentColor;}
.coin-stage .spin{position:absolute; inset:0; animation:spin 26s linear infinite;}
.coin-stage .spin.rev{animation-direction:reverse; animation-duration:34s;}
@keyframes spin{ to{ transform:rotate(360deg);} }
.t1{top:-5px; left:50%; margin-left:-5.5px; color:var(--token-blue); background:var(--token-blue);}
.t2{bottom:6%; right:2%; color:var(--token-red); background:var(--token-red);}
.t3{bottom:6%; left:2%; color:var(--token-orange); background:var(--token-orange);}
.t4{top:14%; right:-2px; color:var(--token-teal); background:var(--token-teal);}
.coin{
  position:absolute; inset:52px; border-radius:26px;
  background:linear-gradient(155deg, #1f3527, #142219 70%);
  border:1px solid rgba(207,168,78,0.35);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
  display:flex; align-items:center; justify-content:center;
}
.coin span{font-family:'Fraunces', serif; font-size:64px; font-weight:600; color:var(--parchment);}
.coin::after{
  content:''; position:absolute; top:14px; right:16px;
  width:9px; height:9px; background:var(--coin-gold); transform:rotate(45deg); border-radius:2px;
}
.hero h1{font-size:clamp(40px, 6vw, 68px); line-height:1.04; letter-spacing:-0.01em; color:var(--parchment); margin-top:10px;}
.hero-tagline{max-width:560px; margin:22px auto 0; font-size:18px; line-height:1.6; color:var(--parchment-dim);}
.hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px;}

/* ---------- SECTIONS ---------- */
.section{padding:88px 28px;}
.section-head{max-width:640px; margin:0 auto 52px; text-align:center;}
.section-head .eyebrow{margin-bottom:12px; display:block;}
.section-head h2{font-size:clamp(30px,4vw,42px); color:var(--parchment); line-height:1.15;}
.section-head p{margin-top:16px; color:var(--parchment-dim); font-size:16px; line-height:1.6;}

/* ---------- SCREENSHOT RAIL ---------- */
.shots-band{padding:20px 0 92px;}
.shots-band .section-head{padding:0 28px;}
.shots-rail{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:8px 28px 26px; scrollbar-width:none;
  /* the strip runs off both edges rather than stopping in a hard line */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
.shots-rail::-webkit-scrollbar{display:none;}
.shot{
  flex:0 0 auto; width:272px; margin:0; scroll-snap-align:center;
  border-radius:22px; overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 26px 50px -24px rgba(0,0,0,0.7);
  transition:transform 0.25s ease, border-color 0.25s ease;
}
.shot:hover{transform:translateY(-6px); border-color:rgba(207,168,78,0.4);}
.shot img{width:100%; height:auto;}

/* ---------- WAYS ---------- */
.ways-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1000px; margin:0 auto;}
.way-card{background:rgba(242,236,220,0.03); border:1px solid var(--line); border-radius:var(--radius-md); padding:30px 26px; transition:transform 0.2s ease, border-color 0.2s ease;}
.way-card:hover{transform:translateY(-4px); border-color:rgba(207,168,78,0.4);}
.way-icon{width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.way-icon svg{width:23px; height:23px;}
.icon-friends{background:rgba(108,134,201,0.16); color:var(--token-blue);}
.icon-indoor{background:rgba(217,138,61,0.16); color:var(--token-orange);}
.icon-ai{background:rgba(167,205,174,0.18); color:var(--sage);}
.way-card h3{font-size:19px; color:var(--parchment); margin-bottom:8px; font-weight:600;}
.way-card p{font-size:14.5px; color:var(--parchment-dim); line-height:1.55;}

/* ---------- CATEGORIES ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1080px; margin:0 auto;}
.cat-card{background:linear-gradient(165deg, rgba(242,236,220,0.045), rgba(242,236,220,0.015)); border:1px solid var(--line); border-left:3px solid var(--accent, var(--coin-gold)); border-radius:var(--radius-md); padding:26px 24px; transition:transform 0.2s ease, background 0.2s ease;}
.cat-card:hover{transform:translateY(-3px); background:rgba(242,236,220,0.06);}
.cat-num{font-size:12px; letter-spacing:0.1em; color:var(--parchment-dim); text-transform:uppercase;}
.cat-card h3{font-size:22px; margin:8px 0 12px; color:var(--parchment);}
.cat-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.cat-list li{display:flex; align-items:baseline; gap:10px; font-size:14.5px; color:var(--parchment-dim); line-height:1.5;}
.cat-list li::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--accent, var(--coin-gold)); flex-shrink:0; margin-top:5px;}
.cat-list b{color:var(--parchment); font-weight:600;}
.c-ludo{--accent:var(--token-blue);}
.c-chess{--accent:var(--coin-gold);}
.c-cards{--accent:var(--token-red);}
.c-snake{--accent:var(--token-teal);}
.c-runaway{--accent:var(--token-orange);}
.c-grid{--accent:var(--sage);}

/* ---------- SOCIAL BAND + LIVE SESSION MOCK ---------- */
.social-band{background:linear-gradient(165deg, var(--forest-mid), var(--forest-deep)); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.social-inner{max-width:1080px; margin:0 auto; padding:88px 28px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.social-copy .eyebrow{margin-bottom:14px; display:block;}
.social-copy h2{font-size:clamp(28px,3.6vw,38px); color:var(--parchment); line-height:1.18; margin-bottom:18px;}
.social-copy p{color:var(--parchment-dim); font-size:16px; line-height:1.7; margin-bottom:14px;}

.session{
  background:rgba(0,0,0,0.26); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px; box-shadow:0 30px 60px -28px rgba(0,0,0,0.7);
}
.session-bar{display:flex; align-items:center; justify-content:space-between; padding:2px 6px 14px;}
.session-game{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--parchment);}
.session-count{font-size:12px; color:var(--parchment-dim);}
.live-dot{width:7px; height:7px; border-radius:50%; background:#6fce8a; box-shadow:0 0 0 0 rgba(111,206,138,0.6); animation:pulse 2.4s ease-out infinite;}
@keyframes pulse{ 70%{box-shadow:0 0 0 7px rgba(111,206,138,0);} 100%{box-shadow:0 0 0 0 rgba(111,206,138,0);} }

.felt{
  position:relative; overflow:hidden;
  background:radial-gradient(ellipse at center, #274a35, #16281c);
  border-radius:14px; height:104px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(207,168,78,0.2);
}
.felt-turn{font-family:'Fraunces',serif; color:var(--parchment-dim); font-size:13px; letter-spacing:0.04em;}
/* Reactions drift up off the table the way they do in a live match. */
.burst{position:absolute; bottom:8px; font-size:19px; opacity:0; animation:rise 6s ease-in infinite;}
.burst.b1{left:18%; animation-delay:0s;}
.burst.b2{left:48%; animation-delay:2s;}
.burst.b3{left:76%; animation-delay:4s;}
@keyframes rise{
  0%{opacity:0; transform:translateY(6px) scale(0.7);}
  14%{opacity:1; transform:translateY(-6px) scale(1.06);}
  70%{opacity:0.9; transform:translateY(-52px) scale(1);}
  100%{opacity:0; transform:translateY(-76px) scale(0.9);}
}

.seat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px;}
.seat{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:11.5px; color:var(--parchment-dim);
  padding:9px 4px; border-radius:12px; border:1px solid transparent;
}
.seat.is-turn{border-color:rgba(207,168,78,0.45); background:rgba(207,168,78,0.08); color:var(--parchment);}
.avatar{
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-size:14px; color:#0f1d15; font-weight:600; position:relative;
}
.avatar::after{
  content:''; position:absolute; bottom:-1px; right:-1px; width:9px; height:9px;
  border-radius:50%; background:#6fce8a; border:2px solid #16281c;
}
.av-red{background:var(--token-red);}
.av-blue{background:var(--token-blue);}
.av-orange{background:var(--token-orange);}
.av-teal{background:var(--token-teal);}

.chat{background:rgba(242,236,220,0.04); border:1px solid var(--line); border-radius:16px; padding:14px;}
.chat-head{margin-bottom:12px;}
.chat-head b{display:block; font-size:13px; color:var(--parchment); font-weight:600;}
.chat-head span{font-size:11.5px; color:var(--parchment-dim);}
.msg{display:flex; align-items:baseline; gap:8px; margin-bottom:8px;}
.msg .who{font-size:11px; color:var(--parchment-dim); min-width:34px; flex-shrink:0;}
.msg .bubble{
  background:rgba(242,236,220,0.08); border-radius:12px 12px 12px 4px;
  padding:7px 11px; font-size:13px; color:var(--parchment); line-height:1.4;
}
.msg .bubble em{font-style:normal;}
.msg.mine{flex-direction:row-reverse;}
.msg.mine .bubble{background:rgba(167,205,174,0.18); border-radius:12px 12px 4px 12px;}
.reactions{display:flex; gap:6px; margin:12px 0 10px; flex-wrap:wrap;}
.reactions button{
  font:inherit; font-size:15px; line-height:1; cursor:default;
  background:rgba(242,236,220,0.06); border:1px solid var(--line);
  border-radius:999px; padding:6px 9px; transition:transform 0.15s ease, background 0.15s ease;
}
.reactions button:hover{transform:translateY(-2px); background:rgba(242,236,220,0.12);}
.reactions button.hot{background:rgba(207,168,78,0.16); border-color:rgba(207,168,78,0.4);}
.composer{
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(0,0,0,0.24); border:1px solid var(--line); border-radius:999px;
  padding:9px 14px; font-size:12.5px; color:var(--parchment-dim);
}
.composer .send{color:var(--sage); font-size:12px;}

/* ---------- MODES ---------- */
.modes-row{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:900px; margin:0 auto;}
.mode-chip{text-align:center; padding:28px 20px; border-radius:var(--radius-md); border:1px solid var(--line); background:rgba(242,236,220,0.03);}
.mode-chip h3{font-size:17px; color:var(--parchment); margin-bottom:8px;}
.mode-chip p{font-size:13.5px; color:var(--parchment-dim); line-height:1.5;}

.final-cta{text-align:center; padding:100px 28px 110px;}
.final-cta h2{font-size:clamp(30px,4.4vw,46px); color:var(--parchment); line-height:1.15; max-width:640px; margin:0 auto 32px;}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:40px 28px 32px;}
.footer-inner{max-width:1120px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.footer-links{display:flex; gap:26px; flex-wrap:wrap;}
.footer-links a{font-size:13.5px; color:var(--parchment-dim); text-decoration:none;}
.footer-links a:hover{color:var(--parchment);}
.footer-brand{display:flex; align-items:center; gap:9px; text-decoration:none;}
.footer-brand span{font-family:'Fraunces',serif; font-size:15px; color:var(--parchment-dim);}
.copyright{font-size:12.5px; color:var(--parchment-dim); opacity:0.7; margin-top:20px; text-align:center;}

/* ---------- LEGAL / DOCUMENT PAGES ---------- */
.doc-header{max-width:760px; margin:0 auto; padding:72px 28px 8px; text-align:center;}
.doc-header .eyebrow{display:block; margin-bottom:14px;}
.doc-header h1{font-size:clamp(32px,4.6vw,46px); color:var(--parchment); line-height:1.15;}
.doc-header .meta{margin-top:14px; color:var(--parchment-dim); font-size:14px;}
.doc-shell{max-width:760px; margin:40px auto 100px; padding:0 28px;}
.doc-card{
  background:var(--parchment); color:var(--forest-deep);
  border-radius:var(--radius-lg); padding:52px 56px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,0.5);
}
.doc-card p{font-size:15.5px; line-height:1.75; color:#3a3626; margin-bottom:18px;}
.doc-card h2{
  font-size:19px; color:var(--forest-deep); margin:38px 0 14px;
  padding-bottom:10px; border-bottom:2px solid rgba(18,32,25,0.12);
}
.doc-card h2:first-child{margin-top:0;}
.doc-card ul{margin:0 0 18px; padding-left:22px;}
.doc-card li{font-size:15.5px; line-height:1.7; color:#3a3626; margin-bottom:8px;}
.doc-card a{color:#4a6b52; text-decoration:underline;}
.doc-card ol{margin:0 0 18px; padding-left:22px;}
.doc-card ol.steps{list-style:decimal; display:flex; flex-direction:column; gap:10px; margin-bottom:22px;}
.doc-card ol.steps li{font-size:15.5px; line-height:1.7; color:#3a3626; margin:0;}
.doc-card ol.steps li::marker{color:#4a6b52; font-weight:700;}
.doc-card b{color:var(--forest-deep);}
/* Irreversible actions get a visible edge rather than a sentence in the flow. */
.doc-card .notice{
  background:rgba(169,74,66,0.09); border-left:3px solid #a94a42;
  border-radius:0 10px 10px 0; padding:14px 18px;
  font-size:15px; line-height:1.65; color:#5c332f; margin-bottom:18px;
}
.doc-card .contact-block{
  margin-top:44px; padding-top:26px; border-top:1px solid rgba(18,32,25,0.14);
  font-size:14.5px; color:#5b5747;
}
.doc-card .contact-block b{display:block; color:var(--forest-deep); font-size:15px; margin-bottom:4px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
  .ways-grid, .cat-grid, .modes-row{grid-template-columns:repeat(2,1fr);}
  .social-inner{grid-template-columns:1fr; gap:44px;}
}
@media (max-width:680px){
  .ways-grid, .cat-grid, .modes-row{grid-template-columns:1fr;}
  .section{padding:64px 20px;}
  .hero{padding:64px 20px 48px;}
  .coin-stage{width:170px; height:170px; margin-bottom:30px;}
  .coin{inset:40px; border-radius:22px;}
  .coin span{font-size:50px;}
  .social-inner{padding:64px 20px;}
  .shots-band{padding:8px 0 68px;}
  .shots-band .section-head{padding:0 20px;}
  .shots-rail{padding:8px 20px 22px; gap:14px;}
  .shot{width:230px;}
  .hero-ctas .btn{width:100%; justify-content:center;}
  .nav-inner{padding:13px 18px;}
  .doc-card{padding:34px 26px;}
  .footer-inner{justify-content:center; text-align:center;}
  .footer-links{justify-content:center; gap:18px;}
}