/* =========================================================================
   GREATEST CATCH — shared stylesheet
   Palette:
     --navy-deep   #081826  background base
     --navy        #0d2438  panels / header
     --navy-soft   #123047  cards / table stripes
     --teal        #2fd0c7  primary accent (water)
     --teal-dim    #1a8f89  borders / secondary state
     --coral       #ff7a4d  CTA accent (sunset / lure)
     --coral-dim   #e05f34  CTA hover
     --foam        #eaf6f4  primary text
     --mist        #93aab8  muted text
   Type:
     Display: 'Fraunces'  (characterful serif, vintage tackle-shop signage feel)
     Body:    'Inter'
     Utility: 'Space Mono' (odds / table figures)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --navy-deep:#081826;
  --navy:#0d2438;
  --navy-soft:#123047;
  --teal:#2fd0c7;
  --teal-dim:#1a8f89;
  --coral:#ff7a4d;
  --coral-dim:#e05f34;
  --foam:#eaf6f4;
  --mist:#93aab8;
  --rope: repeating-linear-gradient(90deg, var(--teal-dim) 0 10px, transparent 10px 20px);
  --radius: 14px;
  --max-width: 1180px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;
}

*, *::before, *::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-width:0;
  overflow-x:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(47,208,199,.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(255,122,77,.08), transparent 55%),
    var(--navy-deep);
  color:var(--foam);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

a{ color:var(--teal); text-decoration:none; }
a:hover{ color:var(--coral); }

:focus-visible{
  outline:2px solid var(--coral);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================================
   HEADER
   ========================================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(9,24,38,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(47,208,199,.18);
}

.header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  gap:20px;
}

/* Logo */
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  margin-right:auto;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.4rem;
  color:var(--foam);
  letter-spacing:.2px;
  flex-shrink:0;
}
.logo:hover{ color:var(--foam); }
.logo-mark{
  width:36px;
  height:36px;
  flex-shrink:0;
  border-radius:9px;
  background:linear-gradient(155deg, var(--teal) 0%, var(--teal-dim) 60%, var(--navy) 130%);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 1px rgba(47,208,199,.35), 0 6px 16px rgba(47,208,199,.25);
}
.logo-mark svg{ width:20px; height:20px; }
.logo-text small{
  display:block;
  font-family:var(--font-body);
  font-weight:500;
  font-size:.62rem;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--mist);
}

/* Primary nav */
.main-nav{ display:flex; }
.main-nav ul{
  list-style:none;
  display:flex;
  gap:6px;
  margin:0;
  padding:0;
}
.main-nav a{
  display:inline-block;
  padding:8px 12px;
  border-radius:8px;
  font-size:.92rem;
  font-weight:500;
  color:var(--foam);
}
.main-nav a:hover{
  background:rgba(47,208,199,.10);
  color:var(--teal);
}

/* Header action group */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.9rem;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active{ transform:translateY(1px); }

.btn-ghost{
  background:transparent;
  border-color:rgba(47,208,199,.45);
  color:var(--foam);
}
.btn-ghost:hover{
  border-color:var(--teal);
  background:rgba(47,208,199,.08);
  color:var(--foam);
}

.btn-primary{
  background:linear-gradient(135deg, var(--coral) 0%, var(--coral-dim) 100%);
  color:#151006;
  box-shadow:0 6px 18px rgba(255,122,77,.35);
}
.btn-primary:hover{
  box-shadow:0 8px 22px rgba(255,122,77,.5);
  transform:translateY(-1px);
  color:#151006;
}

