@font-face{font-family:Gilmer;src:url('/assets/Gilmer-Bold.b4e74cd165453426.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Gilmer;src:url('/assets/Gilmer-Medium.dfe209dd65453426.woff2') format('woff2');font-weight:500;font-display:swap}
:root{color-scheme:light;--navy:#263f66;--coral:#c34b35;--cream:#fff4dc;--focus:#143b79}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Gilmer,Arial,sans-serif}button,a{font:inherit}button{cursor:pointer}
.landing{position:relative;isolation:isolate;min-height:100dvh;overflow:hidden;background:#55bde2;color:#fff}
.landing-art,.landing-shade{position:absolute;inset:0;pointer-events:none}
.landing-art{z-index:-2;background-image:url('/landing-island.jpg');background-position:center center;background-size:cover}
.landing-shade{z-index:-1;background:linear-gradient(90deg,rgba(35,123,183,.42) 0%,rgba(54,143,190,.22) 33%,transparent 66%),linear-gradient(0deg,rgba(17,95,140,.18),transparent 28%)}
.landing-menu{width:min(45vw,640px);padding:clamp(44px,7vh,80px) 0 100px clamp(30px,8vw,160px)}
.landing-logo{display:flex;flex-direction:column;align-items:flex-start;margin:0 0 clamp(56px,10vh,108px);font-size:clamp(58px,6.2vw,104px);font-weight:700;line-height:.86;letter-spacing:-.075em;color:#fff9e8;text-shadow:4px 6px 0 #ec8c97,0 12px 28px rgba(29,87,127,.22)}
.landing-logo span:last-child{font-size:1.12em}.landing-kicker{margin:.35rem 0 1.35rem;color:#fff6df;font-size:clamp(.72rem,1.15vw,1rem);font-weight:800;letter-spacing:.19em;text-shadow:0 .14rem .1rem rgba(37,54,100,.45)}.menu-actions{display:grid;gap:14px;width:min(100%,440px)}
.menu-button{display:flex;align-items:center;gap:22px;min-height:78px;padding:0 28px;border:5px solid rgba(255,255,255,.58);border-radius:999px;text-decoration:none;white-space:nowrap;box-shadow:0 10px 0 rgba(27,91,133,.22),inset 0 3px 0 rgba(255,255,255,.65);font-size:clamp(22px,2vw,31px);font-weight:700;line-height:1;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.menu-button:hover{transform:translateY(-3px);box-shadow:0 13px 0 rgba(27,91,133,.2),inset 0 3px 0 rgba(255,255,255,.65);filter:brightness(1.04)}.menu-button:active{transform:translateY(4px);box-shadow:0 4px 0 rgba(27,91,133,.2),inset 0 3px 0 rgba(255,255,255,.65)}
.menu-button-light{background:var(--cream);color:var(--navy)}.menu-button-play{min-height:94px;background:var(--coral);color:#fff;text-shadow:0 2px 0 rgba(145,49,38,.24);font-size:clamp(30px,2.6vw,42px)}
.menu-button:disabled{cursor:not-allowed;filter:saturate(.65);opacity:.72}.menu-button:disabled:hover{transform:none;box-shadow:0 10px 0 rgba(27,91,133,.22),inset 0 3px 0 rgba(255,255,255,.65)}
.button-symbol{display:inline-grid;flex:none;place-items:center;width:46px;height:46px;font-family:Arial,sans-serif;font-size:40px;font-weight:400}.play-symbol{font-size:33px}
.wallet-status{width:min(100%,440px);min-height:3em;margin:20px 0 0;padding:0 8px;color:#f9fff6;font-size:14px;font-weight:700;line-height:1.5;text-shadow:0 2px 5px rgba(24,73,116,.8)}
.social-link{display:inline-flex;align-items:center;gap:10px;margin:18px 0 0 8px;color:#fff9e8;font-size:14px;font-weight:700;text-decoration:none;text-shadow:0 2px 5px rgba(24,73,116,.8)}.social-link:hover{text-decoration:underline}.social-mark{display:grid;place-items:center;width:32px;height:32px;border:2px solid currentColor;border-radius:50%;font-family:Arial,sans-serif;font-size:17px;text-shadow:none}
.landing-tools{position:absolute;left:clamp(30px,8vw,160px);bottom:clamp(20px,4vh,44px);display:flex;align-items:center;gap:24px}.tool-button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;background:transparent;color:#fff9e8;font-family:Arial,sans-serif;font-size:30px;line-height:1;text-decoration:none;text-shadow:0 2px 8px rgba(24,73,116,.6);transition:transform .15s ease}.tool-button:hover{transform:translateY(-3px)}.tool-x{font-size:28px}
.tool-button svg{display:block;width:34px;height:34px;filter:drop-shadow(0 2px 5px rgba(24,73,116,.35))}.tool-x svg{width:31px;height:31px}#toggle-sound .sound-off-icon{display:none}#toggle-sound[aria-pressed="true"] .sound-on-icon{display:none}#toggle-sound[aria-pressed="true"] .sound-off-icon{display:block}
.settings-dialog{width:min(calc(100vw - 32px),440px);padding:0;border:5px solid #fff8e9;border-radius:28px;background:#d8f4ed;color:var(--navy);box-shadow:0 24px 0 rgba(40,100,137,.23),0 30px 80px rgba(20,58,92,.25)}.settings-dialog::backdrop{background:rgba(23,59,95,.48);backdrop-filter:blur(6px)}.settings-inner{position:relative;padding:32px}.settings-inner h2{margin:0 0 28px;font-size:32px}.dialog-close{position:absolute;top:16px;right:18px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:var(--navy);font-size:32px;line-height:1}.setting-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer}.setting-row strong,.controls strong{display:block;font-size:17px}.setting-row small{display:block;margin-top:4px;color:#4e6580;font-size:13px;line-height:1.4}.setting-row input{position:absolute;right:4px;width:50px;height:30px;opacity:0;cursor:pointer}.setting-switch{flex:none;width:54px;height:32px;border-radius:99px;background:#95aabd;transition:background .18s}.setting-switch:after{display:block;width:24px;height:24px;margin:4px;border-radius:50%;background:#fff;content:"";box-shadow:0 2px 4px #31547655;transition:transform .18s}.setting-row input:checked+.setting-switch{background:#41b79c}.setting-row input:checked+.setting-switch:after{transform:translateX(22px)}.setting-row input:focus-visible+.setting-switch{outline:3px solid var(--focus);outline-offset:3px}.controls{margin-top:28px;padding-top:22px;border-top:1px solid #8bc9c3}.controls p,.settings-note{font-size:14px;line-height:1.5}.settings-note{margin:22px 0 0;color:#4e6580}
.settings-dialog{width:min(calc(100vw - 32px),600px);border-color:#fff6e4;background:#fff1d8;color:#543b2d;box-shadow:0 14px 0 rgba(104,64,42,.22),0 30px 80px rgba(20,58,92,.25)}.settings-inner{padding:38px}.settings-kicker{margin:0 0 16px;text-transform:uppercase;letter-spacing:.18em;font-size:14px;font-weight:700;color:#997351}.settings-inner h2{max-width:480px;margin:0 32px 26px 0;font-size:clamp(30px,5vw,52px);line-height:1.08}.dialog-close{background:transparent;color:#543b2d}.setting-slider{display:grid;grid-template-columns:1fr auto;gap:20px;margin:0 0 14px;padding:18px 20px;border:2px solid #efd5ad;border-radius:18px;background:#fceacc;font-size:18px;font-weight:700}.setting-slider output{color:#925b36}.setting-slider input{grid-column:1/-1;width:100%;height:18px;margin:2px 0 0;accent-color:#ef6b42;cursor:pointer}.setting-action{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:64px;margin:12px 0;padding:0 22px;border:2px solid #ffe6bf;border-radius:999px;background:#fff4dc;color:#543b2d;box-shadow:0 6px 0 #b99672;font-weight:700;font-size:18px;text-align:left}.setting-action:hover{transform:translateY(-2px)}.setting-action:active{transform:translateY(3px);box-shadow:0 3px 0 #b99672}.settings-note{margin:25px 2px 0;color:#776250;font-size:13px}
:is(button,a):focus-visible{outline:4px solid var(--focus);outline-offset:4px}
@media(max-width:760px){.landing-art{background-position:63% center}.landing-shade{background:linear-gradient(0deg,rgba(37,112,160,.84) 0%,rgba(43,127,175,.4) 58%,rgba(55,155,200,.18) 100%)}.landing-menu{display:flex;flex-direction:column;justify-content:flex-end;width:100%;min-height:100dvh;padding:34px 24px 115px}.landing-logo{margin:0 auto auto 0;font-size:clamp(58px,12vw,84px)}.menu-actions{width:min(100%,420px);margin:0 auto}.menu-button{min-height:66px;padding:0 22px;font-size:22px}.menu-button-play{min-height:80px;font-size:31px}.button-symbol{width:39px;font-size:32px}.play-symbol{font-size:28px}.wallet-status{width:min(100%,420px);margin:16px auto 0}.landing-tools{left:24px;bottom:20px}.settings-inner{padding:28px}}
@media(max-height:680px) and (min-width:761px){.landing-menu{padding-top:32px}.landing-logo{margin-bottom:35px;font-size:clamp(56px,5vw,80px)}.menu-button{min-height:64px}.menu-button-play{min-height:76px}.menu-actions{gap:10px}.wallet-status{margin-top:10px}}
@media(prefers-reduced-motion:reduce){.menu-button,.setting-switch,.setting-switch:after{transition:none}}

/* Original Coastal World-inspired molded controls. No Claybound image assets are reused. */
:root{--cw-ink:#403b78;--cw-shell:#84decf;--cw-shell-dark:#4eb9ad;--cw-pink:#e79599;--cw-cream:#fff0cf;--cw-orange:#ed674b}
.landing-shade{background:linear-gradient(90deg,rgba(18,91,149,.30) 0%,rgba(27,118,169,.12) 31%,transparent 62%),linear-gradient(0deg,rgba(16,85,128,.14),transparent 25%)}
.menu-actions{gap:17px}
.menu-button{
  position:relative;isolation:isolate;min-height:82px;border:3px solid #fff9e8;
  background:radial-gradient(circle at 21% 17%,rgba(255,255,255,.95) 0,transparent 30%),linear-gradient(180deg,#fff8df 0%,#ffeecb 47%,#f2d3a5 100%);
  color:var(--cw-ink);box-shadow:inset 0 3px 3px rgba(255,255,255,.9),inset 0 -8px 12px rgba(187,120,73,.25),0 7px 0 #c7916e,0 13px 0 #935d69,0 20px 30px rgba(20,67,109,.28);
  text-shadow:0 1px 0 #fff8eb;transform:translateY(0);transition:transform .2s cubic-bezier(.2,.9,.25,1),box-shadow .2s cubic-bezier(.2,.9,.25,1),filter .2s ease
}
.menu-button::after{content:"";position:absolute;inset:3px 12px auto;height:40%;border-radius:999px 999px 65% 65%;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0));pointer-events:none}
.menu-button:hover:not(:disabled){transform:translateY(-3px);box-shadow:inset 0 3px 3px rgba(255,255,255,.9),inset 0 -8px 12px rgba(187,120,73,.25),0 10px 0 #c7916e,0 16px 0 #935d69,0 25px 35px rgba(20,67,109,.28);filter:brightness(1.03)}
.menu-button:active:not(:disabled){transform:translateY(7px);box-shadow:inset 0 2px 5px rgba(159,104,75,.25),inset 0 -3px 5px rgba(187,120,73,.2),0 2px 0 #935d69,0 7px 12px rgba(20,67,109,.2)}
.menu-button-play{min-height:100px;border-color:#ffc7a4;background:radial-gradient(circle at 25% 7%,rgba(255,205,139,.65),transparent 34%),linear-gradient(180deg,#ff9b64 0%,#f8734f 45%,#da4a35 100%);color:#fff9ec;text-shadow:0 2px 1px rgba(130,43,38,.42);box-shadow:inset 0 3px 4px rgba(255,211,167,.58),inset 0 -8px 11px rgba(126,35,31,.3),0 8px 0 #b34634,0 14px 0 #803d50,0 22px 34px rgba(26,65,105,.32)}
.menu-button-play:hover:not(:disabled){box-shadow:inset 0 3px 4px rgba(255,211,167,.58),inset 0 -8px 11px rgba(126,35,31,.3),0 11px 0 #b34634,0 17px 0 #803d50,0 27px 38px rgba(26,65,105,.32)}
.menu-button-play:active:not(:disabled){box-shadow:inset 0 3px 7px rgba(127,41,32,.4),0 2px 0 #803d50,0 7px 12px rgba(26,65,105,.2)}
.menu-button:disabled{opacity:1;filter:saturate(.7) brightness(.88);cursor:not-allowed}.menu-button:disabled:hover{transform:none;box-shadow:inset 0 3px 4px rgba(255,211,167,.58),inset 0 -8px 11px rgba(126,35,31,.3),0 8px 0 #b34634,0 14px 0 #803d50,0 22px 34px rgba(26,65,105,.32)}
.button-symbol{position:relative;z-index:1;color:inherit;text-shadow:0 2px 2px rgba(75,59,104,.22)}.button-label{position:relative;z-index:1}
.wallet-status{margin-top:25px;text-shadow:0 2px 4px rgba(19,61,100,.85)}

.settings-dialog{position:relative;width:min(calc(100vw - 30px),640px);max-height:min(calc(100dvh - 34px),900px);overflow:auto;border:11px solid #ffe6d8;border-radius:44px;background:var(--cw-shell);color:var(--cw-ink);box-shadow:inset 0 0 0 7px rgba(255,255,255,.34),inset 0 -15px 24px rgba(35,144,137,.17),0 13px 0 var(--cw-pink),0 24px 0 #ac696e,0 38px 75px rgba(18,58,94,.4)}
.settings-dialog::backdrop{background:rgba(36,46,85,.55);backdrop-filter:blur(5px)}
.settings-inner{position:relative;padding:clamp(25px,4vw,42px);background:radial-gradient(circle at 14% 10%,rgba(241,255,239,.66),transparent 30%),linear-gradient(145deg,#a5ecda,#78d7c9 53%,#b4edd4)}
.settings-kicker{margin-bottom:12px;color:#55508b;font-size:14px;letter-spacing:.14em}
.settings-inner h2{margin:0 38px 28px 0;color:var(--cw-ink);font-size:clamp(32px,5vw,52px);line-height:1.05;text-shadow:0 2px 0 rgba(255,255,255,.55)}
.dialog-close{top:20px;right:20px;width:48px;height:48px;border:3px solid #fff8e9;border-radius:50%;background:linear-gradient(180deg,#fffbef,#f6d4aa);color:var(--cw-ink);box-shadow:inset 0 2px 2px #fff,0 5px 0 #c88b78,0 9px 14px rgba(65,69,103,.2);font-size:34px;transition:transform .18s,box-shadow .18s}
.dialog-close:hover{transform:translateY(-2px)}.dialog-close:active{transform:translateY(4px);box-shadow:0 1px 0 #c88b78}
.setting-slider{margin-bottom:18px;padding:18px 23px 21px;border:3px solid #fff9e7;border-radius:25px;background:radial-gradient(circle at 18% 0%,rgba(255,255,255,.85),transparent 35%),linear-gradient(180deg,#fff8df,#ffe9bd);box-shadow:inset 0 2px 2px #fff, inset 0 -5px 8px rgba(200,145,96,.18),0 6px 0 #d69e80,0 10px 16px rgba(38,102,112,.15);color:var(--cw-ink);font-size:18px}
.setting-slider output{color:#69579a}
.setting-slider input{appearance:none;-webkit-appearance:none;height:14px;margin:6px 0 2px;border:2px solid #c6987e;border-radius:999px;background:linear-gradient(180deg,#c89e81,#efd1a8 65%,#f6dfb5);box-shadow:inset 0 2px 4px rgba(91,63,69,.2);cursor:pointer}
.setting-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:31px;height:31px;border:3px solid #ffb278;border-radius:50%;background:radial-gradient(circle at 32% 24%,#ffbb8e,#f56e4e 60%,#c74638);box-shadow:inset 0 2px 3px rgba(255,255,255,.55),0 4px 0 #a94139,0 6px 9px rgba(74,49,76,.2)}
.setting-slider input::-moz-range-thumb{width:25px;height:25px;border:3px solid #ffb278;border-radius:50%;background:#f56e4e;box-shadow:0 4px 0 #a94139}
.setting-action{min-height:68px;margin:14px 0;border:3px solid #fff9e7;background:radial-gradient(circle at 17% 0%,rgba(255,255,255,.95),transparent 37%),linear-gradient(180deg,#fff8df,#f5d4a2);color:var(--cw-ink);box-shadow:inset 0 3px 3px #fff,inset 0 -6px 8px rgba(177,114,73,.2),0 6px 0 #c78b74,0 11px 15px rgba(43,94,111,.17);transition:transform .18s,box-shadow .18s}
.setting-action:hover{transform:translateY(-2px);box-shadow:inset 0 3px 3px #fff,0 8px 0 #c78b74,0 13px 18px rgba(43,94,111,.17)}.setting-action:active{transform:translateY(5px);box-shadow:inset 0 2px 5px rgba(160,102,75,.2),0 1px 0 #c78b74}
.settings-note{margin:25px 4px 0;color:#4a5174;font-size:13px}
:is(button,a,input):focus-visible{outline:4px solid #32417f;outline-offset:4px}
@media(max-width:760px){.menu-button{min-height:69px}.menu-button-play{min-height:83px}.settings-dialog{border-width:8px;border-radius:32px}.settings-inner{padding:28px}.settings-inner h2{margin-bottom:23px}.setting-slider{padding:14px 16px 18px}.setting-action{min-height:60px}.wallet-status{margin-top:22px}}
@media(max-height:680px) and (min-width:761px){.menu-button{min-height:67px}.menu-button-play{min-height:78px}.settings-dialog{max-height:calc(100dvh - 24px)}}
@media(prefers-reduced-motion:reduce){.menu-button,.setting-action,.dialog-close{transition:none}}
