:root {
  --gold: #e8c46a; --panel: rgba(12, 16, 20, .88); --line: rgba(232, 196, 106, .35); --text: #e9e4d6; --dim: #9a9484;
  font-family: 'Radiance', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #050807; color: var(--text); user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
img { -webkit-user-drag: none; }
button { font: inherit; cursor: pointer; }

/* Menú */
#menu { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at center, #1d2a1f 0%, #050807 75%); overflow: auto; padding: 16px; }
.menuBox { max-width: 920px; width: 100%; text-align: center; }
.logo { width: 120px; filter: drop-shadow(0 0 20px rgba(232, 196, 106, .5)); }
h1 { font-size: 46px; letter-spacing: 6px; margin: 4px 0; color: var(--gold); text-shadow: 0 2px 0 #000; }
h1 span { font-size: 18px; letter-spacing: 1px; color: var(--dim); }
h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 3px; color: var(--dim); margin: 22px 0 10px; }
.sub { color: var(--dim); max-width: 620px; margin: 0 auto; }
#heroes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.heroCard { background: var(--panel); border: 2px solid #2a2f33; border-radius: 6px; padding: 8px; cursor: pointer; transition: transform .12s, border-color .12s; }
.heroCard:hover { transform: translateY(-3px); }
.heroCard.sel { border-color: var(--gold); box-shadow: 0 0 22px rgba(232, 196, 106, .3); }
.heroCard > img { width: 100%; border-radius: 3px; display: block; }
.heroCard b { display: block; margin-top: 6px; font-size: 18px; }
.heroCard small { color: var(--dim); }
.spells { display: flex; gap: 4px; justify-content: center; margin-top: 6px; }
.spells img { width: 34px; height: 34px; border-radius: 3px; border: 1px solid #000; }
.diffs { display: inline-flex; gap: 6px; }
.diffs button { background: #1a1f22; color: var(--text); border: 1px solid #333; padding: 8px 18px; border-radius: 4px; }
.diffs button.sel { border-color: var(--gold); color: var(--gold); }
#play { margin: 26px 0 8px; font-size: 22px; letter-spacing: 4px; padding: 14px 60px; color: #1b1406; border: 0; border-radius: 4px;
  background: linear-gradient(#f5d98a, #b88a2c); box-shadow: 0 4px 24px rgba(232, 196, 106, .35); }
#play:hover { filter: brightness(1.1); }
.note { color: #6b665a; font-size: 12px; }

/* Carga */
#loading { position: fixed; inset: 0; background: #000; overflow: hidden; }
#loading .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
#loading .ls { position: absolute; bottom: 0; height: 80%; animation: float 4s ease-in-out infinite alternate; }
#loading .l1 { left: 4%; } #loading .l2 { right: 4%; animation-delay: -2s; } #loading .l3 { left: 50%; transform: translateX(-50%); height: 40%; bottom: 20%; }
@keyframes float { to { translate: 0 -12px; } }
.loadBox { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); width: min(560px, 90%); background: var(--panel); padding: 12px 16px; border: 1px solid var(--line); border-radius: 4px; }
#loadBar { height: 6px; background: #222; margin-top: 8px; border-radius: 3px; overflow: hidden; }
#loadBar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .3s; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud #bars, #hud #floats, #hud #notices, #hud #killfeed, #hud #help, #hud #deathscreen { pointer-events: none; }
#topbar { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; }
#goal { display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); padding: 4px 12px 4px 4px; border-radius: 30px; }
#goal img { width: 40px; height: 40px; }
#goal b { font-size: 22px; color: var(--gold); display: block; line-height: 1; }
#goal span { font-size: 11px; color: var(--dim); }
#timer { position: relative; width: 74px; height: 74px; display: grid; place-items: center; }
#timer img { position: absolute; inset: 0; width: 100%; height: 100%; }
#timer span { position: relative; font-size: 18px; font-weight: 700; text-shadow: 0 1px 2px #000; }
#timer.urgent span { color: #ff5a4a; animation: pulse .5s infinite alternate; }
@keyframes pulse { to { transform: scale(1.12); } }

#scoreboard { position: absolute; top: 90px; left: 8px; display: flex; flex-direction: column; gap: 3px; width: 220px; }
.team { display: flex; align-items: center; gap: 6px; background: var(--panel); border-left: 4px solid var(--c); padding: 2px 6px 2px 2px; position: relative; cursor: pointer; transition: order .3s; }
.team .shield { width: 26px; height: 26px; border-radius: 50%; background: var(--c); display: grid; place-items: center; }
.team .shield img { width: 22px; height: 22px; }
.team .hico { width: 26px; height: 26px; }
.team .tname { flex: 1; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team .score { font-size: 16px; color: #fff; min-width: 22px; text-align: right; }
.team .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.team .prog i { display: block; height: 100%; background: var(--c); }
.team.leader { box-shadow: inset 0 0 0 1px var(--gold); }
.team.leader .score::before { content: '👑 '; font-size: 12px; }
.team.dead { opacity: .55; }

#notices { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.notice { background: var(--panel); border: 1px solid var(--line); padding: 6px 14px; border-radius: 3px; font-size: 15px; display: flex; gap: 8px; align-items: center; transition: opacity .5s; text-shadow: 0 1px 2px #000; }
.notice img { height: 28px; }
.notice.out { opacity: 0; }
.notice.error { color: #ff7060; border-color: #6a2a20; }
.notice.close, .notice.overtime, .notice.timer { color: #ffcf5a; font-size: 18px; }
.notice.leader_kill { color: #ffd84a; }
.notice.level { color: #ffe9a0; }
#killfeed { position: absolute; top: 90px; right: 10px; display: flex; flex-direction: column; gap: 3px; }
.kf { background: var(--panel); padding: 3px 6px; display: flex; align-items: center; gap: 6px; }
.kf img { width: 36px; height: 36px; border-bottom: 3px solid #888; }

#bars .hbar { position: absolute; left: 0; top: 0; width: 100px; display: grid; grid-template-columns: 18px 1fr; gap: 0 2px; will-change: transform; }
.hbar .lv { grid-row: span 2; background: #111; font-size: 11px; text-align: center; line-height: 14px; border: 1px solid #000; }
.hbar .hp { height: 9px; background: #300; border: 1px solid #000; }
.hbar .mp { height: 4px; background: #001; border: 1px solid #000; border-top: 0; }
.hbar i { display: block; height: 100%; }
.hbar .mp i { background: #3d7cff; }
.hbar .nm { grid-column: 2; font-size: 10px; color: #ddd; text-shadow: 0 1px 2px #000; }
.hbar.me .hp { border-color: #fff; }
.hbar.leader .lv { background: var(--gold); color: #000; }
.float { position: absolute; font-weight: 800; font-size: 16px; text-shadow: 0 1px 3px #000; animation: up 1.3s ease-out forwards; transform: translate(-50%, 0); }
@keyframes up { to { translate: 0 -50px; opacity: 0; } }
.clickmark { position: fixed; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid; border-radius: 50%; pointer-events: none; animation: ping .4s ease-out forwards; }
@keyframes ping { from { transform: scale(1.6); opacity: 1; } to { transform: scale(.3); opacity: 0; } }

#minimap { position: absolute; left: 8px; bottom: 8px; width: 240px; height: 240px; border: 2px solid #3a3226; background: #000; cursor: crosshair; }
#bottom { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .9) 30%);
  padding: 18px 12px 8px; border-top: 1px solid var(--line); border-radius: 10px 10px 0 0; }
#portrait { position: relative; width: 128px; }
#portrait img { width: 128px; height: 72px; object-fit: cover; border: 1px solid #000; display: block; }
#level { position: absolute; left: -6px; top: -10px; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(#3b3220, #120f08); border: 2px solid var(--gold);
  display: grid; place-items: center; font-weight: 700; }
#xpbar { height: 5px; background: #222; margin-top: 3px; } #xpbar i { display: block; height: 100%; background: #c6a6ff; }
#center { display: flex; flex-direction: column; gap: 3px; width: 330px; }
#buffs { display: flex; gap: 3px; min-height: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.buff { font-size: 10px; background: #1d2a1f; border: 1px solid #3f5a3c; padding: 0 4px; border-radius: 2px; }
#abilities { display: flex; gap: 6px; justify-content: center; }
.ability { position: relative; width: 66px; height: 66px; border: 2px solid #111; cursor: pointer; }
.ability img { width: 100%; height: 100%; display: block; }
.ability.passive { border-radius: 50%; overflow: visible; } .ability.passive img { border-radius: 50%; }
.ability.unlearned img { filter: grayscale(1) brightness(.4); }
.ability.nomana img { filter: hue-rotate(200deg) saturate(1.5) brightness(.6); }
.ability.active { border-color: #7f7; box-shadow: 0 0 10px #4f4; }
.ability .cd, .slot .cd { position: absolute; inset: 0; pointer-events: none; }
.ability .cdt, .slot .cdt { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; font-weight: 800; text-shadow: 0 1px 3px #000; pointer-events: none; }
.ability .key, .slot .key { position: absolute; left: 2px; top: 0; font-size: 11px; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.ability .mana { position: absolute; right: 2px; bottom: 0; font-size: 11px; color: #9fc4ff; text-shadow: 0 0 3px #000; }
.pips { position: absolute; left: 0; right: 0; bottom: -7px; display: flex; gap: 2px; justify-content: center; }
.pips i { width: 9px; height: 4px; background: #333; border: 1px solid #000; } .pips i.on { background: #ffd65a; }
.lvl { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 22px; height: 18px; padding: 0; line-height: 16px; border: 1px solid #5a4a1a;
  background: #ffd65a; color: #000; font-weight: 800; border-radius: 3px; display: none; animation: pulse .6s infinite alternate; }
.lvl.show { display: block; }
.bar { position: relative; height: 18px; background: #111; border: 1px solid #000; }
.bar i { display: block; height: 100%; }
#hpbar i { background: linear-gradient(#5bd65b, #2a8a2a); } #mpbar i { background: linear-gradient(#5a8cff, #2346b0); }
.bar span { position: absolute; inset: 0; text-align: center; font-size: 12px; line-height: 18px; text-shadow: 0 1px 2px #000; }
#stats { font-size: 12px; display: grid; gap: 2px; min-width: 76px; color: #d8d2c0; }
#stats .ring { color: var(--gold); }
#inventory { display: flex; gap: 6px; align-items: flex-end; }
#items { display: grid; grid-template-columns: repeat(3, 58px); gap: 3px; }
.slot { position: relative; width: 58px; height: 43px; background: #0b0d0e; border: 1px solid #2a2a2a; cursor: pointer; }
.slot img { width: 100%; height: 100%; display: block; }
#neutral { border-radius: 50%; width: 46px; height: 46px; overflow: hidden; border-color: #6a5a2a; }
#neutral img { object-fit: cover; }
#goldbox { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#goldbox img { width: 36px; }
#gold { color: #ffd65a; font-size: 20px; font-weight: 700; }
#shopBtn { background: linear-gradient(#3a3320, #1d190e); color: var(--gold); border: 1px solid var(--line); padding: 4px 10px; border-radius: 3px; }

#shop { position: absolute; right: 10px; bottom: 140px; width: min(470px, calc(100vw - 20px)); background: var(--panel); border: 1px solid var(--line); padding: 10px; border-radius: 4px; }
#shop h3 { margin: 0 0 8px; color: var(--gold); font-size: 16px; } #shop h3 small { color: var(--dim); font-weight: 400; font-size: 11px; }
#shopItems { display: grid; grid-template-columns: repeat(auto-fill, 70px); gap: 6px; }
.shopItem { position: relative; cursor: pointer; border: 1px solid #333; }
.shopItem img { width: 70px; height: 52px; display: block; }
.shopItem span { position: absolute; right: 2px; bottom: 0; font-size: 11px; color: #ffd65a; text-shadow: 0 0 3px #000; }
.shopItem.cant { filter: grayscale(.8) brightness(.6); }
.shopItem:hover { border-color: var(--gold); }
#tooltip { position: fixed; max-width: 300px; background: rgba(8, 10, 12, .96); border: 1px solid var(--line); padding: 8px 10px; font-size: 13px; z-index: 10; pointer-events: none; }
#tooltip .cost { color: #ffd65a; } #tooltip .act { color: #9fd0ff; } #tooltip small { color: var(--dim); }
#deathscreen { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); background: rgba(40, 0, 0, .7); padding: 14px 24px; font-size: 20px; text-align: center; border: 1px solid #5a1a1a; }
#deathscreen img { height: 34px; vertical-align: middle; }
#endscreen { position: absolute; inset: 0; background: rgba(0, 0, 0, .82); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
#endscreen h1 { font-size: 48px; }
#endscreen table { border-collapse: collapse; background: var(--panel); max-width: 100%; }
#endscreen th, #endscreen td { padding: 5px 10px; border-bottom: 1px solid #222; text-align: left; font-size: 14px; }
#endscreen td:first-child { border-left: 4px solid var(--c); }
#endscreen td img { height: 22px; vertical-align: middle; }
#endscreen tr.me { background: rgba(232, 196, 106, .12); }
#again { margin-top: 20px; font-size: 18px; padding: 10px 40px; background: linear-gradient(#f5d98a, #b88a2c); border: 0; border-radius: 4px; }
#help { position: absolute; bottom: 4px; right: 8px; font-size: 11px; color: #8a8576; text-shadow: 0 1px 2px #000; max-width: 380px; text-align: right; }

@media (max-width: 1100px) {
  #scoreboard { width: 150px; } .team .tname { display: none; }
  #minimap { width: 150px; height: 150px; }
  #center { width: 260px; } .ability { width: 52px; height: 52px; }
  #stats, #help { display: none; }
}

/* --- Overthrow 3.0 --- */
#timer { width: auto; min-width: 96px; height: 56px; padding: 0 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; display: flex; flex-direction: column; justify-content: center; }
#timer span { font-size: 24px; }
#timer small { font-size: 10px; color: var(--dim); }
#orbBars { display: flex; flex-direction: column; gap: 4px; background: var(--panel); border: 1px solid var(--line); padding: 4px 8px; border-radius: 6px; }
.ob { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.ob img { width: 22px; height: 22px; }
.ob .bar { width: 110px; height: 7px; background: #111; border: 1px solid #000; }
.ob .bar i { display: block; height: 100%; background: linear-gradient(90deg, #6fd06f, #c6ff9a); }
.ob:nth-child(2) .bar i { background: linear-gradient(90deg, #3b8cff, #9fd0ff); }
#choice, #neutralChoice { position: absolute; left: 50%; bottom: 170px; transform: translateX(-50%); background: rgba(10, 12, 16, .94); border: 1px solid var(--line); border-radius: 8px; padding: 10px; width: min(760px, calc(100vw - 20px)); }
#neutralChoice { bottom: 330px; border-color: #6a5a2a; }
.chHead { display: flex; align-items: center; gap: 8px; font-size: 16px; margin-bottom: 8px; color: var(--gold); }
.chHead img { width: 30px; }
.chHead small { color: var(--dim); }
.rar-common .chHead { color: #9be89b; } .rar-rare .chHead { color: #7cbcff; } .rar-epic .chHead { color: #d79bff; }
.rar-common { box-shadow: 0 0 24px rgba(110, 220, 110, .25); } .rar-rare { box-shadow: 0 0 24px rgba(80, 160, 255, .3); } .rar-epic { box-shadow: 0 0 30px rgba(190, 100, 255, .4); }
.chOpts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.chOpt b, .chOpt span { width: 100%; overflow-wrap: anywhere; }
.chOpt { position: relative; background: #151a20; border: 1px solid #2c3540; border-radius: 6px; padding: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.chOpt:hover { border-color: var(--gold); background: #1c232b; }
.chOpt img { width: 54px; height: 54px; border-radius: 4px; object-fit: cover; }
.chOpt b { font-size: 13px; }
.chOpt .sub { font-size: 11px; color: var(--dim); }
.chOpt .val { font-size: 13px; color: #9fe39f; }
.chOpt.opt-generic { border-style: dashed; }
.chOpt .have { position: absolute; top: 4px; right: 6px; font-size: 11px; color: var(--gold); }
.chOpt kbd { position: absolute; top: 4px; left: 6px; font-size: 10px; color: #777; }
#innates { display: flex; gap: 3px; margin-top: 3px; }
#portrait .innate img { width: 26px; height: 26px; }
.innate img { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #554; }
.ability .ups { position: absolute; right: 2px; top: 0; font-size: 10px; color: #ffd65a; text-shadow: 0 0 3px #000; }
#stats .attr { color: #bbb; } #stats .attr.pr { color: #ffd65a; }
#backpack { display: grid; grid-template-columns: repeat(3, 40px); gap: 3px; align-self: flex-end; opacity: .8; }
.slot.small { width: 40px; height: 30px; }
.slot .ch { position: absolute; right: 2px; bottom: 0; font-size: 11px; text-shadow: 0 0 3px #000; }
#inventory { display: grid; grid-template-columns: auto auto; gap: 4px 8px; align-items: end; }
#inventory #items { grid-column: 1; grid-row: 1; }
#inventory #backpack { grid-column: 1; grid-row: 2; }
#inventory #neutral { grid-column: 2; grid-row: 1; position: static; }
#shop { width: min(560px, calc(100vw - 20px)); bottom: 150px; max-height: 60vh; display: flex; flex-direction: column; }
#shopHead { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
#shopSearch { background: #0b0d10; border: 1px solid #333; color: var(--text); padding: 6px 8px; border-radius: 3px; font: inherit; }
#shopTabs { display: flex; flex-wrap: wrap; gap: 3px; }
#shopTabs button { background: #161b20; color: var(--dim); border: 1px solid #2a2f33; padding: 3px 7px; font-size: 11px; border-radius: 3px; }
#shopTabs button.sel { color: var(--gold); border-color: var(--gold); }
#shopItems { overflow: auto; grid-template-columns: repeat(auto-fill, 64px); }
.shopItem img { width: 64px; height: 47px; }
.ttHead { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.ttHead img { width: 52px; height: 38px; }
#tooltip .attrs { color: #cfd8a8; margin: 4px 0; font-size: 12px; }
#tooltip .desc { color: #c9c4b4; font-size: 12px; margin: 4px 0; }
#tooltip .comps { display: flex; gap: 3px; margin-top: 4px; }
#tooltip .comps img { width: 34px; height: 25px; border: 1px solid #333; }
#tooltip { max-width: 330px; }
.buff.courier { border-color: #6a5a2a; }
#endscreen .trophy { width: 120px; }
#endscreen td.its img { height: 20px; margin-right: 1px; }
.notice.overthrow { color: #ff7a4a; font-size: 20px; }
.notice.orb, .notice.neutral { color: #d6c8ff; }

/* Aghanim's Scepter / Shard */
.aghs { display: flex; flex-direction: column; gap: 3px; justify-content: center; margin-left: 2px; }
.agh { width: 26px; height: 19px; border-radius: 3px; overflow: hidden; border: 1px solid #333; filter: grayscale(1) brightness(.45); }
.agh img { width: 100%; height: 100%; object-fit: cover; }
.agh.on { filter: none; border-color: #5aa9ff; box-shadow: 0 0 6px #3a8cff; }
.ability.granted { border-color: #3a8cff; }
.desc.agh-scepter, .desc.agh-shard { color: #8a9bb0; margin-top: 4px; }
.desc.agh-scepter.on, .desc.agh-shard.on { color: #7fc0ff; }

/* Día y noche */
#dayNight { font-size: 15px; margin-right: 6px; color: #ffd76a; vertical-align: 3px; }
#dayNight.night { color: #9fc3ff; }

/* Online */
.modes { display: flex; gap: 14px; justify-content: center; }
#online { margin: 26px 0 8px; font-size: 22px; letter-spacing: 4px; padding: 14px 40px; color: var(--gold); background: #15120b; border: 1px solid var(--gold); border-radius: 4px; cursor: pointer; }
#online:hover { filter: brightness(1.2); }
#lobby { position: fixed; inset: 0; display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 40px 16px; background: radial-gradient(ellipse at top, #1d2224, #050807); z-index: 5; }
#lobby input { background: #0e1214; border: 1px solid #333; color: var(--text); padding: 8px 10px; border-radius: 4px; font: inherit; }
#lobby button { background: #1a1f22; color: var(--text); border: 1px solid #444; padding: 8px 16px; border-radius: 4px; cursor: pointer; font: inherit; }
#lobby button:hover { border-color: var(--gold); }
#lobby button.ghost { background: transparent; border-color: #333; color: #9a958a; }
#startRoom { color: #1b1406 !important; background: linear-gradient(#f3d27a, #c99a35) !important; border: 0 !important; font-weight: 800; letter-spacing: 2px; padding: 12px 30px !important; }
#startRoom[disabled] { filter: grayscale(1) brightness(.6); cursor: default; }
.lobbyRow { display: flex; gap: 10px; justify-content: center; align-items: center; margin: 12px 0; flex-wrap: wrap; }
.lobbyName { margin: 10px 0 18px; }
#roomList { display: grid; gap: 6px; max-width: 560px; margin: 0 auto; }
.roomRow { display: flex; justify-content: space-between; align-items: center; background: #101416; border: 1px solid #2a2a2a; border-radius: 4px; padding: 8px 12px; }
.roomRow small { color: #8a857a; }
.roomEmpty { color: #6b665a; padding: 12px; }
#roomPlayers { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; max-width: 860px; margin: 0 auto 10px; }
.pl { display: flex; gap: 8px; align-items: center; background: #101416; border: 1px solid #2a2a2a; border-radius: 4px; padding: 6px 8px; text-align: left; }
.pl img { width: 54px; height: 30px; object-fit: cover; border-radius: 2px; }
.pl.me { border-color: var(--gold); }
.pl .host { color: var(--gold); font-size: 11px; }
.pl.off { opacity: .5; }
#heroesOnline { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#chatLog { max-width: 560px; margin: 10px auto 6px; height: 110px; overflow: auto; text-align: left; background: #0b0e10; border: 1px solid #222; border-radius: 4px; padding: 6px 8px; font-size: 13px; }
#chatLog b { color: var(--gold); }
#chatIn { width: min(560px, 100%); box-sizing: border-box; }
#backMenu { margin-top: 18px; }
@media (max-width: 600px) { .modes { flex-direction: column; } }

.lobbyRow.share #roomLink { width: min(420px, 70vw); color: var(--gold); }
.chk { display: inline-flex; gap: 4px; align-items: center; color: #9a958a; font-size: 13px; }
#joinCode { width: min(300px, 60vw); }

/* Tienda estilo Dota 2 */
#shop { width: min(760px, calc(100vw - 20px)) !important; max-height: calc(100vh - 190px) !important; bottom: 150px !important; display: flex; flex-direction: column; gap: 6px; padding: 8px !important; }
#shopHead { display: flex; gap: 8px; align-items: center; }
#shopTabs { display: flex; gap: 3px; }
#shopTabs button { background: #1a1f22; color: var(--text); border: 1px solid #333; padding: 5px 12px; border-radius: 3px; cursor: pointer; }
#shopTabs button.sel { border-color: var(--gold); color: var(--gold); }
#shopSearch { flex: 1; min-width: 0; background: #0b0e10; border: 1px solid #333; color: var(--text); padding: 6px 8px; border-radius: 3px; }
#shopClose { background: transparent; border: 1px solid #333; color: #999; border-radius: 3px; cursor: pointer; padding: 4px 9px; }
#shopItems { overflow: auto; min-height: 120px; display: block !important; }
#shopItems.cols { display: flex !important; gap: 10px; align-items: flex-start; }
.shopSection h4, .guideRow h4 { margin: 0 0 4px; font-size: 11px; letter-spacing: 2px; color: var(--dim); }
.shopCols { display: flex; gap: 3px; }
.shopCol { display: flex; flex-direction: column; gap: 3px; width: 54px; }
.shopColHead { font-size: 10px; color: var(--gold); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 14px; }
.shopItem { position: relative; cursor: pointer; border: 1px solid #2c2c2c; width: 54px; height: 40px; flex: none; }
.shopItem img { width: 100% !important; height: 100% !important; display: block; object-fit: cover; }
.shopItem span { position: absolute; right: 2px; bottom: 0; font-size: 10px; color: #ffd65a; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.shopItem.picked { border-color: #fff; box-shadow: 0 0 6px #fff8; }
.shopItem.owned { border-color: #5ad15a; }
.shopItem.owned::after { content: '✔'; position: absolute; left: 2px; top: 0; font-size: 11px; color: #6fe46f; text-shadow: 0 0 3px #000; }
.shopItem.recipe { cursor: default; }
.shopGrid, .guideIcons { display: flex; flex-wrap: wrap; gap: 4px; }
.guideRow { margin-bottom: 8px; }
.shopEmpty, .shopHint { color: #777; font-size: 12px; padding: 6px; }
#shopDetail { border-top: 1px solid #2a2a2a; padding-top: 6px; display: grid; gap: 5px; }
.sdHead { display: flex; gap: 8px; align-items: center; }
.sdHead img { width: 64px; height: 47px; }
.sdHead b { color: #fff; margin-right: 8px; } .sdHead .cost { color: #ffd65a; font-size: 13px; }
.sdHead .cost s { color: #888; }
.sdAttrs { font-size: 12px; color: #9fd3ff; margin-top: 2px; }
.sdBtns { margin-left: auto; display: flex; gap: 6px; }
.sdBtns button { background: linear-gradient(#3b6b2a, #2a4d1e); color: #eaffdf; border: 1px solid #5d9a45; padding: 6px 12px; border-radius: 3px; cursor: pointer; }
.sdBtns button.ghost { background: #1a1f22; color: var(--text); border-color: #444; }
.sdTree, .sdUsed, .quickBuy { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.sdLabel { font-size: 11px; color: var(--dim); margin-right: 2px; }
.quickBuy.empty { display: none; }
.quickBuy .qbTarget { border-color: var(--gold); }
.qbClear { background: transparent; border: 0; color: #888; cursor: pointer; }
#goldbox .hudQuick { position: absolute; bottom: calc(100% + 6px); right: 0; background: var(--panel); border: 1px solid var(--line); padding: 4px 6px; border-radius: 4px; white-space: nowrap; }
#goldbox { position: relative; }
#shopHead { flex-direction: row !important; flex-wrap: nowrap !important; }
#shopHead #shopSearch { width: auto !important; }
#goldbox .hudQuick { flex-wrap: nowrap; display: flex; }
#goldbox .hudQuick.empty, body.shopOpen #goldbox .hudQuick { display: none !important; }
#shopTabs { display: none !important; }   /* una sola vista: todas las categorías */

/* Árbol de talentos */
#center { position: relative; }
#talentWrap { position: absolute; left: -46px; top: 30px; }
#talentBtn { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #5b4a26; background: radial-gradient(#3a2f18, #15110a); color: #8a7444; font-size: 18px; cursor: pointer; }
#talentBtn.avail { border-color: #ffd36a; color: #ffe39a; box-shadow: 0 0 12px #ffcc55; animation: talPulse 1.2s ease-in-out infinite; }
#talentBtn.attr { border-color: #7fb4ff; color: #bcd8ff; }
@keyframes talPulse { 50% { box-shadow: 0 0 22px #ffcc55; } }
#talentTree { position: absolute; bottom: 46px; left: -10px; width: 520px; background: rgba(10, 12, 14, .96); border: 1px solid #4b3d1f; border-radius: 4px; padding: 6px; z-index: 6; }
#talentTree .ttTitle { text-align: center; letter-spacing: 3px; color: #d8c79a; font-size: 13px; padding: 4px 0 8px; }
.talRow { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: stretch; gap: 4px; margin-bottom: 4px; }
.tal { background: #1a1d1f; border: 1px solid #2c2c2c; color: #8d887c; font-size: 12px; padding: 7px 8px; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 34px; }
.tal.can { color: #f1e6c8; border-color: #c9a24a; cursor: pointer; background: linear-gradient(#2b2416, #1a1610); }
.tal.can:hover { border-color: #ffd36a; box-shadow: inset 0 0 10px #ffcc5544; }
.tal.got { color: #fff3c9; background: linear-gradient(#7a5a1c, #4c3810); border-color: #ffcf63; }
.tal.empty { visibility: hidden; }
.talLvl { display: grid; place-items: center; border-radius: 50%; width: 40px; height: 40px; align-self: center; background: #15130f; border: 2px solid #3a3222; color: #6f6550; font-weight: 800; }
.talLvl.on { color: #ffd36a; border-color: #c9a24a; }
.talAttr { margin-top: 6px; text-align: center; font-size: 12px; color: #8d887c; padding: 6px; border: 1px solid #2c2c2c; }
.talAttr span { color: #c9a24a; letter-spacing: 2px; margin-left: 6px; }
.talAttr.can { color: #d6e8ff; border-color: #7fb4ff; cursor: pointer; }

/* Tienda v3 (como Dota 2): guía | columnas por pestaña, fijados, árbol de receta y alijo */
#shop { position: absolute !important; right: 8px !important; bottom: 150px !important; top: 70px; width: auto !important; max-height: none !important;
  display: flex !important; flex-direction: row !important; gap: 0 !important; padding: 0 !important; background: rgba(12, 15, 17, .97) !important; border: 1px solid #2b3236 !important; }
#shop.hidden { display: none !important; }
#shopGuide { width: 190px; border-right: 1px solid #23292c; display: none; flex-direction: column; overflow: hidden; }
#shop.guideOpen #shopGuide { display: flex; }
#shop.guideOpen #sgOpen { display: none; }
.sgHead { display: flex; justify-content: space-between; align-items: center; padding: 8px; color: #c9c4b4; font-size: 12px; letter-spacing: 1px; border-bottom: 1px solid #23292c; }
#sgBody { overflow: auto; padding: 6px 8px; }
.sgGroup { font-size: 10px; letter-spacing: 1.5px; color: #8e8a7e; margin: 8px 0 4px; }
.sgRow { display: flex; flex-wrap: wrap; gap: 3px; }
#shopGuide button, #sgOpen, #shopClose { background: #1a1f22; border: 1px solid #333; color: #aaa; border-radius: 3px; cursor: pointer; padding: 3px 8px; }
#shopMain { display: flex; flex-direction: column; width: 340px; min-height: 0; }
#shopHead { display: flex !important; flex-direction: row !important; gap: 6px !important; padding: 8px 8px 4px; margin: 0 !important; }
#shopSearch { flex: 1; min-width: 0; background: #0b0e10; border: 1px solid #333; color: var(--text); padding: 6px 8px; border-radius: 3px; }
#shopTabs { display: flex !important; gap: 0 !important; padding: 0 8px; }
#shopTabs button { flex: 1; background: #15191c; color: #8e8a7e; border: 1px solid #2b3236; padding: 6px 0; font-size: 11px; letter-spacing: 1.5px; cursor: pointer; border-radius: 0; }
#shopTabs button.sel { background: #22292d; color: #e8e2cf; border-bottom-color: #22292d; }
#shopItems { flex: 1; overflow: auto; padding: 8px; min-height: 160px; background: #101416; margin: 0 8px; border: 1px solid #2b3236; border-top: 0; }
.shopCols { display: flex; gap: 4px; justify-content: center; }
.shopCol { display: flex; flex-direction: column; gap: 4px; width: auto !important; }
.shopColHead { font-size: 10px; color: var(--gold); text-align: center; }
.shopItem { width: 50px !important; height: 37px !important; }
.shopItem.mini { width: 30px !important; height: 22px !important; }
.shopItem.mini span { display: none; }
.shopItem.emptySlot { background: #0c0f11; border-color: #1f2427; cursor: default; }
.shopItem.neutral { cursor: help; }
.shopHint { font-size: 10px; color: #6d6a62; padding: 3px 10px; }
#shopPinned, #shopStash { padding: 4px 8px; }
#shopPinned.empty { display: none; }
.spTitle { font-size: 10px; letter-spacing: 2px; color: #8e8a7e; text-align: center; margin-bottom: 3px; }
.spRow { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.pin { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pinParts { display: flex; gap: 2px; }
.pinX { position: absolute; top: -6px; right: -6px; background: #000a; border: 0; color: #aaa; font-size: 10px; border-radius: 50%; width: 15px; height: 15px; cursor: pointer; padding: 0; display: none; }
.pin:hover .pinX { display: block; }
#shopDetail { position: relative; padding: 6px 8px; min-height: 110px; display: flex !important; flex-direction: column; align-items: center; gap: 14px; border-top: 1px solid #23292c; border-bottom: 1px solid #23292c; }
#shopDetail .sdUsed { display: flex; gap: 4px; justify-content: center; }
#shopDetail .sdTop, #shopDetail .sdComps { display: flex; gap: 10px; justify-content: center; z-index: 1; }
#shopDetail .sdMain { width: 60px !important; height: 44px !important; border-color: #e0b54d; }
.sdLines { position: absolute; left: 0; top: 0; pointer-events: none; }
.sdLines path { fill: none; stroke: #d9a53a; stroke-width: 2; }
#goldbox .quickBuy { display: flex; gap: 4px; }
#goldbox .quickBuy .pin { flex-direction: row; }