:root { --bg:#14120f; --panel:#201c16; --line:#4a3f2e; --ink:#eadfc8; --dim:#9a8d75; --hp:#c0392b; --sp:#2e86c1; --gold:#e5b53b; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--ink); font:16px/1.35 system-ui, sans-serif; }
#app { display:grid; grid-template-columns:auto minmax(280px,420px); grid-template-rows:minmax(0,1fr) 220px; gap:8px; padding:8px; height:100%; }
#stage { grid-column:1; grid-row:1 / span 2; justify-self:start; position:relative; background:#000; border:2px solid var(--line); align-self:start; }
#view { display:block; image-rendering:pixelated; image-rendering:crisp-edges; width:var(--w,1088px); height:var(--h,768px); filter:contrast(1.12) saturate(1.1) brightness(1.03); }
body[data-contrast="alto"] #view { filter:contrast(1.26) saturate(1.18) brightness(1.06); } body[data-contrast="normal"] #view { filter:none; }
#toast { position:absolute; left:0; right:0; bottom:60px; text-align:center; pointer-events:none; text-shadow:0 1px 2px #000; font-weight:600; }
#side { grid-row:1; grid-column:2; min-height:0; display:flex; flex-direction:column; gap:8px; overflow:auto; }
#side section { background:var(--panel); border:1px solid var(--line); padding:8px; }
h3 { margin:6px 0 4px; font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); }
h3:first-child { margin-top:0; }
.bar { position:relative; height:16px; background:#000; margin:4px 0; border:1px solid var(--line); }
.bar i { position:absolute; inset:0 auto 0 0; width:100%; }
.bar.hp i { background:var(--hp); } .bar.sp i { background:var(--sp); }
.bar span { position:absolute; inset:0; text-align:center; font-size:13px; line-height:16px; text-shadow:0 1px 1px #000; }
.row { display:flex; justify-content:space-between; } .row b { color:var(--gold); } .small { font-size:13px; color:var(--dim); flex-direction:column; gap:1px; }
#inv { display:grid; grid-template-columns:repeat(5, 1fr); gap:3px; }
#equip { display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(4, auto); gap:3px; }
.slot { aspect-ratio:1; background:#0d0b09; border:1px solid var(--line); position:relative; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; }
.slot:hover { border-color:var(--gold); }
.slot canvas { image-rendering:pixelated; max-width:100%; max-height:100%; }
.slot em { position:absolute; right:2px; bottom:0; font-size:12px; font-style:normal; text-shadow:0 1px 1px #000; }
.slot small { font-size:11px; text-align:center; color:var(--dim); padding:1px; }
.hint { font-size:13px; color:var(--dim); margin-top:4px; }
#npcbox h4 { margin:0 0 4px; } #npcbox p { margin:4px 0; color:var(--dim); font-size:14px; }
#npcbox button, #login button { background:#3a3020; color:var(--ink); border:1px solid var(--line); padding:3px 8px; cursor:pointer; margin:2px 2px 0 0; }
#npcbox button:hover, #login button:hover { border-color:var(--gold); }
#npcbox table { width:100%; font-size:14px; border-collapse:collapse; } #npcbox td { padding:1px 2px; border-bottom:1px solid #2c261c; } #npcbox td:last-child { text-align:right; }
#chatwrap { grid-column:2; grid-row:2; display:flex; flex-direction:column; min-height:0; background:var(--panel); border:1px solid var(--line); }
#chat { flex:1; overflow-y:auto; padding:6px; font-size:15px; } #chat div { margin:1px 0; }
#chat .whisper { color:#c9a0ff; } #chat .guild { color:#7fd68a; } #chat .system { color:var(--dim); } #chat .err { color:#ff8a7a; } #chat .npc { color:#ffd27a; } #chat .combat { color:#e8a07a; }
#chatin { width:100%; background:#0d0b09; color:var(--ink); border:0; border-top:1px solid var(--line); padding:6px; outline:none; }
#login { position:fixed; inset:0; background:rgba(10,8,6,.92); display:flex; align-items:center; justify-content:center; z-index:5; }
#login[hidden] { display:none; }
#loginform { background:var(--panel); border:1px solid var(--line); padding:20px 24px; width:320px; display:flex; flex-direction:column; gap:10px; }
#loginform h1 { margin:0 0 4px; font-size:24px; color:var(--gold); text-align:center; }
#loginform label { display:flex; flex-direction:column; gap:3px; font-size:14px; color:var(--dim); }
#loginform input { background:#0d0b09; color:var(--ink); border:1px solid var(--line); padding:6px; font-size:16px; }
#l-msg { min-height:1.2em; margin:0; color:#ff8a7a; font-size:14px; text-align:center; }
.buttons { display:flex; gap:6px; } .buttons button { flex:1; padding:7px; }
@media (max-width: 900px) { #app { grid-template-columns:1fr; grid-template-rows:auto; height:auto; } #stage, #side, #chatwrap { grid-column:1; grid-row:auto; } #chatwrap { height:220px; } }

#spells { display:flex; flex-direction:column; gap:3px; }
#spells button { display:flex; justify-content:space-between; background:#2c2618; color:var(--ink); border:1px solid var(--line); padding:3px 6px; cursor:pointer; font-size:14px; }
#spells button:hover { border-color:var(--gold); } #spells button i { color:var(--sp); font-style:normal; } #spells button b { color:var(--dim); font-weight:400; margin-right:6px; }
.dim { color:var(--dim); text-transform:none; letter-spacing:0; }

/* ---- editor de mapas ---- */
#admintools button, #editor button { background:#3a3020; color:var(--ink); border:1px solid var(--line); padding:3px 8px; cursor:pointer; }
#admintools button:hover, #editor button:hover:not(:disabled) { border-color:var(--gold); } #editor button:disabled { opacity:.4; cursor:default; }
#editor button.primary { background:#4a6a2a; }
body.editing #app { grid-template-columns:auto minmax(320px,420px); }
body.editing #side > section:not(#editor):not(#admintools) { display:none; }
body.editing #admintools { display:none; }
#editor input, #editor select { background:#0d0b09; color:var(--ink); border:1px solid var(--line); padding:3px 5px; font-size:14px; min-width:0; }
#editor select { flex:1; } #editor #ed-ents { width:100%; margin-top:3px; }
.ed-row { display:flex; gap:4px; margin:4px 0; align-items:center; flex-wrap:wrap; } .ed-row input { flex:1; width:60px; }
.ed-f { display:flex; flex-direction:column; gap:2px; font-size:13px; color:var(--dim); margin:4px 0; flex:1; } .ed-f.ck, .ed-row.ck { flex-direction:row; gap:8px; color:var(--ink); font-size:14px; }
#ed-tools { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; } #ed-tools button { font-size:13px; padding:4px 2px; } #ed-tools button.on { background:#6a5522; border-color:var(--gold); }
.ed-layer { display:flex; align-items:center; gap:6px; font-size:14px; padding:1px 2px; } .ed-layer span { flex:1; }
#editor > #ed-filter, #ed-filter, #ed-efilter { width:100%; margin-bottom:3px; }
#ed-pal { max-height:230px; overflow:auto; border:1px solid var(--line); background:#111; } #ed-palcanvas { display:block; cursor:pointer; image-rendering:pixelated; }
#ed-portals { list-style:none; padding:0; margin:0; font-size:14px; } #ed-portals li { display:flex; justify-content:space-between; align-items:center; margin:1px 0; } #ed-portals button { padding:0 6px; }
#ed-msg.good { color:#8fe0a0; } #ed-msg { color:#ffb09a; min-height:2.6em; }
.ed-row input[type=checkbox], .ed-layer input { flex:none; width:auto; }
.ed-row.ck { gap:12px; }
body.editing #chatwrap { display:none; }
body.editing #app { grid-template-rows:minmax(0,1fr) 0; }
body.editing #side { grid-row:1 / span 2; }
#ed-edges .ed-row { margin:2px 0; } #ed-edges small { display:block; margin:0 0 3px 66px; font-size:12px; }
#ed-edges select { min-width:0; font-size:13px; }

/* ---- creación de personaje y panel de atributos ---- */
#create { position:fixed; inset:0; background:rgba(10,8,6,.94); display:flex; align-items:center; justify-content:center; z-index:6; overflow:auto; }
#create[hidden] { display:none; }
.cbox { background:var(--panel); border:1px solid var(--line); padding:16px 20px; max-width:760px; width:96%; }
.cbox h2 { margin:0 0 8px; color:var(--gold); }
.cgrid { display:grid; grid-template-columns:150px 1fr 1fr; gap:14px; align-items:start; }
@media (max-width:700px) { .cgrid { grid-template-columns:1fr; } }
.cprev { background:#0d0b09; border:1px solid var(--line); padding:6px; }
#c-prev { width:138px; height:135px; image-rendering:pixelated; display:block; background:#2a3a22; }
.c-row { display:flex; align-items:center; gap:6px; margin:3px 0; } .c-row span { flex:1; font-size:14px; color:var(--dim); } .c-row b { min-width:96px; text-align:center; font-weight:500; font-size:15px; }
.cbox button { background:#3a3020; color:var(--ink); border:1px solid var(--line); padding:3px 9px; cursor:pointer; margin:2px 2px 0 0; }
.cbox button:hover:not(:disabled) { border-color:var(--gold); } .cbox button:disabled { opacity:.4; cursor:default; } .cbox button.on { background:#6a5522; border-color:var(--gold); } .cbox button.primary { background:#4a6a2a; }
#c-left { font-weight:600; margin:6px 0 0; } .warn { color:#ffb09a; } .good { color:#8fe0a0; } #c-msg { min-height:1.2em; color:#ff8a7a; font-size:14px; }
table.stats { width:100%; font-size:14px; border-collapse:collapse; margin-top:4px; } table.stats td { padding:1px 3px; border-bottom:1px solid #2c261c; } table.stats td:nth-child(2) { text-align:right; color:var(--gold); width:34px; } table.stats td:last-child { width:26px; }
table.stats button, button.mini { background:#4a6a2a; color:var(--ink); border:1px solid var(--line); cursor:pointer; padding:0 6px; font-size:13px; }
button.mini { background:#3a3020; padding:1px 6px; margin-left:4px; text-transform:none; letter-spacing:0; }
#npcbox input { background:#0d0b09; color:var(--ink); border:1px solid var(--line); padding:2px 4px; width:70px; font-size:14px; }
#npcbox .own { border-top:1px solid var(--line); margin-top:6px; padding-top:4px; }

/* ---- editor de NPC y objetos ---- */
#content { position:fixed; inset:0; background:rgba(10,8,6,.96); z-index:7; display:flex; align-items:stretch; justify-content:center; padding:12px; }
#content[hidden] { display:none; }
.ctbox { background:var(--panel); border:1px solid var(--line); padding:10px 14px; width:min(1200px,100%); display:flex; flex-direction:column; min-height:0; }
.ct-top { display:flex; gap:6px; align-items:center; } .ct-top h2 { margin:0 14px 0 0; color:var(--gold); font-size:20px; }
.ctbox button { background:#3a3020; color:var(--ink); border:1px solid var(--line); padding:3px 9px; cursor:pointer; } .ctbox button:hover { border-color:var(--gold); } .ctbox button.on { background:#6a5522; border-color:var(--gold); } .ctbox button.primary { background:#4a6a2a; }
.ct-main { display:grid; grid-template-columns:240px 1fr; gap:12px; flex:1; min-height:0; margin-top:8px; }
.ct-main aside { display:flex; flex-direction:column; gap:4px; min-height:0; } #ct-list { overflow:auto; display:flex; flex-direction:column; gap:2px; flex:1; } #ct-list button { text-align:left; }
#ct-form { overflow:auto; padding-right:6px; }
.ctbox input, .ctbox select, .ctbox textarea { background:#0d0b09; color:var(--ink); border:1px solid var(--line); padding:3px 5px; font:inherit; font-size:15px; min-width:0; }
.ct-f { display:flex; flex-direction:column; gap:6px; } .ct-l { display:flex; flex-direction:column; gap:2px; font-size:13px; color:var(--dim); }
.ct-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; } .ct-pair { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ct-checks { display:flex; flex-wrap:wrap; gap:4px 14px; } .ct-c { display:flex; gap:5px; align-items:center; font-size:14px; }
.ct-t { border-collapse:collapse; font-size:14px; } .ct-t th { text-align:left; color:var(--dim); font-weight:500; padding:1px 4px; } .ct-t td { padding:1px 3px; } .ct-t input { width:130px; } .ct-t input[type=number] { width:80px; }
.ct-f h4 { margin:8px 0 2px; font-size:14px; text-transform:uppercase; color:var(--dim); letter-spacing:.05em; }
.ct-btns { display:flex; gap:6px; align-items:center; margin-top:10px; } .ct-icon { image-rendering:pixelated; background:#0d0b09; border:1px solid var(--line); align-self:flex-start; }
#ct-msg { min-height:1.2em; margin:6px 0 0; font-size:14px; }
@media (max-width:800px) { .ct-main { grid-template-columns:1fr; } }
.snd { display:flex; align-items:center; gap:6px; margin-top:6px; font-size:14px; } .snd input[type=range] { flex:1; min-width:0; } .snd label { display:flex; gap:2px; align-items:center; cursor:pointer; }
.ed-nav { position:absolute; z-index:3; background:rgba(40,32,16,.78); color:var(--ink); border:1px solid var(--gold); padding:2px 10px; font-size:14px; cursor:pointer; opacity:.55; }
.ed-nav:hover { opacity:1; } .ed-nav.new { border-color:#ff8a7a; color:#ffc0b4; } .ed-nav.closed { border-style:dashed; border-color:var(--line); color:var(--dim); }
.ed-nav[hidden] { display:none; }
#ed-nav-N { top:2px; left:50%; transform:translateX(-50%); } #ed-nav-S { bottom:2px; left:50%; transform:translateX(-50%); }
#ed-nav-W { left:2px; top:50%; transform:translateY(-50%); } #ed-nav-E { right:2px; top:50%; transform:translateY(-50%); }

/* ===== 0.7.0: HUD y mochila modernos ===== */
#hud { background:linear-gradient(180deg,#2a241b,#1c1812); border-color:#5a4c33; }
#hud .who { display:flex; align-items:baseline; gap:8px; margin-bottom:8px; font-size:17px; }
#hud .who b#h-name { font-size:18px; letter-spacing:.02em; }
#hud .lvl { background:#3a2f12; color:#ffd36a; border:1px solid #8a6b1f; border-radius:10px; padding:0 8px; font-size:13px; font-weight:700; letter-spacing:.04em; }
#hud .gold { margin-left:auto; display:flex; align-items:center; gap:5px; font-weight:700; color:#ffd36a; }
#hud .gold b { color:#ffd36a; }
.coin { width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff2b0,#e5b53b 55%,#9a6f10); box-shadow:0 0 0 1px #5a4108, 0 0 6px rgba(229,181,59,.5); display:inline-block; }
.meter { position:relative; height:22px; margin:5px 0; border-radius:11px; background:#0b0907; border:1px solid #000; box-shadow:inset 0 2px 4px rgba(0,0,0,.8), 0 0 0 1px #3d3324; overflow:hidden; }
.meter > i { position:absolute; inset:0 auto 0 0; width:100%; border-radius:11px; transition:width .25s ease-out; }
.meter > i::after { content:''; position:absolute; left:3px; right:3px; top:2px; height:38%; border-radius:6px; background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0)); }
.meter.hp > i#b-hp { background:linear-gradient(90deg,#b3261e,#ef5350 60%,#ff8a80); z-index:2; }
.meter.hp > i.ghost { background:#ffe9a0; opacity:.75; transition:width .6s ease-out; z-index:1; } .meter.hp > i.ghost::after { display:none; }
.meter.sp > i { background:linear-gradient(90deg,#1565c0,#42a5f5 60%,#90caf9); }
.meter.xp { height:16px; border-radius:8px; } .meter.xp > i { border-radius:8px; background:linear-gradient(90deg,#8d6a00,#e5b53b 60%,#ffe58a); }
.meter .tag, .meter .val { position:absolute; top:0; bottom:0; display:flex; align-items:center; z-index:3; font-weight:800; color:#fff; text-shadow:0 1px 2px #000, 0 0 3px #000, 1px 0 2px #000, -1px 0 2px #000; pointer-events:none; }
.meter .tag { left:10px; font-size:13px; letter-spacing:.08em; opacity:.95; } .meter .val { right:10px; font-size:14px; font-variant-numeric:tabular-nums; }
.meter.xp .tag { font-size:11px; left:8px; } .meter.xp .val { font-size:12px; right:8px; }
.meter.low { animation:lowhp 0.9s ease-in-out infinite; } @keyframes lowhp { 50% { box-shadow:inset 0 2px 4px rgba(0,0,0,.8), 0 0 0 1px #ff5a4d, 0 0 10px rgba(255,70,60,.7); } }
#inv { grid-template-columns:repeat(5, 1fr); gap:5px; padding:6px; background:#120f0b; border:1px solid #3d3324; border-radius:8px; box-shadow:inset 0 2px 6px rgba(0,0,0,.7); }
#equip { gap:5px; padding:6px; background:#120f0b; border:1px solid #3d3324; border-radius:8px; box-shadow:inset 0 2px 6px rgba(0,0,0,.7); }
.slot { border-radius:6px; background:linear-gradient(160deg,#241e16,#15110c); border:1px solid #3d3324; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03); transition:border-color .12s, transform .12s, background .12s; }
.slot:hover { border-color:#e5b53b; background:linear-gradient(160deg,#322818,#1c160e); transform:translateY(-1px); }
.slot canvas { filter:drop-shadow(0 1px 1px rgba(0,0,0,.8)); }
.slot em { right:3px; bottom:1px; font-size:13px; font-weight:700; color:#fff; text-shadow:0 0 3px #000, 0 1px 2px #000; background:rgba(0,0,0,.45); border-radius:6px; padding:0 3px; }
#equip .slot small { opacity:.55; font-size:11px; }
#inv-count { font-weight:600; }

/* ===== 0.8.0: ventana emergente de NPC ===== */
#modal-shade { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:40; }
#npcbox.modal { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(460px,94vw); max-height:86vh; overflow:auto; z-index:50; background:linear-gradient(180deg,#2c261c,#1b1711); border:1px solid #8a6b1f; border-radius:12px; padding:12px 14px; box-shadow:0 18px 60px rgba(0,0,0,.8); }
.nb-head { display:flex; align-items:center; justify-content:space-between; } .nb-head h4 { font-size:19px; margin:0; color:#ffd36a; }
#npcbox .nb-x { border-radius:50%; width:26px; height:26px; padding:0; line-height:1; margin:0; }
.nb-profile { color:#a99c82; font-size:14px; font-style:italic; margin:6px 0; }
.nb-tabs { display:flex; gap:4px; margin:8px 0 6px; } #npcbox .nb-tabs button { flex:1; border-radius:8px 8px 0 0; padding:6px 4px; margin:0; } #npcbox .nb-tabs button.on { background:#5a4510; border-color:#e5b53b; color:#ffd36a; }
.nb-list { min-height:90px; max-height:46vh; overflow:auto; background:#120f0b; border:1px solid #3d3324; border-radius:8px; padding:4px; }
.nb-row { display:flex; align-items:center; gap:10px; padding:4px 8px; border-radius:6px; cursor:pointer; border:1px solid transparent; }
.nb-row:hover { background:#2a2216; } .nb-row.sel { background:#3a2f12; border-color:#e5b53b; }
.nb-img { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:#1c160e; border:1px solid #3d3324; border-radius:6px; flex:none; }
.nb-name { flex:1; font-size:16px; } .nb-name small { color:#8b7f68; }
.nb-price { font-weight:700; color:#ffd36a; font-variant-numeric:tabular-nums; } .nb-price::after { content:' ◉'; font-size:12px; color:#e5b53b; }
.nb-empty { color:#8b7f68; text-align:center; padding:18px 0; margin:0; }
.nb-foot { display:flex; gap:4px; align-items:center; margin-top:8px; } #npcbox .nb-foot input { width:56px; text-align:center; padding:5px 2px; } #npcbox .nb-foot button { padding:5px 10px; }
#npcbox .nb-foot .go { flex:1; background:#5a4510; border-color:#e5b53b; color:#ffe9a0; font-weight:700; } #npcbox .nb-foot .go:disabled { opacity:.45; cursor:not-allowed; }
.nb-gold { text-align:right; color:#ffd36a; font-size:14px; margin:6px 0 2px; } .nb-bank { margin-top:4px; }

/* ===== 0.8.0: pestañas, atajos, habilidades ===== */
#tabs { display:flex; gap:3px; } #tabs button { flex:1; background:#241e16; color:var(--dim); border:1px solid var(--line); border-bottom:none; border-radius:8px 8px 0 0; padding:7px 4px; cursor:pointer; font-size:14px; font-weight:600; }
#tabs button:hover { color:var(--ink); } #tabs button.on { background:#3a2f12; color:#ffd36a; border-color:#8a6b1f; }
#tabs-wrap .tab { border:1px solid #8a6b1f; border-top:2px solid #8a6b1f; background:linear-gradient(180deg,#221c13,#17130d); padding:6px 8px 8px; border-radius:0 0 8px 8px; }
#tabs-wrap .tab[hidden] { display:none; }
.slot.sel { border-color:#ffd36a; box-shadow:0 0 0 2px rgba(255,211,106,.35), 0 0 10px rgba(255,211,106,.35); }
#item-actions { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:8px; padding:6px; background:#120f0b; border:1px solid #3d3324; border-radius:8px; }
#ia-name { font-size:14px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #ia-name:not(.dim) { color:var(--ink); }
.ia-btns { display:flex; } .ia-btns button { background:#3a3020; color:var(--ink); border:1px solid var(--line); padding:5px 12px; cursor:pointer; font-size:14px; font-weight:600; margin:0; }
.ia-btns button:first-child { border-radius:6px 0 0 6px; } .ia-btns button:last-child { border-radius:0 6px 6px 0; } .ia-btns button + button { margin-left:-1px; }
.ia-btns button:hover:not(:disabled) { background:#5a4510; border-color:#e5b53b; color:#ffe9a0; z-index:1; position:relative; } .ia-btns button:disabled { opacity:.4; cursor:default; }
#item-info:not(:empty) { margin-top:6px; padding:6px 8px; background:#120f0b; border:1px solid #3d3324; border-radius:8px; font-size:14px; } #item-info > b { color:#ffd36a; display:block; margin-bottom:3px; }
#item-info .ii { display:flex; justify-content:space-between; border-top:1px solid #2c261c; padding:1px 0; } #item-info .ii span { color:var(--dim); }
#sk-head { display:flex; justify-content:space-between; font-size:14px; padding:2px 0 4px; } #sk-head .good { color:#7bd05a; font-weight:700; }
#skgrid { display:flex; flex-direction:column; gap:5px; }
.skc { display:flex; gap:8px; align-items:center; padding:5px; background:#120f0b; border:1px solid #3d3324; border-radius:8px; cursor:pointer; } .skc:hover { border-color:#e5b53b; } .skc.sel { border-color:#ffd36a; background:#2a2216; }
.skc canvas { image-rendering:auto; flex:none; border-radius:8px; } .skc-t { flex:1; display:flex; flex-direction:column; gap:2px; font-size:14px; } .skc-t b { font-size:15px; }
.skbar { position:relative; height:14px; background:#0b0907; border:1px solid #000; border-radius:7px; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.8); }
.skbar i { position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,#8d6a00,#e5b53b 70%,#ffe58a); border-radius:7px; transition:width .25s; }
.skbar span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; text-shadow:0 1px 2px #000,0 0 3px #000; }
#spgrid { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; padding:6px; background:#120f0b; border:1px solid #3d3324; border-radius:8px; min-height:40px; } #spgrid p { grid-column:1 / -1; margin:0; font-size:14px; }
#spgrid .slot.sp { cursor:grab; } #spgrid .slot.sp em { color:#9fd0ff; }
#sk-detail { margin-top:8px; padding:6px 8px; background:#120f0b; border:1px solid #3d3324; border-radius:8px; font-size:14px; min-height:34px; } #sk-detail b { color:#ffd36a; display:block; }
#hotbar { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); display:flex; gap:4px; padding:4px 6px; background:rgba(14,11,8,.72); border:1px solid #5a4c33; border-radius:10px; z-index:5; backdrop-filter:blur(2px); }
.hk { position:relative; width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#241e16,#15110c); border:1px solid #4a3e2a; border-radius:7px; cursor:pointer; }
.hk:hover { border-color:#e5b53b; } .hk.armed { border-color:#ffd36a; animation:armed .8s ease-in-out infinite; } @keyframes armed { 50% { box-shadow:0 0 10px rgba(255,211,106,.8); } }
.hk b { position:absolute; left:3px; top:1px; font-size:12px; color:#ffd36a; text-shadow:0 0 3px #000,0 1px 2px #000; z-index:2; } .hk canvas { filter:drop-shadow(0 1px 1px rgba(0,0,0,.8)); }
.hk em { position:absolute; right:3px; bottom:0; font-size:12px; font-style:normal; font-weight:700; color:#fff; text-shadow:0 0 3px #000,0 1px 2px #000; } .hk.off canvas { opacity:.35; filter:grayscale(1); }
body.editing #hotbar { display:none; }

.ct-mobrow { display:flex !important; align-items:center; gap:6px; } .ct-mobrow span { flex:1; } .ct-mobrow small { opacity:.7; } .ct-mobrow canvas { width:32px; height:32px; flex:none; } .ct-mobhead { display:flex; align-items:center; gap:12px; }

/* 0.9.0: equipo como muñeco */
#equip { grid-template-columns:repeat(3, 44px); justify-content:center; grid-auto-rows:44px; } #doll { width:44px; height:88px; justify-self:center; image-rendering:pixelated; }
#equip .slot { width:44px; height:44px; }

/* ===== 0.9.0: trato entre jugadores ===== */
#chat .party { color:#6fc7ff; }
.pmenu { position:fixed; z-index:60; min-width:170px; background:#1a150e; border:1px solid #e5b53b; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.7); padding:6px; display:flex; flex-direction:column; gap:4px; }
.pmenu b { color:#ffe08a; padding:2px 4px; } .pmenu button { text-align:left; }
.partybox { position:absolute; left:8px; top:8px; z-index:5; min-width:130px; background:rgba(18,15,11,.82); border:1px solid #3d3324; border-radius:8px; padding:5px 7px; font-size:14px; display:flex; flex-direction:column; gap:2px; }
.partybox .pm { display:flex; justify-content:space-between; gap:10px; } .partybox .pm.off { opacity:.5; } .partybox small { opacity:.7; } .partybox button { margin-top:3px; font-size:13px; }
.pinvite { position:absolute; left:50%; top:10px; transform:translateX(-50%); z-index:6; background:#1a150e; border:1px solid #6fc7ff; border-radius:8px; padding:6px 10px; display:flex; gap:8px; align-items:center; }
.pcard { position:fixed; z-index:61; left:50%; top:50%; transform:translate(-50%,-50%); width:min(340px, 94vw); background:#15110c; border:1px solid #e5b53b; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.8); padding:10px; display:flex; flex-direction:column; gap:8px; }
.pc-head { display:flex; align-items:baseline; gap:8px; } .pc-head h3 { margin:0; flex:1; } .pc-head span { flex:2; }
.pc-paper { display:grid; grid-template-columns:repeat(3, 44px); grid-auto-rows:44px; gap:3px; justify-content:center; padding:6px; background:#120f0b; border:1px solid #3d3324; border-radius:8px; }
.pc-paper canvas { image-rendering:pixelated; } .pc-paper > canvas { width:44px; height:88px; justify-self:center; } .pc-paper .slot { width:44px; height:44px; cursor:default; }
.pc-skills { display:grid; grid-template-columns:1fr 1fr; gap:4px; } .pc-sk { display:flex; align-items:center; gap:5px; font-size:14px; } .pc-sk span { flex:1; }
.pc-btns { display:flex; gap:6px; justify-content:center; }
.pmenu[hidden], .partybox[hidden], .pinvite[hidden], .pcard[hidden] { display:none !important; }
#equip .slot small { opacity:.9; color:#b9a77d; font-size:11px; }
#doll { background:radial-gradient(ellipse at 50% 85%, rgba(229,181,59,.18), transparent 70%); }

/* ===== 0.9.3: inventario más compacto, hambre, tirar ===== */
#inv { grid-template-columns:repeat(5, 46px); justify-content:center; gap:4px; } #inv .slot { width:46px; height:46px; aspect-ratio:auto; }
.meter.hunger { height:14px; border-radius:7px; margin-top:3px; } .meter.hunger > i { border-radius:7px; background:linear-gradient(90deg,#5d4037,#a1662f 60%,#d99a5b); }
.meter.hunger .tag { font-size:10px; left:8px; } .meter.hunger .val { font-size:11px; right:8px; }
#dropbox { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:6px; padding:6px; background:#120f0b; border:1px solid #e5b53b; border-radius:8px; font-size:14px; }
#dropbox span { flex-basis:100%; } #dropbox input { width:64px; text-align:center; }

#chatform { display:flex; gap:4px; align-items:center; }
#chatform #chatin { flex:1; min-width:0; }
#chanbar { display:flex; gap:2px; }
#chanbar button { background:#2a2118; color:#cdb98a; border:1px solid var(--line); padding:3px 7px; font-size:14px; cursor:pointer; }
#chanbar button.on { background:#6b4a1c; color:#fff; }
#chanbar button[data-ch="global"].on { background:#1c5a6b; }
#chanbar button[data-ch="guild"].on { background:#2d6b1c; }
#chanbar button[data-ch="party"].on { background:#6b1c5a; }
#chat .global { color:#ffe08a; }
#chat .world { color:#9fe3c0; font-style:italic; }

.nb-guild { display:flex; flex-direction:column; gap:6px; padding:6px; }
.nb-guild input { background:#120f0b; color:#eee; border:1px solid var(--line); padding:5px; }

.pc-trophies { padding:4px 8px; color:#ffd27a; font-size:14px; text-align:center; }

.partybox .pbar { position:relative; height:11px; background:#1a1510; border:1px solid #3d3324; border-radius:3px; overflow:hidden; min-width:130px; }
.partybox .pbar i { position:absolute; inset:0 auto 0 0; display:block; }
.partybox .pbar.hp i { background:linear-gradient(#e05a4a,#8c2418); } .partybox .pbar.mp i { background:linear-gradient(#5a8ae0,#1f3f8c); }
.partybox .pbar span { position:relative; display:block; text-align:center; font-size:11px; line-height:11px; color:#fff; text-shadow:0 0 2px #000; }

.tr-cols { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .tr-col { border:1px solid var(--line); border-radius:6px; padding:6px; background:rgba(0,0,0,.2); } .tr-col.ok { border-color:#67c06e; }
.tr-gold { margin:4px 0; font-size:14px; color:var(--dim); } .tr-gold input { width:90px; background:#120f0b; color:#eee; border:1px solid var(--line); padding:2px 4px; }
.tr-list { min-height:46px; } .tr-bag { display:flex; flex-wrap:wrap; gap:4px; max-height:120px; overflow:auto; }
.tr-slot { position:relative; width:38px; height:38px; display:grid; place-items:center; background:#1a1510; border:1px solid var(--line); border-radius:4px; cursor:pointer; } .tr-slot:hover { border-color:var(--gold); }
.tr-slot small { position:absolute; right:2px; bottom:0; font-size:12px; color:#fff; text-shadow:0 0 2px #000; }

/* 0.18.0: cofre de la casa */
#npcbox.chestbox { width:min(640px, 94vw); max-height:92vh; overflow:auto; }
#npcbox .cx-grid { display:grid; grid-template-columns:repeat(10, 1fr); gap:4px; padding:6px; background:#120f0b; border:1px solid #3d3324; border-radius:8px; }
#npcbox .cx-grid .slot { aspect-ratio:1; width:auto; height:auto; min-height:44px; }
#npcbox h5 { margin:8px 0 4px; color:#e5b53b; font-size:15px; }
#npcbox .cx-qty { margin:4px 0; } #npcbox .cx-qty button.on { border-color:#ffd36a; background:#5a4620; }

/* 0.24.0: descripción del NPC y textos de encargos con letra más grande */
.nb-desc { color:#e8dcc0; font-size:19px; line-height:1.4; margin:8px 0 10px; }
.nb-big { color:#f1e6cc; font-size:18px; line-height:1.4; margin:10px 6px; text-align:center; }
#npcbox .nb-deliver { display:block; margin:10px auto; font-size:18px; padding:10px 22px; }
#npcbox .nb-deliver:not(:disabled) { background:#5a4510; border-color:#e5b53b; color:#ffd36a; }
#npcbox .nb-empty { font-size:17px; }

/* ───── 0.25.0: portada, selección de personaje y creador ───── */
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#login { background:#07051a url(public/assets/portada.jpg) center bottom / cover no-repeat; flex-direction:column; justify-content:flex-start; align-items:center; gap:12px; padding:2vh 12px 16px; overflow:auto; }
#login::before, #create::before { content:""; position:fixed; inset:0; background:radial-gradient(ellipse at 50% 55%, rgba(8,5,22,0) 20%, rgba(8,5,22,.55) 100%); pointer-events:none; }
#login > *, #create > * { position:relative; }
.logo { width:min(88vw, 760px); max-height:30vh; object-fit:contain; filter:drop-shadow(0 6px 18px rgba(0,0,0,.65)); user-select:none; flex:none; margin-top:1vh; }
.logo.small { width:min(60vw, 480px); max-height:20vh; }
#loginform { background:rgba(18,13,34,.84); border:1px solid #8a6a2a; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,220,140,.08); backdrop-filter:blur(3px); width:min(92vw, 380px); padding:18px 22px; margin-top:auto; margin-bottom:auto; }
#loginform .lead { margin:0 0 4px; text-align:center; font-size:14px; color:#d9cdb0; line-height:1.4; }
#loginform[hidden], #charsel[hidden] { display:none; }
#login button.primary, #create button.primary { background:linear-gradient(#6aa13a,#3f6b22); border-color:#a9d878; color:#fff; font-weight:700; }
#login #l-login { background:linear-gradient(#e6b73e,#a9741a); border-color:#ffe08a; color:#2a1604; font-weight:700; padding:7px 14px; font-size:16px; }
#login .buttons { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; } #login .buttons button { padding:7px 14px; border-radius:6px; }
#l-msg, #cs-msg { min-height:1.2em; text-align:center; color:#ff9a8a; font-size:14px; margin:0; }
#charsel { width:min(96vw, 940px); margin:auto 0; background:rgba(18,13,34,.86); border:1px solid #8a6a2a; border-radius:12px; padding:16px 18px 12px; box-shadow:0 10px 40px rgba(0,0,0,.65); backdrop-filter:blur(3px); }
#charsel h2 { margin:0 0 10px; text-align:center; color:#ffd36a; font-size:22px; letter-spacing:.03em; } #charsel h2 .dim { font-size:14px; color:#b9ad92; font-weight:400; letter-spacing:0; } #charsel h2 b { color:#fff; }
#cs-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin-bottom:12px; }
.cs-card { background:linear-gradient(#251c3c,#171024); border:2px solid #4b3d66; border-radius:10px; padding:10px 8px 10px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; color:var(--ink); font:inherit; transition:transform .12s, border-color .12s, box-shadow .12s; outline:none; }
.cs-card:hover, .cs-card:focus-visible { border-color:#c9a24a; transform:translateY(-2px); }
.cs-card.sel { border-color:#ffd36a; box-shadow:0 0 0 2px rgba(255,211,106,.35), 0 0 26px rgba(255,190,70,.35); background:linear-gradient(#3a2c57,#1d1430); }
.cs-doll { width:150px; height:150px; image-rendering:pixelated; background:radial-gradient(circle at 50% 70%, rgba(255,200,120,.18), rgba(0,0,0,.25) 70%); border-radius:8px; }
.cs-name { font-size:18px; color:#fff; } .cs-lvl { font-size:14px; color:#ffd36a; font-weight:600; }
.cs-hp { position:relative; width:130px; height:16px; background:#0b0814; border:1px solid #4b3d66; border-radius:4px; overflow:hidden; } .cs-hp i { position:absolute; inset:0 auto 0 0; } .cs-hp span { position:absolute; inset:0; text-align:center; font-size:12px; line-height:15px; text-shadow:0 1px 2px #000; }
.cs-card.empty { border-style:dashed; background:rgba(255,255,255,.03); justify-content:center; min-height:238px; color:#b9ad92; } .cs-card.empty .cs-plus { font-size:46px; color:#c9a24a; line-height:1; }
#charsel .big { font-size:19px; padding:10px 34px; border-radius:8px; } #charsel .sec { margin-top:4px; } #charsel .sec button { background:#2b2240; border-color:#5a4a7a; } #charsel button:disabled { opacity:.45; cursor:default; }
#create { background:#07051a url(public/assets/portada.jpg) center bottom / cover no-repeat; flex-direction:column; justify-content:flex-start; gap:10px; padding:1.5vh 8px 14px; }
#create .cbox { background:rgba(18,13,34,.9); border-color:#8a6a2a; border-radius:10px; margin:auto 0; box-shadow:0 10px 40px rgba(0,0,0,.65); }
.c-name { display:flex; align-items:center; gap:10px; margin:2px 0 10px; color:#d9cdb0; font-size:15px; } .c-name[hidden] { display:none; } .c-name input { flex:1; max-width:260px; background:#0d0b09; color:var(--ink); border:1px solid #8a6a2a; padding:6px 8px; font-size:16px; border-radius:4px; }
button.mini.sw { margin:0 4px 0 6px; padding:0 6px; font-size:14px; vertical-align:middle; }
@media (max-height:760px) { .logo { max-height:22vh; } }

/* ───── 0.25.0: barra de ventanas y ventanas flotantes ───── */
#app { grid-template-rows:auto minmax(170px, 1fr); }
body.editing #app { grid-template-rows:minmax(0,1fr) 220px; }
#login { z-index:100; } #create { z-index:101; }
#dock { display:flex; gap:6px; padding:6px !important; background:linear-gradient(180deg,#2a241b,#1c1812) !important; border-color:#5a4c33 !important; }
#dock button { flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 2px 4px; background:#241e16; color:var(--ink); border:1px solid var(--line); border-radius:8px; cursor:pointer; font-size:12px; font-weight:600; position:relative; transition:border-color .12s, background .12s; }
#dock button i { font-style:normal; font-size:22px; line-height:1.1; } #dock button kbd { position:absolute; top:2px; right:4px; font:600 10px/1 system-ui; color:var(--dim); border:1px solid #4a3f2e; border-radius:3px; padding:1px 3px; }
#dock button:hover { border-color:var(--gold); background:#2f2616; } #dock button.on { background:#3a2f12; border-color:#e5b53b; color:#ffd36a; box-shadow:inset 0 0 12px rgba(229,181,59,.2); }
#dock button.rs { flex:0 0 38px; font-size:18px; justify-content:center; color:var(--dim); }
.fwin { position:fixed; z-index:30; min-width:300px; min-height:120px; max-width:calc(100vw - 8px); max-height:calc(100vh - 8px); display:flex; flex-direction:column; resize:both; overflow:hidden;
  background:linear-gradient(180deg,#241e15,#17130d); border:1px solid #8a6b1f; border-radius:10px; box-shadow:0 12px 36px rgba(0,0,0,.65), 0 0 0 1px #000; }
.fwin[hidden] { display:none; } .fwin.top { border-color:#e5b53b; box-shadow:0 14px 40px rgba(0,0,0,.7), 0 0 0 1px #000, 0 0 18px rgba(229,181,59,.18); }
.fwin.drag { opacity:.92; user-select:none; } .fwin.min { height:auto !important; min-height:0; resize:none; } .fwin.min .fw-body { display:none; }
.fw-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px 6px 12px; cursor:grab; user-select:none; touch-action:none; background:linear-gradient(180deg,#4a3913,#2c2210); border-bottom:1px solid #8a6b1f; }
.fwin.drag .fw-head { cursor:grabbing; } .fw-head b { color:#ffd36a; font-size:15px; letter-spacing:.03em; }
.fw-btns { display:flex; gap:4px; } .fw-btns button { width:26px; height:24px; padding:0; line-height:1; background:#3a3020; color:var(--ink); border:1px solid #6a5522; border-radius:5px; cursor:pointer; font-size:12px; } .fw-btns button:hover { background:#6a5522; border-color:#e5b53b; } .fw-btns .fw-x:hover { background:#8a2a22; border-color:#ff8a7a; }
.fw-body { flex:1; min-height:0; overflow:auto; padding:10px 12px 12px; }
/* inventario: equipo a la izquierda, mochila a la derecha, acciones debajo */
.inv-layout { display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; align-items:start; }
.inv-left { grid-column:1; } .inv-right { grid-column:2; } .inv-bottom { grid-column:1 / -1; }
.fwin #equip { display:grid; grid-template-columns:repeat(3,54px); grid-template-rows:repeat(4,54px); gap:4px; padding:8px; background:#120f0b; border:1px solid #3d3324; border-radius:8px; justify-content:center; }
.fwin #equip .slot, .fwin #inv .slot { aspect-ratio:auto; width:100%; height:100%; border-radius:6px; }
.fwin #equip #doll { width:100%; height:100%; image-rendering:pixelated; align-self:center; justify-self:center; }
.fwin #inv { display:grid; grid-template-columns:repeat(auto-fill, minmax(42px,1fr)); grid-auto-rows:42px; gap:3px; padding:6px; background:#120f0b; border:1px solid #3d3324; border-radius:8px; }
.fwin .inv-bottom #item-actions { margin-top:2px; }
/* habilidades: progreso a la izquierda, hechizos y detalle a la derecha */
.sk-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:4px 16px; align-items:start; }
@media (max-width:760px) { .sk-layout, .inv-layout { grid-template-columns:1fr; } .inv-left, .inv-right { grid-column:1; } }
#win-skills #sk-detail { margin-top:10px; } #win-skills #spgrid { grid-template-columns:repeat(auto-fill, minmax(50px,1fr)); }
/* personaje: tarjeta + atributos y habilidades debajo */
.ch-grid { display:grid; grid-template-columns:170px minmax(0,1fr); gap:10px 16px; align-items:start; }
.ch-card { display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 8px; background:linear-gradient(180deg,#2c2418,#18130c); border:1px solid #5a4c33; border-radius:10px; }
.ch-doll { width:150px; height:150px; image-rendering:pixelated; background:radial-gradient(circle at 50% 72%, rgba(255,200,120,.16), rgba(0,0,0,.28) 70%); border-radius:8px; }
.ch-name { font-size:18px; color:#fff; } .ch-lvl { color:#ffd36a; font-weight:700; font-size:14px; } .ch-card .skbar { width:100%; } .ch-card .hint { text-align:center; margin:2px 0 0; }
.ch-att h3, .ch-skills h3 { margin:0 0 6px; } .ch-att .good { margin:0 0 6px; color:#7bd05a; font-weight:700; font-size:14px; }
.ch-row { display:grid; grid-template-columns:96px minmax(0,1fr) 28px 26px; align-items:center; gap:6px; padding:2px 0; font-size:14px; } .ch-l { color:var(--ink); } .ch-v { color:#ffd36a; text-align:right; }
.ch-meter { height:8px; background:#0b0907; border:1px solid #000; border-radius:4px; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.8); } .ch-meter i { display:block; height:100%; background:linear-gradient(90deg,#8d6a00,#e5b53b 70%,#ffe58a); }
.ch-p button { width:24px; height:22px; padding:0; background:#4a6a2a; color:#fff; border:1px solid #8fc46a; border-radius:5px; cursor:pointer; font-weight:700; } .ch-p button:hover { background:#5d8a34; }
.ch-skills { margin-top:12px; } .ch-sgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:4px 14px; }
.ch-srow { display:flex; justify-content:space-between; padding:3px 8px; background:#120f0b; border:1px solid #2c261c; border-radius:6px; font-size:14px; } .ch-srow b { color:#ffd36a; }
@media (max-width:520px) { .ch-grid { grid-template-columns:1fr; } }
/* habilidades en una sola columna: progreso arriba (en rejilla), hechizos y detalle debajo */
.sk-layout { grid-template-columns:1fr !important; }
#win-skills #skgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:6px; }
#win-skills .sk-right { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 16px; align-items:start; } #win-skills .sk-right h3 { grid-column:1 / -1; }
#win-skills #sk-detail { margin-top:0; }

/* ── Mapa del mundo (0.26.0) ── */
#win-map .fw-body { padding:8px; }
.wm-wrap { position:relative; background:#0d0b08; border:1px solid #5a4c33; border-radius:6px; overflow:auto; max-height:62vh; }
#wm-canvas { display:block; width:100%; height:auto; image-rendering:pixelated; }
#wm-tip { position:absolute; z-index:5; pointer-events:none; background:rgba(20,16,10,.96); color:var(--ink); border:1px solid #8a6b1f; border-radius:6px; padding:5px 8px; font-size:12px; line-height:1.35; white-space:nowrap; }
#wm-tip i { font-style:normal; font-weight:700; } #wm-tip .d0 { color:#8ee08e; } #wm-tip .d1 { color:#d8e08e; } #wm-tip .d2 { color:#f0c050; } #wm-tip .d3 { color:#f08a50; } #wm-tip .d4 { color:#ff5a5a; }
.wm-legend { display:flex; flex-wrap:wrap; gap:4px 12px; margin:8px 2px 4px; font-size:12px; color:var(--dim); } .wm-legend span { display:inline-flex; align-items:center; gap:5px; }
.wm-legend i { width:11px; height:11px; border-radius:2px; border:1px solid #000; display:inline-block; } .wm-me { width:10px; height:10px; border-radius:50%; background:#e53b3b; border:2px solid #fff; display:inline-block; }

/* 0.27.0 · ficha de stats, recuadro flotante y herrería */
.icard { font-size:13px; line-height:1.35; } .icard .ic-name { display:block; color:#ffd36a; font-size:14px; margin-bottom:1px; } .icard .ic-sub { font-size:11.5px; margin:1px 0 3px; }
.icard .ii { display:flex; justify-content:space-between; gap:14px; border-top:1px solid #2c261c; padding:1px 0; } .icard .ii span { color:var(--dim); } .icard .ii b { font-weight:600; } .icard .good { color:#8fe39a; } .icard .bad { color:#ff8a7a; }
.ic-bar { height:5px; background:#000; border-radius:3px; overflow:hidden; margin:2px 0 3px; border:1px solid #3d3324; } .ic-bar i { display:block; height:100%; background:#6fcf6a; }
#itemtip { position:fixed; z-index:2000; width:230px; padding:7px 10px; background:rgba(18,15,11,.96); border:1px solid #c9a85a; border-radius:8px; box-shadow:0 4px 14px #000a; pointer-events:none; }
#npcbox.smithbox { width:min(640px, 94vw); max-height:86vh; overflow:auto; }
.sm-chunks { display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 8px; } .sm-ch { position:relative; width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:#120f0b; border:1px solid #3d3324; border-radius:7px; }
.sm-ch.off { opacity:.4; } .sm-ch em { position:absolute; right:2px; bottom:0; font-size:11px; font-style:normal; color:#fff; text-shadow:0 0 3px #000, 0 0 3px #000; }
.sm-row { cursor:default; } .sm-col { flex:1; display:flex; flex-direction:column; min-width:0; } .sm-col .nb-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sm-col .dim { font-size:11.5px; } .sm-row .nb-price.bad { color:#ff8a7a; } .sm-row button { min-width:74px; }
.sm-cost { font-weight:600; color:#f2dfae; white-space:nowrap; font-size:13px; } .sm-cost.bad { color:#ff8a7a; }

/* 0.28.0: pestañas y forja */
.sm-tabs { display:flex; gap:6px; margin:6px 0 4px; } .sm-tabs button { flex:1; background:#241d13; color:#cdbf9d; border:1px solid #4a3c26; padding:6px 8px; cursor:pointer; border-radius:6px 6px 0 0; font-size:13px; }
.sm-tabs button.on { background:#4a6a2a; color:#fff; border-color:#7fa04a; }
.sm-filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:4px 0 6px; } .sm-filters select { background:#120f0b; color:var(--ink); border:1px solid #4a3c26; padding:3px 6px; border-radius:4px; font-size:12.5px; } .sm-can { font-size:12.5px; color:#cdbf9d; cursor:pointer; }
.sm-tier { color:#f2dfae !important; border-bottom:1px solid #3d3324; margin-top:10px !important; }
.sm-forge .sm-col .nb-name { white-space:normal; } .sm-mats { display:flex; flex-wrap:wrap; gap:4px 8px; margin-top:3px; }
.sm-mat { display:inline-flex; align-items:center; gap:3px; font-size:12px; color:#bfe3a0; background:#120f0b; border:1px solid #3d3324; border-radius:5px; padding:1px 5px 1px 2px; } .sm-mat i { font-style:normal; color:#a99f86; font-size:11px; } .sm-mat.bad { color:#ff9a8a; border-color:#6a2f28; }
.sm-col .dim.bad { color:#ff8a7a; }

/* ───── 0.29.0: hotbar movible y atenuable, barra de crafteo, efectos, tabla de campeones ───── */
#hotbar { opacity:var(--hk-op,1); transition:opacity .2s; } #hotbar:hover { opacity:1; }
.hk-grip { display:flex; align-items:center; justify-content:center; width:14px; cursor:grab; color:#a89268; font-size:15px; user-select:none; touch-action:none; } .hk-grip:active { cursor:grabbing; color:#ffd36a; }
.hk-dim { width:20px; background:none; border:0; color:#a89268; cursor:pointer; font-size:15px; padding:0; } .hk-dim:hover { color:#ffd36a; }
#jobbar { position:fixed; left:50%; bottom:78px; transform:translateX(-50%); z-index:60; display:flex; align-items:center; gap:10px; min-width:300px; padding:7px 12px; background:rgba(20,15,9,.94); border:1px solid #8a6a2c; border-radius:10px; box-shadow:0 2px 14px rgba(0,0,0,.7); font-size:13px; color:#f1e3c0; }
#jobbar[hidden] { display:none; } .jb-track { flex:1; height:10px; background:#120e08; border:1px solid #4a3e2a; border-radius:6px; overflow:hidden; } #jobfill { height:100%; width:0; background:linear-gradient(90deg,#c98a1e,#ffd36a); } #jobx { background:#3a2a1a; color:#ffd36a; border:1px solid #6a4c24; border-radius:6px; cursor:pointer; padding:1px 7px; }
.qty-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0 8px; font-size:13px; } .qty-row input { width:64px; padding:3px 5px; background:#150f09; color:#f1e3c0; border:1px solid #5a4c33; border-radius:5px; } .qty-row button { padding:2px 8px; background:#2a2016; color:#ffd36a; border:1px solid #5a4c33; border-radius:5px; cursor:pointer; } .qty-row em { flex-basis:100%; font-size:11px; }
#buffs { position:absolute; left:8px; top:8px; display:flex; flex-direction:column; gap:4px; z-index:6; pointer-events:none; }
.buff { display:flex; align-items:center; gap:6px; padding:2px 8px 2px 4px; background:rgba(14,11,8,.78); border:1px solid #5a4c33; border-radius:14px; font-size:12px; color:#f1e3c0; pointer-events:auto; } .buff b { width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#2a2016; font-size:12px; }
.b-regen_hp b { background:#8f1f26; } .b-regen_sp b { background:#1f4aa8; } .b-speed b { background:#1f8a3a; } .b-champ1, .b-champ2, .b-champ3 { border-color:#e0b030; box-shadow:0 0 6px rgba(255,240,170,.35); }
.bd-row { display:flex; align-items:center; gap:10px; } .bd-rank { width:36px; text-align:center; font-weight:700; } .bd-lv { margin-left:auto; } .bd-pts { min-width:70px; text-align:right; }
.bd-1 { background:rgba(255,215,90,.14); } .bd-2 { background:rgba(210,220,235,.10); } .bd-3 { background:rgba(205,140,80,.10); } .bd-row.me { outline:1px solid #ffd36a; } .bd-me { color:#ffd36a; }

/* 0.30.0 · fan art de portada */
#l-pw2-row[hidden] { display:none; }

/* 0.31.0 · Banco */
#bankwin { position:fixed; left:12px; top:14px; width:352px; z-index:35; background:linear-gradient(#1b2a1d,#121a14); border:2px solid #c9a227; border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.7); padding:0 0 10px; color:var(--ink); }
#bankwin[hidden] { display:none; }
#bankwin .bk-head { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; background:linear-gradient(#2f6b3d,#1f4a2a); border-radius:8px 8px 0 0; border-bottom:2px solid #c9a227; }
#bankwin .bk-head b { color:#ffe082; font-size:15px; } #bankwin .bk-x { background:none; border:none; color:#ffe082; cursor:pointer; font-size:16px; }
#bankwin .bk-gold { padding:8px 10px 2px; font-size:14px; } #bankwin .bk-gold b { color:#ffd54a; }
#bankwin .bk-row { display:flex; gap:5px; align-items:center; padding:5px 10px; flex-wrap:wrap; } #bankwin .bk-row span { font-size:13px; color:var(--dim); }
#bankwin input { width:84px; background:#0d0b09; color:var(--ink); border:1px solid var(--line); padding:4px 6px; border-radius:4px; }
#bankwin button { background:#3a3020; color:var(--ink); border:1px solid var(--line); padding:4px 8px; border-radius:4px; cursor:pointer; } #bankwin button:hover { border-color:var(--gold); }
#bankwin button.primary { background:linear-gradient(#e6b73e,#a9741a); border-color:#ffe08a; color:#2a1604; font-weight:700; }
#bankwin .bk-hint { margin:2px 10px 0; font-size:12px; color:var(--dim); line-height:1.35; }
#bankwin .bk-grid { display:grid; grid-template-columns:repeat(5, 54px); grid-auto-rows:54px; gap:5px; padding:8px 10px 2px; justify-content:center; }
#bankwin .bk-slot { width:100%; height:100%; background:#0f1a12; border:1px solid #3d5a3f; border-radius:6px; } #bankwin .bk-slot.over { border-color:#ffd54a; background:#1f3a22; }

/* 0.34.0 · portada de login: arte completo (el logo ya viene dibujado en la imagen) */
#login, #create { background:#0a1f4a url(public/assets/login_bg.jpg) center / cover no-repeat; }
#login::before, #create::before { background:radial-gradient(ellipse at 50% 60%, rgba(8,5,22,0) 45%, rgba(8,5,22,.38) 100%); }
#login > .logo, #create > .logo { display:none; }
#login { justify-content:flex-end; padding-bottom:3vh; }
#create { justify-content:center; }
#loginform, #charsel { background:rgba(14,18,44,.78); }
#loginform .lead { display:none; }
#loginform { margin-top:auto; margin-bottom:0; padding:14px 22px; gap:8px; }
#login { padding-bottom:2vh; }

/* 0.35.0 · ventana de la guía (tutorial) */
#win-guide .fw-body { padding:0; display:flex; flex-direction:column; min-height:0; }
.gd-tabs { display:flex; flex-wrap:wrap; gap:4px; padding:8px; border-bottom:1px solid #4a3d26; background:rgba(0,0,0,.25); }
.gd-tab { font-size:12px; padding:4px 8px; border-radius:6px; background:#2a2236; color:var(--ink); border:1px solid #5a4c33; cursor:pointer; }
.gd-tab.on { background:#c9982b; color:#1a1208; border-color:#ffd36a; font-weight:700; }
.gd-page { padding:10px 14px 14px; overflow:auto; flex:1; min-height:0; max-height:calc(100vh - 220px); }
.gd-page h3 { margin:0 0 8px; color:var(--gold); font-size:18px; }
.gd-img { display:block; width:100%; height:auto; border-radius:6px; image-rendering:auto; margin-bottom:8px; }
.gd-intro { margin:0 0 8px; color:#d9cdb0; line-height:1.45; }
.gd-steps { margin:0 0 10px; padding-left:22px; line-height:1.5; } .gd-steps li { margin-bottom:5px; }
.gd-tips { background:rgba(255,211,106,.08); border-left:3px solid #c9982b; padding:6px 10px; margin-bottom:10px; font-size:13px; } .gd-tips p { margin:3px 0 0; }
.gd-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#dock { gap:3px; padding:6px 4px !important; } #dock button { min-width:0; font-size:11px; } #dock button.rs { flex:0 0 28px; }

/* 0.36.0 · chocobos */
#npcbox .nb-img canvas { width:44px; height:44px; image-rendering:pixelated; }
/* 0.36.0 · la selección de personaje va abajo para no tapar el logo de la portada */
#charsel { margin:auto 0 0; }

/* 0.38.0: objetos rotos */
.slot.broken img, .slot.broken canvas { filter:grayscale(.7) brightness(.65); }
.slot .brk { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-18deg); font-size:11px; font-weight:900; letter-spacing:.5px; color:#ff2a2a; text-shadow:0 0 2px #000,0 0 3px #000,1px 1px 0 #000,-1px -1px 0 #000; pointer-events:none; z-index:3; }

/* 0.41.2 · portada: el campo Server queda oculto (se rellena solo) y el recuadro sube un poco */
#loginform label:has(#l-server) { display:none; }
#login { padding-bottom:12vh; }

/* 0.42.0 · reloj (hora central de México) y eventos */
#clock { position:absolute; right:6px; top:6px; z-index:6; pointer-events:auto; text-align:right; background:rgba(10,8,20,.55); border:1px solid rgba(255,220,140,.35); border-radius:6px; padding:2px 7px; font-size:11px; line-height:1.25; color:#e9dfc2; text-shadow:0 1px 2px #000; }
#clock b { display:block; font-size:14px; color:#ffe08a; letter-spacing:.5px; }
#clock span { display:block; color:#cfc4a6; }
#evbadges i { display:block; font-style:normal; font-weight:700; color:#9ff0a0; }
#evpanel { position:fixed; right:16px; top:56px; z-index:200; width:290px; background:rgba(18,13,34,.96); border:1px solid #8a6a2a; border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; color:#e9dfc2; box-shadow:0 10px 40px rgba(0,0,0,.65); }
#evpanel[hidden] { display:none; }
#evpanel h3 { margin:0; color:var(--gold); } #evpanel p { margin:0; font-size:12px; color:#bdb394; }
#evpanel .evbtn { text-align:left; display:flex; flex-direction:column; gap:2px; padding:8px 10px; background:#2a2236; border:1px solid #5a4c33; border-radius:8px; cursor:pointer; color:inherit; }
#evpanel .evbtn em { font-style:normal; font-size:12px; color:#e08a6a; } #evpanel .evbtn small { color:#a99f84; font-size:11px; }
#evpanel .evbtn.on { background:#1f3a22; border-color:#6ad06a; } #evpanel .evbtn.on em { color:#9ff0a0; }

/* 0.44.0 · inventario fijo en la barra derecha: equipo (con barra de durabilidad) + mochila con scroll */
#invpanel { padding:6px 8px; } #invpanel h3 { margin:0 0 3px; font-size:13px; }
#invpanel .ip-row { display:flex; gap:10px; align-items:flex-start; justify-content:center; flex-wrap:wrap; }
#invpanel #equip { display:grid; grid-template-columns:repeat(3,32px); grid-template-rows:none; grid-auto-rows:39px; gap:3px; padding:5px; justify-content:center; }
#invpanel .eqcell { display:flex; flex-direction:column; gap:2px; width:32px; }
#invpanel #equip .slot, #invpanel #inv .slot { width:32px; height:32px; aspect-ratio:auto; }
#invpanel #equip #doll { width:34px; height:74px; justify-self:center; align-self:center; }
#invpanel #inv { display:grid; grid-template-columns:repeat(5,32px); grid-auto-rows:32px; gap:3px; padding:5px; max-height:168px; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#6a5522 #120f0b; }
#invpanel #inv::-webkit-scrollbar { width:8px; } #invpanel #inv::-webkit-scrollbar-thumb { background:#6a5522; border-radius:4px; } #invpanel #inv::-webkit-scrollbar-track { background:#120f0b; }
#invpanel #inv .slot em { font-size:11px; } 
#invpanel #item-actions { margin-top:5px; padding:4px 6px; } #invpanel .ia-btns button { padding:3px 8px; font-size:13px; } #invpanel #ia-name { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px; }
#invpanel #item-info:not(:empty) { max-height:120px; overflow:auto; font-size:13px; } #invpanel .slot .brk { font-size:7px; } #invpanel .slot small { font-size:8px; } #invpanel .ip-row { gap:8px; flex-wrap:nowrap; }
#invpanel .hint { font-size:11px; margin-top:3px; text-align:center; }
.dur { height:5px; background:#0a0806; border:1px solid #2a2218; border-radius:3px; overflow:hidden; } .dur i { display:block; height:100%; transition:width .25s, background .25s; }
.dur.g i { background:#4fd04f; } .dur.y i { background:#e6c93a; } .dur.r i { background:#e04a3a; }
#invpanel.flash { box-shadow:0 0 0 2px #ffd36a; }
/* 0.44.1: aviso destacado en el chat */
#chat .notice { color:#ffe14a; font-weight:bold; font-size:13px; letter-spacing:.5px; text-transform:uppercase; text-shadow:0 0 6px #ff9a00, 0 1px 0 #000; background:rgba(120,40,0,.45); border:1px solid #ff9a00; border-radius:4px; padding:3px 5px; margin:3px 0; animation:noticeglow 1.6s ease-in-out infinite alternate; }
@keyframes noticeglow { from { box-shadow:0 0 2px #ff9a00; } to { box-shadow:0 0 9px #ffcc33; } }