/* =========================================================
   Mammoth Mini‑Games — Unified "Ideal" Skin (v2)
   Drop-in patch. Put AFTER styles.css / games.css / modals.css
   ========================================================= */

/* ---- Global tokens ---- */
:root{
  --mg-bg: rgba(255, 247, 230, .94);        /* main inner panel */
  --mg-bg-soft: rgba(255,255,255,.78);      /* soft cards */
  --mg-ink: #1f2937;                        /* primary text */
  --mg-ink-2: rgba(31,41,55,.78);           /* secondary */
  --mg-stroke: rgba(0,0,0,.10);
  --mg-shadow: 0 14px 34px rgba(0,0,0,.18);
  --mg-shadow-2: 0 10px 26px rgba(0,0,0,.14);
  --mg-radius: 22px;
  --mg-radius-sm: 16px;

  --pill-blue-a: rgba(111,214,255,.92);
  --pill-blue-b: rgba(74,163,255,.82);
  --pill-dark: rgba(15,23,42,.28);

  --btn-orange-a: #ffb357;
  --btn-orange-b: #ff8f2b;

  --safeB: env(safe-area-inset-bottom, 0px);
  --safeT: env(safe-area-inset-top, 0px);
}

/* ---- Fix the "too transparent / empty" game inner background ---- */
.game-play-root{
  background: var(--mg-bg) !important; /* overrides the older 0.50 values */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---- Make the whole play window feel premium & consistent ---- */
.game-play-window{
  box-shadow: 0 22px 46px rgba(0,0,0,.36) !important;
}
body.game-fs #gamePlayModal .game-play-window{
  padding-bottom: calc(16px + var(--safeB)) !important;
}

/* ---- Header: unified glass bar ---- */
.game-play-header{
  padding: 10px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15,23,42,.34), rgba(15,23,42,.22));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.game-play-title{
  font-weight: 900 !important;
  font-size: 16.5px !important;
  letter-spacing: .2px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.game-icon-head{
  width: 28px !important;
  height: 28px !important;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}

/* ---- Exit button: always orange pill ---- */
.game-play-exit.btn,
#runnerExit.btn,
#catchExit.btn{
  border: none !important;
  color: #fff !important;
  font-weight: 900 !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--btn-orange-a), var(--btn-orange-b)) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.22);
}
.game-play-exit.btn:active{
  transform: translateY(1px);
}

/* ---- Pills / counters: unify look ---- */
.game-play-timer,
.game-play-score,
.runner-meters,
.runner-coins,
.runner-speed,
.catch-score,
.catch-combo,
#tapGameTime,
#tapGameScore,
#mammothGameScore,
#mammothGameErrors{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900 !important;
  font-size: 13px !important;
  color: #0b1220 !important;
  background: linear-gradient(135deg, var(--pill-blue-a), var(--pill-blue-b));
  box-shadow: var(--mg-shadow-2);
  border: 1px solid rgba(255,255,255,.28);
  white-space: nowrap;
}
.game-play-timer{ margin-right: 10px; }
.runner-meters, .runner-coins{ background: rgba(255,255,255,.12); color:#fff !important; border: 1px solid rgba(255,255,255,.12); }
.runner-meters span, .runner-coins span{ color:#fff; }
.runner-hud{ display:flex; align-items:center; gap:10px; }

/* Hearts look (runner / catch) */
.runner-hearts{
  display:flex; align-items:center; gap:4px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

/* ---- Body spacing: remove weird "empty bottom" and center content ---- */
.game-play-body{
  padding: 14px 14px 18px !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
body.game-fs #gamePlayModal .game-play-root{
  display:flex;
  flex-direction:column;
  min-height: 0;
}

/* ---- Generic card surface inside games ---- */
.mg-card,
.runner-overlay-card,
#catchBoard .catch-continue-box,
.game-over-card,
.modal-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  box-shadow: 0 16px 34px rgba(0,0,0,.20);
}

/* ---- Overlays (game over / continue) ---- */
.runner-overlay,
.catch-overlay,
.game-over-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.runner-overlay-card{
  width: min(360px, 92vw);
  padding: 16px 16px 14px;
  text-align:center;
}
.runner-overlay-title{
  font-weight: 1000;
  font-size: 18px;
  color: #111827;
  margin-bottom: 6px;
}
.runner-overlay-sub{
  color: rgba(17,24,39,.78);
  font-weight: 700;
  line-height: 1.35;
}
.runner-overlay-actions{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.runner-overlay-actions .btn{
  width:100%;
  border-radius: 999px !important;
  padding: 12px 14px !important;
  font-weight: 900 !important;
}

/* Primary button everywhere */
.btn.game-btn-primary,
#gameRulesPlay,
#runnerContinueAd,
#catchContinueAd,
#sdkHintBtn{
  border: none !important;
  color: #111827 !important;
  font-weight: 1000 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ffe08a, #ffc24d) !important;
  box-shadow: 0 14px 26px rgba(0,0,0,.18);
}

/* Secondary buttons */
.btn:not(.game-btn-primary){
  border-radius: 999px !important;
  padding: 12px 14px;
  font-weight: 900;
}

/* ---- Catch Food: board feel premium ---- */
.catch-board-inner{
  border-radius: 22px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.16) !important;
}

/* ---- Mammoth Catch (tap on mammoth): fix "washed out" background, tighten grid ---- */
body.game-fs #gamePlayModal .mammoth-catch-game .mammoth-cell{
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* ---- Jump / Builder: unify panel look ---- */
#jumpCanvas,
#builderBoard,
#bbBoard{
  border-radius: 22px;
  box-shadow: 0 18px 38px rgba(0,0,0,.16);
}

