/* trioGuess · site do jogador — mesmo visual do app (Views/Components/Theme.swift):
   bege nos fundos, azul claro nos destaques, sem sombras nem degradês. Segue o modo escuro do sistema. */

:root {
  --canvas: #F4ECE4;
  --surface: #FBF7F2;
  --hairline: #EADDD0;
  --stage: #F3E4D9;
  --accent-soft: #F1DCCD;
  --accent-fill: #E8C0A6;
  --accent: #954D32;
  --on-accent: #3D1D10;
  --ink: #3A2A22;
  --ink-muted: #736151;
  --metal: #CBBEAC;
  --empty-day: #E6D9CC;
  --desk: #EBDFD3;
  --scrim: rgba(58, 42, 34, 0.28);
  --glass: rgba(251, 247, 242, 0.78);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #1C1714;
    --surface: #26201C;
    --hairline: #3A312B;
    --stage: #2B231F;
    --accent-soft: #3B2A21;
    --accent-fill: #E3AE91;
    --accent: #E3AE91;
    --on-accent: #3A1A0C;
    --ink: #F0E6DC;
    --ink-muted: #AA9B8E;
    --metal: #5E574E;
    --empty-day: #3A312B;
    --desk: #120E0C;
    --scrim: rgba(0, 0, 0, 0.5);
    --glass: rgba(38, 32, 28, 0.78);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --canvas: #1C1714; --surface: #26201C; --hairline: #3A312B; --stage: #2B231F; --accent-soft: #3B2A21;
  --accent-fill: #E3AE91; --accent: #E3AE91; --on-accent: #3A1A0C; --ink: #F0E6DC; --ink-muted: #AA9B8E;
  --metal: #5E574E; --empty-day: #3A312B; --desk: #120E0C; --scrim: rgba(0, 0, 0, 0.5); --glass: rgba(38, 32, 28, 0.78);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--canvas);
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "SF Pro Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.num { font-variant-numeric: tabular-nums; }

/* Chave de idioma: 🇧🇷 | 🇺🇸 com o destaque deslizando */
.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 3px;
  border-radius: 999px;
  background: var(--stage);
  border: 1px solid var(--hairline);
}
.lang-switch .flag {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.45;
  filter: saturate(0.4);
  transition: opacity 0.2s, filter 0.2s;
}
.lang-switch .flag.on { opacity: 1; filter: none; }
.lang-switch .flag-svg { display: block; border-radius: 3px; }
.lang-switch .knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 38px;
  height: 32px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.lang-switch[aria-checked="true"] .knob { transform: translateX(38px); }
.muted { color: var(--ink-muted); }
.icon { flex: none; display: block; }

/* Janela média (tablet, janela estreita): o layout do celular, mais largo e sem moldura.
   No computador (960 px ou mais), a tela toda: veja o fim do arquivo. */
@media (min-width: 640px) and (max-width: 959px) {
  body #app { max-width: 720px; }
  body .cover { width: min(100%, 720px); }
}
.topbar, .desktop-only { display: none; }

#app {
  position: relative;
  max-width: 430px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--canvas);
}

/* ------------------------------------------------------------------------ */
/* Barra de navegação (título grande que encolhe ao rolar) */

.navbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 52px;
  padding: 0 16px;
  padding-top: env(safe-area-inset-top);
  box-sizing: content-box;
  background: var(--canvas);
}
.navbar .inline-title {
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s;
}
.navbar.show-title .inline-title, .navbar.inline .inline-title { opacity: 1; }
.navbar .lead { grid-column: 1; justify-self: start; }
.navbar .trail { grid-column: 3; justify-self: end; display: flex; gap: 8px; }
.navbar.scrolled { border-bottom: 1px solid var(--hairline); }

.large-title {
  margin: 0;
  padding: 0 20px 8px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.glass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  font-size: 16px;
  font-weight: 500;
}
.glass-btn.round { width: 40px; padding: 0; }
.glass-btn.muted { color: var(--ink-muted); }
.glass-btn.accent { color: var(--accent); }

