/* === Safe no-white-bars + subtle transparency overlay (v2) === */
:root{ --bg-overlay-opacity: 0.18; } /* tweak 0..1 for darker/lighter */

/* Paint the viewport with the game background to avoid white bars */
html, body{
  min-height:100vh;
  background:#000 url("../assets/game.jpg") center / cover no-repeat fixed;
}

/* Keep scaled content above the overlay and avoid extra backgrounds */
#app-scale{ position:relative; z-index:1; background:transparent !important; }
/* Rely on page background instead of per-screen background to prevent layering glitches */
#screen-game{ background:transparent !important; }

/* A subtle transparent overlay ABOVE the background and BELOW content (no pointer issues) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,0,0,var(--bg-overlay-opacity));
  z-index:0;
  pointer-events:none;
}


:root {
  --panel:#121826d0; --text:#f0f3f6; --muted:#a3b4c4; --shadow:0 10px 30px rgba(0,0,0,.4); --radius:16px;
  --gold1:#f6d365; --gold2:#fda085; --gold3:#ffd66b; --gold4:#ffb347;
}
*{box-sizing:border-box;user-select:none;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto}
#screen-game{position:fixed;inset:0;background:url("../assets/game.jpg") center/cover no-repeat}

/* COIN HUD (center top) */
.coin-hud{
  position:absolute; left:50%; top:10px; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; z-index:20;
  padding:6px 10px; background:linear-gradient(180deg,rgba(20,28,44,.58),rgba(10,14,22,.46));
  border:1px solid #ffffff22; border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 0 18px rgba(255,214,107,.08);
  backdrop-filter: blur(4px);
}
.coin-hero{ position:relative; width:56px; height:56px; display:grid; place-items:center; animation: coin-float 2.2s ease-in-out infinite alternate; filter: drop-shadow(0 6px 18px rgba(0,0,0,.4)); }
.coin-hero::before{ content:""; position:absolute; inset:-6px; border-radius:50%; background:conic-gradient(from 0deg, #ffe28a, #ffc45c, #ffdf9e, #ffe28a); animation: coin-ring 5s linear infinite; mask: radial-gradient(circle at 50% 50%, transparent 58%, black 60%); }
.coin-core{ width:48px; height:48px; border-radius:50%; background: radial-gradient(circle at 32% 32%, #ffffffaa 0 4%, transparent 5%), radial-gradient(circle at 30% 30%, #fff1 0 20%, transparent 21%), radial-gradient(circle at 50% 50%, var(--gold1) 0, var(--gold3) 58%, var(--gold4) 100%); box-shadow: inset 0 4px 6px rgba(255,255,255,.35), inset 0 -10px 18px rgba(163,98,0,.35); position:relative; }
.coin-core::after{ content:""; position:absolute; inset:8px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #fff6 0 18%, transparent 19%), radial-gradient(circle at 50% 50%, #ffd76f 0, #ffb347 100%); box-shadow: inset 0 4px 9px rgba(0,0,0,.25); }
.coin-shine{ position:absolute; width:24px; height:24px; border-radius:50%; background: radial-gradient(circle, #ffffff 0 40%, transparent 70%); left:-6px; top:2px; filter: blur(8px); opacity:.6; transform: rotate(-20deg); animation: coin-shine 2.8s ease-in-out infinite; }
.coin-amount{ font-weight:800; font-size: clamp(18px,3.2vw,28px); letter-spacing:.4px; }
.coin-amount #coins{ background: linear-gradient(90deg, #fff, #ffe6a6); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 0 18px rgba(255, 214, 107, .35); display:inline-block; transform-origin:left center; }
.coin-amount #coins.bump{ animation: num-bump .36s cubic-bezier(.2,.8,.2,1); }
@keyframes coin-float{ from{ transform: translateY(2px);} to{ transform: translateY(-5px);} }
@keyframes coin-ring{ to{ transform: rotate(360deg);} }
@keyframes coin-shine{ 0%{ opacity:.4; transform:translateX(0) rotate(-20deg);} 50%{ opacity:.8; transform:translateX(6px) rotate(-20deg);} 100%{ opacity:.4; transform:translateX(0) rotate(-20deg);} }
@keyframes num-bump{ 0%{ transform: scale(1);} 40%{ transform: scale(1.08);} 100%{ transform: scale(1);} }

/* CPS indicator (top-right) */
.cps-indicator{ position:absolute; right:12px; top:10px; z-index:20; display:flex; gap:8px; align-items:center; padding:6px 12px; border-radius:999px; border:1px solid #ffffff22; background:linear-gradient(180deg,rgba(20,28,44,.58),rgba(10,14,22,.46)); box-shadow:var(--shadow); }
.cps-label{ color:var(--muted); margin-right:4px; }
#cps{ font-weight:700; }

/* Spawn button (left center) */
.side-controls{ position:absolute; left:10px; top:50%; transform:translateY(-50%); z-index:20; 
}
.btn.spawn{ background:linear-gradient(180deg,#2b3b61,#1b2742); border:1px solid #7ecfff66; border-radius:14px; padding:12px 16px; min-width:220px; color:#e8f6ff; font-weight:600; letter-spacing:.2px; box-shadow:0 12px 28px rgba(0,0,0,.35); 
}
.btn.spawn:hover{ transform:translateY(-2px); 
} .btn.spawn:active{ transform:translateY(0); 
}

/* Fullscreen board */
#board-wrap{position:absolute;left:8px;right:8px;top:8px;bottom:8px}
#board{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;background:transparent;border:none}

/* Items (free-field, no grid) */
.item{
  position:absolute; transform-origin:center center;
  transition:transform .18s cubic-bezier(.2,.9,.2,1);
  will-change: transform, opacity, left, top;
}
.item img{
  width:100%;height:100%;object-fit:contain;pointer-events:none;
  filter: blur(.15px) drop-shadow(0 0 6px rgba(0,0,0,.16)) drop-shadow(0 0 1px rgba(255,255,255,.35));
  will-change: filter, transform; backface-visibility:hidden; -webkit-font-smoothing:antialiased;
}
.item.dragging{z-index:5;transform:scale(1.06) rotate(-1.6deg)}
.item.ghost{opacity:.92;filter:saturate(.96)}

/* Unlock overlay */
#unlock-layer{ position:fixed; inset:0; pointer-events:none; z-index:999; }
.unlock-overlay{ position:absolute; inset:0; display:grid; place-items:center; background: radial-gradient(1200px 800px at 50% 50%, rgba(0,0,0,.30), rgba(0,0,0,.65)); pointer-events:auto; }
.unlock-card{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:transparent; border:none; box-shadow:none; border-radius:0; padding:0; z-index:2; transform: translateZ(0); animation: card-float 1.6s ease-in-out infinite alternate; }
.unlock-card img{ width:min(56vw,420px); height:auto; object-fit:contain; filter: drop-shadow(0 8px 28px rgba(0,0,0,.5)); }
.unlock-title{ margin-top:6px; font-weight:700; letter-spacing:1px; text-align:center; background:linear-gradient(90deg,#a5ff95,#5dd6ff); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 18px rgba(93,214,255,.35); font-size:clamp(18px,2.6vw,28px); }
.unlock-actions{ display:flex; justify-content:center; width:100%; }
.btn-continue{ background:linear-gradient(180deg,#2b3b61,#1b2742); border:1px solid #7ecfff66; padding:10px 18px; border-radius:14px; color:#e8f6ff; cursor:pointer; font-weight:600; letter-spacing:.2px; box-shadow:0 8px 20px rgba(0,0,0,.35), 0 0 0 0 rgba(126,207,255,.0); animation:pulse 1.2s ease-in-out infinite alternate; }
.btn-continue:hover{ transform:translateY(-1px); } .btn-continue:active{ transform:translateY(0); animation:none; }
@keyframes pulse{ from{ box-shadow: 0 8px 20px rgba(0,0,0,.35), 0 0 0 0 rgba(126,207,255,.0);} to{ box-shadow:0 8px 20px rgba(0,0,0,.35), 0 0 40px 8px rgba(126,207,255,.25);} }
.btn-continue.nudge{ animation: nudge .3s ease; } @keyframes nudge{ 0%{ transform:translateY(0)} 40%{ transform:translateY(-2px)} 100%{ transform:translateY(0)} }

/* Confetti */
.confetti{ position:absolute; top:-10vh; width:10px; height:14px; opacity:.95; transform: translateX(var(--x)) rotate(var(--rot)); background: linear-gradient(180deg, #fff, var(--c)); animation: confetti-fall var(--dur) linear var(--delay) forwards; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); border-radius:2px; pointer-events:none; z-index:1; }
@keyframes confetti-fall{ to{ transform: translate(var(--x), 110vh) rotate(calc(var(--rot) + 240deg)); opacity:.95; } }

/* Merge FX */
.merge-effect{ position:absolute; inset:0; pointer-events:none; z-index:30; } /* above items */
.merge-ring{ position:absolute; width:90px; height:90px; border:2px solid #5dd6ff; border-radius:50%; animation:merge-ring .28s ease-out forwards; filter:drop-shadow(0 0 10px #5dd6ff) }
.spark{ position:absolute; width:8px; height:8px; border-radius:50%; background:radial-gradient(circle,white,#5dd6ff 60%,transparent 61%); pointer-events:none; animation:spark-move .32s ease-out forwards }

/* Coin fly FX */
.coin-fx{ position:absolute; width:18px; height:18px; border-radius:50%; pointer-events:none; z-index:50; background: radial-gradient(circle at 32% 32%, #ffffffaa 0 20%, transparent 21%), radial-gradient(circle at 50% 50%, var(--gold1) 0, var(--gold3) 60%, var(--gold4) 100%); box-shadow: 0 4px 10px rgba(0,0,0,.35), 0 0 18px rgba(255,214,107,.35); transform: translate(0,0) scale(1); animation: coinfly var(--dur, .6s) cubic-bezier(.2,.8,.2,1) forwards; }
.coin-fx::after{ content:""; position:absolute; inset:3px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #fff6 0 30%, transparent 31%), radial-gradient(circle at 50% 50%, #ffd76f 0, #ffb347 100%); }

/* Item unlocked-born */
.item.unlocked-born{ animation: unlocked-born 1.4s cubic-bezier(.2,.8,.2,1); }
.item.unlocked-born::after{ content:""; position:absolute; inset:-8% -8%; background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.5) 40%, transparent 60%); filter: blur(2px); mix-blend-mode: screen; border-radius: 16px; animation: shine-sweep 1.4s ease-out; pointer-events:none; }

@keyframes card-float { from{ transform: translateY(2px);} to{ transform: translateY(-6px);} }
@keyframes merge-ring{0%{transform:scale(.2);opacity:.9}80%{opacity:.2}100%{transform:scale(1.6);opacity:0}}
@keyframes spark-move{to{transform:translate(var(--dx),var(--dy)) scale(.45);opacity:0}}
@keyframes coinfly{ to{ transform: translate(var(--dx), var(--dy)) scale(.6); opacity:0; } }
@keyframes unlocked-born{ 0%{ transform: scale(.3) rotate(-20deg); opacity:0; } 55%{ transform: scale(1.12) rotate(4deg); opacity:1; } 100%{ transform: scale(1) rotate(0deg); } }
@keyframes shine-sweep{ from{ transform: translateX(-140%) rotate(8deg); opacity:0; } 35%{ opacity:1; } to{ transform: translateX(140%) rotate(8deg); opacity:0; } }


/* === Shop card (framed PNG + price) === */
.shop{ position:absolute; left:10px; top:50%; transform:translateY(-50%); z-index:20; }
.shop-card{ display:flex; align-items:center; justify-content:center; }
.shop-frame{
  position:relative;
  width:220px; aspect-ratio:3/4;
  padding:14px 14px 40px 14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(20,28,44,.62), rgba(12,18,30,.46));
  border:1px solid #ffffff22;
  box-shadow:0 12px 28px rgba(0,0,0,.35), inset 0 0 18px rgba(255,255,255,.06);
  backdrop-filter: blur(4px);
}
.shop-img{
  position:absolute; left:12px; right:12px; top:12px; bottom:52px;
  width:auto; height:auto; object-fit:contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35)) drop-shadow(0 0 1px rgba(255,255,255,.35));
  pointer-events:none;
}
.shop-price{
  position:absolute; left:10px; right:10px; bottom:8px;
  text-align:center; font-weight:800; letter-spacing:.3px;
  font-size:18px;
  padding:6px 10px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid #ffffff1a;
  color:#ffe8a6;
  box-shadow: inset 0 0 18px rgba(255,214,107,.12);
}
.shop-buy{
  position:absolute; inset:0; border:0; background:transparent; cursor:pointer; border-radius:18px;
}
.shop-card.affordable .shop-frame{ box-shadow:0 12px 28px rgba(0,0,0,.35), 0 0 0 0 rgba(126,207,255,.0), inset 0 0 18px rgba(126,207,255,.18); border-color:#7ecfff55; }
.shop-card.affordable .shop-price{ color:#ffffff; text-shadow:0 0 18px rgba(126,207,255,.35); }
.shop-card:active{ transform: translateY(1px); }


/* === OVERRIDE: center PNG inside frame, remove price box === */
.shop-frame{
  display: grid !important;
  align-items: center !important;
  justify-items: center !important;
  overflow: hidden !important;
}
/* Centered image, no absolute offsets; keep tiny size with safe gutters */
.shop-img{
  position: relative !important;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  margin: 0 auto !important; display: block !important;
  width: auto !important; height: auto !important;
  max-width: calc(100% - 52px) !important;
  max-height: calc(100% - 104px) !important;
  object-fit: contain !important;
  transform: none !important;
}
/* Price: text only, no rectangle */
.shop-price{
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 6px !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffe8a6 !important;
  padding: 0 !important;
  font-weight: 800 !important;
}


/* === OVERRIDE: smaller frame and centered, smaller PNG === */
.shop-frame{
  width: 120px !important;
  padding: 6px 6px 22px 6px !important; /* tighter, leave room for price */
  border-radius: 12px !important;
  display: grid !important;
  align-items: center !important;
  justify-items: center !important;
  overflow: hidden !important;
}
.shop-img{
  position: relative !important;
  margin: 0 auto !important; display: block !important;
  width: auto !important; height: auto !important;
  max-width: calc(100% - 20px) !important;   /* extra inner gutters */
  max-height: calc(100% - 56px) !important;  /* leave room for price at bottom */
  object-fit: contain !important;
  transform: none !important;
}
.shop-price{
  position: absolute !important; left: 0 !important; right: 0 !important; bottom: 4px !important;
  text-align: center !important; background: transparent !important; border: none !important; box-shadow: none !important;
  font-size: 12px !important; font-weight: 800 !important;
}
@media (max-width: 480px){
  .shop-frame{ width: 112px !important; padding: 6px 6px 22px 6px !important; }
  .shop-img{ max-width: calc(100% - 18px) !important; max-height: calc(100% - 58px) !important; }
  .shop-price{ font-size: 11px !important; }
}


/* === OVERRIDE: make shop frame a square === */
.shop-frame{
  width: 120px !important;
  aspect-ratio: 1 / 1 !important;   /* perfect square */
  padding: 6px 6px 22px 6px !important;  /* keep room for price text */
  border-radius: 12px !important;
  display: grid !important;
  align-items: center !important;
  justify-items: center !important;
  overflow: hidden !important;
}
.shop-img{
  position: relative !important;
  margin: 0 auto !important; display: block !important;
  width: auto !important; height: auto !important;
  max-width: calc(100% - 20px) !important;
  max-height: calc(100% - 56px) !important;  /* leave vertical room for price */
  object-fit: contain !important;
}
.shop-price{
  position: absolute !important; left: 0 !important; right: 0 !important; bottom: 4px !important;
  text-align: center !important; background: transparent !important; border: none !important; box-shadow: none !important;
  font-size: 12px !important; font-weight: 800 !important;
}
@media (max-width: 480px){
  .shop-frame{ width: 112px !important; aspect-ratio: 1 / 1 !important; padding: 6px 6px 22px 6px !important; }
  .shop-img{ max-width: calc(100% - 18px) !important; max-height: calc(100% - 58px) !important; }
  .shop-price{ font-size: 11px !important; }
}


/* === OVERRIDE: bigger PNG (~2x visual) & emoji in price === */
/* Expand image area within square frame (smaller gutters) */
.shop-img{
  max-width: calc(100% - 8px) !important;
  max-height: calc(100% - 40px) !important; /* keep space for price */
  object-fit: contain !important;
  margin: 0 auto !important;
}
/* Add coin emoji to price text */
.shop-price::before{
  content: "💰 " !important;
}
@media (max-width: 480px){
  .shop-img{
    max-width: calc(100% - 10px) !important;
    max-height: calc(100% - 44px) !important;
  }
}


/* === Enhanced UNLOCK animation (longer & prettier) === */
/* Pop-in with gentle overshoot for the large preview image */
.unlock-card img{
  animation: unlock-pop 1.6s cubic-bezier(.16,.9,.1,1.02) both;
}
@keyframes unlock-pop{
  0%{ opacity:0; transform: scale(.60) rotate(-8deg); }
  58%{ opacity:1; transform: scale(1.10) rotate(2deg); }
  76%{ transform: scale(.97) rotate(0deg); }
  100%{ transform: scale(1) rotate(0deg); }
}

/* Rays behind the item + soft glow */
}

.unlock-glow{
  position:absolute; inset:50% auto auto 50%;
  translate:-50% -50%;
  width:min(46vw, 380px); height:min(46vw, 380px);
  border-radius:50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,234,170,.75) 0 28%, rgba(255,214,107,.28) 32%, rgba(126,207,255,.22) 50%, transparent 60%);
  filter: blur(2px);
  opacity:.85;
  pointer-events:none;
  z-index:0;
  animation: glow-pulse 1.8s ease-in-out infinite;
}
@keyframes glow-pulse{ 0%{ transform:scale(.92); } 50%{ transform:scale(1.02); } 100%{ transform:scale(.92); } }

/* Slightly longer, richer item birth on board */
.item.unlocked-born{ animation: unlocked-born 1.8s cubic-bezier(.18,.82,.2,1.02); }
@keyframes unlocked-born{
  0%{ transform: scale(.32) rotate(-12deg); opacity:0; }
  54%{ transform: scale(1.12) rotate(2deg); opacity:1; }
  72%{ transform: scale(.96) rotate(0deg); }
  100%{ transform: scale(1) rotate(0deg); }
}
.item.unlocked-born::before{
  content:""; position:absolute; inset:-8px; border-radius:50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,234,170,.45) 0 24%, rgba(255,214,107,.22) 28%, transparent 60%);
  animation: halo-bloom 1.4s ease-out;
  pointer-events:none;
}
@keyframes halo-bloom{ 0%{ transform:scale(.5); opacity:.9; } 100%{ transform:scale(1.8); opacity:0; } }


/* === TROPHY (click-only) === */
.trophy-wrap{
  position: fixed; top: 10px; left: 90px; z-index: 1000;
  pointer-events: none; /* wrap doesn't catch events, only button does */
}
.trophy-btn{
  pointer-events: auto;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #ffffff2a;
  background: linear-gradient(180deg, rgba(22,28,42,.82), rgba(18,24,36,.64));
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 0 14px rgba(255,255,255,.06);
  color: #ffd566;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.trophy-btn:active{ transform: translateY(1px); }

.trophy-pop{
  position: absolute; left: 22px; top: 0;
  padding: 6px 8px; border-radius: 7px;
  background: linear-gradient(180deg, rgba(24,30,46,.95), rgba(16,22,34,.88));
  border: 1px solid #ffffff22; color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .2px;
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
  white-space: nowrap;
  transform: translateY(-6px) scale(.48);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;

  transform-origin: top left;
}
.trophy-pop.show{
  opacity: 1; visibility: visible; transform: translateY(0) scale(.5);
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
/* Force click-only visibility; disable any hover/focus rules from elsewhere */
@media (max-width: 480px){
  .trophy-wrap{ top: 8px; left: 90px; }
  .trophy-btn{ width: 40px; height: 40px; font-size: 18px; }
  .trophy-pop{ left: 46px; font-size: 20px; }
}


/* === Trophy popup: click-only & beautified === */
.trophy-wrap{ position: fixed; top: 10px; left: 90px; z-index: 1000; pointer-events: none; }
.trophy-btn{
  pointer-events: auto;
  width: 36px; height: 36px; border-radius: 8px; cursor: pointer;
  border: 1px solid #ffffff30; background: linear-gradient(180deg, rgba(22,28,42,.88), rgba(18,24,36,.70));
  box-shadow: 0 8px 20px rgba(0,0,0,.38), inset 0 0 14px rgba(255,255,255,.08);
  color: #ffd566; font-size: 16px; line-height: 1; display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(4px);
}
.trophy-btn:active{ transform: translateY(1px); }

.trophy-pop{
  position: absolute; left: 56px; top: 0;
  padding: 14px 18px; border-radius: 7px;
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(255,215,130,.22), transparent 40%),
    linear-gradient(180deg, rgba(27,34,52,.96), rgba(16,22,34,.90));
  border: 1px solid #ffffff2a;
  color: #fff; font-weight: 900; font-size: 11px; letter-spacing: .3px;
  box-shadow: 0 12px 28px rgba(0,0,0,.38), inset 0 0 24px rgba(255,255,255,.06);
  white-space: nowrap;
  transform: translateY(-8px) scale(.96);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
}
.trophy-pop.show{
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(.5);
  transition: opacity .24s ease, transform .24s ease, visibility 0s;
  animation: pop-wobble .6s cubic-bezier(.2,.7,.2,1);
}
@keyframes pop-wobble{
  0%{ transform: translateY(6px) scale(.92); }
  54%{ transform: translateY(0) scale(1.04); }
  100%{ transform: translateY(0) scale(.5); }
}
@media (max-width: 480px){
  .trophy-wrap{ top: 8px; left: 90px; }
  .trophy-btn{ width: 36px; height: 36px; font-size: 16px; }
  .trophy-pop{ left: 50px; font-size: 20px; padding: 6px 8px; }
}


/* === Auto-merge separate card (🤖) === */
.auto-card{
  position: absolute;
  left: 8px;
  top: calc(50% + 128px);  /* ниже карточки покупки, на том же столбце */
  transform: translateY(-50%);
  z-index: 22;
}
.auto-frame .auto-emoji{
  position: absolute;
  inset: 10px 10px 40px 10px;   /* место под нижнюю зону кнопки */
  display: flex; align-items: center; justify-content: center;
  font-size: 64px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.32));
  pointer-events: none;
}
@media (max-width: 480px){
  .auto-card{ top: calc(50% + 116px); }
  .auto-frame .auto-emoji{ font-size: 56px; }
}


/* === ROBOT BUTTON: anti-jitter on click/tap (scoped) === */
#auto-card, #auto-card * {
  -webkit-tap-highlight-color: transparent;

}
#auto-merge-btn{
  user-select: none;
  touch-action: manipulation;
  /* limit transitions to visual props (no transform on press) */
  transition: box-shadow .2s ease, filter .2s ease;
}
/* Neutralize any press animations for robot card/button only */
#auto-card.shop-card:active,
#auto-card .shop-frame:active,
#auto-card .shop-buy:active,
#auto-merge-btn:active{
  transform: none !important;
  animation: none !important;
}


/* === FIX: Keep 🤖 auto-merge button perfectly static on interaction === */
#auto-card,
#auto-card .auto-emoji,
#auto-merge-btn{
  transition: none !important;
  animation: none !important;

}

#auto-card:hover,
#auto-card:active,
#auto-merge-btn:hover,
#auto-merge-btn:active{
  transform: none !important;
}

#auto-merge-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: 0;
  box-shadow: none;
}

#auto-merge-btn{
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}
/* === /FIX === */


/* === FIX 2: Prevent hover-induced micro-movements on the 🤖 card and frame === */
#auto-card.shop-card,
#auto-card .shop-frame,
#auto-card .auto-emoji,
#auto-merge-btn{
  transform: none !important;
  transition: none !important;
  animation: none !important;
  backface-visibility: hidden;
  perspective: 1000px;
}

#auto-card.shop-card:hover,
#auto-card.shop-card:active,
#auto-card .shop-frame:hover,
#auto-card .shop-frame:active,
#auto-merge-btn:hover,
#auto-merge-btn:active{
  transform: none !important;
}
/* === /FIX 2 === */


/* === FIX 3: Restore original placement of 🤖 card and keep it on hover/active === */
#auto-card.shop-card,
#auto-card.shop-card:hover,
#auto-card.shop-card:active{
  /* original placement */
  left: 8px !important;
  top: calc(50% + 128px) !important;
  transform: translateY(-50%) !important; /* preserve offset at all times */
}

/* Ensure internal frame inherits no hover/active transforms */
#auto-card .shop-frame:hover,
#auto-card .shop-frame:active{
  transform: none !important;
}
/* === /FIX 3 === */


/* label inside robot button */
.auto-label{
  position:absolute; left:10px; right:10px; bottom:44px;
  text-align:center; font-weight:900; letter-spacing:.2px;
  color:#ffffff; text-shadow: 0 2px 8px rgba(0,0,0,.45);
  pointer-events:none;
  font-size:18px;

}
@media (max-width: 480px){
  .auto-label{ bottom:40px; font-size:16px; }
}


/* Text inside the bottom chip for robot (reuses .shop-price layout) */
.auto-chip{
  font-weight: 900;
  letter-spacing: .2px;
}


/* Hide coin icon on robot chip only */
.auto-card .shop-price::before{
  content: none !important;
  display: none !important;
}

/* === Visibility boost: larger chip text for buy & auto === */
.shop-price{ font-size: 18px !important; }
.shop-price span, .auto-chip{ font-size: 20px !important; font-weight: 900 !important; }
@media (max-width: 480px){
  .shop-price{ font-size: 16px !important; }
  .shop-price span, .auto-chip{ font-size: 18px !important; }
}

/* === Visibility boost: slightly larger button area === */
.shop-buy{
  min-height: 52px !important;
  border-radius: 14px !important;
  font-size: 18px !important;

}
@media (max-width: 480px){
  .shop-buy{ min-height: 48px !important; font-size: 17px !important; }
}


/* === Global 2x scale for UI (except the two shop buttons) === */
:root{ --ui-scale: 2; }

/* Left column frames */
.shop-frame{
  width: calc(220px * var(--ui-scale)) !important;
  border-radius: calc(18px * var(--ui-scale)) !important;
  padding: calc(14px * var(--ui-scale)) calc(14px * var(--ui-scale)) calc(40px * var(--ui-scale)) calc(14px * var(--ui-scale)) !important;
}

/* Bottom chips (price / 'Авто🎬') */
.shop-price{
  font-size: calc(18px * var(--ui-scale)) !important;
  padding: calc(6px * var(--ui-scale)) calc(10px * var(--ui-scale)) !important;
  border-radius: calc(12px * var(--ui-scale)) !important;
}
.shop-price span{ font-size: calc(20px * var(--ui-scale)) !important; font-weight: 900 !important; }

/* Robot emoji in frame */
.auto-frame .auto-emoji{
  inset: calc(10px * var(--ui-scale)) calc(10px * var(--ui-scale)) calc(40px * var(--ui-scale)) calc(10px * var(--ui-scale)) !important;
  font-size: calc(64px * var(--ui-scale)) !important;
}

/* Trophy */
.trophy-btn{
  width: calc(36px * var(--ui-scale)) !important;
  height: calc(36px * var(--ui-scale)) !important;
  border-radius: calc(8px * var(--ui-scale)) !important;
  font-size: calc(16px * var(--ui-scale)) !important;
}
.trophy-pop{
  left: calc(50px * var(--ui-scale)) !important;
  font-size: calc(20px * var(--ui-scale)) !important;
  padding: calc(12px * var(--ui-scale)) calc(16px * var(--ui-scale)) !important;
  border-radius: calc(14px * var(--ui-scale)) !important;
}

/* HUD */
.coin-amount{ font-size: clamp(36px, 6vw, 60px) !important; }
.cps-indicator{ font-size: calc(14px * var(--ui-scale)) !important; }
.cps-label{ font-size: calc(14px * var(--ui-scale)) !important; }
#cps{ font-size: calc(16px * var(--ui-scale)) !important; font-weight:800 !important; }

/* EXCEPTIONS: keep the two buttons at original size */
#shop-card .shop-buy, #auto-card .shop-buy{
  min-height: 42px !important;
  font-size: 16px !important;
  border-radius: 12px !important;
  transform: none !important;
}
@media (max-width: 480px){
  #shop-card .shop-buy, #auto-card .shop-buy{ min-height: 40px !important; font-size: 15px !important; }
}

