*{box-sizing:border-box}
:root{--ink:#18364f;--muted:#64798b;--bg1:#dff7ff;--bg2:#fff8dc;--accent:#ff9f1c}
body{margin:0;min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--bg1),#f5fcff 55%,var(--bg2))}
.wrap{width:min(920px,calc(100% - 28px));margin:auto;padding:36px 0 28px}
.hero{text-align:center;padding:12px 10px 30px}
.island{font-size:5rem;filter:drop-shadow(0 8px 10px #0002)}
.eyebrow{font-weight:900;letter-spacing:.18em;color:#4382a4;margin:8px 0}
h1{font-size:clamp(2.6rem,8vw,5rem);line-height:.95;margin:8px 0 14px}
.intro{font-size:1.15rem;color:var(--muted);max-width:620px;margin:0 auto}
.games{display:grid;gap:16px}
.game{display:grid;grid-template-columns:82px 1fr auto;gap:18px;align-items:center;text-decoration:none;color:inherit;background:rgba(255,255,255,.95);padding:20px;border-radius:26px;box-shadow:0 10px 28px #0002;border:3px solid transparent}
.game.active{transition:.16s ease}.game.active:hover{transform:translateY(-4px);border-color:#b9e9ff}
.game.locked{opacity:.58}.icon{font-size:3.2rem;text-align:center}
.game h2{margin:5px 0 4px;font-size:1.45rem}.game p{margin:0;color:var(--muted)}
.tag{display:inline-block;background:#dcf8e8;color:#147b45;font-size:.72rem;font-weight:1000;padding:5px 9px;border-radius:999px}
.tag.soon{background:#eef2f5;color:#667985}.arrow,.lock{font-size:2rem;font-weight:900}.arrow{color:var(--accent)}
footer{text-align:center;color:#738596;padding:28px 0 8px;font-size:.9rem}
@media(max-width:620px){.wrap{padding-top:18px}.game{grid-template-columns:58px 1fr auto;padding:16px;gap:12px;border-radius:20px}.icon{font-size:2.5rem}.game h2{font-size:1.14rem}.game p{font-size:.9rem}}