/* ==========================================================================
   Gamesurgen — Tidal Surge design system
   Palette: deep teal → navy swell, white foam crest, aqua spray
   ========================================================================== */

:root{
  --abyss:#02101b;
  --deep:#062736;
  --swell:#0a4257;
  --mid:#0e6173;
  --crest:#19c6ad;
  --spray:#7fe7da;
  --foam:#f2fbfa;
  --foam-dim:#cfe3e5;
  --ink:#03151f;
  --coin:#ffd06b;
  --warn:#ff7a6b;

  --grad-swell:linear-gradient(168deg,#02101b 0%,#062736 38%,#0a4257 72%,#0e6173 100%);
  --grad-rise:linear-gradient(180deg,rgba(25,198,173,0) 0%,rgba(25,198,173,.10) 60%,rgba(127,231,218,.20) 100%);
  --grad-crest:linear-gradient(92deg,var(--crest),var(--spray));

  --rad:14px;
  --rad-lg:26px;
  --shell:min(1180px,92vw);
  --f-display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --f-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --shadow:0 22px 50px -26px rgba(0,0,0,.85);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  color:var(--foam);
  background:var(--abyss);
  background-image:var(--grad-swell);
  background-attachment:fixed;
}
img{max-width:100%;display:block}
a{color:var(--spray);text-decoration:none}
a:hover{color:var(--foam);text-decoration:underline}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4.3rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.15rem,2vw,1.45rem)}
p{margin:0 0 1.1em}
ul,ol{padding-left:1.15em}
li{margin-bottom:.45em}
.shell{width:var(--shell);margin-inline:auto}
.eyebrow{
  font-family:var(--f-display);font-weight:700;font-size:.74rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--crest);
  margin:0 0 .9rem;display:block;
}
.lede{font-size:clamp(1.05rem,1.7vw,1.22rem);color:var(--foam-dim);max-width:62ch}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--foam);color:var(--ink);padding:.6rem 1rem;border-radius:8px;z-index:99}

/* ---------- signature device: foam-crest divider ---------- */
.crestline{display:block;width:100%;height:46px;color:var(--foam)}
.crestline svg{display:block;width:100%;height:100%}
.crestrule{
  height:3px;width:120px;border-radius:99px;
  background:var(--grad-crest);margin:0 0 1.6rem;
}

/* ---------- header ---------- */
.masthead{
  position:sticky;top:0;z-index:40;
  background:rgba(2,16,27,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(127,231,218,.18);
}
.masthead__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--f-display);font-weight:800;font-size:1.25rem;color:var(--foam);letter-spacing:-.03em}
.brand:hover{text-decoration:none;color:var(--foam)}
.brand__mark{width:34px;height:34px;flex:0 0 34px;color:var(--crest)}
.brand__mark svg{width:100%;height:100%;display:block}
.brand b{color:var(--crest);font-weight:800}
.nav{display:flex;align-items:center;gap:.25rem}
.nav a{
  font-size:.92rem;font-weight:500;color:var(--foam-dim);
  padding:.5rem .72rem;border-radius:99px;
}
.nav a:hover,.nav a[aria-current="page"]{background:rgba(25,198,173,.14);color:var(--foam);text-decoration:none}
.nav .btn{margin-left:.4rem;color:var(--ink)}
.nav .btn:hover{background:var(--grad-crest);color:var(--ink)}
.navtoggle{
  display:none;background:transparent;border:1px solid rgba(127,231,218,.35);
  color:var(--foam);border-radius:10px;padding:.5rem .8rem;font:600 .9rem/1 var(--f-body);cursor:pointer;
}
@media(max-width:900px){
  .navtoggle{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:.15rem;
    background:#041c29;border-bottom:3px solid var(--crest);padding:.8rem 4vw 1.2rem;
  }
  .nav.is-open{display:flex}
  .nav a{padding:.75rem .6rem;border-radius:10px;font-size:1rem}
  .nav .btn{margin:.5rem 0 0;text-align:center}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--f-display);font-weight:800;
  font-size:.95rem;letter-spacing:.01em;padding:.78rem 1.5rem;border-radius:99px;
  border:0;cursor:pointer;background:var(--grad-crest);color:var(--ink);
  transition:transform .15s ease,filter .15s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08);text-decoration:none;color:var(--ink)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:none}
