/* Nunito font loaded via <link> in index.html — parallel with CSS, not blocking */

/* ================================================================
   DESIGN TOKENS
   ================================================================ */
:root {
  /* --- Backgrounds --- */
  --color-bg-primary: #1a0a2e;
  --color-bg-secondary: #0d0a1e;
  --color-surface: #151a30;
  --color-surface-grad: linear-gradient(180deg,#1a2040,#0d1025);
  --color-overlay: rgba(0,0,0,0.65);
  --bg-panel: rgba(0,0,0,0.4);
  --bg-panel-hover: rgba(255,255,255,0.08);
  --bg-frosted: rgba(255,255,255,0.06);
  --bg-bar: rgba(255,255,255,0.12);
  --bg-hud: linear-gradient(180deg,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.5) 60%,transparent 100%);
  --bg-btn-sec: linear-gradient(180deg,rgba(55,55,75,0.9),rgba(30,30,50,0.9));
  --bg-card: linear-gradient(180deg,#1e2a3a,#152030);

  /* --- Text --- */
  --color-text-primary: #fff;
  --color-text-secondary: rgba(255,255,255,0.65);
  --color-text-muted: rgba(255,255,255,0.45);
  --color-text-on-accent: #fff;
  --color-text-on-gold: #5d4037;

  /* --- Accent (CTA green) --- */
  --color-accent: #66bb6a;
  --color-accent-dark: #2e7d32;
  --color-accent-active: #1b5e20;
  --color-accent-glow: rgba(76,175,80,0.4);

  /* --- Semantic --- */
  --color-success: #4caf50;
  --color-warning: #ff9800;
  --color-error: #ff5252;

  /* --- Gold --- */
  --gold: #ffeb3b; --gold-dark: #f9a825; --gold-shadow: #e65100;
  --gold-glow: rgba(255,235,59,0.3); --gold-border: rgba(255,235,59,0.3);
  --gold-text: #ffd700;

  /* --- Danger --- */
  --danger: #ff5252; --danger-dark: #c62828; --danger-shadow: #b71c1c; --danger-bright: #ff1744;

  /* --- Orange --- */
  --orange: #ff9800; --orange-dark: #e65100; --orange-shadow: #bf360c;

  /* --- Grey --- */
  --grey: #607d8b; --grey-dark: #455a64; --grey-shadow: #263238;

  /* --- Blue --- */
  --blue: #2196f3; --blue-light: #42a5f5; --blue-dark: #1565c0; --blue-shadow: #0d47a1;

  /* --- Lime (XP) --- */
  --lime: #76ff03; --lime-dark: #00e676; --lime-glow: rgba(118,255,3,0.3); --lime-border: rgba(118,255,3,0.3); --lime-text: rgba(118,255,3,0.8);

  /* --- Purple / Cyan --- */
  --purple: #ab47bc; --purple-glow: rgba(171,71,188,0.2);
  --purple-text: #ce93d8;
  --cyan: #4fc3f7; --cyan-glow: rgba(79,195,247,0.5);

  /* --- Rarity --- */
  --rarity-grey:#5c6370; --rarity-blue:var(--blue); --rarity-purple:var(--purple); --rarity-gold:#ffb300; --rarity-red:var(--danger-bright);

  /* --- Borders --- */
  --border-subtle: rgba(255,255,255,0.06);
  --border-light: rgba(255,255,255,0.15);
  --border-medium: rgba(255,255,255,0.25);

  /* --- Shadows --- */
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);

  /* --- Spacing --- */
  --space-xs: clamp(2px, 0.5vmin, 6px);
  --space-sm: clamp(4px, 1vmin, 10px);
  --space-md: clamp(8px, 2vmin, 16px);
  --space-lg: clamp(12px, 3vmin, 24px);
  --space-xl: clamp(20px, 4vmin, 32px);

  /* --- Radius --- */
  --radius-sm: clamp(4px, 1vmin, 10px);
  --radius-md: clamp(8px, 2vmin, 16px);
  --radius-lg: clamp(12px, 3vmin, 24px);

  /* --- Z-Index --- */
  --z-game:1; --z-hud:10; --z-floating:20; --z-nav:30;
  --z-dropdown:40; --z-toast:50; --z-modal-backdrop:60;
  --z-modal:70; --z-toast-over-modal:80; --z-critical:100;

  /* --- Font Sizes --- */
  --fs-xs:   clamp(10px, 1.8vmin, 14px);
  --fs-sm:   clamp(12px, 2.2vmin, 18px);
  --fs-base: clamp(14px, 2.8vmin, 22px);
  --fs-md:   clamp(16px, 3.5vmin, 28px);
  --fs-lg:   clamp(20px, 4.5vmin, 36px);
  --fs-xl:   clamp(26px, 6vmin, 48px);
  --fs-title:clamp(32px, 10vw, 96px);

  /* --- UI Scale: автоматический множитель для маленьких экранов --- */
  --ui-scale: 1;
}

/* Маленькие телефоны (<380px): увеличиваем интерфейс */
@media (max-width: 379px) {
  :root { --ui-scale: 1.08; }
}
/* Средние телефоны (380-479px): чуть увеличиваем */
@media (min-width: 380px) and (max-width: 479px) {
  :root { --ui-scale: 1.02; }
}
/* Десктоп: UI масштабируется вверх по ширине экрана, чтобы не был мелким */
@media (min-width: 768px)  { :root { --ui-scale: 1.0; } }
@media (min-width: 1300px) { :root { --ui-scale: 1.35; } }
@media (min-width: 1800px) { :root { --ui-scale: 1.75; } }
@media (min-width: 2300px) { :root { --ui-scale: 2.1; } }

/* ================================================================
   GLOBAL RESET
   ================================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
html{font-size:clamp(14px,2.5vmin,22px);touch-action:manipulation;overflow:hidden;position:fixed;width:100%;height:100%;height:100dvh;overscroll-behavior:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Nunito','Segoe UI',system-ui,'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;font-weight:700;overflow:hidden;background:var(--color-bg-primary);background:linear-gradient(180deg,#1a0a2e,#0e0520);width:100vw;height:100vh;height:100dvh;cursor:default;overscroll-behavior:none;color:var(--color-text-primary);touch-action:none}
/* Прокручиваемые контейнеры — даём браузеру обрабатывать вертикальный скролл нативно
   (фоновый thread, без JS-блокировок). Без этого магазин "залипал" на мобиле. */
.shop-content,.panel-content,.modal-card,.shop-mobile-tabs,.shop-nav{touch-action:pan-y;overscroll-behavior:contain}
/* пп.1.6.1.8 / 1.6.2.7: запрет нативного перетаскивания и лонгтап-меню картинок */
img{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;user-drag:none;-webkit-touch-callout:none;pointer-events:none}
/* п.1.15: иконка-картинка вместо emoji-пилы (🪚 отсутствует в старых emoji-шрифтах) */
.tab-icon-img{width:1.1em;height:1.1em;object-fit:contain;vertical-align:-0.15em;display:inline-block}
.pause-stat-icon .tab-icon-img{width:1em;height:1em}

/* ================================================================
   UNIFIED BUTTON SYSTEM
   ================================================================ */
button,.mob-tab,.nav-item,.spec-path,.panel-tab{font-family:'Nunito','Segoe UI',system-ui,'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;transition:transform .1s ease,filter .1s ease,box-shadow .1s ease,background .15s ease,border-color .15s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}
button:active,.mob-tab:active,.spec-path:active,.nav-item:active,.panel-tab:active{transform:scale(.95)!important;filter:brightness(.85)!important}
button:disabled{opacity:.5;pointer-events:none;filter:grayscale(.5)}

/* PRIMARY CTA */
.btn-big{display:inline-flex;align-items:center;justify-content:center;margin:var(--space-sm) auto;padding:var(--space-sm) var(--space-lg);font-size:var(--fs-base);font-weight:900;border:none;border-radius:var(--radius-md);text-transform:uppercase;letter-spacing:1px;position:relative;overflow:hidden;height:clamp(40px,8vmin,64px);min-height:48px;min-width:max-content;text-shadow:0 1px 3px rgba(0,0,0,.3);white-space:nowrap;box-shadow:var(--shadow-sm)}
.btn-big::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transition:left .5s}
.btn-big:hover::before{left:100%}
.btn-big:hover{box-shadow:var(--shadow-md)}
.btn-play{background:linear-gradient(180deg,var(--color-accent),var(--color-accent-dark));color:var(--color-text-on-accent);box-shadow:0 3px 0 var(--color-accent-active),var(--shadow-sm);animation:fadeSlideUp .6s ease .55s both,playPulse 2s ease-in-out 1.2s infinite}
.btn-orange{background:linear-gradient(180deg,var(--orange),var(--orange-dark));color:var(--color-text-primary);box-shadow:0 3px 0 var(--orange-shadow),var(--shadow-sm)}
.btn-danger{background:linear-gradient(180deg,var(--danger),var(--danger-dark));color:var(--color-text-primary);box-shadow:0 3px 0 var(--danger-shadow),var(--shadow-sm)}
.btn-grey{background:linear-gradient(180deg,var(--grey),var(--grey-dark));color:var(--color-text-primary);box-shadow:0 3px 0 var(--grey-shadow),var(--shadow-sm)}