/* === EXCLUDE SHOP & AUTO CARDS FROM GLOBAL SCALE (keep original button sizes) === */
#shop-card .shop-frame, #auto-card .shop-frame{
  width: 220px !important;
  border-radius: 18px !important;
  padding: 14px 14px 40px 14px !important;

}
#shop-card .shop-price, #auto-card .shop-price{
  font-size: 18px !important;
  padding: 6px 10px !important;
  border-radius: 12px !important;
}
#shop-card .shop-price span, #auto-card .shop-price span{
  font-size: 20px !important;
  font-weight: 900 !important;
}
#auto-card .auto-emoji{
  inset: 10px 10px 40px 10px !important;
  font-size: 64px !important;
}


/* === Halve the size of both left cards; add vertical gap === */
#shop-card .shop-frame, #auto-card .shop-frame{
  width: 110px !important;
  border-radius: 9px !important;
  padding: 7px 7px 20px 7px !important;
}
#shop-card .shop-price, #auto-card .shop-price{
  font-size: 10px !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
}
#shop-card .shop-price span, #auto-card .shop-price span{ 
  font-size: 11px !important; 
  font-weight: 900 !important;
}
#auto-card .auto-emoji{
  inset: 6px 6px 22px 6px !important;
  font-size: 32px !important;
}
#shop-card .shop-buy, #auto-card .shop-buy{
  min-height: 24px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}

