/* Layout: lienzo isométrico a pantalla completa; HUD de juego anclado a las esquinas; ventanas que suben desde abajo */
:root {
  --ink: #1a1230; --panel: #f3e6c8; --panel2: #e6d3a8; --paper-ink: #3a2412; --edge: #8a6236;
  --hudbg: rgba(20, 14, 38, .72); --gold: #f5c443; --aether: #4fe3f2; --gem: #ff5fa8;
  --text: #fff6e4; --muted: #8a6a48; --good: #5fc84a; --bad: #e0442f; --sky: #4fa3e0;
  --display: 'Lilita One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  --body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  color-scheme: dark;
}
html, body { height: 100% }
[hidden] { display: none !important }
body { margin: 0; background: #8fcdf2; color: var(--text); font-family: var(--body); overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab }
#ov { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 1 }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; background: none; border: 0; padding: 0 }
button:focus-visible { outline: 3px solid var(--aether); outline-offset: 2px }
.txt { font-family: var(--display); letter-spacing: .4px; text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .6) }

/* ---------- iconos de recursos ---------- */
.ic { display: inline-block; width: 26px; height: 26px; flex: none; border-radius: 50%; position: relative; vertical-align: middle }
.ic.gold { background: radial-gradient(circle at 35% 30%, #fff6c0, #f5c443 42%, #b07a14 80%); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 0 2px var(--ink) }
.ic.aether { border-radius: 5px; transform: rotate(45deg) scale(.74); background: linear-gradient(135deg, #e6fdff, #4fe3f2 45%, #6a4fd8); box-shadow: 0 0 0 2.5px var(--ink) }
.ic.gems { border-radius: 4px; transform: rotate(45deg) scale(.68); background: linear-gradient(135deg, #f2e8ff, #b48aff 50%, #5a2aa8); box-shadow: 0 0 0 2.5px var(--ink) }
.ic.troph { border-radius: 5px 5px 12px 12px; background: linear-gradient(#ffe885, #d99a1e); box-shadow: 0 0 0 2px var(--ink) }
.ic.ham { border-radius: 6px; background: linear-gradient(135deg, #ffe27a, #d9a020); box-shadow: 0 0 0 2px var(--ink) }
.ic.ham::after { content: ""; position: absolute; left: 11px; top: 5px; width: 4px; height: 16px; background: #7a4a22; border-radius: 2px; transform: rotate(35deg) }
.ic.sm { width: 17px; height: 17px }
.ic.shield { border-radius: 0; clip-path: polygon(50% 0, 100% 15%, 92% 60%, 50% 100%, 8% 60%, 0 15%); background: linear-gradient(#c8d0dc, #7d8698) }
.shieldbtn { position: relative; pointer-events: auto; cursor: pointer; font-size: 14px }
.shieldbtn.on .ic.shield { background: linear-gradient(#a6e8ff, #3a8fe0) }
.shieldbtn .badge { top: -8px; right: -10px }
.unit.hero { background: linear-gradient(#ffe7a0, #e0a83a) } .unit.hero.rest { filter: grayscale(.8) brightness(.8) } .unit.cc { background: linear-gradient(#d8c8ff, #9a7ae0) }
.dep.hero { background: linear-gradient(#ffe7a0, #e0a83a) } .dep.cc { background: linear-gradient(#d8c8ff, #9a7ae0) } .dep .dic canvas { max-width: 60px }
.dep.ability { box-shadow: 0 0 0 3px #fff, 0 0 18px 6px rgba(255, 210, 60, .9), 0 4px 0 var(--ink); animation: abPulse 1s infinite alternate }
@keyframes abPulse { to { transform: translateY(-4px) } }
.lvtag { font-family: var(--body); font-weight: 800; font-size: 11px; background: #4a34a8; color: #fff; border-radius: 6px; padding: 1px 5px; vertical-align: middle }
.logcard { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 3px solid var(--ink); border-radius: 14px; background: #fff3d6 }
.logcard.win { background: #e6f6d6 } .logcard.loss { background: #fbe0d6 }
.logcard .tagres { margin-left: auto; font-weight: 800; font-size: 12px }
.logcard.win .tagres { color: #2e7a22 } .logcard.loss .tagres { color: #b0301e }
.stars.sm .star { width: 18px; height: 18px; background: #c8b490 } .stars.sm .star.on { background: linear-gradient(#fff07a, #f5a623); transform: none }
.units.small .unit { width: 46px; height: 46px } .units.small .unit .uic canvas { width: 40px; height: 40px } .units.small .ucount { font-size: 13px }

/* ---------- HUD de la aldea ---------- */
.corner { position: fixed; z-index: 5; display: flex; flex-direction: column; gap: 8px; pointer-events: none }
.tl { top: calc(env(safe-area-inset-top, 0px) + 10px); left: max(10px, env(safe-area-inset-left, 0px)) }
.tr { top: calc(env(safe-area-inset-top, 0px) + 10px); right: max(10px, env(safe-area-inset-right, 0px)); align-items: flex-end }
.tc { top: calc(env(safe-area-inset-top, 0px) + 10px); left: 50%; transform: translateX(-50%); align-items: center }
.player { display: flex; align-items: center; gap: 6px }
.lvl { width: 46px; height: 46px; flex: none; display: grid; place-items: center; background: linear-gradient(#7ad0ff, #2f7fd0); clip-path: polygon(50% 0, 63% 32%, 98% 35%, 72% 58%, 80% 94%, 50% 76%, 20% 94%, 28% 58%, 2% 35%, 37% 32%); font-family: var(--display); font-size: 17px; text-shadow: 0 2px 0 var(--ink); padding-top: 4px; filter: drop-shadow(0 2px 0 var(--ink)) }
.pinfo { display: flex; flex-direction: column; gap: 3px }
.pinfo .txt { font-size: 17px; line-height: 1 }
.xp { width: 110px; height: 11px; border-radius: 6px; background: rgba(0, 0, 0, .55); border: 2px solid var(--ink); overflow: hidden }
.xp i { display: block; height: 100%; background: linear-gradient(#a6e8ff, #3aa0e8); width: 0 }
.chip { display: inline-flex; align-items: center; gap: 7px; background: var(--hudbg); border: 2px solid rgba(0, 0, 0, .5); border-radius: 10px; padding: 3px 10px 3px 4px; font-family: var(--display); font-size: 16px; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 var(--ink) }
.chip small { font-family: var(--body); font-weight: 800; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #cfc3ea; text-shadow: none }
.res { display: grid; grid-template-columns: auto 30px; align-items: center; gap: 0 4px }
.res .meter { grid-column: 1; grid-row: 2; position: relative; width: clamp(118px, 34vw, 170px); height: 24px; background: rgba(0, 0, 0, .58); border: 2px solid var(--ink); border-radius: 6px; overflow: hidden }
.res .meter i { position: absolute; inset: 0 auto 0 0; width: 0 }
.res.gold .meter i { background: linear-gradient(#ffe27a, #e0a21a) }
.res.aether .meter i { background: linear-gradient(#a6f6ff, #3ab8d8) }
.res.gems .meter i { background: linear-gradient(#dcc4ff, #8a5ad8); width: 100% }
.res .meter span { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--display); font-size: 16px; text-shadow: 0 2px 0 var(--ink), 0 0 3px var(--ink); font-variant-numeric: tabular-nums }
.res .max { grid-column: 1; grid-row: 1; justify-self: end; font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 0 var(--ink), 0 0 3px var(--ink); margin-bottom: 1px; letter-spacing: .3px }
.res .ic { grid-column: 2; grid-row: 2; width: 30px; height: 30px; margin-left: -10px }
.res .ic.aether, .res .ic.gems { width: 28px; height: 28px; margin-left: -8px }
.res.gems .meter { width: clamp(80px, 22vw, 110px) }

.bl, .br { position: fixed; z-index: 6; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); display: flex; gap: 10px; align-items: flex-end }
.bl { left: max(12px, env(safe-area-inset-left, 0px)) }
.br { right: max(12px, env(safe-area-inset-right, 0px)) }
.mainbtn { position: relative; width: 84px; height: 84px; border-radius: 18px; border: 3px solid var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; box-shadow: 0 5px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -6px 0 rgba(0, 0, 0, .18); transition: transform .08s }
.mainbtn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .45) }
.mainbtn svg { width: 46px; height: 46px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .4)) }
.mainbtn .txt { font-size: 17px; margin-top: -2px }
.mainbtn.attack { width: 104px; height: 104px; background: linear-gradient(#ffb04a, #e8601c 60%, #c4421a) }
.mainbtn.attack svg { width: 60px; height: 60px }
.mainbtn.attack .txt { font-size: 21px }
.mainbtn.shop { background: linear-gradient(#ffe27a, #f0a81c 60%, #cf8410) }
.mainbtn.army { background: linear-gradient(#8fd0ff, #3a8fd8 60%, #2a6fb8) }
.badge { position: absolute; top: -10px; right: -8px; background: var(--bad); border: 2px solid var(--ink); border-radius: 10px; padding: 1px 6px; font-family: var(--display); font-size: 13px; text-shadow: 0 1px 0 var(--ink) }

/* ---------- selección ---------- */
#sel { position: fixed; z-index: 7; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 122px); width: min(560px, calc(100% - 24px)); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none }
#sel > * { pointer-events: auto }
.sel-name { font-family: var(--display); font-size: 22px; text-align: center; text-shadow: 0 2px 0 var(--ink), 0 0 4px var(--ink); text-wrap: balance }
.sel-lv { font-size: 16px; color: #ffe27a }
.sel-cost { display: inline-flex; align-items: center; gap: 4px; font-size: 18px }
.acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap }
.act { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 72px; position: relative }
.act .disc { width: 62px; height: 62px; border-radius: 50%; border: 3px solid var(--ink); background: radial-gradient(circle at 50% 30%, #fff8e6, #e8d5a8); display: grid; place-items: center; box-shadow: 0 4px 0 var(--ink); transition: transform .08s }
.act:active .disc { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink) }
.act .disc svg { width: 34px; height: 34px }
.act.green .disc { background: radial-gradient(circle at 50% 30%, #b6f58a, #4caf3a) }
.act.red .disc { background: radial-gradient(circle at 50% 30%, #ff9a8a, #d23a2a) }
.act.pink .disc { background: radial-gradient(circle at 50% 30%, #ffd0e6, #ff79b4) }
.act.gold .disc { background: radial-gradient(circle at 50% 30%, #fff1b0, #f5c443) }
.act.blue .disc { background: radial-gradient(circle at 50% 30%, #c8e8ff, #5aa8e8) }
.act[aria-disabled="true"] .disc { filter: grayscale(.85) brightness(.8) }
.act .lbl { font-family: var(--display); font-size: 14px; text-shadow: 0 2px 0 var(--ink), 0 0 3px var(--ink) }
.act .tag { position: absolute; top: 44px; background: rgba(20, 14, 38, .9); border: 2px solid var(--ink); border-radius: 8px; padding: 0 6px 0 3px; display: flex; align-items: center; gap: 3px; font-family: var(--display); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums }
.why { font-weight: 800; font-size: 13px; color: #ffb4a8; text-shadow: 0 1px 0 var(--ink), 0 0 3px var(--ink); text-align: center }
.hint { font-weight: 800; font-size: 12px; color: #fff; text-shadow: 0 1px 0 var(--ink), 0 0 3px var(--ink); text-align: center }

/* ---------- ventanas (estilo pergamino) ---------- */
#modal { position: fixed; inset: 0; z-index: 20; background: rgba(10, 6, 24, .55); display: flex; align-items: flex-end; justify-content: center; padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); padding-block: calc(env(safe-area-inset-top, 0px) + 10px) calc(env(safe-area-inset-bottom, 0px) + 10px) }
@media (min-height: 620px) { #modal { align-items: center } }
.sheet { width: 100%; max-width: 560px; max-height: 100%; display: flex; flex-direction: column; background: var(--panel); color: var(--paper-ink); border: 4px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink); overflow: hidden; animation: pop .18s ease-out }
.sheet.wide { max-width: 820px }
@keyframes pop { from { transform: scale(.94); opacity: .4 } }
.sheet header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 10px 18px; background: linear-gradient(#7a5ad8, #4a34a8); border-bottom: 4px solid var(--ink) }
.sheet h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 26px; color: var(--text); text-shadow: 0 3px 0 var(--ink); letter-spacing: .5px }
.x { width: 40px; height: 40px; border-radius: 10px; border: 3px solid var(--ink); background: linear-gradient(#ff7a6a, #c63a2a); box-shadow: 0 3px 0 var(--ink); display: grid; place-items: center; flex: none }
.x svg { width: 22px; height: 22px }
.mbody { padding: 14px; overflow: auto; display: flex; flex-direction: column; gap: 12px; touch-action: pan-y }
.mbody h3 { margin: 2px 0 -4px; font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--paper-ink) }
.tabs { display: flex; gap: 6px; flex-wrap: wrap }
.tab { border: 3px solid var(--ink); border-radius: 12px; padding: 6px 14px; font-family: var(--display); font-size: 16px; background: var(--panel2); color: var(--muted); box-shadow: 0 3px 0 var(--ink) }
.tab[aria-selected="true"] { background: linear-gradient(#ffe27a, #f0a81c); color: var(--paper-ink) }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px }
.card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 10px 8px; background: linear-gradient(#fff8e6, #f0e0b8); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); color: var(--paper-ink); min-width: 0; transition: transform .08s }
.card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink) }
.card.off { filter: grayscale(.7); opacity: .82 }
.card b { font-family: var(--display); font-weight: 400; font-size: 17px; line-height: 1.05 }
.card .cico { display: block; width: 100%; height: 96px }
.card .cico canvas { width: 100%; height: 100%; display: block; object-fit: contain }
.card .cico.tr, .card .cico.sp { height: 64px; display: grid; place-items: center }
.card .cico.tr canvas { width: 64px; height: 64px }
.card .meta { font-size: 12px; font-weight: 800; color: var(--muted) }
.card .minis { display: flex; gap: 6px; font-size: 11px; font-weight: 800 }
.card .minis span { background: rgba(58, 36, 18, .1); border-radius: 6px; padding: 1px 6px }
.card .desc { font-size: 11.5px; line-height: 1.3; color: #6a4a2a }
.card .why { color: var(--bad); text-shadow: none; font-size: 12px }
.price { display: inline-flex; align-items: center; gap: 5px; font-family: var(--display); font-size: 17px; background: linear-gradient(#8de06a, #3e9a33); color: #fff; text-shadow: 0 2px 0 var(--ink); border: 3px solid var(--ink); border-radius: 10px; padding: 2px 10px 2px 6px; font-variant-numeric: tabular-nums }
.card.off .price { background: linear-gradient(#c8b8a0, #9a8a72) }
.cnt { position: absolute; top: 6px; right: 8px; font-family: var(--display); font-size: 14px; color: var(--muted) }
.note { margin: 0; font-size: 13px; color: var(--muted); font-weight: 600 }
.lead { margin: 0; font-size: 15px; font-weight: 700 }
.link { text-decoration: underline; font-weight: 800; color: var(--bad) }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.row.center { justify-content: center }
.pill { display: inline-flex; align-items: center; gap: 5px; background: rgba(58, 36, 18, .1); border: 2px solid rgba(58, 36, 18, .25); border-radius: 10px; padding: 3px 10px; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums }
.pill.muted { color: var(--muted) }
.units { display: flex; flex-wrap: wrap; gap: 8px }
.unit { position: relative; width: 64px; height: 64px; border-radius: 12px; border: 3px solid var(--ink); background: linear-gradient(#bfe0ff, #7ab0e0); display: grid; place-items: center; overflow: hidden }
.unit.q { background: linear-gradient(#e8dcc0, #c8b490); cursor: pointer }
.unit.spell { background: linear-gradient(#e8c8ff, #a878e0) }
.unit .uic canvas { width: 56px; height: 56px; display: block }
.ucount { position: absolute; left: 3px; top: 1px; font-family: var(--display); font-size: 15px; color: #fff; text-shadow: 0 2px 0 var(--ink), 0 0 3px var(--ink) }
.spico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, var(--c) 60%); border: 3px solid var(--ink); font-size: 24px; color: var(--ink); line-height: 1 }
.prog { height: 14px; border-radius: 8px; background: rgba(0, 0, 0, .25); border: 3px solid var(--ink); overflow: hidden }
.prog i { display: block; height: 100%; background: linear-gradient(#b6f58a, #4caf3a); width: 0 }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 3px solid var(--ink); border-radius: 14px; padding: 9px 18px; font-family: var(--display); font-size: 19px; color: #fff; text-shadow: 0 2px 0 var(--ink); box-shadow: 0 4px 0 var(--ink); background: linear-gradient(#ffb04a, #e8601c) }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink) }
.btn.green { background: linear-gradient(#8de06a, #3e9a33) }
.btn.blue { background: linear-gradient(#8fd0ff, #2a6fb8) }
.btn[disabled] { filter: grayscale(.8); cursor: not-allowed }
.btn .price { font-size: 15px; padding: 0 8px 0 4px; border-width: 2px }
.big-find { font-size: 24px; padding: 12px 22px }
.info { display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.info-ic { width: 200px; max-width: 100%; height: 150px; flex: none; background: radial-gradient(ellipse at 50% 70%, #c8e8a0, transparent 70%) }
.info-ic canvas { width: 100%; height: 100%; display: block }
.info-txt { flex: 1 1 220px; min-width: 0 }
.info-txt p { margin: 0 0 6px; font-size: 14px; line-height: 1.45 }
.info-txt .lv { font-family: var(--display); font-size: 17px }
table.stats { width: 100%; border-collapse: collapse; font-size: 14px }
table.stats th { text-align: left; font-weight: 800; padding: 6px 8px; color: var(--muted) }
table.stats td { padding: 6px 8px; font-weight: 800; font-variant-numeric: tabular-nums }
table.stats td.nx { color: var(--good) }
table.stats tr:nth-child(odd) { background: rgba(58, 36, 18, .07) }

/* ---------- batalla ---------- */
#bhud .tl .txt.name { font-size: 20px }
.lootbox { background: var(--hudbg); border: 2px solid rgba(0, 0, 0, .5); border-radius: 10px; padding: 6px 10px; display: flex; flex-direction: column; gap: 4px }
.lootbox small { font-weight: 800; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #cfc3ea }
.lootbox .r { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 18px; text-shadow: 0 2px 0 var(--ink); font-variant-numeric: tabular-nums }
.timer { text-align: right }
.timer small { display: block; font-weight: 800; font-size: 12px; text-shadow: 0 1px 0 var(--ink), 0 0 3px var(--ink) }
.timer .txt { font-size: 30px; line-height: 1 }
.bbtns { display: flex; gap: 8px; pointer-events: auto }
.btn.small { font-size: 15px; padding: 6px 12px; border-radius: 11px }
.btn.red { background: linear-gradient(#ff7a6a, #c63a2a) }
.btn.gold { background: linear-gradient(#ffe27a, #d89a1a); color: #3a2400 }
.stars { display: flex; gap: 4px; justify-content: center }
.star { width: 34px; height: 34px; clip-path: polygon(50% 0, 63% 33%, 98% 35%, 71% 58%, 80% 94%, 50% 75%, 20% 94%, 29% 58%, 2% 35%, 37% 33%); background: rgba(0, 0, 0, .45); transition: background .3s, transform .3s }
.star.on { background: linear-gradient(#fff07a, #f5a623); transform: scale(1.12) }
.stars.big .star { width: 70px; height: 70px; background: #c8b490 }
.stars.big .star.on { background: linear-gradient(#fff07a, #f5a623); animation: starIn .45s both }
@keyframes starIn { from { transform: scale(2.2) rotate(-30deg); opacity: 0 } to { transform: scale(1.1) } }
.pctbox { text-align: center }
.pctbox .txt { font-size: 26px; line-height: 1 }
.pctbox small { font-weight: 800; font-size: 11px; text-shadow: 0 1px 0 var(--ink), 0 0 3px var(--ink); text-transform: uppercase; letter-spacing: 1px }
#bBar { position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; overflow-x: auto; padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 10px) max(12px, env(safe-area-inset-left, 0px)); background: linear-gradient(transparent, rgba(10, 6, 24, .55)); touch-action: pan-x; justify-content: safe center }
.dep { position: relative; flex: none; width: 78px; height: 92px; border-radius: 12px; border: 3px solid var(--ink); background: linear-gradient(#bfe0ff, #6aa0d8); box-shadow: 0 4px 0 var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; overflow: hidden; transition: transform .1s }
.dep.spell { background: linear-gradient(#e8c8ff, #9a68d8) }
.dep.on { transform: translateY(-8px); border-color: #fff; box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink) }
.dep.off { filter: grayscale(1) brightness(.75) }
.dep .dic { flex: 1; display: grid; place-items: center }
.dep .dic canvas { width: 56px; height: 56px; display: block }
.dep .dcount { position: absolute; top: 2px; left: 5px; font-family: var(--display); font-size: 17px; text-shadow: 0 2px 0 var(--ink), 0 0 3px var(--ink) }
.dep .dname { width: 100%; background: rgba(10, 6, 24, .6); font-weight: 800; font-size: 11px; padding: 2px 0; text-align: center }
#bHint { position: fixed; z-index: 6; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 122px); font-family: var(--display); font-size: 18px; text-align: center; text-shadow: 0 2px 0 var(--ink), 0 0 4px var(--ink); pointer-events: none; width: min(420px, calc(100% - 32px)) }
.result { display: flex; flex-direction: column; gap: 14px; align-items: center; padding: 6px 0 }
.result .pct { font-family: var(--display); font-size: 48px; line-height: 1; text-align: center }
.result .pct small { display: block; font-family: var(--body); font-weight: 800; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px }
#toast { position: fixed; z-index: 30; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 96px); transform: translateX(-50%); background: rgba(20, 14, 38, .9); border: 3px solid var(--ink); border-radius: 12px; padding: 8px 16px; font-family: var(--display); font-size: 17px; text-align: center; max-width: calc(100% - 32px); pointer-events: none }
#toast.show { animation: toast 2.2s both }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -8px) } 10%, 80% { opacity: 1; transform: translate(-50%, 0) } 100% { opacity: 0 } }
@media (max-width: 480px) {
  .mainbtn { width: 70px; height: 70px } .mainbtn svg { width: 38px; height: 38px } .mainbtn .txt { font-size: 14px }
  .mainbtn.attack { width: 88px; height: 88px } .mainbtn.attack svg { width: 50px; height: 50px }
  #sel { bottom: calc(env(safe-area-inset-bottom, 0px) + 100px) } .act { width: 62px } .act .disc { width: 54px; height: 54px } .act .tag { top: 38px }
  .lvl { width: 40px; height: 40px; font-size: 15px } .xp { width: 84px } .pinfo .txt { font-size: 15px }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 640px) {
  #hud .tc { left: max(10px, env(safe-area-inset-left, 0px)); transform: none; top: calc(env(safe-area-inset-top, 0px) + 100px); align-items: flex-start }
  #bhud .tc { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 124px) }
  #bHint { bottom: calc(env(safe-area-inset-bottom, 0px) + 210px) }
}
@media (prefers-reduced-motion: reduce) { .sheet, #toast.show, .stars.big .star.on { animation: none } .mainbtn, .act .disc, .card, .dep { transition: none } }


/* ---------- ligas y logros ---------- */
.chip .lg { font-family: var(--body); font-weight: 800; font-size: 11px; color: #fff; text-shadow: 0 1px 0 var(--ink); padding: 1px 7px; border-radius: 6px; border: 2px solid var(--ink) }
.ic.achv { border-radius: 4px; clip-path: polygon(50% 0, 63% 33%, 98% 35%, 71% 58%, 80% 94%, 50% 75%, 20% 94%, 29% 58%, 2% 35%, 37% 33%); background: linear-gradient(#fff07a, #f5a623) }
.lgbig { font-family: var(--display); font-size: 20px; color: #fff; text-shadow: 0 2px 0 var(--ink); padding: 4px 14px; border-radius: 10px; border: 3px solid var(--ink) }
.lgdot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); margin-right: 6px; vertical-align: -1px }
table.stats tr.cur td { background: rgba(245, 196, 67, .35) }
.achcard { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px; border: 3px solid var(--ink); border-radius: 14px; background: #fff3d6 }
.achcard.ready { background: #fff0b0; box-shadow: 0 0 0 3px #f5c443 inset } .achcard.done { opacity: .7 }
.achstars { display: flex; gap: 2px } .achstars .star { width: 20px; height: 20px; background: #c8b490 } .achstars .star.on { background: linear-gradient(#fff07a, #f5a623); transform: none }
.achtxt { display: flex; flex-direction: column; gap: 3px; min-width: 0 } .achtxt b { font-family: var(--display); font-weight: 400; font-size: 17px }
.achtxt .prog { height: 10px; border-width: 2px }
@media (max-width: 480px) { .achcard { grid-template-columns: 1fr } }

/* ---------- tutorial ---------- */
#tut { position: fixed; z-index: 35; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 60px); width: min(540px, calc(100% - 24px)); display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--panel); color: var(--paper-ink); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink); animation: pop .2s ease-out }
#tut.low { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) }
#tut.battle { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 130px) }
#tut { pointer-events: none } #tut button { pointer-events: auto }
#tut .tutface { flex: none; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--ink); background: radial-gradient(circle at 50% 35%, #fff4cc, #f5c443); overflow: hidden }
#tut .tutface canvas { width: 64px; height: 64px; display: block }
#tut .tutbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px }
#tut .tutstep { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted) }
#tut .tuttext { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35 }
#tutarrow { position: fixed; z-index: 36; width: 0; height: 0; pointer-events: none; transform: translate(-50%, -100%); border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 26px solid #ffd23a; filter: drop-shadow(0 3px 0 #1a1230) drop-shadow(0 0 6px rgba(255, 210, 60, .8)); animation: tutBounce .7s ease-in-out infinite alternate }
@keyframes tutBounce { from { margin-top: -14px } to { margin-top: -2px } }
@media (max-width: 640px) { #tut { top: calc(env(safe-area-inset-top, 0px) + 150px) } }
@media (prefers-reduced-motion: reduce) { #tutarrow { animation: none } }

/* ---------- ajustes ---------- */
.chip.gear { font-size: 14px }
.slider { display: grid; grid-template-columns: 90px 1fr 48px; align-items: center; gap: 10px; font-weight: 800 }
.slider input { width: 100%; accent-color: #6a4fd8 }
.slider b { text-align: right; font-variant-numeric: tabular-nums }

/* ---------- acabado de materiales en la interfaz (texturas generadas al iniciar: pergamino, tela, madera, hierro, oro) ---------- */
.sheet { background: var(--tx-parch, none) var(--panel); background-size: 256px }
.sheet header { background: radial-gradient(circle at 9px 9px, #fff2b0 0 2.5px, #8a6a20 3px, transparent 4px), radial-gradient(circle at calc(100% - 9px) 9px, #fff2b0 0 2.5px, #8a6a20 3px, transparent 4px), linear-gradient(rgba(130, 98, 224, .74), rgba(70, 48, 160, .86)), var(--tx-cloth, linear-gradient(#7a5ad8, #4a34a8)); background-size: auto, auto, auto, 256px; box-shadow: inset 0 -4px 0 #e8c36a, inset 0 2px 0 rgba(255, 255, 255, .28) }
.card { background: linear-gradient(rgba(255, 250, 236, .35), rgba(232, 214, 172, .45)), var(--tx-card, none) #f6ead0; background-size: auto, 256px; box-shadow: 0 4px 0 var(--ink), inset 0 0 0 2px rgba(206, 156, 64, .6), inset 0 3px 0 rgba(255, 255, 255, .6) }
.chip, .lootbox, #toast { background: linear-gradient(rgba(34, 24, 58, .62), rgba(16, 10, 32, .8)), var(--tx-iron, none) var(--hudbg); background-size: auto, 256px; border-color: #0e0a1c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(232, 195, 106, .35), 0 2px 0 rgba(0, 0, 0, .35) }
.res .meter { background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .62)), var(--tx-iron, none) #111; background-size: auto, 256px; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6), 0 0 0 1px rgba(232, 195, 106, .4) }
.res .meter i::after { content: ""; position: absolute; inset: 2px 3px auto 3px; height: 35%; border-radius: 4px; background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)) }
.tab { background: linear-gradient(rgba(255, 240, 210, .12), rgba(60, 30, 10, .25)), var(--tx-wood, none) var(--panel2); background-size: auto, 256px; color: #fff3d6; text-shadow: 0 2px 0 var(--ink) }
.tab[aria-selected="true"] { background: linear-gradient(rgba(255, 230, 130, .55), rgba(232, 160, 28, .6)), var(--tx-gold, none) #f0a81c; background-size: auto, 256px; color: var(--paper-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .5) }
.btn, .mainbtn { position: relative; isolation: isolate }
.btn::after, .mainbtn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: linear-gradient(rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .12)), var(--tx-grain, none); background-size: auto, 128px; mix-blend-mode: overlay; opacity: .9 }
.mainbtn { box-shadow: 0 5px 0 var(--ink), inset 0 0 0 3px rgba(255, 233, 160, .55), inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -7px 0 rgba(0, 0, 0, .2) }
.mainbtn .badge { z-index: 2 }
.mainbtn img.ic3d { width: 62px; height: 62px; margin-top: -6px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .45)) }
.mainbtn.attack img.ic3d { width: 80px; height: 80px }
#tut { background: var(--tx-parch, none) var(--panel); background-size: 256px }

/* ---------- éter oscuro ---------- */
.ic.dark { border-radius: 30% 30% 50% 50%; background: radial-gradient(circle at 50% 40%, #e8a0ff, #6a2aa8 35%, #1a1028 75%); box-shadow: 0 0 0 2px var(--ink) }
.res.dark .meter i { background: linear-gradient(#c79bff, #5a1e9a) }
.card.darkc { background: linear-gradient(rgba(60, 30, 100, .14), rgba(40, 10, 70, .22)), var(--tx-card, none) #efe2f6; background-size: auto, 256px; box-shadow: 0 4px 0 var(--ink), inset 0 0 0 2px rgba(160, 90, 230, .6), inset 0 3px 0 rgba(255, 255, 255, .6) }

/* ---------- cuenta online ---------- */
.netform { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 }
.netform input { font: 700 16px var(--body); padding: 10px 12px; border: 3px solid var(--ink); border-radius: 12px; background: #fffaf0; color: var(--paper-ink); outline: none }
.netform input:focus { box-shadow: 0 0 0 3px var(--aether) }
.sheet.net .row.center { gap: 10px }

/* ---------- clanes ---------- */
.ic.clan { border-radius: 0; clip-path: polygon(50% 0, 100% 14%, 94% 62%, 50% 100%, 6% 62%, 0 14%); background: linear-gradient(#ff9a7a, #c63a2a) }
.crest { --c: #d8433a; display: inline-grid; place-items: center; flex: none; width: 38px; height: 44px; clip-path: polygon(50% 0, 100% 14%, 94% 62%, 50% 100%, 6% 62%, 0 14%); background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .55), transparent 55%), var(--c); color: #fff; font-size: 20px; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); filter: drop-shadow(0 2px 0 var(--ink)) }
.crest.big { width: 64px; height: 74px; font-size: 34px }
.crests { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center }
.crestpick { background: none; border: 3px solid transparent; border-radius: 12px; padding: 4px; cursor: pointer }
.crestpick[aria-pressed="true"] { border-color: var(--ink); background: #fff3d6 }
.cinput { flex: 1; min-width: 0; font: 700 15px var(--body); padding: 8px 10px; border: 3px solid var(--ink); border-radius: 10px; background: #fffaf0; color: var(--paper-ink) }
label .cinput { width: 90px; flex: none; margin-left: 6px }
.clist { display: flex; flex-direction: column; gap: 8px }
.clancard, .member { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 3px solid var(--ink); border-radius: 14px; background: #fff3d6 }
.member.me { background: #e6f6d6 }
.cinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.cinfo h3 { margin: 0 }
.cside { display: flex; flex-direction: column; align-items: flex-end; gap: 6px }
.mact { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end }
.mrank { font-family: var(--display); font-size: 18px; width: 24px; text-align: center }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #999; border: 2px solid var(--ink); vertical-align: middle }
.dot.on { background: var(--good) }
.chat { display: flex; flex-direction: column; gap: 6px; height: min(48vh, 420px); overflow-y: auto; padding: 8px; border: 3px solid var(--ink); border-radius: 14px; background: rgba(0, 0, 0, .06); -webkit-user-select: text; user-select: text }
.msg { align-self: flex-start; max-width: 85%; padding: 6px 10px; border: 2px solid var(--ink); border-radius: 12px 12px 12px 4px; background: #fffaf0 }
.msg.me { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: #dff1ff }
.msg p { margin: 2px 0; overflow-wrap: anywhere }
.msg .mhead { font-size: 13px }
.msg.sys { align-self: center; background: none; border: none; font-size: 12px; font-weight: 800; color: var(--muted); text-align: center }
.msg.req { width: 85%; background: #fff0c8 }
.msg.req.me { background: #e6f6d6 }
.donors { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px }
.uic.mini { width: 26px; height: 26px; display: inline-block }
.uic.mini canvas { width: 26px; height: 26px }
.donate { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px }
.dbtn { cursor: pointer; padding: 0 }
.chatbar { margin-top: 6px }

/* ---------- campaña ---------- */
.cmap { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; max-height: min(42vh, 360px); overflow-y: auto; padding: 10px; border: 3px solid var(--ink); border-radius: 14px; background: radial-gradient(circle at 30% 20%, #8fc06a, #5f9a44 60%, #4a7a36) }
.cnode { position: relative; aspect-ratio: 1; min-width: 0; border-radius: 50%; border: 3px solid var(--ink); background: radial-gradient(circle at 50% 30%, #fff3d6, #e0c08a); box-shadow: 0 3px 0 var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; font-family: var(--display); color: var(--paper-ink); padding: 0 }
.cnode b { font-size: clamp(12px, 2.4vw, 17px); font-weight: 400; line-height: 1 }
.cnode.done { background: radial-gradient(circle at 50% 30%, #fff6c0, #f5c443) }
.cnode.on { outline: 3px solid #fff; outline-offset: 2px; transform: scale(1.08) }
.cnode.lock { background: radial-gradient(circle at 50% 30%, #c8c0b0, #8a8274); cursor: not-allowed; filter: grayscale(.6) }
.cst { display: flex; gap: 1px; margin-top: 2px }
.cst i { width: 7px; height: 7px; background: rgba(0, 0, 0, .25); clip-path: polygon(50% 0, 63% 35%, 100% 38%, 72% 60%, 80% 100%, 50% 78%, 20% 100%, 28% 60%, 0 38%, 37% 35%) }
.cst i.on { background: #ffb400 }
.campinfo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 14px; background: #fff3d6 }
.campinfo h3 { margin: 0 0 2px }
.campinfo .pill small { opacity: .6; margin-left: 2px }
@media (max-width: 520px) { .cmap { grid-template-columns: repeat(5, 1fr) } .campinfo { flex-direction: column; align-items: stretch } }

/* ---------- repaso del HUD ---------- */
.sqrow { display: flex; gap: 8px; pointer-events: none }
.chip.sq { position: relative; pointer-events: auto; cursor: pointer; flex-direction: column; justify-content: center; gap: 1px; width: 60px; height: 60px; padding: 5px 2px 4px; font-size: 12px; border-radius: 14px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 3px 0 rgba(0, 0, 0, .35) }
.chip.sq .ic { width: 30px; height: 30px }
.chip.sq:active { transform: translateY(2px) }
.chip.sq .badge { top: -8px; right: -8px }
.res .meter { height: 26px; border-radius: 9px; box-shadow: 0 2px 0 rgba(0, 0, 0, .35) }
.res .meter i { box-shadow: inset 0 4px 0 rgba(255, 255, 255, .35), inset 0 -4px 0 rgba(0, 0, 0, .18); border-radius: 0 6px 6px 0 }
.res .ic { width: 38px; height: 38px }
.chip { box-shadow: 0 2px 0 rgba(0, 0, 0, .3) }

/* ---------- ventanas de madera y pergamino (estilo pintado) ---------- */
.sheet { border: 4px solid #3a2414 !important; border-radius: 18px; background: #f6ead0 !important; box-shadow: 0 6px 0 #2a180c, 0 10px 30px rgba(0,0,0,.4), inset 0 0 0 3px #e0c48a !important }
.sheet header { background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 13px, rgba(40,20,8,.35) 13px 15px), linear-gradient(#b0703a, #7a4622) !important; border-bottom: 4px solid #3a2414 !important; box-shadow: inset 0 3px 0 rgba(255,220,160,.35), inset 0 -3px 0 #c8963a; padding: 12px 12px 12px 20px }
.sheet h2 { color: #fff4d6 !important; text-shadow: 0 3px 0 #2a180c, 0 0 3px #2a180c !important; font-size: 28px }
.x { border-radius: 50% !important; border-color: #3a2414 !important; box-shadow: 0 3px 0 #2a180c, inset 0 3px 0 rgba(255,255,255,.35) !important }
.tab { background: linear-gradient(#c9935a, #8a5a2e) !important; color: #fff4d6 !important; border-color: #3a2414 !important; text-shadow: 0 2px 0 #2a180c; box-shadow: 0 3px 0 #2a180c, inset 0 2px 0 rgba(255,220,160,.4) !important }
.tab[aria-selected="true"] { background: linear-gradient(#ffe27a, #e0a21a) !important; color: #4a2a10 !important; text-shadow: 0 1px 0 rgba(255,255,255,.5) }
.card { background: linear-gradient(#fffaf0, #f2e2bc) !important; border-color: #5a3a1e !important; box-shadow: 0 4px 0 #3a2414, inset 0 2px 0 #fff, inset 0 -3px 0 rgba(160,110,50,.25) !important; border-radius: 16px }
.card .cico:not(.tr):not(.sp) { background: radial-gradient(ellipse 46% 28% at 50% 78%, rgba(70,130,30,.9), rgba(110,170,50,.6) 70%, rgba(0,0,0,0) 72%) }
.card b { color: #4a2a10 }
.price { border-color: #2a4a14 !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 2px 0 #1a3008 }
.mbody h3 { color: #6a3a14 !important; font-size: 20px; border-bottom: 2px dashed rgba(106,58,20,.3); padding-bottom: 3px }

/* ---------- entrada a la batalla ---------- */
.bintro { position: fixed; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 15; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 34px 12px; background: linear-gradient(rgba(122, 70, 34, .95), rgba(74, 40, 18, .95)); border: 4px solid #3a2414; border-radius: 18px; box-shadow: 0 6px 0 #2a180c, inset 0 0 0 3px #e0c48a }
.bintro small { font-family: var(--body); font-weight: 800; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #f0d8a8 }
.bintro b { font-family: var(--display); font-weight: 400; font-size: 34px; color: #fff4d6; text-shadow: 0 3px 0 #2a180c; white-space: nowrap }
.bintro span { font-family: var(--display); font-size: 16px; color: #ffd34a; text-shadow: 0 2px 0 #2a180c }
@keyframes bintro { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6) } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.06) } 20% { transform: translate(-50%, -50%) scale(1) } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1) } 100% { opacity: 0; transform: translate(-50%, -64%) scale(.95) } }
body.narrow .tl .chip small { display: none }
body.narrow .tl > .chip { align-self: flex-start }
body.narrow .sqrow { gap: 6px }
body.narrow .chip.sq { width: 50px; height: 50px; font-size: 10.5px; border-radius: 12px }
body.narrow .chip.sq .ic { width: 24px; height: 24px }
.player { pointer-events: auto; cursor: pointer }
/* ---------- ranking y perfil ---------- */
.rlist { display: flex; flex-direction: column; gap: 6px }
.rrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border: 3px solid #5a3a1e; border-radius: 14px; background: linear-gradient(#fffaf0, #f2e2bc); box-shadow: 0 3px 0 #3a2414; text-align: left; cursor: pointer; font: inherit; color: var(--paper-ink) }
.rrow.me { background: linear-gradient(#f0ffd8, #cfe8a8) }
.rrow:active { transform: translateY(2px) }
.rrow .pill { margin-left: auto }
.rpos { width: 30px; text-align: center; font-family: var(--display); font-size: 17px; color: var(--muted) }
.medal { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid #3a2414; font-family: var(--display); font-size: 16px; color: #3a2414; text-shadow: 0 1px 0 rgba(255,255,255,.7) }
.medal.m1 { background: radial-gradient(circle at 35% 30%, #fff6c0, #f5c443 50%, #b07a14) }
.medal.m2 { background: radial-gradient(circle at 35% 30%, #ffffff, #c8ced8 50%, #7d8698) }
.medal.m3 { background: radial-gradient(circle at 35% 30%, #ffe0c0, #d08a4a 50%, #8a4a1a) }
.rlvl, .plv { flex: none; display: grid; place-items: center; width: 32px; height: 32px; background: linear-gradient(#7ad0ff, #2f7fd0); clip-path: polygon(50% 0, 63% 32%, 98% 35%, 72% 58%, 80% 94%, 50% 76%, 20% 94%, 28% 58%, 2% 35%, 37% 32%); font-family: var(--display); font-size: 13px; color: #fff; padding-top: 3px; text-shadow: 0 1px 0 var(--ink) }
.plv { width: 64px; height: 64px; font-size: 24px; padding-top: 6px }
.rname { display: flex; flex-direction: column; min-width: 0 }
.rname b { font-family: var(--display); font-weight: 400; font-size: 17px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rname small { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted) }
.rname small .crest, .prof .crest { width: 16px; height: 19px; font-size: 9px; vertical-align: middle }
.rrow > .crest { width: 30px; height: 35px; font-size: 16px }
.lgdot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #3a2414; flex: none }
.prof { display: flex; flex-direction: column; gap: 12px }
.phead { display: flex; align-items: center; gap: 12px }
.pstats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px }
.pstats div { display: flex; flex-direction: column; align-items: center; padding: 8px 6px; border: 2px solid rgba(90, 58, 30, .4); border-radius: 12px; background: rgba(255, 255, 255, .5) }
.pstats b { font-family: var(--display); font-weight: 400; font-size: 22px; color: #4a2a10 }
.pstats span { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center }

/* ---------- emblemas de liga, ventana de ligas y perfil ---------- */
.lgic { width: 30px; height: 30px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)) }
.chip .lgic { width: 32px; height: 32px; margin: -4px 0 -4px -2px }
.lgbigic { width: 92px; height: 92px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)) }
.lghead { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 16px; background: linear-gradient(#5a6aa0, #3a4678); color: #fff; border: 3px solid #2a2a4a; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2) }
.lghead h3, .pcard h3 { color: #fff !important; font-size: 24px !important; text-shadow: 0 2px 0 #1a1230; border: 0 !important; margin: 0 }
.lghead .note, .pcard .note { color: #d8dcf0 }
.lghead .pill { background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .2); color: #fff }
.lgbonus { margin-left: auto; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; font-family: var(--display); font-size: 17px }
.lgbonus small { font-family: var(--body); font-weight: 800; font-size: 11px; color: #d8dcf0 }
.lgsteps { display: flex; align-items: flex-end; gap: 6px; height: 280px; padding: 46px 10px 10px; border-radius: 16px; background: linear-gradient(#3a3450, #22202e); border: 3px solid #1a1428; overflow-x: auto }
.lgstep { position: relative; flex: 1 0 72px; height: var(--h); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding-top: 4px; border-radius: 10px 10px 4px 4px; background: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); color: #fff; text-align: center }
.lgstep .lgic { width: 58px; height: 58px; margin-top: -34px }
.lgstep b { font-family: var(--display); font-weight: 400; font-size: 15px; text-shadow: 0 2px 0 #000 }
.lgstep span { font-family: var(--display); font-size: 13px; color: #ffd34a; display: flex; align-items: center; gap: 2px }
.lgstep.on { background: linear-gradient(rgba(255, 211, 74, .45), rgba(255, 211, 74, .08)); box-shadow: 0 0 0 2px #ffd34a }
.divs { display: flex; gap: 3px; margin-top: auto; margin-bottom: 6px; font-style: normal }
.divs em { font-style: normal; font-family: var(--display); font-size: 11px; padding: 0 4px; border-radius: 5px; background: rgba(0, 0, 0, .45); color: #aaa }
.divs em.cur { background: #ffd34a; color: #3a2414 }
.pcard { display: grid; grid-template-columns: 1.2fr .8fr 1.1fr; border-radius: 16px; background: linear-gradient(#6a7ab0, #48568c); border: 3px solid #2a2a4a; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25); color: #fff; overflow: hidden }
.pcol { display: flex; flex-direction: column; gap: 10px; padding: 14px; min-width: 0 }
.pcol + .pcol { border-left: 2px solid rgba(20, 20, 50, .35) }
.pmain .plv { width: 70px; height: 70px; font-size: 26px }
.ptag { font-family: var(--display); font-size: 14px; color: #d8dcf0; letter-spacing: .5px }
.pbadges { display: flex; gap: 8px }
.pbadges div { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 12px; background: linear-gradient(#c8463a, #8a2a22); border: 2px solid #2a1414; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3) }
.pbadges div:nth-child(2) { background: linear-gradient(#5a8ae0, #2a5aa8) }
.pbadges div:nth-child(3) { background: linear-gradient(#e8b830, #a87a10) }
.pbadges b { font-family: var(--display); font-weight: 400; font-size: 16px; text-shadow: 0 2px 0 rgba(0, 0, 0, .5) }
.pbadges span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px }
.pclan { align-items: center; justify-content: center; text-align: center }
.pclan .crest.big { width: 90px; height: 104px; font-size: 48px }
.pclan b { font-family: var(--display); font-weight: 400; font-size: 20px; text-shadow: 0 2px 0 #1a1230 }
.plg { display: flex; align-items: center; gap: 8px }
.plg b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px; text-shadow: 0 2px 0 #1a1230 }
.ptroph { display: flex; align-items: center; gap: 4px; font-family: var(--display); font-size: 28px; text-shadow: 0 2px 0 #1a1230 }
.prec { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 10px; background: rgba(20, 20, 50, .35); font-family: var(--display); font-size: 18px }
.prec small { font-family: var(--body); font-weight: 800; font-size: 12px; color: #d8dcf0; margin-right: auto }
.prec span { display: flex; align-items: center; gap: 4px }
.pstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px }
.pstrip div { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 10px; border-radius: 10px; background: linear-gradient(#5a6aa0, #3a4678); color: #fff; font-weight: 800; font-size: 12px }
.pstrip b { font-family: var(--display); font-weight: 400; font-size: 18px; background: rgba(0, 0, 0, .3); padding: 0 8px; border-radius: 6px }
.pcard2 { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; background: linear-gradient(#8a5ad8, #5a34a8); border: 3px solid #2a1a4a; color: #fff }
.phall { display: flex; flex-direction: column; align-items: center; font-family: var(--display); font-size: 15px; flex: none }
.phallic { width: 150px; height: 110px }
.pcard2 .pstats { flex: 1 }
.pcard2 .pstats div { background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .2) }
.pcard2 .pstats b { color: #fff }
.pcard2 .pstats span { color: #e0d8ff }
@media (max-width: 640px) { .pcard { grid-template-columns: 1fr } .pcol + .pcol { border-left: 0; border-top: 2px solid rgba(20, 20, 50, .35) } .pstrip { grid-template-columns: 1fr 1fr } .pcard2 { flex-direction: column } .lghead { flex-wrap: wrap } }

/* ---------- chat lateral ---------- */
.chattab { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 6; width: 44px; height: 76px; border: 3px solid #3a2414; border-left: 0; border-radius: 0 14px 14px 0; background: linear-gradient(90deg, #b0703a, #7a4622); box-shadow: 0 3px 0 #2a180c, inset 0 2px 0 rgba(255, 220, 160, .35); font-size: 22px; cursor: pointer; pointer-events: auto }
.chattab .badge { top: -10px; right: -12px }
body.chatopen .chattab { left: min(420px, 92vw) }
#chatPanel { position: fixed; left: 0; top: 0; bottom: 0; z-index: 18; width: min(420px, 92vw); display: flex; flex-direction: column; background: #f6ead0; border-right: 4px solid #3a2414; box-shadow: 6px 0 24px rgba(0, 0, 0, .4); animation: chIn .18s ease-out; color: var(--paper-ink) }
@keyframes chIn { from { transform: translateX(-100%) } }
#chatPanel header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 10px 10px 12px; background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 13px, rgba(40,20,8,.35) 13px 15px), linear-gradient(#b0703a, #7a4622); border-bottom: 4px solid #3a2414 }
#chatPanel header h2 { margin: 0; font-family: var(--display); font-weight: 400; color: #fff4d6; text-shadow: 0 3px 0 #2a180c }
.chbody { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px }
.chlist { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; -webkit-user-select: text; user-select: text; touch-action: pan-y }
.chbar { display: flex; gap: 6px; padding-bottom: env(safe-area-inset-bottom, 0px) }
.cm { padding: 6px 10px; border-radius: 12px; background: #fffaf0; border: 2px solid rgba(90, 58, 30, .35) }
.cm.me { background: #e6f2ff }
.cm.sys { background: none; border: 0; text-align: center; font-size: 12px; font-weight: 800; color: var(--muted) }
.cm.req { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: #fff0c8 }
.cm p { margin: 2px 0 0; overflow-wrap: anywhere; font-size: 14px }
.cmh { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.cmwho { border: 0; background: none; padding: 0; font-family: var(--display); font-size: 15px; color: #6a3a14; cursor: pointer }
.cmmeta { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; color: var(--muted) }
.cmmeta .crest { width: 13px; height: 15px; font-size: 7px }
.cmmeta .ic { width: 13px; height: 13px }
.cmt { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted) }
.tlrow { display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none }
.tlrow > * { pointer-events: auto }
body.narrow .tlrow .chip { font-size: 14px; padding: 2px 9px 2px 4px }
body.narrow .tlrow .chip .ic { width: 24px; height: 24px }
@media (max-height: 520px) { body.narrow .chattab { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 120px); transform: none; height: 56px } body.narrow .chip.sq { width: 46px; height: 46px } .corner { gap: 6px } }
@media (max-width: 760px) and (min-height: 521px) { .chattab { top: 58% } }
.chip.sq.chatsq > span:first-child { font-size: 20px; line-height: 1 }
body.narrow .chip.sq { width: 46px; height: 46px; font-size: 10px }
@media (max-width: 480px) { .tlrow { flex-direction: column; align-items: flex-start } }

/* ---------- laboratorio con vista previa, resumen de edificios, historial y cuartel ---------- */
.chip.sq .sqi { font-size: 24px; line-height: 1; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)) }
body.narrow .chip.sq .sqi { font-size: 19px }
.sqrow { flex-wrap: wrap; max-width: 340px }
body.narrow .sqrow { max-width: 168px }
@media (max-height: 520px) { body.narrow .sqrow { max-width: 330px } }
.rconf { margin-top: 10px; padding: 12px; border: 3px solid var(--ink); border-radius: 14px; background: #fff3d6 }
.rconf .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.rconf .cinfo { flex: 1; min-width: 160px }
.rconf h3 { margin: 0 0 4px }
.rconf .acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 10px }
.cico.big { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(#bfe0ff, #7ab0e0); flex: none }
.cico.big.sp { background: linear-gradient(#e8c8ff, #a878e0) }
.cico.big canvas { width: 76px !important; height: 76px !important }
table.rstats { margin-top: 8px }
.card.pick { outline: 4px solid #ffb400; outline-offset: 1px }
.ovgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 6px }
.ovcard { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 3px solid var(--ink); border-radius: 12px; background: #fff3d6 }
.ovcard b { font-size: 15px }
.ovlv { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px }
.ovb { font: inherit; font-weight: 800; font-size: 12px; padding: 3px 8px; border: 2px solid var(--ink); border-radius: 8px; background: #bfe0ff; color: var(--ink); cursor: pointer }
.ovb:active { transform: translateY(1px) }
.ovb.busy { background: #ffd98a }
.ovb.max { background: #b8e8a0 }
.ovb.new { background: #fff; border-style: dashed }
.units.mini .unit { width: 40px; height: 40px; border-width: 2px; border-radius: 9px } .units.mini .unit .uic canvas { width: 34px; height: 34px } .units.mini .ucount { font-size: 11px }
.units.mini { gap: 4px; margin-top: 4px }
.unit.dism { cursor: pointer }
.unit.dism::after { content: '×'; position: absolute; top: 2px; right: 2px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: #d8433a; border: 2px solid var(--ink); font-weight: 900; font-size: 13px; line-height: 1; color: #fff }
.unit.dism:active { transform: scale(.94) }
.unit.q, [data-train] { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none }
.card .cico.shico { display: grid; place-items: center; font-size: 56px; line-height: 1; background: none }
.gfxlost { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(20, 16, 30, .75); color: #fff; font-family: var(--display); font-size: 22px; text-shadow: 0 2px 0 #000 }

/* ---------- estrella ganada en batalla ---------- */
.starpop { position: fixed; left: 50%; top: 32%; z-index: 40; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; animation: starpop 1.7s ease-out forwards }
.starpop b { font-size: 64px; line-height: 1; color: #ffd23a; text-shadow: 0 4px 0 #8a5a00, 0 0 24px rgba(255, 210, 58, .8) }
.starpop.gold b { font-size: 76px; color: #fff1a0; text-shadow: 0 4px 0 #8a5a00, 0 0 36px rgba(255, 220, 90, 1) }
.hallflash { position: fixed; inset: 0; z-index: 39; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(255, 244, 192, .85), rgba(255, 200, 80, .35) 45%, rgba(255, 200, 80, 0) 75%); animation: hallflash .9s ease-out forwards }
@keyframes hallflash { from { opacity: 1 } to { opacity: 0 } }
.bump { display: inline-block; animation: bump .35s ease-out }
@keyframes bump { 0% { transform: scale(1) } 35% { transform: scale(1.35); color: #fff1a0 } 100% { transform: scale(1) } }
.starpop span { font-family: var(--display); font-size: 26px; color: #fff; text-shadow: 0 3px 0 #1a1230, 0 0 10px rgba(0, 0, 0, .5) }
@keyframes starpop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) } 25% { transform: translate(-50%, -50%) scale(1) } 80% { opacity: 1 } 100% { opacity: 0; transform: translate(-50%, -70%) scale(1) } }
/* ---------- tutorial: recompensa de cada paso ---------- */
.tutrew { position: fixed; left: 50%; top: 40%; z-index: 41; transform: translate(-50%, -50%); padding: 14px 22px; border: 3px solid var(--ink); border-radius: 16px; background: linear-gradient(#fff4cc, #f5c443); box-shadow: 0 6px 0 rgba(0, 0, 0, .35); text-align: center; pointer-events: none; animation: tutrew 2.2s ease-out forwards }
.tutrew h3 { margin: 0 0 6px; font-family: var(--display); font-size: 24px; color: #5a3a10 }
.tutrew .row { justify-content: center; gap: 8px }
.tutrew i.cf { position: absolute; left: 50%; top: 50%; width: 9px; height: 14px; border-radius: 2px; animation: cf 1.4s ease-out forwards }
@keyframes tutrew { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) } 20% { transform: translate(-50%, -50%) scale(1) } 85% { opacity: 1 } 100% { opacity: 0; transform: translate(-50%, -60%) } }
@keyframes cf { 0% { transform: translate(-50%, -50%) rotate(0) } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)); opacity: 0 } }
#tut .tutface { animation: tutbob 2.4s ease-in-out infinite }
@keyframes tutbob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
@media (prefers-reduced-motion: reduce) { .starpop, .tutrew, #tut .tutface { animation-duration: .01s } }

/* ---------- arranque: splash de Nimora Studio y pantalla de carga ---------- */
#boot { position: fixed; inset: 0; z-index: 100; background: #07050F; transition: opacity .8s; touch-action: none }
#boot.out { opacity: 0; pointer-events: none }
#bootSplash { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(124, 58, 237, .5), rgba(34, 211, 238, .08) 50%, #07050F 75%); cursor: pointer; transition: opacity .7s }
#bootSplash.out { opacity: 0; pointer-events: none }
#bootParts i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #22D3EE; animation: brise linear infinite } #bootParts i.v { background: #C4B5FD }
@keyframes brise { from { transform: translateY(0); opacity: 0 } 20% { opacity: .8 } to { transform: translateY(-46vh); opacity: 0 } }
.nlogo { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 44px); animation: nintro 4.5s ease-in-out forwards }
@keyframes nintro { 0% { opacity: 0; transform: scale(.92) } 15% { opacity: 1; transform: scale(1) } 85% { opacity: 1; transform: scale(1.03) } 100% { opacity: 0; transform: scale(1.05) } }
.nmarkw { position: relative; flex: none; width: clamp(110px, 14.6vw, 280px) }
.nmark { display: block; width: 100% }
.nstar { position: absolute; width: 20%; right: -12%; top: 2%; animation: ntw 4.5s ease-in-out forwards; transform: scale(0) }
@keyframes ntw { 0%, 18% { transform: scale(0) rotate(0) } 26% { transform: scale(1.3) rotate(90deg) } 32%, 100% { transform: scale(1) rotate(90deg) } }
.nname { display: flex; flex-direction: column }
.nname b { font-family: 'Fredoka', var(--display); font-weight: 600; font-size: clamp(56px, 7.3vw, 140px); line-height: 1; color: #F5F3FF }
.nname span { font-family: 'Outfit', var(--body); font-weight: 500; font-size: clamp(16px, 1.9vw, 36px); letter-spacing: .6em; color: #A78BFA; margin-left: .2em }
@media (max-aspect-ratio: 4/5) { .nlogo { flex-direction: column; text-align: center } .nname span { margin-left: .6em } }

#bootLoad { position: absolute; inset: 0; overflow: hidden; background: #0E1630 }
.bootbg { position: absolute; inset: 0; width: 100%; height: 100% }
.bcl { animation: bdrift linear infinite } @keyframes bdrift { from { transform: translateX(-600px) } to { transform: translateX(2200px) } }
.bbob { animation: bbob 6s ease-in-out infinite } @keyframes bbob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
.bship { animation: bship 40s linear infinite } @keyframes bship { from { transform: translate(2050px, 250px) } to { transform: translate(-300px, 170px) } }
.bcr { animation: bcr 3s ease-in-out infinite } @keyframes bcr { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
.btitle { position: absolute; left: 24.5vw; top: max(5vh, 24px); transform: translateX(-50%); margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center }
.btitle span { font-family: 'Cinzel', serif; font-weight: 500; font-size: clamp(15px, 1.6vw, 30px); letter-spacing: .72em; margin-right: -.72em; color: #F5E6C4; opacity: .9 }
.btitle b { font-family: 'Cinzel Decorative', serif; font-weight: 900; font-size: clamp(48px, 5.6vw, 108px); letter-spacing: .07em; line-height: 1.1; background: linear-gradient(#FFF1C1, #E9B44C 55%, #9C6A1E); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(233, 180, 76, .45)) drop-shadow(0 2px 0 #3A2410) }
.btitle i { display: block; width: clamp(200px, 24vw, 460px); height: 14px; margin-top: 6px; background: linear-gradient(90deg, transparent, #E9B44C 8%, #E9B44C 42%, transparent 42%, transparent 58%, #E9B44C 58%, #E9B44C 92%, transparent) center/100% 2px no-repeat; position: relative }
.btitle i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; background: #67E8F9; transform: translate(-50%, -50%) rotate(45deg) }
.bpanel { position: absolute; left: 50%; bottom: max(6vh, 28px); transform: translateX(-50%); width: min(800px, calc(100% - 48px)); display: flex; flex-direction: column; gap: 10px }
#bootTip { margin: 0 0 6px; min-height: 2.6em; display: flex; align-items: flex-end; justify-content: center; text-align: center; font-family: 'Outfit', var(--body); font-size: clamp(15px, 1.35vw, 26px); color: #E8E2F5; transition: opacity .6s; text-shadow: 0 2px 6px rgba(0, 0, 0, .6) }
#bootTip.off { opacity: 0 }
.bbar { height: 18px; border-radius: 9px; background: #0B0A16; border: 2px solid #E9B44C; padding: 2px; box-sizing: border-box }
#bootBar { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, #22D3EE, #A78BFA); box-shadow: 0 0 12px rgba(34, 211, 238, .8) }
.brow { display: flex; justify-content: space-between; align-items: baseline; font-family: 'Cinzel', serif }
.brow span { font-weight: 500; font-size: clamp(12px, 1.05vw, 20px); letter-spacing: .2em; color: #C9BFE0 }
.brow b { font-weight: 800; font-size: clamp(16px, 1.15vw, 22px); color: #E9B44C }
.bseal { position: absolute; right: max(2vw, 16px); bottom: max(2.5vh, 14px); display: flex; align-items: center; gap: 8px; opacity: .85 }
.bseal svg { width: 34px; height: 34px } .bseal span { font-family: 'Fredoka', var(--body); font-weight: 600; font-size: 20px; color: #F5F3FF }
/* móvil en vertical o pantallas estrechas: título centrado arriba y el sello encima de la barra para que nada se recorte */
@media (max-aspect-ratio: 1/1) { .btitle { left: 50%; top: max(7vh, 32px) } .bpanel { bottom: max(9vh, 64px) } .bseal { right: 50%; transform: translateX(50%); bottom: max(2.5vh, 14px) } }
@media (prefers-reduced-motion: reduce) { #bootParts i, .bcl, .bship, .bbob, .bcr { animation: none } }
#bootLoad::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 1; background: linear-gradient(rgba(11, 10, 22, 0), rgba(11, 10, 22, .82)); pointer-events: none }
.btitle, .bpanel, .bseal { z-index: 2 }
/* móvil en horizontal (pantallas bajas): título más pequeño, sello arriba a la derecha y barra más corta */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) { .btitle { top: 10px; left: 22vw } .btitle span { font-size: 3.6vh } .btitle b { font-size: 12vh } .btitle i { width: 30vw; margin-top: 2px } .bpanel { bottom: 12px; width: min(620px, calc(100% - 64px)); gap: 6px } #bootTip { font-size: 14px; min-height: 2.4em; margin: 0 } .bseal { top: 12px; bottom: auto } }
/* ficha de tropa: botón «i» en la tarjeta, retrato y barras comparadas */
.card.troop { position: relative }
.tinfo { position: absolute; top: 6px; left: 6px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8fd4ff, #2f7fd0); color: #fff; font: 800 14px/22px var(--display, sans-serif); text-align: center; border: 2px solid #1a1230; box-shadow: 0 2px 0 rgba(0, 0, 0, .3); cursor: pointer }
.tcard, .hallup { display: grid; grid-template-columns: minmax(150px, 1fr) 1.4fr; gap: 16px; align-items: center }
.tport { background: radial-gradient(circle at 50% 70%, #8fc95a 0 32%, #e8dcc0 33% 100%); border-radius: 14px; border: 2px solid rgba(60, 40, 20, .25); display: flex; justify-content: center; align-items: flex-end; min-height: 200px }
.tport canvas, .tport img { max-width: 100%; height: auto }
.tside { display: flex; flex-direction: column; gap: 8px }
.tbar { display: flex; align-items: center; gap: 8px }
.tbic { width: 28px; text-align: center; font-size: 20px; flex: none }
.tbtrack { position: relative; flex: 1; height: 28px; border-radius: 8px; background: #3a2e4a; border: 2px solid #1a1230; overflow: hidden }
.tbtrack i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#9cf06a, #4fae2e) }
.tbtrack em { position: absolute; top: 0; bottom: 0; background: linear-gradient(#ffe27a, #e8a020); opacity: .9 }
.tbtrack span { position: relative; z-index: 1; display: block; padding: 0 10px; line-height: 24px; font-family: var(--display, sans-serif); font-size: 15px; color: #fff; text-shadow: 0 2px 0 #1a1230; white-space: nowrap }
.trows { width: 100%; border-collapse: collapse; margin-top: 4px }
.trows th { text-align: left; color: #2f5ab8; font-weight: 800; padding: 5px 0; border-bottom: 2px solid rgba(60, 40, 20, .15) }
.trows td { text-align: right; font-weight: 800; padding: 5px 0; border-bottom: 2px solid rgba(60, 40, 20, .15) }
.tdesc { color: #2f5ab8; font-weight: 700; margin: 12px 4px 4px }
/* mejora de la Ciudadela */
.hport { display: flex; flex-direction: column; align-items: center; gap: 6px }
.hport > b { font-family: var(--display, sans-serif); font-size: 20px }
.htime { background: #ffe9a0; border-radius: 10px; padding: 6px 14px; text-align: center; border: 2px solid rgba(60, 40, 20, .2) }
.htime small { display: block; font-size: 12px }
.htime b { font-family: var(--display, sans-serif); font-size: 22px }
.unlocks { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px }
.unl { position: relative; flex: none; width: 104px; border-radius: 12px; background: radial-gradient(circle at 50% 60%, #8fd4ff, #3a8fe0); border: 2px solid #1a1230; display: flex; flex-direction: column; align-items: center; padding: 18px 4px 6px }
.unl small { color: #fff; font-weight: 800; font-size: 11px; text-align: center; text-shadow: 0 1px 0 #1a1230; line-height: 1.15 }
.unltag { position: absolute; top: 4px; left: 6px; font-family: var(--display, sans-serif); color: #fff; text-shadow: 0 2px 0 #1a1230; font-size: 14px }
.unltag.new { color: #fff1a0 }
/* ejércitos guardados */
.armyslot { border: 2px solid rgba(60, 40, 20, .2); border-radius: 12px; padding: 8px 10px; margin: 8px 0; background: rgba(255, 255, 255, .35) }
@media (max-width: 560px) { .tcard, .hallup { grid-template-columns: 1fr } .tport { min-height: 160px } }
.unlocks { min-height: 132px }
.unl { min-height: 124px }
.unl [data-uic] { display: block; height: 72px }
.hallup .hport canvas, .hallup .hport img { max-width: 170px; height: auto }
.unl [data-uic] { width: 92px; height: 70px; overflow: hidden; display: flex; justify-content: center }
.unl [data-uic] canvas, .unl [data-uic] img { width: 92px !important; height: 70px !important; object-fit: contain }
.unl small { margin-top: 4px }

/* chat: botón de denunciar */
.cmrep { margin-left: auto; background: none; border: 0; color: #c9b8e8; font-size: 14px; cursor: pointer; padding: 0 4px; opacity: .55 }
.cmrep:hover { opacity: 1; color: #ff7a6a }

/* diario: racha de 7 días y misiones */
.ddays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 8px 0 }
.dday { background: rgba(255, 255, 255, .06); border: 2px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px }
.dday b { display: flex; align-items: center; gap: 2px }
.dday.got { opacity: .55; border-color: #6ad04a }
.dday.now { border-color: #ffd36a; box-shadow: 0 0 12px rgba(255, 211, 106, .5) }
.dmis { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .05); border-radius: 12px; padding: 8px 10px; margin: 6px 0 }
.dmis.got { opacity: .6 }
.dmt { flex: 1; min-width: 0 } .dmt small { margin-left: 6px; opacity: .8 } .dmt .prog { margin-top: 4px }
.dmr { display: flex; align-items: center; gap: 3px; font-size: 13px; white-space: nowrap }
@media (max-width: 560px) { .ddays { grid-template-columns: repeat(4, 1fr) } .dmr { display: none } }

/* perfil propio: estadísticas detalladas */
.pstats2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px }

/* iconos de recursos: oro (moneda con estrella), éter (cristal), éter abisal (gota oscura) y cristales (gema tallada) */
.ic.gold { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.38' cy='.32' r='.78'%3E%3Cstop offset='0' stop-color='%23fff7c8'/%3E%3Cstop offset='.45' stop-color='%23f7c843'/%3E%3Cstop offset='1' stop-color='%23b5780f'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='27' fill='url(%23g)' stroke='%231a1230' stroke-width='4'/%3E%3Ccircle cx='32' cy='32' r='19.5' fill='none' stroke='%23c98a12' stroke-width='3'/%3E%3Cpath d='M32 18.5l3.9 7.9 8.7 1.3-6.3 6.1 1.5 8.6L32 38.3l-7.8 4.1 1.5-8.6-6.3-6.1 8.7-1.3z' fill='%23ffe58a' stroke='%23b5780f' stroke-width='2' stroke-linejoin='round'/%3E%3Cellipse cx='22' cy='17' rx='7' ry='3.6' fill='%23fff' opacity='.6' transform='rotate(-32 22 17)'/%3E%3C/svg%3E") center / contain no-repeat; box-shadow: none; border-radius: 0; transform: none; clip-path: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)) }
.ic.aether { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23eafdff'/%3E%3Cstop offset='.5' stop-color='%234fe3f2'/%3E%3Cstop offset='1' stop-color='%232f6fd8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M32 3 47 17v28L32 61 17 45V17z' fill='url(%23a)' stroke='%231a1230' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M32 3v58M17 17l15 9 15-9M17 45l15-7 15 7' fill='none' stroke='%23fff' stroke-opacity='.55' stroke-width='2'/%3E%3Cpath d='M21 19l7 4v17l-7 3z' fill='%23fff' opacity='.5'/%3E%3C/svg%3E") center / contain no-repeat; box-shadow: none; border-radius: 0; transform: none; clip-path: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)) }
.ic.dark { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='d' cx='.42' cy='.5' r='.72'%3E%3Cstop offset='0' stop-color='%23f2c0ff'/%3E%3Cstop offset='.38' stop-color='%238a3ae0'/%3E%3Cstop offset='1' stop-color='%231e0a3a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M32 3C41 18 53 28 53 41a21 21 0 0 1-42 0C11 28 23 18 32 3z' fill='url(%23d)' stroke='%231a1230' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M23 42c3-7 12-9 16-3' fill='none' stroke='%23f6d8ff' stroke-width='3.2' stroke-linecap='round' opacity='.85'/%3E%3Ccircle cx='25' cy='28' r='4.2' fill='%23fff' opacity='.55'/%3E%3C/svg%3E") center / contain no-repeat; box-shadow: none; border-radius: 0; transform: none; clip-path: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)) }
.ic.gems { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe2fb'/%3E%3Cstop offset='.5' stop-color='%23d46bff'/%3E%3Cstop offset='1' stop-color='%236a1fb8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M16 9h32l13 15-29 35L3 24z' fill='url(%23m)' stroke='%231a1230' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M3 24h58M16 9l8 15 8-15 8 15 8-15M24 24l8 35 8-35' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M18 12l5 10H10z' fill='%23fff' opacity='.55'/%3E%3C/svg%3E") center / contain no-repeat; box-shadow: none; border-radius: 0; transform: none; clip-path: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)) }
.res .ic.aether, .res .ic.gems { width: 28px; height: 28px; margin-left: -8px }