/* Visual liso e iluminado, para casar com os sprites renderizados em 3D.
   Painéis de vidro azul-marinho sobre um cenário pintado; cada modo tem sua cor. */
:root{
  --bg:#0a1730;--glass:rgba(10,24,52,.78);--glass2:rgba(16,36,74,.86);--edge:rgba(150,200,255,.22);--edge2:rgba(170,215,255,.45);
  --txt:#f2f7ff;--mut:#a9bedf;--acc:#2f8cff;--acc2:#45e0d2;--gold:#ffc83d;--good:#3ddc84;--bad:#ff5a5a;
  --panel:#11264b;--line:#2a4f86;--line2:#4878bd;
  --r-lg:22px;--r-md:16px;--r-sm:11px;
  --shadow:0 10px 28px rgba(2,8,24,.45);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:'Baloo 2',Nunito,system-ui,sans-serif;font-weight:500;overflow:hidden;-webkit-font-smoothing:antialiased}
button{font-family:inherit;color:inherit}
/* barra do menu antigo (perfil, abas, ouro/gemas, loja): fora do jogo — o jogo abre na tela inicial (title.js). Escondida
   aqui, no CSS, para não piscar ao carregar a página (F5) enquanto os scripts ainda não rodaram */
#hud{display:none!important}
/* jogo publicado (sem DEV_MODE, config.js): nada das funções de desenvolvedor aparece */
html.noDev #devBtn,html.noDev #icoDev,html.noDev #devPanel,html.noDev #mapEd{display:none!important}
/* cursor do jogo (js/ui/cursor.js monta --gc-arrow/--gc-hand/--gc-aim): seta em tudo, mão no que é clicável,
   mira no canvas da arena/aventura; campos de texto mantêm o cursor de texto */
