@charset "UTF-8";

:root {
  color-scheme: dark;
  --ink: #f7e9c6;
  --muted: #c8b994;
  --gold: #f3c561;
  --gold-2: #b87925;
  --navy: #0a2e42;
  --navy-2: #061924;
  --panel: rgba(6, 28, 39, .92);
  --line: rgba(228, 174, 74, .36);
  --scrap: #c78a3d;
  --spirit: #38b8ad;
  --valor: #438fd0;
  --max: 1180px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  min-width: 300px;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 15%, rgba(35, 119, 145, .18), transparent 32rem),
    radial-gradient(circle at 90% 45%, rgba(117, 72, 24, .18), transparent 34rem),
    #06141d;
  font-family: var(--sans);
  line-height: 1.6;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: .17;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
}

a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }

.skip-link {
  position: fixed;
  z-index: 200;
  left: 12px;
  top: -60px;
  padding: 10px 15px;
  color: #071821;
  background: var(--gold);
  border-radius: 8px;
  font-weight: 900;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  min-height: 68px;
  padding: 9px max(18px, env(safe-area-inset-right)) 9px max(18px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid rgba(235, 191, 97, .23);
  background: rgba(4, 20, 29, .76);
  backdrop-filter: blur(18px) saturate(130%);
  transition: background .25s, box-shadow .25s;
}
.site-header.is-scrolled { background: rgba(4, 20, 29, .96); box-shadow: 0 10px 35px rgba(0,0,0,.32); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1.05; }
.brand-mark {
  width: 42px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid #e5bb62;
  border-radius: 50%;
  color: #ffe5a3;
  background: radial-gradient(circle at 35% 30%, #246c83, #082536 70%);
  box-shadow: inset 0 0 0 3px #3c260f;
  font: 900 14px/1 var(--serif);
}
.brand b { display: block; color: #ffe2a0; font: 700 17px/1 var(--serif); text-transform: uppercase; letter-spacing: .03em; }
.brand small { color: var(--muted); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.top-nav { justify-self: center; display: flex; gap: clamp(14px, 2vw, 34px); }
.top-nav a { position: relative; color: #d9c8a3; font-size: 13px; font-weight: 750; text-decoration: none; }
.top-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--gold); transition: right .2s; }
.top-nav a:hover::after, .top-nav a:focus-visible::after { right: 0; }
.play-link {
  padding: 9px 15px;
  border: 1px solid #d6a94f;
  border-radius: 9px;
  color: #ffe5a1;
  background: linear-gradient(#1b6885,#0d405a);
  box-shadow: inset 0 0 0 2px #44280e;
  font: 800 12px/1 var(--sans);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.hero {
  position: relative;
  min-height: min(960px, 100svh);
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}
.hero-art {
  position: absolute;
  z-index: -3;
  inset: 0;
  background: #174b69 url('/camp/assets/cards/game-ui/runtime/v7/battlefield-landscape.webp') center/cover no-repeat;
  transform: scale(1.02);
}
.hero-shade {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,15,22,.84), rgba(3,18,26,.28) 48%, rgba(3,15,22,.58)),
    linear-gradient(0deg, #06141d 0, transparent 28%, rgba(2,14,21,.28) 70%, rgba(2,12,18,.66));
}
.hero-content { width: min(var(--max), calc(100% - 36px)); padding: 116px 0 130px; text-align: center; }
.eyebrow, .kicker { margin: 0 0 14px; color: var(--gold); font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.hero-logo { width: min(850px, 90vw); margin: 0 auto 20px; filter: drop-shadow(0 12px 15px rgba(0,0,0,.48)); }
.hero h1 { max-width: 900px; margin: 0 auto; color: #fff0be; font: 700 clamp(2rem, 4.5vw, 4.8rem)/.98 var(--serif); text-wrap: balance; text-shadow: 0 4px 14px rgba(4,13,17,.78); }
.hero-lead { max-width: 700px; margin: 24px auto 0; color: #e6ddc6; font-size: clamp(1rem, 1.6vw, 1.25rem); text-shadow: 0 2px 5px #06151f; }
.hero-actions { margin-top: 32px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.button {
  min-height: 46px;
  padding: 12px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d5a64b;
  border-radius: 10px;
  color: #ffecb3;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.button-primary { background: linear-gradient(180deg,#247c9e,#0b405c); box-shadow: inset 0 0 0 2px #3d250f,0 8px 20px rgba(0,0,0,.28); }
.button-ghost { background: rgba(3,22,31,.68); }
.button:hover, .button:focus-visible { filter: brightness(1.14); transform: translateY(-1px); }
.hero-stats { max-width: 940px; margin: 52px auto 0; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid rgba(239,193,91,.4); border-radius: 18px; background: rgba(3,22,31,.74); backdrop-filter: blur(12px); overflow: hidden; }
.hero-stats div { min-height: 98px; padding: 18px 12px; display: grid; align-content: center; border-right: 1px solid rgba(239,193,91,.22); }
.hero-stats div:last-child { border-right: 0; }
.hero-stats dt { color: #ffe19a; font: 700 clamp(1.5rem,2.8vw,2.35rem)/1 var(--serif); }
.hero-stats dd { margin: 7px 0 0; color: #c8b996; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hero-scroll { position: absolute; bottom: 24px; left: 50%; display: grid; gap: 2px; color: #d9ccae; font-size: 11px; font-weight: 800; text-decoration: none; text-transform: uppercase; letter-spacing: .12em; transform: translateX(-50%); }
.hero-scroll span { color: var(--gold); font-size: 20px; }

.section { width: min(var(--max), calc(100% - 36px)); margin: 0 auto; padding: clamp(78px,10vw,130px) 0; }
.section-heading { max-width: 770px; margin-bottom: 44px; }
.section-heading h2, .final-cta h2 { margin: 0; color: #ffe3a1; font: 700 clamp(2.1rem,5vw,4.5rem)/1 var(--serif); text-wrap: balance; }
.section-heading > p:last-child { margin: 20px 0 0; color: var(--muted); font-size: clamp(1rem,1.5vw,1.17rem); }

.start-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.start-card { min-height: 220px; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg,rgba(15,57,73,.86),rgba(5,26,37,.94)); box-shadow: inset 0 1px rgba(255,255,255,.05),0 15px 35px rgba(0,0,0,.2); }
.start-card::before { content: ""; display: block; width: 38px; height: 2px; margin-bottom: 22px; background: linear-gradient(90deg,var(--gold),transparent); }
.start-icon { min-height: 44px; display: block; color: var(--gold); font: 700 36px/1 var(--serif); }
.start-icon.scrap { color: var(--scrap); }.start-icon.spirit { color: var(--spirit); }
.start-card b { display: block; margin-top: 14px; color: #ffe4a6; font: 700 22px/1.15 var(--serif); }
.start-card p { margin: 12px 0 0; color: var(--muted); font-size: 14px; }

.victory-section { width: 100%; padding-left: max(18px,calc((100% - var(--max))/2)); padding-right: max(18px,calc((100% - var(--max))/2)); background: linear-gradient(180deg,rgba(7,38,52,.72),rgba(5,24,34,.84)); border-block: 1px solid rgba(230,174,69,.16); }
.victory-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; }
.victory-card { grid-column: span 2; min-height: 235px; padding: 26px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(circle at 100% 0,rgba(222,165,67,.12),transparent 45%),#092737; }
.victory-card:nth-child(4) { grid-column: 2/span 2; }.victory-card:nth-child(5) { grid-column: 4/span 2; }
.victory-card > span { position: absolute; right: 17px; top: 5px; color: rgba(244,196,97,.11); font: 700 76px/1 var(--serif); }
.victory-card h3 { position: relative; margin: 55px 0 12px; color: #ffe2a0; font: 700 25px/1.1 var(--serif); }
.victory-card p { position: relative; margin: 0; color: var(--muted); font-size: 14px; }

.turn-section { display: grid; grid-template-columns: .75fr 1.25fr; column-gap: clamp(40px,7vw,100px); }
.turn-section .section-heading { position: sticky; top: 110px; align-self: start; }
.timeline { grid-column: 2; margin: 0; padding: 0; list-style: none; }
.timeline li { position: relative; min-height: 150px; display: grid; grid-template-columns: 62px 1fr; gap: 22px; }
.timeline li:not(:last-child)::before { content: ""; position: absolute; left: 30px; top: 58px; bottom: 0; width: 1px; background: linear-gradient(var(--gold-2),rgba(184,121,37,.12)); }
.timeline li > span { width: 62px; height: 62px; display: grid; place-items: center; border: 1px solid var(--gold-2); border-radius: 50%; color: #ffe3a0; background: radial-gradient(circle,#194d61,#092534); box-shadow: inset 0 0 0 4px #071c27; font: 700 23px/1 var(--serif); }
.timeline h3 { margin: 4px 0 8px; color: #ffe2a0; font: 700 26px/1.15 var(--serif); }
.timeline p { margin: 0; color: var(--muted); }
.rules-note { grid-column: 1/-1; margin-top: 40px; padding: 23px 26px; display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: center; border: 1px solid rgba(241,191,88,.55); border-radius: 16px; background: linear-gradient(90deg,rgba(134,75,20,.24),rgba(8,34,45,.8)); }
.rules-note-mark { width: 48px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font: 800 26px/1 var(--serif); }
.rules-note b { color: #ffe3a0; font: 700 21px/1 var(--serif); }.rules-note p { margin: 6px 0 0; color: #d3c4a3; }

.schools-section { width: 100%; padding-left: max(18px,calc((100% - var(--max))/2)); padding-right: max(18px,calc((100% - var(--max))/2)); background: rgba(3,19,27,.56); }
.school-panels { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.school-panel { position: relative; min-height: 480px; padding: 30px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #092634; }
.school-panel::after { content:""; position:absolute; inset:auto -30% -25% 20%; height:260px; background:radial-gradient(circle,var(--school-glow),transparent 68%); opacity:.15; pointer-events:none; }
.school-scrap { --school:#d09445; --school-glow:#d09445; }.school-spirit { --school:#50c6b9; --school-glow:#37c3b2; }.school-valor { --school:#59a7e3; --school-glow:#2d91da; }
.school-symbol { width: 76px; aspect-ratio:1; display:grid; place-items:center; border:1px solid var(--school); border-radius:50%; color:var(--school); background:#071c27; font:700 42px/1 var(--serif); box-shadow:0 0 35px color-mix(in srgb,var(--school) 20%,transparent); }
.school-range { margin: 25px 0 0; color:var(--school); font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.school-panel h3 { margin: 7px 0 12px; color:#ffe4a8; font:700 38px/1 var(--serif); }
.school-panel > p:not(.school-range) { margin:0; color:var(--muted); }
.school-panel ul { margin:22px 0; padding-left:18px; color:#d8c9a8; font-size:14px; }
.school-panel a { position:relative; z-index:2; margin-top:auto; color:var(--school); font-weight:900; text-decoration:none; }
.barracks-answer { margin: 20px 0 0; padding: 20px 24px; border-left: 3px solid var(--valor); color: #cdbf9e; background: rgba(49,111,156,.12); }
.barracks-answer b { color: #dcefff; }

.rating-section { padding-bottom: 80px; }
.rating-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; }
.rating-board, .reward-panel, .elo-explainer, .fair-play { border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,rgba(14,56,73,.93),rgba(5,26,36,.96)); overflow:hidden; }
.rating-board-head { min-height:102px; padding:24px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,rgba(26,101,130,.44),transparent); }
.rating-board-head span { color:var(--muted); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
.rating-board-head b { color:#ffe2a0; font:700 clamp(1.7rem,3vw,2.6rem)/1 var(--serif); }
.rating-board dl { margin:0; padding:10px 28px 24px; }
.rating-board dl div { min-height:70px; display:grid; grid-template-columns:120px 1fr; align-items:center; gap:18px; border-bottom:1px solid rgba(230,178,77,.16); }
.rating-board dl div:last-child { border:0; }
.rating-board dt { color:#ffe1a0; font-weight:900; }.rating-board dd { margin:0; color:var(--muted); }
.reward-panel { padding:30px; background:radial-gradient(circle at 50% 0,rgba(248,193,70,.2),transparent 42%),linear-gradient(145deg,#193f46,#0b2731); }
.reward-label { margin:0; color:var(--gold); font-size:11px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.reward-panel > strong { display:block; margin:14px 0 12px; color:#ffe6a4; font:700 clamp(3rem,6vw,5.2rem)/.85 var(--serif); letter-spacing:-.05em; }
.reward-panel > strong small { display:block; margin-top:12px; font-size:.36em; letter-spacing:.12em; }
.reward-panel > p:not(.reward-label) { color:#d2c5a7; }
.reward-gold { margin:24px 0; padding:17px 19px; border:1px solid rgba(245,195,88,.38); border-radius:12px; background:rgba(114,68,18,.23); }
.reward-gold b,.reward-gold span { display:block; }.reward-gold b { color:#ffe096; font:700 24px/1 var(--serif); }.reward-gold span { margin-top:6px; color:#cbbc9c; font-size:12px; }
.reward-caveat { font-size:12px; }
.elo-explainer { margin-top:18px; padding:28px; }.elo-explainer h3,.fair-play h3 { margin:0; color:#ffe1a0; font:700 28px/1 var(--serif); }.elo-explainer > p { color:var(--muted); }
.elo-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px; }.elo-steps span { padding:14px; border:1px solid rgba(230,178,77,.2); border-radius:10px; color:#cbbd9d; background:rgba(3,20,29,.45); font-size:13px; }.elo-steps b { display:block; color:#ffe2a0; font:700 30px/1 var(--serif); }
.fair-play { margin-top:18px; padding:28px; border-color:rgba(199,93,63,.38); background:linear-gradient(110deg,rgba(91,32,25,.37),rgba(6,29,39,.92)); }.fair-play p { margin:12px 0 0; color:#d1c1a1; }

.catalog-section { width:100%; padding-left:max(18px,calc((100% - var(--max))/2)); padding-right:max(18px,calc((100% - var(--max))/2)); background:linear-gradient(180deg,rgba(6,34,46,.74),rgba(3,18,26,.85)); border-block:1px solid rgba(230,178,77,.16); }
.catalog-toolbar { position:sticky; z-index:20; top:78px; padding:14px; display:grid; grid-template-columns:minmax(210px,1fr) auto auto; align-items:end; gap:12px; border:1px solid var(--line); border-radius:16px; background:rgba(4,24,34,.94); box-shadow:0 14px 30px rgba(0,0,0,.25); backdrop-filter:blur(14px); }
.catalog-search span { display:block; margin:0 0 5px 4px; color:#bdae8d; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.catalog-search input { width:100%; height:44px; padding:0 14px; border:1px solid rgba(225,174,76,.32); border-radius:10px; outline:none; color:#fff0ca; background:#061c27; }
.catalog-search input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(242,193,91,.14); }
.filter-row { display:flex; flex-wrap:wrap; gap:6px; }
.filter-button,.locale-switch button,.catalog-meta button { min-height:42px; padding:8px 12px; border:1px solid rgba(225,174,76,.25); border-radius:9px; color:#c9bc9d; background:#0a2c3b; cursor:pointer; }
.filter-button span { margin-left:5px; opacity:.65; font-size:.78em; }
.filter-button.is-active,.locale-switch button.is-active { color:#1d1609; border-color:#f3c561; background:linear-gradient(#f6d486,#c68c30); font-weight:900; }
.locale-switch { display:flex; gap:4px; }.locale-switch button { min-width:43px; }
.catalog-meta { min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:16px; color:#c8bb9c; font-size:13px; }.catalog-meta p { margin:0; }.catalog-meta button { min-height:34px; color:#f2cb79; background:transparent; }
.card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,2vw,22px); }
.catalog-card { position:relative; padding:0; border:0; border-radius:16px; color:inherit; background:#071b24; box-shadow:0 15px 30px rgba(0,0,0,.28); overflow:hidden; text-align:left; cursor:pointer; transition:transform .2s,box-shadow .2s; }
.catalog-card:hover,.catalog-card:focus-visible { transform:translateY(-5px); box-shadow:0 20px 44px rgba(0,0,0,.42),0 0 0 2px var(--card-school); outline:none; }
.catalog-card-image { position:relative; aspect-ratio:2/3; display:block; overflow:hidden; background:linear-gradient(145deg,#153c4b,#071b24); }
.catalog-card-image img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }.catalog-card:hover img { transform:scale(1.025); }
.catalog-card-image::after { content:""; position:absolute; inset:auto 0 0; height:22%; background:linear-gradient(transparent,rgba(3,16,23,.7)); pointer-events:none; }
.catalog-card-copy { min-height:84px; padding:13px 15px 15px; display:block; border-top:2px solid var(--card-school); }
.catalog-card-copy span { color:var(--card-school); font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.catalog-card-copy h3 { margin:5px 0 0; color:#ffe5aa; font:700 18px/1.1 var(--serif); }
.catalog-card-cost { position:absolute; z-index:2; top:10px; right:10px; min-width:36px; height:36px; padding:0 8px; display:grid; place-items:center; border:1px solid var(--card-school); border-radius:50%; color:#fff1c4; background:rgba(4,22,30,.9); box-shadow:0 3px 9px rgba(0,0,0,.45); font-weight:900; }
.catalog-card[data-school="scrap"] { --card-school:var(--scrap); }.catalog-card[data-school="spirit"] { --card-school:var(--spirit); }.catalog-card[data-school="valor"] { --card-school:var(--valor); }
.catalog-empty { grid-column:1/-1; min-height:260px; display:grid; place-items:center; border:1px dashed var(--line); border-radius:16px; color:var(--muted); text-align:center; }

.faq-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.faq-list details { border:1px solid var(--line); border-radius:14px; background:rgba(7,35,47,.78); overflow:hidden; }
.faq-list summary { min-height:72px; padding:20px 52px 20px 22px; position:relative; display:flex; align-items:center; color:#ffe2a0; font:700 19px/1.2 var(--serif); cursor:pointer; list-style:none; }
.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary::after { content:"+"; position:absolute; right:20px; color:var(--gold); font:400 28px/1 var(--sans); }.faq-list details[open] summary::after { content:"−"; }
.faq-list details p { margin:0; padding:0 22px 22px; color:var(--muted); }

.final-cta { width:min(var(--max),calc(100% - 36px)); margin:0 auto 90px; padding:clamp(28px,5vw,55px); display:grid; grid-template-columns:1fr auto; align-items:center; gap:35px; border:1px solid rgba(239,190,85,.55); border-radius:24px; background:radial-gradient(circle at 90% 50%,rgba(39,122,151,.35),transparent 45%),linear-gradient(120deg,#123b4c,#071f2b); box-shadow:0 25px 60px rgba(0,0,0,.28); }
.final-cta h2 { font-size:clamp(2rem,4vw,3.8rem); }.final-cta p:not(.kicker) { max-width:720px; margin:14px 0 0; color:var(--muted); }
footer { min-height:90px; padding:22px max(18px,calc((100% - var(--max))/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid rgba(229,174,70,.18); color:#9f9377; font-size:12px; } footer a { color:#e7c77f; text-decoration:none; }

.card-dialog { width:min(920px,calc(100% - 28px)); max-height:calc(100dvh - 28px); padding:0; grid-template-columns:minmax(250px,.8fr) 1fr; border:1px solid #d6a64d; border-radius:22px; color:var(--ink); background:#061c27; box-shadow:0 35px 90px rgba(0,0,0,.7); overflow:hidden; }
.card-dialog[open] { display:grid; }.card-dialog::backdrop { background:rgba(2,11,16,.86); backdrop-filter:blur(8px); }
.dialog-close { position:absolute; z-index:3; top:12px; right:12px; width:42px; aspect-ratio:1; border:1px solid #dbb05b; border-radius:50%; color:#ffe8ae; background:rgba(5,25,34,.88); font-size:26px; cursor:pointer; }
.dialog-card-art { min-height:0; display:grid; place-items:center; padding:22px; background:radial-gradient(circle,#194a5b,#061a24 70%); }.dialog-card-art img { width:min(100%,390px); max-height:calc(100dvh - 72px); object-fit:contain; filter:drop-shadow(0 15px 25px rgba(0,0,0,.45)); }
.dialog-copy { padding:clamp(30px,5vw,60px); align-self:center; }.dialog-copy > p:first-child { margin:0; color:var(--gold); font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }.dialog-copy h2 { margin:10px 0 25px; color:#ffe3a1; font:700 clamp(2rem,4vw,3.6rem)/1 var(--serif); }.dialog-copy dl { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 24px; }.dialog-copy dl div { padding:12px; border:1px solid var(--line); border-radius:10px; }.dialog-copy dt { color:#a99d81; font-size:10px; text-transform:uppercase; }.dialog-copy dd { margin:3px 0 0; color:#ffe2a0; font-weight:900; }.dialog-copy > p:not(:first-child) { color:var(--muted); }
.to-top { position:fixed; z-index:70; right:18px; bottom:max(18px,env(safe-area-inset-bottom)); width:45px; aspect-ratio:1; border:1px solid #d8a950; border-radius:50%; color:#ffe3a0; background:rgba(5,29,40,.9); box-shadow:0 8px 20px rgba(0,0,0,.3); opacity:0; pointer-events:none; transform:translateY(12px); transition:.2s; cursor:pointer; }.to-top.is-visible { opacity:1; pointer-events:auto; transform:none; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .55s ease,transform .55s ease; }.reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 920px) {
  .site-header { grid-template-columns:auto 1fr; gap:12px; }.top-nav { grid-column:1/-1; grid-row:2; width:100%; padding:8px 0 2px; justify-content:flex-start; overflow-x:auto; }.play-link { justify-self:end; }.brand small { display:none; }
  html { scroll-padding-top:118px; }.hero-content { padding-top:150px; }.start-grid { grid-template-columns:repeat(2,1fr); }.victory-grid { grid-template-columns:repeat(2,1fr); }.victory-card,.victory-card:nth-child(4),.victory-card:nth-child(5) { grid-column:auto; }.victory-card:last-child { grid-column:1/-1; }
  .turn-section { display:block; }.turn-section .section-heading { position:static; }.timeline { margin-top:35px; }
  .school-panels { grid-template-columns:1fr; }.school-panel { min-height:0; }.rating-layout { grid-template-columns:1fr; }
  .catalog-toolbar { top:112px; grid-template-columns:1fr auto; }.catalog-search { grid-column:1/-1; }.filter-row { overflow-x:auto; flex-wrap:nowrap; }.card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .site-header { padding-inline:12px; }.brand b { font-size:14px; }.brand-mark { width:36px; }.play-link { padding:8px 10px; font-size:10px; }.top-nav { gap:22px; }.top-nav a { flex:0 0 auto; }
  .hero { min-height:760px; }.hero-content { width:calc(100% - 24px); padding-bottom:120px; }.hero-logo { width:100%; }.hero h1 { font-size:clamp(2rem,10vw,3.1rem); }.hero-stats { grid-template-columns:repeat(2,1fr); }.hero-stats div { min-height:82px; border-bottom:1px solid rgba(239,193,91,.22); }.hero-stats div:nth-child(2) { border-right:0; }.hero-stats div:nth-child(n+3) { border-bottom:0; }
  .section { width:calc(100% - 24px); padding-block:72px; }.section-heading { margin-bottom:30px; }.start-grid { grid-template-columns:1fr; }.start-card { min-height:0; }.victory-section,.schools-section,.catalog-section { padding-left:12px; padding-right:12px; }.victory-grid { grid-template-columns:1fr; }.victory-card:last-child { grid-column:auto; }.victory-card { min-height:205px; }
  .timeline li { grid-template-columns:48px 1fr; gap:15px; }.timeline li > span { width:48px; height:48px; }.timeline li:not(:last-child)::before { left:23px; top:48px; }.timeline h3 { font-size:22px; }.rules-note { grid-template-columns:1fr; }
  .school-panel { padding:24px; }.rating-board-head { padding:20px; align-items:flex-start; flex-direction:column; }.rating-board dl { padding-inline:20px; }.rating-board dl div { grid-template-columns:90px 1fr; }.reward-panel { padding:24px; }.elo-steps { grid-template-columns:1fr; }
  .catalog-toolbar { top:108px; padding:10px; grid-template-columns:1fr; }.filter-row { order:2; }.locale-switch { order:3; }.card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.catalog-card-copy { min-height:76px; padding:10px; }.catalog-card-copy h3 { font-size:15px; }
  .faq-list { grid-template-columns:1fr; }.final-cta { width:calc(100% - 24px); margin-bottom:50px; grid-template-columns:1fr; }.final-cta .button { justify-self:start; } footer { flex-direction:column; align-items:flex-start; }
  .card-dialog[open] { display:block; overflow-y:auto; }.dialog-card-art { padding:16px; }.dialog-card-art img { max-height:57dvh; }.dialog-copy { padding:26px 20px; }.dialog-copy dl { grid-template-columns:repeat(3,1fr); }.dialog-copy dl div { padding:9px; }.dialog-copy dd { font-size:12px; }
}

@media (max-width: 370px) { .card-grid { grid-template-columns:1fr; }.hero-stats dd { font-size:9px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }.reveal { opacity:1; transform:none; }
}