#map-scene{position:absolute;inset:0}
#map-scene .bg-back,
#map-scene .bg-front,
#map-scene .moon-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
#map-scene .bg-back{z-index:1;object-fit:cover}
#map-scene .moon-layer{z-index:2;pointer-events:none}
#map-scene .bg-front{z-index:3;object-fit:cover;pointer-events:none}

.map-title{
  position:absolute;
  top:9.5%;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:calc(var(--stage-w, 100vw) * .03);
  font-weight:800;
  color:#F2D811;
  letter-spacing:.06em;
  text-shadow:3px 3px 0 #2A1145, 0 0 30px rgba(255,200,50,.6);
  white-space:nowrap;
}

/* Доска: сетка обычных уроков + ряд бонуса. Форма сетки приходит из конфига через --cols / --rows.
   Все размеры — от высоты сцены, чтобы --rows рядов и бонус помещались без прокрутки. */
.map-board{
  --cols:4;
  --rows:4;
  position:absolute;
  top:15.5%;
  bottom:3%;
  left:0;right:0;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(var(--stage-h, 100vh) * .025);
  pointer-events:none;
}
.levels-grid{
  height:70%;
  display:grid;
  grid-template-columns:repeat(var(--cols), auto);
  grid-template-rows:repeat(var(--rows), minmax(0, 1fr));
  gap:2.5% calc(var(--stage-w, 100vw) * .009);
  justify-content:center;
  pointer-events:auto;
}
.map-board.has-bonus .levels-grid{height:62%}
.level-tile{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  position:relative;
  height:100%;
  width:auto;
  aspect-ratio:41 / 51;
  min-width:44px;min-height:44px;
  transition:transform .1s cubic-bezier(0.23, 1, 0.32, 1), filter .2s ease;
  -webkit-tap-highlight-color:transparent;
  animation:tile-in .32s cubic-bezier(0.23, 1, 0.32, 1) both;
  animation-delay:calc(var(--i, 0) * 40ms);       /* каскад 40 мс */
}
@keyframes tile-in{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
.level-tile:active{transform:scale(.95)}
.level-tile:focus-visible{outline:3px solid #F2D811;outline-offset:3px;border-radius:12%}
.level-tile.shake{animation:shake .45s cubic-bezier(0.23, 1, 0.32, 1)}
@media (hover:hover) and (pointer:fine){
  .level-tile[data-locked="0"]:hover{filter:brightness(1.12);transform:translateY(-2px) scale(1.03)}
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-10px) rotate(-3deg)}
  35%{transform:translateX(10px) rotate(3deg)}
  55%{transform:translateX(-8px) rotate(-2deg)}
  75%{transform:translateX(6px) rotate(1deg)}
  90%{transform:translateX(-2px)}
}
.tile-bg{
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  object-fit:contain;
}
.tile-num{
  position:absolute;
  top:30%;
  left:50%;
  transform:translate(-50%,-50%);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-weight:900;
  font-size:clamp(13px, calc(var(--stage-w, 100vw) * .019), 44px);
  letter-spacing:-.01em;
  color:#fff;
  text-shadow:2px 2px 0 #2A1145, 0 0 10px rgba(0,0,0,.7);
  pointer-events:none;
  z-index:2;
}
.level-tile[data-locked="1"] .tile-num{opacity:0}

