/* Reino Rúnico — estilos */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: tela de login → seleção de personagem → mundo 2D em canvas com HUD sobreposto (estilo MMORPG). Visual escuro fixo, por escolha. */
:root{
  --ink:#0d1311;
  --panel:rgba(16,24,21,.9);
  --panel-solid:#141c19;
  --line:#2d3b34;
  --line-hi:#4a5c52;
  --jade:#5cc29d;
  --bronze:#d4a65c;
  --blood:#c94a3d;
  --mana:#4686d6;
  --text:#ece5d2;
  --muted:#9aa59b;
  --font-d:'Marcellus SC',Georgia,'Times New Roman',serif;
  --font-b:'Alegreya Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--ink);color:var(--text);font-family:var(--font-b);font-size:15px;line-height:1.45;overflow:hidden;-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}

/* ---------- telas de menu ---------- */
.tela{position:fixed;inset:0;overflow:auto;padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px));
  background:
    radial-gradient(1200px 600px at 50% -10%,rgba(92,194,157,.16),transparent 60%),
    radial-gradient(900px 500px at 50% 120%,rgba(212,166,92,.12),transparent 60%),
    var(--ink)}
.tela::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.06;
  background-image:repeating-linear-gradient(45deg,var(--text) 0 1px,transparent 1px 22px),repeating-linear-gradient(-45deg,var(--text) 0 1px,transparent 1px 22px)}
