/* =====================================================================
   multibox.css — РАЗДЕЛЁННЫЙ ЭКРАН ОТКРЫТИЯ (2 и 4 ящика сразу)
   ---------------------------------------------------------------------
   Здесь только «рама»: слой, доли, разделители, номер доли, полоса
   прогресса сверху и вид досмотренной доли. Сама сцена внутри доли
   оформлена своими файлами (smallbox.scene.css + megabox.scene.css) и
   ничего про эту раму не знает — она лишь уменьшается до доли правилом
   .sbs-root.is-pane.
   ===================================================================== */

.mbs-layer{
  position:fixed; inset:0; z-index:99999;
  background:#05041a;
  opacity:0; transition:opacity 220ms ease;
  overflow:hidden;
  /* Тот же запрет выделения и подсветки касания, что у одиночной сцены:
     доли листаются кликами, и двойной клик не должен выделять текст. */
  user-select:none; -webkit-tap-highlight-color:transparent;
}
.mbs-layer.is-on{ opacity:1; }

/* ---------- доля ----------
   Координаты и размер ставит контроллер (js/multibox.open.js): доли
   считаются в пикселях от окна, а не сеткой, потому что тем же
   пересчётом рождается масштаб сцены внутри. */
.mbs-pane{
  position:absolute; overflow:hidden;
  background:radial-gradient(circle at 50% 45%,#181245 0%,#0b0a24 60%,#05041a 100%);
}

/* Разделитель — не отдельный элемент, а внутренний кант доли: так он
   не мешает кликам и не сдвигает геометрию, по которой считается
   масштаб сцены. */
.mbs-pane::after{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(2,10,45,.9),
             inset 0 0 0 3px rgba(120,170,255,.14);
}

/* Номер доли. Нужен, чтобы после четырёх одновременных открытий было
   видно, где чей итог: доли досматриваются вразнобой. */
.mbs-tag{
  position:absolute; left:12px; top:10px; z-index:3; pointer-events:none;
  min-width:30px; height:30px; padding:0 9px;
  display:flex; align-items:center; justify-content:center;
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;
  font-size:1rem; line-height:1; padding-bottom:4px;
  color:#fff; letter-spacing:.04em;
  background:rgba(6,16,54,.72);
  border:2px solid rgba(255,255,255,.14);
  border-radius:10px;
  opacity:.85;
}

/* ---------- досмотренная доля ---------- */
.mbs-done{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  opacity:0; visibility:hidden; transition:opacity 260ms ease;
  color:#BBD6F5;
}
.mbs-pane.is-done .mbs-done{ opacity:1; visibility:visible; }
.mbs-done-ico{
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center; font-size:1.9rem; color:#0a2a12;
  background:linear-gradient(180deg,#63E06E,#34B747);
  box-shadow:0 6px 0 #1C7A2E;
}
.mbs-done-txt{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;
  font-size:1rem; letter-spacing:.04em; color:#fff;
}

/* ---------- полоса сверху ----------
   Узкая плашка по центру верхней кромки: там у сцены пусто (счётчик
   наград сидит выше центра, кнопка закрытия — в правом углу доли). */
.mbs-bar{
  position:absolute; left:50%; top:10px; transform:translateX(-50%);
  z-index:6; display:flex; align-items:center; gap:12px;
  padding:6px 8px 6px 16px; border-radius:14px;
  background:rgba(6,16,54,.82);
  border:2px solid rgba(255,255,255,.14);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.8);
}
.mbs-progress{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;
  font-size:.92rem; letter-spacing:.04em; color:#BBD6F5;
}
.mbs-progress b{ color:#FFE45C; }
.mbs-closeall{
  border:0; cursor:pointer; color:#fff;
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;
  font-size:.86rem; letter-spacing:.04em;
  padding:7px 14px 10px; border-radius:11px;
  background:linear-gradient(180deg,#55B8FF 0%,#2278DE 100%);
  box-shadow:0 4px 0 #14508F;
  transition:filter .14s ease, transform .09s ease, box-shadow .09s ease;
}
.mbs-closeall:hover{ filter:brightness(1.08); }
.mbs-closeall:active{ transform:translateY(4px); box-shadow:0 0 0 #14508F; }

/* На узком экране плашка мешала бы верхней доле — уводим её в самый
   низ, к нижней кромке нижней доли. */
@media (max-width:560px){
  .mbs-bar{ top:auto; bottom:10px; padding:5px 7px 5px 12px; }
  .mbs-tag{ left:8px; top:8px; height:26px; min-width:26px; font-size:.85rem; }
}