@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,500;8..60,700&display=swap");
:root{--sea:#0e2f3a;--ice:#7eb8c4;--sand:#e8d5b5;--foam:#f4f7f6;--ink:#e8d5b5;--mute:#b7c9ce;--b:"Outfit",system-ui,sans-serif;--d:"Source Serif 4",Georgia,serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:
  radial-gradient(800px 400px at 80% -10%,rgba(126,184,196,.18),transparent 50%),
  var(--sea);color:var(--ink);font-family:var(--b);line-height:1.6}
body.is-locked{overflow:hidden}[hidden]{display:none!important}
img{max-width:100%;display:block;height:auto}a{color:inherit;text-decoration:none}
.dock{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 5vw;background:rgba(14,47,58,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(232,213,181,.15)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand img{width:36px;height:36px}
nav.dots{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:.9rem}
nav.dots span{opacity:.35}
.acts{display:flex;gap:8px;align-items:center}
.player-name{color:var(--ice);font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--sand);background:transparent;color:var(--sand);font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.btn-fill{background:var(--ice);color:var(--sea);border-color:var(--ice)}
.intro{padding:10vh 5vw 6vh;max-width:52rem}
.intro h1{font-family:var(--d);font-size:clamp(2.2rem,5vw,4rem);line-height:1.12;margin:0 0 .4em;color:#f4f7f6}
.intro p{color:var(--mute);font-size:1.08rem;max-width:42ch}
.intro-pic{padding:0 5vw 5vh}
.intro-pic img{width:100%;height:min(52vh,480px);object-fit:cover;border-radius:28px}
.map{padding:0 5vw 8vh;display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:auto auto;gap:16px}
.isle{background:rgba(244,247,246,.04);border:1px solid rgba(232,213,181,.16);border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.isle.lg{grid-row:1 / span 2}
.isle img{width:100%;height:180px;object-fit:cover}
.isle.lg img{height:100%;min-height:340px;max-height:520px}
.isle .txt{padding:16px 16px 18px}
.isle h2{font-family:var(--d);margin:0 0 6px;font-size:1.45rem;color:#f4f7f6}
.isle p{color:var(--mute);margin:0 0 12px;font-size:.92rem}
.note{margin:0 5vw 8vh;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.note img{width:100%;height:340px;object-fit:cover;border-radius:24px}
.card{background:var(--sand);color:var(--sea);padding:24px;border-radius:24px}
.card h2{font-family:var(--d);margin-top:0}
.card p{color:#3d4e55}
.card .btn-fill{background:var(--sea);color:var(--sand);border-color:var(--sea)}
.bottom{padding:28px 5vw 40px;border-top:1px solid rgba(232,213,181,.14);font-size:.86rem;color:var(--mute)}
.bottom nav{display:flex;flex-wrap:wrap;gap:10px 16px;margin:10px 0}
.age{display:inline-flex;width:28px;height:28px;border:1px solid var(--sand);align-items:center;justify-content:center;font-size:.72rem;font-weight:700;margin-right:6px}
.burger{display:none;border:1px solid var(--sand);background:transparent;color:var(--sand);width:40px;height:40px;border-radius:50%;cursor:pointer}
.overlay{position:fixed;inset:0;background:rgba(6,18,24,.6);display:none;align-items:center;justify-content:center;z-index:70;padding:20px}
.overlay.is-open{display:flex}
.modal,.age-box{width:min(430px,100%);background:#123742;border:1px solid rgba(232,213,181,.25);border-radius:22px;padding:22px;position:relative}
.close-x{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--sand);background:transparent;color:var(--sand);cursor:pointer}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:rgba(0,0,0,.2);border-radius:999px;padding:4px;margin:0 40px 14px 0}
.tabs button{border:0;background:transparent;min-height:36px;border-radius:999px;color:var(--sand);font:inherit;font-weight:700;cursor:pointer}
.tabs button.is-on{background:var(--ice);color:var(--sea)}
.field{display:grid;gap:6px;margin-bottom:10px}
.field span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.field input{min-height:42px;border-radius:12px;border:1px solid rgba(232,213,181,.25);background:#0e2f3a;color:var(--sand);padding:0 10px;font:inherit}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.marks{display:flex;gap:6px;margin:8px 0}
.mark{width:36px;height:36px;border-radius:10px;border:1px solid rgba(232,213,181,.3);background:#0e2f3a;color:var(--sand);cursor:pointer}
.mark:has(input:checked){background:var(--ice);color:var(--sea);border-color:var(--ice)}
.mark input{display:none}
.consent{display:flex;gap:8px;font-size:.88rem}
.auth-error{color:#e07a5f;font-size:.86rem}
.switch-line{text-align:center;margin-top:12px}
.switch-line button{background:none;border:0;color:var(--ice);font:inherit;text-decoration:underline;cursor:pointer}
.cookie-bar{position:fixed;left:5vw;right:5vw;bottom:16px;z-index:60;background:#123742;border:1px solid rgba(232,213,181,.2);border-radius:16px;padding:12px 14px;display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}
.prose{padding:8vh 5vw 12vh;max-width:68ch}
@media(max-width:860px){
  .map{grid-template-columns:1fr}
  .isle.lg{grid-row:auto}
  .note{grid-template-columns:1fr}
  nav.dots{display:none;position:absolute;left:0;right:0;top:60px;background:#0e2f3a;flex-direction:column;padding:14px 5vw 18px}
  nav.dots.is-open{display:flex}
  .burger{display:inline-flex;align-items:center;justify-content:center}
}