*{ box-sizing:border-box; }
html{
  min-height:100%;
  background:var(--bg);
}
body{
  margin:0; padding:0; min-height:100vh;
  position:relative; isolation:isolate;
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 18% 12%, var(--glow-a), transparent 38%),
    radial-gradient(circle at 85% 82%, var(--glow-b), transparent 46%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color: var(--paper-text);
  font-family: var(--body);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
body::before,
body::after{
  content:"";
  position:fixed;
  inset:-8%;
  z-index:0;
  pointer-events:none;
  opacity:0;
  animation:none;
}

#app{
  min-height:100vh;
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 24px 16px 40px;
}

.screen{ width:100%; max-width:460px; display:none; }
.screen.active{ display:block; }

.eyebrow{
  font-family: var(--mono);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color: var(--gold);
  margin: 0 0 8px;
  text-align:center;
}
h1.title{
  font-family: var(--display);
  font-weight:700;
  font-size: clamp(34px, 8vw, 48px);
  line-height:1.02;
  text-align:center;
  margin: 0 0 6px;
  color: var(--paper-text);
  letter-spacing:-0.01em;
}
.subtitle{
  text-align:center;
  color: var(--paper-dim);
  font-size:14.5px;
  margin: 0 0 32px;
  line-height:1.5;
}

.card{
  background: var(--panel);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.55);
  border: 1px solid var(--surface-border);
}

label.field-label{
  display:block;
  font-family: var(--mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color: var(--paper-dim);
  margin-bottom:8px;
}
input#nameInput{
  width:100%;
  background: var(--bg);
  border: 1.5px solid var(--surface-border-strong);
  color: var(--paper-text);
  font-family: var(--display);
  font-size:22px;
  padding: 14px 52px 14px 16px;
  border-radius: 10px;
  outline:none;
  transition: border-color 0.15s ease;
}
input#nameInput:focus{ border-color: var(--gold); }
input#nameInput::placeholder{ color: var(--placeholder); font-family: var(--body); font-size:16px; }
.name-input-row{ position:relative; }
.name-help-btn{
  position:absolute; top:50%; right:9px; translate:0 -50%; z-index:1;
  width:30px; height:30px; display:grid; place-items:center; padding:0;
  border:1px solid var(--surface-border-strong); border-radius:50%;
  background:var(--glass); color:var(--paper-dim); cursor:pointer;
  font-family:var(--mono); font-size:14px; font-weight:700;
  transition:border-color .15s ease,color .15s ease,background .15s ease,transform .1s ease;
}
.name-help-btn:hover{ border-color:var(--gold); color:var(--gold); background:var(--panel-2); }
.name-help-btn:active{ transform:scale(.94); }
.name-help-btn:focus-visible{ outline:3px solid var(--gold-soft); outline-offset:2px; }

/* Nome público: o nickname mantém o tamanho atual e o localizador fica secundário. */
.player-name-scroll{
  display:inline-block; min-width:0; max-width:100%; overflow:hidden;
  white-space:nowrap; vertical-align:bottom;
}
.player-name-scroll-track{
  display:inline-flex; align-items:baseline; gap:.30em; min-width:max-content;
  white-space:nowrap; transform:translateX(0); will-change:transform;
}
.player-name-main{ font:inherit; color:inherit; }
.player-name-id{
  flex-shrink:0; font-family:var(--mono); font-size:.72em; font-weight:600;
  letter-spacing:.015em; color:color-mix(in srgb,currentColor 64%,transparent);
}
.player-name-scroll.is-overflowing .player-name-scroll-track{
  animation:palavriz-name-ticker var(--name-scroll-duration,7s) ease-in-out infinite;
}
@keyframes palavriz-name-ticker{
  0%,16%{ transform:translateX(0); }
  46%,68%{ transform:translateX(calc(-1 * var(--name-shift,0px))); }
  92%,100%{ transform:translateX(0); }
}
@media (prefers-reduced-motion: reduce){
  .player-name-scroll.is-overflowing{ overflow-x:auto; scrollbar-width:none; }
  .player-name-scroll.is-overflowing::-webkit-scrollbar{ display:none; }
  .player-name-scroll.is-overflowing .player-name-scroll-track{ animation:none; }
  .wallet-chip[data-state="loading"] .coin-dot{ animation:none; }
}

.btn{
  appearance:none; border:none; cursor:pointer;
  font-family: var(--body); font-weight:600; font-size:15.5px;
  padding: 15px 20px; border-radius: 10px;
  width:100%;
  transition: transform 0.1s ease, filter 0.15s ease;
}
.btn:active{ transform: scale(0.98); }
.btn-primary{ background: var(--gold); color: var(--button-ink); }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-primary:disabled{ opacity:0.4; cursor:not-allowed; }
.btn-ghost{
  background: transparent; color: var(--paper-dim);
  border: 1.5px solid var(--surface-border-strong);
  margin-top:10px;
}
.btn-ghost:hover{ color: var(--paper-text); border-color: var(--surface-border-hover); }

.rules-mini{
  margin-top:22px; padding-top:18px;
  border-top:1px dashed var(--surface-border-strong);
  font-size:13px; color: var(--paper-dim); line-height:1.7;
}
.rules-mini b{ color: var(--paper-text); }