.centro{min-height:100%;display:grid;place-items:center}
.cartao{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04)}
.cartao::after{content:"";position:absolute;inset:5px;border:1px solid rgba(212,166,92,.18);pointer-events:none;border-radius:2px}
.login{width:min(380px,100%);padding:36px 30px 28px;display:grid;gap:18px}
.selo{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--jade);margin:0}
h1,h2,h3{font-family:var(--font-d);font-weight:400;margin:0;text-wrap:balance}
h1{font-size:40px;line-height:1;color:var(--bronze);letter-spacing:.02em}
h2{font-size:26px;color:var(--bronze)}
h3{font-size:17px}
form{display:grid;gap:12px}
label{display:grid;gap:4px;font-size:13px;color:var(--muted);letter-spacing:.04em}
input[type=text],input[type=password]{background:#0b100e;border:1px solid var(--line);border-radius:3px;padding:10px 12px;color:var(--text)}
input:focus{border-color:var(--bronze);outline:none}
.btn{background:linear-gradient(#2a3a32,#1a2520);border:1px solid var(--line-hi);border-radius:3px;padding:10px 16px;font-family:var(--font-d);font-size:16px;letter-spacing:.06em;color:var(--text)}
.btn:hover{border-color:var(--bronze);color:#fff}
.btn.prim{background:linear-gradient(#b38544,#7f5a28);border-color:#e0b878;color:#1b130a}
.btn.prim:hover{filter:brightness(1.1);color:#000}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}
.dica{margin:0;font-size:13px;color:var(--muted)}
.dica b{color:var(--bronze);font-weight:700}
.erro{color:#ff8a7d;font-size:13px;margin:0}

.sel{width:min(980px,100%);margin-inline:auto;padding:24px;display:grid;gap:20px}
.sel header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px}
.conta-tag{font-size:13px;color:var(--muted)}
.conta-tag b{color:var(--text)}
.gm{color:var(--bronze);border:1px solid var(--bronze);border-radius:2px;padding:0 6px;font-size:11px;letter-spacing:.1em;margin-left:6px}
.slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.slot{background:#0f1613;border:1px solid var(--line);border-radius:3px;padding:14px 12px;min-height:118px;display:grid;align-content:center;justify-items:center;gap:6px;text-align:center}
.slot:hover{border-color:var(--line-hi)}
.slot.ativo{border-color:var(--bronze);box-shadow:0 0 0 1px var(--bronze) inset}
.slot .vazio{color:var(--muted);font-size:13px}
.slot .mais{font-family:var(--font-d);font-size:28px;color:var(--line-hi);line-height:1}
.slot canvas{width:44px;height:56px}
.slot .nm{font-weight:700}
.slot .sub{font-size:12px;color:var(--muted)}
.criar{display:grid;gap:16px;padding:20px}
.classes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cls{background:#0f1613;border:1px solid var(--line);border-radius:3px;padding:12px;text-align:left;display:grid;gap:8px;align-content:start}
.cls:hover{border-color:var(--line-hi)}
.cls.ativo{border-color:var(--bronze);background:#18201b}
.cls .papel{font-size:12px;color:var(--muted)}
.barras{display:grid;gap:3px;font-size:11px;color:var(--muted)}
.barras div{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:6px}
.barras i{height:4px;background:var(--line);border-radius:2px;position:relative;overflow:hidden}
.barras i::after{content:"";position:absolute;inset:0;width:var(--v);background:var(--jade)}
.cls ul{margin:0;padding:0;list-style:none;font-size:12px;color:var(--muted);display:grid;gap:1px}
.linha{display:flex;flex-wrap:wrap;gap:14px;align-items:end}
.linha label{flex:1 1 200px}
.reinos{display:flex;gap:8px;flex-wrap:wrap}
.reino{border:1px solid var(--line);background:#0f1613;border-radius:3px;padding:8px 12px;display:flex;align-items:center;gap:8px;font-size:14px}
.reino.ativo{border-color:var(--bronze)}
.reino span{width:10px;height:10px;border-radius:50%;background:var(--c)}
.acoes{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

@media (max-width:760px){
  .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .classes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sel{padding:16px}
  .criar{padding:16px}
}

/* ---------- jogo ---------- */
#telaJogo{position:fixed;inset:0;background:#000;user-select:none;-webkit-user-select:none;touch-action:none}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;pointer-events:none}
.hud *{pointer-events:auto}
.painel{background:var(--panel);border:1px solid var(--line);border-radius:3px}
#retrato{top:calc(10px + env(safe-area-inset-top,0px));left:10px;padding:8px 10px;width:220px;display:grid;gap:5px}
.ret-topo{display:flex;align-items:center;gap:8px}
.lv{font-family:var(--font-d);background:#0b100e;border:1px solid var(--bronze);color:var(--bronze);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;font-size:14px;flex:none}
.ret-nome{font-weight:700;line-height:1.1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ret-cls{font-size:11px;color:var(--muted)}
.barra{position:relative;height:13px;background:#0a0e0c;border:1px solid #000;border-radius:2px;overflow:hidden}
.barra b{position:absolute;inset:0;width:100%;transform-origin:left}
.barra.hp b{background:linear-gradient(#e0614f,#93281e)}
.barra.mp b{background:linear-gradient(#5f9de6,#1f4f93)}
.barra span{position:relative;display:block;text-align:center;font-size:10px;line-height:13px;font-weight:700;text-shadow:0 1px 1px #000;font-variant-numeric:tabular-nums}
.buffs{display:flex;gap:4px;min-height:0}
.buff{font-size:10px;background:#0b100e;border:1px solid var(--jade);color:var(--jade);border-radius:2px;padding:0 4px;font-variant-numeric:tabular-nums}

#alvoBox{top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);padding:6px 10px;width:230px;display:grid;gap:4px;text-align:center}
#alvoBox .t{font-size:13px;font-weight:700}
#alvoBox .t small{color:var(--muted);font-weight:400}

#mini{top:calc(10px + env(safe-area-inset-top,0px));right:10px;padding:5px;display:grid;gap:4px}
#mini canvas{display:block;width:150px;height:150px;border-radius:2px}
#mini .loc{font-size:11px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}

#log{left:10px;bottom:calc(64px + env(safe-area-inset-bottom,0px));width:min(360px,calc(100% - 20px));display:grid;gap:4px}
#linhas{display:grid;gap:1px;font-size:13px;text-shadow:0 1px 2px #000,0 0 6px #000;pointer-events:none}
#linhas div{animation:sumir 14s forwards}
@keyframes sumir{0%,80%{opacity:1}100%{opacity:.25}}
#linhas .sis{color:#b9c6bc}
#linhas .ouro{color:var(--bronze)}
#linhas .item{color:#9fd7ff}
#linhas .lvl{color:#ffe08a;font-weight:700}
#linhas .ruim{color:#ff8a7d}
#linhas .gmx{color:#e6b9ff}
#linhas .fala b{color:var(--jade)}
#chat{display:none;gap:6px}
#chat.on{display:flex}
#chat input{flex:1;min-width:0;background:rgba(5,8,7,.85);border:1px solid var(--line-hi);border-radius:3px;padding:6px 8px;font-size:13px}

#barraXp{left:0;right:0;bottom:0;height:calc(8px + env(safe-area-inset-bottom,0px));background:#060807;border-top:1px solid #000}
#barraXp b{position:absolute;left:0;top:0;height:8px;width:0;background:linear-gradient(90deg,#8a6a2f,var(--bronze))}
#barraXp i{position:absolute;inset:0 0 auto;height:8px;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),#000 calc(10% - 1px) 10%)}

#skills{left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:6px;display:flex;gap:6px;align-items:center}
.sk{position:relative;width:46px;height:46px;border:1px solid var(--line-hi);border-radius:3px;background:#0b100e;display:grid;place-items:center;overflow:hidden;padding:0}
.sk canvas{width:34px;height:34px}
.sk .k{position:absolute;left:3px;top:1px;font-size:10px;color:var(--muted);font-weight:700}
.sk .cd{position:absolute;inset:0;background:rgba(0,0,0,.7);transform-origin:bottom;transform:scaleY(0)}
.sk .cdt{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:14px;text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}
.sk.semmp{filter:grayscale(1) brightness(.6)}
.sk .q{position:absolute;right:3px;bottom:1px;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.sep{width:1px;height:34px;background:var(--line)}
.bt-icone{width:46px;height:46px;border:1px solid var(--line-hi);border-radius:3px;background:#0b100e;font-family:var(--font-d);font-size:12px;color:var(--bronze);padding:0;position:relative}
.bt-icone .k{position:absolute;left:3px;top:1px;font-size:10px;color:var(--muted);font-family:var(--font-b);font-weight:700}

#dicaTec{right:10px;bottom:calc(16px + env(safe-area-inset-bottom,0px));font-size:12px;color:var(--muted);padding:8px 10px;max-width:220px;line-height:1.5}
#dicaTec b{color:var(--text)}

/* inventário */
#inv{top:calc(10px + env(safe-area-inset-top,0px));right:184px;width:300px;max-height:calc(100% - 110px);overflow:auto;padding:12px;display:grid;gap:10px}
#inv header{display:flex;justify-content:space-between;align-items:center}
#inv .x{background:none;border:1px solid var(--line);border-radius:3px;width:28px;height:28px;padding:0}
.equip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.cel{aspect-ratio:1;max-width:100%;border:1px solid var(--line);background:#0b100e;border-radius:2px;display:grid;place-items:center;position:relative;padding:0;font-size:10px;color:var(--muted)}
.cel canvas{width:80%;height:80%}
.cel .ref{position:absolute;right:2px;top:0;font-size:10px;color:var(--bronze);font-weight:800}
.cel.sel{border-color:var(--bronze)}
.cel.r1{box-shadow:inset 0 0 0 1px rgba(159,215,255,.4)}
.cel.r2{box-shadow:inset 0 0 0 1px rgba(230,185,255,.6)}
.bolsa{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.rotulo{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#detalhe{min-height:70px;font-size:13px;background:#0b100e;border:1px solid var(--line);border-radius:2px;padding:8px}
#detalhe .nm{font-weight:800;color:var(--bronze)}
#detalhe .b{color:#9fd7ff}
#detalhe .base{color:var(--text)}
#detalhe .acao{margin-top:6px;color:var(--muted);font-size:12px}
.stats{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:12px;font-variant-numeric:tabular-nums}
.stats span:nth-child(odd){color:var(--muted)}
.ouroLin{display:flex;justify-content:space-between;font-size:13px}
.ouroLin b{color:var(--bronze);font-variant-numeric:tabular-nums}

#morte{inset:0;display:grid;place-items:center;background:radial-gradient(circle,rgba(80,10,10,.35),rgba(0,0,0,.7));pointer-events:none}
#morte div{text-align:center;display:grid;gap:6px}
#morte h2{font-size:34px;color:#ff8a7d}
#aviso{left:50%;top:30%;transform:translateX(-50%);font-family:var(--font-d);font-size:18px;color:#ffd38a;text-shadow:0 2px 6px #000;pointer-events:none;transition:opacity .3s;white-space:nowrap}

/* controles touch */
#touch{inset:0;pointer-events:none;display:none}
#touch.on{display:block}
#stick{position:absolute;left:24px;bottom:calc(40px + env(safe-area-inset-bottom,0px));width:120px;height:120px;border-radius:50%;background:rgba(10,14,12,.45);border:1px solid rgba(236,229,210,.25);pointer-events:auto;touch-action:none}
#stick b{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(212,166,92,.55);border:1px solid rgba(255,255,255,.4)}
#tbtns{position:absolute;right:16px;bottom:calc(36px + env(safe-area-inset-bottom,0px));width:190px;height:190px;pointer-events:none}
#tbtns button{position:absolute;pointer-events:auto;touch-action:none;border-radius:50%;border:1px solid rgba(236,229,210,.35);background:rgba(10,14,12,.6);display:grid;place-items:center;padding:0;overflow:hidden}
#tAtk{right:0;bottom:0;width:84px;height:84px;font-family:var(--font-d);color:var(--bronze);font-size:14px;background:rgba(60,40,15,.7)!important;border-color:var(--bronze)!important}
#tbtns .sk{width:52px;height:52px;border-radius:50%}
#tbtns .sk .cd{border-radius:50%}
.coarse #skills,.coarse #dicaTec{display:none}
.coarse #log{bottom:calc(170px + env(safe-area-inset-bottom,0px));width:min(300px,calc(100% - 20px))}
.coarse #linhas{font-size:12px}
#tMenu{position:absolute;right:12px;top:calc(176px + env(safe-area-inset-top,0px));display:grid;gap:6px;pointer-events:auto}
#tMenu button{width:44px;height:44px;border-radius:3px;border:1px solid var(--line-hi);background:var(--panel);font-family:var(--font-d);font-size:11px;color:var(--bronze);padding:0}

@media (max-width:640px){
  #retrato{width:170px;padding:6px 8px}
  #alvoBox{top:calc(118px + env(safe-area-inset-top,0px));left:10px;transform:none;width:170px}
  #mini canvas{width:104px;height:104px}
  #tMenu{top:calc(136px + env(safe-area-inset-top,0px))}
  #inv{left:10px;right:10px;width:auto;top:calc(10px + env(safe-area-inset-top,0px));transform:none;max-height:calc(100% - 20px)}
}
@media (prefers-reduced-motion:reduce){#linhas div{animation:none}}

/* ---------- extras da versão com servidor ---------- */
.abas{display:flex;border-bottom:1px solid var(--line)}
.abas button{flex:1;background:none;border:0;border-bottom:2px solid transparent;padding:8px 0;color:var(--muted);font-family:var(--font-d);font-size:15px;letter-spacing:.04em;margin-bottom:-1px}
.abas button[aria-selected="true"]{color:var(--bronze);border-bottom-color:var(--bronze)}
.okmsg{color:var(--jade);font-size:13px;margin:0}
.btn.perigo{background:linear-gradient(#7a2a22,#4e1611);border-color:#c94a3d;color:#ffd9d3}
.instalar{justify-self:start}
.grupo{display:grid;gap:4px}
.reino:disabled{opacity:.35;cursor:not-allowed}
.criar label{max-width:320px}
.bt-icone .q{position:absolute;right:3px;bottom:1px;font-size:11px;font-family:var(--font-b);font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
#salvoTag{font-size:10px}
#salvoTag.ruim{color:#ff8a7d}
.mini-bts{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mini-bts button{background:#0b100e;border:1px solid var(--line);border-radius:2px;font-size:11px;padding:4px 2px;color:var(--muted)}
.mini-bts button:hover{color:var(--text);border-color:var(--line-hi)}
#carregando{position:fixed;inset:0;z-index:50;display:grid;place-content:center;justify-items:center;gap:14px;background:rgba(8,12,10,.82);color:var(--muted);font-size:14px}
.anel-carga{width:42px;height:42px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--bronze);animation:gira .9s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@media (max-width:640px){
  .mini-bts{grid-template-columns:1fr}
  #mini .loc{font-size:10px}
  #tMenu{top:calc(236px + env(safe-area-inset-top,0px))}
}
@media (min-width:641px){ #tMenu{top:calc(240px + env(safe-area-inset-top,0px))} }
@media (prefers-reduced-motion:reduce){.anel-carga{animation-duration:3s}}