.ww-player .ww-opt {
  border: 2px solid var(--ww-card-border, #dee2e6);
  background: var(--ww-card-bg, #fff);
  color: var(--ww-card-fg, var(--ww-fg, #1f2937));
  font-weight: 500;
  padding: 1rem;
  text-align: left;
  white-space: normal;
  transition: transform .1s, box-shadow .1s;
}
.ww-player .ww-opt:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.ww-player .ww-opt:disabled { opacity: .9; }

/* === Wordwall-style activity page === */

.ww-play-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 .5rem;
}

/* The "embed" frame — bounded width, fixed aspect ratio, scrolls inside.
   Like a YouTube embed: small box inside the page, not the whole page. */
.ww-play-page .ww-player-frame {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  background: var(--ww-card-bg, #ffffff);
  color: var(--ww-card-fg, var(--ww-fg, #1f2937));
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  overflow: hidden;
}

/* Inner widget fills the frame absolutely and scrolls if content overflows.
   When aspect-ratio is 'auto', the wrapper has min-height set inline and
   the widget uses static positioning so height grows naturally.
   container-type:size makes it a query container so the activity can size
   itself to the frame (cq* units) and fit without a scrollbar.
   display:flex + column lets short activities center themselves vertically
   via margin-top/bottom:auto on their root element (margin:auto trick —
   safe with overflow:auto unlike justify-content:center which hides the top). */
.ww-play-page .ww-player-frame > #ww-player-widget {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 1.25rem;
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.ww-play-page .ww-player-frame > #ww-player-widget > * {
  margin-top: auto;
  margin-bottom: auto;
}

/* Quiz/solo player: a flex column that exactly fills the frame, so it never
   needs a scrollbar. The image is the flexible middle (shrinks to fit); the
   question and options keep natural size. Text/buttons scale with the frame
   via container-query units → crisp on a 1280x800 board and in fullscreen. */
.ww-play-page .ww-player-frame .ww-player {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 1.4cqh;
}
.ww-play-page .ww-player-frame .ww-player .ww-phead { flex: 0 0 auto; }
.ww-play-page .ww-player-frame .ww-player .ww-q {
  flex: 0 0 auto;
  margin: 0;
  line-height: 1.15;
  font-size: clamp(1rem, 5cqmin, 2.4rem);
}
.ww-play-page .ww-player-frame .ww-player .ww-q-media {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ww-play-page .ww-player-frame .ww-player .ww-q-media img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.ww-play-page .ww-player-frame .ww-player .ww-options { flex: 0 0 auto; gap: 1.2cqh; }
.ww-play-page .ww-player-frame .ww-player .ww-kahoot-grid .btn {
  font-size: clamp(.9rem, 3.4cqmin, 1.9rem);
  padding: clamp(.45rem, 2.2cqh, 1.6rem);
  min-height: 0;
  white-space: normal;
}
.ww-play-page .ww-player-frame[style*="auto"] > #ww-player-widget {
  position: static;
  inset: auto;
  min-height: inherit;
  container-type: normal; /* indefinite height: size containment would collapse it */
}

/* Fullscreen mode: frame fills the screen, widget loses padding so the
   activity uses every pixel (interactive board / projector). */
.ww-play-page .ww-player-frame:fullscreen,
.ww-play-page .ww-player-frame:-webkit-full-screen {
  max-width: none;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  box-shadow: none;
}
.ww-play-page .ww-player-frame:fullscreen > #ww-player-widget,
.ww-play-page .ww-player-frame:-webkit-full-screen > #ww-player-widget {
  padding: 1rem;
}

/* Embedded modes (VS / Equipos / Memoria) need more room than the solo
   aspect-ratio box. When one is active the frame drops its ratio for a taller,
   wider definite-height box; the inner widget keeps filling it (absolute
   inset:0, scrolls if needed). The arenas — designed for the full viewport —
   are re-scoped just below to fill THIS frame instead of 100vh, so they sit
   neatly inside the activity page (and grow with the Pantalla completa button). */
.ww-play-page .ww-player-frame.is-expanded {
  aspect-ratio: auto !important;
  max-width: 1100px;
  height: min(80vh, 720px);
}
.ww-play-page .ww-player-frame.is-expanded > #ww-player-widget {
  padding: 0;                /* arenas manage their own padding */
}
/* Re-scope the full-viewport arenas to the embed frame. In real fullscreen the
   frame is 100vh, so 100% still fills the screen — one rule covers both. */
.ww-play-page .ww-player-frame .vs-arena,
.ww-play-page .ww-player-frame .teams-arena {
  height: 100%;
  min-height: 0;
}

/* Active mode button gets a subtle "you are here" cue beyond the solid fill. */
.ww-modes .ww-mode.is-active {
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
  font-weight: 600;
}

/* Shared SETUP scaffold (views/modeSetup.js) — ONE look for every mode's setup
   so they never drift. Lives inside the stage when embedded. */
.ww-mode-setup { padding: 1.5rem 1rem; }
.ww-mode-setup .ww-mode-setup-body { margin: 0 auto; }
.ww-mode-setup .form-control { max-width: 100%; }

/* Pickable tiles for skin and background. */
.ww-pick-tile {
  width: 96px;
  cursor: pointer;
  padding: .35rem;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: border-color .12s, transform .1s;
}
.ww-pick-tile:hover { transform: translateY(-2px); }
.ww-pick-tile.is-active {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}

/* Responsive tiles on small screens */
@media (max-width: 600px) {
  .ww-pick-tile { width: 76px; }
}

/* ── Player container queries (respond to the FRAME size, not the viewport) ── */

/* Narrow frame: compact quiz layout */
@container (max-width: 420px) {
  .ww-play-page .ww-player-frame .ww-player { gap: .6rem; }
  .ww-play-page .ww-player-frame .ww-player .ww-q { font-size: clamp(.85rem, 5cqmin, 1.4rem); }
  .ww-play-page .ww-player-frame .ww-player .ww-kahoot-grid .btn {
    font-size: clamp(.8rem, 3cqmin, 1.1rem);
    padding: clamp(.35rem, 2cqh, .9rem);
  }
}

/* Modest cap on big screens. Fullscreen still expands to the full viewport
   (1280x800 on the interactive board) thanks to :fullscreen rules above. */
@media (min-width: 1100px) {
  .ww-play-page .ww-player-frame { max-width: 800px; }
}