/* ---------- Level & time selectors ---------- */
.level-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:10px;
  margin-bottom:20px;
}
.level-card{
  appearance:none; cursor:pointer; text-align:center;
  background: var(--bg); border: 1.5px solid var(--surface-border-soft);
  border-radius: 12px; padding: 13px 10px;
  min-height:82px;
  display:flex; flex-direction:column; justify-content:center;
  color: var(--paper-text); font-family: var(--body);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.level-card:hover{ border-color: var(--gold); }
.level-card.active{
  border-color: var(--gold);
  background: linear-gradient(160deg, var(--gold-soft), transparent);
}
.level-card .lc-size{
  font-family: var(--display); font-weight:700; font-size:24px; color: var(--paper-text);
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.level-card.active .lc-size{ color: var(--gold); }
.level-card .lc-tier{
  font-family: var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--paper-dim); margin-top:4px;
}
.level-card .lc-dot{
  width:7px; height:7px; border-radius:50%; background: var(--sage); flex-shrink:0;
  opacity:0; transition: opacity 0.15s ease;
}
.level-card.active .lc-dot{ opacity:1; }

.time-row{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:8px;
}
.time-value{
  font-family: var(--mono); font-weight:700; color: var(--gold); font-size:15px;
}
.time-options{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px;
  margin:4px 0 20px;
}
.time-option{
  appearance:none; border:1.5px solid var(--surface-border-soft); cursor:pointer;
  background:var(--bg); color:var(--paper-text); border-radius:11px;
  min-height:48px; padding:9px 5px; font-family:var(--mono); font-size:13px; font-weight:700;
  transition:transform .12s ease, border-color .15s ease, background .15s ease;
}
.time-option:hover{ border-color:var(--gold); }
.time-option:active{ transform:scale(.97); }
.time-option.active{
  border-color:var(--gold); color:var(--gold);
  background:linear-gradient(160deg,var(--gold-soft),transparent);
  box-shadow:0 0 0 2px var(--gold-soft);
}
@media (max-width:390px){
  .time-options{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ---------- Leaderboard ---------- */
.leaderboard{ margin-top:18px; }
.lb-row{
  display:flex; align-items:center; gap:10px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--surface-border);
  font-size:14px;
}
.lb-rank{
  font-family: var(--mono); color: var(--gold); width:22px; flex-shrink:0;
}
.lb-name{ flex:1; min-width:0; color: var(--paper-text); font-weight:500;
  display:flex; align-items:baseline; gap:6px; white-space:nowrap; overflow:hidden; }
.lb-name .player-name-scroll{ flex:1; min-width:0; }
.lb-row[data-admin-target]{ cursor:pointer; }
.lb-row[data-admin-target]:hover .lb-name{ color:var(--gold); }
.lb-score{ font-family: var(--mono); color: var(--sage); font-weight:700; }
.lb-empty{ text-align:center; color: var(--paper-dim); font-size:13px; padding:14px 0; }

/* Resumo pessoal + Top 10: mantém o ranking compacto sem esconder a posição do jogador. */
.lb-self-summary{
  flex-wrap:wrap;
  margin:2px 0 8px;
  padding:10px 8px;
  border:1px solid var(--surface-border-strong);
  border-radius:11px;
  background:linear-gradient(160deg,var(--gold-soft),var(--glass));
}
.lb-self-summary .lb-name{ color:var(--gold); font-weight:800; }
.lb-self-summary .lb-score{ color:var(--paper-text); }
.lb-self-progress{
  flex:0 0 100%;
  padding-left:32px;
  margin-top:3px;
  font-family:var(--mono);
  font-size:9.8px;
  line-height:1.35;
  color:var(--paper-dim);
}
.lb-top-label{
  padding:3px 4px 5px;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--paper-dim);
}
.lb-row.is-self{
  margin:0 -4px;
  padding-left:8px;
  padding-right:8px;
  border-radius:8px;
  background:var(--gold-soft);
}
.lb-you-tag{
  display:inline-flex;
  margin-left:6px;
  padding:2px 5px;
  border-radius:999px;
  background:var(--gold-soft);
  color:var(--gold);
  font-family:var(--mono);
  font-size:8px;
  font-weight:700;
  vertical-align:middle;
}

.ranking-filters{ margin:10px 0 12px; display:grid; gap:8px; }
.ranking-tabs{ display:flex; gap:7px; overflow-x:auto; padding:2px 1px 5px; scrollbar-width:thin; }
.ranking-tab{
  appearance:none; flex:0 0 auto; border:1px solid var(--surface-border-soft); cursor:pointer;
  background:var(--bg); color:var(--paper-dim); border-radius:999px; padding:7px 11px;
  font-family:var(--mono); font-size:10.5px; font-weight:700; white-space:nowrap;
}
.ranking-tab.active{ background:var(--gold); color:var(--button-ink); border-color:transparent; }
.ranking-caption{ color:var(--paper-dim); font-family:var(--mono); font-size:10px; margin-bottom:-3px; }

.lobby-quick-actions{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start;
  gap:10px 16px; margin:0 0 14px;
}
.lobby-quick-column{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.lobby-quick-column-left{ align-items:flex-start; }
.lobby-quick-column-right{ align-items:flex-end; }
.lobby-action-buttons{ display:flex; align-items:center; gap:8px; min-width:0; }
.shop-open-btn,
.account-open-btn,
.help-open-btn{
  appearance:none; border:1px solid var(--surface-border-soft); cursor:pointer;
  background:var(--glass); color:var(--paper-text); border-radius:999px;
  min-height:36px; min-width:112px; padding:7px 14px; font-family:var(--body); font-weight:700; font-size:12px;
  letter-spacing:0.04em; transition:transform .1s ease, border-color .15s ease, background .15s ease;
}
.help-open-btn{ color:var(--gold); }
.shop-open-btn:hover,
.account-open-btn:hover,
.help-open-btn:hover{ border-color:var(--gold); background:var(--panel-2); }
.shop-open-btn:active,
.account-open-btn:active,
.help-open-btn:active{ transform:scale(.97); }
.shop-open-btn:disabled,
.account-open-btn:disabled,
.help-open-btn:disabled{ cursor:not-allowed; opacity:.5; }
.wallet-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--glass); border:1px solid var(--surface-border-soft);
  border-radius:999px; padding:7px 12px;
  font-family:var(--mono); font-size:11px; color:var(--paper-dim);
}
.wallet-chip b{ color:var(--gold); font-size:14px; }
.wallet-chip[data-state="loading"]{ opacity:.72; }
.wallet-chip[data-state="loading"] .coin-dot{
  animation:wallet-sync-pulse 1.1s ease-in-out infinite alternate;
}
.wallet-chip[data-state="cached"]{ border-color:color-mix(in srgb,var(--gold) 36%,var(--surface-border-soft)); }
@keyframes wallet-sync-pulse{ from{ opacity:.35; transform:scale(.82); } to{ opacity:1; transform:scale(1); } }
.coin-dot{ width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.coin-reward{
  min-height:20px; margin:-8px 0 16px; text-align:center;
  font-family:var(--mono); font-size:12px; color:var(--gold);
}
.game-coins{ display:block; margin-top:4px; color:var(--gold); font-size:10px; }

/* ---------- Catálogo de temas ---------- */
.shop-overlay{
  position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center;
  padding:18px; background:rgba(7,13,22,.72); backdrop-filter:blur(7px);
}
.shop-overlay.active{ display:flex; }
.shop-modal{
  width:min(100%, 800px); max-height:min(92vh, 800px); overflow-y:auto;
  background:var(--panel); color:var(--paper-text); border:1px solid var(--surface-border-soft);
  border-radius:22px; padding:20px; box-shadow:0 28px 80px -24px rgba(0,0,0,.72);
  scrollbar-gutter:stable;
}
.shop-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.shop-title{ margin:0; font-family:var(--display); font-size:29px; line-height:1; }
.shop-subtitle{ margin:6px 0 0; color:var(--paper-dim); font-size:12.5px; line-height:1.45; }
.shop-close{
  appearance:none; border:1px solid var(--surface-border-soft); background:var(--bg); color:var(--paper-text);
  width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:22px; line-height:1; flex-shrink:0;
}
.shop-summary{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:12px; }
.shop-summary-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--bg); border:1px solid var(--surface-border-soft); border-radius:12px;
  min-height:46px; padding:10px 12px; color:var(--paper-dim); font-family:var(--mono); font-size:11px;
}
.shop-summary-item strong{ color:var(--gold); font-size:13px; }
.shop-filters{
  display:flex; gap:7px; overflow-x:auto; margin:0 0 14px; padding:1px 1px 5px;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.shop-filter{
  appearance:none; flex:0 0 auto; min-height:40px; padding:8px 13px; cursor:pointer;
  border:1px solid var(--surface-border-soft); border-radius:999px; background:var(--bg); color:var(--paper-dim);
  font-family:var(--body); font-size:12px; font-weight:700; white-space:nowrap;
}
.shop-filter:hover{ border-color:var(--surface-border-hover); color:var(--paper-text); }
.shop-filter.active{ background:var(--gold); border-color:transparent; color:var(--button-ink); }
.shop-theme-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:stretch; }
.shop-theme-card{
  background:var(--bg); border:1.5px solid var(--surface-border-soft); border-radius:15px;
  padding:13px; min-width:0; min-height:150px; display:flex; flex-direction:column;
  transition:border-color .15s ease, transform .15s ease;
}
.shop-theme-card:hover{ border-color:var(--surface-border-hover); }
.shop-theme-card.active{ border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-soft); }
.shop-theme-card.previewing{ border-color:var(--sage); box-shadow:0 0 0 2px color-mix(in srgb, var(--sage) 22%, transparent); }
.shop-theme-top{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:10px; }
.shop-theme-heading{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.shop-theme-name{ font-weight:800; font-size:15px; line-height:1.25; }
.shop-theme-status{
  display:inline-flex; align-items:center; min-height:22px; padding:3px 7px; border-radius:999px;
  background:var(--panel-2); color:var(--paper-dim); font-family:var(--mono); font-size:9px; font-weight:700;
}
.shop-theme-status.active{ background:var(--gold); color:var(--button-ink); }
.shop-theme-note{ color:var(--paper-dim); font-size:11.5px; line-height:1.35; margin-top:4px; }
.theme-swatches{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; flex-shrink:0; }
.theme-swatch{ width:24px; height:24px; border-radius:8px; border:1px solid rgba(255,255,255,.28); box-shadow:0 2px 5px rgba(0,0,0,.18); }
.shop-theme-actions{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:7px; margin-top:auto; padding-top:11px;
}
.shop-theme-action,
.shop-theme-preview{
  appearance:none; width:100%; min-height:42px; padding:10px 9px; border-radius:10px;
  border:1px solid var(--surface-border-strong); background:var(--panel-2); color:var(--paper-text);
  font-family:var(--body); font-size:12px; font-weight:700; cursor:pointer;
}
.shop-theme-preview{ background:transparent; }
.shop-theme-preview:hover{ border-color:var(--sage); }
.shop-theme-preview.previewing{ color:var(--sage); border-color:var(--sage); }
.shop-theme-action.buy{ background:var(--gold); color:var(--button-ink); border-color:transparent; }
.shop-theme-action:disabled,
.shop-theme-preview:disabled{ opacity:.62; cursor:default; }
.shop-message{ min-height:18px; margin:12px 2px 0; text-align:center; color:var(--paper-dim); font-size:12px; }
.shop-message.ok{ color:var(--sage); }
.shop-message.bad{ color:var(--rust); }
.shop-empty{
  grid-column:1/-1; margin:18px 0; padding:24px; border:1px dashed var(--surface-border-strong);
  border-radius:14px; text-align:center; color:var(--paper-dim); font-size:13px;
}
@media (max-width:620px){
  .shop-overlay{ padding:10px; }
  .shop-modal{ padding:14px; border-radius:18px; }
  .shop-summary{ grid-template-columns:1fr; gap:7px; }
  .shop-theme-grid{ grid-template-columns:1fr; }
  .shop-theme-grid{ gap:8px; }
  .shop-theme-card{ padding:10px; border-radius:13px; }
  .theme-swatch{ width:22px; height:22px; }
  .shop-theme-name{ font-size:15px; }
  .shop-theme-note{ font-size:11.5px; }
  .shop-theme-action,.shop-theme-preview{ font-size:12px; }
}

/* Aviso exibido fora de Temas enquanto uma aparência está em prévia. */
.theme-preview-banner{
  position:fixed; left:50%; top:14px; z-index:95; width:min(calc(100% - 24px),680px);
  transform:translate(-50%,-18px); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:12px; padding:11px 12px 11px 15px;
  border-radius:15px; background:color-mix(in srgb,var(--panel) 92%,transparent);
  border:1px solid var(--surface-border-strong); box-shadow:0 16px 42px -20px rgba(0,0,0,.7);
  backdrop-filter:blur(12px); transition:opacity .2s ease,transform .2s ease;
}
.theme-preview-banner.active{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.theme-preview-copy{ min-width:0; flex:1; }
.theme-preview-title{ font-family:var(--body); font-weight:800; font-size:12.5px; color:var(--paper-text); }
.theme-preview-text{ margin-top:2px; font-family:var(--body); font-size:10.8px; line-height:1.35; color:var(--paper-dim); }
.theme-preview-actions{ display:flex; gap:7px; flex-shrink:0; }
.theme-preview-action{
  appearance:none; border:1px solid var(--surface-border-strong); border-radius:9px; cursor:pointer;
  padding:8px 10px; background:var(--bg); color:var(--paper-text); font-family:var(--body); font-size:10.5px; font-weight:800;
}
.theme-preview-action.primary{ border-color:transparent; background:var(--gold); color:var(--button-ink); }
@media (max-width:560px){
  .theme-preview-banner{ top:8px; align-items:stretch; flex-direction:column; gap:8px; }
  .theme-preview-actions{ display:grid; grid-template-columns:1fr 1fr; }
}


/* ---------- Editor da próxima partida da sala ---------- */
.room-edit-overlay{
  position:fixed; inset:0; z-index:85; display:none; align-items:center; justify-content:center;
  padding:18px; background:rgba(7,13,22,.72); backdrop-filter:blur(7px);
}
.room-edit-overlay.active{ display:flex; }
.room-edit-modal{
  width:min(100%,430px); max-height:88vh; overflow-y:auto; background:var(--panel);
  border:1px solid var(--surface-border-soft); border-radius:22px; padding:20px;
  box-shadow:0 28px 80px -24px rgba(0,0,0,.72);
}
.room-edit-title{ margin:0; font-family:var(--display); font-size:28px; }
.room-edit-subtitle{ margin:6px 0 18px; color:var(--paper-dim); font-size:12.5px; line-height:1.45; }
.edit-level-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:18px; }
.edit-level-grid .level-card{ min-height:72px; }
.room-edit-actions{ display:grid; gap:9px; margin-top:18px; }

/* ---------- Tutorial de 6 segundos antes da partida ---------- */
#countdownOverlay{
  position:fixed; inset:0; background:var(--overlay);
  display:none; align-items:center; justify-content:center;
  z-index:50; padding:18px;
}
#countdownOverlay.active{ display:flex; }
.countdown-tutorial{
  width:min(100%,520px); display:grid; grid-template-columns:94px minmax(0,1fr);
  gap:18px; align-items:center;
}
.cd-side{ text-align:center; }
.cd-number{
  font-family:var(--display); font-weight:700; font-size:96px; line-height:.9;
  color:var(--gold); animation:pop .5s ease;
}
.cd-label{
  font-family:var(--mono); color:var(--paper-dim); letter-spacing:.14em;
  text-transform:uppercase; font-size:10px; margin-top:9px;
}
.tutorial-card{
  background:var(--panel); border:1px solid var(--surface-border-soft); border-radius:20px;
  padding:17px; box-shadow:0 24px 60px -28px rgba(0,0,0,.72);
}
.tutorial-kicker{
  text-align:center; font-family:var(--mono); color:var(--gold); font-size:10px;
  letter-spacing:.15em; text-transform:uppercase; margin-bottom:10px;
}
.tutorial-board{
  width:min(100%,300px); margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); gap:6px;
  position:relative;
}
.tutorial-path-svg{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; overflow:visible;
}
.tutorial-path-svg path{
  fill:none; stroke:var(--gold); stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 4px var(--gold-soft)); opacity:.88;
}
.tutorial-hand{
  position:absolute; left:0; top:0; z-index:7;
  width:clamp(46px,9vw,54px); height:clamp(46px,9vw,54px);
  pointer-events:none; opacity:0;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.74)) drop-shadow(0 0 5px rgba(255,255,255,.28));
  transform:translate3d(-60px,-60px,0); transform-origin:37% 6.5%;
  transition-property:transform,opacity; transition-timing-function:linear,ease;
  transition-duration:.25s,.12s; will-change:transform;
}
.tutorial-hand::before,.tutorial-hand::after{
  content:""; position:absolute; inset:0; pointer-events:none;
}
.tutorial-hand::before{
  background:#fff4c2;
  -webkit-mask:url('../img/tutorial-hand.png') center/contain no-repeat;
  mask:url('../img/tutorial-hand.png') center/contain no-repeat;
}
.tutorial-hand::after{
  background:url('../img/tutorial-hand.png') center/contain no-repeat;
  filter:brightness(1.22) saturate(.78); opacity:1;
}
.tutorial-hand.visible{ opacity:1; }
.tutorial-tile{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:8px;
  background:linear-gradient(160deg,var(--tile),var(--tile-end)); color:var(--ink);
  font-family:var(--display); font-size:clamp(15px,4vw,22px); font-weight:700;
  box-shadow:0 2px 0 var(--tile-shadow),0 5px 12px rgba(0,0,0,.20);
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
  position:relative; z-index:2;
}
.tutorial-tile.active{
  transform:translateY(1px) scale(.94);
  background:linear-gradient(160deg,var(--selected-start),var(--gold));
  box-shadow:0 0 0 4px var(--gold-soft),0 1px 0 var(--tile-shadow);
}
.tutorial-tile.current{
  z-index:5; animation:tutorialCurrentPulse .46s ease;
}
.tutorial-tile.formed{
  animation:tutorialTileForm .42s cubic-bezier(.2,.82,.3,1) both;
  animation-delay:calc(var(--tutorial-order,0) * 28ms);
}
.tutorial-tile[data-order]::after{
  content:attr(data-order); position:absolute; right:3px; top:2px; width:14px; height:14px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--ink); color:var(--tile); font-family:var(--mono); font-size:7px; line-height:1;
}
@keyframes tutorialCurrentPulse{
  0%{ transform:scale(.92); }
  55%{ transform:scale(1.06); }
  100%{ transform:translateY(1px) scale(.94); }
}
@keyframes tutorialTileForm{
  0%,100%{ transform:translateY(1px) scale(.94); }
  48%{ transform:translateY(-6px) scale(1.04); }
}
.tutorial-caption{ margin-top:12px; text-align:center; color:var(--paper-dim); font-size:11.5px; }
.tutorial-caption strong{
  min-width:92px; display:inline-flex; justify-content:center;
  color:var(--paper-text); font-family:var(--display); font-size:20px; letter-spacing:.06em;
}
.tutorial-word-letter{ display:inline-block; }
.tutorial-caption strong.complete .tutorial-word-letter{
  animation:tutorialWordHop .42s cubic-bezier(.18,.78,.25,1) both;
  animation-delay:calc(var(--letter-order,0) * 35ms);
}
@keyframes tutorialWordHop{
  0%,100%{ transform:translateY(0) scale(1); }
  48%{ transform:translateY(-8px) scale(1.12); color:var(--gold); }
}
.tutorial-tip{ margin-top:5px; min-height:24px; text-align:center; color:var(--paper-dim); font-family:var(--mono); font-size:9px; line-height:1.35; }
@keyframes pop{
  0%{ transform:scale(.4); opacity:0; }
  60%{ transform:scale(1.12); opacity:1; }
  100%{ transform:scale(1); }
}
@media (max-width:480px){
  .countdown-tutorial{ grid-template-columns:1fr; gap:10px; }
  .cd-side{ display:flex; align-items:baseline; justify-content:center; gap:10px; }
  .cd-number{ font-size:56px; }
  .cd-label{ margin:0; }
  .tutorial-card{ padding:14px; }
}
@media (prefers-reduced-motion:reduce){
  .tutorial-hand{ transition:none; }
  .tutorial-tile.current,.tutorial-tile.formed,
  .tutorial-caption strong.complete .tutorial-word-letter{ animation:none; }
}