/* Language switcher */
.lang-switch{
  position:relative;
}
.lang-current{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(147,170,184,.3);
  color:var(--foam);
  padding:8px 12px;
  border-radius:999px;
  font-size:.88rem;
  font-weight:500;
  cursor:pointer;
}
.lang-current:hover{ border-color:var(--teal); }
.lang-current .flag{ font-size:1.05rem; line-height:1; }
.lang-current .chevron{
  width:9px; height:9px;
  border-right:2px solid var(--mist);
  border-bottom:2px solid var(--mist);
  transform:rotate(45deg);
  margin-top:-3px;
  transition:transform .18s ease;
}
.lang-switch.open .lang-current .chevron{ transform:rotate(225deg); margin-top:3px; }

.lang-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:190px;
  background:var(--navy);
  border:1px solid rgba(47,208,199,.22);
  border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  padding:6px;
  list-style:none;
  margin:0;
  max-height:0;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition:max-height .22s ease, opacity .18s ease;
}
.lang-switch.open .lang-menu{
  max-height:420px;
  opacity:1;
  pointer-events:auto;
}
.lang-menu li a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:8px;
  font-size:.88rem;
  color:var(--foam);
}
.lang-menu li a:hover{ background:rgba(47,208,199,.12); color:var(--foam); }
.lang-menu li a.is-active{ color:var(--teal); background:rgba(47,208,199,.08); }
.lang-menu .flag{ font-size:1.05rem; }

/* Mobile nav toggle */
.nav-toggle{
  display:none;
  width:40px;
  height:40px;
  border-radius:9px;
  border:1px solid rgba(147,170,184,.3);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-shrink:0;
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:var(--foam);
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================================
   MAIN CONTENT
   ========================================================================= */

main{
  max-width:840px;
  margin:0 auto;
  padding:64px 24px 100px;
  overflow-wrap:break-word;
  word-break:break-word;
}

/* Every text/media element below shares main's own column width —
   nothing is independently narrowed, which is what previously made
   paragraphs stop halfway across the page while headings and images
   ran full width, leaving a lopsided empty gap on the right. */

/* Headings */
main h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2rem, 5.6vw, 3rem);
  line-height:1.14;
  letter-spacing:-.5px;
  margin:0 0 20px;
  background:linear-gradient(120deg, var(--foam) 30%, var(--teal) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

main h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.4rem, 3.6vw, 1.85rem);
  line-height:1.3;
  color:var(--foam);
  margin:52px 0 18px;
  padding-top:20px;
  position:relative;
}
main h2::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:56px; height:3px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--teal), var(--coral));
}

main h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.2rem;
  color:var(--foam);
  margin:32px 0 12px;
}

main .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--teal);
  background:rgba(47,208,199,.10);
  border:1px solid rgba(47,208,199,.3);
  padding:6px 12px;
  border-radius:999px;
  margin-bottom:18px;
}

/* Paragraphs & inline text — full column width, no independent caps */
main p{
  font-size:1.02rem;
  color:var(--mist);
  margin:0 0 20px;
}
main p.lead{
  font-size:1.15rem;
  color:var(--foam);
}
main strong{ color:var(--foam); }
main em{ color:var(--teal); font-style:normal; }

main ul, main ol{
  color:var(--mist);
  margin:0 0 22px;
  padding-left:22px;
}
main li{ margin-bottom:8px; }
main li::marker{ color:var(--teal); }

main blockquote{
  margin:28px 0;
  padding:18px 22px;
  border-left:3px solid var(--coral);
  background:rgba(255,122,77,.06);
  border-radius:0 10px 10px 0;
  color:var(--foam);
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.08rem;
}

main hr{
  border:none;
  height:6px;
  margin:48px 0;
  background-image:var(--rope);
  opacity:.5;
  border-radius:4px;
}

/* Images / figures placed between paragraphs */
main figure{
  margin:36px 0;
  max-width:100%;
}
main figure img{
  width:100%;
  max-width:100%;
  border-radius:var(--radius);
  border:1px solid rgba(47,208,199,.2);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
main figure figcaption{
  margin-top:10px;
  font-size:.85rem;
  color:var(--mist);
  text-align:center;
}

/* Image gallery row (optional grouping of the figure template) */
main .img-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
  margin:36px 0;
}
main .img-row figure{ margin:0; }

