:root {
  --paper:      #EDEEE8;
  --surface:    #E5E6DE;
  --ink:        #16181A;
  --graphite:   #6B706C;
  --faint:      #656B65;
  --rule:       #D6D7CE;
  --rule-strong:#B7B9AF;
  --accent:     #2340C8;
  --accent-soft: rgba(35, 64, 200, 0.07);
  --ok:         #2F6E48;
  --nil:        #A73A2C;
  --nil-soft:   rgba(167, 58, 44, 0.09);

  --f-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --f-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #15171A;
    --surface:    #1F2328;
    --ink:        #E9EAE4;
    --graphite:   #949A94;
    --faint:      #949A94;
    --rule:       #2B2F34;
    --rule-strong:#454B53;
    --accent:     #92A5FF;
    --accent-soft: rgba(146, 165, 255, 0.11);
    --ok:         #74C293;
    --nil:        #E6866F;
    --nil-soft:   rgba(230, 134, 111, 0.13);
  }
}

:root[data-theme="dark"] {
  --paper:      #15171A;
  --surface:    #1F2328;
  --ink:        #E9EAE4;
  --graphite:   #949A94;
  --faint:      #949A94;
  --rule:       #2B2F34;
  --rule-strong:#454B53;
  --accent:     #92A5FF;
  --accent-soft: rgba(146, 165, 255, 0.11);
  --ok:         #74C293;
  --nil:        #E6866F;
  --nil-soft:   rgba(230, 134, 111, 0.13);
}

* { box-sizing: border-box; }
/* garante o hidden também fora do artifact, onde não há reset do invólucro */
[hidden] { display: none !important; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.sheet {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: 24px;
  padding-block: 0 56px;
}

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 24px 10px;
}
.wordmark { font-family: var(--f-display); font-weight: 500; font-size: 28px; letter-spacing: 0.01em; margin: 0; }
.masthead-meta {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
}

.track { position: relative; height: 2px; background: var(--rule); overflow: hidden; }
.track-fill {
  position: absolute; inset: 0 auto 0 0; width: 100%;
  background: var(--accent); transform-origin: left center;
}
.track-fill.urgent { background: var(--nil); }

/* ---------- shared type ---------- */

.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
}
.note { color: var(--graphite); font-size: 13.5px; max-width: 60ch; margin: 0; }

/* ---------- controls ---------- */

.btn {
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:hover { border-color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); padding-inline: 28px; }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-quiet { border-color: transparent; color: var(--graphite); padding-inline: 10px; }
.btn-quiet:hover { color: var(--ink); border-color: transparent; text-decoration: underline; }

.seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 2px; overflow: hidden; }
.seg button {
  font-family: var(--f-mono); font-size: 13px; background: transparent; color: var(--graphite);
  border: 0; border-right: 1px solid var(--rule-strong); padding: 8px 18px; cursor: pointer;
}
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- setup ---------- */

.setup { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px; padding-block: 36px 0; }
@media (max-width: 760px) { .setup { grid-template-columns: 1fr; gap: 32px; } }
.panel { display: flex; flex-direction: column; gap: 14px; }

.roster-row { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--rule); padding-block: 4px; }
.roster-row .idx { font-family: var(--f-mono); font-size: 12px; color: var(--faint); width: 22px; flex: none; }
.roster-row input {
  flex: 1; min-width: 0; font-family: var(--f-ui); font-size: 16px; color: var(--accent);
  background: transparent; border: 0; padding: 8px 0;
}
.roster-row input::placeholder { color: var(--faint); }
.roster-row input:focus { outline: 0; }
.roster-row:focus-within { border-bottom-color: var(--accent); }
.roster-row .drop {
  flex: none; background: transparent; border: 0; color: var(--faint);
  font-size: 18px; line-height: 1; padding: 4px 6px; cursor: pointer; border-radius: 2px;
}
.roster-row .drop:hover { color: var(--nil); }
.roster-row .drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 8px; }
.cat {
  font-family: var(--f-ui); font-size: 13.5px; text-align: left; background: transparent; color: var(--graphite);
  border: 1px solid var(--rule); border-radius: 2px; padding: 9px 12px; cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.cat:hover { border-color: var(--rule-strong); color: var(--ink); }
.cat[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.field-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 16px;
}
.start-bar {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--rule-strong); margin-top: 36px; padding-top: 24px;
}

/* ---------- microfone ---------- */