/* ---------- Game screen ---------- */
#gameScreen.screen{ max-width: 480px; }
.game-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.player-chip{
  font-family: var(--mono); font-size:12.5px; color: var(--paper-dim);
}
.player-chip b{ color: var(--paper-text); display:inline-block; max-width:min(48vw,220px); vertical-align:bottom; overflow:hidden; }
.player-chip b .player-name-scroll{ width:100%; max-width:100%; }
.timer-wrap{ text-align:center; }
.timer-number{
  font-family: var(--display); font-weight:700; font-size:34px;
  color: var(--gold); line-height:1; transition: color 0.2s ease;
}
.timer-number.low{ color: var(--rust); animation: pulse 0.6s infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08);} }
.timer-label{ font-family: var(--mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color: var(--paper-dim); }
.stat-chip{ text-align:right; font-family: var(--mono); font-size:13px; color: var(--paper-dim); }
.stat-chip b{ color: var(--sage); font-size:16px; display:block; }

.board-wrap{
  width:100%; margin-inline:auto;
  background: var(--panel);
  border-radius: 20px;
  padding: 16px;
  position:relative;
  box-shadow: 0 20px 50px -22px rgba(0,0,0,0.6);
  border: 1px solid var(--surface-border);
}
.board-wrap{
  touch-action:none;
  overscroll-behavior:contain;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
#board{
  display:grid;
  gap: 13px;
  position:relative;
  touch-action:none;
  overscroll-behavior:contain;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.tile{
  aspect-ratio: 1;
  background: linear-gradient(160deg, var(--tile) 0%, var(--tile-end) 100%);
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--display); font-weight:700;
  font-size: clamp(22px, 6.4vw, 30px);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--tile-shadow), 0 6px 14px rgba(0,0,0,0.28);
  position:relative;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
  cursor:pointer;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
/* tamanhos de tabuleiro maiores precisam de letras/gaps/raio menores pra caber na tela */
#board[data-size="5"]{ gap:10px; }
#board[data-size="5"] .tile{ font-size: clamp(17px, 5.4vw, 26px); border-radius:11px; }
#board[data-size="6"]{ gap:8px; }
#board[data-size="6"] .tile{ font-size: clamp(14px, 4.4vw, 21px); border-radius:9px; }
#board[data-size="8"]{ gap:5px; }
#board[data-size="8"] .tile{ font-size: clamp(10px, 3.1vw, 16px); border-radius:6px; box-shadow: 0 2px 0 var(--tile-shadow), 0 3px 8px rgba(0,0,0,0.25); }
.board-wrap[data-size="6"]{ padding:12px; }
.board-wrap[data-size="8"]{ padding:9px; }
.board-wrap[data-size="8"] #pathSvg{ inset:9px; }
.board-wrap[data-size="6"] #pathSvg{ inset:12px; }
.tile.selected{
  background: linear-gradient(160deg, var(--selected-start) 0%, var(--gold) 120%);
  transform: translateY(2px) scale(0.96);
  box-shadow: 0 1px 0 var(--tile-shadow), 0 3px 8px rgba(0,0,0,0.3);
}
.tile.flash-ok{ background: linear-gradient(160deg, var(--success-start), var(--sage)); }
.tile.flash-repeat{ background: linear-gradient(160deg, var(--repeat-start), var(--gold)); }
.tile.flash-bad{ background: linear-gradient(160deg, var(--danger-start), var(--rust)); }

#pathSvg{ position:absolute; inset:16px; pointer-events:none; z-index:2; }
#pathSvg path{ fill:none; stroke: var(--gold); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; opacity:0.85; }
.board-wrap[data-size="6"] #pathSvg path{ stroke-width:3.5; }
.board-wrap[data-size="8"] #pathSvg path{ stroke-width:2.5; }

.current-word-bar{
  margin-top:14px; min-height:34px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--display); font-weight:600; font-size:22px;
  letter-spacing:0.04em; color: var(--paper-text);
}
.feedback-msg{
  text-align:center; font-family: var(--mono); font-size:12.5px;
  min-height:18px; margin-top:2px; transition:opacity 0.2s ease;
}
.feedback-msg.ok{ color: var(--sage); }
.feedback-msg.repeat{ color: var(--gold); }
.feedback-msg.bad{ color: var(--rust); }

