/* ════════════════════════════════════════════════════════════
   ELF RUNNER — стили интерфейса
   ════════════════════════════════════════════════════════════ */
:root{
  --lime:#8bd34a; --lime-d:#5da329;
  --blue:#58a6ff; --blue-d:#2e6fd8;
  --ink:#0e1420; --panel:rgba(13,20,34,.82);
  --text:#f2f6ff; --muted:#9db1cf;
  --font:'Baloo 2','Arial Rounded MT Bold','Trebuchet MS','Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--font);background:var(--ink);color:var(--text);
  position:fixed;inset:0;touch-action:none;user-select:none;-webkit-user-select:none;
}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none !important}

/* ── HUD ─────────────────────────────────────────────────── */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5;
  padding:calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right))
          calc(10px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));}
.hud-left{position:absolute;top:calc(10px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left))}
#score{font-size:42px;font-weight:800;line-height:1;color:#fff;
  text-shadow:0 3px 0 rgba(10,20,40,.35),0 8px 24px rgba(10,20,40,.45);font-variant-numeric:tabular-nums}
#dist{font-size:17px;font-weight:700;color:#dfeaff;opacity:.85;margin-top:2px;
  text-shadow:0 2px 8px rgba(10,20,40,.5)}
.hud-coins{position:absolute;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;background:var(--panel);backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 16px 6px 10px;
  font-size:22px;font-weight:800;color:#ffe9ab;box-shadow:0 4px 18px rgba(6,12,26,.4)}
.hud-right{position:absolute;top:calc(10px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));
  display:flex;gap:8px;pointer-events:auto}
.icon-btn{width:46px;height:46px;border-radius:14px;border:1.5px solid rgba(255,255,255,.16);
  background:var(--panel);backdrop-filter:blur(8px);color:#fff;font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .12s,background .2s}
.icon-btn:active{transform:scale(.9)}
.icon-btn.off{opacity:.45}

/* монетка-иконка (как в игре: голубая с ромбом) */
.coin-ico{width:24px;height:24px;border-radius:50%;position:relative;flex:none;
  background:radial-gradient(circle at 34% 30%,#b8ddff 0%,#7cc0ff 45%,#4d9bf0 100%);
  box-shadow:inset 0 -3px 5px rgba(20,60,140,.4),0 1px 3px rgba(0,0,0,.3)}
.coin-ico::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:11px;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--blue-d);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.35)}
.coin-ico.small{width:18px;height:18px}
.coin-ico.small::after{width:8px;height:8px}

/* полоски пауэрапов */
#pu-bars{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom));display:flex;gap:10px}
.pu{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:64px}
.pu-ico{font-size:22px;filter:drop-shadow(0 2px 4px rgba(6,12,26,.5))}
.pu-track{width:56px;height:7px;border-radius:99px;background:rgba(8,14,26,.65);
  border:1px solid rgba(255,255,255,.2);overflow:hidden}
.pu-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#b5f27d,var(--lime));
  box-shadow:0 0 8px rgba(139,211,74,.8)}
@keyframes pu-in{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.pu{animation:pu-in .25s ease-out}

@keyframes coin-pop{0%{transform:translateX(-50%) scale(1)}35%{transform:translateX(-50%) scale(1.22)}100%{transform:translateX(-50%) scale(1)}}
.hud-coins.pop{animation:coin-pop .3s ease-out}

/* тост пауэрапа */
#toast{position:absolute;left:50%;top:26%;transform:translateX(-50%);
  font-size:34px;font-weight:800;color:var(--lime);letter-spacing:.04em;white-space:nowrap;
  text-shadow:0 3px 0 rgba(10,25,10,.4),0 10px 30px rgba(6,20,6,.6);opacity:0}
@keyframes toast-pop{
  0%{opacity:0;transform:translateX(-50%) scale(.4)}
  18%{opacity:1;transform:translateX(-50%) scale(1.15)}
  30%{transform:translateX(-50%) scale(1)}
  75%{opacity:1}
  100%{opacity:0;transform:translateX(-50%) translateY(-26px) scale(1)}
}
#toast.show{animation:toast-pop 1.3s ease-out forwards}

/* ── экраны ──────────────────────────────────────────────── */
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;padding:8vh 24px 7vh;
  background:radial-gradient(120% 90% at 50% 12%,rgba(8,13,24,.06) 0%,rgba(8,13,24,.5) 62%,rgba(8,13,24,.78) 100%)}
.menu-top{display:flex;flex-direction:column;align-items:center;gap:10px;
  margin-top:2vh;animation:drop-in .7s cubic-bezier(.2,1.4,.4,1) both}
.title{font-size:clamp(52px,13vw,96px);font-weight:800;line-height:.95;letter-spacing:.02em;
  text-shadow:0 6px 0 rgba(10,20,40,.35),0 22px 50px rgba(8,16,34,.6)}
