:root{
  --text:#ffffff;
  --muted:rgba(255,255,255,.78);
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --radius:18px;
  --panel: rgba(255, 248, 226, .95); /* бежевый */
  --panelStroke: rgba(0,0,0,.08);
  --chip: rgba(255,255,255,.72);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    url("./img/game_bg.png") center/cover no-repeat fixed;
  overflow:hidden;
}

.hidden{display:none !important}
.screen{height:100%;display:flex;flex-direction:column}
.spacer{flex:1}

.icon-btn{
  border:none;
  background: rgba(255,255,255,.18);
  color:#fff;
  width:40px;height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  cursor:pointer;
  backdrop-filter: blur(10px);
}
.icon-btn:active{transform:translateY(1px)}

#app{height:100%;display:flex;flex-direction:column}

/* ===== Topbar (оставляем стиль как в проекте) ===== */
.topbar{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  max-width:1100px;
  width:100%;
  margin: 10px auto 0;
  border-radius: 14px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

.topbar-home{
  max-width: 980px;
}
.title{
  font-weight:800;
  letter-spacing:.2px;
  font-size:18px;
  white-space:nowrap;
}
.stats{display:flex;align-items:center;gap:12px;margin-left:auto}
.stat{
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.20);
  font-size:14px;
}
.map-btn{
  border:none;
  background: #ffcc4d;
  color:#2b2b2b;
  font-weight:800;
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}
.map-btn:active{transform:translateY(1px)}

/* ===== Game layout ===== */
.game-wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

/* ===== HOME ===== */
/* Снаружи — общий фон (можно зимний), внутри card — настоящая комната */
.home{background: url("./img/bg_new_year.png") center/cover no-repeat fixed;}
.home-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:16px}
.home-card{
  width:min(920px, 96vw);
  min-height:min(720px, calc(100vh - 120px));
  border-radius: 26px;
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
}
.home-room{
  position:absolute;inset:0;
  /* В проекте уже есть room-картинки: profile.jpg / kitchen.jpg / hospital.jpg */
  background:
    url("./img/profile.jpg") center/cover no-repeat;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.03);
}
.home-bg{
  position:absolute;inset:0;
  /* мягкая подсветка + стекло, чтобы кнопки читались */
  background:
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.22) 100%),
    radial-gradient(900px 520px at 25% 20%, rgba(255,255,255,.22), transparent 62%),
    radial-gradient(900px 520px at 80% 30%, rgba(255,204,77,.14), transparent 60%);
  pointer-events:none;
}
.home-hero{position:relative;display:flex;align-items:flex-end;gap:18px;padding:22px 22px 8px}
.home-mammoth{
  width:min(340px, 48vw);
  height:auto;
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.32));
}
.home-bubble{
  margin-bottom: 18px;
  padding: 16px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  color:#2b2b2b;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.14);
  max-width: 420px;
}
.bubble-title{font-weight:1000;font-size:18px}
.bubble-sub{margin-top:6px;color:rgba(0,0,0,.60);font-weight:700}
.home-actions{position:relative;display:grid;grid-template-columns: repeat(2, minmax(0,1fr));gap:12px;padding:14px 22px 18px}
.btn.big{padding:14px 14px;font-size:16px;border-radius:16px;font-weight:900}
.btn.big:active{transform:translateY(1px)}
.home-footer{position:relative;padding:0 22px 18px}
.muted-dark{color: rgba(255,255,255,.85);font-weight:700}

/* ===== MAP ===== */
.map{background: url("./img/game_bg.png") center/cover no-repeat fixed;}
.map-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:16px}
.map-card{
  width:min(980px, 96vw);
  border-radius: 22px;
  background: rgba(255, 248, 226, .96);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
  padding: 16px;
  color:#2b2b2b;
}
.map-title{font-weight:1000;font-size:18px}
.map-sub{margin-top:6px}
.map-nodes{margin-top:14px;display:grid;grid-template-columns: repeat(5, minmax(0,1fr));gap:10px}
.node{
  border-radius: 16px;
  padding: 12px 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  font-weight:900;
}
.node.locked{opacity:.45;cursor:not-allowed}
.node.current,.node.active{outline: 3px solid rgba(255,204,77,.95)}
.node .star{font-size:14px;opacity:.7}
.game-panel{
  width:min(620px, 96vw);
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--panelStroke);
  box-shadow: var(--shadow);
  padding:14px;
  color:#2b2b2b;
}

.panel-row{display:flex;align-items:center;gap:10px}
.panel-left{display:flex;flex-direction:column;gap:8px}
.panel-right{margin-left:auto;display:flex;gap:8px}

.level-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.08);
  font-weight:700;
}