/* ---------- Placar compacto durante a partida ---------- */
.live-scoreboard{
  height:78px; min-height:78px; margin:0 0 14px; overflow:hidden;
  background:var(--panel); border:1px solid var(--surface-border);
  border-radius:16px; padding:10px 11px 11px;
  box-shadow:0 14px 34px -28px rgba(0,0,0,.68);
}
.live-scoreboard-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 2px 7px; color:var(--paper-dim); font-family:var(--mono);
  font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
}
.live-scoreboard-list{
  display:flex; align-items:stretch; gap:7px; overflow-x:auto; overflow-y:hidden;
  min-width:0; padding-bottom:3px; scrollbar-width:none; scroll-snap-type:x proximity;
}
.live-scoreboard-list::-webkit-scrollbar{ display:none; }
.live-score-player{
  flex:1 0 102px; min-width:102px; max-width:156px; height:42px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 10px; border-radius:11px; background:var(--bg);
  border:1px solid var(--surface-border-soft); scroll-snap-align:start;
}
.live-score-player.is-self{
  border-color:var(--sage); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sage) 22%,transparent);
}
.live-score-player-name{
  min-width:0; flex:1; overflow:hidden; white-space:nowrap;
  color:var(--paper-text); font-size:11.5px; font-weight:700;
}
.live-score-player-name .player-name-scroll{ width:100%; max-width:100%; }
.live-score-player-points{
  flex-shrink:0; color:var(--gold); font-family:var(--mono); font-size:12px; font-weight:700;
}
.live-score-player-points small{ color:var(--paper-dim); font-size:8px; font-weight:600; }
@media (max-width:390px){
  .live-scoreboard{ height:74px; min-height:74px; padding:9px; }
  .live-score-player{ min-width:96px; height:40px; padding:6px 8px; }
  .live-score-player-name{ font-size:10.5px; }
}

