/* =============================================================
   sz-games.css — seedz mini-games · clean flat visual system
   (GOL · Pescaria). Simple, bright, sticker-friendly. Each game
   paints its own flat scene; this file owns the UI chrome.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

.sz-game {
  /* brand */
  --brown:#603813; --brown-deep:#4a2b0e; --cream:#F6EBE3; --offwhite:#FBF6EE;
  --mauve:#83446f; --gold:#B4751A; --gold-deep:#946012;
  --green:#2F9E4F; --green-deep:#247C3E; --green-wa:#1FA855;
  --ink:#3A2C1C; --heading:#2A1B0C; --muted:#8a7a68;

  /* type */
  --font-head:'Baloo 2', system-ui, sans-serif;
  --font-text:'Nunito', system-ui, -apple-system, sans-serif;

  /* shape */
  --r-card:22px; --r-btn:18px; --r-pill:999px;
  --sh-soft:0 6px 20px rgba(74,43,14,.14);
  --sh-card:0 14px 38px rgba(74,43,14,.20);

  /* motion */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --dur:240ms; --dur-fast:120ms;
}

body.sz-game {
  background:#26415a; font-family:var(--font-text); color:var(--ink);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  min-height:100svh; -webkit-font-smoothing:antialiased;
}
#root { width:100%; height:100svh; display:flex; align-items:center; justify-content:center; }