.goal-chips{
  display:flex;flex-wrap:wrap;gap:8px;
}
.goal-chip{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.08);
  font-weight:700;
  font-size:14px;
}
.goal-chip .emoji{font-size:18px}
.goal-chip.done{opacity:.55;filter:saturate(.6)}

.board{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap:8px;
  user-select:none;
  touch-action:none; /* важно для drag на мобилке */
}

.cell{
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
  display:flex;align-items:center;justify-content:center;
  font-size:30px;
  cursor:pointer;
  position:relative;
  transition: transform .12s ease, background .12s ease, opacity .12s ease;
}

.cell-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}

/* ===== Real Ice (noticeable) ===== */
.ice-layer{
  position:absolute;
  inset:6px;
  border-radius:12px;
  opacity:0;
  transform: scale(.98);
  pointer-events:none;
  transition: opacity .14s ease, transform .14s ease;
  overflow:hidden;
}

/* базовая ледяная плитка: блики + “стекло” + зерно */
.ice-layer.on{
  opacity:0,85;
  transform:scale(1);
  background:
    radial-gradient(120% 90% at 25% 18%, rgba(255,255,255,.70) 0%, rgba(255,255,255,.10) 35%, transparent 60%),
    radial-gradient(120% 90% at 78% 30%, rgba(180, 240, 255, .55) 0%, rgba(120, 205, 255, .10) 45%, transparent 70%),
    linear-gradient(180deg, rgba(160, 230, 255, .38), rgba(110, 200, 255, .18));
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    inset 0 14px 20px rgba(255,255,255,.20),
    0 10px 18px rgba(0,0,0,.08);
  backdrop-filter: blur(0.5px);
}

/* “трещины” через псевдо-слой */
.ice-layer.on::before{
  content:"";
  position:absolute; inset:-12px;
  background:
    repeating-linear-gradient(35deg, rgba(255,255,255,.0) 0 18px, rgba(255,255,255,.18) 18px 19px),
    repeating-linear-gradient(115deg, rgba(255,255,255,.0) 0 22px, rgba(120,220,255,.18) 22px 23px);
  opacity:.45;
  transform: rotate(-2deg);
  mix-blend-mode: overlay;
}

/* “кромка” льда */
.ice-layer.on::after{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22);
  opacity:.85;
}

/* уровни прочности: чем больше hp, тем “толще” и темнее */
.ice-layer.hp1{ filter: saturate(1.05) contrast(1.05); }
.ice-layer.hp2{
  filter: saturate(1.08) contrast(1.10);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    inset 0 20px 26px rgba(255,255,255,.18),
    0 12px 22px rgba(0,0,0,.10);
}
.ice-layer.hp3{
  filter: saturate(1.12) contrast(1.16);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.08),
    inset 0 26px 32px rgba(255,255,255,.16),
    0 14px 26px rgba(0,0,0,.12);
}

/* HP-лейбл (делаем читабельнее) */
.ice-hp{
  position:absolute;
  top:6px; left:6px;
  font-weight:1000;
  font-size:12px;
  color: rgba(255,255,255,.98);
  text-shadow: 0 2px 4px rgba(0,0,0,.35);
  background: rgba(0,0,0,.16);
  padding:3px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  display:none !important;
}

/* Combo toast */
.combo-toast{
  position:fixed;
  left:50%;
  top: 92px;
  transform: translateX(-50%) translateY(-8px);
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 900;
  letter-spacing: .2px;
  opacity: 0;
  z-index: 80;
  pointer-events:none;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  transition: opacity .16s ease, transform .16s ease;
}
.combo-toast.show{opacity:1;transform: translateX(-50%) translateY(0)}
.cell:active{transform:scale(.98)}
.cell.selected{
  outline: 3px solid rgba(255,204,77,.95);
  background: rgba(255,255,255,.92);
}
.cell.pop{
  animation: pop .18s ease both;
}
@keyframes pop{
  0%{transform:scale(1);opacity:1}
  100%{transform:scale(.75);opacity:.0}
}

.cell.drop{
  animation: drop .18s ease both;
}
@keyframes drop{
  0%{transform:translateY(-10px);opacity:.4}
  100%{transform:translateY(0);opacity:1}
}

.hint{margin-top:10px;text-align:center}
.muted{color: rgba(0,0,0,.55);font-weight:600}

/* ===== Buttons ===== */
.btn{
  border:none;
  background: rgba(255,255,255,.8);
  color:#2b2b2b;
  font-weight:800;
  padding:10px 12px;
  border-radius: 12px;
  cursor:pointer;
  border: 1px solid rgba(0,0,0,.08);
}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:#3bd16f;
  color:#0b2b16;
}