/* Ряд бонуса: отсутствует, пока бонус не открыт */
.bonus-row{display:none;height:15%;pointer-events:auto}
.map-board.has-bonus .bonus-row{display:flex;justify-content:center}
.bonus-tile{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:.6em;
  height:100%;
  width:auto;
  aspect-ratio:16 / 5;
  min-height:44px;
  border:3px solid #FF6B35;
  border-radius:calc(var(--stage-w, 100vw) * .01);
  overflow:hidden;
  background:#3a0c0c;
  color:#fff;
  cursor:pointer;
  padding:0;
  box-shadow:0 0 34px rgba(255,80,20,.45), inset 0 0 30px rgba(0,0,0,.35);
  transition:transform .1s cubic-bezier(0.23, 1, 0.32, 1), box-shadow .2s ease;
}
.bonus-tile:active{transform:scale(.97)}
.bonus-tile:focus-visible{outline:3px solid #F2D811;outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .bonus-tile:hover{box-shadow:0 0 48px rgba(255,120,30,.7), inset 0 0 30px rgba(0,0,0,.35)}
}
.bonus-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;pointer-events:none}
.bonus-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(40,5,5,.72),rgba(40,5,5,.12) 45%,rgba(40,5,5,.72));pointer-events:none}
.bonus-label,.bonus-num,.bonus-done{position:relative;z-index:2;font-weight:900;text-shadow:2px 2px 0 #2A0505, 0 0 14px rgba(255,120,30,.8)}
.bonus-label{font-size:clamp(13px, calc(var(--stage-w, 100vw) * .022), 48px);letter-spacing:.14em;color:#FFD166}
.bonus-num{font-size:clamp(15px, calc(var(--stage-w, 100vw) * .026), 56px);letter-spacing:-.02em;color:#fff}
.bonus-done{font-size:clamp(13px, calc(var(--stage-w, 100vw) * .02), 44px);color:#7ED957}
.bonus-tile.is-done{border-color:#7ED957;box-shadow:0 0 30px rgba(126,217,87,.4)}

/* Первое появление бонуса: сетка приезжает вверх («карта прокручивается»), плитка выходит снизу */
.map-board.is-revealing .levels-grid{animation:grid-raise .6s cubic-bezier(0.23, 1, 0.32, 1) both}
.map-board.is-revealing .bonus-tile{animation:bonus-in .7s cubic-bezier(0.23, 1, 0.32, 1) .35s both}
@keyframes grid-raise{from{transform:translateY(8%)}to{transform:none}}
@keyframes bonus-in{from{opacity:0;transform:translateY(60%) scale(.9)}60%{opacity:1;transform:translateY(-4%) scale(1.02)}to{opacity:1;transform:none}}

/* Портрет (только окна выше 1024px шириной — на телефонах стоит замок «переверни телефон»):
   две колонки, доска прокручивается внутри сцены */
@media (orientation:portrait){
  .map-board{justify-content:flex-start;overflow-y:auto;pointer-events:auto;gap:calc(var(--stage-h, 100vh) * .03)}
  .levels-grid,.map-board.has-bonus .levels-grid{height:auto;grid-template-columns:repeat(2, auto);grid-template-rows:none;grid-auto-rows:calc(var(--stage-h, 100vh) * .3);flex:0 0 auto}
  .bonus-row{height:calc(var(--stage-h, 100vh) * .2);flex:0 0 auto}
}

@media (prefers-reduced-motion:reduce){
  .level-tile,.map-board.is-revealing .levels-grid{animation:none}
  .level-tile:active,.bonus-tile:active{transform:none}
  .map-board.is-revealing .bonus-tile{animation:bonus-fade .3s ease both}
  @keyframes bonus-fade{from{opacity:0}to{opacity:1}}
  .level-tile.shake{animation:none;filter:brightness(.6)}
}

/* ==== Стена покупки ==== */
#wall-scene{position:absolute;inset:0}
.wall-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.45) saturate(.8)}
.wall-card{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:78%;max-height:88%;display:flex;gap:3%;align-items:center;
  background:rgba(45,27,94,.96);border:3px solid #F39C12;border-radius:calc(var(--stage-w, 100vw) * .0125);
  padding:2% 2.5%;box-shadow:0 0 80px rgba(243,156,18,.4);z-index:10;color:#fff;
}
.wall-monster{position:relative;flex:0 0 32%;aspect-ratio:16/10;border-radius:1em;overflow:hidden;background:#120a2a;display:flex;align-items:center;justify-content:center}
.wall-monster video,.wall-monster img.wall-sil{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(0) contrast(2) blur(1px);opacity:.9}
.wall-monster::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%, rgba(242,216,17,.15), transparent 55%)}
.wall-q{position:relative;z-index:2;font-size:calc(var(--stage-w, 100vw) * .09);font-weight:900;color:#F2D811;text-shadow:0 0 30px rgba(242,216,17,.8), 3px 3px 0 #2A1145;animation:wall-glow 2s ease-in-out infinite}
@keyframes wall-glow{0%,100%{opacity:.75}50%{opacity:1}}
.wall-text{flex:1 1 auto;display:flex;flex-direction:column;gap:.5em}
.wall-title{font-size:calc(var(--stage-w, 100vw) * .026);font-weight:900;color:#F2D811;letter-spacing:.01em;text-shadow:2px 2px 0 #2A1145}
.wall-sub{font-size:calc(var(--stage-w, 100vw) * .014);color:rgba(255,255,255,.85)}
.wall-facts{font-size:calc(var(--stage-w, 100vw) * .015);font-weight:800;color:#fff}
.wall-price{font-size:calc(var(--stage-w, 100vw) * .022);font-weight:900}
.wall-price s{color:rgba(255,255,255,.5);font-weight:600;margin-right:.3em}
.wall-price b{color:#7ED957}
.wall-disc{display:inline-block;margin-left:.5em;padding:.1em .5em;border-radius:.4em;background:#E24B4A;color:#fff;font-size:.6em;vertical-align:middle;letter-spacing:.04em}
.wall-actions{display:flex;align-items:center;gap:1.5em;flex-wrap:wrap;margin-top:.3em}
.wall-buy{text-decoration:none;display:inline-block;opacity:1;transform:none;animation:btn-pulse 2.2s ease-in-out 1s infinite, btn-gradient 3s ease infinite}
.wall-login{color:#F2D811;font-size:calc(var(--stage-w, 100vw) * .013);font-weight:700;text-decoration:underline;min-height:44px;display:inline-flex;align-items:center}
.wall-back{align-self:flex-start;background:none;border:none;color:rgba(255,255,255,.7);font-size:calc(var(--stage-w, 100vw) * .012);cursor:pointer;min-height:44px;padding:0;font-weight:700}
.menu-legal{margin-top:auto;font-size:max(11px, .9vw);color:rgba(255,255,255,.55);line-height:1.6}
.menu-legal a{color:rgba(255,255,255,.75)}
a.btn-menu{text-decoration:none;display:block}
@media (prefers-reduced-motion:reduce){.wall-q,.wall-buy{animation:none}}