/* AULA INTERATIVA 2.5 — UI unificada (manutenção futura: editar PERSONALIZAÇÃO abaixo). */

/* ========== COMPATIBILIDADE: styles.css ========== */
:root {
  color-scheme:dark;
  --bg:#10141e;
  --panel:#1a2130;
  --panel2:#242d3d;
  --line:#354153;
  --ink:#f4f6fa;
  --muted:#a9b5c6;
  --gold:#f6c468;
  --blue:#86b9ff;
  --green:#88dfb5;
  --red:#ff9a9e;
  --shadow:0 24px 80px #03080f88;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
* {
  box-sizing:border-box}
html,body {
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--ink)}
button,input,select {
  font:inherit}
button {
  cursor:pointer}
button:disabled {
  opacity:.4;
  cursor:not-allowed}
.muted {
  color:var(--muted)}
.small {
  font-size:.86rem}
.eyebrow,.tiny-kicker,.mini-label {
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.66rem;
  font-weight:800;
  color:var(--gold)}
.tiny-kicker {
  font-size:.57rem;
  display:block;
  margin-bottom:3px}
.logo-dot {
  color:var(--gold);
  font-size:1.35rem}
.tag {
  font-size:.58rem;
  border:1px solid #68798d;
  padding:4px 7px;
  border-radius:99px;
  letter-spacing:.12em;
  color:#b7c5d9}
.btn {
  border:1px solid transparent;
  border-radius:12px;
  padding:11px 15px;
  color:var(--ink);
  font-weight:750;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  gap:8px;
  transition:transform .12s ease,background .12s ease}
.btn:not(:disabled):active {
  transform:scale(.98)}
.btn.primary {
  background:var(--gold);
  color:#27200e}
.btn.primary:hover {
  background:#ffd78d}
.btn.outline {
  border-color:var(--line);
  background:var(--panel);
  color:var(--ink)}
.btn.subtle {
  background:transparent;
  color:var(--muted)}
.btn.subtle:hover {
  background:var(--panel2);
  color:var(--ink)}
.btn.danger-outline {
  background:#3c2530;
  border-color:#88525e;
  color:#ffd0d0}
.btn.small {
  padding:8px 10px;
  font-size:.8rem}
.full {
  width:100%}
input,select {
  background:#111a28;
  color:var(--ink);
  border:1px solid #526070;
  border-radius:10px;
  outline:none;
  padding:12px 13px;
  width:100%;
  min-height:45px}
input:focus,select:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 3px #f6c46823}
label {
  display:block;
  margin-bottom:8px;
  color:#d7e0ed;
  font-size:.85rem;
  font-weight:650}
.error-text {
  color:#ffc0bc;
  min-height:18px;
  font-size:.85rem;
  margin-top:10px}
.welcome {
  max-width:720px;
  margin:13vh auto;
  padding:36px}
.welcome h1,.login-card h1,.player-card h1 {
  font-size:clamp(2.2rem,5vw,4.5rem);
  letter-spacing:-.05em;
  line-height:1.06;
  margin:15px 0}
.welcome em,.login-card em,.player-card em {
  font-style:normal;
  color:var(--gold)}
.welcome p {
  line-height:1.65;
  color:var(--muted)}
.welcome-links {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:30px 0}
.login-wrap {
  display:grid;
  min-height:100vh;
  place-items:center;
  padding:20px}
.login-card {
  background:var(--panel);
  border:1px solid var(--line);
  padding:35px;
  border-radius:22px;
  width:min(440px,100%);
  box-shadow:var(--shadow)}
.login-card h1 {
  font-size:2.6rem}
.login-card p {
  color:var(--muted);
  line-height:1.55;
  margin-bottom:28px}
.login-card .btn {
  margin-top:14px}
.host-top {
  height:69px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding:0 24px;
  gap:12px;
  background:#141c28}
.brand {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.88rem;
  letter-spacing:.045em}
.brand strong {
  color:var(--gold)}
.host-tools {
  display:flex;
  align-items:center;
  gap:10px}
.slide-counter {
  font-size:.84rem;
  color:var(--muted);
  margin-right:5px}
.sync-dot {
  width:9px;
  height:9px;
  border-radius:50%;
  background:#ed9f7a;
  display:inline-block;
  box-shadow:0 0 0 4px #eea07b20}
.sync-dot.online {
  background:var(--green);
  box-shadow:0 0 0 4px #5bd4a924}
.host-shell {
  max-width:1540px;
  margin:auto;
  padding:18px 22px 28px}
.projector {
  border-radius:19px;
  overflow:hidden;
  background:#0c111a;
  border:1px solid #3a4555;
  box-shadow:0 12px 40px #0005}
.slide-frame {
  aspect-ratio:16/9;
  min-height:0;
  position:relative;
  overflow:hidden}
.slide-view,.game-view {
  width:100%;
  height:100%;
  position:absolute;
  inset:0}
.slide-view img {
  width:100%;
  height:100%;
  object-fit:contain;
  background:#080e16}
.fallback-slide {
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:linear-gradient(130deg,#14283f,#16202b);
  text-align:center}
.fallback-slide h2 {
  font-size:3.5rem}
.game-view {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(210px,25%);
  background:radial-gradient(circle at 14% 10%,#24364b,#111926 55%)}
.game-main {
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:clamp(13px,1.8vw,30px)}
.game-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px}
.game-status {
  font-size:clamp(.6rem,1vw,.85rem);
  background:#374157;
  border:1px solid #56627a;
  color:#e8eef9;
  padding:6px 10px;
  border-radius:99px}
.game-center {
  flex:1;
  display:grid;
  grid-template-columns: minmax(120px,34%) minmax(0,1fr);
  gap:clamp(14px,2vw,35px);
  align-items:center;
  min-height:0}
.character-panel {
  height:90%;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  position:relative}
.character-panel img {
  width:100%;
  height:90%;
  object-fit:contain;
  transition:transform .22s ease,filter .22s}
.character-panel img.pulse {
  animation:stage-pop .45s ease}
.stages {
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:7px}
.stages i {
  height:5px;
  width:20px;
  background:#44546a;
  border-radius:10px}
.stages i.used {
  background:var(--red)}
.puzzle-panel {
  min-width:0}
.hint-label {
  color:var(--gold);
  font-size:clamp(.65rem,1.1vw,.95rem);
  letter-spacing:.13em;
  font-weight:800}
.hint {
  font-size:clamp(.8rem,1.6vw,1.65rem);
  line-height:1.3;
  margin:8px 0 clamp(10px,2vw,27px);
  color:#eef1f7}
.word-tiles {
  display:flex;
  align-items:center;
  gap:clamp(3px,.5vw,8px);
  flex-wrap:wrap;
  margin-bottom:clamp(13px,2vw,28px)}
.tile {
  min-width:clamp(15px,2.1vw,34px);
  height:clamp(26px,3.1vw,47px);
  border-bottom:2px solid #c2d2e8;
  display:grid;
  place-items:center;
  font-weight:850;
  font-size:clamp(.8rem,2.1vw,2rem);
  animation:tile-in .22s both}
.tile.space {
  min-width:clamp(10px,1vw,17px);
  border-bottom:0}
.tile.punc {
  border-bottom:0}
.game-live {
  display:flex;
  gap:clamp(15px,3vw,45px);
  align-items:end;
  justify-content:space-between;
  border-top:1px solid #425168;
  padding-top:clamp(10px,1.5vw,25px)}
.turn-box,.clock-box {
  display:flex;
  flex-direction:column;
  gap:4px}
.turn-box strong,.clock-box strong {
  font-size:clamp(.9rem,2vw,2.1rem)}
.clock-box strong {
  font-variant-numeric:tabular-nums;
  color:var(--gold)}
.mini-label {
  color:var(--muted)}
.event-banner {
  font-size:clamp(.7rem,.95vw,.95rem);
  color:#c7d5e8;
  margin:clamp(12px,2.5vw,25px) 0 0;
  min-height:2em}
.score-sidebar {
  border-left:1px solid #425168;
  background:#182438d9;
  padding:clamp(11px,1.55vw,25px);
  display:flex;
  flex-direction:column;
  overflow:hidden}
.score-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px;
  border-bottom:1px solid #425168;
  padding-bottom:12px;
  font-weight:850;
  font-size:clamp(.7rem,1.05vw,1.1rem);
  letter-spacing:.07em}
.score-heading small {
  color:var(--muted);
  font-weight:500;
  letter-spacing:0}
.score-list {
  display:flex;
  flex-direction:column;
  gap:clamp(5px,.85vw,13px);
  margin-top:clamp(8px,1.25vw,20px);
  overflow:auto;
  scrollbar-width:thin}
.score-team {
  background:#263449;
  border:1px solid #35485f;
  border-radius:10px;
  padding:clamp(7px,.9vw,13px);
  display:flex;
  flex-direction:column;
  gap:7px}
.score-team.current {
  border-color:var(--gold);
  box-shadow:0 0 0 1px #f6c46870}
.score-team.out {
  opacity:.49}
.score-top {
  display:flex;
  justify-content:space-between;
  gap:5px}
.score-name {
  font-weight:800;
  font-size:clamp(.65rem,.99vw,1.05rem);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis}
.score-state {
  font-size:clamp(.52rem,.75vw,.77rem);
  color:var(--muted)}
.score-values {
  display:flex;
  align-items:baseline;
  gap:10px}
.score-values strong {
  font-size:clamp(1rem,1.8vw,1.9rem);
  color:var(--gold);
  font-variant-numeric:tabular-nums}
.score-values span {
  color:#aebed2;
  font-size:clamp(.62rem,.85vw,.9rem)}
.score-footer {
  margin-top:auto;
  padding-top:10px;
  font-size:.68rem;
  color:var(--muted)}
.stage-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 17px;
  background:#101822;
  gap:12px;
  border-top:1px solid #2e3d50}
.stage-bottom strong {
  font-size:.9rem}
.stage-bottom>span {
  font-size:.8rem;
  color:var(--muted)}
.control-strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:16px 0;
  flex-wrap:wrap}
.group-controls {
  display:flex;
  gap:8px;
  flex-wrap:wrap}
.control-meta {
  color:var(--muted);
  font-size:.8rem}
.toast {
  position:fixed;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);
  background:#2d3847;
  border:1px solid #687991;
  padding:13px 18px;
  border-radius:11px;
  box-shadow:var(--shadow);
  z-index:90;
  max-width:90vw}
.overlay {
  position:fixed;
  inset:0;
  z-index:100;
  background:#040810cd;
  display:grid;
  place-items:center;
  padding:25px}
.dialog {
  width:min(490px,100%);
  background:#202c3c;
  border:1px solid #667184;
  border-radius:22px;
  padding:28px;
  position:relative;
  text-align:center;
  box-shadow:var(--shadow)}
.dialog h2 {
  font-size:1.55rem;
  line-height:1.17}
.close {
  background:#304053;
  border:0;
  color:white;
  width:34px;
  height:34px;
  border-radius:50%;
  font-size:24px;
  display:grid;
  place-items:center;
  line-height:1;
  cursor:pointer}
.dialog .close {
  position:absolute;
  right:13px;
  top:13px}
.qr-paper {
  background:white;
  border-radius:13px;
  max-width:240px;
  min-height:240px;
  display:grid;
  place-items:center;
  margin:24px auto 12px;
  padding:12px}
.qr-paper svg {
  width:100%;
  height:auto}
.join-url {
  font-size:.86rem;
  overflow-wrap:anywhere;
  color:var(--gold)}
.admin-panel {
  position:fixed;
  right:0;
  top:0;
  bottom:0;
  z-index:110;
  background:#1a2535;
  border-left:1px solid #506078;
  width:min(450px,100vw);
  overflow:auto;
  padding:23px;
  box-shadow:var(--shadow)}
.admin-head {
  display:flex;
  justify-content:space-between;
  align-items:center}
.admin-panel h2 {
  margin:6px 0 0}
.admin-panel h3 {
  font-size:.88rem;
  letter-spacing:.05em;
  margin:28px 0 12px}
.admin-team {
  border:1px solid #4a5b70;
  background:#233145;
  border-radius:12px;
  padding:11px;
  margin:8px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px}
.admin-team strong {
  display:block}
.admin-team small {
  color:var(--muted)}
.admin-team code {
  font-size:1rem;
  letter-spacing:.1em;
  color:var(--gold)}
.admin-team button {
  border:none;
  background:transparent;
  text-decoration:underline;
  color:#c7d6eb;
  cursor:pointer;
  font-size:.75rem}
.history {
  display:grid;
  gap:8px;
  max-height:270px;
  overflow-y:auto}
.history-item {
  font-size:.78rem;
  padding:7px 0;
  border-bottom:1px solid #3b4a61;
  color:#c9d5e5}
.history-item time {
  color:#90a4be;
  margin-right:8px}
.admin-actions {
  display:grid;
  gap:8px;
  margin-top:25px}
.host-page.presentation-mode .host-top,.host-page.presentation-mode .control-strip,.host-page.presentation-mode .stage-bottom {
  display:none}
.host-page.presentation-mode .host-shell {
  padding:0;
  max-width:none}
.host-page.presentation-mode .projector {
  border:0;
  border-radius:0}
.host-page.presentation-mode .slide-frame {
  width:100vw;
  height:100vh;
  aspect-ratio:auto}
.host-page.presentation-mode {
  overflow:hidden}
.player-page {
  background:radial-gradient(circle at 50% -30%,#283d55, #10141e 65%)}
.player-head {
  height:60px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 20px;
  border-bottom:1px solid var(--line);
  background:#121b28}
.player-head strong {
  color:var(--gold)}
.player-head small {
  font-size:.53rem;
  color:var(--muted);
  margin-left:auto;
  letter-spacing:.1em}
.player-shell {
  width:min(620px,100%);
  padding:24px 17px 50px;
  margin:auto}
.player-card {
  background:var(--panel);
  border:1px solid var(--line);
  padding:25px;
  border-radius:19px;
  box-shadow:0 14px 35px #0003}
.player-card h1 {
  font-size:2.8rem}
.player-card h2 {
  font-size:1.5rem;
  margin:6px 0 10px}
.player-card p {
  line-height:1.6}
.join-form {
  margin-top:25px}
.join-form input,.join-form select {
  margin-bottom:19px}
.join-form input {
  text-align:center;
  font-size:1.5rem;
  letter-spacing:.22em;
  font-weight:700}
.player-id {
  display:flex;
  align-items:center;
  justify-content:space-between}
.player-id h1 {
  font-size:clamp(1.65rem,8vw,2.5rem);
  margin:7px 0 15px}
.player-score {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:16px}
.player-score>div {
  background:#27354a;
  border:1px solid #445772;
  padding:15px 18px;
  border-radius:13px}
.player-score span {
  font-size:.7rem;
  color:var(--muted);
  letter-spacing:.11em;
  display:block}
.player-score strong {
  font-size:2.2rem;
  color:var(--gold);
  font-variant-numeric:tabular-nums}
.centered {
  text-align:center;
  padding:46px 24px}
.wait-symbol {
  font-size:2.5rem;
  color:var(--gold);
  animation:waitpulse 2.2s infinite}
.turn-top {
  display:flex;
  align-items:center;
  justify-content:space-between}
.turn-timer {
  color:var(--gold);
  font-size:1.25rem;
  font-weight:850;
  font-variant-numeric:tabular-nums}
.player-tabs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin:20px 0}
.tab {
  padding:12px 8px;
  border-radius:10px;
  color:#c4d1e2;
  border:1px solid #506077;
  background:#202c3d;
  font-weight:700}
.tab.active {
  background:#f6c468;
  color:#1e2027;
  border-color:var(--gold)}
.letter-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px}
.letter-grid button {
  height:45px;
  border-radius:9px;
  border:1px solid #5c6d83;
  background:#2c3b50;
  color:#fff;
  font-size:1.1rem;
  font-weight:900}
.letter-grid button:active {
  background:var(--gold);
  color:#000}
.risk-notice {
  background:#493136;
  border:1px solid #a26264;
  border-radius:10px;
  color:#ffd7d4;
  padding:12px;
  font-size:.84rem;
  line-height:1.5;
  margin:14px 0}
.player-foot {
  text-align:center;
  color:#879bb2;
  font-size:.77rem;
  margin:22px 5px}
.player-page .btn {
  min-height:47px}
@keyframes tile-in {
  from {
  opacity:.25;
  transform:translateY(8px)}
to {
  opacity:1;
  transform:none}
}
@keyframes stage-pop {
  0% {
  transform:scale(.92);
  filter:brightness(1.8)}
100% {
  transform:scale(1);
  filter:none}
}
@keyframes waitpulse {
  0%,100% {
  opacity:.4}
50% {
  opacity:1}
}
[hidden] {
  display:none!important}
@media(max-width:850px) {
  .host-tools .slide-counter {
  display:none}
.host-top {
  padding:8px 10px;
  height:auto;
  flex-wrap:wrap}
.host-shell {
  padding:12px}
.control-strip {
  justify-content:center}
.game-view {
  grid-template-columns:minmax(0,1fr) 28%}
.score-sidebar {
  padding:8px}
.score-team {
  padding:6px}
.score-list {
  gap:4px}
.score-heading {
  padding-bottom:7px}
.score-footer {
  display:none}
.game-main {
  padding:8px}
.stage-bottom>span {
  display:none}
}
@media(max-width:580px) {
  .brand {
  font-size:.73rem}
.host-tools {
  gap:2px;
  flex-wrap:wrap}
.host-tools .btn {
  font-size:.66rem}
.game-view {
  grid-template-columns:minmax(0,1fr) 29%}
.hint {
  font-size:.72rem}
.word-tiles {
  margin-bottom:6px}
.tile {
  min-width:12px;
  height:18px;
  font-size:.8rem}
.game-center {
  gap:6px}
.game-live {
  padding-top:5px}
.game-header .eyebrow {
  font-size:.5rem}
.event-banner {
  margin-top:5px;
  font-size:.55rem}
.score-top {
  flex-direction:column}
.score-name {
  font-size:.58rem}
.score-values strong {
  font-size:.8rem}
.score-team {
  gap:2px}
.score-values span {
  font-size:.5rem}
.letter-grid {
  gap:5px}
.letter-grid button {
  height:42px}
}



/* ========== COMPATIBILIDADE: v12.css ========== */
/* v1.2 — estilos adicionais; preserva o estilo-base da versão 1.1 */
[hidden] {
    display: none !important
}

.stage-page,
.master-page {
    margin: 0;
    background: #0c1420;
    color: #f3f6fa;
    min-height: 100vh;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif
}

.stage-shell {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.stage-top {
    padding: 12px 3vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #111e2b;
    font-size: clamp(12px, 1.3vw, 18px)
}

.stage-counter {
    opacity: .7
}

.stage-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
    position: relative
}

.stage-slide {
    width: 100%;
    height: calc(100vh - 120px);
    display: flex;
    justify-content: center;
    align-items: center
}

.stage-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.stage-footer {
    padding: 13px 3vw;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: clamp(11px, 1.4vw, 18px);
    background: #111e2b
}

.stage-game {
    width: min(1400px, 95vw);
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    text-align: center
}

.stage-game h1 {
    font-size: clamp(22px, 3vw, 45px);
    margin: 0
}

.stage-hint {
    font-size: clamp(16px, 2.1vw, 28px);
    margin: 0
}

.stage-word {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(3px, .6vw, 10px);
    max-width: 100%
}

.stage-word .tile {
    min-width: clamp(22px, 3.1vw, 47px);
    border-bottom: 3px solid #e3edf8;
    min-height: clamp(30px, 4vw, 55px);
    font-size: clamp(17px, 2.5vw, 37px);
    font-weight: 800;
    text-align: center
}

.stage-word .tile.space {
    min-width: 18px;
    border: 0
}

.stage-word .tile.punc {
    border: 0
}

.stage-game-bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: clamp(12px, 4vw, 80px);
    align-items: center
}

.stage-game-bottom>div {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.stage-game-bottom small {
    color: #9ab0c3;
    font-size: clamp(10px, 1.2vw, 17px)
}

.stage-game-bottom strong {
    font-size: clamp(16px, 2.5vw, 32px)
}

.stage-message {
    font-size: clamp(13px, 1.5vw, 20px);
    color: #a7cce8
}

.public-teams {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px
}

.public-team {
    border: 1px solid #425368;
    border-radius: 20px;
    padding: 6px 11px;
    font-size: clamp(11px, 1.3vw, 17px)
}

.public-team.out {
    opacity: .52;
    text-decoration: line-through
}

.public-team.active {
    border-color: #82d6c6;
    color: #bdf9d6
}

.stage-finish {
    width: min(880px, 94vw);
    text-align: center;
    padding: 22px
}

.stage-finish h1 {
    font-size: clamp(26px, 4.4vw, 62px)
}

.final-rows {
    display: flex;
    flex-direction: column;
    gap: 9px
}

.final-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    border: 1px solid #425368;
    border-radius: 13px;
    padding: 10px 20px;
    font-size: clamp(16px, 2.2vw, 30px)
}

.stage-qr,
.stage-closed {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(6, 15, 26, .97);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 20px
}

.qr-card {
    width: min(460px, 95vw);
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center
}

.qr-card h2 {
    margin: 0
}

.qr-paper {
    background: white;
    border-radius: 12px;
    padding: 14px;
    width: 260px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center
}

.qr-paper canvas,
.qr-paper svg {
    max-width: 100%;
    max-height: 100%
}

.stage-closed h1 {
    font-size: clamp(36px, 5vw, 70px)
}

.master-shell {
    max-width: 680px;
    margin: auto;
    padding: 14px 12px 36px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.master-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px
}

.master-head h1 {
    margin: 0;
    font-size: 28px
}

.master-status {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 13px;
    border-radius: 12px;
    background: #173044;
    font-size: 14px
}

.master-card {
    background: #162231;
    border: 1px solid #35485b;
    border-radius: 15px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 11px
}

.master-card h2 {
    margin: 0;
    font-size: 17px
}

.master-card h2 small {
    font-size: 12px;
    font-weight: 400
}

.master-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px
}

.wrap-actions {
    display: flex;
    flex-wrap: wrap
}

.wrap-actions>.btn {
    flex: 1;
    min-width: 120px
}

.master-card>.btn {
    width: 100%
}

.master-score {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid #2b3a4a
}

.master-score strong {
    font-size: 21px
}

.master-score small {
    color: #b9c8d6
}

.master-team {
    border-bottom: 1px solid #334454;
    padding: 10px 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px
}

.master-team strong,
.master-score span {
    overflow-wrap: anywhere
}

.master-team small {
    display: block;
    color: #9cacbd
}

.master-team button {
    grid-column: 1/-1;
    justify-self: start
}

.master-history {
    font-size: 13px
}

.master-danger {
    border-color: #744452
}

.launch-page {
    max-width: 500px;
    margin: 12vh auto;
    padding: 22px;
    display: grid;
    gap: 15px
}

.option-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px
}

.option-btn {
    font-size: 24px;
    font-weight: 800;
    padding: 20px;
    border: 2px solid #46576c;
    border-radius: 12px;
    background: #182b3d;
    color: white
}

.option-btn:disabled {
    opacity: .5
}

.player-id h1 {
    max-width: 260px;
    overflow-wrap: anywhere
}

.risk-notice {
    font-size: 13px
}

.leaders {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center;
    margin: 14px 0;
    padding: 13px;
    border: 1px solid #546f88;
    border-radius: 12px
}

@media(max-width:550px) {
    .stage-footer {
        padding: 9px 12px
    }

    .master-actions {
        grid-template-columns: 1fr 1fr
    }

    .option-grid {
        grid-template-columns: 1fr 1fr
    }
}

/* Correção v2.0.1 — recupera os controles públicos existentes na v1.1. */
.stage-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap
}

.stage-tools .btn {
    font-size: 12px;
    padding: 8px 11px;
    white-space: nowrap
}

.stage-qr .qr-card {
    position: relative;
    padding: 26px 14px 14px
}

.stage-qr-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    border: 1px solid #54677e;
    border-radius: 50%;
    background: #1b2b3c;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    text-indent: -2px;

    /* Centralização do X */
    display: grid;
    place-items: center;
    padding: 0;
    line-height: 1;
}
.stage-qr-close {
    font-size: 0 !important;
    padding: 0;
}

.stage-qr-close::before,
.stage-qr-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 3px;
    background: #ffffff;
    border-radius: 2px;
}

.stage-qr-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.stage-qr-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.stage-qr-close:focus-visible,
.stage-tools .btn:focus-visible {
    outline: 3px solid #f6c468;
    outline-offset: 2px
}

/* Equivalente ao modo Projeção da v1.1: sem cabeçalho/rodapé, apresentação ampliada. Esc para sair. */
.stage-page.projection-mode {
    overflow: hidden;
    height: 100vh
}

.stage-page.projection-mode .stage-top,
.stage-page.projection-mode .stage-footer {
    display: none
}

.stage-page.projection-mode .stage-shell {
    height: 100vh;
    min-height: 0;
    overflow: hidden
}

.stage-page.projection-mode .stage-content {
    height: 100vh;
    min-height: 0;
    flex: 1
}

.stage-page.projection-mode .stage-slide {
    height: 100vh
}

.stage-page.projection-mode .stage-game {
    max-height: 100vh;
    overflow: auto
}

@media(max-width:640px) {
    .stage-top {
        flex-wrap: wrap;
        gap: 8px
    }

    .stage-tools {
        width: 100%;
        justify-content: space-between
    }
    .brand-logo {
    width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    }
}

/* ========== COMPATIBILIDADE: editor.css ========== */
*{box-sizing:border-box}[hidden]{display:none!important}
.editor-page{background:#0c1420;color:#f1f5f9;font-family:system-ui,-apple-system,Segoe UI,sans-serif;margin:0;font-size:15px;min-height:100vh}
.editor-top{display:flex;align-items:center;justify-content:space-between;padding:22px clamp(16px,3vw,50px);background:#112131;border-bottom:1px solid #30455b;gap:12px;flex-wrap:wrap}
.editor-top h1{font-size:clamp(22px,2.7vw,35px);margin:2px 0}.editor-top small{color:#9fb4c7;letter-spacing:.1em}.editor-top nav{display:flex;gap:14px;flex-wrap:wrap}.editor-top a{color:#c5e1f3;text-decoration:none}.editor-top a:hover{text-decoration:underline}
.editor-layout{display:grid;grid-template-columns:minmax(250px,310px) minmax(0,1fr);gap:18px;padding:22px clamp(12px,2vw,36px);align-items:start;max-width:1500px;margin:auto}
.editor-sidebar,.ed-card{background:#162535;border:1px solid #32495f;border-radius:14px;padding:17px}
.editor-sidebar{position:sticky;top:12px;max-height:calc(100vh - 35px);overflow:auto}.editor-sidebar h2,.ed-card h2{font-size:18px;margin:0 0 8px}.ed-card{margin-bottom:15px}
.title-line{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}.title-line h2{margin:0}
.ed-button{font:inherit;font-weight:600;padding:9px 12px;border:1px solid #5b7186;border-radius:8px;color:#ebf4fa;background:#243b51;cursor:pointer;text-align:center;display:inline-block;text-decoration:none}
.ed-button:hover:not(:disabled){background:#385a77}.ed-button:disabled{opacity:.45;cursor:default}.ed-button.primary{background:#117fa5;border-color:#21a1cd;color:white}.ed-button.primary:hover{background:#1599c0}.ed-button.danger{border-color:#a96472;color:#fbcad2}.ed-button.small{padding:4px 8px;font-size:12px}.ed-button.full{display:block;width:100%;margin-top:8px}.ed-button.ed-file{cursor:pointer}
.editor-page label{display:block;color:#ccdeec;font-size:13px;margin-top:12px;font-weight:600}
.editor-page input:not([type=file]),.editor-page textarea,.editor-page select{display:block;width:100%;background:#0e1b2a;color:white;border:1px solid #527189;border-radius:9px;padding:10px;font:inherit;margin-top:5px;min-height:40px}
.editor-page textarea{resize:vertical}.editor-page input:focus,.editor-page select:focus,.editor-page textarea:focus{outline:2px solid #3daacf}
.ed-help{font-size:12px;color:#b5c9d9;line-height:1.5}.ed-divider{height:1px;background:#33495f;margin:18px 0}.ed-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}
.category-line,.lesson-line{display:flex;align-items:center;gap:5px;padding:8px 5px;border-bottom:1px solid #263a4e;flex-wrap:wrap}
.category-line .ed-link,.lesson-line .ed-link{font:inherit;border:0;background:transparent;color:#e6eff9;cursor:pointer;text-align:left;flex:1;min-width:120px;word-break:break-word}
.lesson-line.selected{background:#183b51;border-radius:7px}.ed-tag{border:1px solid #597287;padding:4px 9px;border-radius:20px;font-size:12px;color:#c4d7e5}.ed-tag.live{color:#a8ebd4;border-color:#3c9b88}
.module-item{border:1px solid #41566a;border-radius:12px;margin-bottom:10px;padding:12px;background:#101f2e}
.module-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.module-head strong{font-size:14px}.module-head .ed-actions{margin:0}
.module-details{padding-top:8px;border-top:1px solid #31475c;margin-top:9px}.module-details details summary{cursor:pointer;color:#b8e1f0;padding:8px 0}.module-details .preview{margin-top:12px;display:block;width:100%;max-width:460px;max-height:230px;object-fit:contain;border:1px solid #344e61;border-radius:8px;background:#0b1521}
.ed-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ed-file-input{font:inherit;margin-top:7px;max-width:100%}.ed-option-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.ed-option-list label{margin:4px 0}
.login-panel{max-width:460px;margin:8vh auto;padding:14px}.login-panel .ed-card{padding:26px}.toast{position:fixed;bottom:20px;right:20px;padding:16px 20px;border-radius:10px;background:#194e5b;color:white;border:1px solid #7dcde0;box-shadow:0 6px 25px #0008;max-width:90vw;z-index:100}.toast.error{background:#632c3c;border-color:#bc7b82}
#restoreInput{display:none}#editorLoginError{color:#ffb3bf}.editor-content{min-width:0}
@media(max-width:760px){.editor-layout{display:block;padding:12px}.editor-sidebar{position:static;max-height:none;margin-bottom:15px}.ed-cols{grid-template-columns:1fr}.editor-top{padding:14px}.ed-option-list{grid-template-columns:1fr}}


/* ========== COMPATIBILIDADE: monitoramento-v21.css ========== */
/* Aula Interativa 2.1 — apenas os novos elementos de monitoramento do painel. */
.master-screen-exit-notices {
    position: fixed;
    z-index: 1100;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: min(360px, calc(100vw - 24px));
    pointer-events: none;
}
.master-screen-exit-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid #a18452;
    border-left: 4px solid var(--gold, #f6c468);
    border-radius: 12px;
    background: #202c3b;
    color: #fff;
    box-shadow: 0 14px 40px #0009;
}
.master-screen-exit-toast-body { flex: 1; min-width: 0; }
.master-screen-exit-toast-title { font-weight: 800; font-size: .9rem; }
.master-screen-exit-toast-context { font-size: .81rem; line-height: 1.45; color: #d0d9e6; margin-top: 4px; }
.master-screen-exit-toast-time { font-size: .72rem; color: #aebed1; margin-top: 6px; }
.master-screen-exit-dismiss {
    flex: 0 0 32px;
    min-width: 32px;
    height: 32px;
    border: 1px solid #657488;
    border-radius: 9px;
    background: #304050;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.master-screen-exit-dismiss:focus-visible,
.master-monitor-details summary:focus-visible { outline: 2px solid var(--gold, #f6c468); outline-offset: 2px; }
.master-monitor-details { margin: 10px 0 16px; border: 1px solid var(--line, #354153); border-radius: 10px; padding: 10px 12px; }
.master-monitor-details summary { cursor: pointer; font-size: .9rem; font-weight: 700; }
.master-monitor-history { margin-top: 10px; max-height: 340px; overflow-y: auto; }
.master-monitor-item { padding: 9px 0; border-top: 1px solid var(--line, #354153); }
.master-monitor-item strong { display: block; font-size: .85rem; }
.master-monitor-item span { display: block; font-size: .78rem; color: var(--muted, #a9b5c6); margin-top: 3px; }
.master-monitor-empty { color: var(--muted, #a9b5c6); font-size: .82rem; }


/* ========== COMPATIBILIDADE: audio-v22.css ========== */
/* v2.2 — apenas novos componentes de áudio; não altera os estilos personalizados. */
.stage-slide{position:relative}
.stage-audio-widget:not([hidden]){position:absolute;z-index:5;bottom:12px;right:12px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:min(90%,510px);
  padding:9px 13px;background:rgba(14,29,45,.91);color:#eef5fc;border:1px solid #4c6277;
  border-radius:12px;box-shadow:0 6px 18px #0006;font-size:13px}
.stage-audio-widget button{font-size:12px;cursor:pointer}
.stage-audio-widget button[hidden]{display:none}
#slideAudioBlock .master-actions{margin:10px 0}
#slideAudioBlock #slideAudioStatus{line-height:1.5}
.ed-audio-row{padding:10px 12px 13px;margin-top:12px;border:1px solid #3e596e;
  border-radius:10px;background:rgba(37,63,84,.28)}
.ed-audio-row label:first-child{margin-top:0}
.ed-audio-file{overflow-wrap:anywhere;color:#bfcfe1;font-size:13px;margin:8px 0}
.ed-audio-row .ed-button{margin-top:8px}


/* ========== COMPATIBILIDADE: security-v23.css ========== */
/* v2.3: somente entrada e autorização; estilos existentes preservados. */
.stage-pair-notice {
    position: fixed;
    z-index: 80;
    top: 74px;
    left: 50%;
    transform: translateX(-50%);
    background: #172b3d;
    color: #fff;
    border: 1px solid #9ab7c7;
    border-radius: 12px;
    padding: 16px 22px;
    text-align: center;
    max-width: min(95vw, 620px);
    font-size: clamp(14px, 2vw, 23px);
    box-shadow: 0 10px 25px #0008
}

.stage-pair-notice[hidden] {
    display: none
}

.v23-security-actions {
    display: grid;
    gap: 15px;
    margin-top: 0;
}
.launch-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    justify-self: center;
}
.launch-page .launch-logo {
    margin-bottom: -25px;
}
.launch-page > h1 {
    margin-bottom: 0;
}

.launch-page > h1 + p {
    margin-top: 0;
}

/* ========== COMPATIBILIDADE: gameplay-v232.css ========== */
/* v2.3.2 — apenas ajustes de jogabilidade: resultado do quiz, forca e confirmação privada. */
.stage-slide { position: relative; }
.quiz-reveal-v232 {
  position: absolute;
  z-index: 5;
  bottom: clamp(24px, 5vh, 80px);
  left: 50%;
  transform: translateX(-50%);
  max-width: min(90vw, 1000px);
  width: max-content;
  padding: clamp(14px, 2vw, 28px) clamp(22px, 3vw, 45px);
  border-radius: 16px;
  border: 2px solid #f6c468;
  background: rgba(12, 25, 40, .96);
  color: #f7f5e9;
  font-size: clamp(21px, 3vw, 43px);
  font-weight: 800;
  text-align: center;
  box-shadow: 0 12px 42px #000a;
}
.quiz-reveal-v232 .leaders { font-size: .55em; margin-top: 8px; }
/* Cronômetro geral continua no motor e no painel do professor, mas não no palco. */
.stage-game-bottom > .stage-total-clock-v232 { display: none; }
.player-letter-feedback-v232 {
  margin-bottom: 12px;
  border: 1px solid #556f86;
  border-radius: 12px;
  background: #24384a;
  color: #f8f8f4;
  text-align: center;
  padding: 12px 14px;
  font-size: 1.04rem;
  font-weight: 750;
}


/* ========== COMPATIBILIDADE: visual-v233.css ========== */
/* Aula Interativa v2.3.3 — refinamentos pontuais da forca e da página inicial.
   Sem alterar estilos-base, placar, regras ou outras telas. */

/* Palco: equipe em destaque, sem círculo grande envolvendo o nome. */
.stage-page .stage-game-bottom { flex-wrap: wrap; row-gap: 14px; }
.stage-page .stage-game-bottom > div { max-width: 100%; min-width: 0; }
.stage-page .stage-game-bottom small { color: #dce9f7; letter-spacing: .07em; }
.stage-page #turnName {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: #ffffff;
  font-size: clamp(23px, 3.3vw, 44px);
  font-weight: 850;
  line-height: 1.15;
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: min(82vw, 900px);
  text-wrap: balance;
}
.stage-page #turnName.team-on-turn-v233::before,
.stage-page .public-team.active::before {
  content: '';
  display: inline-block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #42e6b0;
  box-shadow: 0 0 0 3px rgba(66,230,176,.18);
  animation: equipe-ativa-v233 2s ease-in-out infinite;
}
@keyframes equipe-ativa-v233 {
  0%,100% { opacity: 1; box-shadow: 0 0 0 3px rgba(66,230,176,.18); }
  50% { opacity: .8; box-shadow: 0 0 0 9px rgba(66,230,176,0); }
}
@media (prefers-reduced-motion: reduce) {
  .stage-page #turnName.team-on-turn-v233::before,
  .stage-page .public-team.active::before { animation: none; }
}

/* Os nomes do rodízio deixam de ser pílulas circulares: tamanhos diferentes não cortam texto. */
.stage-page .public-teams { gap: 8px 18px; max-width: 100%; }
.stage-page .public-team {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 4px 0;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.stage-page .public-team.active { color: #ffffff; font-weight: 800; }
.stage-page .public-team.active::before { width: 8px; height: 8px; }
.stage-page .public-team.out { color: #d1dbe7; }

/* Depois da vitória, não competir com a comemoração mostrando relógio parado. */
.stage-page .forca-solved-v233 .stage-game-bottom { display: none; }

/* Contraste branco para informações sobre o fundo azul. */
.stage-page .stage-message { color: #ffffff; line-height: 1.4; max-width: 95%; overflow-wrap: anywhere; }
.stage-page .stage-word .tile { color: #ffffff; }

/* Celebração apenas após palavra resolvida; permanece até o professor avançar. */
.stage-page .forca-victory-v233 {
  max-width: min(95%, 1000px);
  border-radius: 15px;
  border: 1px solid rgba(246,196,104,.72);
  background: rgba(25, 41, 60, .94);
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
  padding: clamp(9px, 1.3vw, 16px) clamp(14px, 2.4vw, 30px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #ffffff;
  font-size: clamp(20px, 3.1vw, 39px);
  line-height: 1.2;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.stage-page .forca-victory-v233 strong { color: #ffffff; }
.stage-page .forca-victory-icon-v233 { flex: 0 0 auto; font-size: 1.05em; }

@media (max-height: 650px) {
  .stage-page .stage-game { gap: .55rem; padding-block: .5rem; }
  .stage-page .forca-victory-v233 { padding: 8px 14px; }
}

/* Tela inicial autenticada: preservar o retrato e acomodar paisagem baixa. */
@media (orientation: landscape) and (max-height: 700px) {
  .launch-page {
    box-sizing: border-box;
    width: min(500px, 96vw);
    max-width: 96vw;
    margin: 8px auto 14px;
    padding: 10px 16px;
    gap: 8px;
  }
  .launch-page .launch-logo {
    width: clamp(38px, 9vh, 60px);
    height: clamp(38px, 9vh, 60px);
    max-width: 100%;
    margin-bottom: 0;
  }
  .launch-page > h1 { margin: 0; font-size: clamp(21px, 5vh, 28px); line-height: 1.1; }
  .launch-page > h1 + p { margin: 0; line-height: 1.2; }
  .launch-page .btn { padding-block: 9px; min-height: 0; }
  .launch-page .v23-security-actions { gap: 8px; }
}


/* ========== COMPATIBILIDADE: minigames-v24.css ========== */
/* V2.4 — estilos independentes: não substituem identidade visual existente. */
.mini-editor-entry{margin:12px 0;padding:12px;border:1px solid #42576c;border-radius:10px;background:#101e2b}
.mini-editor-entry strong{display:block;margin-bottom:8px}.mini-editor-entry .ed-button{margin-top:10px}
.stage-mini-v24{width:min(1100px,95%);margin:auto;align-self:center;text-align:center;padding:clamp(15px,3vw,45px);background:#142538;border:1px solid #37556e;border-radius:22px;color:#f0f8ff;max-height:75vh;overflow:auto}
.stage-mini-v24 h2{font-size:clamp(23px,3.5vw,46px);margin:0 0 20px}
.mini-question-v24{font-size:clamp(20px,2.5vw,34px);font-weight:650;margin:15px 0 23px}
.mini-stage-item-v24{font-size:clamp(17px,2vw,27px);border:1px solid #34536c;padding:10px 16px;border-radius:10px;margin:8px 0;background:#102033}
.mini-answer-title-v24{margin:24px 0 12px;font-weight:800;font-size:clamp(18px,2vw,27px);color:#baf6df}
.mini-correct-v24{font-size:clamp(17px,2vw,25px);padding:7px;color:#baf6df;margin:5px 0}
#stageMiniStatus{font-size:clamp(15px,1.5vw,20px);margin:20px 0 0}
.mini-player-v24{display:grid;gap:12px}.mini-row-v24{display:flex;align-items:center;gap:7px;border:1px solid #476075;border-radius:10px;padding:9px;margin:7px 0}
.mini-row-v24>span{flex:1;min-width:0;overflow-wrap:anywhere}
.mini-action-v24{padding:10px 13px;border:1px solid #6b879e;border-radius:8px;background:#233e55;color:#fff;font:inherit;font-weight:650;cursor:pointer}
.mini-action-v24.selected{border-color:#92e9e3;background:#146a76;color:#fff}
.mini-short-v24{flex:none;min-width:41px}.mini-pair-v24{display:block;margin:10px 0;padding:12px;border-radius:10px;border:1px solid #435d73}
.mini-pair-v24 span{display:block;margin-bottom:8px;font-weight:650}.mini-pair-v24 select{width:100%;max-width:100%;font:inherit;border:1px solid #799aaf;border-radius:7px;background:#152b3b;color:#fff;padding:11px}
.mini-frase-v24{border:1px solid #45657a;padding:12px;border-radius:10px;margin-bottom:12px}.mini-frase-v24 p{margin:0 0 12px;font-weight:600}
.mini-choices-v24{display:flex;gap:8px;flex-wrap:wrap}.mini-choices-v24 button{flex:1 1 90px}
@media(max-width:540px){.mini-row-v24{font-size:14px}.stage-mini-v24{max-height:70vh}}

.mini-stage-cols-v24{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;text-align:left}.mini-stage-cols-v24 h3{font-size:clamp(18px,2vw,26px);text-align:center}.mini-stage-cols-v24>div{min-width:0}
@media(max-width:640px){.mini-stage-cols-v24{grid-template-columns:1fr}}


/* ========== DESIGN 2.5 — PERSONALIZAÇÃO E COMPONENTES ========== */
/* ============================================================
   AULA INTERATIVA — PERSONALIZAÇÃO VISUAL
   Os ajustes mais comuns ficam aqui: cores, tipografia e raios.
   Regras dos jogos, tempo e pontuação não estão nesta folha.
   ============================================================ */
:root {
  --ui-bg: #091321;
  --ui-surface: #102338;
  --ui-surface-2: #172e45;
  --ui-surface-3: #1d3952;
  --ui-border: rgba(148, 185, 212, .24);
  --ui-border-strong: rgba(148, 197, 224, .48);
  --ui-text: #f7fbff;
  --ui-muted: #b8cadb;
  --ui-accent: #70e1d0;
  --ui-accent-dark: #092b36;
  --ui-gold: #facb76;
  --ui-danger: #ff989e;
  --ui-radius: 16px;
  --ui-radius-sm: 10px;
  --ui-shadow: 0 16px 48px rgba(0, 6, 16, .25);
  --ui-font: "Segoe UI Variable", "Segoe UI", "Inter", ui-sans-serif, system-ui, sans-serif;
  --bg: var(--ui-bg);
  --panel: var(--ui-surface);
  --panel2: var(--ui-surface-2);
  --line: var(--ui-border);
  --ink: var(--ui-text);
  --muted: var(--ui-muted);
  --gold: var(--ui-gold);
  --green: var(--ui-accent);
  --red: var(--ui-danger);
  font-family: var(--ui-font);
}

/* 01 · Acessibilidade, base visual e controles compartilhados */
html, body { background: var(--ui-bg); color: var(--ui-text); font-family: var(--ui-font); }
body { -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ui-accent) !important; outline-offset: 3px; }
button, input, textarea, select { font-family: inherit; }
button, .btn, .ed-button, .tab, .option-btn, .mini-action-v24 { touch-action: manipulation; }
.btn, .ed-button, .mini-action-v24, .option-btn {
  border-radius: var(--ui-radius-sm); transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.btn { min-height: 43px; padding: 10px 16px; font-weight: 680; letter-spacing: .005em; }
.btn.primary, .ed-button.primary { background: var(--ui-accent); border-color: transparent; color: var(--ui-accent-dark); box-shadow: 0 6px 18px rgba(56, 212, 189, .13); }
.btn.primary:hover:not(:disabled), .ed-button.primary:hover:not(:disabled) { background: #a0f0e2; }
.btn.outline, .ed-button { background: rgba(34, 63, 88, .65); color: var(--ui-text); border: 1px solid var(--ui-border-strong); }
.btn.outline:hover:not(:disabled), .ed-button:hover:not(:disabled) { background: var(--ui-surface-3); border-color: var(--ui-accent); }
.btn.subtle { color: var(--ui-muted); }
.btn.subtle:hover:not(:disabled) { background: rgba(111, 170, 204, .13); color: var(--ui-text); }
.btn:disabled, button:disabled { opacity: .56; }
input, select, textarea, .editor-page input:not([type=file]), .editor-page textarea, .editor-page select {
  background: rgba(6, 22, 38, .85); color: var(--ui-text); border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); min-width: 0;
}
input:focus, select:focus, textarea:focus, .editor-page input:focus, .editor-page select:focus, .editor-page textarea:focus {
  border-color: var(--ui-accent); outline: 2px solid rgba(112, 225, 208, .3); outline-offset: 1px; box-shadow: none;
}
.eyebrow, .tiny-kicker, .mini-label { color: var(--ui-accent); letter-spacing: .15em; }
.muted, .ed-help { color: var(--ui-muted); }

/* 02 · Projetor: cabeçalho e rodapé unificados em todas as modalidades */
.stage-page { background: var(--ui-bg); color: var(--ui-text); }
.stage-shell { min-height: 100dvh; background: var(--ui-bg); }
.stage-top, .stage-footer {
  flex: 0 0 auto; background: #101f30; border: 0; color: var(--ui-muted);
}
.stage-top { min-height: 62px; padding: 8px clamp(15px, 2.8vw, 45px); border-bottom: 1px solid var(--ui-border); gap: 16px; }
.stage-footer { min-height: 45px; padding: 8px clamp(15px, 2.8vw, 45px); align-items: center; border-top: 1px solid var(--ui-border); font-size: clamp(12px, .92vw, 15px); }
.stage-footer span { line-height: 1.25; }
.stage-top .brand { display: flex; align-items: center; gap: 9px; color: var(--ui-text); font-size: clamp(12px, 1vw, 16px); letter-spacing: .075em; font-weight: 540; white-space: nowrap; }
.stage-top .brand strong, .player-head strong { color: var(--ui-gold); font-weight: 790; }
.brand-logo { width: 31px; height: 31px; max-width: 31px; max-height: 31px; object-fit: contain; flex: 0 0 31px; }
.stage-counter { color: #d2e0ec; font-size: clamp(12px, .96vw, 16px); font-variant-numeric: tabular-nums; opacity: 1; white-space: nowrap; }
.stage-tools { gap: clamp(5px, .8vw, 13px); justify-content: flex-end; }
.stage-tools .btn {
  min-height: 34px; font-size: clamp(11px, .72vw, 13px); padding: 6px 12px; font-weight: 730; color: #d9e9f5;
  background: rgba(148,185,212,.07); border: 1px solid rgba(148,185,212,.18); border-radius: 9px;
  text-transform: none; letter-spacing: .018em;
}
.stage-tools .btn:hover:not(:disabled), .stage-tools .btn[aria-pressed="true"] { color: var(--ui-accent); border-color: rgba(112,225,208,.5); background: rgba(112,225,208,.10); }
.stage-content { min-height: 0; flex: 1 1 auto; padding: 0; background: radial-gradient(ellipse at 50% 38%, #101c2d 0%, #091321 74%); }
.stage-slide { height: calc(100dvh - 108px); max-height: 100%; }
.stage-slide img { object-fit: contain; }
.stage-finish { background: var(--ui-surface); border: 1px solid var(--ui-border); padding: clamp(22px, 3vw, 44px); border-radius: var(--ui-radius); }
.stage-page.projection-mode .stage-content { padding: 0; }
.stage-page.projection-mode .stage-slide { height: 100dvh; max-height: 100dvh; }

/* 03 · Forca: palavra em evidência, sem informações duplicadas */
.stage-game { width: min(1210px, 96vw); max-height: calc(100dvh - 116px); overflow-y: auto; gap: clamp(10px, 2.2vh, 22px); padding: clamp(12px, 2.4vw, 36px); }
.stage-game-header .eyebrow { font-size: clamp(10px, .85vw, 14px); color: var(--ui-gold); }
.stage-game h1 { font-size: clamp(31px, 3.4vw, 56px); letter-spacing: -.035em; font-weight: 800; }
.stage-hint { color: #e5f0fa; font-size: clamp(16px, 1.65vw, 25px); max-width: 1100px; line-height: 1.5; }
.stage-word { gap: clamp(4px, .55vw, 10px); margin-top: clamp(4px, 1vh, 12px); }
.stage-word .tile { border-bottom: 2px solid #eaf7ff; min-width: clamp(24px, 3vw, 47px); font-size: clamp(23px, 2.6vw, 39px); color: #fff; text-shadow: 0 2px 14px rgba(112,225,208,.1); }
.stage-game-bottom { width: min(860px, 100%); gap: clamp(18px, 4vw, 75px); align-items: end; flex-wrap: wrap; border-top: 1px solid var(--ui-border); padding-top: 20px; }
.stage-game-bottom > div { min-width: 0; }
.stage-game-bottom small { font-weight: 650; letter-spacing: .105em; font-size: clamp(10px, .9vw, 14px); color: var(--ui-muted); }
.stage-game-bottom strong { color: var(--ui-text); }
.stage-page #turnName { font-size: clamp(23px, 3vw, 42px); letter-spacing: -.03em; }
.stage-page #turnName.team-on-turn-v233::before { width: 11px; height: 11px; background: var(--ui-accent); box-shadow: 0 0 0 4px rgba(112,225,208,.18); }
.stage-page #clock { color: var(--ui-gold); font-variant-numeric: tabular-nums; font-size: clamp(27px, 2.8vw, 38px); }
.stage-message { color: var(--ui-text); margin: 2px 0; font-size: clamp(15px, 1.25vw, 18px); }
.stage-message:empty { display: none; }
.stage-page #forcaTeams[hidden] { display: none !important; }
.stage-page #forcaLeaders { margin: 2px 0 0; }
.stage-page .forca-victory-v233 {
  padding: clamp(13px, 1.4vw, 20px) clamp(19px, 2.4vw, 34px); background: linear-gradient(105deg, #19344a, #122638); border: 1px solid rgba(250,203,118,.64);
  box-shadow: 0 12px 40px rgba(0,0,0,.20); border-radius: var(--ui-radius); font-size: clamp(20px, 2.55vw, 34px);
}
.stage-page .leaders, .quiz-reveal-v232 .leaders { border-color: var(--ui-border); background: rgba(17, 39, 60, .83); color: var(--ui-muted); border-radius: var(--ui-radius-sm); }
.stage-page .final-row { background: var(--ui-surface-2); border-color: var(--ui-border); }
.quiz-reveal-v232 { border: 1px solid rgba(250,203,118,.8); border-radius: var(--ui-radius); background: rgba(12,28,47,.97); box-shadow: var(--ui-shadow); }

/* 04 · Novos minijogos no projetor */
.stage-mini-v24 { width: min(1080px, 92vw); max-height: calc(100dvh - 145px); border: 1px solid var(--ui-border); border-radius: 22px; padding: clamp(26px,3.5vw,56px); background: linear-gradient(145deg, #14293e, #102035); box-shadow: var(--ui-shadow); }
.stage-mini-v24 h2 { font-size: clamp(27px, 3.6vw, 49px); letter-spacing: -.035em; font-weight: 760; }
.mini-question-v24 { color: #f0f8ff; font-weight: 650; line-height: 1.4; }
.mini-stage-item-v24 { background: rgba(7, 22, 39,.52); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); padding: clamp(12px,1.3vw,19px); }
.mini-answer-title-v24 { color: var(--ui-accent); letter-spacing: .06em; }
.mini-correct-v24 { color: #b8f7df; }
#stageMiniStatus { color: var(--ui-muted); }

/* 05 · Celulares das equipes: hierarquia, feedback e legibilidade */
.player-page { background: radial-gradient(circle at 15% 0%, #1b354a, var(--ui-bg) 45%) fixed; color: var(--ui-text); }
.player-head { background: rgba(12, 28, 45, .94); border-bottom: 1px solid var(--ui-border); min-height: 65px; }
.player-head small { color: var(--ui-accent); letter-spacing: .12em; }
.player-shell { max-width: 660px; padding-top: clamp(18px,4vh,38px); }
.player-card, .player-id { border-radius: var(--ui-radius); border: 1px solid var(--ui-border); background: linear-gradient(150deg, #162d44, #102236); box-shadow: var(--ui-shadow); }
.player-card { padding: clamp(21px, 4.5vw, 34px); }
.player-card h1 { letter-spacing: -.045em; }
.player-card h2 { color: var(--ui-text); letter-spacing: -.025em; }
.player-card p, .player-card .muted { line-height: 1.55; }
.player-id { margin-bottom: 16px; }
.player-id h1 { color: var(--ui-text); }
.wait-symbol { color: var(--ui-accent); text-shadow: 0 0 25px rgba(112,225,208,.30); }
#waitingPanel { padding-block: clamp(38px, 8vh, 75px); }
#waitingTitle { font-size: clamp(24px,5vw,36px); margin-block: 8px 12px; }
#waitingMessage { max-width: 35ch; margin-inline: auto; }
.option-btn { background: #19354e; border: 1px solid var(--ui-border-strong); font-size: clamp(19px,5vw,25px); }
.option-btn:hover:not(:disabled), .mini-action-v24:hover:not(:disabled) { border-color: var(--ui-accent); background: #244d61; }
.tab.active { background: var(--ui-accent); color: var(--ui-accent-dark); }
.turn-timer { font-variant-numeric: tabular-nums; color: var(--ui-gold); }
.player-letter-feedback-v232 { background: #173b48; border-color: rgba(112,225,208,.5); }
.mini-row-v24, .mini-pair-v24, .mini-frase-v24 { background: rgba(4,17,30,.30); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); padding: 13px; }
.mini-action-v24 { background: #214058; border-color: var(--ui-border-strong); }
.mini-action-v24.selected { background: #146d70; border-color: #9af0e0; }
.risk-notice { color: #ffceca; }

/* 06 · Painel do Professor */
.master-page { background: radial-gradient(circle at 0% 0%, #17354b, var(--ui-bg) 43%) fixed; color: var(--ui-text); }
.master-shell { max-width: 810px; gap: 17px; padding: clamp(12px,3vw,27px) clamp(12px,2.7vw,26px) 50px; }
.master-head { padding: 12px 8px 5px; }
.master-head h1 { font-weight: 770; font-size: clamp(26px,5vw,37px); letter-spacing: -.04em; }
.master-card, .login-card { background: linear-gradient(140deg, #162c43, #102236); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: clamp(18px,3vw,26px); box-shadow: var(--ui-shadow); }
.master-card h2 { font-size: clamp(17px,2vw,21px); letter-spacing: -.015em; }
.master-status { background: #19384a; border: 1px solid var(--ui-border); color: #dce9f4; }
.master-score, .master-team { border-color: var(--ui-border); }
.master-card .btn { border-radius: var(--ui-radius-sm); }

/* 07 · Biblioteca/Editor: mesmos tokens, superfícies e controles */
.editor-page { color: var(--ui-text); background: var(--ui-bg); font-family: var(--ui-font); }
.editor-top { background: #101f30; border-bottom: 1px solid var(--ui-border); padding-block: 17px; }
.editor-top h1 { color: var(--ui-text); letter-spacing: -.04em; font-weight: 770; }
.editor-top small { color: var(--ui-accent); }
.editor-top a { color: #dceaf5; }
.editor-top a:hover { color: var(--ui-accent); }
.editor-layout { max-width: 1550px; gap: 22px; }
.editor-sidebar, .ed-card { background: linear-gradient(145deg, #162d43, #102338); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: 0 10px 28px rgba(0,8,23,.13); padding: clamp(17px,2vw,25px); }
.editor-sidebar { top: 14px; }
.editor-sidebar h2, .ed-card h2 { color: var(--ui-text); font-size: 19px; }
.ed-card { margin-bottom: 18px; }
.ed-button { border-radius: var(--ui-radius-sm); background: #23415a; font-weight: 650; padding: 10px 13px; }
.ed-button.primary { background: var(--ui-accent); color: var(--ui-accent-dark); }
.module-item, .mini-editor-entry { background: rgba(5,22,38,.56); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.module-details { border-color: var(--ui-border); background: transparent; }
.ed-divider { background: var(--ui-border); }
.ed-tag { border-color: var(--ui-border-strong); }
.lesson-line.selected { background: rgba(112,225,208,.12); }
.editor-page label { color: #d3e3f1; }
.editor-page input:not([type=file]), .editor-page textarea, .editor-page select { min-height: 43px; }
.toast { background: #193a4c; border-color: var(--ui-accent); }

/* 08 · Página de entrada e correção do logotipo em paisagem */
.launch-page { box-sizing: border-box; width: min(550px, calc(100% - 32px)); max-width: 550px; min-height: 0; margin: clamp(22px,6vh,65px) auto; padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; align-items: stretch; gap: 18px; text-align: center; background: linear-gradient(150deg, #162e46, #102236); border: 1px solid var(--ui-border); border-radius: 24px; box-shadow: var(--ui-shadow); }
.launch-intro-v25 { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; }
.launch-page .launch-logo { display: block; width: clamp(54px, 7vw, 76px); height: clamp(54px, 7vw, 76px); min-width: 0; min-height: 0; max-width: 100%; margin: 0; object-fit: contain; }
.launch-page h1 { margin: 0; line-height: 1.13; letter-spacing: -.045em; font-size: clamp(28px,4.5vw,44px); }
.launch-page h1 + p { margin: 0; color: var(--ui-muted); }
.launch-actions-v25 { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.launch-actions-v25 .btn { min-height: 43px; }
.launch-actions-v25 .v23-security-actions { gap: 9px; margin-top: 6px; }
.launch-actions-v25 .error-text { margin: 0; }
.login-wrap { padding: 15px; }
.login-card { max-width: 100%; }
@media (orientation: landscape) and (max-height: 700px) {
  .master-page:has(> .launch-page) { min-height: 100dvh; }
  .launch-page { width: min(900px, calc(100vw - 24px)); max-width: 900px; margin: 10px auto; padding: clamp(10px,2vh,22px); display: grid; grid-template-columns: minmax(150px, .8fr) minmax(280px, 1.2fr); gap: 20px; align-items: start; }
  .launch-intro-v25 { position: sticky; top: 12px; padding: 8px; justify-content: center; }
  .launch-page .launch-logo { width: clamp(48px, 15vh, 80px); height: clamp(48px, 15vh, 80px); }
  .launch-page h1 { font-size: clamp(23px, 5.2vh, 34px); }
  .launch-page h1 + p { font-size: 13px; }
  .launch-actions-v25 { gap: 6px; }
  .launch-actions-v25 .btn { min-height: 33px; padding: 7px 10px; font-size: 12px; }
  .launch-actions-v25 .v23-security-actions { gap: 5px; margin-top: 3px; }
  .login-wrap { min-height: 100dvh; padding: 9px; }
  .login-card { padding: 16px; }
}
@media (max-width: 640px) {
  .stage-top { padding: 10px 13px; gap: 7px; }
  .stage-top .brand { font-size: 12px; }
  .stage-tools { width: 100%; gap: 5px; justify-content: flex-start; }
  .stage-tools .btn { padding: 6px 9px; font-size: 10px; }
  .stage-footer { padding-inline: 13px; min-height: 41px; gap: 8px; }
  .stage-game { width: 98vw; }
  .stage-game-bottom { padding-top: 12px; }
  .editor-layout { display: block; }
  .editor-sidebar { position: static; max-height: none; margin-bottom: 16px; }
}
@media (max-width: 500px) {
  .stage-mini-v24 { width: 96vw; padding: 19px; border-radius: 14px; }
  .mini-stage-cols-v24 { grid-template-columns: 1fr; }
  .player-card { padding: 20px; }
  .player-head { padding-inline: 13px; }
  .option-grid { gap: 9px; }
  .launch-page { margin: 16px auto; padding: 22px 18px; }
}
@media (max-height: 590px) and (orientation: landscape) {
  .stage-top { min-height: 45px; padding-block: 5px; }
  .stage-footer { min-height: 35px; padding-block: 4px; }
  .stage-game { max-height: calc(100dvh - 94px); gap: 7px; }
  .stage-mini-v24 { max-height: calc(100dvh - 94px); padding-block: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}