: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.perf #view { filter:none !important; }   /* 0.79.4: Modo rendimiento: sin filtro de pantalla */
body[data-contrast="alto"] #view { filter:contrast(1.26) saturate(1.18) brightness(1.06); } body[data-contrast="normal"] #view { filter:none; }
/* 0.89.0: con zoom no entero, #present muestra el juego ampliado a un múltiplo entero y el navegador lo ajusta con suavizado: todos los píxeles miden igual y no tiemblan al moverse. #view sigue debajo, invisible, recibiendo el ratón. */
#present { display:none; position:absolute; left:0; top:0; width:var(--w,1088px); height:var(--h,768px); pointer-events:none; filter:contrast(1.12) saturate(1.1) brightness(1.03); }
body.scaled #present { display:block; } body.scaled #view { opacity:0; filter:none; }
body[data-contrast="alto"] #present { filter:contrast(1.26) saturate(1.18) brightness(1.06); } body[data-contrast="normal"] #present { 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; } #gamecol, #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; }
/* (Orbe Online 0.7.1: las tarjetas de personaje ahora son .chs-*; ver el bloque «portada y selección de personaje» al final) */
#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 · pollotes */
#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; } }

/* 0.45.0: barra de durabilidad dentro de la casilla de una pieza gastada de la mochila */
.slot .dur.inslot { position:absolute; left:2px; right:2px; bottom:1px; margin:0; }

