/* MedRP · visual das páginas de cadastro, conta e textos (o mesmo creme do criador de personagem) */
:root{
  --ink:#0b121c;--night:#0e1626;--night2:#13203a;--line:#2b3d58;
  --cream:#f3efe4;--cream2:#fbf8f0;--paper3:#e6dac0;
  --aura:#ffbf4a;--red:#ff4d5a;--ok:#5ad38d;--okd:#1e7a46;--teal:#1f6f78;--teald:#164f56;--blued:#2c5aa0;
  --text:#1c2633;--mute:#5a6876;
  --f-logo:"Press Start 2P",ui-monospace,monospace;--f-ui:"Pixelify Sans",ui-rounded,system-ui,sans-serif;--f-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--night) url("/img/abertura-cena.png") center/cover fixed;color:var(--text);font:17px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;image-rendering:auto}
body::before{content:"";position:fixed;inset:0;background:rgba(7,11,20,.82);z-index:0}
a{color:var(--blued)}
:focus-visible{outline:3px solid var(--aura);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
.top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(1080px,calc(100% - 32px));margin:0 auto;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 15px/1 var(--f-logo);color:#fff;letter-spacing:.06em;text-shadow:0 2px 0 rgba(5,8,14,.7)}
.brand svg{width:26px;height:26px}
.top a.back{font:500 16px var(--f-ui);color:#dbe6f3;text-decoration:none}
.top a.back:hover{text-decoration:underline}
main{position:relative;z-index:1;display:grid;place-items:start center;padding:12px 16px 56px}
.card{width:min(460px,100%);background:var(--cream);border:3px solid var(--ink);border-radius:16px;box-shadow:0 8px 0 var(--ink);overflow:hidden}
.card.wide{width:min(780px,100%)}
.card-h{display:flex;align-items:center;gap:10px;background:var(--night);color:#fff;padding:14px 20px;border-bottom:3px solid var(--ink);font:400 12px var(--f-logo);letter-spacing:.08em}
.card-h svg{width:20px;height:20px}
.card-b{padding:24px 22px 26px}
h1{font:700 28px/1.15 var(--f-ui);margin:0 0 8px}
h2{font:700 22px/1.2 var(--f-ui);margin:28px 0 8px}
h3{font:700 18px/1.25 var(--f-ui);margin:20px 0 6px}
.sub{color:var(--mute);font-size:15.5px;margin:0 0 18px}
p{margin:0 0 12px}
label.f{display:block;font:600 14px var(--f-ui);letter-spacing:.02em;margin:14px 0 6px}
label.f small{font-weight:500;color:var(--mute)}
input[type=text],input[type=email],input[type=tel],select{width:100%;font:17px var(--f-body);padding:11px 12px;border:3px solid var(--ink);border-radius:10px;background:#fff;color:var(--text)}
input:focus,select:focus{outline:none;border-color:#d99a1c;box-shadow:0 0 0 3px rgba(255,191,74,.45)}
input[aria-invalid=true]{border-color:#a8323b;background:#fff7f8}
.hint{font-size:13.5px;color:#a8323b;margin:6px 0 0;min-height:0}
.hint.ok{color:var(--blued)}
.hint button{font:inherit;color:var(--blued);text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}
.check{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;font-size:15px;line-height:1.4;cursor:pointer}
.check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--teal)}
.ts{margin:12px 0 0}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;font:600 18px var(--f-ui);padding:13px 18px;margin-top:18px;border:3px solid var(--ink);border-radius:10px;background:var(--teal);color:#fff;cursor:pointer;box-shadow:0 5px 0 var(--ink);text-decoration:none;transition:transform .08s,box-shadow .08s}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 0 var(--ink)}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.btn:disabled{background:#9fb3b5;color:#eef3f3;cursor:not-allowed;box-shadow:0 5px 0 #5a6876;border-color:#5a6876}
.btn.gold{background:var(--aura);color:#1b1200}
.btn.ghost{background:#fff;color:var(--text)}
.btn.danger{background:#fff;color:#a8323b;border-color:#a8323b;box-shadow:0 5px 0 #6b1d24}
.btn.danger.full{background:#a8323b;color:#fff}
.link{display:block;margin:16px auto 0;font:500 15px var(--f-ui);color:var(--blued);background:none;border:0;cursor:pointer;text-decoration:underline;padding:4px}
.err{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:#fff1f2;border:2px solid #f3b3bb;color:#7a1d25;font-size:15px}
.info{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:#eef5ff;border:2px solid #b9d1f3;color:#1c3a66;font-size:15px}
.mail{background:#fff;border:2px solid var(--paper3);border-radius:10px;padding:10px 12px;font-size:15px;margin:0 0 14px;word-break:break-all}
.code{width:100%;font:400 30px/1 var(--f-logo);letter-spacing:.45em;text-align:center;padding:16px 0 16px .45em;border:3px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink)}
.code::placeholder{color:#c9c2b0}
.row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:12px;font-size:14.5px;color:var(--mute)}
.row button{font:500 15px var(--f-ui);color:var(--blued);background:none;border:0;padding:4px 0;cursor:pointer;text-decoration:underline}
.row button:disabled{color:#8a96a3;text-decoration:none;cursor:default}
.done{text-align:center}
.done .tick{width:64px;height:64px;margin:4px auto 14px;border-radius:50%;background:var(--okd);display:grid;place-items:center;border:3px solid var(--ink)}
.done .tick svg{width:30px;height:30px}
.done img{width:100%;height:auto;border:3px solid var(--ink);border-radius:10px;margin:16px 0 0}
.tip{font-size:14px;color:var(--mute);margin:12px 0 0;text-align:center}
.dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15.5px;background:#fff;border:2px solid var(--paper3);border-radius:10px;padding:12px 14px;margin:6px 0 4px}
.dl dt{font:600 14px var(--f-ui);color:var(--mute)}
.dl dd{margin:0;word-break:break-word}
.modal{position:fixed;inset:0;z-index:10;background:rgba(5,7,13,.8);display:grid;place-items:center;padding:16px}
.modal .card{max-width:440px}
.prose{font-size:16.5px}
.prose ul{padding-left:22px;margin:6px 0 12px}
.prose li{margin:4px 0}
.prose .ver{font:600 13px var(--f-ui);color:var(--mute)}
.spin{width:18px;height:18px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
footer.mini{position:relative;z-index:1;text-align:center;font-size:13.5px;color:#9fb0c3;padding:0 16px 30px}
footer.mini a{color:#cfe0f5}
@media (max-width:420px){.card-b{padding:20px 16px 22px}h1{font-size:25px}.code{font-size:24px}}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.spin{animation:none}}