/* Seaside Station — generated key art + local, responsive game chrome. */
:root { --ink:#174e4b; --ink-soft:#5f8177; --gold:#f6bc44; --gold-deep:#c48728; }
html,body { background:#163f3b; }
.ambient { background:radial-gradient(ellipse at 50% 35%,#6eaa9b,#193e3a 75%); }
.orb { display:none; }
.stage { background:#f8edcb; box-shadow:0 35px 100px #062c3290,0 0 0 1px #e3e7cc70; }
.screen-home { padding:calc(var(--safe-top) + 18px) 20px calc(var(--safe-bottom) + 16px); background:#f9eecb url('../assets/seaside-station.webp') center 54% / cover no-repeat; }
.screen-home::before { inset:0; width:auto; height:auto; border-radius:0; background:linear-gradient(180deg,#fff4d830,transparent 35%,transparent 67%,#f4f2da65 83%,#f4efdcd9); box-shadow:none; }
.screen-home::after { display:none; }
.home-top { gap:6px; }
.brand { background:#fff8e8b8; border-color:#fffbed; color:#205c56; font-size:11px; padding:5px 9px 5px 5px; }
.brand img { width:20px; height:20px; }
.home-tools { gap:5px; }
.chip-btn { height:34px; border-radius:11px; background:#fff9e9cc; border-color:#fffaf0; color:#255d56; box-shadow:0 3px 8px #425a3210; padding:0 8px; }
.hub-link span { display:none; }
.hub-link { width:34px; padding:0; justify-content:center; }
.home-hero { position:absolute; top:12%; left:20px; right:20px; padding:0; gap:8px; }
.kicker { color:#438b7d; font-size:10px; letter-spacing:.4em; }
.title { color:#175b55; font-size:clamp(28px,10.8cqw,48px); letter-spacing:-.04em; text-shadow:0 2px 0 #fff9df; line-height:1.12; }
.tagline { color:#4d7869; font-size:clamp(11px,3.1cqw,14px); font-weight:600; max-width:22em; line-height:1.7; }
.stars-line { margin-top:4px; font-size:10px; padding:5px 12px; color:#797047; background:#fff9e4b8; border-color:#fffcdf; }
.home-actions { position:absolute; left:24px; right:24px; bottom:calc(6% + var(--safe-bottom)); width:auto; max-width:none; gap:12px; padding:0; }
.btn { border-radius:15px; }
.btn-primary { background:linear-gradient(#ffc95b,#f3b638); color:#594013; border:1px solid #ffdc85; box-shadow:0 4px 0 #c78a29,0 10px 22px #8a83402b,inset 0 1px #fff3bb; }
.btn-primary:active { box-shadow:0 1px 0 #c78a29; }
.btn-play { height:58px; font-size:18px; border-radius:18px; }
.btn-soft { color:#28645b; background:#fffcf0e8; border-color:#fffbed; box-shadow:0 3px 0 #a9c4ad80,0 5px 12px #244d3a0c; border-radius:13px; font-size:12px; padding:12px 8px; }
.link-btn { color:#336b5d; text-decoration:none; font-size:11px; padding:0; }
.credit { position:absolute; bottom:calc(1.5% + var(--safe-bottom)); left:15px; right:15px; font-size:8px; color:#4b7468b3; }
.hud { padding-top:calc(var(--safe-top) + 14px); }
.hud-mid { background:#1b625bec; border:1px solid #47857b; border-radius:15px; padding:7px 20px; box-shadow:0 4px 0 #134b45,0 8px 20px #255b4020; }
.hud-level { color:#fff6d9; font-size:15px; }
.hud-sub { color:#c4dfc8; font-size:10px; margin-top:3px; }
.icon-btn { color:#27635c; background:#fff9e9ed; border-color:#fffdf0; box-shadow:0 3px 0 #b9cbb2,0 6px 14px #1c4b3418; border-radius:13px; }
.ctrl { color:#29675c; background:#fffbebf5; border-color:#fffdf0; box-shadow:0 4px 0 #adc9b3,0 6px 14px #1c4b3412; }
.ctrl-hint { background:#ffe3a0; border-color:#ffedb9; color:#8b641f; box-shadow:0 4px 0 #d4af68; }
.screen-levels { background:linear-gradient(#fff4d4ec,#edf5e5f5 32%),url('../assets/seaside-station.webp') center / cover; }
.sub-header h2 { color:#245e53; }
.levels-sub { color:#678a75; }
.level-grid { gap:10px; padding-top:10px; }
.level-btn { background:#fffbed; border-color:#fffdf3; color:#27685b; box-shadow:0 3px 0 #c3d8bc; border-radius:15px; }
.level-btn.current { background:#2c8375; color:#fff8dc; border-color:#4fa794; box-shadow:0 4px 0 #1c655b,0 0 0 3px #a8d3b8; }
.level-btn.locked { background:#dfe9d6a8; color:#96ae99; }
.level-btn.perfect { background:#fff0bd; border-color:#f2cc71; }
.panel { background:#fffbee; border:1px solid #f5eed8; box-shadow:0 22px 60px #103e3d55; }
.panel-title { color:#205e53; }
.panel-sub,.steps p { color:#648475; }
.steps li { background:#eef4e5; border-color:#dfe9ce; }
.steps h3 { color:#2f6555; }
button:focus-visible,a:focus-visible { outline:3px solid #258b79; outline-offset:4px; }
@media (max-width:360px) { .home-hero { top:11%; } .title { font-size:10cqw; } .home-actions { left:18px;right:18px;gap:9px; } .btn-play {height:52px;} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }