* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #0d1117; color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
#game, #game canvas { position: fixed; inset: 0; display: block; }
.hidden { display: none !important; }
button { font-family: inherit; color: inherit; }

/* ---------- Lobby ---------- */
#lobby {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 20; padding: 16px; overflow-y: auto; touch-action: pan-y;
  background: radial-gradient(circle at 50% 25%, rgba(40,80,140,.88), rgba(5,8,15,.96));
}
.lobby-card { width: min(420px, 100%); text-align: center; }
.lobby-card h1 { margin: 0; font-size: clamp(34px, 8vw, 54px); font-weight: 900; letter-spacing: 2px; line-height: .95;
  text-shadow: 0 4px 0 #000, 0 0 30px rgba(255,200,60,.4); }
.lobby-card h1 span { display: block; font-size: .5em; color: #ffc93c; letter-spacing: 6px; }
.sub { opacity: .8; margin: 10px 0 16px; }
#name, #play, #enter { width: 100%; font-size: 20px; border-radius: 10px; border: 0; padding: 14px 16px; }
#name { background: rgba(255,255,255,.95); color: #111; text-align: center; font-weight: 700; outline: none; }
#play, #enter { margin-top: 12px; font-weight: 900; letter-spacing: 2px; cursor: pointer; color: #1a1200;
  background: linear-gradient(#ffd85c, #f0a91e); box-shadow: 0 5px 0 #a8700c; }
#play:active, #enter:active { transform: translateY(3px); box-shadow: 0 2px 0 #a8700c; }
#enter:disabled { opacity: .5; cursor: wait; }

/* ---------- Selección de personaje ---------- */
#select { position: fixed; inset: 0; z-index: 15; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, transparent 25%, rgba(0,10,5,.55) 75%); }
#select > * { pointer-events: auto; }
.sel-title { position: absolute; top: 14px; left: 0; right: 0; margin: 0; text-align: center; font-size: clamp(22px, 4vw, 38px);
  font-weight: 900; letter-spacing: 4px; text-shadow: 0 3px 0 #000, 0 0 24px rgba(255,200,60,.5); pointer-events: none; }
.sel-side { position: absolute; top: 50%; transform: translateY(-55%); display: flex; flex-direction: column; gap: 10px; width: min(230px, 26vw); }
.sel-side.left { left: 16px; }
.sel-side.right { right: 16px; }
.sel-side .ccard { padding: 10px 12px; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.sel-side .ccard .cicon { grid-row: span 2; font-size: 34px; }
.sel-side .ccard .cname { margin: 0; font-size: 17px; }
.sel-side .ccard .crole { margin: 0; }
.sel-bottom { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(520px, 46vw); text-align: center; }
#selInfo { background: rgba(0,0,0,.55); border-radius: 12px; padding: 10px 14px; text-align: left; backdrop-filter: blur(4px); }
#selInfo h3 { margin: 0; font-size: 22px; }
#selInfo .role { opacity: .8; font-size: 13px; margin-bottom: 6px; }
#selInfo .cstats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
#selInfo .sk { display: flex; gap: 8px; font-size: 12px; margin-top: 4px; }
#selInfo .sk b { white-space: nowrap; }
#selInfo .sk span { opacity: .8; }
.sel-room { position: absolute; top: 14px; right: 16px; font-size: 12px; background: rgba(0,0,0,.45); padding: 4px 8px; border-radius: 6px; }
@media (max-width: 760px), (max-height: 500px) {
  .sel-side { gap: 5px; width: 30vw; }
  .sel-side .ccard { padding: 5px 8px; }
  .sel-side .ccard .cicon { font-size: 22px; }
  .sel-side .ccard .cname { font-size: 13px; }
  .sel-side .ccard .crole { display: none; }
  .sel-bottom { width: 38vw; }
  #selInfo .sk, #selInfo .cstats { display: none; }
  #enter { padding: 10px; font-size: 16px; }
}

#net { position: fixed; z-index: 16; left: 50%; top: 4px; transform: translateX(-50%); font: 600 11px ui-monospace, monospace;
  background: rgba(0,0,0,.4); padding: 2px 8px; border-radius: 5px; pointer-events: none; opacity: .85; }
#net:empty { display: none; }
#lobby-msg { color: #ff8080; min-height: 1.2em; }
.help { font-size: 13px; opacity: .75; line-height: 1.6; margin-top: 6px; }
body.is-touch .help.pc, body:not(.is-touch) .help.touch { display: none; }

.ccard { --cc: #4da6ff; position: relative; text-align: left; cursor: pointer; padding: 10px; border-radius: 12px;
  background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border: 2px solid rgba(255,255,255,.15);
  transition: transform .12s, border-color .12s; }
.ccard:hover { transform: translateY(-2px); }
.ccard.sel { border-color: var(--cc); box-shadow: 0 0 18px color-mix(in srgb, var(--cc) 55%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 30%, transparent), rgba(255,255,255,.03)); }
.cicon { font-size: 30px; line-height: 1; }
.cname { font-weight: 900; font-size: 16px; margin-top: 4px; color: var(--cc); }
.crole { font-size: 11px; opacity: .75; margin-bottom: 6px; }
.cstats div { display: flex; align-items: center; gap: 6px; font-size: 10px; text-transform: uppercase; opacity: .85; }
.cstats span { width: 62px; }
.cstats i { display: block; height: 5px; border-radius: 3px; background: var(--cc); }
.cskills { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; font-size: 11px; opacity: .9; }
.ccard.compact { padding: 6px 8px; text-align: center; min-width: 74px; }
.ccard.compact .cicon { font-size: 22px; }
.ccard.compact .cname { font-size: 11px; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#minimap { position: absolute; bottom: 12px; right: 12px; width: 210px; height: 210px; border-radius: 6px;
  border: 3px solid #b8913a; box-shadow: 0 0 0 2px #2a1d06, 0 4px 14px rgba(0,0,0,.6); }

#roominfo { position: absolute; bottom: 236px; right: 12px; font-size: 12px; background: rgba(0,0,0,.45); padding: 4px 8px; border-radius: 6px; }
#leaderboard { position: absolute; top: 12px; right: 12px; min-width: 200px; background: rgba(0,0,0,.45);
  border-radius: 10px; padding: 8px 10px; font-size: 13px; }
#leaderboard .row { display: flex; justify-content: space-between; gap: 12px; padding: 1px 0; }
#leaderboard .row.me { color: #ffd84d; font-weight: 800; }
#leaderboard .title { font-weight: 800; font-size: 11px; letter-spacing: 1px; opacity: .7; margin-bottom: 3px; }
#killfeed { position: absolute; top: 175px; right: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#killfeed div { background: rgba(0,0,0,.5); padding: 3px 8px; border-radius: 5px; font-size: 13px; transition: opacity .5s; }
#killfeed .me { background: rgba(200,40,40,.65); }
#killfeed b { color: #ffd84d; }

#banner { position: absolute; top: 14%; left: 50%; transform: translateX(-50%) skewX(-12deg); padding: 6px 48px;
  font-size: clamp(18px, 3.4vw, 30px); font-weight: 900; letter-spacing: 2px; color: #2b1d00; opacity: 0;
  background: linear-gradient(90deg, transparent, #ffc93c 18%, #ffe27a 50%, #ffc93c 82%, transparent); transition: opacity .25s; white-space: nowrap; }
#banner.show { opacity: 1; }

#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#crosshair i { position: absolute; background: #fff; box-shadow: 0 0 2px #000; }
#crosshair i:nth-child(1), #crosshair i:nth-child(2) { width: 2px; height: 8px; left: -1px; }
#crosshair i:nth-child(1) { top: -13px; } #crosshair i:nth-child(2) { top: 5px; }
#crosshair i:nth-child(3), #crosshair i:nth-child(4) { height: 2px; width: 8px; top: -1px; }
#crosshair i:nth-child(3) { left: -13px; } #crosshair i:nth-child(4) { left: 5px; }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; opacity: 0; transition: opacity .15s; }
#hitmarker::before, #hitmarker::after { content: ""; position: absolute; left: 10px; top: -2px; width: 2px; height: 26px; background: #fff; }
#hitmarker::before { transform: rotate(45deg); } #hitmarker::after { transform: rotate(-45deg); }
#hitmarker.show { opacity: 1; transition: none; }
#hitmarker.head::before, #hitmarker.head::after { background: #ff4040; }
#hurt { position: absolute; inset: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(220,0,0,.55)); }
#hurt.show { opacity: 1; transition: none; }

#dmgnums div { position: absolute; font-weight: 900; font-size: 22px; color: #ffe066; transform: translate(-50%, -50%);
  text-shadow: 0 2px 0 #000, 0 0 6px rgba(0,0,0,.7); white-space: nowrap; }
#dmgnums div.crit { color: #ff4d4d; font-size: 28px; }
#dmgnums div.blocked { color: #9fc6ff; font-size: 18px; }

#bottom { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 14px; }
#leftcol { width: 250px; }
#clsname { font-weight: 900; font-size: 14px; margin-bottom: 4px; text-shadow: 0 1px 3px #000; }
#hpbar { height: 14px; background: rgba(0,0,0,.6); border-radius: 7px; overflow: hidden; border: 1px solid rgba(255,255,255,.3); }
#hpfill { height: 100%; width: 100%; background: linear-gradient(#7dff8a, #2fbf4a); transition: width .15s; }
#hpfill.low { background: linear-gradient(#ff8c7a, #e0352a); }
#hptext { text-align: center; font-size: 12px; font-weight: 700; margin: 2px 0 4px; text-shadow: 0 1px 2px #000; }
#chaos { position: relative; height: 16px; background: rgba(0,0,0,.6); border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.25); }
#chaosfill { height: 100%; width: 0; background: linear-gradient(90deg, #7a2cff, #ff3cac); transition: width .2s; }
#chaostext { position: absolute; inset: 0; font-size: 10px; font-weight: 900; letter-spacing: 1px; display: grid; place-items: center; text-shadow: 0 1px 2px #000; }
#chaos.full { animation: pulse .6s infinite alternate; border-color: #ff8ae0; }
#chaos.active #chaosfill { background: linear-gradient(90deg, #ff3cac, #ffd23d); }
@keyframes pulse { from { box-shadow: 0 0 4px #ff3cac; } to { box-shadow: 0 0 18px #ff3cac; } }

#skills { display: flex; gap: 6px; }
.skill { position: relative; width: 58px; height: 58px; border-radius: 10px; background: rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.25);
  display: grid; place-items: center; overflow: hidden; }
.skill.ready { border-color: rgba(255,210,80,.8); }
.skill.aiming { border-color: #fff; box-shadow: 0 0 14px rgba(255,255,255,.8); transform: translateY(-4px); }
.sicon { font-size: 26px; }
.skill b { position: absolute; top: 2px; left: 5px; font-size: 10px; opacity: .8; }
.skill small { position: absolute; bottom: 1px; left: 0; right: 0; text-align: center; font-size: 8px; opacity: .85; white-space: nowrap; overflow: hidden; }
.cdov { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0,0,0,.65); }
.cdt { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 18px; text-shadow: 0 1px 3px #000; }
#kills { background: rgba(0,0,0,.5); border-radius: 8px; padding: 8px 12px; font-weight: 800; }

#hint { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); background: rgba(0,0,0,.55);
  padding: 8px 14px; border-radius: 8px; font-size: 14px; }
#death { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: rgba(60,0,0,.35); pointer-events: auto; }
#death h2 { margin: 0; font-size: 56px; font-weight: 900; color: #ff4d4d; text-shadow: 0 4px 0 #000; letter-spacing: 3px; }
#death p { margin: 6px; font-size: 18px; text-shadow: 0 2px 2px #000; }
#death p.small { font-size: 13px; opacity: .85; margin-top: 16px; }
#respawn { font-size: 120px; font-weight: 900; line-height: 1; color: #fff; text-shadow: 0 6px 0 #000, 0 0 30px rgba(255,80,80,.8); }
#respawn.tick { animation: deathTick .9s ease-out; }
@keyframes deathTick { from { transform: scale(1.8); opacity: 0; } 25% { transform: scale(1); opacity: 1; } to { transform: scale(.9); opacity: .85; } }

/* ---------- Controles táctiles ---------- */
#touch { position: absolute; inset: 0; }
#joy { position: absolute; width: 130px; height: 130px; margin: -65px; border-radius: 50%; left: 110px; bottom: 50px;
  background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.35); top: auto; }
#knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 50%; background: rgba(255,255,255,.55); }
.tbtn { position: absolute; pointer-events: auto; border-radius: 50%; border: 2px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.35); color: #fff; font-size: 24px; touch-action: none; width: 58px; height: 58px; padding: 0; }
.tbtn.on { background: rgba(255,201,60,.5); }
.tbtn.cooling { opacity: .45; }
#btnAtk { right: 36px; bottom: 60px; width: 92px; height: 92px; font-size: 38px; background: rgba(220,60,40,.5); }
#btnQ { right: 140px; bottom: 40px; }
#btnE { right: 146px; bottom: 112px; }
#btnR { right: 92px; bottom: 166px; }
#btnD { right: 214px; bottom: 26px; width: 50px; height: 50px; font-size: 20px; }
#btnF { right: 24px; bottom: 170px; width: 50px; height: 50px; font-size: 22px; color: #ffe27a; }
#btnPot { right: 214px; bottom: 90px; width: 50px; height: 50px; font-size: 20px; }
#btnPot::after { content: attr(data-n); position: absolute; right: -2px; bottom: -2px; font-size: 12px; font-weight: 900; background: #000; border-radius: 8px; padding: 0 5px; }
#btnShop { left: 50%; top: 30%; transform: translateX(-50%); width: 64px; height: 64px; font-size: 30px; background: rgba(184,145,58,.6); }
#btnX { right: 24px; bottom: 236px; width: 52px; height: 52px; opacity: .4; }
#btnX.full { opacity: 1; background: rgba(255,60,172,.6); animation: pulse .6s infinite alternate; }
body.is-touch #hint, body.is-touch #skills { display: none; }
body.is-touch #bottom { bottom: 8px; transform: translateX(-50%) scale(.8); transform-origin: bottom center; }
body.is-touch #minimap { width: 110px; height: 110px; top: 10px; left: 10px; bottom: auto; right: auto; border-width: 2px; }
body.is-touch #roominfo { top: 128px; left: 10px; bottom: auto; right: auto; }
body.is-touch #leaderboard { font-size: 11px; min-width: 150px; }
body.is-touch #killfeed { top: 150px; }

#rotate { display: none; position: fixed; inset: 0; z-index: 30; place-items: center; text-align: center;
  background: radial-gradient(ellipse at 50% 40%, #2b2833, #0d0b14 75%); color: #f3eee2; }
#rotate > div { display: flex; flex-direction: column; align-items: center; }
#rotate .rot-logo { font-size: 44px; margin-bottom: 34px; display: inline-block; }
/* celular que se gira solo (de parado a acostado) para mostrar qué hacer */
#rotate .rot-phone { display: block; font-size: 70px; color: #ffd84d; animation: rotPhone 2.2s ease-in-out infinite; }
#rotate p { font: 600 26px/1.1 var(--hd, sans-serif); letter-spacing: .5px; margin: 26px 24px 0; text-transform: uppercase; }
@keyframes rotPhone { 0%, 20% { transform: rotate(0); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { #rotate .rot-phone { animation: none; transform: rotate(-90deg); } }
@media (orientation: portrait) { body.is-touch.in-game #rotate { display: grid; } }

@media (max-width: 760px) {
  #leftcol { width: 170px; }
  .skill { width: 46px; height: 46px; }
  .sicon { font-size: 20px; }
}

/* ---------- Puntero estilo LoL ---------- */
body, #game canvas, button { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff6c2'/%3E%3Cstop offset='.45' stop-color='%23f2bf3c'/%3E%3Cstop offset='1' stop-color='%23a06a10'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 2 L3 25 L9 19.5 L13.5 29 L18 27 L13.5 17.5 L21.5 17.5 Z' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M3 2 L3 25 L9 19.5 L13.5 29 L18 27 L13.5 17.5 L21.5 17.5 Z' fill='url(%23g)' stroke='%23140c02' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M5.5 7 L5.5 19' stroke='%23fffbe0' stroke-width='1.2' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E") 4 3, auto; } /* (grande, con borde blanco: se ve en cualquier mapa) */
body.cur-attack #game canvas { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 32 32'%3E%3Cpath d='M2 2 L9 3.5 L23 17.5 L17.5 23 L3.5 9 Z' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M15.5 26 L26 15.5 M23 23 L29 29' stroke='%23ffffff' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M2 2 L9 3.5 L23 17.5 L17.5 23 L3.5 9 Z' fill='%23ff3b2e' stroke='%23300' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M5 5 L19 19' stroke='%23ffd0c8' stroke-width='1.2'/%3E%3Cpath d='M15.5 26 L26 15.5' stroke='%23231503' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M15.5 26 L26 15.5' stroke='%23e9b43c' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M23 23 L29 29' stroke='%23231503' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M23 23 L29 29' stroke='%238a5a2e' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") 3 3, auto; }

/* ---------- Barra de habilidades: A Q E R | D F poción ---------- */
.skill.ult { border-color: rgba(255,120,60,.6); }
.skill.ult.ready { border-color: #ff9a3c; box-shadow: 0 0 12px rgba(255,140,60,.6); }
/* daño por golpe del ataque básico (número bajo la casilla A): rojo; salta un poco cuando sube */
.skill .slv.atkdmg { min-width: 30px; background: #c8203a; color: #fff; border-color: #ffd0d6; }
.skill .slv.atkdmg.bump { animation: atkBump .45s ease-out; }
@keyframes atkBump { 0% { transform: translateX(-50%) scale(1.5); } 100% { transform: translateX(-50%) scale(1); } }
/* R bloqueada hasta el nivel 6 de la partida */
.skill.locked .sicon { filter: grayscale(1) brightness(.45); }
.skill.locked { border-color: #555 !important; box-shadow: none !important; }
.skill .lock { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; font-style: normal; font-size: 18px; pointer-events: none; }
.skill .lock small { font: 800 11px system-ui, sans-serif; color: #ffd84d; text-shadow: 0 1px 2px #000; }
.skill.sum { width: 46px; height: 46px; align-self: flex-end; }
.skill.sum .sicon { font-size: 20px; }
.skill.item { width: 46px; height: 46px; align-self: flex-end; }
.skill.item .sicon { font-size: 20px; }
.skill.item.empty .sicon { opacity: .35; }
.skill .count { position: absolute; right: 4px; bottom: 9px; font-style: normal; font-weight: 900; font-size: 12px; text-shadow: 0 1px 2px #000; }
#skills .sep { width: 2px; align-self: stretch; margin: 4px 2px; background: rgba(255,255,255,.2); border-radius: 1px; }
#rightcol { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
#goldbox { background: rgba(0,0,0,.55); border: 1px solid rgba(255,210,80,.5); border-radius: 8px; padding: 6px 12px; font-weight: 900; color: #ffd84d; text-align: center; }
#hpbar.barrier { box-shadow: 0 0 0 2px #ffe27a, 0 0 12px #ffd84d; }
#bottom { padding: 8px 12px; border-radius: 14px; background: linear-gradient(rgba(10,12,20,.35), rgba(10,12,20,.7)); border: 1px solid rgba(184,145,58,.45); }
body.is-touch #bottom { background: none; border: 0; }

/* ---------- Anuncios de asesinatos ---------- */
#announce { position: absolute; top: 18%; left: 50%; transform: translate(-50%, -10px) scale(.85); opacity: 0; text-align: center;
  transition: opacity .25s, transform .25s cubic-bezier(.2,1.6,.4,1); pointer-events: none; white-space: nowrap; }
#announce.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ann-title { font-size: clamp(26px, 5vw, 50px); font-weight: 900; letter-spacing: 3px; font-style: italic;
  background: linear-gradient(#fff, #ffcf4a 55%, #c27a10); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #2a1600) drop-shadow(0 0 14px rgba(255,180,40,.6)); padding: 0 12px; }
.ann-sub { display: inline-block; margin-top: 4px; font-size: clamp(13px, 1.8vw, 17px); font-weight: 700; padding: 3px 18px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.65) 20%, rgba(0,0,0,.65) 80%, transparent); }
#announce.tone-red .ann-title { background-image: linear-gradient(#fff, #ff6a4a 55%, #8a1010); filter: drop-shadow(0 3px 0 #2a0000) drop-shadow(0 0 14px rgba(255,60,40,.6)); }
#announce.tone-purple .ann-title { background-image: linear-gradient(#fff, #d07bff 55%, #5a1a9a); filter: drop-shadow(0 3px 0 #1a0030) drop-shadow(0 0 16px rgba(190,90,255,.7)); }
#announce.tone-blue .ann-title { background-image: linear-gradient(#fff, #7cc4ff 55%, #1a4a9a); filter: drop-shadow(0 3px 0 #001030) drop-shadow(0 0 14px rgba(80,160,255,.6)); }
#announce.tone-legend .ann-title { font-size: clamp(32px, 6.5vw, 66px); animation: annGlow .5s infinite alternate; }
#announce.mine .ann-sub { color: #ffd84d; }
@keyframes annGlow { from { filter: drop-shadow(0 3px 0 #2a1600) drop-shadow(0 0 10px rgba(255,120,40,.6)); } to { filter: drop-shadow(0 3px 0 #2a1600) drop-shadow(0 0 28px rgba(255,200,60,1)); } }

/* ---------- Tienda ---------- */
#shophint { position: absolute; left: 50%; bottom: 140px; transform: translateX(-50%); background: rgba(0,0,0,.6); border: 1px solid #b8913a;
  padding: 6px 14px; border-radius: 8px; font-size: 14px; color: #ffe9a8; }
#shop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -60%); width: min(420px, 92vw); pointer-events: auto;
  background: linear-gradient(#2a2010, #17110a); border: 2px solid #b8913a; border-radius: 12px; box-shadow: 0 0 0 2px #000, 0 10px 40px rgba(0,0,0,.7); padding: 10px; }
.shop-head { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: 2px; color: #ffd84d; padding: 2px 4px 8px; border-bottom: 1px solid rgba(184,145,58,.4); }
.shop-gold { margin-left: auto; letter-spacing: 0; }
.shop-x { background: none; border: 0; font-size: 18px; color: #ccc; }
.shop-item { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.shop-item:hover { background: rgba(255,216,77,.15); border-color: #ffd84d; }
.shop-item.off { opacity: .5; }
.shop-icon { font-size: 34px; }
.shop-info { display: flex; flex-direction: column; gap: 2px; font-size: 12px; flex: 1; }
.shop-info b { font-size: 15px; color: #fff; }
.shop-info span { opacity: .8; }
.shop-cost { font-weight: 900; color: #ffd84d; white-space: nowrap; }
.shop-foot { font-size: 11px; opacity: .6; text-align: center; margin-top: 8px; }@media (max-width: 1250px) { body:not(.is-touch) #bottom { left: calc(50% - 110px); } }

/* iconos con imagen (public/assets/icons/) */
img.ico { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: middle; pointer-events: none; }
.skill .sicon img.ico { width: 100%; height: 100%; position: absolute; inset: 0; border-radius: 8px; object-fit: cover; }
.cicon img.ico { width: 1.1em; height: 1.1em; }
.tbtn img.ico { width: 70%; height: 70%; }

/* ---------- HUD con marco de piedra (assets/ui/hud_frame.png, 1600×300) ----------
   Las posiciones (%) son los huecos transparentes medidos en la imagen: retrato, barra de vida y 6 casillas. */
#bottom { background: none; border: 0; padding: 0; gap: 8px; align-items: flex-end; bottom: 4px; }
#topline { position: absolute; left: 14%; bottom: calc(100% - 4px); display: flex; gap: 10px; align-items: center; }
#topline #clsname { margin: 0; font-size: 15px; letter-spacing: 1px; color: #ffe9a8; text-shadow: 0 2px 3px #000; }
#topline #chaos { width: 170px; height: 14px; }
#hudframe { position: relative; width: min(780px, 60vw); aspect-ratio: 1600 / 300; }
#hudframe::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: url(assets/ui/hud_frame.png) center / 100% 100% no-repeat; }
#portrait { position: absolute; left: 13.6%; top: 21.5%; width: 12.4%; height: 53%; border-radius: 50%; overflow: hidden; z-index: 1;
  background: radial-gradient(#2c3540, #0b0f14); display: grid; place-items: center; font-size: 34px; }
#portrait img.ico { width: 100%; height: 100%; object-fit: cover; }
#portraitlvl { position: absolute; left: 22.6%; top: 60%; z-index: 3; width: 26px; height: 26px; border-radius: 50%;
  background: #10141a; border: 2px solid #c9a646; color: #fff; font-weight: 900; font-size: 13px; display: grid; place-items: center; }
#hudframe #hpbar { position: absolute; left: 30.8%; top: 15.6%; width: 55.4%; height: 16%; z-index: 1; border: 0; border-radius: 0; background: #0a0f0b; }
#hudframe #hpfill { background: linear-gradient(#7dff8a, #1fae3c); }
#hudframe #hpfill.low { background: linear-gradient(#ff8c7a, #c92a20); }
#hudframe #hptext { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; z-index: 1; }
#hudframe #hpbar.barrier { box-shadow: inset 0 0 0 2px #ffe27a, inset 0 0 10px #ffd84d; }
#hudframe #skills { position: absolute; inset: 0; z-index: 1; display: block; }
#hudframe .skill { position: absolute; top: 41.5%; width: 6.8%; height: 33%; border: 0; border-radius: 0; background: #0b0f14; transform: none; }
#hudframe .skill:nth-child(1) { left: 30.4%; }
#hudframe .skill:nth-child(2) { left: 39.8%; }
#hudframe .skill:nth-child(3) { left: 49.2%; }
#hudframe .skill:nth-child(4) { left: 58.75%; }
#hudframe .skill:nth-child(5) { left: 68.3%; }
#hudframe .skill:nth-child(6) { left: 78.25%; }
#hudframe .skill .sicon img.ico { border-radius: 0; }
#hudframe .skill small { display: none; }
#hudframe .skill b { z-index: 1; font-size: 11px; opacity: 1; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
#hudframe .skill.ready, #hudframe .skill.ult.ready { box-shadow: none; }
#hudframe .skill.aiming { transform: none; box-shadow: inset 0 0 0 3px #fff, inset 0 0 14px rgba(255,255,255,.7); }
#potslot .skill { width: 52px; height: 52px; }
#rightcol { margin-bottom: 14px; }

/* minimapa con marco (assets/ui/minimap_frame.png): el mapa va en el hueco transparente medido */
#minimapbox { position: absolute; bottom: 6px; right: 6px; width: 250px; height: 250px; }
#minimapbox::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(assets/ui/minimap_frame.png) center / 100% 100% no-repeat; }
#minimapbox #minimap { position: absolute; left: 16.2%; top: 15.2%; width: 69%; height: 68.4%; bottom: auto; right: auto;
  border: 0; border-radius: 0; box-shadow: none; }
#roominfo { bottom: 260px; }
body.is-touch #minimapbox { top: 4px; left: 4px; bottom: auto; right: auto; width: 140px; height: 140px; }
body.is-touch #minimapbox #minimap { left: 16.2%; top: 15.2%; width: 69%; height: 68.4%; }
body.is-touch #roominfo { top: 146px; }

/* nombre de la zona (arriba a la izquierda) y marcador (arriba a la derecha), como la referencia */
#zonename { position: absolute; top: 0; left: 0; padding: 6px 28px 6px 14px; font: 600 15px Georgia, 'Times New Roman', serif;
  letter-spacing: 3px; color: #e9dcb8; text-shadow: 0 2px 3px #000;
  background: linear-gradient(90deg, rgba(10,12,16,.85), rgba(10,12,16,0)); border-bottom: 1px solid rgba(201,166,70,.5); }
#scorebar { position: absolute; top: 4px; right: 230px; display: flex; gap: 14px; align-items: center; padding: 5px 14px;
  background: rgba(10,14,20,.8); border: 1px solid rgba(201,166,70,.6); border-radius: 4px; font-weight: 700; font-size: 14px; }
#scorebar .sc-k { color: #6fb7ff; }
#scorebar .sc-p { color: #7dff8a; font-size: 12px; }
#net { display: none; }
body.debug #net { display: block; }
body.is-touch #scorebar { right: 170px; font-size: 11px; gap: 8px; }
body.is-touch #zonename { display: none; }

/* ---------- Selección: stickman a la izquierda, clases a la derecha ---------- */
#select { background: linear-gradient(90deg, transparent 45%, rgba(5,8,6,.75) 62%); }
#select .sel-side.left { display: none; }
#select .sel-side.right { top: 76px; transform: none; right: 24px; width: min(470px, 42vw);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#select .sel-side.right .ccard { padding: 8px 10px; }
#select .sel-side.right .ccard .cicon { font-size: 30px; }
#select .sel-side.right .ccard .cicon img.ico { width: 46px; height: 46px; border-radius: 8px; }
#select .sel-bottom { left: auto; right: 24px; transform: none; width: min(470px, 42vw); bottom: 18px; }
#select .sel-title { left: 0; right: auto; width: 58%; }
#selHint { position: absolute; left: 0; width: 58%; bottom: 26px; text-align: center; font-size: 14px; letter-spacing: 1px;
  color: #ffe9a8; text-shadow: 0 2px 3px #000; pointer-events: none; animation: hintPulse 1.6s infinite alternate; }
@keyframes hintPulse { from { opacity: .55; } to { opacity: 1; } }
@media (max-width: 760px), (max-height: 520px) {
  #select .sel-side.right { top: 52px; gap: 4px; width: 46vw; }
  #select .sel-bottom { width: 46vw; }
}

/* ---------- Ajustes ---------- */
#btnSettings { position: fixed; z-index: 25; left: 8px; top: 34px; width: 34px; height: 34px; border-radius: 8px; font-size: 18px;
  background: rgba(10,14,20,.8); border: 1px solid rgba(201,166,70,.6); color: #ffe9a8; cursor: pointer; }
#settings { position: fixed; z-index: 26; left: 8px; top: 74px; width: 290px; padding: 12px; border-radius: 10px;
  background: linear-gradient(#2a2010, #17110a); border: 2px solid #b8913a; box-shadow: 0 10px 30px rgba(0,0,0,.7); }
#settings .set-head { display: flex; justify-content: space-between; font-weight: 900; letter-spacing: 2px; color: #ffd84d; margin-bottom: 8px; }
#settings .set-x { background: none; border: 0; color: #ccc; font-size: 16px; cursor: pointer; }
#settings label { display: block; margin: 10px 0; font-size: 13px; font-weight: 700; }
#settings label b { color: #ffd84d; float: right; }
#settings small { display: block; font-weight: 400; opacity: .65; font-size: 11px; margin-top: 3px; }
#settings input[type=range] { width: 100%; margin-top: 6px; accent-color: #d4ad4a; }
#settings .seg { display: flex; gap: 4px; margin-top: 6px; }
#settings .seg button { flex: 1; padding: 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); cursor: pointer; font-weight: 700; }
#settings .seg button.on { background: #d4ad4a; color: #1a1200; border-color: #ffd84d; }
/* puntero propio cuando el mouse está capturado (velocidad del mouse distinta de 1.0) */
#vcursor { position: fixed; left: 0; top: 0; width: 44px; height: 44px; z-index: 40; pointer-events: none; margin: -3px 0 0 -4px; background-size: 44px 44px !important; filter: drop-shadow(0 1px 3px rgba(0,0,0,.7));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff6c2'/%3E%3Cstop offset='.45' stop-color='%23f2bf3c'/%3E%3Cstop offset='1' stop-color='%23a06a10'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 2 L3 25 L9 19.5 L13.5 29 L18 27 L13.5 17.5 L21.5 17.5 Z' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M3 2 L3 25 L9 19.5 L13.5 29 L18 27 L13.5 17.5 L21.5 17.5 Z' fill='url(%23g)' stroke='%23140c02' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M5.5 7 L5.5 19' stroke='%23fffbe0' stroke-width='1.2' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E"); }
body.cur-attack #vcursor { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 32 32'%3E%3Cpath d='M2 2 L9 3.5 L23 17.5 L17.5 23 L3.5 9 Z' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M15.5 26 L26 15.5 M23 23 L29 29' stroke='%23ffffff' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M2 2 L9 3.5 L23 17.5 L17.5 23 L3.5 9 Z' fill='%23ff3b2e' stroke='%23300' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M5 5 L19 19' stroke='%23ffd0c8' stroke-width='1.2'/%3E%3Cpath d='M15.5 26 L26 15.5' stroke='%23231503' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M15.5 26 L26 15.5' stroke='%23e9b43c' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M23 23 L29 29' stroke='%23231503' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M23 23 L29 29' stroke='%238a5a2e' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
#game canvas { width: 100vw; height: 100vh; }
#hitmarker { display: none; }
#select .sel-title { padding-left: 50px; }

/* muerto: la partida en gris (solo mientras dura el contador) */
body.dead #game canvas { filter: grayscale(1) brightness(.85); }
#select { background: none; }
#select .ccard { background: rgba(24,22,30,.82); }
#select .ccard.sel { background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 35%, #18161e), #18161e); }
#select .sel-title, #selHint { color: #fff; }

/* =========================================================================
   HUD y minimapa en estilo simple (plano, como Stick Fight): paneles azul oscuro
   redondeados con acentos rojos. Reemplaza los marcos de piedra.
   ========================================================================= */
:root { --navy: #2b2833; --navy2: #1d1b23; --red: #cc2340; --cream: #f4ede2; }
#bottom { bottom: 12px; gap: 10px; align-items: flex-end; }
#topline { left: 6px; bottom: calc(100% + 4px); }
#topline #clsname { font: 800 14px system-ui, sans-serif; letter-spacing: 1px; color: var(--cream); text-shadow: 0 2px 0 rgba(0,0,0,.35); }
#topline #chaos { width: 150px; height: 12px; border: 0; border-radius: 6px; background: var(--navy); }
#hudframe { width: auto; aspect-ratio: auto; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px;
  background: var(--navy); border-radius: 18px; box-shadow: 0 5px 0 rgba(0,0,0,.25); }
#hudframe::after { display: none; }
#portrait { position: relative; left: auto; top: auto; width: 72px; height: 72px; flex: none; border-radius: 50%;
  background: var(--navy2); border: 4px solid var(--red); font-size: 32px; }
#portraitlvl { left: 62px; top: 62px; width: 26px; height: 26px; background: var(--red); border: 3px solid var(--navy); font-size: 12px; }
#hudframe #hpbar { position: absolute; left: 96px; right: 14px; top: 10px; width: auto; height: 18px; border-radius: 9px; background: var(--navy2); overflow: hidden; }
#hudframe #hpfill { background: #46d160; }
#hudframe #hpfill.low { background: #e2334a; }
#hudframe #hptext { font: 800 11px system-ui, sans-serif; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
#hudframe #skills { position: relative; inset: auto; display: flex; gap: 6px; margin-top: 26px; }
#hudframe .skill { position: relative; top: auto; left: auto !important; width: 52px; height: 52px; border-radius: 12px;
  background: var(--navy2); border: 3px solid #45414f; overflow: hidden; }
#hudframe .skill .sicon img.ico { border-radius: 0; }
#hudframe .skill.ready { border-color: #6a6577; }
#hudframe .skill.ult { border-color: #7a2333; }
#hudframe .skill.ult.ready { border-color: var(--red); box-shadow: 0 0 0 2px rgba(204,35,64,.35); }
#hudframe .skill.aiming { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
#hudframe .skill b { top: 2px; left: 4px; font-size: 10px; }
#hudframe .cdov { background: rgba(20,18,26,.75); }
#rightcol { margin-bottom: 0; gap: 6px; }
#potslot .skill { width: 52px; height: 52px; border-radius: 12px; background: var(--navy); border: 3px solid #45414f; }
#goldbox, #kills { background: var(--navy); border: 0; border-radius: 12px; color: #ffd84d; font: 800 14px system-ui, sans-serif;
  padding: 7px 12px; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
#kills { color: var(--cream); }

/* minimapa: cuadro redondeado azul oscuro, sin marco de piedra */
#minimapbox { width: 200px; height: 200px; bottom: 12px; right: 12px; border-radius: 18px; background: var(--navy); padding: 8px;
  box-shadow: 0 5px 0 rgba(0,0,0,.25); }
#minimapbox::after { display: none; }
#minimapbox #minimap { left: 8px; top: 8px; width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 12px; }
#roominfo { bottom: 222px; background: var(--navy); border-radius: 8px; }
body.is-touch #minimapbox { width: 130px; height: 130px; padding: 6px; }
body.is-touch #minimapbox #minimap { left: 6px; top: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }

/* arriba: zona, marcador y clasificación en el mismo estilo */
#zonename { font: 800 13px system-ui, sans-serif; letter-spacing: 2px; color: var(--cream); background: var(--navy);
  border: 0; border-radius: 0 0 12px 0; padding: 6px 16px; }
#scorebar { background: var(--navy); border: 0; border-radius: 12px; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
#leaderboard { background: rgba(43,40,51,.92); border-radius: 14px; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
#leaderboard .row.me { color: #ffd84d; }
#killfeed div { background: rgba(43,40,51,.9); border-radius: 8px; }
#killfeed .me { background: var(--red); }
#btnSettings { background: var(--navy); border: 0; border-radius: 10px; color: var(--cream); }
#settings { background: var(--navy); border: 0; border-radius: 16px; }
#settings .seg button.on { background: var(--red); color: #fff; border-color: var(--red); }
#settings input[type=range] { accent-color: var(--red); }
#shop { background: var(--navy); border: 0; border-radius: 16px; }
#shophint { background: var(--navy); border: 0; border-radius: 10px; color: var(--cream); }

/* pantalla de muerte simple */
#death { background: radial-gradient(ellipse at center, rgba(20,18,26,.35), rgba(20,18,26,.65)); }
#death h2 { color: #fff; text-shadow: 0 5px 0 var(--red); letter-spacing: 6px; }
#respawn { text-shadow: 0 6px 0 var(--red); }

/* ---------- Inicio de sesión / registro / perfil / tienda de la cuenta ---------- */
#authTabs { display: flex; gap: 6px; margin-bottom: 10px; }
#authTabs button { flex: 1; padding: 10px; border-radius: 10px; border: 0; background: rgba(255,255,255,.08); color: #ccc; font-weight: 800; cursor: pointer; }
#authTabs button.on { background: var(--red); color: #fff; }
#authBox input, #profileBox input { width: 100%; font-size: 17px; border-radius: 10px; border: 0; padding: 12px 14px; margin-bottom: 8px;
  background: rgba(255,255,255,.95); color: #111; font-weight: 700; outline: none; }
#authGo, #playAcc { width: 100%; font-size: 20px; border-radius: 10px; border: 0; padding: 14px; font-weight: 900; letter-spacing: 2px; cursor: pointer;
  color: #1a1200; background: linear-gradient(#ffd85c, #f0a91e); box-shadow: 0 5px 0 #a8700c; }
#authGo:disabled, #playAcc:disabled { opacity: .5; }
#authBox .or { margin: 14px 0 6px; font-size: 13px; opacity: .7; }
#authBox .guest { display: flex; gap: 6px; }
#authBox .guest input { margin: 0; }
#authBox .guest #play { width: auto; margin: 0; padding: 0 16px; font-size: 14px; letter-spacing: 1px; background: #45414f; color: #fff; box-shadow: 0 4px 0 #1d1b23; }
#profileBox .prof { display: flex; justify-content: space-between; align-items: baseline; font-size: 22px; margin-bottom: 6px; }
#profileBox .prof span { color: #ffd84d; font-weight: 900; font-size: 16px; }
.xpbar { height: 10px; border-radius: 5px; background: rgba(0,0,0,.45); overflow: hidden; }
.xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6fb7ff, #b48bff); }
#profileBox small { display: block; margin: 4px 0 12px; opacity: .8; }
.prof-actions { display: flex; gap: 8px; margin-top: 12px; }
.prof-actions button { flex: 1; padding: 10px; border-radius: 10px; border: 0; background: #45414f; color: #fff; font-weight: 800; cursor: pointer; }
#store { margin-top: 12px; background: var(--navy); border-radius: 14px; padding: 12px; text-align: center; }
#store .store-head { display: flex; justify-content: space-between; font-weight: 900; letter-spacing: 2px; color: #ffd84d; }
#store .store-head button { background: none; border: 0; color: #ccc; cursor: pointer; }
#store .store-empty { padding: 26px 8px; opacity: .85; }

/* ---------- Barra de habilidades: A chiquita + Q W E R + D F ---------- */
#hudframe .skill.basic { width: 28px; height: 28px; border-radius: 8px; align-self: flex-end; border-width: 2px; }
#hudframe .skill.basic .sicon { font: 900 14px system-ui, sans-serif; color: var(--cream); }
#hudframe #xpbar { position: absolute; left: 96px; right: 14px; bottom: 4px; height: 4px; border-radius: 2px; background: var(--navy2); overflow: hidden; }
#hudframe #xpfill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6fb7ff, #b48bff); transition: width .3s; }
#btnStats { position: absolute; left: 4px; top: -14px; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--navy); background: #45414f;
  font-size: 14px; cursor: pointer; pointer-events: auto; padding: 0; z-index: 4; }
#btnStats b { position: absolute; right: -8px; top: -8px; min-width: 18px; padding: 0 4px; border-radius: 9px; background: #ffd84d; color: #1a1200; font-size: 11px; line-height: 18px; }
#btnStats b:empty { display: none; }
#btnStats.glow { animation: pulse .7s infinite alternate; background: #6b4fb0; }
body.is-touch #btnW { right: 92px; bottom: 236px; }
body.is-touch #btnR { right: 160px; bottom: 176px; }

/* ---------- Tabla de estadísticas (como MU Online) ---------- */
#statsPanel { position: absolute; left: 16px; bottom: 150px; width: min(380px, 92vw); pointer-events: auto; z-index: 6;
  background: var(--navy); border-radius: 16px; padding: 12px 14px; box-shadow: 0 6px 0 rgba(0,0,0,.3); }
#statsPanel .st-head { display: flex; justify-content: space-between; font-weight: 900; letter-spacing: 1px; color: #ffd84d; margin-bottom: 8px; }
#statsPanel .st-x { background: none; border: 0; color: #ccc; font-size: 15px; cursor: pointer; }
#statsPanel .st-xp { position: relative; height: 16px; border-radius: 8px; background: var(--navy2); overflow: hidden; }
#statsPanel .st-xp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #6fb7ff, #b48bff); }
#statsPanel .st-xp span { position: relative; display: block; text-align: center; font: 800 10px/16px system-ui, sans-serif; }
#statsPanel .st-pts { margin: 8px 0; font-size: 13px; }
#statsPanel .st-pts b { color: #ffd84d; font-size: 16px; }
#statsPanel .st-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.08); }
#statsPanel .st-ic { font-size: 22px; width: 28px; text-align: center; }
#statsPanel .st-txt { flex: 1; display: flex; flex-direction: column; }
#statsPanel .st-txt small { opacity: .65; font-size: 11px; }
#statsPanel .st-txt em { font-style: normal; color: #7dff8a; font-size: 11px; font-weight: 700; }
#statsPanel .st-val { font: 900 18px system-ui, sans-serif; min-width: 30px; text-align: right; }
#statsPanel .st-add { width: 30px; height: 30px; border-radius: 8px; border: 0; background: var(--red); color: #fff; font: 900 18px system-ui; cursor: pointer; }
#statsPanel .st-add:disabled, #statsPanel .st-even:disabled { opacity: .35; cursor: default; }
#statsPanel .st-even { width: 100%; margin-top: 8px; padding: 9px; border-radius: 10px; border: 0; background: #45414f; color: #fff; font-weight: 800; cursor: pointer; }
#statsPanel .st-note { display: block; margin-top: 6px; opacity: .6; font-size: 11px; text-align: center; }
#statsPanel .st-guest { text-align: center; opacity: .9; line-height: 1.5; }
#shophint { bottom: 190px; }

/* ---------- ayuda de cada habilidad al pasar el mouse ---------- */
#hudframe .skill, #potslot .skill { pointer-events: auto; cursor: help; }
#skilltip { position: fixed; z-index: 30; width: 260px; padding: 10px 12px; border-radius: 12px; pointer-events: none;
  background: var(--navy); box-shadow: 0 6px 0 rgba(0,0,0,.3); font-size: 12px; line-height: 1.4; }
#skilltip .tt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
#skilltip .tt-head b { font-size: 14px; color: #ffd84d; }
#skilltip .tt-head span { font: 900 11px system-ui, sans-serif; color: #fff; background: var(--red); border-radius: 6px; padding: 1px 6px; }
#skilltip p { margin: 0 0 4px; }
#skilltip small { display: block; opacity: .7; }
#skilltip em { display: block; margin-top: 4px; font-style: normal; color: #7ab8ff; font-weight: 700; }
/* aviso: el servidor tiene una versión vieja */
#verWarn { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); z-index: 12; max-width: 90vw; padding: 10px 16px;
  border-radius: 12px; background: var(--red); color: #fff; font-weight: 700; text-align: center; box-shadow: 0 5px 0 rgba(0,0,0,.3); }
#topline #chaos { display: none; }
#skilltip .tt-dmg { display: block; color: #ff8a5c; font-size: 12px; margin-bottom: 4px; }
#skilltip .tt-aura { color: #ffd84d; opacity: 1; margin-bottom: 3px; }
#selInfo .aura { font-size: 12px; margin: 2px 0 6px; color: #ffd84d; }
#selInfo .sk .dmg { font-style: normal; color: #ff8a5c; font-weight: 700; }

/* ---------- Retrato: el borde es un anillo de experiencia y el nivel va en un círculo sobre el anillo ---------- */
#hudframe #portrait { --xp: 0%; border: 0; padding: 5px; pointer-events: auto; cursor: pointer;
  background: conic-gradient(#b48bff var(--xp), #1d1b23 var(--xp)); box-shadow: 0 0 0 3px var(--navy), 0 0 0 5px var(--red); }
#hudframe #portrait img.ico { border-radius: 50%; background: var(--navy2); }
#hudframe #portraitlvl { left: 41px; top: 76px; width: 28px; height: 28px; background: #ffd84d; color: #1a1200; border: 3px solid var(--navy); font-size: 13px; z-index: 4; }
#hudframe #xpbar { display: none; }
/* ---------- Ficha del personaje ---------- */
#charPanel { position: absolute; left: 16px; bottom: 150px; width: min(420px, 94vw); pointer-events: auto; z-index: 6;
  background: var(--navy); border-radius: 16px; padding: 12px 14px; box-shadow: 0 6px 0 rgba(0,0,0,.3); font-size: 12px; }
#charPanel .st-head { display: flex; justify-content: space-between; font-weight: 900; letter-spacing: 1px; color: #ffd84d; margin-bottom: 8px; }
#charPanel .st-x { background: none; border: 0; color: #ccc; font-size: 15px; cursor: pointer; }
#charPanel .st-xp { position: relative; height: 16px; border-radius: 8px; background: var(--navy2); overflow: hidden; margin-bottom: 8px; }
#charPanel .st-xp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #6fb7ff, #b48bff); }
#charPanel .st-xp span { position: relative; display: block; text-align: center; font: 800 10px/16px system-ui, sans-serif; }
#charPanel .st-guest { opacity: .8; margin: 0 0 8px; }
#charPanel .ch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#charPanel .ch-grid div { background: var(--navy2); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; }
#charPanel .ch-grid small { opacity: .65; font-size: 10px; }
#charPanel .ch-grid b { font-size: 14px; }
#charPanel .ch-grid em { font-style: normal; color: #7dff8a; font-size: 10px; min-height: 12px; }
#charPanel .ch-aura { margin: 8px 0; color: #ffd84d; }
#charPanel .ch-aura b { color: #fff; }
#charPanel .ch-dmg { width: 100%; border-collapse: collapse; }
#charPanel .ch-dmg th { text-align: left; font-size: 10px; opacity: .6; font-weight: 700; padding: 2px 4px; }
#charPanel .ch-dmg td { padding: 4px; border-top: 1px solid rgba(255,255,255,.07); }
#charPanel .ch-dmg td.up { color: #7dff8a; font-weight: 800; }
#charPanel .ch-dmg td.fx { color: #9fc6ff; }

/* ---------- Barrera (D): vida temporal dorada en la barra ---------- */
#hpbar { position: relative; }
#hpgold { position: absolute; top: 0; bottom: 0; left: 100%; width: 0; background: linear-gradient(#fff2a8, #ffc928); transition: width .15s, left .15s; }
/* ---------- Tabla de puntos (P): al centro de la pantalla ---------- */
#statsPanel { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); z-index: 20; }
/* ---------- Ficha al pasar el mouse por el retrato (como la ayuda de las habilidades) ---------- */
#charPanel { pointer-events: none; z-index: 20; }
#charPanel .st-x { display: none; }

/* ---------- Tienda de la cuenta: skins y alas ---------- */
#store .store-tabs { display: flex; gap: 6px; margin: 10px 0; }
#store .store-tabs button { flex: 1; padding: 8px; border: 0; border-radius: 10px; background: #45414f; color: #fff; font-weight: 800; cursor: pointer; }
#store .store-tabs button.on { background: var(--red); }
#store .store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 46vh; overflow-y: auto; }
#store .store-card { background: var(--navy2); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 4px; border: 2px solid transparent; }
#store .store-card.on { border-color: #ffd84d; }
#store .store-card canvas { width: 100%; height: auto; border-radius: 8px; background: radial-gradient(#7a736c, #3c3843); }
#store .store-card small { opacity: .75; font-size: 11px; line-height: 1.3; flex: 1; }
#store .store-card button { padding: 7px; border: 0; border-radius: 8px; font-weight: 800; cursor: pointer; color: #fff; }
#store .st-buy { background: #2fae4a; }
#store .st-eq { background: #3f7fe0; }
#store .st-off { background: #45414f; }
#store .store-msg { color: #ff8c7a; min-height: 16px; margin-top: 6px; font-size: 12px; }
#store .store-note { display: block; opacity: .6; font-size: 11px; }

/* =====================================================================================
   MENÚ PRINCIPAL, TIENDA, VENTANAS Y PANTALLAS DE PARTIDA (estilo de la referencia, adaptado)
   ===================================================================================== */
:root { --hd: 'Teko', 'Arial Narrow', Impact, sans-serif; --cyan: #19c3e6; --mag: #b23fd8; --ink: #14101e; }
#lobby, #select { display: none !important; }
#menu { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#menu > * { pointer-events: auto; }
body.in-game #menu, body.in-game #mnModal { display: none !important; }
body:not(.in-game) #btnSettings { left: auto; right: 18px; top: 18px; width: 42px; height: 42px; font-size: 22px; background: transparent; }
body:not(.in-game) #settings { left: auto; right: 18px; top: 66px; }

/* barra de arriba */
.mn-top { position: absolute; left: 0; right: 0; top: 0; height: 84px; display: flex; align-items: center; gap: 4vw; padding: 0 80px 0 36px; pointer-events: none; }
.mn-top > * { pointer-events: auto; }
.mn-logo { font: 700 46px/0.8 var(--hd); letter-spacing: 1px; color: #fff; font-style: italic; transform: skewX(-6deg);
  -webkit-text-stroke: 2px #1a1024; paint-order: stroke fill; text-shadow: 0 4px 0 #1a1024, 0 0 22px rgba(0,0,0,.35); }
.mn-logo span { display: block; font-size: .52em; color: #ffd84d; letter-spacing: 6px; -webkit-text-stroke: 1px #1a1024; }
.mn-nav { display: flex; gap: clamp(14px, 4vw, 70px); margin-left: auto; margin-right: auto; }
.mn-nav button { background: none; border: 0; cursor: pointer; font: 600 30px var(--hd); letter-spacing: 1.5px; color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.35); padding: 4px 2px; border-bottom: 3px solid transparent; transition: color .15s, border-color .15s; }
.mn-nav button:hover { color: #ffd84d; border-color: #ffd84d; }

/* noticias */
.mn-news { position: absolute; left: 14px; bottom: 54px; width: min(500px, 40vw); min-height: 158px; display: flex; gap: 14px; align-items: stretch;
  background: rgba(225,214,240,.9); color: #241c33; border-radius: 12px; padding: 14px 40px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.nw-img { flex: 0 0 150px; border-radius: 8px; display: grid; place-items: center; font-size: 64px;
  background: linear-gradient(135deg, #2b2833, #cc2340); box-shadow: inset 0 0 0 3px rgba(255,255,255,.15); }
.nw-txt { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.nw-txt b { font: 600 22px/1 var(--hd); letter-spacing: .5px; }
.nw-txt p { margin: 0; font-size: 13px; line-height: 1.35; font-weight: 600; }
.nw-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.nw-dots i { display: inline-block; width: 8px; height: 8px; border-radius: 4px; background: #9c90b0; margin-right: 6px; }
.nw-dots i.on { width: 22px; background: #241c33; }
.nw-go { background: none; border: 0; color: #c98a00; font: 600 20px var(--hd); cursor: pointer; }
.nw-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: #3b3248; color: #fff; font-size: 20px; line-height: 1; }
.nw-arrow.l { left: -6px; } .nw-arrow.r { right: -6px; }

/* panel para jugar */
.mn-play { position: absolute; right: 14px; bottom: 44px; width: min(330px, 34vw); background: rgba(236,226,245,.92); border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; gap: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25); color: #241c33; }
.mn-warn { background: #ff2a2a; color: #fff; font: 600 20px var(--hd); letter-spacing: .5px; padding: 6px 10px 3px; }
.mn-load { display: flex; border-bottom: 2px solid #c9bdd8; padding-bottom: 8px; }
.mn-cell { flex: 1; display: flex; gap: 8px; align-items: center; background: none; border: 0; text-align: left; color: #241c33; padding: 4px 6px; }
button.mn-cell { cursor: pointer; border-right: 2px solid #c9bdd8; border-radius: 0; }
button.mn-cell:hover { background: rgba(0,0,0,.05); }
.mn-cell small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px; opacity: .8; }
.mn-cell b { font: 600 22px/1 var(--hd); letter-spacing: .5px; }
#mnClsIcon { width: 40px; height: 40px; display: grid; place-items: center; font-size: 28px; background: #2b2833; border-radius: 6px; overflow: hidden; }
#mnClsIcon img.ico { width: 100%; height: 100%; }
#menu #name { width: 100%; font: 700 16px system-ui; padding: 10px 12px; border-radius: 8px; border: 2px solid #c9bdd8; background: #fff; color: #111; text-align: left; }
.mn-big { height: 84px; border: 0; border-radius: 4px; cursor: pointer; background: linear-gradient(#22d4f3, #0fa8cf); color: #12202a;
  font: 700 48px/1 var(--hd); letter-spacing: 1px; font-style: italic; box-shadow: 0 5px 0 #0a7593; padding-top: 8px; }
.mn-big { white-space: nowrap; }
.mn-big span { font-style: normal; }
.mn-big:hover { filter: brightness(1.08); } .mn-big:active { transform: translateY(3px); box-shadow: 0 2px 0 #0a7593; }
.mn-big:disabled { opacity: .6; cursor: wait; }
.mn-sec { height: 44px; border: 0; border-radius: 4px; cursor: pointer; background: #0f8fb0; color: #0b1a22; font: 600 26px/1 var(--hd); letter-spacing: .5px; padding-top: 4px; }
.mn-acc { display: flex; align-items: center; gap: 10px; border-top: 2px solid #c9bdd8; padding-top: 8px; min-height: 44px; }
.ac-badge { width: 36px; height: 40px; display: grid; place-items: center; font: 700 22px var(--hd); color: #fff; background: #f0a91e;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); padding-top: 3px; }
.ac-name { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ac-name b { font: 600 22px/1 var(--hd); }
.ac-name .xpbar { height: 5px; background: #c9bdd8; }
.mn-acc > button:not(.mn-login) { width: 40px; height: 40px; border: 0; border-left: 2px solid #c9bdd8; background: none; font-size: 20px; cursor: pointer; }
.mn-login { flex: 1; height: 40px; border: 0; border-radius: 4px; cursor: pointer; background: #2b2833; color: #fff; font: 600 22px var(--hd); padding-top: 3px; }
#menu #lobby-msg { margin: 0; min-height: 0; color: #c0152a; font-weight: 700; font-size: 13px; }
#menu #lobby-msg:empty { display: none; }
.mn-foot { position: absolute; right: 14px; bottom: 10px; display: flex; gap: 10px; align-items: center; background: rgba(236,226,245,.92); color: #241c33;
  border-radius: 8px; padding: 5px 12px; font: 700 13px system-ui; }
.mn-foot .dot { width: 10px; height: 10px; border-radius: 50%; background: #2fbf4a; }
.mn-foot i { opacity: .4; font-style: normal; }
.mn-foot button { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }

/* ventanas (cuenta, clasificación, personaje, controles) */
#mnModal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(10,6,16,.55); padding: 16px; }
.mn-box { width: min(440px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: #2a2a2e; border-radius: 4px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
#mnModal.wide .mn-box { width: min(940px, 100%); }
.mn-box-head { display: flex; justify-content: space-between; align-items: center; background: #1b1838; padding: 8px 12px 6px 16px; font: 600 24px var(--hd); letter-spacing: 1px; }
.mn-box-head button { background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; }
#mnModalBody { padding: 16px; overflow-y: auto; touch-action: pan-y; }
#mnModalBody input { width: 100%; font: 700 16px system-ui; border-radius: 6px; border: 0; padding: 12px; margin-bottom: 8px; background: #f2eef7; color: #111; outline: none; }
.mn-btn { width: 100%; height: 48px; border: 0; border-radius: 4px; cursor: pointer; background: linear-gradient(#22d4f3, #0fa8cf); color: #12202a; font: 600 28px var(--hd); padding-top: 4px; margin-top: 4px; }
.mn-btn.red { background: #cc2340; color: #fff; }
.ac-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.ac-tabs button { flex: 1; padding: 10px; border: 0; border-radius: 4px; background: #45414f; color: #fff; font: 600 20px var(--hd); cursor: pointer; }
.ac-tabs button.on { background: #f59a0b; }
.ac-msg { color: #ff8c7a; min-height: 18px; margin: 8px 0 0; font-weight: 700; }
.ac-note, .ac-xp { display: block; opacity: .7; font-size: 12px; }
.ac-prof { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.ac-prof b { display: block; font: 600 30px/1 var(--hd); }
.ac-prof small { opacity: .75; }
.ac-lv { width: 52px; height: 58px; display: grid; place-items: center; font: 700 30px var(--hd); background: #f0a91e; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); padding-top: 4px; }
.ac-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.ac-stats span { background: #36343c; border-radius: 4px; padding: 8px; font-size: 13px; display: flex; justify-content: space-between; }
.rk-table .rk-h, .rk-table .rk-r { display: grid; grid-template-columns: 40px 1fr 70px 70px; padding: 8px 10px; }
.rk-table .rk-h { font: 600 18px var(--hd); color: #ffd84d; }
.rk-table .rk-r { background: #36343c; margin-bottom: 4px; border-radius: 4px; font-weight: 700; }
.rk-table .rk-r.me { background: #4f3d17; color: #ffd84d; }
.rk-load { text-align: center; opacity: .8; }
.hp p { margin: 0 0 10px; line-height: 1.5; }
.hp .touch { opacity: .7; }
/* personaje (loadout) */
.lo { display: flex; min-height: 420px; margin: -16px; }
.lo-cats { flex: 0 0 300px; background: #333236; display: flex; flex-direction: column; }
.lo-cats button { text-align: left; padding: 14px 20px; border: 0; background: none; color: #fff; font: 600 24px var(--hd); letter-spacing: 1px; cursor: pointer; }
.lo-cats button.on { background: #f59a0b; }
.lo-list { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 70vh; }
.lo-row { display: flex; align-items: center; gap: 14px; text-align: left; padding: 10px 14px; border-radius: 4px; border: 2px solid transparent; background: #3c3b40; color: #fff; cursor: pointer; }
.lo-row:hover { background: #46454b; }
.lo-row.on { border-color: #bdbdc2; background: #48474d; }
.lo-ic { width: 76px; height: 64px; flex: 0 0 76px; display: grid; place-items: center; font-size: 40px; border-radius: 6px; overflow: hidden;
  background: radial-gradient(color-mix(in srgb, var(--cc, #888) 45%, #2b2833), #1f1d25); }
.lo-ic img.ico { width: 64px; height: 64px; }
.lo-cv { width: 76px; height: 64px; flex: 0 0 76px; border-radius: 6px; background: radial-gradient(#7a736c, #3c3843); }
.lo-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lo-txt b { font: 600 24px/1 var(--hd); letter-spacing: .5px; }
.lo-txt small { font-size: 12px; opacity: .8; }
.lo-txt em { font-style: normal; font-size: 11px; opacity: .6; }
.lo-tag { align-self: flex-start; font-size: 10px; font-weight: 800; background: #2a2a2e; padding: 3px 6px; border-radius: 3px; opacity: .8; }
.lo-radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #bdbdc2; flex: 0 0 24px; display: grid; place-items: center; }
.lo-row.on .lo-radio::after { content: '✓'; font-weight: 900; font-size: 14px; }
.lo-empty { text-align: center; opacity: .85; padding: 30px 10px; line-height: 1.6; }
.lo-empty .mn-btn { width: auto; padding: 4px 22px 0; }

/* tienda (página completa) */
#store { position: fixed; inset: 0; z-index: 28; margin: 0; padding: 0; border-radius: 0; background: #0f0d26; text-align: left; overflow-y: auto; touch-action: pan-y; }
.st-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: stretch; height: 52px; background: #0a0a14; }
.st-back { width: 52px; border: 0; background: #1d1d2b; color: #fff; font-size: 28px; cursor: pointer; }
.st-tab { border: 0; border-right: 1px solid #262640; background: none; color: #c9c9dd; font: 600 30px var(--hd); letter-spacing: 1px; padding: 6px 26px 0; cursor: pointer; }
.st-tab.on { color: #19c3e6; }
.st-gold { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 0 22px; font: 600 26px var(--hd); color: #ffd84d; border-left: 1px solid #262640; }
.st-login { margin: 16px 22px 0; padding: 12px 16px; background: #2b2152; border-radius: 6px; font-weight: 700; display: flex; align-items: center; gap: 12px; }
.st-login button { margin-left: auto; border: 0; border-radius: 4px; background: #19c3e6; color: #0b1a22; font: 600 22px var(--hd); padding: 4px 16px 0; cursor: pointer; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; padding: 22px; }
.st-card { position: relative; border-radius: 6px; overflow: hidden; background: linear-gradient(160deg, #5b62d6, #3a3fa6); border: 3px solid transparent; transition: transform .15s, border-color .15s; }
.st-card:hover { transform: translateY(-3px); border-color: #fff; }
.st-card.on { border-color: #ffd84d; }
.st-card canvas { display: block; width: 100%; height: auto; }
.st-price { position: absolute; top: 10px; right: 12px; font: 600 26px var(--hd); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.st-price.own { color: #ffd84d; font-size: 22px; }
.st-info { background: rgba(40,44,140,.85); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 2px; }
.st-info b { font: 600 28px/1 var(--hd); letter-spacing: .5px; }
.st-info small { font: 600 18px/1 var(--hd); opacity: .6; }
.st-info p { margin: 4px 0 8px; font-size: 12px; opacity: .85; min-height: 30px; }
.st-info button { height: 40px; border: 0; border-radius: 4px; font: 600 24px var(--hd); padding-top: 3px; cursor: pointer; color: #fff; }
.st-buy { background: #2fae4a; } .st-eq { background: #19a3c6; } .st-off { background: #45414f; }
.st-empty { grid-column: 1 / -1; text-align: center; opacity: .75; padding: 60px 0; font-size: 16px; }
.st-msg { color: #ff8c7a; font-weight: 700; padding: 0 22px 22px; }

/* ---------- En la partida: los 6 mejores, bajas/muertes, reloj y avisos de bajas ---------- */
#leaderboard, #killfeed, #scorebar, #zonename { display: none !important; }
#mRank { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 5px; pointer-events: none; }
#mRank .rk { display: flex; align-items: center; gap: 8px; width: 270px; height: 50px; padding: 0 8px 0 12px; background: rgba(20,18,28,.82);
  transform: skewX(-8deg); border-left: 4px solid transparent; }
#mRank .rk > * { transform: skewX(8deg); }
#mRank .rk.me { border-left-color: #ffd84d; }
#mRank .n { font: 600 30px/1 var(--hd); color: #fff; width: 30px; padding-top: 4px; }
#mRank .nm { flex: 1; position: relative; min-width: 0; padding-top: 4px; }
#mRank .nm b { font: 600 26px/1 var(--hd); font-style: italic; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 150px; vertical-align: bottom; }
#mRank .rk.me .nm b { color: #ffd84d; }
#mRank .nm em { font-style: normal; color: #fff; margin-left: 6px; font-size: 16px; }
#mRank .nm i { position: absolute; left: 0; bottom: 4px; height: 3px; background: #46d160; border-radius: 2px; }
#mRank .nm small { position: absolute; left: -34px; bottom: 1px; font-size: 9px; color: #fff; }
#mRank .ic { width: 40px; height: 40px; display: grid; place-items: center; font-size: 26px; }
#mRank .ic img.ico { width: 40px; height: 40px; border-radius: 6px; }
#mKD { position: absolute; left: 10px; top: 340px; display: flex; gap: 6px; pointer-events: none; }
#mKD span { display: flex; align-items: center; gap: 22px; padding: 4px 14px; font-size: 22px; background: rgba(20,18,28,.82); }
#mKD b { font: 600 32px/1 var(--hd); padding-top: 4px; }
#mKD .d { background: rgba(204,35,64,.9); }
#mTimer { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; }
#mTimer b { display: block; font: 600 56px/1 var(--hd); letter-spacing: 2px; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.5); padding: 4px 26px 0;
  background: linear-gradient(90deg, transparent, rgba(20,18,28,.6) 20%, rgba(20,18,28,.6) 80%, transparent); }
#mTimer b.low { color: #ff5a5a; }
#mTimer small { display: inline-block; margin-top: 4px; padding: 3px 18px 1px; font: 600 18px var(--hd); letter-spacing: 1px; color: #fff; background: rgba(20,18,28,.7);
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%); }
#mTimer small i { font-style: normal; color: #ffd84d; }
#mKills { position: absolute; top: 10px; right: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; pointer-events: none; }
#mKills .kb { display: flex; align-items: stretch; height: 40px; font: 600 24px/1 var(--hd); transition: opacity .4s, transform .4s; animation: kbIn .25s ease-out; }
#mKills .kb.out { opacity: 0; transform: translateX(30px); }
#mKills .kk { display: flex; align-items: center; gap: 8px; padding: 4px 14px 0 24px; background: #ff2a3a; clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%); }
#mKills .kb.mine .kk { background: #f0a91e; color: #1a1200; }
#mKills .sw { display: grid; place-items: center; width: 34px; background: #ff2a3a; color: #fff; font-size: 20px; }
#mKills .kb.mine .sw { background: #f0a91e; color: #1a1200; }
#mKills .kv { display: flex; align-items: center; gap: 8px; padding: 4px 14px 0; background: rgba(20,18,28,.88); color: #fff; }
#mKills img.ico { width: 30px; height: 30px; border-radius: 4px; }
@keyframes kbIn { from { opacity: 0; transform: translateX(40px); } }
/* que no choquen con lo de antes */
#hud #roominfo { top: auto; }
body.is-touch #mRank .rk { width: 190px; height: 36px; } body.is-touch #mRank .nm b { font-size: 19px; max-width: 100px; }
body.is-touch #mKD { top: 250px; } body.is-touch #mTimer b { font-size: 38px; }
body.is-touch #mKills .kb { height: 30px; font-size: 18px; }

/* tabla del marcador (Tab / Esc) */
#tabBoard { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,6,16,.35); pointer-events: none; z-index: 12; }
#tabBoard.pinned { pointer-events: auto; }
.tb-box { width: min(860px, 94vw); min-height: 60vh; display: flex; flex-direction: column; background: linear-gradient(#1c0b26, #0d0612); padding: 30px 34px 18px; }
.tb-head, .tb-row { display: grid; grid-template-columns: 1fr 90px 90px 80px 90px 80px; align-items: center; padding: 0 14px; }
.tb-head { font: 600 20px var(--hd); color: #ffd84d; letter-spacing: 1px; margin-bottom: 6px; }
.tb-head span:first-child { color: #fff; }
.tb-row { height: 46px; margin-bottom: 4px; background: rgba(255,255,255,.08); }
.tb-row.me { background: rgba(255,216,77,.18); }
.tb-row .pl { display: flex; align-items: center; gap: 10px; font: 600 24px var(--hd); }
.tb-row .pl img.ico { width: 34px; height: 34px; border-radius: 4px; }
.tb-row .pl small { font: 700 10px system-ui; background: #45414f; padding: 2px 5px; border-radius: 3px; }
.tb-row .y { font: 600 26px var(--hd); color: #ffd84d; }
.tb-row .st { color: #fff; letter-spacing: 2px; }
.tb-foot { margin-top: auto; padding-top: 16px; display: flex; gap: 10px; align-items: center; }
.tb-foot button { height: 46px; border: 0; padding: 4px 18px 0; font: 600 28px var(--hd); color: #fff; cursor: pointer; }
.tb-quit { background: #e0273a; } .tb-set { background: #4a4a52; } .tb-go { margin-left: auto; background: #3fae1c; }
.tb-tip { opacity: .6; font-size: 12px; }
#tabBoard:not(.pinned) .tb-foot button { display: none; }

/* resultados al terminar la partida */
#endScreen { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 30%, rgba(120,20,30,.55), rgba(40,8,14,.92)); padding-bottom: 20px; overflow-y: auto; }
#endScreen.win { background: radial-gradient(ellipse at 50% 30%, rgba(20,90,140,.55), rgba(8,20,40,.94)); }
.es-top { display: flex; align-items: center; height: 64px; background: linear-gradient(90deg, #ff5a5a, #e84a5a); flex: 0 0 64px; }
#endScreen.win .es-top { background: linear-gradient(90deg, #22b8e6, #2ad08c); }
.es-title { margin-left: 10vw; padding: 8px 40px 0; height: 100%; display: flex; align-items: center; font: 700 62px/1 var(--hd); font-style: italic; color: #ffd84d;
  background: #e8363c; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); text-shadow: 0 3px 0 rgba(0,0,0,.3); }
#endScreen.win .es-title { background: #1590c0; }
.es-map { margin-left: 22px; display: flex; flex-direction: column; font-style: italic; }
.es-map b { font: 600 28px/1 var(--hd); } .es-map small { font: 600 18px/1 var(--hd); opacity: .85; }
.es-ready { margin-left: auto; font: 600 44px/1 var(--hd); font-style: italic; padding-top: 6px; }
.es-ready b { color: #ffd84d; }
.es-x { width: 56px; height: 56px; margin: 0 8vw 0 20px; border: 0; background: #e0273a; color: #fff; font-size: 30px; cursor: pointer; }
.es-table { width: min(1260px, 94vw); margin: 26px auto 0; }
.es-head, .es-row { display: grid; grid-template-columns: 46px minmax(220px, 1fr) 60px 20px 60px 20px 60px 90px 90px 130px 110px; align-items: center; text-align: center; }
.es-head { font: 600 24px var(--hd); font-style: italic; color: #fff; margin-bottom: 8px; }
.es-head .rw { color: #3fdc3f; } .es-head .sc, .es-row .sc { color: #ffd84d; }
.es-row { height: 54px; margin-bottom: 4px; font: 600 28px/1 var(--hd); font-style: italic; }
.es-row > span:not(.pos) { background: rgba(40,56,80,.85); height: 100%; display: grid; place-items: center; padding-top: 4px; }
.es-row .pos { font-size: 34px; color: #fff; }
.es-row .who { display: flex !important; justify-content: flex-start; gap: 12px; padding-left: 10px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%); }
.es-row .who img.ico { width: 40px; height: 40px; border-radius: 4px; }
.es-row .who em { font: 800 12px system-ui; font-style: normal; background: #f0a91e; color: #1a1200; padding: 3px 6px; }
.es-row .who small { font: 700 10px system-ui; background: #45414f; padding: 2px 5px; }
.es-row .tier { font-style: normal; font-size: 13px; background: #ff3b4a; padding: 6px 10px; margin-left: -10px; height: 100%; display: grid; place-items: center; }
.es-row.first .tier { background: #2aa3e6; }
.es-row.me > span:not(.pos) { background: rgba(120,90,20,.85); }
.es-row .rw { color: #3fdc3f; font-size: 24px; }
.es-bottom { width: min(1260px, 94vw); margin: 24px auto 0; display: flex; gap: 16px; }
.es-next { flex: 1; background: rgba(0,0,0,.35); padding: 16px 20px; }
.es-next h3 { margin: 0 0 6px; font: 600 40px/1 var(--hd); }
.es-next p { margin: 0; line-height: 1.5; opacity: .9; }
.es-acc { flex: 0 0 360px; background: rgba(40,60,140,.35); padding: 16px 20px; }
.es-acc p { margin: 0 0 10px; font: 600 24px/1.1 var(--hd); }
.es-acc .pts { font-size: 20px; opacity: .85; }
.es-acc b { color: #ffd84d; }
.es-acc button { border: 0; background: #1d4ee6; color: #fff; font: 600 28px var(--hd); padding: 6px 20px 2px; cursor: pointer; }
@media (max-width: 900px) {
  .mn-top { height: 60px; padding: 0 60px 0 14px; } .mn-logo { font-size: 30px; } .mn-nav button { font-size: 20px; }
  .mn-news { display: none; } .mn-play { width: min(320px, 60vw); } .mn-big { height: 60px; font-size: 36px; }
  .es-head, .es-row { grid-template-columns: 30px minmax(140px, 1fr) 36px 10px 36px 10px 36px 0 0 80px 70px; font-size: 20px; }
  .es-head > :nth-child(8), .es-head > :nth-child(9), .es-row > :nth-child(8), .es-row > :nth-child(9) { display: none !important; }
  .es-bottom { flex-direction: column; } .es-acc { flex: auto; } .es-title { font-size: 40px; margin-left: 2vw; } .es-ready { font-size: 28px; }
  .lo-cats { flex: 0 0 140px; } .lo-cats button { font-size: 18px; padding: 10px; }
}

/* columna izquierda de la partida: los 6 mejores y debajo bajas/muertes */
#mLeft { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
#mLeft #mRank, #mLeft #mKD { position: static; }
body.in-game #btnSettings { left: 296px; top: 10px; }
body.in-game.is-touch #btnSettings { left: 210px; }
body.in-game #settings { left: 296px; top: 54px; }

/* ---------- Ranking de la partida: del 1.º al 6.º, de mayor a menor tamaño ---------- */
#mRank .rk.r1 { width: 300px; height: 60px; } #mRank .rk.r1 .nm b { font-size: 32px; } #mRank .rk.r1 .n { font-size: 36px; }
#mRank .rk.r2 { width: 285px; height: 54px; } #mRank .rk.r2 .nm b { font-size: 28px; }
#mRank .rk.r3 { width: 270px; height: 49px; } #mRank .rk.r3 .nm b { font-size: 26px; }
#mRank .rk.r4 { width: 255px; height: 45px; } #mRank .rk.r4 .nm b { font-size: 24px; } #mRank .rk.r4 .n { font-size: 26px; }
#mRank .rk.r5 { width: 242px; height: 42px; } #mRank .rk.r5 .nm b { font-size: 22px; } #mRank .rk.r5 .n { font-size: 24px; }
#mRank .rk.r6 { width: 230px; height: 39px; } #mRank .rk.r6 .nm b { font-size: 21px; } #mRank .rk.r6 .n { font-size: 22px; }
#mRank .rk.r4 .ic img.ico, #mRank .rk.r5 .ic img.ico, #mRank .rk.r6 .ic img.ico { width: 32px; height: 32px; }
body.in-game #btnSettings { left: 326px; }
body.is-touch #mRank .rk { width: auto !important; min-width: 170px; height: 34px !important; } body.is-touch #mRank .nm b { font-size: 18px !important; }

/* ---------- REGLA: todas las ventanas tienen el MISMO tamaño (ancho y alto) ---------- */
:root { --mw: min(960px, 94vw); --mh: min(620px, 86vh); }
.mn-box, #mnModal.wide .mn-box { width: var(--mw); height: var(--mh); max-height: none; }
#mnModalBody { flex: 1; min-height: 0; }
.ac-form, .ac-prof, .ac-prof ~ * { max-width: 460px; margin-left: auto; margin-right: auto; }
.ac-form { padding-top: 30px; }
.ac-prof { margin-top: 30px; }
.lo { height: calc(100% + 32px); min-height: 0; }
.lo-list { max-height: none; }
.hp, .rk-table { max-width: 760px; margin: 10px auto 0; }
.hp p { font-size: 17px; }
#tabBoard .tb-box { width: var(--mw); height: var(--mh); min-height: 0; }
.tb-rows { flex: 1; min-height: 0; overflow-y: auto; }
#statsPanel, #shop, #settings { position: fixed !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important;
  transform: translate(-50%, -50%) !important; width: var(--mw) !important; height: var(--mh) !important; max-height: none !important; overflow-y: auto; z-index: 30; }
#statsPanel .st-row { padding: 12px 0; } #statsPanel .st-txt b { font-size: 16px; }
#shop .shop-item { margin-top: 16px; }

/* ---------- Servidores: región y mapa ---------- */
.sv-region { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.sv-region b { font: 600 22px/1 var(--hd); }
.sv-region select { flex: 1; height: 44px; border-radius: 4px; border: 0; padding: 0 12px; font: 600 17px system-ui; background: #f2eef7; color: #111; }
.sv-map { display: flex; align-items: center; gap: 16px; padding: 12px; border: 2px solid transparent; border-radius: 4px; background: #3c3b40; color: #fff; text-align: left; cursor: pointer; }
.sv-map:hover { background: #46454b; border-color: #f59a0b; }
.sv-map canvas { width: 120px; height: 90px; border-radius: 4px; flex: 0 0 120px; }
.sv-map > span { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sv-map b { font: 600 28px/1 var(--hd); letter-spacing: .5px; }
.sv-map small { font-size: 13px; opacity: .85; } .sv-map em { font-style: normal; font-size: 12px; opacity: .6; }
.sv-map > span.sv-go { flex: 0 0 auto; display: block; background: #19c3e6; color: #0b1a22; font: 600 26px var(--hd); padding: 6px 18px 2px; border-radius: 4px; }
.sv-map > span.sv-ic { width: 120px; height: 90px; flex: 0 0 120px; display: grid; place-items: center; font-size: 48px; background: #2b2833; border-radius: 4px; }
.mn-big b, .mn-sec b { font: inherit; }

/* =====================================================================================
   TEMA DE LA ARENA para el menú, ventanas, tienda y páginas (azul marino + carmesí + crema, como el mapa)
   ===================================================================================== */
/* links de arriba en el centro de la pantalla */
.mn-nav { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
.mn-nav button { color: var(--cream); }
.mn-nav button:hover { color: #ffd84d; border-color: var(--red); }
/* paneles del menú */
.mn-news, .mn-play, .mn-foot { background: rgba(43,40,51,.94); color: var(--cream); box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.mn-news, .mn-play { border-radius: 14px; }
.nw-txt p { color: #d9d2c6; }
.nw-dots i { background: #5c5868; } .nw-dots i.on { background: var(--red); }
.nw-go { color: #ffd84d; }
.nw-arrow { background: var(--red); }
.nw-img { background: linear-gradient(135deg, #1d1b23, #cc2340); }
.mn-load { border-bottom-color: #45414f; }
.mn-cell { color: var(--cream); }
button.mn-cell { border-right-color: #45414f; } button.mn-cell:hover { background: rgba(255,255,255,.05); }
#mnClsIcon { background: var(--navy2); }
#menu #name { background: var(--navy2); border-color: #45414f; color: var(--cream); }
.mn-big { background: linear-gradient(#e33a57, #b81c38); color: #fff; box-shadow: 0 5px 0 #7a0f22; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.mn-big:active { box-shadow: 0 2px 0 #7a0f22; }
.mn-sec { background: #45414f; color: var(--cream); }
.mn-acc { border-top-color: #45414f; }
.ac-name .xpbar { background: var(--navy2); }
.mn-acc > button:not(.mn-login) { border-left-color: #45414f; color: var(--cream); }
.mn-login { background: var(--red); }
#menu #lobby-msg { color: #ff8c7a; }
/* ventanas */
.mn-box { background: var(--navy); border-radius: 14px; }
.mn-box-head { background: var(--navy2); border-bottom: 3px solid var(--red); }
.lo-cats { background: var(--navy2); }
.lo-cats button.on { background: var(--red); }
.lo-row { background: #36333f; } .lo-row:hover { background: #403c4a; } .lo-row.on { border-color: #ffd84d; background: #403c4a; }
.lo-tag { background: var(--navy2); }
.mn-btn { background: linear-gradient(#e33a57, #b81c38); color: #fff; }
.ac-tabs button.on { background: var(--red); }
#mnModalBody input, .sv-region select { background: var(--cream); }
.sv-map { background: #36333f; } .sv-map:hover { background: #403c4a; border-color: var(--red); }
.sv-map > span.sv-go { background: var(--red); color: #fff; }
/* tienda */
#store { background: var(--navy2); }
.st-bar { background: #141218; }
.st-back { background: var(--navy); color: var(--cream); }
.st-tab { color: #8d879a; } .st-tab.on { color: var(--cream); box-shadow: inset 0 -3px 0 var(--red); }
.st-gold { border-left-color: #2b2833; }
.st-card { background: linear-gradient(160deg, #3a3647, #2b2833); } .st-card:hover { border-color: var(--red); }
.st-info { background: rgba(20,18,26,.88); }
.st-buy { background: var(--red); } .st-eq { background: #f0a91e; color: #1a1200 !important; } .st-off { background: #45414f; }
.st-login { background: var(--navy); } .st-login button { background: var(--red); color: #fff; }
.st-card canvas { background: radial-gradient(ellipse at 50% 70%, #7c756e, #55504b); }
/* tabla del marcador */
.tb-box { background: linear-gradient(#2b2833, #1d1b23); border-top: 4px solid var(--red); }
.tb-row { background: rgba(255,255,255,.06); }

/* ---------- Páginas completas: cuenta / perfil y clasificación ---------- */
#page { position: fixed; inset: 0; z-index: 28; background: var(--navy2); overflow-y: auto; touch-action: pan-y; color: var(--cream); }
.pg-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 4px; height: 56px; background: #141218; }
.pg-back { width: 56px; height: 100%; border: 0; background: var(--navy); color: var(--cream); font-size: 28px; cursor: pointer; }
.pg-title { font: 600 36px/1 var(--hd); padding: 8px 18px 0; color: #fff; letter-spacing: 1px; }
.pg-sep { width: 2px; height: 28px; background: #45414f; margin-right: 8px; }
.pg-tab { border: 0; background: none; color: #8d879a; font: 600 28px var(--hd); padding: 8px 14px 0; height: 100%; cursor: pointer; }
.pg-tab.on { color: var(--cream); box-shadow: inset 0 -3px 0 var(--red); }
.pg-right { margin-left: auto; padding-right: 14px; }
.pg-btn { border: 2px solid var(--cream); background: none; color: var(--cream); font: 600 22px var(--hd); padding: 5px 16px 1px; border-radius: 6px; cursor: pointer; }
.pg-btn:hover { background: var(--red); border-color: var(--red); }
.pg-body { width: min(1760px, 96vw); margin: 22px auto 40px; }
.pf-banner { position: relative; display: flex; align-items: center; gap: 28px; min-height: 140px; padding: 18px 26px; border-radius: 8px 8px 0 0; overflow: hidden;
  background: linear-gradient(90deg, #cc2340, #7a1530 55%, #2b2833); }
.pf-lv { width: 68px; height: 76px; flex: 0 0 68px; display: grid; place-content: center; text-align: center; background: #f0a91e; color: #fff;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.pf-lv b { font: 700 34px/0.9 var(--hd); padding-top: 6px; } .pf-lv small { font: 800 10px system-ui; }
.pf-name b { display: block; font: 600 46px/1 var(--hd); color: #fff; }
.pf-xp { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.pf-xp .xpbar { width: 220px; height: 4px; background: rgba(255,255,255,.25); } .pf-xp small { font: 600 22px var(--hd); color: #fff; }
.pf-chips { display: flex; gap: 16px; margin-left: 4vw; flex-wrap: wrap; }
.pf-chips span { display: flex; justify-content: space-between; gap: 24px; min-width: 170px; padding: 10px 16px 6px; font: 600 22px var(--hd); color: #fff;
  background: rgba(20,18,26,.7); border-left: 4px solid #ffd84d; }
.pf-pic { margin-left: auto; width: 150px; height: auto; }
.pf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; background: var(--navy); padding: 20px 26px 22px; }
.pf-cols h3, .pf-bh { font: 600 28px var(--hd); margin: 0 0 12px; letter-spacing: .5px; }
.pf-row { display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 5px 16px 0; margin-bottom: 10px; border-radius: 4px; background: #45414f;
  font: 600 22px var(--hd); letter-spacing: .5px; }
.pf-row b { font-weight: 600; color: #ffd84d; }
.pf-bh { background: var(--navy); padding: 0 26px; margin: 0; }
.pf-badges { display: flex; flex-wrap: wrap; gap: 12px; background: var(--navy); padding: 10px 26px 26px; border-radius: 0 0 8px 8px; }
.pf-badges span { display: flex; align-items: center; gap: 8px; padding: 8px 14px 4px; border-radius: 6px; background: #36333f; font: 600 20px var(--hd); }
.pf-badges i { font-style: normal; font-size: 22px; }
.pf-badges small { opacity: .7; }
.lb { background: var(--navy); border-radius: 8px; overflow: hidden; }
.lb-h, .lb-r { display: grid; grid-template-columns: 70px 1.7fr 1fr 1fr 1.3fr 1fr 140px; align-items: center; padding: 0 22px; }
.lb-h { height: 54px; font: 600 26px var(--hd); background: #241f2c; padding-top: 4px; }
.lb-r { height: 52px; font: 600 23px var(--hd); padding-top: 4px; }
.lb-r:nth-child(odd) { background: rgba(255,255,255,.04); }
.lb-r.me { color: #ffd84d; }
.lb-r small { font: 600 13px system-ui; opacity: .55; }
.lb-pf { border: 0; border-radius: 4px; background: #3fae1c; color: #fff; font: 600 20px var(--hd); padding: 5px 12px 1px; cursor: pointer; }
.lb-pf:hover { filter: brightness(1.1); }
@media (max-width: 900px) {
  .pf-banner { flex-wrap: wrap; } .pf-chips { margin-left: 0; } .pf-pic { display: none; } .pf-cols { grid-template-columns: 1fr; }
  .lb-h, .lb-r { grid-template-columns: 34px 1.5fr 0.8fr 0.8fr 0.9fr 0.9fr 90px; padding: 0 8px; font-size: 18px; }
  .pg-title { font-size: 26px; } .pg-tab { font-size: 20px; }
}

/* ---------- Ranking de la partida: los nombres se ven completos (la fila crece con el nombre) ---------- */
#mRank .rk { width: auto !important; padding-right: 10px; }
#mRank .rk.r1 { min-width: 300px; } #mRank .rk.r2 { min-width: 285px; } #mRank .rk.r3 { min-width: 270px; }
#mRank .rk.r4 { min-width: 255px; } #mRank .rk.r5 { min-width: 242px; } #mRank .rk.r6 { min-width: 230px; }
#mRank .nm { flex: 1 0 auto; }
#mRank .nm b { max-width: none !important; overflow: visible; text-overflow: clip; padding-right: 4px; }
#mRank .ic { margin-left: 8px; }
body.in-game #btnSettings { left: auto; right: auto; top: 10px; left: 10px; transform: translateY(0); }
#hud #mLeft { top: 52px; }

/* ---------- Ventanas de la partida (puntos P, tienda de pociones y ajustes): angostas y del mismo tamaño ---------- */
#statsPanel, #shop, #settings { width: min(460px, 92vw) !important; height: min(560px, 84vh) !important; }
#shop .shop-item { margin-top: 12px; }

/* ---------- Ranking de la partida: escalera, del 1.º (más ancho) al 6.º (más angosto) ---------- */
#mRank .rk.r1 { width: 330px !important; } #mRank .rk.r2 { width: 305px !important; } #mRank .rk.r3 { width: 282px !important; }
#mRank .rk.r4 { width: 262px !important; } #mRank .rk.r5 { width: 244px !important; } #mRank .rk.r6 { width: 228px !important; }
#mRank .nm { flex: 1 1 auto; min-width: 0; }
#mRank .nm b { white-space: nowrap; }
body.is-touch #mRank .rk.r1 { width: 200px !important; } body.is-touch #mRank .rk.r2 { width: 188px !important; } body.is-touch #mRank .rk.r3 { width: 176px !important; }
body.is-touch #mRank .rk.r4 { width: 166px !important; } body.is-touch #mRank .rk.r5 { width: 158px !important; } body.is-touch #mRank .rk.r6 { width: 150px !important; }
#vcursor { pointer-events: none; }

/* ---------- Ranked: elegir equipo ---------- */
#teamPick { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(ellipse at center, rgba(43,40,51,.85), rgba(15,12,20,.96)); color: var(--cream); padding: 20px; }
#teamPick h2 { margin: 0; font: 600 56px/1 var(--hd); letter-spacing: 2px; }
#teamPick p { margin: 0 0 14px; opacity: .8; text-align: center; }
#teamPick .tp-row { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
#teamPick .tp-team { width: min(340px, 42vw); min-height: 300px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px; border: 4px solid transparent;
  border-radius: 14px; color: #fff; cursor: pointer; transition: transform .15s, border-color .15s; }
#teamPick .tp-team.red { background: linear-gradient(160deg, #e2334a, #7a1020); }
#teamPick .tp-team.blue { background: linear-gradient(160deg, #3f8cff, #13357a); }
#teamPick .tp-team:hover { transform: translateY(-4px); border-color: #ffd84d; }
#teamPick .tp-team b { font: 600 40px/1 var(--hd); letter-spacing: 1px; }
#teamPick .tp-team span { font-weight: 800; opacity: .9; }
#teamPick .tp-team ul { list-style: none; margin: 6px 0; padding: 0; font-size: 14px; opacity: .9; flex: 1; }
#teamPick .tp-team em { font: 600 28px var(--hd); font-style: normal; background: rgba(0,0,0,.25); padding: 6px 22px 2px; border-radius: 6px; }
#teamPick.wait .tp-team { pointer-events: none; opacity: .6; }
/* equipos en el ranking, el marcador y los resultados */
#mRank .rk.team-red { border-left-color: #e2334a !important; } #mRank .rk.team-blue { border-left-color: #3f8cff !important; }
#mRank .rk.team-red .n, #mRank .rk.team-red .nm b { color: #ff8a98; } #mRank .rk.team-blue .n, #mRank .rk.team-blue .nm b { color: #8fbcff; }
#mRank .rk.team-red.me .nm b, #mRank .rk.team-blue.me .nm b { color: #ffd84d; }
#mTimer .tsc { display: inline-flex; gap: 10px; align-items: center; margin-top: 4px; font: 600 26px/1 var(--hd); }
#mTimer .tsc .r { background: #e2334a; padding: 4px 12px 0; } #mTimer .tsc .b { background: #3f8cff; padding: 4px 12px 0; }
.tb-row.team-red { box-shadow: inset 5px 0 0 #e2334a; } .tb-row.team-blue { box-shadow: inset 5px 0 0 #3f8cff; }
/* ---------- Marcador estilo MOBA: nivel, habilidades con su nivel, objetos, vida, K/D/A ---------- */
#tabBoard .tb-box { width: min(1180px, 96vw); }
.tb-head, .tb-row { grid-template-columns: minmax(150px, 1.2fr) 176px 176px 74px 84px 70px; gap: 6px; }
.tb-head { font-size: 16px; }
.tb-row { height: 50px; }
.tb-row .pl { font-size: 20px; gap: 8px; min-width: 0; }
.tb-row .pl b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-row .hic { position: relative; flex: none; font-style: normal; }
.tb-row .hic .mlv { position: absolute; right: -6px; bottom: -5px; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 9px; background: #1b1d27; border: 2px solid #ffd84d; color: #ffd84d; font: 800 11px/14px system-ui, sans-serif; font-style: normal; text-align: center; }
.tb-row .sks, .tb-row .its { display: flex; gap: 6px; }
.tb-row .sk, .tb-row .it { position: relative; width: 36px; height: 36px; border-radius: 6px; overflow: hidden; background: #14161f; border: 1px solid #3a3f55; font-style: normal; display: grid; place-items: center; font-size: 20px; }
.tb-row .sk img, .tb-row .it img { width: 100%; height: 100%; object-fit: cover; }
.tb-row .sk em, .tb-row .it em { position: absolute; right: 1px; bottom: 0; padding: 0 3px; border-radius: 4px; background: rgba(0,0,0,.8); color: #ffd84d; font: 800 12px/15px system-ui, sans-serif; font-style: normal; }
.tb-row .sk.off, .tb-row .it.off { filter: grayscale(1) brightness(.45); }
.tb-row .hp { font: 600 20px var(--hd); color: #ff8f9c; }
.tb-row .kda { font: 600 22px var(--hd); color: #fff; }
/* Ranked: rojo a la izquierda, azul a la derecha */
.tb-box.ranked { width: min(1500px, 98vw) !important; }
.tb-teams { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tb-team { display: flex; flex-direction: column; min-height: 0; }
.tb-tname { font: 600 22px var(--hd); letter-spacing: 1px; padding: 0 0 6px 4px; }
.tb-team.red .tb-tname { color: #ff6b7d; } .tb-team.blue .tb-tname { color: #7fb0ff; }
.tb-box.ranked .tb-head, .tb-box.ranked .tb-row { grid-template-columns: minmax(110px, 1fr) 128px 128px 54px 66px 52px; gap: 4px; padding: 0 8px; }
.tb-box.ranked .tb-row .sk, .tb-box.ranked .tb-row .it { width: 28px; height: 28px; font-size: 15px; }
.tb-box.ranked .tb-row .sks, .tb-box.ranked .tb-row .its { gap: 4px; }
.tb-box.ranked .tb-row .pl { font-size: 17px; }
.tb-box.ranked .tb-row .hp, .tb-box.ranked .tb-row .kda, .tb-box.ranked .tb-row .y { font-size: 18px; }
.tb-box.ranked .tb-head { font-size: 13px; }
.es-row.team-red .who { box-shadow: inset 6px 0 0 #e2334a; } .es-row.team-blue .who { box-shadow: inset 6px 0 0 #3f8cff; }
#endScreen.draw .es-top { background: linear-gradient(90deg, #6b6676, #4a4652); } #endScreen.draw .es-title { background: #45414f; }

.lo-group { margin: 8px 2px 0; font: 600 22px var(--hd); letter-spacing: 1px; color: #ffd84d; border-bottom: 2px solid #45414f; padding-bottom: 2px; }
.lo-group:first-child { margin-top: 0; }

#skilltip .tt-pts { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; padding: 5px 7px; border-radius: 6px; background: rgba(255,216,77,0.1); border-left: 3px solid #ffd84d; }
#skilltip .tt-pts span { font-size: 12px; color: #ffe9a0; font-weight: 600; }

.skill .slv { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); z-index: 3; min-width: 20px; height: 20px; padding: 0 4px;
  border-radius: 10px; background: #ffd84d; color: #1a1200; border: 2px solid var(--navy); font: 900 11px/16px system-ui, sans-serif; font-style: normal; text-align: center; pointer-events: none; }
.skill .slv.max { background: #ff3b3b; color: #fff; }
#btnStats { display: none !important; }
#shop .shop-sub { margin: 10px 4px 4px; font: 600 14px var(--hd, sans-serif); letter-spacing: 1px; color: #ffd84d; }
#shop .shop-item.up .shop-icon { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; font-size: 30px; border-radius: 8px; overflow: hidden; }
#shop .shop-item.up .shop-icon img { width: 48px; height: 48px; object-fit: cover; display: block; }
/* nivel de habilidad: el recuadro deja salir el circulito de abajo (lo de adentro sigue redondeado) */
#hudframe .skill.has-lv { overflow: visible; }
#hudframe .skill.has-lv .sicon { border-radius: 9px; overflow: hidden; }
#hudframe .skill.has-lv .cdov { border-radius: 0 0 9px 9px; }
#hudframe .skill .slv { bottom: -9px; }

/* inventario de objetos (al lado derecho del marco de habilidades) */
#invbox { display: grid; grid-template-columns: repeat(2, 40px); gap: 5px; padding: 8px; background: var(--navy); border-radius: 14px; box-shadow: 0 5px 0 rgba(0,0,0,.25); align-self: flex-end; pointer-events: auto; }
#invbox .inv { position: relative; width: 40px; height: 40px; border-radius: 9px; background: var(--navy2); border: 2px solid #45414f; display: grid; place-items: center; font-size: 22px; cursor: help; }
#invbox .inv.empty { opacity: .45; }
#invbox .inv span img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; display: block; }
#invbox .inv b { position: absolute; right: -6px; bottom: -6px; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 9px; background: #ffd84d; color: #1a1200; border: 2px solid var(--navy); font: 900 10px/14px system-ui, sans-serif; text-align: center; }
#portrait { pointer-events: auto; cursor: help; }
#skilltip .tt-st { display: grid; grid-template-columns: 1fr auto 44px; gap: 8px; font-size: 13px; padding: 2px 0; }
#skilltip .tt-st b { color: #ffe9a0; }
#skilltip .tt-st em { color: #9aa0b8; font-style: normal; font-size: 11px; text-align: right; }
#shop .shop-n { font-style: normal; font-size: 12px; color: #ffd84d; margin-left: 4px; }

/* Héroes: grilla de cuadritos con el retrato y el nombre abajo (como LoL) */
.hs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px 10px; padding: 4px; } /* (sin barra propia: solo la de la ventana) */
.hs-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 4px 12px; }
.hs-tabs button { padding: 5px 12px; border: 0; border-radius: 4px; background: #2e2b38; color: #cfc9bb; font: 600 14px var(--hd, sans-serif); letter-spacing: .5px; cursor: pointer; }
.hs-tabs button:hover { background: #3a3646; }
.hs-tabs button.on { background: #ffd84d; color: #1a1200; }
.hs-group { grid-column: 1 / -1; margin: 6px 2px 0; font: 600 20px var(--hd); letter-spacing: 1px; color: #ffd84d; border-bottom: 2px solid #45414f; }
.hs-card { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; background: none; border: 0; cursor: pointer; color: #e9e4d8; }
.hs-pic { width: 84px; height: 84px; display: grid; place-items: center; font-size: 42px; background: #1c1a24; border: 3px solid #45414f; border-radius: 6px; overflow: hidden; transition: transform .12s, border-color .12s; }
.hs-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-card b { font: 600 13px/1.1 system-ui, sans-serif; text-align: center; max-width: 92px; }
.hs-card:hover .hs-pic { transform: translateY(-2px); border-color: var(--cc); }
.hs-card.on .hs-pic { border-color: #ffd84d; box-shadow: 0 0 0 3px rgba(255,216,77,.35); }
.hs-card.on b { color: #ffd84d; }

/* tienda estilo MOBA: cuadritos */
#shop .sh-sec { margin: 10px 2px 6px; font: 600 14px var(--hd, sans-serif); letter-spacing: 1px; color: #ffd84d; }
/* hechizos: elegir casilla D o F y precio de la próxima compra */
#shop .sh-sp { display: flex; align-items: center; gap: 6px; }
#shop .sh-sp span { font: 600 11px system-ui, sans-serif; color: #aab; letter-spacing: 0; margin-left: 6px; }
#shop .sh-sp em { margin-left: auto; font: 700 12px system-ui, sans-serif; font-style: normal; color: #ffe9a0; }
#shop .sp-slot { width: 26px; height: 22px; border-radius: 5px; border: 1px solid #555; background: #1c1f28; color: #ccd; font: 800 12px system-ui, sans-serif; cursor: pointer; }
#shop .sp-slot.on { background: #ffd84d; color: #1a1a1a; border-color: #ffd84d; }
/* casilla D/F sin hechizo */
.skill.empty-sp .sicon { opacity: .55; }
.skill.empty-sp .sp-plus { font: 800 22px system-ui, sans-serif; color: #ffd84d; }
#shop .sh-grid { display: grid; grid-template-columns: repeat(4, 64px); gap: 10px; }
#shop .sh-tile { position: relative; width: 64px; height: 64px; padding: 0; border-radius: 8px; border: 2px solid #5a5468; background: #1c1a24; cursor: pointer; display: grid; place-items: center; font-size: 30px; }
#shop .sh-tile:hover { border-color: #ffd84d; transform: translateY(-1px); }
#shop .sh-tile.off { filter: grayscale(.7) brightness(.7); }
#shop .sh-ic, #shop .sh-ic img { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 6px; overflow: hidden; object-fit: cover; }
#shop .sh-badge { position: absolute; left: 2px; top: 2px; padding: 0 4px; border-radius: 4px; background: rgba(0,0,0,.75); color: #fff; font: 800 10px/14px system-ui, sans-serif; font-style: normal; }
#shop .sh-key { position: absolute; right: 2px; top: 2px; padding: 0 4px; border-radius: 4px; background: rgba(0,0,0,.75); color: #ffd84d; font: 800 10px/14px system-ui, sans-serif; font-style: normal; }
#shop .sh-cost { position: absolute; left: 0; right: 0; bottom: -2px; transform: translateY(50%); margin: 0 auto; width: max-content; padding: 0 5px; border-radius: 8px; background: #2a2632; border: 1px solid #5a5468; color: #ffd84d; font: 800 11px/16px system-ui, sans-serif; }
#shop .sh-grid { row-gap: 18px; padding-bottom: 6px; }

/* la descripción de la tienda va encima de la ventana de la tienda */
#skilltip { z-index: 60; }

/* tienda del juego: del tamaño de los cuadritos, no de las otras ventanas */
#shop { width: auto !important; height: auto !important; max-height: 86vh !important; padding: 14px 18px 12px !important; }
#shop .sh-grid { grid-template-columns: repeat(4, 64px); }

/* puntero propio (mouse capturado): el mismo efecto que :hover */
#shop .sh-tile.vhover { border-color: #ffd84d; transform: translateY(-1px); }
button.vhover { filter: brightness(1.15); }

/* tienda en diagonal: la elegida crece y las demás se oscurecen */
.st-grid.diag { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 18px; padding: 30px 28px; }
.st-grid.diag .st-card { width: 290px; transform: skewX(-6deg); border-radius: 8px; transition: transform .18s, opacity .18s, filter .18s, border-color .18s; cursor: pointer; }
.st-grid.diag .st-card > .st-in { transform: skewX(6deg); margin: 0 -10px; }
.st-grid.diag .st-card:hover { transform: skewX(-6deg) translateY(-4px); }
.st-grid.diag.has-sel .st-card { opacity: .42; filter: brightness(.6); }
.st-grid.diag.has-sel .st-card.sel { opacity: 1; filter: none; transform: skewX(-6deg) scale(1.1); z-index: 2; border-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.sg-card .sg-art { height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 74px; background: radial-gradient(ellipse at 50% 60%, #6a5cff, #2b2650); }
.sg-card .sg-art b { font: 600 46px/1 var(--hd); color: #ffd84d; text-shadow: 0 3px 0 rgba(0,0,0,.4); }
.sg-card .sg-art small { font: 600 18px var(--hd); opacity: .8; }
.sg-bonus { color: #7dff8a !important; }
.sg-pay { max-width: 420px; margin: 4px auto 24px; text-align: center; color: #cfc9bb; font-size: 14px; }

/* pantalla de carga */
#boot { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, #6d6761, #4a4541 75%); transition: opacity .5s; } /* (colores del juego: el gris de la arena) */
#boot.done { opacity: 0; pointer-events: none; }
/* nombre del juego (sale de la configuración del panel) en letra normal gruesa, no pixelada */
/* (el logo usa la misma letra y estilo que el logo del menú: Teko inclinada con contorno) */
.boot-logo { margin-top: 6px; font: italic 700 72px/0.8 var(--hd); color: #fff; text-align: center; letter-spacing: 1px; transform: skewX(-6deg);
  -webkit-text-stroke: 2px #1a1024; paint-order: stroke fill; text-shadow: 0 4px 0 #1a1024, 0 0 22px rgba(0,0,0,.35); }
.boot-logo span { display: block; margin-top: 2px; font-size: .52em; color: #ffd84d; letter-spacing: 6px; -webkit-text-stroke: 1px #1a1024; }
/* stickman corriendo con su espada (lo dibuja boot.js) */
#bootRun { width: min(360px, 80vw); height: auto; }
.boot-msg { margin-top: 18px; color: rgba(255,255,255,.85); font: 600 18px var(--hd, sans-serif); text-align: center; }
#boot.failed .boot-msg { color: #fff; background: rgba(0,0,0,.45); padding: 12px 20px; border-radius: 8px; font-size: 20px; }
.boot-bar { position: absolute; left: 3%; right: 3%; bottom: 4%; height: 12px; border-radius: 6px; background: #262a3a; border: 2px solid #1b1e2b; overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0; background: #c8163a; border-radius: 4px; transition: width .2s; }
html.booting #menu, html.booting #game { visibility: hidden; }
/* transición negra entre páginas */
#pgLoader { position: fixed; inset: 0; z-index: 9000; background: #000; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .2s; }
#pgLoader.on { opacity: 1; pointer-events: auto; }
.spin { display: block; width: 52px; height: 52px; border-radius: 50%; border: 6px solid #fff; border-top-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* círculo de carga encima de una ventana */
.spin-over { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(10,10,16,.72); transition: opacity .25s; }
.spin-over.out { opacity: 0; }
#mnModalBody { position: relative; }
/* entrar con Google / Discord */
.ac-or { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: #8d879a; font-size: 13px; }
.ac-or::before, .ac-or::after { content: ''; flex: 1; height: 1px; background: #3a3646; }
.ac-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ac-social a { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border-radius: 8px; text-decoration: none;
  font: 600 16px/1 'Segoe UI', Roboto, system-ui, Arial, sans-serif; letter-spacing: .2px; color: #fff; transition: filter .15s, box-shadow .15s, transform .15s; }
.ac-social a:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.ac-social .ac-logo { flex: none; display: block; }
/* Google: botón blanco con la G de colores (como el oficial) */
.ac-google { background: #fff; border: 1px solid #dadce0; color: #3c4043 !important; } .ac-google b { color: #3c4043; font-weight: 600; }
.ac-google:hover { background: #f8faff; }
/* Discord: su morado con el logo blanco */
.ac-discord { background: #5865f2; border: 1px solid #5865f2; } .ac-discord b { font-weight: 600; }
.ac-discord:hover { background: #4752c4; }
.ac-note a { color: #ffd84d; }

/* ===== Rangos de habilidad estilo MOBA: la "+" arriba de Q/W/E/R cuando hay un punto para gastar ===== */
.skill .rkup { position: absolute; left: 50%; top: -15px; transform: translateX(-50%); z-index: 6; width: 24px; height: 24px; padding: 0;
  border-radius: 50%; border: 2px solid #1a1200; background: radial-gradient(circle at 35% 30%, #fff6b8, #ffd84d 55%, #e0a400);
  color: #1a1200; font: 900 18px/18px system-ui, sans-serif; cursor: pointer; pointer-events: auto; box-shadow: 0 0 8px rgba(255,216,77,.8); will-change: transform;
  animation: rkPulse 1.1s ease-in-out infinite; }
.skill .rkup:hover { filter: brightness(1.12); transform: translateX(-50%) scale(1.12); }
.skill .rkup.hidden { display: none; }
@keyframes rkPulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.18); } } /* (escala: no obliga a redibujar el HUD como la sombra) */
.skill .slv.hidden { display: none; }
#portraitlvl.has-pts { box-shadow: 0 0 0 3px #ffd84d, 0 0 12px #ffd84d; }

/* ===== Héroes: barra de hechizos D y F abajo (como LoL) ===== */
.hs-spells { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 4px 2px; padding: 10px 12px; border-radius: 8px; background: #1c1a24; border: 2px solid #45414f; }
.hs-sptitle { font: 600 18px var(--hd); letter-spacing: 1px; color: #ffd84d; margin-right: 4px; }
.hs-spslot { position: relative; width: 52px; height: 52px; padding: 0; border-radius: 8px; border: 3px solid #5a5468; background: #2b2833; display: grid; place-items: center; font-size: 26px; cursor: pointer; overflow: hidden; }
.hs-spslot.on { border-color: #ffd84d; box-shadow: 0 0 0 3px rgba(255,216,77,.35); }
.hs-spslot i { position: absolute; left: 3px; top: 1px; font: 900 11px system-ui, sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 2px #000; z-index: 2; }
.hs-spslot img, .hs-sp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-spsep { width: 2px; height: 40px; background: #45414f; margin: 0 4px; }
.hs-sp { position: relative; width: 44px; height: 44px; padding: 0; border-radius: 7px; border: 2px solid #45414f; background: #2b2833; display: grid; place-items: center; font-size: 22px; cursor: pointer; overflow: hidden; }
.hs-sp:hover { border-color: #ffd84d; transform: translateY(-1px); }
.hs-sp.used { border-color: #8a7f9c; }
.hs-sp em { position: absolute; right: 2px; bottom: 1px; font: 900 10px system-ui, sans-serif; font-style: normal; color: #ffd84d; text-shadow: 0 1px 2px #000; }
.hs-spname { flex: 1 1 100%; font: 600 12px system-ui, sans-serif; color: #cfc9bb; min-height: 16px; }
.mn-spells { display: flex; gap: 3px; margin-top: 4px; } /* debajo del nombre del héroe (no ocupa ancho) */
.mn-spells i { width: 20px; height: 20px; border-radius: 5px; overflow: hidden; display: grid; place-items: center; font-style: normal; font-size: 15px; background: #1c1a24; border: 1px solid #45414f; }
.mn-spells img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-roomcode { text-align: center; font: 600 16px var(--hd); letter-spacing: .5px; color: var(--cream, #f4ede2); background: rgba(0,0,0,.25); border-radius: 4px; padding: 3px 8px; }
.mn-roomcode b { color: #ffd84d; }

/* ===== SERVIDORES: salas abiertas ===== */
.sv-room[disabled] { opacity: .5; cursor: not-allowed; }
.sv-empty { margin: 30px 10px; text-align: center; color: #cfc9bb; font: 600 15px system-ui, sans-serif; }

/* ===== Pantalla de carga al entrar a una sala: "ESPERANDO AL SERVIDOR..." ===== */
#loadScreen { position: fixed; inset: 0; z-index: 80; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#loadScreen.hidden { display: none; }
#loadScreen .ls-bg { position: absolute; left: 0; right: 0; top: 22%; height: 56%; width: 100%; object-fit: cover; filter: blur(3px) brightness(.45) saturate(.9); }
#loadScreen .ls-band { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 0 16px; }
#loadScreen .ls-title { font: 700 clamp(44px, 8vw, 96px)/1 var(--hd); letter-spacing: 2px; font-style: italic; color: #e9e9e9; text-shadow: 0 4px 0 rgba(0,0,0,.4); text-transform: uppercase; }
#loadScreen .ls-spin { width: 46px; height: 46px; border-radius: 50%; border: 5px solid rgba(255,255,255,.18); border-top-color: #e9e9e9; animation: lsSpin .9s linear infinite; }
#loadScreen .ls-msg { font: 600 clamp(18px, 2.4vw, 28px) var(--hd); letter-spacing: 1.5px; color: #fff; }
#loadScreen .ls-code { font: 600 14px system-ui, sans-serif; color: #aaa; min-height: 18px; }
@keyframes lsSpin { to { transform: rotate(360deg); } }

/* Marcador (Tab): los 10 jugadores siempre entran sin desplazarse. La caja crece hasta el 94% de la pantalla y la
   altura de cada fila (--rh) se ajusta a lo que haya lugar (entre 30 y 50 px); los iconos se achican con ella. */
#tabBoard .tb-box { --rh: clamp(30px, calc((94vh - 190px) / 10 - 4px), 50px); height: auto; max-height: 94vh; padding-top: 20px; padding-bottom: 12px; }
#tabBoard .tb-rows { overflow: visible; }
#tabBoard .tb-row { height: var(--rh); }
#tabBoard .tb-row .sk, #tabBoard .tb-row .it, #tabBoard .tb-row .pl img.ico { width: calc(var(--rh) - 12px); height: calc(var(--rh) - 12px); max-width: 36px; max-height: 36px; }
#tabBoard .tb-box.ranked .tb-row .sk, #tabBoard .tb-box.ranked .tb-row .it { max-width: 28px; max-height: 28px; }
#tabBoard .tb-foot { padding-top: 10px; }

/* ===== Iconos de Font Awesome (los que no tienen imagen propia) ===== */
.fa-ico { font-size: .9em; line-height: 1; }
.hs-sp .fa-ico, .hs-spslot .fa-ico, .mn-spells .fa-ico { font-size: 18px; color: #ffd84d; }
#btnSettings i { pointer-events: none; }
/* botón de Discord: arriba a la derecha en el menú, a la izquierda del de ajustes (no se ve durante la partida) */
#btnDiscord { position: fixed; z-index: 25; right: 66px; top: 18px; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 10px; color: #fff; font-size: 24px; text-decoration: none; background: #5865f2; box-shadow: 0 3px 0 rgba(0,0,0,.3); transition: transform .12s, filter .12s; }
#btnDiscord:hover { transform: translateY(-2px); filter: brightness(1.1); }
body.in-game #btnDiscord { display: none; }

/* ===== Jugar con amigos: entrar con código o enlace, o crear sala ===== */
.fr { display: flex; flex-direction: column; gap: 14px; max-width: 560px; margin: 10px auto; }
.fr-card { background: #2b2833; border: 2px solid #45414f; border-radius: 8px; padding: 16px 18px; }
.fr-card h3 { margin: 0 0 6px; font: 600 24px var(--hd); letter-spacing: .5px; color: #ffd84d; }
.fr-card p { margin: 0 0 10px; font-size: 14px; color: #cfc9bb; }
.fr-row { display: flex; gap: 8px; }
.fr-row input { flex: 1; height: 48px; padding: 0 12px; border-radius: 4px; border: 2px solid #45414f; background: #1c1a24; color: #fff; font: 600 18px system-ui, sans-serif; letter-spacing: 1px; }
.fr-row input:focus { outline: none; border-color: #ffd84d; }
.fr-row .mn-btn { width: auto; margin: 0; padding: 4px 22px 0; }
.fr-msg { min-height: 18px; margin: 8px 0 0 !important; color: #ff8f9c !important; font-weight: 600; }
.fr-or { display: flex; align-items: center; gap: 10px; color: #8d879a; font-size: 13px; }
.fr-or::before, .fr-or::after { content: ''; flex: 1; height: 1px; background: #3a3646; }
.fr-new { margin: 0; }

/* ===== Chat de la sala (abajo a la izquierda, como LoL) ===== */
#chat { position: absolute; left: 12px; bottom: 205px; width: min(380px, 42vw); z-index: 14; pointer-events: auto; font: 600 13px/1.35 system-ui, sans-serif; }
#chat .ch-log { max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding: 4px 6px; border-radius: 6px; scrollbar-width: thin; }
#chat .ch-line { color: #f1ece2; text-shadow: 0 1px 2px #000, 0 0 3px #000; word-break: break-word; transition: opacity .6s; }
#chat .ch-line b { color: #8fd3ff; }
#chat .ch-line.me b { color: #ffd84d; }
#chat .ch-line.red b { color: #ff6b7d; } #chat .ch-line.blue b { color: #7fb0ff; }
#chat .ch-line.sys { color: #c9c2d6; font-style: italic; font-weight: 500; }
#chat:not(.open) .ch-line.old { opacity: 0; }
#chat.open .ch-log { background: rgba(10,8,16,.62); max-height: 220px; }
#chat .ch-in { width: 100%; height: 34px; margin-top: 4px; padding: 0 10px; border-radius: 6px; border: 2px solid #ffd84d; background: rgba(10,8,16,.85); color: #fff; font: 600 14px system-ui, sans-serif; }
#chat .ch-in:focus { outline: none; }
#chat .ch-hint { margin-top: 2px; padding-left: 6px; font-size: 11px; color: rgba(255,255,255,.45); text-shadow: 0 1px 2px #000; }
#chat.open .ch-hint { display: none; }
body.is-touch #chat { bottom: auto; top: 46%; width: 46vw; }

/* ===== Sala de espera "JUGAR CON AMIGOS": mismo diseño que las ventanas del juego (SELECCIÓN DE MAPA, HÉROES) ===== */
#lobbyBox { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(10,6,16,.55); padding: 16px; }
#lobbyBox .lb-win { width: var(--mw); height: var(--mh); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--navy); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); color: var(--cream); }
#lobbyBox .lb-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px 6px 16px; background: var(--navy2); border-bottom: 3px solid var(--red); font: 600 24px var(--hd); letter-spacing: 1px; }
#lobbyBox .lb-head i { color: var(--red); margin-right: 4px; }
#lobbyBox .lb-x { background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; }
#lobbyBox .lb-x:hover { color: var(--red); }
#lobbyBox .lb-body { flex: 1; min-height: 0; display: flex; }
/* izquierda: enlace y chat */
#lobbyBox .lb-left { flex: 1; min-width: 0; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
#lobbyBox .lb-link { display: flex; align-items: center; gap: 12px; }
#lobbyBox .lb-link label { flex: none; font: 600 22px/1 var(--hd); letter-spacing: .5px; }
#lobbyBox .lb-url { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 0; border-radius: 4px; background: var(--cream); color: #111; font: 600 16px system-ui, sans-serif; outline: none; }
#lobbyBox .lb-copy { flex: none; height: 44px; padding: 4px 18px 0; border: 0; border-radius: 4px; background: linear-gradient(#e33a57, #b81c38); box-shadow: 0 4px 0 #7a0f22; color: #fff; font: 600 24px/1 var(--hd); letter-spacing: .5px; cursor: pointer; white-space: nowrap; }
#lobbyBox .lb-copy:hover { filter: brightness(1.08); } #lobbyBox .lb-copy:active { transform: translateY(2px); box-shadow: 0 2px 0 #7a0f22; }
#lobbyBox .lb-console { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--navy2); border-radius: 8px; overflow: hidden; }
#lobbyBox .lb-log { flex: 1; min-height: 120px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
#lobbyBox .lb-line { padding: 8px 12px; border-radius: 4px; background: #36333f; font: 600 14px system-ui, sans-serif; word-break: break-word; }
#lobbyBox .lb-line b { color: #ffd84d; }
#lobbyBox .lb-line.sys { background: transparent; color: #b9b2c6; font-style: italic; }
#lobbyBox .lb-line.sys b { color: var(--red); font-style: normal; }
#lobbyBox .lb-line.host b { color: #ffb020; }
#lobbyBox .lb-say { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 2px solid #36333f; color: #8d879a; }
#lobbyBox .lb-in { flex: 1; height: 34px; border: 0; background: transparent; color: #fff; font: 600 14px system-ui, sans-serif; outline: none; }
/* derecha: jugadores y ajustes (como la columna de categorías) */
#lobbyBox .lb-right { flex: 0 0 300px; display: flex; flex-direction: column; background: var(--navy2); min-height: 0; }
#lobbyBox .lb-members { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
#lobbyBox .lb-mem { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 4px 12px 0; border-radius: 4px; background: #36333f; font: 600 22px/1 var(--hd); letter-spacing: .5px; }
#lobbyBox .lb-mem b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lobbyBox .lb-mem.me { box-shadow: inset 4px 0 0 #ffd84d; }
#lobbyBox .lb-mem.me b { color: #ffd84d; }
#lobbyBox .lb-crown { color: #ffd84d; font-style: normal; font-size: 18px; }
#lobbyBox .lb-kick { padding: 4px 10px 1px; border: 0; border-radius: 4px; background: var(--red); color: #fff; font: 600 18px/1 var(--hd); letter-spacing: .5px; cursor: pointer; }
#lobbyBox .lb-kick:hover { filter: brightness(1.15); }
#lobbyBox .lb-set { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--red); }
#lobbyBox .lb-set label, #lobbyBox .lb-info { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 22px/1 var(--hd); letter-spacing: 1px; }
#lobbyBox .lb-set select { width: 160px; height: 40px; border-radius: 4px; border: 0; padding: 0 10px; background: var(--cream); color: #111; font: 600 15px system-ui, sans-serif; }
#lobbyBox .lb-info b { color: #ffd84d; }
/* abajo: explicación y START (rojo grande como JUGAR AHORA) */
#lobbyBox .lb-foot { display: flex; align-items: stretch; background: var(--navy2); border-top: 2px solid #36333f; }
#lobbyBox .lb-foot p { flex: 1; margin: 0; padding: 12px 16px; font: 600 13px/1.4 system-ui, sans-serif; color: #b9b2c6; align-self: center; }
#lobbyBox .lb-foot p i { color: var(--red); }
#lobbyBox .lb-go { flex: 0 0 300px; padding: 10px 12px 14px; }
#lobbyBox .lb-start { width: 100%; height: 64px; border: 0; border-radius: 4px; background: linear-gradient(#e33a57, #b81c38); box-shadow: 0 5px 0 #7a0f22; color: #fff; font: 600 38px/1 var(--hd); letter-spacing: 1px; padding-top: 6px; cursor: pointer; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
#lobbyBox .lb-start:hover { filter: brightness(1.08); } #lobbyBox .lb-start:active { transform: translateY(3px); box-shadow: 0 2px 0 #7a0f22; }
#lobbyBox .lb-start:disabled { opacity: .6; cursor: wait; }
#lobbyBox .lb-wait { height: 64px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 4px; background: #45414f; font: 600 22px/1 var(--hd); letter-spacing: .5px; text-align: center; padding: 4px 10px 0; }
#lobbyBox .lb-wait::before { content: ''; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: lsSpin .9s linear infinite; }
@media (max-width: 760px) {
  #lobbyBox .lb-win { height: auto; }
  #lobbyBox .lb-body, #lobbyBox .lb-foot { flex-direction: column; }
  #lobbyBox .lb-right, #lobbyBox .lb-go { flex-basis: auto; }
  #lobbyBox .lb-link { flex-wrap: wrap; } #lobbyBox .lb-link label { width: 100%; }
  #lobbyBox .lb-log { min-height: 100px; max-height: 160px; }
}

/* JUGAR AHORA: late suave (crece un poco y vuelve a su lugar); al pasar el mouse se queda grande */
@keyframes playPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
#mnPlay:not(:disabled) { animation: playPulse 1.6s ease-in-out infinite; transform-origin: center; }
#mnPlay:not(:disabled):hover { filter: brightness(1.1); } /* (sigue latiendo con el mouse encima) */
#mnPlay:not(:disabled):active { filter: brightness(.95); }
@media (prefers-reduced-motion: reduce) { #mnPlay:not(:disabled) { animation: none; } }

/* nombre del héroe en el panel de jugar: siempre del mismo tamaño y en una sola línea (los nombres largos terminan en …) */
.mn-load .mn-cell { min-width: 0; }
.mn-load .mn-cell > span { min-width: 0; }
#mnClsName { display: block; font-size: 22px !important; line-height: 1 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
#mnLoadout { flex: 0 0 58%; }
/* ===== HUD de abajo quieto: el marco se centra con su ancho, así que cualquier número que cambiara de ancho (oro, bajas,
   pociones, vida) lo movía a izquierda/derecha. Ancho fijo de esas casillas + dígitos del mismo ancho = no se mueve. ===== */
#bottom, #bottom * { font-variant-numeric: tabular-nums; }
#rightcol { width: 76px; flex: none; }
#goldbox, #kills { width: 76px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-align: center; }
#hptext { font-variant-numeric: tabular-nums; }
#bottom { will-change: transform; } /* (se compone aparte: no se redibuja con el resto) */

/* la "+" de subir habilidad ya no crece (al crecer temblaba): brilla suave sin moverse */
.skill .rkup { animation: rkGlow 1.2s ease-in-out infinite !important; transform: translateX(-50%) !important; will-change: opacity; }
.skill .rkup:hover { filter: brightness(1.15); transform: translateX(-50%) !important; }
@keyframes rkGlow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* botón del héroe (JUGAR → personaje): late como JUGAR AHORA para que se note que se puede elegir */
@keyframes heroPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
#mnLoadout { animation: heroPulse 1.6s ease-in-out infinite; transform-origin: center; }
#mnLoadout:hover { filter: brightness(1.12); }
@media (prefers-reduced-motion: reduce) { #mnLoadout { animation: none; } }

/* ===== Tutorial "CÓMO SE JUEGA" (al terminar la carga) ===== */
#tutBox { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(10,6,16,.6); padding: 16px; }
#tutBox .tut-win { width: min(820px, 100%); height: min(560px, 100%); display: flex; flex-direction: column; background: var(--navy); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.55); color: var(--cream); }
#tutBox .tut-head { padding: 10px 16px 6px; background: var(--navy2); border-bottom: 3px solid var(--red); font: 600 26px var(--hd); letter-spacing: 1px; }
#tutBox .tut-head i { color: #ffd84d; margin-right: 6px; }
#tutBox .tut-body { flex: 1; min-height: 0; display: flex; gap: 6px; }
#tutBox .tut-guy { flex: none; width: 150px; height: 230px; align-self: center; }
#tutBox .tut-text { flex: 1; min-width: 0; overflow-y: auto; padding: 14px 18px 18px 6px; scrollbar-width: auto; scrollbar-color: #ffd84d #1d1b23; }
#tutBox .tut-text::-webkit-scrollbar { width: 12px; } #tutBox .tut-text::-webkit-scrollbar-thumb { background: #ffd84d; border-radius: 6px; } #tutBox .tut-text::-webkit-scrollbar-track { background: #1d1b23; }
#tutBox section { background: #36333f; border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
#tutBox h3 { margin: 0 0 4px; font: 600 22px var(--hd); letter-spacing: .5px; color: #ffd84d; }
#tutBox h3 i { width: 26px; color: var(--red); }
#tutBox section p { margin: 4px 0; font: 500 14px/1.45 system-ui, sans-serif; color: #e9e4d8; }
#tutBox section b { color: #fff; background: #1d1b23; border-radius: 4px; padding: 0 5px; }
#tutBox .tut-end { margin: 14px 0 4px; text-align: center; font: 600 20px var(--hd); color: #7dff8a; }
#tutBox .tut-foot { display: flex; align-items: center; gap: 12px; padding: 10px 14px 14px; background: var(--navy2); }
#tutBox .tut-hint { flex: 1; font: 600 14px system-ui, sans-serif; color: #b9b2c6; }
#tutBox .tut-hint i { color: #ffd84d; animation: tutBounce 1s ease-in-out infinite; }
#tutBox .tut-hint.done { color: #7dff8a; } #tutBox .tut-hint.done i { color: #7dff8a; animation: none; }
@keyframes tutBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
#tutBox .tut-go { height: 52px; padding: 6px 26px 0; border: 0; border-radius: 4px; background: linear-gradient(#e33a57, #b81c38); box-shadow: 0 4px 0 #7a0f22; color: #fff; font: 600 28px/1 var(--hd); letter-spacing: 1px; cursor: pointer; }
#tutBox .tut-go:disabled { background: #45414f; box-shadow: none; color: #8d879a; cursor: not-allowed; }
@media (max-width: 640px) { #tutBox .tut-guy { display: none; } #tutBox .tut-foot { flex-direction: column; align-items: stretch; } }

/* ===== Registro (Google / Discord), borrar cuenta, privacidad y código promocional ===== */
.su-form { gap: 8px; }
.su-via { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 600 14px system-ui, sans-serif; color: #e9e4d8; }
.su-via .ac-logo { flex: none; }
.su-l { display: flex; flex-direction: column; gap: 4px; font: 600 18px var(--hd); letter-spacing: .5px; color: var(--cream); }
.su-l input { margin-bottom: 0 !important; }
.su-hint { color: #b9b2c6; font-size: 12px; margin-top: -4px; }
.su-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.su-human { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 6px; background: #f4ede2; color: #1b1626; cursor: pointer; margin: 4px 0; }
.su-human input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0 !important; }
.su-box { width: 26px; height: 26px; border-radius: 4px; border: 2px solid #8d879a; background: #fff; display: grid; place-items: center; color: transparent; font-size: 16px; transition: .15s; }
.su-human input:checked + .su-box { background: #2f9a16; border-color: #2f9a16; color: #fff; }
.su-human b { flex: 1; font: 700 15px system-ui, sans-serif; }
.su-shield { color: #8d879a; font-size: 22px; }
.mn-btn:disabled { opacity: .5; cursor: not-allowed; }
.del-warn { margin: 0 0 6px; padding: 10px 12px; border-radius: 6px; background: rgba(204,35,64,.18); border-left: 4px solid var(--red); color: #ffd0d6; font: 600 14px/1.4 system-ui, sans-serif; }
.del-go { background: linear-gradient(#e33a57, #b81c38) !important; color: #fff !important; }
.pg-btn.pg-del { background: #45414f; margin-right: 8px; }
.pg-btn.pg-del:hover { background: var(--red); }
.pv-text { margin: 0; white-space: pre-wrap; font: 13px/1.5 ui-monospace, Consolas, monospace; color: #e9e4d8; }
.sg-promo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 10px auto 0; padding: 10px 14px; border-radius: 8px; background: rgba(0,0,0,.35); width: fit-content; }
.sg-promo i { color: #ffd84d; font-size: 20px; }
.sg-promo b { font: 600 20px var(--hd); letter-spacing: .5px; }
.sg-promo input { height: 38px; width: 170px; padding: 0 10px; border: 0; border-radius: 4px; background: #f4ede2; color: #111; font: 700 15px system-ui, sans-serif; text-transform: uppercase; letter-spacing: 1px; }
.sg-promo button { height: 38px; padding: 4px 18px 0; border: 0; border-radius: 4px; background: linear-gradient(#e33a57, #b81c38); color: #fff; font: 600 22px var(--hd); cursor: pointer; }

/* ===== CUENTA: solo Google y Discord (pestañas Iniciar sesión / Registrarse) ===== */
.ac-lead { margin: 0 0 14px; text-align: center; font: 600 14px/1.4 system-ui, sans-serif; color: #cfc9bb; }
.ac-social.ac-big { grid-template-columns: 1fr; gap: 12px; }
.ac-social.ac-big a { height: 54px; font-size: 16px; }
.ac-social.ac-big b { font-size: 16px; }
.ac-note { margin-top: 10px; text-align: center; }
.ac-old { margin-top: 18px; border-top: 1px solid #45414f; padding-top: 10px; }
.ac-old summary { cursor: pointer; font: 600 12px system-ui, sans-serif; color: #8d879a; text-align: center; list-style: none; }
.ac-old summary::-webkit-details-marker { display: none; }
.ac-old summary:hover { color: #cfc9bb; }
.ac-old[open] summary { margin-bottom: 10px; }

/* ===== CREAR CUENTA: campos bien separados (cada etiqueta arriba de su campo, con aire entre grupos) ===== */
.su-form { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; }
.su-form .su-via { margin: 0; padding: 10px 12px; border-radius: 6px; background: #1d1b23; }
.su-form .su-l { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.su-form .su-l span { font: 600 18px/1 var(--hd); letter-spacing: .5px; color: var(--cream); }
.su-form .su-l input { width: 100%; height: 46px; margin: 0 !important; padding: 0 12px; box-sizing: border-box; }
.su-form .su-human { margin: 2px 0 0; }
.su-form .mn-btn { margin: 0; }
.su-form .ac-msg { margin: 0; text-align: center; }

/* ===== Barra de habilidades: puntos para gastar y daño del ataque básico, bien visibles ===== */
#skPts { position: absolute; right: 0; top: -58px; z-index: 7; display: flex; align-items: center; gap: 5px; padding: 3px 9px 1px;
  border-radius: 6px; background: #ffd84d; color: #1a1200; font: 700 16px/1 var(--hd); letter-spacing: .5px; white-space: nowrap;
  box-shadow: 0 2px 0 #8a6a00, 0 0 12px rgba(255,216,77,.55); animation: rkGlow 1.2s ease-in-out infinite; pointer-events: auto; cursor: help; }
#skPts.hidden { display: none; }
#skPts i, #skPts svg { font-size: 13px; }
.skill .rkup.many { width: auto; min-width: 24px; padding: 0 5px; border-radius: 12px; font-size: 13px; }
/* el número del ataque básico (daño por golpe) arriba de la "A", donde se ve completo, con una espadita */
#hudframe .skill.basic .slv.atkdmg { bottom: auto; top: -21px; }
#hudframe .skill.basic .slv.atkdmg::before { content: '⚔ '; font-size: 10px; }
@media (prefers-reduced-motion: reduce) { #skPts { animation: none; } }

/* ===== Tarjetas en diagonal de la tienda: los FONDOS siguen la diagonal (sin bordes vacíos a los costados) y solo
   el contenido (dibujo, textos, botones) se endereza cada uno por su lado, así nada se sale de la tarjeta ===== */
.st-grid.diag .st-card > .st-in { transform: none; margin: 0; height: 100%; display: flex; flex-direction: column; }
.st-grid.diag .st-card:not(.sg-card):not(.misc-card) > .st-in { background: radial-gradient(ellipse at 50% 30%, #7c756e, #55504b 75%); }
.st-grid.diag .st-card canvas { background: none; transform: skewX(6deg); }
.st-grid.diag .st-price, .st-grid.diag .sg-art > *, .st-grid.diag .st-info > * { transform: skewX(6deg); }
.st-grid.diag .st-info { flex: 1; padding: 10px 18px 14px; }

/* ===== Tienda → Misceláneos (cambiar de nick) ===== */
.misc-card .misc-art { height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 70px; color: #fff;
  background: radial-gradient(ellipse at 50% 60%, #e0485f, #4a1830); }
.misc-card .misc-art small { font: 600 20px var(--hd); opacity: .85; }
.misc-in { width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 8px 10px; border: 2px solid #3a3550; border-radius: 6px; background: #f3eee2; color: #1a1726;
  font: 600 16px system-ui, sans-serif; text-transform: none; }
.misc-in:focus { outline: none; border-color: #ffd84d; }

/* ===== Ventanita de espera / resultado (código promocional y pagos) ===== */
.sg-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(8,8,20,.72); animation: sgFade .15s ease-out; }
.sg-mbox { width: min(360px, 100%); background: #1c1a3a; border: 2px solid #5b4fd6; border-radius: 14px; padding: 24px 20px 20px; text-align: center; color: #f3eee2;
  box-shadow: 0 18px 50px rgba(0,0,0,.55); animation: sgPop .2s ease-out; }
.sg-mbox b { display: block; font: 700 26px/1.1 Teko, sans-serif; letter-spacing: .5px; margin-top: 10px; }
.sg-mbox p { margin: 6px 0 0; font-size: 14px; opacity: .85; }
.sg-spin { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; border: 4px solid rgba(255,255,255,.15); border-top-color: #ffd84d; animation: sgSpin .8s linear infinite; }
.sg-mic { font-size: 46px; line-height: 1; } .sg-mic.ok { color: #5fe07a; } .sg-mic.bad { color: #ff5a6e; }
.sg-mok { margin-top: 16px; min-width: 140px; padding: 8px 18px; border: 0; border-radius: 8px; background: #d81f45; color: #fff; font: 700 22px/1 Teko, sans-serif; letter-spacing: .5px; cursor: pointer; }
.sg-mok:hover, .sg-mok:focus-visible { background: #f02a54; outline: 2px solid #ffd84d; outline-offset: 2px; }
@keyframes sgSpin { to { transform: rotate(360deg); } }
@keyframes sgFade { from { opacity: 0; } }
@keyframes sgPop { from { transform: scale(.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sg-modal, .sg-mbox { animation: none; } .sg-spin { animation-duration: 2s; } }

/* ===== Celular en horizontal (pantalla baja): HUD más chico para que se vea la pelea y nada tape los botones =====
   (se usa "scale", que se suma al transform que ya tenga cada cosa; las tablets grandes quedan como estaban) */
@media (max-height: 500px) {
  body.is-touch #minimapbox { width: 96px !important; height: 96px !important; padding: 4px; }
  body.is-touch #minimapbox #minimap { left: 4px; top: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
  body.in-game.is-touch #btnSettings { left: 104px; top: 4px; width: 30px; height: 30px; }
  body.is-touch #roominfo { top: 6px; left: 140px; font-size: 10px; padding: 2px 6px; max-width: 30vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* ranking y bajas: más chicos, debajo del minimapa, solo los 4 primeros */
  body.is-touch #mLeft { top: 104px !important; left: 4px !important; scale: .55; transform-origin: top left; }
  body.is-touch #mRank .rk:nth-child(n+5) { display: none; }
  /* (origen arriba a la IZQUIERDA: su translateX(-50%) queda dentro de la escala y así siguen centrados) */
  body.is-touch #mTimer { scale: .6; transform-origin: top left; }
  body.is-touch #mKills { top: 4px; right: 6px; scale: .55; transform-origin: top right; }
  body.is-touch #banner, body.is-touch #announce { scale: .65; transform-origin: top left; }
  body.is-touch #chat { top: 104px; bottom: auto; left: 128px; width: 36vw; font-size: 11px; pointer-events: none; }
  body.is-touch #chat * { font-size: 11px !important; }
  body.is-touch #chat input, body.is-touch #chat button { pointer-events: auto; }
  /* barra de abajo: más chica y corrida a la izquierda para no chocar con los botones */
  body.is-touch #bottom { left: 44%; bottom: 4px; transform: translateX(-50%) scale(.52); transform-origin: bottom center; }
  /* botones en arco alrededor del ataque (tamaño cómodo para el dedo, sin encimarse) */
  body.is-touch .tbtn { width: 50px; height: 50px; font-size: 20px; }
  body.is-touch #btnAtk { right: 18px; bottom: 18px; width: 78px; height: 78px; font-size: 32px; }
  body.is-touch #btnQ { right: 116px; bottom: 47px; }
  body.is-touch #btnW { right: 92px; bottom: 92px; }
  body.is-touch #btnE { right: 47px; bottom: 116px; }
  body.is-touch #btnR { right: 107px; bottom: 162px; }
  body.is-touch #btnD { right: 181px; bottom: 75px; width: 42px; height: 42px; font-size: 17px; }
  body.is-touch #btnF { right: 23px; bottom: 180px; width: 42px; height: 42px; font-size: 18px; }
  body.is-touch #btnPot { right: 184px; bottom: 9px; width: 42px; height: 42px; font-size: 17px; }
  body.is-touch #btnShop { width: 52px; height: 52px; font-size: 24px; }
}

/* ===== Menú, tienda y clasificación en pantallas bajas (celular en horizontal): todo más compacto para que
   entre sin encimarse (logo con el menú, panel de jugar cortado arriba, tarjetas enormes, pestañas en 2 filas) ===== */
@media (max-height: 500px) {
  /* barra de arriba: logo chico, menú más chico, ajustes y Discord en la esquina */
  .mn-top { height: 44px; padding: 0 92px 0 10px; gap: 10px; }
  .mn-logo { font-size: 22px; }
  .mn-logo span { letter-spacing: 3px; }
  .mn-nav { gap: 16px; left: 46%; }
  .mn-nav button { font-size: 18px; letter-spacing: .5px; padding: 4px 2px 0; }
  #btnSettings { top: 6px !important; width: 32px; height: 32px; font-size: 18px; }
  /* panel para jugar: entra completo entre la barra de arriba y el pie */
  .mn-play { width: min(290px, 40vw); bottom: 36px; padding: 8px; gap: 6px; max-height: calc(100vh - 86px); }
  .mn-warn { font-size: 14px; padding: 4px 8px 2px; }
  .mn-load { padding-bottom: 4px; }
  .mn-cell { gap: 6px; padding: 2px 4px; }
  .mn-cell b { font-size: 17px; }
  .mn-cell small { font-size: 8px; }
  #mnClsIcon { width: 30px; height: 30px; font-size: 20px; }
  #menu #name { font-size: 14px; padding: 6px 10px; }
  .mn-big { height: 46px; font-size: 30px; padding-top: 5px; }
  .mn-sec { height: 32px; font-size: 18px; padding-top: 3px; }
  .mn-acc { min-height: 32px; padding-top: 5px; gap: 8px; }
  .mn-acc > button:not(.mn-login) { width: 32px; height: 32px; font-size: 16px; }
  .mn-login { height: 32px; font-size: 18px; }
  .mn-foot { bottom: 6px; padding: 3px 10px; font-size: 12px; gap: 6px; }
  /* tienda: pestañas en una fila (icono al lado del nombre) y tarjetas más chicas */
  .st-bar { height: 40px; overflow-x: auto; scrollbar-width: none; }
  .st-back { width: 42px; font-size: 22px; flex: 0 0 auto; }
  .st-tab { display: flex; align-items: center; gap: 6px; font-size: 18px; padding: 2px 12px 0; white-space: nowrap; flex: 0 0 auto; }
  .st-tab svg, .st-tab i { font-size: 15px; width: 16px; height: 16px; }
  .st-gold { font-size: 18px; padding: 0 12px; flex: 0 0 auto; }
  .st-grid.diag { gap: 14px 12px; padding: 14px 16px; }
  .st-grid.diag .st-card { width: 190px; }
  .st-grid.diag .st-info { padding: 6px 12px 10px; }
  .st-info b { font-size: 20px; }
  .st-info small { font-size: 13px; }
  .st-info p { font-size: 10px; min-height: 0; margin: 2px 0 6px; }
  .st-info button { height: 32px; font-size: 18px; }
  .st-price { font-size: 19px; top: 6px; right: 10px; }
  .sg-card .sg-art, .misc-card .misc-art { height: 140px; font-size: 48px; }
  .sg-card .sg-art b { font-size: 32px; }
  .sg-card .sg-art small, .misc-card .misc-art small { font-size: 14px; }
  .misc-in { padding: 5px 8px; font-size: 14px; margin-bottom: 6px; }
  .sg-pay, .sg-promo { transform: scale(.85); transform-origin: top center; }
  .st-login { margin: 8px 16px 0; padding: 6px 10px; font-size: 13px; }
  .st-login button { font-size: 17px; padding: 3px 12px 0; }
  /* clasificación y páginas: barra y filas más chicas */
  .pg-bar { height: 40px; }
  .pg-back { width: 42px; font-size: 22px; }
  .pg-title { font-size: 22px; padding: 4px 12px 0; }
  .pg-tab { font-size: 18px; padding: 4px 10px 0; }
  .pg-body { margin: 10px auto 20px; }
  .lb-h, .lb-r { grid-template-columns: 30px 1.6fr .8fr .8fr .8fr .8fr 74px; padding: 0 10px; }
  .lb-h { font-size: 13px; }
  .lb-r { height: 38px; font-size: 17px; }
  .lb-pf { font-size: 15px; padding: 3px 8px 0; }
  .lb-pf i, .lb-pf svg { display: none; }
}

/* ===== Celular en vertical: después de cargar, aviso de girar el celular (también en el menú, no solo en partida) ===== */
@media (orientation: portrait) and (max-width: 900px) { body.is-touch #rotate { display: grid; } }