@import url("arena.css?v=f6917fed42");
@import url("classes.css?v=f6917fed42");
/* Ascendant Online — Sistema visual «Sistema». Tokens y componentes documentados en client/UI_KIT.md */
@font-face { font-family: "Ascendant Pixel"; src: url("assets/fonts/ascendant-pixel.ttf?v=f6917fed42") format("truetype"); font-weight: 400; font-display: block; }
@font-face { font-family: "Ascendant Pixel"; src: url("assets/fonts/ascendant-pixel-bold.ttf?v=f6917fed42") format("truetype"); font-weight: 700; font-display: block; }

/* ============ TOKENS ============ */
:root {
  /* color */
  --c-void: #05060d;
  --c-surface: rgba(7, 11, 26, .94);          /* fondo de ventana */
  --c-surface-2: rgba(13, 19, 42, .96);       /* cabeceras, filas */
  --c-surface-3: rgba(0, 0, 0, .38);          /* pozos: slots, inputs */
  --c-hud: rgba(6, 10, 24, .86);              /* piezas del HUD */
  --c-line: rgba(76, 195, 255, .32);
  --c-line-strong: rgba(76, 195, 255, .7);
  --c-line-soft: rgba(255, 255, 255, .07);
  --c-neon: #4cc3ff; --c-neon-2: #a85cff; --c-neon-hi: #bfeaff;
  --c-text: #e3ecff; --c-text-dim: #8d98bf; --c-text-mute: #5a6488;
  --c-hp: #e8364f; --c-mp: #3a7bff; --c-xp: #b05cff; --c-gold: #ffd23a;
  --c-ok: #3ddc6a; --c-bad: #ff5a6e; --c-warn: #ffb04a; --c-info: #7fd9ff;
  --r-comun: #8a909c; --r-raro: #3ddc6a; --r-epico: #3a8bff; --r-legendario: #b050ff; --r-mitico: #ffc234;
  /* chat por canal */
  --ch-all: #e3ecff; --ch-sys: #7fd9ff; --ch-loot: #bfe8a0; --ch-trade: #ffd27a; --ch-warn: #ffb36b;
  /* forma */
  --rad-s: 3px; --rad-m: 6px; --rad-l: 10px; --rad-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --bd: 1px solid var(--c-line);
  --glow: 0 0 0 1px rgba(168, 92, 255, .22) inset, 0 0 12px rgba(76, 195, 255, .18);
  --sh-1: 0 4px 14px rgba(0, 0, 0, .45);
  --sh-2: 0 10px 34px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .6);
  --grad-head: linear-gradient(90deg, rgba(76, 195, 255, .16), rgba(168, 92, 255, .1) 60%, transparent);
  /* tipografía: Ascendant Pixel solo en múltiplos de 10px (10/20/30/40) para que sea nítida */
  --f-title: "Ascendant Pixel", monospace;
  --f-ui: "Segoe UI", system-ui, -apple-system, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 11px; --fs-s: 12px; --fs-m: 14px; --fs-l: 16px; --fs-xl: 18px;
  /* movimiento */
  --dur: 160ms; --ease: cubic-bezier(.2, .8, .2, 1);
  /* escala del HUD (Ajustes > Interfaz) */
  --ui-scale: 1; --chat-alpha: .86;
  /* alias heredados (los usa gathering-ui.js?v=f6917fed42) */
  --neon: var(--c-neon); --neon2: var(--c-neon-2); --bg: var(--c-hud); --bg2: var(--c-surface-2);
  --txt: var(--c-text); --dim: var(--c-text-dim); --hp: var(--c-hp); --mp: var(--c-mp); --xp: var(--c-xp); --gold: var(--c-gold);
  --pix: var(--f-title); --ui: var(--f-ui);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--c-void); color: var(--c-text); font-family: var(--f-ui); font-size: var(--fs-m); user-select: none; -webkit-user-select: none; touch-action: none; -webkit-font-smoothing: antialiased; }
canvas#game { position: fixed; inset: 0; display: block; image-rendering: pixelated; cursor: crosshair; }
canvas { image-rendering: pixelated; }
.hidden { display: none !important; }
button { font-family: var(--f-ui); color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--c-neon); outline-offset: 1px; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(76, 195, 255, .3); border-radius: 4px; } ::-webkit-scrollbar-track { background: transparent; }
.dim { color: var(--c-text-dim); } .ok, .on { color: var(--c-ok); } .bad { color: var(--c-bad); } .gold { color: var(--c-gold); }
.pix { font-family: var(--f-title); font-size: 10px; letter-spacing: 1px; }

/* ============ COMPONENTES ============ */
/* superficie Sistema */
.sys { background: var(--c-hud); border: var(--bd); border-radius: var(--rad-m); box-shadow: var(--glow), var(--sh-1); }

/* botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 5px 14px; border-radius: var(--rad-s); border: 1px solid var(--c-line-strong); background: linear-gradient(180deg, #172650, #0c1430); color: var(--c-text); font-weight: 700; font-size: var(--fs-m); letter-spacing: .3px; cursor: pointer; transition: background var(--dur), box-shadow var(--dur), border-color var(--dur), transform 80ms; white-space: nowrap; }
.btn:hover:not(:disabled) { background: linear-gradient(180deg, #213e80, #12224e); box-shadow: 0 0 10px rgba(76, 195, 255, .55); border-color: var(--c-neon); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, #2c62d6, #3b1f8c); border-color: #9fdcff; font-family: var(--f-title); font-size: 20px; font-weight: 400; padding: 10px 18px; letter-spacing: 1px; }
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #3a74ee, #4a27ad); box-shadow: 0 0 16px rgba(120, 160, 255, .7); }
.btn.secondary, .btn.purple { border-color: rgba(168, 92, 255, .8); background: linear-gradient(180deg, #24174a, #120c2c); }
.btn.secondary:hover:not(:disabled), .btn.purple:hover:not(:disabled) { box-shadow: 0 0 10px rgba(168, 92, 255, .6); border-color: var(--c-neon-2); background: linear-gradient(180deg, #33206a, #1a1040); }
.btn.danger { border-color: rgba(255, 90, 110, .8); background: linear-gradient(180deg, #4a1424, #250910); }
.btn.danger:hover:not(:disabled) { box-shadow: 0 0 10px rgba(255, 90, 110, .6); border-color: var(--c-bad); background: linear-gradient(180deg, #651a30, #330c16); }
.btn.ghost { background: transparent; border-color: var(--c-line); }
.btn.sm { min-height: 24px; padding: 2px 9px; font-size: var(--fs-s); }
.btn.block { width: 100%; }

/* icon button (micro-menú, cabeceras) */
.ib { position: relative; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--c-hud); border: var(--bd); border-radius: var(--rad-s); color: var(--c-neon); cursor: pointer; transition: color var(--dur), box-shadow var(--dur), border-color var(--dur), background var(--dur); font-family: var(--f-title); font-size: 20px; }
.ib svg { width: 22px; height: 22px; display: block; }
.ib:hover, .ib.active { color: #fff; border-color: var(--c-neon); box-shadow: 0 0 10px rgba(76, 195, 255, .55); background: rgba(16, 32, 70, .92); }
.ib.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 2px; border-radius: 1px; background: var(--c-neon); box-shadow: 0 0 6px var(--c-neon); }
.ib.off { color: var(--c-text-mute); }
.ib .kbd { position: absolute; right: 2px; bottom: 1px; font-family: var(--f-ui); font-size: 9px; font-weight: 700; color: var(--c-text-dim); line-height: 1; }

/* teclas */
.kbd, kbd { display: inline-block; min-width: 18px; padding: 1px 5px; border: 1px solid rgba(141, 152, 191, .5); border-bottom-width: 2px; border-radius: var(--rad-s); font-family: var(--f-ui); font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; color: var(--c-text); background: rgba(0, 0, 0, .35); text-align: center; }