/* Tables — no wrapper <div> needed. The table element itself becomes the
   scroll container: display:block lets it sit in normal block flow (so it
   can never force main/body wider than the viewport), while its own
   thead/tbody/tr/td keep their table display values, so the grid still
   renders correctly and simply scrolls sideways inside its own box when
   content is wider than the screen. */
main table{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  border-collapse:collapse;
  font-size:.94rem;
  background:var(--navy-soft);
  margin:28px 0;
  border-radius:var(--radius);
  border:1px solid rgba(47,208,199,.18);
}
/* thead/tbody deliberately keep their default table-part display values
   (table-header-group / table-row-group) instead of being overridden, so
   the browser builds one single anonymous table around them — this is what
   keeps header and body columns aligned with each other. white-space:nowrap
   on th/td below stops columns compressing illegibly; once their combined
   natural width exceeds the box above, the table scrolls sideways inside
   itself instead of ever pushing main or the page wider. */
main thead th{
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:1px;
  text-transform:uppercase;
  text-align:left;
  color:var(--teal);
  background:rgba(47,208,199,.08);
  padding:14px 16px;
  border-bottom:1px solid rgba(47,208,199,.25);
  white-space:nowrap;
}
main tbody td{
  padding:13px 16px;
  color:var(--mist);
  border-bottom:1px solid rgba(147,170,184,.12);
  font-family:var(--font-mono);
  font-size:.9rem;
  white-space:nowrap;
}
main tbody tr:last-child td{ border-bottom:none; }
main tbody tr:nth-child(even){ background:rgba(255,255,255,.02); }
main tbody tr:hover{ background:rgba(47,208,199,.06); }

/* Centered CTA button template */
main .cta-block{
  display:flex;
  justify-content:center;
  margin:52px 0;
}
main .btn-cta{
  font-family:var(--font-body);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.3px;
  padding:18px 46px;
  border-radius:999px;
  color:#151006;
  background:linear-gradient(135deg, var(--teal) 0%, var(--coral) 100%);
  box-shadow:0 14px 34px rgba(255,122,77,.3), 0 0 0 1px rgba(255,255,255,.08) inset;
  border:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
main .btn-cta:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 18px 42px rgba(255,122,77,.42), 0 0 0 1px rgba(255,255,255,.1) inset;
  color:#151006;
}

/* Generic content card (available if needed for grouping stats etc.) */
main .card{
  background:var(--navy-soft);
  border:1px solid rgba(47,208,199,.16);
  border-radius:var(--radius);
  padding:26px 28px;
  margin:28px 0;
}

/* Demo game block — the iframe fills its own bordered, rounded box and
   loads immediately with the page. No extra labels or buttons on top of
   it; play happens right here. */
main .demo-block{
  margin:32px 0 44px;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(47,208,199,.28);
  background:var(--navy-deep);
}
main .demo-frame{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:0;
}

/* Author / reviewer block — sits after the body copy in main */
main .author-block{
  display:flex;
  gap:18px;
  align-items:flex-start;
  margin:44px 0 12px;
  padding:24px;
  border-radius:var(--radius);
  background:var(--navy-soft);
  border:1px solid rgba(47,208,199,.16);
}
main .author-block__avatar{
  width:64px;
  height:64px;
  border-radius:50%;
  flex-shrink:0;
  object-fit:cover;
  border:2px solid rgba(47,208,199,.4);
  background:var(--navy);
}
main .author-block__body{ min-width:0; }
main .author-block__name{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--foam);
  font-size:1.05rem;
  margin:0 0 2px;
}
main .author-block__role{
  font-size:.72rem;
  color:var(--teal);
  font-family:var(--font-mono);
  letter-spacing:1px;
  text-transform:uppercase;
  margin:0 0 10px;
}
main .author-block__quote{
  margin:0;
  color:var(--mist);
  font-size:.96rem;
  line-height:1.7;
}



