*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--lime:#c4f68b;--green:#a9e26f;--line:rgba(169,226,111,.35);--panel:rgba(44,46,44,.94);--text:#e9eee6;--muted:#b9c0b5}
html,body{height:100%;background:#0b130e;overflow:hidden;font-family:Poppins,system-ui,sans-serif;color:var(--text);
  user-select:none;-webkit-user-select:none;touch-action:manipulation;overscroll-behavior:none}

/* fixed 608x1080 design canvas, scaled to fit by JS */
#stage{position:absolute;left:50%;top:50%;width:608px;height:1080px;transform-origin:0 0;overflow:hidden;overflow:clip;background:#141a15}
.screen{position:absolute;inset:0;overflow:hidden;overflow:clip;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.screen.active{opacity:1;visibility:visible}
.screen>*{position:absolute}
.screen>*:not(.bg):not(.hud){margin-top:var(--oy,0px)}
.bg{inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
[data-bg=shared]{background:#1b2219 url(assets/img/form_poster.webp) center/cover}
#s-home{background:#1b2219 url(assets/img/menu_poster.webp) center/cover}
#s-game{background:#053a3c url(assets/img/game_poster.webp) center/cover}

.logo{left:50%;width:140px;transform:translateX(-50%)}
.title{top:205px;left:50%;width:524px;transform:translateX(-50%);filter:drop-shadow(0 4px 0 rgba(0,0,0,.6))}
.tagline{top:285px;width:100%;text-align:center;font-size:21px;font-weight:500;letter-spacing:.2px}
.meet{top:424px;width:100%;text-align:center;font-size:16px;color:var(--muted);letter-spacing:1px;font-weight:300}

.btn-primary{left:50%;transform:translateX(-50%);width:280px;height:70px;border:0;border-radius:40px;background:var(--lime);
  color:#1d2a14;font:500 24px Poppins,sans-serif;letter-spacing:1.5px;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.65);transition:transform .12s,filter .2s,background .2s}
.btn-primary:active{transform:translateX(-50%) translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.65)}
#btn-play{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{filter:brightness(1.08) drop-shadow(0 0 14px rgba(196,246,139,.45))}}
.btn-primary.small{position:absolute;bottom:26px;width:230px;height:58px;font-size:20px}
.btn-primary:disabled{background:#6f9550;color:#1e2a16;cursor:default}

.h-green{top:100px;width:100%;text-align:center;color:var(--green);font-size:28px;font-weight:600}
.sub{top:146px;width:100%;text-align:center;font-size:14px;color:#dfe5db}

.panel{left:26px;right:26px;background:var(--panel);border:1.5px solid var(--line);border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04)}
#lead-form{padding:30px 26px}
#lead-form label{display:block;font-size:15px;margin-bottom:26px;color:#f0f3ee}
#lead-form input{display:block;width:100%;margin-top:10px;height:46px;border-radius:24px;border:1.5px solid rgba(255,255,255,.18);background:rgba(20,22,20,.35);
  color:#fff;font:400 14px Poppins,sans-serif;padding:0 18px;outline:none;transition:border-color .2s,box-shadow .2s}
#lead-form input::placeholder{color:#8f958c}
#lead-form input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(169,226,111,.15)}
#lead-form input.bad{border-color:#e05b5b}
.err{min-height:20px;color:#ff8a80;font-size:13px;text-align:center;margin-top:-10px}
.consent{top:680px;left:26px;right:26px;border:1.5px solid var(--line);border-radius:14px;padding:12px 16px;font-size:13.5px;line-height:1.5;text-align:center;background:rgba(30,32,30,.6)}
.fine{top:792px;width:100%;text-align:center;font-size:10.5px;color:#7d8579;line-height:1.4}

/* quiz */
.q{padding:24px 22px 18px;opacity:0;visibility:hidden;transform:translateY(24px);transition:.35s}
.q.on{opacity:1;visibility:visible;transform:none}
.q h2,.board h2{font-size:17px;font-weight:600;margin-bottom:16px}
.opt{display:flex;align-items:center;gap:14px;width:100%;height:68px;margin-bottom:12px;padding:0 16px;border-radius:18px;border:1.5px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.035);color:#f2f5f0;font:600 14px Poppins,sans-serif;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .1s}
.opt:active{transform:scale(.98)}
.opt img{width:30px;height:30px}
.opt.sel{border-color:var(--line);background:rgba(169,226,111,.07)}
.opt.radio i{width:24px;height:24px;border-radius:50%;border:1.5px solid #6f756c;flex:none;position:relative}
.opt.radio.sel i,.opt.card.sel i{border:0;background:url(assets/img/ic_checked.webp) center/contain}
.yn{display:flex;gap:10px}
.opt.card{flex:1;flex-direction:column;justify-content:center;gap:6px;height:180px;text-align:center;font-weight:500;font-size:13px;padding:10px}
.opt.card b{font-size:15px}
.opt.card i{width:30px;height:30px;border-radius:50%;border:1.5px solid #6f756c;margin-top:12px}
.progress{left:70px;right:70px;top:1010px;display:flex;gap:10px}
.progress span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.15);transition:background .3s,box-shadow .3s}
.progress span.on{background:var(--green);box-shadow:0 0 8px var(--green)}

/* game */
#s-game{touch-action:none;cursor:crosshair}
.coral{pointer-events:none;transform-origin:50% 100%;animation:sway 5s ease-in-out infinite alternate;filter:saturate(.5) brightness(.72)}
.c1{left:-4px;top:282px;width:168px}
.c2{left:432px;top:318px;width:148px;animation-delay:-2s}
.c3{left:2px;top:836px;width:140px;animation-delay:-1s}
.c4{left:462px;top:812px;width:150px;animation-delay:-3s}
@keyframes sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
#field{inset:0}
#fx{left:0;top:0;width:608px;height:1080px;pointer-events:none}
.hole{position:absolute;width:166px;height:215px;margin:-170px 0 0 -83px;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.hole.open{transform:scale(1)}
.hole>.pit{position:absolute;left:0;bottom:0;width:166px;height:auto;pointer-events:none}
.hole>.mask{position:absolute;left:-20px;right:-20px;top:-40px;bottom:45px;overflow:hidden;pointer-events:none}
.hole .mob{position:absolute;left:50%;bottom:-8px;width:138px;margin-left:-69px;transform:translateY(105%);transition:transform .22s ease-out;pointer-events:none}
.hole.up .mob{transform:translateY(0)}
.hole.hit .mob{transition:transform .28s ease-in .08s;transform:translateY(105%);filter:brightness(1.8) saturate(.4) drop-shadow(0 0 12px #9f6)}
.hole.boom .mob{filter:brightness(1.5) drop-shadow(0 0 16px #f55)}
.pop{position:absolute;font-weight:600;font-size:26px;color:var(--green);text-shadow:0 0 10px rgba(120,255,120,.6);pointer-events:none;animation:popup .8s ease-out forwards}
.pop.neg{color:#ff6262;text-shadow:0 0 10px rgba(255,80,80,.7)}
@keyframes popup{from{transform:translate(-50%,0) scale(.6);opacity:0}20%{opacity:1;transform:translate(-50%,-14px) scale(1.1)}to{transform:translate(-50%,-70px) scale(1);opacity:0}}
.shake{animation:shake .35s}
@keyframes shake{20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-5px,3px)}80%{transform:translate(4px,-2px)}}
.flash::after{content:"";position:absolute;inset:0;background:radial-gradient(transparent 40%,rgba(255,40,40,.35));pointer-events:none;animation:fade .4s forwards}
@keyframes fade{to{opacity:0}}

.hud{left:0;right:0;top:0;height:136px;pointer-events:none}
.hud>*{position:absolute}
.hud-l,.hud-r{position:absolute;top:-2px;width:196px;height:134px;border-bottom:1.5px solid rgba(169,226,111,.3)}
.hud-l{left:-2px;border-right:1.5px solid rgba(169,226,111,.3);border-bottom-right-radius:34px}
.hud-r{right:-2px;border-left:1.5px solid rgba(169,226,111,.3);border-bottom-left-radius:34px}
#score{position:absolute;left:0;right:20px;top:36px;text-align:center;font-size:40px;font-weight:400;text-shadow:0 0 14px rgba(255,255,255,.35)}
.hud-logo{left:50%;top:38px;width:150px;transform:translateX(-50%);filter:drop-shadow(0 0 10px rgba(255,255,255,.3))}
.clock{position:absolute;right:52px;top:22px;width:80px;height:80px;background:url(assets/img/clock.webp) center/contain;display:grid;place-items:center}
.clock span{font-size:17px;font-weight:500}
.clock.low{animation:tick 1s infinite}
.clock.low span{color:#ff8a7a}
@keyframes tick{0%{transform:scale(1.12)}30%{transform:scale(1)}}
#score.bump{animation:bump .25s}
@keyframes bump{50%{transform:scale(1.25)}}
.countdown{inset:0;display:grid;place-items:center;font-size:120px;font-weight:700;color:var(--lime);text-shadow:0 0 30px rgba(196,246,139,.6);pointer-events:none}
.countdown span{animation:cd .9s ease-out forwards}
@keyframes cd{from{transform:scale(1.8);opacity:0}25%{transform:scale(1);opacity:1}to{transform:scale(.8);opacity:0}}

/* leaderboard */
.board{padding:22px 18px 10px}
.board h2{text-align:center;margin-bottom:18px}
#board-list{list-style:none}
#board-list li{display:flex;align-items:center;height:62px;margin-bottom:12px;padding:0 20px;border-radius:14px;border:1.5px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);font-size:14px;font-weight:500;
  opacity:0;transform:translateX(-20px);animation:rowin .4s forwards}
#board-list li b{width:34px;font-weight:600}
#board-list li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:10px}
#board-list li.me{color:#e6f070;border-color:rgba(230,240,112,.45);background:rgba(230,240,112,.06)}
#board-list li.gap{height:20px;border:0;background:none;justify-content:center;color:#777;margin-bottom:6px}
@keyframes rowin{to{opacity:1;transform:none}}
.home-timer{top:968px;height:84px;color:#fff;font:500 13px/1.5 Poppins,sans-serif;text-align:center;cursor:pointer}
.home-timer b{font-weight:600}