/* ---- Sudoku: keep its own nice UI, only align header pills and spacing a bit ---- */
.sdk-wrap{
  padding-top: calc(10px + var(--safeT)) !important;
}
.sdk-bottom{
  border-radius: 24px !important;
}
.sudoku-grid{
  margin-top: 10px !important; /* removes huge top gap */
}

/* ---- Small polish: reduce accidental grey texts across games ---- */
.game-play-help,
.game-description,
.game-info-text{
  color: rgba(17,24,39,.78) !important;
  font-weight: 600 !important;
}

/* ---- Tap feedback (small, but feels "premium") ---- */
.btn:active,
.mammoth-cell:active,
.sdk-cell:active{
  transform: translateY(1px);
}

/* ---- Prevent horizontal clipping on tiny screens ---- */
@media (max-width: 360px){
  .game-play-header{ gap: 8px; padding: 9px 10px; }
  .game-play-title{ font-size: 15.5px !important; }
  .game-icon-head{ width: 26px !important; height: 26px !important; }
}

/* =========================
   FIX: Мамонтёнок-спринт — хедер без переносов + красивее HUD
   ========================= */

/* хедер всегда в одну строку (иначе "Выход" уезжает) */
.runner-hdr{
  flex-wrap: nowrap !important;
}

/* заголовок может ужиматься и обрезаться, чтобы не ломать ряд */
.runner-hdr .game-play-title{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* чуть "премиальнее" */
  color: #fff;
  font-weight: 900;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* правый HUD не сжимается */
.runner-hud{
  flex: 0 0 auto;
  min-width: 0;
  gap: 10px; /* было жирновато */
}

/* делаем метры/монеты "пилюлями" */
.runner-meters,
.runner-coins{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  color: #fff;
  font-weight: 900;
}

/* сердечки тоже в аккуратной капсуле */
.runner-hearts{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

/* кнопка Выход всегда справа и не переносится */
#runnerExit{
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 171, 64, .95) !important;
  color: #1b140a !important;
  font-weight: 900 !important;
  border: none !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
#runnerExit:active{ transform: scale(.98); }

/* на узких экранах чуть ужимаем, чтобы всё влезало */
@media (max-width: 380px){
  .runner-hud{ gap: 8px; }
  .runner-meters, .runner-coins, .runner-hearts{ padding: 5px 8px; }
  .runner-heart{ font-size: 18px; }
  #runnerExit{ padding: 7px 12px; }
}


/* =========================
   FIX: Мамонтёнок: Строитель — заголовок светлый (а не чёрный)
   ========================= */

body.game-fs #gamePlayModal .bb .game-play-title,
body.game-fs #gamePlayModal .bb .game-play-header .game-play-title{
  color: #fff !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
body.game-fs #gamePlayModal .bb .game-play-title .game-icon-head{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

.game-play-header {
  background: linear-gradient(180deg, rgba(15,23,42,.34), rgba(15,23,42,.22));
  backdrop-filter: blur(8px);
  border-radius: 18px;
}

.game-play-title {
  color: #fff;
  font-weight: 900;
}

.game-play-exit {
  background: linear-gradient(135deg, #ffb357, #ff8f2b);
}

.game-play-root {
  background: rgba(255,247,230,.94) !important;
}

.mammoth-cell {
  background: rgba(255,255,255,.18);
  border-radius: 18px;
}

.mammoth-cell.is-active {
  box-shadow: 0 0 0 3px rgba(255,60,60,.85),
              0 18px 40px rgba(0,0,0,.25);
  background: rgba(255,60,60,.35);
}

.runner-meters,
.runner-coins {
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  font-weight: 900;
}

.runner-hearts {
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}

/* === HARD FIX: единый бежевый фон для ВСЕХ игр === */
body.game-fs #gamePlayModal .game-play-root,
#gamePlayModal .game-play-root {
  background: #fff7e6 !important; /* тот самый бежевый */
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}