/* ===== Мини-игра «Сбежали на воду: Большой заплыв» ===== */
*{box-sizing:border-box}
:root{
  --ink:#0c1c26; --deep:#08141c; --foam:#eaf6fb; --cyan:#19b6cc; --cyan-d:#0f8ea1;
  --sun:#ffd166; --coral:#ff6b5e; --muted:#8fb3c2; --line:rgba(255,255,255,.14);
}
html,body{margin:0;height:100%;background:var(--deep);color:var(--foam);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
body{overflow:hidden}
a{color:inherit}

/* ---- Верхняя панель ---- */
.g-topbar{position:fixed;top:0;left:0;right:0;height:52px;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;background:linear-gradient(180deg,rgba(8,20,28,.9),rgba(8,20,28,0));
  pointer-events:none}
.g-topbar a{pointer-events:auto;text-decoration:none}
.g-logo{font-family:"Marck Script",cursive;font-size:24px;color:var(--foam);line-height:1}
.g-back{font-size:13px;color:var(--muted);border:1px solid var(--line);
  padding:7px 12px;border-radius:999px;background:rgba(8,20,28,.45);backdrop-filter:blur(4px)}
.g-back:hover{color:var(--foam);border-color:var(--cyan)}

/* ---- Игровое поле ---- */
#game-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 80% at 50% 0%,#15485c 0%,#0a1f2a 55%,#08141c 100%)}
#game-canvas{display:block;width:100%;height:100%;touch-action:none}

/* ---- HUD ---- */
#hud{position:fixed;top:58px;left:0;right:0;z-index:20;display:flex;flex-direction:column;
  align-items:center;gap:2px;pointer-events:none;text-shadow:0 2px 10px rgba(0,0,0,.55)}
#hud.hidden{display:none}
.hud-score{font-family:"Playfair Display",Georgia,serif;font-weight:800;font-size:40px;line-height:1;
  letter-spacing:.5px}
.hud-score small{font-family:"Inter",sans-serif;font-weight:600;font-size:13px;color:var(--muted);
  display:block;text-align:center;margin-top:2px;letter-spacing:2px;text-transform:uppercase}
.hud-canal{font-size:13px;color:var(--cyan);font-weight:600;letter-spacing:.4px}

/* ---- Баннер канала ---- */
#canal-banner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);
  z-index:25;padding:10px 26px;border:1px solid var(--line);border-radius:999px;
  background:rgba(8,20,28,.72);backdrop-filter:blur(6px);
  font-family:"Playfair Display",serif;font-size:26px;font-weight:700;
  opacity:0;transition:opacity .4s,transform .4s;pointer-events:none;white-space:nowrap}
#canal-banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ---- Экраны (старт / гейм-овер) ---- */
.screen{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:70px 22px 32px;
  background:radial-gradient(120% 90% at 50% 18%,rgba(13,52,67,.78),rgba(6,16,22,.94));
  backdrop-filter:blur(3px);overflow-y:auto}
.screen.hidden{display:none}
.screen .illu{width:min(280px,62vw);max-height:34vh;margin-bottom:10px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.screen h1{font-family:"Playfair Display",serif;font-weight:800;margin:0 0 6px;
  font-size:clamp(28px,7vw,46px);line-height:1.05}
.screen h1 .wave{color:var(--cyan);font-style:italic}
.screen p.lead{margin:0 0 18px;color:var(--muted);font-size:clamp(14px,3.6vw,17px);max-width:440px}

.btn-play{appearance:none;border:0;cursor:pointer;font-family:"Inter",sans-serif;font-weight:800;
  font-size:18px;letter-spacing:.4px;color:var(--ink);
  background:linear-gradient(180deg,var(--sun),#f4b73e);
  padding:15px 40px;border-radius:999px;box-shadow:0 12px 26px rgba(255,209,102,.28);
  transition:transform .12s,box-shadow .12s}
.btn-play:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(255,209,102,.38)}
.btn-play:active{transform:translateY(0)}

.controls-hint{margin-top:18px;display:flex;gap:22px;flex-wrap:wrap;justify-content:center;
  color:var(--muted);font-size:13px}
.controls-hint b{color:var(--foam)}
.key{display:inline-block;min-width:24px;padding:2px 7px;margin:0 1px;border:1px solid var(--line);
  border-radius:6px;background:rgba(255,255,255,.05);font-weight:700;color:var(--foam)}

/* ---- Гейм-овер ---- */
.result-score{font-family:"Playfair Display",serif;font-weight:800;font-size:clamp(40px,11vw,68px);
  line-height:1;margin:2px 0}
.result-time{color:var(--muted);font-size:15px;margin-bottom:14px}
.reward{border:1px solid var(--line);border-radius:18px;padding:18px 20px;max-width:420px;width:100%;
  background:rgba(255,255,255,.04);margin-bottom:16px}
.reward .disc{font-family:"Playfair Display",serif;font-size:clamp(24px,6vw,34px);font-weight:800;
  color:var(--sun);margin:0 0 4px}
.reward .disc.zero{color:var(--coral)}
.reward p{margin:0;color:var(--muted);font-size:14px}

/* промокод-плашка (после отправки формы) */
.promo-box{margin-top:14px;display:none}
.promo-box.show{display:block}
.promo-code{display:inline-flex;align-items:center;gap:10px;border:1px dashed var(--cyan);
  border-radius:12px;padding:12px 18px;background:rgba(25,182,204,.08);
  font-family:"Inter",monospace;font-weight:800;font-size:22px;letter-spacing:2px;color:var(--cyan)}
.copy-btn{cursor:pointer;border:0;background:var(--cyan);color:var(--ink);font-weight:700;
  border-radius:8px;padding:6px 10px;font-size:12px}

/* форма лида */
.lead-form{display:flex;flex-direction:column;gap:10px;max-width:380px;width:100%;margin:0 auto}
.lead-form input{font-family:"Inter",sans-serif;font-size:16px;color:var(--foam);
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;outline:none;width:100%}
.lead-form input:focus{border-color:var(--cyan)}
.lead-form input::placeholder{color:#6f93a3}
.lead-form .err{display:none;color:var(--coral);font-size:13px;text-align:left}
.lead-form .err.show{display:block}
.btn-submit{appearance:none;border:0;cursor:pointer;font-weight:800;font-size:16px;color:var(--ink);
  background:linear-gradient(180deg,var(--cyan),var(--cyan-d));padding:14px;border-radius:12px;
  transition:transform .12s}
.btn-submit:hover{transform:translateY(-1px)}
.btn-submit[disabled]{opacity:.6;cursor:default;transform:none}
.form-fine{color:#6f93a3;font-size:11px;margin-top:2px}

.over-actions{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn-ghost{cursor:pointer;text-decoration:none;border:1px solid var(--line);border-radius:999px;
  padding:12px 22px;font-weight:700;font-size:14px;color:var(--foam);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--cyan)}
.btn-ghost.accent{background:linear-gradient(180deg,var(--sun),#f4b73e);color:var(--ink);border-color:transparent}

@media (max-height:640px){
  .screen{justify-content:flex-start}
  .screen .illu{max-height:22vh}
}