/* Ensure the cards do not visually merge: push auto card lower */
.auto-card{
  top: calc(50% + 220px) !important;
}


/* === ENLARGE LEFT-SIDE BUTTON CARDS (Купить + Авто🎬) BY 1.5× AND KEEP SEPARATION === */
#shop-card .shop-frame, #auto-card .shop-frame{
  width: 165px !important;            /* 110 × 1.5 */
  border-radius: 14px !important;     /* 9 × 1.5 ≈ 13.5 */
  padding: 11px 11px 30px 11px !important; /* 7 × 1.5 ≈ 10.5; 20 × 1.5 = 30 */

}
#shop-card .shop-price, #auto-card .shop-price{
  font-size: 15px !important;         /* 10 × 1.5 */
  padding: 6px 9px !important;        /* 4,6 × 1.5 */
  border-radius: 9px !important;      /* 6 × 1.5 */
}
#shop-card .shop-price span, #auto-card .shop-price span{
  font-size: 17px !important;         /* 11 × 1.5 ≈ 16.5 */
  font-weight: 900 !important;
}
#auto-card .auto-emoji{
  inset: 9px 9px 33px 9px !important; /* 6,6,22 → ×1.5 */
  font-size: 48px !important;         /* 32 × 1.5 */
}
#shop-card .shop-buy, #auto-card .shop-buy{
  min-height: 36px !important;        /* 24 × 1.5 */
  font-size: 18px !important;         /* 12 × 1.5 */
  border-radius: 12px !important;     /* 8 × 1.5 */
}

