/* Word studio: a clear default round and a readable, state-driven playing surface. */
.family-game .studio-setup { max-width: 48rem; }
.family-game .studio-setup > h2 { margin-top: 1rem; }
.studio-setup-example { display: flex; align-items: center; gap: 1.5rem; margin: 1.5rem 0; }
.studio-setup-example img { width: min(40%, 12rem); height: auto; border-radius: 12px; }
.studio-setup-example figcaption { max-width: 24ch; font-size: 1.25rem; line-height: 1.35; font-weight: 650; }
.family-game .studio-round-summary { margin: 1.5rem 0 .5rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.family-game .studio-settings { margin: 1.5rem 0; border-block: 1px solid var(--line); }
.family-game .studio-settings > summary { min-height: 48px; padding: .8rem 0; }
.family-game .studio-settings > fieldset:first-of-type { margin-top: .5rem; }
.family-game .studio-settings .family-variants { padding: 0; border: 0; }
.family-game .studio-settings .family-variants label { margin-top: 0; }
.family-game .studio-settings #family-pack-choice { margin-bottom: 1rem; }
.family-game .studio-bridge-endpoints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 1rem; }
.studio-bridge-endpoints p { margin: 0; overflow-wrap: anywhere; }
.studio-bridge-endpoints strong { display: block; font-size: 1.25rem; }
.family-game [data-build-mode=wortbruecke] .studio-word-path { flex-wrap: wrap; gap: 1.5rem; padding: 1.5rem 1rem; margin: 1rem 0; overflow: visible; }
.family-game [data-build-mode=wortbruecke] .studio-word-path > li { flex: 1 1 7rem; margin: 0; min-width: 0; font-size: 1.1rem; }
.family-game [data-build-mode=wortbruecke] .studio-word-path > li strong { display: block; }
.family-game [data-build-mode=wortbruecke] .studio-word-path > li small { color: inherit; font-weight: 400; font-size: .875rem; margin-top: .4rem; }
.family-game [data-build-mode=wortbruecke] .studio-word-path > li::after { width: 1.5rem; }
.family-game [data-build-mode=wortbruecke] .studio-word-path > li.is-current { font-size: 1.3rem; }
.family-game .studio-bridge-status { min-height: 1.6em; margin: .75rem 0 1.25rem; }
.family-game [data-build-mode=wortbruecke] .studio-meaning { margin: 1.5rem 0; background: var(--attance-raised, #edf5ef); color: var(--ink); border-color: var(--line); }
.family-game .studio-meaning h3 { margin: 0 0 .65rem; font-size: 1.2rem; color: var(--ink); }
.studio-meaning-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.family-game .studio-meaning-switch button { display: block; text-align: left; min-width: 0; padding: .9rem; overflow-wrap: anywhere; }
.family-game .studio-meaning-switch button strong { display: block; }
.family-game .studio-meaning-switch button small { color: inherit; margin-top: .4rem; font-weight: 400; }
.family-game .studio-meaning-switch button[aria-pressed=true]:disabled { opacity: 1; cursor: default; border-width: 2px; }
body[data-games-site=attance] .compound-game .studio-meaning-switch button[aria-pressed=true]:disabled { opacity: 1; cursor: default; background: var(--attance-selected); color: var(--attance-ink); border-color: var(--attance-action); }
.family-game .studio-next-step h3 { margin-top: 1.5rem; }
.family-game .studio-next-step .build-atlas-exits { margin: 1rem 0; }
.family-game .studio-next-step .build-atlas-exits > li { min-width: 0; border-color: var(--line); }
.family-game .studio-next-step button { width: 100%; }
.family-game .studio-game-toolbar { align-items: stretch; padding-top: 1rem; border-top: 1px solid var(--line); margin-bottom: .5rem; }
.family-game .studio-game-toolbar button { flex: 1 1 10rem; }
.family-game .studio-hint { min-height: 1.6em; margin: .5rem 0 1rem; }
.family-game .studio-meaning-result { border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: .5rem; }
.studio-meaning-result > p { font-size: 1.3rem; }
.studio-meaning-result > div { display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr); align-items: center; gap: 1rem; }
.studio-meaning-result > div > span { padding: 1rem; border-radius: 12px; background: var(--attance-raised, #edf5ef); overflow-wrap: anywhere; }
.studio-meaning-result svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
.family-game #game-status { min-height: 1.6em; }
.family-game #game-status:empty { margin: .8rem 0; }
.family-game #game-content[aria-busy=true] { cursor: progress; }
.family-game #game-content[aria-busy=true] .studio-game-toolbar { opacity: .7; }
.family-game #game-content[aria-busy=true] .studio-hint:empty::before { content: 'Dein Zug wird gespeichert …'; color: var(--muted); }
@media (max-width: 600px) {
  .studio-setup-example { gap: 1rem; }
  .studio-setup-example figcaption { font-size: 1.1rem; }
  .family-game .studio-bridge-endpoints { gap: .75rem; }
  .studio-bridge-endpoints strong { font-size: 1.1rem; }
  .family-game [data-build-mode=wortbruecke] .studio-word-path { flex-direction: column; gap: 1.5rem; padding: 1.5rem 1rem; }
  .family-game [data-build-mode=wortbruecke] .studio-word-path > li { flex-basis: auto; width: 100%; }
  .family-game [data-build-mode=wortbruecke] .studio-word-path > li:not(:last-child)::after { top: 100%; left: 50%; height: 1.5rem; width: 0; border-top: 0; border-left: 2px solid var(--build-gold); }
  .studio-meaning-switch { grid-template-columns: 1fr; }
  .studio-meaning-result > div { grid-template-columns: 1fr; gap: .65rem; }
  .studio-meaning-result svg { width: 2rem; height: 2rem; transform: rotate(90deg); justify-self: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .studio-meaning-switch button { transition: background-color 160ms ease-out, border-color 160ms ease-out; }
}