.t-elf{color:var(--lime)}
.t-run{color:#fff}
.subtitle{font-size:clamp(15px,3.6vw,20px);font-weight:700;color:#dbe7fb;opacity:.9;
  background:var(--panel);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.12);
  padding:7px 18px;border-radius:999px}
@keyframes drop-in{from{opacity:0;transform:translateY(-40px) scale(.9)}to{opacity:1;transform:none}}

.menu-bottom{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:420px;
  animation:rise-in .7s .1s cubic-bezier(.2,1.4,.4,1) both}
@keyframes rise-in{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.chip{display:flex;align-items:center;gap:7px;background:var(--panel);backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 16px;
  font-size:16px;font-weight:700;color:#eaf1ff;box-shadow:0 4px 18px rgba(6,12,26,.35)}
.chip b{color:#ffd970}

.btn-primary{
  font-family:var(--font);font-size:28px;font-weight:800;letter-spacing:.06em;color:#173208;
  background:linear-gradient(180deg,#a3e86a,#8bd34a 45%,#79c23c);
  border:none;border-radius:999px;padding:16px 64px;cursor:pointer;min-height:64px;min-width:230px;
  box-shadow:0 7px 0 var(--lime-d),0 18px 38px rgba(50,110,20,.45);
  text-shadow:0 1px 0 rgba(255,255,255,.35);transition:transform .1s,box-shadow .1s}
.btn-primary:active{transform:translateY(5px);box-shadow:0 2px 0 var(--lime-d),0 8px 20px rgba(50,110,20,.4)}
.btn-ghost{
  font-family:var(--font);font-size:19px;font-weight:700;color:#eaf1ff;background:rgba(255,255,255,.07);
  border:2px solid rgba(255,255,255,.28);border-radius:999px;padding:12px 38px;cursor:pointer;min-height:52px;
  backdrop-filter:blur(6px);transition:transform .1s,background .2s}
.btn-ghost:active{transform:scale(.96);background:rgba(255,255,255,.14)}
.controls-hint{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:15px;font-weight:700}
.controls-hint i{width:5px;height:5px;border-radius:50%;background:var(--muted);opacity:.6}

.scr-title{font-size:clamp(40px,9vw,64px);font-weight:800;line-height:1.02;text-align:center;
  margin-bottom:6px;text-shadow:0 5px 0 rgba(10,20,40,.35),0 18px 40px rgba(8,16,34,.6)}
#pause,#over{justify-content:center;gap:18px}
.newbest{font-size:20px;font-weight:800;color:#173208;background:linear-gradient(180deg,#ffe08a,#ffc93d);
  padding:8px 22px;border-radius:999px;box-shadow:0 4px 0 #c9971b,0 12px 26px rgba(120,80,10,.4);
  animation:nb-pulse 1s ease-in-out infinite}
@keyframes nb-pulse{50%{transform:scale(1.07)}}
.results{display:flex;gap:12px;margin:6px 0}
.res{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--panel);
  backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.13);border-radius:18px;
  padding:14px 18px;min-width:92px}
.res span{font-size:26px;font-weight:800;color:#fff}
.res:nth-child(3) span{color:#ffd970}
.res label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.over-best{margin-bottom:2px}

/* ── отсчёт ──────────────────────────────────────────────── */
#countdown{position:fixed;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;
  pointer-events:none;font-size:clamp(90px,24vw,160px);font-weight:800;color:#fff;
  text-shadow:0 8px 0 rgba(10,20,40,.3),0 30px 60px rgba(8,16,34,.55)}
#countdown.go{color:var(--lime)}
@keyframes cd-pop{0%{transform:scale(2.2);opacity:0}35%{transform:scale(.95);opacity:1}
  60%{transform:scale(1.05)}100%{transform:scale(.7);opacity:0}}
#countdown.anim{animation:cd-pop .63s ease-out both}

/* ── подсказка / вспышка / загрузка ──────────────────────── */
#hint{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:6;background:var(--panel);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.16);
  color:#eaf1ff;font-size:15px;font-weight:700;padding:10px 20px;border-radius:999px;white-space:nowrap;
  pointer-events:none;animation:rise-in .5s ease-out both}
#flash{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:0;
  background:radial-gradient(120% 100% at 50% 50%,transparent 40%,rgba(255,40,40,.55) 100%)}
@keyframes flash-hit{0%{opacity:1}100%{opacity:0}}
#flash.hit{animation:flash-hit .8s ease-out both}
#loading,#fatal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:#cfe0ff;font-size:24px;font-weight:800;letter-spacing:.12em}
#fatal{flex-direction:column;gap:10px;padding:30px;text-align:center;font-size:17px;letter-spacing:0;color:#ffb1b1}

@media (max-height:520px){
  .title{font-size:clamp(40px,9vw,64px)}
  .btn-primary{font-size:22px;padding:12px 46px;min-height:54px}
  #score{font-size:32px}
  .screen{padding:3vh 24px 3vh;gap:10px}
  .controls-hint{display:none}
}