:root{color-scheme:dark;--paper:#f0e5cc;--muted:#acae96;--accent:#e4b76d;--stroke:#3c4738;--title:Georgia,"Times New Roman",serif;--body:system-ui,sans-serif;--good:#8fc46a;--bad:#e0604a;--gap:12px}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(ellipse at top,#263328,#111a16 70%) fixed;color:var(--paper);font:15px/1.45 var(--body);display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
button,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}
button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.button{background:#443a2a;border:1px solid #8b7147;border-radius:8px;padding:8px 14px;color:#f5d498;font-weight:700;line-height:1.25;font-size:14px}
.button:not(:disabled):hover{background:#5c4a30;border-color:var(--accent)}
.button.subtle{background:#263127;border-color:#4b5545;color:var(--paper)}
.button.subtle:not(:disabled):hover{background:#374334;border-color:#a1a68a}
.button.small{padding:5px 10px;font-size:13px}
.speeds{display:flex;gap:4px}
.speed{padding:6px 10px;background:#263228;border-color:#4b5545;color:var(--paper);min-width:42px}
.speed[aria-pressed=true]{background:#52432d;border-color:#aa8b54;color:#ffdc97}

/* barra superior */
.hud{display:flex;align-items:center;gap:20px;padding:8px 16px;background:linear-gradient(90deg,#131b17f5,#1a261ff0),url('assets/valle.jpg') center 40%/cover;border-bottom:1px solid #3a4636;box-shadow:0 6px 20px #0006;z-index:2}
.brand{display:flex;align-items:center;gap:9px;font:bold 20px var(--title);text-decoration:none;color:var(--paper);white-space:nowrap}
.brand-icon{width:30px;height:30px;display:grid;place-items:center;background:#4e4230;border:1px solid #8f7446;border-radius:7px;color:#f3ca85;font:21px/1 var(--body)}
.hud-hero{display:flex;align-items:center;gap:10px;min-width:170px}
.hud-hero strong{font:700 20px/1.1 var(--title);display:block}.hud-hero small{color:#c9cbb2;font-size:12px;white-space:nowrap}
.portrait{border:1px solid #88734e;border-radius:9px;background:radial-gradient(circle at 53% 40%,#645b3c,#2b3528 78%);width:46px;height:46px;flex:none;overflow:hidden}
.portrait canvas{display:block;width:100%}
.hud-bars{display:grid;gap:4px;flex:1;min-width:200px;max-width:380px}
.meter{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1px 8px;color:#cbcdb4;font-size:12px}
.meter b{color:#ffd98f;font-size:14px}
.meter>div{grid-column:span 2;background:#0e1612;height:9px;border-radius:6px;overflow:hidden;border:1px solid #2c362b}
.meter i{display:block;height:100%;background:linear-gradient(#b4d88a,#7fae5a);transition:width .25s}
.meter i.low{background:linear-gradient(#f08a6a,#c0503a)}
.meter.xp i{background:linear-gradient(#f0c878,#c8963e)}
.hud-stats{display:flex;gap:14px}
.stat{display:grid;font-size:11px;color:#acb194;text-transform:uppercase;letter-spacing:.04em;line-height:1.2}
.stat b{color:var(--paper);font-size:19px;letter-spacing:0}
.hud-res{display:flex;gap:6px}
.pill{border:1px solid #4b5545;background:#1f2a22;border-radius:20px;padding:5px 11px;font-size:14px;white-space:nowrap}
.pill.gold{border-color:#927549;background:#3a3020;color:#ffd98f;font-weight:700}
.pill.potion{border-color:#4f7a4a;background:#1f3324;color:#b4e8a0;font-weight:700}
.hud-actions{display:flex;gap:10px;align-items:center;margin-left:auto}
.live{display:flex;gap:7px;align-items:center;color:#c8cbb0;font-size:13px;white-space:nowrap}
.live i{width:8px;height:8px;border-radius:50%;background:#a4c787;box-shadow:0 0 9px #a4c7879c}
.live:has(.paused) i{background:#d4a96d;box-shadow:none}

/* mapa grande + una columna lateral */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:var(--gap);padding:var(--gap);min-height:0}
.panel{background:linear-gradient(125deg,#202d24,#19241f 65%);border:1px solid var(--stroke);border-radius:10px;min-width:0;box-shadow:0 9px 28px #0d140f55}
/* mapa */
.map-panel{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.map-bar{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid #33402f;min-width:0}
.back{display:none!important}
.tabs{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;min-width:0}
.tab{position:relative;display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;border:1px solid #3e4a3b;background:#1b261f;color:var(--paper);font-weight:700;font-size:14px;white-space:nowrap}
.tab:hover{border-color:#a1a68a;background:#26332a}
.tab[aria-pressed=true]{background:#52432d;border-color:#d9b06b;color:#ffdc97}
.tab kbd{font:10px var(--body);color:#8f9580;border:1px solid #3e4a3b;border-radius:4px;padding:0 4px}
.tab small{color:var(--good)}
.tab .here{width:9px;height:9px;border-radius:50%;background:#a4e07a;box-shadow:0 0 8px #a4e07a}
.stage{flex:1;min-height:0;display:grid;place-items:center;container-type:size;background:#141e18;border-radius:0 0 10px 10px}
.atlas{position:relative;overflow:hidden;width:min(100cqw,100cqh * 1000 / 620);aspect-ratio:1000/620;background:#344c35}
.atlas.in-scene{background:#1a2620}
.atlas canvas{width:100%;height:100%;display:block}
.atlas.in-scene .map-hint{display:none}
.map-hint{position:absolute;left:12px;top:10px;margin:0;padding:5px 11px;border-radius:8px;background:#0f1813d9;border:1px solid #3e4a3b;color:#d8d6bc;font-size:13px;pointer-events:none;max-width:70%}
.marker{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;white-space:nowrap;padding:6px 11px;border:1px solid #b7a975bb;border-radius:9px;background:#17241ce8;font-size:14px;font-weight:800;box-shadow:0 3px 12px #142016bc;color:#fbebc8;transition:transform .15s,background .15s}
.marker:hover{transform:translate(-50%,-50%) scale(1.08);background:#2c3b2e;border-color:#ffda94}
.marker span:first-child{color:#f2ca77}.marker small{font-size:12px;opacity:.85}
.marker[data-locked=true]{border-color:#9e9a7d66;color:#cfc6a6;background:#17241cc8}
.marker.spot{background:#1d2a20ee;border-color:#e4b76daa;font-size:13px;padding:4px 10px 4px 4px}
.marker.spot span:first-child{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#4e4230;color:#ffd98f}
.marker.spot.boss{border-color:#e0604a;background:#3a1f1aee}.marker.spot.boss span:first-child{background:#7a2a20;color:#ffd98f}
.marker.spot[aria-pressed=true]{background:#755f39;border-color:#ffda94}

/* columna lateral con pestañas */
.side{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.side-tabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid #33402f}
.side-tabs button{flex:1;padding:8px 6px;border-radius:7px;border:1px solid #3e4a3b;background:#1b261f;color:var(--paper);font-weight:700;font-size:14px}
.side-tabs button:hover{border-color:#a1a68a}
.side-tabs button[aria-selected=true]{background:#52432d;border-color:#d9b06b;color:#ffdc97}
.pane{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin}
.pane[hidden]{display:none}
.pane-pad{padding:12px 16px 16px}
.pane-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0 8px}
.pane-head:first-child{margin-top:2px}
.pane-head h3{margin:0;font:700 18px var(--title);color:#e8d2a0}
.map-actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none}
.current{margin:0;padding:6px 11px;border-radius:7px;background:#121d18;border:1px solid #475543;color:#dce9bb;font-size:13px;font-weight:600;white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis}
.order-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.order-grid label{display:grid;gap:3px;color:#c0c4a6;font-size:12px}
.side select{width:100%;padding:7px 8px;border:1px solid #586049;background:#18241c;border-radius:6px;font-size:14px}
.note{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.35}
.equipment{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.equip{display:grid;justify-items:center;gap:1px;padding:8px 4px;border-radius:8px;border:1px solid #3e4a3b;background:#141f1a;color:var(--paper);text-align:center;min-width:0}
.equip:hover{border-color:#a1a68a}
.equip .slot-icon{width:30px;height:30px;font-size:16px}
.equip-name{font-size:12px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
.equip small{font-size:11px;color:var(--muted)}
.equip.t0 .slot-icon{opacity:.45}
.equip.t2 .slot-icon,.equip.t3 .slot-icon{border-color:#8fc46a;color:#c8f0a0}
.equip.t4 .slot-icon,.equip.t5 .slot-icon{border-color:#b08ae0;color:#e0c8ff;background:#2a2238}
.log{list-style:none;margin:0;padding:6px 16px 14px}
.log li{padding:6px 0;border-top:1px solid #33402f;color:#d3d5bf;font-size:14px;line-height:1.35}
.log li:first-child{border-top:0}
.log li time{display:block;font-variant-numeric:tabular-nums;color:#b7a17a;font-size:11px}
.feed{position:absolute;left:12px;bottom:12px;margin:0;padding:0;list-style:none;display:grid;gap:5px;pointer-events:none;max-width:46%}
.feed li{padding:5px 11px;border-radius:8px;background:#0f1813d0;border:1px solid #3e4a3b;color:#e8e2c8;font-size:13px;animation:feed 6s ease forwards}
.feed li:nth-child(2){opacity:.8}.feed li:nth-child(3){opacity:.6}
@keyframes feed{0%{transform:translateY(6px);opacity:0}6%{transform:none;opacity:1}80%{opacity:1}100%{opacity:0}}
/* columna derecha: el lugar */
.zone-detail{padding:14px 16px 16px}
.zone-detail .kicker{margin:0;color:#b7a17a;font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.zone-detail h3{margin:2px 0 6px;font:700 24px/1.2 var(--title);color:#f4daa3}
.zone-detail h4{margin:14px 0 8px;font:700 17px var(--title);color:#e8d2a0}
.zone-detail p.desc{margin:0 0 12px;color:#cfd0b8;font-size:14px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0 0 6px}
.facts div{background:#141f1a;border:1px solid #39463a;border-radius:8px;padding:6px 10px}
.facts dt{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.facts dd{margin:1px 0 0;font-weight:700;color:var(--paper);font-size:14px}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.actions .button:first-child{flex:1}
.nav-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.nav-chips .button{padding:6px 11px;font-size:13px}
.rows{display:grid;gap:5px}
.row{display:flex;align-items:center;gap:7px;background:#141f1a;border:1px solid #39463a;border-radius:8px;padding:6px 7px 6px 11px}
.row>div{flex:1;min-width:0}.row strong{display:block;font-size:14px}.row small{color:var(--muted);font-size:12px}
.row .button{padding:5px 10px;font-size:12px}
.row.dim{opacity:.6}
.muted{color:var(--muted);font-size:13px}
.hint{font-size:13px;color:#a9be90;margin:10px 0 0}
.warn{font-size:13px;color:#f0b48a;background:#3a241c;border:1px solid #6a3a2a;border-radius:8px;padding:7px 10px;margin:0 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{padding:4px 9px;border:1px solid #4b5c49;border-radius:20px;background:#18251e;font-size:13px}
.chip b{color:var(--accent);margin-left:2px}
.chip.dim{opacity:.6}.chip.gold{border-color:#b8945a;color:#ffd98f;background:#3a3020}
.shop-item{background:#141f1a;border:1px solid #39463a;border-radius:10px;padding:10px 12px;margin-bottom:8px}
.shop-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.shop-head strong{display:block;font:700 16px var(--title)}.shop-head small{color:var(--muted);font-size:12px}
.slot-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:#2c2a20;border:1px solid #6a5a3a;color:#ffd98f;font-size:17px;flex:none}
.offer{display:flex;flex-wrap:wrap;gap:3px 10px;align-items:baseline;margin-bottom:6px}
.offer b{color:#f4daa3}.stat-up{color:var(--good);font-size:13px;font-weight:600}
.mats{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.mat{font-size:12px;padding:2px 8px;border-radius:12px;border:1px solid}
.mat.ok{border-color:#4f7a4a;color:#b4e8a0;background:#1f3324}.mat.no{border-color:#7a3a2a;color:#f0a08a;background:#3a1f1a}
.buy-row{display:flex;flex-wrap:wrap;gap:6px}.buy-row .button{font-size:13px;padding:6px 11px}
.reason{display:block;color:#d9a07a;font-size:12px;margin-top:5px}
dialog{border:1px solid #86764f;border-radius:12px;background:#202c23;color:var(--paper);max-width:min(92vw,560px);padding:24px;box-shadow:0 18px 60px #0009;font-size:16px}
dialog::backdrop{background:#0c1412d0}
dialog h2{font:700 28px var(--title);margin:0 0 8px;color:#f4daa3}
dialog li{margin:6px 0}dialog p,dialog li{color:#dbddc5}dialog .lead{font-weight:700;color:#ffd98f}

/* pantallas medianas y pequeñas */
@media(max-width:1600px){.brand-text,.live{display:none}.hud{gap:14px}.hud-stats{gap:10px}.layout{grid-template-columns:minmax(0,1fr) 380px}.map-actions .current,.tab kbd{display:none}.tab{padding:7px 10px}}
@media(max-width:1250px){.hud-stats .stat:nth-child(n+3){display:none}.map-actions .current{display:none}.layout{grid-template-columns:minmax(0,1fr) 340px}}
@media(max-width:950px){
  body{overflow:auto;display:block}
  .hud{flex-wrap:wrap;position:sticky;top:0}.hud-actions{margin-left:0}
  .layout{grid-template-columns:1fr}
  .map-bar{flex-wrap:wrap}.stage{container-type:normal}.atlas{width:100%}
  .side{max-height:none}.pane{overflow:visible}
}
@media(max-width:720px){
  .hud{gap:8px;padding:8px}.hud-stats .stat b{font-size:15px}.hud-res .pill{font-size:12px;padding:4px 8px}
  .marker{font-size:11px;padding:4px 6px}.marker small{display:none}.marker.spot{font-size:11px}
  .tab kbd{display:none}.facts{grid-template-columns:1fr}.order-grid{grid-template-columns:1fr}.map-hint{display:none}
}