/* ---------- Dica comprável durante a partida ---------- */
.game-tools{
  display:flex; align-items:center; gap:10px; margin:0 0 14px;
}
.game-tool-buttons{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.hint-btn{
  appearance:none; border:1.5px solid var(--gold); cursor:pointer;
  background:linear-gradient(145deg,var(--gold),color-mix(in srgb,var(--gold) 72%, white));
  color:var(--button-ink); border-radius:11px; padding:11px 15px;
  font-family:var(--body); font-size:13.5px; font-weight:700; flex-shrink:0;
  box-shadow:0 7px 18px -12px rgba(0,0,0,.5);
}
.leave-game-btn{
  appearance:none; border:1px solid var(--surface-border); cursor:pointer;
  background:var(--panel); color:var(--paper-dim); border-radius:11px;
  padding:11px 12px; font-family:var(--body); font-size:12.5px; font-weight:700;
}
.leave-game-btn:hover{ color:var(--paper-text); border-color:var(--rust); }
.leave-game-btn:disabled{ opacity:.55; cursor:wait; }
.hint-btn:disabled{ opacity:.58; cursor:not-allowed; filter:saturate(.65); }
.hint-status{ color:var(--paper-dim); font-family:var(--mono); font-size:10.5px; line-height:1.35; }
.tile.hint-step{
  z-index:5;
  animation:hintTilePulse .72s ease;
  outline:3px solid var(--gold);
  outline-offset:2px;
}
@keyframes hintTilePulse{
  0%{ transform:scale(1); filter:brightness(1); }
  42%{ transform:scale(1.12); filter:brightness(1.28); box-shadow:0 0 0 7px var(--gold-soft),0 4px 0 var(--tile-shadow),0 9px 22px rgba(0,0,0,.28); }
  100%{ transform:scale(1); filter:brightness(1); }
}
@media (max-width:390px){
  .game-tools{ align-items:stretch; flex-direction:column; gap:6px; }
  .game-tool-buttons{ display:grid; grid-template-columns:1fr 1fr; }
  .hint-btn,.leave-game-btn{ width:100%; padding-inline:8px; }
  .hint-status{ text-align:center; }
}

/* ---------- Confirmação de saída da partida ---------- */
.leave-game-overlay,
.leave-room-solo-overlay{
  position:fixed; inset:0; z-index:1300; display:none; align-items:center; justify-content:center;
  padding:18px; background:rgba(5,10,20,.78); backdrop-filter:blur(7px);
}
.leave-game-overlay.active,
.leave-room-solo-overlay.active{ display:flex; }
.leave-game-modal{
  width:min(100%,440px); padding:21px; border-radius:21px;
  background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--panel-2) 62%,var(--panel)));
  border:1px solid var(--surface-border-strong); color:var(--paper-text);
  box-shadow:0 28px 80px -24px rgba(0,0,0,.78);
}
.leave-game-note{
  margin:17px 0 0; padding:12px 13px; border:1px solid var(--surface-border-soft);
  border-radius:12px; background:var(--bg); color:var(--paper-dim);
  font-size:11.5px; line-height:1.55;
}
.leave-game-message{
  min-height:0; margin:0; color:var(--rust); font-family:var(--mono);
  font-size:10px; line-height:1.45;
}
.leave-game-message:not(:empty){ min-height:18px; margin-top:12px; }
.leave-game-actions{ display:grid; grid-template-columns:1.18fr 1fr; gap:9px; margin-top:16px; }
.leave-game-confirm-btn{
  background:color-mix(in srgb,var(--rust) 82%,var(--panel)); color:var(--paper-text);
  border:1px solid color-mix(in srgb,var(--rust) 72%,var(--surface-border));
}
.leave-game-confirm-btn:hover{ filter:brightness(1.08); }
.leave-game-confirm-btn:disabled,
.leave-game-actions .btn:disabled,
.leave-game-modal .shop-close:disabled{ opacity:.55; cursor:wait; }
@media (max-width:440px){
  .leave-game-overlay,.leave-room-solo-overlay{ padding:10px; }
  .leave-game-modal{ padding:17px; border-radius:18px; }
  .leave-game-actions{ grid-template-columns:1fr; }
  .leave-game-confirm-btn{ order:2; }
}

/* ---------- Results screen ---------- */
#resultScreen{ position:relative; }
.room-result-timer{
  position:absolute; top:0; right:0; z-index:4; display:flex; align-items:baseline; gap:2px;
  min-width:48px; justify-content:center; padding:7px 10px; border-radius:999px;
  border:1px solid var(--surface-border-strong); background:color-mix(in srgb,var(--panel) 90%,transparent);
  color:var(--paper-text); box-shadow:0 8px 22px -14px rgba(0,0,0,.7);
  font-family:var(--mono); font-weight:800; line-height:1;
}
.room-result-timer[hidden]{ display:none; }
.room-result-timer span{ font-size:17px; }
.room-result-timer small{ color:var(--paper-dim); font-size:9px; font-weight:700; }
.room-result-timer.is-low{ border-color:var(--gold); }
@media (max-width:390px){
  .room-result-timer{ top:-2px; right:0; padding:6px 9px; min-width:44px; }
  .room-result-timer span{ font-size:15px; }
}
.result-score{
  text-align:center; margin: 4px 0 24px;
}
.result-score .big{
  font-family: var(--display); font-weight:700; font-size:64px; color: var(--gold); line-height:1;
}
.result-score .lbl{ font-family: var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color: var(--paper-dim); margin-top:4px;}
.result-stats{ display:flex; gap:10px; margin-bottom:22px; }
.rstat{ flex:1; background: var(--panel-2); border-radius:12px; padding:14px 10px; text-align:center; }
.rstat b{ display:block; font-family: var(--display); font-size:22px; color: var(--paper-text); }
.rstat span{ font-family: var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color: var(--paper-dim); }
.coin-reward[data-state="no-reward"]{
  color:var(--paper-dim); border-color:var(--surface-border);
  background:color-mix(in srgb,var(--panel-2) 82%,transparent);
}

/* ---------- Classificação da rodada ---------- */
.round-review-card{ margin-top:16px; padding:20px 18px; }
.round-review-intro{ margin:-2px 0 14px; color:var(--paper-dim); font-size:12px; line-height:1.45; }
.round-review-list{ display:grid; gap:9px; }
.round-standing-entry{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px;
  min-height:68px; padding:11px 12px; border-radius:14px;
  background:linear-gradient(145deg,var(--bg),color-mix(in srgb,var(--panel-2) 48%,var(--bg)));
  border:1px solid var(--surface-border-soft);
}
.round-standing-entry.is-self{ box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sage) 28%,transparent); }
.round-standing-entry.is-winner{
  border-color:color-mix(in srgb,var(--gold) 70%,var(--surface-border-soft));
  background:linear-gradient(145deg,var(--gold-soft),var(--bg) 58%);
  box-shadow:0 14px 28px -24px var(--gold),inset 0 0 0 1px var(--gold-soft);
}
.round-standing-entry.is-abandoned{
  opacity:.78;
  border-style:dashed;
  background:color-mix(in srgb,var(--panel-2) 58%,var(--bg));
}
.round-standing-entry.is-abandoned .round-standing-rank,
.round-standing-entry.is-abandoned .round-standing-score strong{ color:var(--paper-dim); }
.round-standing-entry.is-abandoned .round-standing-place{ color:var(--rust); }
.round-standing-rank{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--panel-2); color:var(--paper-text); font-family:var(--display); font-size:20px; font-weight:700;
}
.round-standing-entry.is-winner .round-standing-rank{ background:var(--gold); color:var(--button-ink); }
.round-standing-main{ min-width:0; }
.round-standing-place{
  margin-bottom:2px; color:var(--gold); font-family:var(--mono); font-size:9px;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.round-standing-name{
  min-width:0; overflow:hidden; white-space:nowrap;
  color:var(--paper-text); font-size:15px; font-weight:800;
}
.round-standing-name .player-name-scroll{ width:100%; max-width:100%; }
.round-standing-meta{ margin-top:3px; color:var(--paper-dim); font-family:var(--mono); font-size:9.5px; }
.round-standing-score{ min-width:68px; text-align:right; }
.round-standing-score strong{ display:block; color:var(--gold); font-family:var(--display); font-size:25px; line-height:1; }
.round-standing-score span{ color:var(--paper-dim); font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; }
.round-review-pending{ color:var(--paper-dim); font-family:var(--mono); font-size:10.5px; text-align:center; padding:12px 2px; }
@media (max-width:380px){
  .round-review-card{ padding:17px 14px; }
  .round-standing-entry{ grid-template-columns:auto minmax(0,1fr) auto; gap:8px; padding:10px 9px; }
  .round-standing-rank{ width:36px; height:36px; border-radius:10px; font-size:18px; }
  .round-standing-name{ font-size:13.5px; }
  .round-standing-score{ min-width:56px; }
  .round-standing-score strong{ font-size:22px; }
}

.tag-new{
  display:inline-block; background: var(--gold-soft); color: var(--gold);
  font-family: var(--mono); font-size:10.5px; padding:3px 8px; border-radius:20px; margin-left:8px;
}

/* ---------- Mode tabs (sozinho / sala) ---------- */
.mode-tabs{
  display:flex; gap:8px; margin: 18px 0 16px;
  background: var(--bg); border-radius:12px; padding:4px;
}
.mode-tab{
  flex:1; text-align:center; padding:9px 8px; border-radius:9px;
  font-family: var(--body); font-weight:600; font-size:13.5px;
  color: var(--paper-dim); cursor:pointer; border:none; background:transparent;
  transition: all 0.15s ease;
}
.mode-tab.active{ background: var(--panel-2); color: var(--gold); }
.mode-tab[hidden]{ display:none; }

.admin-panel-note{ margin:-2px 0 10px; color:var(--paper-dim); font-size:12px; line-height:1.45; }
.admin-lookup-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; }
.admin-lookup-row input,
.admin-delete-box input{
  min-width:0; background:var(--bg); border:1.5px solid var(--surface-border-strong);
  color:var(--paper-text); border-radius:10px; padding:11px 12px; outline:none;
  font-family:var(--mono); font-size:14px; text-transform:uppercase;
}
.admin-lookup-row input:focus,.admin-delete-box input:focus{ border-color:var(--gold); }
.admin-lookup-row .btn{ width:auto; margin:0; }
.admin-panel-message,.admin-player-message{ min-height:18px; margin-top:10px; color:var(--paper-dim); font-family:var(--mono); font-size:10px; line-height:1.45; }
.admin-panel-message[data-state="error"],.admin-player-message[data-state="error"]{ color:var(--rust); }
.admin-panel-message[data-state="ok"],.admin-player-message[data-state="ok"]{ color:var(--sage); }