/* Keep a visible gap so the cards do not merge (не слипаются) */
.auto-card{
  top: calc(50% + clamp(300px, 36vh, 360px)) !important;  /* keep a stable visible gap between cards on all screens */
}


/* === FORCE NON-MERGING GAP BETWEEN LEFT CARDS (VARIABLE-BASED) === */
:root{
  --left-card-w: 165px;                    /* must match our enlarged width */
  --left-card-h: calc(var(--left-card-w) * 4 / 3);
  --left-gap: 28px;                        /* adjust this for more/less gap */
}

/* Place auto card strictly below the shop card by its full height + gap */
.auto-card{
  transform: none !important;              /* cancel center-translate to avoid overlap math */
  top: calc(50% + var(--left-card-h) + var(--left-gap)) !important;
}

/* Ensure mobile keeps the same explicit gap */
@media (max-width: 480px){
  .auto-card{
    transform: none !important;
    top: calc(50% + var(--left-card-h) + var(--left-gap)) !important;
  }
}

/* === Fix: small gap between Buy and Auto cards so they don't touch === */
#auto-card{
  margin-top: 40px !important;  /* create a subtle, consistent spacing */
}


/* === RECYCLE button (copy of TROPHY, placed to the right) === */
.recycle-wrap{
  position: fixed; top: 10px; left: 10px; z-index: 1000;
  pointer-events: none;

}