/* ------------------------------------------------------------------------ */
/* Conteúdo das abas */

.page {
  padding: 4px 20px calc(110px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.page.tight { gap: 18px; }

.card {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 26px;
}

.hero .date { font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.hero .tagline { font-size: 20px; font-weight: 600; margin-top: 4px; }

.status-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}
.status-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.kind-icon {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.kind-icon .badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  border: 2px solid var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.challenge-card { display: flex; flex-direction: column; gap: 18px; }
.est-row { display: flex; align-items: center; gap: 14px; }
.est-row.done { opacity: 0.55; }
.est-row .title { font-size: 15px; font-weight: 600; }
.est-row .question {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.countdown { font-size: 13px; color: var(--ink-muted); text-align: center; }
.countdown b { font-weight: 500; color: var(--ink); opacity: 0.75; font-variant-numeric: tabular-nums; margin-left: 5px; }

.status-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.status-card .circle-icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.status-card h3, .center-card h3 { margin: 0; font-size: 17px; font-weight: 600; }
.status-card p { margin: 0; font-size: 15px; color: var(--ink-muted); }
.center-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.center-card p { margin: 0; font-size: 13px; color: var(--ink-muted); }
.center-card .circle-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}

.test-note {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; color: var(--ink-muted);
}

.spinner {
  width: 22px; height: 22px; margin: 40px auto;
  border-radius: 50%;
  border: 2.5px solid var(--hairline);
  border-top-color: var(--ink-muted);
  animation: spin 0.8s linear infinite;
}
.btn .spinner { margin: 0; width: 20px; height: 20px; border-color: rgba(61, 29, 16, 0.25); border-top-color: var(--on-accent); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------------ */
/* Botões (PrimaryButtonStyle, SecondaryButtonStyle, SoftButtonStyle) */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.15s, transform 0.15s;
  user-select: none;
  -webkit-user-select: none;
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn.primary, .btn.secondary {
  width: 100%;
  min-height: 54px;
  padding: 16px 12px;
  white-space: nowrap;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
}
.btn.primary { background: var(--accent-fill); color: var(--on-accent); }
.btn.primary:active:not(:disabled) { opacity: 0.85; }
.btn.secondary { background: var(--accent-soft); color: var(--accent); }
.btn.secondary:active:not(:disabled) { opacity: 0.75; }
.btn.soft {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
}
.btn.soft.block { width: 100%; }
.btn.soft:active:not(:disabled) { opacity: 0.7; }
.btn.dim, .btn:disabled.dim { opacity: 0.5; }
.btn-row { display: flex; gap: 10px; }

/* ------------------------------------------------------------------------ */
/* Abas (barra flutuante) */

.tabbar {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--hairline);
}
.tabbar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 96px;
  padding: 7px 14px 6px;
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
}
.tabbar button[aria-selected="true"] { color: var(--accent); background: var(--stage); }

/* ------------------------------------------------------------------------ */
/* Resumo exportável */

.summary { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.summary .thumb {
  position: relative;
  width: 300px;
  height: 533.33px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: #F4ECE4;
}
.summary .thumb canvas { display: block; width: 100%; height: 100%; }
.summary-side { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.summary .actions { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.summary .actions.dim { opacity: 0.5; pointer-events: none; }

/* ------------------------------------------------------------------------ */
/* Jogo (tela cheia por cima das abas) */

.cover {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, 430px);
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  animation: cover-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.cover.closing { animation: cover-out 0.25s ease-in forwards; }
@keyframes cover-in { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
@keyframes cover-out { to { transform: translate(-50%, 100%); } }

.cover .navbar { position: static; }
.game {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 20px calc(8px + env(safe-area-inset-bottom));
}
.game > .content { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.progress {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--stage);
}
.progress div {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  transition: background 0.2s;
}
.progress div.current { background: var(--surface); color: var(--ink); }
.progress div.current .icon, .progress div.done .icon { color: var(--accent); }

.stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stage.enter { animation: stage-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes stage-in { from { transform: translateX(40%); opacity: 0; } to { transform: none; opacity: 1; } }
.stage .question {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

.scene-box {
  position: relative;
  flex: 1;
  min-height: 120px;
}
.scene-box canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
}
.scene-box.bleed canvas { left: -20px; width: calc(100% + 40px); }
.scene-box.pannable canvas { touch-action: none; cursor: grab; }
.scene-box.pannable canvas:active { cursor: grabbing; }
.hints {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
  transition: opacity 0.25s;
}
.hints span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 500;
}

.panel { position: relative; height: 176px; flex: none; }
.guess-control {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity 0.3s;
}
.guess-control.locked { opacity: 0.55; pointer-events: none; }
.guess-control.hidden { opacity: 0; pointer-events: none; }
.guess-control .value {
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.guess-control .caption {
  text-align: center;
  font-size: 13px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.guess-control .row { display: flex; align-items: center; gap: 10px; }
.guess-control .range {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-muted);
  opacity: 0.8;
}
.step-btn {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.step-btn:active { background: var(--stage); }

input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 30px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  --p: 50%;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--accent) var(--p), var(--hairline) var(--p));
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--hairline); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -11px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}
input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}

.stats-overlay {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  scrollbar-width: none;
  border-radius: 20px;
  background: var(--stage);
  animation: fade-in 0.3s ease-out;
}
.stats-overlay::-webkit-scrollbar { display: none; }
.stats-overlay .inner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; }
.stats-overlay .sentence { font-size: 17px; font-weight: 600; color: var(--accent); text-align: center; font-variant-numeric: tabular-nums; }
.stats-overlay .pair { display: flex; align-items: center; width: 100%; }
.stats-overlay .pair > div { flex: 1; text-align: center; }
.stats-overlay .pair .label { font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.stats-overlay .pair .v { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 1px; }
.stats-overlay .pair .sep { flex: none; width: 1px; height: 30px; background: var(--hairline); }
.stats-overlay .note { display: flex; gap: 8px; align-self: stretch; font-size: 13px; color: var(--ink-muted); }
.stats-overlay .note .icon { color: var(--accent); margin-top: 1px; }
@keyframes fade-in { from { opacity: 0; } }

.unavailable { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--ink-muted); }
.unavailable h3 { margin: 0; color: var(--ink); font-size: 20px; }
.unavailable p { margin: 0; font-size: 15px; }

/* ------------------------------------------------------------------------ */
/* Folhas (sheet) e alertas */

.sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: var(--scrim);
  animation: fade-in 0.25s ease-out;
}
.sheet {
  position: relative;
  width: min(100%, 430px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: var(--canvas);
  border-radius: 28px 28px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  animation: sheet-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.sheet-layer.closing { animation: fade-out 0.22s ease-in forwards; }
.sheet-layer.closing .sheet { animation: sheet-out 0.22s ease-in forwards; }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
@keyframes fade-out { to { opacity: 0; } }
.sheet .grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--hairline); margin: 6px auto 0; }

.name-sheet { display: flex; flex-direction: column; gap: 18px; padding: 24px; text-align: center; }
.name-sheet .eyebrow { font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.name-sheet h2 { margin: 6px 0 0; font-size: 20px; font-weight: 600; }
.name-sheet input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  outline: none;
}
.name-sheet input:focus { border-color: var(--accent-fill); }
.name-sheet p { margin: 0; font-size: 13px; color: var(--ink-muted); }

.calc { display: flex; flex-direction: column; gap: 14px; padding: 14px 20px 20px; }
.calc header { display: flex; align-items: center; justify-content: space-between; }
.calc header h3 { margin: 0; font-size: 17px; font-weight: 600; }
.calc header button { color: var(--accent); font-size: 15px; font-weight: 600; }
.calc .display {
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  text-align: right;
  overflow: hidden;
}
.calc .expr { font-size: 15px; color: var(--ink-muted); white-space: nowrap; min-height: 19px; }
.calc .result { font-size: 38px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc .result.long { font-size: 28px; }
.calc .result.longer { font-size: 20px; white-space: normal; overflow-wrap: anywhere; text-align: right; }
.calc .keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.calc .keys button {
  min-height: 50px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calc .keys button.op { background: var(--accent-soft); color: var(--accent); }
.calc .keys button.eq { background: var(--accent-fill); color: var(--on-accent); }
.calc .keys button.wide { grid-column: span 2; }
.calc .keys button:active { opacity: 0.7; }

/* Ajustes (Form do iOS) */
.form { padding: 0 20px 28px; }
.form .section { margin-top: 22px; }
.form .section-header { padding: 0 16px 7px; font-size: 13px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.form .section-footer { padding: 7px 16px 0; font-size: 13px; color: var(--ink-muted); }
.form .group { background: var(--surface); border-radius: 18px; overflow: hidden; }
.form .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 11px 16px;
  font-size: 17px;
  text-align: left;
  width: 100%;
}
.form .item + .item { border-top: 1px solid var(--hairline); }
.form .item.action { color: var(--accent); }
.privacy-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.privacy-link:hover { text-decoration: underline; }
.form a.item { text-decoration: none; }
.email-sheet { gap: 12px; }
.email-sheet .btn.primary { margin-top: 6px; }
.name-sheet .error-line { color: #B0574F; }
.name-sheet .link { background: none; border: 0; color: var(--accent); font: inherit; font-size: 15px; font-weight: 600; padding: 6px; cursor: pointer; }
.signin-card h3 { margin: 0 0 6px; font-size: 18px; }
.signin-card p { margin: 0 0 14px; }
.signin-buttons { display: flex; flex-direction: column; gap: 10px; }
.btn.signin { display: flex; width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 999px; gap: 10px; font-size: 16px; font-weight: 600; background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); }
.btn.signin:active:not(:disabled) { opacity: 0.8; }
.btn.signin svg { flex: none; }
.signin-label { display: inline-flex; align-items: center; gap: 10px; }
.form .item.choice svg { color: var(--accent); visibility: hidden; }
.form .item.choice[aria-checked="true"] svg { visibility: visible; }
.form .item.destructive { color: #D9473A; }
.form .item:disabled { opacity: 0.4; }
.form .item .detail { color: var(--ink-muted); }
.form .item.small { font-size: 13px; color: var(--ink-muted); }
.form input[type="text"] { width: 100%; border: 0; outline: none; background: transparent; font-size: 17px; padding: 0; }
.toggle {
  position: relative;
  flex: none;
  width: 51px;
  height: 31px;
  border-radius: 999px;
  background: var(--hairline);
  transition: background 0.2s;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s;
}
.toggle[aria-checked="true"] { background: var(--accent); }
.toggle[aria-checked="true"]::after { transform: translateX(20px); }

.alert-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--scrim);
  animation: fade-in 0.2s ease-out;
}
.alert {
  width: min(100%, 300px);
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  overflow: hidden;
  text-align: center;
  animation: pop-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes pop-in { from { transform: scale(1.08); opacity: 0; } }
.alert .body { padding: 20px 18px 16px; }
.alert h3 { margin: 0; font-size: 17px; font-weight: 600; }
.alert p { margin: 6px 0 0; font-size: 13px; color: var(--ink-muted); }
.alert .buttons { display: flex; border-top: 1px solid var(--hairline); }
.alert .buttons button { flex: 1; padding: 12px; font-size: 17px; color: var(--accent); }
.alert .buttons button + button { border-left: 1px solid var(--hairline); }
.alert .buttons button.strong { font-weight: 600; }
.alert .buttons button.destructive { color: #D9473A; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px);
  z-index: 50;
  max-width: min(90vw, 380px);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--canvas);
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------------------ */
/* Estatísticas */

.stats-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.stats-head p { margin: 2px 0 0; font-size: 13px; color: var(--ink-muted); }
.calendar { display: flex; flex-direction: column; gap: 12px; }
.grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.grid button {
  aspect-ratio: 1;
  border-radius: 5px;
  background: var(--empty-day);
  position: relative;
}
.grid button.today { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 60%, transparent); }
.grid button.selected { box-shadow: inset 0 0 0 2px var(--accent); }
.grid-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-muted); margin-top: -7px; }
.day-detail { font-size: 13px; }
.legend-title { font-size: 10px; font-weight: 600; color: var(--ink-muted); margin-bottom: 5px; }
.legend { display: flex; gap: 4px; font-size: 9.5px; font-weight: 500; color: var(--ink-muted); }
.legend div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.legend i { width: 12px; height: 12px; border-radius: 2px; display: block; }

.reports-head { padding: 0 4px; }
.reports { display: flex; flex-direction: column; gap: 12px; }
.month-card { display: flex; flex-direction: column; gap: 14px; }
.month-card h3 { margin: 0; font-size: 20px; font-weight: 600; }
.month-card .streak { display: flex; align-items: center; gap: 12px; }
.month-card .streak .flame-box { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex: none; }
.month-card .streak b { display: block; font-size: 15px; font-weight: 600; }
.month-card .streak span.detail { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 2px; }
.month-card .avg { font-size: 15px; }
.month-card .avg b { color: var(--accent); font-weight: 600; }
.month-card .kinds { display: flex; padding: 12px 0; border-radius: 16px; background: var(--stage); }
.month-card .kinds div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.month-card .kinds .t { font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.month-card .kinds .v { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.flame { display: inline-flex; align-items: center; justify-content: center; flex: none; }

.preview-tag {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0 20px; padding: 6px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600;
}

/* ------------------------------------------------------------------------ */
/* Ranking e ligas */

.page.ranking { gap: 16px; }
.scope-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -20px;
  padding: 2px 20px;
}
.scope-bar::-webkit-scrollbar { display: none; }
.scope-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 600;
}
.scope-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-chip.on { background: var(--accent-soft); border-color: var(--accent-fill); color: var(--ink); }
.scope-chip.on .icon { color: var(--accent); }
.scope-chip.add { color: var(--accent); border-style: dashed; }