.admin-player-overlay{
  position:fixed; inset:0; z-index:1300; display:none; align-items:center; justify-content:center;
  padding:16px; background:rgba(5,10,20,.8); backdrop-filter:blur(7px);
}
.admin-player-overlay.active{ display:flex; }
.admin-player-modal{
  width:min(480px,100%); max-height:92vh; overflow:auto; padding:20px; border-radius:20px;
  background:var(--panel); color:var(--paper-text); border:1px solid var(--surface-border-strong);
  box-shadow:0 28px 80px -24px rgba(0,0,0,.75);
}
.admin-player-summary{ margin:17px 0 13px; padding:13px; border-radius:12px; background:var(--bg); border:1px solid var(--surface-border-soft); }
.admin-player-name{ color:var(--paper-text); font-weight:800; font-size:17px; }
.admin-player-meta{ margin-top:5px; color:var(--paper-dim); font-family:var(--mono); font-size:9.5px; line-height:1.55; }
.admin-player-actions{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.admin-player-actions .btn{ margin:0; }
.admin-delete-box{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--surface-border); }
.admin-delete-box p{ margin:5px 0 9px; color:var(--paper-dim); font-size:11px; line-height:1.45; }
.admin-delete-box input{ width:100%; }
.admin-delete-btn{ margin-top:9px; background:color-mix(in srgb,var(--rust) 78%,var(--bg)); color:#fff; }
.admin-delete-btn:hover{ filter:brightness(1.08); }
.admin-delete-btn:disabled,.admin-player-actions .btn:disabled{ opacity:.45; cursor:not-allowed; }
@media (max-width:420px){
  .admin-lookup-row{ grid-template-columns:1fr; }
  .admin-lookup-row .btn{ width:100%; }
  .admin-player-actions{ grid-template-columns:1fr; }
}

.room-join-row{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
input#joinCodeInput{
  flex:1; background: var(--bg); border: 1.5px solid var(--surface-border-strong);
  color: var(--paper-text); font-family: var(--mono); font-size:18px; letter-spacing:0.12em;
  text-transform:uppercase; padding: 12px 14px; border-radius: 10px; outline:none; text-align:center;
}
input#joinCodeInput:focus{ border-color: var(--gold); }
.btn-join{ width:100%; padding-left:22px; padding-right:22px; }
.room-error{ color: var(--rust); font-family: var(--mono); font-size:12px; margin-top:8px; min-height:16px; }

.room-created-panel{ text-align:center; }
.room-code-big{
  font-family: var(--mono); font-weight:700; font-size:40px; letter-spacing:0.14em;
  color: var(--gold); background: var(--bg); border-radius:12px; padding: 16px 10px;
  margin: 14px 0; border: 1.5px dashed var(--gold);
}
.room-hint{ color: var(--paper-dim); font-size:13px; margin-bottom:4px; }

.room-badge{
  display:inline-block; font-family: var(--mono); font-size:11px; color: var(--gold);
  background: var(--gold-soft); padding:2px 9px; border-radius:20px; margin-top:4px;
}
.lb-note{ font-family: var(--mono); font-size:10.5px; color: var(--paper-dim); text-align:center; margin-top:8px; }

.room-players-box{ margin: 16px 0; text-align:left; }
.room-players-list{
  background: var(--bg); border-radius:10px; padding: 4px 12px;
  max-height:none; overflow:visible; border:1px solid var(--surface-border);
}
.room-player-row{
  min-height:36px; padding:8px 6px; font-size:13.5px; color: var(--paper-text); font-weight:500;
  border-bottom:1px solid var(--surface-border); display:flex; align-items:center; gap:8px;
}
.room-player-row.is-self{
  background:var(--gold-soft); margin:0 -6px; padding-left:12px; padding-right:12px;
  border-radius:7px;
}
.room-player-row:last-child{ border-bottom:none; }
.room-player-name{ flex:1; min-width:0; overflow:hidden; white-space:nowrap; }
.room-player-name .player-name-scroll{ width:100%; max-width:100%; }
.room-player-dot{ width:6px; height:6px; border-radius:50%; background: var(--sage); flex-shrink:0; }
.room-player-tag{
  flex-shrink:0; border:1px solid var(--surface-border-strong); border-radius:999px;
  padding:2px 6px; color:var(--paper-dim); font-family:var(--mono); font-size:8.5px;
  font-weight:700; line-height:1.2; text-transform:uppercase; letter-spacing:.04em;
}
.room-player-tag.is-host{ color:var(--gold); border-color:var(--gold); }
.waiting-pulse{
  font-family: var(--mono); font-size:12.5px; color: var(--gold);
  text-align:center; margin-top:14px;
}

/* ---------- Podium ---------- */
.podium{ display:flex; align-items:flex-end; gap:8px; margin: 4px 0 18px; }
.podium-spot{
  flex:1; background: var(--panel-2); border-radius:10px 10px 0 0;
  padding:14px 6px 12px; text-align:center; order:2;
}
.podium-spot.silver{ order:1; padding-top:26px; }
.podium-spot.gold{ order:2; padding-top:10px; border:1.5px solid var(--gold); }
.podium-spot.bronze{ order:3; padding-top:32px; }
.podium-medal{ font-size:22px; line-height:1; }
.podium-name{
  font-family: var(--body); font-weight:600; font-size:12.5px; color: var(--paper-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:6px;
}
.podium-score{ font-family: var(--mono); color: var(--gold); font-weight:700; font-size:15px; margin-top:2px; }
.podium-words{ font-family: var(--mono); font-size:10px; color: var(--paper-dim); margin-top:2px; }

footer.credit{
  text-align:center; color: var(--footer-dim); font-family: var(--mono);
  font-size:10.5px; margin-top:22px; letter-spacing:0.04em;
}

/* ---------- Estado da conexão segura ---------- */
.firebase-status{
  width:max-content; max-width:100%; margin:-20px auto 22px; padding:7px 11px;
  border:1px solid var(--surface-border-soft); border-radius:999px;
  background:var(--glass); color:var(--paper-dim); font-family:var(--mono);
  font-size:10px; line-height:1.35; text-align:center;
}
.firebase-status[data-state="ready"]{ color:var(--sage); border-color:color-mix(in srgb,var(--sage) 42%,transparent); }
.firebase-status[data-state="error"]{ color:var(--rust); border-color:color-mix(in srgb,var(--rust) 48%,transparent); border-radius:12px; }

/* ---------- Conta Google + convidado preservado ---------- */
.account-overlay{
  position:fixed; inset:0; z-index:85; display:none; align-items:center; justify-content:center;
  padding:18px; background:rgba(7,13,22,.72); backdrop-filter:blur(7px);
}
.account-overlay.active{ display:flex; }
.account-card{
  width:min(100%,460px); display:grid; grid-template-columns:1fr; gap:15px;
  padding:20px; border-radius:22px;
  background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--panel-2) 62%,var(--panel)));
  border:1px solid var(--surface-border); box-shadow:0 28px 80px -24px rgba(0,0,0,.72);
}
.account-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.account-title{ margin:0; font-family:var(--display); font-size:28px; line-height:1; }
.account-subtitle{ margin:6px 0 0; color:var(--paper-dim); font-size:12px; line-height:1.45; }
.account-copy{ min-width:0; }
.account-mode-tag{
  margin-bottom:3px; color:var(--sage); font-family:var(--mono); font-size:8.5px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.account-card[data-mode="guest"] .account-mode-tag{ color:var(--gold); }
.account-name{
  overflow:hidden; color:var(--paper-text); font-size:13.5px; font-weight:750;
  line-height:1.25; text-overflow:ellipsis; white-space:nowrap;
}
.account-description{
  margin-top:6px; padding:11px 12px; color:var(--paper-dim); font-size:11px; line-height:1.5;
  background:var(--bg); border:1px solid var(--surface-border-soft); border-radius:11px;
}
.google-auth-btn{
  min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:9px 12px; border:1px solid color-mix(in srgb,var(--paper-text) 18%,var(--surface-border));
  border-radius:11px; background:var(--paper-text); color:var(--bg); cursor:pointer;
  font-family:var(--body); font-size:11.5px; font-weight:700; white-space:nowrap;
  transition:transform .1s ease,filter .15s ease,border-color .15s ease;
}
.google-auth-btn:hover{ filter:brightness(1.05); border-color:var(--gold); }
.google-auth-btn:active{ transform:scale(.98); }
.google-auth-btn:focus-visible{ outline:3px solid var(--gold-soft); outline-offset:2px; }
.google-auth-btn:disabled{ cursor:not-allowed; opacity:.52; filter:saturate(.55); }
.account-card[data-mode="google"] .google-auth-btn{
  background:transparent; color:var(--paper-dim); border-color:var(--surface-border-strong);
}
.account-card[data-mode="google"] .google-auth-btn:hover{ color:var(--paper-text); }
.google-g{
  width:22px; height:22px; display:grid; flex:0 0 22px; place-items:center;
  padding:3px; border-radius:50%; background:#fff;
}
.google-g svg{ width:16px; height:16px; display:block; }
.account-message{
  display:none; margin-top:-2px; padding-top:9px;
  border-top:1px dashed var(--surface-border); color:var(--paper-dim);
  font-family:var(--mono); font-size:9.5px; line-height:1.45;
}
.account-message:not(:empty){ display:block; }
.account-message[data-state="ok"]{ color:var(--sage); }
.account-message[data-state="error"]{ color:var(--rust); }
.account-message[data-state="loading"]{ color:var(--gold); }

/* Beta 3.1: hub compacto, ações alinhadas e ajuda contextual */
.firebase-status[data-state="ready"]{ display:none; }
.lobby-quick-actions .account-open-btn{ min-width:112px; }
.site-footer{ margin:20px auto 4px; padding:18px 12px 4px; text-align:center; color:var(--paper-dim); font-family:var(--mono); font-size:9px; line-height:1.55; }
.site-footer p{ margin:0 0 8px; }
.site-footer nav{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:7px 13px; }
.site-footer a,.site-footer button{ appearance:none; border:0; padding:0; background:none; color:var(--paper-dim); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.site-footer a:hover,.site-footer button:hover{ color:var(--paper-text); }
.account-secondary-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.account-secondary-actions button,.account-secondary-actions a{ min-height:39px; display:grid; place-items:center; padding:7px 10px; border:1px solid var(--surface-border-strong); border-radius:11px; background:transparent; color:var(--paper-dim); font-family:var(--body); font-weight:700; text-decoration:none; cursor:pointer; }
.account-secondary-actions button:first-child{ grid-column:1/-1; }
.account-secondary-actions button:hover,.account-secondary-actions a:hover{ color:var(--paper-text); border-color:var(--gold); }
.account-secondary-actions button.danger{ color:var(--rust); }
.account-secondary-actions button:disabled{ opacity:.45; cursor:not-allowed; }
.name-help-overlay{ position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(5,10,20,.78); backdrop-filter:blur(7px); }
.name-help-overlay.active{ display:flex; }
.name-help-card{ width:min(430px,100%); padding:22px; border:1px solid var(--surface-border-strong); border-radius:20px; background:var(--surface); box-shadow:0 25px 80px rgba(0,0,0,.58); }
.name-help-list{ margin:17px 0 12px; padding-left:21px; color:var(--paper-dim); font-size:13px; line-height:1.65; }
.name-help-list li+li{ margin-top:4px; }
.name-help-note{ margin:0; padding-top:12px; border-top:1px dashed var(--surface-border); color:var(--paper-dim); font-family:var(--mono); font-size:9.5px; line-height:1.55; }
@media (max-width:420px){
  .account-overlay{ padding:10px; }
  .account-card{ padding:16px; border-radius:18px; }
  .google-auth-btn{ width:100%; }
  .lobby-quick-actions{ gap:8px 12px; margin-bottom:12px; }
  .lobby-quick-column{ gap:7px; }
  .shop-open-btn,.account-open-btn,.help-open-btn{ min-width:104px; padding-left:11px; padding-right:11px; }
  .name-help-card{ padding:18px; border-radius:18px; }
}

#resultName{ display:inline-block; max-width:min(72vw,360px); vertical-align:bottom; overflow:hidden; }
#resultName .player-name-scroll{ width:100%; max-width:100%; }

/* ---------- Lapidação beta: avisos, feedback e exclusão de conta ---------- */
.notice-overlay,
.help-overlay,
.feedback-overlay,
.account-delete-overlay{
  position:fixed; inset:0; z-index:1450; display:none; align-items:center; justify-content:center;
  padding:16px; background:rgba(5,10,20,.82); backdrop-filter:blur(7px);
}
.notice-overlay.active,
.help-overlay.active,
.feedback-overlay.active,
.account-delete-overlay.active{ display:flex; }
.notice-modal,
.help-modal,
.feedback-modal,
.account-delete-modal{
  width:min(100%,470px); max-height:min(92vh,760px); overflow:auto; padding:21px;
  border:1px solid var(--surface-border-strong); border-radius:21px;
  background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--panel-2) 62%,var(--panel)));
  color:var(--paper-text); box-shadow:0 28px 80px -24px rgba(0,0,0,.8);
}
.notice-modal{ width:min(100%,410px); }
.notice-modal .account-subtitle{ margin-top:10px; font-size:13px; line-height:1.6; }
.notice-confirm-btn{ margin:19px 0 0; }