/* Modal */
.modal{ position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.45); z-index: 1000; }
.modal.show{ display:flex; }
.modal-card{
  width: min(460px, 92vw);
  background: var(--panel);
  border: 1px solid #ffffff22;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  color: var(--text);
  backdrop-filter: blur(6px);
}
.modal-card h3{ margin: 8px 0 6px; font-size: 20px; }
.modal-card p{ margin: 6px 0 8px; color: var(--muted); }
.modal-card ul{ margin: 8px 0 12px 18px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; }
.btn{ padding:10px 14px; border-radius:12px; border:1px solid #ffffff2a; background:rgba(255,255,255,.06); color:var(--text); font-weight:700; cursor:pointer; }
.btn.danger{ background:#e24a4a; border-color:#e24a4a; color:white; 
}
.shop-card.disabled{ opacity:.6; filter:saturate(.75); pointer-events: auto; }


/* Disabled buttons look gray/inactive */
.btn[disabled], .btn:disabled, .btn.danger[disabled]{
  opacity: .7;
  filter: grayscale(0.6);
  cursor: not-allowed;
  background: #6b7280 !important;
  border-color: #6b7280 !important;
  color: #e5e7eb !important;

}

/* Nicer prestige modal */
#prestige-modal .modal-card{
  background: linear-gradient(180deg, rgba(18,24,38,.92), rgba(12,18,28,.92));
  border: 1px solid #ffffff33;
  box-shadow: 0 20px 50px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
}
#prestige-modal .modal-card h3{
  display:flex; align-items:center; gap:8px;
  font-size:22px;
}
#prestige-modal .modal-card h3::before{
  content:'♻️';
  display:inline-block;
}
#prestige-modal .pm-baseline{
  margin:4px 0 8px;
  font-size: 13px;
  color: var(--muted);
  background: rgba(255,255,255,.06);
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #ffffff14;
}
#prestige-modal #pm-bonuses{
  margin: 10px 0 14px 14px;
}
#prestige-modal #pm-bonuses li{
  margin: 6px 0;
}
#prestige-modal #pm-bonuses li::marker{ content: "✔ "; }
#prestige-modal .modal-actions .btn.danger{ transition: transform .06s ease, filter .2s ease; 
}
#prestige-modal .modal-actions .btn.danger:not([disabled]):active{ transform: translateY(1px); 
}


