/* ===== ROTATE GATE — portrait-only playfield ==============================
   The field geometry is built for a tall viewport; a short landscape one
   (phone turned sideways) makes it unplayable. Instead of re-laying it out we
   hide the field and show a white "rotate your phone" card in its place.

   Trigger is pure CSS — `(orientation: landscape) and (max-height: 520px)
   and (pointer: coarse)`: orientation alone would also catch every desktop and
   tablet, the height clause narrows it to phone-sized viewports, and
   `pointer: coarse` keeps a laptop with a short window (e.g. 1280x500, verified
   to false-positive without it) from being told to rotate a device it cannot
   rotate. No userAgent sniffing, no JS.

   Field hiding uses `visibility: hidden`, NOT `display: none`, on purpose:
   `display:none` collapses #volatiles-container to a 0x0 box, which would make
   PixiRenderer._layoutStale() latch true forever (clientWidth/Height 0 vs the
   canvas rect) and drive handleResize() into a zero-sized layout — the grid
   would be rebuilt for 0 rows and stay broken after rotating back.
   `visibility:hidden` keeps the box measurable, so the layout that runs on the
   rotation resize is the real one and the portrait resize restores it. No JS
   subscription is needed: rotating fires window `resize` (plus visualViewport
   resize and the container ResizeObserver), all of which already funnel into
   PixiRenderer's onResize → handleResize.

   z-index --z-rotate-gate (see the Z-INDEX SCALE in :root): the gate covers the
   WHOLE game UI — field, HUD, dev side tabs, modals, their popovers and the toast
   stack. In landscape none
   of it is usable (the old z-index 10 left the HUD on top: pills, MENU and the SPEED
   tab were painted over the card and stayed tappable). Deliberately above it:
   preloader, sandbox badge, conn/fatal — reasons at the scale. */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
    #volatiles-container { visibility: hidden; }

    #rotate-gate {
        display: flex; align-items: center; justify-content: center;
        position: fixed; inset: 0; z-index: var(--z-rotate-gate);
        background: #FFFFFF;
        padding: 12px 20px;
    }
}

.rg-box {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    text-align: center;
}

/* pink phone that tips from landscape back to portrait, forever */
.rg-phone {
    color: var(--pink);
    width: 44px; height: 76px;
    /* transform-only animation on a composited layer — no layout thrash */
    will-change: transform;
    animation: rg-tilt 2.6s var(--ease) infinite;
}
.rg-phone svg { width: 100%; height: 100%; display: block; }

@keyframes rg-tilt {
    0%, 18%   { transform: rotate(-90deg); }
    45%, 82%  { transform: rotate(0deg); }
    100%      { transform: rotate(-90deg); }
}

.rg-title {
    font-family: var(--ff-head); font-size: 18px; font-weight: 700;
    color: var(--pink); letter-spacing: 0.01em;
}
.rg-sub {
    font-family: var(--ff-body); font-size: 13px; font-weight: 500;
    color: var(--label-3); max-width: 260px;
}

/* a11y: motion-sensitive users get the same card with a still, upright phone */
@media (prefers-reduced-motion: reduce) {
    .rg-phone { animation: none; transform: none; will-change: auto; }
}


/* ============================================================
   SESSION BADGE — постоянный маркер стенда (presentation/ui/sessionBadge.js).
   Показывается ТОЛЬКО для sandbox-сессии. Намеренно кричащий и всегда поверх:
   спутать стенд с боем нельзя. pointer-events:none — не должен перехватывать
   клики по игровому полю. ============================================================ */
.session-badge {
  position: fixed;
  top: 6px;
  left: 6px;
  z-index: var(--z-badge);
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid #ffb300;
  background: rgba(255, 179, 0, 0.92);
  color: #201400;
  font: 700 11px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

/* ===== Объявление о выданных фрибетах (#freebet-announce) =====================
   Тот же «переливающийся» mesh-градиент, что у экрана окончания бонуса
   (.bz-mesh + MeshGradient — один шейдер на всё приложение), но КОМПАКТНОЕ окно:
   обычная модалка фреймворка (.wf-modal-backdrop, --z-modal — документированная
   иерархия §z-index не меняется), карточка ~360×300 и уже экрана телефона, так что
   горизонтального скролла нет ни при какой ширине. Кнопка переиспользует
   глобальный класс .be-continue, здесь только компактная геометрия. */
#freebet-announce .wf-modal-wrap { width: min(360px, calc(100vw - 28px)); }
#freebet-announce .wf-modal {
    background: #FF1E7A;          /* fallback, если WebGL недоступен */
    padding: 0;
    min-height: min(300px, 62vh);
}
#freebet-announce .wf-body { padding: 0; position: relative; overflow: hidden; }
#freebet-announce .fba-inner {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px;
    min-height: min(300px, 62vh);
    padding: 24px 20px;
    box-sizing: border-box;
    text-align: center;
    color: #FFFFFF;
}
#freebet-announce .fba-title {
    font-family: var(--ff-head); font-weight: 900;
    font-size: min(34px, 8.5vw); line-height: 1.05;
    letter-spacing: 0.02em;
    text-wrap: balance;
}
#freebet-announce .fba-count {
    font-family: var(--ff-head); font-weight: 900;
    font-size: min(44px, 11vw); line-height: 1;
}
#freebet-announce .fba-sub { font-size: 14px; line-height: 1.35; opacity: .92; }
#freebet-announce .fba-until { font-size: 13px; opacity: .8; }
#freebet-announce .be-continue {
    position: static; transform: none;
    margin-top: 6px;
    height: 46px; padding: 0 26px;
    font-size: min(20px, 5vw);
}
#freebet-announce .be-continue:active { transform: scale(.96); }
/* Крестик лишний: окно закрывает кнопка «Let's play», бэкдроп и Escape. */
#freebet-announce .wf-close-out { display: none; }