@font-face {
  font-family: 'Fredoka Variable';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fredoka.woff2) format('woff2');
}

:root {
  --bg: #04060d;
  --ink: #eaf6ff;
  --muted: rgba(234, 246, 255, 0.62);
  --glow: #b6ff72;
  --glow-2: #62ffd8;
  --star: #ffd66b;
  --danger: #ff6b6b;
  --wisp: #c58cff;
  --glass: rgba(10, 18, 32, 0.66);
  --line: rgba(182, 255, 114, 0.18);
  --font: 'Fredoka Variable', 'Fredoka', ui-rounded, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(1200px 700px at 20% -10%, rgba(30, 60, 50, 0.55), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(40, 30, 80, 0.45), transparent 60%), var(--bg);
  color: var(--ink);
  font: 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--glow-2); }
h1, h2, h3 { line-height: 1.1; margin: 0; }
p { margin: 0; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--glow); color: #06200f; padding: 8px 12px; border-radius: 8px; z-index: 10; }

/* ---------- hero ---------- */
.hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 12px;
  text-align: center;
}
.back { display: inline-block; margin-bottom: 26px; color: var(--muted); text-decoration: none; font-size: 15px; }
.back:hover { color: var(--ink); }
.eyebrow { color: var(--glow-2); letter-spacing: 0.28em; text-transform: uppercase; font-size: 13px; }
.hero h1 { font-size: clamp(36px, 7vw, 68px); font-weight: 700; margin-top: 8px; }
.word { color: #f4ffe6; text-shadow: 0 0 16px rgba(182, 255, 114, 0.9), 0 0 48px rgba(98, 255, 216, 0.55); }
.word i { font-style: normal; font-weight: 400; color: var(--glow-2); }
.lede { max-width: 720px; margin: 18px auto 0; font-size: clamp(17px, 2.2vw, 20px); color: rgba(234, 246, 255, 0.85); }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.quick { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; list-style: none; margin: 34px 0 0; padding: 0; color: var(--muted); font-size: 15px; }
.quick li { display: flex; align-items: center; gap: 8px; }

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 18, 32, 0.6);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.12s, box-shadow 0.2s, background 0.2s;
}
.btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.1); }
.btn.primary { border-color: transparent; background: linear-gradient(135deg, var(--glow), var(--glow-2)); color: #06200f; box-shadow: 0 0 28px rgba(182, 255, 114, 0.4); }
.btn.primary:hover { box-shadow: 0 0 44px rgba(182, 255, 114, 0.7); }
.btn.big { font-size: 22px; padding: 16px 40px; }

/* ---------- layout ---------- */
main { max-width: 1100px; margin: 0 auto; padding: 0 24px 40px; }
.section { padding: 56px 0 8px; }
.section h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; color: #f4ffe6; text-shadow: 0 0 18px rgba(182, 255, 114, 0.35); }
.sub { margin: 8px 0 0; color: var(--muted); font-size: 17px; }
.grid { display: grid; gap: 18px; margin-top: 26px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.align { align-items: center; }

.card {
  padding: 24px;
  border-radius: 22px;
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.card.accent { border-color: rgba(182, 255, 114, 0.45); box-shadow: 0 0 40px rgba(182, 255, 114, 0.12), 0 18px 50px rgba(0, 0, 0, 0.35); }
.card h3 { font-size: 22px; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card p { margin-top: 10px; color: rgba(234, 246, 255, 0.86); }
.card b { color: #fff; }
.facts { margin: 14px 0 0; padding: 0; list-style: none; }
.facts li { position: relative; padding: 6px 0 6px 24px; }
.facts li::before { content: ''; position: absolute; left: 3px; top: 0.95em; width: 9px; height: 9px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 10px var(--glow); }
.facts.big li { font-size: 18px; padding: 8px 0 8px 26px; }
.pts { font-size: 14px; padding: 2px 9px; border-radius: 999px; background: rgba(255, 214, 107, 0.16); color: var(--star); font-weight: 700; }
.tag { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(98, 255, 216, 0.12); color: var(--glow-2); font-weight: 600; }

/* ---------- keycaps ---------- */
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 48px;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #2a3446, #161d2b);
  color: #f4ffe6;
  font: 600 17px var(--font);
  box-shadow: 0 5px 0 #0b0f18, 0 6px 0 1px rgba(182, 255, 114, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateY(0);
  vertical-align: middle;
}
.key small { font-size: 11px; font-weight: 500; color: var(--glow-2); letter-spacing: 0.08em; text-transform: uppercase; }
.key.sm { min-width: 38px; height: 34px; padding: 0 10px; font-size: 14px; border-radius: 9px; box-shadow: 0 3px 0 #0b0f18, 0 4px 0 1px rgba(182, 255, 114, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.key.wide { min-width: 200px; }
.key.hold { border: 1px solid rgba(182, 255, 114, 0.5); }
.keys { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-top: 18px; }
@keyframes press {
  0%, 60%, 100% { transform: translateY(0); box-shadow: 0 5px 0 #0b0f18, 0 6px 0 1px rgba(182, 255, 114, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
  66%, 80% { transform: translateY(4px); box-shadow: 0 1px 0 #0b0f18, 0 2px 0 1px rgba(182, 255, 114, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 24px rgba(182, 255, 114, 0.45); background: linear-gradient(180deg, #34435a, #1c2536); }
}
@keyframes press-hold {
  0%, 20%, 100% { transform: translateY(0); box-shadow: 0 5px 0 #0b0f18, 0 6px 0 1px rgba(182, 255, 114, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
  25%, 75% { transform: translateY(4px); box-shadow: 0 1px 0 #0b0f18, 0 2px 0 1px rgba(182, 255, 114, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 34px rgba(182, 255, 114, 0.6); background: linear-gradient(180deg, #3b5a3a, #1c2b1e); }
}
.press { animation: press 2.4s ease-in-out infinite; }
.press.d2 { animation-delay: 0.3s; }
.press.d3 { animation-delay: 0.6s; }
.press.slow { animation: press-hold 3.2s ease-in-out infinite; }

.devices { display: flex; gap: 26px; margin-top: 22px; }
.device { margin: 0; text-align: center; color: var(--muted); font-size: 14px; }
.device svg { width: 64px; height: 84px; display: block; margin: 0 auto 6px; }
.device .ln { fill: none; stroke: #dfe9ff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.device .fill { fill: rgba(182, 255, 114, 0.25); }
.device .click { animation: click 2.4s ease-in-out infinite; }
@keyframes click { 0%, 60%, 100% { fill: rgba(182, 255, 114, 0.2); } 66%, 80% { fill: rgba(182, 255, 114, 0.95); } }
.device .tapring { fill: none; stroke: var(--glow); stroke-width: 2; opacity: 0; animation: tap 2.4s ease-out infinite; transform-origin: 24px 10px; }
@keyframes tap { 0%, 60% { opacity: 0; transform: scale(0.4); } 66% { opacity: 1; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.6); } }

.kv { margin: 14px 0 0; }
.kv div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); align-items: start; }
.kv div:first-child { border-top: 0; padding-top: 0; }
.kv dt { color: var(--glow-2); font-weight: 600; }
.kv dd { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 15px; }

/* ---------- light ring ---------- */
.ring-demo { margin: 0; text-align: center; }
.ring-demo svg { width: min(260px, 60vw); height: auto; transform: rotate(-90deg); }
.ring-track { fill: rgba(4, 8, 16, 0.6); stroke: rgba(255, 255, 255, 0.12); stroke-width: 9; }
.ring-fill { fill: none; stroke: var(--glow); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 314.16; filter: drop-shadow(0 0 6px var(--glow)); animation: drain 10s linear infinite; }
.ring-core { fill: var(--glow); filter: drop-shadow(0 0 14px var(--glow)); animation: dim 10s linear infinite; }
@keyframes drain { 0% { stroke-dashoffset: 0; stroke: var(--glow); } 74% { stroke: var(--glow); } 76% { stroke: var(--danger); } 100% { stroke-dashoffset: 314.16; stroke: var(--danger); } }
@keyframes dim { 0% { opacity: 1; } 100% { opacity: 0.2; } }
.ring-demo figcaption { margin-top: 10px; color: var(--muted); font-size: 15px; }

/* ---------- icon cards ---------- */
.icon-card { display: grid; grid-template-columns: 74px 1fr; column-gap: 16px; align-items: start; }
.icon-card h3 { grid-column: 2; }
.icon-card p { grid-column: 2; }
.icon { grid-row: 1 / span 2; width: 74px; height: 74px; border-radius: 18px; background: rgba(255, 255, 255, 0.05); display: grid; place-items: center; }
.icon svg { width: 52px; height: 52px; fill: #dfe9ff; }
.icon.star svg { fill: var(--star); filter: drop-shadow(0 0 10px rgba(255, 214, 107, 0.8)); }
.icon.spark svg { fill: var(--glow); filter: drop-shadow(0 0 8px var(--glow)); }
.icon.crystal svg { fill: #7ff0ff; filter: drop-shadow(0 0 10px rgba(127, 240, 255, 0.8)); }
.icon.fan svg { fill: #1ba7e0; }
.icon.fan .spin { transform-origin: 32px 32px; animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon .stem { fill: none; stroke: #8fb46a; stroke-width: 3; stroke-linecap: round; }
.icon.lantern .swing { transform-origin: 32px 2px; animation: swing 2.6s ease-in-out infinite alternate; }
.icon.lantern .glow { fill: #ffa040; filter: drop-shadow(0 0 8px #ffa040); }
.icon.lantern svg { fill: #3a2a1c; }
@keyframes swing { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
.icon.wisp svg { fill: #ecdcff; }
.icon.wisp .halo { fill: rgba(154, 108, 255, 0.55); animation: jitter 0.7s steps(2) infinite; }
@keyframes jitter { 50% { transform: translate(2px, -1px); } }
.icon.stalactite svg { fill: #6a7ea6; }
.icon.stalactite .drop { animation: drop 2.8s ease-in infinite; transform-origin: 26px 10px; }
@keyframes drop { 0%, 45% { transform: translateY(0); } 50%, 55% { transform: translate(1px, 0) rotate(1.5deg); } 60% { transform: translate(-1px, 0) rotate(-1.5deg); } 90%, 100% { transform: translateY(26px); opacity: 0; } }
.icon.bat svg { fill: #2a2032; }
.icon.bat .eye { fill: #ff3030; filter: drop-shadow(0 0 4px #ff3030); animation: blink 3s steps(1) infinite; }
@keyframes blink { 0%, 88%, 100% { opacity: 1; } 90%, 96% { opacity: 0; } }
.icon.gate svg { fill: #8a8068; }
.icon.gate .gap { fill: none; stroke: var(--glow); stroke-width: 2; stroke-dasharray: 3 3; }
.icon.web .stem { stroke: #dde8ff; stroke-width: 1.4; }
.icon.storm .bolt { fill: #fff2a8; filter: drop-shadow(0 0 10px #fff2a8); animation: flash 4s steps(1) infinite; }
@keyframes flash { 0%, 100% { opacity: 0.35; } 10%, 14% { opacity: 1; } 12% { opacity: 0.4; } 20% { opacity: 0.35; } }

/* ---------- zones ---------- */
.zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: zone; }
.zone { position: relative; padding: 22px 20px 20px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; }
.zone .n { position: absolute; right: 14px; top: 10px; font-size: 44px; font-weight: 700; opacity: 0.12; }
.zone h3 { font-size: 20px; font-weight: 600; }
.zone p { margin-top: 8px; color: rgba(234, 246, 255, 0.8); font-size: 15px; }
.zone.forest { background: linear-gradient(160deg, #103224, #0b1726); }
.zone.marsh { background: linear-gradient(160deg, #2a1a4a, #1a1030); }
.zone.cave { background: linear-gradient(160deg, #0f1e44, #060a18); }
.zone.ruins { background: linear-gradient(160deg, #3a2c12, #161208); }
.zone.storm { background: linear-gradient(160deg, #26324a, #0e1420); }

/* ---------- scoring ---------- */
.score { width: 100%; border-collapse: collapse; background: var(--glass); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.score th, .score td { padding: 14px 18px; text-align: left; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.score tr:first-child th, .score tr:first-child td { border-top: 0; }
.score th { font-weight: 600; color: rgba(234, 246, 255, 0.9); }
.score td { color: var(--star); font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(10, 18, 32, 0.8); color: var(--muted); font-size: 14px; white-space: nowrap; }
.chip b { color: var(--ink); }

.tips { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.tips li { padding: 16px 20px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); color: rgba(234, 246, 255, 0.86); }
.tips b { color: #fff; }

.video-wrap { margin-top: 22px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.video-wrap video { display: block; width: 100%; aspect-ratio: 16 / 9; }

.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot.star { background: var(--star); box-shadow: 0 0 10px var(--star); }
.dot.wisp { background: var(--wisp); box-shadow: 0 0 10px var(--wisp); }

.cta { text-align: center; padding: 70px 0 20px; }
.cta p { margin-top: 12px; }
footer { text-align: center; padding: 20px 24px 40px; color: var(--muted); font-size: 14px; }
footer a { color: var(--glow); text-decoration: none; font-weight: 600; }

@media (max-width: 560px) {
  .icon-card { grid-template-columns: 60px 1fr; column-gap: 12px; }
  .icon { width: 60px; height: 60px; }
  .icon svg { width: 42px; height: 42px; }
  .kv div { grid-template-columns: 1fr; gap: 4px; }
  .key.wide { min-width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .press, .press.slow, .click, .tapring, .spin, .swing, .halo, .drop, .eye, .bolt, .ring-fill, .ring-core { animation: none !important; }
}