/* pestañas */
.tabs { display: flex; gap: 2px; border-bottom: var(--bd); margin-bottom: var(--sp-3); }
.tabs button { flex: 1; background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--c-text-dim); padding: 8px 10px; cursor: pointer; font-weight: 700; font-size: var(--fs-m); transition: color var(--dur), border-color var(--dur), background var(--dur); }
.tabs button:hover { color: var(--c-text); background: rgba(76, 195, 255, .06); }
.tabs button.active { color: #fff; border-bottom-color: var(--c-neon); background: linear-gradient(180deg, transparent, rgba(76, 195, 255, .12)); }

/* barras */
.bar { position: relative; height: 16px; background: rgba(0, 0, 0, .62); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--rad-s); overflow: hidden; }
.bar .fill { position: absolute; inset: 0 auto 0 0; width: 0; transition: width .2s linear; }
.bar .fill::after { content: ""; position: absolute; inset: 0 0 55% 0; background: rgba(255, 255, 255, .22); }
.bar.hp .fill { background: linear-gradient(180deg, #ff5a6e, #b01530); }
.bar.mp .fill { background: linear-gradient(180deg, #5b9bff, #1c3fb0); }
.bar.xp .fill { background: linear-gradient(90deg, #6a2cff, #c86bff); }
.bar.ok .fill { background: linear-gradient(90deg, #22a04a, #5dff8a); }
.bar > span { position: relative; display: block; text-align: center; font-size: var(--fs-xs); line-height: 14px; font-weight: 700; text-shadow: 0 1px 2px #000, 0 0 2px #000; font-variant-numeric: tabular-nums; }
.bar.thin { height: 6px; } .bar.thin > span { display: none; }

/* badges */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: var(--rad-pill); border: 1px solid currentColor; font-size: var(--fs-xs); font-weight: 700; line-height: 16px; background: rgba(0, 0, 0, .4); }
.rank-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px; font-family: var(--f-title); font-size: 10px; border: 1px solid currentColor; border-radius: var(--rad-s); box-shadow: 0 0 6px currentColor inset, 0 0 4px currentColor; background: rgba(0, 0, 0, .55); clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px); }
.count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--rad-pill); background: var(--c-hp); color: #fff; font-size: var(--fs-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 8px rgba(232, 54, 79, .6); }

/* ventanas (.panel = .win) */
#panels { position: absolute; inset: 0; pointer-events: none; }
.panel { position: absolute; pointer-events: auto; padding: 0; min-width: 300px; max-width: calc(100vw - 16px); max-height: calc(100vh - 100px); display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--rad-m); box-shadow: var(--glow), var(--sh-2); transform-origin: top left; transform: scale(var(--ui-scale)); animation: win-in var(--dur) var(--ease); }
.panel.closing { animation: win-out 140ms ease-in forwards; pointer-events: none; }
@keyframes win-in { from { opacity: 0; transform: scale(var(--ui-scale)) translateY(6px) scale(.98); } }
@keyframes win-out { to { opacity: 0; transform: scale(var(--ui-scale)) translateY(4px) scale(.98); } }
.panel::before { content: ""; position: absolute; left: 10px; right: 10px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--c-neon), var(--c-neon-2), transparent); pointer-events: none; }
.panel .ph { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 8px 8px 14px; border-bottom: var(--bd); background: var(--grad-head); cursor: move; border-radius: var(--rad-m) var(--rad-m) 0 0; flex: none; }
.panel .ph h3 { margin: 0; flex: 1; font-family: var(--f-title); font-weight: 400; font-size: 20px; color: var(--c-neon); letter-spacing: 1px; text-shadow: 0 0 10px rgba(76, 195, 255, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel .ph .ph-key { color: var(--c-text-mute); }
.panel .ph .x { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: var(--rad-s); color: var(--c-text-dim); font-size: 20px; cursor: pointer; line-height: 1; padding: 0; }
.panel .ph .x:hover { color: #fff; border-color: rgba(255, 90, 110, .7); background: rgba(255, 90, 110, .15); }
.panel .pb { padding: var(--sp-3) var(--sp-4) var(--sp-4); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(76, 195, 255, .3) transparent; }
.panel.top { border-color: var(--c-neon); }
.panel .greet { font-style: italic; color: var(--c-text-dim); margin-bottom: var(--sp-3); border-left: 2px solid var(--c-neon-2); padding: 2px 0 2px 10px; }
.sec { margin: var(--sp-4) 0 var(--sp-2); font-family: var(--f-title); font-size: 10px; letter-spacing: 2px; color: var(--c-neon); display: flex; align-items: center; gap: 8px; font-weight: 400; }
.sec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--c-line-strong), transparent); }
.sec:first-child { margin-top: 0; }
.sec .r { order: 3; color: var(--c-text-dim); font-family: var(--f-ui); font-size: var(--fs-s); letter-spacing: 0; font-weight: 700; }
.card { border: var(--bd); border-radius: var(--rad-s); padding: var(--sp-3); background: var(--c-surface-3); }

/* slots de objeto con borde de rareza */
.cell, .slot-i { width: 46px; height: 46px; background: radial-gradient(circle at 50% 40%, rgba(30, 40, 80, .5), rgba(0, 0, 0, .5)); border: 1px solid rgba(255, 255, 255, .1); position: relative; cursor: pointer; border-radius: var(--rad-s); transition: border-color 100ms, box-shadow 100ms; }
.cell canvas { width: 100%; height: 100%; padding: 5px; image-rendering: pixelated; pointer-events: none; display: block; }
.cell .qty { position: absolute; bottom: 0; right: 3px; font-size: var(--fs-s); font-weight: 700; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000; pointer-events: none; }
.cell .enc { position: absolute; top: 1px; left: 3px; font-size: 10px; font-weight: 700; color: #ffe27a; text-shadow: 0 0 2px #000, 0 0 2px #000; pointer-events: none; }
.cell:hover { border-color: var(--c-neon) !important; box-shadow: 0 0 8px rgba(76, 195, 255, .6); }
.cell.sel { border-color: #fff !important; box-shadow: 0 0 10px #fff; }
.cell.drag-over { border-color: var(--c-neon-2) !important; background: rgba(168, 92, 255, .2); }
.cell.empty-slot::after { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--c-text-mute); font-weight: 700; text-align: center; line-height: 1.1; }
.cell.empty-slot svg { position: absolute; inset: 9px; width: 26px; height: 26px; color: rgba(141, 152, 191, .28); }
.cell.empty-slot:has(svg)::after { content: none; }
.cell.locked-cls::before { content: ""; position: absolute; inset: 0; background: rgba(120, 0, 20, .35); border-radius: var(--rad-s); pointer-events: none; }
.r-comun { border-color: var(--r-comun) !important; }
.r-raro { border-color: var(--r-raro) !important; box-shadow: 0 0 6px rgba(61, 220, 106, .4) inset; }
.r-epico { border-color: var(--r-epico) !important; box-shadow: 0 0 7px rgba(58, 139, 255, .5) inset; }
.r-legendario { border-color: var(--r-legendario) !important; box-shadow: 0 0 9px rgba(176, 80, 255, .6) inset; }
.r-mitico { border-color: var(--r-mitico) !important; box-shadow: 0 0 10px rgba(255, 194, 52, .7) inset; animation: myth 2s infinite; }
@keyframes myth { 50% { box-shadow: 0 0 15px rgba(255, 194, 52, 1) inset; } }

/* tooltip */
#tooltip { position: fixed; z-index: 100; pointer-events: none; min-width: 210px; max-width: 300px; padding: 10px 12px; background: rgba(4, 6, 16, .97); border: 1px solid var(--c-line-strong); border-radius: var(--rad-m); box-shadow: 0 0 14px rgba(76, 195, 255, .25), var(--sh-2); font-size: var(--fs-m); line-height: 1.35; animation: tip-in 100ms ease-out; }
@keyframes tip-in { from { opacity: 0; } }
#tooltip .tn { font-weight: 700; font-size: var(--fs-l); }
#tooltip .tr { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-top: 1px; }
#tooltip .ts { margin-top: 6px; color: #9fe0ff; }
#tooltip .td { color: var(--c-text-dim); font-size: var(--fs-s); margin-top: 4px; }
#tooltip .tbad { color: var(--c-bad); font-size: var(--fs-s); margin-top: 4px; }
#tooltip .tsep { border-top: 1px solid var(--c-line-soft); margin: 6px 0; }
#tooltip .hint { margin-top: 6px; }
#tooltip .up { color: var(--c-ok); } #tooltip .down { color: var(--c-bad); }
#tooltip .tcmp { font-size: var(--fs-s); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--c-line-soft); }
#tooltip .tcmp b { color: var(--c-text-dim); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px; }
#tooltip .tk { float: right; margin-left: 10px; }

/* toasts */
#notifs { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; width: min(560px, 60vw); z-index: 6; }
.notif { max-width: 100%; display: flex; align-items: center; gap: 8px; background: rgba(6, 10, 24, .92); border: 1px solid var(--c-line-strong); border-left: 3px solid var(--c-neon); border-radius: var(--rad-s); padding: 6px 14px 6px 10px; font-weight: 700; font-size: var(--fs-m); box-shadow: 0 0 12px rgba(76, 195, 255, .25), var(--sh-1); animation: nin 180ms var(--ease), nout .35s ease-in forwards 3.3s; text-align: center; }
.notif .tag { color: var(--c-neon); font-family: var(--f-title); font-size: 10px; letter-spacing: 1px; flex: none; }
.notif.warn { border-color: rgba(255, 176, 74, .7); border-left-color: var(--c-warn); } .notif.warn .tag { color: var(--c-warn); }
.notif.err { border-color: rgba(255, 90, 110, .7); border-left-color: var(--c-bad); } .notif.err .tag { color: var(--c-bad); }
.notif.gold { border-color: rgba(168, 92, 255, .8); border-left-color: var(--c-gold); box-shadow: 0 0 18px rgba(168, 92, 255, .45), var(--sh-1); } .notif.gold .tag { color: var(--c-gold); }
@keyframes nin { from { opacity: 0; transform: translateY(-8px); } }
@keyframes nout { to { opacity: 0; transform: translateY(-6px); } }

/* banner de zona / eventos */
#banner { position: absolute; top: 24%; left: 0; right: 0; text-align: center; pointer-events: none; font-family: var(--f-title); font-size: 40px; color: #fff; text-shadow: 0 0 10px var(--c-neon), 0 0 28px var(--c-neon-2), 0 2px 0 #000; animation: ban 2.6s ease-out forwards; z-index: 5; }
#banner::before, #banner::after { content: ""; display: block; width: min(420px, 70vw); height: 1px; margin: 0 auto 10px; background: linear-gradient(90deg, transparent, var(--c-neon), transparent); }
#banner::after { margin: 10px auto 0; background: linear-gradient(90deg, transparent, var(--c-neon-2), transparent); }
#banner small { display: block; font-family: var(--f-ui); font-size: var(--fs-l); font-weight: 700; color: var(--c-neon-hi); margin-top: 8px; letter-spacing: 4px; text-transform: uppercase; }
@keyframes ban { 0% { opacity: 0; transform: translateY(8px); letter-spacing: 8px; } 14% { opacity: 1; transform: none; letter-spacing: 2px; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* formularios */
.field { display: block; font-weight: 600; color: var(--c-text-dim); margin-bottom: 10px; font-size: var(--fs-m); }
input.inp, .field input { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; background: rgba(0, 0, 0, .5); border: 1px solid var(--c-line); color: #fff; font-family: var(--f-ui); font-size: var(--fs-l); border-radius: var(--rad-s); outline: none; transition: border-color var(--dur), box-shadow var(--dur); }
input.inp:focus, .field input:focus { border-color: var(--c-neon); box-shadow: 0 0 8px rgba(76, 195, 255, .45); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--c-neon) var(--p, 50%), rgba(255, 255, 255, .12) var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -4px; border-radius: 50%; background: #fff; border: 2px solid var(--c-neon); box-shadow: 0 0 8px var(--c-neon); }
.seg { display: inline-flex; border: var(--bd); border-radius: var(--rad-s); overflow: hidden; }
.seg button { background: transparent; border: 0; border-left: var(--bd); color: var(--c-text-dim); padding: 5px 12px; font-weight: 700; font-size: var(--fs-s); cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button.active { background: rgba(76, 195, 255, .2); color: #fff; }
.switch { position: relative; width: 36px; height: 20px; border-radius: 10px; background: rgba(255, 255, 255, .12); border: var(--bd); cursor: pointer; flex: none; transition: background var(--dur); padding: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-text-dim); transition: transform var(--dur), background var(--dur); }
.switch.on { background: rgba(76, 195, 255, .35); border-color: var(--c-neon); } .switch.on::after { transform: translateX(16px); background: #fff; }
.opt { display: grid; grid-template-columns: 1fr minmax(140px, 220px) 44px; align-items: center; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--c-line-soft); }
.opt .ol { font-weight: 600; } .opt .ol small { display: block; color: var(--c-text-dim); font-weight: 400; font-size: var(--fs-s); }
.opt .ov { text-align: right; color: var(--c-neon); font-weight: 700; font-variant-numeric: tabular-nums; }
.opt.wide { grid-template-columns: 1fr auto; }

/* utilidades */
.row { display: flex; align-items: center; gap: 8px; }
.between { justify-content: space-between; }
.hint { font-size: var(--fs-s); color: var(--c-text-dim); margin-top: 6px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }

/* ============ LOGIN ============ */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 50; overflow: auto; padding: 16px; }
.login-bg { position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 30%, rgba(76, 60, 200, .35), transparent 60%), radial-gradient(ellipse at 50% 120%, rgba(76, 195, 255, .25), transparent 60%), #04050c; }
.login-bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(76, 195, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(76, 195, 255, .06) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); animation: grid 20s linear infinite; }
@keyframes grid { to { background-position: 0 320px; } }
.login-box { width: min(560px, 100%); padding: 22px 26px; background: var(--c-surface); border-color: var(--c-line-strong); }
.logo { display: block; width: min(420px, 90%); margin: 0 auto 6px; image-rendering: pixelated; filter: drop-shadow(0 0 12px rgba(76, 195, 255, .6)); animation: glow 3s ease-in-out infinite; }
@keyframes glow { 50% { filter: drop-shadow(0 0 22px rgba(168, 92, 255, .8)); } }
.sys-title { text-align: center; font-family: var(--f-title); font-size: 10px; color: var(--c-neon); margin: 6px 0 14px; letter-spacing: 1px; }
#login-form label { display: block; font-weight: 600; color: var(--c-text-dim); margin-bottom: 10px; font-size: var(--fs-m); }
#login-form input { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; background: rgba(0, 0, 0, .5); border: 1px solid var(--c-line); color: #fff; font-family: var(--f-ui); font-size: var(--fs-l); border-radius: var(--rad-s); outline: none; }
#login-form input:focus { border-color: var(--c-neon); box-shadow: 0 0 8px rgba(76, 195, 255, .5); }
#login-form .btn.primary { width: 100%; margin-top: 8px; }
.cls-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 8px; }
.cls-card { background: rgba(0, 0, 0, .4); border: 1px solid var(--c-line); padding: 8px 4px; text-align: center; cursor: pointer; border-radius: var(--rad-m); transition: border-color var(--dur), box-shadow var(--dur), background var(--dur); }
.cls-card canvas { width: 80px; height: 96px; image-rendering: pixelated; display: block; margin: 0 auto; }
.cls-card .cn { font-weight: 700; font-size: var(--fs-l); }
.cls-card .ct { font-size: var(--fs-s); color: var(--c-text-dim); }
.cls-card.sel { border-color: var(--c-neon-2); background: rgba(168, 92, 255, .15); box-shadow: 0 0 14px rgba(168, 92, 255, .5); }
.cls-card:hover { border-color: var(--c-neon); }
.cls-desc { font-size: var(--fs-m); min-height: 64px; padding: 8px 10px; background: rgba(0, 0, 0, .35); border-left: 2px solid var(--c-neon-2); margin-bottom: 6px; }
.cls-desc .stats { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; color: var(--c-neon); font-weight: 700; }
.cls-desc .sk { color: var(--c-text-dim); font-size: 13px; margin-top: 3px; }
.login-msg { min-height: 20px; margin-top: 8px; text-align: center; font-weight: 600; }
.login-msg.err { color: var(--c-bad); } .login-msg.ok { color: var(--c-neon); }
.login-foot { margin-top: 12px; color: var(--c-text-dim); font-size: 13px; text-align: center; }

/* ============ HUD: LAYOUT ============ */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; --edge: 12px; }
#hud > * { pointer-events: auto; }
#hud > #notifs, #hud > #banner, #hud > #bossbar, #hud > #touch, #hud > #panels { pointer-events: none; }

/* arriba-izquierda: marco de personaje */
#pframe { position: absolute; left: var(--edge); top: var(--edge); width: 300px; padding: 10px 12px 10px 10px; display: grid; grid-template-columns: 72px 1fr; gap: 0 10px; transform-origin: top left; transform: scale(var(--ui-scale)); cursor: pointer; }
.pf-por { position: relative; width: 72px; height: 72px; padding: 4px; grid-row: span 2; border-radius: var(--rad-m); outline: 1px solid var(--c-neon-2); outline-offset: -1px; background: radial-gradient(circle at 50% 35%, #26306a, #0a0c1c 75%); box-shadow: 0 0 10px rgba(168, 92, 255, .35) inset; }
#pf-portrait { width: 64px; height: 64px; display: block; }
.pf-lv { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); min-width: 34px; height: 18px; padding: 0 5px; display: flex; align-items: center; justify-content: center; background: #0a0f24; border: 1px solid var(--c-neon); border-radius: var(--rad-pill); font-size: var(--fs-xs); font-weight: 800; color: #fff; box-shadow: 0 0 6px rgba(76, 195, 255, .6); font-variant-numeric: tabular-nums; }
.pf-info { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.pf-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pf-name #pf-name { font-weight: 800; font-size: var(--fs-xl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.pf-sub { display: flex; align-items: center; gap: 10px; color: var(--c-text-dim); font-size: var(--fs-s); font-weight: 600; }
.pf-gold { color: var(--c-gold); font-weight: 700; display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-variant-numeric: tabular-nums; }
.ico { width: 16px; height: 16px; image-rendering: pixelated; }
.pf-bars { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.pf-bars .bar { height: 15px; } .pf-bars .bar > span { line-height: 13px; }
.pf-bars .bar.xp { height: 6px; } .pf-bars .bar.xp > span { display: none; }
#buffs { grid-column: 1 / -1; display: flex; gap: 4px; margin-top: 8px; }
#buffs:empty { display: none; }
#buffs .bf { width: 26px; height: 26px; position: relative; border: 1px solid var(--c-neon); border-radius: var(--rad-s); background: rgba(0, 0, 0, .5); }
#buffs .bf canvas { width: 100%; height: 100%; image-rendering: pixelated; }
#buffs .bf span { position: absolute; bottom: -2px; right: 1px; font-size: 10px; font-weight: 700; text-shadow: 0 0 2px #000, 0 0 2px #000; }

/* arriba-derecha: minimapa */
#topright { position: absolute; right: var(--edge); top: var(--edge); display: flex; flex-direction: column; align-items: center; gap: 6px; transform-origin: top right; transform: scale(var(--ui-scale)); }
.mm { position: relative; width: 184px; height: 184px; }
.mm-ring { position: absolute; inset: 0; border-radius: 50%; background: #03050d; border: 2px solid var(--c-line-strong); box-shadow: 0 0 0 4px rgba(6, 10, 24, .86), 0 0 0 5px rgba(168, 92, 255, .45), 0 0 18px rgba(76, 195, 255, .35), var(--sh-1); overflow: hidden; }
#minimap { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; display: block; cursor: pointer; }
.mm-n { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #0a0f24; border: 1px solid var(--c-neon); font-weight: 800; font-size: var(--fs-xs); color: var(--c-neon); box-shadow: 0 0 6px rgba(76, 195, 255, .6); pointer-events: none; }
.mm-btn { position: absolute; width: 30px; height: 30px; border-radius: 50%; }
.mm-btn svg { width: 16px; height: 16px; }
#mm-map { right: -4px; bottom: 6px; }
#mm-time { position: absolute; left: -4px; bottom: 6px; width: 30px; height: 30px; border-radius: 50%; background: var(--c-hud); border: var(--bd); display: flex; align-items: center; justify-content: center; color: var(--c-gold); }
#mm-time svg { width: 16px; height: 16px; }
.mm-info { width: 210px; text-align: center; padding: 5px 8px; }
.mm-zone { font-family: var(--f-title); font-size: 10px; letter-spacing: 1px; color: var(--c-neon-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-meta { display: flex; justify-content: center; gap: 10px; font-size: var(--fs-xs); color: var(--c-text-dim); font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.mm-meta b { color: var(--c-text); font-weight: 700; }
/* estado de red: ping con color + jugadores en línea (discreto, bajo el minimapa) */
.net-row { display: flex; justify-content: center; gap: 8px; margin-top: 3px; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.net-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 10px; background: rgba(0, 0, 0, .35); border: 1px solid var(--c-line); color: var(--c-text-dim); white-space: nowrap; cursor: default; }
.net-chip small { font-size: 9px; opacity: .75; font-weight: 600; } .net-chip b { color: var(--c-text); }
.net-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.net-chip.ok { color: #5fd68a; border-color: rgba(95, 214, 138, .4); } .net-chip.mid { color: #c8e060; border-color: rgba(200, 224, 96, .4); }
.net-chip.warn { color: #ffb347; border-color: rgba(255, 179, 71, .5); } .net-chip.bad { color: var(--c-bad); border-color: rgba(255, 90, 110, .6); animation: net-blink 1s ease-in-out infinite; }
#net-online svg { color: var(--c-neon); }
@keyframes net-blink { 50% { box-shadow: 0 0 8px rgba(255, 90, 110, .7); } }

/* abajo-centro: barra de acción */
#actionbar { position: absolute; left: 50%; bottom: var(--edge); transform: translateX(-50%) scale(var(--ui-scale)); transform-origin: bottom center; display: flex; flex-direction: column; gap: 4px; }
#xpline { height: 6px; border-radius: 3px; position: relative; }
#xpline .seg-ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0, 0, 0, .55) calc(10% - 1px) 10%); pointer-events: none; }
#xpline .fill { transition: width .4s; }
#hotbar { display: flex; gap: 6px; padding: 6px; }
.slot { position: relative; width: 50px; height: 50px; background: radial-gradient(circle at 50% 40%, #182050, #070912); border: 1px solid var(--c-line); border-radius: var(--rad-s); cursor: pointer; overflow: hidden; transition: border-color 100ms, box-shadow 100ms; }
.slot:hover { border-color: var(--c-neon); box-shadow: 0 0 8px rgba(76, 195, 255, .6); }
.slot canvas.si { width: 100%; height: 100%; image-rendering: pixelated; padding: 5px; display: block; }
.slot canvas.si.skhd { position: absolute; left: 2px; top: 2px; padding: 0; }
#hotbar .slot:has(.skhd) { width: 50px; height: 50px; background: #05060c; border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px #000, 0 2px 4px rgba(0, 0, 0, .5); }
#hotbar .slot.is-ready:has(.skhd) { border-color: rgba(255, 214, 120, .55); box-shadow: inset 0 0 0 1px #000, 0 0 7px rgba(255, 200, 90, .35); }
#hotbar .slot.is-ready:has(.skhd):hover { border-color: #ffd678; box-shadow: 0 0 10px rgba(255, 210, 110, .7); }
#hotbar .slot .cdt { z-index: 2; font-size: 14px; color: #fff; text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
#hotbar .slot.oncd .cost { display: none; }
#hotbar .slot.locked:has(.skhd) { filter: none; }
#hotbar .slot.locked:has(.skhd)::after { inset: auto 0 0 0; height: 13px; z-index: 3; background: rgba(5, 6, 14, .85); font-size: 9px; color: #c9cfe0; }
#hotbar .slot.locked:has(.skhd) .cost { display: none; }
.slot .key { position: absolute; top: 1px; left: 1px; z-index: 2; padding: 1px 3px; background: rgba(5, 6, 14, .82); border-radius: 0 0 3px 0; font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; line-height: 1; }
.slot .cost { position: absolute; bottom: 1px; right: 1px; z-index: 2; padding: 0 3px; background: rgba(5, 6, 14, .82); border-radius: 3px 0 0 0; line-height: 1.25; font-size: var(--fs-xs); font-weight: 800; color: #8fc0ff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.slot canvas.cd { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; padding: 0; }
.slot .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-l); text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: none; }
.slot.locked { filter: grayscale(1) brightness(.5); cursor: default; }
.slot.locked::after { content: attr(data-req); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 800; color: #ddd; text-shadow: 0 0 3px #000; }
.slot.nomp .si { filter: saturate(.3) brightness(.55); }
.slot.nomp .cost { color: var(--c-bad); }
.slot.ready { animation: ready .45s; }
@keyframes ready { 40% { box-shadow: 0 0 18px var(--c-neon), 0 0 0 2px var(--c-neon) inset; } }
.hb-sep { width: 1px; background: linear-gradient(180deg, transparent, var(--c-line-strong), transparent); margin: 0 3px; }
.slot .qty { position: absolute; bottom: 1px; right: 3px; font-size: var(--fs-s); font-weight: 800; text-shadow: 0 0 2px #000, 0 0 2px #000; }

/* abajo-izquierda: chat */
#chat { position: absolute; left: var(--edge); bottom: var(--edge); width: 360px; display: flex; flex-direction: column; transform-origin: bottom left; transform: scale(var(--ui-scale)); background: rgba(6, 10, 24, var(--chat-alpha)); transition: opacity .6s ease, background .3s; }
#chat.faded:not(:hover):not(:focus-within) { opacity: .38; }
#chat.faded:not(:hover):not(:focus-within) .chat-tabs, #chat.faded:not(:hover):not(:focus-within) #chat-in { opacity: 0; }
.chat-tabs { display: flex; align-items: stretch; border-bottom: var(--bd); transition: opacity .4s; }
.chat-tabs button { position: relative; flex: 1; background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--c-text-dim); font-weight: 700; padding: 6px 4px; cursor: pointer; font-size: var(--fs-s); }
.chat-tabs button:hover { color: var(--c-text); }
.chat-tabs button.active { color: var(--c-neon); border-bottom-color: var(--c-neon); }
.chat-tabs button .dot { position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-hp); box-shadow: 0 0 4px var(--c-hp); }
.chat-tabs .chat-min { flex: 0 0 32px; font-size: 18px; line-height: 1; padding: 2px 0 4px; }
#chat-log { height: 150px; overflow-y: auto; padding: 6px 10px; font-size: var(--fs-m); line-height: 1.35; scrollbar-width: thin; scrollbar-color: rgba(76, 195, 255, .3) transparent; user-select: text; -webkit-user-select: text; }
#chat-log .ln { word-wrap: break-word; color: var(--ch-all); text-shadow: 0 1px 1px rgba(0, 0, 0, .8); }
#chat-log .ln .ts { color: var(--c-text-mute); font-size: var(--fs-xs); margin-right: 4px; font-variant-numeric: tabular-nums; }
#chat-log .ln .n { font-weight: 700; }
#chat-log .ln.system { color: var(--ch-sys); } #chat-log .ln.loot { color: var(--ch-loot); } #chat-log .ln.trade { color: var(--ch-trade); } #chat-log .ln.warn { color: var(--ch-warn); }
#chat-in { border: 0; border-top: var(--bd); background: rgba(0, 0, 0, .4); color: #fff; padding: 7px 10px; font-family: var(--f-ui); font-size: var(--fs-m); outline: none; border-radius: 0 0 var(--rad-m) var(--rad-m); transition: opacity .4s, background var(--dur); }
#chat-in:focus { background: rgba(10, 20, 50, .9); box-shadow: 0 0 0 1px var(--c-neon) inset; }
#chat-in::placeholder { color: var(--c-text-mute); }
#chat-bar { display: none; align-items: center; gap: 8px; background: transparent; border: 0; color: var(--c-text); padding: 7px 10px; cursor: pointer; font-size: var(--fs-m); font-weight: 700; text-align: left; }
#chat-bar svg { width: 18px; height: 18px; color: var(--c-neon); }
#chat-bar:hover { color: var(--c-neon); }
#chat-bar .cb-t { font-family: var(--f-title); font-size: 10px; letter-spacing: 1px; color: var(--c-neon); }
#chat-unread { margin-left: auto; }
#chat.min { width: auto; min-width: 150px; opacity: 1 !important; }
#chat.min .chat-tabs, #chat.min #chat-log, #chat.min #chat-in { display: none; }
#chat.min #chat-bar { display: flex; }

/* abajo-derecha: micro-menú */
#menubar { position: absolute; right: var(--edge); bottom: var(--edge); display: flex; gap: 4px; padding: 5px; transform-origin: bottom right; transform: scale(var(--ui-scale)); }
#menubar .ib { background: rgba(0, 0, 0, .3); }
#menubar .sep { width: 1px; background: var(--c-line); margin: 4px 2px; }

/* jefe / mazmorra */
#bossbar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: min(520px, 46vw); text-align: center; z-index: 4; }
.bb-name { font-family: var(--f-title); font-size: 20px; color: #ff7a94; text-shadow: 0 0 8px #ff2050, 0 2px 0 #000; margin-bottom: 4px; }
.bb-bar { position: relative; height: 18px; background: rgba(0, 0, 0, .78); border: 1px solid #ff3a6a; border-radius: var(--rad-s); box-shadow: 0 0 14px rgba(255, 30, 80, .45); overflow: hidden; }
.bb-bar .fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #ff4a6a, #8a0020); transition: width .25s; }
.bb-bar span { position: relative; font-weight: 700; font-size: 13px; line-height: 18px; text-shadow: 0 0 3px #000; }
#dginfo { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 5px 14px; font-weight: 700; font-size: var(--fs-m); color: var(--c-neon); white-space: nowrap; }
body.has-boss #notifs { top: 84px; } body.has-dg #notifs { top: 56px; } body.has-boss.has-dg #notifs { top: 84px; }

#death { position: absolute; inset: 0; background: radial-gradient(rgba(80, 0, 20, .5), rgba(0, 0, 0, .85)); display: flex; align-items: center; justify-content: center; animation: fade-in .4s; z-index: 30; }
@keyframes fade-in { from { opacity: 0; } }
.death-box { padding: 24px 40px; text-align: center; border-color: #ff3a5a; background: var(--c-surface); }
.death-box h2 { font-family: var(--f-title); font-weight: 400; color: #ff3a5a; text-shadow: 0 0 14px #ff0030; font-size: 30px; margin: 0 0 12px; }
.death-timer { font-family: var(--f-title); font-size: 30px; margin: 10px 0; }
#conn { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; z-index: 60; }
.conn-box { padding: 14px 24px; display: flex; gap: 12px; align-items: center; font-weight: 700; }
.spinner { width: 18px; height: 18px; border: 2px solid var(--c-neon); border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ VENTANAS: CONTENIDO ============ */
/* inventario */
.inv-tools { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.inv-tools .sp { flex: 1; }
.grid { display: grid; grid-template-columns: repeat(6, 46px); gap: 5px; }
.inv-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: var(--fs-s); color: var(--c-text-dim); }
.inv-foot .gold { font-weight: 800; font-size: var(--fs-m); display: inline-flex; align-items: center; gap: 4px; }
.cap { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); margin-top: 6px; overflow: hidden; } .cap div { height: 100%; background: var(--c-neon); }
.cap.full div { background: var(--c-bad); }

/* personaje */
.char-wrap { display: grid; grid-template-columns: 238px minmax(0, 1fr); gap: 18px; }
.paperdoll { display: grid; grid-template-columns: 46px 1fr 46px; gap: 10px 8px; align-items: center; }
.paperdoll .col { display: flex; flex-direction: column; gap: 10px; }
.paperdoll .lbl { font-size: 10px; color: var(--c-text-mute); text-align: center; margin-top: 2px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.hero-stage { position: relative; height: 262px; border-radius: var(--rad-m); border: 1px solid rgba(168, 92, 255, .45); background: radial-gradient(ellipse at 50% 85%, rgba(76, 195, 255, .28), transparent 55%), radial-gradient(circle at 50% 35%, #1d2558, #070a18 75%); overflow: hidden; }
.hero-stage::after { content: ""; position: absolute; left: 50%; bottom: 22px; width: 110px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(rgba(76, 195, 255, .5), transparent 70%); }
.hero-stage canvas { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); width: 144px; height: 228px; z-index: 1; image-rendering: pixelated; }
.hero-stage .rot { position: absolute; bottom: 4px; z-index: 2; width: 24px; height: 24px; }
.hero-stage .rot.l { left: 4px; } .hero-stage .rot.r { right: 4px; }
.hero-id { text-align: center; margin-top: 10px; }
.hero-id .nm { font-weight: 800; font-size: var(--fs-xl); display: flex; align-items: center; justify-content: center; gap: 6px; }
.hero-id .cl { color: var(--c-text-dim); font-size: var(--fs-s); font-weight: 600; }
.statrow { display: grid; grid-template-columns: 1fr auto 26px; align-items: center; gap: 8px; padding: 5px 2px; border-bottom: 1px solid var(--c-line-soft); cursor: help; }
.statrow .sk { font-weight: 700; } .statrow .sk small { color: var(--c-text-dim); font-weight: 400; margin-left: 6px; }
.statrow b { color: var(--c-neon-hi); font-variant-numeric: tabular-nums; }
.statrow b small { color: var(--c-ok); font-weight: 600; margin-left: 4px; }
.plus { width: 24px; height: 24px; padding: 0; border: 1px solid var(--c-neon); background: rgba(76, 195, 255, .15); color: var(--c-neon); cursor: pointer; font-weight: 800; border-radius: var(--rad-s); font-size: 16px; line-height: 1; }
.plus:hover:not(:disabled) { background: rgba(76, 195, 255, .35); color: #fff; }
.plus:disabled { opacity: .2; cursor: default; }
.pts { color: var(--c-gold); }
.pts.zero { color: var(--c-text-dim); }
.dstat { display: flex; justify-content: space-between; padding: 4px 2px; border-bottom: 1px solid var(--c-line-soft); cursor: help; font-size: var(--fs-m); }
.dstat span { color: var(--c-text-dim); } .dstat b { font-variant-numeric: tabular-nums; }
.rank-prog { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
.rank-prog .rank-badge { min-width: 36px; height: 36px; font-size: 20px; grid-row: span 2; }

/* misiones */
.qcard { border: var(--bd); border-left: 3px solid var(--c-neon); border-radius: var(--rad-s); padding: 10px 12px; margin-bottom: 8px; background: var(--c-surface-3); }
.qcard h4 { margin: 0 0 4px; font-size: var(--fs-l); display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.qcard p { margin: 0 0 4px; font-size: 13px; color: var(--c-text-dim); }
.qcard .rw { color: var(--c-gold); font-size: 13px; font-weight: 600; }
.qcard .prog { height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .6); margin: 6px 0 2px; overflow: hidden; } .qcard .prog div { height: 100%; background: linear-gradient(90deg, var(--c-neon), var(--c-neon-2)); }
.qcard.done { border-left-color: var(--c-ok); } .qcard.done .prog div { background: var(--c-ok); }
.qcard.lock { opacity: .6; border-left-color: var(--c-text-mute); }
.qcard .row { margin-top: 8px; justify-content: flex-end; }
.empty { text-align: center; color: var(--c-text-dim); padding: 24px 12px; }
.empty svg { width: 40px; height: 40px; color: var(--c-text-mute); display: block; margin: 0 auto 8px; }

/* ranking */
table.rk { width: 100%; border-collapse: collapse; font-size: var(--fs-m); }
table.rk td, table.rk th { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--c-line-soft); white-space: nowrap; }
table.rk th { color: var(--c-text-dim); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 1px; position: sticky; top: 0; background: var(--c-surface); }
table.rk td.num, table.rk th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.rk tr.me td { background: rgba(76, 195, 255, .12); }
table.rk tr.me td:first-child { box-shadow: 3px 0 0 var(--c-neon) inset; }
table.rk .pos { font-family: var(--f-title); font-size: 10px; color: var(--c-text-dim); }
table.rk tr.p1 .pos { color: #ffd23a; } table.rk tr.p2 .pos { color: #d8e0f0; } table.rk tr.p3 .pos { color: #e08a50; }
.ondot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c-ok); box-shadow: 0 0 5px var(--c-ok); margin-right: 6px; vertical-align: middle; }
.offdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c-text-mute); margin-right: 6px; vertical-align: middle; }

/* tienda */
.shop-list { display: flex; flex-direction: column; gap: 4px; }
.shop-item { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; background: var(--c-surface-3); border: 1px solid transparent; border-radius: var(--rad-s); }
.shop-item:hover { border-color: var(--c-line-strong); background: rgba(76, 195, 255, .06); }
.shop-item .ic { width: 40px; height: 40px; border-radius: var(--rad-s); border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .4); }
.shop-item .ic canvas { width: 100%; height: 100%; padding: 4px; display: block; }
.shop-item .nm { font-weight: 700; min-width: 0; } .shop-item .nm small { display: block; color: var(--c-text-dim); font-weight: 500; font-size: var(--fs-s); }
.shop-item .pr { color: var(--c-gold); font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.shop-item.na .nm { color: var(--c-text-dim); }
.shop-item .pr.no { color: var(--c-bad); }

/* forja */
.smith-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; background: radial-gradient(rgba(168, 92, 255, .2), transparent 70%); position: relative; min-height: 190px; border: var(--bd); border-radius: var(--rad-m); }
.smith-item { width: 76px; height: 76px; border: 2px solid var(--c-neon-2); border-radius: var(--rad-m); background: rgba(0, 0, 0, .5); position: relative; }
.smith-item canvas { width: 100%; height: 100%; padding: 8px; image-rendering: pixelated; }
.smith-item.anim { animation: forge .9s ease-in-out; }
@keyframes forge { 0%, 100% { transform: none; } 20%, 60% { transform: rotate(-6deg) scale(1.05); } 40%, 80% { transform: rotate(6deg) scale(1.05); } }
.smith-item.ok { animation: okk 1s; } @keyframes okk { 0% { box-shadow: 0 0 0 #ffd23a; } 30% { box-shadow: 0 0 40px 10px #ffd23a; transform: scale(1.15); } 100% { box-shadow: 0 0 0 #ffd23a; } }
.smith-item.fail { animation: fai .8s; } @keyframes fai { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); filter: brightness(.4) sepia(1) hue-rotate(-50deg) saturate(5); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } }
.chance { font-family: var(--f-title); font-size: 30px; }
.chance.hi { color: var(--c-ok); } .chance.mid { color: #ffc234; } .chance.lo { color: var(--c-bad); }
.smith-res { font-family: var(--f-title); font-size: 20px; min-height: 20px; }
.smith-res.ok { color: #ffd23a; text-shadow: 0 0 8px #ffd23a; } .smith-res.fail { color: var(--c-bad); }
.ench-steps { display: flex; gap: 3px; margin: 4px 0; }
.ench-steps span { width: 20px; height: 6px; border-radius: 1px; background: rgba(255, 255, 255, .1); }
.ench-steps span.on { background: linear-gradient(90deg, #ffd23a, #ff9a3a); box-shadow: 0 0 4px #ffd23a; }
.odds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 10px; }
.odds span { text-align: center; font-size: var(--fs-xs); padding: 3px 0; border-radius: var(--rad-s); background: var(--c-surface-3); color: var(--c-text-dim); font-weight: 700; }
.odds span.cur { color: #fff; box-shadow: 0 0 0 1px var(--c-neon) inset; }

/* gremio / rango */
.rank-big { font-family: var(--f-title); font-size: 40px; text-align: center; padding: 10px; text-shadow: 0 0 20px currentColor; }
.rank-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 10px 0 14px; position: relative; }
.rank-track span { font-family: var(--f-title); font-size: 20px; padding: 6px 0; text-align: center; border: 1px solid #2a3050; border-radius: var(--rad-s); opacity: .4; background: rgba(0, 0, 0, .35); }
.rank-track span.got { opacity: 1; box-shadow: 0 0 8px currentColor inset; border-color: currentColor; }
.rank-track span.next { opacity: .85; border-style: dashed; border-color: currentColor; }
.req { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--c-line-soft); }
.req .ck { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; flex: none; }
.req.ok .ck { background: rgba(61, 220, 106, .2); color: var(--c-ok); border: 1px solid var(--c-ok); }
.req.no .ck { background: rgba(255, 90, 110, .15); color: var(--c-bad); border: 1px solid var(--c-bad); }
.req .bar { flex: 1; max-width: 140px; height: 8px; }

/* menú principal y ajustes */
.panel.modal { left: 50% !important; top: 50% !important; transform-origin: center; transform: translate(-50%, -50%) scale(var(--ui-scale)); animation: modal-in var(--dur) var(--ease); }
.panel.modal.closing { animation: modal-out 140ms ease-in forwards; }
@keyframes modal-in { from { opacity: 0; transform: translate(-50%, -48%) scale(calc(var(--ui-scale) * .97)); } }
@keyframes modal-out { to { opacity: 0; transform: translate(-50%, -48%) scale(calc(var(--ui-scale) * .97)); } }
.panel.modal .ph { cursor: default; }
#veil { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(5, 8, 22, .55), rgba(0, 0, 0, .78)); pointer-events: auto; animation: fade-in var(--dur); z-index: 0; }
.mainmenu { display: flex; flex-direction: column; gap: 8px; width: 280px; }
.mainmenu .btn { justify-content: flex-start; min-height: 42px; font-size: var(--fs-l); padding: 8px 16px; }
.mainmenu .btn svg { width: 20px; height: 20px; color: var(--c-neon); }
.mainmenu .btn.danger svg { color: var(--c-bad); }
.mainmenu .btn .kbd { margin-left: auto; }
.mm-logo { display: block; width: 220px; margin: 0 auto 10px; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(76, 195, 255, .55)); }
.settings { width: 640px; max-width: 100%; }
.binds { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.bind { display: grid; grid-template-columns: 1fr 104px; align-items: center; gap: 8px; padding: 5px 2px; border-bottom: 1px solid var(--c-line-soft); }
.bind .kb { height: 28px; border: 1px solid var(--c-line); border-bottom-width: 2px; border-radius: var(--rad-s); background: rgba(0, 0, 0, .4); color: #fff; font-weight: 800; font-size: var(--fs-s); cursor: pointer; }
.bind .kb:hover { border-color: var(--c-neon); }
.bind .kb.wait { border-color: var(--c-gold); color: var(--c-gold); animation: blink 1s infinite; }
.bind.conflict .kb { border-color: var(--c-bad); color: var(--c-bad); box-shadow: 0 0 6px rgba(255, 90, 110, .5); }
@keyframes blink { 50% { opacity: .5; } }
.set-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; }
.help h4 { margin: 12px 0 4px; color: var(--c-neon); font-size: var(--fs-m); } .help p, .help li { color: var(--c-text-dim); font-size: 13px; margin: 2px 0; line-height: 1.45; }
.help ul { padding-left: 18px; margin: 4px 0; }

/* mapa del mundo */
.panel.big { max-height: calc(100vh - 16px); }
.wmap { display: grid; grid-template-columns: 1fr 200px; gap: 12px; width: min(1180px, calc(100vw - 48px)); height: min(720px, calc(100vh - 96px)); }
.wm-view { position: relative; overflow: hidden; border: 1px solid var(--c-line-strong); border-radius: var(--rad-m); background: #04060f; cursor: grab; touch-action: none; }
.wm-view.drag { cursor: grabbing; }
.wm-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wm-zoom { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; }
.wm-zoom .ib { width: 32px; height: 32px; font-size: 18px; font-family: var(--f-ui); font-weight: 800; }
.wm-tip { position: absolute; pointer-events: none; padding: 5px 9px; background: rgba(4, 6, 16, .95); border: 1px solid var(--c-line-strong); border-radius: var(--rad-s); font-size: var(--fs-s); font-weight: 700; white-space: nowrap; transform: translate(-50%, calc(-100% - 12px)); }
.wm-tip small { display: block; color: var(--c-text-dim); font-weight: 500; }
.wm-coords { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-dim); background: rgba(4, 6, 16, .85); border-radius: var(--rad-s); border: var(--bd); }
.wm-side { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; }
.wm-side .zn { font-family: var(--f-title); font-size: 20px; color: var(--c-neon-hi); line-height: 1.1; }
.legend { display: flex; flex-direction: column; gap: 2px; }
.legend label { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--rad-s); cursor: pointer; font-size: var(--fs-s); font-weight: 600; }
.legend label:hover { background: rgba(76, 195, 255, .08); }
.legend input { accent-color: var(--c-neon); margin: 0; }
.legend canvas { width: 18px; height: 18px; flex: none; }
.legend label.off { opacity: .45; }

/* ============ TÁCTIL ============ */
#touch { position: absolute; inset: 0; }
#joy { position: absolute; left: 30px; bottom: 40px; width: 130px; height: 130px; border-radius: 50%; border: 2px solid rgba(76, 195, 255, .5); background: radial-gradient(rgba(76, 195, 255, .15), rgba(0, 0, 0, .3)); pointer-events: auto; }
#joy-knob { position: absolute; left: 40px; top: 40px; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(#7fd9ff, #2a5fd0); box-shadow: 0 0 12px var(--c-neon); }
#tbtns { position: absolute; right: 20px; bottom: 30px; width: 200px; height: 200px; pointer-events: none; }
.tb { position: absolute; pointer-events: auto; width: 52px; height: 52px; border-radius: 50%; background: rgba(10, 18, 40, .78); border: 2px solid var(--c-neon); color: #fff; font-family: var(--f-title); font-size: 20px; }
.tb.big { width: 80px; height: 80px; right: 10px; bottom: 10px; font-size: 20px; border-color: var(--c-neon-2); box-shadow: 0 0 14px rgba(168, 92, 255, .6); }
.tb.s0 { right: 100px; bottom: 0; } .tb.s1 { right: 100px; bottom: 62px; } .tb.s2 { right: 60px; bottom: 112px; } .tb.s3 { right: 0; bottom: 120px; }
.tb.sm { width: 40px; height: 40px; font-size: 10px; } .tb.q { right: 160px; bottom: 120px; } .tb.e { right: 110px; bottom: 150px; } .tb.f { right: 160px; bottom: 170px; }

/* ============ RESPONSIVE ============ */
/* 720p y pantallas bajas: compactar */
@media (max-height: 760px) { #chat-log { height: 120px; } }
/* ultra-ancho: el HUD no se va a los extremos */
@media (min-aspect-ratio: 21/9) { #hud { --edge: max(12px, calc((100vw - 100vh * 16 / 9) / 2 + 12px)); } }
@media (max-width: 980px) { .wmap { grid-template-columns: 1fr; } .wm-side { display: none; } }
@media (max-width: 900px) { #menubar .ib .kbd { display: none; } }

/* táctil (móvil): marco y minimapa compactos arriba, menú y hotbar debajo, chat minimizado */
body.touch #pframe { width: 228px; grid-template-columns: 52px 1fr; padding: 7px 8px; }
body.touch .pf-por { width: 52px; height: 52px; padding: 2px; }
body.touch #pf-portrait { width: 48px; height: 48px; }
body.touch .pf-name #pf-name { font-size: var(--fs-m); }
body.touch .pf-sub .pf-cls { display: none; }
body.touch .pf-bars .bar { height: 13px; } body.touch .pf-bars .bar > span { line-height: 11px; font-size: 10px; }
body.touch #topright { gap: 4px; }
body.touch .mm { width: 118px; height: 118px; }
body.touch .mm-info { width: 130px; padding: 3px 4px; }
body.touch .mm-meta { gap: 6px; font-size: 10px; }
body.touch .net-row { gap: 4px; font-size: 10px; } body.touch .net-chip { padding: 0 5px; } body.touch .net-chip small { display: none; }
body.touch #mm-time { display: none; }
body.touch #actionbar { bottom: auto; top: 184px; transform: translateX(-50%) scale(calc(var(--ui-scale) * .82)); transform-origin: top center; }
body.touch #menubar { bottom: auto; top: 248px; right: 50%; transform: translateX(50%) scale(var(--ui-scale)); transform-origin: top center; padding: 3px; }
body.touch #menubar .ib { width: 36px; height: 36px; } body.touch #menubar .ib .kbd { display: none; }
body.touch #chat { bottom: auto; top: 298px; width: min(300px, 70vw); }
body.touch #chat.min { width: auto; }
body.touch #chat-log { height: 90px; font-size: 13px; }
body.touch #notifs { top: 346px; width: calc(100vw - 24px); }
body.touch .panel:not(.modal) { background: rgba(7, 11, 26, .985); left: 8px !important; right: 8px !important; top: 8px !important; bottom: 8px !important; max-height: none; min-width: 0; transform: none; animation: sheet-in var(--dur) var(--ease); }
body.touch .panel.closing:not(.modal) { animation: win-out 140ms ease-in forwards; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(14px); } }
body.touch .panel .ph { cursor: default; }
body.touch .panel .x { width: 36px; height: 36px; }
@media (max-width: 560px) {
  #notifs { width: calc(100vw - 24px); } .notif { font-size: 13px; }
  #banner { font-size: 30px; } #banner small { font-size: var(--fs-s); }
  .char-wrap { grid-template-columns: 1fr; }
  .paperdoll { max-width: 260px; margin: 0 auto; }
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid .cell { width: auto; aspect-ratio: 1; height: auto; }
  .binds { grid-template-columns: 1fr; }
  .opt { grid-template-columns: 1fr 120px 40px; }
  .settings, .mainmenu { width: auto; }
  .wmap { width: auto; height: calc(100vh - 90px); }
  .panel.modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  #bossbar { width: 60vw; top: 150px; } #dginfo { top: 130px; }
  .shop-item { grid-template-columns: 36px 1fr auto; } .shop-item .pr { grid-column: 2; text-align: left; } .shop-item .btn { grid-row: 1 / 3; grid-column: 3; }
}
@media (max-width: 760px) { .cls-card canvas { width: 60px; height: 72px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }

/* Aptitudes: superficies vectoriales nítidas y progreso confirmado por el servidor. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.panel.aptitudes-panel { width: min(800px, calc((100vw - 24px) / var(--ui-scale))); max-width: calc((100vw - 24px) / var(--ui-scale)); max-height: calc((100vh - 32px) / var(--ui-scale)); }
.aptitudes-panel .pb { padding: 18px; background: linear-gradient(135deg, rgba(76, 195, 255, .025), transparent 45%), var(--c-surface); }
.aptitudes { font-family: var(--f-ui); font-size: var(--fs-m); line-height: 1.45; color: var(--c-text); }
.aptitudes h4 { margin: 3px 0 4px; font-size: var(--fs-l); line-height: 1.3; font-weight: 750; }
.aptitudes p { margin: 4px 0 0; }
.aptitudes button, .aptitudes select { font-family: inherit; }
.aptitudes button:focus-visible, .aptitudes select:focus-visible { outline: 2px solid var(--c-neon); outline-offset: 3px; }
.apt-intro { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; }
.apt-intro > div:first-child { min-width: 0; }
.apt-intro h4 { font-size: var(--fs-xl); }
.apt-intro p { color: var(--c-text-dim); font-size: var(--fs-s); }
.apt-eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--c-neon); }
.apt-purse { display: flex; gap: 6px; flex: none; }
.apt-purse > span { max-width: 118px; display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; border: 1px solid var(--c-line); border-radius: var(--rad-m); background: var(--c-surface-3); font-size: var(--fs-xs); text-align: center; color: var(--c-text-dim); }
.apt-purse b { color: var(--c-neon); font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.apt-purse > span:last-child b { color: var(--c-neon-2); }
.apt-tabs { margin-bottom: 16px; }
.apt-tabs button { min-height: 44px; }
.apt-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; margin-left: 8px; padding: 0 5px; border-radius: var(--rad-pill); font-size: var(--fs-xs); background: var(--c-surface-3); color: var(--c-neon); }
.apt-skill-layout { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(0, 1.3fr); gap: 16px; align-items: stretch; }
.apt-skill-list { display: flex; flex-direction: column; gap: 8px; }
.apt-skill-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) 25px; align-items: center; gap: 10px; width: 100%; min-height: 76px; text-align: left; background: var(--c-surface-3); border: 1px solid var(--c-line-soft); border-radius: var(--rad-m); color: var(--c-text); padding: 10px; cursor: pointer; transition: border-color var(--dur), background var(--dur); }
.apt-skill-card:hover { border-color: var(--c-line-strong); background: var(--c-surface-2); }
.apt-skill-card.selected { border-color: var(--c-neon); background: linear-gradient(100deg, rgba(76, 195, 255, .13), rgba(76, 195, 255, .025)); box-shadow: inset 3px 0 var(--c-neon); }
.apt-glyph { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--c-neon); background: radial-gradient(circle, rgba(76, 195, 255, .16), transparent 74%); border: 1px solid var(--c-line); border-radius: var(--rad-m); }
.apt-glyph svg { width: 30px; height: 30px; }
.apt-glyph:has(.skhd), .apt-node-icon:has(.skhd) { background: none; border: 0; padding: 0; }
.apt-node.is-locked .apt-node-icon:has(.skhd), .apt-skill-card.is-locked .apt-glyph:has(.skhd) { opacity: 1; filter: none; }
.apt-skill-label { min-width: 0; }
.apt-skill-label strong { display: block; font-size: var(--fs-m); line-height: 1.3; }
.apt-skill-label small { display: block; margin-top: 4px; font-size: var(--fs-xs); line-height: 1.35; color: var(--c-text-dim); }
.apt-rank-tag { font-size: 20px; font-weight: 750; color: var(--c-neon); white-space: nowrap; font-variant-numeric: tabular-nums; }
.apt-rank-tag small { font-size: var(--fs-xs); color: var(--c-text-mute); font-weight: 500; }
.apt-rank-tag svg { display: block; width: 18px; height: 18px; color: var(--c-text-mute); }
.apt-detail { min-width: 0; padding: 16px; background: var(--c-surface-3); border: 1px solid var(--c-line); border-radius: var(--rad-m); display: flex; flex-direction: column; }
.apt-detail-heading { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.apt-detail-heading h4 { font-size: var(--fs-xl); }
.apt-description { color: var(--c-text-dim); font-size: var(--fs-s); min-height: 36px; }
.apt-compare { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.apt-compare th, .apt-compare td { padding: 8px 3px; border-bottom: 1px solid var(--c-line-soft); text-align: right; font-weight: 600; }
.apt-compare th:first-child { text-align: left; font-weight: 500; color: var(--c-text-dim); }
.apt-compare thead th { font-size: var(--fs-xs); color: var(--c-text-dim); font-weight: 600; padding-top: 0; }
.apt-compare .apt-changed { color: var(--c-neon); }
.apt-upgrade { width: 100%; min-height: 44px; margin-top: auto; }
.apt-reason { color: var(--c-text-dim); font-size: var(--fs-xs); min-height: 32px; padding-top: 4px; }
.apt-rule { color: var(--c-text-mute); font-size: var(--fs-xs); padding: 10px 0 2px; }
.apt-notice { padding: 10px 12px; border: 1px solid var(--c-line-soft); border-radius: var(--rad-s); background: var(--c-surface-3); margin-top: 12px; font-size: var(--fs-s); color: var(--c-text-dim); }
.apt-notice.bad { color: var(--c-warn); border-color: var(--c-warn); }
.apt-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; }
.apt-footer .hint { font-size: var(--fs-xs); }
.apt-reset { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; font-size: var(--fs-s); flex: none; }
.apt-reset svg { width: 16px; height: 16px; }
.apt-confirm { background: var(--c-surface-2); border: 1px solid var(--c-neon-2); border-radius: var(--rad-m); padding: 14px; margin-top: 12px; }
.apt-confirm p { color: var(--c-text-dim); font-size: var(--fs-s); }
.apt-confirm .row { margin-top: 12px; justify-content: flex-end; }
.apt-confirm .btn { min-height: 44px; }
.apt-trees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.apt-tree { min-width: 0; padding: 12px 10px; border: 1px solid var(--c-line); border-top: 2px solid var(--branch-color); border-radius: var(--rad-m); background: var(--c-surface-3); }
.apt-tree-heading { min-height: 92px; padding: 0 2px 12px; }
.apt-tree-heading .apt-eyebrow { color: var(--branch-color); }
.apt-tree-heading h4 { font-size: var(--fs-l); }
.apt-tree-heading p { color: var(--c-text-dim); font-size: var(--fs-xs); }
.apt-node { position: relative; width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) 21px; align-items: center; gap: 8px; min-height: 76px; padding: 10px 7px; background: var(--c-surface-2); color: var(--c-text); text-align: left; border: 1px solid var(--c-line-soft); border-radius: var(--rad-s); cursor: pointer; }
.apt-node + .apt-node { margin-top: 18px; }
.apt-node + .apt-node::before { content: ''; position: absolute; left: 25px; top: -19px; width: 4px; height: 17px; background: linear-gradient(90deg, #000 0 1px, color-mix(in srgb, var(--branch-color) 30%, #10131f) 1px 3px, #000 3px); }
.apt-node.is-learned + .apt-node::before, .apt-node.is-max + .apt-node::before { background: linear-gradient(90deg, #000 0 1px, var(--branch-color) 1px 3px, #000 3px); box-shadow: 0 0 6px var(--branch-color); }
.apt-node.is-available { border-color: color-mix(in srgb, var(--branch-color) 55%, transparent); border-style: dashed; }
.apt-node.is-learned { background: linear-gradient(100deg, color-mix(in srgb, var(--branch-color) 14%, transparent), var(--c-surface-2) 70%); }
.apt-node.is-max { border-color: #ffd678; background: linear-gradient(100deg, rgba(255, 214, 120, .16), var(--c-surface-2) 70%); }
.apt-node.is-max .apt-node-rank { color: #ffd678; }
.apt-node.is-locked { background: var(--c-surface-3); }
.apt-node.is-locked strong { color: var(--c-text-dim); }
.apt-node:hover { border-color: var(--branch-color); }
.apt-node.selected { border-color: var(--branch-color); box-shadow: inset 3px 0 var(--branch-color); }
.apt-node strong { display: block; font-size: var(--fs-s); line-height: 1.3; }
.apt-node small { display: block; font-size: var(--fs-xs); margin-top: 4px; line-height: 1.35; color: var(--c-text-dim); }
.apt-node-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--branch-color); }
.apt-node-icon svg { width: 26px; height: 26px; }
.apt-node-rank { color: var(--branch-color); font-size: var(--fs-l); font-weight: 750; text-align: right; }
.apt-node-rank small { display: inline; color: var(--c-text-mute); font-weight: 400; }
.apt-node.is-locked .apt-node-icon, .apt-skill-card.is-locked .apt-glyph { opacity: .45; filter: saturate(.2); }
.apt-talent-detail { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 18px; margin-top: 14px; padding: 16px; border: 1px solid var(--c-line); border-radius: var(--rad-m); background: var(--c-surface-3); }
.apt-talent-detail > div > p { font-size: var(--fs-s); color: var(--c-text-dim); }
.apt-talent-effects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.apt-talent-effects small { display: block; color: var(--c-text-mute); font-size: var(--fs-xs); }
.apt-talent-effects b { display: block; margin-top: 3px; font-size: var(--fs-s); font-weight: 600; }
.apt-talent-effects > span:last-child b { color: var(--c-neon); }
.apt-talent-action { display: flex; flex-direction: column; justify-content: center; }
.apt-talent-action .apt-upgrade { margin-top: 0; }
.apt-branch-select { display: none; }
.slot .skill-rank { display: none; position: absolute; top: 2px; right: 4px; font-size: 10px; color: var(--c-neon); font-weight: 800; text-shadow: 0 1px 2px #000; }
.slot:focus-visible { outline: 2px solid var(--c-neon); outline-offset: 3px; }
body.touch .aptitudes-panel { width: auto; max-width: none; max-height: none; }
@media (max-width: 620px) {
  .aptitudes-panel .pb { padding: 14px; }
  .apt-intro { align-items: flex-start; gap: 10px; }
  .apt-intro h4 { font-size: var(--fs-l); }
  .apt-intro p { display: none; }
  .apt-purse { gap: 4px; }
  .apt-purse > span { max-width: 82px; padding: 6px 8px; font-size: 10px; }
  .apt-purse b { font-size: 20px; }
  .apt-eyebrow { font-size: 10px; }
  .apt-skill-layout { grid-template-columns: 1fr; gap: 12px; }
  .apt-skill-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .apt-skill-card { grid-template-columns: 28px minmax(0, 1fr); gap: 7px; min-height: 80px; padding: 8px; }
  .apt-skill-card .apt-rank-tag { display: none; }
  .apt-skill-label strong { font-size: var(--fs-s); }
  .apt-skill-label small { font-size: 10px; }
  .apt-glyph { width: 28px; height: 34px; border: 0; }
  .apt-glyph svg { width: 26px; height: 26px; }
  .apt-glyph canvas.skhd { width: 28px !important; height: 28px !important; image-rendering: auto !important; }
  .apt-detail { padding: 14px; }
  .apt-description { min-height: 0; }
  .apt-compare { margin: 12px 0; }
  .apt-compare th, .apt-compare td { padding: 7px 3px; }
  .apt-footer { flex-direction: column; align-items: stretch; gap: 8px; }
  .apt-reset { min-height: 44px; }
  .apt-branch-select { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .apt-branch-select label { color: var(--c-text-dim); font-size: var(--fs-s); }
  .apt-branch-select select { min-width: 160px; min-height: 44px; font-size: var(--fs-m); padding: 7px 10px; background: var(--c-surface-3); color: var(--c-text); border: 1px solid var(--c-line); border-radius: var(--rad-s); }
  .apt-trees { grid-template-columns: 1fr; }
  .apt-tree { display: none; padding: 12px; }
  .apt-tree.mobile-active { display: block; }
  .apt-tree-heading { min-height: 0; }
  .apt-node { grid-template-columns: 34px minmax(0, 1fr) 28px; min-height: 66px; padding: 10px; }
  .apt-node strong { font-size: var(--fs-m); }
  .apt-node small { font-size: var(--fs-xs); }
  .apt-talent-detail { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .apt-talent-effects { gap: 8px; }
  .apt-reason { min-height: 0; }
}
/* El saldo y el reinicio permanecen accesibles mientras se consulta el árbol. */
.apt-footer { position: sticky; bottom: -18px; margin: 0 -18px -18px; padding: 12px 18px 18px; border-top: 1px solid var(--c-line-soft); background: var(--c-surface); z-index: 2; }
.apt-notice { margin-bottom: 12px; }
@media (max-width: 620px) { .apt-footer { bottom: -14px; margin: 0 -14px -14px; padding: 10px 14px 14px; } }

/* Gremios: controles vectoriales, tipografía de interfaz y contenido por pestaña. */
.guild-panel { width: min(920px, calc(100vw - 24px)); max-height: min(800px, calc(100dvh - 32px)); }
.guild-panel .ph h3, .guild-ui, .guild-ui h3, .guild-ui h4 { font-family: var(--f-ui); }
.guild-panel .pb { width: auto!important; overflow: auto; padding: 18px; }
.guild-ui { font-size: var(--fs-m); line-height: 1.45; }
.guild-ui button, .guild-ui input, .guild-ui textarea { font: inherit; }
.guild-ui button { min-height: 40px; }
.guild-ui button:focus-visible, .guild-ui input:focus-visible, .guild-ui textarea:focus-visible, .guild-ui summary:focus-visible { outline: 2px solid var(--c-neon); outline-offset: 3px; }
.guild-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.guild-heading h3 { font-size: 21px; line-height: 1.25; margin: 0 0 5px; overflow-wrap: anywhere; }
.guild-heading p { margin: 0; }
.guild-emblem { display: grid; place-items: center; flex: 0 0 54px; height: 60px; border: 1px solid var(--c-line-strong); border-radius: var(--rad-m); background: var(--c-surface-3); color: var(--c-neon); }
.guild-emblem svg { width: 34px; height: 34px; }
.guild-status { min-height: 20px; color: var(--c-text-dim); font-size: var(--fs-s); margin: 10px 0; }
.guild-status.bad { color: var(--c-bad); }
.guild-tabs { display: flex; gap: 4px; margin-bottom: 16px; overflow-x: auto; }
.guild-tabs button { flex: 1; padding: 10px 12px; white-space: nowrap; }
.guild-card { min-width: 0; padding: 16px; border: 1px solid var(--c-line); border-radius: var(--rad-m); background: var(--c-surface-2); margin-bottom: 12px; }
.guild-card h4 { margin: 0 0 10px; font-size: var(--fs-l); color: var(--c-text); }
.guild-card p { overflow-wrap: anywhere; }
.guild-card > .btn { margin: 6px 8px 0 0; }
.guild-field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; color: var(--c-text-dim); font-size: var(--fs-s); }
.guild-field input, .guild-field textarea { width: 100%; box-sizing: border-box; min-height: 42px; border: 1px solid var(--c-line-strong); border-radius: var(--rad-s); background: var(--c-surface-3); color: var(--c-text); padding: 9px 12px; }
.guild-field textarea { min-height: 82px; resize: vertical; }
.guild-check { display: flex; gap: 8px; align-items: center; margin: 12px 0; }
.guild-check input { width: 20px; height: 20px; }
.guild-details { border-top: 1px solid var(--c-line-soft); padding-top: 12px; }
.guild-details summary { cursor: pointer; color: var(--c-neon); padding: 6px 0; }
.guild-notice { white-space: pre-wrap; }
.guild-chat { max-height: 230px; min-height: 100px; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--c-line-soft); border-radius: var(--rad-s); background: var(--c-surface-3); }
.guild-chat p { margin: 4px 0; }
.guild-chat strong { color: var(--c-neon); }
.guild-directory-row, .guild-member-row, .guild-list-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid var(--c-line-soft); padding: 12px 0; }
.guild-directory-row > div, .guild-member-row > div, .guild-list-row > div, .guild-list-row > span { flex: 1 1 220px; min-width: 0; }
.guild-directory-row p, .guild-member-row p, .guild-list-row p { margin: 4px 0; }
.guild-member-list { max-height: 350px; overflow-y: auto; }
.guild-bank-grids { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.guild-bank-grids .guild-card { padding: 12px; }
.guild-slot-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.guild-slot { display: grid; place-items: center; padding: 0; aspect-ratio: 1; min-width: 0; border: 1px solid var(--c-line-soft); border-radius: var(--rad-s); background: var(--c-surface-3); cursor: pointer; }
.guild-slot .cell { width: 100%; height: 100%; min-width: 0; margin: 0; box-sizing: border-box; pointer-events: none; }
.guild-slot .cell canvas { max-width: 100%; max-height: 100%; }
.guild-slot.selected { border-color: var(--c-neon); outline: 2px solid var(--c-neon); outline-offset: 1px; }
.guild-slot:disabled { cursor: default; }
.guild-bank-reason { padding: 12px; border-left: 3px solid var(--c-warn); background: var(--c-surface-3); }
.guild-confirm { position: sticky; bottom: 0; border-color: var(--c-warn); box-shadow: var(--sh-2); background: var(--c-surface); z-index: 3; }
.guild-audit { max-height: 440px; overflow-y: auto; }
.guild-audit-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--c-line-soft); }
body.touch .guild-panel { width: auto; max-height: none; }
@media (max-width: 720px) {
 .guild-panel { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
 .guild-panel .pb { padding: 12px; }
 .guild-heading h3 { font-size: var(--fs-xl); }
 .guild-emblem { flex-basis: 42px; height: 48px; }
 .guild-ui button { min-height: 44px; }
 .guild-card { padding: 12px; }
 .guild-bank-grids { grid-template-columns: 1fr; }
 .guild-slot-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
 .guild-audit-row { grid-template-columns: 1fr; gap: 4px; }
}
.guild-bank-switch { display: none; }
.guild-ui .btn.primary { font-family: var(--f-ui); font-size: var(--fs-m); font-weight: 700; letter-spacing: .2px; }
.guild-ui { touch-action: pan-y; }
.guild-ui input, .guild-ui textarea { user-select: text; -webkit-user-select: text; }
@media (max-width: 720px) {
 .guild-bank-switch { display: flex; margin-bottom: 12px; }
 .guild-bank-switch button { flex: 1; }
 .guild-bank-side { display: none; }
 .guild-bank-side.mobile-active { display: block; }
 .guild-slot-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Respect interface scale when measuring the large guild window. */
.guild-panel { max-width: calc((100vw - 24px) / var(--ui-scale)); min-width: min(300px, calc((100vw - 24px) / var(--ui-scale))); max-height: min(800px, calc((100dvh - 32px) / var(--ui-scale))); }

/* ============ COMPACTO: ajustes de robustez (móvil vertical, horizontal y ventanas estrechas) ============ */
/* menú: no se desborda; si no cabe en una fila, baja a otra */
body.touch #menubar { left: 0 !important; right: 0 !important; margin-inline: auto; width: max-content; max-width: calc(100vw - 12px); flex-wrap: wrap; justify-content: center; transform: scale(var(--ui-scale)) !important; transform-origin: top center; }
body.touch #menubar .sep { display: none; }
body.touch #chat { top: 344px; } body.touch #notifs { top: 392px; }
body.touch #actionbar { max-width: calc(100vw - 8px); }
body.touch #hotbar { max-width: 100%; overflow: hidden; }
/* horizontal en móvil (poca altura): marco y minimapa arriba, menú arriba al centro, hotbar abajo entre joystick y botones */
@media (max-height: 500px) {
  body.touch #menubar { top: 6px; max-width: calc(100vw - 500px); padding: 2px; }
  body.touch #menubar .ib { width: 30px; height: 30px; }
  body.touch #actionbar { top: auto; bottom: 6px; transform: translateX(-50%) scale(calc(var(--ui-scale) * .72)); transform-origin: bottom center; }
  body.touch #chat { top: auto; bottom: 6px; left: 8px; width: 210px; }
  body.pad #chat { bottom: 170px; }
  body.touch #chat-log { height: 56px; font-size: 11px; }
  body.touch #notifs { top: 44px; }
  body.touch #bossbar { top: 44px; } body.touch #dginfo { top: 44px; }
  body.touch #q2-tracker { max-height: 90px; overflow: hidden; }
}
/* muy estrecho: marco compacto para que no choque con el minimapa */
@media (max-width: 400px) { body.touch #pframe { width: min(228px, calc(100vw - 144px)); } body.touch .pf-gold, body.touch .pf-sub { font-size: 11px; } }

/* ============ LOGIN NUEVO (src/login.js?v=f6917fed42) ============ */
.lg-card { width: min(460px, 100%); padding: 22px 26px 18px; background: var(--c-surface); border-color: var(--c-line-strong); margin: auto; }
.lg-card[data-view="reg2"] { width: min(640px, 100%); }
.lg-view { display: none; flex-direction: column; gap: 10px; animation: lg-in .25s var(--ease, ease); }
.lg-card[data-view="welcome"] [data-v="welcome"], .lg-card[data-view="login"] [data-v="login"], .lg-card[data-view="reg1"] [data-v="reg1"], .lg-card[data-view="reg2"] [data-v="reg2"], .lg-card[data-view="reg3"] [data-v="reg3"] { display: flex; }
@keyframes lg-in { from { opacity: 0; transform: translateY(8px); } }
.lg-view h2 { margin: 2px 0 2px; text-align: center; font-family: var(--f-title); font-size: 15px; letter-spacing: 1px; color: var(--c-neon-hi, var(--c-neon)); font-weight: 400; }
.lg-lead { text-align: center; color: var(--c-text-dim); margin: 4px 0 8px; }
.lg-big { width: 100%; min-height: 46px; font-size: var(--fs-l); }
.lg-view label { display: block; font-weight: 600; color: var(--c-text-dim); font-size: var(--fs-m); }
.lg-view input { display: block; width: 100%; margin-top: 4px; padding: 11px 12px; background: rgba(0, 0, 0, .5); border: 1px solid var(--c-line); color: #fff; font-family: var(--f-ui); font-size: 16px; border-radius: var(--rad-s); outline: none; }
.lg-view input:focus { border-color: var(--c-neon); box-shadow: 0 0 8px rgba(76, 195, 255, .5); }
.lg-view input.bad { border-color: var(--c-bad); } .lg-view input.good { border-color: #5fd68a; }
.lg-pw { position: relative; display: block; } .lg-pw input { padding-right: 44px; }
.lg-eye { position: absolute; right: 4px; top: 8px; width: 38px; height: 34px; background: transparent; border: 0; color: var(--c-text-dim); cursor: pointer; font-size: 16px; }
.lg-hint { display: block; min-height: 15px; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--c-text-mute, var(--c-text-dim)); } .lg-hint.bad { color: var(--c-bad); } .lg-hint.good { color: #5fd68a; }
.lg-meter { display: block; height: 4px; margin-top: 5px; background: rgba(255, 255, 255, .08); border-radius: 2px; overflow: hidden; } .lg-meter i { display: block; height: 100%; width: 0; background: var(--c-bad); transition: width .2s, background .2s; }
.lg-alt { text-align: center; color: var(--c-text-dim); font-size: var(--fs-m); }
.lg-link { background: none; border: 0; color: var(--c-neon); cursor: pointer; font: inherit; font-weight: 700; padding: 4px; }
.lg-back { background: none; border: 0; color: var(--c-text-dim); cursor: pointer; font: inherit; padding: 8px; align-self: center; } .lg-back:hover, .lg-link:hover { color: #fff; }
.lg-steps { display: flex; justify-content: center; gap: 6px; list-style: none; margin: 4px 0 10px; padding: 0; }
.lg-steps li { padding: 4px 12px; font-size: 12px; font-weight: 700; color: var(--c-text-mute, var(--c-text-dim)); border: 1px solid var(--c-line); border-radius: 14px; }
.lg-steps li.on { color: #fff; border-color: var(--c-neon); background: rgba(76, 195, 255, .15); } .lg-steps li.done { color: var(--c-neon); border-color: rgba(76, 195, 255, .5); }
.lg-classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lg-cls { background: rgba(0, 0, 0, .4); border: 1px solid var(--c-line); padding: 10px 6px 8px; text-align: center; cursor: pointer; border-radius: var(--rad-m); color: inherit; font: inherit; transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur); }
.lg-cls canvas { width: 100%; max-width: 120px; aspect-ratio: 5 / 6; image-rendering: pixelated; display: block; margin: 0 auto; }
.lg-cls b { display: block; font-size: var(--fs-l); } .lg-cls small { color: var(--c-text-dim); font-size: var(--fs-s); }
.lg-cls:hover { border-color: var(--c-neon); transform: translateY(-2px); }
.lg-cls.sel { border-color: var(--c-neon-2); background: rgba(168, 92, 255, .16); box-shadow: 0 0 16px rgba(168, 92, 255, .5); }
.lg-cdesc { min-height: 92px; padding: 10px 12px; background: rgba(0, 0, 0, .35); border-left: 2px solid var(--c-neon-2); font-size: var(--fs-m); }
.lg-cdesc .stats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; color: var(--c-neon); font-weight: 700; }
.lg-hero { display: flex; align-items: center; gap: 14px; justify-content: center; padding: 6px; background: rgba(0, 0, 0, .3); border-radius: var(--rad-m); }
.lg-hero canvas { width: 80px; height: 96px; image-rendering: pixelated; } .lg-hero b { display: block; font-size: var(--fs-l); } .lg-hero small { color: var(--c-text-dim); }
@media (max-width: 520px) { .lg-card { padding: 16px 14px 12px; } .lg-steps li { padding: 4px 9px; } .lg-classes { gap: 6px; } .lg-cdesc { font-size: 13px; } }
@media (max-height: 560px) { .lg-card .logo { width: 150px; margin-bottom: 0; } .lg-cdesc { min-height: 0; } .lg-view { gap: 6px; } }

/* ============ VENTANA ESTRECHA CON RATÓN: habilidades y menú siempre ABAJO, como en pantalla completa ============ */
body.narrow #actionbar { top: auto; bottom: var(--edge); transform: translateX(-50%) scale(var(--ui-scale)); transform-origin: bottom center; }
body.narrow #menubar { top: auto; bottom: calc(var(--edge) + 68px * var(--ui-scale)); transform-origin: bottom center; }
body.narrow #chat { top: 150px; bottom: auto; width: min(300px, calc(100vw - 24px)); }
body.narrow #chat-log { height: 80px; }
body.narrow #notifs { top: 190px; }
body.narrow #q2-tracker { display: none; } /* en ventanas estrechas el seguimiento de misiones se abre con U (no tapa las habilidades) */

/* ---- selección de personajes ---- */
.lg-card[data-view="select"] { width: min(680px, 100%); }
.lg-card[data-view="select"] [data-v="select"] { display: flex; }
.lg-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lg-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 10px; min-height: 236px; background: rgba(0, 0, 0, .4); border: 1px solid var(--c-line); border-radius: var(--rad-m); text-align: center; }
.lg-slot canvas { width: 100%; max-width: 112px; aspect-ratio: 5 / 6; image-rendering: pixelated; }
.lg-slot b { font-size: var(--fs-l); overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.lg-slot small { color: var(--c-text-dim); font-size: var(--fs-s); }
.lg-slot .lg-play { width: 100%; margin-top: auto; min-height: 38px; }
.lg-slot.full:hover { border-color: var(--c-neon); box-shadow: 0 0 12px rgba(76, 195, 255, .25); }
.lg-slot .lg-trash { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 6px; background: rgba(0, 0, 0, .45); border: 1px solid var(--c-line); color: var(--c-text-dim); cursor: pointer; font-size: 14px; }
.lg-slot .lg-trash:hover { color: #fff; border-color: var(--c-bad); background: rgba(255, 90, 110, .2); }
.lg-slot.empty { justify-content: center; cursor: pointer; border-style: dashed; color: var(--c-text-dim); font: inherit; }
.lg-slot.empty:hover { border-color: var(--c-neon-2); color: #fff; background: rgba(168, 92, 255, .1); }
.lg-slot.empty .plus { font-size: 40px; line-height: 1; color: var(--c-neon); }
.lg-slot.locked { justify-content: center; opacity: .55; border-style: dotted; } .lg-slot.locked .lock { font-size: 28px; }
.lg-slot.online::after { content: "EN LÍNEA"; position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 800; letter-spacing: .5px; color: #5fd68a; }
.lg-del { padding: 12px; border: 1px solid var(--c-bad); border-radius: var(--rad-m); background: rgba(255, 90, 110, .08); display: flex; flex-direction: column; gap: 8px; }
.lg-del.hidden { display: none; } .lg-del p { margin: 0; color: var(--c-text-dim); font-size: var(--fs-m); } .lg-del b { color: var(--c-bad); }
.lg-del-btns { display: flex; gap: 8px; } .lg-del-btns .btn { flex: 1; }
.btn.danger { background: linear-gradient(#a02040, #701530); border-color: var(--c-bad); color: #fff; } .btn.danger:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 560px) { .lg-slots { grid-template-columns: 1fr; } .lg-slot { flex-direction: row; min-height: 0; text-align: left; padding: 8px 10px; gap: 10px; } .lg-slot canvas { width: 64px; max-width: 64px; flex: none; } .lg-slot .info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .lg-slot .lg-play { width: auto; margin: 0; padding: 0 14px; } .lg-slot.empty, .lg-slot.locked { flex-direction: row; justify-content: center; min-height: 64px; } }
.lg-slot .info { display: flex; flex-direction: column; align-items: center; gap: 1px; max-width: 100%; }
.lg-slot.empty, .lg-slot.locked { align-items: center; gap: 4px; }
.lg-slot.empty .plus { display: block; width: 52px; height: 52px; line-height: 48px; border: 2px dashed var(--c-neon); border-radius: 50%; font-size: 34px; text-align: center; margin-bottom: 4px; }
@media (max-width: 560px) { .lg-slot .info { align-items: flex-start; } .lg-slot.empty .plus { width: 40px; height: 40px; line-height: 36px; font-size: 26px; margin: 0 8px 0 0; } }
@media (max-width: 560px) { .lg-slot .lg-trash { position: static; flex: none; } }