/* Subtitle above bonuses list in Prestige modal */
#prestige-modal .pm-subtitle{
  margin: 6px 0 4px;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--muted);
  line-height: 1.2;
}


/* Yandex Games: disable selection/callouts & overscroll */
html, body { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
img, canvas { -webkit-touch-callout: none; }



/* === Mobile landscape: make the board truly edge-to-edge === */
@media (orientation: landscape) and (max-height: 500px), (orientation: landscape) and (max-width: 1024px){
  .field, .board, .game, .mobile-field, .playfield {aspect-ratio:16/9 !important;width:100% !important;height:auto !important;}

  html, body{
    height: 100dvh;           /* avoid Safari URL-bar issues */
    min-height: 100dvh;
    overflow: hidden;
  }
  #board-wrap{
    position: fixed;          /* pin to viewport */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  #board{ 
    border-radius: 0;         /* remove rounding to use all pixels */
  }
  /* Optional: tuck top HUD a bit so it doesn't steal width */
  .coin-hud{ top: 6px; }
}

/* Extra safety for very small landscape phones */
@media (orientation: landscape) and (max-width: 740px){
  .field, .board, .game, .mobile-field, .playfield {aspect-ratio:16/9 !important;width:100% !important;height:auto !important;}

  #shop, #auto-card, .btn.spawn, .trophy-wrap{ !important; 
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
}


/* Ensure absolute children (like 🔊 music toggle) can pin inside the prestige modal window */
#prestige-modal .modal-card { position: relative; }
#prestige-modal #musicToggle { bottom: 12px; left: 12px; }



/* --- Orientation & viewport fixes (added) --- */
:root { --safeVh: 1vh; --scale: 1; }
html, body {
  height: calc(var(--safeVh) * 100);
}
#app-scale { transform-origin: top left; }
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}
/* Prevent squashing: keep key containers at their aspect ratio if defined */
.aspect-16x9 { aspect-ratio: 16 / 9; }
.aspect-9x16 { aspect-ratio: 9 / 16; }
.aspect-square { aspect-ratio: 1 / 1; }