.site-footer{
  border-top:1px solid rgba(47,208,199,.16);
  background:var(--navy);
  padding:34px 24px 44px;
}
.footer-inner{
  max-width:var(--max-width);
  margin:0 auto;
}
.footer-orgs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 24px;
  margin-bottom:18px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(47,208,199,.14);
}
.footer-orgs a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.2px;
  color:var(--mist);
}
.footer-orgs a::after{
  content:"↗";
  font-size:.68rem;
  opacity:.55;
}
.footer-orgs a:hover{ color:var(--teal); }
.footer-inner p{
  margin:0;
  font-size:.82rem;
  line-height:1.75;
  color:var(--mist);
  overflow-wrap:break-word;
  word-break:break-word;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 960px){
  .main-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--navy);
    border-bottom:1px solid rgba(47,208,199,.18);
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
  }
  .main-nav.open{ max-height:260px; }
  .main-nav ul{
    flex-direction:column;
    padding:10px 24px 16px;
    gap:2px;
  }
  .main-nav a{ padding:12px 8px; display:block; }
  .nav-toggle{ display:flex; order:5; }
  .header-actions{ order:6; }
  .btn-ghost{ display:none; }
  .header-inner{ position:relative; flex-wrap:wrap; }
}

@media (max-width: 640px){
  .header-inner{ padding:12px 16px; gap:12px; }
  .logo-text small{ display:none; }
  .btn-primary{ padding:9px 14px; font-size:.84rem; }
  .lang-current span.lang-label{ display:none; }
  .lang-current{ padding:8px 10px; }

  main{ padding:40px 16px 64px; }
  main .img-row{ grid-template-columns:1fr; gap:16px; }
  main .btn-cta{ width:100%; padding:16px 20px; text-align:center; }
  main .cta-block{ margin:38px 0; }

  main .demo-block{ border-radius:10px; }

  main .author-block{ flex-direction:column; align-items:center; text-align:center; }
  main .author-block__avatar{ width:72px; height:72px; }

  .footer-orgs{ gap:8px 16px; }
  .footer-inner p{ font-size:.78rem; }

  .error-main{ padding:64px 20px 80px; }
}

/* Nav active state */
.main-nav a[aria-current="page"]{ color:var(--teal); background:rgba(47,208,199,.08); }

/* =========================================================================
   404 / ERROR PAGE
   ========================================================================= */

main.error-main{
  max-width:640px;
  min-height:calc(100vh - 400px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:100px 24px 120px;
}
.error-code{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(4.5rem, 16vw, 7.5rem);
  line-height:1;
  letter-spacing:-2px;
  margin:0 0 4px;
  background:linear-gradient(120deg, var(--teal) 10%, var(--coral) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.error-icon{ width:72px; height:72px; margin:0 0 18px; opacity:.85; }
main.error-main h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.3rem, 3vw, 1.7rem);
  color:var(--foam);
  margin:0 0 14px;
}
main.error-main p{
  color:var(--mist);
  max-width:46ch;
  margin:0 auto 32px;
}

/* Anything that could overflow horizontally on small screens simply scrolls
   within its own box rather than stretching the page. */
.site-header, .site-footer{ max-width:100%; }
main{ width:100%; }

.cta-block{
  display:flex;
  justify-content:center;
  margin:52px 0;
}
.btn-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-body);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.3px;
  padding:18px 46px;
  border-radius:999px;
  color:#151006;
  background:linear-gradient(135deg, var(--teal) 0%, var(--coral) 100%);
  box-shadow:0 14px 34px rgba(255,122,77,.3), 0 0 0 1px rgba(255,255,255,.08) inset;
  border:none;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-cta:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 18px 42px rgba(255,122,77,.42), 0 0 0 1px rgba(255,255,255,.1) inset;
  color:#151006;
}