.period-pills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
.period-pills::-webkit-scrollbar { display: none; }
.period-pills button {
  flex: none;
  white-space: nowrap;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.period-pills button.on { background: var(--ink); border-color: var(--ink); color: var(--canvas); }


.rank-rule { margin: 0; font-size: 13px; color: var(--ink-muted); }
.rank-note { margin: 0 0 10px; font-size: 14px; color: var(--accent); font-weight: 600; }

.card-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.hist-card { display: flex; flex-direction: column; gap: 14px; }
.hist { display: flex; gap: 6px; height: 170px; }
.hist-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hist-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.hist-bar { width: 100%; border-radius: 8px 8px 4px 4px; background: var(--accent-fill); }
.hist-col.mine .hist-bar { background: var(--accent); }
.hist-pct { font-size: 12px; font-weight: 700; color: var(--ink-muted); }
.hist-col.mine .hist-pct { color: var(--accent); }
.hist-label { font-size: 10px; color: var(--ink-muted); white-space: nowrap; }
.hist-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-muted); }
.hist-empty { margin: 4px 0; }
.hist-placeholder { height: 170px; border-radius: 12px; background: var(--stage); opacity: 0.5; }

.rank-head, .rank-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.rank-head {
  padding: 0 20px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.rank-head span:last-child { text-align: right; }
.rank-list { background: var(--surface); border: 1px solid var(--hairline); border-radius: 22px; overflow: hidden; }
.rank-row { padding: 15px 20px; }
.rank-row + .rank-row, .rank-gap + .rank-row { border-top: 1px solid var(--hairline); }
.rank-row.me { background: var(--accent-soft); }
.rank-pos { font-size: 15px; color: var(--ink-muted); }
.rank-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 17px; font-weight: 600; }
.rank-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-flag { flex: none; font-size: 16px; }
.rank-you { flex: none; font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; }
.rank-score { font-size: 18px; font-weight: 700; text-align: right; }
.rank-streak { display: inline-flex; align-items: center; gap: 2px; }
.rank-gap { text-align: center; color: var(--ink-muted); padding: 2px 0 6px; border-top: 1px solid var(--hairline); }