/* fixed 414×736 frame, JS-scaled */
.frame {
  position:relative; width:414px; height:736px; border-radius:30px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45); transform-origin:center center;
  background:#bfe6ff;
}
/* mobile / cover mode: full-bleed native look (no rounded "phone" moldura) */
.frame.is-cover { border-radius:0; box-shadow:none; }
/* match the body bg to the sea so any sliver never shows a dark letterbox */
@media (max-width:640px), (orientation:portrait) {
  body.sz-game { background:#1E98B4; }
}

/* ---------------- stage switching (only active stage is mounted) ---------------- */
.stage { position:absolute; inset:0; z-index:10; }

/* ---------------- buttons (candy, flat) ---------------- */
.btn {
  appearance:none; border:0; cursor:pointer; width:100%; min-height:56px; padding:0 22px;
  border-radius:var(--r-btn); font-family:var(--font-head); font-weight:700; font-size:19px;
  letter-spacing:.01em; color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.btn-action { min-height:66px; font-size:23px; font-weight:800; }
.btn-primary { background:var(--brown);   box-shadow:0 5px 0 var(--brown-deep); }
.btn-hot     { background:var(--green);   box-shadow:0 5px 0 var(--green-deep); }
.btn-fisga   { background:var(--gold);    box-shadow:0 5px 0 var(--gold-deep); }
.btn-wa      { background:var(--green-wa); box-shadow:0 5px 0 #178b46; }
.btn:active { transform:translateY(4px); }
.btn-primary:active { box-shadow:0 1px 0 var(--brown-deep); }
.btn-hot:active { box-shadow:0 1px 0 var(--green-deep); }
.btn-fisga:active { box-shadow:0 1px 0 var(--gold-deep); }
.btn[disabled] { opacity:.55; box-shadow:none; cursor:default; transform:none; }
.btn-ghost { background:#fff; color:var(--mauve); box-shadow:inset 0 0 0 2px rgba(131,68,111,.35); min-height:50px; font-size:16px; }
.btn-attract { animation:attract 1.8s var(--ease-out) infinite; }
@keyframes attract { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-3px);} }

/* ---------------- bottom dock ---------------- */
.dock {
  position:absolute; left:0; right:0; bottom:0; z-index:30;
  padding:18px 20px calc(20px + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; gap:12px;
}

/* ---------------- HUD ---------------- */
.hud {
  position:absolute; top:0; left:0; right:0; z-index:30;
  padding:16px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.hud-card {
  background:#fff; border-radius:18px; padding:9px 14px; box-shadow:var(--sh-soft);
  display:flex; flex-direction:column; gap:7px;
}
.hud-score { display:flex; align-items:center; gap:9px; }
.hud-ico { width:30px; height:30px; display:grid; place-items:center; font-size:22px; }
.hud-ico img { width:30px; height:30px; object-fit:contain; display:block; }
.hud-score-num { font-family:var(--font-head); font-weight:800; color:var(--heading); display:flex; align-items:baseline; gap:3px; line-height:1; }
.hud-score-num b { font-size:30px; transition:color var(--dur) var(--ease-out); }
.hud-score-num.is-gold b { color:var(--gold); }
.hud-score-num small { font-size:17px; color:var(--muted); font-weight:700; }
.hud-attempts { display:flex; gap:7px; }
.pip {
  width:18px; height:18px; border-radius:var(--r-pill); background:#eadfce;
  box-shadow:inset 0 0 0 2px rgba(74,43,14,.12); display:grid; place-items:center;
  transition:background var(--dur) var(--ease-pop), transform var(--dur) var(--ease-pop);
}
.pip.hit { background:var(--green); box-shadow:inset 0 0 0 2px rgba(255,255,255,.4); }
.pip.miss { background:#e3d5c2; }
.pip.cur { transform:scale(1.16); box-shadow:inset 0 0 0 2px var(--gold), 0 0 0 3px rgba(180,117,26,.18); }
.pip svg { width:11px; height:11px; display:none; }
.pip.hit svg { display:block; }
.hud-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.hud-mute {
  appearance:none; border:0; cursor:pointer; width:42px; height:42px; border-radius:var(--r-pill);
  background:#fff; box-shadow:var(--sh-soft); font-size:18px; display:grid; place-items:center;
}
.hud-cap {
  font-family:var(--font-head); font-weight:700; font-size:13px; color:var(--brown);
  background:#fff; border-radius:var(--r-pill); padding:6px 13px; box-shadow:var(--sh-soft); white-space:nowrap;
}

/* ---------------- welcome card ---------------- */
.card {
  position:absolute; left:22px; right:22px; z-index:20;
  background:var(--offwhite); border-radius:var(--r-card); padding:26px 24px 28px;
  box-shadow:var(--sh-card); text-align:center;
}
.card-logo { height:30px; margin:0 auto 14px; display:block; }
.kicker { font-family:var(--font-head); font-weight:700; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mauve); margin:0 0 8px; }
.h1 { font-family:var(--font-head); font-weight:800; font-size:32px; line-height:1.05;
  color:var(--heading); margin:0; text-wrap:balance; }
.lead { font-size:16.5px; line-height:1.45; color:var(--ink); margin:14px 0 0; text-wrap:pretty; }
.rule-pill {
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  background:var(--cream); border-radius:16px; padding:11px 16px;
  font-size:14px; font-weight:700; color:var(--brown); line-height:1.35; text-align:left;
}

/* "only a game" note */
.guard {
  display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
  margin:0 auto; max-width:330px; font-size:12.5px; font-weight:700; color:var(--brown);
  background:rgba(255,255,255,.82); border-radius:var(--r-pill); padding:9px 14px; box-shadow:var(--sh-soft);
}

/* ---------------- splash ---------------- */
.splash { position:absolute; inset:0; z-index:50; display:grid; place-items:center; background:var(--offwhite); }
.splash-in { display:flex; flex-direction:column; align-items:center; gap:16px; position:relative; }
.splash-glow { position:absolute; width:240px; height:240px; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(180,117,26,.28) 0%, rgba(180,117,26,0) 68%);
  animation:breathe 2.2s ease-in-out infinite; }
@keyframes breathe { 0%,100%{ transform:scale(1); opacity:.8;} 50%{ transform:scale(1.08); opacity:1;} }
.splash-logo { position:relative; z-index:1; height:52px; animation:rise .7s var(--ease-out) both; }
.splash-cap { position:relative; z-index:1; font-family:var(--font-head); font-weight:700; font-size:14px;
  letter-spacing:.04em; color:var(--mauve); animation:rise .7s var(--ease-out) .1s both; }
@keyframes rise { from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }

/* ---------------- timing bar ---------------- */
.timing {
  position:relative; width:100%; height:34px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.85); box-shadow:inset 0 2px 5px rgba(74,43,14,.16), var(--sh-soft);
  overflow:hidden;
}
.timing-zone {
  position:absolute; top:4px; bottom:4px; border-radius:var(--r-pill);
  background:var(--green); box-shadow:0 0 0 2px rgba(255,255,255,.5) inset;
  transition:left var(--dur) var(--ease-out), width var(--dur) var(--ease-out);
}
.timing.gold .timing-zone { background:var(--gold); }
.timing-zone-lbl { position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-head); font-size:12px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; white-space:nowrap; }
.timing-marker {
  position:absolute; top:3px; bottom:3px; width:13px; border-radius:var(--r-pill);
  background:var(--brown); box-shadow:0 0 0 3px #fff, 0 2px 6px rgba(0,0,0,.3); transform:translateX(-50%);
  transition:transform .12s var(--ease-pop);
}
.timing-marker.locked { transform:translateX(-50%) scaleY(1.18); box-shadow:0 0 0 3px #fff, 0 0 14px rgba(180,117,26,.7); }
.timing-hint {
  text-align:center; font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--brown); white-space:nowrap;
  background:rgba(255,255,255,.82); border-radius:var(--r-pill); padding:6px 16px; align-self:center;
  box-shadow:var(--sh-soft); min-height:30px; transition:color var(--dur) var(--ease-out);
}
.timing-hint.bite { color:#fff; background:var(--gold); animation:bite .5s ease-in-out infinite; }
@keyframes bite { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.05);} }

