:root{--cream:#f4f0e7;--paper:#fffdf8;--ink:#18221e;--green:#285441;--green2:#3d6b57;--gold:#c99448;--mist:#e1e9e2;--line:#d8d5cb;--shadow:0 14px 40px #24372c13}
*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans",sans-serif}.hidden{display:none!important}button,input,textarea,select{font:inherit}.topbar{height:76px;padding:12px max(20px,calc((100vw - 1040px)/2));display:flex;align-items:center;justify-content:space-between;background:#f4f0e7e8;backdrop-filter:blur(12px);position:sticky;top:0;z-index:5}.brand{display:flex;gap:10px;align-items:center;border:0;background:none;text-align:left;color:var(--ink)}.brand-mark{width:42px;height:42px;border-radius:50% 50% 46% 54%;display:grid;place-items:center;background:var(--green);color:white;font-family:"Playfair Display";font-size:24px}.brand b{display:block;letter-spacing:2px;font-size:13px}.brand small{display:block;color:var(--green);font-size:10px}.ghost{border:1px solid var(--green);color:var(--green);background:transparent;border-radius:20px;padding:8px 14px}main{max-width:1040px;margin:auto;padding:34px 20px 130px}.page{display:none;animation:rise .28s ease}.page.active{display:block}@keyframes rise{from{opacity:0;transform:translateY(8px)}}.hero{max-width:750px;padding:38px 0 30px}.hero.compact{padding-top:16px}.eyebrow{color:var(--gold)!important;text-transform:uppercase;letter-spacing:2.5px;font-weight:700;font-size:12px}.hero h1{font-family:"Playfair Display",serif;font-size:clamp(43px,8vw,76px);line-height:.99;margin:12px 0 18px;letter-spacing:-2px}.hero.compact h1{font-size:clamp(40px,7vw,62px)}.hero>p:last-child{font-size:17px;line-height:1.6;max-width:630px;color:#526059}.mission{display:flex;justify-content:space-between;gap:24px;align-items:end;background:var(--green);color:white;border-radius:28px;padding:28px 32px;box-shadow:var(--shadow)}.mission span,.result small{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:1.5px}.mission h2{font-family:"Playfair Display";font-size:31px;margin:10px 0 4px}.mission p{color:#d8e2dc}.mission code{background:#ffffff14;padding:2px 7px;border-radius:5px}.gold-btn,.primary{border:0;border-radius:14px;padding:15px 20px;background:var(--gold);color:var(--ink);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.6px;cursor:pointer}.primary{background:var(--green);color:white;width:100%}.section-title{margin:30px 0 14px;font-family:"Playfair Display";font-size:24px}.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}.tile{text-align:left;border:0;border-radius:22px;padding:22px;background:var(--paper);box-shadow:var(--shadow);display:flex;flex-direction:column;color:var(--ink);cursor:pointer}.tile.wide{grid-column:1/-1}.tile i{font-style:normal;color:var(--green);font-size:27px}.tile small{margin-top:22px;color:var(--gold);font-weight:700}.tile b{font-family:"Playfair Display";font-size:23px;margin:3px 0}.tile span{color:#68746e;font-size:13px}.lesson-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.lesson{border:0;background:var(--paper);border-radius:20px;padding:18px;text-align:left;color:var(--ink);display:grid;grid-template-columns:48px 1fr;gap:14px;cursor:pointer;box-shadow:var(--shadow)}.lesson .icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--mist);color:var(--green);font-size:21px}.lesson small{color:var(--gold);font-weight:700}.lesson b{display:block;font-family:"Playfair Display";font-size:20px;margin:3px 0}.lesson p{margin:0;color:#69746e;font-size:13px}.lesson-detail{max-width:740px}.lesson-detail h2{font-family:"Playfair Display";font-size:40px}.lesson-detail section{background:var(--paper);padding:20px;border-radius:18px;margin:12px 0}.lesson-detail h3{color:var(--green);margin-top:0}.back{border:0;background:none;color:var(--green);font-weight:700;padding:10px 0}.panel{max-width:720px;background:var(--paper);padding:25px;border-radius:25px;box-shadow:var(--shadow)}label{display:block;text-transform:uppercase;letter-spacing:1px;font-size:11px;font-weight:700;color:var(--gold);margin:16px 0}input,textarea,select{display:block;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:13px;padding:13px;background:white;color:var(--ink);text-transform:none;letter-spacing:normal;outline:none}textarea{resize:vertical}input:focus,textarea:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 3px #28544116}.switch{display:grid;grid-template-columns:1fr 1fr;background:var(--mist);padding:4px;border-radius:14px}.switch button{border:0;border-radius:11px;padding:10px;background:transparent;color:var(--green)}.switch button.active{background:white;box-shadow:0 3px 10px #00000010;font-weight:700}.result{background:var(--green);color:white;border-radius:17px;padding:18px;margin-top:16px;overflow-wrap:anywhere}.result output{display:block;font-size:18px;margin:9px 0;white-space:pre-wrap}.copy{border:1px solid #ffffff55;background:transparent;color:white;border-radius:10px;padding:7px 12px}.notice{display:flex;flex-direction:column;background:var(--mist);border-radius:16px;padding:16px;color:var(--green)}.notice span{font-size:13px;color:#52645a;margin-top:4px}.success{color:var(--green);font-weight:700}.custom-list{display:grid;gap:8px}.custom-card{display:flex;justify-content:space-between;background:var(--mist);border-radius:14px;padding:14px}.custom-card button{border:0;background:none;color:#9b4038}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:82px;padding-bottom:env(safe-area-inset-bottom);background:#fffdf8ed;backdrop-filter:blur(15px);display:flex;justify-content:center;border-top:1px solid #ddd9cf;z-index:10}.bottom-nav button{width:min(150px,20%);border:0;background:none;color:#768079;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10px}.bottom-nav i{font-style:normal;font-size:21px}.bottom-nav button.active{color:var(--green);font-weight:700}.bottom-nav button.active i{background:var(--mist);border-radius:20px;padding:2px 15px}
@media(max-width:640px){main{padding-top:8px}.topbar{height:66px}.hero{padding-top:20px}.mission{align-items:stretch;flex-direction:column;padding:24px}.mission button{width:100%}.lesson-list{grid-template-columns:1fr}.panel{padding:18px}.tiles{gap:10px}.tile{padding:18px}.tile b{font-size:20px}.bottom-nav span{font-size:9px}}
.concept-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 18px}.concept-strip div{background:var(--paper);border-top:3px solid var(--gold);border-radius:14px;padding:15px;box-shadow:var(--shadow)}.concept-strip b,.concept-strip span{display:block}.concept-strip b{color:var(--green);margin-bottom:5px}.concept-strip span{font-size:12px;line-height:1.45;color:#65716a}.filters{display:flex;gap:8px;overflow-x:auto;padding:4px 0 18px}.filters button{white-space:nowrap;border:1px solid var(--line);background:var(--paper);color:var(--green);border-radius:20px;padding:8px 13px;font-size:12px}.filters button.active{background:var(--green);color:white;border-color:var(--green)}.method-context{background:var(--mist);border-radius:14px;padding:14px;margin-top:14px}.method-context b,.method-context span{display:block}.method-context b{color:var(--green)}.method-context span{font-size:12px;color:#5d6b64;margin-top:3px;line-height:1.45}.secondary{width:100%;border:1px solid var(--green);color:var(--green);background:transparent;border-radius:14px;padding:12px;font-weight:700;margin:0 0 12px}@media(max-width:640px){.concept-strip{grid-template-columns:1fr}}
.method-steps{padding-left:22px;margin:0}.method-steps li{padding:4px 0 4px 5px;line-height:1.55}.practical-examples{display:grid;gap:10px}.practical-examples article{border:1px solid var(--line);border-radius:13px;padding:13px}.practical-examples b,.practical-examples code,.practical-examples span{display:block}.practical-examples code{background:var(--mist);color:var(--green);padding:9px;border-radius:8px;margin:7px 0;white-space:normal;overflow-wrap:anywhere}.practical-examples span{font-size:13px;color:#637069;line-height:1.45}.lesson-detail .lab-guide{background:var(--green);color:white}.lesson-detail .lab-guide h3{color:var(--gold)}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field-grid label{margin-top:8px}.check-label{display:flex;align-items:center;gap:9px;color:var(--green);text-transform:none;letter-spacing:normal}.check-label input{width:auto;margin:0;accent-color:var(--green)}.sequence-preview{background:var(--mist);border-radius:13px;padding:14px;margin:10px 0 16px;color:var(--green);font-size:13px;line-height:1.5}.sequence-preview b,.sequence-preview code{display:block}.sequence-preview code{margin-top:5px;font-size:14px;overflow-wrap:anywhere}@media(max-width:520px){.field-grid{grid-template-columns:1fr}}
.bottom-nav button{width:min(180px,25%)}.variant-list{display:grid;gap:10px}.variant-list article{border-left:3px solid var(--gold);padding:3px 0 3px 13px}.variant-list b,.variant-list span{display:block}.variant-list span{color:#637069;font-size:13px;line-height:1.5;margin-top:3px}.history-detail{line-height:1.65}
.text-actions{display:flex;gap:8px;margin:-8px 0 14px;flex-wrap:wrap}.text-actions button{border:1px solid var(--line);background:white;color:var(--green);border-radius:10px;padding:8px 12px;font-size:12px;font-weight:700}
.external-links{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.external-links a{text-align:center;text-decoration:none;border:1px solid var(--green);color:var(--green);border-radius:12px;padding:11px 8px;font-weight:700}.external-links a:first-child{background:#a52d2d;color:white;border-color:#a52d2d}.external-note{font-size:12px;color:#6b756f;margin:10px 0 0}@media(max-width:420px){.external-links{grid-template-columns:1fr}}
.result-actions{display:flex;gap:8px;flex-wrap:wrap}.transformation-detail{margin-top:14px;background:#f8f5ed;border:1px solid var(--line);border-radius:17px;padding:18px;color:var(--ink)}.transformation-detail h3{font-family:"Playfair Display",Georgia,serif;color:var(--green);margin:0 0 12px}.transformation-detail ol{padding-left:22px}.transformation-detail li{margin:8px 0;line-height:1.5}.trace-grid{display:grid;gap:6px;margin-top:12px}.trace-row{display:grid;grid-template-columns:minmax(44px,.7fr) minmax(110px,2fr) minmax(44px,.7fr);gap:8px;align-items:center;background:white;border-radius:9px;padding:8px}.trace-row code:nth-child(2){color:var(--green);text-align:center}.trace-row code:last-child{text-align:right;font-weight:700}.detail-note{font-size:12px;color:#65716a;margin-top:12px}@media(max-width:480px){.trace-row{grid-template-columns:42px 1fr 42px;font-size:11px}}

/* --- SISTEMA DE TEMAS E ACENTOS (INSPIRADO NO INVINO) --- */

:root {
  --primary-light: rgba(40, 84, 65, 0.1);
  --on-primary: #ffffff;
}

/* Modo Claro - Configurações das Cores de Destaque */
.light.theme-default { --green: #171717; --on-primary: #ffffff; --primary-light: rgba(23,23,23,0.1); }
.light.theme-green   { --green: #14532d; --on-primary: #ffffff; --primary-light: rgba(20,83,45,0.1); }
.light.theme-blue    { --green: #1e3a8a; --on-primary: #ffffff; --primary-light: rgba(30,58,138,0.1); }
.light.theme-red     { --green: #7f1d1d; --on-primary: #ffffff; --primary-light: rgba(127,29,29,0.1); }
.light.theme-purple  { --green: #581c87; --on-primary: #ffffff; --primary-light: rgba(88,28,135,0.1); }

/* Modo Escuro - Configurações Gerais */
.dark {
  --cream: #121212;
  --paper: #1c1c1e;
  --ink: #f4f0e7;
  --gold: #e5a954;
  --mist: #2c2c2e;
  --line: rgba(255,255,255,0.12);
  --shadow: 0 14px 40px rgba(0,0,0,0.45);
}

/* Modo Escuro - Configurações das Cores de Destaque */
.dark.theme-default { --green: #f5f5dc; --on-primary: #1e293b; --primary-light: rgba(245,245,220,0.15); }
.dark.theme-green   { --green: #4ade80; --on-primary: #064e3b; --primary-light: rgba(74,222,128,0.2); }
.dark.theme-blue    { --green: #60a5fa; --on-primary: #1e3a8a; --primary-light: rgba(96,165,250,0.2); }
.dark.theme-red     { --green: #fb923c; --on-primary: #431407; --primary-light: rgba(251,146,60,0.2); }
.dark.theme-purple  { --green: #facc15; --on-primary: #1e293b; --primary-light: rgba(250,204,21,0.2); }

/* Transição global suave de cores */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Overrides das barras principais para seguir a cor de destaque */
.topbar {
  height: auto !important;
  padding-top: calc(18px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: 14px !important;
  background: var(--green) !important;
  color: var(--on-primary) !important;
  transition: background 0.3s ease, color 0.3s ease;
}
.brand {
  color: var(--on-primary) !important;
}
.brand b {
  color: var(--on-primary) !important;
}
.brand small {
  color: var(--on-primary) !important;
  opacity: 0.8;
}

/* Ícone da App no Cabeçalho */
.app-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Botão de Definições no Cabeçalho */
.settings-btn {
  border: 0;
  background: none;
  color: var(--on-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
  transition: background 0.2s ease, transform 0.2s ease;
}
.settings-btn:active {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(0.95);
}

/* Barra inferior seguindo o destaque */
.bottom-nav {
  background: var(--green) !important;
  border-top: 1px solid rgba(255,255,255,0.15) !important;
  transition: background 0.3s ease;
}
.bottom-nav button {
  color: var(--on-primary) !important;
  opacity: 0.65;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.bottom-nav button.active {
  opacity: 1 !important;
  color: var(--on-primary) !important;
}
.bottom-nav button.active i {
  background: rgba(255, 255, 255, 0.18) !important;
}

/* Componentes de Formulário Adaptáveis ao Tema */
input, textarea, select {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px var(--primary-light) !important;
}

.switch {
  background: var(--mist) !important;
}
.switch button {
  color: var(--green) !important;
}
.switch button.active {
  background: var(--paper) !important;
  color: var(--green) !important;
}

.text-actions button {
  background: var(--paper) !important;
  color: var(--green) !important;
  border: 1px solid var(--line) !important;
}

/* Overrides de Contraste para elementos coloridos com destaque */
.primary {
  background: var(--green) !important;
  color: var(--on-primary) !important;
}
.mission {
  background: var(--green) !important;
  color: var(--on-primary) !important;
}
.mission h2, .mission p {
  color: var(--on-primary) !important;
}
.result {
  background: var(--green) !important;
  color: var(--on-primary) !important;
}
.copy {
  border: 1px solid var(--on-primary) !important;
  color: var(--on-primary) !important;
}

/* Estilos de Controlo Segmentado (Definições) */
.segmented-control {
  display: flex;
  gap: 4px;
  background: var(--mist) !important;
  border-radius: 12px;
  padding: 4px;
  margin-top: 8px;
}
.segmented-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.segmented-item.active {
  background: var(--green) !important;
  color: var(--on-primary) !important;
}
.segmented-item svg {
  flex-shrink: 0;
  stroke: currentColor;
}

/* Círculos da Cor de Destaque */
.accent-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: transparent;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.accent-circle.active {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}

/* Adaptação de Outros Elementos de Interface */
.concept-strip div {
  background: var(--paper) !important;
  border-top: 3px solid var(--green) !important;
}
.concept-strip b {
  color: var(--green) !important;
}

.filters button {
  background: var(--paper) !important;
  color: var(--green) !important;
  border: 1px solid var(--line) !important;
}
.filters button.active {
  background: var(--green) !important;
  color: var(--on-primary) !important;
  border-color: var(--green) !important;
}

.lesson-detail section {
  background: var(--paper) !important;
}
.lesson-detail h3 {
  color: var(--green) !important;
}
.back {
  color: var(--green) !important;
}
.external-links a {
  border: 1px solid var(--green) !important;
  color: var(--green) !important;
}
.lesson-detail .lab-guide {
  background: var(--green) !important;
  color: var(--on-primary) !important;
}
.trace-row {
  background: var(--cream) !important;
}
.trace-row code:nth-child(2) {
  color: var(--green) !important;
}
.transformation-detail {
  background: var(--mist) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
.transformation-detail h3 {
  color: var(--green) !important;
}

/* --- AJUSTES DE CONTRASTE E TIPOGRAFIA PARA PLAYSTORE --- */

/* Redução do tamanho do título "Descobre..." e outros H1 */
.hero h1 {
  font-size: clamp(30px, 6.5vw, 44px) !important;
  line-height: 1.05 !important;
  letter-spacing: -1.2px !important;
}
.hero.compact h1 {
  font-size: clamp(26px, 5.5vw, 36px) !important;
}

/* Forçar contraste escuro no botão de ouro */
.gold-btn {
  color: #18221e !important;
}

/* Ajustes de contraste para textos secundários no Modo Escuro */
.dark .hero > p:last-child {
  color: var(--ink) !important;
  opacity: 0.8 !important;
}
.dark .concept-strip span {
  color: var(--ink) !important;
  opacity: 0.75 !important;
}
.dark .tile span {
  color: var(--ink) !important;
  opacity: 0.75 !important;
}
.dark .lesson p {
  color: var(--ink) !important;
  opacity: 0.75 !important;
}
.dark .practical-examples span {
  color: var(--ink) !important;
  opacity: 0.75 !important;
}
.dark .variant-list span {
  color: var(--ink) !important;
  opacity: 0.75 !important;
}
.dark .method-context span {
  color: var(--ink) !important;
  opacity: 0.8 !important;
}
.dark .notice span {
  color: var(--ink) !important;
  opacity: 0.8 !important;
}
.dark .notice {
  background: var(--mist) !important;
  color: var(--green) !important;
}
.dark ::placeholder {
  color: var(--ink) !important;
  opacity: 0.45 !important;
}

/* Ajuste dos filtros para evitar scroll horizontal (quebra em várias linhas) */
.filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 6px !important;
  overflow-x: visible !important;
  padding: 6px 0 16px !important;
}
.filters button {
  padding: 6px 11px !important;
  font-size: 11.5px !important;
  border-radius: 16px !important;
  margin: 0 !important;
}

/* Ajustes de contraste para a cor dourada */
.light {
  --gold: #854d0e !important; /* Dourado escuro de alto contraste para textos em fundo claro */
}
.dark {
  --gold: #e5a954 !important; /* Dourado brilhante para textos em fundo escuro */
}

/* Otimização da cor dourada para elementos com fundo dinâmico var(--green) */
.light .mission span, 
.light .result small, 
.light .lesson-detail .lab-guide h3 {
  color: #e5a954 !important; /* Dourado brilhante para destacar no fundo verde-escuro (Modo Claro) */
}
.dark .mission span, 
.dark .result small, 
.dark .lesson-detail .lab-guide h3 {
  color: #854d0e !important; /* Dourado escuro de alto contraste para destacar no fundo verde-claro (Modo Escuro) */
}

/* Fix da cor secundária do topbar no Modo Escuro */
.topbar .brand small {
  color: var(--on-primary) !important;
  opacity: 0.8 !important;
}

/* Garante o contraste de todo o texto dentro de .mission no Modo Escuro */
.dark .mission {
  color: var(--on-primary) !important;
}
.dark .mission h2 {
  color: var(--on-primary) !important;
}
.dark .mission p {
  color: var(--on-primary) !important;
  opacity: 0.85 !important;
}
.dark .mission code {
  background: rgba(0, 0, 0, 0.1) !important;
  color: var(--on-primary) !important;
}

/* Garante o contraste de todo o texto dentro de .result no Modo Escuro */
.dark .result {
  color: var(--on-primary) !important;
}
.dark .result output {
  color: var(--on-primary) !important;
}
.dark .result .copy {
  border-color: var(--on-primary) !important;
  color: var(--on-primary) !important;
}

/* Garante o contraste de todo o texto dentro do Guia de Laboratório no Modo Escuro */
.dark .lesson-detail .lab-guide {
  color: var(--on-primary) !important;
}
.dark .lesson-detail .lab-guide h3 {
  color: var(--on-primary) !important;
}
.dark .lesson-detail .lab-guide code {
  background: rgba(0, 0, 0, 0.1) !important;
  color: var(--on-primary) !important;
}

/* O botão dourado deve manter o fundo dourado claro e texto escuro para legibilidade */
.gold-btn {
  background: #c99448 !important;
  color: #18221e !important;
}
.dark .gold-btn {
  background: #e5a954 !important;
  color: #121212 !important;
}

/* Forçar caixa alta nos cartões de lições na biblioteca, agora tratado via CSS */
.lesson small {
  text-transform: uppercase !important;
}

/* Estilos do Dropdown do Latin Apps */
.latin-dropdown {
  position: absolute;
  top: 100%;
  left: max(20px, calc((100vw - 1040px) / 2));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.2);
  padding: 20px;
  width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 100;
  animation: slideDown 0.25s ease-out;
  margin-top: 8px;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.latin-logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.latin-shield-svg {
  width: 60px;
  height: 72px;
}

.latin-apps-text {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #7f1d1d;
  letter-spacing: 0.5px;
}

.dark .latin-apps-text {
  color: #e5a954; /* Adapta-se ao tom dourado no modo escuro */
}

.latin-dropdown .divider {
  width: 100%;
  height: 1px;
  background: var(--line);
  margin: 16px 0;
}

.latin-info {
  text-align: center;
}

.latin-info h3 {
  font-family: "Playfair Display", serif;
  margin: 0 0 6px 0;
  font-size: 18px;
  color: var(--ink);
}

.latin-info p {
  margin: 4px 0;
  font-size: 13px;
  color: var(--ink);
}

.latin-info .author {
  font-weight: 700;
  color: var(--green);
}

.latin-info .date {
  opacity: 0.7;
}

/* --- MULTIJOGADOR EM REDE (CELATUM) --- */
.mp-screen {
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.player-list-container {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.player-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: transform 0.2s ease;
}

.player-item:hover {
  transform: translateX(3px);
}

.player-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.player-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green);
  color: var(--on-primary);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
}

.player-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

.player-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.player-badge.lobby {
  background: rgba(40, 84, 65, 0.15);
  color: var(--green);
}
.player-badge.active {
  background: rgba(201, 148, 72, 0.15);
  color: var(--gold);
}
.player-badge.solved {
  background: var(--green);
  color: var(--on-primary);
}
.player-badge.forfeit {
  background: rgba(165, 45, 45, 0.15);
  color: #a52d2d;
}

/* Animação de Pulso */
.pulse-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}

.pulse-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold);
  position: relative;
}

.pulse-circle::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  animation: pulseAnim 1.5s infinite ease-out;
  opacity: 0;
}

@keyframes pulseAnim {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}

/* Caixa da cifra em destaque */
.ciphertext-box {
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.dark .ciphertext-box {
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.4);
}

/* Badge do Cronómetro */
.timer-badge {
  font-family: monospace;
  font-weight: 700;
  font-size: 16px;
  color: var(--gold);
  background: rgba(201, 148, 72, 0.15);
  padding: 4px 10px;
  border-radius: 8px;
}