:root{
  --cream:#FFF9EF; --cream2:#FDEFD6; --gold:#C59A52; --gold-d:#A97F3A; --gold-l:#E3C489;
  --navy:#1F184B; --pink:#F2758B; --red:#C2334D; --sea:#0A4FB0; --sea-d:#062F6E;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;}
body{
  background:radial-gradient(circle at 50% 28%, #1C7BE0, var(--sea-d) 72%);
  font-family:'Trebuchet MS','Segoe UI',system-ui,sans-serif;color:var(--navy);
  display:flex;align-items:center;justify-content:center;overscroll-behavior:none;
  user-select:none;-webkit-user-select:none;
}
#stage{
  position:relative;height:100%;width:auto;aspect-ratio:9/16;max-width:100vw;
  background:var(--sea);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35);
}
/* Phones taller than 9:16 fill the whole screen; wider screens get a phone-shaped frame. */
@media (max-aspect-ratio:9/16){ #stage{width:100vw;height:100%;aspect-ratio:auto;box-shadow:none;} }
canvas{display:block;width:100%;height:100%;touch-action:none;}

/* ---- Overlays ---- */
.layer{
  position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;
  padding:64px 16px 40px;overflow-y:auto;transition:opacity .3s ease,visibility .3s;
}
.layer.modal{pointer-events:auto;background:rgba(6,47,110,.35);}
.layer.top{z-index:20;}
.hidden{opacity:0;visibility:hidden;}
.hidden .card{animation:none;}

.card{
  margin:auto 0;pointer-events:auto;width:min(340px,100%);text-align:center;
  background:rgba(255,253,247,.96);border:2px solid var(--gold-l);border-radius:24px;
  padding:24px 22px 18px;box-shadow:0 14px 34px rgba(6,47,110,.35);
  animation:pop .38s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes pop{from{transform:scale(.86) translateY(10px);opacity:0}to{transform:none;opacity:1}}

.brandbar{
  position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:5;
  background:rgba(255,249,239,.94);border-radius:999px;padding:6px 16px;
  box-shadow:0 4px 14px rgba(6,47,110,.3);pointer-events:none;
}
.brandbar img{height:26px;display:block;}

#mute{
  position:absolute;top:max(10px,env(safe-area-inset-top));right:12px;z-index:15;
  width:38px;height:38px;border-radius:50%;background:rgba(255,249,239,.94);
  border:2px solid var(--gold-l);cursor:pointer;font-size:16px;color:var(--gold-d);
  display:flex;align-items:center;justify-content:center;
}

#liveScore{
  position:absolute;top:70px;left:0;right:0;text-align:center;z-index:5;pointer-events:none;
  font-size:60px;font-weight:800;color:#fff;
  text-shadow:0 3px 0 var(--navy),0 0 14px rgba(31,24,75,.5);transition:opacity .25s;
}
#liveScore.pop{animation:bump .22s ease-out;}
@keyframes bump{40%{transform:scale(1.25)}}

/* ---- Card content ---- */
h1{font-size:30px;font-weight:800;letter-spacing:.02em;line-height:1.1;}
h1 .accent{color:var(--gold);}
h2{font-size:22px;font-weight:800;margin-bottom:12px;}
.note{font-size:13px;line-height:1.45;color:var(--navy);opacity:.75;margin:10px 4px 2px;}
.mascot{width:116px;height:116px;display:block;margin:2px auto 8px;animation:bob 1.6s ease-in-out infinite;}
.headline{font-size:15px;line-height:1.4;margin:2px 0 12px;}
.headline strong{font-size:18px;}
.prizes{display:flex;gap:8px;margin-bottom:14px;}
.prize{flex:1;background:var(--cream2);border-radius:14px;padding:8px 4px;font-size:12px;line-height:1.25;display:flex;flex-direction:column;align-items:center;gap:2px;}
.prize .pic{width:46px;height:46px;border-radius:50%;background:#fff;border:2px dashed var(--gold-l);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:2px;}
.prize b{font-size:15px;color:var(--gold-d);}
.code-banner{background:#E2F5EA;color:#1E8A55;font-size:13px;font-weight:700;line-height:1.4;border-radius:12px;padding:8px 10px;margin-bottom:10px;}
.tries-line{font-size:15px;font-weight:700;line-height:1.4;margin-bottom:6px;}
.tries-line:empty{display:none;}
.tries-line.ok{color:#1E8A55;}
.campaign{font-size:13px;line-height:1.45;margin:0 4px 12px;opacity:.85;}
.campaign #campaignEnd{font-weight:700;}
.code-form{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:4px;}
[hidden]{display:none !important;} /* beats .link/.code-form display rules */
.code-form .note{margin:0 0 2px;opacity:.9;}
.code-form input{
  font:inherit;font-size:20px;font-weight:800;letter-spacing:.12em;text-align:center;text-transform:uppercase;
  width:200px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--gold-l);color:var(--navy);
  user-select:text;-webkit-user-select:text;
}
.code-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,154,82,.28);}
.code-form .error{margin:0;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-8px) rotate(6deg)}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:200px;
  background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#fff;
  border:none;border-bottom:4px solid var(--gold-d);border-radius:16px;
  font:inherit;font-size:17px;font-weight:800;letter-spacing:.03em;padding:13px 26px;cursor:pointer;
  box-shadow:0 6px 16px rgba(197,154,82,.4);transition:transform .08s,filter .15s;
}
.btn:active{transform:translateY(2px);border-bottom-width:2px;}
.btn:disabled{filter:grayscale(.4) brightness(1.05);cursor:wait;}
.btn:focus-visible,.link:focus-visible,#mute:focus-visible{outline:3px solid var(--navy);outline-offset:2px;}

