:root{
  /* Design system RPG de estratégia: azul profundo + ouro envelhecido */
  --bg:#070c16;--canvas:#16233d;--paper:#0e1729;--alt:#122040;
  --ink:#e9edf6;--ink-soft:#c9d3e6;--mid:#8b9bb8;--hair:#2b3d63;
  --ember:#d4463a;--gold:#c9a24a;--gold-hi:#e6c46f;--blue:#1e4a8c;--blue-hi:#2f6cc0;--mana:#4a8be0;--hp:#4caf50;
  --bevel:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.35);
  --shadow:0 0 0 1px rgba(201,162,74,.18),0 6px 18px rgba(0,0,0,.55);
  --display:Cinzel,"Cinzel Decorative",Georgia,serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{background:radial-gradient(ellipse at 50% 0,#12203d 0,var(--bg) 70%);color:var(--ink);font:400 15px/1.4 "Alegreya Sans",system-ui,sans-serif;padding-inline:16px;padding-block:16px;margin:0}
.app{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 320px;gap:16px;height:100%;min-height:560px}
.card{background:linear-gradient(180deg,#132244,var(--paper));border:1px solid var(--hair);border-radius:10px;box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.03)}
.stage{display:flex;flex-direction:column;overflow:hidden;min-height:0}
.bar{display:flex;align-items:center;gap:16px;padding:10px 20px;border-bottom:1px solid var(--gold);background:linear-gradient(180deg,#1a2c52,#0f1a30);flex-wrap:wrap}
.brand{font:700 20px var(--display);letter-spacing:.06em;color:var(--gold-hi);text-shadow:0 2px 0 #000;margin-right:auto}
.stat{display:flex;flex-direction:column;line-height:1.1;padding:2px 12px;background:rgba(0,0,0,.28);border:1px solid var(--hair);border-radius:6px;box-shadow:var(--bevel)}
.stat .l{font-size:11px;color:var(--gold);text-transform:uppercase;letter-spacing:.1em}
.stat .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.view{position:relative;flex:1;min-height:0;background:#0b140a;overflow:hidden;box-shadow:inset 0 0 0 2px #0a1222,inset 0 0 0 3px rgba(201,162,74,.35)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
#game{position:relative;display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
#mini{position:absolute;left:12px;bottom:12px;width:192px;height:120px;border-radius:4px;border:2px solid var(--gold);box-shadow:0 4px 12px rgba(0,0,0,.6);image-rendering:pixelated;cursor:pointer;touch-action:none;background:#000}
.toast{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:#0e1729ee;color:var(--gold-hi);border:1px solid var(--gold);border-radius:6px;padding:6px 14px;font-size:15px;font-weight:500;pointer-events:none;opacity:0;transition:opacity .2s}
.toast.on{opacity:1}
/* Botões: normal / hover / clicado / desativado */
.btn{font:700 14px "Alegreya Sans",sans-serif;letter-spacing:.03em;border:1px solid #3a6fb8;border-radius:6px;padding:8px 16px;cursor:pointer;background:linear-gradient(180deg,var(--blue-hi),var(--blue));color:var(--ink);min-height:36px;box-shadow:var(--bevel),0 2px 0 #050a14;transition:filter .12s,transform .06s}
.btn:hover:not(:disabled){background:linear-gradient(180deg,#8a7a3a,#5e5424);border-color:var(--gold);color:var(--gold-hi)}
.btn:active:not(:disabled){background:linear-gradient(180deg,#7a2a25,#4d1815);border-color:var(--ember);transform:translateY(2px);box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.btn.primary{background:linear-gradient(180deg,var(--gold-hi),#9a7a2c);border-color:var(--gold-hi);color:#1a1405;text-shadow:0 1px 0 rgba(255,255,255,.3)}
.btn.primary:hover:not(:disabled){filter:brightness(1.12);color:#1a1405;background:linear-gradient(180deg,var(--gold-hi),#9a7a2c)}
.btn.outline{background:rgba(0,0,0,.25);border-color:var(--hair);box-shadow:none}
.btn:focus-visible,.sum:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.6)}
.side{display:flex;flex-direction:column;gap:16px;min-height:0;overflow:auto}
.side .card{padding:16px}
h2{font:600 13px var(--display);text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid var(--hair)}
.sums{display:grid;gap:8px}
.sum{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;text-align:left;background:linear-gradient(180deg,#1b2d52,#12203d);border:1px solid var(--hair);border-radius:6px;padding:6px 10px 6px 6px;cursor:pointer;font:inherit;color:inherit;box-shadow:var(--bevel)}
.sum:hover:not(:disabled){border-color:var(--gold);background:linear-gradient(180deg,#26386a,#182a50)}
.sum:active:not(:disabled){background:linear-gradient(180deg,#3a1a1a,#231010);border-color:var(--ember)}
.sum:disabled{opacity:.45;cursor:not-allowed}
.sum img{width:36px;height:36px;image-rendering:pixelated;background:#08101f;border:1px solid var(--gold);border-radius:4px}
.sum .n{font-weight:700}
.sum .r{font-size:12px;color:var(--mid)}
.cost{font-family:var(--display);font-size:12px;background:#08101f;color:var(--gold-hi);border:1px solid var(--gold);border-radius:4px;padding:2px 8px}
.key{font-size:11px;color:var(--mid);border:1px solid var(--hair);border-radius:4px;padding:0 5px;margin-left:4px;background:rgba(0,0,0,.25)}
.queue{display:flex;gap:6px;margin-top:12px;min-height:40px;flex-wrap:wrap}
.qi{position:relative;width:40px;height:40px;border-radius:4px;background:#08101f;border:1px solid var(--hair);overflow:hidden}
.qi img{width:100%;height:100%;image-rendering:pixelated}
.qi i{position:absolute;left:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--mana),#8fc0ff)}
.empty{font-size:14px;color:var(--mid)}
.mis{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mis li{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:start}
.chk{width:16px;height:16px;border:1px solid var(--gold);border-radius:3px;margin-top:2px;display:grid;place-items:center;background:#08101f}
.done .chk{background:var(--gold);border-color:var(--gold-hi)}
.done .chk::after{content:"";width:6px;height:3px;border:2px solid #1a1405;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.done .mt{color:var(--mid);text-decoration:line-through}
.badge{font-size:12px;font-weight:700;border-radius:4px;padding:2px 8px;background:#08101f;color:var(--gold-hi);border:1px solid var(--hair);white-space:nowrap}
.sel{font-size:14px}
.sel .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.sel .grid div{background:#08101f;border:1px solid var(--hair);border-radius:4px;padding:6px 8px}
.sel .grid b{display:block;font-size:11px;color:var(--gold);font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.sel .grid span{font-weight:700;font-variant-numeric:tabular-nums}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.help{font-size:14px;color:var(--mid);margin:0;padding-left:18px}
.overlay{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:rgba(4,8,16,.72);padding:16px}
.dialog{max-width:440px;width:100%;padding:24px;border:1px solid var(--gold)}
.dialog h1{font:700 30px/1.2 "Cinzel Decorative",var(--display);letter-spacing:.04em;color:var(--gold-hi);text-shadow:0 3px 0 #000;margin:0 0 8px}
.dialog p{color:var(--ink-soft);margin:0 0 16px}
.seg{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.seg .btn[aria-pressed="true"]{background:linear-gradient(180deg,var(--gold-hi),#9a7a2c);border-color:var(--gold-hi);color:#1a1405}
.danger{color:var(--ember)}
.mbar{display:none}
@media (max-width:900px){
  body{padding-inline:8px;padding-block:8px}
  .app{grid-template-columns:1fr;height:auto;min-height:0;gap:12px}
  .stage{height:calc(100dvh - 16px);min-height:480px}
  .bar{padding:8px 12px;gap:12px}
  .brand{display:none}
  .bar{justify-content:space-between}
  .stat .v{font-size:16px}
  #pauseBtn{padding:6px 12px;min-height:32px}
  .side{overflow:visible}
  .side .sumcard,.side .helpcard{display:none}
  #mini{width:120px;height:75px;left:8px;top:8px;bottom:auto}
  .mbar{display:flex;flex-direction:column;gap:6px;position:absolute;left:0;right:0;bottom:0;padding:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(transparent,rgba(4,8,16,.9) 30%)}
  .mrow{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
  .mrow::-webkit-scrollbar{display:none}
  .msum{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;width:54px;padding:4px 2px;border:1px solid var(--gold);border-radius:6px;background:linear-gradient(180deg,#1b2d52,#0e1729);color:var(--ink);font:inherit;cursor:pointer}
  .msum img{width:32px;height:32px;image-rendering:pixelated}
  .msum .cost{font-size:12px;padding:0 6px}
  .msum:disabled{opacity:.45}
  .mq{height:4px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden}
  .mq i{display:block;height:100%;background:linear-gradient(90deg,var(--mana),#8fc0ff);width:0}
  .mact{display:flex;gap:6px}
  .mact .btn{flex:1;min-height:40px;padding:8px}
  .toast{top:92px;max-width:calc(100% - 24px);text-align:center}
  .dialog{padding:20px}
  .dialog h1{font-size:24px}
  .seg .btn{flex:1}
  #startBtn{width:100%;min-height:44px}
}
@media (prefers-reduced-motion:reduce){.toast,.btn{transition:none}}
/* ===== Skin 3D (referência: HUD creme + dock de unidades) ===== */
.bar{background:linear-gradient(180deg,#faf6ec,#e9e1cf);border-bottom:2px solid #b9ab8a;color:#2a2418}
.brand{color:#3b2f1a;text-shadow:none}
.stat{flex-direction:row;align-items:center;gap:8px;background:transparent;border:none;box-shadow:none;padding:0 10px}
.stat .l{color:#5b5140}.stat .v{color:#1f1a10}
.stat .ic{font-size:26px;line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.stat .ic.mana{filter:drop-shadow(0 0 6px #4ab0ff)}
#pauseBtn,#sndBtn,#menuBtn{background:linear-gradient(180deg,#fffaf0,#e3d9c4);color:#2a2418;border:1px solid #b9ab8a;border-radius:18px}
#mini{top:12px;left:12px;bottom:auto;border:2px solid #f1e7d2;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.45)}
.mbar{display:flex;flex-direction:column;gap:8px;position:absolute;left:0;right:0;bottom:0;padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,rgba(10,20,10,.55) 35%);z-index:2}
.mrow{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.mrow::-webkit-scrollbar{display:none}
.msum{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;width:68px;padding:6px 4px;border:2px solid #d9d2c2;border-radius:12px;background:linear-gradient(180deg,#6f8fb3,#3e5877);color:#fff;font:inherit;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35)}
.msum:hover:not(:disabled){border-color:var(--gold-hi);transform:translateY(-2px)}
.msum img{width:40px;height:40px;image-rendering:pixelated}
.msum{width:78px!important;justify-content:flex-start}
.msum .nm{font-size:10px;line-height:1.05;font-weight:700;text-align:center;min-height:21px;display:flex;align-items:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.msum .cost{background:#1b1b1b;color:#fff;border:none;border-radius:10px;font-size:12px;padding:0 8px}
.msum:disabled{opacity:.5;filter:grayscale(.7)}
.mq{display:none!important}
.mq i{display:block;height:100%;background:linear-gradient(90deg,var(--mana),#8fc0ff);width:0}
.mact{display:flex;gap:10px}
.mact .btn{flex:1;min-height:42px;border-radius:22px;background:linear-gradient(180deg,#fffaf0,#e3d9c4);border:2px solid #b9ab8a;color:#2a2418;box-shadow:0 3px 0 #8c7f63}
.mact .btn:hover:not(:disabled){background:linear-gradient(180deg,#fff,#efe6d2);color:#2a2418;border-color:var(--gold)}
.mact .btn.primary{background:linear-gradient(180deg,#2a0d0d,#120404);border:2px solid #ff3b30;color:#ffd6d2;box-shadow:0 0 14px rgba(255,40,30,.75),inset 0 0 10px rgba(255,40,30,.35);animation:glow 1.6s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 24px rgba(255,40,30,.95),inset 0 0 14px rgba(255,40,30,.5)}}
@media (min-width:901px){.side .sumcard{display:none}}
@media (prefers-reduced-motion:reduce){.mact .btn.primary{animation:none}}
.pfhead{display:flex;align-items:center;gap:8px;margin-bottom:8px}.pfhead b{font:700 18px var(--display);color:var(--gold-hi)}.pfhead span:nth-child(2){flex:1;color:var(--ink-soft)}
.xpbar{height:8px;background:#08101f;border:1px solid var(--hair);border-radius:6px;overflow:hidden}.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-hi));width:0}
.pfcls{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}.pfcls li{position:relative;display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;font-size:13px;line-height:1.1;padding-bottom:4px}
.pfcls img{width:28px;height:28px;border-radius:4px;background:#08101f}.pfcls small{color:var(--mid)}.pfcls b{color:var(--gold-hi)}
.pfcls i{position:absolute;left:36px;right:0;bottom:0;height:2px;background:var(--gold);max-width:calc(100% - 36px)}
.ovlv{color:var(--gold-hi)!important;font-weight:700}
.dialog{max-width:640px!important;max-height:calc(100% - 24px);overflow:auto}
.dialog h3{font:600 12px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:12px 0 6px}
.tabs{display:flex;gap:8px;margin-bottom:6px}.tabs .btn.on,.seg .btn.on{background:linear-gradient(180deg,var(--gold-hi),#9a7a2c);color:#1a1405;border-color:var(--gold-hi)}
.levels{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px}.levels .biome{flex-basis:100%;font-size:12px;color:var(--ink-soft);margin-top:4px}.levels .biome.locked{color:var(--mid)}
.lv{width:36px;height:32px;border-radius:6px;border:1px solid var(--hair);background:#0e1a33;color:var(--ink);font:700 13px "Alegreya Sans",sans-serif;cursor:pointer}
.lv.on{background:var(--gold);color:#1a1405;border-color:var(--gold-hi)}.lv:disabled{opacity:.45;cursor:not-allowed}
.wallet{display:flex;gap:16px;margin:4px 0 10px;color:var(--ink-soft)}.wallet b{color:var(--gold-hi)}
.shoplist{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-bottom:14px}
.shopit{display:flex;flex-direction:column;gap:4px;background:#0e1a33;border:1px solid var(--hair);border-radius:8px;padding:10px}.shopit span{font-size:13px;color:var(--ink-soft);flex:1}
.shopit .row{margin-top:4px;align-items:center}.use{font-size:12px;color:var(--ink-soft);display:flex;gap:4px;align-items:center}.note{font-size:12px;color:var(--mid)}
#clock.danger{color:#e0402e}
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;margin-bottom:6px}
.rch{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:8px;border:1px solid var(--hair);background:#0e1a33;color:var(--ink);font:700 11px "Alegreya Sans",sans-serif;cursor:pointer;line-height:1.05;text-align:center}
.rch img{width:40px;height:40px}.rch.on{border-color:var(--gold-hi);background:linear-gradient(180deg,#3a3014,#1d1808);box-shadow:0 0 10px rgba(230,196,111,.35)}
.tip{position:fixed;z-index:50;max-width:280px;background:#0b1428f2;border:1px solid var(--gold);border-radius:8px;padding:8px 10px;color:var(--ink);font:13px/1.35 "Alegreya Sans",sans-serif;pointer-events:none;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.tip b{color:var(--gold-hi)}.tip small{color:var(--mid)}.tipst{color:var(--ink-soft);margin:2px 0 4px}.tipab{margin-bottom:3px}.tipev{color:var(--mid);font-size:12px}
.overlay{background:radial-gradient(ellipse at 50% 30%,rgba(20,34,64,.72),rgba(4,8,16,.9))!important;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.dialog.menu{max-width:860px!important;width:100%;max-height:calc(100% - 20px);display:flex;flex-direction:column;padding:0!important;overflow:hidden;animation:menuIn .35s ease-out}
@keyframes menuIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.mhead{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 20px;background:linear-gradient(180deg,#1a2c52,#0f1a30);border-bottom:1px solid var(--gold)}
.brandbox{display:flex;gap:12px;align-items:center;min-width:0;flex:1 1 300px}.crest{font-size:34px;filter:drop-shadow(0 0 8px rgba(230,196,111,.6))}
.mhead h1{font-size:26px!important;margin:0!important}.mhead #ovText{margin:2px 0 0!important;font-size:13px}
.mplayer{display:flex;gap:10px;align-items:center;background:rgba(0,0,0,.25);border:1px solid var(--hair);border-radius:12px;padding:8px 12px;flex:0 1 auto}
.avatar{font-size:28px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#2f4a80,#132244);border:2px solid var(--gold)}
.mp-info{min-width:140px}.lvtag{font:700 12px var(--display);color:#1a1405;background:var(--gold-hi);border-radius:10px;padding:1px 8px}
.mp-info .xpbar{margin:4px 0 2px}.mp-info .ovlv{font-size:11px;margin:0!important;color:var(--mid)!important;font-weight:500}
.mwallet{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--ink-soft)}
.tabs{display:flex;gap:4px;padding:0 20px;background:#0c1528;border-bottom:1px solid var(--hair);margin:0!important}
.tab{background:none;border:0;border-bottom:3px solid transparent;color:var(--mid);font:700 14px "Alegreya Sans",sans-serif;padding:10px 14px;cursor:pointer;transition:color .15s,border-color .15s}
.tab:hover{color:var(--ink)}.tab.on{color:var(--gold-hi);border-bottom-color:var(--gold-hi)}
.mbody{overflow:auto;padding:16px 20px;flex:1;min-height:0}
.playgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.step{background:rgba(255,255,255,.025);border:1px solid var(--hair);border-radius:10px;padding:10px 12px}.step.wide{grid-column:1/-1}
.step h3{display:flex;align-items:center;gap:8px;margin:0 0 8px!important}.step h3 small{font:500 12px "Alegreya Sans",sans-serif;color:var(--ink-soft);text-transform:none;letter-spacing:0;margin-left:auto}
.num{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#1a1405;font:700 11px "Alegreya Sans",sans-serif}
.step .seg{margin:0}.step .seg .btn{flex:1;min-width:0}.seg .btn small{font-size:10px;opacity:.8}
.roster{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))!important}
.rch{position:relative;transition:transform .12s,border-color .15s,box-shadow .15s}.rch:hover{transform:translateY(-2px);border-color:var(--gold)}
.rch small{font-size:10px;color:var(--mid)}.rch .gd{color:var(--gold-hi)}.rch.god:not(.lock){background:linear-gradient(180deg,#2a2040,#141024)}
.rch.lock{opacity:.55;filter:grayscale(.8)}.rch.lock:hover{transform:none}
.levels{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.biomecard{border:1px solid var(--hair);border-radius:10px;overflow:hidden;background:#0e1a33}.biomecard.cur{border-color:var(--gold-hi);box-shadow:0 0 12px rgba(230,196,111,.3)}
.bc-h{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:var(--art);color:#fff;font:700 13px "Alegreya Sans",sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.bc-h small{font-size:11px}.biomecard.locked{opacity:.6}.biomecard.locked .bc-h{filter:grayscale(.7)}
.bc-lv{display:flex;flex-wrap:wrap;gap:4px;padding:8px}.lv{transition:transform .1s}.lv:not(:disabled):hover{transform:scale(1.08);border-color:var(--gold)}
.mfoot{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--hair);background:#0c1528}
.sumline{margin-right:auto;font-size:13px;color:var(--ink-soft)}.btn.big{min-height:46px;padding:10px 28px;font-size:16px}#startBtn{animation:startPulse 2.4s ease-in-out infinite}
@keyframes startPulse{50%{box-shadow:0 0 18px rgba(230,196,111,.55)}}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.chip{border:1px solid var(--hair);background:#0e1a33;color:var(--ink-soft);border-radius:16px;padding:5px 12px;cursor:pointer;font:600 13px "Alegreya Sans",sans-serif}
.chip.on{background:var(--gold);color:#1a1405;border-color:var(--gold-hi)}.coin{background:rgba(0,0,0,.25);border:1px solid var(--hair);border-radius:14px;padding:3px 10px}
.shopit{transition:transform .12s,border-color .15s}.shopit:hover{transform:translateY(-2px);border-color:var(--gold)}.shopit.hero img{width:64px;height:64px;align-self:center}
.shopit.owned{border-color:#2e6b3a}.sh-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.badge.god{background:#3a2a60;color:#e0c8ff}.badge.ok{background:#1f4a2a;color:#b8f0c8}.sh-ico{font-size:20px}
#matchBtns{margin:0}
.splash{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;animation:menuIn .5s ease-out}
.sp-crest{font-size:64px;filter:drop-shadow(0 0 18px rgba(230,196,111,.8));animation:spFloat 3s ease-in-out infinite}
.sp-title{font:700 clamp(34px,6vw,64px)/1.1 "Cinzel Decorative",Cinzel,serif;color:var(--gold-hi);text-shadow:0 4px 0 #000,0 0 24px rgba(230,196,111,.35);margin:0;letter-spacing:.04em}
.sp-sub{color:var(--ink-soft);margin:0 0 12px;letter-spacing:.2em;text-transform:uppercase;font-size:13px}
.sp-start{font:700 20px Cinzel,serif!important;letter-spacing:.3em;padding:14px 48px!important;min-height:56px!important;animation:startPulse 1.8s ease-in-out infinite}
.sp-who{color:var(--mid);font-size:13px;margin:6px 0 0}
.dialog.menu.enter{animation:menuIn .35s ease-out}
@keyframes spFloat{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.sp-crest,.sp-start{animation:none}}
.mprow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0}.mprow .or{color:var(--mid)}
#mpJoinCode{width:110px;text-transform:uppercase;letter-spacing:.2em;font:700 16px "Alegreya Sans",sans-serif;text-align:center;background:#08101f;border:1px solid var(--hair);border-radius:6px;padding:7px;color:var(--ink)}
.mpcode{font:700 26px var(--display);letter-spacing:.18em;color:var(--gold-hi);background:#08101f;border:1px dashed var(--gold);border-radius:8px;padding:2px 12px}
.mpplayers{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}.mpplayers li{display:flex;align-items:center;gap:8px;background:#0e1a33;border:1px solid var(--hair);border-radius:8px;padding:6px 10px}
.mpplayers .dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 6px currentColor}.mpplayers .rd{margin-left:auto;font-size:12px;color:var(--mid)}.mpplayers .rd.on{color:#8fe36b}
.mpstatus{color:var(--mid)}.mpstatus.ok{color:#8fe36b}
#mpAis{background:#08101f;color:var(--ink);border:1px solid var(--hair);border-radius:6px;padding:4px 8px;margin-left:6px}
.btn.icon{min-width:36px;padding:6px 10px;font-size:16px;line-height:1}
#panelBtn,#fsBtn{background:linear-gradient(180deg,#fffaf0,#e3d9c4);color:#2a2418;border:1px solid #b9ab8a;border-radius:18px}
#panelBtn[aria-pressed="true"],#fsBtn[aria-pressed="true"]{background:linear-gradient(180deg,var(--gold-hi),#9a7a2c);color:#1a1405}
.app{transition:grid-template-columns .25s}
.drawerhead{display:none;align-items:center;gap:8px}.drawerhead b{font:700 16px var(--display);color:var(--gold-hi);margin-right:auto}
/* modo foco: jogo em toda a largura; painel vira gaveta sobre o jogo */
.app.focus{grid-template-columns:1fr;max-width:none}
.app.focus .side{position:fixed;top:0;right:0;bottom:0;width:min(360px,92vw);z-index:40;padding:14px;gap:12px;overflow:auto;
  background:rgba(7,12,24,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-left:1px solid var(--gold);box-shadow:-12px 0 32px rgba(0,0,0,.55);
  transform:translateX(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);visibility:hidden}
.app.focus.drawer .side{transform:none;visibility:visible}
.app.focus .drawerhead{display:flex}
.app.focus .side .sumcard,.app.focus .side .helpcard{display:block}
/* cards recolhíveis */
.side .card h2{cursor:pointer;user-select:none;display:flex;align-items:center}
.side .card h2::after{content:"▾";margin-left:auto;font-size:14px;color:var(--mid);transition:transform .2s}
.side .card.collapsed h2{margin-bottom:0;border-bottom:0;padding-bottom:0}.side .card.collapsed h2::after{transform:rotate(-90deg)}
.side .card.collapsed>:not(h2){display:none!important}
/* tela cheia: sem margens, jogo ocupa a tela toda */
body.fs{padding:0}body.fs .app{max-width:none;gap:0;height:100vh;height:100dvh}body.fs .stage{border-radius:0}
@media (max-width:900px){.app.focus .side{width:100vw}}
@media (prefers-reduced-motion:reduce){.app.focus .side{transition:none}}
@media (max-width:760px){.playgrid{grid-template-columns:1fr}.mhead{padding:12px}.mplayer{width:100%}.mbody{padding:12px}.mfoot{padding:10px 12px}.sumline{flex-basis:100%}.btn.big{flex:1}}
@media (prefers-reduced-motion:reduce){.dialog.menu,#startBtn{animation:none}}
.godfx{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0}
.insbar{display:flex;gap:3px;margin-top:2px}.insbar i{width:14px;height:5px;border-radius:2px;background:#2a1a30;border:1px solid #5a3a6a}.insbar i.on{background:linear-gradient(90deg,#b066ff,#ff3bd0);border-color:#ff9ae8;box-shadow:0 0 6px #ff3bd0}
.skill.insane{border-color:#ff3bd0;box-shadow:0 0 18px rgba(255,59,208,.85);animation:glow 1s ease-in-out infinite}.skill.insane .st{color:#ff9ae8}
.wall4{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.view.quaking{animation:quake .8s cubic-bezier(.36,.07,.19,.97)}
@keyframes quake{0%,100%{transform:none}10%{transform:translate(-14px,8px) rotate(-1.4deg)}20%{transform:translate(12px,-10px) rotate(1.2deg)}30%{transform:translate(-10px,12px) rotate(-.9deg)}
  40%{transform:translate(9px,-6px) rotate(.8deg)}55%{transform:translate(-6px,5px) rotate(-.5deg)}70%{transform:translate(4px,-3px) rotate(.3deg)}85%{transform:translate(-2px,2px)}}
.toonburst.rock polygon{fill:#c9a26a;stroke:#5a3a1e}.toonburst.rock span{color:#fff3d0;-webkit-text-stroke:3px #3a2410;text-shadow:4px 4px 0 #3a2410;font-size:44px}
.toonrift{position:absolute;inset:0}.toonrift svg{position:absolute;inset:0}
.toonrift .rift{fill:none;stroke:#1a0f05;stroke-width:9;stroke-linejoin:miter;stroke-dasharray:3000;stroke-dashoffset:3000;animation:riftDraw .35s ease-out forwards,riftFade 1.6s ease-in forwards}
.toonrift .rift2{fill:none;stroke:#ffb020;stroke-width:3;stroke-dasharray:3000;stroke-dashoffset:3000;animation:riftDraw .35s ease-out forwards,riftFade 1.6s ease-in forwards}
@keyframes riftDraw{to{stroke-dashoffset:0}}@keyframes riftFade{0%,60%{opacity:1}100%{opacity:0}}
.toonpuff{position:absolute;width:46px;height:34px;margin:-17px 0 0 -23px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff8ec,#d8c0a0 60%,#a88a68);box-shadow:14px -6px 0 -4px #efe0c8,-12px -4px 0 -6px #e6d2b4;animation:puff 1.1s ease-out both}
@keyframes puff{0%{transform:scale(.2);opacity:0}25%{transform:scale(1.1) translateY(-6px);opacity:1}100%{transform:scale(1.6) translateY(-50px);opacity:0}}
@media (prefers-reduced-motion:reduce){.view.quaking{animation:none}.toonpuff{animation-duration:.3s}}
.impactframe{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(0,0,0,.55) 100%);-webkit-backdrop-filter:contrast(1.25) saturate(1.3);backdrop-filter:contrast(1.25) saturate(1.3);animation:impF .38s ease-out forwards}
@keyframes impF{0%{opacity:1}100%{opacity:0}}
.toonflash{position:absolute;inset:0;background:#fff;mix-blend-mode:screen;animation:toonFlash .26s ease-out forwards}
@keyframes toonFlash{0%{opacity:.95}40%{opacity:.6;background:#000;mix-blend-mode:normal}100%{opacity:0}}
.speedlines{position:absolute;inset:-20%;background:repeating-conic-gradient(from 0deg at calc(var(--cx) + 20%) calc(var(--cy) + 20%),rgba(255,255,255,.55) 0 1.2deg,transparent 1.2deg 7deg);
  -webkit-mask:radial-gradient(circle at calc(var(--cx) + 20%) calc(var(--cy) + 20%),transparent 90px,#000 260px);mask:radial-gradient(circle at calc(var(--cx) + 20%) calc(var(--cy) + 20%),transparent 90px,#000 260px);animation:speedFade .9s ease-out forwards}
@keyframes speedFade{0%{opacity:1}100%{opacity:0}}
.toonburst{position:absolute;width:240px;height:240px;margin:-120px 0 0 -120px;display:grid;place-items:center;animation:burstPop 1.1s cubic-bezier(.2,1.8,.4,1) forwards}
.toonburst svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 6px 0 #1a0600)}
.toonburst polygon{fill:#ffd23f;stroke:#e0402e;stroke-width:9;stroke-linejoin:round}
.toonburst span{position:relative;font:400 52px/1 Bangers,"Alegreya Sans",sans-serif;letter-spacing:.04em;color:#e0402e;-webkit-text-stroke:3px #1a0600;text-shadow:4px 4px 0 #1a0600;transform:rotate(-10deg)}
@keyframes burstPop{0%{transform:scale(0) rotate(-20deg)}18%{transform:scale(1.25) rotate(6deg)}30%{transform:scale(1) rotate(-3deg)}80%{opacity:1}100%{transform:scale(1.1) rotate(0deg);opacity:0}}
.toonfly{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;will-change:transform}
.toonfly img{width:100%;height:100%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.55))}
.toonfly.ghost img{filter:blur(2px) brightness(1.4)}
.twinkle{position:absolute;margin:-20px 0 0 -20px;font-size:40px;color:#fff;text-shadow:0 0 12px #fff,0 0 24px #ffd23f;animation:twk .9s ease-out forwards}
@keyframes twk{0%{transform:scale(0) rotate(0deg);opacity:0}30%{transform:scale(1.4) rotate(90deg);opacity:1}100%{transform:scale(0) rotate(200deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.toonburst,.speedlines,.twinkle{animation-duration:.3s}}
.w4blood{position:absolute;width:0;height:0;animation:w4fade 5.2s ease-in forwards}
.w4blood i{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c01818,#6a0808 70%);opacity:.92}
.w4blood i:nth-child(1){width:150px;height:130px;left:-75px;top:-65px}.w4blood i:nth-child(2){width:46px;height:40px;left:70px;top:-40px}
.w4blood i:nth-child(3){width:30px;height:30px;left:-110px;top:30px}.w4blood i:nth-child(4){width:22px;height:22px;left:40px;top:70px}.w4blood i:nth-child(5){width:18px;height:18px;left:-60px;top:-95px}
.w4blood b{position:absolute;left:-26px;top:20px;width:52px;height:0;border-radius:0 0 26px 26px;background:linear-gradient(180deg,#8a0c0c,rgba(110,8,8,.55));animation:w4drip 3.6s ease-in .2s forwards}
.w4blood s{position:absolute;left:-120px;top:-120px;width:240px;height:240px;background:var(--cracks,none) center/100% 100% no-repeat;opacity:.8}
@keyframes w4drip{to{height:260px}}
@keyframes w4fade{0%,70%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.w4{animation-duration:.8s}.w4blood{animation-duration:1.5s}}
.asura{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%) scaleY(0);z-index:5;pointer-events:none;padding:18px 16px;text-align:center;
  background:linear-gradient(90deg,transparent,rgba(8,4,10,.78) 15%,rgba(8,4,10,.82) 50%,rgba(8,4,10,.78) 85%,transparent);-webkit-backdrop-filter:blur(8px) saturate(.6);backdrop-filter:blur(8px) saturate(.6);opacity:0}
.asura.on{animation:asIn .25s ease-out forwards}.asura.out{animation:asOut .55s ease-in forwards}
.as-line{height:2px;margin:0 auto;width:70%;background:linear-gradient(90deg,transparent,#ff6a1c,#ffd23f,#ff6a1c,transparent)}
.as-txt{font:700 clamp(30px,6vw,64px)/1.15 "Cinzel Decorative",Cinzel,serif;letter-spacing:.08em;color:#f4e6d0;margin:10px 0 2px;text-shadow:0 0 18px rgba(255,90,28,.8),0 3px 0 #000;white-space:nowrap}
.as-txt span{display:inline-block;opacity:0;transform:scale(1.8);filter:blur(6px)}
.as-txt span.in{animation:asLetter .3s cubic-bezier(.2,1.6,.4,1) forwards}
.as-sub{font:600 13px "Alegreya Sans",sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#ffb070;margin-bottom:10px}
@keyframes asIn{from{opacity:0;transform:translateY(-50%) scaleY(0)}to{opacity:1;transform:translateY(-50%) scaleY(1)}}
@keyframes asOut{to{opacity:0;transform:translateY(-50%) scaleY(.2)}}
@keyframes asLetter{to{opacity:1;transform:scale(1);filter:blur(0)}}
@media (prefers-reduced-motion:reduce){.asura.on,.as-txt span.in{animation-duration:.01s}}
.godfx::before,.godfx::after{content:"";position:absolute;inset:0}
.godfx.on{animation:godGlass 3.4s ease-out forwards}
.godfx.on::before{background:var(--cracks) center/100% 100% no-repeat;animation:godCrack 3.4s ease-out forwards}
.godfx.on::after{background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 48%,transparent 60%);background-size:250% 100%;animation:godSheen 1.6s ease-out 2 forwards}
.godfx.sun{-webkit-backdrop-filter:blur(2px) saturate(1.8) contrast(1.1);backdrop-filter:blur(2px) saturate(1.8) contrast(1.1);background:radial-gradient(circle at 50% 50%,rgba(255,240,200,.55),rgba(255,120,30,.35) 35%,rgba(160,20,0,.35) 100%)}
.godfx.ice{-webkit-backdrop-filter:blur(4px) brightness(1.1);backdrop-filter:blur(4px) brightness(1.1);background:radial-gradient(ellipse at 50% 50%,rgba(200,235,255,.08) 30%,rgba(220,245,255,.6) 75%,rgba(255,255,255,.85) 100%)}
.godfx.holy{-webkit-backdrop-filter:blur(1.5px) brightness(1.2);backdrop-filter:blur(1.5px) brightness(1.2);background:repeating-conic-gradient(from 0deg at 50% 45%,rgba(255,240,180,.28) 0 6deg,transparent 6deg 18deg),radial-gradient(circle at 50% 45%,rgba(255,255,230,.7),rgba(255,210,120,.2) 55%,transparent 80%)}
@keyframes godGlass{0%{opacity:0}8%{opacity:1}70%{opacity:.85}100%{opacity:0}}
@keyframes godCrack{0%{opacity:0;transform:scale(.4)}12%{opacity:1;transform:scale(1)}75%{opacity:.8}100%{opacity:0;transform:scale(1.04)}}
@keyframes godSheen{from{background-position:150% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.godfx.on,.godfx.on::before,.godfx.on::after{animation-duration:.01s}}
.skillbar{position:absolute;right:12px;bottom:150px;display:flex;flex-wrap:wrap-reverse;justify-content:flex-end;gap:6px;z-index:3;max-width:min(60%,400px)}
.skill{position:relative;width:74px;padding:5px 4px 6px;border-radius:12px;border:2px solid #7a6a4a;background:linear-gradient(180deg,#3a2a1a,#1a120a);color:#f5e6c8;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;overflow:hidden;font:inherit}
.skill img{width:34px;height:34px}.skill .sn{font:700 11px "Alegreya Sans",sans-serif;line-height:1.05;text-align:center}.skill .st{font:700 11px "Alegreya Sans",sans-serif;color:#c9b890}
.skill .cdr{position:absolute;inset:0;pointer-events:none}.skill kbd{position:absolute;top:3px;right:5px;font-size:10px;color:#c9b890}
.skill.ready{border-color:#ffb03a;box-shadow:0 0 16px rgba(255,120,30,.8);animation:glow 1.4s ease-in-out infinite}.skill.ready .st{color:#ffd23f}
.skill.wait .st{color:#8fdcff}
@media (max-width:900px){.skillbar{bottom:168px;right:8px}.skill{width:72px}.skill img{width:34px;height:34px}}

.mpgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mpbox{background:#0e1a33;border:1px solid var(--hair);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px}
.mpbox .note{margin:0}#mpSearch.danger{background:linear-gradient(180deg,#7a2a25,#4d1815);border-color:var(--ember);color:#ffd6d2}
#mpInviteNick{flex:1;min-width:140px;background:#08101f;border:1px solid var(--hair);border-radius:6px;padding:7px;color:var(--ink);font:600 14px "Alegreya Sans",sans-serif}
.mpplayers li.gm{border-color:#b066ff}
.invite{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:rgba(4,8,16,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:16px}
.invcard{width:min(420px,100%);background:linear-gradient(180deg,#1a2c52,#0e1729);border:2px solid var(--gold-hi);border-radius:14px;padding:18px;text-align:center;box-shadow:0 0 40px rgba(230,196,111,.35);animation:invPop .35s cubic-bezier(.2,1.6,.4,1)}
.invcard h2{font:700 22px var(--display);color:var(--gold-hi);border:0;margin:6px 0;padding:0;text-transform:none;letter-spacing:.02em}.invcard p{color:var(--ink-soft);margin:6px 0}
.invcard .row{justify-content:center}.invprog{color:#8fe36b!important;min-height:18px}
.invbar{height:5px;background:#08101f;border-radius:3px;overflow:hidden}.invbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff5a1c,var(--gold-hi));transition:width .1s linear}
@keyframes invPop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.gmbar{position:absolute;left:12px;right:12px;top:12px;z-index:5;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 12px;border-radius:10px;
  background:rgba(20,8,40,.85);border:1px solid #b066ff;color:var(--ink);font-size:13px;box-shadow:0 0 18px rgba(176,102,255,.35)}
.gmbar b{color:#d8b8ff;font:700 15px var(--display)}.gmbar select,.gmbar input[type=number]{background:#0e1a33;color:var(--ink);border:1px solid var(--hair);border-radius:6px;padding:3px 6px;width:auto}
.gmbar input[type=number]{width:60px}.gmbar small{color:var(--mid)}.chk2{display:flex;align-items:center;gap:4px}
.gmplayers{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%}.gmp{display:flex;align-items:center;gap:4px;background:#0e1a33;border:1px solid var(--hair);border-radius:8px;padding:3px 6px}
.gmp button{background:none;border:1px solid var(--hair);border-radius:6px;color:var(--ink);cursor:pointer;padding:1px 5px}.gmp .dot{width:10px;height:10px;border-radius:50%}
@media (max-width:760px){.mpgrid{grid-template-columns:1fr}}

/* conta: entrar / criar */
.auth{display:flex;flex-direction:column;gap:10px;width:min(380px,calc(100vw - 32px));padding:20px;animation:menuIn .35s ease-out}
.auth[hidden]{display:none}
.auth.login .reg-only{display:none}
.auth-tabs{display:flex;gap:6px;margin-bottom:4px}
.auth-tabs .tab{flex:1;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:transparent;color:inherit;font:inherit;cursor:pointer;opacity:.7}
.auth-tabs .tab.on{opacity:1;background:rgba(255,255,255,.1);border-color:rgba(255,215,120,.6)}
.auth label{display:flex;flex-direction:column;gap:4px;font-size:13px;text-align:left}
.auth input,.auth select{padding:9px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.35);color:inherit;font:inherit}
.auth select{color-scheme:dark;color:#fff}
.auth select option{color:#fff;background:#0e1729}
.auth select option[value=""]{color:#b8c2d6}
.auth-msg{min-height:1.2em;margin:0;font-size:13px;color:#ff8a80}

/* tela inicial: instalar app / retomar */
.sp-ios,.sp-resume{max-width:340px;font-size:13px;color:var(--ink-soft);margin:0}
#installBtn{animation:menuIn .4s ease-out}
body.app-mode{padding:0}body.app-mode .app{max-width:none;gap:0;height:100vh;height:100dvh}body.app-mode .stage{border-radius:0}

/* ---------------- monitores de vários tamanhos ---------------- */
/* notebooks e telas estreitas (901–1200px): painel mais fino e barra compacta */
@media (min-width:901px) and (max-width:1200px){
  body{padding:10px}
  .app{grid-template-columns:1fr 264px;gap:10px}
  .brand{display:none}.bar{gap:10px;padding:8px 12px}.stat{padding:2px 8px}.stat .v{font-size:17px}
  .side{gap:10px}.side .card{padding:12px}
  .dialog.menu{max-width:760px!important}
}
/* telas baixas (1366×768, 1280×720, 1440×900 com zoom) */
@media (min-width:901px) and (max-height:820px){
  body{padding:8px}
  .app{gap:10px;min-height:0}
  .bar{padding:6px 14px;gap:10px}.stat .v{font-size:17px}.brand{font-size:17px}
  .side{gap:10px}.side .card{padding:12px}.help{font-size:13px}
  .dialog.menu{max-height:calc(100% - 8px)}.mhead{padding:10px 16px}.mbody{padding:10px 16px}
  .dialog h1{font-size:24px}
}
@media (min-width:901px) and (max-height:660px){.side .helpcard{display:none}#mini{width:150px;height:94px}}
/* monitores grandes (Full HD+ e ultrawide) */
@media (min-width:1600px){.app{max-width:1800px;grid-template-columns:1fr 340px}.dialog.menu{max-width:980px!important}}
@media (min-width:2200px){
  .app{max-width:none;grid-template-columns:1fr 400px;gap:20px}
  body{font-size:17px}.bar{padding:12px 26px}.stat .v{font-size:24px}.brand{font-size:24px}
  .btn{font-size:16px;min-height:42px}.side .card{padding:20px}h2{font-size:15px}
  #mini{width:260px;height:162px}.dialog.menu{max-width:1200px!important}
}
/* 4K: aumenta toda a interface em volta do mapa */
@media (min-width:3000px){.bar,.side,.overlay .dialog,.skillbar,.gmbar{zoom:1.35}}

/* visitante (sem login): só a tela inicial / cadastro sobre o mapa, sem barra nem painel */
body.guest .bar,body.guest .side,.guest-boot .bar,.guest-boot .side{display:none!important}
body.guest .app{grid-template-columns:1fr!important;max-width:none}
.shopit .sh-icon{width:44px;height:44px;object-fit:contain;border-radius:8px;float:left;margin:0 10px 4px 0;background:rgba(0,0,0,.25)}

/* ================= celular (retrato e paisagem) ================= */
@media (max-width:760px){
  /* barra da partida: 2 linhas enxutas (placar + botões só com ícone) */
  .bar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 8px;padding:6px 8px;padding-top:calc(6px + env(safe-area-inset-top,0px))}
  .bar .stat{flex-direction:row;align-items:center;gap:6px;padding:3px 8px;min-width:0}
  .bar .stat .l{display:none}.bar .stat br{display:none}.bar .stat .v{font-size:15px}.bar .stat .ic{font-size:16px}
  .bar>.btn{grid-row:2;min-height:34px;padding:4px 0;font-size:14px}
  .bar{grid-template-rows:auto auto}
  .bar>.btn{width:auto}
  #homeBtn,#menuBtn,#panelBtn,#fsBtn,#sndBtn,#pauseBtn{grid-column:auto}
  .bar:has(#pauseBtn){grid-template-columns:repeat(6,1fr)}
  .bar .stat{grid-column:span 2}
  #menuBtn{font-size:13px}
  /* menu: tela inteira, cabeçalho compacto, lista com mais espaço */
  .overlay{padding:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
  .dialog.menu{max-height:100%!important;height:100%;border-radius:12px}
  .mhead{padding:8px 10px!important;gap:8px}
  .brandbox .crest{font-size:24px}.brandbox h1{font-size:20px!important;margin:0!important}
  #ovText{display:none}
  .mplayer{padding:6px 8px;gap:8px}.mplayer .avatar{font-size:22px}
  .tabs .tab{padding:8px 12px}
  .mbody{padding:10px!important}
  .step{padding:8px 10px}.step h3{margin:0 0 6px}
  .mfoot{padding:8px 10px!important;gap:8px}
  .mfoot .sumline{order:-1;flex-basis:100%;font-size:12px;margin:0}
  #homeBtn2{flex:0 0 auto;padding:8px 12px;min-height:44px}
  #startBtn{flex:1;min-height:46px;padding:10px 12px}
  #matchBtns{flex:1 1 100%;margin:0}#matchBtns .btn{flex:1}
  /* tela inicial e cadastro */
  .sp-title{font-size:34px}.splash{padding:16px}
  .auth{width:100%;max-height:100%;overflow:auto}
  .auth input,.auth select{font-size:16px} /* evita o zoom automático do iPhone ao tocar no campo */
  .invcard{width:calc(100vw - 24px)}
}
/* celular deitado: altura pequena, barra numa linha só e menu rolando inteiro */
@media (max-height:520px) and (orientation:landscape){
  body{padding:0}.app{gap:0;height:100vh;height:100dvh}.stage{height:100dvh!important;min-height:0!important;border-radius:0}
  .bar{display:flex!important;flex-wrap:nowrap;gap:6px;padding:4px 8px;padding-left:calc(8px + env(safe-area-inset-left,0px));padding-right:calc(8px + env(safe-area-inset-right,0px))}
  .bar .brand{display:none}.bar .stat{flex-direction:row;gap:4px;padding:2px 8px}.bar .stat .l,.bar .stat br{display:none}.bar .stat .v{font-size:14px}
  .bar>.btn{min-height:30px;padding:2px 10px;font-size:13px}
  #mini{width:110px;height:68px}
  .mbar{padding:4px 8px}.msum{width:48px}.msum img{width:26px;height:26px}.mact .btn{min-height:32px;padding:4px}
  .skillbar{bottom:110px}
  .dialog.menu{max-height:100%!important;height:100%}.mhead{padding:6px 10px!important}#ovText{display:none}.brandbox h1{font-size:18px!important}
  .overlay{padding:4px}
  .splash{gap:4px}.sp-crest{font-size:30px}.sp-title{font-size:28px}.sp-sub{margin:0}
}
@media (max-height:520px) and (orientation:landscape){
  .msum{width:58px!important;min-height:0!important;height:auto!important;padding:2px!important;gap:0!important}
  .msum .nm{font-size:9px!important;line-height:1.1;max-height:2.2em;overflow:hidden}
  .msum img{width:24px!important;height:24px!important}.msum .cost{font-size:10px!important;padding:0 4px!important}
  .mact .btn{min-height:28px!important;font-size:13px}
}
@media (max-height:520px) and (orientation:landscape){
  .mbar{flex-direction:row!important;flex-wrap:wrap;align-items:flex-end;gap:6px!important;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))!important}
  .mbar .mq{flex:1 1 100%}.mbar .mrow{flex:1 1 0;min-width:0}
  .mbar .mact{flex:0 0 132px;flex-direction:column;gap:4px}.mbar .mact .btn{flex:none;width:100%}
}

/* selo de download do app Android (estilo de loja, marca própria) */
.apk-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:12px;background:#000;border:1px solid #a6a6a6;color:#fff;text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.45);animation:menuIn .4s ease-out;max-width:300px}
.apk-badge[hidden]{display:none}
.apk-badge img{width:40px;height:40px;border-radius:9px}
.apk-badge span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.apk-badge small{font-size:9px;letter-spacing:.08em;color:#d0d0d0}.apk-badge b{font:600 18px "Alegreya Sans",sans-serif}
.apk-badge small+b+small{letter-spacing:0;font-size:10px;color:#9aa}
.apk-badge i{font-style:normal;font-size:20px;margin-left:6px;color:#e6c46f}
.apk-badge:active{transform:translateY(1px)}

/* ================= Mundo Aberto ================= */
body.ow-mode .bar,body.ow-mode .side,body.ow-mode .mbar,body.ow-mode #skillbar{display:none!important}
body.ow-mode .app{grid-template-columns:1fr!important}
.owbtn{background:linear-gradient(180deg,#2f9a5a,#1c6a3a)!important;border-color:#6fdc9a!important}
.owhud{position:absolute;inset:0;z-index:5;pointer-events:none;font-size:13px}
.owhud>*{pointer-events:auto}.owhud[hidden]{display:none}
.owtop{position:absolute;left:10px;top:10px;display:flex;gap:8px;background:rgba(8,14,28,.82);border:1px solid var(--gold);border-radius:10px;padding:6px 8px;width:min(300px,62vw)}
.owtop img{width:46px;height:46px;border-radius:8px;border:1px solid var(--hair);background:#08101f}
.owinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.owinfo small{color:var(--gold-hi)}
.owbar{position:relative;height:12px;border-radius:6px;background:rgba(0,0,0,.5);overflow:hidden}.owbar i{position:absolute;inset:0 auto 0 0;transition:width .2s}
.owbar span{position:relative;display:block;text-align:center;font-size:9px;line-height:12px;color:#fff;text-shadow:0 1px 1px #000}
.owbar.hp i{background:linear-gradient(90deg,#b71c1c,#ff5a4a)}.owbar.sp i{background:linear-gradient(90deg,#1c4bb7,#4a9aff)}.owbar.xp{height:8px}.owbar.xp i{background:linear-gradient(90deg,#b88a1c,#ffd23f)}.owbar.xp span{font-size:8px;line-height:8px}
body.ow-mode #mini{top:10px!important;right:10px;left:auto!important;bottom:auto!important}
.owzone{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:rgba(8,14,28,.7);border:1px solid var(--hair);border-radius:20px;padding:3px 14px;color:var(--gold-hi);font-weight:700;white-space:nowrap}
.owmenu{position:absolute;left:10px;top:92px;display:flex;flex-direction:column;gap:6px}.owmenu .btn{min-height:32px;padding:4px 10px;font-size:13px;position:relative}
.owbadge{position:absolute;top:-6px;right:-6px;background:#ff4a3d;color:#fff;border-radius:10px;font:700 11px sans-serif;padding:1px 6px;font-style:normal}
.owportal{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);animation:startPulse 1.6s infinite}
.owaim{position:absolute;left:50%;top:44px;transform:translateX(-50%);background:rgba(120,20,20,.85);color:#fff;border-radius:8px;padding:6px 12px;font-weight:700}
.owaim[hidden],.owportal[hidden],.owbadge[hidden]{display:none}
.owskills{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(10,64px);gap:5px;max-width:calc(100vw - 20px)}
.owsk{position:relative;height:60px;border-radius:8px;border:1px solid var(--gold);background:linear-gradient(180deg,#1b2d52,#0e1729);color:var(--ink);font:600 10px "Alegreya Sans",sans-serif;cursor:pointer;overflow:hidden;padding:2px}
.owsk .n{display:block;line-height:1.1;margin-top:10px}.owsk .k{position:absolute;left:4px;top:2px;color:var(--gold-hi);font-weight:800}.owsk .l{position:absolute;right:4px;top:2px;color:#9fe}
.owsk.off{opacity:.55}.owsk.lock{opacity:.35;filter:grayscale(1)}.owsk .cd{position:absolute;inset:0;pointer-events:none}
.owpanel{position:absolute;right:10px;top:140px;bottom:84px;width:min(420px,calc(100vw - 20px));overflow:auto;background:rgba(8,14,28,.95);border:1px solid var(--gold);border-radius:12px;padding:10px 12px}
.owpanel[hidden]{display:none}.owpanel header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:var(--gold-hi)}
.owstat{display:grid;grid-template-columns:40px 1fr 36px auto auto;gap:6px;align-items:center;padding:5px 0;border-bottom:1px solid var(--hair)}
.owstat>b{color:var(--gold-hi)}.owstat span small{display:block;color:var(--mid);font-size:11px}.owstat em{font-style:normal;font-weight:800;font-size:16px;text-align:center}.owstat .btn{min-height:28px;padding:2px 8px}
.owder{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-top:10px;font-size:12px}.owder span{display:flex;justify-content:space-between;color:var(--mid)}.owder b{color:var(--ink)}
.owtree{display:flex;flex-direction:column;gap:6px}
.owtn{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;border:1px solid var(--hair);border-radius:8px;padding:6px 8px;background:rgba(255,255,255,.03);position:relative}
.owtn+.owtn::before{content:"";position:absolute;left:19px;top:-8px;width:2px;height:8px;background:var(--gold)}
.owtn.has{border-color:var(--gold);background:rgba(201,162,74,.1)}.owtn.lock{opacity:.5}.owtn p{margin:2px 0 0;font-size:11px;color:var(--mid)}.owtn .kk{font-weight:800;color:var(--gold-hi);text-align:center}
.owstatus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:16px;text-shadow:0 2px 4px #000;margin:0}
.owcreate{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:rgba(4,8,16,.85);padding:10px;overflow:auto}
.owcreate[hidden]{display:none}.owcreate .dialog{max-width:760px;max-height:100%;overflow:auto}
.owclasses{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin:10px 0}
.owcls{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:10px;border:1px solid var(--hair);background:rgba(255,255,255,.04);color:var(--ink);cursor:pointer;font:inherit}
.owcls img{width:48px;height:48px}.owcls b{font-size:12px;text-align:center}.owcls small{font-size:10px;color:var(--mid);text-align:center}.owcls.on{border-color:var(--gold-hi);background:rgba(201,162,74,.18)}
.owclsinfo{min-height:2.4em;font-size:12px;color:var(--ink-soft)}.owcreate input{flex:1;min-width:160px;padding:9px 10px;border-radius:8px;border:1px solid var(--hair);background:rgba(0,0,0,.35);color:inherit;font:inherit;font-size:16px}
@media (max-width:760px){
  .owskills{grid-template-columns:repeat(5,1fr);width:calc(100vw - 20px);bottom:6px}.owsk{height:46px}.owsk .n{margin-top:12px;font-size:9px}
  .owmenu{top:auto;bottom:112px;left:10px;flex-direction:row}.owmenu .btn{font-size:12px}
  .owportal{bottom:160px}.owpanel{top:80px;bottom:112px;right:6px}
  body.ow-mode #mini{width:96px!important;height:60px!important}
  .owtop{width:calc(100vw - 130px)}
}
@media (max-width:760px){.owzone{top:84px;font-size:12px}}

#owBtnPvp.pvpon{background:linear-gradient(180deg,#b3261e,#6e120d)!important;border-color:#ff6a5a!important;color:#fff!important}
#owBtnPvp:disabled{opacity:.5}

.owchars{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.owchar{display:grid;grid-template-columns:48px 1fr auto auto;gap:10px;align-items:center;padding:8px;border:1px solid var(--hair);border-radius:10px;background:rgba(255,255,255,.04)}
.owchar img{width:48px;height:48px;border-radius:8px;background:#08101f}.owchar small{display:block;color:var(--mid);font-size:12px}
#owNew[hidden],#owChars[hidden]{display:none}

.owtabs{display:flex;gap:4px;margin:0 0 8px}.owtabs button{flex:1;padding:6px 4px;border-radius:8px;border:1px solid var(--hair);background:rgba(255,255,255,.04);color:var(--mid);font:700 12px "Alegreya Sans",sans-serif;cursor:pointer}
#owInv:not([hidden]) .owtabs [data-p=owInv],#owStats:not([hidden]) .owtabs [data-p=owStats],#owTree:not([hidden]) .owtabs [data-p=owTree]{color:var(--gold-hi);border-color:var(--gold);background:rgba(201,162,74,.14)}
#owInvBody h3{margin:8px 0 4px;color:var(--gold);font-size:13px}#owInvBody h3 small{color:var(--mid)}
.owslots{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.owslot{border:1px solid var(--tc);border-radius:8px;padding:6px;background:rgba(0,0,0,.25);display:flex;flex-direction:column;gap:2px;min-height:64px}
.owslot small{color:var(--mid);font-size:10px;text-transform:uppercase}.owslot b{color:var(--tc);font-size:12px}.owslot span{font-size:11px;color:var(--ink-soft)}.owslot .vazio{color:#556}.owslot .btn{min-height:24px;padding:2px 8px;align-self:flex-start;font-size:11px}
.owitems{display:flex;flex-direction:column;gap:5px}
.owitem{display:grid;grid-template-columns:28px 1fr auto auto;gap:6px;align-items:center;border-left:3px solid var(--tc);background:rgba(255,255,255,.03);border-radius:6px;padding:5px 6px}
.owitem .ic{font-size:20px;text-align:center}.owitem b{color:var(--tc);font-size:12px}.owitem small{display:block;color:var(--mid);font-size:10px}.owitem span{font-size:11px;color:var(--ink-soft)}
.owitem .btn{min-height:26px;padding:2px 8px;font-size:11px}
em.fav{color:#ffd23f;font-style:normal}em.nfav{color:var(--mid);font-style:normal}
.gmbtn{background:linear-gradient(180deg,#6a2a9a,#3a1460)!important;border-color:#b066ff!important}
.owgm{top:auto;bottom:84px;height:auto}.owgm .row2{grid-template-columns:repeat(3,1fr)}