/* ===== Modal ===== */
.modal{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background: rgba(0,0,0,.35);
  z-index:50;
}
.modal.hidden{display:none}
.modal-card{
  width:min(420px, 92vw);
  border-radius: 18px;
  background: rgba(255,248,226,.98);
  border:1px solid rgba(0,0,0,.10);
  box-shadow: var(--shadow);
  padding:16px;
  color:#2b2b2b;
  text-align:center;
}
.modal-title{font-weight:900;font-size:20px}
.modal-sub{margin-top:6px;font-weight:700}
.modal-actions{display:flex;gap:10px;justify-content:center;margin-top:14px}

/* ===== Overlay (map) ===== */
.overlay{
  position:fixed;inset:0;
  display:flex;align-items:flex-end;justify-content:center;
  padding:16px;
  background: rgba(0,0,0,.35);
  z-index:40;
}
.overlay.hidden{display:none}
.card{
  width:min(520px, 96vw);
  border-radius: 18px;
  background: rgba(255,248,226,.98);
  border:1px solid rgba(0,0,0,.10);
  box-shadow: var(--shadow);
  padding:14px;
  color:#2b2b2b;
}
.row{display:flex;align-items:center;gap:10px}
.spacer{flex:1}
.grid{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:10px;
}
.level-btn{
  padding:12px 10px;
  border-radius:14px;
  background: rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.08);
  cursor:pointer;
  font-weight:900;
  text-align:center;
}
.level-btn.locked{opacity:.55}
.level-btn.active{outline:3px solid rgba(255,204,77,.95)}

/* PNG chips */
.cell{ display:flex; align-items:center; justify-content:center; }
.chip{ width:72%; height:72%; object-fit:contain; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.goal-chip .chip{ width:22px; height:22px; }

/* Мобильный свайп по полю */
#board { touch-action: none; user-select: none; -webkit-user-select: none; }
.tile, .tile * { touch-action: none; }

/* ===== Crate (blocker) ===== */
.crate-layer{
  position:absolute;
  inset:6px;
  border-radius:12px;
  opacity:0;
  transform: scale(.98);
  pointer-events:none;
  transition: opacity .14s ease, transform .14s ease;
}
.crate-layer.on{
  opacity:1;
  transform: scale(1);
  background:
    linear-gradient(180deg, rgba(190,120,55,.95), rgba(140,85,35,.95));
  border: 1px solid rgba(60,30,10,.28);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.10),
    inset 0 16px 24px rgba(255,255,255,.06),
    0 12px 22px rgba(0,0,0,.10);
}

/* доски/перекладины */
.crate-layer.on::before{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0) 22%, rgba(0,0,0,.14) 50%, rgba(0,0,0,0) 78%, rgba(0,0,0,.18)),
    linear-gradient(0deg, rgba(255,255,255,.16), rgba(255,255,255,0) 35%);
  mix-blend-mode: overlay;
  opacity:.85;
}

.crate-hp{
  position:absolute;
  top:6px; right:6px;
  font-weight:1000;
  font-size:12px;
  color: rgba(255,255,255,.98);
  text-shadow: 0 2px 4px rgba(0,0,0,.35);
  background: rgba(0,0,0,.16);
  padding:3px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
}

/* ===============================
   Match-3 2026 — Visual Pack
   Ice + Crates + Specials + Mobile
   Paste at END of styles.css
   =============================== */

/* Mobile: prevent scroll/selection while swiping */
#board { touch-action: none; user-select: none; -webkit-user-select: none; }
.cell, .cell * { -webkit-tap-highlight-color: transparent; }

/* Cell polish */
.cell{
  position: relative;
  border-radius: 14px;
  overflow: visible;
}
.cell.selected{
  transform: translateY(-1px);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.10));
}
.cell.popping{
  transform: scale(.96);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.12));
}

/* Chips */
.cell-inner{
  position:absolute;
  inset: 6px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.chip{
  width: 92%;
  height: 92%;
  object-fit: contain;
  transform: translateZ(0);
  image-rendering: auto;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.14));
}
.chip-special{
  transform: scale(1.06);
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.18));
  animation: spFloat 1.4s ease-in-out infinite;
}
@keyframes spFloat{
  0%,100%{ transform: scale(1.06) translateY(0); }
  50%{ transform: scale(1.06) translateY(-2px); }
}

/* ===== ICE (Realistic, visible) ===== */
.ice-layer{
  position:absolute;
  inset: 6px;
  border-radius: 12px;
  opacity: 0;
  transform: scale(.98);
  pointer-events:none;
  overflow:hidden;
  transition: opacity .14s ease, transform .14s ease;
}

