:root{color-scheme:light;font-family:Avenir Next Rounded,Trebuchet MS,sans-serif;font-synthesis:none;--ink: #173f53;--navy: #1d526a;--cream: #fff7dc;--coral: #ff735f;--sun: #ffe49a;--sea: #1c7ea1;--purple: #704f9d}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.game-shell{position:relative;isolation:isolate;display:grid;grid-template-rows:88px minmax(0,1fr) 184px;min-width:320px;width:100vw;max-width:100vw;min-height:640px;height:100dvh;overflow:hidden;color:var(--ink);background:radial-gradient(circle at 76% 18%,rgba(255,246,190,.62),transparent 22%),linear-gradient(180deg,#4eabe5,#63c5e1 43%,#c8ebe1 69%,#f4cedb)}.paper-grain{position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:overlay;background-image:radial-gradient(circle at 17% 31%,#fff 0 .7px,transparent .9px),radial-gradient(circle at 71% 63%,#123 0 .6px,transparent .8px);background-size:8px 8px,11px 11px}.sun-disc{position:absolute;z-index:-5;top:8%;right:9%;width:clamp(110px,16vw,230px);aspect-ratio:1;border-radius:50%;opacity:.82;background:#fff0ad;box-shadow:0 0 60px 22px #fff2b059}.cloud{position:absolute;z-index:-4;width:12vw;min-width:100px;height:32px;border-radius:70% 40% 60% 55%;opacity:.42;background:#fdf1f0;filter:blur(.3px)}.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.cloud:before{width:48%;height:190%;left:12%;bottom:0}.cloud:after{width:42%;height:145%;right:10%;bottom:0}.cloud-a{top:22%;left:5%;transform:rotate(-5deg)}.cloud-b{top:36%;right:3%;transform:scale(.72) rotate(6deg)}.horizon-island{position:absolute;z-index:-3;bottom:110px;width:42vw;height:28vh;border-radius:49% 51% 18% 12%/70% 68% 17% 15%;opacity:.57;background:linear-gradient(150deg,#e2e8d9,#c6d9d1 58%,#a8c9c3);filter:saturate(.75)}.island-left{left:-11vw;transform:rotate(8deg)}.island-right{right:-13vw;height:34vh;transform:rotate(-7deg);background:linear-gradient(150deg,#eadde2,#d7cbe5 62%,#b8c8d6)}.ocean{position:absolute;z-index:-2;right:0;bottom:0;left:0;height:18%;overflow:hidden;background:linear-gradient(#3499b9,#1f6f93 54%,#174e6f)}.ocean:before{content:"";position:absolute;top:-12px;width:120%;height:28px;background:radial-gradient(ellipse at center,rgba(255,255,255,.42) 0 32%,transparent 34%) 0 0 / 90px 25px repeat-x}.ocean i{position:absolute;width:38vw;height:5px;border-radius:999px;background:#a1e3e833}.ocean i:nth-child(1){top:35%;left:7%}.ocean i:nth-child(2){top:58%;right:12%;width:25vw}.ocean i:nth-child(3){top:76%;left:38%;width:18vw}.surfboard{position:absolute;z-index:-1;bottom:7%;left:12%;width:clamp(58px,7vw,105px);height:clamp(210px,34vh,390px);border:4px solid rgba(22,88,112,.2);border-radius:54% 54% 48% 48%/13% 13% 42% 42%;transform:rotate(9deg);background:linear-gradient(90deg,#4ac7e5 0 42%,#f1c458 43% 56%,#ef6e62 57% 100%);box-shadow:inset 10px 0 #ffffff29,0 18px 26px #143d5538}.surfboard span{position:absolute;right:7px;bottom:42%;left:7px;height:6px;background:#1a465c8c;transform:rotate(-3deg)}.palm{position:absolute;z-index:-1;bottom:4%;width:170px;height:410px;pointer-events:none;transform-origin:bottom center}.palm b{position:absolute;bottom:0;left:82px;width:18px;height:330px;border-radius:60% 40% 10px 10px;transform:rotate(-8deg);background:linear-gradient(90deg,#d67f5f,#f0956c 48%,#a75c4d)}.palm i{position:absolute;top:34px;left:70px;width:125px;height:42px;border-radius:100% 4% 100% 3%;transform-origin:7px 50%;background:linear-gradient(180deg,#547944,#315d4b);clip-path:polygon(0 40%,100% 0,74% 42%,100% 100%,48% 63%,17% 86%)}.palm i:nth-of-type(1){transform:rotate(-22deg)}.palm i:nth-of-type(2){transform:rotate(26deg) scaleX(1.1)}.palm i:nth-of-type(3){transform:rotate(116deg) scale(.9)}.palm i:nth-of-type(4){transform:rotate(174deg) scaleX(1.05)}.palm-left{left:-35px;transform:rotate(-6deg) scale(.82)}.palm-right{right:-20px;transform:rotate(8deg) scale(1.06)}.hud{position:relative;z-index:100;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:14px;min-width:0;width:100%;max-width:100vw;padding:12px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))}.brand-stamp{display:grid;min-width:116px;border:0;padding:5px 12px 7px;color:#fff8d8;cursor:pointer;transform:rotate(-2deg);background:#de654f;box-shadow:4px 4px #154c61;text-align:left}.brand-stamp:after{content:"";position:absolute;inset:4px;border:1px dashed rgba(255,248,216,.65);pointer-events:none}.brand-stamp strong{font-family:Cooper Black,Avenir Next Rounded,sans-serif;font-size:20px;letter-spacing:1.4px;line-height:1}.brand-small{font-size:8px;font-weight:900;letter-spacing:3.8px}.level-ticket,.hud-stats,.round-button{border:1px solid rgba(255,255,255,.52);background:#f8fcf1bd;box-shadow:0 7px 20px #16546f26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.level-ticket{display:grid;min-width:128px;max-width:100%;overflow:hidden;padding:7px 13px;border-radius:8px 18px}.level-ticket span{color:#bc5448;font-size:10px;font-weight:900;letter-spacing:1.8px}.level-ticket strong{font-size:15px}.hud-stats{justify-self:end;display:flex;align-items:center;gap:6px;min-height:46px;padding:5px 7px 5px 13px;border-radius:18px 8px;font-weight:800}.remaining-chip{color:#476b76;font-size:10px;letter-spacing:1px}.remaining-chip b{margin-right:3px;color:var(--ink);font-size:18px}.time-chip{min-width:54px;border-left:1px solid rgba(26,83,101,.18);padding:4px 6px 4px 10px;font-variant-numeric:tabular-nums}.round-button,.settings-fab,.close-button{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:var(--ink);cursor:pointer}.round-button svg,.settings-fab svg,.close-button svg{width:22px;height:22px}.board-zone{position:relative;z-index:20;display:grid;place-items:center;min-height:0;padding:4px 5vw 0}.board{--board-ratio: 1;position:relative;width:min(84vw,calc(52dvh * var(--board-ratio)),650px);max-height:52dvh;filter:drop-shadow(0 22px 18px rgba(25,72,95,.13));animation:board-arrive .36s cubic-bezier(.2,.82,.2,1) both}@keyframes board-arrive{0%{opacity:0;transform:translateY(-22px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}.tile{position:absolute;z-index:calc(10 + var(--layer));display:grid;place-items:center;overflow:visible;border:clamp(1px,.2vw,2px) solid rgba(35,106,133,.46);border-radius:15%;padding:4%;color:var(--ink);cursor:pointer;transform:translateY(calc(var(--layer) * -5%)) rotate(var(--rotation));transform-origin:center;background:linear-gradient(145deg,#fffffff5,#dcf6f5f5),#eaf7ef;box-shadow:0 .1em #5b9dc0,0 .24em #255e7c73,0 .42em .55em #255e7c21,inset 0 .08em #fffffff0;transition:filter .15s ease,transform .15s ease,box-shadow .15s ease}.tile:after{content:"";position:absolute;inset:6%;border:1px solid rgba(255,255,255,.75);border-radius:12%;pointer-events:none}.tile-art{width:90%;height:90%;overflow:visible;filter:drop-shadow(0 2px 1px rgba(55,48,37,.18))}.tile.selectable:hover,.tile.selectable:focus-visible{z-index:90;outline:3px solid #fff1a8;outline-offset:3px;transform:translateY(calc(var(--layer) * -5% - 7%)) rotate(var(--rotation)) scale(1.055);box-shadow:0 .1em #6aaec9,0 .35em #255e7c6e,0 .65em .8em #ffea7e3d}.tile.covered{cursor:not-allowed;background:linear-gradient(145deg,#b2c0e7f7,#92a3d6f7),#92a3d6;filter:saturate(.6) brightness(.92);box-shadow:0 .09em #5872ab,0 .18em #2a3a686b}.tile.hint{z-index:95;animation:hint-pulse .85s ease-in-out infinite alternate}@keyframes hint-pulse{to{outline:5px solid rgba(255,234,95,.92);outline-offset:5px;filter:drop-shadow(0 0 16px rgba(255,227,71,.9))}}.tutorial{position:absolute;z-index:180;top:12%;left:max(18px,18%);display:flex;align-items:center;gap:9px;max-width:260px;border:2px solid #1c6174;border-radius:9px 22px;padding:10px 12px;color:#16485c;transform:rotate(-2deg);background:#fff5c7;box-shadow:5px 6px #124e6247}.tutorial[hidden]{display:none}.tutorial p{margin:0;font-size:13px;line-height:1.35}.tutorial-hand{display:grid;flex:0 0 auto;place-items:center;width:30px;height:30px;border-radius:50%;color:#fff8da;font-size:22px;font-weight:900;line-height:1;background:var(--coral);animation:hand-bob .7s ease-in-out infinite alternate}.tutorial button{border:0;border-radius:999px;padding:5px 8px;color:#fff;background:var(--coral);cursor:pointer;white-space:nowrap}@keyframes hand-bob{to{transform:translateY(8px) rotate(7deg)}}.toast{position:absolute;z-index:200;bottom:4px;left:50%;max-width:min(84vw,380px);border-radius:999px;padding:8px 16px;color:#fff9e0;font-size:13px;font-weight:800;text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,8px);background:#12465be6;transition:opacity .18s ease,transform .18s ease}.toast.show{opacity:1;transform:translate(-50%)}.dock{position:relative;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;padding:2px 72px max(10px,env(safe-area-inset-bottom))}.tray-wrap{position:relative;width:min(68vw,590px);min-width:342px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.tray{position:relative;z-index:2;display:grid;grid-template-columns:repeat(7,1fr);gap:5px;min-height:66px;border:3px solid #255b6d;border-radius:13px 24px;padding:7px;background:#fff4cf;box-shadow:0 7px #153e55,0 15px 30px #10364e47,inset 0 2px #fffdf0;transition:border-color .18s,box-shadow .18s}.tray.warning{border-color:#e7953d;box-shadow:0 7px #9d5e31,0 0 20px #f1ab3f5c}.tray.danger{border-color:#e2524f;box-shadow:0 7px #91383c,0 0 25px #ee49478c;animation:tray-danger .48s ease-in-out infinite alternate}@keyframes tray-danger{to{transform:translate(2px)}}.tray-slot{display:grid;place-items:center;aspect-ratio:1;overflow:hidden;border:1px solid rgba(29,82,106,.2);border-radius:12px;background:#1d526a24;box-shadow:inset 0 2px 4px #18435229}.tray-slot.filled{border-color:#26698452;background:#f9ffff;box-shadow:0 2px #72a8be,inset 0 2px #fff;animation:slot-pop .22s cubic-bezier(.16,1.4,.4,1) both}.tray-slot.matching{animation:match-pop .22s ease-in both}.tray-slot .tile-art{width:88%;height:88%}@keyframes slot-pop{0%{transform:translateY(-18px) scale(.6);opacity:0}}@keyframes match-pop{60%{transform:scale(1.18) rotate(4deg);filter:brightness(1.25)}to{transform:scale(.45);opacity:.25}}.tray-knot{position:absolute;z-index:1;top:18px;width:48px;height:34px;border-radius:50%;background:#eac878;box-shadow:0 6px #9a763b}.knot-left{left:-28px;transform:rotate(9deg)}.knot-right{right:-28px;transform:rotate(-9deg)}.booster-row{display:flex;gap:14px;align-items:flex-start}.booster{position:relative;display:grid;grid-template-columns:42px auto;grid-template-rows:24px 16px;width:118px;min-height:58px;border:2px solid rgba(255,255,255,.62);border-radius:12px 22px;padding:6px 9px;color:#244e65;cursor:pointer;background:#f4f9efd6;box-shadow:0 5px #1c4c63ad,0 10px 20px #19435b2b;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);transition:filter .15s ease,opacity .15s ease,transform .15s ease}.booster:hover:not(:disabled),.booster:focus-visible{outline:3px solid #fff0a3;outline-offset:2px;transform:translateY(-3px) rotate(-1deg)}.booster.featured{transform:translateY(-5px);background:#fff0b0}.booster-icon{grid-row:1 / 3;display:grid;place-items:center;color:#d45e52}.booster-icon svg{width:30px;height:30px}.booster b{align-self:end;text-align:left;font-size:13px}.booster small{align-self:start;color:#725788;font-size:9px;font-weight:900;letter-spacing:.6px;text-align:left}.booster.locked:after{content:"◆";position:absolute;top:-7px;right:-5px;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;color:#fff1bd;font-size:9px;background:#6b518c}.booster:disabled{cursor:default;filter:grayscale(.55);opacity:.62}.settings-fab{position:absolute;z-index:110;right:max(16px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));border:2px solid rgba(255,255,255,.7);background:#f7fbead6;box-shadow:0 5px #174b64}.screen{position:absolute;z-index:500;inset:0;display:grid;place-items:center;padding:22px;pointer-events:none;opacity:0;background:#0d3f526b;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);transition:opacity .18s ease}.screen.show{pointer-events:auto;opacity:1}.result-card,.menu-card{position:relative;width:min(92vw,450px);border:3px solid #194f65;border-radius:18px 42px;padding:30px;color:var(--ink);transform:translateY(20px) rotate(-1deg);background:#fff4cf;box-shadow:9px 11px #1443568c,0 28px 70px #0b324852;transition:transform .24s cubic-bezier(.18,.9,.3,1.2)}.screen.show .result-card,.screen.show .menu-card{transform:translateY(0) rotate(-1deg)}.win-card{background:linear-gradient(145deg,#fff8d8,#f6e99d)}.lost-card{background:linear-gradient(145deg,#fff4da,#f4c5b5)}.compact-card{max-width:360px}.result-card h2,.menu-card h2{margin:4px 0 8px;font-family:Cooper Black,Avenir Next Rounded,sans-serif;font-size:clamp(27px,5vw,42px);line-height:1.05}.result-card p{margin:0 0 22px;color:#466875;line-height:1.55}.eyebrow{color:#cd5e4e;font-size:10px;font-weight:900;letter-spacing:3px}.result-actions,.stacked-actions{display:flex;gap:10px}.stacked-actions{flex-direction:column}.primary-action,.secondary-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:8px 18px;padding:10px 16px;font-weight:900;cursor:pointer}.primary-action{flex:1;border:2px solid #173f53;color:#fff9d8;background:#df6650;box-shadow:0 4px #803b38}.secondary-action{border:2px solid rgba(23,63,83,.5);color:var(--ink);background:#ffffff7a}.primary-action svg,.secondary-action svg{width:19px;height:19px}.wide{width:100%;margin-top:12px}.close-button{position:absolute;top:14px;right:14px;border:2px solid rgba(23,63,83,.32);background:#ffffff85;box-shadow:none}.level-card{width:min(94vw,650px);max-height:min(88dvh,720px);overflow:auto}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:20px}.level-pin{display:grid;place-items:center;min-height:78px;border:2px solid rgba(28,75,96,.32);border-radius:9px 19px;color:var(--ink);cursor:pointer;background:#ffffff7a}.level-pin span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#fff8d8;font-weight:900;background:#2a7891}.level-pin b{font-size:10px}.level-pin small{min-height:12px;color:#a14f49;font-size:9px}.level-pin.current{outline:3px solid #ef7661;background:#fff0ad}.level-pin:disabled{cursor:default;opacity:.42;filter:grayscale(1)}.settings-card{max-width:420px}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px dashed rgba(25,71,91,.26);padding:13px 2px;cursor:pointer}.toggle-row span{display:grid;font-weight:900}.toggle-row small{color:#69818a;font-size:10px;font-weight:500}.toggle-row input{position:absolute;opacity:0}.toggle-row i{position:relative;width:48px;height:27px;border-radius:999px;background:#a7b7ae;box-shadow:inset 0 2px 3px #1338453b;transition:background-color .15s ease}.toggle-row i:after{content:"";position:absolute;top:4px;left:4px;width:19px;height:19px;border-radius:50%;background:#fff8dd;box-shadow:0 2px 3px #16394847;transition:transform .15s ease}.toggle-row input:checked+i{background:#4da979}.toggle-row input:checked+i:after{transform:translate(21px)}.toggle-row input:focus-visible+i{outline:3px solid #ef7661;outline-offset:3px}.confetti{position:absolute;z-index:700;inset:0;overflow:hidden;pointer-events:none}.confetti i{position:absolute;top:-20px;left:var(--x);width:10px;height:18px;border-radius:3px;background:hsl(calc(var(--i) * 47deg) 78% 62%);animation:confetti-fall calc(1.6s + var(--i) * 25ms) ease-in forwards;transform:rotate(calc(var(--i) * 29deg))}@keyframes confetti-fall{to{top:108%;transform:translate(calc((var(--i) - 12) * 4px)) rotate(680deg)}}button:focus-visible{outline:3px solid #fff0a3;outline-offset:3px}@media(max-width:720px){.game-shell{grid-template-rows:72px minmax(0,1fr) 174px}.hud{grid-template-columns:auto minmax(0,1fr) auto;gap:7px;padding:9px 10px 5px}.brand-stamp{min-width:84px;padding-inline:8px}.brand-stamp strong{font-size:15px}.brand-small{font-size:6px;letter-spacing:2.4px}.level-ticket{min-width:0;padding:6px 9px}.level-ticket strong{max-width:100px;overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.hud-stats{display:none}.round-button{justify-self:end;width:44px;height:44px}.board-zone{padding-inline:2.5vw}.board{width:min(93vw,calc(50dvh * var(--board-ratio)),590px);max-height:50dvh}.palm-left{left:-85px;opacity:.72}.palm-right{right:-105px;opacity:.72}.surfboard{left:4%;opacity:.7}.dock{gap:9px;padding:0 48px max(8px,env(safe-area-inset-bottom))}.tray-wrap{width:min(82vw,540px);min-width:300px}.tray{min-height:60px;gap:3px;padding:6px}.booster-row{gap:7px}.booster{grid-template-columns:35px auto;width:94px;min-height:56px;padding:5px 6px}.booster-icon svg{width:26px;height:26px}.booster b{font-size:11px}.settings-fab{right:8px;bottom:max(12px,env(safe-area-inset-bottom));width:44px;height:44px}.tutorial{top:4%;left:14px;transform:scale(.92) rotate(-2deg);transform-origin:left top}.level-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:380px),(max-height:680px){.game-shell{grid-template-rows:66px minmax(0,1fr) 158px}.board{width:min(92vw,calc(47dvh * var(--board-ratio)),560px);max-height:47dvh}.tray-wrap{min-width:282px}.tray{min-height:53px;padding:5px}.booster{width:86px;min-height:50px;grid-template-columns:31px auto;grid-template-rows:20px 14px}.booster-icon svg{width:23px;height:23px}.booster b{font-size:10px}.booster small{font-size:8px}.brand-stamp{display:none}.hud{grid-template-columns:1fr auto}.level-ticket strong{max-width:170px}}@media(orientation:landscape)and (max-height:720px){.game-shell{grid-template-rows:64px minmax(0,1fr) 144px}.hud{padding-block:7px 3px}.board{width:min(62vw,calc(47dvh * var(--board-ratio)),620px);max-height:47dvh}.tray-wrap{width:min(48vw,500px);min-width:360px}.tray{min-height:50px}.dock{gap:5px}.booster{grid-template-rows:20px 12px;min-height:44px;padding:4px 7px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.reduced-motion *,.reduced-motion *:before,.reduced-motion *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}