/* SECONDARY */
.btn-hud{background:var(--bg-btn-sec);border:2px solid var(--border-medium);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--fs-base);font-weight:900;padding:var(--space-sm);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);white-space:nowrap;backdrop-filter:blur(5px)}
.btn-hud:hover{border-color:rgba(255,255,255,.4);box-shadow:var(--shadow-md)}
.btn-hud-shop{background:linear-gradient(180deg,rgba(255,235,59,.2),rgba(255,152,0,.12));border-color:var(--gold-border);color:var(--gold)}

/* ICON-ONLY */
.btn-menu-sm{background:var(--bg-btn-sec);border:2px solid var(--border-medium);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--fs-base);font-weight:900;width:clamp(36px,8vmin,56px);height:clamp(36px,8vmin,56px);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.btn-menu-sm:hover{border-color:rgba(255,255,255,.4);box-shadow:var(--shadow-md)}
.shop-close-btn{width:clamp(36px,8vmin,56px);height:clamp(36px,8vmin,56px);min-width:44px;min-height:44px;border:2px solid var(--border-medium);border-radius:var(--radius-md);background:var(--bg-btn-sec);color:var(--color-text-primary);font-size:var(--fs-base);font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.shop-close-btn:hover{background:rgba(255,50,50,.3);border-color:var(--danger);color:var(--danger)}

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes titleBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fadeSlideDown{0%{opacity:0;transform:translateY(-15px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseGlow{0%,100%{filter:drop-shadow(0 0 6px var(--gold-glow))}50%{filter:drop-shadow(0 0 14px rgba(255,235,59,.6))}}
@keyframes scaleIn{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes playPulse{0%,100%{box-shadow:0 3px 0 var(--color-accent-active),var(--shadow-sm)}50%{box-shadow:0 3px 0 var(--color-accent-active),var(--shadow-sm),0 0 20px var(--color-accent-glow)}}
@keyframes coinBump{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes cardPop{0%{opacity:0;transform:scale(.85)}100%{opacity:1;transform:scale(1)}}
@keyframes cardSlideIn{0%{opacity:0;transform:translateX(30px)}100%{opacity:1;transform:translateX(0)}}
@keyframes panelSlideIn{0%{transform:translateX(100%);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes shopFadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes orderSlideIn{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes modalPop{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes rewardPulse{0%,100%{transform:scale(1);text-shadow:0 2px 8px var(--gold-glow)}50%{transform:scale(1.06);text-shadow:0 2px 16px rgba(255,235,59,.8)}}
@keyframes chestBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes streakPulse{0%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes frenzyPulse{0%{opacity:.7;transform:scale(1)}100%{opacity:1;transform:scale(1.04)}}
@keyframes modPulse{0%{opacity:.8}100%{opacity:1}}
@keyframes goalPulse{0%{opacity:.8}100%{opacity:1;box-shadow:0 0 8px var(--color-accent-glow)}}
@keyframes ribbonPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes recommendPulse{0%,100%{box-shadow:0 0 6px var(--gold-glow)}50%{box-shadow:0 0 18px rgba(255,235,59,.6)}}
@keyframes shopHintPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,235,59,.6)}50%{transform:scale(1.2);box-shadow:0 0 16px 6px rgba(255,235,59,.4)}}
@keyframes toastIn{0%{opacity:0;transform:translateY(-120%)}100%{opacity:1;transform:translateY(0)}}
@keyframes toastOut{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-120%)}}
@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}70%{opacity:1}100%{opacity:0;transform:translateY(clamp(-50px,-5vmin,-30px)) scale(.8)}}
@keyframes badgePop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes tooltipIn{0%{opacity:0;transform:scale(.95)}100%{opacity:1;transform:scale(1)}}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* ================================================================
   SCREENS
   ================================================================ */
.screen{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;display:none;z-index:var(--z-hud)}
.screen.active{display:flex;align-items:center;justify-content:center}

/* ================================================================
   MAIN MENU
   ================================================================ */
#menu-screen{background:linear-gradient(180deg,#1a0a2e,#0e0520);flex-direction:column;position:relative;overflow:hidden}
.menu-bg{position:absolute;inset:0;background:url('../assets/bg-tropical-day.webp') center/cover no-repeat;filter:brightness(.45) blur(3px)}
.menu-content{position:relative;z-index:var(--z-game);text-align:center;padding:var(--space-md);width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md)}
.game-title{font-weight:900;text-shadow:0 2px 0 rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.5);line-height:1;animation:fadeSlideDown .6s ease both,titleBounce 2s ease-in-out .6s infinite}
.title-line1{font-size:var(--fs-title);color:var(--orange);text-shadow:0 2px 0 var(--orange-dark),0 4px 12px rgba(0,0,0,.5);letter-spacing:clamp(2px,.8vw,6px)}
.title-and{font-size:var(--fs-lg);color:var(--gold);margin:clamp(-3px,-.4vmin,-1px) 0}
.title-line2{font-size:var(--fs-title);color:var(--color-success);text-shadow:0 2px 0 var(--color-accent-dark),0 4px 12px rgba(0,0,0,.5);letter-spacing:clamp(2px,.8vw,6px)}
.subtitle{font-size:var(--fs-base);font-weight:800;color:rgba(255,255,255,.9);text-shadow:0 2px 4px rgba(0,0,0,.5);animation:fadeSlideUp .5s ease .2s both}
.menu-top-bar{position:absolute;top:var(--space-md);right:var(--space-md);z-index:var(--z-hud);display:flex;gap:var(--space-xs);animation:fadeSlideDown .5s ease .8s both}

/* Menu info cards */
.menu-info-cards{display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap;animation:fadeSlideUp .6s ease .45s both}
.menu-info-card{background:var(--bg-panel);border:2px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);min-width:clamp(60px,16vw,110px);text-align:center;backdrop-filter:blur(8px);box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.menu-info-card:hover{transform:translateY(-3px);border-color:var(--gold-border);box-shadow:var(--shadow-md)}
.menu-info-icon{font-size:var(--fs-base);margin-bottom:var(--space-xs);filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.menu-info-card:first-child .menu-info-icon{color:var(--gold)}
.menu-info-card:first-child .menu-info-value{color:var(--gold)}
.menu-info-value{font-size:var(--fs-md);font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,.5);line-height:1.1;font-variant-numeric:tabular-nums}
.menu-info-label{font-size:var(--fs-xs);font-weight:700;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.4);margin-top:var(--space-xs)}
.coin-icon,.menu-coins{display:none}

/* ================================================================
   GAME SCREEN — fills viewport, no centering
   ================================================================ */
#game-screen{background:linear-gradient(180deg,#1a0a2e,#0e0520)}
#game-screen.active{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh}

/* ================================================================
   HUD
   ================================================================ */
#game-hud{position:fixed;top:0;left:0;right:0;z-index:var(--z-hud);display:flex;align-items:flex-start;justify-content:space-between;padding:var(--space-sm);background:var(--bg-hud);pointer-events:none;gap:var(--space-xs)}
#game-hud>*{pointer-events:auto}
/* HUD-группы масштабируются каждая от своего края — на широких экранах
   UI крупнее, но не выезжает за границы (полоса HUD остаётся 100vw) */
.hud-left,.hud-right,.hud-center{display:flex;align-items:center;gap:var(--space-sm)}
.hud-left{transform-origin:top left;transform:scale(var(--ui-scale))}
.hud-center{transform-origin:top center;transform:scale(var(--ui-scale))}
.hud-right{transform-origin:top right;transform:scale(var(--ui-scale))}
.hud-right{gap:var(--space-xs);margin-right:clamp(14px,4vw,40px)}
.hud-center{flex-direction:column;gap:var(--space-xs)}
#game-hud.hud-minimal .hud-total,#game-hud.hud-minimal .hud-per-sec,#game-hud.hud-minimal .hud-spawn-wrap,#game-hud.hud-minimal .hud-xp-text,#game-hud.hud-minimal #btn-settings-game,#game-hud.hud-minimal .hud-frenzy-timer,#game-hud.hud-minimal .hud-modifier{display:none!important}
#game-hud.hud-phase2 .hud-total,#game-hud.hud-phase2 .hud-per-sec,#game-hud.hud-phase2 .hud-spawn-wrap,#game-hud.hud-phase2 #btn-settings-game{display:none!important}

.hud-item{font-size:var(--fs-base);font-weight:900;text-shadow:0 1px 4px rgba(0,0,0,.6);white-space:nowrap}
.hud-coins{color:var(--gold);font-size:clamp(20px,4.4vmin,35px);background:var(--bg-panel);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);border:2px solid var(--gold-border);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:var(--space-xs);animation:fadeSlideDown .4s ease both;transition:transform .15s;font-variant-numeric:tabular-nums;margin-left:clamp(20px,5vw,50px);margin-top:var(--space-sm)}
.hud-coins.bump{animation:coinBump .3s ease}
.hud-coin-img{width:clamp(20px,4.4vmin,30px);height:clamp(20px,4.4vmin,30px);object-fit:contain;vertical-align:middle}
.hud-level-wrap{display:flex;align-items:center;gap:var(--space-xs)}
.hud-level{color:var(--lime);background:var(--bg-panel);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);border:2px solid var(--lime-border);font-size:var(--fs-md);box-shadow:var(--shadow-sm);font-variant-numeric:tabular-nums}
.hud-xp-text{font-size:var(--fs-xs);font-weight:800;color:var(--lime-text);white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.5);font-variant-numeric:tabular-nums}
.xp-bar-wrap{width:clamp(40px,15vw,200px);height:clamp(4px,1vmin,10px);background:var(--bg-bar);border-radius:var(--radius-sm);overflow:hidden}
.xp-fill{height:100%;background:linear-gradient(90deg,var(--lime),var(--lime-dark));border-radius:var(--radius-sm);transition:width .3s;width:0%}
.hud-spawn-wrap{display:flex;align-items:center;gap:var(--space-xs)}
.hud-spawn-bar{width:clamp(30px,10vw,120px);height:clamp(4px,1vmin,10px);background:var(--bg-bar);border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border-subtle)}
.spawn-fill{height:100%;background:linear-gradient(90deg,var(--orange),var(--danger));border-radius:var(--radius-sm);transition:width .15s;width:0%}
.hud-spawn-count{font-size:var(--fs-xs);font-weight:900;color:var(--orange);text-shadow:0 1px 3px rgba(0,0,0,.5);white-space:nowrap;font-variant-numeric:tabular-nums}
.hud-per-sec{color:var(--color-text-secondary);font-size:var(--fs-xs);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.hud-total{font-size:var(--fs-xs);opacity:.8;text-shadow:0 1px 3px rgba(0,0,0,.6);font-variant-numeric:tabular-nums}

/* ================================================================
   CANVAS
   ================================================================ */
#game-canvas{display:block;width:100%;height:100vh;height:100dvh;cursor:none;touch-action:none}
@media(pointer:coarse){#game-canvas{cursor:default}}

/* ================================================================
   SIDE PANEL
   ================================================================ */
.side-panel{position:fixed;top:0;right:0;height:100vh;height:100dvh;z-index:var(--z-nav);display:none;pointer-events:auto}
.side-panel.visible{display:flex}
.side-panel *{cursor:default!important}
.panel-tabs{display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-xl) var(--space-xs) var(--space-xs);background:linear-gradient(180deg,rgba(0,0,0,.8),rgba(10,5,30,.75));backdrop-filter:blur(10px);border-left:1px solid var(--border-subtle)}
.panel-tab{width:clamp(36px,7vmin,52px);height:clamp(36px,7vmin,52px);border:2px solid var(--border-light);border-radius:var(--radius-md);background:var(--bg-frosted);font-size:var(--fs-base);color:var(--color-text-primary);display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;box-shadow:var(--shadow-sm)}
.panel-tab.active{background:linear-gradient(135deg,rgba(255,235,59,.2),rgba(255,152,0,.12));border-color:var(--gold);box-shadow:0 0 clamp(8px,1.5vmin,14px) var(--gold-glow);animation:scaleIn .2s ease}
.panel-content{width:clamp(180px,35vw,280px);background:linear-gradient(180deg,rgba(8,6,30,.96),rgba(15,10,40,.94));backdrop-filter:blur(14px);border-left:1px solid var(--border-subtle);overflow-y:auto;padding:var(--space-xl) var(--space-sm) var(--space-sm);display:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.side-panel.expanded .panel-content{display:block;animation:panelSlideIn .25s ease both}
.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm);padding-bottom:var(--space-xs);border-bottom:1px solid var(--border-subtle)}
.panel-title{font-size:var(--fs-base);font-weight:900;letter-spacing:1px;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.panel-coins{color:var(--gold);font-weight:900;font-size:var(--fs-md);background:var(--bg-panel);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);border:1px solid rgba(255,235,59,.2);font-variant-numeric:tabular-nums}
.panel-items{display:flex;flex-direction:column;gap:var(--space-xs);padding-bottom:var(--space-md)}

