/* MIT License: see LICENSE at project root. */
/* Fullscreenbesturing rond het spelframe, inclusief de pseudo-fullscreenfallback
   voor browsers zonder element-fullscreen. Hoort bij `fullscreen.js`. */

/* Onzichtbare strook van de lobby over de bovenrand van het (cross-origin)
   game-frame: pointerevents boven het spel bereiken de lobby niet, deze
   strook wel. Muis erheen of een tik haalt de fullscreen-bar terug. */
.game-fullscreen-hotzone {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1.25rem;
  z-index: 5;
}

.game-fullscreen-bar {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--backdrop);
  border-bottom: 1px solid var(--border);
  border-radius: 0.85rem 0.85rem 0 0;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.35rem);
  transition: opacity 160ms ease, transform 160ms ease;
}

.game-fullscreen-bar.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.game-fullscreen-toggle {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}

.game-fullscreen-toggle:hover {
  background: var(--surface-2);
}

.game-fullscreen-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* Echte fullscreen: geen afgeronde kaartrand meer rond het spel. */
.board-view:fullscreen {
  border-radius: 0;
  background: var(--bg);
}

/* CSS-fallback voor browsers zonder element-fullscreen (iPhone-Safari). */
.board-view.game-pseudo-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  border-radius: 0;
  min-height: 100vh;
  background: var(--bg);
}

/* De hoogte komt uit de custom property die de bridge op het frame zet zodra
   de game zijn inhoudshoogte meldt; zonder meting vult het frame zijn vak. */
.board-view > [data-role="game-frame"] {
  display: block;
  width: 100%;
  height: var(--game-frame-height, 100%);
  min-width: 0;
  min-height: inherit;
  border: 0;
  background: transparent;
}

/* In fullscreen telt de gemeten inhoudshoogte niet: het frame vult het scherm,
   zodat 100vh binnen het frame het scherm is en niet het frame zelf. Anders
   meet een game dat zijn layout op vh schaalt het frame dat zichzelf op die
   layout schaalt. Twee losse regels, want een browser die :fullscreen niet
   kent gooit een hele selectorlijst weg waarin die pseudo-klasse staat. */
.board-view:fullscreen > [data-role="game-frame"] {
  height: 100%;
}

.board-view.game-pseudo-fullscreen > [data-role="game-frame"] {
  height: 100%;
}