/* ---------------- callout ---------------- */
.callout {
  position:absolute; left:50%; top:30%; z-index:35; transform:translate(-50%,0);
  font-family:var(--font-head); font-weight:800; font-size:50px; color:#fff;
  -webkit-text-stroke:3px var(--brown-deep); paint-order:stroke fill;
  text-shadow:0 5px 14px rgba(0,0,0,.28); pointer-events:none; opacity:0; white-space:nowrap;
}
.callout.show { animation:calloutrise 1.1s var(--ease-out) both; }
@keyframes calloutrise {
  0%{ opacity:0; transform:translate(-50%,24px) scale(.8);}
  18%{ opacity:1; transform:translate(-50%,0) scale(1.05);}
  72%{ opacity:1; transform:translate(-50%,-10px) scale(1);}
  100%{ opacity:0; transform:translate(-50%,-34px) scale(1);}
}
.callout.miss { font-size:38px; -webkit-text-stroke-width:2.5px; }

/* ---------------- result ---------------- */
.result {
  position:absolute; inset:0; z-index:20; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; text-align:center; padding:32px 26px;
  background:var(--offwhite);
}
.result-sprite { width:128px; height:128px; object-fit:contain; margin-bottom:10px;
  filter:drop-shadow(0 12px 18px rgba(74,43,14,.22)); animation:popin .6s var(--ease-pop) both; }
.result-medal { font-size:96px; line-height:1; margin-bottom:6px; animation:popin .6s var(--ease-pop) both;
  filter:drop-shadow(0 10px 18px rgba(74,43,14,.22)); }
.result-score { font-family:var(--font-head); font-weight:800; color:var(--gold); font-size:22px; margin:0; }
.result-h { font-family:var(--font-head); font-weight:800; font-size:30px; line-height:1.08;
  color:var(--heading); margin:6px 0 0; text-wrap:balance; max-width:16ch; }
.result-sub { font-size:16px; color:var(--brown); margin:10px 0 0; }
@keyframes popin { from{ opacity:0; transform:scale(.6);} to{ opacity:1; transform:scale(1);} }

/* ---------------- reveal · ticket ---------------- */
.reveal { position:absolute; inset:0; z-index:45; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(42,27,12,.5); }
.ticket { position:relative; width:100%; max-width:336px; background:var(--offwhite);
  border-radius:16px; box-shadow:var(--sh-card); overflow:hidden; animation:print .5s var(--ease-pop) both; }
@keyframes print { from{ opacity:0; transform:translateY(36px) scale(.96);} to{ opacity:1; transform:translateY(0) scale(1);} }
.ticket::before, .ticket::after { content:""; position:absolute; width:24px; height:24px; border-radius:50%;
  background:rgba(42,27,12,.5); top:50%; transform:translateY(-50%); z-index:2; }
.ticket::before { left:-12px; } .ticket::after { right:-12px; }
.ticket-top { background:var(--brown); color:var(--cream); text-align:center; padding:13px 20px;
  font-family:var(--font-head); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; }
.ticket-body { padding:22px 24px 24px; text-align:center; }
.ticket-disc { font-family:var(--font-head); font-weight:800; color:var(--gold); font-size:60px; line-height:.95; }
.ticket-benefit { font-size:15px; color:var(--ink); margin:4px 0 0; line-height:1.35; }
.ticket-note { font-size:13.5px; color:var(--brown); margin:8px 0 0; line-height:1.35; }
.dashed { border:none; border-top:2px dashed rgba(74,43,14,.25); margin:18px 0; }
.coupon { display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--cream); border:2px dashed var(--brown); border-radius:12px; padding:12px 14px; cursor:pointer; }
.coupon:active { background:#efe0d2; }
.coupon-l { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.coupon-eye { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brown); }
.coupon-code { font-family:var(--font-head); font-weight:800; font-size:27px; color:var(--gold); letter-spacing:.03em; }
.coupon-copy { font-family:var(--font-head); font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--mauve); white-space:nowrap; }
.coupon-copy.done { color:var(--green); }
.validity { display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--gold); }
.validity-sub { font-size:12.5px; color:var(--brown); margin:4px 0 0; }
.reveal .btn { margin-top:12px; }
.reveal .btn-primary { margin-top:16px; }
.micro { font-size:12px; color:var(--brown); opacity:.85; margin:12px 0 0; }

/* ---------------- toast ---------------- */
.toast { position:absolute; left:50%; bottom:110px; z-index:60; transform:translateX(-50%);
  background:var(--brown); color:var(--cream); font-size:15px; font-weight:700; border-radius:var(--r-pill);
  padding:11px 22px; box-shadow:var(--sh-card); animation:toastup .25s var(--ease-out) both; white-space:nowrap; }
@keyframes toastup { from{ opacity:0; transform:translate(-50%,12px);} to{ opacity:1; transform:translate(-50%,0);} }

/* ---------------- crosslink ---------------- */
.xlink { position:absolute; left:50%; bottom:9px; transform:translateX(-50%); z-index:36;
  font-family:var(--font-head); font-size:12px; font-weight:700; color:var(--brown);
  text-decoration:none; background:rgba(255,255,255,.85); border-radius:var(--r-pill);
  padding:5px 13px; box-shadow:var(--sh-soft); }

@media (prefers-reduced-motion: reduce) {
  .sz-game * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}