/* MU GAME Hard: páginas simples do site oficial (regras, desafios, confirmar pagamento, nova senha, compras) */
.rg-idx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 14px; padding: 12px 16px 14px; }
.rg-idx a { display: flex; gap: 8px; padding: 5px 0; font-size: 13px; color: var(--ink-2); border-bottom: 1px dashed var(--line); }
.rg-idx a:hover { color: var(--red); }
.rg-idx b { font: 600 13px var(--f-mono); color: var(--red); }
.rg .pn-h h2 { white-space: normal; }
.rg-n { font: 700 13px var(--f-mono); color: #fff; background: var(--red); padding: 2px 7px; }
.rg-b { padding: 4px 18px 14px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.rg-b p { margin: 10px 0; }
.rg-b b { color: var(--ink); }
.rg-b ul { margin: 8px 0; padding-left: 20px; }
.rg-b li { margin: 3px 0; }
.rg-call { padding: 9px 12px; background: var(--red-soft); border-left: 3px solid var(--red); color: var(--ink); }
.rg-tw { overflow-x: auto; margin: 10px 0; }
.rg-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rg-t th { padding: 7px 8px; text-align: left; font-weight: 600; color: var(--ink-3); border-bottom: 2px solid var(--ink); }
.rg-t td { padding: 7px 8px; border-bottom: 1px dashed var(--line); }
.rg-t td span { font-weight: 600; color: var(--red-2); }
.rg-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 18px; background: var(--plate); border: 1px solid var(--line); }
.rg-end p { flex: 1 1 100%; margin: 0; font-size: 13.5px; color: var(--ink-2); }
.cf-frame { display: flex; justify-content: center; padding: 16px; background: var(--plate-2); }
.cf-frame iframe { width: 580px; max-width: 100%; height: 860px; border: 0; background: #fff; }
.hc-lista { display: grid; }
.hc-item { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px dashed var(--line); }
.hc-q b { display: block; font: 600 17px var(--f-disp); color: var(--ink); }
.hc-q small, .hc-o small, .hc-p small { display: block; font-size: 11.5px; color: var(--ink-3); }
.hc-o span { font-size: 13.5px; color: var(--ink); }
.hc-p { text-align: right; }
.hc-p b { font: 600 17px var(--f-disp); color: var(--gold); }
.hd-ok .note-pad { font-size: 14px; }
.steps a, .note-pad a, .hd-vazio a { color: var(--red); font-weight: 600; }
.lnk-pg { display: block; width: 100%; margin-top: 8px; padding: 4px; border: 0; background: none; cursor: pointer; font: 600 12.5px var(--f-body); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.lnk-pg:hover { color: var(--red); }
.px-box { width: 640px; }
.px-pay { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding: 16px 18px 4px; }
.px-qr { display: grid; place-items: center; width: 220px; height: 220px; padding: 10px; background: #fff; border: 1px solid var(--line); }
.px-qr img, .px-qr canvas { display: block; width: 200px !important; height: 200px !important; }
.px-d .kv { margin: 0 0 8px; }
.px-k { margin: 10px 0 4px; font: 600 11.5px var(--f-body); color: var(--ink-3); }
.px-cc { display: flex; gap: 6px; }
.px-cc input { flex: 1; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--line-2); background: var(--plate-2); font: 400 12px var(--f-mono); color: var(--ink); }
.px-warn { margin: 12px 0 0; padding: 8px 10px; font-size: 12.5px; color: var(--red-2); background: var(--red-soft); border-left: 3px solid var(--red); }
.px-form { padding: 14px 18px 4px; }
.px-form .reg-grid { margin: 0; }
.px-lead { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); }
.px-obs { margin-top: 12px; }
.px-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.px-e { color: var(--red-2) !important; }
.px-fb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding: 10px; background: var(--plate-2); border-left: 3px solid var(--red); }
.px-fb p { flex: 1 1 100%; margin: 0; font-size: 13px; }
.px-ok { padding: 18px; font-size: 13.5px; color: var(--ink-2); }
.px-ok > b { display: block; font: 600 20px var(--f-disp); color: var(--ok); }

/* 08/11: Confirmar pagamento com formulário próprio (EmailJS) */
.cf-form { padding: 16px 18px 18px; }
.cf-form .cf-l { display: block; margin-top: 12px; }
.cf-form select, .cf-form textarea { width: 100%; font: inherit; }
.cf-form .erro { border-color: var(--red) !important; }
.cf-act { margin-top: 16px; }
.cf-ok { margin: 16px 18px 18px; }
.cf-form .fld2 select, .cf-form .fld2 textarea { padding: 0 12px; border: 1px solid var(--line-2); border-radius: 0; background: var(--plate); font: 500 14px var(--f-body); color: var(--ink); }
.cf-form .fld2 select { height: 42px; }
.cf-form .fld2 textarea { padding: 10px 12px; resize: vertical; min-height: 80px; }
.cf-form .fld2 select:focus, .cf-form .fld2 textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20, 26, 32, .08); }
.px-fb[hidden], .px-e[hidden], .cf-ok[hidden], .cf-form[hidden] { display: none !important; }