:root{
  --bg:#f4f8fb;
  --bg2:#eaf3f8;
  --panel:#ffffff;
  --panel-soft:#f7fbfd;
  --text:#122033;
  --muted:#52697c;
  --accent:#1677a8;
  --accent-dark:#0d557a;
  --accent-soft:#e4f4fb;
  --accent2:#d79a16;
  --accent2-soft:#fff4d8;
  --success:#2c8b61;
  --danger:#c84d55;
  --line:#cbdbe5;
  --line-dark:#9eb8c8;
  --nav:#10263a;
  --max:1120px;
  --radius:22px;
  --shadow:0 14px 36px rgba(36,72,96,.10)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(180deg,#f9fcfe 0%,var(--bg) 45%,#edf5f8 100%);color:var(--text);line-height:1.55}
a{color:inherit}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:0 4px 18px rgba(32,67,90,.06)}
.nav{max-width:var(--max);margin:auto;padding:14px 20px;display:flex;gap:18px;align-items:center}
.brand{font-weight:900;letter-spacing:.02em;text-decoration:none;color:var(--text)}
.brand-badge{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;margin-right:9px;font-weight:1000}
.nav-links{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.nav-links a{padding:9px 12px;text-decoration:none;border-radius:12px;color:var(--muted);font-weight:700}
.nav-links a:hover,.nav-links a.active{background:var(--accent-soft);color:var(--accent-dark)}
.hero{max-width:var(--max);margin:auto;padding:76px 20px 38px}
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;color:var(--accent-dark);font-weight:900;margin-bottom:14px}
.hero h1{font-size:clamp(2.7rem,7vw,6.3rem);line-height:.94;max-width:900px;margin:0 0 22px;letter-spacing:-.055em;color:#10263a}
.hero p{font-size:clamp(1.05rem,2vw,1.35rem);color:var(--muted);max-width:780px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 17px;border-radius:14px;border:1px solid var(--line-dark);background:#fff;color:var(--text);text-decoration:none;font-weight:800;cursor:pointer;box-shadow:0 5px 14px rgba(34,76,104,.06)}
.btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.gold{background:var(--accent2);color:#2c2107;border-color:transparent}
.btn.ghost{background:transparent;box-shadow:none}
.section{max-width:var(--max);margin:auto;padding:42px 20px}
.section-number{font-size:4rem;font-weight:1000;color:#b8dcea;line-height:1;text-shadow:0 1px 0 #fff}
.section h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;margin:.15em 0 .45em;letter-spacing:-.035em;color:#10263a}
.lede{font-size:1.12rem;color:var(--muted);max-width:800px}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);color:var(--text)}
.card h3{margin-top:0;font-size:1.25rem;color:#10263a}
.card p,.card li{color:#354f62}
.step{display:flex;gap:16px;align-items:flex-start}
.step-num{flex:0 0 38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft);color:var(--accent-dark);font-weight:900;border:1px solid #c5e6f3}
.rule-list{padding-left:1.2rem}
.rule-list li{margin:.65rem 0}
.challenge{border:1px solid #e8c86b;background:linear-gradient(135deg,#fffaf0 0%,#f7fbfd 72%)}
.timer{font-variant-numeric:tabular-nums;font-size:clamp(3.5rem,9vw,7rem);font-weight:1000;letter-spacing:-.06em;text-align:center;margin:12px 0;color:#10263a}
.timer-controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.scoreboard{width:100%;border-collapse:collapse}
.scoreboard th,.scoreboard td{border-bottom:1px solid var(--line);padding:12px 10px;text-align:left}
.scoreboard input{width:100%;background:#fff;color:var(--text);border:1px solid var(--line-dark);border-radius:9px;padding:8px}
.pill{display:inline-flex;padding:7px 10px;border-radius:999px;background:#e7f6ef;color:#236d4d;font-weight:800;font-size:.9rem;margin:3px}
.code{background:#10263a;border:1px solid #203b51;border-radius:18px;padding:20px;overflow:auto;color:#f1f8fc;font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:.93rem;white-space:pre;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
.concept{border-top:4px solid var(--accent)}
.concept.gold{border-top-color:var(--accent2)}
.concept.green{border-top-color:var(--success)}
.callout{border-left:4px solid var(--accent2);padding:16px 18px;background:var(--accent2-soft);border-radius:0 14px 14px 0;color:#3f3520}
.reflection textarea{width:100%;min-height:92px;background:#fff;color:var(--text);border:1px solid var(--line-dark);border-radius:12px;padding:12px;font:inherit}
.reflection textarea:focus,.scoreboard input:focus{outline:3px solid rgba(22,119,168,.16);border-color:var(--accent)}
.footer{margin-top:54px;border-top:1px solid #1f3c52;background:var(--nav);color:#f4f9fc}
.footer-inner{max-width:var(--max);margin:auto;padding:30px 20px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-links{display:flex;gap:10px;flex-wrap:wrap}
.footer a{color:#c9dbe7;text-decoration:none}
.footer a:hover{color:#fff}
.tiny{font-size:.86rem;color:var(--muted)}
.footer .tiny{color:#aac2d2}
.rankline{font-size:clamp(1.5rem,3vw,2.5rem);font-weight:900;letter-spacing:.08em;color:#8b5d00}

/* Suit visuals, shared by student activity and presentation */
.suit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0;align-items:stretch}
.suit-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 10px;text-align:center;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 7px 18px rgba(35,73,98,.08)}
.suit-card img{display:block;width:min(100%,128px);max-height:128px;aspect-ratio:1;object-fit:contain;margin:0 auto 8px;border-radius:16px}
.suit-card strong{display:block;width:100%;font-size:clamp(.92rem,1.4vw,1.2rem);line-height:1.1;white-space:normal;overflow-wrap:normal;text-align:center;color:#10263a}
.student-suits .suit-card{background:#fdfefe}
.student-suits .suit-card img{width:min(100%,112px);max-height:112px}

/* presentation */
.presentation-body{overflow:hidden;background:#dfeaf0;color:#122033}
.presentation-top{position:fixed;left:0;right:0;top:0;z-index:50;height:56px;padding:9px 16px;display:flex;align-items:center;gap:12px;background:rgba(16,38,58,.97);border-bottom:1px solid #2e4d63;color:#fff}
.presentation-top .counter{margin-left:auto;color:#d7e4ec}
.slides{height:100vh;padding:74px 3vw 24px}
.slide{display:none;height:calc(100vh - 98px);max-width:1500px;margin:0 auto;padding:62px clamp(28px,5vw,78px);overflow:auto;background:#fbfdfe;border:1px solid #c8d8e3;border-radius:26px;box-shadow:0 24px 70px rgba(36,66,85,.24);color:#122033}
.slide.active{display:flex;flex-direction:column;justify-content:center}
.slide .kicker{text-transform:uppercase;letter-spacing:.16em;color:#176a93;font-weight:900}
.slide h1,.slide h2{font-size:clamp(3rem,7vw,7rem);line-height:.95;letter-spacing:-.055em;margin:.15em 0 .3em;color:#10263a}
.slide h2{font-size:clamp(2.6rem,6vw,5.7rem)}
.slide p,.slide li{font-size:clamp(1.2rem,2.2vw,2rem);color:#2e4053}
.slide strong{color:#0d1b2a}
.slide .big-question{font-size:clamp(2.2rem,5vw,4.5rem);font-weight:900;line-height:1.08;color:#0d1b2a}
.slide-nav{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;gap:8px}
.slide-nav button{width:50px;height:50px;border-radius:50%;border:1px solid #31465c;background:#102137;color:white;font-size:1.4rem;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.2)}
.slide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.slide .mini{background:#f1f6f9;border:1px solid #cbd7e3;border-radius:18px;padding:20px;color:#1d2c3a}
.slide .mini h3{color:#0d1b2a}
.slide .mini p{color:#2f4254}
.slide .code{background:#10263a;border-color:#29475d;color:#f1f8fc}
.presentation-timer{position:fixed;left:50%;transform:translateX(-50%);top:66px;z-index:70;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #b8c7d6;border-radius:16px;background:rgba(255,255,255,.97);box-shadow:0 12px 30px rgba(0,0,0,.16);color:#0d1b2a;backdrop-filter:blur(12px)}
.presentation-timer span{font-variant-numeric:tabular-nums;font-size:1.35rem;font-weight:1000;min-width:105px;text-align:center}
.presentation-timer button{border:1px solid #31465c;background:#102137;color:#fff;border-radius:10px;padding:8px 10px;font-weight:800;cursor:pointer}
.slide-timer-button{align-self:flex-start;margin-top:18px;font-size:1.1rem}
.slide ol{max-width:1050px}
.slide code{font-size:.9em}

/* Suit cards in split presentation layouts use a 2x2 grid for readability. */
.slide-grid .suit-grid,.mini .suit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.slide-grid .suit-card img,.mini .suit-card img{width:min(100%,110px);max-height:110px}
.slide-grid .suit-card strong,.mini .suit-card strong{font-size:clamp(.88rem,1.35vw,1.15rem)}

@media(max-width:760px){
  .grid-2,.grid-3,.grid-4,.slide-grid{grid-template-columns:1fr}
  .hero{padding-top:52px}
  .nav{align-items:flex-start}
  .nav-links{font-size:.9rem}
  .suit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slides{padding:70px 10px 10px}
  .slide{height:calc(100vh - 82px);padding:120px 22px 30px;border-radius:18px}
  .slide h1,.slide h2{font-size:clamp(2.6rem,13vw,4.8rem)}
  .presentation-timer{top:62px;gap:4px;padding:6px 8px}
  .presentation-timer span{font-size:1rem;min-width:82px}
  .presentation-timer button{padding:6px 7px;font-size:.75rem}
}