.mic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0;
}
.mic .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.mic.on .dot { background: var(--nil); animation: pulse 1.4s ease-in-out infinite; }
.mic.on { color: var(--ink); }
.mic.bad { color: var(--nil); }
.mic.bad .dot { background: var(--nil); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.mic-help {
  color: var(--graphite);
  font-size: 13px;
  max-width: 44ch;
  margin: 8px 0 0;
}

/* ---------- round ---------- */

.round-grid { display: grid; grid-template-columns: 1fr; gap: 36px; padding-block: 26px 0; }
@media (min-width: 900px) {
  .round-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 48px; align-items: start; }
}

.stage { display: flex; flex-direction: column; align-items: center; text-align: center; }

.prompt-cat {
  font-family: var(--f-mono);
  font-size: clamp(14px, 2.6vw, 17px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: 0;
  max-width: 42ch;
  text-wrap: balance;
}
.prompt-sub { margin-top: 6px; }

.glyph {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(110px, 19vw, 200px);
  line-height: 0.84;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
}
.glyph.rolling { color: var(--faint); }

.clock {
  font-family: var(--f-mono);
  font-size: clamp(26px, 5vw, 34px);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  margin: 6px 0 0;
}
.clock.urgent { color: var(--nil); }

.turn {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(26px, 5vw, 36px);
  line-height: 1.1;
  color: var(--accent);
  margin: 18px 0 0;
  overflow-wrap: anywhere;
}

.heard {
  min-height: 30px;
  margin: 10px 0 0;
  font-size: 18px;
  color: var(--graphite);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.heard .w { font-family: var(--f-display); font-size: 24px; color: var(--ink); }
.heard.bad .w { color: var(--nil); text-decoration: line-through; }
.heard .tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.heard.bad .tag { color: var(--nil); }
.heard.ok .tag { color: var(--ok); }

.stage .mic { margin-top: 18px; }

.controls { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.btn-pass {
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  padding: 14px 30px;
  cursor: pointer;
  max-width: 100%;
  transition: background 120ms ease, color 120ms ease;
}
.btn-pass:hover { background: var(--ink); color: var(--paper); }
.btn-pass:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.typed { display: flex; gap: 0; margin-top: 14px; width: 100%; max-width: 380px; border-bottom: 1px solid var(--rule-strong); }
.typed input {
  flex: 1; min-width: 0; font-family: var(--f-ui); font-size: 17px; color: var(--accent);
  background: transparent; border: 0; padding: 10px 0;
}
.typed input::placeholder { color: var(--faint); }
.typed input:focus { outline: 0; }
.typed:focus-within { border-bottom-color: var(--accent); }
.typed button { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); background: transparent; border: 0; cursor: pointer; padding: 0 4px; }
.typed button:hover { color: var(--ink); }

.hint { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--faint); margin: 12px 0 0; text-align: center; }

/* ---------- folha de palavras ---------- */

.folha-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; }
.folha-head .count { font-family: var(--f-mono); font-size: 12px; color: var(--graphite); font-variant-numeric: tabular-nums; }

.folha-wrap { border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
table.folha { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.folha th, table.folha td { border-right: 1px solid var(--rule); vertical-align: top; }
table.folha th:last-child, table.folha td:last-child { border-right: 0; }
table.folha thead th {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule-strong);
  overflow-wrap: anywhere;
}
table.folha tbody tr { border-bottom: 1px solid var(--rule); }
table.folha tbody tr:last-child { border-bottom: 0; }
table.folha td { padding: 9px 12px; font-size: 16px; }
table.folha td .w { overflow-wrap: anywhere; }
table.folha td.bad { background: var(--nil-soft); }
table.folha td.bad .w { color: var(--nil); text-decoration: line-through; }
table.folha td.manual .w { color: var(--graphite); font-style: italic; }
table.folha td .tag {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nil);
  margin-top: 2px;
}
table.folha td.manual .tag { color: var(--faint); }
table.folha td.fresh { animation: rise 260ms ease both; }
.folha-empty { padding: 18px 12px; color: var(--faint); font-size: 13.5px; }