.help-overlay{ z-index:1460; }
.help-modal{ width:min(100%,520px); max-height:min(92vh,780px); }
.help-topics{ display:grid; gap:9px; margin-top:18px; }
.help-topic{
  border:1px solid var(--surface-border-soft); border-radius:13px; overflow:hidden;
  background:color-mix(in srgb,var(--bg) 74%,transparent);
}
.help-topic summary{
  position:relative; cursor:pointer; list-style:none; padding:13px 42px 13px 14px;
  color:var(--paper-text); font-family:var(--body); font-size:13px; font-weight:700;
}
.help-topic summary::-webkit-details-marker{ display:none; }
.help-topic summary::after{
  content:'+'; position:absolute; right:15px; top:50%; transform:translateY(-50%);
  color:var(--gold); font-family:var(--mono); font-size:18px; font-weight:700;
}
.help-topic[open] summary::after{ content:'−'; }
.help-topic[open] summary{ border-bottom:1px solid var(--surface-border-soft); }
.help-topic-body{ padding:12px 14px 14px; color:var(--paper-dim); font-size:12px; line-height:1.6; }
.help-topic-body p{ margin:0; }
.help-topic-body p+p{ margin-top:8px; }
.help-topic-body ol{ margin:0 0 9px; padding-left:20px; }
.help-topic-body li+li{ margin-top:6px; }
.help-topic-body b{ color:var(--paper-text); }
.help-primary-action,
.help-email-actions button,
.help-email-actions a{
  appearance:none; min-height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--surface-border-strong); border-radius:10px; padding:8px 11px;
  background:var(--glass); color:var(--paper-text); font-family:var(--body); font-size:11px; font-weight:700;
  text-decoration:none; cursor:pointer;
}
.help-primary-action{ width:100%; margin-top:11px; border-color:color-mix(in srgb,var(--gold) 65%,var(--surface-border)); color:var(--button-ink); background:var(--gold); }
.help-primary-action:hover{ filter:brightness(1.04); }
.help-email-actions{ display:grid; grid-template-columns:1fr 1.35fr; gap:8px; margin-top:11px; }
.help-email-actions button:hover,
.help-email-actions a:hover{ border-color:var(--gold); color:var(--paper-text); }
.help-copy-status{ min-height:16px; margin-top:7px; color:var(--sage); font-family:var(--mono); font-size:9px; }
.help-footer-links{ display:flex; justify-content:center; gap:14px; margin-top:14px; padding-top:12px; border-top:1px dashed var(--surface-border); }
.help-footer-links a{ color:var(--paper-dim); font-family:var(--mono); font-size:9px; text-underline-offset:3px; }
.help-footer-links a:hover{ color:var(--paper-text); }