html.gcur,html.gcur *{cursor:var(--gc-arrow)!important}
html.gcur :is(button,a[href],select,label,summary,[data-a],[data-dev],[data-t],[data-mute],.sk[id^="sk_"],.mode,.hm.swp,.mate[data-i="0"] canvas,input[type=checkbox],input[type=radio],input[type=range],[role=button]),
html.gcur :is(button,a[href],select,label,summary,[data-a],[data-dev],[data-t],[data-mute],.sk[id^="sk_"],.mode,.hm.swp,[role=button]) *{cursor:var(--gc-hand)!important}
html.gcur #ac{cursor:var(--gc-aim)!important}
html.gcur input:not([type=checkbox]):not([type=radio]):not([type=range]),html.gcur textarea{cursor:text!important}
:focus-visible{outline:3px solid #8fe8ff;outline-offset:2px}
.hidden{display:none!important}

/* ---------- Estrutura ---------- */
#app{position:fixed;inset:0}
#view{position:absolute;inset:0;overflow:auto;background:
  radial-gradient(1200px 600px at 75% -10%,#2b6fd0 0%,transparent 60%),
  radial-gradient(900px 500px at 10% 110%,#0f5a73 0%,transparent 60%),
  linear-gradient(180deg,#123268,#0a1730 70%)}
#hud{position:absolute;inset:0;pointer-events:none;z-index:10}
#hud>*{pointer-events:auto}
.profile{position:absolute;left:18px;top:14px;display:flex;gap:12px;align-items:center;width:330px;padding:8px 18px 8px 8px;cursor:pointer;
  background:linear-gradient(100deg,rgba(9,22,48,.92),rgba(14,34,72,.8));border:1px solid var(--edge);border-radius:var(--r-md) 40px 40px var(--r-md);box-shadow:var(--shadow);backdrop-filter:blur(6px)}
.avatar{width:74px;height:74px;flex:none;border-radius:14px;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;
  background:radial-gradient(circle at 50% 30%,#8fd4ff,#2a6fd0 70%);border:2px solid rgba(190,225,255,.7)}
.avatar canvas{height:100%;width:auto;display:block}
.pinfo{flex:1;min-width:0}
.pname{font-size:25px;font-weight:800;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plv{font-size:16px;color:#8fd4ff;font-weight:700;margin:0 0 5px}
.bar.xp{height:11px}
/* os itens encolhem para caber na altura da janela (até 88 px cada) */
#nav{position:absolute;left:18px;top:112px;bottom:12px;display:flex;flex-direction:column;gap:min(10px,1.2vh)}
.nav{position:relative;width:92px;flex:0 1 88px;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;
  background:linear-gradient(180deg,rgba(18,40,82,.92),rgba(9,22,48,.92));border:1px solid var(--edge);border-radius:var(--r-md);box-shadow:var(--shadow);font-size:15px;font-weight:700;user-select:none;transition:transform .12s,border-color .12s}
.nav:hover{transform:translateX(3px);border-color:var(--edge2)}
.nav.active{border:2px solid var(--acc2);background:linear-gradient(180deg,rgba(25,90,120,.95),rgba(10,40,70,.95));box-shadow:0 0 0 3px rgba(69,224,210,.18),var(--shadow)}
.nav svg{width:min(40px,5vh);height:min(40px,5vh)}
.nav .dot,.badge{position:absolute;right:-5px;top:-5px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#ff3d4f;border:2px solid #fff;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #0006}
.badge:empty{min-width:16px;height:16px;padding:0;right:-3px;top:-3px}
#topbar{position:absolute;right:82px;top:14px;display:flex;gap:10px;align-items:center}
.chip{display:flex;align-items:center;gap:10px;height:50px;padding:0 6px 0 10px;min-width:170px;justify-content:space-between;
  background:rgba(8,20,44,.86);border:1px solid var(--edge);border-radius:14px;font-size:22px;font-weight:800;box-shadow:var(--shadow)}
.chip>svg,.chip .ico svg{width:32px;height:32px;display:block}
.plus{width:36px;height:36px;border-radius:10px;border:1px solid var(--edge2);background:linear-gradient(#2c5aa4,#1a3a73);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:800;line-height:1}
.iconBtn{position:relative;width:54px;height:50px;display:flex;align-items:center;justify-content:center;background:rgba(8,20,44,.86);border:1px solid var(--edge);border-radius:14px;cursor:pointer;box-shadow:var(--shadow)}
.iconBtn svg{width:32px;height:32px}
.iconBtn:hover,.plus:hover{filter:brightness(1.15)}

/* ---------- Genéricos ---------- */
.bar{height:10px;background:rgba(3,10,26,.75);border-radius:6px;overflow:hidden;box-shadow:inset 0 1px 2px #0008}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,#1aa3ff,#6fe0ff);width:0;transition:width .35s;border-radius:6px}
.bar.en>i{background:linear-gradient(90deg,#24c46e,#9df5bf)}
.bar.low>i{background:linear-gradient(90deg,#ff5a5a,#ffa36b)}
.bar.gold>i{background:linear-gradient(90deg,#e8a114,#ffe07a)}
.btn{font:inherit;font-weight:700;cursor:pointer;border:0;background:linear-gradient(180deg,#4a9bff,#2266d6);color:#fff;padding:9px 16px;border-radius:12px;font-size:17px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 0 #173f8a,0 8px 16px rgba(0,0,0,.3);transition:filter .1s,transform .06s}
.btn:hover{filter:brightness(1.1)}.btn:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 0 #173f8a}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}
.btn.ghost{background:rgba(30,58,110,.9);box-shadow:inset 0 0 0 1px var(--edge2),0 3px 0 #0c1f42}
.btn.gold{background:linear-gradient(#ffd96a,#f0a21c);color:#3a2400;box-shadow:inset 0 1px 0 #fff8,0 4px 0 #a86a08,0 8px 16px #0005}
.btn.green{background:linear-gradient(#3fe39a,#17a462);box-shadow:inset 0 1px 0 #fff6,0 4px 0 #0c6b3d,0 8px 16px #0005}
.btn.red{background:linear-gradient(#ff7a7a,#cf3a3a);box-shadow:inset 0 1px 0 #fff6,0 4px 0 #8a1f1f,0 8px 16px #0005}
.btn.purple{background:linear-gradient(#a57dff,#6a3fd0);box-shadow:inset 0 1px 0 #fff6,0 4px 0 #43248f,0 8px 16px #0005}
.btn.sm{padding:5px 11px;font-size:14px;border-radius:10px}
.btn.big{font-size:22px;padding:12px 24px}
.page{padding:128px 32px 48px 136px;max-width:1360px}
.page h2{margin:0 0 2px;font-size:36px;font-weight:800;line-height:1.1}
.sub{color:var(--mut);margin:0 0 20px;font-size:17px;max-width:75ch}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.card{background:var(--glass);border:1px solid var(--edge);border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow);backdrop-filter:blur(4px)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spr{width:96px;height:96px}
.pmd{image-rendering:pixelated;image-rendering:crisp-edges;vertical-align:middle}
.type{display:inline-block;padding:1px 10px;border-radius:20px;font-size:13px;color:#0b1428;font-weight:800}
.muted{color:var(--mut)}
.small{font-size:14px}
.tag{display:inline-block;padding:2px 10px;border-radius:20px;font-size:13px;font-weight:700;background:rgba(40,80,140,.7);color:#d8e8ff}
.tag.warn{background:#6a3214;color:#ffd0a6}.tag.ok{background:#135c40;color:#a8f7cf}.tag.evo{background:#6a3fd0;color:#fff;animation:pulse 1s infinite}
@keyframes pulse{50%{filter:brightness(1.5)}}
h3{margin:0 0 10px;font-size:22px;font-weight:800}
kbd{background:#1d3866;border:1px solid #4878bd;border-bottom-width:3px;border-radius:6px;padding:0 6px;font-family:inherit;font-weight:700}