/* ============ Flappy Toilet Bear — UI ============ */
:root{
  --gold-1:#ffd95e; --gold-2:#ffb127; --gold-3:#e07d10;
  --green-1:#8ee34a; --green-2:#4fb81f; --green-3:#2e7a10;
  --wood-1:#b8763c; --wood-2:#8a5223; --wood-3:#5d3514;
  --cream:#fff4dc; --cream-2:#ffe6bb;
  --ink:#4a2a0e;
  --sky:#2eaadc;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0;padding:0;height:100%;width:100%;overflow:hidden;
  /* Средний цвет первого кадра заставки: пока грузятся картинки,
     экран залит тем же тоном — переход со сплэша не заметен. */
  background:#216470;
  font-family:system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:900;
  color:var(--ink);
  user-select:none;-webkit-user-select:none;touch-action:none;
  overscroll-behavior:none;
}
img{-webkit-user-drag:none;user-select:none;pointer-events:none;}

/* Игра занимает экран целиком на любом устройстве — и на телефоне,
   и на широком мониторе. На ландшафтных пропорциях масштаб считается
   от высоты (см. resize() в game.js), поэтому мишка и брёвна остаются
   нормального размера, а по бокам открывается больше мира. */
#app{position:fixed;inset:0;overflow:hidden;}
canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block;}

.layer{position:absolute;inset:0;z-index:5;}
.hidden{display:none !important;}
.screen{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3.2vh;
  padding:calc(env(safe-area-inset-top) + 3vh) 6vw calc(env(safe-area-inset-bottom) + 3vh);
}
.dim{background:rgba(10,24,34,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}

/* ---------- Подпись студии ---------- */
/* Абсолютная, чтобы не сдвигать отцентрованную связку «логотип — кнопки». */
.studio{
  position:absolute;left:0;right:0;
  top:calc(env(safe-area-inset-top) + 2.4vh);
  text-align:center;
  font-size:min(3.9vw,17px);font-weight:900;letter-spacing:.12em;
  color:var(--gold-1);
  text-shadow:0 2px 0 rgba(74,42,14,.55), 0 5px 14px rgba(0,0,0,.45);
  animation:fadeDown .5s .3s both;
}
@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- Логотип ---------- */
.logo-wrap{text-align:center;line-height:.92;animation:floaty 3.2s ease-in-out infinite;}
.logo-sub{
  font-size:min(7vw,34px);letter-spacing:.42em;color:#fff;text-indent:.42em;
  text-shadow:0 3px 0 #1c6ea0, 0 6px 14px rgba(0,0,0,.45);
  margin-bottom:.4em;
}
.logo{
  margin:0;font-size:min(16.5vw,86px);letter-spacing:.01em;
  background:linear-gradient(#fff8d8 8%,var(--gold-1) 38%,var(--gold-2) 62%,#c96a06 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:min(1.1vw,6px) #5d3514;
  paint-order:stroke fill;
  filter:drop-shadow(0 6px 0 rgba(63,32,8,.55)) drop-shadow(0 14px 18px rgba(0,0,0,.45));
}
.logo span{font-size:1.18em;display:inline-block;}

/* ---------- Кнопки ---------- */
.big-btn{
  border:0;padding:0;background:transparent;cursor:pointer;width:min(78vw,380px);
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.35));
}
.big-btn-in{
  display:block;padding:.62em .4em .72em;border-radius:999px;
  font-size:min(7.4vw,34px);letter-spacing:.06em;color:#fff;
  background:linear-gradient(var(--green-1),var(--green-2) 55%,var(--green-3));
  border:min(.9vw,5px) solid #22600c;
  box-shadow:inset 0 .32em 0 rgba(255,255,255,.4), inset 0 -.3em 0 rgba(0,0,0,.22), 0 .3em 0 #22600c;
  text-shadow:0 3px 0 rgba(0,0,0,.3);
  transition:transform .08s ease, box-shadow .08s ease;
}
.big-btn:active .big-btn-in{transform:translateY(5px);box-shadow:inset 0 .3em 0 rgba(255,255,255,.3), 0 0 0 #22600c;}
.big-btn.gold .big-btn-in{
  background:linear-gradient(var(--gold-1),var(--gold-2) 55%,var(--gold-3));
  border-color:#8a4a06;box-shadow:inset 0 .32em 0 rgba(255,255,255,.45), inset 0 -.3em 0 rgba(0,0,0,.2), 0 .3em 0 #8a4a06;
}
.ghost-btn{
  border:0;background:transparent;color:#fff;font-family:inherit;font-weight:900;
  font-size:min(4.6vw,20px);letter-spacing:.08em;opacity:.92;padding:.6em 1.2em;cursor:pointer;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}
.ghost-btn:active{transform:translateY(2px);}
/* внутри светлой панели белый текст не читается */
.panel .ghost-btn{color:#a5712f;text-shadow:none;}
.icon-btn{
  width:clamp(42px,11vw,58px);height:clamp(42px,11vw,58px);
  border-radius:18px;border:min(.8vw,4px) solid rgba(0,0,0,.28);
  background:linear-gradient(rgba(255,255,255,.95),rgba(255,236,200,.9));
  display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 4px 0 rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.25);
  font-size:clamp(20px,5.4vw,27px);line-height:1;
}
.icon-btn.round{border-radius:50%;}
.icon-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.25);}
.icon-btn svg{width:58%;height:58%;fill:var(--wood-3);}
.icon-btn.off{filter:grayscale(1);opacity:.6;}