.league-card { display: flex; flex-direction: column; gap: 14px; }
.league-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.league-head h3 { margin: 0 0 2px; font-size: 20px; }
.league-code { display: flex; flex-direction: column; align-items: flex-end; }
.league-code b { font-size: 20px; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.btn.soft.muted-btn { background: var(--stage); color: var(--ink-muted); }
.league-card .btn-row .btn { flex: 1; }
.btn.soft.rank-link { align-self: flex-start; }

.league-sheet { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.league-sheet h2 { margin: 0; font-size: 20px; }
.league-sheet > p { margin: 0; font-size: 14px; }
.league-box { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--hairline); }
.league-box h3 { margin: 0; font-size: 16px; }
.league-sheet input, .name-sheet select {
  width: 100%;
  padding: 13px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--canvas);
  font-size: 16px;
  outline: none;
}
.league-sheet input:focus { border-color: var(--accent-fill); }
.code-input { text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; text-align: center; }
.code-input::placeholder { text-transform: none; letter-spacing: normal; font-weight: 500; }
.select-row { display: flex; align-items: center; gap: 12px; text-align: left; font-size: 15px; color: var(--ink-muted); }
.select-row select { flex: 1; background: var(--surface); }
.error-line { margin: 0; min-height: 1em; color: #B0574F; font-size: 13px; }
.error-line:empty { display: none; }

/* ------------------------------------------------------------------------ */
/* Computador: a tela toda. Barra no topo com as abas; no jogo, a cena grande à esquerda e a pergunta,
   a barra e os botões numa coluna à direita (o painel de baixo continua com altura fixa, regra 6). */

@media (min-width: 960px) {
  html, body { background: var(--canvas); }
  #app { max-width: none; border: 0; }
  .mobile-only, .tabbar, #screen .navbar { display: none; }
  .desktop-only { display: block; }

  .topbar {
    display: block;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--canvas);
    border-bottom: 1px solid var(--hairline);
  }
  .topbar .inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: 1200px;
    height: 68px;
    margin: 0 auto;
    padding: 0 40px;
  }
  .topbar .brand { font-size: 22px; font-weight: 700; }
  .topbar .trail { justify-self: end; display: flex; align-items: center; gap: 8px; }
  .top-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--stage); }
  .top-tabs button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: 999px;
    color: var(--ink-muted);
    font-size: 15px;
    font-weight: 600;
  }
  .top-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); }
  .top-tabs button[aria-selected="true"] .icon { color: var(--accent); }

  .large-title { max-width: 1200px; margin: 0 auto; padding: 36px 40px 4px; }
  .preview-tag { max-width: 560px; margin: 20px auto 0; }
  .page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 40px 64px;
    gap: 28px;
  }
  .hero .date { font-size: 17px; }
  .hero .tagline { font-size: 34px; font-weight: 700; margin-top: 6px; }
  .page > .status-card, .page > .center-card { max-width: 640px; }

  /* Hoje: as três estimativas lado a lado */
  .challenge-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 28px; }
  .challenge-card > .status-label { grid-column: 1 / -1; }
  .challenge-card .est-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 22px;
    border-radius: 20px;
    background: var(--stage);
  }
  .challenge-card .est-row .title { font-size: 17px; }
  .challenge-card .est-row .question { font-size: 15px; display: block; overflow: visible; }
  .challenge-card > .btn.primary { grid-column: 1 / -1; justify-self: center; width: 360px; margin-top: 8px !important; }
  .challenge-card > .countdown { grid-column: 1 / -1; }

  /* Resumo: a imagem em tamanho real e, ao lado, título, botões e contagem */
  .summary { flex-direction: row; align-items: center; justify-content: center; gap: 64px; }
  .summary .thumb { flex: none; width: 360px; height: 640px; }
  .summary-side { width: 380px; gap: 22px; }
  .summary-head h2 { margin: 0; font-size: 34px; font-weight: 700; }
  .summary-head p { margin: 6px 0 0; font-size: 17px; color: var(--ink-muted); }
  .summary-side .countdown { text-align: left; }

  /* Estatísticas: a grade fixa à esquerda, os relatórios em colunas à direita */
  .page.tight { display: grid; grid-template-columns: 420px minmax(0, 1fr); align-items: start; gap: 32px; }
  .page.tight > .calendar { position: sticky; top: 100px; }
  .reports { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
  .reports > .reports-head, .reports > .empty-report { grid-column: 1 / -1; }

  /* Jogo em tela cheia */
  .cover { left: 0; width: 100%; transform: none; border: 0; animation: cover-in-desk 0.28s ease-out; }
  .cover.closing { animation: cover-out-desk 0.2s ease-in forwards; }
  .cover .navbar { height: 68px; padding: 0 40px; border-bottom: 1px solid var(--hairline); }
  .game {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 24px 40px 32px;
  }
  .game > .progress-wrap { width: min(560px, 100%); align-self: center; }
  .game.has-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    column-gap: 56px;
    row-gap: 20px;
  }
  .game.has-stage > .progress-wrap { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .game.has-stage > .content, .game.has-stage .stage { display: contents; }
  .game.has-stage .scene-box { grid-column: 1; grid-row: 2 / 6; min-height: 0; }
  .game.has-stage .question { grid-column: 2; grid-row: 2; text-align: left; font-size: 28px; font-weight: 700; }
  .game.has-stage .panel { grid-column: 2; grid-row: 4; }
  .game.has-stage > .bottom { grid-column: 2; grid-row: 5; }

  /* Folhas viram janelas no meio da tela; a calculadora fica num canto sem cobrir a cena */
  .sheet-layer { align-items: center; padding: 24px; }
  .sheet { width: min(100%, 460px); height: auto !important; max-height: 86vh; border-radius: 28px; padding-bottom: 0; animation: pop-in 0.22s ease-out; }
  .sheet-layer.closing .sheet { animation: fade-out 0.18s ease-in forwards; }
  .sheet .grabber { display: none; }
  .sheet-layer.floating { background: transparent; pointer-events: none; animation: none; }
  .sheet-layer.floating .sheet { pointer-events: auto; width: 380px; border: 1px solid var(--hairline); }
  .calc { padding-top: 18px; }

  .toast { bottom: 32px; }
  .page.ranking { max-width: 880px; }
  .ranking-wrap .large-title { max-width: 880px; }
  .scope-bar { margin: 0; padding: 2px 0; flex-wrap: wrap; overflow: visible; }
  .period-pills { margin: 0; padding: 0; }
  .period-pills button { padding: 10px 18px; font-size: 12.5px; letter-spacing: 0.1em; }
}
@keyframes cover-in-desk { from { transform: translateY(24px); opacity: 0; } }
@keyframes cover-out-desk { to { transform: translateY(24px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Jogo no celular: com as bandeiras na barra, o título sai (as abas Preço / Tamanho / Peso já dizem onde está). */
@media (max-width: 430px) {
  .cover .navbar.inline .inline-title { display: none; }
}