.feedback-modal form{ display:grid; gap:11px; margin-top:18px; }
.feedback-modal .field-label{ margin:0 0 -4px; }
.feedback-modal select,
.feedback-modal input,
.feedback-modal textarea,
.account-delete-modal input{
  width:100%; min-width:0; border:1.5px solid var(--surface-border-strong); border-radius:11px;
  background:var(--bg); color:var(--paper-text); outline:none; padding:11px 12px;
  font-family:var(--body); font-size:13px; line-height:1.45;
}
.feedback-modal select{ appearance:auto; color-scheme:dark; }
.feedback-modal textarea{ resize:vertical; min-height:118px; }
.feedback-modal input{ font-family:var(--mono); text-transform:uppercase; }
.feedback-modal select:focus,
.feedback-modal input:focus,
.feedback-modal textarea:focus,
.account-delete-modal input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.feedback-context-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.feedback-context-grid > div{ display:grid; gap:7px; }
.feedback-character-count{ margin-top:-7px; text-align:right; color:var(--paper-dim); font-family:var(--mono); font-size:9px; }
.feedback-privacy-note,
.account-delete-warning{
  margin:0; padding:11px 12px; border:1px solid var(--surface-border-soft); border-radius:11px;
  background:var(--bg); color:var(--paper-dim); font-size:10.5px; line-height:1.55;
}
.feedback-submit-message,
.account-delete-message{ min-height:16px; color:var(--paper-dim); font-family:var(--mono); font-size:9.5px; line-height:1.45; }
.feedback-submit-message[data-state="error"],
.account-delete-message[data-state="error"]{ color:var(--rust); }
.feedback-submit-message[data-state="ok"]{ color:var(--sage); }
.feedback-submit-message[data-state="loading"],
.account-delete-message[data-state="loading"]{ color:var(--gold); }
.feedback-actions,
.account-delete-actions{ display:grid; grid-template-columns:1.15fr 1fr; gap:9px; }
.feedback-actions .btn,
.account-delete-actions .btn{ margin:0; }

.account-delete-overlay{ z-index:1500; }
.account-delete-warning{ margin:17px 0 15px; border-color:color-mix(in srgb,var(--rust) 45%,var(--surface-border)); }
.account-delete-modal .field-label{ margin-bottom:7px; }
.account-delete-modal input{ font-family:var(--mono); font-size:15px; text-transform:uppercase; letter-spacing:.08em; }
.account-delete-message:not(:empty){ margin-top:10px; }
.account-delete-actions{ margin-top:15px; }
.account-delete-confirm-btn{
  background:color-mix(in srgb,var(--rust) 82%,var(--panel)); color:#fff;
  border:1px solid color-mix(in srgb,var(--rust) 72%,var(--surface-border));
}
.account-delete-confirm-btn:disabled,
.feedback-actions .btn:disabled,
.account-delete-modal .shop-close:disabled{ opacity:.48; cursor:not-allowed; }

@media (max-width:480px){
  .notice-overlay,.help-overlay,.feedback-overlay,.account-delete-overlay{ padding:9px; }
  .notice-modal,.help-modal,.feedback-modal,.account-delete-modal{ padding:17px; border-radius:18px; }
  .feedback-context-grid,.feedback-actions,.account-delete-actions{ grid-template-columns:1fr; }
  .help-email-actions{ grid-template-columns:1fr; }
  .feedback-actions .btn-primary,.account-delete-confirm-btn{ order:2; }
}

@media (prefers-reduced-motion:reduce){
  .notice-overlay *,
  .help-overlay *,
  .feedback-overlay *,
  .account-delete-overlay *{ scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ---------- Compatibilidade mobile: Visual Viewport e modais seguros ---------- */
:root{
  --palavriz-visual-height:100dvh;
  --palavriz-visual-top:0px;
}

/* Em Safari/iOS, inset:0 pode usar o layout viewport enquanto as barras do
   navegador reduzem a área realmente visível. A altura sincronizada pelo JS
   mantém o painel dentro da Visual Viewport. */
.shop-overlay,
.room-edit-overlay,
.leave-game-overlay,
.leave-room-solo-overlay,
.admin-player-overlay,
.account-overlay,
.name-help-overlay,
.notice-overlay,
.help-overlay,
.feedback-overlay,
.account-delete-overlay{
  top:var(--palavriz-visual-top,0px);
  right:0;
  bottom:auto;
  left:0;
  width:100%;
  height:var(--palavriz-visual-height,100dvh);
  min-height:0;
  max-height:var(--palavriz-visual-height,100dvh);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box;
  padding-top:max(12px,env(safe-area-inset-top));
  padding-right:max(12px,env(safe-area-inset-right));
  padding-bottom:max(12px,env(safe-area-inset-bottom));
  padding-left:max(12px,env(safe-area-inset-left));
}

.shop-modal,
.room-edit-modal,
.leave-game-modal,
.admin-player-modal,
.account-card,
.name-help-card,
.notice-modal,
.help-modal,
.feedback-modal,
.account-delete-modal{
  max-height:calc(var(--palavriz-visual-height,100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scroll-padding-top:64px;
}

/* O cabeçalho acompanha a rolagem. Assim o X nunca some quando o conteúdo do
   modal é maior que a tela (Ajuda, Feedback, Conta, Privacidade relacionada). */
.help-modal > .account-modal-head,
.feedback-modal > .account-modal-head,
.notice-modal > .account-modal-head,
.account-delete-modal > .account-modal-head,
.account-card > .account-modal-head,
.admin-player-modal > .account-modal-head,
.leave-game-modal > .account-modal-head{
  position:sticky;
  top:-9px;
  z-index:8;
  margin:-9px -9px 0;
  padding:9px;
  background:color-mix(in srgb,var(--panel) 96%,transparent);
  border-radius:14px 14px 10px 10px;
  backdrop-filter:blur(12px);
}

.shop-modal > .shop-head{
  position:sticky;
  top:-9px;
  z-index:8;
  margin:-9px -9px 14px;
  padding:9px;
  background:color-mix(in srgb,var(--panel) 96%,transparent);
  border-radius:14px 14px 10px 10px;
  backdrop-filter:blur(12px);
}

@media (max-width:620px){
  .shop-overlay,
  .room-edit-overlay,
  .leave-game-overlay,
  .leave-room-solo-overlay,
  .admin-player-overlay,
  .account-overlay,
  .name-help-overlay,
  .notice-overlay,
  .help-overlay,
  .feedback-overlay,
  .account-delete-overlay{
    align-items:flex-start;
    justify-content:center;
    padding-top:max(10px,env(safe-area-inset-top));
    padding-right:max(9px,env(safe-area-inset-right));
    padding-bottom:max(12px,env(safe-area-inset-bottom));
    padding-left:max(9px,env(safe-area-inset-left));
  }

  .shop-modal,
  .room-edit-modal,
  .leave-game-modal,
  .admin-player-modal,
  .account-card,
  .name-help-card,
  .notice-modal,
  .help-modal,
  .feedback-modal,
  .account-delete-modal{
    width:100%;
    max-height:calc(var(--palavriz-visual-height,100dvh) - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin:0;
  }

  .help-modal > .account-modal-head,
  .feedback-modal > .account-modal-head,
  .notice-modal > .account-modal-head,
  .account-delete-modal > .account-modal-head,
  .account-card > .account-modal-head,
  .admin-player-modal > .account-modal-head,
  .leave-game-modal > .account-modal-head,
  .shop-modal > .shop-head{
    top:-8px;
  }

  .shop-close{
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
  }
}
.theme-preview-banner{ top:max(8px,env(safe-area-inset-top)); }