:root{--ink:#10264c;--deep:#07182f;--aqua:#0fc9db;--cream:#fff8c7;--yellow:#ffd719;--orange:#ff8a16;--coral:#ff5a72;--green:#36bb68;--white:#fffdf0;font-synthesis:none}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{color:var(--ink);background:#0aa9c4;font-family:"Nunito",sans-serif;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:5px solid var(--white);outline-offset:4px}
.game-shell{position:relative;isolation:isolate;width:100%;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:max(16px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:linear-gradient(#16d4e50d,#0574a124),url("assets/game-underwater-bg.png") center/cover no-repeat}
.game-shell:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 20%,#004d8029 100%)}
.ocean-light{position:fixed;inset:-30%;z-index:-1;opacity:.28;pointer-events:none;background:repeating-conic-gradient(from 205deg at 50% 0%,transparent 0 8deg,#ffffe66b 10deg 13deg,transparent 15deg 24deg);animation:sway 12s ease-in-out infinite alternate}
.game-header{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;width:min(1200px,100%);margin:0 auto}
.game-brand{position:relative;display:inline-flex;align-items:center;gap:13px;padding:7px 18px 7px 7px;color:var(--ink);border:4px solid var(--ink);border-radius:999px;background:linear-gradient(135deg,#fffdf0,#ffe769);box-shadow:0 7px 0 var(--ink),0 12px 24px #00365f38;font-family:"Nunito",sans-serif;text-align:left;cursor:pointer;filter:none;overflow:hidden}
.game-brand:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#ff5a725e 0 0);transform-origin:left;transform:scaleX(0);pointer-events:none}.game-brand.is-resetting:after{animation:staff-hold 2s linear forwards}.game-brand__logo{position:relative;z-index:1;width:78px;height:78px;display:grid;place-items:center;border:3px solid var(--ink);border-radius:50%;background:#111;box-shadow:0 4px 0 #10264c47,0 0 0 4px var(--white)}
.game-brand img{width:70px;height:70px;border-radius:50%}.game-brand>span:last-child{position:relative;z-index:1}.game-brand b,.game-brand small{display:block}.game-brand b{font-family:"Lilita One",sans-serif;font-size:clamp(1.35rem,2.2vw,1.8rem);letter-spacing:.02em}.game-brand small{margin-top:-2px;font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.header-tools{display:flex;gap:10px}.tool-button{width:50px;height:50px;display:grid;place-items:center;padding:0;color:var(--ink);border:3px solid var(--ink);border-radius:50%;background:#fffdf0e0;box-shadow:0 5px 0 var(--ink);cursor:pointer;transition:.15s}.tool-button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}.tool-button svg{width:25px;fill:currentColor}.tool-button[aria-pressed=false]{color:#66748d;background:#cbd7db}
.game-card{position:relative;z-index:1;align-self:center;justify-self:center;width:min(1120px,92vw);min-height:min(650px,75vh);display:grid;grid-template-columns:minmax(280px,.88fr) minmax(390px,1.12fr);align-items:center;gap:clamp(20px,4vw,60px);padding:clamp(74px,7vw,92px) clamp(24px,4vw,56px) clamp(24px,4vw,56px);border:4px solid var(--ink);border-radius:46% 54% 48% 52%/6% 8% 7% 9%;background:radial-gradient(circle at 10% 20%,#19677f14 0 4px,transparent 5px),radial-gradient(circle at 70% 80%,#19677f12 0 3px,transparent 4px),#fff8c7f0;background-size:38px 38px,47px 47px,auto;box-shadow:0 13px 0 var(--ink),0 25px 60px #00365f47,inset 0 0 0 8px #ffffff6b;transform:rotate(-.4deg)}
.game-card:before,.game-card:after{content:"";position:absolute;z-index:-1;border:4px solid var(--ink);background:var(--coral);transform:rotate(17deg)}.game-card:before{width:72px;height:130px;left:-35px;bottom:8%;border-radius:70% 30% 60% 35%}.game-card:after{width:88px;height:88px;right:-38px;top:12%;border-radius:42% 58% 38% 62%;background:var(--green)}
.prize-ribbon{position:absolute;top:18px;left:50%;z-index:3;width:min(620px,72%);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:8px 14px;color:var(--white);border:4px solid var(--ink);border-radius:19px 24px 17px 22px;background:linear-gradient(100deg,#ef3e60,#ff6f65);box-shadow:0 6px 0 var(--ink);transform:translateX(-50%) rotate(.5deg);text-align:left}.prize-ribbon__count{color:var(--yellow);font-family:"Lilita One",sans-serif;font-size:2.4rem;line-height:.8;-webkit-text-stroke:1px var(--ink);text-shadow:2px 2px 0 var(--ink)}.prize-ribbon span:nth-child(2){display:grid;line-height:1}.prize-ribbon span b{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase}.prize-ribbon strong{font-family:"Lilita One",sans-serif;font-size:clamp(1.15rem,2vw,1.6rem);font-weight:400;letter-spacing:.02em}.prize-ribbon small{padding:6px 10px;color:var(--ink);border:2px solid var(--ink);border-radius:12px;background:var(--yellow);font-weight:900;white-space:nowrap}.prize-ribbon small b{font-size:1rem}
.challenge-copy{text-align:center}.kicker{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 14px;color:#1e7791;font-size:clamp(.7rem,1.15vw,.9rem);font-weight:900;letter-spacing:.13em;text-transform:uppercase}.kicker span{width:22px;height:3px;border-radius:2px;background:var(--coral)}
h1,h2,p{margin-top:0}h1{margin-bottom:6px;font-family:"Lilita One",sans-serif;font-size:clamp(2.7rem,5vw,5.2rem);font-weight:400;line-height:.86;letter-spacing:.015em;text-transform:uppercase;text-shadow:3px 3px 0 var(--white)}h1 em{color:var(--coral);font-style:normal;-webkit-text-stroke:1px var(--ink)}
.target{position:relative;display:inline-block;margin-top:12px;color:var(--yellow);font-family:"Lilita One",sans-serif;font-size:clamp(5.2rem,10vw,9rem);line-height:.78;letter-spacing:-.03em;-webkit-text-stroke:3px var(--ink);text-shadow:0 7px 0 var(--orange),0 11px 0 var(--ink);transform:rotate(-2deg)}.target:before{content:"";position:absolute;inset:-10px -18px;z-index:-1;border:3px dashed #10264c40;border-radius:50%;transform:rotate(4deg)}.target small{display:block;margin-top:18px;color:var(--ink);font-family:"Nunito",sans-serif;font-size:.72rem;font-weight:900;letter-spacing:.28em;text-transform:uppercase;-webkit-text-stroke:0;text-shadow:none}
.play-zone{display:grid;justify-items:center}.timer-wrap{position:relative;width:min(100%,500px);padding:18px 24px 16px;text-align:center;border:5px solid var(--ink);border-radius:26px 31px 24px 29px;background:var(--deep);box-shadow:inset 0 0 0 5px #264b65,0 9px 0 #10264c59;transform:rotate(.7deg)}
.timer-label,.timer-unit{display:block;color:#88eae7;font-weight:900;letter-spacing:.2em;text-transform:uppercase}.timer-label{font-size:.72rem}.timer-unit{margin-top:-3px;color:#e8feef;font-size:.65rem}.timer{display:block;color:#dcff69;font-family:"Lilita One",sans-serif;font-variant-numeric:tabular-nums;font-size:clamp(5.6rem,11vw,9.2rem);line-height:.95;letter-spacing:.02em;text-shadow:0 0 14px #c4ff4273}
.action-button{position:relative;width:min(86%,390px);min-height:112px;margin-top:24px;padding:0 0 11px;border:0;background:transparent;cursor:pointer;touch-action:manipulation}.action-button__top,.action-button__shadow{position:absolute;inset:0 0 11px;display:grid;place-items:center;border:5px solid var(--ink);border-radius:50%}.action-button__top{z-index:2;color:var(--ink);background:var(--yellow);font-family:"Lilita One",sans-serif;font-size:clamp(2.9rem,5vw,4.3rem);letter-spacing:.04em;text-shadow:2px 3px 0 #ffffffa6;transition:.1s}.action-button__top:after{content:"";position:absolute;inset:8px 12px auto;height:32%;border-radius:50%;background:linear-gradient(#ffffff75,transparent);pointer-events:none}.action-button__shadow{z-index:1;top:11px;bottom:0;background:var(--orange)}.action-button:active .action-button__top{transform:translateY(10px)}
.action-button:disabled{cursor:default}.action-button:disabled .action-button__top{color:#526070;background:#cdd9ce;text-shadow:2px 3px 0 #fff}.action-button:disabled .action-button__shadow{background:#82949d}.action-button:disabled:active .action-button__top{transform:none}
[data-game-state=running] .action-button__top{color:var(--white);background:var(--coral);text-shadow:2px 3px 0 #b92f51;animation:pulse .72s ease-in-out infinite alternate}[data-game-state=running] .action-button__shadow{background:#c53253}.tap-hint{min-height:1.3em;margin:10px 0 0;color:#3f5b6f;font-size:clamp(.78rem,1.2vw,.95rem);font-weight:900}
.result-card{position:absolute;z-index:8;left:50%;bottom:clamp(52px,7vh,80px);width:min(620px,88%);display:flex;align-items:center;gap:20px;padding:18px 24px;border:4px solid var(--ink);border-radius:24px;background:var(--white);box-shadow:0 10px 0 var(--ink),0 20px 45px #00294d52;opacity:0;pointer-events:none;transform:translate(-50%,25px) rotate(-1deg) scale(.88);transition:opacity .25s,transform .4s cubic-bezier(.2,1.7,.4,1)}.result-card[aria-hidden=false]{opacity:1;transform:translate(-50%,0) rotate(-1deg) scale(1)}.result-card__icon{flex:0 0 70px;width:70px;height:70px;display:grid;place-items:center;color:var(--white);border:4px solid var(--ink);border-radius:45% 55% 48% 52%;background:var(--coral);font-family:"Lilita One",sans-serif;font-size:2.6rem;transform:rotate(-8deg)}.result-card__eyebrow{margin:0;color:var(--coral);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.result-card h2{margin:0;font-family:"Lilita One",sans-serif;font-size:clamp(1.8rem,4vw,3rem);font-weight:400;line-height:1}.result-card p:last-child{margin:4px 0 0;font-weight:800}
[data-game-state=won] .result-card{background:#f4ff91}[data-game-state=won] .result-card__icon{color:var(--ink);background:var(--yellow);animation:win 1.2s ease-in-out infinite alternate}[data-game-state=won] .result-card__eyebrow{color:#18814a}
[data-game-state=soldout] .result-card{background:#d8fbff}[data-game-state=soldout] .result-card__icon{background:var(--aqua)}
.rules{position:absolute;left:50%;bottom:15px;display:flex;align-items:center;gap:12px;transform:translateX(-50%);white-space:nowrap;color:#3f5b6f;font-size:clamp(.62rem,1vw,.8rem);font-weight:900;letter-spacing:.05em;text-transform:uppercase}.rules b{color:var(--coral)}.rules i{width:5px;height:5px;border-radius:50%;background:var(--aqua)}
.prize-note{align-self:end;justify-self:center;margin:12px 0 0;padding:7px 18px;color:var(--white);border:3px solid var(--ink);border-radius:999px;background:#10264ce0;box-shadow:0 4px 0 #07182f6b;font-size:clamp(.7rem,1.25vw,.95rem);font-weight:900;text-align:center}.prize-note span{color:var(--yellow)}
.bubbles{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}.bubbles i{position:absolute;bottom:-80px;width:30px;height:30px;border:3px solid #ffffffa8;border-radius:50%;box-shadow:inset 4px 4px 0 #ffffff47;animation:bubble 10s linear infinite}.bubbles i:nth-child(1){left:5%;animation-delay:-2s;animation-duration:11s}.bubbles i:nth-child(2){left:16%;width:15px;height:15px;animation-delay:-7s}.bubbles i:nth-child(3){left:31%;width:42px;height:42px;animation-delay:-4s;animation-duration:13s}.bubbles i:nth-child(4){left:47%;width:19px;height:19px;animation-delay:-8s;animation-duration:9s}.bubbles i:nth-child(5){left:63%;width:25px;height:25px;animation-delay:-1s;animation-duration:12s}.bubbles i:nth-child(6){left:74%;width:48px;height:48px;animation-delay:-6s;animation-duration:14s}.bubbles i:nth-child(7){left:87%;width:17px;height:17px;animation-delay:-3s;animation-duration:8s}.bubbles i:nth-child(8){left:95%;width:32px;height:32px;animation-delay:-9s}
.burger-floaters{position:fixed;inset:0;z-index:2;pointer-events:none}.burger-floater{position:absolute;width:128px;height:128px;padding:7px;border:5px solid var(--ink);border-radius:48% 52% 44% 56%;background:var(--yellow);box-shadow:0 8px 0 var(--ink),0 16px 30px #00365f52;overflow:hidden}.burger-floater img{width:100%;height:100%;border:3px solid var(--white);border-radius:45% 55% 50% 50%;object-fit:cover}.burger-floater--one{left:1.3%;top:29%;transform:rotate(-9deg);animation:burger-bob 3.7s ease-in-out infinite alternate}.burger-floater--two{right:1.2%;bottom:17%;transform:rotate(8deg);animation:burger-bob 4.4s .7s ease-in-out infinite alternate-reverse}.burger-floater--three{left:8%;bottom:1.2%;width:102px;height:102px;transform:rotate(7deg);animation:burger-bob 3.9s 1.2s ease-in-out infinite alternate}
.game-shell.is-celebrating:before{content:"★  ●  ★  ●  ★  ●  ★  ●  ★  ●  ★";position:fixed;inset:-10% 0 auto;z-index:20;color:var(--yellow);font-size:clamp(2rem,6vw,5rem);letter-spacing:2vw;text-shadow:2px 3px 0 var(--coral);text-align:center;pointer-events:none;animation:confetti 1.8s ease-out forwards}
@keyframes sway{to{transform:translateX(5%) rotate(3deg)}}@keyframes bubble{0%{transform:translate3d(0,0,0) scale(.8);opacity:0}10%{opacity:.72}60%{transform:translate3d(28px,-65vh,0)}100%{transform:translate3d(-15px,-115vh,0) scale(1.12);opacity:0}}@keyframes pulse{to{transform:scale(1.025);filter:saturate(1.15)}}@keyframes win{to{transform:rotate(8deg) scale(1.08)}}@keyframes confetti{0%{transform:translateY(-10vh) rotate(-5deg);opacity:0}15%{opacity:1}100%{transform:translateY(110vh) rotate(14deg);opacity:0}}@keyframes burger-bob{to{translate:0 -13px;rotate:4deg}}@keyframes staff-hold{to{transform:scaleX(1)}}
@media(max-width:820px),(orientation:portrait){.game-shell{padding-inline:12px}.game-brand{padding:5px}.game-brand>span:last-child{display:none}.game-brand__logo{width:62px;height:62px}.game-brand img{width:55px;height:55px}.tool-button{width:44px;height:44px}.game-card{width:min(680px,96vw);min-height:0;grid-template-columns:1fr;gap:14px;padding:94px clamp(16px,6vw,42px) 52px;border-radius:34px 42px 36px 44px}.prize-ribbon{width:88%;grid-template-columns:auto 1fr;top:18px}.prize-ribbon small{display:none}.burger-floater{width:76px;height:76px;padding:4px;border-width:3px}.burger-floater--one{top:20%;left:-16px}.burger-floater--two{right:-14px;bottom:12%}.burger-floater--three{display:none}h1{font-size:clamp(2rem,8vw,3.7rem)}.target{margin-top:6px;font-size:clamp(4.3rem,17vw,7rem)}.target small{margin-top:13px}.timer{font-size:clamp(4.5rem,20vw,7.6rem)}.action-button{min-height:92px;margin-top:18px}.result-card{bottom:55px}.prize-note{max-width:92vw}}
@media(max-height:760px) and (orientation:landscape){.game-shell{padding-top:10px;padding-bottom:8px}.game-header{position:absolute;top:10px;left:50%;width:calc(100% - 28px);transform:translateX(-50%)}.game-card{width:min(1080px,90vw);min-height:min(590px,84vh);padding:90px 48px 40px}h1{font-size:clamp(2.55rem,5vw,4.1rem)}.target{font-size:clamp(4.8rem,8.5vw,6.9rem)}.timer{font-size:clamp(4.8rem,9vw,7rem)}.action-button{min-height:92px;margin-top:16px}.prize-note{position:absolute;right:15px;bottom:10px;margin:0}}
@media(max-height:620px) and (orientation:landscape){.game-brand{padding:4px}.game-brand__logo{width:58px;height:58px}.game-brand img{width:51px;height:51px}.game-brand>span:last-child,.prize-note{display:none}.game-card{min-height:88vh;padding-block:78px 38px}.prize-ribbon{top:14px}.kicker{margin-bottom:8px}.target small,.timer-unit,.tap-hint{display:none}}
@media(max-width:820px),(orientation:portrait){
  html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior-x:none;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch}
  body{touch-action:pan-y}
  .game-shell{min-height:100vh;min-height:100svh;height:auto;overflow:visible;display:flex;flex-direction:column;gap:14px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(32px,env(safe-area-inset-bottom))}
  .game-header{position:relative;top:auto;left:auto;width:100%;flex:0 0 auto;transform:none}
  .game-card{flex:0 0 auto;align-self:center;width:min(680px,96vw);margin:4px auto 12px;transform:none}
  .prize-ribbon{width:calc(100% - 28px)}
  .burger-floaters{position:absolute}
  .burger-floater--one{top:128px}
  .burger-floater--two{top:650px;bottom:auto}
  .prize-note{position:relative;right:auto;bottom:auto;flex:0 0 auto;margin:0 auto;max-width:94vw}
}
@media(max-width:480px){
  .game-shell{padding-inline:8px}
  .game-card{width:100%;padding:88px 14px 50px;border-radius:28px 34px 30px 36px}
  .prize-ribbon{top:15px;gap:8px;padding:7px 10px}.prize-ribbon__count{font-size:2rem}.prize-ribbon strong{font-size:1.05rem}
  h1{font-size:clamp(2rem,10vw,2.75rem)}
  .target{font-size:clamp(4.2rem,21vw,6rem)}
  .timer-wrap{padding-inline:10px}.timer{font-size:clamp(4.4rem,23vw,6.4rem)}
  .action-button{width:94%;min-height:96px}
  .rules{gap:6px;font-size:.58rem;letter-spacing:.02em}
  .result-card{width:94%;gap:12px;padding:14px 16px}.result-card__icon{flex-basis:58px;width:58px;height:58px;font-size:2rem}.result-card h2{font-size:1.75rem}.result-card p:last-child{font-size:.82rem}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