/* ---------- Меню: статы ---------- */
.menu-stats{display:flex;gap:4vw;}
.stat{
  min-width:min(34vw,160px);text-align:center;padding:.5em 1em .6em;border-radius:20px;
  background:rgba(255,244,220,.92);border:min(.8vw,4px) solid var(--wood-2);
  box-shadow:0 5px 0 rgba(0,0,0,.25), inset 0 .3em 0 rgba(255,255,255,.7);
}
.stat-label{font-size:min(3.4vw,15px);letter-spacing:.14em;color:#a5712f;}
.stat-val{font-size:min(8vw,36px);color:var(--wood-3);line-height:1.05;}
.stat-val.coin{color:#d98b05;}
.menu-foot{display:flex;gap:4vw;align-items:center;}

/* ---------- Выбор языка ---------- */
.lang-row{display:flex;gap:min(2.2vw,10px);align-items:center;}
.lang{
  font-family:inherit;font-weight:900;cursor:pointer;
  font-size:min(3.5vw,15px);letter-spacing:.08em;
  padding:.42em .62em .46em;border-radius:12px;
  color:#e9f6ff;background:rgba(10,38,54,.46);
  border:2px solid rgba(255,255,255,.28);
  text-shadow:0 2px 4px rgba(0,0,0,.5);
  transition:transform .08s ease;
}
.lang:active{transform:translateY(2px);}
.lang.on{
  color:#6b3300;background:linear-gradient(var(--gold-1),var(--gold-2));
  border-color:#8a4a06;text-shadow:none;
  box-shadow:0 3px 0 rgba(0,0,0,.28);
}

/* ---------- HUD ---------- */
#hud{pointer-events:none;}
.hud-top{
  position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 10px);
  display:flex;align-items:flex-start;justify-content:space-between;padding:0 4vw;
}
.score-big{
  font-size:min(15vw,74px);color:#fff;line-height:1;
  -webkit-text-stroke:min(1.1vw,6px) #2b3a16;paint-order:stroke fill;
  filter:drop-shadow(0 5px 0 rgba(0,0,0,.35));
  transition:transform .12s cubic-bezier(.3,1.8,.6,1);
  margin-left:2vw;
}
.score-big.bump{transform:scale(1.28);}
.hud-right{display:flex;align-items:center;gap:2.5vw;pointer-events:auto;}
.coin-chip{
  display:flex;align-items:center;gap:.4em;padding:.3em .8em .35em .4em;border-radius:999px;
  background:rgba(255,244,220,.92);border:3px solid var(--wood-2);
  font-size:min(5vw,24px);color:var(--wood-3);
  box-shadow:0 4px 0 rgba(0,0,0,.22);
}
.coin-ico{
  width:1.05em;height:1.05em;border-radius:50%;display:inline-block;
  background:radial-gradient(circle at 34% 30%, #fff3b0, var(--gold-1) 45%, var(--gold-2) 78%, #c47a05);
  border:2px solid #9a5e05;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
}
.coin-ico.sm{width:.9em;height:.9em;margin-right:.35em;vertical-align:-.1em;}

.buff-bar{
  position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 15vh);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.buff{
  display:flex;align-items:center;gap:.5em;padding:.25em .9em .3em;border-radius:999px;
  background:rgba(12,30,42,.72);color:#fff;font-size:min(4vw,18px);letter-spacing:.06em;
  border:2px solid rgba(255,255,255,.35);
  animation:slideIn .25s ease;
}
.buff .bdot{width:.8em;height:.8em;border-radius:50%;}
.buff .btime{
  width:46px;height:7px;border-radius:4px;background:rgba(255,255,255,.25);overflow:hidden;
}
.buff .btime i{display:block;height:100%;background:#fff;border-radius:4px;}

/* ---------- Панели ---------- */
.panel{
  position:relative;width:min(88vw,420px);
  padding:clamp(18px,5vw,30px) clamp(16px,5vw,28px) clamp(18px,4vw,26px);
  border-radius:30px;text-align:center;
  background:linear-gradient(var(--cream),var(--cream-2));
  border:min(1.1vw,6px) solid var(--wood-2);
  box-shadow:0 10px 0 rgba(0,0,0,.3), 0 24px 48px rgba(0,0,0,.45), inset 0 .5em 0 rgba(255,255,255,.65);
  display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2.4vh,18px);
}
.panel-title{
  margin:0;font-size:min(9vw,40px);color:#fff;letter-spacing:.04em;
  -webkit-text-stroke:min(1vw,5px) var(--wood-3);paint-order:stroke fill;
  filter:drop-shadow(0 4px 0 rgba(93,53,20,.5));
}
/* Мишка выглядывает над панелью: ширина задаёт и смещение,
   поэтому он не наезжает на заголовок ни на одном экране. */
/* Мишка заходит в панель на 0.74 своей ширины — отступ сверху
   считается от того же числа, поэтому заголовок никогда не задевается.
   --drop опускает всю связку «мишка + панель» ниже центра экрана:
   сверху мишка торчит высоко, и без сдвига композиция липнет к верху. */
.over-panel{
  --bw:clamp(54px,15vw,74px);
  --drop:clamp(0px,9vh,84px);
  padding-top:calc(var(--bw) * 0.78 + 6px);
}
/* Панель результата вдвое компактнее остальных: на ней нет текста для
   чтения, только цифры и две кнопки, и во весь экран она была избыточной.
   Метрики заданы явно, а не через transform: так текст остаётся резким. */
.over-panel{
  width:min(62vw,300px);
  border-radius:18px;
  border-width:min(.6vw,3px);
  padding-left:clamp(10px,3vw,16px);
  padding-right:clamp(10px,3vw,16px);
  padding-bottom:clamp(10px,2.4vw,15px);
  gap:clamp(6px,1.3vh,10px);
  box-shadow:0 6px 0 rgba(0,0,0,.3), 0 14px 28px rgba(0,0,0,.45),
             inset 0 .4em 0 rgba(255,255,255,.65);
}
.over-panel .panel-title{
  font-size:min(5.2vw,24px);
  -webkit-text-stroke:min(.6vw,3px) var(--wood-3);
  filter:drop-shadow(0 2px 0 rgba(93,53,20,.5));
}
.over-panel .ribbon{
  font-size:min(2.9vw,13px);border-width:2.5px;border-radius:7px;
  box-shadow:0 3px 0 rgba(0,0,0,.25);
}
.over-panel .score-rows{gap:5px;}
.over-panel .score-row{padding:.3em .7em .34em;border-radius:9px;border-width:2px;}
.over-panel .sr-label{font-size:min(2.7vw,11px);}
.over-panel .sr-val{font-size:min(4.4vw,19px);}
/* Кнопка во всю ширину контента: иначе её края не совпадают с краями
   строк счёта и стопка выглядит рваной. */
.over-panel .big-btn{width:100%;filter:drop-shadow(0 5px 9px rgba(0,0,0,.35));}
.over-panel .big-btn-in{font-size:min(4.4vw,19px);border-width:min(.5vw,3px);}
.over-panel .ghost-btn{font-size:min(3.1vw,13px);padding:.4em 1em;}

/* Смещение живёт в кадрах анимации: .pop-in заканчивается на
   transform:none и иначе затёр бы статический translate. */
.panel.over-panel.pop-in{animation-name:popInLow;}
@keyframes popInLow{
  from{transform:translateY(calc(var(--drop) + 22px)) scale(.86);opacity:0}
  to{transform:translateY(var(--drop));opacity:1}
}
.sad-bear{
  position:absolute;left:50%;
  width:var(--bw);
  top:calc(var(--bw) * -1.7 + var(--bw) * 0.44);
  transform:translateX(-50%);
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));
  animation:sadIn .5s cubic-bezier(.2,1.6,.5,1) both;
}
.ribbon{
  transform:rotate(-2.5deg);
  padding:.25em 1.4em .3em;border-radius:10px;white-space:nowrap;
  background:linear-gradient(var(--gold-1),var(--gold-2));border:4px solid #8a4a06;
  color:#6b3300;font-size:min(4.4vw,20px);letter-spacing:.1em;
  box-shadow:0 5px 0 rgba(0,0,0,.25);
  animation:ribbonPop .45s .2s cubic-bezier(.2,1.8,.5,1) both;
}
.score-rows{width:100%;display:flex;flex-direction:column;gap:8px;}
.score-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.4em .9em .45em;border-radius:14px;background:rgba(255,255,255,.6);
  border:3px solid rgba(138,82,35,.35);
}
.sr-label{font-size:min(4vw,17px);letter-spacing:.1em;color:#a5712f;display:flex;align-items:center;}
.sr-val{font-size:min(7vw,30px);color:var(--wood-3);}
.coinrow .sr-val{color:#d98b05;}
.row-btns{display:flex;gap:16px;}

/* ---------- Магазин ---------- */
.big-btn.small{width:min(56vw,250px);}
.big-btn.small .big-btn-in{
  font-size:min(5.2vw,23px);padding:.5em .4em .58em;
  display:flex;align-items:center;justify-content:center;gap:.5em;
}
.heli-ico{width:1.5em;height:1.5em;fill:currentColor;flex:none;}

.shop-balance{
  display:flex;align-items:center;gap:.4em;
  font-size:min(6.4vw,28px);color:#d98b05;
  background:rgba(255,255,255,.6);border:3px solid rgba(138,82,35,.35);
  border-radius:14px;padding:.25em .9em .3em;
}
.shop-item{
  display:flex;gap:min(3vw,14px);align-items:center;width:100%;
  background:rgba(255,255,255,.6);border:3px solid rgba(138,82,35,.35);
  border-radius:16px;padding:min(3vw,14px);
}
.shop-art{
  flex:none;width:min(20vw,78px);height:min(20vw,78px);border-radius:14px;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 28%,#bff0ff,#45c8ff 58%,#1a7fd4);
  border:3px solid #15639f;box-shadow:inset 0 .25em 0 rgba(255,255,255,.35);
}
.shop-art svg{width:72%;height:72%;fill:#0b3f66;}
.shop-text{text-align:left;min-width:0;}
.shop-name{font-size:min(4.8vw,21px);color:var(--wood-3);letter-spacing:.04em;}
.shop-desc{
  font-size:min(3.5vw,14px);font-weight:700;color:#6b4420;
  line-height:1.35;margin-top:.25em;
}
.shop-have{font-size:min(3.4vw,14px);color:#a5712f;margin-top:.35em;letter-spacing:.06em;}
.shop-have b{color:var(--wood-3);}
.price{display:inline-flex;align-items:center;gap:.25em;}
.big-btn.off{filter:grayscale(.75);opacity:.6;}
.shop-msg{
  min-height:1.2em;font-size:min(3.8vw,16px);letter-spacing:.06em;
  color:#c0392b;
}
.shop-msg.ok{color:#2e7a10;}

/* ---------- Кнопка вертолётика в игре ---------- */
.heli-btn{
  position:absolute;pointer-events:auto;cursor:pointer;
  right:calc(4vw + 6px);
  bottom:calc(env(safe-area-inset-bottom) + 4vh + 6px);
  width:clamp(56px,15vw,76px);height:clamp(56px,15vw,76px);
  border-radius:50%;padding:0;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,#bff0ff,#45c8ff 58%,#1577c9);
  border:min(.9vw,5px) solid #0f5894;
  box-shadow:0 5px 0 rgba(0,0,0,.3), 0 10px 22px rgba(0,0,0,.35);
  animation:heliReady 1.8s ease-in-out infinite;
}
.heli-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.3);}
.heli-btn svg{width:62%;height:62%;fill:#06365c;}
.heli-count{
  position:absolute;top:-6px;right:-6px;
  min-width:1.7em;padding:.1em .3em;border-radius:999px;
  background:linear-gradient(var(--gold-1),var(--gold-2));
  border:2.5px solid #8a4a06;color:#6b3300;
  font-size:min(3.4vw,14px);line-height:1.35;
}
@keyframes heliReady{
  0%,100%{box-shadow:0 5px 0 rgba(0,0,0,.3), 0 10px 22px rgba(0,0,0,.35), 0 0 0 0 rgba(120,220,255,.55)}
  50%{box-shadow:0 5px 0 rgba(0,0,0,.3), 0 10px 22px rgba(0,0,0,.35), 0 0 0 10px rgba(120,220,255,0)}
}

/* ---------- Помощь ---------- */
.help-list{
  text-align:left;margin:0;padding-left:1.1em;font-weight:700;
  font-size:min(4.2vw,17px);color:#6b4420;line-height:1.5;
}
.help-list b{color:var(--wood-3);}
.help-icons{display:flex;gap:8px;width:100%;}
.hi{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  font-size:min(2.9vw,12px);letter-spacing:.04em;color:var(--wood-3);
  background:rgba(255,255,255,.55);border-radius:14px;padding:8px 4px;
  border:2px solid rgba(138,82,35,.3);
}
.hi i{font-style:normal;font-weight:700;color:#9a7444;font-size:.92em;}
.hi-ico{width:30px;height:30px;border-radius:50%;display:block;}
.hi-ico.shield{background:radial-gradient(circle at 35% 30%,#bff0ff,#45c8ff 55%,#1a7fd4);border:3px solid #15639f;}
.hi-ico.magnet{background:radial-gradient(circle at 35% 30%,#ffb4b4,#ff5d5d 55%,#c81e1e);border:3px solid #911414;}
.hi-ico.x2{background:radial-gradient(circle at 35% 30%,#fff0a8,#ffc531 55%,#e08a08);border:3px solid #9a5e05;}

/* ---------- Подсказка-тап ---------- */
.tap-hint{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:22vh;}
.tap-finger{
  width:clamp(54px,14vw,78px);height:clamp(54px,14vw,78px);border-radius:50%;
  border:5px solid rgba(255,255,255,.95);
  box-shadow:0 0 0 6px rgba(0,0,0,.18), inset 0 0 22px rgba(255,255,255,.5);
  animation:tapPulse 1.25s ease-in-out infinite;
}
.tap-text{
  color:#fff;font-size:min(5.2vw,24px);letter-spacing:.1em;
  -webkit-text-stroke:min(.7vw,4px) rgba(40,60,20,.85);paint-order:stroke fill;
  animation:blink 1.6s ease-in-out infinite;
}

/* ---------- Вспышка ---------- */
#flash{
  position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:9;
}
#flash.on{animation:flashAnim .34s ease-out;}

/* ---------- Анимации ---------- */
@keyframes flashAnim{0%{opacity:.92}100%{opacity:0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes tapPulse{0%,100%{transform:translateY(0) scale(1);opacity:.95}50%{transform:translateY(-16px) scale(1.08);opacity:1}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes slideIn{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
@keyframes sadIn{from{transform:translateX(-50%) translateY(26px) scale(.7);opacity:0}to{transform:translateX(-50%) translateY(0) scale(1);opacity:1}}
@keyframes ribbonPop{from{transform:rotate(-2.5deg) scale(0);opacity:0}to{transform:rotate(-2.5deg) scale(1);opacity:1}}
@keyframes popIn{from{transform:translateY(22px) scale(.86);opacity:0}to{transform:none;opacity:1}}
.pop-in{animation:popIn .4s cubic-bezier(.2,1.5,.45,1) both;}
.pop-in.d1{animation-delay:.07s}
.pop-in.d2{animation-delay:.14s}
.pop-in.d3{animation-delay:.21s}

@media (max-height:620px){
  .screen{gap:2vh}
  .logo{font-size:min(13vw,60px)}
  .tap-hint{margin-top:14vh}
}