/* 0.46.0: ventana de Opciones y ajustes de interfaz */
#side { zoom:var(--ui,1); }
body.no-clock #clock { display:none !important; }
body[data-chat="small"] #chat { font-size:13px; } body[data-chat="large"] #chat { font-size:18px; }
#fps { position:absolute; left:6px; top:6px; z-index:6; padding:1px 6px; background:rgba(10,8,20,.6); border:1px solid rgba(255,255,255,.18); border-radius:4px; font:600 12px/1.4 system-ui; color:#9fe29f; pointer-events:none; }
#tab-options { padding:6px 10px 10px; }
.opt-sec { margin:0 0 10px; padding:6px 8px 8px; background:#14100b; border:1px solid var(--line); border-radius:6px; }
.opt-sec h4 { margin:0 0 6px; font-size:13px; letter-spacing:.8px; text-transform:uppercase; color:#e5b53b; }
.opt-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:3px 0; font-size:14px; }
.opt-row label { flex:1; color:var(--ink); }
.opt-row select { max-width:190px; background:#241e16; color:var(--ink); border:1px solid var(--line); padding:2px 4px; }
.opt-row input[type=range] { width:120px; } .opt-pair { display:flex; align-items:center; gap:8px; }
.opt-row input[type=checkbox] { width:18px; height:18px; accent-color:#e5b53b; }
.opt-info { margin-top:4px; font-size:12px; color:var(--dim); }
.opt-btns { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 6px; }
.opt-btns button, .opt-row button { background:#3a3020; color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:5px 10px; cursor:pointer; font-size:13px; }
.opt-btns button:hover, .opt-row button:hover { border-color:var(--gold); }
#dock button { min-width:0; }

/* 0.48.0 · Character Shop (puesto personal) */
#dock-stall.on { background:#3a2c12; border-color:#e5b53b; }
#tab-stall { padding:8px; font-size:14px; }
#tab-stall.over { outline:2px dashed #e5b53b; outline-offset:-4px; }
.st-hint { margin:6px 0; color:#b9a77d; font-size:12px; line-height:1.35; }
.st-open { width:100%; padding:10px; font-size:15px; }
.st-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; color:#9fe79f; }
.st-zone { border:2px dashed #6b5524; border-radius:8px; padding:12px; text-align:center; color:#cdbb94; background:#14100b; margin-bottom:8px; }
#tab-stall.over .st-zone { background:#2a2010; border-color:#e5b53b; color:#ffe08a; }
.st-list { display:flex; flex-direction:column; gap:4px; max-height:300px; overflow:auto; }
.st-row { display:flex; align-items:center; gap:5px; padding:3px 5px; background:#14100b; border:1px solid var(--line); border-radius:6px; }
.st-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.st-have { color:#8d7f5d; font-size:11px; white-space:nowrap; }
.st-row input { width:58px; background:#241e16; color:var(--ink); border:1px solid var(--line); padding:2px 4px; border-radius:4px; }
.st-row input.bad { border-color:#c0392b; background:#3a1a16; }
.st-x2, .st-gold { color:#8d7f5d; font-size:12px; }
.st-x { background:none; border:none; color:#c0705a; cursor:pointer; font-size:14px; }
.st-total { margin:8px 0 2px; color:#ffd24a; font-weight:700; }
.st-buyq { width:50px; margin:0 6px; background:#241e16; color:var(--ink); border:1px solid var(--line); padding:2px 4px; border-radius:4px; }

/* ───── 0.51.0 · Gran Casino ───── */
.casino { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(760px,96vw); max-height:94vh; overflow:auto; z-index:60; color:#f3ead2; border:2px solid #d9a93a; border-radius:12px; background:radial-gradient(ellipse at 50% 0%,#5a1620 0,#2b0d14 70%); box-shadow:0 10px 40px #000c, inset 0 0 0 2px #0006; font-size:14px; }
.casino[hidden] { display:none; }
.cs-head { display:flex; align-items:center; gap:10px; padding:8px 12px; background:linear-gradient(180deg,#8a2434,#5a1620); border-bottom:2px solid #d9a93a; }
.cs-head b { color:#ffd36a; font-size:17px; letter-spacing:.04em; } .cs-table { flex:1; color:#e8c9a0; font-size:12px; }
.cs-x { background:#0004; color:#fff; border:1px solid #d9a93a; border-radius:6px; cursor:pointer; padding:2px 9px; }
.cs-bar { display:flex; justify-content:space-between; padding:6px 14px; background:#0005; color:#ffd36a; font-weight:600; }
.cs-up { color:#7be07b; } .cs-down { color:#ff8d8d; }
.cs-body { padding:12px 14px; display:flex; flex-direction:column; gap:10px; align-items:center; }
.cs-msg { padding:8px 14px 12px; text-align:center; min-height:20px; color:#e8d9b8; } .cs-msg.good { color:#8cf08c; font-weight:700; } .cs-msg.bad { color:#ff9c8a; }
.cs-chips { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.cs-chip { width:42px; height:42px; border-radius:50%; border:3px dashed #fff8; background:#b32a3a; color:#fff; font-weight:800; cursor:pointer; box-shadow:0 2px 0 #0008; }
.cs-chip:nth-child(2) { background:#2a6fb3; } .cs-chip:nth-child(3) { background:#2c8a4a; } .cs-chip:nth-child(4) { background:#222; } .cs-chip:nth-child(5) { background:#7b3fa0; } .cs-chip:nth-child(6) { background:#c8901a; }
.cs-chip.on { outline:3px solid #ffd36a; transform:translateY(-3px); }
.cs-go { background:linear-gradient(180deg,#f2c14e,#c8901a); color:#2b0d14; border:2px solid #fff3; border-radius:8px; font-weight:900; letter-spacing:.08em; padding:9px 26px; cursor:pointer; font-size:15px; }
.cs-sec { background:#3b1a22; color:#f3ead2; border:1px solid #d9a93a; border-radius:8px; padding:8px 14px; cursor:pointer; font-weight:700; }
.cs-go:disabled, .cs-sec:disabled { opacity:.4; cursor:default; }
.cs-act { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; } .cs-total { font-weight:700; color:#ffd36a; } .cs-total.bad { color:#ff8d8d; }
.cs-reels { display:flex; gap:10px; } .cs-reel { width:96px; height:110px; display:flex; align-items:center; justify-content:center; font-size:56px; background:linear-gradient(180deg,#d8d0b8,#fff,#d8d0b8); border:4px solid #d9a93a; border-radius:10px; color:#000; box-shadow:inset 0 0 14px #0006; } .cs-reel.spin { filter:blur(1px); }
.cs-pays { display:flex; flex-wrap:wrap; gap:4px 12px; justify-content:center; font-size:12px; color:#e8d9b8; }
.cs-board { display:grid; gap:2px; width:100%; padding:6px; background:#0a5a2c; border:3px solid #d9a93a; border-radius:8px; }
.cs-spot { position:relative; min-height:34px; border:1px solid #fff6; background:#0d6b34; color:#fff; font-weight:700; font-size:12px; cursor:pointer; padding:2px; white-space:pre-line; line-height:1.1; }
.cs-spot.red { background:#b32a3a; } .cs-spot.black { background:#1b1b1f; } .cs-spot.green { background:#1f8a4a; } .cs-spot.dice { background:#164a8a; font-size:11px; } .cs-spot.out { background:#0d6b34; }
.cs-spot.sum { font-size:10px; } .cs-spot:hover { filter:brightness(1.25); } .cs-spot.has { box-shadow:inset 0 0 0 2px #ffd36a; }
.cs-spot .chip:not(:empty) { position:absolute; right:2px; bottom:2px; min-width:24px; padding:1px 4px; border-radius:11px; background:#ffd36a; color:#2b0d14; font-style:normal; font-size:11px; font-weight:900; border:2px dashed #2b0d14; }
.cs-board.wheel { grid-template-columns:repeat(4,1fr); } .cs-board.wheel .cs-spot { min-height:46px; font-size:14px; }
.cs-last { min-width:140px; text-align:center; font-size:34px; font-weight:900; padding:6px 20px; border-radius:10px; background:#0006; border:2px solid #d9a93a; } .cs-last:empty { display:none; }
.cs-last.red { background:#b32a3a; } .cs-last.black { background:#1b1b1f; } .cs-last.green { background:#1f8a4a; } .cs-last.rolling { opacity:.7; } .cs-last.dice { font-size:30px; }
.cs-res { display:flex; gap:4px; align-items:center; flex-wrap:wrap; justify-content:center; font-size:12px; color:#cdbd9a; } .cs-h { min-width:24px; text-align:center; border-radius:12px; padding:1px 5px; font-weight:800; color:#fff; } .cs-h.red { background:#b32a3a; } .cs-h.black { background:#1b1b1f; } .cs-h.green { background:#1f8a4a; }
.cs-lbl { color:#ffd36a; font-weight:700; letter-spacing:.06em; } .cs-val { min-height:18px; color:#e8d9b8; }
.cs-hand { display:flex; gap:6px; min-height:92px; justify-content:center; flex-wrap:wrap; }
.cs-card { width:62px; height:88px; background:#fffdf4; border-radius:7px; border:2px solid #888; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 2px 6px #0008; font-size:22px; user-select:none; }
.cs-card b { font-size:24px; } .cs-card i { font-style:normal; font-size:28px; } .cs-card.r { color:#c21f2f; } .cs-card.k { color:#111; }
.cs-card.back { background:repeating-linear-gradient(45deg,#8a2434,#8a2434 6px,#5a1620 6px,#5a1620 12px); border-color:#d9a93a; }
.cs-card.click { cursor:pointer; } .cs-card.hold { transform:translateY(-10px); border-color:#ffd36a; box-shadow:0 0 0 3px #ffd36a, 0 4px 10px #000a; }
.cs-paytable { display:grid; grid-template-columns:repeat(3,1fr); gap:2px 14px; font-size:11px; width:100%; } .cs-paytable .row { display:flex; justify-content:space-between; padding:1px 6px; border-radius:4px; } .cs-paytable .row.on { background:#ffd36a; color:#2b0d14; font-weight:800; }
#l-links { text-align:center; margin:10px 0 0; } #l-links a { color:#8ea1ff; font-weight:600; text-decoration:none; } #l-links a:hover { text-decoration:underline; }
#tab-stall .st-info { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0; padding:6px 8px; background:#2a2010; border:1px solid #6b5420; border-radius:6px; }
#tab-stall .st-info .st-earn { color:#ffe08a; font-weight:bold; margin-left:auto; }
/* 0.53.0 · eventos de mundo: panel de administración */
#evpanel { max-height:calc(100vh - 80px); overflow-y:auto; }
#evpanel .wev { display:flex; flex-direction:column; gap:6px; }
#evpanel .wev h4 { margin:6px 0 0; color:#ffd24a; font-size:13px; }
#evpanel .wev-row { display:grid; grid-template-columns:1fr; gap:3px; padding:7px 9px; background:#2a2236; border:1px solid #5a4c33; border-radius:8px; }
#evpanel .wev-row.on { background:#1f3a22; border-color:#6ad06a; }
#evpanel .wev-row small { color:#a99f84; font-size:11px; }
#evpanel .wev-ctl { display:flex; align-items:center; gap:5px; margin-top:2px; } #evpanel .wev-ctl em, #evpanel .wev-add em { font-style:normal; font-size:11px; color:#a99f84; }
#evpanel .wev-min { width:58px; background:#14101f; color:#e9dfc2; border:1px solid #5a4c33; border-radius:5px; padding:3px 4px; }
#evpanel .wev-go, #evpanel .wev-stop { padding:4px 10px; border-radius:6px; border:1px solid #6ad06a; background:#244a28; color:#cff7cf; cursor:pointer; margin-left:auto; }
#evpanel .wev-stop { border-color:#d06a6a; background:#4a2424; color:#f7cfcf; }
#evpanel .wev-sched { display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:12px; color:#d8cdb0; padding:3px 6px; background:#201a2d; border-radius:6px; }
#evpanel .wev-x { background:none; border:0; color:#e08a6a; cursor:pointer; }
#evpanel .wev-add { display:flex; gap:4px; align-items:center; flex-wrap:wrap; } #evpanel .wev-add select, #evpanel .wev-add input[type=time] { background:#14101f; color:#e9dfc2; border:1px solid #5a4c33; border-radius:5px; padding:3px 4px; }
#evpanel .wev-days { display:flex; gap:6px; flex-wrap:wrap; font-size:11px; } #evpanel .wev-day { display:flex; align-items:center; gap:2px; }

/* 0.54.4: aviso bajo la pantalla de entrada */
#l-refresh { margin:0 auto auto; text-align:center; color:#ffe9b0; font-size:14px; text-shadow:0 1px 3px #000; background:rgba(18,13,34,.7); border-radius:6px; padding:4px 12px; }
#l-store { text-align:center; margin:6px 0 0; } #l-store a { color:#8ea1ff; font-weight:600; text-decoration:none; } #l-store a:hover { text-decoration:underline; }

/* 0.55.1: panel de Warps (admin) */
#wppanel { position:fixed; right:16px; top:56px; z-index:200; width:250px; max-height:80vh; overflow:auto; 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); }
#wppanel[hidden] { display:none; }
#wppanel h3 { margin:0; color:var(--gold); } #wppanel p { margin:0; font-size:12px; color:#bdb394; }
#wppanel .wp-list { display:flex; flex-direction:column; gap:4px; }
#wppanel .wpbtn { text-align:left; padding:6px 10px; background:#2a2236; border:1px solid #5a4c33; border-radius:8px; cursor:pointer; color:inherit; }
#wppanel .wpbtn:hover { background:#3a2f4c; }

/* 0.56.0: panel de jugadores (admin) */
#plpanel { position:fixed; inset:0; background:rgba(10,8,6,.99); z-index:8; display:flex; justify-content:center; padding:12px; }
#plpanel[hidden] { display:none; }
#plpanel .plbox { width:min(1200px,100%); display:flex; flex-direction:column; gap:8px; color:#e9dfc2; min-height:0; }
#plpanel .pl-top { display:flex; gap:8px; align-items:center; } #plpanel .pl-top h2 { margin:0; color:var(--gold); }
#plpanel .pl-main { flex:1; display:flex; gap:12px; min-height:0; }
#plpanel aside { width:250px; display:flex; flex-direction:column; gap:6px; min-height:0; }
#plpanel .pl-list { overflow:auto; display:flex; flex-direction:column; gap:3px; }
#plpanel .pl-row { text-align:left; display:grid; grid-template-columns:12px 1fr; column-gap:6px; padding:5px 8px; background:#2a2236; border:1px solid #4a3d2b; border-radius:6px; color:inherit; cursor:pointer; }
#plpanel .pl-row.on { border-color:var(--gold); background:#3a2f4c; } #plpanel .pl-row i { width:8px; height:8px; border-radius:50%; background:#555; align-self:center; } #plpanel .pl-row i.on { background:#4ad66a; }
#plpanel .pl-row span { grid-column:2; font-size:11px; color:#a99f84; }
#plpanel .pl-form { flex:1; overflow:auto; padding-right:8px; } #plpanel .pl-form h3 { margin:0; color:var(--gold); } #plpanel .pl-form h4 { margin:14px 0 6px; color:#d9c28a; border-bottom:1px solid #4a3d2b; }
#plpanel .pl-head { display:flex; flex-direction:column; gap:2px; } #plpanel .pl-head span { font-size:12px; color:#bdb394; }
#plpanel .pl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:6px 12px; }
#plpanel .pl-f { display:flex; flex-direction:column; font-size:12px; gap:2px; } #plpanel .pl-f span { color:#bdb394; }
#plpanel input, #plpanel textarea { background:#171221; color:#f1e8cf; border:1px solid #5a4c33; border-radius:5px; padding:4px 6px; font:inherit; width:100%; box-sizing:border-box; }
#plpanel .pl-bag { display:flex; flex-direction:column; gap:2px; margin-top:6px; }
#plpanel .pl-slot { display:grid; grid-template-columns:28px 1fr 90px 90px 30px; gap:6px; align-items:center; } #plpanel .pl-slot.hd { color:#bdb394; font-size:12px; }
#plpanel .pl-actions { display:flex; gap:8px; margin:14px 0 24px; }
#plpanel .pl-msg { margin:0; min-height:1.2em; } #plpanel .pl-msg.good { color:#7adf8a; } #plpanel .pl-msg.warn { color:#e08a6a; }

/* 0.56.1: aviso de reconexión sobre el juego */
#reconnect { position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:300; background:rgba(40,16,12,.95); border:1px solid #c0583a; color:#ffe2d6; padding:8px 16px; border-radius:8px; font-size:14px; box-shadow:0 6px 24px rgba(0,0,0,.6); }
#reconnect[hidden] { display:none; }

/* 0.57.0: recuadro de grupo movible y con más opciones */
.partybox { min-width:150px; max-width:230px; user-select:none; }
.partybox .phead { display:flex; align-items:center; gap:4px; cursor:move; padding-bottom:2px; border-bottom:1px solid #3d3324; margin-bottom:2px; } .partybox .phead .sp { flex:1; }
.partybox button.pt { margin:0; padding:0 5px; font-size:12px; line-height:18px; min-height:0; }
.partybox .pm { align-items:center; gap:4px; } .partybox .pm .pn { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.partybox .ploc, .partybox .pbonus { font-size:11px; opacity:.85; } .partybox .pbonus { color:#9af0ff; }
.partybox .prow { display:flex; gap:4px; margin-top:3px; } .partybox .prow button { margin:0; flex:1; font-size:12px; } .partybox .prow input { flex:1; min-width:0; font-size:12px; background:#120f0b; color:#f1e8cf; border:1px solid #3d3324; border-radius:4px; padding:2px 4px; }

/* 0.60.0: tienda de Gems */
#dock-gems { border-color:#4b6a8a !important; } #dock-gems:hover { border-color:#7fd0ff !important; background:#1b2a38 !important; }
#gemshop { position:fixed; inset:0; background:rgba(8,10,16,.98); z-index:8; display:flex; justify-content:center; padding:12px; }
#gemshop[hidden] { display:none; }
#gemshop .gs-box { width:min(1100px,100%); display:flex; flex-direction:column; gap:10px; color:#e9dfc2; min-height:0; }
#gemshop .gs-top { display:flex; align-items:center; gap:12px; } #gemshop .gs-top h2 { margin:0; color:#9fe0ff; flex:1; }
#gemshop .gs-balance { background:#16222e; border:1px solid #4b6a8a; border-radius:999px; padding:4px 14px; font-weight:600; } #gemshop .gs-balance b { color:#7fd0ff; font-size:18px; }
#gemshop .gs-x { background:#2a1d1d; color:#f2b6b6; border:1px solid #6a3a3a; border-radius:8px; padding:4px 10px; cursor:pointer; }
#gemshop .gs-tabs { display:flex; gap:6px; flex-wrap:wrap; } #gemshop .gs-tab { background:#1b2430; color:#cfe0f0; border:1px solid #34506a; border-radius:8px; padding:6px 12px; cursor:pointer; font-weight:600; }
#gemshop .gs-tab.on { background:#254a6c; border-color:#7fd0ff; color:#fff; }
#gemshop .gs-grid { flex:1; min-height:0; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; align-content:start; padding:2px; }
#gemshop .gs-card { background:#18202b; border:1px solid #2f4258; border-radius:12px; padding:10px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
#gemshop .gs-card.own { border-color:#4f8a5f; } #gemshop .gs-card small { color:#9fb0c2; font-size:12px; line-height:1.3; } #gemshop .gs-card .gs-note { color:#ffd36a; }
#gemshop .gs-sw { height:78px; display:flex; align-items:center; justify-content:center; image-rendering:pixelated; }
#gemshop .gs-sw.big { font-size:46px; } #gemshop .gs-sw.txt { font:700 20px system-ui; text-shadow:0 0 3px #000; } #gemshop .gs-sw.title { font:italic 600 16px system-ui; color:#ffd9a0; }
#gemshop .gs-sw.aura { width:78px; border-radius:50%; background:radial-gradient(circle, hsla(var(--h),100%,70%,.9), hsla(var(--h),100%,55%,.35) 55%, transparent 72%); }
#gemshop .gs-buy { margin-top:auto; width:100%; background:#254a6c; color:#fff; border:1px solid #5aa3d8; border-radius:8px; padding:6px; font-weight:700; cursor:pointer; }
#gemshop .gs-buy:disabled { background:#222a33; border-color:#3a4654; color:#7b8794; cursor:default; } #gemshop .gs-buy.on { background:#2f6a3f; border-color:#6fcf86; }
#gemshop .gs-soon { grid-column:1/-1; text-align:center; padding:40px 10px; } #gemshop .gs-admin { display:flex; gap:6px; align-items:center; } #gemshop .gs-admin input { width:110px; }
#gemshop .gs-msg { min-height:1.3em; } #gemshop .gs-msg.good { color:#8fe0a0; } #gemshop .gs-msg.warn { color:#f2b6b6; }

/* 0.62.1: indicador del estado del servidor en la pantalla de entrada */
#l-status { display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 10px; font-size:13px; font-weight:700; letter-spacing:.2px; }
#l-status i { width:10px; height:10px; border-radius:50%; background:#8a8f99; box-shadow:0 0 0 0 transparent; }
#l-status.on { color:#7fe39a; } #l-status.on i { background:#3ddc6c; box-shadow:0 0 8px #3ddc6c; }
#l-status.off { color:#ff8a8a; } #l-status.off i { background:#ff4a4a; box-shadow:0 0 8px #ff4a4a; }
#l-status.chk { color:#b8bfcc; }

/* 0.63.0: 🎁 Daily */
#dock-daily { position:relative; } #dock-daily .dd-dot { position:absolute; top:-4px; right:-2px; min-width:16px; height:16px; border-radius:8px; background:#e5392b; color:#fff; font:700 11px/16px system-ui; text-align:center; padding:0 4px; box-shadow:0 0 6px #e5392b; }
#dailywin, #seasonwin { position:fixed; inset:0; background:rgba(8,10,16,.72); z-index:8; display:flex; align-items:center; justify-content:center; padding:12px; }
#dailywin[hidden] { display:none; }
#dailywin .dd-box { width:min(760px,100%); max-height:100%; overflow:auto; background:#1b1812; border:2px solid #6a5630; border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:12px; color:#e9dfc2; box-shadow:0 14px 40px #000a; }
#dailywin .dd-top { display:flex; align-items:center; } #dailywin .dd-top h2 { margin:0; flex:1; color:#ffd36a; }
#dailywin .dd-x { background:#2a1d1d; color:#f2b6b6; border:1px solid #6a3a3a; border-radius:8px; padding:4px 10px; cursor:pointer; }
#dailywin .dd-sec { background:#221d14; border:1px solid #4a3f2a; border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; } #dailywin h3 { margin:0; font-size:16px; color:#ffe9a0; }
#dailywin .dd-best, #dailywin .dd-reset { color:#a99e82; text-align:center; } #dailywin .dd-best { text-align:left; }
#dailywin .dd-days { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
#dailywin .dd-day { position:relative; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:6px 2px; text-align:center; display:flex; flex-direction:column; gap:2px; font-size:12px; min-width:0; }
#dailywin .dd-day small { color:#a99e82; font-size:10.5px; line-height:1.2; } #dailywin .dd-day b { color:#ffd36a; font-size:12px; }
#dailywin .dd-day.big { border-color:#8a6a2a; background:#241d0e; } #dailywin .dd-day.cur { border-color:#ffd36a; box-shadow:0 0 10px #ffd36a88; }
#dailywin .dd-day.done { opacity:.55; } #dailywin .dd-tick { position:absolute; top:2px; right:4px; color:#7fe39a; font-weight:700; }
#dailywin .dd-claim { background:#2f6a3f; color:#fff; border:1px solid #6fcf86; border-radius:10px; padding:9px; font-weight:700; cursor:pointer; font-size:15px; }
#dailywin .dd-claim:disabled, #dailywin .dd-qbtn:disabled { background:#2a2a2a; border-color:#444; color:#8a8a8a; cursor:default; }
#dailywin .dd-quests { display:flex; flex-direction:column; gap:8px; }
#dailywin .dd-q { display:flex; align-items:center; gap:10px; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:8px 10px; } #dailywin .dd-q.ready { border-color:#ffd36a; } #dailywin .dd-q.done { opacity:.6; }
#dailywin .dd-qi { font-size:26px; } #dailywin .dd-qm { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } #dailywin .dd-qm small { color:#a99e82; }
#dailywin .dd-bar { height:8px; background:#0e0c08; border-radius:4px; overflow:hidden; border:1px solid #3d3522; } #dailywin .dd-bar i { display:block; height:100%; background:linear-gradient(90deg,#c58a1c,#ffd36a); }
#dailywin .dd-qbtn { background:#2f6a3f; color:#fff; border:1px solid #6fcf86; border-radius:8px; padding:7px 10px; font-weight:700; cursor:pointer; white-space:nowrap; }
#dailywin .dd-chest { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } #dailywin .dd-chest span { font-size:28px; } #dailywin .dd-chest small { flex:1; color:#cfc4a4; min-width:160px; } #dailywin .dd-chest .dd-claim { padding:7px 12px; font-size:14px; }
#dailywin .dd-msg { min-height:1.2em; text-align:center; } #dailywin .dd-msg.good { color:#8fe0a0; } #dailywin .dd-msg.warn { color:#f2b6b6; }
@media (max-width:560px) { #dailywin .dd-days { grid-template-columns:repeat(4,1fr); } }

/* 0.63.1: 🏆 Logros */
#awardswin { position:fixed; inset:0; background:rgba(8,10,16,.8); z-index:8; display:flex; align-items:center; justify-content:center; padding:12px; } #awardswin[hidden] { display:none; }
#awardswin .aw-box { width:min(820px,100%); max-height:100%; background:#1b1812; border:2px solid #6a5630; border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; color:#e9dfc2; box-shadow:0 14px 40px #000a; min-height:0; }
#awardswin .aw-top { display:flex; align-items:center; gap:12px; } #awardswin .aw-top h2 { margin:0; flex:1; color:#ffd36a; }
#awardswin .aw-count { background:#241d0e; border:1px solid #8a6a2a; border-radius:999px; padding:4px 14px; font-weight:600; color:#ffe9a0; }
#awardswin .aw-x { background:#2a1d1d; color:#f2b6b6; border:1px solid #6a3a3a; border-radius:8px; padding:4px 10px; cursor:pointer; }
#awardswin .aw-tabs { display:flex; gap:6px; flex-wrap:wrap; } #awardswin .aw-tab { background:#241e16; color:#d9cfae; border:1px solid #4a3f2a; border-radius:8px; padding:5px 10px; cursor:pointer; } #awardswin .aw-tab.on { background:#3a2f12; border-color:#e5b53b; color:#ffd36a; }
#awardswin .aw-list { overflow:auto; min-height:0; display:flex; flex-direction:column; gap:8px; padding-right:4px; }
#awardswin .aw-card { display:flex; align-items:center; gap:10px; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:8px 10px; } #awardswin .aw-card.done { border-color:#6a8a3a; background:#1a2014; }
#awardswin .aw-ic { font-size:26px; } #awardswin .aw-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } #awardswin .aw-main small { color:#a99e82; } #awardswin .aw-rw { color:#d9b95a !important; }
#awardswin .aw-bar { height:7px; background:#0e0c08; border-radius:4px; overflow:hidden; border:1px solid #3d3522; } #awardswin .aw-bar i { display:block; height:100%; background:linear-gradient(90deg,#c58a1c,#ffd36a); }
#awardswin .aw-wear { background:#254a6c; color:#fff; border:1px solid #5aa3d8; border-radius:8px; padding:7px 10px; font-weight:700; cursor:pointer; max-width:190px; } #awardswin .aw-wear.on { background:#2f6a3f; border-color:#6fcf86; }
#awardswin .aw-msg { min-height:1.2em; text-align:center; } #awardswin .aw-msg.warn { color:#f2b6b6; }
/* 0.63.1: con 10 botones el dock pasa a dos filas en vez de aplastar los textos */
#dock { flex-wrap:wrap; } #dock button { flex:1 1 44px; } #dock button.rs { flex:0 0 38px; }

/* 0.64.0: caja del recorrido guiado */
#tutbox { position:absolute; top:8px; left:8px; width:min(290px, 46%); z-index:5; background:rgba(20,16,10,.92); border:2px solid #c58a1c; border-radius:12px; padding:8px 10px; color:#f1e6c6; display:flex; flex-direction:column; gap:5px; font-size:13px; box-shadow:0 6px 18px #000a; }
#tutbox[hidden] { display:none; } #tutbox .tb-top { display:flex; align-items:center; gap:8px; } #tutbox .tb-top b { color:#ffd36a; white-space:nowrap; } #tutbox .tb-title { flex:1; color:#ffe9a0; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#tutbox .tb-min { background:#2a241b; color:#d9cfae; border:1px solid #5a4c33; border-radius:6px; width:24px; height:22px; cursor:pointer; line-height:1; }
#tutbox .tb-text { margin:0; line-height:1.35; } #tutbox small { color:#b5a982; } #tutbox .tb-rw { color:#d9b95a; }
#tutbox .tb-next { color:#f6c744; font-weight:600; }
#tutbox .tb-bar { height:8px; background:#0e0c08; border:1px solid #5a4c33; border-radius:4px; overflow:hidden; } #tutbox .tb-bar i { display:block; height:100%; background:linear-gradient(90deg,#c58a1c,#ffd36a); }
#tutbox .tb-btns { display:flex; gap:6px; } #tutbox .tb-btns button { flex:1; background:#241e16; color:#e9dfc2; border:1px solid #5a4c33; border-radius:8px; padding:5px; cursor:pointer; } #tutbox .tb-skip { color:#c9a5a5 !important; }
#tutbox.min { width:auto; max-width:min(290px,46%); }

/* 0.65.0: recuperar contraseña */
#l-forgot-link { text-align:center; margin:2px 0 0; font-size:13px; } #l-forgot-link a { color:#8ea1ff; text-decoration:none; } #l-forgot-link a:hover { text-decoration:underline; }
#l-reset { display:flex; flex-direction:column; gap:6px; border:1px solid #5a4a8a; border-radius:8px; padding:8px 10px; background:rgba(18,13,34,.6); } #l-reset[hidden] { display:none; } #l-reset .hint { margin:0; font-size:13px; color:#d8d0f0; }
.opt-mail { display:flex; flex-direction:column; gap:6px; } .opt-mail input { width:100%; box-sizing:border-box; } .opt-mail .st { min-height:1.2em; font-size:13px; color:#ffe9b0; }

/* 0.66.0: ventana de temporada (mismo estilo que Daily) */
#seasonwin .dd-box { width:min(760px,100%); max-height:100%; overflow:auto; background:#1b1812; border:2px solid #6a5630; border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:12px; color:#e9dfc2; box-shadow:0 14px 40px #000a; }
#seasonwin .dd-top { display:flex; align-items:center; } #seasonwin .dd-top h2 { margin:0; flex:1; color:#ffd36a; }
#seasonwin .dd-x { background:#2a1d1d; color:#f2b6b6; border:1px solid #6a3a3a; border-radius:8px; padding:4px 10px; cursor:pointer; }
#seasonwin .dd-sec { background:#221d14; border:1px solid #4a3f2a; border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; } #seasonwin h3 { margin:0; font-size:16px; color:#ffe9a0; }
#seasonwin .dd-best, #seasonwin .dd-reset { color:#a99e82; text-align:center; } #seasonwin .dd-best { text-align:left; }
#seasonwin .dd-days { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
#seasonwin .dd-day { position:relative; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:6px 2px; text-align:center; display:flex; flex-direction:column; gap:2px; font-size:12px; min-width:0; }
#seasonwin .dd-day small { color:#a99e82; font-size:10.5px; line-height:1.2; } #seasonwin .dd-day b { color:#ffd36a; font-size:12px; }
#seasonwin .dd-day.big { border-color:#8a6a2a; background:#241d0e; } #seasonwin .dd-day.cur { border-color:#ffd36a; box-shadow:0 0 10px #ffd36a88; }
#seasonwin .dd-day.done { opacity:.55; } #seasonwin .dd-tick { position:absolute; top:2px; right:4px; color:#7fe39a; font-weight:700; }
#seasonwin .dd-claim { background:#2f6a3f; color:#fff; border:1px solid #6fcf86; border-radius:10px; padding:9px; font-weight:700; cursor:pointer; font-size:15px; }
#seasonwin .dd-claim:disabled, #seasonwin .dd-qbtn:disabled { background:#2a2a2a; border-color:#444; color:#8a8a8a; cursor:default; }
#seasonwin .dd-quests { display:flex; flex-direction:column; gap:8px; }
#seasonwin .dd-q { display:flex; align-items:center; gap:10px; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:8px 10px; } #seasonwin .dd-q.ready { border-color:#ffd36a; } #seasonwin .dd-q.done { opacity:.6; }
#seasonwin .dd-qi { font-size:26px; } #seasonwin .dd-qm { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } #seasonwin .dd-qm small { color:#a99e82; }
#seasonwin .dd-bar { height:8px; background:#0e0c08; border-radius:4px; overflow:hidden; border:1px solid #3d3522; } #seasonwin .dd-bar i { display:block; height:100%; background:linear-gradient(90deg,#c58a1c,#ffd36a); }
#seasonwin .dd-qbtn { background:#2f6a3f; color:#fff; border:1px solid #6fcf86; border-radius:8px; padding:7px 10px; font-weight:700; cursor:pointer; white-space:nowrap; }
#seasonwin .dd-chest { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } #seasonwin .dd-chest span { font-size:28px; } #seasonwin .dd-chest small { flex:1; color:#cfc4a4; min-width:160px; } #seasonwin .dd-chest .dd-claim { padding:7px 12px; font-size:14px; }
#seasonwin .dd-msg { min-height:1.2em; text-align:center; } #seasonwin .dd-msg.good { color:#8fe0a0; } #seasonwin .dd-msg.warn { color:#f2b6b6; }
@media (max-width:560px) { #seasonwin .dd-days { grid-template-columns:repeat(4,1fr); } }
#dock-season { position:relative; } #dock-season .dd-dot { position:absolute; top:-4px; right:-2px; min-width:16px; height:16px; border-radius:8px; background:#e5392b; color:#fff; font:700 11px/16px system-ui; text-align:center; } #dock-season[hidden] { display:none; }
#seasonwin .sn-boost { background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:7px 10px; text-align:center; color:#cfc4a4; } #seasonwin .sn-boost.on { border-color:#ffd36a; background:#2a210c; color:#ffe9a0; box-shadow:0 0 10px #ffd36a55; }
#seasonwin .sn-pts { display:flex; flex-direction:column; gap:5px; } #seasonwin .sn-pts b { color:#ffd36a; }
#seasonwin[hidden] { display:none; }

/* 0.68.0: pestañas Daily / Weekly / Guild dentro de la ventana Daily */
#dailywin .dd-tabs { display:flex; gap:6px; } #dailywin .dd-tab { flex:1; position:relative; background:#16130d; color:#cfc4a4; border:1px solid #3d3522; border-radius:10px; padding:8px 6px; font-weight:700; cursor:pointer; }
#dailywin .dd-tab.on { background:#2a2214; color:#ffd36a; border-color:#8a6a2a; } #dailywin .dd-dot2 { margin-left:6px; min-width:16px; height:16px; border-radius:8px; background:#e5392b; color:#fff; font:700 11px/16px system-ui; display:inline-block; text-align:center; }
#dailywin .dd-bar.big { height:14px; position:relative; overflow:visible; } #dailywin .dd-bar.big > i { border-radius:4px; } #dailywin .dd-marks i { position:absolute; top:-3px; width:3px; height:20px; background:#6a5630; margin-left:-1px; } #dailywin .dd-marks i.hit { background:#7fe39a; }

/* 0.70.0 · casa de subastas */
#npcbox.aucbox { width:min(660px,96vw); }
.auc-tabs { display:flex; gap:4px; margin:6px 0; } .auc-tabs button.on { border-color:var(--gold); color:#ffd36a; }
.auc-claim { display:flex; flex-wrap:wrap; gap:6px; align-items:center; background:#2a3a1c; border:1px solid #6a9a3a; border-radius:8px; padding:6px 8px; margin:6px 0; font-size:14px; }
.auc-bar { display:flex; gap:6px; margin:4px 0; } #npcbox .auc-bar input { flex:1; width:auto; }
.auc-row { display:grid; grid-template-columns:34px 1fr auto auto; gap:8px; align-items:center; padding:5px 6px; border-bottom:1px solid #2c261c; font-size:14px; } .auc-row.top { background:rgba(80,140,60,.15); }
.auc-info small, .auc-price small { display:block; color:var(--dim); font-size:12px; } .auc-price { text-align:right; color:#ffd36a; white-space:nowrap; }
.auc-act { display:flex; gap:3px; align-items:center; flex-wrap:wrap; justify-content:flex-end; } #npcbox .auc-act input { width:80px; }
.auc-f { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:4px 0; font-size:14px; } .auc-sel { display:flex; align-items:center; gap:8px; margin:6px 0; } .auc-sum { color:#ffd36a !important; }
@media (max-width:560px) { .auc-row { grid-template-columns:34px 1fr; } .auc-price, .auc-act { grid-column:2; text-align:left; justify-content:flex-start; } }

/* 0.71.0 · waypoints */
#npcbox.wpbox { width:min(460px,96vw); }
.wp-list { display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.wp-row { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:5px 8px; border-bottom:1px solid #2c261c; font-size:13px; }
.wp-row.off { opacity:.5; } .wp-row.here { background:#2a3a1c; } .wp-cost { color:#ffd36a; font-variant-numeric:tabular-nums; }
.wp-list { max-height:58vh; overflow-y:auto; }
/* 0.73.0 · Raid Master */
#npcbox.raidbox { width:min(560px,96vw); max-height:88vh; overflow-y:auto; }
.rd-party { color:#d9b08c; } .rd-party.ok { color:#9be08a; }
.rd-list { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.rd-card { border:1px solid #3a3226; border-left:4px solid var(--rd,#888); background:#1b1812; padding:8px 10px; border-radius:4px; display:flex; flex-direction:column; gap:3px; }
.rd-card.wb.on { box-shadow:0 0 10px #a050ff55; }
.rd-title { font-weight:bold; font-size:15px; color:#ffe08a; } .rd-sub { font-size:12px; color:#e0a070; }
.rd-line { font-size:12px; color:#cfc6b4; } .rd-loot { font-size:11px; color:#9cc8ff; margin-top:2px; }
.rd-card button { align-self:flex-end; margin-top:4px; }

/* ───── 0.74.0: disposición nueva ─────
   El juego conserva casi todo su tamaño; bajo él van dos barras de hotkeys y a su lado el panel ocupa todo el espacio libre (HUD, equipo, mochila, atajos y chat) sin scroll. */
.hkrow { display:flex; gap:4px; }
body:not(.lnew) .hkrow2, body:not(.lnew) #hotstrip { display:none; }
#gamecol { grid-column:1; grid-row:1 / span 2; justify-self:start; align-self:start; display:flex; flex-direction:column; gap:8px; }
body.lnew #app { grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto minmax(150px,1fr); grid-template-areas:"game side" "game chat"; gap:8px; overflow:hidden; }
body.lnew #gamecol { grid-area:game; }
body.lnew #side { grid-area:side; overflow:visible; min-width:0; zoom:var(--ui,1); }
body.lnew #chatwrap { grid-area:chat; }
body.lnew #hotstrip { display:flex; align-items:stretch; height:48px; background:#0e0b08; border:2px solid var(--line); padding:3px 6px; }
body.lnew #hotbar { position:static; transform:none !important; left:auto !important; top:auto !important; bottom:auto !important; opacity:1 !important; width:100%; background:none; border:0; border-radius:0; padding:0; gap:12px; backdrop-filter:none; }
body.lnew .hkrow { flex:1; min-width:0; display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:3px; }
body.lnew .hk { width:100%; height:100%; min-width:0; }
body.lnew .hk canvas { max-height:100%; max-width:100%; }
body.lnew .hk-grip, body.lnew .hk-dim { display:none; }
body.lnew #toast { bottom:12px; }
/* panel ancho: barras en dos columnas, mochila y equipo sin scroll con casillas más grandes */
body.lnew #hud .meter { margin:0; }
body.lnew #hud .who { margin-bottom:6px; }
body.lnew.sidew #hud { display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; align-items:center; }
body.lnew.sidew #hud .who, body.lnew.sidew #hud .row.small { grid-column:1 / -1; margin:0; }
body.lnew #invpanel .ip-row { gap:12px; align-items:flex-start; justify-content:flex-start; flex-wrap:nowrap; }
body.lnew #invpanel .ip-eq { flex:none; } body.lnew #invpanel .ip-bag { flex:1; min-width:0; }
body.lnew #invpanel #equip { grid-template-columns:repeat(3,44px); grid-auto-rows:51px; gap:4px; padding:6px; }
body.lnew #invpanel .eqcell { width:44px; }
body.lnew #invpanel #equip .slot, body.lnew #invpanel #inv .slot { width:44px; height:44px; }
body.lnew #invpanel #equip #doll { width:46px; height:98px; }
body.lnew #invpanel #inv { grid-template-columns:repeat(auto-fill,44px); grid-auto-rows:44px; gap:4px; padding:6px; max-height:none; overflow:visible; justify-content:center; }
body.lnew #invpanel #inv .slot em { font-size:12px; }
body.lnew #invpanel #item-actions { margin-top:6px; padding:5px 8px; } body.lnew #invpanel #ia-name { max-width:none; flex:1; font-size:14px; } body.lnew #invpanel .ia-btns button { padding:4px 12px; font-size:14px; }
body.lnew #invpanel #item-info { height:56px; max-height:56px; overflow:auto; font-size:13px; }
body.lnew #invpanel .hint { font-size:12px; }
body.lnew #dock button { font-size:13px; padding:7px 2px 5px; } body.lnew #dock button i { font-size:24px; }
body.lnew.tight #invpanel .hint { display:none; } body.lnew.tight #invpanel #item-info { height:40px; max-height:40px; }

/* 0.76.0 · efectos activos: recuadros con icono y tiempo, abajo a la izquierda del mapa */
#buffs { left:8px; top:auto; bottom:8px; flex-direction:row; flex-wrap:wrap-reverse; align-content:flex-start; gap:5px; max-width:calc(100% - 16px); }
body:not(.lnew) #buffs { bottom:54px; }
#buffs .buff { flex-direction:column; gap:1px; padding:3px 4px 2px; min-width:40px; border-radius:7px; background:rgba(14,11,8,.82); border:1px solid #5a4c33; text-align:center; line-height:1.1; font-variant-numeric:tabular-nums; }
#buffs .buff b { width:30px; height:28px; border-radius:6px; font-size:19px; background:#2a2016; }
#buffs .buff span { font-size:11px; font-weight:700; color:#ffe9b0; }
.b-spell b { background:#4a3a7a !important; } .b-spell { border-color:#8f7ad0 !important; }
.b-regen_hp { border-color:#c94a52 !important; } .b-regen_sp { border-color:#4a7ae0 !important; } .b-speed { border-color:#3cc060 !important; }
.buff.ending { animation:buffblink .7s steps(2) infinite; } @keyframes buffblink { 50% { opacity:.45; } }

/* 0.77.0 · The Starfall Chronicle */
#storybox { position:absolute; top:8px; left:8px; width:min(290px, 46%); z-index:5; background:rgba(16,14,24,.92); border:2px solid #6a7fd6; border-radius:12px; padding:8px 10px; color:#e6e8f5; font-size:13px; display:flex; flex-direction:column; gap:5px; }
#tutbox:not([hidden]) ~ #storybox { top:auto; bottom:8px; }
#storybox[hidden] { display:none; } #storybox .sb-top { display:flex; align-items:center; gap:8px; } #storybox .sb-top b { color:#aebcff; white-space:nowrap; } #storybox .sb-title { flex:1; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#storybox .sb-min { background:#232338; color:#cfd5f5; border:1px solid #4a5590; border-radius:6px; width:24px; height:22px; cursor:pointer; line-height:1; }
#storybox .sb-text { margin:0; line-height:1.35; } #storybox small { color:#9aa4d6; } #storybox .sb-rw { color:#d9c37a; } #storybox.locked { border-color:#555a78; opacity:.92; }
#storybox .sb-bar { height:8px; background:#0b0b14; border:1px solid #4a5590; border-radius:4px; overflow:hidden; } #storybox .sb-bar i { display:block; height:100%; background:linear-gradient(90deg,#6a7fd6,#b9c4ff); }
#storybox.min { width:auto; max-width:min(290px,46%); }
/* Orbe Online 0.3.0: misión de la Compañía (abajo a la derecha del mapa, tinta y sal) */
#missionbox { position:absolute; right:8px; bottom:8px; width:min(290px, 46%); z-index:5; background:rgba(22,16,14,.93); border:2px solid #b0574a; border-radius:12px; padding:8px 10px; color:#f1e6dc; font-size:13px; display:flex; flex-direction:column; gap:5px; }
#missionbox[hidden] { display:none; } #missionbox .mb-top { display:flex; align-items:center; gap:8px; } #missionbox .mb-top b { color:#e8a593; white-space:nowrap; } #missionbox .mb-title { flex:1; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#missionbox .mb-min { background:#33221e; color:#f1d2c6; border:1px solid #8a4a3e; border-radius:6px; width:24px; height:22px; cursor:pointer; line-height:1; }
#missionbox .mb-text { margin:0; line-height:1.35; } #missionbox small { color:#d6aa9a; }
#missionbox .mb-bar { height:8px; background:#120c0b; border:1px solid #8a4a3e; border-radius:4px; overflow:hidden; } #missionbox .mb-bar i { display:block; height:100%; background:linear-gradient(90deg,#b0574a,#f0c9a0); }
#missionbox.min { width:auto; max-width:min(290px,46%); }
.nb-mission p.nb-big { font-style:italic; } .nb-mission .nb-step { margin-left:auto; color:#e8a593; font-size:13px; white-space:nowrap; } .nb-mission .nb-choice { display:block; width:100%; margin:6px 0 0; } .nb-mission .nb-state { text-align:center; color:#ffe08a; margin:8px 0; }
#storymodal { position:absolute; inset:0; z-index:30; background:rgba(5,5,12,.72); display:flex; align-items:center; justify-content:center; padding:16px; }
#storymodal .sm-card { max-width:460px; max-height:90%; overflow:auto; background:#14131f; border:2px solid #6a7fd6; border-radius:14px; padding:16px 18px; color:#e6e8f5; box-shadow:0 8px 40px #000a; }
#storymodal h3 { margin:2px 0 10px; color:#cdd6ff; } #storymodal p { line-height:1.5; margin:0 0 10px; font-style:italic; } #storymodal .sm-who { color:#9aa4d6; text-transform:uppercase; letter-spacing:.08em; }
#storymodal button { background:#3a4a9a; color:#fff; border:0; border-radius:8px; padding:7px 18px; cursor:pointer; font-size:14px; }

/* 0.77.2 · redes sociales en la pantalla de entrada */
#l-social { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:10px 0 0; } #l-social a { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid #3a4a8a; border-radius:999px; color:#c9d3ff; text-decoration:none; font-weight:600; font-size:13px; background:#141a33; }
#l-social a:hover { border-color:#8ea1ff; color:#fff; } #l-social svg { flex:none; }

/* 0.78.4 · ventana «Online» */
#win-online { min-width:170px; min-height:80px; } #win-online .fw-body { padding:6px 8px 8px; max-height:50vh; }
#win-online #on-count { color:var(--dim); font-weight:400; font-size:12px; }
.on-row { display:flex; justify-content:space-between; gap:10px; padding:3px 6px; border-radius:5px; cursor:pointer; font-size:13px; } .on-row:hover { background:#2f2616; }
.on-row .on-lv { color:var(--dim); font-size:12px; } .on-row.fr .on-name { color:#8fe08f; } .on-row.gd .on-name { color:#9fc6ff; }

/* 0.79.0 · mochilas */
#win-bag { min-width:250px; min-height:80px; }
#bag-grid { display:grid; grid-template-columns:repeat(5, 48px); gap:4px; justify-content:center; padding:4px; background:#120f0b; border:1px solid #3d3324; border-radius:8px; }
#bag-grid .slot { width:48px; height:48px; aspect-ratio:auto; border-radius:6px; } #bag-grid .slot.over { border-color:#ffd36a; background:#3a2f12; }
.bag-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:6px; font-size:12px; } .bag-foot input { width:56px; }
.slot em.bagn { right:2px; bottom:0; font-size:11px; font-weight:600; background:rgba(20,50,20,.8); }

/* 0.79.2 · distribución ajustable: mochila con scroll y chat desacoplable */
body.lnew #invpanel #inv.inv-scroll, #inv.inv-scroll { overflow-y:auto !important; overflow-x:hidden; max-height:none !important; min-height:96px; resize:vertical; scrollbar-width:thin; scrollbar-color:#6b5a3a #120f0b; }
#chat-grip { display:flex; justify-content:space-between; align-items:center; padding:2px 8px; font-size:12px; color:var(--dim); background:#17130e; border-bottom:1px solid var(--line); cursor:grab; user-select:none; touch-action:none; }
#chat-grip button { background:none; border:0; color:var(--dim); cursor:pointer; font-size:14px; padding:0 4px; } #chat-grip button:hover { color:var(--ink); }
body.chatfloat #chat-grip { cursor:move; }
body.chatfloat #chatwrap { position:fixed; z-index:45; resize:both; overflow:hidden; min-width:260px; min-height:120px; background:#201c16 !important; box-shadow:0 6px 22px rgba(0,0,0,.6); }
body.lnew.chatfloat #app { grid-template-rows:minmax(0,1fr); grid-template-areas:"game side"; }
.rd-mythic{color:#ff9a3a;font-weight:700}
.rk-tbl{margin:6px 0}.rk-row{display:flex;gap:8px;padding:2px 6px;font-size:12px;border-bottom:1px solid #ffffff14}.rk-row.me{background:#ffd86a22;font-weight:700}.rk-n{width:30px;color:#ffd86a}.rk-name{flex:1}.rk-d{color:#bbb}
.siege-hud{position:absolute;top:8px;right:8px;min-width:170px;max-width:230px;background:#101018e6;border:1px solid #ffd86a88;border-radius:6px;padding:6px 8px;font-size:12px;color:#eee;z-index:6}
.siege-hud[hidden]{display:none}.sh-t{font-weight:700;color:#ffd86a}.sh-h{margin:2px 0 4px;color:#9ad0ff}.sh-h.mine{color:#ffd24a}
.sh-r{position:relative;display:flex;justify-content:space-between;padding:1px 4px;overflow:hidden;border-radius:3px;margin-top:2px}.sh-r.me{outline:1px solid #ffd86a}.sh-r i{position:absolute;left:0;bottom:0;height:3px;background:#ffd24a}.sh-r span,.sh-r b{position:relative}
.sh-x{margin-top:5px;width:100%;font-size:11px}
.lgwin .lg-pane{display:flex;flex-direction:column;gap:8px}.lgwin .lg-head{display:flex;justify-content:space-between;align-items:center;color:#ffe9a0}.lgwin .lg-free{background:#241d0e;border:1px solid #8a6a2a;border-radius:999px;padding:2px 12px}.lgwin .lg-free.on{background:#3a2f12;color:#ffd36a;border-color:#ffd36a}
.lgwin .lg-note{color:#a99e82}.lgwin .lg-row,.lgwin .lg-sp{display:flex;align-items:center;gap:10px;background:#16130d;border:1px solid #3d3522;border-radius:10px;padding:8px 10px}.lgwin .lg-main{flex:1;display:flex;flex-direction:column;min-width:0}.lgwin .lg-main small{color:#a99e82}
.lgwin .lg-plus{width:34px;height:34px;font-size:20px;border-radius:8px;cursor:pointer}.lgwin .lg-val{min-width:54px;text-align:right;color:#ffd36a}.lgwin .lg-respec{align-self:flex-end;margin-top:4px}
.lgwin .lg-tiers{display:flex;gap:6px}.lgwin .lg-tier{min-width:46px;border-radius:8px;padding:4px 6px;background:#241e16;color:#8a8068;border:1px solid #4a3f2a}.lgwin .lg-tier.ready{background:#3a2f12;color:#ffd36a;border-color:#ffd36a;cursor:pointer;animation:lgp 1.2s infinite}.lgwin .lg-tier.done{color:#9fd36a;border-color:#4a6a2a}@keyframes lgp{50%{box-shadow:0 0 8px #ffd36a}}
.lgwin .lg-msg.warn{color:#f2b6b6}.lgwin .lg-msg.good{color:#b6f2b6}
.ch-combat{display:flex;flex-direction:column;gap:2px;margin-top:6px;font-size:13px;color:#ffe9a0}.ch-combat b{background:#241d0e;border:1px solid #6a5630;border-radius:6px;padding:2px 8px;text-align:center}
.ch-reset{margin-top:8px;width:100%}

.c-presets { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; } .c-presets button { flex:1 1 auto; }
#tutbox .tb-go { width:100%; margin:6px 0 2px; padding:8px 10px; font-weight:700; color:#2a1805; background:linear-gradient(#f9d86a,#d9a62e); border:1px solid #fff0a8; border-radius:8px; cursor:pointer; animation:tutpulse 1.4s ease-in-out infinite; }
#tutbox .tb-go:hover { filter:brightness(1.08); }
.tut-glow { animation:tutglow 1s ease-in-out infinite; position:relative; z-index:5; }
@keyframes tutpulse { 50% { box-shadow:0 0 0 4px rgba(246,199,68,.35); } }
@keyframes tutglow { 50% { box-shadow:0 0 0 3px #f6c744, 0 0 14px 4px rgba(246,199,68,.7); } }
@media (prefers-reduced-motion: reduce) { #tutbox .tb-go, .tut-glow { animation:none; box-shadow:0 0 0 3px #f6c744; } }

/* ───────── Orbe Online 0.5.0 · inicio guiado, recuadros movibles y panel más ordenado ───────── */
/* recuadros que se arrastran por la cabecera (tutorial, historia, misión, NPC) */
#tutbox .tb-top, #storybox .sb-top, #missionbox .mb-top, #npcbox .nb-head { cursor:grab; user-select:none; touch-action:none; }
.movable.dragging { opacity:.92; box-shadow:0 10px 30px rgba(0,0,0,.6); } .movable.dragging .tb-top, .movable.dragging .sb-top, .movable.dragging .mb-top, .movable.dragging .nb-head { cursor:grabbing; }
#storybox.moved, #tutbox.moved, #missionbox.moved { bottom:auto; right:auto; }
/* consejos con flecha */
.obtip { position:fixed; z-index:70; width:min(300px, 86vw); background:linear-gradient(180deg,#2f2615,#1d170e); border:2px solid #f1c24a; border-radius:12px; color:#fbefcf; font-size:13px; box-shadow:0 10px 34px rgba(0,0,0,.65), 0 0 0 4px rgba(241,194,74,.12); animation:tipin .22s ease-out; }
@keyframes tipin { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.obtip .ot-head { display:flex; align-items:center; gap:7px; padding:7px 8px 6px 10px; cursor:grab; user-select:none; touch-action:none; border-bottom:1px solid rgba(241,194,74,.25); }
.obtip .ot-title { flex:1; font-weight:700; color:#ffe08a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.obtip .ot-head button { width:24px; height:22px; padding:0; line-height:1; border-radius:6px; background:#3a2d12; color:#ffe9b0; border:1px solid #8a6b1f; cursor:pointer; }
.obtip .ot-body { padding:8px 11px 10px; } .obtip .ot-text { margin:0 0 9px; line-height:1.45; }
.obtip .ot-btns { display:flex; gap:6px; justify-content:flex-end; }
.obtip .ot-ok { background:#e5b53b; color:#241a06; border:0; border-radius:7px; padding:5px 14px; font-weight:700; cursor:pointer; }
.obtip .ot-off { background:none; color:#c9b88a; border:1px solid #5a4a28; border-radius:7px; padding:5px 10px; cursor:pointer; font-size:12px; }
.obtip.min { width:auto; max-width:min(300px, 86vw); } .obtip.min .ot-body { display:none; } .obtip.min .ot-head { border-bottom:0; }
.obtip .ot-arrow { position:absolute; width:14px; height:14px; background:#2a2213; border:2px solid #f1c24a; transform:rotate(45deg); }
.obtip .ot-arrow[hidden] { display:none; }
.obtip .ot-arrow.left { right:-9px; margin-top:-7px; border-left:0; border-bottom:0; }
.obtip .ot-arrow.right { left:-9px; margin-top:-7px; border-right:0; border-top:0; }
.obtip .ot-arrow.top { bottom:-9px; margin-left:-7px; border-left:0; border-top:0; }
.obtip .ot-arrow.bottom { top:-9px; margin-left:-7px; border-right:0; border-bottom:0; }
.tip-target { outline:3px solid #f1c24a !important; outline-offset:2px; border-radius:8px; animation:tippulse 1.3s ease-in-out infinite; position:relative; z-index:2; }
@keyframes tippulse { 0%,100% { outline-color:#f1c24a; box-shadow:0 0 0 0 rgba(241,194,74,.0); } 50% { outline-color:#fff2b0; box-shadow:0 0 16px 4px rgba(241,194,74,.55); } }
#tutbox .tb-go { display:block; width:100%; margin:4px 0 2px; }
/* mochila: siempre 5 × 5 casillas a la vista; el resto, con scroll */
#invpanel #inv, #invpanel #inv.inv-scroll { grid-template-columns:repeat(5,32px) !important; grid-auto-rows:32px; gap:3px; padding:5px; height:186px !important; max-height:none !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden; resize:none !important; justify-content:start; }
body.lnew #invpanel #inv, body.lnew #invpanel #inv.inv-scroll { grid-template-columns:repeat(5,44px) !important; grid-auto-rows:44px; gap:4px; padding:6px; height:252px !important; scrollbar-gutter:stable; }
body.lnew #invpanel .ip-bag { flex:none; }
/* botones del panel en dos filas */
#dock { display:grid !important; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px !important; }   /* Orbe Online 0.7.0: 7 columnas (14 botones en dos filas) */
#dock button { min-width:0; } #dock button[hidden] { display:none; }
/* vida y maná, una encima de la otra (la experiencia y el hambre comparten la fila de abajo) */
body.lnew.sidew #hud .meter.hp, body.lnew.sidew #hud .meter.sp { grid-column:1 / -1; }
body.lnew #hud .meter.hp, body.lnew #hud .meter.sp { margin-bottom:2px; }
/* ───── Orbe Online 0.6.0: 📜 Journey ───── */
#journeywin { position:fixed; inset:0; background:rgba(8,10,16,.72); z-index:8; display:flex; align-items:center; justify-content:center; padding:12px; }
#journeywin[hidden] { display:none; }
#journeywin .dd-box { width:min(760px,100%); max-height:100%; overflow:auto; background:#1b1812; border:2px solid #6a5630; border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:12px; color:#e9dfc2; box-shadow:0 14px 40px #000a; }
#journeywin .dd-top { display:flex; align-items:center; } #journeywin .dd-top h2 { margin:0; flex:1; color:#ffd36a; }
#journeywin .dd-x { background:#2a1d1d; color:#f2b6b6; border:1px solid #6a3a3a; border-radius:8px; padding:4px 10px; cursor:pointer; }
#journeywin .dd-sec { background:#221d14; border:1px solid #4a3f2a; border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; } #journeywin h3 { margin:0; font-size:16px; color:#ffe9a0; }
#journeywin .dd-best, #journeywin .dd-reset { color:#a99e82; text-align:center; } #journeywin .dd-best { text-align:left; }
#journeywin .dd-days { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
#journeywin .dd-day { position:relative; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:6px 2px; text-align:center; display:flex; flex-direction:column; gap:2px; font-size:12px; min-width:0; }
#journeywin .dd-day small { color:#a99e82; font-size:10.5px; line-height:1.2; } #journeywin .dd-day b { color:#ffd36a; font-size:12px; }
#journeywin .dd-day.big { border-color:#8a6a2a; background:#241d0e; } #journeywin .dd-day.cur { border-color:#ffd36a; box-shadow:0 0 10px #ffd36a88; }
#journeywin .dd-day.done { opacity:.55; } #journeywin .dd-tick { position:absolute; top:2px; right:4px; color:#7fe39a; font-weight:700; }
#journeywin .dd-claim { background:#2f6a3f; color:#fff; border:1px solid #6fcf86; border-radius:10px; padding:9px; font-weight:700; cursor:pointer; font-size:15px; }
#journeywin .dd-claim:disabled, #journeywin .dd-qbtn:disabled { background:#2a2a2a; border-color:#444; color:#8a8a8a; cursor:default; }
#journeywin .dd-quests { display:flex; flex-direction:column; gap:8px; }
#journeywin .dd-q { display:flex; align-items:center; gap:10px; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:8px 10px; } #journeywin .dd-q.ready { border-color:#ffd36a; } #journeywin .dd-q.done { opacity:.6; }
#journeywin .dd-qi { font-size:26px; } #journeywin .dd-qm { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } #journeywin .dd-qm small { color:#a99e82; }
#journeywin .dd-bar { height:8px; background:#0e0c08; border-radius:4px; overflow:hidden; border:1px solid #3d3522; } #journeywin .dd-bar i { display:block; height:100%; background:linear-gradient(90deg,#c58a1c,#ffd36a); }
#journeywin .dd-qbtn { background:#2f6a3f; color:#fff; border:1px solid #6fcf86; border-radius:8px; padding:7px 10px; font-weight:700; cursor:pointer; white-space:nowrap; }
#journeywin .dd-chest { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } #journeywin .dd-chest span { font-size:28px; } #journeywin .dd-chest small { flex:1; color:#cfc4a4; min-width:160px; } #journeywin .dd-chest .dd-claim { padding:7px 12px; font-size:14px; }
#journeywin .dd-msg { min-height:1.2em; text-align:center; } #journeywin .dd-msg.good { color:#8fe0a0; } #journeywin .dd-msg.warn { color:#f2b6b6; }
@media (max-width:560px) { #journeywin .dd-days { grid-template-columns:repeat(4,1fr); } }
#journeywin .dd-tabs { display:flex; gap:6px; } #journeywin .dd-tab { flex:1; position:relative; background:#16130d; color:#cfc4a4; border:1px solid #3d3522; border-radius:10px; padding:8px 6px; font-weight:700; cursor:pointer; }
#journeywin .dd-tab.on { background:#2a2214; color:#ffd36a; border-color:#8a6a2a; } #journeywin .dd-dot2 { margin-left:6px; min-width:16px; height:16px; border-radius:8px; background:#e5392b; color:#fff; font:700 11px/16px system-ui; display:inline-block; text-align:center; }
#journeywin .dd-bar.big { height:14px; position:relative; overflow:visible; } #journeywin .dd-bar.big > i { border-radius:4px; } #journeywin .dd-marks i { position:absolute; top:-3px; width:3px; height:20px; background:#6a5630; margin-left:-1px; } #journeywin .dd-marks i.hit { background:#7fe39a; }

#dock-journey { position:relative; } #dock-journey .dd-dot { position:absolute; top:-4px; right:-2px; min-width:16px; height:16px; border-radius:8px; background:#e5392b; color:#fff; font:700 11px/16px system-ui; text-align:center; padding:0 4px; box-shadow:0 0 6px #e5392b; }
#journeywin .jr-tabs { flex-wrap:wrap; } #journeywin .jr-tabs .dd-tab { flex:1 1 90px; font-size:13px; padding:7px 4px; }
#journeywin .jr-list { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px; color:#e9dfc2; line-height:1.35; }
#journeywin .jr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; }
#journeywin .jr-e { background:#16130d; border:1px solid #3d3522; border-radius:8px; padding:6px 8px; color:#7d7462; font-size:13px; }
#journeywin .jr-e.got { color:#bff0c9; border-color:#3f7a4c; background:#14201a; }
#journeywin .jr-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
#journeywin .jr-in { flex:1; min-width:140px; background:#0e0c08; color:#e9dfc2; border:1px solid #4a3f2a; border-radius:8px; padding:7px 9px; font-size:14px; }
#journeywin .jr-emotes { display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); gap:6px; }
#journeywin .jr-emotes button { font-size:22px; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:6px 0; cursor:pointer; }
#journeywin .jr-emotes button:hover { border-color:#ffd36a; background:#241d0e; }
#journeywin .dd-qm b { font-size:14px; line-height:1.3; }
#nbpill { position:absolute; left:10px; bottom:10px; z-index:4; max-width:min(60%,420px); background:rgba(27,24,18,.9); color:#ffe9a0; border:1px solid #8a6a2a; border-radius:999px; padding:5px 12px; font:600 12.5px system-ui, sans-serif; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 3px 10px #0008; }
#nbpill[hidden] { display:none; }
#nbpill.ready { color:#fff; background:linear-gradient(90deg,#6b4a12,#a5761c); border-color:#ffd36a; animation:nbpulse 1.6s ease-in-out infinite; }
@keyframes nbpulse { 0%,100% { box-shadow:0 0 0 #ffd36a00; } 50% { box-shadow:0 0 14px #ffd36acc; } }

/* ───── Orbe Online 0.7.0: 🐾 Collection ───── */
#collectwin { position:fixed; inset:0; background:rgba(8,10,16,.72); z-index:8; display:flex; align-items:center; justify-content:center; padding:12px; }
#collectwin[hidden] { display:none; }
#collectwin .dd-box { width:min(760px,100%); max-height:100%; overflow:auto; background:#1b1812; border:2px solid #6a5630; border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:12px; color:#e9dfc2; box-shadow:0 14px 40px #000a; }
#collectwin .dd-top { display:flex; align-items:center; } #collectwin .dd-top h2 { margin:0; flex:1; color:#ffd36a; }
#collectwin .dd-x { background:#2a1d1d; color:#f2b6b6; border:1px solid #6a3a3a; border-radius:8px; padding:4px 10px; cursor:pointer; }
#collectwin .dd-sec { background:#221d14; border:1px solid #4a3f2a; border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; } #collectwin h3 { margin:0; font-size:16px; color:#ffe9a0; }
#collectwin .dd-best, #collectwin .dd-reset { color:#a99e82; text-align:center; } #collectwin .dd-best { text-align:left; }
#collectwin .dd-days { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
#collectwin .dd-day { position:relative; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:6px 2px; text-align:center; display:flex; flex-direction:column; gap:2px; font-size:12px; min-width:0; }
#collectwin .dd-day small { color:#a99e82; font-size:10.5px; line-height:1.2; } #collectwin .dd-day b { color:#ffd36a; font-size:12px; }
#collectwin .dd-day.big { border-color:#8a6a2a; background:#241d0e; } #collectwin .dd-day.cur { border-color:#ffd36a; box-shadow:0 0 10px #ffd36a88; }
#collectwin .dd-day.done { opacity:.55; } #collectwin .dd-tick { position:absolute; top:2px; right:4px; color:#7fe39a; font-weight:700; }
#collectwin .dd-claim { background:#2f6a3f; color:#fff; border:1px solid #6fcf86; border-radius:10px; padding:9px; font-weight:700; cursor:pointer; font-size:15px; }
#collectwin .dd-claim:disabled, #collectwin .dd-qbtn:disabled { background:#2a2a2a; border-color:#444; color:#8a8a8a; cursor:default; }
#collectwin .dd-quests { display:flex; flex-direction:column; gap:8px; }
#collectwin .dd-q { display:flex; align-items:center; gap:10px; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:8px 10px; } #collectwin .dd-q.ready { border-color:#ffd36a; } #collectwin .dd-q.done { opacity:.6; }
#collectwin .dd-qi { font-size:26px; } #collectwin .dd-qm { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } #collectwin .dd-qm small { color:#a99e82; }
#collectwin .dd-bar { height:8px; background:#0e0c08; border-radius:4px; overflow:hidden; border:1px solid #3d3522; } #collectwin .dd-bar i { display:block; height:100%; background:linear-gradient(90deg,#c58a1c,#ffd36a); }
#collectwin .dd-qbtn { background:#2f6a3f; color:#fff; border:1px solid #6fcf86; border-radius:8px; padding:7px 10px; font-weight:700; cursor:pointer; white-space:nowrap; }
#collectwin .dd-chest { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } #collectwin .dd-chest span { font-size:28px; } #collectwin .dd-chest small { flex:1; color:#cfc4a4; min-width:160px; } #collectwin .dd-chest .dd-claim { padding:7px 12px; font-size:14px; }
#collectwin .dd-msg { min-height:1.2em; text-align:center; } #collectwin .dd-msg.good { color:#8fe0a0; } #collectwin .dd-msg.warn { color:#f2b6b6; }
#collectwin .dd-tabs { display:flex; gap:6px; } #collectwin .dd-tab { flex:1; position:relative; background:#16130d; color:#cfc4a4; border:1px solid #3d3522; border-radius:10px; padding:8px 6px; font-weight:700; cursor:pointer; }
#collectwin .dd-tab.on { background:#2a2214; color:#ffd36a; border-color:#8a6a2a; } #collectwin .dd-dot2 { margin-left:6px; min-width:16px; height:16px; border-radius:8px; background:#e5392b; color:#fff; font:700 11px/16px system-ui; display:inline-block; text-align:center; }
#collectwin .dd-bar.big { height:14px; position:relative; overflow:visible; } #collectwin .dd-bar.big > i { border-radius:4px; } #collectwin .dd-marks i { position:absolute; top:-3px; width:3px; height:20px; background:#6a5630; margin-left:-1px; } #collectwin .dd-marks i.hit { background:#7fe39a; }
#collectwin .jr-tabs { flex-wrap:wrap; } #collectwin .jr-tabs .dd-tab { flex:1 1 90px; font-size:13px; padding:7px 4px; }
#collectwin .jr-list { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px; color:#e9dfc2; line-height:1.35; }
#collectwin .jr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; }
#collectwin .jr-e { background:#16130d; border:1px solid #3d3522; border-radius:8px; padding:6px 8px; color:#7d7462; font-size:13px; }
#collectwin .jr-e.got { color:#bff0c9; border-color:#3f7a4c; background:#14201a; }
#collectwin .jr-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
#collectwin .jr-in { flex:1; min-width:140px; background:#0e0c08; color:#e9dfc2; border:1px solid #4a3f2a; border-radius:8px; padding:7px 9px; font-size:14px; }
#collectwin .jr-emotes { display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); gap:6px; }
#collectwin .jr-emotes button { font-size:22px; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:6px 0; cursor:pointer; }
#collectwin .jr-emotes button:hover { border-color:#ffd36a; background:#241d0e; }
#collectwin .dd-qm b { font-size:14px; line-height:1.3; }

#dock-collect { position:relative; } #dock-collect .dd-dot { position:absolute; top:-4px; right:-2px; min-width:16px; height:16px; border-radius:8px; background:#e5392b; color:#fff; font:700 11px/16px system-ui; text-align:center; padding:0 4px; box-shadow:0 0 6px #e5392b; }
#collectwin .dd-box { width:min(860px,100%); }
#collectwin .col-sum { display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:linear-gradient(90deg,#2a2214,#1d1a12); border:1px solid #6a5630; border-radius:10px; padding:8px 12px; color:#cfc4a4; }
#collectwin .col-sum b { color:#ffe28a; } #collectwin .col-cb { margin-left:auto; color:#fff; background:#7a3f12; border:1px solid #ffb35a; border-radius:999px; padding:2px 10px; font-weight:700; }
#collectwin .col-bar { height:12px; } #collectwin .col-bar i { background:linear-gradient(90deg,#3fa860,#9cf0a8); }
#collectwin .col-miles { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
#collectwin .col-mile { display:flex; flex-direction:column; align-items:center; gap:2px; background:#16130d; color:#cfc4a4; border:1px solid #3d3522; border-radius:10px; padding:6px 4px; cursor:pointer; font:inherit; min-width:0; }
#collectwin .col-mile b { font-size:18px; color:#ffd36a; } #collectwin .col-mile small { font-size:10.5px; line-height:1.2; color:#a99e82; text-align:center; }
#collectwin .col-mile.ready { border-color:#ffd36a; background:#2a2010; animation:nbpulse 1.6s ease-in-out infinite; } #collectwin .col-mile.ready small { color:#fff; font-weight:700; }
#collectwin .col-mile.done { opacity:.6; } #collectwin .col-mile.done b { color:#7fe39a; } #collectwin .col-mile:disabled { cursor:default; }
#collectwin .col-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
#collectwin .col-card { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; background:#14110c; border:1px solid #3d3522; border-radius:12px; padding:8px; min-width:0; }
#collectwin .col-card b { color:#8a806a; font-size:14px; } #collectwin .col-card.own b { color:#ffe9a0; }
#collectwin .col-card.own { background:radial-gradient(circle at 50% 28%,#3a3018 0,#17140d 70%); border-color:#6a5630; }
#collectwin .col-card.on { border-color:#7fe39a; box-shadow:0 0 12px #7fe39a55; }
#collectwin .col-card .dd-qbtn { width:100%; font-size:12.5px; padding:6px; }
#collectwin .col-pc { width:72px; height:64px; image-rendering:pixelated; }
#collectwin .col-bonus { color:#9fe0ff; font-weight:700; font-size:12px; } #collectwin .col-how { color:#a99e82; font-size:11px; line-height:1.25; flex:1; }
#collectwin .col-set { gap:6px; } #collectwin .col-set.act { border-color:#8a6a2a; } #collectwin .col-set.full { border-color:#ffd36a; box-shadow:0 0 14px #ffd36a44 inset; }
#collectwin .col-sethead { display:flex; align-items:center; gap:8px; } #collectwin .col-sethead b { color:#ffe9a0; font-size:15px; flex:1; } #collectwin .col-sethead small { color:#a99e82; }
#collectwin .col-sw { width:14px; height:14px; border-radius:50%; box-shadow:0 0 8px currentColor; display:inline-block; }
#collectwin .col-pieces { display:flex; flex-wrap:wrap; gap:5px; }
#collectwin .col-piece { background:#16130d; border:1px solid #3d3522; border-radius:8px; padding:4px 8px; font-size:12.5px; color:#7d7462; }
#collectwin .col-piece.worn { color:#1a1406; background:linear-gradient(#ffe28a,#e0a73a); border-color:#ffd36a; font-weight:700; }
#collectwin .col-piece.bag { color:#bfe3ff; border-color:#3f6a8a; background:#121a22; }
#collectwin .col-steps { display:flex; flex-wrap:wrap; gap:6px; } #collectwin .col-step { font-size:12.5px; color:#8a806a; border-left:3px solid #3d3522; padding:1px 8px; }
#collectwin .col-step.on { color:#9cf0a8; border-color:#4fc46a; font-weight:700; }
#collectwin .col-big { display:flex; align-items:baseline; gap:8px; } #collectwin .col-big b { font-size:30px; color:#ffd36a; } #collectwin .col-big small { color:#a99e82; }
@media (max-width:560px) { #collectwin .col-miles { grid-template-columns:repeat(2,1fr); } #collectwin .col-grid { grid-template-columns:repeat(2,1fr); } }

/* contador del bono de regreso (arriba a la izquierda del mapa) */
#cbchip { position:absolute; left:10px; top:10px; z-index:4; background:linear-gradient(90deg,#7a3f12,#c0701c); color:#fff; border:1px solid #ffc06a; border-radius:999px; padding:4px 12px; font:700 12.5px system-ui, sans-serif; cursor:pointer; box-shadow:0 0 12px #ff9a3a88; }
#cbchip[hidden] { display:none; }
/* ventana de bienvenida al volver */
#cbmodal { position:fixed; inset:0; z-index:9; background:rgba(8,10,16,.75); display:flex; align-items:center; justify-content:center; padding:16px; animation:cbfade .35s ease-out; }
#cbmodal .cb-card { width:min(440px,100%); text-align:center; background:radial-gradient(circle at 50% 0,#5a3412 0,#211a10 55%,#17130c 100%); border:2px solid #d9963a; border-radius:18px; padding:18px 18px 16px; color:#f3e6c4; box-shadow:0 18px 50px #000c, 0 0 40px #ff9a3a44; animation:cbpop .45s cubic-bezier(.2,1.4,.4,1); }
#cbmodal .cb-sun { font-size:54px; line-height:1; filter:drop-shadow(0 0 12px #ffb347); }
#cbmodal h2 { margin:6px 0 4px; color:#ffd36a; font-size:26px; } #cbmodal p { margin:0 0 12px; color:#d9cba6; }
#cbmodal .cb-boost { display:flex; flex-direction:column; background:#2e1d0a; border:1px solid #ffb35a; border-radius:12px; padding:8px; margin-bottom:10px; } #cbmodal .cb-boost b { font-size:28px; color:#ffc34a; letter-spacing:1px; } #cbmodal .cb-boost small { color:#e8c890; }
#cbmodal .cb-gift { display:flex; flex-direction:column; gap:3px; background:#1a160e; border:1px solid #5a4a2a; border-radius:12px; padding:8px 10px; margin-bottom:12px; } #cbmodal .cb-gift small { color:#a99e82; text-transform:uppercase; font-size:11px; letter-spacing:1px; } #cbmodal .cb-gift b { color:#fff2c4; line-height:1.35; }
#cbmodal .cb-btns { display:flex; flex-direction:column; gap:8px; }
#cbmodal .dd-claim { background:linear-gradient(#3f9a55,#2f6a3f); color:#fff; border:1px solid #8fe8a4; border-radius:10px; padding:11px; font-weight:800; cursor:pointer; font-size:16px; }
#cbmodal .dd-qbtn { background:transparent; color:#cfc4a4; border:1px solid #5a4a2a; border-radius:10px; padding:7px; cursor:pointer; }
@keyframes cbfade { from { opacity:0; } } @keyframes cbpop { from { transform:scale(.8); opacity:0; } }
/* borde rojo con poca vida */
#lowhp { position:absolute; inset:0; pointer-events:none; z-index:3; opacity:0; transition:opacity .4s; background:radial-gradient(ellipse at center, rgba(160,0,0,0) 52%, rgba(170,0,0,.28) 72%, rgba(200,0,0,.62) 100%); }
#lowhp.on { opacity:1; animation:lowhp 1.4s ease-in-out infinite; } #lowhp.crit { animation-duration:.7s; }
@keyframes lowhp { 0%,100% { opacity:.55; } 50% { opacity:1; } }
#tab-options .opt-presets button { flex:1; }

/* ───── Orbe Online 0.7.1: portada y selección de personaje ───── */
#login, #create { background:#0a0c24 url(public/assets/login_bg_hd.jpg) center top / cover no-repeat; }
#login::before { background:linear-gradient(180deg, rgba(6,6,22,0) 55%, rgba(6,6,22,.55) 100%), radial-gradient(ellipse at 50% 45%, rgba(8,5,22,0) 50%, rgba(8,5,22,.45) 100%); }
/* luciérnagas y chispas que flotan despacio sobre la portada */
#login::after { content:""; position:fixed; inset:0; pointer-events:none; opacity:.85;
  background-image:radial-gradient(circle, rgba(255,236,150,.95) 0 1.5px, transparent 2.5px), radial-gradient(circle, rgba(190,255,170,.8) 0 1.2px, transparent 2.2px), radial-gradient(circle, rgba(255,210,120,.9) 0 1px, transparent 2px);
  background-size:230px 190px, 310px 260px, 170px 150px; background-position:0 0, 60px 90px, 120px 40px; animation:loginFlies 26s linear infinite; mix-blend-mode:screen; }
@keyframes loginFlies { from { background-position:0 0, 60px 90px, 120px 40px; } to { background-position:40px -190px, -50px -170px, 150px -150px; } }
body.perf #login::after { animation:none; }
@media (prefers-reduced-motion: reduce) { #login::after { animation:none; } }
#charsel { width:auto; max-width:min(96vw, 840px); margin:auto 0; padding:14px 20px 12px; background:linear-gradient(180deg, rgba(24,18,52,.88), rgba(10,10,30,.92)); border:1px solid #c9a24a; border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,230,160,.2); backdrop-filter:blur(4px); animation:csIn .35s ease-out; }
@keyframes csIn { from { opacity:0; transform:translateY(12px); } }
#charsel h2 { font-size:21px; margin-bottom:12px; text-shadow:0 2px 6px #000; }
#cs-list { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:12px; }
.chs-card { position:relative; box-sizing:border-box; flex:0 0 160px; width:160px; height:232px; padding:10px 8px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; outline:none;
  background:linear-gradient(180deg,#2a2046,#161028); border:2px solid #4b3d66; border-radius:12px; color:var(--ink); font:inherit; transition:border-color .15s, box-shadow .15s, background .15s; }
.chs-card:hover, .chs-card:focus-visible { border-color:#c9a24a; box-shadow:0 0 18px rgba(255,200,90,.18); }
.chs-card.sel { border-color:#ffd36a; background:linear-gradient(180deg,#3c2d5e,#1d1432); box-shadow:0 0 0 2px rgba(255,211,106,.35), 0 0 28px rgba(255,190,70,.4); }
.chs-card.sel::after { content:"▶ Selected"; position:absolute; left:50%; bottom:-11px; transform:translateX(-50%); background:#ffd36a; color:#2a1604; font:800 11px/18px system-ui, sans-serif; padding:0 9px; border-radius:9px; white-space:nowrap; box-shadow:0 2px 6px #0008; }
.chs-doll { width:120px; height:120px; flex:none; image-rendering:pixelated; background:radial-gradient(circle at 50% 72%, rgba(255,200,120,.22), rgba(0,0,0,.28) 72%); border-radius:10px; }
.chs-name { font-size:17px; color:#fff; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chs-lvl { font-size:13.5px; color:#ffd36a; font-weight:600; }
.chs-hp { position:relative; width:128px; height:16px; flex:none; background:#0b0814; border:1px solid #4b3d66; border-radius:5px; overflow:hidden; margin-top:auto; } .chs-hp i { position:absolute; inset:0 auto 0 0; } .chs-hp span { position:absolute; inset:0; text-align:center; font-size:11.5px; line-height:15px; text-shadow:0 1px 2px #000; }
.chs-card.empty { border-style:dashed; background:rgba(255,255,255,.035); justify-content:center; color:#b9ad92; gap:6px; } .chs-card.empty:hover { background:rgba(255,211,106,.07); }
.chs-card.empty .chs-plus { font-size:46px; color:#c9a24a; line-height:1; }
.chs-main { position:absolute; top:6px; right:8px; color:#ffd36a; font-style:normal; font-size:16px; text-shadow:0 0 6px #ffb84a; }
#login .chs-del { position:absolute; top:5px; right:5px; width:28px; height:28px; margin:0; padding:0; border-radius:50%; background:rgba(20,10,20,.75); border:1px solid #6a3a4a; font-size:14px; line-height:26px; opacity:.55; transition:opacity .15s, background .15s; }
.chs-card:hover .chs-del, .chs-card.sel .chs-del { opacity:1; } #login .chs-del:hover { background:#8a2434; border-color:#ff9a8a; }
#cs-confirm { margin:4px auto 12px; max-width:520px; background:rgba(60,14,24,.92); border:1px solid #ff8a7a; border-radius:12px; padding:10px 14px; display:flex; flex-direction:column; gap:8px; text-align:center; animation:csIn .2s ease-out; }
#cs-confirm p { margin:0; } .chs-warn { color:#ffd0c8; font-size:16px; } .chs-warn b { color:#fff; } .chs-sub { color:#e9c2bb; font-size:13px; line-height:1.4; }
#cs-confirm input { background:#12080c; color:#fff; border:1px solid #8a4a52; border-radius:7px; padding:8px 10px; font-size:15px; text-align:center; }
#login #cs-confirm .chs-yes { background:linear-gradient(#d0463a,#8a1f1a); border-color:#ffb0a0; color:#fff; font-weight:800; } #login #cs-confirm .chs-yes:disabled { opacity:.45; cursor:default; }
#cs-msg.good { color:#8fe0a0; }
#charsel .buttons.sec { gap:10px; }
@media (max-width:560px) { .chs-card { flex-basis:140px; width:140px; height:218px; } .chs-doll { width:104px; height:104px; } }
#login .chs-card.empty { background:rgba(255,255,255,.035); border:2px dashed #4b3d66; border-radius:12px; padding:10px 8px; margin:0; color:#b9ad92; } #login .chs-card.empty:hover { background:rgba(255,211,106,.07); border-color:#c9a24a; }   /* «#login button» no debe pisar la casilla libre */
#login::after { z-index:0; } #login > * { z-index:1; }   /* las luciérnagas van detrás de los recuadros */
#l-refresh { position:fixed !important; top:10px; right:14px; left:auto !important; margin:0 !important; transform:none !important; z-index:2; opacity:.85; font-size:12px; }   /* el aviso de Ctrl+F5 ya no tapa el logo */
#login { padding-top:31vh; }   /* Orbe Online 0.7.1: el recuadro de selección queda bajo el título de la portada */

/* ═════ Orbe Online 0.8.0: 🃏 Orbe Cards (ventana, cartas, mesa de juego, avisos) y día y noche ═════ */
#cardswin { position:fixed; inset:0; background:rgba(8,10,16,.72); z-index:8; display:flex; align-items:center; justify-content:center; padding:12px; }
#cardswin[hidden] { display:none; }
#cardswin .dd-box { width:min(760px,100%); max-height:100%; overflow:auto; background:#1b1812; border:2px solid #6a5630; border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:12px; color:#e9dfc2; box-shadow:0 14px 40px #000a; }
#cardswin .dd-top { display:flex; align-items:center; } #cardswin .dd-top h2 { margin:0; flex:1; color:#ffd36a; }
#cardswin .dd-x { background:#2a1d1d; color:#f2b6b6; border:1px solid #6a3a3a; border-radius:8px; padding:4px 10px; cursor:pointer; }
#cardswin .dd-sec { background:#221d14; border:1px solid #4a3f2a; border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; } #cardswin h3 { margin:0; font-size:16px; color:#ffe9a0; }
#cardswin .dd-best, #cardswin .dd-reset { color:#a99e82; text-align:center; } #cardswin .dd-best { text-align:left; }
#cardswin .dd-days { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
#cardswin .dd-day { position:relative; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:6px 2px; text-align:center; display:flex; flex-direction:column; gap:2px; font-size:12px; min-width:0; }
#cardswin .dd-day small { color:#a99e82; font-size:10.5px; line-height:1.2; } #cardswin .dd-day b { color:#ffd36a; font-size:12px; }
#cardswin .dd-day.big { border-color:#8a6a2a; background:#241d0e; } #cardswin .dd-day.cur { border-color:#ffd36a; box-shadow:0 0 10px #ffd36a88; }
#cardswin .dd-day.done { opacity:.55; } #cardswin .dd-tick { position:absolute; top:2px; right:4px; color:#7fe39a; font-weight:700; }
#cardswin .dd-claim { background:#2f6a3f; color:#fff; border:1px solid #6fcf86; border-radius:10px; padding:9px; font-weight:700; cursor:pointer; font-size:15px; }
#cardswin .dd-claim:disabled, #cardswin .dd-qbtn:disabled { background:#2a2a2a; border-color:#444; color:#8a8a8a; cursor:default; }
#cardswin .dd-quests { display:flex; flex-direction:column; gap:8px; }
#cardswin .dd-q { display:flex; align-items:center; gap:10px; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:8px 10px; } #cardswin .dd-q.ready { border-color:#ffd36a; } #cardswin .dd-q.done { opacity:.6; }
#cardswin .dd-qi { font-size:26px; } #cardswin .dd-qm { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } #cardswin .dd-qm small { color:#a99e82; }
#cardswin .dd-bar { height:8px; background:#0e0c08; border-radius:4px; overflow:hidden; border:1px solid #3d3522; } #cardswin .dd-bar i { display:block; height:100%; background:linear-gradient(90deg,#c58a1c,#ffd36a); }
#cardswin .dd-qbtn { background:#2f6a3f; color:#fff; border:1px solid #6fcf86; border-radius:8px; padding:7px 10px; font-weight:700; cursor:pointer; white-space:nowrap; }
#cardswin .dd-chest { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } #cardswin .dd-chest span { font-size:28px; } #cardswin .dd-chest small { flex:1; color:#cfc4a4; min-width:160px; } #cardswin .dd-chest .dd-claim { padding:7px 12px; font-size:14px; }
#cardswin .dd-msg { min-height:1.2em; text-align:center; } #cardswin .dd-msg.good { color:#8fe0a0; } #cardswin .dd-msg.warn { color:#f2b6b6; }
#cardswin .dd-tabs { display:flex; gap:6px; } #cardswin .dd-tab { flex:1; position:relative; background:#16130d; color:#cfc4a4; border:1px solid #3d3522; border-radius:10px; padding:8px 6px; font-weight:700; cursor:pointer; }
#cardswin .dd-tab.on { background:#2a2214; color:#ffd36a; border-color:#8a6a2a; } #cardswin .dd-dot2 { margin-left:6px; min-width:16px; height:16px; border-radius:8px; background:#e5392b; color:#fff; font:700 11px/16px system-ui; display:inline-block; text-align:center; }
#cardswin .dd-bar.big { height:14px; position:relative; overflow:visible; } #cardswin .dd-bar.big > i { border-radius:4px; } #cardswin .dd-marks i { position:absolute; top:-3px; width:3px; height:20px; background:#6a5630; margin-left:-1px; } #cardswin .dd-marks i.hit { background:#7fe39a; }
#cardswin .jr-tabs { flex-wrap:wrap; } #cardswin .jr-tabs .dd-tab { flex:1 1 90px; font-size:13px; padding:7px 4px; }
#cardswin .jr-list { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px; color:#e9dfc2; line-height:1.35; }
#cardswin .jr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; }
#cardswin .jr-e { background:#16130d; border:1px solid #3d3522; border-radius:8px; padding:6px 8px; color:#7d7462; font-size:13px; }
#cardswin .jr-e.got { color:#bff0c9; border-color:#3f7a4c; background:#14201a; }
#cardswin .jr-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
#cardswin .jr-in { flex:1; min-width:140px; background:#0e0c08; color:#e9dfc2; border:1px solid #4a3f2a; border-radius:8px; padding:7px 9px; font-size:14px; }
#cardswin .jr-emotes { display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); gap:6px; }
#cardswin .jr-emotes button { font-size:22px; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:6px 0; cursor:pointer; }
#cardswin .jr-emotes button:hover { border-color:#ffd36a; background:#241d0e; }
#cardswin .dd-qm b { font-size:14px; line-height:1.3; }
#cardswin .dd-box { width:min(860px,100%); }
#cardswin .col-sum { display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:linear-gradient(90deg,#2a2214,#1d1a12); border:1px solid #6a5630; border-radius:10px; padding:8px 12px; color:#cfc4a4; }
#cardswin .col-sum b { color:#ffe28a; } #cardswin .col-cb { margin-left:auto; color:#fff; background:#7a3f12; border:1px solid #ffb35a; border-radius:999px; padding:2px 10px; font-weight:700; }
#cardswin .col-bar { height:12px; } #cardswin .col-bar i { background:linear-gradient(90deg,#3fa860,#9cf0a8); }
#cardswin .col-miles { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
#cardswin .col-mile { display:flex; flex-direction:column; align-items:center; gap:2px; background:#16130d; color:#cfc4a4; border:1px solid #3d3522; border-radius:10px; padding:6px 4px; cursor:pointer; font:inherit; min-width:0; }
#cardswin .col-mile b { font-size:18px; color:#ffd36a; } #cardswin .col-mile small { font-size:10.5px; line-height:1.2; color:#a99e82; text-align:center; }
#cardswin .col-mile.ready { border-color:#ffd36a; background:#2a2010; animation:nbpulse 1.6s ease-in-out infinite; } #cardswin .col-mile.ready small { color:#fff; font-weight:700; }
#cardswin .col-mile.done { opacity:.6; } #cardswin .col-mile.done b { color:#7fe39a; } #cardswin .col-mile:disabled { cursor:default; }

#cardswin .dd-box { width:min(940px,100%); }
#cardswin .dd-tab:hover { border-color:#8a6a2a; }
/* ── carta ── */
.oc-card { --rim:#8a6a3a; position:relative; width:104px; height:132px; border-radius:10px; flex:none; overflow:hidden; border:2px solid var(--rim); box-shadow:0 3px 8px #0009, inset 0 0 0 1px #ffffff22; user-select:none; transition:transform .14s ease, box-shadow .14s ease, filter .14s; color:#fff; font-family:system-ui, sans-serif; }
.oc-card .oc-bg { position:absolute; inset:0; background:var(--bgc); }
.oc-card .oc-bg::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 42%, #ffffff3a 0, #ffffff00 58%), repeating-linear-gradient(45deg, #ffffff08 0 6px, #00000008 6px 12px); }
.oc-b { --bgc:linear-gradient(160deg,#6db0ff 0%,#2f66cc 52%,#183273 100%); }
.oc-r { --bgc:linear-gradient(160deg,#ff9a8a 0%,#cc4638 52%,#701a1a 100%); }
.oc-n { --bgc:linear-gradient(160deg,#d8c08e 0%,#8b6f42 55%,#4a3a22 100%); }
.oc-x { --bgc:linear-gradient(160deg,#3c3c48 0%,#25252e 100%); --rim:#4a4a58 !important; }
.oc-card.r2 { --rim:#c9d4e0; } .oc-card.r3 { --rim:#ffd36a; box-shadow:0 3px 10px #0009, 0 0 10px #ffd36a55; }
.oc-card.r4 { --rim:#fff2c0; box-shadow:0 3px 10px #0009, 0 0 14px #ffe9a0aa; }
.oc-card.r3::after, .oc-card.r4::after { content:''; position:absolute; inset:-40%; background:linear-gradient(115deg, transparent 42%, #ffffff55 50%, transparent 58%); animation:ocshine 3.6s ease-in-out infinite; pointer-events:none; }
.oc-card.r4::before { content:''; position:absolute; inset:0; border-radius:8px; background:conic-gradient(from var(--a,0deg), #ff6a6a33, #ffd36a33, #7dff9a33, #6ad0ff33, #c08aff33, #ff6a6a33); animation:ocspin 6s linear infinite; pointer-events:none; mix-blend-mode:screen; z-index:1; }
.oc-x.r3::after, .oc-x.r4::after, .oc-x.r4::before { display:none; }
@property --a { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes ocspin { to { --a:360deg; } }
@keyframes ocshine { 0%, 55% { transform:translateX(-60%); } 100% { transform:translateX(60%); } }
.oc-card .oc-art { position:absolute; left:4px; top:20px; width:92px; height:74px; image-rendering:pixelated; filter:drop-shadow(0 2px 2px #0007); }
.oc-card .oc-num { position:absolute; left:3px; top:3px; width:40px; height:42px; background:#0007; border-radius:8px; box-shadow:0 0 0 1px #ffffff22; }
.oc-card .oc-num b { position:absolute; width:14px; text-align:center; font:900 14px/14px system-ui, sans-serif; color:#fff; text-shadow:0 0 2px #000, 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.oc-card .oc-num .n { left:13px; top:1px; } .oc-card .oc-num .s { left:13px; bottom:1px; } .oc-card .oc-num .w { left:1px; top:14px; } .oc-card .oc-num .e { right:1px; top:14px; }
.oc-card .oc-lv { position:absolute; right:4px; top:4px; min-width:20px; height:20px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff8, #0000 60%), var(--rim); color:#1a1205; font:900 11px/20px system-ui; text-align:center; box-shadow:0 1px 3px #000a; }
.oc-card .oc-name { position:absolute; left:0; right:0; bottom:0; height:22px; padding:0 5px; background:linear-gradient(#0000, #000b 35%); font:800 11px/24px system-ui, sans-serif; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 2px #000; }
.oc-card .oc-count { position:absolute; right:3px; bottom:22px; background:#000a; border:1px solid #ffffff44; border-radius:999px; padding:0 6px; font:800 11px/16px system-ui; color:#ffe28a; }
.oc-card .oc-new { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%) rotate(-12deg); background:#e5392b; color:#fff; font:900 12px/18px system-ui; padding:0 8px; border-radius:4px; box-shadow:0 2px 6px #000a; }
.oc-card.sm { width:82px; height:104px; border-radius:9px; } .oc-card.sm .oc-art { left:2px; top:18px; width:74px; height:56px; }
.oc-card.sm .oc-num { width:34px; height:36px; } .oc-card.sm .oc-num b { font-size:12px; line-height:12px; width:12px; } .oc-card.sm .oc-num .n, .oc-card.sm .oc-num .s { left:11px; } .oc-card.sm .oc-num .w, .oc-card.sm .oc-num .e { top:12px; }
.oc-card.sm .oc-name { font-size:10px; height:19px; line-height:21px; } .oc-card.sm .oc-lv { min-width:17px; height:17px; font-size:10px; line-height:17px; } .oc-card.sm .oc-count { bottom:19px; }
.oc-card.click { cursor:pointer; } .oc-card.click:hover { transform:translateY(-4px); box-shadow:0 8px 16px #000a, 0 0 0 2px #ffe9a0; }
.oc-card.used { filter:grayscale(.85) brightness(.6); }
/* ── ventana ── */
#cardswin .oc-sum { display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; background:linear-gradient(90deg,#1c2436,#1d1a12); border:1px solid #4a5a7a; border-radius:10px; padding:8px 12px; color:#cfc4a4; font-size:13.5px; }
#cardswin .oc-sum b { color:#ffe28a; }
#cardswin .oc-rivals { display:flex; flex-direction:column; gap:8px; }
#cardswin .oc-rival { display:flex; align-items:center; gap:12px; background:linear-gradient(90deg,#221d14,#16130d); border:1px solid #4a3f2a; border-radius:12px; padding:8px 12px; }
#cardswin .oc-rival.beaten { border-color:#6a5630; } #cardswin .oc-rival.locked { opacity:.55; filter:grayscale(.6); }
#cardswin .oc-rport { position:relative; width:64px; height:64px; flex:none; background:radial-gradient(circle at 50% 60%, #3a3018, #0e0c08 72%); border:1px solid #6a5630; border-radius:12px; display:grid; place-items:center; font-size:30px; }
#cardswin .oc-rport canvas { width:64px; height:64px; image-rendering:pixelated; } #cardswin .oc-crown { position:absolute; top:-9px; right:-7px; font-size:18px; font-style:normal; filter:drop-shadow(0 1px 2px #000); }
#cardswin .oc-rinfo { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } #cardswin .oc-rinfo > b { color:#ffe9a0; font-size:15.5px; } #cardswin .oc-rinfo > small { color:#a99e82; font-style:italic; }
#cardswin .oc-rival .dd-claim, #cardswin .oc-rival .dd-qbtn { min-width:130px; font-size:14px; padding:8px 12px; }
.oc-chips { display:flex; flex-wrap:wrap; gap:4px; }
.oc-chip { background:#16130d; border:1px solid #4a3f2a; border-radius:999px; padding:1px 9px; font-size:11.5px; color:#cfc4a4; white-space:nowrap; }
.oc-chip.rule { color:#bfe3ff; border-color:#3f6a8a; background:#121a22; cursor:help; } .oc-chip.gold { color:#ffe28a; border-color:#8a6a2a; } .oc-chip.win { color:#9cf0a8; border-color:#3f7a4c; }
.oc-chip.click { cursor:pointer; font:inherit; font-size:12.5px; } .oc-chip.click:hover { border-color:#ffd36a; color:#fff; }
#cardswin .oc-deck { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; padding:8px; background:radial-gradient(ellipse at center,#2a5a40 0,#173324 80%); border:1px solid #3f7a4c; border-radius:12px; }
#cardswin .oc-slot { width:104px; height:132px; border:2px dashed #ffffff44; border-radius:10px; display:grid; place-items:center; color:#ffffff66; font-size:28px; }
#cardswin .oc-btns, #cardgame .oc-btns { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
#cardswin .oc-btns button { min-width:140px; }
#cardswin .oc-grid { display:grid; grid-template-columns:repeat(auto-fill, 82px); gap:8px; justify-content:center; }
#cardswin .oc-filter { display:flex; flex-wrap:wrap; gap:4px; } #cardswin .oc-filter .dd-tab { flex:0 0 auto; padding:4px 10px; font-size:12.5px; }
#cardswin .col-miles { grid-template-columns:repeat(5,1fr); }
#cardswin .oc-stakes { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#cardswin .oc-stake { display:flex; flex-direction:column; gap:2px; text-align:left; background:#16130d; color:#cfc4a4; border:1px solid #3d3522; border-radius:10px; padding:9px 12px; cursor:pointer; font:inherit; }
#cardswin .oc-stake b { color:#ffe9a0; font-size:15px; } #cardswin .oc-stake small { color:#a99e82; } #cardswin .oc-stake.on { border-color:#ffd36a; background:#2a2010; box-shadow:0 0 10px #ffd36a44; }
#cardswin .oc-row { display:flex; gap:8px; } #cardswin .oc-inp { flex:1; min-width:120px; background:#0e0c08; color:#e9dfc2; border:1px solid #4a3f2a; border-radius:8px; padding:8px 10px; font-size:14px; }
#cardswin .oc-near { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
#cardswin .oc-howto { display:flex; gap:16px; align-items:flex-start; } #cardswin .oc-howto ol { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; line-height:1.4; } #cardswin .oc-howto ul { margin:2px 0 0; padding-left:18px; color:#bfe3ff; }
@media (max-width:620px) { #cardswin .oc-howto { flex-direction:column; align-items:center; } #cardswin .col-miles { grid-template-columns:repeat(3,1fr); } #cardswin .oc-rival { flex-wrap:wrap; } }
/* ── mesa de juego ── */
#cardgame { position:fixed; inset:0; z-index:9; background:radial-gradient(ellipse at center, #0b1410cc, #040706f2); display:flex; align-items:center; justify-content:center; animation:cgfade .25s ease; }
#cardgame[hidden] { display:none; }
@keyframes cgfade { from { opacity:0; } }
#cardgame.pulse .cg-table { animation:cgpulse .4s ease; } @keyframes cgpulse { 50% { transform:scale(calc(var(--cgk,1) * 1.02)); } }
.cg-table { position:relative; flex:none; width:920px; height:660px; transform:scale(var(--cgk,1)); border-radius:24px; border:12px solid #4a2f17; color:#f4ead0; font-family:system-ui, sans-serif;
  background:radial-gradient(ellipse at 50% 45%, #2f7a52 0%, #1e5238 55%, #10301f 100%); box-shadow:inset 0 0 0 2px #c9a25a, inset 0 0 80px #000b, 0 0 0 2px #2a190b, 0 24px 70px #000; display:flex; flex-direction:column; padding:12px 16px; }
.cg-table::before { content:''; position:absolute; inset:0; border-radius:12px; pointer-events:none; background:repeating-radial-gradient(circle at 30% 30%, #ffffff05 0 1px, #0000 1px 4px); }
.cg-top { display:grid; grid-template-columns:230px 1fr 230px; gap:10px; align-items:center; height:96px; }
.cg-side { position:relative; display:flex; align-items:center; gap:8px; background:#0006; border:1px solid #ffffff22; border-radius:14px; padding:8px 10px; transition:box-shadow .25s, border-color .25s; }
.cg-side.r { flex-direction:row-reverse; text-align:right; }
.cg-side.l.on { border-color:#7ab8ff; box-shadow:0 0 18px #4a90ff88; } .cg-side.r.on { border-color:#ff8a7a; box-shadow:0 0 18px #ff5a4a88; }
.cg-who { flex:1; min-width:0; display:flex; align-items:center; gap:8px; } .cg-side.r .cg-who { flex-direction:row-reverse; }
.cg-port { width:56px; height:56px; flex:none; border-radius:12px; display:grid; place-items:center; font-size:30px; background:radial-gradient(circle at 50% 60%, #ffffff22, #0000 70%), #0005; border:1px solid #ffffff33; }
.cg-port canvas { width:56px; height:56px; image-rendering:pixelated; }
.cg-name { display:block; font-size:16px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:110px; } .cg-title { display:block; color:#cfe3d6; font-size:11.5px; font-style:italic; }
.cg-score { font:900 44px/1 system-ui; min-width:40px; text-align:center; text-shadow:0 2px 0 #000, 0 0 14px currentColor; }
.cg-side.l .cg-score { color:#8cc4ff; } .cg-side.r .cg-score { color:#ff9c8c; }
.cg-turn { position:absolute; top:50%; font-size:20px; opacity:0; transform:translateY(-50%); transition:opacity .2s; } .cg-side.l .cg-turn { right:-22px; color:#8cc4ff; } .cg-side.r .cg-turn { left:-22px; color:#ff9c8c; }
.cg-side.on .cg-turn { opacity:1; animation:cgarrow 1s ease-in-out infinite; } @keyframes cgarrow { 50% { opacity:.35; } }
.cg-mid-top { display:flex; flex-direction:column; align-items:center; gap:4px; }
.cg-logo { font:900 22px system-ui; letter-spacing:1px; color:#ffe28a; text-shadow:0 2px 0 #5a3a10, 0 0 16px #ffd36a66; }
.cg-rules { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; } .cg-rules .oc-chip { background:#0007; }
.cg-status { font-weight:800; font-size:14px; color:#e9f5ec; min-height:18px; text-shadow:0 1px 2px #000; } .cg-status.mine { color:#9fd0ff; animation:cgarrow 1.4s ease-in-out infinite; } .cg-status.err { color:#ffb0a0; }
.cg-timer { width:180px; height:6px; background:#0008; border-radius:3px; overflow:hidden; } .cg-timer[hidden] { display:none; } .cg-timer i { display:block; height:100%; background:linear-gradient(90deg,#4fc46a,#c8f08a); transition:width .25s linear; } .cg-timer i.low { background:linear-gradient(90deg,#e5392b,#ff9a3a); }
.cg-main { flex:1; display:flex; align-items:center; justify-content:center; gap:34px; }
.cg-hand { width:118px; height:460px; display:flex; flex-direction:column; align-items:center; padding-top:4px; }
.cg-hand > * { margin-top:-50px; } .cg-hand > :first-child { margin-top:0; }
.cg-hslot { width:104px; height:132px; flex:none; }
.cg-hand .oc-card { box-shadow:0 4px 10px #000b; }
.cg-hand.l .oc-card.click:hover { transform:translateX(10px); z-index:2; } .cg-hand.l .oc-card.sel { transform:translateX(22px) scale(1.04); z-index:3; box-shadow:0 0 0 3px #fff, 0 0 22px #8cc4ff; }
.cg-hand.l .oc-card.wait { cursor:default; } .cg-hand.l .oc-card.wait:hover { transform:none; box-shadow:0 4px 10px #000b; }
.cg-board { display:grid; grid-template-columns:repeat(3,112px); grid-template-rows:repeat(3,140px); gap:6px; padding:10px; border-radius:16px; background:#00000038; border:2px solid #c9a25a88; box-shadow:inset 0 0 30px #0008; perspective:700px; }
.cg-cell { position:relative; border-radius:12px; background:#ffffff0a; border:1px solid #ffffff1a; display:grid; place-items:center; }
.cg-cell.can { cursor:pointer; background:#ffffff14; border-color:#8cc4ff66; } .cg-cell.can:hover { background:#8cc4ff2a; border-color:#cfe6ff; box-shadow:0 0 16px #8cc4ff66; }
.cg-cell .oc-card { transform-style:preserve-3d; } .cg-cell .oc-card.ghost { opacity:.45; pointer-events:none; }
.oc-card.drop { animation:ocdrop .38s cubic-bezier(.2,.9,.3,1.25); } @keyframes ocdrop { from { transform:scale(1.45) translateY(-24px); opacity:0; } 60% { transform:scale(.96); opacity:1; } }
.cg-bottom { height:40px; display:flex; gap:8px; justify-content:center; align-items:center; }
#cardgame .dd-claim { background:linear-gradient(#3f9a55,#2f6a3f); color:#fff; border:1px solid #8fe8a4; border-radius:10px; padding:9px 16px; font-weight:800; cursor:pointer; font-size:15px; }
#cardgame .dd-claim:disabled { background:#2a2a2a; border-color:#444; color:#8a8a8a; cursor:default; }
#cardgame .dd-qbtn { background:#0007; color:#e9dfc2; border:1px solid #ffffff33; border-radius:10px; padding:7px 14px; font-weight:700; cursor:pointer; } #cardgame .dd-qbtn:hover { border-color:#ffe28a; }
.cg-help { display:none; position:absolute; left:50%; bottom:58px; transform:translateX(-50%); width:520px; background:#0d1a12f2; border:1px solid #c9a25a; border-radius:12px; padding:10px 14px; font-size:13px; line-height:1.4; z-index:4; }
.cg-help p { margin:6px 0 0; } .cg-table.showhelp .cg-help { display:block; }
.cg-banner { position:absolute; left:50%; top:47%; transform:translate(-50%,-50%) scale(.4); opacity:0; pointer-events:none; font:900 76px/1 system-ui; letter-spacing:2px; z-index:5; -webkit-text-stroke:3px #2a1405; }
.cg-banner.same { color:#ffe28a; } .cg-banner.plus { color:#8cf0ff; } .cg-banner.combo { color:#ff8ad8; }
.cg-banner.show { animation:cgban .9s ease forwards; text-shadow:0 6px 0 #0008, 0 0 30px currentColor; }
@keyframes cgban { 0% { opacity:0; transform:translate(-50%,-50%) scale(.4) rotate(-6deg); } 25% { opacity:1; transform:translate(-50%,-50%) scale(1.12) rotate(2deg); } 70% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-60%) scale(1.05); } }
.cg-end { position:absolute; inset:0; border-radius:12px; background:radial-gradient(ellipse at center, #08120ce6, #030604f5); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; z-index:6; animation:cgfade .35s ease; padding:20px; text-align:center; }
.cg-end[hidden] { display:none; }
.cg-result { font:900 72px/1 system-ui; letter-spacing:3px; -webkit-text-stroke:2px #2a1405; animation:cgres .6s cubic-bezier(.2,.9,.3,1.3); }
.cg-result.win { color:#ffe28a; text-shadow:0 6px 0 #5a3a10, 0 0 40px #ffd36a; } .cg-result.lose { color:#ff9c8c; text-shadow:0 6px 0 #4a1010; } .cg-result.draw { color:#cfe3d6; text-shadow:0 6px 0 #1a2a20; }
@keyframes cgres { from { transform:scale(.3); opacity:0; } }
.cg-fscore { font:800 26px system-ui; color:#fff; } .cg-end p { margin:0; font-size:16px; color:#e9f5ec; } .cg-reward { color:#ffe28a !important; font-weight:700; }
.cg-pick { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } .cg-pick .oc-card.sel { transform:translateY(-10px) scale(1.06); box-shadow:0 0 0 3px #fff, 0 0 24px #ffe28a; }
.cg-left { color:#a9c2b2; }
/* ── avisos ── */
#cardinvite { position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:9; display:flex; align-items:center; gap:10px; background:linear-gradient(90deg,#1c2436,#241d12); border:2px solid #ffd36a; border-radius:14px; padding:10px 14px; color:#e9dfc2; box-shadow:0 10px 30px #000b; animation:cgfade .3s ease; font-family:system-ui, sans-serif; }
#cardinvite > i { font-size:30px; font-style:normal; } #cardinvite b { display:block; color:#ffe9a0; } #cardinvite small { color:#cfc4a4; }
#cardinvite button { border-radius:10px; padding:8px 14px; font-weight:800; cursor:pointer; } #cardinvite .dd-claim { background:#2f6a3f; color:#fff; border:1px solid #6fcf86; } #cardinvite .dd-qbtn { background:#2a1d1d; color:#f2b6b6; border:1px solid #6a3a3a; }
#cardgot { position:fixed; right:24px; bottom:130px; z-index:9; display:flex; flex-direction:column; align-items:center; gap:6px; background:#141c2cee; border:2px solid #8cc4ff; border-radius:16px; padding:10px 14px 12px; cursor:pointer; box-shadow:0 12px 30px #000c, 0 0 24px #4a90ff55; font-family:system-ui, sans-serif; perspective:600px; animation:cgfade .25s ease; }
#cardgot > b { color:#ffe28a; font-size:15px; } #cardgot > small { color:#cfe3ff; font-size:12px; max-width:150px; text-align:center; }
#cardgot .oc-card.reveal { animation:ocreveal .7s cubic-bezier(.2,.9,.3,1.2); } @keyframes ocreveal { from { transform:rotateY(180deg) scale(.6); opacity:.2; } }
/* ── barra de botones: 8 columnas (16 botones en dos filas) ── */
#dock { grid-template-columns:repeat(8, minmax(0,1fr)); }
/* ── día y noche: línea del reloj ── */
#clock .dn-line { color:#bfe3ff !important; font-weight:600; } #clock .dn-line[hidden] { display:none !important; }
body.lnew #dock button, #dock button { font-size:10.5px; letter-spacing:-.35px; } #dock button span { display:block; white-space:nowrap; }   /* 0.8.0: 8 columnas: las etiquetas largas no se pisan */
.cg-hand { justify-content:center; padding-top:0; }   /* 0.8.0: la mano se recoge en el centro al jugar cartas */
#cardgame { z-index:80; } #cardinvite, #cardgot { z-index:85; }   /* 0.8.0: la mesa de cartas tapa los consejos; el aviso de reto y la carta nueva van encima de todo */

/* ═════ Orbe Online 0.9.0: 🏠 Decorate (muebles de la casa) ═════ */
#decorbtn { position:absolute; left:50%; top:10px; transform:translateX(-50%); z-index:5; background:linear-gradient(#5a3f1c,#3a2810); color:#ffe9b0; border:1px solid #d6aa46; border-radius:999px; padding:6px 16px; font:800 14px system-ui, sans-serif; cursor:pointer; box-shadow:0 4px 14px #000a, 0 0 12px #ffd36a44; }
#decorbtn:hover { background:linear-gradient(#6e4e22,#4a3414); } #decorbtn.on { background:linear-gradient(#3f9a55,#2f6a3f); border-color:#8fe8a4; color:#fff; } #decorbtn[hidden] { display:none; }
#decorwin { position:fixed; right:12px; top:12px; bottom:12px; width:330px; z-index:60; display:flex; flex-direction:column; background:#1b1812f2; border:2px solid #6a5630; border-radius:14px; color:#e9dfc2; box-shadow:0 14px 40px #000c; font-family:system-ui, sans-serif; }
#decorwin[hidden] { display:none; }
#decorwin .dc-top { display:flex; align-items:center; padding:10px 12px; border-bottom:1px solid #4a3f2a; } #decorwin .dc-top b { flex:1; font-size:17px; color:#ffd36a; }
#decorwin .dc-x { background:#2a1d1d; color:#f2b6b6; border:1px solid #6a3a3a; border-radius:8px; padding:3px 9px; cursor:pointer; }
#decorwin .dc-body { flex:1; overflow:auto; padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
#decorwin .dc-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; background:linear-gradient(90deg,#2a2214,#1d1a12); border:1px solid #6a5630; border-radius:10px; padding:7px 10px; }
#decorwin .dc-head b { color:#ffe9a0; font-size:15px; } #decorwin .dc-head span { color:#9fe0ff; font-weight:700; } #decorwin .dc-head small { width:100%; color:#a99e82; }
#decorwin .dc-hint { margin:0; color:#cfc4a4; font-size:12.5px; line-height:1.35; } #decorwin .dc-empty { margin:4px 0; color:#a99e82; font-size:13px; line-height:1.4; background:#16130d; border:1px dashed #4a3f2a; border-radius:10px; padding:10px; }
#decorwin .dc-group h4 { margin:6px 0 4px; font-size:13px; color:#ffd36a; }
#decorwin .dc-item { display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:#16130d; color:#e9dfc2; border:1px solid #3d3522; border-radius:10px; padding:4px 8px; margin-bottom:4px; cursor:pointer; font:inherit; }
#decorwin .dc-item:hover { border-color:#8a6a2a; } #decorwin .dc-item.on { border-color:#7dff9a; background:#14201a; box-shadow:0 0 10px #7dff9a44; }
#decorwin .dc-item span { flex:1; min-width:0; display:flex; flex-direction:column; } #decorwin .dc-item b { font-size:13.5px; } #decorwin .dc-item small { color:#a99e82; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#decorwin .dc-item i { font-style:normal; color:#ffe28a; font-weight:800; }
#decorwin .dc-ic { width:40px; height:40px; image-rendering:pixelated; flex:none; background:radial-gradient(circle,#3a3018,#0e0c08 75%); border-radius:8px; }
#decorwin .dc-srow { display:flex; gap:4px; align-items:center; } #decorwin .dc-srow .dc-item { margin:0 0 4px; }
#decorwin .dc-mini { background:#2f6a3f; color:#fff; border:1px solid #6fcf86; border-radius:8px; padding:4px 6px; font-size:11px; cursor:pointer; white-space:nowrap; }
#decorwin .dc-placed { display:grid; grid-template-columns:repeat(auto-fill, 38px); gap:4px; }
#decorwin .dc-pl { width:38px; height:38px; padding:2px; background:#16130d; border:1px solid #3d3522; border-radius:8px; cursor:pointer; } #decorwin .dc-pl:hover { border-color:#ffd36a; } #decorwin .dc-pl .dc-ic { width:32px; height:32px; }
#decorwin .dc-sel { display:flex; gap:10px; align-items:center; background:#16130d; border:1px solid #6a5630; border-radius:10px; padding:8px; } #decorwin .dc-sel .dc-ic { width:48px; height:48px; } #decorwin .dc-sel b { color:#ffe9a0; } #decorwin .dc-sel small { display:block; color:#a99e82; font-size:12px; }
#decorwin .dc-acts { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
#decorwin .dc-btn { background:#241e16; color:#e9dfc2; border:1px solid #6a5630; border-radius:9px; padding:8px 4px; font-weight:700; cursor:pointer; } #decorwin .dc-btn:hover { border-color:#ffd36a; } #decorwin .dc-btn:disabled { opacity:.4; cursor:default; }
#decorwin .dc-upbox { background:#221d14; border:1px solid #8a6a2a; border-radius:10px; padding:8px; display:flex; flex-direction:column; gap:6px; }
#decorwin .dc-up { background:linear-gradient(#c58a1c,#8a5a10); color:#fff; border:1px solid #ffd36a; border-radius:9px; padding:8px; font-weight:800; cursor:pointer; } #decorwin .dc-up:disabled { background:#2a2a2a; border-color:#444; color:#8a8a8a; cursor:default; }
#decorwin .dc-mats { display:flex; flex-wrap:wrap; gap:4px 10px; font-size:12px; } #decorwin .dc-mats .ok { color:#9f9; } #decorwin .dc-mats .no { color:#f99; }
#decorwin .dc-link { background:none; border:none; color:#9fe0ff; cursor:pointer; text-align:left; padding:2px 0; font-size:13px; }
#decorwin .dc-msg { min-height:1.3em; padding:6px 12px 10px; font-size:12.5px; text-align:center; } #decorwin .dc-msg.good { color:#8fe0a0; } #decorwin .dc-msg.warn { color:#f2b6b6; }
/* ═════ Orbe Online 0.9.1: tiendas y crafteo sin oscurecer el juego: la ventana se abre sobre el mapa (se puede arrastrar) y el panel (mochila, chat, botones) sigue libre ═════ */
body.lnew #npcbox.modal:not(.moved) { left:36%; }
#npcbox.modal { box-shadow:0 18px 50px rgba(0,0,0,.75), 0 0 0 1px #00000088; }

/* ═════ Orbe Online 0.10.0: 🔨 Gremio de Constructores y 🗿 tótems ═════ */
#bldwin { position:fixed; inset:0; background:rgba(8,10,16,.72); z-index:8; display:flex; align-items:center; justify-content:center; padding:12px; }
#bldwin[hidden] { display:none; }
#bldwin .dd-box { width:min(760px,100%); max-height:100%; overflow:auto; background:#1b1812; border:2px solid #6a5630; border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:12px; color:#e9dfc2; box-shadow:0 14px 40px #000a; }
#bldwin .dd-top { display:flex; align-items:center; } #bldwin .dd-top h2 { margin:0; flex:1; color:#ffd36a; }
#bldwin .dd-x { background:#2a1d1d; color:#f2b6b6; border:1px solid #6a3a3a; border-radius:8px; padding:4px 10px; cursor:pointer; }
#bldwin .dd-sec { background:#221d14; border:1px solid #4a3f2a; border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; } #bldwin h3 { margin:0; font-size:16px; color:#ffe9a0; }
#bldwin .dd-best, #bldwin .dd-reset { color:#a99e82; text-align:center; } #bldwin .dd-best { text-align:left; }
#bldwin .dd-days { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
#bldwin .dd-day { position:relative; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:6px 2px; text-align:center; display:flex; flex-direction:column; gap:2px; font-size:12px; min-width:0; }
#bldwin .dd-day small { color:#a99e82; font-size:10.5px; line-height:1.2; } #bldwin .dd-day b { color:#ffd36a; font-size:12px; }
#bldwin .dd-day.big { border-color:#8a6a2a; background:#241d0e; } #bldwin .dd-day.cur { border-color:#ffd36a; box-shadow:0 0 10px #ffd36a88; }
#bldwin .dd-day.done { opacity:.55; } #bldwin .dd-tick { position:absolute; top:2px; right:4px; color:#7fe39a; font-weight:700; }
#bldwin .dd-claim { background:#2f6a3f; color:#fff; border:1px solid #6fcf86; border-radius:10px; padding:9px; font-weight:700; cursor:pointer; font-size:15px; }
#bldwin .dd-claim:disabled, #bldwin .dd-qbtn:disabled { background:#2a2a2a; border-color:#444; color:#8a8a8a; cursor:default; }
#bldwin .dd-quests { display:flex; flex-direction:column; gap:8px; }
#bldwin .dd-q { display:flex; align-items:center; gap:10px; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:8px 10px; } #bldwin .dd-q.ready { border-color:#ffd36a; } #bldwin .dd-q.done { opacity:.6; }
#bldwin .dd-qi { font-size:26px; } #bldwin .dd-qm { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } #bldwin .dd-qm small { color:#a99e82; }
#bldwin .dd-bar { height:8px; background:#0e0c08; border-radius:4px; overflow:hidden; border:1px solid #3d3522; } #bldwin .dd-bar i { display:block; height:100%; background:linear-gradient(90deg,#c58a1c,#ffd36a); }
#bldwin .dd-qbtn { background:#2f6a3f; color:#fff; border:1px solid #6fcf86; border-radius:8px; padding:7px 10px; font-weight:700; cursor:pointer; white-space:nowrap; }
#bldwin .dd-chest { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } #bldwin .dd-chest span { font-size:28px; } #bldwin .dd-chest small { flex:1; color:#cfc4a4; min-width:160px; } #bldwin .dd-chest .dd-claim { padding:7px 12px; font-size:14px; }
#bldwin .dd-msg { min-height:1.2em; text-align:center; } #bldwin .dd-msg.good { color:#8fe0a0; } #bldwin .dd-msg.warn { color:#f2b6b6; }
#bldwin .dd-tabs { display:flex; gap:6px; } #bldwin .dd-tab { flex:1; position:relative; background:#16130d; color:#cfc4a4; border:1px solid #3d3522; border-radius:10px; padding:8px 6px; font-weight:700; cursor:pointer; }
#bldwin .dd-tab.on { background:#2a2214; color:#ffd36a; border-color:#8a6a2a; } #bldwin .dd-dot2 { margin-left:6px; min-width:16px; height:16px; border-radius:8px; background:#e5392b; color:#fff; font:700 11px/16px system-ui; display:inline-block; text-align:center; }
#bldwin .dd-bar.big { height:14px; position:relative; overflow:visible; } #bldwin .dd-bar.big > i { border-radius:4px; } #bldwin .dd-marks i { position:absolute; top:-3px; width:3px; height:20px; background:#6a5630; margin-left:-1px; } #bldwin .dd-marks i.hit { background:#7fe39a; }
#bldwin .jr-tabs { flex-wrap:wrap; } #bldwin .jr-tabs .dd-tab { flex:1 1 90px; font-size:13px; padding:7px 4px; }
#bldwin .jr-list { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px; color:#e9dfc2; line-height:1.35; }
#bldwin .jr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; }
#bldwin .jr-e { background:#16130d; border:1px solid #3d3522; border-radius:8px; padding:6px 8px; color:#7d7462; font-size:13px; }
#bldwin .jr-e.got { color:#bff0c9; border-color:#3f7a4c; background:#14201a; }
#bldwin .jr-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
#bldwin .jr-in { flex:1; min-width:140px; background:#0e0c08; color:#e9dfc2; border:1px solid #4a3f2a; border-radius:8px; padding:7px 9px; font-size:14px; }
#bldwin .jr-emotes { display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); gap:6px; }
#bldwin .jr-emotes button { font-size:22px; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:6px 0; cursor:pointer; }
#bldwin .jr-emotes button:hover { border-color:#ffd36a; background:#241d0e; }
#bldwin .dd-qm b { font-size:14px; line-height:1.3; }
#bldwin .dd-box { width:min(860px,100%); }
#bldwin .col-sum { display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:linear-gradient(90deg,#2a2214,#1d1a12); border:1px solid #6a5630; border-radius:10px; padding:8px 12px; color:#cfc4a4; }
#bldwin .col-sum b { color:#ffe28a; } #bldwin .col-cb { margin-left:auto; color:#fff; background:#7a3f12; border:1px solid #ffb35a; border-radius:999px; padding:2px 10px; font-weight:700; }
#bldwin .col-bar { height:12px; } #bldwin .col-bar i { background:linear-gradient(90deg,#3fa860,#9cf0a8); }
#bldwin .col-miles { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
#bldwin .col-mile { display:flex; flex-direction:column; align-items:center; gap:2px; background:#16130d; color:#cfc4a4; border:1px solid #3d3522; border-radius:10px; padding:6px 4px; cursor:pointer; font:inherit; min-width:0; }
#bldwin .col-mile b { font-size:18px; color:#ffd36a; } #bldwin .col-mile small { font-size:10.5px; line-height:1.2; color:#a99e82; text-align:center; }
#bldwin .col-mile.ready { border-color:#ffd36a; background:#2a2010; animation:nbpulse 1.6s ease-in-out infinite; } #bldwin .col-mile.ready small { color:#fff; font-weight:700; }
#bldwin .col-mile.done { opacity:.6; } #bldwin .col-mile.done b { color:#7fe39a; } #bldwin .col-mile:disabled { cursor:default; }
#bldwin .dd-box { width:min(820px,100%); }
#bldwin .bl-head { display:flex; gap:12px; align-items:stretch; }
#bldwin .bl-rank { flex:1; display:flex; gap:12px; align-items:center; background:linear-gradient(90deg,#3a2a14,#1d1a12); border:1px solid #8a6a2a; border-radius:12px; padding:10px 14px; }
#bldwin .bl-rank i { font-size:34px; font-style:normal; filter:drop-shadow(0 2px 4px #000a); } #bldwin .bl-rank > div { flex:1; display:flex; flex-direction:column; gap:3px; } #bldwin .bl-rank b { color:#ffd36a; font-size:17px; } #bldwin .bl-rank small { color:#cfc4a4; }
#bldwin .bl-bar { height:9px; } #bldwin .bl-bar i { background:linear-gradient(90deg,#c58a1c,#ffd36a); }
#bldwin .bl-tok { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:96px; background:radial-gradient(circle at 50% 30%,#4a3a1a,#16130d); border:1px solid #ffd36a88; border-radius:12px; } #bldwin .bl-tok b { font-size:28px; color:#ffe28a; text-shadow:0 0 12px #ffd36a66; } #bldwin .bl-tok small { color:#cfc4a4; }
#bldwin .dd-tabs .dd-tab { flex:1; }
#bldwin .bl-order { display:flex; flex-direction:column; gap:8px; background:#1d1912; border:1px solid #4a3f2a; border-left:4px solid #8a6a2a; border-radius:10px; padding:10px 12px; }
#bldwin .bl-order.weekly { border-left-color:#b48cff; background:linear-gradient(90deg,#211a2c,#1d1912); } #bldwin .bl-order.ready { border-color:#6fcf86; } #bldwin .bl-order.done { opacity:.55; }
#bldwin .bl-otop { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; } #bldwin .bl-otop b { color:#ffe9a0; } #bldwin .bl-rew { color:#ffe28a; font-weight:700; font-size:13px; }
#bldwin .bl-items { display:flex; flex-wrap:wrap; gap:6px; }
#bldwin .bl-it { display:flex; align-items:center; gap:6px; background:#120f0b; border:1px solid #3d3324; border-radius:8px; padding:4px 10px 4px 4px; min-width:170px; } #bldwin .bl-it.ok { border-color:#3f7a4c; background:#14201a; }
#bldwin .bl-it canvas { width:32px; height:32px; image-rendering:pixelated; } #bldwin .bl-it span { display:flex; flex-direction:column; } #bldwin .bl-it b { font-size:13px; } #bldwin .bl-it small { color:#a99e82; font-size:11.5px; } #bldwin .bl-it.ok small { color:#9cf0a8; }
#bldwin .bl-order .dd-claim { align-self:flex-end; padding:7px 18px; font-size:14px; }
#bldwin .bl-shop { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; }
#bldwin .bl-card { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; background:radial-gradient(circle at 50% 22%,#3a3018 0,#17140d 70%); border:1px solid #6a5630; border-radius:12px; padding:10px 8px; }
#bldwin .bl-card canvas { width:48px; height:48px; image-rendering:pixelated; } #bldwin .bl-card b { color:#ffe9a0; } #bldwin .bl-card small { color:#a99e82; font-size:11.5px; line-height:1.3; flex:1; } #bldwin .bl-card .dd-claim { width:100%; font-size:14px; padding:6px; } #bldwin .bl-card.locked { filter:grayscale(.6); opacity:.75; }
#bldwin .bl-rk { display:flex; align-items:center; gap:12px; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:8px 12px; } #bldwin .bl-rk.got { border-color:#8a6a2a; background:#241d0e; }
#bldwin .bl-rk i { font-size:26px; font-style:normal; } #bldwin .bl-rk div { flex:1; display:flex; flex-direction:column; } #bldwin .bl-rk b { color:#ffe9a0; } #bldwin .bl-rk small { color:#a99e82; } #bldwin .bl-rk span { color:#7fe39a; font-weight:800; font-size:18px; }
#totemchip { position:absolute; left:50%; bottom:58px; transform:translateX(-50%); z-index:4; display:flex; gap:6px; pointer-events:none; } #totemchip[hidden] { display:none; }
#totemchip span { padding:4px 12px; border-radius:999px; font:800 12.5px system-ui, sans-serif; color:#fff; background:#000a; border:1px solid; box-shadow:0 0 12px currentColor; }
#totemchip .tc-wisdom { color:#cdb8ff; border-color:#a98cff; } #totemchip .tc-fortune { color:#ffe28a; border-color:#ffd36a; } #totemchip .tc-life { color:#9cf0a8; border-color:#6fcf86; }
/* ═════ Orbe Online 0.11.0: 🏗 proyectos del pueblo, Salón de los Héroes ═════ */
#projwin { position:fixed; inset:0; background:rgba(8,10,16,.72); z-index:8; display:flex; align-items:center; justify-content:center; padding:12px; }
#projwin[hidden] { display:none; }
#projwin .dd-box { width:min(760px,100%); max-height:100%; overflow:auto; background:#1b1812; border:2px solid #6a5630; border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:12px; color:#e9dfc2; box-shadow:0 14px 40px #000a; }
#projwin .dd-top { display:flex; align-items:center; } #projwin .dd-top h2 { margin:0; flex:1; color:#ffd36a; }
#projwin .dd-x { background:#2a1d1d; color:#f2b6b6; border:1px solid #6a3a3a; border-radius:8px; padding:4px 10px; cursor:pointer; }
#projwin .dd-sec { background:#221d14; border:1px solid #4a3f2a; border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; } #projwin h3 { margin:0; font-size:16px; color:#ffe9a0; }
#projwin .dd-best, #projwin .dd-reset { color:#a99e82; text-align:center; } #projwin .dd-best { text-align:left; }
#projwin .dd-days { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
#projwin .dd-day { position:relative; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:6px 2px; text-align:center; display:flex; flex-direction:column; gap:2px; font-size:12px; min-width:0; }
#projwin .dd-day small { color:#a99e82; font-size:10.5px; line-height:1.2; } #projwin .dd-day b { color:#ffd36a; font-size:12px; }
#projwin .dd-day.big { border-color:#8a6a2a; background:#241d0e; } #projwin .dd-day.cur { border-color:#ffd36a; box-shadow:0 0 10px #ffd36a88; }
#projwin .dd-day.done { opacity:.55; } #projwin .dd-tick { position:absolute; top:2px; right:4px; color:#7fe39a; font-weight:700; }
#projwin .dd-claim { background:#2f6a3f; color:#fff; border:1px solid #6fcf86; border-radius:10px; padding:9px; font-weight:700; cursor:pointer; font-size:15px; }
#projwin .dd-claim:disabled, #projwin .dd-qbtn:disabled { background:#2a2a2a; border-color:#444; color:#8a8a8a; cursor:default; }
#projwin .dd-quests { display:flex; flex-direction:column; gap:8px; }
#projwin .dd-q { display:flex; align-items:center; gap:10px; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:8px 10px; } #projwin .dd-q.ready { border-color:#ffd36a; } #projwin .dd-q.done { opacity:.6; }
#projwin .dd-qi { font-size:26px; } #projwin .dd-qm { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } #projwin .dd-qm small { color:#a99e82; }
#projwin .dd-bar { height:8px; background:#0e0c08; border-radius:4px; overflow:hidden; border:1px solid #3d3522; } #projwin .dd-bar i { display:block; height:100%; background:linear-gradient(90deg,#c58a1c,#ffd36a); }
#projwin .dd-qbtn { background:#2f6a3f; color:#fff; border:1px solid #6fcf86; border-radius:8px; padding:7px 10px; font-weight:700; cursor:pointer; white-space:nowrap; }
#projwin .dd-chest { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } #projwin .dd-chest span { font-size:28px; } #projwin .dd-chest small { flex:1; color:#cfc4a4; min-width:160px; } #projwin .dd-chest .dd-claim { padding:7px 12px; font-size:14px; }
#projwin .dd-msg { min-height:1.2em; text-align:center; } #projwin .dd-msg.good { color:#8fe0a0; } #projwin .dd-msg.warn { color:#f2b6b6; }
#projwin .dd-tabs { display:flex; gap:6px; } #projwin .dd-tab { flex:1; position:relative; background:#16130d; color:#cfc4a4; border:1px solid #3d3522; border-radius:10px; padding:8px 6px; font-weight:700; cursor:pointer; }
#projwin .dd-tab.on { background:#2a2214; color:#ffd36a; border-color:#8a6a2a; } #projwin .dd-dot2 { margin-left:6px; min-width:16px; height:16px; border-radius:8px; background:#e5392b; color:#fff; font:700 11px/16px system-ui; display:inline-block; text-align:center; }
#projwin .dd-bar.big { height:14px; position:relative; overflow:visible; } #projwin .dd-bar.big > i { border-radius:4px; } #projwin .dd-marks i { position:absolute; top:-3px; width:3px; height:20px; background:#6a5630; margin-left:-1px; } #projwin .dd-marks i.hit { background:#7fe39a; }
#projwin .jr-tabs { flex-wrap:wrap; } #projwin .jr-tabs .dd-tab { flex:1 1 90px; font-size:13px; padding:7px 4px; }
#projwin .jr-list { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px; color:#e9dfc2; line-height:1.35; }
#projwin .jr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; }
#projwin .jr-e { background:#16130d; border:1px solid #3d3522; border-radius:8px; padding:6px 8px; color:#7d7462; font-size:13px; }
#projwin .jr-e.got { color:#bff0c9; border-color:#3f7a4c; background:#14201a; }
#projwin .jr-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
#projwin .jr-in { flex:1; min-width:140px; background:#0e0c08; color:#e9dfc2; border:1px solid #4a3f2a; border-radius:8px; padding:7px 9px; font-size:14px; }
#projwin .jr-emotes { display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); gap:6px; }
#projwin .jr-emotes button { font-size:22px; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:6px 0; cursor:pointer; }
#projwin .jr-emotes button:hover { border-color:#ffd36a; background:#241d0e; }
#projwin .dd-qm b { font-size:14px; line-height:1.3; }
#projwin .dd-box { width:min(860px,100%); }
#projwin .col-sum { display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:linear-gradient(90deg,#2a2214,#1d1a12); border:1px solid #6a5630; border-radius:10px; padding:8px 12px; color:#cfc4a4; }
#projwin .col-sum b { color:#ffe28a; } #projwin .col-cb { margin-left:auto; color:#fff; background:#7a3f12; border:1px solid #ffb35a; border-radius:999px; padding:2px 10px; font-weight:700; }
#projwin .col-bar { height:12px; } #projwin .col-bar i { background:linear-gradient(90deg,#3fa860,#9cf0a8); }
#projwin .col-miles { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
#projwin .col-mile { display:flex; flex-direction:column; align-items:center; gap:2px; background:#16130d; color:#cfc4a4; border:1px solid #3d3522; border-radius:10px; padding:6px 4px; cursor:pointer; font:inherit; min-width:0; }
#projwin .col-mile b { font-size:18px; color:#ffd36a; } #projwin .col-mile small { font-size:10.5px; line-height:1.2; color:#a99e82; text-align:center; }
#projwin .col-mile.ready { border-color:#ffd36a; background:#2a2010; animation:nbpulse 1.6s ease-in-out infinite; } #projwin .col-mile.ready small { color:#fff; font-weight:700; }
#projwin .col-mile.done { opacity:.6; } #projwin .col-mile.done b { color:#7fe39a; } #projwin .col-mile:disabled { cursor:default; }
#projwin .dd-box { width:min(820px,100%); } #projwin .dd-tabs .dd-tab { flex:1; }
#projwin .pj-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
#projwin .pj-step { display:flex; flex-direction:column; align-items:center; gap:2px; background:#16130d; border:1px solid #3d3522; border-radius:10px; padding:8px 4px; text-align:center; } #projwin .pj-step i { font-size:24px; font-style:normal; }
#projwin .pj-step b { color:#cfc4a4; font-size:13px; } #projwin .pj-step small { color:#a99e82; font-size:11px; } #projwin .pj-step.cur { border-color:#ffd36a; background:#2a2010; box-shadow:0 0 12px #ffd36a33; } #projwin .pj-step.cur b { color:#ffe28a; } #projwin .pj-step.done { border-color:#3f7a4c; background:#14201a; } #projwin .pj-step.done b { color:#9cf0a8; }
#projwin .pj-cur { display:flex; gap:14px; align-items:center; background:linear-gradient(90deg,#3a2a14,#1d1a12); border:1px solid #8a6a2a; border-radius:12px; padding:12px 14px; }
#projwin .pj-big { font-size:46px; filter:drop-shadow(0 3px 6px #000a); } #projwin .pj-cur > div:last-child { flex:1; display:flex; flex-direction:column; gap:4px; } #projwin .pj-cur b { color:#ffd36a; font-size:18px; } #projwin .pj-cur small { color:#cfc4a4; }
#projwin .pj-bar { height:12px; } #projwin .pj-bar i { background:linear-gradient(90deg,#c58a1c,#ffd36a); }
#projwin .pj-mat { display:flex; align-items:center; gap:10px; background:#1d1912; border:1px solid #4a3f2a; border-radius:10px; padding:8px 10px; } #projwin .pj-mat.full { border-color:#3f7a4c; opacity:.7; }
#projwin .pj-mat canvas { width:36px; height:36px; image-rendering:pixelated; } #projwin .pj-mi { flex:1; display:flex; flex-direction:column; gap:3px; } #projwin .pj-mi b { color:#ffe9a0; } #projwin .pj-mi small { color:#a99e82; }
#projwin .pj-btns { display:flex; gap:4px; } #projwin .pj-btns button { padding:6px 10px; font-size:13px; }
#projwin .pj-top { margin:0; padding-left:22px; display:flex; flex-direction:column; gap:3px; } #projwin .pj-top li { display:flex; justify-content:space-between; gap:10px; color:#cfc4a4; } #projwin .pj-top li span { color:#ffe28a; font-weight:700; }
#projwin .pj-top li.m1 b { color:#ffd36a; } #projwin .pj-top li.m2 b { color:#e0e0e8; } #projwin .pj-top li.m3 b { color:#e09a5a; }
#projwin .pj-glv { display:flex; flex-wrap:wrap; gap:6px; } #projwin .pj-glv span { padding:4px 10px; border-radius:999px; border:1px solid #4a3f2a; color:#a99e82; font-size:12px; } #projwin .pj-glv span.on { border-color:#6fcf86; color:#9cf0a8; background:#14201a; }
#projwin .bl-items { display:flex; flex-wrap:wrap; gap:6px; } #projwin .bl-it { display:flex; align-items:center; gap:6px; background:#120f0b; border:1px solid #3d3324; border-radius:8px; padding:4px 10px 4px 4px; } #projwin .bl-it.ok { border-color:#3f7a4c; background:#14201a; } #projwin .bl-it span { display:flex; flex-direction:column; } #projwin .bl-it small { color:#a99e82; font-size:11.5px; }
#projwin .pj-done { font-size:18px; color:#ffe28a; text-align:center; padding:20px; }
@media (max-width:620px) { #projwin .pj-steps { grid-template-columns:repeat(2,1fr); } #projwin .pj-mat { flex-wrap:wrap; } }
/* Orbe Online 0.13.1: la lección de cartas de Bram */
.cg-table.lesson { height:770px; } .cg-table.lesson .cg-main { flex:none; }
.cg-lesson { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); width:620px; background:#0d1a12f2; border:1px solid #e8c060; border-radius:12px; padding:8px 14px 6px; font-size:13px; line-height:1.35; color:#f3ead2; z-index:4; box-shadow:0 6px 18px #0008; }
.cg-lesson b { color:#ffd36a; } .cg-lesson ol { margin:4px 0 0; padding-left:20px; } .cg-lesson li { margin:2px 0; }

/* Orbe Online 0.13.1: mini guía del pollote */
#pgguide { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; background:rgba(8,6,3,.55); }
#pgguide .pg-card { width:min(640px, calc(100vw - 32px)); background:linear-gradient(#2a1f12, #1a130b); border:2px solid #d6aa46; border-radius:14px; padding:16px 18px 14px; color:#f3ead2; box-shadow:0 12px 40px #000a; animation:pgpop .28s ease-out; }
@keyframes pgpop { from { transform:scale(.85); opacity:0; } to { transform:scale(1); opacity:1; } }
#pgguide .pg-head { display:flex; gap:12px; align-items:center; margin-bottom:10px; }
#pgguide .pg-chick { font-size:44px; filter:drop-shadow(0 3px 4px #0008); animation:pgbob 1.2s ease-in-out infinite; }
@keyframes pgbob { 50% { transform:translateY(-4px) rotate(-4deg); } }
#pgguide h3 { margin:0; color:#ffd36a; font-size:20px; } #pgguide small { color:#cdbb92; }
#pgguide .pg-cols { display:grid; grid-template-columns:1.25fr 1fr; gap:14px; }
#pgguide h4 { margin:4px 0 6px; color:#ffe9a0; font-size:14px; } #pgguide h4.no { color:#ff9a7a; margin-top:10px; }
#pgguide .pg-row { display:flex; gap:9px; margin:6px 0; font-size:13px; line-height:1.3; } #pgguide .pg-row i { font-style:normal; font-size:18px; width:24px; text-align:center; }
#pgguide .pg-row b { display:block; color:#fff4dc; } #pgguide .pg-row span { color:#e6dcc4; }
#pgguide ul { margin:0; padding-left:18px; font-size:13px; line-height:1.45; }
#pgguide .pg-tips { margin-top:10px; padding:8px 10px; background:#0006; border-radius:8px; font-size:12.5px; } #pgguide .pg-tips p { margin:2px 0; }
#pgguide .pg-btns { display:flex; justify-content:center; margin-top:12px; }
@media (max-width:560px) { #pgguide .pg-cols { grid-template-columns:1fr; } }

/* ───────── Orbe Online 0.14.0: Play now, guardar cuenta, Bring a Friend y controles táctiles ───────── */
@keyframes o14-glow { 0%,100% { box-shadow:0 0 0 0 rgba(255,214,100,.55), 0 6px 22px rgba(0,0,0,.45); } 50% { box-shadow:0 0 0 7px rgba(255,214,100,0), 0 6px 22px rgba(0,0,0,.45); } }
@keyframes o14-shine { from { background-position:-160% 0; } to { background-position:260% 0; } }
@keyframes o14-pop { from { transform:scale(.92); opacity:0; } to { transform:none; opacity:1; } }
@keyframes o14-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
/* pantalla de entrada */
#l-quick { display:flex; flex-direction:column; gap:8px; margin-bottom:2px; }
#login #l-play, #login #l-cont { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:1px; width:100%; margin:0; padding:12px 14px 10px; border-radius:12px; border:1px solid #ffe7a0; color:#2a1604;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%) no-repeat, linear-gradient(#ffd45c, #e59a1e); background-size:220% 100%, auto; animation:o14-glow 2.2s ease-in-out infinite, o14-shine 3.6s ease-in-out infinite; cursor:pointer; }
#login #l-play b, #login #l-cont b { font-size:22px; letter-spacing:.02em; text-shadow:0 1px 0 rgba(255,255,255,.45); }
#login #l-play small, #login #l-cont small { font-size:12.5px; font-weight:600; opacity:.8; }
#login #l-play:hover, #login #l-cont:hover { filter:brightness(1.07); border-color:#fff; }
#login #l-cont { background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.4) 45%, transparent 60%) no-repeat, linear-gradient(#8fe06a, #3f9a2c); background-size:220% 100%, auto; border-color:#d6ffb8; color:#0d2606; }
#login .l-link { background:none !important; border:0 !important; color:#ffd98a !important; text-decoration:underline; padding:2px !important; font-size:13px; align-self:center; }
#l-ref { margin:0; padding:7px 10px; border-radius:9px; background:rgba(255,140,40,.16); border:1px solid rgba(255,170,80,.55); font-size:13.5px; text-align:center; color:#ffe2b8; }
#l-ref[hidden] { display:none; }
.l-or { display:flex; align-items:center; gap:8px; color:#bdb3d6; font-size:12px; margin-top:2px; } .l-or::before, .l-or::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, #8a7fb0, transparent); }
/* creador rápido */
#quickstart { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:14px; background:#0a1f4a url(public/assets/login_bg.jpg) center / cover no-repeat; overflow:auto; }
#quickstart[hidden] { display:none; }
#quickstart::before { content:""; position:fixed; inset:0; background:radial-gradient(ellipse at 50% 50%, rgba(6,8,30,.25), rgba(6,8,30,.7)); pointer-events:none; }
.qs-card { position:relative; width:min(860px, 100%); background:rgba(14,18,44,.88); border:1px solid #c79a3a; border-radius:16px; box-shadow:0 18px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,220,140,.08); padding:18px 22px 16px; backdrop-filter:blur(4px); animation:o14-pop .25s ease-out; display:flex; flex-direction:column; gap:10px; }
.qs-head { text-align:center; } .qs-head h2 { margin:0; font-size:28px; color:#ffd36a; letter-spacing:.03em; text-shadow:0 2px 0 #4a2a00, 0 0 18px rgba(255,200,90,.35); } .qs-head p { margin:2px 0 0; color:#cfc6e8; font-size:13.5px; }
.qs-main { display:grid; grid-template-columns:240px 1fr; gap:18px; align-items:start; }
.qs-left { display:flex; flex-direction:column; align-items:center; gap:10px; }
.qs-stage { position:relative; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle at 50% 62%, #3d5c2a 0 36%, #23361a 37% 50%, transparent 51%), radial-gradient(circle at 50% 45%, rgba(255,214,120,.22), transparent 65%); display:flex; align-items:flex-end; justify-content:center; }
.qs-prev { width:184px; height:180px; image-rendering:pixelated; position:relative; z-index:1; margin-bottom:12px; }
.qs-shadow { position:absolute; bottom:26px; width:90px; height:16px; border-radius:50%; background:rgba(0,0,0,.35); }
.qs-seg { display:flex; gap:6px; } .qs-seg button, .qs-rnd, .qs-step button, .qs-dice { background:#2a2350; color:#efe6ff; border:1px solid #5d4f9a; border-radius:8px; padding:6px 12px; cursor:pointer; font-size:14px; }
.qs-seg button.on { background:linear-gradient(#6a55c8, #46379a); border-color:#cbbcff; color:#fff; font-weight:700; }
.qs-rnd { width:100%; } .qs-seg button:hover, .qs-rnd:hover, .qs-step button:hover, .qs-dice:hover { border-color:#ffd36a; }
.qs-right { display:flex; flex-direction:column; gap:10px; min-width:0; }
.qs-namel > span, .qs-lbl { display:block; color:#cfc6e8; font-size:13px; margin-bottom:4px; font-weight:600; }
.qs-name { display:flex; gap:6px; } .qs-name input { flex:1; min-width:0; background:#0b0d22; color:#fff; border:1px solid #6a5ba8; border-radius:9px; padding:9px 12px; font-size:20px; font-weight:700; letter-spacing:.03em; }
.qs-name input:focus { outline:none; border-color:#ffd36a; box-shadow:0 0 0 3px rgba(255,211,106,.25); } .qs-dice { font-size:20px; padding:4px 12px; }
.qs-look { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; }
.qs-step { display:grid; grid-template-columns:62px 32px 1fr 32px; align-items:center; gap:4px; font-size:13px; color:#cfc6e8; } .qs-step b { text-align:center; color:#fff; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .qs-step button { padding:4px 0; }
.qs-styles { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.qs-style { display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; padding:9px 6px 8px; background:#1b1838; color:#e9e2ff; border:1px solid #4a3f86; border-radius:11px; cursor:pointer; transition:transform .12s, border-color .12s; }
.qs-style i { font-style:normal; font-size:26px; line-height:1.1; } .qs-style b { font-size:14.5px; } .qs-style small { font-size:11.5px; color:#b9b0d8; line-height:1.25; }
.qs-style:hover { transform:translateY(-2px); border-color:#9a8ae0; } .qs-style.on { background:linear-gradient(#3a2f78, #251e58); border-color:#ffd36a; box-shadow:0 0 0 2px rgba(255,211,106,.25), 0 6px 18px rgba(0,0,0,.35); }
.qs-msg { margin:0; min-height:18px; text-align:center; color:#ffb29a; font-size:14px; }
.qs-go { align-self:center; min-width:min(380px, 100%); padding:13px 24px; font-size:21px; font-weight:800; border-radius:13px; border:1px solid #ffe7a0; color:#2a1604; cursor:pointer;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%) no-repeat, linear-gradient(#ffd45c, #e59a1e); background-size:220% 100%, auto; animation:o14-glow 2.2s ease-in-out infinite, o14-shine 3.6s ease-in-out infinite; }
.qs-go:disabled { animation:none; filter:grayscale(.4) brightness(.85); cursor:wait; }
.qs-back { align-self:center; background:none; border:0; color:#bdb3d6; text-decoration:underline; cursor:pointer; font-size:13px; }
@media (max-width:720px) { .qs-main { grid-template-columns:1fr; } .qs-stage { width:170px; height:170px; } .qs-prev { width:138px; height:135px; } .qs-styles { grid-template-columns:repeat(2, 1fr); } .qs-head h2 { font-size:23px; } }
@media (max-height:520px) and (min-width:600px) { .qs-card { padding:10px 16px; gap:6px; } .qs-head p { display:none; } .qs-stage { width:150px; height:150px; } .qs-prev { width:120px; height:117px; } .qs-main { grid-template-columns:170px 1fr; } .qs-style small { display:none; } .qs-go { padding:9px 18px; font-size:18px; } }
/* insignia de invitado bajo el nombre */
#h-save { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin:-2px 0 8px; padding:6px 8px; border-radius:9px; cursor:pointer; font-weight:800; font-size:13.5px; color:#2a1604; border:1px solid #ffe7a0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.5) 45%, transparent 60%) no-repeat, linear-gradient(#ffd45c, #e59a1e); background-size:220% 100%, auto; animation:o14-glow 2.4s ease-in-out infinite, o14-shine 4s ease-in-out infinite; }
#h-save i { font-style:normal; font-size:16px; }
/* ventanas: guardar héroe y Bring a Friend */
#savewin, #invitewin { position:fixed; inset:0; z-index:140; display:flex; align-items:center; justify-content:center; padding:14px; background:rgba(6,6,18,.6); backdrop-filter:blur(2px); }
#savewin[hidden], #invitewin[hidden] { display:none; }
.sv-card, .fr-card { position:relative; width:min(440px, 100%); max-height:calc(100vh - 28px); overflow:auto; background:linear-gradient(180deg, #1d2050, #121436); color:#efe9ff; border:1px solid #c79a3a; border-radius:16px; box-shadow:0 18px 60px rgba(0,0,0,.65); padding:18px 20px; animation:o14-pop .2s ease-out; }
.sv-shield { font-size:44px; text-align:center; line-height:1; animation:o14-bob 2.4s ease-in-out infinite; } .sv-card h3 { margin:6px 0 2px; text-align:center; font-size:22px; color:#ffd36a; }
.sv-why { margin:4px 0 8px; text-align:center; color:#d9d1f5; font-size:14px; }
.sv-perks { margin:0 0 10px; padding:8px 10px 8px 28px; background:#0006; border-radius:10px; font-size:13px; line-height:1.55; } .sv-perks li::marker { content:"✔  "; color:#8fe06a; }
.sv-form label { display:flex; flex-direction:column; gap:3px; margin-bottom:7px; font-size:13px; color:#cfc6e8; }
.sv-form input { background:#0b0d22; color:#fff; border:1px solid #5d4f9a; border-radius:8px; padding:8px 10px; font-size:16px; } .sv-form input:focus { outline:none; border-color:#ffd36a; }
.sv-msg { min-height:18px; margin:2px 0 6px; color:#ffb29a; font-size:13.5px; text-align:center; }
.sv-btns { display:flex; gap:8px; justify-content:center; }
.sv-go { padding:10px 20px; border-radius:11px; font-weight:800; font-size:16px; cursor:pointer; color:#2a1604; border:1px solid #ffe7a0; background:linear-gradient(#ffd45c, #e59a1e); }
.sv-later { padding:10px 16px; border-radius:11px; cursor:pointer; background:#2a2350; color:#d9d1f5; border:1px solid #5d4f9a; }
.sv-done { text-align:center; } .sv-ok { font-size:20px; color:#8fe06a; font-weight:800; margin:8px 0 4px; }
.fr-card { width:min(560px, 100%); padding:18px 20px 14px; }
.fr-x { position:absolute; top:10px; right:10px; background:#2a2350; color:#fff; border:1px solid #5d4f9a; border-radius:8px; width:32px; height:32px; cursor:pointer; }
.fr-head { display:flex; gap:12px; align-items:center; } .fr-gift { font-size:44px; animation:o14-bob 2.4s ease-in-out infinite; }
.fr-head h3 { margin:0; font-size:24px; color:#ffd36a; } .fr-head p { margin:2px 0 0; font-size:13.5px; color:#d9d1f5; line-height:1.4; }
.fr-by, .fr-warn { margin:10px 0 0; padding:7px 10px; border-radius:9px; font-size:13px; background:rgba(255,140,40,.14); border:1px solid rgba(255,170,80,.45); color:#ffe2b8; } .fr-warn { background:rgba(255,210,90,.1); } .fr-warn a { color:#ffd36a; }
.fr-link { display:flex; gap:6px; margin-top:12px; } .fr-link input { flex:1; min-width:0; background:#0b0d22; color:#ffe9a8; border:1px solid #6a5ba8; border-radius:9px; padding:9px 10px; font:600 13.5px ui-monospace, Consolas, monospace; }
.fr-copy { padding:8px 14px; border-radius:9px; cursor:pointer; font-weight:800; color:#2a1604; border:1px solid #ffe7a0; background:linear-gradient(#ffd45c, #e59a1e); white-space:nowrap; }
.fr-shares { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.fr-share { flex:1 1 90px; text-align:center; padding:7px 8px; border-radius:9px; background:var(--c); color:#fff !important; text-decoration:none; font-weight:700; font-size:13px; border:1px solid rgba(255,255,255,.25); cursor:pointer; } .fr-share:hover { filter:brightness(1.12); }
.fr-card h4 { margin:14px 0 6px; font-size:15px; color:#ffe9a0; display:flex; align-items:baseline; gap:8px; } .fr-count { font-size:12px; color:#bdb3d6; font-weight:400; }
.fr-tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.fr-tile { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; padding:8px 6px; border-radius:12px; background:#0006; border:1px solid #3d3670; }
.fr-tile.got { border-color:#8fe06a; background:rgba(60,120,40,.22); } .fr-tile b { font-size:14px; } .fr-tile small { font-size:11.5px; color:#d9d1f5; line-height:1.25; } .fr-tile em { font-size:11.5px; color:#ffd36a; font-style:normal; }
.fr-art { height:72px; display:flex; align-items:center; justify-content:center; } .fr-sprite { width:100px; height:100px; image-rendering:pixelated; margin:-14px 0 -14px; } .fr-crown { font-size:44px; animation:o14-bob 2.4s ease-in-out infinite; }
.fr-got { position:absolute; top:6px; right:6px; font-size:10.5px; font-weight:800; color:#0d2606; background:#8fe06a; border-radius:6px; padding:1px 5px; }
.fr-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; max-height:180px; overflow:auto; }
.fr-list li { display:grid; grid-template-columns:110px 1fr 112px; gap:8px; align-items:center; font-size:13px; } .fr-list li span { text-align:right; color:#bdb3d6; } .fr-list li.done span { color:#8fe06a; font-weight:700; }
.fr-bar { height:8px; border-radius:6px; background:#0008; overflow:hidden; } .fr-bar i { display:block; height:100%; background:linear-gradient(90deg, #ffb347, #ffd36a); border-radius:6px; } .fr-list li.done .fr-bar i { background:linear-gradient(90deg, #5fbf4a, #8fe06a); }
.fr-empty { margin:0; padding:10px; text-align:center; color:#cfc6e8; background:#0005; border-radius:10px; font-size:13px; }
.fr-fine { margin:10px 0 0; font-size:11.5px; color:#9a92bf; text-align:center; }
@media (max-width:520px) { .fr-tiles { grid-template-columns:1fr; } .fr-tile { flex-direction:row; text-align:left; gap:8px; } .fr-art { height:56px; width:70px; flex:none; } .fr-list li { grid-template-columns:90px 1fr 92px; } }
#dock button.gift { background:linear-gradient(#4a2f12, #2c1c0b); border-color:#c98b2b; } #dock button.gift i { animation:o14-bob 2.4s ease-in-out infinite; }

/* ── controles táctiles (body.touch: solo pantallas táctiles) ── */
body.touch { overflow:hidden; overscroll-behavior:none; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
body.touch #app { display:block; padding:0; height:100%; }
body.touch #gamecol { position:fixed; inset:0; background:#000; overflow:hidden; }
body.touch #stage { position:absolute; inset:0; border:0; background:#000; }
body.touch #view, body.touch #present { position:absolute; left:0; top:0; will-change:transform; }
body.touch #side { position:fixed; inset:0; pointer-events:none; zoom:1 !important; overflow:visible; z-index:30; display:block; }
body.touch #side > * { display:none; }
body.touch #side > #hud { display:block; position:fixed; left:max(8px, env(safe-area-inset-left)); top:8px; width:min(220px, 34vw); padding:6px 8px; pointer-events:auto; background:rgba(20,16,10,.62); border-radius:10px; backdrop-filter:blur(2px); }
body.touch #hud .who { font-size:13px; margin-bottom:3px; } body.touch #hud .who b#h-name { font-size:14px; } body.touch #hud .meter { height:12px; margin:2px 0; font-size:9.5px; } body.touch #hud #m-hunger, body.touch #hud .row.small { display:none; }
body.touch #h-save { margin:2px 0 4px; padding:4px 6px; font-size:12px; }
body.touch #side > #npcbox:not([hidden]), body.touch #side > #bankwin:not([hidden]), body.touch #side > #modal-shade:not([hidden]) { display:block; pointer-events:auto; }
body.touch.touch-bag #side > #invpanel { display:block; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:min(560px, 96vw); max-height:92vh; overflow:auto; pointer-events:auto; z-index:60; background:#201c16; border:1px solid #c79a3a; border-radius:14px; padding:10px; box-shadow:0 12px 50px rgba(0,0,0,.7); }
#tbag-x, #tchat-x { display:none; } body.touch.touch-bag #tbag-x { display:block; float:right; margin:0 0 6px 8px; padding:6px 12px; border-radius:8px; background:#3a3020; color:#fff; border:1px solid #c79a3a; font-weight:700; }
body.touch #chatwrap { position:fixed; right:max(8px, env(safe-area-inset-right)); top:8px; width:min(330px, 40vw); height:84px; z-index:25; background:rgba(14,11,8,.42); border:0; border-radius:10px; pointer-events:none; }
body.touch #chatwrap #chatform { display:none; } body.touch #chat { font-size:11.5px; overflow:hidden; mask-image:linear-gradient(transparent, #000 35%); }
body.touch.touch-chat #chatwrap { left:8px; right:8px; top:8px; width:auto; height:min(60vh, 320px); background:rgba(20,16,10,.94); border:1px solid #c79a3a; pointer-events:auto; z-index:70; }
body.touch.touch-chat #chatwrap #chatform { display:block; } body.touch.touch-chat #chat { mask-image:none; overflow:auto; font-size:13px; }
body.touch.touch-chat #tchat-x { display:block; position:absolute; right:6px; top:6px; z-index:2; width:34px; height:34px; border-radius:8px; background:#3a3020; color:#fff; border:1px solid #c79a3a; }
body.touch #chatin { font-size:16px; padding:8px; }
body.touch #hotbar { position:fixed !important; left:50% !important; bottom:max(8px, env(safe-area-inset-bottom)) !important; top:auto !important; transform:translateX(-50%) !important; zoom:1.08; max-width:52vw; overflow-x:auto; opacity:1 !important; z-index:28; }
body.touch #hotbar > *:nth-child(n+6) { display:none; }
#touchui[hidden], #trotate[hidden], #tmenu[hidden] { display:none !important; }
#tjoy { position:fixed; left:0; bottom:0; width:42vw; height:62vh; z-index:26; touch-action:none; }
.tj-base { position:absolute; width:120px; height:120px; margin:-60px 0 0 -60px; left:110px; top:calc(100% - 110px); border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,.16)); border:2px solid rgba(255,255,255,.28); opacity:.55; transition:opacity .15s; }
.tj-base.on { opacity:1; } .tj-base i { position:absolute; left:50%; top:50%; width:54px; height:54px; margin:-27px 0 0 -27px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #fff6d8, #e5b53b 60%, #9a6a12); box-shadow:0 3px 10px rgba(0,0,0,.5); }
#tacts { position:fixed; right:max(10px, env(safe-area-inset-right)); bottom:max(10px, env(safe-area-inset-bottom)); width:190px; height:190px; z-index:27; }
.tb { position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; border:2px solid rgba(255,230,160,.55); color:#fff; background:radial-gradient(circle at 40% 30%, rgba(90,70,40,.85), rgba(30,22,12,.85)); box-shadow:0 4px 14px rgba(0,0,0,.5); touch-action:none; padding:0; }
.tb span { font-size:24px; line-height:1; } .tb small { font-size:9.5px; font-weight:700; opacity:.85; margin-top:1px; }
.tb.down { transform:scale(.92); filter:brightness(1.3); }
.tb.t-atk { width:92px; height:92px; right:0; bottom:0; background:radial-gradient(circle at 40% 30%, #d0492e, #6e1a0e); border-color:#ffb08a; } .tb.t-atk span { font-size:38px; }
.tb.t-pick { width:58px; height:58px; right:102px; bottom:4px; } .tb.t-ride { width:58px; height:58px; right:96px; bottom:72px; } .tb.t-ride.on { border-color:#8fe06a; background:radial-gradient(circle at 40% 30%, #4d8a2c, #1d3a10); }
.tb.t-chat { width:58px; height:58px; right:22px; bottom:104px; }
#tmenu-btn { position:fixed; top:8px; left:calc(max(8px, env(safe-area-inset-left)) + min(220px, 34vw) + 8px); z-index:29; width:44px; height:44px; border-radius:11px; font-size:22px; color:#fff; background:rgba(20,16,10,.72); border:1px solid #c79a3a; }
#tmenu { position:fixed; inset:0; z-index:80; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:rgba(6,6,18,.72); backdrop-filter:blur(3px); }
.tm-grid { display:grid; grid-template-columns:repeat(3, 108px); gap:10px; } @media (min-width:700px) { .tm-grid { grid-template-columns:repeat(5, 108px); } }
.tm-grid button { display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 6px; border-radius:14px; background:linear-gradient(#2a2350, #1b1838); color:#fff; border:1px solid #5d4f9a; font-size:13px; font-weight:700; }
.tm-grid button i { font-style:normal; font-size:28px; } .tm-close { padding:10px 26px; border-radius:11px; background:#3a3020; color:#fff; border:1px solid #c79a3a; font-weight:700; }
#trotate { position:fixed; inset:0; z-index:150; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:24px; text-align:center; color:#fff; background:rgba(8,10,30,.94); }
#trotate b { font-size:20px; color:#ffd36a; } #trotate p { margin:0; color:#cfc6e8; } #trotate button { margin-top:10px; padding:10px 22px; border-radius:11px; background:#2a2350; color:#fff; border:1px solid #5d4f9a; }
.tr-phone { font-size:64px; animation:o14-rot 2.2s ease-in-out infinite; } @keyframes o14-rot { 0%,30% { transform:rotate(0); } 60%,100% { transform:rotate(-90deg); } }
body.touch .win, body.touch .jr-win { max-width:96vw !important; max-height:92vh !important; }
body.touch #toast { top:100px; }
#loginform [hidden], #l-quick [hidden] { display:none !important; }
.fr-sprite.fr-body { width:100px; height:100px; margin:-14px 0 -14px; } .fr-sprite.fr-part { width:120px; height:120px; margin:-24px 0 -24px; }
.fr-art { height:86px; } .fr-sprite.fr-body { margin:-18px 0 -6px; }
/* 0.14.0: pantallas bajas (móvil en horizontal): la entrada empieza arriba y se puede desplazar; el botón «Play now» siempre a la vista */
@media (max-height:560px) { #login { justify-content:flex-start !important; padding:8px 10px 14px !important; gap:6px; } #loginform { margin:0 auto !important; padding:10px 16px !important; gap:6px !important; } #l-refresh { display:none; } #login #l-play, #login #l-cont { padding:9px 12px 7px; } #login #l-play b, #login #l-cont b { font-size:19px; } #loginform input { padding:5px 8px; font-size:15px; } }
body.touch { touch-action:auto; } body.touch #gamecol, #touchui, #tjoy, #tacts { touch-action:none; }
body.touch #gamecol { width:100vw !important; height:100vh !important; height:100dvh !important; max-width:none !important; } body.touch #stage { width:100% !important; height:100% !important; } body.touch #side > #dock, body.touch #hotstrip { display:none !important; }
body.touch #hotbar { max-width:calc(100vw - 440px); min-width:0; } body.touch #hotbar .slot:nth-of-type(n+6), body.touch #hotbar > [data-i]:nth-of-type(n+6) { display:none; } body.touch #chatwrap { top:52px; height:76px; width:min(300px, 36vw); }
body.touch #hotbar .hk:nth-of-type(n+6) { display:none !important; } body.touch #hotbar .hk-grip, body.touch #hotbar .hk-dim { display:none !important; } body.touch #hotbar { zoom:1.15; }
.tm-grid { grid-template-columns:repeat(auto-fill, 96px) !important; width:min(640px, 94vw); justify-content:center; max-height:78vh; overflow:auto; } .tm-grid button { position:relative; padding:9px 4px; } .tm-grid button i { font-size:24px; } .tm-grid button em { position:absolute; top:4px; right:6px; min-width:18px; padding:0 5px; border-radius:9px; background:#d33; color:#fff; font:700 11px/18px system-ui; } .tm-grid button.gift { border-color:#c98b2b; background:linear-gradient(#4a2f12, #2c1c0b); }
#quickstart { align-items:flex-start; } #quickstart .qs-card { margin:auto 0; } @media (max-width:720px) { .qs-look { grid-template-columns:1fr; } .qs-step { grid-template-columns:70px 40px 1fr 40px; } .qs-card { padding:14px 14px 12px; } .qs-go { font-size:19px; } }

/* ───────── 0.14.2: móvil más limpio. Arriba: HUD mínimo (izq.), ficha del tutorial (centro), chat y menú (dcha.). Abajo: joystick, 4 atajos y botones en arco. Lo demás, en el menú ☰ ───────── */
body.touch #side > #hud { width:min(184px, 30vw); padding:5px 7px 4px; top:max(6px, env(safe-area-inset-top)); left:max(6px, env(safe-area-inset-left)); }
body.touch #hud .who { font-size:12px; margin-bottom:2px; gap:5px; } body.touch #hud .who b#h-name { font-size:12.5px; max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.touch #hud .lvl { font-size:10.5px; padding:0 5px; } body.touch #hud .gold { font-size:11.5px; }
body.touch #hud .meter { height:9px !important; margin:2px 0 !important; } body.touch #hud .meter .tag, body.touch #hud .meter .val { font-size:8px !important; line-height:9px !important; } body.touch #hud #m-xp { height:5px !important; } body.touch #hud #m-xp .tag, body.touch #hud #m-xp .val { display:none; }
body.touch #h-save, body.touch #clock, body.touch #nbpill, body.touch .obtip, body.touch #weather-hud, body.touch #evbadges { display:none !important; }
body.touch #chatwrap { display:none !important; } body.touch.touch-chat #chatwrap { display:flex !important; }
#tmenu-btn { position:static !important; } body.touch #ttop { position:fixed; top:max(6px, env(safe-area-inset-top)); right:max(6px, env(safe-area-inset-right)); z-index:31; display:flex; gap:6px; align-items:center; }
#ttop button { position:relative; width:42px; height:42px; border-radius:11px; font-size:20px; color:#fff; background:rgba(20,16,10,.72); border:1px solid #c79a3a; padding:0; display:flex; align-items:center; justify-content:center; }
#ttop #tmenu-btn { width:46px; height:46px; font-size:23px; }
#ttop em { position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:#e0342a; color:#fff; font:800 11px/19px system-ui; font-style:normal; box-shadow:0 0 0 2px #14110d; } #ttop em[hidden] { display:none; }
#tchat-btn.new::after { content:""; position:absolute; top:5px; right:5px; width:9px; height:9px; border-radius:50%; background:#5fd35a; box-shadow:0 0 0 2px #14110d; }
/* tutorial: ficha corta arriba en el centro */
body.touch #tutbox { position:fixed !important; top:max(6px, env(safe-area-inset-top)) !important; left:50% !important; right:auto !important; bottom:auto !important; transform:translateX(-50%) !important; width:min(300px, 40vw) !important; max-height:none !important; padding:5px 8px 6px !important; z-index:29 !important; font-size:12px; background:rgba(20,16,10,.82) !important; border-radius:11px !important; }
body.touch #tutbox .tb-top { font-size:11.5px; gap:5px; cursor:pointer; } body.touch #tutbox .tb-top::after { content:"▾"; margin-left:auto; color:#e5b53b; } body.touch.touch-tut #tutbox .tb-top::after { content:"▴"; }
body.touch #tutbox .tb-min, body.touch #tutbox .tb-rw, body.touch #tutbox .tb-next, body.touch #tutbox .tb-btns, body.touch #tutbox .tb-text, body.touch #tutbox .tb-bar, body.touch #tutbox progress, body.touch #tutbox .tb-count { display:none !important; }
body.touch.touch-tut #tutbox .tb-text, body.touch.touch-tut #tutbox .tb-rw, body.touch.touch-tut #tutbox .tb-btns { display:block !important; font-size:12px; margin:4px 0; } body.touch.touch-tut #tutbox .tb-btns { display:flex !important; gap:4px; }
body.touch #tutbox .tb-go { margin:4px 0 0 !important; padding:5px 8px !important; font-size:13px !important; width:100%; border-radius:8px; }
/* abajo: joystick, 4 atajos y botones en arco (sin pisarse) */
body.touch #hotbar { zoom:1 !important; max-width:none !important; bottom:max(6px, env(safe-area-inset-bottom)) !important; padding:3px 4px !important; gap:3px !important; }
body.touch #hotbar .hk:nth-of-type(n+5) { display:none !important; } body.touch #hotbar .hk { width:44px !important; height:44px !important; }
#tjoy { width:38vw; height:58vh; } .tj-base { width:110px; height:110px; margin:-55px 0 0 -55px; left:92px; top:calc(100% - 92px); } .tj-base i { width:48px; height:48px; margin:-24px 0 0 -24px; }
#tacts { width:160px; height:150px; right:max(8px, env(safe-area-inset-right)); bottom:max(8px, env(safe-area-inset-bottom)); }
.tb.t-atk { width:84px !important; height:84px !important; right:0 !important; bottom:0 !important; } .tb.t-atk span { font-size:34px; }
.tb.t-pick { width:56px !important; height:56px !important; right:94px !important; bottom:2px !important; } .tb.t-ride { width:56px !important; height:56px !important; right:12px !important; bottom:94px !important; } .tb[hidden] { display:none !important; }
body.touch #toast { top:58px !important; max-width:60vw; font-size:13px; }
body.touch #buffs { position:fixed !important; top:84px; left:8px; transform:scale(.8); transform-origin:left top; z-index:28; }
/* ventanas y diálogos de NPC: centrados y dentro de la pantalla */
body.touch #side > #npcbox:not([hidden]) { position:fixed !important; left:50% !important; top:50% !important; transform:translate(-50%, -50%) !important; width:min(520px, 94vw) !important; max-height:88vh !important; overflow:auto !important; z-index:60 !important; border-radius:12px; }
body.touch .win:not([hidden]), body.touch .jr-win:not([hidden]) { left:50% !important; top:50% !important; transform:translate(-50%, -50%) !important; max-width:96vw !important; max-height:90vh !important; overflow:auto !important; }
@media (max-height:420px) { body.touch #hud .gold { display:none; } }
@media (max-height:480px) { .tm-grid { grid-template-columns:repeat(auto-fill, 86px) !important; width:min(700px, 96vw) !important; gap:6px !important; max-height:calc(100vh - 70px) !important; } .tm-grid button { padding:6px 2px !important; font-size:11.5px !important; border-radius:11px !important; } .tm-grid button i { font-size:20px !important; } #tmenu { gap:6px !important; justify-content:center; } .tm-close { padding:7px 22px !important; } }
body.touch #tutbox .tb-go { padding:4px 8px !important; font-size:12.5px !important; }
.cg-lbtn, .cg-lclose { display:none; }
/* 0.14.2: mesa de cartas compacta en el móvil (la lección, en un botón) */
body.touch .cg-table, body.touch .cg-table.lesson { height:612px !important; border-width:8px; }
body.touch .cg-table.lesson .cg-lesson { display:none; } body.touch .cg-table.lesson.showlesson .cg-lesson { display:block; top:120px; bottom:auto; width:640px; font-size:17px; padding:14px 20px 10px; z-index:20; cursor:pointer; box-shadow:0 10px 40px #000c; }
body.touch .cg-table.lesson .cg-lbtn { display:block; position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:6; padding:8px 22px; border-radius:12px; background:#2f6a3f; color:#fff; border:2px solid #9fe0a8; font:800 20px system-ui; }
body.touch .cg-lclose { display:block; text-align:center; color:#9fe0a8; font-size:14px; margin-top:4px; }
body.touch .cg-bottom button { font-size:18px; padding:8px 16px; }
body.touch .cg-table.lesson .cg-lbtn { left:20px; transform:none; bottom:8px; }
body.touch .fwin { left:50% !important; top:50% !important; right:auto !important; bottom:auto !important; transform:translate(-50%, -50%) !important; width:min(var(--fw, 620px), 96vw) !important; max-width:96vw !important; max-height:92vh !important; display:flex; flex-direction:column; } body.touch .fwin[hidden] { display:none !important; } body.touch .fwin > :last-child { overflow:auto; min-height:0; }
/* 0.14.3: tutorial escondible: una pastilla «📘 6/13» lo vuelve a abrir */
#tutbox .tb-hide { background:#2a241b; color:#e9a5a5; border:1px solid #5a4c33; border-radius:6px; width:24px; height:22px; cursor:pointer; line-height:1; padding:0; }
#tutbox.hid { width:auto !important; padding:0 !important; background:none !important; border:0 !important; box-shadow:none !important; }
#tutbox .tb-pill { padding:6px 12px; border-radius:999px; border:2px solid #c58a1c; background:rgba(20,16,10,.88); color:#ffd36a; font-weight:800; font-size:13px; cursor:pointer; box-shadow:0 4px 12px #0008; animation:tutpulse 2.4s ease-in-out infinite; }
body.touch #tutbox.hid { width:auto !important; } body.touch #tutbox.hid .tb-top::after { content:none; } body.touch #tutbox .tb-hide { width:28px; height:26px; font-size:14px; } body.touch #tutbox .tb-pill { padding:7px 14px; font-size:13px; }

/* ───────── Orbe Online 0.14.3: ♟ ajedrez y ⛀ damas ───────── */
#boardwin { position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center; padding:12px; background:rgba(6,6,14,.55); backdrop-filter:blur(2px); }
#boardwin[hidden] { display:none; }
.bg-card { --bs:min(540px, 72vh, 52vw); background:linear-gradient(180deg,#2b2016,#1a130c); border:2px solid #b8862f; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,220,150,.08); color:#f3e7cc; padding:12px 14px 14px; max-width:98vw; max-height:98vh; overflow:auto; }
#boardwin.opening .bg-card { animation:o14-pop .18s ease-out; }
.bg-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; } .bg-ico { font-size:28px; filter:drop-shadow(0 2px 3px #000); } .bg-head h3 { margin:0; font-size:22px; color:#ffd36a; letter-spacing:.03em; } .bg-head small { color:#bba98a; }
.bg-x { margin-left:auto; width:34px; height:34px; border-radius:9px; background:#3a2c1c; color:#fff; border:1px solid #8a6a32; cursor:pointer; font-size:15px; }
.bg-main { display:flex; gap:14px; align-items:stretch; }
.bg-play { display:flex; flex-direction:column; gap:6px; }
.bg-seat { display:flex; align-items:center; gap:9px; padding:5px 10px; border-radius:10px; background:#0006; border:1px solid #3b2d1d; transition:box-shadow .2s, border-color .2s; }
.bg-seat b { display:block; font-size:14.5px; } .bg-seat small { color:#bba98a; font-size:12px; }
.bg-seat.turn { border-color:#ffd36a; box-shadow:0 0 0 2px rgba(255,211,106,.25), 0 0 16px rgba(255,211,106,.25); } .bg-seat.me b { color:#9fe0a8; }
.bg-chip { width:22px; height:22px; border-radius:50%; flex:none; box-shadow:inset 0 -3px 0 rgba(0,0,0,.35), 0 1px 3px #000; }
.bg-chip.chess.s0 { background:radial-gradient(circle at 35% 30%, #fff, #e6dcc6 60%, #a99c80); } .bg-chip.chess.s1 { background:radial-gradient(circle at 35% 30%, #6b6b78, #26262e 60%, #0c0c10); }
.bg-chip.checkers.s0 { background:radial-gradient(circle at 35% 30%, #ff8a7a, #d23b2e 60%, #7a1912); } .bg-chip.checkers.s1 { background:radial-gradient(circle at 35% 30%, #fffdf4, #ece0c0 60%, #a8977a); }
.bg-frame { position:relative; padding:14px; border-radius:12px; background:linear-gradient(135deg,#6b3f1b,#3b220d 50%,#6b3f1b); box-shadow:inset 0 0 0 2px #2a1607, inset 0 0 0 4px #a5733a, 0 10px 24px rgba(0,0,0,.6); }
.bg-board { display:grid; grid-template-columns:repeat(8, 1fr); width:var(--bs); height:var(--bs); border:2px solid #24130a; box-shadow:0 0 0 1px #d8a85c; }
.bg-sq { position:relative; border:0; padding:0; margin:0; cursor:default; display:flex; align-items:center; justify-content:center; }
.chess .bg-sq.lt { background:#ecd9b0; } .chess .bg-sq.dk { background:#a7744a; }
.checkers .bg-sq.lt { background:#e4cc9a; } .checkers .bg-sq.dk { background:#3b2a22; }
.bg-sq.can { cursor:pointer; } .bg-sq.can:hover { filter:brightness(1.12); }
.bg-sq.last::before { content:""; position:absolute; inset:0; background:rgba(255,214,80,.38); pointer-events:none; }
.bg-sq.sel { box-shadow:inset 0 0 0 4px #ffd36a, inset 0 0 18px rgba(255,211,106,.6); }
.bg-sq.check::after { content:""; position:absolute; inset:0; background:radial-gradient(circle, rgba(255,40,30,.85), rgba(255,40,30,0) 72%); pointer-events:none; }
.bg-sq em { position:absolute; pointer-events:none; } .bg-sq em.dot { width:28%; height:28%; border-radius:50%; background:rgba(30,60,20,.45); box-shadow:0 0 0 2px rgba(255,255,255,.25); }
.bg-sq em.cap { inset:6%; border-radius:50%; box-shadow:inset 0 0 0 5px rgba(200,40,30,.6); }
.bg-sq:has(em) { cursor:pointer; }
.bg-rank, .bg-file { position:absolute; font:700 calc(var(--bs) / 42) system-ui; font-style:normal; opacity:.75; pointer-events:none; }
.bg-rank { left:3px; top:2px; } .bg-file { right:3px; bottom:1px; } .bg-sq.lt .bg-rank, .bg-sq.lt .bg-file { color:#8a5a33; } .bg-sq.dk .bg-rank, .bg-sq.dk .bg-file { color:#f0dcb4; }
/* 0.14.3: tamaño fijo — cada casilla mide exactamente 1/8 del tablero, pase lo que pase dentro (coronas, emojis del sistema, resaltados) */
.bg-board { grid-template-columns:repeat(8, minmax(0, 1fr)); grid-template-rows:repeat(8, minmax(0, 1fr)); flex:none; overflow:hidden; contain:strict; }
.bg-sq { min-width:0; min-height:0; width:100%; height:100%; overflow:hidden; line-height:1; font-size:0; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.bg-sq em, .bg-sq .bg-rank, .bg-sq .bg-file { font-size:calc(var(--bs) / 42); }
.bg-frame { flex:none; }
.bg-side { contain:size; overflow-y:auto; overflow-x:hidden; } .bg-log { flex:1 1 auto; min-height:60px; max-height:none; }
.pc { font-family:"Segoe UI Symbol","DejaVu Sans","Noto Sans Symbols 2","Arial Unicode MS",serif; font-variant-emoji:text; display:block; height:1em; width:1em; text-align:center; }
.ck { flex:none; width:calc(var(--bs) / 8 * .74) !important; height:calc(var(--bs) / 8 * .74) !important; }
.ck.king b { line-height:1; display:block; }
.pc { font-size:calc(var(--bs) / 9.6); line-height:1; position:relative; z-index:1; user-select:none; transition:transform .12s; }
.pc.w { color:#fffaf0; text-shadow:0 0 1px #000, 0 0 2px #000, 0 2px 0 #6b5a40, 0 3px 4px rgba(0,0,0,.55); }
.pc.b { color:#1a1a22; text-shadow:0 0 1px #d8c8a0, 0 1px 0 #6a6a78, 0 3px 4px rgba(0,0,0,.6); }
.bg-sq.can:hover .pc, .bg-sq.sel .pc { transform:translateY(-3px) scale(1.06); }
.ck { position:relative; z-index:1; width:72%; height:72%; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform .12s; }
.ck.r { background:radial-gradient(circle at 35% 30%, #ff9a8a, #d8402f 55%, #7d1a12); box-shadow:0 3px 0 #561008, 0 5px 8px rgba(0,0,0,.6), inset 0 0 0 3px rgba(255,255,255,.12), inset 0 0 0 7px rgba(0,0,0,.12); }
.ck.w { background:radial-gradient(circle at 35% 30%, #ffffff, #efe4c6 55%, #b5a383); box-shadow:0 3px 0 #8a7a5c, 0 5px 8px rgba(0,0,0,.6), inset 0 0 0 3px rgba(255,255,255,.4), inset 0 0 0 7px rgba(0,0,0,.08); }
.ck.king b { font-size:calc(var(--bs) / 16); color:#ffd84a; text-shadow:0 1px 0 #6a4a00, 0 0 4px rgba(0,0,0,.6); }
.bg-sq.can:hover .ck, .bg-sq.sel .ck { transform:translateY(-3px) scale(1.05); }
.bg-promo { position:absolute; inset:0; margin:auto; width:max-content; height:max-content; display:flex; align-items:center; gap:8px; padding:12px 14px; border-radius:12px; background:rgba(20,14,8,.95); border:2px solid #ffd36a; z-index:5; box-shadow:0 10px 30px #000; }
.bg-promo button.pc { width:58px; height:58px; font-size:44px; border-radius:10px; background:#ecd9b0; border:2px solid #a7744a; cursor:pointer; }
.bg-side { width:250px; display:flex; flex-direction:column; gap:8px; min-height:0; }
.bg-side h4 { margin:4px 0 0; font-size:14px; color:#ffe9a0; }
.bg-levels { display:flex; flex-direction:column; gap:6px; }
.bg-lv { text-align:left; padding:8px 10px; border-radius:10px; cursor:pointer; color:#fff; border:1px solid rgba(255,255,255,.18); transition:transform .1s, filter .1s; }
.bg-lv b { display:block; font-size:15px; } .bg-lv small { color:#f3ead2cc; font-size:12px; } .bg-lv:hover { transform:translateX(3px); filter:brightness(1.1); }
.bg-lv.easy { background:linear-gradient(90deg,#2f6a3f,#245232); } .bg-lv.medium { background:linear-gradient(90deg,#6a5522,#4d3d17); } .bg-lv.hard { background:linear-gradient(90deg,#7a2a22,#521a14); }
.bg-btn { padding:8px 12px; border-radius:10px; cursor:pointer; background:#3a2c1c; color:#f3e7cc; border:1px solid #8a6a32; font-weight:700; font-size:14px; }
.bg-btn.big { padding:11px 12px; font-size:15px; color:#2a1604; background:linear-gradient(#ffd45c,#e59a1e); border-color:#ffe7a0; } .bg-btn:disabled { opacity:.6; cursor:default; }
.bg-btn.ghost { background:transparent; } .bg-btn:hover:not(:disabled) { filter:brightness(1.1); }
.bg-wait { background:#0006; border:1px dashed #8a6a32; border-radius:10px; padding:8px 10px; } .bg-wait p { margin:0 0 6px; font-size:13px; color:#e6dcc4; }
.bg-status { padding:9px 10px; border-radius:10px; background:#0006; border:1px solid #3b2d1d; font-weight:700; text-align:center; } .bg-status.go { border-color:#9fe0a8; color:#c8f5cd; box-shadow:0 0 12px rgba(120,220,130,.25); }
.bg-hint { margin:0; font-size:12.5px; color:#ffcf8a; }
.bg-result { padding:12px; border-radius:12px; text-align:center; border:2px solid #8a6a32; background:#0007; } .bg-result b { display:block; font-size:22px; } .bg-result small { color:#d9cdb0; }
.bg-result.win { border-color:#ffd36a; background:linear-gradient(#5a4512,#2a2008); box-shadow:0 0 24px rgba(255,211,106,.35); } .bg-result.lose { border-color:#a3473b; } .bg-result.draw { border-color:#7a8aa0; }
.bg-log { margin-top:auto; background:#0005; border-radius:10px; padding:6px 8px; max-height:190px; overflow:auto; } .bg-log small { color:#bba98a; } .bg-log ol { margin:2px 0 0; padding-left:26px; font:12.5px/1.5 ui-monospace, Consolas, monospace; color:#e9dfc8; columns:2; }
.bg-stats { margin:0; font-size:12px; color:#bba98a; }
@media (max-width:820px), (max-height:560px) { .bg-card { --bs:min(84vh, 56vw); padding:8px 10px; } .bg-head { margin-bottom:4px; } .bg-head h3 { font-size:18px; } .bg-frame { padding:8px; } .bg-side { width:min(230px, 36vw); } .bg-seat { padding:3px 8px; } .bg-seat b { font-size:13px; } .bg-log { max-height:110px; } }
@media (max-height:560px) { #boardwin { padding:4px; } .bg-card { --bs:min(calc(100vh - 104px), 40vw); } .bg-lv { padding:5px 8px; } .bg-lv small { display:none; } .bg-side h4 { font-size:12.5px; } .bg-side { overflow:auto; }
  /* celular en horizontal: los jugadores van al lado del tablero, no encima ni debajo */
  .bg-play { display:grid; grid-template-columns:auto 132px; grid-template-rows:1fr 1fr; column-gap:8px; } .bg-play > .bg-frame { grid-column:1; grid-row:1 / 3; }
  .bg-play > .bg-seat:first-child { grid-column:2; grid-row:1; align-self:start; } .bg-play > .bg-seat:last-child { grid-column:2; grid-row:2; align-self:end; } .bg-seat small { font-size:11px; } }
@media (max-height:560px) and (orientation:portrait) { .bg-play { display:flex; } }
@media (max-width:620px) and (orientation:portrait) { .bg-main { flex-direction:column; } .bg-card { --bs:min(92vw, 56vh); } .bg-side { width:auto; contain:none; overflow:visible; } .bg-log { flex:none; max-height:120px; }
  #boardwin { align-items:flex-start; } /* anclada arriba: el tablero no sube ni baja cuando cambia el panel de abajo */ }
@media (max-height:560px) and (orientation:portrait) { .bg-side { contain:none; } }

/* ── Orbe Online 0.14.3 · celular: los 4 atajos en arco alrededor del botón de ataque ──
   Liberan el centro de abajo (antes tapaban el juego). Quedan al alcance del pulgar derecho,
   cada uno a 130 px del centro de Attack (a 157.5°, 135°, 112.5° y 90°); Ride pasa al hueco interior del arco. */
body.touch #hotbar { --R:max(8px, env(safe-area-inset-right)); --B:max(8px, env(safe-area-inset-bottom));
  position:fixed !important; left:auto !important; top:auto !important; right:0 !important; bottom:0 !important; transform:none !important;
  width:0 !important; height:0 !important; min-width:0 !important; max-width:none !important; padding:0 !important; margin:0 !important;
  background:none !important; border:0 !important; box-shadow:none !important; overflow:visible !important; zoom:1 !important; z-index:28; }
body.touch #hotbar .hkrow1 { display:contents !important; }
body.touch #hotbar .hk { position:fixed !important; width:42px !important; height:42px !important; border-radius:50% !important;
  background:radial-gradient(circle at 40% 30%, rgba(58,46,30,.92), rgba(18,14,9,.88)) !important; border:2px solid rgba(255,211,106,.55) !important;
  box-shadow:0 3px 8px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06) !important; transition:transform .08s, border-color .15s; }
body.touch #hotbar .hk:active { transform:scale(.9); border-color:#ffd36a !important; }
body.touch #hotbar .hk canvas { width:28px; height:28px; }
body.touch #hotbar .hk b { left:-3px; top:-4px; width:16px; height:16px; line-height:16px; text-align:center; border-radius:50%; font-size:10px; background:#2a1f12; border:1px solid #b8862f; text-shadow:none; }
body.touch #hotbar .hk em { right:-2px; bottom:-3px; font-size:11px; padding:0 3px; border-radius:6px; background:rgba(0,0,0,.6); }
body.touch #hotbar .hk:nth-of-type(1) { right:calc(var(--R) + 141px) !important; bottom:calc(var(--B) + 71px) !important; }
body.touch #hotbar .hk:nth-of-type(2) { right:calc(var(--R) + 113px) !important; bottom:calc(var(--B) + 113px) !important; }
body.touch #hotbar .hk:nth-of-type(3) { right:calc(var(--R) + 71px) !important; bottom:calc(var(--B) + 141px) !important; }
body.touch #hotbar .hk:nth-of-type(4) { right:calc(var(--R) + 21px) !important; bottom:calc(var(--B) + 151px) !important; }
body.touch #hotbar .hk:nth-of-type(n+5) { display:none !important; }
body.touch .tb.t-ride { width:48px !important; height:48px !important; right:69px !important; bottom:69px !important; } body.touch .tb.t-ride span { font-size:22px; }

/* ── Orbe Online 0.14.4 · 🎮 control (gamepad.js) ── */
.gpb { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; font:800 12px/1 system-ui, sans-serif; color:#fff; }
.gpb.face { width:20px; height:20px; border-radius:50%; background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 55%, #000)); box-shadow:0 1px 0 rgba(0,0,0,.6), inset 0 -2px 0 rgba(0,0,0,.25); text-shadow:0 1px 1px rgba(0,0,0,.6); }
.gpb.sh { min-width:22px; height:18px; padding:0 6px; border-radius:6px; background:linear-gradient(#4a4a58,#26262e); border:1px solid #6b6b7a; font-size:10.5px; letter-spacing:.02em; }
.gp-focus { outline:3px solid #ffd36a !important; outline-offset:2px; box-shadow:0 0 0 5px rgba(255,211,106,.25), 0 0 18px rgba(255,211,106,.45) !important; border-radius:8px; position:relative; z-index:1; }
#gpask, #gpmenu, #gphelp { position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:12px; background:rgba(6,6,14,.6); backdrop-filter:blur(3px); }
#gpask[hidden], #gpmenu[hidden], #gphelp[hidden], #gplegend[hidden] { display:none; }
.gpa-card, .gpm-card, .gph-card { background:linear-gradient(180deg,#2b2016,#1a130c); border:2px solid #b8862f; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.7); color:#f3e7cc; animation:o14-pop .18s ease-out; max-width:96vw; max-height:94vh; overflow:auto; }
.gpa-card { width:min(520px, 96vw); padding:18px 20px 14px; text-align:center; }
.gpa-ico { font-size:46px; filter:drop-shadow(0 4px 6px #000); animation:gpbob 2.4s ease-in-out infinite; } @keyframes gpbob { 50% { transform:translateY(-5px) rotate(-4deg); } }
.gpa-card h3 { margin:4px 0 0; font-size:24px; color:#ffd36a; } .gpa-name { margin:2px 0 10px; color:#bba98a; font-size:13px; } .gpa-card > p { margin:6px 0; }
.gpa-opts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 10px; }
.gpa-opt { display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 10px; border-radius:14px; cursor:pointer; color:#fff; border:2px solid rgba(255,255,255,.15); transition:transform .1s, filter .1s; }
.gpa-opt i { font-size:34px; font-style:normal; } .gpa-opt b { font-size:17px; } .gpa-opt small { color:#f3ead2cc; font-size:12px; }
.gpa-opt.pad { background:linear-gradient(160deg,#3a6a2a,#1f3c16); border-color:#8fe06a; } .gpa-opt.kbm { background:linear-gradient(160deg,#3a3550,#1f1c2e); }
.gpa-opt:hover, .gpa-opt.gp-focus { transform:translateY(-2px); filter:brightness(1.12); }
.gpa-rem { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#d9cdb0; cursor:pointer; } .gpa-hint { color:#9c8d72; font-size:12px; }
.gpm-card { width:min(640px, 96vw); padding:14px 16px 16px; }
.gpm-head, .gph-head { display:flex; align-items:baseline; gap:12px; margin-bottom:10px; } .gpm-head b, .gph-head b { font-size:20px; color:#ffd36a; } .gpm-head small, .gph-head small { margin-left:auto; color:#bba98a; font-size:12px; display:inline-flex; align-items:center; gap:4px; }
.gpm-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:8px; }
.gpm-it { position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 6px; border-radius:12px; background:#0006; border:1px solid #4a3a24; color:#f3e7cc; cursor:pointer; font-size:13px; }
.gpm-it i { font-size:26px; font-style:normal; } .gpm-it:hover { background:#3a2c1c; } .gpm-it em { position:absolute; top:4px; right:6px; min-width:18px; height:18px; border-radius:9px; background:#d23b2e; color:#fff; font:700 11px/18px system-ui; font-style:normal; }
.gph-card { width:min(860px, 96vw); padding:16px 18px; }
.gph-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; } .gph-grid h4 { margin:0 0 6px; color:#ffe9a0; font-size:14px; letter-spacing:.04em; text-transform:uppercase; }
.gph-row { display:flex; align-items:center; gap:10px; padding:5px 0; border-bottom:1px solid #ffffff12; font-size:13.5px; } .gph-k { flex:none; min-width:96px; display:inline-flex; align-items:center; gap:3px; flex-wrap:wrap; color:#bba98a; }
.gph-foot { text-align:center; margin-top:12px; } .gph-foot button { padding:10px 28px; border-radius:10px; font-weight:800; font-size:15px; color:#2a1604; background:linear-gradient(#ffd45c,#e59a1e); border:1px solid #ffe7a0; cursor:pointer; }
#gplegend { position:fixed; left:12px; bottom:12px; z-index:60; display:flex; align-items:center; gap:5px; padding:6px 12px; border-radius:20px; background:rgba(15,11,7,.82); border:1px solid #8a6a32; color:#f3e7cc; font-size:12.5px; box-shadow:0 6px 16px rgba(0,0,0,.5); animation:o14-pop .2s ease-out; pointer-events:none; }
body.gp .hk b.gpk { display:inline-flex; gap:1px; left:1px; top:1px; } body.gp .hk b.gpk .gpb.face { width:15px; height:15px; font-size:9px; } body.gp .hk b.gpk .gpb.sh { min-width:0; height:13px; padding:0 3px; font-size:8px; border-radius:4px; }
@media (max-width:760px) { .gph-grid { grid-template-columns:1fr; } .gpa-opts { grid-template-columns:1fr; } }
@media (max-height:520px) { .gpa-card { padding:10px 14px; } .gpa-ico { font-size:30px; } .gpa-opt { padding:8px; } .gpa-opt i { font-size:24px; } .gph-grid { grid-template-columns:repeat(3, 1fr); gap:8px; } .gph-row { padding:2px 0; font-size:12px; } }

/* ── Orbe Online 0.14.7 · pantalla de entrada: fondo REAL de la Welcome Plaza al anochecer (sin texto) y el logo nuevo como imagen ── */
#login, #create { background:#0a0c24 url(public/assets/login_bg_hd.jpg) 22% center / cover no-repeat; }
#login > .logo, #create > .logo { display:block; }
#login { padding-top:2vh; justify-content:flex-start; }
#login > .logo { width:min(80vw, 620px); max-height:27vh; margin:1.5vh auto 0; filter:drop-shadow(0 10px 26px rgba(0,0,0,.75)); }
#loginform, #charsel { margin-top:auto; margin-bottom:auto; }
@media (prefers-reduced-motion: no-preference) { #login > .logo { animation:logoIn .9s ease-out both; } @keyframes logoIn { from { transform:scale(.93); opacity:0; } to { transform:none; opacity:1; } } }
@media (max-height:560px) { #login > .logo { max-height:17vh; margin-top:0; } }

/* ── Orbe Online 0.14.8 · reportar / bloquear jugadores y borrar la cuenta (Google Play) ── */
.rep-shade { position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; padding:12px; background:rgba(6,6,14,.6); backdrop-filter:blur(2px); }
.rep-box { width:min(420px, 96vw); background:linear-gradient(180deg,#2b2016,#1a130c); border:2px solid #b8862f; border-radius:14px; padding:16px 18px; color:#f3e7cc; box-shadow:0 20px 50px rgba(0,0,0,.7); display:flex; flex-direction:column; gap:8px; }
.rep-box h3 { margin:0; color:#ffd36a; font-size:20px; } .rep-box p { margin:0; font-size:14px; line-height:1.4; } .rep-sub { color:#bba98a; font-size:13px !important; }
.rep-box select, .rep-box textarea, .rep-box input { background:#0d0b09; color:#f3e7cc; border:1px solid #6b5228; border-radius:8px; padding:8px; font:inherit; font-size:15px; }
.rep-box textarea { min-height:70px; resize:vertical; } .rep-blk { display:flex; align-items:center; gap:6px; font-size:14px; color:#d9cdb0; }
.rep-btns { display:flex; gap:8px; justify-content:flex-end; margin-top:4px; } .rep-btns button { padding:8px 14px; border-radius:8px; cursor:pointer; background:#3a2c1c; color:#f3e7cc; border:1px solid #8a6a32; font-weight:700; }
.rep-btns button.primary { background:linear-gradient(#ffd45c,#e59a1e); color:#2a1604; border-color:#ffe7a0; } .rep-btns button.danger { background:linear-gradient(#d0463a,#8a1f1a); color:#fff; border-color:#ffb0a0; } .rep-btns button:disabled { opacity:.6; }
.del-box h3 { color:#ff9a8a; }