.race-progress { margin-bottom: 26px; }
.race-progress-head { display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px; }
.race-progress-head .note { font-size:12px;text-align:right; }
.race-progress-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--rule-strong); }
.race-score { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-bottom:1px solid var(--rule); }
.race-score.mine { background:var(--accent-soft); }
.race-score-who { display:flex;align-items:center;gap:8px;min-width:0; }
.race-score-who span:last-child { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.race-score strong { font:500 25px/1 var(--f-mono);color:var(--accent);font-variant-numeric:tabular-nums; }

/* ---------- fim de rodada ---------- */

.bust-head { padding-block: 36px 0; }
.bust-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(34px, 6.4vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 8px 0 0;
  text-wrap: balance;
}
.round-results { margin-top:24px;border-top:1px solid var(--rule-strong);max-width:760px; }
.round-result { display:grid;grid-template-columns:34px minmax(120px,1fr) 110px 160px;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--rule); }
.round-result .rank { font:12px var(--f-mono);color:var(--faint); }
.round-result strong { font-weight:500;overflow-wrap:anywhere; }
.round-result span:nth-last-child(-n+2) { color:var(--graphite);font-size:13px;text-align:right; }
.round-result.winner strong,.round-result.winner .rank { color:var(--accent); }
@media(max-width:600px){.round-result{grid-template-columns:28px minmax(0,1fr) auto}.round-result span:last-child{grid-column:2 / -1;text-align:left}}
.examples {
  background: var(--surface); border-radius: 2px; padding: 22px 24px; margin-top: 30px;
  display: flex; flex-direction: column; gap: 14px;
}
.example-words { display: flex; flex-wrap: wrap; gap: 10px 40px; }
.example-words span {
  font-family: var(--f-display); font-weight: 500; font-size: clamp(24px, 4.6vw, 36px); line-height: 1.1; overflow-wrap: anywhere;
}
.fix-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 24px; }
.actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 28px; }
.block { padding-top: 40px; }
.block > .eyebrow { padding-bottom: 10px; }

/* ---------- placar ---------- */

.board { border-top: 1px solid var(--rule-strong); }
.board-head, .stand-row {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 84px 84px;
  align-items: baseline; gap: 12px; border-bottom: 1px solid var(--rule); padding: 13px 0;
}
.race-board { overflow-x:auto; }
.board-head.race, .stand-row.race { grid-template-columns:38px minmax(140px,1fr) 78px 88px 96px;min-width:560px; }
.board-head {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint); padding-block: 10px;
}
.board-head .num, .stand-row .num { text-align: right; }
.stand-row .rank { font-family: var(--f-display); font-weight: 500; font-size: 26px; line-height: 1; color: var(--faint); }
.stand-row.lead .rank { color: var(--accent); }
.stand-row .who { font-size: 17px; overflow-wrap: anywhere; }
.stand-row.lead .who { font-weight: 500; }
.stand-row.blamed .who { color: var(--nil); }
.stand-row .num { font-family: var(--f-mono); font-size: 17px; font-variant-numeric: tabular-nums; }
.stand-row .num.soft { color: var(--graphite); font-size: 15px; }
@media (max-width: 520px) {
  .board-head, .stand-row { grid-template-columns: 28px minmax(0, 1fr) 62px 62px; gap: 8px; }
  .board-head.race, .stand-row.race { grid-template-columns:28px minmax(130px,1fr) 68px 78px 88px;gap:8px; }
}

