/*
  The one game layout every board uses (docs/design-v2/phase5.md).
  Owned by the manager; pages add their own classes on top, never override
  these geometry rules.

  A 360px control panel on the LEFT, the board/stage on the RIGHT taking all
  the rest, 22px apart, the pair centred in a column of at most 1480px
  (13.09.2026, Lukas: "Spielfeld größer" - the old 1040px column left ~300px
  of empty page on each side at 1920 and held the stage at 626px). The panel
  stays 360px: every page's bet field is tuned for its 328px inside, and a
  narrower panel squeezed the amount out of the German field.

  Below 900px a panel next to the stage would leave the stage under ~450px,
  so the stage comes first and the panel follows underneath, full width (the
  phone order, from 900px instead of 760px). Pages style their phone details
  at 760px; between 761 and 900px they keep desktop details in this stacked
  order, which is why the stage gets back the 19px its pages pull it up by.

  --v2-fit-h is the tallest a board may get and still fit on screen under the
  top bar and the page title. Boards whose height follows their width (square
  grids, plinko, 3D scenes with an aspect ratio) cap themselves with it, so the
  wider column never pushes the play area below the fold.

    <div class="v2-game">
      <aside class="v2-game-panel"> bet field, options, primary button, status </aside>
      <section class="v2-game-stage"> board / reel / wheel / chart / table </section>
    </div>
    <div class="v2-game-below"> history chips, live wins, about card </div>
*/
.v2-game-wrap {
  --v2-fit-h: max(440px, calc(100vh - 230px));
  max-width: 1480px; margin: 0 auto; padding: 0 16px;
}
.v2-game {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
.v2-game-panel {
  flex: 0 0 360px;
  max-width: 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 16px;
  border-radius: var(--r);
  background: var(--g700);
}
.v2-game-stage {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}
.v2-game-below { margin-top: 32px; }

@media (max-width: 900px) {
  /* stacked, the panel comes after the stage: a tall board (plinko, keno) may
     only take so much of the screen that the panel still starts above the fold */
  .v2-game-wrap { padding: 0; --v2-fit-h: max(320px, calc(100vh - 360px)); }
  .v2-game { flex-direction: column-reverse; align-items: stretch; gap: 16px; }
  .v2-game-panel { flex: none; width: 100%; max-width: none; }
  .v2-game-stage { width: 100%; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .v2-game-stage { padding-top: 19px; }
}
@media (max-width: 760px) {
  .v2-game-panel { padding: 16px; }
}

/*
  Compact bet bar (layout.js, 13.09.2026, Lukas: "kompakte Einsatzleiste fürs
  Handy und Tablet"). layout.js marks what must stay ([data-bar-keep]: amount,
  actions, messages, [data-keep]) and adds .v2-bar-toggle. Collapsed, only
  those show, right under the stage; open, the panel is what it always was.
  Tablet (761-900): amount and button side by side in one row. Phone: the
  amount field with CLEAR/1/2/2X/MAX already fills the width, so the button
  sits in its own row (the pages' phone order puts it first).
*/
.v2-bar-toggle { display: none; }
@media (max-width: 900px) {
  .v2-game-panel.is-compact { gap: 12px; }
  .v2-game-panel.is-compact:not(.is-open) > :not([data-bar-keep]) { display: none !important; }
  .v2-game-panel.is-compact:not(.is-open) > [data-bar-keep] > h5:first-child { display: none; }
  .v2-game-panel.is-compact:not(.is-open) > [data-bar-keep] { margin-top: 0; }
  .v2-bar-toggle {
    order: 50;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; height: 36px; padding: 0 12px; border: 0; border-radius: var(--r);
    background: var(--g900); color: var(--t3); cursor: pointer;
    font: 600 12px/1 var(--font); letter-spacing: .3px; text-transform: uppercase;
  }
  .v2-bar-toggle:hover { color: var(--t1); }
  .v2-bar-toggle:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
  .v2-bar-toggle svg { transition: transform .15s; }
  .v2-game-panel.is-open > .v2-bar-toggle svg { transform: rotate(180deg); }
}
@media (min-width: 761px) and (max-width: 900px) {
  .v2-game-panel.is-compact:not(.is-open) { flex-flow: row wrap; align-items: center; }
  .v2-game-panel.is-compact:not(.is-open) > [data-bar-keep] { flex: 1 1 100%; min-width: 0; }
  .v2-game-panel.is-compact:not(.is-open) > [data-bar-keep]:has([data-bethost]) { flex: 1 1 320px; }
  .v2-game-panel.is-compact:not(.is-open) > [data-bar-keep]:is([class*="-actions"], :has([class*="-actions"])) { flex: 0 1 260px; }
}