/* ================================================================
   PANEL CARDS
   ================================================================ */
.p-card{border-radius:var(--radius-md);overflow:hidden;border:clamp(2px,.4vmin,3px) solid;background:var(--bg-card);box-shadow:var(--shadow-sm);animation:cardSlideIn .3s ease both;transition:transform .15s,box-shadow .15s}
.p-card:nth-child(1){animation-delay:.03s}.p-card:nth-child(2){animation-delay:.06s}.p-card:nth-child(3){animation-delay:.09s}.p-card:nth-child(4){animation-delay:.12s}.p-card:nth-child(5){animation-delay:.15s}.p-card:nth-child(6){animation-delay:.18s}.p-card:nth-child(7){animation-delay:.21s}
.p-card:hover{transform:scale(1.02);box-shadow:var(--shadow-md)}
.p-card-top{display:flex;align-items:center;justify-content:center;padding:var(--space-sm) var(--space-xs)}
.p-card-bot{background:var(--bg-panel);padding:var(--space-xs) var(--space-sm) var(--space-sm);text-align:center}
.p-card.r-grey{border-color:var(--rarity-grey);background:linear-gradient(180deg,#2a3040,#1a2030)}
.p-card.r-blue{border-color:var(--rarity-blue);background:linear-gradient(180deg,#0d2f5e,#0a1a3a);box-shadow:0 0 10px rgba(33,150,243,.15)}
.p-card.r-purple{border-color:var(--rarity-purple);background:linear-gradient(180deg,#2a1040,#1a0a2e);box-shadow:0 0 10px var(--purple-glow)}
.p-card.r-gold{border-color:var(--rarity-gold);background:linear-gradient(180deg,#3a2a00,#2a1a00);box-shadow:0 0 12px rgba(255,179,0,.2)}
.p-card.r-red{border-color:var(--rarity-red);background:linear-gradient(180deg,#3a0a10,#2a0008);box-shadow:0 0 12px rgba(255,23,68,.15)}
.p-card.is-equipped{border-color:var(--lime)!important;box-shadow:0 0 16px var(--lime-glow)!important}
.p-icon{width:clamp(32px,7vmin,56px);height:clamp(32px,7vmin,56px);display:flex;align-items:center;justify-content:center;font-size:clamp(20px,4.5vmin,36px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.p-icon img{width:clamp(28px,6vmin,50px);height:clamp(28px,6vmin,50px);object-fit:contain}
.p-name{font-size:var(--fs-sm);font-weight:900;text-shadow:0 1px 2px rgba(0,0,0,.4);white-space:nowrap}
.p-desc{font-size:var(--fs-xs);color:var(--color-text-secondary);margin-top:1px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.p-stars{display:flex;justify-content:center;gap:1px;margin:var(--space-xs) 0}
.p-star{width:clamp(6px,1.4vmin,10px);height:clamp(6px,1.4vmin,10px);background:var(--bg-bar);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.p-star.on{background:var(--gold-text);filter:drop-shadow(0 0 2px rgba(255,215,64,.6))}
.p-bar{height:clamp(4px,1vmin,8px);background:var(--bg-bar);border-radius:var(--radius-sm);overflow:hidden;margin:var(--space-xs) 0 0;border:1px solid var(--border-subtle)}
.p-bar-fill{height:100%;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--lime),var(--lime-dark));transition:width .3s;box-shadow:0 0 4px var(--lime-glow)}
.p-bar-fill.red{background:linear-gradient(90deg,var(--danger),var(--danger-bright));box-shadow:0 0 4px rgba(255,23,68,.3)}
.p-bar-fill.blue{background:linear-gradient(90deg,var(--blue-light),var(--blue));box-shadow:0 0 4px rgba(33,150,243,.3)}
.p-btn{display:flex;width:100%;align-items:center;justify-content:center;margin-top:var(--space-xs);padding:var(--space-sm) 0;border:none;border-radius:var(--radius-md);font-weight:900;font-size:var(--fs-sm);letter-spacing:.5px;text-transform:uppercase;min-height:44px;white-space:nowrap}
.p-btn-buy{background:linear-gradient(180deg,var(--gold),var(--gold-dark));color:var(--color-text-on-gold);box-shadow:0 3px 0 var(--gold-shadow),var(--shadow-sm);position:relative;overflow:hidden}
.p-btn-buy:not(:disabled)::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:shimmer 3s ease-in-out infinite}
.p-btn-select{background:linear-gradient(180deg,var(--blue-light),var(--blue-dark));color:var(--color-text-primary);box-shadow:0 3px 0 var(--blue-shadow),var(--shadow-sm)}
.p-btn-equipped{background:linear-gradient(180deg,var(--color-accent),var(--color-accent-dark));color:var(--color-text-primary);box-shadow:0 3px 0 var(--color-accent-active),var(--shadow-sm)}
.p-btn-maxed{background:linear-gradient(180deg,var(--grey),var(--grey-dark));color:var(--color-text-muted);box-shadow:0 3px 0 var(--grey-shadow),var(--shadow-sm)}
.p-timer-big{font-size:var(--fs-md);font-weight:900;color:var(--cyan);text-shadow:0 0 8px var(--cyan-glow);margin-top:var(--space-xs);font-variant-numeric:tabular-nums}
.p-bg-thumb{width:100%;height:clamp(30px,7vmin,50px);border-radius:var(--radius-sm);object-fit:cover;border:1px solid var(--border-subtle)}

/* ================================================================
   SHOP V2
   ================================================================ */
.shop-overlay{position:fixed;inset:0;z-index:var(--z-modal);background:linear-gradient(180deg,#0d0a1e,#08061a);display:flex;flex-direction:column;animation:shopFadeIn .2s ease}
.shop-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);background:var(--bg-panel);border-bottom:1px solid var(--border-subtle);flex-shrink:0}
.shop-title{font-size:var(--fs-base);font-weight:900;letter-spacing:1px;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,.4);white-space:nowrap}
.shop-balance{color:var(--gold);font-weight:900;font-size:var(--fs-md);background:var(--bg-panel);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);border:2px solid rgba(255,235,59,.2);box-shadow:var(--shadow-sm);font-variant-numeric:tabular-nums}
.shop-body{display:flex;flex:1;overflow:hidden}

/* Shop sidebar (desktop) */
.shop-nav{width:clamp(140px,18vw,220px);flex-shrink:0;background:var(--bg-panel);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;padding:var(--space-sm) 0;gap:1px;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-left:3px solid transparent;font-weight:800;font-size:var(--fs-sm);color:var(--color-text-secondary);min-height:44px;white-space:nowrap}
.nav-item:hover{background:var(--bg-panel-hover);color:rgba(255,255,255,.85)}
.nav-item.active{background:linear-gradient(90deg,rgba(255,235,59,.1),transparent);border-left-color:var(--gold);color:var(--gold)}
.nav-icon{font-size:var(--fs-base);width:clamp(18px,4vmin,28px);text-align:center;flex-shrink:0}
.nav-text{flex:1}
.nav-badge{margin-left:auto;font-size:var(--fs-xs);font-weight:900;background:var(--color-error);color:var(--color-text-primary);padding:0 var(--space-xs);border-radius:var(--radius-sm);font-variant-numeric:tabular-nums}

/* Shop content */
.shop-overlay{overscroll-behavior:contain}
.shop-content{flex:1;overflow-y:auto;padding:var(--space-md);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.shop-content::-webkit-scrollbar{width:3px}
.shop-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px}

/* Promo */
.shop-promo{margin-bottom:var(--space-md)}
.promo{background:linear-gradient(135deg,#1a3a6a,#0d2050);border:2px solid var(--blue);border-radius:var(--radius-lg);padding:var(--space-md);display:flex;align-items:center;gap:var(--space-md);box-shadow:var(--shadow-md);animation:cardPop .3s ease both}
.promo-img{flex-shrink:0}
.promo-img img{width:clamp(40px,8vmin,70px);height:clamp(40px,8vmin,70px);object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.promo-body{flex:1}
.promo-label{font-size:var(--fs-xs);font-weight:900;color:var(--cyan);letter-spacing:1px;text-transform:uppercase}
.promo-title{font-size:var(--fs-base);font-weight:900;margin-bottom:var(--space-xs);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.promo-desc{font-size:var(--fs-xs);color:var(--color-text-secondary);line-height:1.4;margin-bottom:var(--space-sm);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.promo-desc b{color:var(--lime)}.promo-desc .warn{color:var(--orange)}
.promo-bar{height:clamp(3px,.8vmin,6px);background:var(--bg-bar);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:var(--space-xs)}
.promo-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--orange));border-radius:var(--radius-sm);transition:width .3s;box-shadow:0 0 4px var(--gold-glow)}
.promo-progress{font-size:var(--fs-xs);font-weight:800;color:var(--color-text-muted);margin-bottom:var(--space-sm)}
.promo-btn{padding:var(--space-sm) var(--space-md);border:none;border-radius:var(--radius-md);font-weight:900;font-size:var(--fs-sm);background:linear-gradient(180deg,var(--gold),var(--gold-dark));color:var(--color-text-on-gold);box-shadow:0 3px 0 var(--gold-shadow),var(--shadow-sm);min-height:44px;white-space:nowrap}

/* Shop grid */
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm);align-content:start}
@media(min-width:1100px){.shop-grid{grid-template-columns:repeat(3,1fr)}}

/* Shop cards */
.s-card{border-radius:var(--radius-lg);border:2px solid;overflow:hidden;background:var(--bg-card);box-shadow:var(--shadow-sm);animation:cardPop .3s ease both;transition:transform .15s,box-shadow .15s}
.s-card:nth-child(1){animation-delay:.02s}.s-card:nth-child(2){animation-delay:.05s}.s-card:nth-child(3){animation-delay:.08s}.s-card:nth-child(4){animation-delay:.11s}.s-card:nth-child(5){animation-delay:.14s}.s-card:nth-child(6){animation-delay:.17s}
.s-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.s-card.r-grey{border-color:var(--rarity-grey);background:linear-gradient(180deg,#2a3040,#1a2030)}
.s-card.r-blue{border-color:var(--rarity-blue);background:linear-gradient(180deg,#0d2f5e,#0a1a3a);box-shadow:0 0 10px rgba(33,150,243,.12)}
.s-card.r-purple{border-color:var(--rarity-purple);background:linear-gradient(180deg,#2a1040,#1a0a2e);box-shadow:0 0 10px rgba(171,71,188,.12)}
.s-card.r-gold{border-color:var(--rarity-gold);background:linear-gradient(180deg,#3a2a00,#2a1a00);box-shadow:0 0 12px rgba(255,179,0,.15)}
.s-card.r-red{border-color:var(--rarity-red);background:linear-gradient(180deg,#3a0a10,#2a0008);box-shadow:0 0 12px rgba(255,23,68,.12)}
.s-card.s-equipped{border-color:var(--lime)!important;box-shadow:0 0 16px var(--lime-glow)!important}
/* recommendPulse теперь не infinite — пульсирует 3 раза (4.5с) и затихает.
   Постоянная анимация infinite жгла композитор кадр за кадром. */
.s-card.s-recommended{border-color:var(--gold)!important;animation:cardPop .3s ease both,recommendPulse 1.5s ease-in-out 3!important}
.s-card.s-locked .s-top{position:relative}
.s-card.s-locked .s-img,.s-card.s-locked .s-emoji-big{filter:brightness(.3) grayscale(.5)}
.s-lock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--fs-lg);filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))}
.s-top{display:flex;align-items:center;justify-content:center;padding:var(--space-md) var(--space-sm) var(--space-sm);position:relative;min-height:clamp(50px,12vmin,100px)}
.s-top-wide{padding:0;min-height:auto}
.s-img{width:clamp(40px,10vmin,80px);height:clamp(40px,10vmin,80px);object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6));transition:transform .2s}
.s-card:hover .s-img{transform:scale(1.08) rotate(2deg)}
.s-emoji-big{font-size:clamp(24px,7vmin,48px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.s-bot{background:var(--bg-panel);padding:var(--space-sm);text-align:center}
.s-name{font-size:var(--fs-sm);font-weight:900;margin-bottom:var(--space-xs);text-shadow:0 1px 2px rgba(0,0,0,.4);white-space:nowrap}
.s-desc{font-size:var(--fs-xs);color:var(--color-text-secondary);line-height:1.3;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.s-mult{font-size:var(--fs-md);font-weight:900;color:var(--gold);text-shadow:0 0 8px var(--gold-glow);font-variant-numeric:tabular-nums}
.s-stats{display:flex;justify-content:center;gap:var(--space-sm);margin:var(--space-xs) 0}
.s-stat{font-size:var(--fs-sm);font-weight:900;font-variant-numeric:tabular-nums}
.s-stat-coin{color:var(--gold)}.s-stat-hp{color:var(--danger)}
.s-stars{display:flex;justify-content:center;gap:var(--space-xs);margin:var(--space-xs) 0}
.s-star{width:clamp(8px,1.8vmin,12px);height:clamp(8px,1.8vmin,12px);background:var(--bg-bar);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.s-star.on{background:var(--gold-text);filter:drop-shadow(0 0 3px rgba(255,215,64,.6))}
.s-timer{font-size:var(--fs-md);font-weight:900;color:var(--cyan);text-shadow:0 0 8px var(--cyan-glow);margin-top:var(--space-xs);font-variant-numeric:tabular-nums}
.s-bg-thumb{width:100%;height:clamp(40px,10vmin,80px);object-fit:cover}
.s-card-wide{grid-column:span 2}
.s-btn{display:flex;width:100%;align-items:center;justify-content:center;margin-top:var(--space-xs);padding:var(--space-sm) 0;border:none;border-radius:var(--radius-md);font-weight:900;font-size:var(--fs-sm);letter-spacing:.5px;text-transform:uppercase;min-height:44px;white-space:nowrap}
.s-btn-buy{background:linear-gradient(180deg,var(--gold),var(--gold-dark));color:var(--color-text-on-gold);box-shadow:0 3px 0 var(--gold-shadow),var(--shadow-sm)}
.s-btn-select{background:linear-gradient(180deg,var(--blue-light),var(--blue-dark));color:var(--color-text-primary);box-shadow:0 3px 0 var(--blue-shadow),var(--shadow-sm)}
.s-btn-owned{background:linear-gradient(180deg,var(--color-accent),var(--color-accent-dark));color:var(--color-text-primary);box-shadow:0 3px 0 var(--color-accent-active),var(--shadow-sm)}
.s-btn-maxed{background:linear-gradient(180deg,var(--grey),var(--grey-dark));color:var(--color-text-muted);box-shadow:0 3px 0 var(--grey-shadow),var(--shadow-sm)}
.s-btn-ad{background:linear-gradient(180deg,#66bb6a,#388e3c);color:#fff;box-shadow:0 3px 0 #1b5e20,var(--shadow-sm);font-size:var(--fs-xs)}
.s-impact{font-size:var(--fs-xs);font-weight:800;color:var(--color-text-muted);margin:var(--space-xs) 0;line-height:1.4}
.s-impact-highlight{color:var(--lime);font-weight:900;font-size:var(--fs-sm)}
.s-impact-warn{color:var(--orange);font-weight:900}

/* ================================================================
   SETTINGS
   ================================================================ */
.settings-card{width:clamp(260px,80vw,400px);max-width:92vw;padding:var(--space-lg) var(--space-md)}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) 0;border-bottom:1px solid var(--border-subtle);gap:var(--space-xs)}
.settings-row:last-of-type{border-bottom:none}
.settings-label{font-size:var(--fs-sm);font-weight:800;color:rgba(255,255,255,.8);white-space:nowrap}
.settings-btn{padding:var(--space-sm) var(--space-md);border:2px solid var(--border-medium);border-radius:var(--radius-sm);background:var(--bg-btn-sec);color:var(--color-text-primary);font-weight:900;font-size:var(--fs-sm);min-height:44px;text-align:center;box-shadow:var(--shadow-sm);white-space:nowrap}
.settings-btn.active{border-color:var(--lime);color:var(--lime);background:rgba(118,255,3,.1)}
.settings-btn.off{border-color:var(--danger);color:var(--danger);background:rgba(255,82,82,.1)}
.settings-btn-danger{border-color:rgba(255,50,50,.3);color:var(--danger)}
.settings-btn-danger:hover{background:rgba(255,50,50,.15);border-color:var(--danger)}
.settings-divider{height:1px;background:var(--border-subtle);margin:var(--space-xs) 0}
.settings-slider-wrap{display:flex;align-items:center;gap:var(--space-xs)}
.settings-btn-mini{width:44px;height:44px;border:2px solid var(--border-medium);border-radius:var(--radius-sm);background:var(--bg-btn-sec);color:var(--color-text-primary);font-size:var(--fs-base);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-sm)}
.settings-btn-mini.off{border-color:var(--danger);opacity:.5}
.settings-slider{-webkit-appearance:none;appearance:none;width:clamp(60px,18vw,140px);height:clamp(6px,1.2vmin,10px);border-radius:var(--radius-sm);background:var(--bg-bar);outline:none;cursor:pointer;touch-action:auto;padding:8px 0;margin:0}
.settings-slider::-webkit-slider-thumb{-webkit-appearance:none;width:clamp(18px,3vmin,22px);height:clamp(18px,3vmin,22px);border-radius:50%;background:linear-gradient(180deg,var(--gold),var(--gold-dark));box-shadow:var(--shadow-sm);cursor:pointer}
.settings-slider::-moz-range-thumb{width:clamp(18px,3vmin,22px);height:clamp(18px,3vmin,22px);border-radius:50%;border:none;background:linear-gradient(180deg,var(--gold),var(--gold-dark));box-shadow:var(--shadow-sm);cursor:pointer}
.settings-slider-val{font-size:var(--fs-xs);font-weight:900;color:var(--color-text-muted);min-width:clamp(24px,5vmin,36px);text-align:right;font-variant-numeric:tabular-nums}
.settings-close-btn{margin-top:var(--space-sm)!important}

/* ================================================================
   PAUSE / RESET
   ================================================================ */
#pause-modal,#settings-modal,#reset-modal{z-index:var(--z-modal)}
.pause-card{width:clamp(260px,80vw,400px);max-width:92vw;padding:var(--space-lg) var(--space-md)}
.pause-card .btn-big{width:100%;margin:var(--space-xs) 0}
.pause-stats{display:flex;justify-content:center;gap:var(--space-md);margin:var(--space-sm) 0 var(--space-md)}
.pause-stat{font-size:var(--fs-md);font-weight:900;color:var(--gold);display:flex;align-items:center;gap:var(--space-xs);font-variant-numeric:tabular-nums}
.pause-stat-icon{font-size:var(--fs-base)}
.reset-card{border-color:var(--danger-bright)}
.reset-title{color:var(--danger-bright)!important}
.reset-desc{color:var(--color-text-secondary);font-size:var(--fs-xs);font-weight:700;margin:var(--space-sm) 0 var(--space-md)}

/* ================================================================
   GOAL BANNER / ORDER CARD
   ================================================================ */
/* goal-banner → RIGHT, на уровне session-stats */
/* п.1.10.3: нижний правый стек HUD — flex-колонка вместо наложения fixed-элементов */
#hud-br-stack{position:fixed!important;bottom:calc(clamp(14px,2.5vmin,26px) + env(safe-area-inset-bottom, 0px))!important;right:calc(clamp(14px,2.5vmin,26px) + env(safe-area-inset-right, 0px))!important;left:auto!important;top:auto!important;z-index:var(--z-floating);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-sm);pointer-events:none;max-width:min(92vw,420px);transform-origin:bottom right;transform:scale(var(--ui-scale))}
.goal-banner{position:relative;background:linear-gradient(135deg,rgba(8,6,30,.92),rgba(25,15,50,.88));backdrop-filter:blur(8px);border:1px solid rgba(255,215,0,.25);border-radius:var(--radius-md);padding:var(--space-xs) var(--space-sm);display:flex;align-items:center;gap:var(--space-xs);pointer-events:none;box-shadow:var(--shadow-sm);animation:tooltipIn .3s ease both;width:clamp(200px,28vw,290px)}
.goal-icon{font-size:var(--fs-xs);flex-shrink:0}
.goal-icon img{width:clamp(18px,3.5vmin,28px);height:clamp(18px,3.5vmin,28px);object-fit:contain}
.goal-info{flex:1;min-width:0}
.goal-label{font-size:clamp(9px,1.8vmin,13px);font-weight:900;color:var(--color-text-secondary);letter-spacing:.5px;text-transform:uppercase}
.goal-name{font-size:clamp(10px,2.2vmin,16px);font-weight:900;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.4);overflow:hidden;text-overflow:ellipsis}
.goal-bar{height:clamp(3px,.5vmin,5px);background:var(--bg-bar);border-radius:var(--radius-sm);overflow:hidden;margin:2px 0 1px}
.goal-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--orange));border-radius:var(--radius-sm);transition:width .3s;box-shadow:0 0 4px var(--gold-glow)}
.goal-progress{font-size:clamp(8px,1.6vmin,12px);font-weight:800;color:var(--gold);text-align:right;font-variant-numeric:tabular-nums}
.goal-almost .goal-bar-fill{animation:goalPulse .8s ease-in-out infinite alternate}
#goal-banner{width:clamp(200px,28vw,290px)}

/* order-card → LEFT, на уровне session-stats */
.order-card{position:fixed;bottom:calc(clamp(2px,0.5vmin,6px) + env(safe-area-inset-bottom,0px));left:calc(var(--space-xs) + env(safe-area-inset-left,0px));z-index:var(--z-floating);background:linear-gradient(135deg,rgba(8,6,30,.92),rgba(20,15,50,.88));backdrop-filter:blur(8px);border:1px solid rgba(118,255,3,.25);border-radius:var(--radius-md);padding:var(--space-xs) var(--space-sm);min-width:clamp(100px,22vw,160px);max-width:clamp(130px,34vw,240px);pointer-events:none;box-shadow:var(--shadow-sm);animation:orderSlideIn .4s ease both;transform-origin:bottom left;transform:scale(var(--ui-scale))}
.order-label{font-size:clamp(9px,1.8vmin,13px);font-weight:900;color:var(--lime);letter-spacing:.5px;text-transform:uppercase;margin-bottom:1px}
.order-text{font-size:clamp(10px,2.2vmin,16px);font-weight:800;line-height:1.2;margin-bottom:1px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.order-bar-wrap{height:clamp(3px,.5vmin,5px);background:var(--bg-bar);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:1px}
.order-bar-fill{height:100%;background:linear-gradient(90deg,var(--lime),var(--lime-dark));border-radius:var(--radius-sm);transition:width .3s;width:0%;box-shadow:0 0 4px var(--lime-glow)}
.order-reward{font-size:clamp(8px,1.6vmin,12px);font-weight:900;color:var(--gold);text-align:right;font-variant-numeric:tabular-nums}
#order-card{left:calc(clamp(14px,2.5vmin,26px) + env(safe-area-inset-left, 0px))!important;bottom:calc(clamp(14px,2.5vmin,26px) + env(safe-area-inset-bottom, 0px))!important;right:auto!important;top:auto!important;transform:scale(var(--ui-scale));transform-origin:bottom left;max-width:clamp(130px,32vw,240px)}

/* ================================================================
   MODALS
   ================================================================ */
/* Без backdrop-filter:blur — экономим ~30мс на каждом открытии модалки.
   Плотный rgba даёт тот же визуальный приоритет без композитор-затрат. */
.modal-overlay{position:fixed;inset:0;z-index:var(--z-modal-backdrop);background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);overscroll-behavior:contain;touch-action:manipulation}
.modal-card{background:var(--color-surface-grad);border:3px solid var(--gold);border-radius:var(--radius-lg);padding:var(--space-lg);text-align:center;box-shadow:0 0 clamp(16px,4vmin,32px) var(--gold-glow),var(--shadow-lg);animation:modalPop .2s ease-out;width:clamp(260px,80vw,440px);max-width:92vw;max-height:85vh;overflow-y:auto;transform:scale(var(--ui-scale));touch-action:auto}

/* Модалка подтверждения рекламы */
.ad-confirm-card{position:relative}
.ad-confirm-close-btn{position:absolute;top:var(--space-sm);right:var(--space-sm);background:none;border:none;color:var(--color-text-secondary);font-size:var(--fs-md);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;z-index:2}
.ad-confirm-close-btn:hover{background:rgba(255,255,255,0.1);color:#fff}
.ad-confirm-reward{font-size:var(--fs-lg);font-weight:900;color:var(--gold-text);margin:var(--space-md) 0;text-shadow:0 2px 8px rgba(255,215,0,0.4);padding:var(--space-sm) var(--space-md);background:rgba(255,235,59,0.08);border-radius:var(--radius-md);border:1px solid rgba(255,235,59,0.15)}
.modal-title{font-size:var(--fs-lg);font-weight:900;letter-spacing:1px;margin-bottom:var(--space-sm);text-shadow:0 2px 6px rgba(0,0,0,.5)}
.modal-day{font-size:var(--fs-base);font-weight:800;color:var(--orange);margin-bottom:var(--space-xs)}
.modal-reward{font-size:var(--fs-xl);font-weight:900;color:var(--gold);text-shadow:0 2px 8px var(--gold-glow);margin:var(--space-sm) 0;animation:rewardPulse 1.5s ease-in-out infinite;font-variant-numeric:tabular-nums}
.modal-btn{margin-top:var(--space-xs)!important}
.modal-chest{width:clamp(48px,10vmin,80px);height:clamp(48px,10vmin,80px);object-fit:contain;display:block;margin:0 auto var(--space-xs);animation:chestBounce 1s ease-in-out infinite}

/* ================================================================
   MOBILE SHOP TABS — flex-wrap grid, icon-only on narrow screens
   ================================================================ */
.shop-mobile-tabs{display:none;flex-wrap:wrap;background:var(--bg-panel);border-bottom:1px solid var(--border-subtle);flex-shrink:0;overflow:hidden}
.mob-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:var(--space-xs);border-bottom:2px solid transparent;color:var(--color-text-secondary);min-height:44px;text-align:center;flex:1 1 calc(100% / 7);min-width:0;white-space:nowrap;overflow:visible}
.mob-tab.active{color:var(--gold);border-bottom-color:var(--gold);background:rgba(255,235,59,.06)}
.mob-tab-icon{font-size:var(--fs-base);line-height:1}
.mob-tab-text{font-size:var(--fs-xs);font-weight:800;letter-spacing:.3px;text-transform:uppercase;display:none}

/* Show text labels only when there's enough room (tablets+) */
@media(min-width:600px) and (max-width:699px){
  .mob-tab{flex-basis:calc(100% / 7)}
  .mob-tab-text{display:block;font-size:clamp(8px,1.5vmin,11px)}
}

/* ================================================================
   STREAK / FRENZY / MODIFIER
   ================================================================ */
.hud-streak{background:linear-gradient(135deg,rgba(255,87,34,.3),rgba(255,152,0,.3));border:2px solid rgba(255,152,0,.5);border-radius:var(--radius-md);padding:var(--space-xs) var(--space-sm);font-size:var(--fs-xs);font-weight:900;color:var(--orange);display:flex;align-items:center;gap:var(--space-xs);animation:streakPulse .5s ease-in-out;box-shadow:var(--shadow-sm)}
.hud-streak-icon{font-size:var(--fs-base)}
.hud-streak-img{width:clamp(14px,3vmin,22px);height:clamp(14px,3vmin,22px);object-fit:contain}
.hud-coin-icon{color:var(--gold);font-weight:900}
.ach-badge-bg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;object-fit:contain;opacity:.35;z-index:var(--z-game)}
.streak-tier-yellow{background:linear-gradient(135deg,rgba(255,235,59,.4),rgba(255,193,7,.4))!important;border-color:rgba(255,235,59,.7)!important}
.streak-tier-orange{background:linear-gradient(135deg,rgba(255,152,0,.5),rgba(255,87,34,.5))!important;border-color:rgba(255,152,0,.8)!important;animation:streakPulse .5s ease-in-out}
.streak-tier-red{background:linear-gradient(135deg,rgba(244,67,54,.6),rgba(211,47,47,.6))!important;border-color:rgba(244,67,54,.9)!important;animation:streakPulse .3s ease-in-out infinite alternate}
.hud-frenzy-timer{font-size:var(--fs-xs);font-weight:900;color:rgba(255,255,255,.75);text-align:center;padding:1px var(--space-xs);border-radius:var(--radius-sm);background:var(--bg-panel);font-variant-numeric:tabular-nums}
.frenzy-soon{color:var(--orange)!important;animation:frenzyPulse .5s ease-in-out infinite alternate}
.frenzy-active{color:var(--danger-bright)!important;background:rgba(255,23,68,.3)!important;animation:frenzyPulse .3s ease-in-out infinite alternate}
.hud-modifier{font-size:var(--fs-xs);font-weight:900;color:var(--purple-text);text-align:center;padding:1px var(--space-sm);border-radius:var(--radius-sm);background:rgba(224,64,251,.2);border:1px solid rgba(224,64,251,.4);animation:modPulse 1s ease-in-out infinite alternate}

/* ================================================================
   REWARDED BTN
   ================================================================ */
.reward-btn{background:linear-gradient(180deg,var(--orange),var(--orange-dark));color:var(--color-text-primary);border:none;border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);font-weight:900;font-size:var(--fs-sm);display:flex;align-items:center;gap:var(--space-xs);box-shadow:0 3px 0 var(--orange-shadow),var(--shadow-sm);min-height:44px;margin:var(--space-xs) auto 0;white-space:nowrap}

/* ================================================================
   FLOATING PANELS — stacked from bottom, no overlap
   ================================================================

   Bottom stack (center-x):
     Layer 0: session-stats       — very bottom
     Layer 1: progress-ribbon     — above session-stats
     Layer 2: ingame-buy-banner   — above ribbon  (see BUY BANNER section)

   Top stack:
     goal-banner — below HUD

   Bottom-left: order-card
   Top-left:    lb-mini
   ================================================================ */

/* session-stats → BOTTOM-RIGHT, very bottom */
.session-stats{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:linear-gradient(135deg,rgba(8,6,30,.92),rgba(25,15,50,.88));border:1px solid rgba(255,215,0,.25);backdrop-filter:blur(8px);border-radius:var(--radius-md);font-size:var(--fs-sm);font-weight:800;color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(0,0,0,.6);box-shadow:var(--shadow-sm);font-variant-numeric:tabular-nums;width:clamp(200px,28vw,290px)}
.session-stats span{white-space:nowrap}.session-divider{color:rgba(255,255,255,.2)}

/* progress-ribbon → BOTTOM-RIGHT, above session-stats with gap */
.progress-ribbon{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:linear-gradient(135deg,rgba(8,6,30,.92),rgba(25,15,50,.88));border-radius:var(--radius-md);border:1px solid rgba(255,215,0,.25);backdrop-filter:blur(8px);width:clamp(200px,28vw,290px);overflow:hidden;box-shadow:var(--shadow-sm)}
.ribbon-item{display:flex;flex-direction:column;align-items:center;min-width:clamp(30px,5vmin,50px);flex-shrink:0}
.ribbon-item img{width:clamp(22px,4.5vmin,40px);height:clamp(22px,4.5vmin,40px);border-radius:50%;border:2px solid var(--border-medium)}
.ribbon-item.done img{border-color:var(--color-success)}.ribbon-item.locked img{filter:grayscale(1) brightness(.5);border-color:var(--border-subtle)}
.ribbon-item.current img{border-color:var(--gold-text);box-shadow:0 0 clamp(3px,.8vmin,6px) rgba(255,215,0,.5);animation:ribbonPulse 1.5s ease-in-out infinite}
.ribbon-item .ribbon-price{font-size:var(--fs-xs);font-weight:800;color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.ribbon-item.done .ribbon-price{color:var(--color-success)}.ribbon-item.current .ribbon-price{color:var(--gold-text)}
.ribbon-connector{width:clamp(6px,1.2vmin,12px);height:2px;background:var(--border-light);flex-shrink:0}
.ribbon-connector.done{background:var(--color-success)}
#progress-ribbon{width:clamp(200px,28vw,290px)}

/* lb-mini отключён */
.lb-mini{display:none!important}

/* ================================================================
   SPECIALIZATION
   ================================================================ */
.spec-card{max-width:clamp(260px,80vw,400px);padding:var(--space-md)}
.spec-desc{color:var(--color-text-secondary);font-size:var(--fs-xs);font-weight:700;margin:var(--space-xs) 0 var(--space-sm)}
.spec-paths{display:flex;flex-direction:column;gap:var(--space-sm)}
.spec-path{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm);background:var(--bg-panel);border:2px solid var(--border-light);border-radius:var(--radius-md);min-height:44px;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s,border-color .15s}
.spec-path:hover{border-color:var(--spec-color,rgba(255,255,255,.3));background:linear-gradient(135deg,rgba(0,0,0,.5),rgba(0,0,0,.3));transform:translateY(-2px);box-shadow:var(--shadow-md)}
.spec-path-icon{font-size:clamp(20px,4.5vmin,32px)}
.spec-path-info{flex:1}
.spec-path-name{font-size:var(--fs-base);font-weight:900;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.spec-path-desc{font-size:var(--fs-xs);font-weight:700;color:var(--color-text-muted);margin-top:1px}

/* ================================================================
   BLITZ / SHARE
   ================================================================ */
.blitz-card{text-align:center}
.blitz-grade{font-size:var(--fs-xl);font-weight:900;margin:var(--space-xs) 0;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.blitz-score{font-size:var(--fs-lg);font-weight:900;color:var(--gold-text);margin-bottom:var(--space-xs);font-variant-numeric:tabular-nums}
.blitz-stats{font-size:var(--fs-xs);font-weight:700;color:var(--color-text-secondary);margin-bottom:var(--space-sm)}
.share-card{text-align:center}
.share-canvas{border-radius:var(--radius-sm);max-width:100%}
.share-buttons{display:flex;gap:var(--space-xs);justify-content:center;margin-top:var(--space-sm)}

/* ================================================================
   BUY BANNER / BLITZ BTN / MUTATOR
   ================================================================ */
/* ingame-buy-banner → BOTTOM-LEFT, above order-card */
.ingame-buy-banner{position:fixed;bottom:calc(clamp(80px,16vmin,120px) + env(safe-area-inset-bottom,0px));left:calc(var(--space-sm) + env(safe-area-inset-left,0px));z-index:var(--z-floating);display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm);background:linear-gradient(135deg,rgba(0,0,0,.85),rgba(30,15,50,.9));border:2px solid rgba(76,175,80,.5);border-radius:var(--radius-md);backdrop-filter:blur(8px);animation:fadeSlideUp .3s ease both;max-width:clamp(200px,40vw,360px);box-shadow:var(--shadow-md)}
.buy-banner-icon img{width:clamp(28px,6vmin,40px);height:clamp(28px,6vmin,40px);object-fit:contain}
.buy-banner-text{font-size:var(--fs-xs);font-weight:800;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.buy-banner-btn{background:linear-gradient(180deg,var(--color-success),var(--color-accent-dark));color:var(--color-text-primary);border:none;border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-sm);font-weight:900;font-size:var(--fs-sm);box-shadow:0 2px 0 var(--color-accent-active),var(--shadow-sm);white-space:nowrap;min-height:44px}
.buy-banner-close{background:none;border:none;color:var(--color-text-muted);font-size:var(--fs-base);padding:var(--space-xs);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
#ingame-buy-banner{left:50%;transform:translateX(-50%);right:auto;bottom:clamp(80px,16vmin,130px);max-width:clamp(260px,55vw,400px)}
.btn-blitz{background:linear-gradient(180deg,var(--danger),#d84315);color:var(--color-text-primary);border:none;border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-sm);font-weight:900;font-size:var(--fs-sm);box-shadow:0 2px 0 var(--orange-shadow),var(--shadow-sm);animation:pulseGlow 2s ease-in-out infinite;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.mutator-banner{position:fixed;top:calc(clamp(36px,7vmin,48px) + env(safe-area-inset-top,0px));right:calc(var(--space-xs) + env(safe-area-inset-right,0px));z-index:var(--z-floating);padding:var(--space-xs) var(--space-sm);background:linear-gradient(135deg,rgba(156,39,176,.35),rgba(156,39,176,.2));border:1px solid rgba(156,39,176,.5);border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:800;color:var(--purple-text);animation:modPulse 1.5s ease-in-out infinite alternate;min-height:44px;display:flex;align-items:center;box-shadow:var(--shadow-sm)}
.shop-hint-pulse{animation:shopHintPulse .8s ease-in-out infinite!important;z-index:var(--z-critical)}

/* ================================================================
   TOAST / FLOATING / BADGES / TOOLTIP / CRITICAL
   ================================================================ */
.toast-container{position:fixed;top:calc(env(safe-area-inset-top,0px) + var(--space-sm));left:50%;transform:translateX(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-xs);pointer-events:none;max-width:95vw}
.toast{width:clamp(220px,70vw,380px);padding:var(--space-sm) var(--space-md);background:var(--color-surface-grad);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-size:var(--fs-sm);font-weight:600;color:var(--color-text-primary);display:flex;align-items:center;gap:var(--space-sm);pointer-events:auto;animation:toastIn .3s ease-out both;border-left:3px solid var(--color-success)}
.toast.toast-error{border-left-color:var(--color-error)}.toast.toast-warning{border-left-color:var(--color-warning)}
.toast.toast-out{animation:toastOut .3s ease-in both}
.toast-close{background:none;border:none;color:var(--color-text-muted);font-size:var(--fs-base);min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center;margin-left:auto}
.floating-text{position:absolute;z-index:var(--z-floating);pointer-events:none;font-size:var(--fs-md);font-weight:800;text-shadow:0 2px 4px rgba(0,0,0,.8),0 0 6px rgba(0,0,0,.4);animation:floatUp 1s ease-out both;white-space:nowrap}
.floating-text.ft-gold{color:var(--gold)}.floating-text.ft-red{color:var(--danger)}.floating-text.ft-green{color:var(--lime)}.floating-text.ft-purple{color:var(--purple)}
.badge-dot{position:absolute;top:calc(-1*var(--space-xs));right:calc(-1*var(--space-xs));min-width:clamp(8px,2vmin,14px);height:clamp(8px,2vmin,14px);border-radius:999px;background:var(--color-error);color:var(--color-text-primary);font-size:var(--fs-xs);font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 var(--space-xs);border:2px solid var(--color-bg-primary);animation:badgePop .3s cubic-bezier(.175,.885,.32,1.275) both;pointer-events:none;font-variant-numeric:tabular-nums}
.tooltip{position:absolute;z-index:var(--z-dropdown);pointer-events:auto;max-width:clamp(180px,55vw,300px);padding:var(--space-sm);background:var(--color-surface-grad);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);font-size:var(--fs-sm);font-weight:600;color:var(--color-text-primary);animation:tooltipIn .2s ease-out both}
.critical-overlay{position:fixed;inset:0;z-index:var(--z-critical);background:rgba(0,0,0,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-lg);pointer-events:all}
.critical-overlay .critical-text{font-size:var(--fs-lg);font-weight:900;text-align:center;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.critical-overlay .critical-desc{font-size:var(--fs-base);color:var(--color-text-secondary);text-align:center}

/* ================================================================
   SCROLLBAR
   ================================================================ */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:2px}

/* ================================================================
   SAFE AREAS
   ================================================================ */
@supports(padding:env(safe-area-inset-top)){
  #game-hud{padding-top:calc(var(--space-sm) + env(safe-area-inset-top));padding-left:calc(var(--space-sm) + env(safe-area-inset-left));padding-right:calc(var(--space-sm) + env(safe-area-inset-right))}
  .menu-content{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .panel-tabs{padding-right:calc(var(--space-xs) + env(safe-area-inset-right))}
  .panel-content{padding-right:calc(var(--space-sm) + env(safe-area-inset-right))}
  .shop-head{padding-top:calc(var(--space-sm) + env(safe-area-inset-top))}
  .shop-mobile-tabs{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .shop-content{padding-bottom:calc(var(--space-md) + env(safe-area-inset-bottom))}
  .menu-top-bar{top:calc(var(--space-md) + env(safe-area-inset-top));right:calc(var(--space-md) + env(safe-area-inset-right))}
}

/* ================================================================
   ORIENTATION & RESPONSIVE
   ================================================================ */
@media(orientation:portrait){
  #game-hud{flex-wrap:wrap}
  .hud-left{order:1;flex:0 0 auto}
  .hud-center{order:3;flex:1 1 100%;flex-direction:row;justify-content:center;gap:var(--space-xs);align-items:center}
  .hud-right{order:2;flex:0 0 auto}
  .hud-total{font-size:var(--fs-xs);opacity:.7}
  /* Settings button stays accessible in portrait via btn-settings-game or pause menu */
}
@media(max-width:700px){
  .shop-nav{display:none}
  .shop-mobile-tabs{display:flex}
  .shop-body{flex-direction:column}
  .promo{flex-direction:column;text-align:center;gap:var(--space-sm)}
  .promo-btn{width:100%}
}
@media(max-height:400px) and (orientation:landscape){
  .menu-content{padding:var(--space-xs);gap:var(--space-xs)}
  .btn-big{margin:var(--space-xs) auto}
}

/* ================================================================
   TOUCH TARGETS (coarse pointer)
   ================================================================ */
@media(pointer:coarse){
  .btn-hud,.shop-close-btn,.s-btn,.p-btn,.mob-tab,.nav-item,.settings-btn,.settings-btn-mini,.reward-btn,.buy-banner-btn,.promo-btn,.btn-blitz,.buy-banner-close,.panel-tab,.lb-mini{min-width:44px;min-height:44px}
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important}}

/* ================================================================
   EXTRA SPACING — маленькие телефоны (<=380px ширина)
   ================================================================ */
@media (max-width: 380px) {
  .modal-card { padding: var(--space-md); gap: var(--space-xs) }
  .modal-card .btn-big { margin: var(--space-xs) auto; font-size: var(--fs-sm) }
  .modal-title { font-size: var(--fs-md) }
  .shop-head { padding: var(--space-xs) var(--space-sm) }
  .mob-tab { padding: 2px; font-size: 10px }
  .mob-tab-icon { font-size: 14px }
  .mob-tab-text { display: none }
  .hud-item { font-size: var(--fs-xs) }
  .btn-hud { width: 34px; height: 34px; font-size: 14px }
  .s-card, .p-card { margin-bottom: var(--space-xs) }
}
/* Средние телефоны (381-479px) — прячем текст табов */
@media (min-width: 381px) and (max-width: 479px) {
  .mob-tab-text { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40px }
}

/* Кнопки в модалках — гарантируем зазор */
.modal-card .btn-big + .btn-big { margin-top: var(--space-xs) }
.modal-card .reward-btn { margin-top: var(--space-sm) }