:root {
  --ink: #e8dfc8; --dim: #a99f86; --gold: #c9a24c; --gold2: #e9c977; --ash: #4f6f8f; --ash2: #7f9fbf; --horde: #8a3a2c; --horde2: #c06a55;
  --panel: rgba(22, 19, 15, 0.86); --line: #6b5a3e; --line2: #3e3426; --ok: #8fb069;
  --serif: 'Cinzel', 'Trajan Pro', 'Book Antiqua', Georgia, serif; --sans: 'Alegreya Sans', 'Gill Sans', 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a1610; color: var(--ink); font-family: var(--sans); font-size: 15px; user-select: none; }
canvas#c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
body.ingame canvas#c { cursor: none; }
.hidden { display: none !important; }
button { font-family: var(--sans); }

/* ---------- atmosfera (raios de sol, névoa, vinheta) ---------- */
#atmo { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
#atmo .rays { display: none; }   /* v0.30: os raios de sol agora são feixes no mundo 3D (renderer.js, makeSunShafts) */
#atmo .haze { display: none; }
#atmo .vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 60%, rgba(10, 12, 14, 0.35) 100%); }
body.no-atmo #atmo .rays, body.no-atmo #atmo .haze { display: none; }
@keyframes drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

#overlay { position: fixed; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.bubble { text-transform: uppercase; position: absolute; left: 0; top: 0; margin: -34px 0 0 8px; background: #f2ecdc; color: #1b1712; font: 700 12px/1 var(--sans); letter-spacing: 0.06em; padding: 6px 9px 5px; border-radius: 2px; white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,0.35); }
.bubble::after { content: ''; position: absolute; left: -6px; bottom: 6px; border: 6px solid transparent; border-right-color: #f2ecdc; border-left: 0; }
.bubble.horde { background: #e2cfc2; }
.dmgnum { position: absolute; left: 0; top: 0; font: 700 16px var(--serif); text-shadow: 0 2px 2px #000; white-space: nowrap; margin-left: -10px; }
.dmgnum span { display: inline-block; animation: dmgpop .22s ease-out; } .dmgnum.big { font-size: 21px; }
@keyframes dmgpop { 0% { transform: scale(1.6); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }

#crosshair { position: fixed; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; pointer-events: none; z-index: 6; display: none; }
body.ingame #crosshair { display: block; }
#crosshair .ch-h, #crosshair .ch-v { position: absolute; background: #f4ecd8; box-shadow: 0 0 2px #000; }
#crosshair .ch-h { left: 6px; right: 6px; top: 19px; height: 2px; }
#crosshair .ch-v { top: 6px; bottom: 6px; left: 19px; width: 2px; }
#crosshair::before { content: ''; position: absolute; left: 17px; top: 17px; width: 6px; height: 6px; background: #b0402c; border-radius: 50%; z-index: 2; }
#crosshair svg { position: absolute; inset: 0; }
#ch-label { position: absolute; left: 30px; top: 28px; white-space: nowrap; font: 700 12px var(--sans); color: var(--gold2); text-shadow: 0 1px 2px #000; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
.bar { position: relative; height: 10px; background: rgba(0,0,0,0.55); border: 1px solid var(--line2); }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gold); }
#hud-top { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line2); padding: 6px 12px 14px; }
#hud-top .side { display: flex; gap: 8px; align-items: baseline; font: 600 12px var(--serif); letter-spacing: 0.05em; }
#hud-top .ash .fname { color: var(--ash2); } #hud-top .horde .fname { color: var(--horde2); }
.tix { font: 700 13px var(--sans); color: var(--ink); }
#points-bar { display: flex; gap: 6px; }
.pt { width: 30px; height: 34px; position: relative; display: grid; place-items: center; font: 700 11px var(--serif); color: #fff; clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); background: #8d8676; }
.pt.o0 { background: var(--ash); } .pt.o1 { background: var(--horde); }
.pt .cp { position: absolute; left: 0; bottom: 0; height: 3px; background: #fff8; }
.pt.here { outline: 2px solid var(--gold2); }
#clock { position: absolute; bottom: 1px; left: 0; right: 0; text-align: center; font: 600 10px var(--sans); color: var(--dim); }
#hud-rank { position: absolute; top: 12px; left: 12px; display: flex; gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--line2); padding: 8px 12px 8px 8px; }
#rank-badge { width: 38px; height: 38px; display: grid; place-items: center; background: linear-gradient(#3b3222, #231d14); border: 1px solid var(--gold); color: var(--gold2); font: 700 15px var(--serif); }
.rk { width: 160px; } #rank-name { font: 700 14px var(--serif); color: var(--gold2); letter-spacing: 0.04em; }
.rk .bar { height: 6px; margin: 4px 0 2px; } .rk .bar i { background: var(--gold2); }
#xp-text { font-size: 11px; color: var(--dim); }
#minimap { position: absolute; top: 12px; right: 12px; border: 1px solid var(--line); background: #2a2519; width: 240px; }
#hud-bl { position: absolute; left: 14px; bottom: 14px; width: 330px; display: flex; flex-direction: column; gap: 7px; }
.vit .bar { height: 14px; margin-bottom: 4px; } .vit .hp i { background: linear-gradient(#a8452f, #6e2416); } .vit .st i { background: #b5a56e; } .vit .st { height: 5px; }
#hp-text { position: absolute; right: 6px; top: -1px; font: 700 11px var(--sans); }
#slots { display: flex; gap: 6px; }
.slot, .item { flex: 1; background: var(--panel); border: 1px solid var(--line2); padding: 6px 8px; display: flex; gap: 8px; align-items: center; font: 600 13px var(--sans); position: relative; }
.slot b, .item b { font: 700 11px var(--sans); color: #1b1712; background: var(--dim); padding: 1px 5px; }
.slot.on { border-color: var(--gold); } .slot.on b { background: var(--gold2); }
.slot em, .item em { margin-left: auto; font-style: normal; color: var(--gold2); font-weight: 700; }
#items { display: flex; gap: 6px; } .item { font-size: 12px; opacity: 0.9; } .item.off { opacity: 0.35; }
#hud-br { position: absolute; right: 14px; bottom: 14px; background: var(--panel); border: 1px solid var(--line2); padding: 8px 12px; min-width: 210px; }
.sq-title { font: 700 13px var(--serif); color: var(--gold2); }
#sq-icons { display: flex; gap: 4px; margin: 6px 0; flex-wrap: wrap; min-height: 22px; }
.sqi { width: 22px; height: 22px; display: grid; place-items: center; font: 700 11px var(--sans); background: #3b4a33; border: 1px solid #6e8a5a; }
.sqi.empty { background: transparent; border: 1px dashed #5a5040; }
.sqi i { position: absolute; }
#sq-order { font-size: 12px; color: var(--dim); }
#capture-ind { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); width: 300px; text-align: center; background: var(--panel); border: 1px solid var(--line2); padding: 6px 10px 8px; }
#cap-name { font: 700 12px var(--serif); margin-bottom: 4px; }
#notices { position: absolute; top: 120px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.notice { background: rgba(18, 15, 11, 0.88); border-left: 3px solid var(--gold); padding: 7px 16px; font: 600 15px var(--sans); animation: nin 0.25s ease-out; }
.notice.big { font: 700 22px var(--serif); padding: 10px 26px; border-left: 0; border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); color: var(--gold2); }
.notice.ash { border-color: var(--ash2); } .notice.horde { border-color: var(--horde2); }
@keyframes nin { from { opacity: 0; transform: translateY(-6px); } }
#killfeed { position: absolute; right: 14px; top: 190px; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; font-size: 12px; }
#killfeed div { background: rgba(0,0,0,0.5); padding: 2px 8px; }
#xpfeed { position: absolute; left: 50%; top: 58%; transform: translateX(40px); display: flex; flex-direction: column; gap: 2px; font: 700 13px var(--sans); color: var(--gold2); text-shadow: 0 1px 2px #000; }
#hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-size: 13px; color: var(--ink); background: rgba(0,0,0,0.45); padding: 4px 12px; white-space: nowrap; }
#hint:empty { display: none; }
kbd { font: 700 11px var(--sans); background: #e8dfc8; color: #1b1712; padding: 0 5px; border-radius: 2px; }

#orders { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; background: var(--panel); border: 1px solid var(--gold); padding: 12px; width: 280px; display: flex; flex-direction: column; gap: 4px; }
.ord-title { font: 700 15px var(--serif); color: var(--gold2); margin-bottom: 4px; }
#orders button { text-align: left; background: #2a241b; border: 1px solid var(--line2); color: var(--ink); padding: 7px 10px; font-size: 14px; cursor: pointer; }
#orders button:hover { border-color: var(--gold); }
#orders button b { display: inline-block; width: 22px; color: var(--gold2); }
.ord-hint { font-size: 11px; color: var(--dim); margin-top: 4px; }

#strat { position: fixed; inset: 6vh 8vw; z-index: 8; background: rgba(16, 13, 10, 0.94); border: 1px solid var(--line); display: flex; flex-direction: column; padding: 10px; }
.strat-head { display: flex; justify-content: space-between; font: 700 18px var(--serif); color: var(--gold2); margin-bottom: 6px; } .strat-head .sub { font: 400 12px var(--sans); color: var(--dim); }
#stratc { flex: 1; width: 100%; min-height: 0; }
#strat-legend { font-size: 12px; color: var(--dim); margin-top: 6px; }

#trainpanel { position: fixed; right: 12px; top: 186px; width: 268px; z-index: 5; background: var(--panel); border: 1px solid var(--line); font-size: 13px; }
.tp-head { padding: 8px 10px; font: 700 14px var(--serif); color: var(--gold2); cursor: pointer; display: flex; justify-content: space-between; }
#trainpanel.min .tp-body { display: none; }
.tp-body { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.tp-sec { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); margin-top: 6px; }
.tp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .tp-row { display: flex; gap: 4px; } .tp-row > * { flex: 1; }
#trainpanel button, #trainpanel select { background: #2a241b; border: 1px solid var(--line2); color: var(--ink); padding: 5px 6px; font-size: 12px; cursor: pointer; }
#trainpanel button:hover { border-color: var(--gold); }
#trainpanel label { display: flex; flex-direction: column; gap: 3px; }
#trainpanel .wide { margin-top: 6px; }
.tp-score b { color: var(--gold2); font-size: 15px; }

/* ---------- telas ---------- */
.screen { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; }
#menu { justify-content: flex-start; align-items: stretch; background: linear-gradient(90deg, rgba(14, 11, 8, 0.92) 0%, rgba(14, 11, 8, 0.7) 26%, rgba(14, 11, 8, 0) 50%); }
.menu-col { width: 380px; padding: 5vh 0 0 6vw; display: flex; flex-direction: column; gap: 3px; overflow: auto; }
.title { margin-bottom: 18px; }
.title .t1, .title .t2 { font: 900 54px/0.95 var(--serif); letter-spacing: 0.06em; color: #efe4c6; text-shadow: 0 3px 0 #000, 0 0 30px rgba(0,0,0,0.6); }
.title .t2 { color: var(--gold2); }
.title .t3 { font: 600 12px var(--sans); letter-spacing: 0.32em; text-transform: uppercase; color: var(--dim); margin-top: 8px; }
.msec { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: 0.22em; color: var(--gold); margin: 14px 0 4px; border-bottom: 1px solid var(--line2); padding-bottom: 4px; }
.menu-col button { text-align: left; background: transparent; border: 0; color: var(--ink); font: 600 19px var(--serif); padding: 5px 0 5px 2px; cursor: pointer; transition: color 0.1s, padding 0.15s; }
.menu-col button:hover { color: var(--gold2); padding-left: 10px; }
.mrow { display: grid; grid-template-columns: 1fr 1fr; } .mrow button { font-size: 16px; }
#menu-profile { margin-top: 18px; font-size: 13px; color: var(--dim); border-top: 1px solid var(--line2); padding-top: 10px; }
#menu-profile b { color: var(--gold2); font-family: var(--serif); }
.menu-foot { position: absolute; left: 6vw; bottom: 14px; font-size: 11px; color: #7d735e; }

.panel { background: var(--panel); border: 1px solid var(--line); padding: 22px 26px; width: min(520px, 94vw); max-height: 92vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.panel.wide { width: min(920px, 96vw); }
.panel h2, .camp-top h2 { font: 700 26px var(--serif); color: var(--gold2); margin: 0 0 14px; letter-spacing: 0.04em; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--dim); }
label output { color: var(--gold2); font-weight: 700; }
label.chk { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); }
select, input[type=text] { background: #2a241b; color: var(--ink); border: 1px solid var(--line2); padding: 7px 8px; font: 14px var(--sans); }
input[type=range] { accent-color: var(--gold); }
.btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.btns.col { flex-direction: column; align-items: stretch; }
.btns button, .panel button.primary { background: #2f281d; border: 1px solid var(--line); color: var(--ink); padding: 9px 18px; font: 700 15px var(--sans); cursor: pointer; }
.btns button:hover { border-color: var(--gold2); }
.btns button.primary { background: linear-gradient(#7a5f2c, #5b4520); border-color: var(--gold); color: #fff3d6; }
.btns button.primary.horde { background: linear-gradient(#7a2f22, #561e15); border-color: #b0553f; }
.btns button.ghost { background: transparent; }
.note { font-size: 13px; color: var(--dim); margin-top: 10px; line-height: 1.45; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line2); margin-bottom: 14px; flex-wrap: wrap; }
.tabs button { background: transparent; color: var(--dim); border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font: 700 14px var(--sans); cursor: pointer; }
.tabs button.on { color: var(--gold2); border-bottom-color: var(--gold); }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 6px 14px; font-size: 14px; }
.kv kbd { justify-self: start; }
.mp-status { border: 1px solid var(--line2); background: rgba(0,0,0,0.3); padding: 12px 14px; margin-top: 12px; font-size: 14px; line-height: 1.5; }
.mp-status b { color: var(--gold2); }
.mp-list { margin: 8px 0 0 18px; padding: 0; color: var(--ink); font-size: 14px; line-height: 1.6; }

/* campanha */
#campaign { flex-direction: column; align-items: stretch; justify-content: flex-start; background: rgba(16, 13, 10, 0.94); padding: 18px 24px; }
.camp-top { display: flex; justify-content: space-between; align-items: flex-start; }
.camp-top .btns { margin-top: 0; }
#camp-stats { font-size: 14px; color: var(--dim); margin-top: -8px; } #camp-stats b { color: var(--gold2); }
.camp-body { flex: 1; display: flex; gap: 18px; min-height: 0; margin-top: 10px; }
.camp-map { flex: 1; background: radial-gradient(ellipse at 50% 50%, #4a4630 0%, #2c2a1d 70%, #1f1d15 100%); border: 1px solid var(--line); position: relative; }
#camp-svg { width: 100%; height: 100%; }
.camp-side { width: 340px; display: flex; flex-direction: column; min-height: 0; }
#camp-info { background: var(--panel); border: 1px solid var(--line2); padding: 14px; min-height: 180px; }
#camp-info h3 { margin: 0 0 6px; font: 700 20px var(--serif); color: var(--gold2); }
#camp-info .btns { justify-content: flex-start; margin-top: 12px; }
.camp-log-h { font: 700 11px var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 14px 0 6px; }
#camp-log { flex: 1; overflow: auto; font-size: 13px; line-height: 1.5; color: var(--ink); }
#camp-log div { border-bottom: 1px solid var(--line2); padding: 4px 0; } #camp-log span { color: var(--dim); margin-right: 6px; }
.slotbtn { text-align: left !important; }

/* deploy */
.dep-grid { display: grid; grid-template-columns: 450px 1fr; gap: 22px; }
.dep-h { font: 700 13px var(--sans); text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 8px; }
#dep-map { width: 440px; border: 1px solid var(--line); background: #2a2519; cursor: pointer; }
#dep-points { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#dep-points button { background: #2a241b; color: var(--ink); border: 1px solid var(--line2); padding: 6px 10px; cursor: pointer; font-size: 13px; }
#dep-points button.on { border-color: var(--gold); color: var(--gold2); }
#deploy label { margin-bottom: 10px; }

#dead { pointer-events: none; background: radial-gradient(ellipse, rgba(60, 10, 5, 0.1), rgba(40, 6, 2, 0.55)); }
.dead-box { text-align: center; } .dead-t { font: 900 46px var(--serif); color: #d6b9a0; text-shadow: 0 3px 0 #000; } #dead-sub, #dead-timer { color: var(--ink); margin-top: 8px; font-size: 16px; }
#end-stats { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; font-size: 15px; } #end-stats b { color: var(--gold2); text-align: right; }
#end-title.win { color: var(--gold2); } #end-title.lose { color: #c98b78; }
#loading { background: #15120d; z-index: 30; } .load-box { text-align: center; } .load-t { font: 900 40px var(--serif); color: var(--gold2); letter-spacing: 0.08em; }
#load-msg { color: var(--dim); margin: 10px 0 14px; } .load-bar { width: 260px; height: 4px; background: #2a241b; margin: auto; overflow: hidden; } .load-bar i { display: block; width: 40%; height: 100%; background: var(--gold); animation: lb 1s ease-in-out infinite alternate; }
@keyframes lb { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
#err { position: fixed; left: 10px; bottom: 10px; z-index: 50; background: #3a1410; color: #ffd9cc; padding: 10px 14px; font: 12px monospace; max-width: 60vw; white-space: pre-wrap; }

#lang-toggle { display: flex; gap: 0; margin-top: 12px; }
#lang-toggle button { font: 700 12px var(--sans) !important; letter-spacing: 0.1em; padding: 5px 12px !important; border: 1px solid var(--line2) !important; color: var(--dim) !important; background: rgba(0,0,0,0.3) !important; }
#lang-toggle button.on { color: #1b1712 !important; background: var(--gold2) !important; border-color: var(--gold2) !important; }
#lang-toggle button:hover { padding-left: 12px !important; }

/* ================= v0.5 — direção de arte da interface (dark fantasy) ================= */
:root { --steel-line: rgba(176, 160, 124, 0.32); --steel-hi: rgba(255, 240, 205, 0.07); --gold-aged: #b8984e; }
.panel, #hud-top, #hud-rank, #hud-br, .slot, .item, #capture-ind, #orders, #trainpanel, #strat, #camp-info, .notice, #dead .dead-box {
  background: linear-gradient(180deg, rgba(30, 28, 24, 0.9) 0%, rgba(15, 14, 12, 0.92) 100%);
  border: 1px solid var(--steel-line);
  box-shadow: inset 0 1px 0 var(--steel-hi), inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(0, 0, 0, 0.45);
}
#dead .dead-box { background: none; border: 0; box-shadow: none; }
.panel { position: relative; }
.panel::before, .panel::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--gold-aged); opacity: 0.7; pointer-events: none; }
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.panel h2, .camp-top h2 { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); border-bottom: 1px solid var(--steel-line); padding-bottom: 10px; }
.bar { background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(20, 18, 14, 0.7)); border: 1px solid rgba(0, 0, 0, 0.6); box-shadow: 0 0 0 1px var(--steel-line); }
.vit .hp i { background: linear-gradient(180deg, #b5513a 0%, #7a2a1a 55%, #5c1d12 100%); box-shadow: inset 0 1px 0 rgba(255, 200, 170, 0.25); }
.vit .st i { background: linear-gradient(180deg, #c6b77e, #8d7f4e); }
.rk .bar i, .bar i { box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.25); }
.slot.on { border-color: var(--gold-aged); box-shadow: inset 0 0 12px rgba(200, 160, 80, 0.18), 0 6px 18px rgba(0, 0, 0, 0.45); }
.pt { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), inset 0 -6px 8px rgba(0, 0, 0, 0.25); }
#rank-badge { background: radial-gradient(circle at 50% 35%, #4a3e28, #1d1810); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); }
#minimap { border: 1px solid var(--steel-line); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 6px 18px rgba(0, 0, 0, 0.45); }
.notice { border-left: 3px solid var(--gold-aged); }
.notice.big { background: linear-gradient(90deg, rgba(15, 14, 12, 0) 0%, rgba(20, 18, 15, 0.92) 18%, rgba(20, 18, 15, 0.92) 82%, rgba(15, 14, 12, 0) 100%); border: 0; border-top: 1px solid var(--gold-aged); border-bottom: 1px solid var(--gold-aged); box-shadow: none; }
.btns button.primary { background: linear-gradient(180deg, #7d6230 0%, #5b4520 60%, #4a3818 100%); box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.25), 0 2px 0 rgba(0, 0, 0, 0.5); }
.btns button { box-shadow: inset 0 1px 0 rgba(255, 240, 205, 0.06); }
.bubble { background: #ece5d3; border: 1px solid rgba(60, 50, 35, 0.5); }
#hint { background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(10, 9, 8, 0.75) 15%, rgba(10, 9, 8, 0.75) 85%, rgba(0, 0, 0, 0) 100%); padding: 5px 30px; }

/* v0.5.1 — menu inicial sem barras de rolagem (cabe em janelas estreitas/baixas) */
#menu { overflow: hidden; }
.menu-col { width: min(380px, 88vw); box-sizing: border-box; padding: 4vh 12px 56px 6vw; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; max-height: 100vh; }
.menu-col::-webkit-scrollbar { display: none; }
.title .t1, .title .t2 { font-size: clamp(32px, 5.2vw, 54px); white-space: nowrap; }
.menu-col button { font-size: clamp(15px, 2.4vh, 19px); padding-top: clamp(2px, 0.5vh, 5px); padding-bottom: clamp(2px, 0.5vh, 5px); }
.menu-foot { white-space: nowrap; }
@media (max-height: 760px) { .title { margin-bottom: 10px; } #menu-profile { margin-top: 10px; } }
/* painéis: sem rolagem horizontal; rolagem vertical discreta só quando necessária */
.panel { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #5a4a30 transparent; }
.panel::-webkit-scrollbar { width: 6px; height: 0; } .panel::-webkit-scrollbar-thumb { background: #5a4a30; border-radius: 3px; } .panel::-webkit-scrollbar-track { background: transparent; }
@media (max-height: 720px) { .menu-foot { display: none; } .menu-col { padding-bottom: 14px; } }
/* largura útil = 400px além do recuo esquerdo; título nunca é cortado */
.menu-col { width: min(calc(6vw + 410px), 96vw); }
.title .t1, .title .t2 { font-size: clamp(30px, 4.4vw, 50px); letter-spacing: 0.04em; }
.mrow { grid-template-columns: auto auto; justify-content: start; column-gap: 28px; }

/* v0.7 — faixa de promoção por facção */
.promo { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -10px) scale(0.92); width: 520px; height: 190px; pointer-events: none; opacity: 0; transition: opacity 0.35s, transform 0.5s cubic-bezier(.2,1.4,.4,1); z-index: 6; }
.promo.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.promo-rays { position: absolute; left: 50%; top: 50px; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; opacity: 0.85; animation: promoSpin 9s linear infinite; }
.promo.ash .promo-rays { background: repeating-conic-gradient(rgba(255, 220, 140, 0.32) 0 6deg, rgba(255, 220, 140, 0) 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); }
.promo.horde .promo-rays { background: radial-gradient(circle, rgba(255, 120, 40, 0.55) 0%, rgba(160, 30, 10, 0.35) 35%, transparent 65%); animation: promoPulse 0.9s ease-in-out infinite alternate; }
.promo-badge { position: absolute; left: 50%; top: 0; width: 96px; height: 108px; margin-left: -48px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 14%, 100% 62%, 50% 100%, 0 62%, 0 14%); }
.promo.ash .promo-badge { background: linear-gradient(160deg, #f6e2a6, #c69a3e 45%, #6d4f1c); box-shadow: 0 0 40px rgba(255, 210, 120, 0.8); }
.promo.horde .promo-badge { background: linear-gradient(160deg, #6b5a52, #3a2c26 45%, #1a1210); }
.promo-badge::before { content: ''; position: absolute; inset: 5px; clip-path: inherit; }
.promo.ash .promo-badge::before { background: linear-gradient(160deg, #2b3f57, #18263a); }
.promo.horde .promo-badge::before { background: radial-gradient(circle at 50% 40%, #a8331c, #4a120a 70%); }
.promo-badge span { position: relative; font: 900 40px var(--serif); letter-spacing: 0.02em; }
.promo.ash .promo-badge span { color: #f6dc96; text-shadow: 0 2px 0 #000, 0 0 18px rgba(255, 215, 130, 0.9); }
.promo.horde .promo-badge span { color: #ffb070; text-shadow: 0 2px 0 #000, 0 0 16px rgba(255, 90, 20, 0.95); }
.promo-text { position: absolute; left: 0; right: 0; top: 116px; text-align: center; }
.promo-text small { display: block; font: 600 12px var(--sans); letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.85; }
.promo-text b { display: block; font: 900 30px var(--serif); letter-spacing: 0.05em; text-shadow: 0 3px 0 #000, 0 0 24px rgba(0, 0, 0, 0.8); }
.promo-text em { display: block; margin-top: 4px; font: italic 600 13px var(--sans); letter-spacing: 0.06em; opacity: 0.9; text-shadow: 0 2px 0 #000; }
.promo.ash .promo-text { color: #f3dfa6; } .promo.ash .promo-text small { color: #a9c2dc; }
.promo.horde .promo-text { color: #ffb48a; } .promo.horde .promo-text small { color: #d0796a; }
.promo-embers { position: absolute; inset: -20px 40px 40px; overflow: hidden; }
.promo-embers i { position: absolute; bottom: 0; width: 4px; height: 4px; border-radius: 50%; background: #ffb050; box-shadow: 0 0 8px #ff6a20; animation: promoEmber 1.8s ease-in infinite; }
@keyframes promoSpin { to { transform: rotate(360deg); } }
@keyframes promoPulse { from { transform: scale(0.92); opacity: 0.7; } to { transform: scale(1.06); opacity: 1; } }
@keyframes promoEmber { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(18px, -180px); opacity: 0; } }

/* v0.7 — multijogador: sala de espera */
.mp-code-in { text-transform: uppercase; letter-spacing: 0.25em; font-weight: 700; }
.mp-games { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 46vh; overflow-y: auto; }
.mp-game { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line2); background: rgba(0, 0, 0, 0.28); }
.mp-game button { flex: none; }
.lobby-head { display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--line2); padding-bottom: 12px; margin-bottom: 12px; }
.lobby-code { font: 900 40px var(--serif); letter-spacing: 0.22em; color: var(--gold2); user-select: all; text-shadow: 0 2px 0 #000; }
.lobby-sum { font-size: 14px; color: var(--ink); text-align: right; max-width: 60%; line-height: 1.5; }
.lobby-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .lobby-grid { grid-template-columns: 1fr; } .lobby-head { flex-direction: column; align-items: flex-start; } .lobby-sum { text-align: left; max-width: none; } }
.lobby h3 { margin: 0 0 8px; font: 700 13px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.lobby-pl { display: flex; flex-direction: column; gap: 6px; }
.lp { display: grid; grid-template-columns: 12px 1fr auto; column-gap: 8px; align-items: center; padding: 7px 10px; background: rgba(0, 0, 0, 0.3); border-left: 3px solid var(--line2); }
.lp.t0 { border-left-color: #5f86ad; } .lp.t1 { border-left-color: #a8463a; }
.lp .dot { width: 10px; height: 10px; border-radius: 50%; background: #5f86ad; } .lp.t1 .dot { background: #a8463a; }
.lp em { font-style: normal; font-size: 11px; color: var(--gold2); letter-spacing: 0.08em; text-transform: uppercase; margin-left: 6px; }
.lp .rdy { font-size: 12px; color: var(--dim); } .lp small { grid-column: 2 / 4; font-size: 11px; color: var(--dim); }
.lobby-chat { height: 190px; overflow-y: auto; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line2); padding: 8px 10px; font-size: 13px; line-height: 1.5; }
.lobby-chat .sys { color: var(--dim); font-style: italic; } .lobby-chat b.t0 { color: #9cc0e6; } .lobby-chat b.t1 { color: #ef9b82; }
.lobby-say { display: flex; gap: 6px; margin-top: 6px; } .lobby-say input { flex: 1; }
.form.one { grid-template-columns: 1fr; margin-top: 10px; }
.nameplate { position: absolute; left: 0; top: 0; margin: -10px 0 0 -60px; width: 120px; text-align: center; font: 700 12px var(--sans); letter-spacing: 0.04em; color: #e6eef8; text-shadow: 0 1px 2px #000, 0 0 6px #000; pointer-events: none; white-space: nowrap; }
.nameplate.t1 { color: #ffd2c4; } .nameplate.foe { color: #ff8a70; }

/* v0.8 — estatísticas da partida (") */
#stats { position: absolute; left: 50%; top: 12%; transform: translateX(-50%); width: min(760px, 92vw); max-height: 74vh; overflow-y: auto; background: linear-gradient(180deg, rgba(24, 20, 15, 0.94), rgba(14, 12, 9, 0.94)); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(201, 162, 74, 0.12); padding: 16px 20px; z-index: 7; pointer-events: none; scrollbar-width: none; }
#stats .st-head { display: flex; gap: 16px; align-items: baseline; border-bottom: 1px solid var(--line2); padding-bottom: 8px; margin-bottom: 10px; }
#stats .st-head b { font: 700 20px var(--serif); color: var(--gold2); letter-spacing: 0.04em; } #stats .st-head span { color: var(--dim); font-size: 13px; } #stats .st-head .note { margin-left: auto; }
#stats h3 { margin: 10px 0 6px; font: 700 13px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; } #stats .t0 h3 { color: #9cc0e6; } #stats .t1 h3 { color: #ef9b82; }
#stats table { width: 100%; border-collapse: collapse; font-size: 14px; }
#stats th { text-align: left; font: 600 11px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); padding: 4px 8px; border-bottom: 1px solid var(--line2); }
#stats td { padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: var(--ink); } #stats td:nth-child(n+3), #stats th:nth-child(n+3) { text-align: center; }
#stats tr.me td { background: rgba(201, 162, 74, 0.1); color: #f3e3b4; } #stats em { font-style: normal; font-size: 11px; color: var(--gold2); text-transform: uppercase; letter-spacing: 0.08em; }

/* v0.9 — vida da montaria */
.vit .mhp { height: 9px; margin-top: 2px; } .vit .mhp i { background: linear-gradient(#8a6a3e, #5a4224); }
#mhp-text { position: absolute; right: 6px; top: -3px; font: 700 9px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #e8d9b8; text-shadow: 0 1px 1px #000; }

/* ================= Marco 4.4 — magia e arsenal ================= */
.bar.es { height: 11px; margin-top: 3px; position: relative; }
.bar.es i { background: linear-gradient(90deg, #5b3fa8, #9f7cf0); }
.bar.es span { position: absolute; right: 5px; top: -1px; font: 700 10px/12px var(--sans); color: #e6dcff; text-shadow: 0 1px 1px #000; }
#spells { display: flex; gap: 6px; margin-top: 6px; }
.spell { flex: 1; position: relative; overflow: hidden; background: var(--panel); border: 1px solid #4c3f78; padding: 6px 8px; display: flex; gap: 8px; align-items: center; font: 600 12px var(--sans); }
.spell b { font: 700 11px var(--sans); color: #160f26; background: #a58ee8; padding: 1px 5px; }
.spell em { margin-left: auto; font-style: normal; color: #c8b6ff; font-weight: 700; }
.spell .cdv { position: absolute; left: 0; bottom: 0; height: 100%; background: rgba(10, 6, 20, 0.62); pointer-events: none; width: 0; }
.spell.off { opacity: 0.4; } .spell.low em { color: #e08a7a; } .spell.ready { border-color: #9f7cf0; box-shadow: inset 0 0 10px rgba(150, 110, 255, 0.22); }
.dep-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
button.small { font-size: 12px !important; padding: 6px 10px !important; margin: 2px 0 8px; background: #2a241b !important; color: var(--gold2) !important; border: 1px solid var(--line) !important; cursor: pointer; }
.dep-grid > div { min-width: 0; } .dep-2 > label { min-width: 0; } .dep-2 select { width: 100%; min-width: 0; }
.ars-sub { font: 600 14px var(--sans); color: var(--dim); margin-left: 8px; }
.ars-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.ars-fac, .ars-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.ars-fac button, .ars-presets button, #ars-slots button { background: #2a241b; color: var(--dim); border: 1px solid var(--line2); padding: 5px 10px; cursor: pointer; font: 600 12px var(--sans); }
.ars-fac button.on { color: var(--gold2); border-color: var(--gold); }
.ars-presets button.save { color: var(--gold2); }
.ars-grid { display: grid; grid-template-columns: 1fr 250px; gap: 18px; min-height: 330px; }
#ars-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; max-height: 52vh; overflow: auto; padding-right: 4px; }
.acard { background: rgba(20, 16, 11, 0.85); border: 1px solid var(--line2); padding: 9px 10px; cursor: pointer; text-align: left; color: var(--ink); font: 13px var(--sans); position: relative; }
.acard:hover { border-color: var(--gold-aged, #b8984e); }
.acard.on { border-color: var(--gold2); box-shadow: inset 0 0 14px rgba(220, 180, 90, 0.18); }
.acard.locked { opacity: 0.45; cursor: not-allowed; }
.acard .an { font: 700 14px var(--serif); color: var(--gold2); margin-bottom: 4px; }
.acard .at { padding-right: 64px; min-height: 12px; font: 700 10px var(--sans); text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); }
.acard .as { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; font-size: 12px; margin-top: 4px; color: var(--dim); } .acard .as b { color: var(--ink); font-weight: 600; }
.acard .ad { font-size: 12px; color: var(--dim); margin-top: 5px; line-height: 1.35; }
.acard .lk { position: absolute; top: 8px; right: 8px; font: 700 10px var(--sans); color: #e0a48e; }
.acard .eq { position: absolute; top: 8px; right: 8px; font: 700 10px var(--sans); color: var(--gold2); }
.acard.spell-off .an { color: #e08a7a; } .acard.spell-sup .an { color: #9fd0a8; }
#ars-slots { display: flex; gap: 6px; margin-bottom: 8px; } #ars-slots button.on { color: #c8b6ff; border-color: #9f7cf0; }
#ars-sum > div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line2); padding: 5px 0; font-size: 13px; } #ars-sum span { color: var(--dim); } #ars-sum b { color: var(--ink); text-align: right; }
#ars-note { margin-top: 10px; font-size: 12px; line-height: 1.45; }
@media (max-width: 760px) { .ars-grid { grid-template-columns: 1fr; } }

/* ================= Marco 4.5 — objetivos do cenário e briefing ================= */
#objectives { position: absolute; left: 12px; top: 84px; width: 270px; background: rgba(16, 12, 10, 0.72); border: 1px solid rgba(176, 160, 124, 0.32); padding: 8px 10px; font: 600 12px var(--sans); color: var(--ink); pointer-events: none; }
#objectives .ob-t { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 4px; }
#objectives .ob { display: flex; gap: 7px; align-items: baseline; padding: 2px 0; color: var(--dim); }
#objectives .ob i { font-style: normal; color: #c06a3a; width: 12px; flex: none; }
#objectives .ob.done { color: var(--ink); } #objectives .ob.done i { color: #9fd08a; }
#objectives .ob.lost i { color: #e07a5f; }
#dep-brief { border-left: 2px solid #c0501a; padding: 4px 10px; margin: 6px 0 8px; background: rgba(60, 20, 8, 0.25); }
#dep-brief p { margin: 3px 0; line-height: 1.4; color: #e6d6bc; }

/* v0.30: medidor de desempenho e aviso da qualidade Ultra */
#fps { position: fixed; left: 8px; top: 6px; z-index: 60; pointer-events: none; font: 600 12px var(--sans); color: #e8e0c8; background: rgba(12, 11, 9, 0.72); padding: 3px 8px; border-radius: 3px; letter-spacing: 0.02em; }
#fps b { color: #b9e58a; font-size: 13px; } #fps.bad b { color: #ff9a6a; } #fps i, #fps em { color: #a49c88; font-style: normal; } #fps span { color: var(--gold2, #e6c878); }
#perfwarn { position: fixed; right: 16px; top: 90px; z-index: 60; width: 320px; background: rgba(20, 18, 15, 0.94); border: 1px solid var(--gold-aged, #8a7444); padding: 12px 14px; font: 500 14px var(--sans); color: #e8e0c8; }
#perfwarn .pw-t { font: 700 15px var(--serif); color: var(--gold2, #e6c878); margin-bottom: 4px; } #perfwarn .pw-s { color: #c8bfa8; margin-bottom: 10px; }
#perfwarn .pw-b { display: flex; gap: 8px; } #perfwarn button { flex: 1; padding: 6px 8px; font-size: 13px; }

/* ===== v0.35 — retorno de combate (render/feedback.js) ===== */
#fb { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
#fb .fb-vig { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 50%, rgba(120, 0, 0, 0) 45%, rgba(150, 10, 6, 0.55) 85%, rgba(90, 0, 0, 0.85) 100%); }
/* indicador de direção do golpe: arco vermelho em volta do centro da tela, girado para o atacante */
#fb .fb-dir { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transition: opacity 0.1s linear; }
#fb .fb-dir::before { content: ''; position: absolute; left: -70px; top: -190px; width: 140px; height: 46px; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-top: 7px solid rgba(220, 40, 26, 0.95); filter: drop-shadow(0 0 6px rgba(255, 40, 20, 0.8)); }
#fb .fb-dir.strong::before { border-top-width: 11px; width: 180px; left: -90px; }
/* riscos de flecha passando perto, na borda da tela do lado por onde passou */
#fb .fb-whiz { position: absolute; opacity: 0; }
#fb .fb-whiz.l, #fb .fb-whiz.r { top: 20%; bottom: 20%; width: 90px; }
#fb .fb-whiz.l { left: 0; background: linear-gradient(90deg, rgba(240, 232, 210, 0.55), rgba(240, 232, 210, 0)); }
#fb .fb-whiz.r { right: 0; background: linear-gradient(270deg, rgba(240, 232, 210, 0.55), rgba(240, 232, 210, 0)); }
#fb .fb-whiz.t, #fb .fb-whiz.b { left: 25%; right: 25%; height: 70px; }
#fb .fb-whiz.t { top: 0; background: linear-gradient(180deg, rgba(240, 232, 210, 0.55), rgba(240, 232, 210, 0)); }
#fb .fb-whiz.b { bottom: 0; background: linear-gradient(0deg, rgba(240, 232, 210, 0.55), rgba(240, 232, 210, 0)); }
#fb .fb-whiz.on { animation: fbWhiz 0.5s ease-out; }
@keyframes fbWhiz { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
/* bloqueio do jogador: brilho frio e curto nas bordas */
#fb .fb-ring { position: absolute; inset: 0; opacity: 0; box-shadow: inset 0 0 90px 10px rgba(220, 230, 255, 0.55); }
#fb .fb-ring.on { animation: fbRing 0.28s ease-out; }
@keyframes fbRing { 0% { opacity: 0.9; } 100% { opacity: 0; } }
/* retículo: X de acerto (as duas linhas giradas), abate em vermelho, golpe bloqueado em cinza, pulso ao atirar */
#crosshair .ch-h, #crosshair .ch-v { transition: transform 0.08s ease-out, background 0.08s; }
#crosshair.hm .ch-h, #crosshair.hm .ch-v { transform: rotate(45deg); }
#crosshair.hm-hit .ch-h, #crosshair.hm-hit .ch-v { background: #ffffff; box-shadow: 0 0 4px #fff, 0 0 2px #000; }
#crosshair.hm-kill .ch-h, #crosshair.hm-kill .ch-v { background: #ff3b28; box-shadow: 0 0 6px #ff3b28, 0 0 2px #000; transform: rotate(45deg) scale(1.35); }
#crosshair.hm-block .ch-h, #crosshair.hm-block .ch-v { background: #9a9a9a; transform: none; }
#crosshair.hm-block .ch-h, #crosshair.hm-block .ch-v, #crosshair.hm-block svg { animation: chBlock 0.2s linear; }   /* nos filhos: o #crosshair é posicionado por transform */
@keyframes chBlock { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
#crosshair.fire svg, #crosshair.fire .ch-h, #crosshair.fire .ch-v { animation: chFire 0.18s ease-out; }
@keyframes chFire { 0% { transform: scale(1.45); } 100% { transform: scale(1); } }
/* v0.36 — vida baixa (brilho vermelho na borda, pulsa com o coração; main.js) e mira tremendo no golpe no vazio */
#hurt { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
#hurt .glow { position: absolute; inset: 0; opacity: 0; box-shadow: inset 0 0 9vmin 1.5vmin rgba(210, 24, 12, .75), inset 0 0 34vmin rgba(150, 0, 0, .28); }   /* v0.36: vida baixa = brilho vermelho na borda (sem sangue) */
#crosshair .ch-fx { position: absolute; inset: -6px; width: 52px; height: 52px; overflow: visible; }
#crosshair .ch-kill, #crosshair .ch-miss { opacity: 0; transform-origin: 20px 20px; }
#crosshair.miss .ch-miss { animation: chmiss .35s ease-out; }
@keyframes chmiss { 0% { opacity: .9; transform: translateX(-3px); } 40% { transform: translateX(3px); } 100% { opacity: 0; transform: translateX(0); } }