/* Base ice look: thick glass + frost */
.ice-layer.on{
  opacity: 1;
  transform: scale(1);
  background:
    radial-gradient(120% 90% at 22% 18%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.18) 35%, transparent 62%),
    radial-gradient(130% 100% at 78% 28%, rgba(170, 240, 255, .70) 0%, rgba(120, 205, 255, .16) 45%, transparent 72%),
    linear-gradient(180deg, rgba(160, 235, 255, .46), rgba(90, 190, 255, .20));
  border: 1px solid rgba(255,255,255,.62);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    inset 0 18px 26px rgba(255,255,255,.18),
    inset 0 -10px 18px rgba(40, 120, 160, .10),
    0 12px 20px rgba(0,0,0,.10);
}

/* Cracks / ice veins */
.ice-layer.on::before{
  content:"";
  position:absolute; inset:-14px;
  background:
    repeating-linear-gradient(32deg,
      rgba(255,255,255,0) 0 16px,
      rgba(255,255,255,.22) 16px 17px),
    repeating-linear-gradient(118deg,
      rgba(255,255,255,0) 0 22px,
      rgba(140,220,255,.22) 22px 23px);
  opacity: .55;
  transform: rotate(-3deg);
  mix-blend-mode: overlay;
}

/* Frost edge + sparkle */
.ice-layer.on::after{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  background:
    radial-gradient(10px 10px at 18% 24%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(12px 12px at 80% 36%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(8px 8px at 60% 76%, rgba(255,255,255,.25), transparent 60%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
  opacity: .90;
}

/* HP thickness */
.ice-layer.hp1{ filter: saturate(1.03) contrast(1.05); }
.ice-layer.hp2{
  filter: saturate(1.08) contrast(1.10);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.07),
    inset 0 22px 30px rgba(255,255,255,.18),
    inset 0 -12px 22px rgba(40, 120, 160, .12),
    0 14px 24px rgba(0,0,0,.12);
}
.ice-layer.hp3{
  filter: saturate(1.12) contrast(1.16);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.08),
    inset 0 28px 36px rgba(255,255,255,.18),
    inset 0 -14px 26px rgba(40, 120, 160, .14),
    0 16px 28px rgba(0,0,0,.14);
}

/* HP badge */
.ice-hp{
  position:absolute;
  top:7px; left:7px;
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.98);
  text-shadow: 0 2px 5px rgba(0,0,0,.38);
  background: rgba(0,0,0,.18);
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
}

/* ===== CRATES (Top-game wood) ===== */
.crate-layer{
  position:absolute;
  inset: 6px;
  border-radius: 12px;
  opacity: 0;
  transform: scale(.98);
  pointer-events:none;
  overflow:hidden;
  transition: opacity .14s ease, transform .14s ease;
}

.crate-layer.on{
  opacity: 1;
  transform: scale(1);
  background:
    linear-gradient(180deg, rgba(214,150,76,.98), rgba(146,88,40,.98));
  border: 1px solid rgba(85,45,20,.28);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.10),
    inset 0 18px 24px rgba(255,255,255,.06),
    inset 0 -14px 18px rgba(60,30,10,.12),
    0 14px 24px rgba(0,0,0,.12);
}

/* Planks + cross beams */
.crate-layer.on::before{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.20) 0%,
      rgba(0,0,0,0) 18%,
      rgba(0,0,0,.14) 50%,
      rgba(0,0,0,0) 82%,
      rgba(0,0,0,.20) 100%),
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.10) 0 10px,
      rgba(255,255,255,0) 10px 22px);
  opacity: .90;
  mix-blend-mode: overlay;
}

/* Nail dots */
.crate-layer.on::after{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  background:
    radial-gradient(2px 2px at 22% 22%, rgba(30,15,6,.35), transparent 65%),
    radial-gradient(2px 2px at 78% 22%, rgba(30,15,6,.35), transparent 65%),
    radial-gradient(2px 2px at 22% 78%, rgba(30,15,6,.35), transparent 65%),
    radial-gradient(2px 2px at 78% 78%, rgba(30,15,6,.35), transparent 65%);
  opacity: .9;
}

/* HP badge */
.crate-hp{
  position:absolute;
  top:7px; right:7px;
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.98);
  text-shadow: 0 2px 5px rgba(0,0,0,.38);
  background: rgba(0,0,0,.18);
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
}

/* When crate exists, give cell a slight "blocked" feel */
.cell:has(.crate-layer.on){
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.10));
}

/* Optional: subtle shimmer when ice present */
.ice-layer.on{
  animation: iceShimmer 2.2s ease-in-out infinite;
}
@keyframes iceShimmer{
  0%,100%{ filter: saturate(1.05) brightness(1); }
  50%{ filter: saturate(1.12) brightness(1.03); }
}

/* Pop effect */
.cell.popping .chip{
  transform: scale(.92);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.10));
}

/* Map nodes (if you have them) */
.map-node{
  border-radius: 14px;
  box-shadow: 0 12px 22px rgba(0,0,0,.10);
}

html, body { overscroll-behavior: none; }