.link{
  display:block;margin:8px auto 0;background:none;border:0;cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;color:var(--gold-d);text-decoration:underline;padding:6px;
}
.link.quiet{font-weight:600;color:var(--navy);opacity:.6;font-size:13px;margin-top:2px;}

.tap-copy{font-size:13px;opacity:.72;margin-top:12px;display:flex;align-items:center;gap:7px;justify-content:center;}
.tap-copy .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulse 1.1s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.7);opacity:1}}

/* ---- Forms ---- */
.form{display:flex;flex-direction:column;gap:11px;text-align:left;}
.form h2{text-align:center;margin-bottom:2px;}
.form .note{text-align:center;margin-top:0;}
.form label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-d);}
.form input[type=text],.form input[type=email],.form input[type=tel]{
  font:inherit;font-size:16px;text-transform:none;letter-spacing:0;color:var(--navy);
  padding:11px 12px;border-radius:12px;border:1.5px solid var(--gold-l);background:#fff;
  user-select:text;-webkit-user-select:text;
}
.form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,154,82,.28);}
.form .check{flex-direction:row;align-items:flex-start;gap:9px;text-transform:none;letter-spacing:0;font-weight:500;font-size:12.5px;line-height:1.45;color:var(--navy);cursor:pointer;}
.form .check input{width:18px;height:18px;margin-top:1px;flex:none;accent-color:var(--gold);}
.form .check em{font-style:normal;font-weight:700;color:var(--gold-d);}
.form .check a{color:var(--gold-d);font-weight:700;}
.form .btn{align-self:center;margin-top:2px;}
.error{color:var(--red);font-size:13px;font-weight:600;line-height:1.4;text-align:center;}
.error:empty{display:none;}

/* ---- Stats / game over ---- */
.greet{font-size:20px;margin:2px 0 12px;}
.stats{display:flex;gap:8px;margin:4px 0 12px;}
.sbox{flex:1;background:var(--cream2);border-radius:14px;padding:9px 6px;}
.sbox .lab{font-size:10px;letter-spacing:.16em;color:var(--gold-d);text-transform:uppercase;font-weight:700;}
.sbox .val{font-size:28px;font-weight:800;line-height:1.15;}
.go-title{font-size:26px;font-weight:800;margin-bottom:10px;}
.best-flag{display:none;width:max-content;margin:0 auto 10px;font-size:12px;font-weight:800;color:#fff;background:var(--pink);padding:3px 10px;border-radius:20px;letter-spacing:.06em;}
.medal-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px;}
.medal{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;border:3px solid rgba(255,255,255,.6);box-shadow:inset 0 2px 6px rgba(255,255,255,.5),0 4px 10px rgba(31,24,75,.2);}
.medal-label{font-size:13px;color:var(--gold-d);font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.save-state{font-size:12.5px;min-height:18px;margin-bottom:12px;color:var(--navy);opacity:.75;}
.save-state.ok{color:#1E8A55;opacity:1;font-weight:700;}
.save-state.warn{color:var(--red);opacity:1;}

.notice{text-align:left;}
.notice h2{text-align:center;}
.notice p{font-size:13px;line-height:1.5;margin-bottom:10px;}
.notice .btn{display:flex;margin:14px auto 4px;}

.foot{position:absolute;bottom:8px;left:0;right:0;text-align:center;z-index:5;pointer-events:none;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7A5426;opacity:.8;}

@media (max-height:640px){
  .layer{padding-top:54px;}
  .card{padding:16px 16px 12px;}
  .mascot{width:84px;height:84px;margin-bottom:4px;}
  .form{gap:8px;}
}
@media (prefers-reduced-motion:reduce){
  .card,.mascot,.tap-copy .dot,#liveScore.pop{animation:none;}
}