.btn--ghost{background:transparent;color:var(--foam);box-shadow:inset 0 0 0 2px rgba(127,231,218,.5)}
.btn--ghost:hover{color:var(--ink);background:var(--spray)}
.btn--sm{padding:.5rem 1rem;font-size:.85rem}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(3rem,7vw,5.5rem) 0 0;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;background:var(--grad-rise);pointer-events:none;
}
.hero__grid{position:relative;display:grid;gap:clamp(2rem,4vw,3.4rem);grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}
@media(max-width:980px){.hero__grid{grid-template-columns:1fr}}
.hero h1 span{
  display:block;background:var(--grad-crest);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__badges{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 0}
.badge{
  font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:.4rem .8rem;border-radius:99px;
  background:rgba(127,231,218,.12);color:var(--spray);
  border:1px solid rgba(127,231,218,.3);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
.hero__photo{
  margin:0;
  border-radius:var(--rad-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(127,231,218,.22);
  background:rgba(6,39,54,.45);
}
.hero__photo img{
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  display:block;
}
.hero__table{position:relative;padding:0 0 1.2rem;margin-top:clamp(1.6rem,3.5vw,2.6rem)}
.pagehead .hero__grid{align-items:center}

/* ---------- sections ---------- */
.section{padding:clamp(3.2rem,6vw,5rem) 0}
.section--panel{position:relative;background:rgba(2,16,27,.42);border-block:1px solid rgba(127,231,218,.14)}
.section--rise{background-image:var(--grad-rise)}
.grid{display:grid;gap:1.4rem}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* ---------- wave-edge card (signature) ---------- */
.card{
  position:relative;background:rgba(6,39,54,.72);
  border:1px solid rgba(127,231,218,.18);
  border-radius:var(--rad-lg) var(--rad-lg) var(--rad) var(--rad);
  padding:2.4rem 1.6rem 1.7rem;overflow:hidden;box-shadow:var(--shadow);
}
.card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:22px;
  background:var(--grad-crest);
  -webkit-mask:radial-gradient(14px 18px at 14px 22px,transparent 98%,#000) repeat-x 0 0/28px 22px;
  mask:radial-gradient(14px 18px at 14px 22px,transparent 98%,#000) repeat-x 0 0/28px 22px;
  opacity:.95;
}
.card h3{margin-top:.2rem}
.card p:last-child{margin-bottom:0}
.card__num{font-family:var(--f-display);font-size:.8rem;letter-spacing:.2em;color:var(--crest)}

/* ---------- prose pages ---------- */
.prose{max-width:74ch}
.prose h2{margin-top:2.4rem}
.prose h3{margin-top:1.8rem}
.pagehead{padding:clamp(2.6rem,6vw,4.4rem) 0 1rem;background-image:var(--grad-rise)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid rgba(127,231,218,.18)}
.faq details{border-bottom:1px solid rgba(127,231,218,.18);padding:1.05rem 0}
.faq summary{
  cursor:pointer;font-family:var(--f-display);font-weight:700;font-size:1.05rem;
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--crest);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:.8rem 0 0;color:var(--foam-dim)}

/* ---------- compliance strip ---------- */
.trust{
  background:rgba(25,198,173,.08);
  border-block:1px solid rgba(127,231,218,.22);
  padding:1.6rem 0;
}
.trust__row{display:flex;flex-wrap:wrap;gap:1rem 2.2rem;align-items:center;justify-content:center;text-align:center}
.trust__item{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--foam-dim)}
.trust__age{
  font-family:var(--f-display);font-weight:800;font-size:1rem;
  background:var(--foam);color:var(--ink);border-radius:99px;padding:.25rem .7rem;
}

/* ---------- footer ---------- */
.foot{background:#010b13;border-top:1px solid rgba(127,231,218,.16);padding:3rem 0 2rem;margin-top:0}
.foot__grid{display:grid;gap:2rem;grid-template-columns:1.6fr 1fr 1fr}
@media(max-width:760px){.foot__grid{grid-template-columns:1fr}}
.foot h4{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--crest);margin-bottom:.9rem}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:.5rem}
.foot a{color:var(--foam-dim);font-size:.94rem}
.foot a:hover{color:var(--foam)}
.foot p{font-size:.92rem;color:var(--foam-dim)}
.foot__legal{
  margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid rgba(127,231,218,.14);
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;
  font-size:.84rem;color:#7d9aa4;
}
.foot__legal p{font-size:.84rem;color:#7d9aa4;margin:0;max-width:70ch}

/* ==========================================================================
   Crestbreak table
   ========================================================================== */
.table{
  position:relative;
  background:radial-gradient(120% 90% at 50% 0%,#0c5568 0%,#062736 58%,#02101b 100%);
  border:1px solid rgba(127,231,218,.28);
  border-radius:var(--rad-lg);
  padding:1.4rem clamp(1rem,3vw,2rem) 1.6rem;
  box-shadow:var(--shadow);
}
.table__meters{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.2rem}
.meter{
  flex:1 1 130px;background:rgba(2,16,27,.55);border:1px solid rgba(127,231,218,.2);
  border-radius:var(--rad);padding:.6rem .9rem;
}
.meter span{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--spray)}
.meter strong{font-family:var(--f-display);font-size:1.5rem;font-weight:800;color:var(--foam)}
.meter--coin strong{color:var(--coin)}

.hand{margin-bottom:1rem}
.hand__label{
  display:flex;align-items:baseline;gap:.6rem;margin-bottom:.5rem;
  font-family:var(--f-display);font-weight:700;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--spray);
}
.hand__score{
  font-size:.9rem;color:var(--ink);background:var(--spray);border-radius:99px;padding:.05rem .6rem;letter-spacing:.04em;
}
.hand__cards{display:flex;flex-wrap:wrap;gap:.5rem;min-height:104px}

.pcard{
  width:70px;height:100px;border-radius:9px;flex:0 0 auto;
  background:var(--foam);color:var(--ink);
  font-family:var(--f-display);font-weight:800;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:.35rem .45rem;box-shadow:0 10px 22px -12px rgba(0,0,0,.9);
  animation:dealIn .38s cubic-bezier(.2,.9,.3,1.3) both;
}
.pcard.is-red{color:#d1344a}
.pcard__r{font-size:1.15rem;line-height:1}
.pcard__s{font-size:1.3rem;line-height:1;align-self:flex-end}
.pcard--down{
  background:linear-gradient(150deg,#0a4257,#0e6173);
  border:1px solid rgba(127,231,218,.4);
  position:relative;
}
.pcard--down::after{
  content:"";position:absolute;inset:8px;border-radius:5px;
  background:
    repeating-linear-gradient(115deg,rgba(127,231,218,.22) 0 5px,transparent 5px 11px);
}
@keyframes dealIn{
  from{opacity:0;transform:translateY(-26px) rotateY(80deg) scale(.9)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.pcard{animation:none}}

.controls{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.4rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{
  font-family:var(--f-display);font-weight:800;font-size:.9rem;cursor:pointer;
  background:rgba(2,16,27,.6);color:var(--foam);
  border:2px solid rgba(127,231,218,.35);border-radius:99px;padding:.45rem 1rem;
}
.chip[aria-pressed="true"]{background:var(--grad-crest);color:var(--ink);border-color:transparent}
.chip:disabled{opacity:.35;cursor:not-allowed}

.callout{
  margin-top:1rem;padding:.9rem 1.1rem;border-radius:var(--rad);
  border-left:4px solid var(--crest);background:rgba(25,198,173,.12);
  font-family:var(--f-display);font-weight:700;font-size:1.02rem;min-height:3.3rem;
  display:flex;align-items:center;
}
.callout.is-win{border-color:var(--spray);background:rgba(127,231,218,.18);color:var(--foam)}
.callout.is-lose{border-color:var(--warn);background:rgba(255,122,107,.14)}
.callout.is-push{border-color:var(--coin);background:rgba(255,208,107,.13)}
.callout.is-bj{border-color:var(--coin);background:linear-gradient(92deg,rgba(255,208,107,.22),rgba(25,198,173,.16))}

.rules dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.1rem;margin:0}
.rules dt{font-family:var(--f-display);font-weight:800;color:var(--spray)}
.rules dd{margin:0;color:var(--foam-dim)}
@media(max-width:560px){
  .rules dl{grid-template-columns:1fr;gap:.15rem}
  .rules dd{margin-bottom:.7rem}
  .pcard{width:58px;height:84px}
  .hand__cards{min-height:88px}
}