/* Janelas do jogo no desenho da página inicial (Leo, 02/10/2026): perfil, ranking, trocas, online, entrar, conta, regras, opções,
   histórico, resultado e confirmações. Fundo noturno, moldura dourada fina com filete interno, cantos quase retos, títulos na fonte gótica,
   botões como placas de ouro e tinta, campos de tinta com foco dourado. Só visual. A ficha da carta (cardInfo) e a ficha da coleção (cxInspect)
   já têm desenho próprio e ficam de fora. Carregado por último. */
dialog:not(.cardInfo):not(.cxInspect) {
  --edge: #e8c98b2e;
  background: linear-gradient(180deg, #1b1424f7, #0f0b15f7); color: #f1e6cc; font-family: var(--e-body, 'Alegreya Sans', system-ui, sans-serif);
  border: 1px solid #e8c98b66; border-radius: 4px; box-shadow: inset 0 0 0 4px #120d18, inset 0 0 0 5px #e8c98b1f, 0 40px 90px -20px #000; padding: 30px 32px;
  scrollbar-width: thin; scrollbar-color: #e8c98b66 transparent;
}
dialog:not(.cardInfo):not(.cxInspect)::backdrop { background: rgba(5, 3, 10, .78); backdrop-filter: blur(4px); }
dialog:not(.cardInfo):not(.cxInspect) :is(h1, h2, h3) { font-family: var(--e-display, 'Grenze Gotisch', Georgia, serif); color: #e8c98b; font-weight: 700; letter-spacing: .01em; text-shadow: 0 0 22px #e8c98b2e; }
dialog:not(.cardInfo):not(.cxInspect) h2 { font-size: clamp(30px, 3.2vw, 40px); margin: 6px 0 14px; line-height: 1.05; }
dialog:not(.cardInfo):not(.cxInspect) h3 { font-size: 24px; margin: 22px 0 8px; display: flex; align-items: center; gap: 10px; }
dialog:not(.cardInfo):not(.cxInspect) h3::before { content: ''; width: 7px; height: 7px; rotate: 45deg; background: #e8c98b; box-shadow: 0 0 8px #e8c98b88; flex: none; }
dialog:not(.cardInfo):not(.cxInspect) > small, dialog:not(.cardInfo):not(.cxInspect) > div > small:first-child {
  font: 500 12.5px var(--e-body, sans-serif); letter-spacing: .26em; text-transform: uppercase; color: #e8c98b; display: block;
}
dialog:not(.cardInfo):not(.cxInspect) p { color: #e9e1f0; font-size: 17px; line-height: 1.55; }
dialog:not(.cardInfo):not(.cxInspect) a { color: #a6e8ff; }
dialog:not(.cardInfo):not(.cxInspect) hr { border: 0; border-top: 1px solid #e8c98b2e; }

/* Botões: placas de ouro e tinta */
dialog:not(.cardInfo):not(.cxInspect) button {
  position: relative; border-radius: 4px; padding: 9px 18px; border: 1px solid #e8c98b55; background: linear-gradient(180deg, #1f1727, #120d18); color: #f1e6cc;
  font: 700 14.5px/1.1 var(--e-display, Georgia, serif); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff12, 0 6px 14px -8px #000; transition: border-color .18s, color .18s, transform .16s cubic-bezier(.22,1,.36,1), box-shadow .2s, background .2s;
}
dialog:not(.cardInfo):not(.cxInspect) button:hover:not(:disabled) { border-color: #e8c98bcc; color: #fff6e0; transform: translateY(-1px); background: linear-gradient(180deg, #2a1f1a, #150e13); box-shadow: inset 0 1px 0 #ffffff1a, 0 10px 20px -10px #000, 0 0 18px -6px #e8c98b88; }
dialog:not(.cardInfo):not(.cxInspect) button:active:not(:disabled) { transform: translateY(1px); }
dialog:not(.cardInfo):not(.cxInspect) button:disabled { opacity: .45; cursor: default; }
dialog:not(.cardInfo):not(.cxInspect) button:focus-visible { outline: 2px solid #fff3d6; outline-offset: 2px; }
dialog:not(.cardInfo):not(.cxInspect) :is(button.primary, button#fight, #fight, .primary) {
  background: linear-gradient(180deg, #f0d28d, #d3a955); color: #1d1218; border-color: #f3d896; box-shadow: 0 8px 18px -8px #000, inset 0 1px 0 #fff8;
}
dialog:not(.cardInfo):not(.cxInspect) :is(button.primary, #fight, .primary):hover:not(:disabled) { background: linear-gradient(180deg, #ffe9b0, #e3b861); color: #1d1218; box-shadow: 0 10px 22px -8px #000, 0 0 22px -2px #ffd98acc, inset 0 1px 0 #fffa; }
dialog:not(.cardInfo):not(.cxInspect) button.close { float: right; padding: 6px 12px; font-size: 12.5px; letter-spacing: .1em; background: transparent; box-shadow: none; }
dialog:not(.cardInfo):not(.cxInspect) :is(.link, button.link) { background: none !important; border: 0 !important; box-shadow: none !important; padding: 4px !important; font: 500 16px var(--e-body, sans-serif) !important; letter-spacing: 0 !important; text-transform: none !important; color: #a6e8ff !important; text-decoration: underline; }

/* Campos */
dialog:not(.cardInfo):not(.cxInspect) :is(input, select, textarea) { background: #0e0a14; border: 1px solid #e8c98b33; border-radius: 3px; color: #f1e6cc; font: 17px var(--e-body, sans-serif); }
dialog:not(.cardInfo):not(.cxInspect) :is(input, select, textarea):focus { border-color: #e8c98b; box-shadow: 0 0 0 3px #e8c98b22; outline: none; }
dialog:not(.cardInfo):not(.cxInspect) :is(input, textarea)::placeholder { color: #a79bb3; }
.onlineForm label { color: #e9e1f0; font-size: 16px; }
.onlineForm .hint, .onlineNote { color: #d9cfe3 !important; }
.onlineError { color: #ff8f9f !important; }

/* Quadros internos */
.onlineGrid > div, .onlineRow, .onlineAlert, .onlineTableWrap, .onlineTiers > *, .onlineCode {
  background: linear-gradient(180deg, #1a1322e6, #100b16e6) !important; border: 1px solid #e8c98b2e !important; border-radius: 4px !important; box-shadow: inset 0 0 0 3px #120d18, inset 0 0 0 4px #e8c98b18;
}
.onlineTiers > * { border-radius: 3px !important; box-shadow: none; color: #f1e6cc; }
.onlineAlert { border-left: 3px solid #e8c98b !important; }
.onlineCode { font-family: var(--e-display, Georgia, serif); color: #e8c98b; border-style: dashed !important; }
.onlineGrid h3 { margin-top: 4px; }
.onlineRow small { color: #d9cfe3; }
.onlineTabs button.on, .onlineTabs button[aria-pressed=true] { background: linear-gradient(180deg, #ffe9b0, #e3b861); color: #1d1218; border-color: transparent; }
.onlineTable th { background: #120d18; color: #e8c98b; font: 500 12.5px var(--e-body, sans-serif); letter-spacing: .2em; border-bottom: 1px solid #e8c98b55; }
.onlineTable td { color: #f1e6cc; border-top: 1px solid #e8c98b1a; }
.onlineTable tr.me td { background: #e8c98b1f; color: #ffe9b0; }
.onlineLevel b { font-family: var(--e-display, Georgia, serif); font-size: 38px; color: #e8c98b; text-shadow: 0 0 20px #e8c98b44; }
.onlineBar { height: 10px; border-radius: 2px; background: #0e0a14; border: 1px solid #e8c98b33; }
.onlineBar i { background: linear-gradient(90deg, #bd8d4c, #ffe9b0); }
.onlineWallet, .onlineWallet b, .onlineRewards { color: #f1e6cc; }
.onlineWallet b, .onlineRewards { color: #e8c98b; }

/* Regras, opções, histórico, resultado */
dialog#rules .step, dialog#rules li, dialog#rules .ruleBox { border-color: #e8c98b2e; }
dialog#rules b { color: #ffe9b0; }
dialog#result .resultStats > div, dialog#historyDialog p { border-color: #e8c98b2e; }
dialog#result h2 { font-size: clamp(38px, 5vw, 56px); }
dialog:not(.cardInfo):not(.cxInspect) :is(label, .optRow) { color: #f1e6cc; }
dialog:not(.cardInfo):not(.cxInspect) input[type=range] { accent-color: #e8c98b; }
dialog:not(.cardInfo):not(.cxInspect) input[type=checkbox], dialog:not(.cardInfo):not(.cxInspect) input[type=radio] { accent-color: #e8c98b; width: auto; }

@media (max-width: 760px) { dialog:not(.cardInfo):not(.cxInspect) { padding: 22px 18px; } }
@media (prefers-reduced-motion: reduce) { dialog:not(.cardInfo):not(.cxInspect) button { transition: none; } }

/* ---- Opções (Leo, 02/10/2026): grupos, interruptores dourados e botão de fechar pequeno ---- */
dialog#options { width: min(640px, calc(100vw - 32px)); max-width: none; padding: 26px 30px 24px; }
dialog#options[open] { display: block !important; }
dialog#options .optHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
dialog#options .optHead h2 { margin: 2px 0 6px; }
dialog#options .optHead .close { float: none; flex: none; width: auto !important; min-width: 0; padding: 0; width: 36px !important; height: 36px; font-size: 15px; line-height: 1; display: grid; place-items: center; }
dialog#options .optGroup { margin-top: 14px; padding: 6px 16px 10px; border: 1px solid #e8c98b2e; border-radius: 4px; background: linear-gradient(180deg, #1a1322e6, #100b16e6); box-shadow: inset 0 0 0 3px #120d18, inset 0 0 0 4px #e8c98b18; }
dialog#options .optGroup h3 { margin: 8px 0 4px; font-size: 20px; }
dialog#options .optRow { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 0; border-top: 1px solid #e8c98b1a; cursor: pointer; }
dialog#options .optRow:first-of-type { border-top: 0; }
dialog#options .optText { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
dialog#options .optText b { font: 700 17px var(--e-body, sans-serif); color: #f1e6cc; }
dialog#options .optText small { font: 400 14px var(--e-body, sans-serif); color: #d9cfe3; letter-spacing: 0; text-transform: none; }
dialog#options select { width: auto; min-width: 210px; padding: 8px 12px; }
dialog#options .optSwitch { position: absolute; opacity: 0; width: 1px; height: 1px; }
dialog#options .optSw { flex: none; position: relative; width: 48px; height: 26px; border-radius: 13px; background: #0e0a14; border: 1px solid #e8c98b55; transition: background .2s, border-color .2s; }
dialog#options .optSw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #9a8ca6; transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s; }
dialog#options .optSwitch:checked + .optSw { background: linear-gradient(180deg, #6b5226, #4a3818); border-color: #e8c98b; }
dialog#options .optSwitch:checked + .optSw::after { transform: translateX(22px); background: linear-gradient(180deg, #ffe9b0, #e3b861); box-shadow: 0 0 10px #e8c98b99; }
dialog#options .optSwitch:focus-visible + .optSw { outline: 2px solid #fff3d6; outline-offset: 2px; }
dialog#options #clearHistory { width: 100%; margin-top: 6px; }
dialog#options .optGroup p { font-size: 14px; color: #d9cfe3; margin: 10px 0 2px; }
@media (max-width: 560px) { dialog#options .optRow { flex-wrap: wrap; } dialog#options select { width: 100%; } }
dialog#options { padding: 18px 26px 16px; }
dialog#options .optGroup { margin-top: 9px; padding: 2px 14px 6px; }
dialog#options .optGroup h3 { margin: 4px 0 0; font-size: 18px; }
dialog#options .optRow { padding: 6px 0; }
dialog#options .optText b { font-size: 16px; } dialog#options .optText small { font-size: 13px; }
dialog#options .optHead h2 { margin: 0 0 2px; font-size: 30px; }
@media (min-width: 761px) and (min-height: 700px) { dialog#options[open] { max-height: calc(100dvh - 24px); } }

/* Opções sem rolagem (Leo, 04/10/2026): duas colunas em telas largas e espaços enxutos; o diálogo cabe na altura da janela. */
dialog#options[open] { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 14px; align-content: start; width: min(900px, calc(100vw - 32px)); max-height: calc(100dvh - 16px); overflow: auto; padding: 14px 22px 14px; }
dialog#options .optHead { grid-column: 1 / -1; align-items: center; }
dialog#options .optHead h2 { font-size: 26px; margin: 0; }
dialog#options .optHead .close { width: 32px !important; height: 32px; }
dialog#options .optGroup { margin-top: 8px; padding: 0 14px 6px; }
dialog#options .optGroup h3 { margin: 6px 0 0; font-size: 17px; }
dialog#options .optRow { padding: 5px 0; gap: 12px; }
dialog#options .optText b { font-size: 15px; } dialog#options .optText small { font-size: 12.5px; line-height: 1.25; }
dialog#options select { min-width: 150px; padding: 5px 8px; max-width: 46%; }
dialog#options .optGroup:nth-of-type(4) { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 6px 14px; }
dialog#options .optGroup:nth-of-type(4) h3 { display: none; }
dialog#options .optGroup:nth-of-type(4) p { margin: 0; flex: 1; font-size: 12.5px; }
dialog#options #clearHistory { width: auto; margin: 0; flex: none; padding: 7px 14px; }
@media (max-width: 760px) { dialog#options[open] { grid-template-columns: 1fr; } dialog#options .optGroup:nth-of-type(4) { flex-wrap: wrap; } }
dialog#options[open] { gap: 8px 14px; align-items: start; }
dialog#options .optGroup { margin: 0; }
dialog#options .optGroup h3 { padding: 0; line-height: 1.2; }
dialog#options .optRow { min-height: 0; margin: 0; }
@media (min-width: 761px) {
  dialog#options .optGroup:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  dialog#options .optGroup:nth-of-type(2) { grid-column: 1; grid-row: 3; }
  dialog#options .optGroup:nth-of-type(3) { grid-column: 2; grid-row: 2 / 4; align-self: stretch; }
  dialog#options .optGroup:nth-of-type(4) { grid-row: 4; }
  dialog#options select { max-width: 58%; }
}

/* Idioma (07/10/2026): botões com bandeiras nas Opções. */
.langRow{display:flex;gap:8px;flex-wrap:wrap;padding:4px 2px 10px}
.langBtn{display:flex;align-items:center;gap:7px;padding:6px 11px 6px 8px;font-size:13px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:inherit;cursor:pointer;font:inherit;transition:border-color .15s,background .15s,transform .15s}
.langBtn svg{width:30px;height:21px;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.35);flex:none}
.langBtn:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}
.langBtn.on{border-color:#e8c98b;background:rgba(232,201,139,.16);box-shadow:0 0 0 1px #e8c98b inset}