:root{
  --ink:#0C2032;
  --navy:#123A63;
  --blue:#2E6DB4;
  --green:#5FA83D;
  --teal:#158C7B;
  --paper:#F6F8F4;
  --paper-dim:#EAF0E6;
  --line:rgba(12,32,50,0.12);
  --line-soft:rgba(12,32,50,0.08);
  --max:1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.08;
}
.mono{
  font-family:'JetBrains Mono',monospace;
  letter-spacing:0.04em;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
:focus-visible{outline:3px solid var(--teal); outline-offset:3px;}

/* ---------- NAV ---------- */
header.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(246,248,244,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{width:38px; height:38px; border-radius:50%;}
.brand-mark{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 30% 25%, #2E8F55, #123A63 70%);
  display:grid; place-items:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:0.62rem;
  color:#fff; letter-spacing:0.04em;
}
.brand-text{font-family:'Space Grotesk'; font-weight:700; font-size:1.02rem; line-height:1.1;}
.brand-text span{
  display:block; font-family:'JetBrains Mono'; font-weight:500; font-size:0.62rem;
  letter-spacing:0.12em; color:var(--teal); text-transform:uppercase; margin-top:2px;
}
nav.links{display:flex; align-items:center; gap:28px;}
nav.links a{font-size:0.9rem; font-weight:500; color:var(--navy); transition:color .15s;}
nav.links a:hover, nav.links a.active{color:var(--green);}
.nav-ctas{display:flex; gap:10px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:999px; font-weight:600; font-size:0.88rem;
  cursor:pointer; border:1.5px solid transparent;
  transition:transform .15s, box-shadow .15s, background .15s;
  white-space:nowrap;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--green); color:#fff;}
.btn-primary:hover{box-shadow:0 6px 18px rgba(95,168,61,0.35); transform:translateY(-1px);}
.btn-outline-dark{border-color:var(--navy); color:var(--navy); background:transparent;}
.btn-outline-dark:hover{background:var(--navy); color:#fff;}
.btn-ghost-light{border-color:rgba(255,255,255,0.5); color:#fff; background:rgba(255,255,255,0.06);}
.btn-ghost-light:hover{background:rgba(255,255,255,0.16); border-color:#fff;}
.btn-sm{padding:8px 16px; font-size:0.8rem;}

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 140% at 8% 0%, #2E8F55 0%, #14614F 28%, #123A63 62%, #0A2540 100%);
  color:#fff; padding:64px 0 90px;
}
.hero::before{
  content:""; position:absolute; inset:0; opacity:0.5; pointer-events:none;
  background-image:
    linear-gradient(115deg, transparent 46%, rgba(255,255,255,0.06) 47%, rgba(255,255,255,0.06) 47.4%, transparent 48.4%),
    linear-gradient(115deg, transparent 60%, rgba(120,230,190,0.10) 61%, rgba(120,230,190,0.10) 61.3%, transparent 62.3%);
}
.trail{
  position:absolute; z-index:0; height:2px; border-radius:2px; opacity:0.55;
  background:linear-gradient(90deg, transparent, rgba(150,235,200,0.9), transparent);
  animation:trailmove 7s linear infinite;
}
@keyframes trailmove{
  0%{transform:translateX(-40%); opacity:0;}
  15%{opacity:.6;}
  85%{opacity:.6;}
  100%{transform:translateX(60%); opacity:0;}
}
.hero-inner{position:relative; z-index:1;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono'; font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase;
  color:#BFF0C9; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
  padding:7px 14px; border-radius:999px; margin-bottom:22px;
}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:#7EE38A; box-shadow:0 0 8px #7EE38A;}
.hero h1{font-size:clamp(2.1rem, 4.6vw, 3.4rem); color:#fff;}
.hero h1 em{font-style:normal; color:#8FE39B;}
.hero p.lede{margin-top:20px; font-size:1.12rem; color:rgba(255,255,255,0.82); max-width:52ch;}
.hero-meta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
.meta-chip{
  display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16);
  padding:10px 16px; border-radius:12px; font-size:0.86rem;
}
.meta-chip .k{
  font-family:'JetBrains Mono'; font-size:0.68rem; letter-spacing:0.1em;
  text-transform:uppercase; color:#9FE3AE; display:block;
}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px;}

/* ---------- SECTIONS ---------- */
section{padding:88px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head .eyebrow-dark{
  font-family:'JetBrains Mono'; font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--teal); margin-bottom:14px; display:block;
}
.section-head h2{font-size:clamp(1.7rem, 3.4vw, 2.5rem); color:var(--ink);}
.section-head p{margin-top:14px; color:#3E5266; font-size:1.02rem;}

/* ---------- GAME GRID ---------- */
.games{background:var(--paper-dim);}
.game-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.game-card{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:0; overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s, box-shadow .18s;
}
.game-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(12,32,50,0.1);}
.game-card-media{
  height:160px; position:relative;
  display:flex; align-items:flex-end; padding:18px 20px;
  background-size:cover; background-position:center;
}
.game-card-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,32,50,0.05) 0%, rgba(12,32,50,0.55) 100%);
  pointer-events:none;
}
.game-card-media .zone-code{
  position:relative; z-index:1;
  font-family:'JetBrains Mono'; font-size:0.72rem; letter-spacing:0.1em;
  color:#fff; display:inline-block; padding:4px 10px; border-radius:6px;
}
.game-card-body{padding:22px 22px 24px; flex:1; display:flex; flex-direction:column;}
.game-card-body h3{font-size:1.18rem; margin-bottom:8px; color:var(--ink);}
.game-card-body p{font-size:0.9rem; color:#4D6072; flex:1;}
.game-card-meta{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; margin-bottom:18px;
}
.tag{
  font-family:'JetBrains Mono'; font-size:0.68rem; letter-spacing:0.06em;
  text-transform:uppercase; color:#5C7085;
  background:var(--paper-dim); border:1px solid var(--line-soft);
  padding:5px 10px; border-radius:6px;
}
.game-card .btn{align-self:flex-start;}

/* ---------- GAME DETAIL ---------- */
.detail{background:var(--paper);}
.detail-layout{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px; align-items:start;
}
.detail-panel{
  background:#fff; border:1px solid var(--line); border-radius:22px; padding:36px 34px;
}
.detail-panel h2{font-size:clamp(1.5rem, 2.8vw, 2rem); color:var(--ink); margin-bottom:14px;}
.detail-panel p{color:#3E5266; font-size:1.02rem;}
.detail-panel p + p{margin-top:14px;}
.rule-list{margin-top:22px; display:flex; flex-direction:column; gap:12px;}
.rule-list li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:0.94rem; color:#3E5266;
}
.rule-list li::before{
  content:attr(data-n);
  font-family:'JetBrains Mono'; font-size:0.72rem; letter-spacing:0.06em;
  color:#fff; background:var(--navy); border-radius:6px;
  padding:4px 8px; flex-shrink:0; min-width:28px; text-align:center;
}
.side-stack{display:flex; flex-direction:column; gap:18px;}
.info-card{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px 22px;
}
.info-card h3{
  font-family:'JetBrains Mono'; font-size:0.74rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--teal); margin-bottom:14px; font-weight:500;
}
.info-row{
  display:flex; justify-content:space-between; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:0.92rem;
}
.info-row:last-child{border-bottom:0; padding-bottom:0;}
.info-row .k{color:#5C7085; font-family:'JetBrains Mono'; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;}
.info-row .v{color:var(--navy); font-weight:600; text-align:right;}
.cta-card{
  background:linear-gradient(160deg, var(--navy) 0%, var(--teal) 130%);
  color:#fff; border-radius:18px; padding:28px 24px;
}
.cta-card h3{font-size:1.25rem; color:#fff; margin-bottom:10px;}
.cta-card p{color:rgba(255,255,255,0.85); font-size:0.92rem; margin-bottom:18px;}
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono'; font-size:0.74rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--teal); margin-bottom:18px;
}
.back-link:hover{color:var(--green);}
.event-media{
  width:100%; height:220px; border-radius:18px; margin-bottom:22px;
  background-size:cover; background-position:center;
  box-shadow:0 16px 40px rgba(0,0,0,0.25);
  border:1px solid rgba(255,255,255,0.12);
}
.event-media[hidden]{display:none !important;}
@media (max-width:600px){
  .event-media{height:160px;}
}

/* ---------- FORMS ---------- */
.form-section{background:var(--paper);}
.form-shell{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:0;
  border:1px solid var(--line); border-radius:22px; overflow:hidden;
  background:#fff;
}
.form-side{
  padding:44px 38px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--navy) 0%, var(--teal) 130%);
}
.form-side h3{font-size:1.5rem; color:#fff; margin-bottom:14px;}
.form-side p{color:rgba(255,255,255,0.85); font-size:0.95rem;}
.form-side ul{margin-top:22px; display:flex; flex-direction:column; gap:12px;}
.form-side li{display:flex; gap:10px; font-size:0.9rem; color:rgba(255,255,255,0.9); align-items:flex-start;}
.form-side li::before{content:"—"; opacity:0.7; flex-shrink:0;}
.form-main{padding:44px 40px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field{margin-bottom:18px;}
.field label{
  display:block; font-size:0.78rem; font-weight:600; color:var(--navy); margin-bottom:7px;
  font-family:'JetBrains Mono'; letter-spacing:0.03em; text-transform:uppercase;
}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line);
  font-family:'Inter'; font-size:0.94rem; color:var(--ink); background:#FBFCFA;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--teal); box-shadow:0 0 0 3px rgba(21,140,123,0.14); outline:none;
}
.field textarea{resize:vertical; min-height:80px;}
.field-note{font-size:0.76rem; color:#8A97A3; margin-top:6px;}
.checkbox-group{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;}
.chip-check{position:relative;}
.chip-check input{position:absolute; opacity:0; width:100%; height:100%; cursor:pointer; margin:0;}
.chip-check span{
  display:inline-block; padding:9px 16px; border-radius:999px; border:1.5px solid var(--line);
  font-size:0.85rem; color:var(--navy); transition:all .15s;
}
.chip-check input:checked + span{background:var(--green); border-color:var(--green); color:#fff;}
.form-submit{margin-top:8px; width:100%; padding:15px; font-size:1rem;}
.form-status{margin-top:14px; font-size:0.84rem; color:#5C7085; display:none;}
.form-status.show{display:block; color:var(--teal);}
.form-status.is-error{color:#B42318;}
.form-status.is-success{color:var(--teal);}
.field-error{font-size:0.76rem; color:#B42318; margin-top:6px;}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{border-color:#F04438;}
.team-fields{
  margin-bottom:18px; padding:18px 18px 6px;
  background:var(--paper-dim); border:1px dashed var(--line); border-radius:14px;
}
.team-fields[hidden]{display:none !important;}
.members-section{margin-top:8px;}
.members-section[hidden]{display:none !important;}
.members-list{display:flex; flex-direction:column; gap:14px; margin-bottom:12px;}
.member-card{
  padding:14px 14px 4px; border:1px solid var(--line); border-radius:12px;
  background:#fff;
}
.member-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:12px;
}
.member-card-head strong{
  font-family:'JetBrains Mono'; font-size:0.72rem; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--navy);
}
.member-remove{
  border:0; background:transparent; color:#B42318; cursor:pointer;
  font-size:0.8rem; font-family:'Inter'; padding:0;
}
.member-remove:hover{text-decoration:underline;}
#addMemberBtn{margin-top:2px; margin-bottom:8px;}
.field-hint{
  font-family:'Inter',sans-serif; font-weight:500; letter-spacing:0;
  text-transform:none; color:#5C7085; font-size:0.72rem;
}

/* ---------- FOOTER ---------- */
footer{background:var(--ink); color:rgba(255,255,255,0.72); padding:56px 0 30px;}
.footer-inner{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px; margin-bottom:40px;}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.footer-brand img{width:34px; height:34px; border-radius:50%;}
.footer-brand .brand-mark{width:34px; height:34px; font-size:0.55rem;}
.footer-brand b{font-family:'Space Grotesk'; color:#fff; font-size:1rem;}
footer h4{
  font-family:'JetBrains Mono'; font-size:0.74rem; letter-spacing:0.1em;
  text-transform:uppercase; color:#8FE39B; margin-bottom:14px;
}
footer a{display:block; font-size:0.88rem; margin-bottom:10px; color:rgba(255,255,255,0.72); transition:color .15s;}
footer a:hover{color:#fff;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12); padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:0.78rem; color:rgba(255,255,255,0.5);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:920px){
  nav.links{display:none;}
  .game-grid{grid-template-columns:1fr 1fr;}
  .detail-layout{grid-template-columns:1fr;}
  .form-shell{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .wrap, .nav-inner{padding-left:18px; padding-right:18px;}
  section{padding:60px 0;}
  .game-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .hero-ctas{flex-direction:column; align-items:stretch;}
  .footer-inner{grid-template-columns:1fr;}
  .nav-ctas .btn-sm span.long{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .trail{animation:none; display:none;}
  html{scroll-behavior:auto;}
}