.play-body { background: var(--stage-bg,var(--bg)); color: var(--stage-text,var(--text)); min-height: 100vh; }
.play-app { min-height: 100vh; display: grid; place-items: center; padding: 28px 18px; }
.play-shell { width: min(980px,100%); display: grid; gap: 18px; }
.play-header { text-align: center; padding: 10px 0 2px; }
.play-header h1 { margin: 4px 0 0; font-size: clamp(32px,6vw,64px); color: var(--accent); letter-spacing: -.035em; }
.play-header p { margin: 8px auto 0; color: color-mix(in srgb, var(--stage-text) 72%, transparent); max-width: 700px; font-size: clamp(15px,2vw,19px); }
.play-card { background: color-mix(in srgb, var(--stage-bg) 88%, white 12%); border: 1px solid color-mix(in srgb, var(--stage-text) 14%, transparent); border-radius: 12px; padding: 18px; }
.join-card { width: min(720px,100%); margin: 0 auto; }
.join-name { margin-bottom: 16px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 10px; }
.choice { border: 1px solid color-mix(in srgb, var(--stage-text) 15%, transparent); border-left: 5px solid var(--choice-color,var(--accent)); background: transparent; color: var(--stage-text); padding: 14px; border-radius: 9px; text-align: left; }
.choice:hover { background: color-mix(in srgb, var(--stage-text) 7%, transparent); }
.choice strong, .choice small { display: block; }
.choice strong { font-size: 18px; }
.choice small { margin-top: 5px; color: color-mix(in srgb, var(--stage-text) 65%, transparent); }
.spectator-choice { --choice-color:#818894; }
.viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.viewer-bar strong, .viewer-bar small { display: block; }
.viewer-actions { display:flex; gap:8px; flex-wrap:wrap; }
.mod-badge { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--accent); }
.mod-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.game-hero { min-height: 330px; display: grid; place-items: center; text-align: center; }
.game-hero h2 { margin: 6px 0 0; font-size: clamp(40px,9vw,92px); letter-spacing: -.045em; }
.game-hero p { max-width: 680px; color: color-mix(in srgb, var(--stage-text) 70%, transparent); }
.game-kicker { color: var(--accent); font-weight: 850; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; }
.player-timer { font-size: clamp(42px,8vw,80px); font-weight: 900; font-variant-numeric: tabular-nums; margin-top: 20px; }
.role-note { margin-top: 14px; font-weight: 750; }
.play-rules { width: min(720px,100%); margin: 0 auto; }
.play-rules ul { margin: 0; padding-left: 20px; color: color-mix(in srgb, var(--stage-text) 78%, transparent); }
.team-strip { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.team-pill { border: 1px solid color-mix(in srgb, var(--stage-text) 15%, transparent); border-bottom: 3px solid var(--team-color); border-radius: 7px; padding: 7px 10px; }
.response-grid, .who-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 10px; }
.response-card, .who-card { border: 1px solid color-mix(in srgb, var(--stage-text) 14%, transparent); border-left: 4px solid var(--card-color,var(--accent)); border-radius: 8px; padding: 14px; background: color-mix(in srgb, var(--stage-bg) 84%, white 16%); }
.response-card strong, .response-card small, .who-card strong, .who-card small { display: block; }
.response-card strong { font-size: 22px; }
.who-card strong { font-size: 23px; margin: 8px 0; }
.who-card.self { border-style: dashed; }
.who-card.self strong { font-size: 42px; }
.submit-box { width:min(560px,100%); margin: 0 auto; display:grid; gap:10px; }
.submit-box input { font-size: 20px; padding: 13px; }
.connection-banner { position: fixed; inset: 0 0 auto; z-index: 50; text-align:center; background:#8d2d35; color:white; padding:8px; transform:translateY(-100%); transition:.2s; }
.connection-banner.visible { transform:translateY(0); }
.waiting-mark { width: 68px; height: 68px; border: 3px solid var(--accent); border-radius: 50%; margin: 0 auto 18px; position:relative; }
.waiting-mark::after { content:""; position:absolute; inset:17px; background:var(--accent); border-radius:50%; }
@media (max-width:620px) { .play-app{padding:18px 12px}.play-card{padding:14px}.viewer-bar{align-items:flex-start}.viewer-actions{justify-content:flex-end}.game-hero{min-height:270px} }

/* ===== TERMO ===== */
:root {
  --term-correct: #3aa394;
  --term-present: #d3ad69;
  --term-absent: #312a2c;
  --term-tile: #16191f;
  --term-tile-border: #3a404b;
}
.term-play-shell { width: min(1500px,100%); }
.term-stage-header { padding-bottom: 2px; }
.term-viewer-bar { padding: 10px 14px; background: color-mix(in srgb, var(--stage-bg) 91%, white 9%); }
.term-game { display: grid; gap: 12px; }
.term-topline {
  min-height: 70px; display:flex; align-items:center; justify-content:space-between; gap:18px;
  border:1px solid color-mix(in srgb,var(--stage-text) 12%,transparent); border-radius:14px;
  background: color-mix(in srgb,var(--stage-bg) 92%, white 8%); padding:12px 16px;
}
.term-topline > div:first-child { display:grid; gap:2px; }
.term-topline span { font-size:24px; font-weight:950; letter-spacing:.18em; }
.term-topline small { color:color-mix(in srgb,var(--stage-text) 58%,transparent); font-size:11px; font-weight:800; letter-spacing:.12em; }
.term-round-timer { min-width:102px; text-align:right; font-size:32px; font-weight:950; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.term-round-timer.locked { color:color-mix(in srgb,var(--stage-text) 48%,transparent); }

.term-revealed-answer { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-width:170px; padding:7px 16px; border:1px solid color-mix(in srgb,var(--stage-text) 14%,transparent); border-radius:10px; background:rgba(255,255,255,.035); }
.term-revealed-answer small { font-size:8px; font-weight:900; letter-spacing:.16em; opacity:.58; }
.term-revealed-answer strong { font-size:clamp(20px,2.6vw,31px); line-height:1; letter-spacing:.1em; color:var(--stage-text); }
.term-layout { display:grid; grid-template-columns:minmax(520px,1fr) minmax(300px,390px); gap:16px; align-items:start; }
.term-main-board-wrap {
  min-height:650px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:16px;
  border:1px solid color-mix(in srgb,var(--stage-text) 12%,transparent); border-radius:16px;
  background: radial-gradient(circle at 50% -20%, color-mix(in srgb,var(--stage-text) 7%,transparent), transparent 42%), color-mix(in srgb,var(--stage-bg) 96%,white 4%);
  padding:22px clamp(14px,3vw,38px);
}
.term-board { display:grid; gap:8px; width:min(350px,100%); margin-top:4px; }
.term-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; perspective:760px; }
.term-tile {
  aspect-ratio:1; display:grid; place-items:center; border-radius:10px; border:2px solid var(--term-tile-border);
  background:var(--term-tile); --term-neutral:var(--term-tile); --term-neutral-border:var(--term-tile-border); color:#fff; font-size:clamp(27px,4vw,44px); font-weight:950; text-transform:uppercase;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015); transform-style:preserve-3d; backface-visibility:hidden; will-change:transform; user-select:none;
}
.term-tile.typed { border-color:#777f8b; transform:scale(1.025); }
.term-tile.pending { border-color:#707782; background:#22262d; }
.term-tile.correct, .term-mini-row i.correct { --term-result-color:var(--term-correct); background:var(--term-correct); border-color:var(--term-correct); }
.term-tile.present, .term-mini-row i.present { --term-result-color:var(--term-present); background:var(--term-present); border-color:var(--term-present); }
.term-tile.absent, .term-mini-row i.absent { --term-result-color:var(--term-absent); background:var(--term-absent); border-color:var(--term-absent); }
.term-tile.empty { color:transparent; }
.term-row.timeout .term-tile,
.term-row.offline .term-tile { color:#d7d2d4; }
.term-row.timeout .term-tile.absent,
.term-row.offline .term-tile.absent { background:var(--term-absent); border-color:var(--term-absent); }
.term-flipping { pointer-events:none; }
.term-row.shake { animation:term-shake .35s ease; }
@keyframes term-shake { 20%,60%{transform:translateX(-7px)} 40%,80%{transform:translateX(7px)} }
.term-status { min-height:50px; text-align:center; display:grid; align-content:center; gap:2px; }
.term-status strong { font-size:13px; letter-spacing:.08em; }
.term-status span { font-size:12px; color:color-mix(in srgb,var(--stage-text) 58%,transparent); }
.term-status.solved strong { color:#8ed9c8; }
.term-status.waiting strong { color:#e0c285; }
.term-status.finished strong { font-size:16px; }
.term-keyboard { width:min(650px,100%); display:grid; gap:7px; margin-top:auto; padding-top:4px; }
.term-keyboard-row { display:flex; justify-content:center; gap:6px; }
.term-key {
  min-width:0; flex:1; max-width:54px; height:50px; border:0; border-radius:7px; background:#747a83; color:#fff;
  font-size:14px; font-weight:900; box-shadow:inset 0 -2px 0 rgba(0,0,0,.18); transition:transform .08s,filter .12s;
}
.term-key:hover { filter:brightness(1.08); }
.term-key:active { transform:translateY(1px); }
.term-key.wide { max-width:78px; font-size:11px; }
.term-key.correct { background:var(--term-correct); }
.term-key.present { background:var(--term-present); }
.term-key.absent { background:var(--term-absent); color:#9b9497; }
.term-keyboard.disabled { opacity:.45; pointer-events:none; }
.term-opponents {
  border:1px solid color-mix(in srgb,var(--stage-text) 12%,transparent); border-radius:16px;
  background:color-mix(in srgb,var(--stage-bg) 94%,white 6%); padding:14px; max-height:650px; overflow:auto;
}
.term-opponents-title { display:flex; justify-content:space-between; gap:10px; align-items:end; margin-bottom:12px; }
.term-opponents-title span { font-size:11px; font-weight:900; letter-spacing:.11em; }
.term-opponents-title small { font-size:9px; }
.term-opponents-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; min-width:0; }
.term-opponents-grid > * { min-width:0; }
.term-mini-card { min-width:0; overflow:hidden; border:1px solid color-mix(in srgb,var(--stage-text) 11%,transparent); border-radius:11px; padding:10px; background:rgba(255,255,255,.018); }
.term-mini-card.solved { border-color:color-mix(in srgb,var(--term-correct) 55%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--term-correct) 14%,transparent) inset; }
.term-mini-heading { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:8px; }
.term-mini-heading strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.term-mini-heading small { font-size:8px; font-weight:900; letter-spacing:.07em; white-space:nowrap; }
.term-mini-card.solved .term-mini-heading small { color:#8ed9c8; }
.term-mini-board { display:grid; gap:3px; width:100%; min-width:0; }
.term-mini-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; width:100%; min-width:0; perspective:520px; }
.term-mini-row i { display:grid; place-items:center; width:100%; min-width:0; aspect-ratio:1 / 1; border:1px solid #343942; border-radius:3px; background:#15181d; --term-neutral:#15181d; --term-neutral-border:#343942; transform-style:preserve-3d; backface-visibility:hidden; will-change:transform; color:#f7f7f8; font-size:clamp(8px,1.15vw,12px); font-style:normal; font-weight:900; text-transform:uppercase; }
.term-mini-row i.pending { border-color:#666d77; background:#23272e; }
.term-no-opponents { color:color-mix(in srgb,var(--stage-text) 50%,transparent); font-size:12px; padding:18px 5px; text-align:center; grid-column:1/-1; }
.term-spectator-center { flex:1; display:grid; place-items:center; align-content:center; text-align:center; gap:8px; min-height:520px; }
.term-spectator-center strong { font-size:clamp(56px,10vw,112px); letter-spacing:-.06em; }
.term-spectator-center p { max-width:500px; color:color-mix(in srgb,var(--stage-text) 60%,transparent); }
.term-lobby-card { min-height:500px; display:grid; place-items:center; align-content:center; text-align:center; border-radius:16px; }
.term-lobby-card .term-logo { font-size:clamp(48px,9vw,92px); font-weight:950; letter-spacing:.18em; margin-left:.18em; }
.term-lobby-card h2 { margin:14px 0 5px; }
.term-lobby-card p { color:color-mix(in srgb,var(--stage-text) 60%,transparent); }
.term-lobby-dots { display:flex; gap:8px; margin-top:20px; }
.term-lobby-dots i { width:38px; height:38px; border:2px solid #454b55; border-radius:7px; animation:term-idle 1.8s ease-in-out infinite; }
.term-lobby-dots i:nth-child(2){animation-delay:.1s}.term-lobby-dots i:nth-child(3){animation-delay:.2s}.term-lobby-dots i:nth-child(4){animation-delay:.3s}.term-lobby-dots i:nth-child(5){animation-delay:.4s}
@keyframes term-idle { 0%,65%,100%{border-color:#454b55} 35%{border-color:#a4aab2} }
@media (max-width:1100px) {
  .term-layout { grid-template-columns:1fr; }
  .term-main-board-wrap { min-height:auto; }
  .term-opponents { max-height:none; }
  .term-opponents-grid { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); }
}
@media (max-width:620px) {
  .term-topline { min-height:58px; padding:9px 11px; border-radius:11px; }
  .term-topline span { font-size:18px; }
  .term-round-timer { font-size:25px; min-width:78px; }
  .term-main-board-wrap { padding:14px 8px; border-radius:12px; gap:12px; }
  .term-board { width:min(300px,100%); gap:6px; }
  .term-row { gap:6px; }
  .term-tile { border-radius:7px; font-size:28px; }
  .term-keyboard { gap:5px; }
  .term-keyboard-row { gap:4px; }
  .term-key { height:46px; font-size:12px; border-radius:5px; }
  .term-key.wide { font-size:9px; }
  .term-opponents-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Termo: input real para teclado físico/mobile sem poluir o tabuleiro. */
.term-main-board-wrap { position:relative; }
.term-typing-form {
  position:absolute;
  width:1px;
  height:1px;
  left:50%;
  top:42%;
  overflow:hidden;
  opacity:.01;
  pointer-events:none;
}
.term-typing-input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:.01;
  pointer-events:none;
  border:0;
  padding:0;
  margin:0;
  font-size:16px;
  color:transparent;
  background:transparent;
}
.term-native-submit {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  border:0;
  padding:0;
}
.term-mini-row i {
  display:grid;
  place-items:center;
  font-style:normal;
  font-size:clamp(8px,1.05vw,13px);
  font-weight:900;
  color:#fff;
  text-transform:uppercase;
  line-height:1;
}

@media (max-width:720px){ .term-revealed-answer{order:3;width:100%;min-width:0;margin-top:2px}.term-topline{flex-wrap:wrap}.term-revealed-answer strong{font-size:22px}}


/* Mobile: no máximo dois adversários por linha e teclado nativo do aparelho. */
@media (hover:none) and (pointer:coarse) {
  .term-opponents-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .term-keyboard { display:none !important; }
  .term-main-board-wrap[data-term-board-focus] { cursor:text; }
}
@media (hover:none) and (pointer:coarse) and (max-width:360px) {
  .term-opponents-grid { grid-template-columns:1fr; }
}