.final-head { padding-block: 44px 18px; }
.repeat-alert{width:100%;border:2px solid #cc343c;background:#fff0f1;color:#a41424;padding:16px 20px;margin:16px 0;border-radius:4px;text-align:left}.repeat-alert strong{display:block;font:600 clamp(25px,4vw,36px)/1.15 var(--f-ui)}.repeat-alert p{margin:8px 0 0;font-size:16px;line-height:1.5;overflow-wrap:anywhere}.voice-review{width:100%;border:1px solid var(--rule-strong);background:var(--surface);padding:16px;margin:14px 0;text-align:left}.voice-review>p:first-child{font-size:16px;line-height:1.5;overflow-wrap:anywhere;margin:0}.voice-suggestions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.voice-suggestions .btn{white-space:normal;max-width:100%;text-align:left}#finishVoiceBtn{margin-top:12px}.voice-review .note{margin-top:8px}
@media(prefers-color-scheme:dark){.repeat-alert{background:#3a1119;border-color:#ff6370;color:#ff9fa8}}
.category-presets{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.category-presets .btn{font-size:14px;padding:10px 12px}.category-presets .btn[aria-pressed="true"]{background:var(--accent);color:var(--paper);border-color:var(--accent)}.category-tip{line-height:1.6;margin:14px 0 20px}.cats{display:flex;flex-direction:column;gap:22px}.category-group{padding:0;margin:0;border:0;min-width:0}.category-group legend{font:500 20px/1.3 var(--f-display);margin-bottom:6px;color:var(--ink)}.category-group>.note{margin:0 0 12px}.category-choices{display:flex;flex-wrap:wrap;gap:8px}.category-choices .cat{min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left}.prompt-description{max-width:45ch;line-height:1.5;margin:10px 0 16px!important}.prompt-cat{overflow-wrap:anywhere}
.invite-panel{padding:20px;background:var(--accent-soft);border:1px solid var(--rule);display:flex;flex-direction:column;gap:12px}.invite-panel p{margin:0;line-height:1.5}.invite-panel a.btn{text-decoration:none;display:inline-flex;align-items:center}.invite-steps{padding:0 0 0 22px;margin:0 0 12px;line-height:1.7;color:var(--graphite);font-size:16px}.invite-steps strong{color:var(--ink);font-weight:500}#inviteStatus:empty{display:none}#audioLevel{display:block;width:100%;height:28px;margin:8px 0 14px;accent-color:var(--accent)}#checkMicBtn{margin-top:14px}.audio-dialog p{margin:12px 0}.audio-dialog .profile-form-actions{gap:10px}.audio-dialog .btn{white-space:normal}#localPreviewHelp p{margin:10px 0 14px}#localPreviewHelp a{text-decoration:none;display:inline-flex;align-items:center}
@media(max-width:600px){.invite-panel{padding:16px}.join-row{flex-wrap:wrap}.join-row input{flex-basis:100%}.join-row button{width:100%}.audio-dialog .profile-form-actions .btn{width:100%}.invite-panel .room-link .btn{flex-basis:calc(50% - 10px);justify-content:center}}
.final-title { font-family: var(--f-display); font-weight: 500; font-size: clamp(38px, 7vw, 64px); line-height: 1.02; margin: 6px 0 0; text-wrap: balance; }

.reveal { animation: rise 300ms ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{margin:0;font-size:16px} .eyebrow,.mic,.hint,.heard .tag,table.folha thead th,table.folha td .tag{font-size:12px} .note,.mic-help,.cat,.folha-empty{font-size:14px} .glyph{line-height:1.02} .sheet{padding-inline:clamp(16px,4vw,32px)} .seg button{padding:10px 13px;min-height:44px} .btn{min-height:44px}
.mode-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:28px}
.mode-row .seg button{font-family:var(--f-ui);font-size:15px;padding-inline:20px}
.online-setup{display:flex;flex-direction:column;align-items:stretch;gap:14px}
.line-input{width:100%;font:inherit;background:transparent;color:var(--accent);border:0;border-bottom:1px solid var(--rule-strong);padding:10px 0;min-width:0;border-radius:0}
.line-input:focus{outline:2px solid var(--accent);outline-offset:3px}
.join-room{border-top:1px solid var(--rule);padding-top:24px;margin-top:8px}.join-row{display:flex;gap:16px;padding-top:10px}.join-row input{font-family:var(--f-mono);letter-spacing:.1em}
.room-panel{padding:24px 0 20px;border-bottom:1px solid var(--rule-strong);display:flex;flex-direction:column;gap:18px}.room-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.room-code{font-family:var(--f-mono);font-size:clamp(24px,5vw,32px);letter-spacing:.15em;font-weight:500;color:var(--accent)}
.room-link{display:flex;gap:10px;max-width:700px}.room-link input{font:14px var(--f-mono);flex:1;min-width:0;background:var(--surface);border:1px solid var(--rule);padding:10px;color:var(--graphite)}.room-link button{flex-shrink:0}
.room-capacity{display:block;margin-top:6px;color:var(--graphite);font:13px var(--f-mono);letter-spacing:.04em}.room-players{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}.room-player{border-top:1px solid var(--rule);padding-top:12px;display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}.room-player strong{font-weight:500;font-size:18px}.room-player span{color:var(--graphite);font-size:14px}.room-actions{display:flex;gap:12px;flex-wrap:wrap}
.notice{background:var(--accent-soft);color:var(--accent);padding:14px 18px;border-left:3px solid var(--accent);margin-top:16px;font-size:15px}.notice.error{color:var(--nil);background:var(--nil-soft);border-color:var(--nil)}
.pause-state{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);padding:12px 20px;margin-top:16px;font-size:16px}.stage .note{margin-top:8px}.voice-bar{border-top:1px solid var(--rule);padding-top:20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}.voice-details{width:100%;color:var(--graphite);font-size:14px}.voice-details summary{cursor:pointer}.voice-details p{max-width:80ch}
.btn-pass{padding:12px 18px;font-size:13px;letter-spacing:.06em}.btn:disabled,.btn-pass:disabled{opacity:.45;cursor:not-allowed}.typed input:disabled{opacity:.6}
@media(max-width:600px){.setup{gap:28px;padding-top:24px}.mode-row{gap:12px}.mode-row .seg{width:100%}.mode-row .seg button{flex:1;font-size:14px;padding:12px 8px}.room-top .btn{padding-inline:0}.room-link{flex-wrap:wrap}.room-link input{flex-basis:100%}.room-players{gap:12px}.round-grid{padding-top:22px}.controls .btn-primary{flex-basis:100%}.glyph{font-size:120px;line-height:1.05}.clock{font-size:30px}.voice-bar{margin-inline:16px;padding-inline:0}.sheet{padding-bottom:28px}.board-head{font-size:12px;letter-spacing:0}.folha-wrap{overflow-x:auto}table.folha:has(th:nth-child(4)){min-width:560px}table.folha:has(th:nth-child(5)){min-width:720px}}
.masthead-tools{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.profile-nav{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--ink);font:14px var(--f-ui);cursor:pointer;min-height:44px;max-width:240px;text-align:left}.profile-nav:focus-visible{outline:2px solid var(--accent)}.profile-nav>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:54px;height:54px;border-radius:50%;overflow:hidden;background:var(--accent-soft);border:1px solid var(--rule-strong);color:var(--accent);font:500 18px var(--f-ui);vertical-align:middle}.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.avatar-small{width:34px;height:34px;font-size:12px}.profile-intro{border:1px solid var(--rule);padding:18px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}.profile-summary{display:flex;align-items:center;gap:14px;background:var(--accent-soft);padding:16px}.profile-summary>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}.profile-summary strong{font-weight:500;font-size:18px}
.recent-rooms{display:flex;flex-direction:column;gap:8px}.recent-room{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--rule);padding:12px 0;color:var(--ink);cursor:pointer;font:14px var(--f-ui)}.recent-room strong{font:14px var(--f-mono);letter-spacing:.08em;color:var(--accent)}.recent-room span:nth-child(2){flex:1;color:var(--graphite);overflow-wrap:anywhere}.recent-room span:last-child{color:var(--accent)}
.room-player{flex-direction:row;align-items:center;gap:12px}.room-player>div{display:flex;flex-direction:column;gap:4px;min-width:0}.room-player>span.avatar{font-size:18px;color:var(--accent)}.stand-row .who{display:flex;align-items:center;gap:10px}.turn-display{display:flex;align-items:center;gap:12px;margin-top:18px}.turn-display .turn{margin:0}.room-link{max-width:none;flex-wrap:wrap}
.profile-dialog{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:28px;border:1px solid var(--rule-strong);background:var(--paper);color:var(--ink);box-shadow:0 28px 100px #0005;overflow:auto;border-radius:4px;font-size:16px}.profile-dialog::backdrop{background:rgba(0,0,0,.62)}.profile-dialog-head{display:flex;justify-content:space-between;gap:16px;align-items:center}.profile-dialog h2{font:500 38px/1.12 var(--f-display);margin:6px 0 16px}.profile-dialog h3{font:500 24px/1.2 var(--f-display);margin:16px 0}.profile-dialog p{line-height:1.5}.profile-signin{display:inline-block;text-decoration:none;margin:8px 0 20px}.photo-editor{display:flex;align-items:center;gap:20px;margin:12px 0 24px}.photo-editor>div:last-child{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px}.photo-preview .avatar{width:112px;height:112px;font-size:32px}.photo-preview .avatar img{width:100%;height:100%}.profile-privacy{margin-top:12px}.profile-form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.profile-message{margin:0 0 12px;color:var(--accent);font-size:14px}.profile-message:empty{display:none}.profile-message.error{color:var(--nil)}.profile-signout{display:inline-block;color:var(--graphite);font-size:14px;margin-top:22px}.profile-dialog #profileRetry{font-size:14px;margin-top:8px;padding-left:0}.line-input[readonly]{color:var(--graphite)}
@media(max-width:600px){.masthead{align-items:center}.masthead-tools{gap:8px}.masthead-meta{display:none}.profile-nav{max-width:190px}.profile-dialog{padding:20px}.photo-editor{gap:14px;align-items:flex-start}.photo-preview .avatar{width:88px;height:88px}.photo-editor .btn{padding:8px 12px}.room-player{align-items:flex-start;gap:10px}.room-player .avatar{width:42px;height:42px}.room-player strong{font-size:16px}.room-player>div>span{font-size:13px}.profile-summary{padding:12px}.profile-summary .btn{padding:8px}.room-link .btn{flex:1}.stand-row .who{gap:6px}.stand-row .who .avatar{width:28px;height:28px}.turn-display{max-width:100%}.turn-display .turn{font-size:28px}}

/* No inline style attributes: compatible with the page CSP. */
#trackFill { transform: scaleX(0); }
#bustCount { padding-top: 12px; }