@font-face { font-family: Lilita; src: url(assets/fonts/lilita.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Nunito; src: url(assets/fonts/nunito-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Nunito; src: url(assets/fonts/nunito-900.woff2) format('woff2'); font-weight: 900; font-display: swap; }

:root {
  --ink: #1b1530; --panel: #2a2250; --panel2: #382d6e; --line: #4b3f8a;
  --yellow: #ffd23a; --yellow2: #e0a800; --pink: #ff6fa8; --cyan: #4fd8ff; --green: #5dff8a; --red: #ff4d6d;
  --text: #fff8e8; --muted: #b9b0de;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--text); font-family: Nunito, system-ui, sans-serif; font-weight: 700; user-select: none; -webkit-user-select: none; touch-action: none; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
canvas#overlay { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.hidden { display: none !important; }
h2, h3, .btn, .logo, .timer, .lvl-title { font-family: Lilita, Nunito, sans-serif; font-weight: 400; letter-spacing: .5px; }
h2 { font-size: 30px; margin: 0; }
h3 { font-size: 20px; margin: 18px 0 8px; color: var(--yellow); }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
a { color: var(--yellow); }

/* ── Botones ── */
.btn {
  font-size: 20px; color: var(--text); background: var(--panel2); border: 3px solid var(--ink); border-radius: 16px;
  padding: 12px 22px; cursor: pointer; box-shadow: 0 5px 0 var(--ink), inset 0 -4px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.12);
  transition: transform .08s, box-shadow .08s, filter .15s; position: relative;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink), inset 0 -4px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.12); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink), inset 0 -2px 0 rgba(0,0,0,.18); }
.btn.yellow { background: var(--yellow); color: var(--ink); }
.btn.danger { background: #a3324f; }
.btn.big { font-size: 28px; padding: 14px 30px; }
.btn.small { font-size: 16px; padding: 8px 14px; border-radius: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.6); transform: none; }
.iconbtn { width: 46px; height: 46px; border-radius: 14px; border: 3px solid var(--ink); background: var(--panel2); color: var(--text); font-size: 20px; cursor: pointer; box-shadow: 0 4px 0 var(--ink); }

/* ── Paneles y pantallas ── */
.screen { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 18px; }
.screen.dim { background: rgba(18, 12, 40, .62); backdrop-filter: blur(3px); }
.panel { background: var(--panel); border: 4px solid var(--ink); border-radius: 24px; padding: 22px 26px; box-shadow: 0 10px 0 var(--ink), 0 20px 50px rgba(0,0,0,.4); width: min(460px, 100%); max-height: calc(100vh - 36px); overflow: auto; }
.panel.wide { width: min(880px, 100%); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar.inner { margin-bottom: 10px; }
.screen > .topbar { position: absolute; top: 16px; left: 18px; right: 18px; }
.col { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.row-btns { display: flex; gap: 12px; justify-content: center; margin-top: 18px; }
.coins { font-family: Lilita, sans-serif; font-size: 20px; background: var(--ink); padding: 6px 14px; border-radius: 999px; color: var(--yellow); }

/* ── Logo ── */
.logo { display: flex; flex-direction: column; line-height: .85; transform: rotate(-4deg); animation: bob 2.4s ease-in-out infinite; }
.logo span { font-size: clamp(64px, 9vw, 112px); color: var(--yellow); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 7px 0 var(--ink), 0 12px 24px rgba(0,0,0,.35); }
.logo span:last-child { color: var(--pink); margin-left: 34px; }
.logo.small span { font-size: 56px; }
@keyframes bob { 50% { transform: rotate(-2deg) translateY(-6px); } }

#loading { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--ink); gap: 20px; transition: opacity .5s; }
#loading p { color: var(--muted); }

/* ── Menú ── */
#menu { justify-content: flex-start; align-items: stretch; padding: 0; }
.menu-side { width: min(460px, 100%); padding: 6vh 40px; display: flex; flex-direction: column; gap: 22px; background: linear-gradient(90deg, rgba(27,21,48,.92) 55%, rgba(27,21,48,0)); }
.tagline { font-size: 18px; max-width: 330px; margin: 0; text-shadow: 0 2px 0 var(--ink); }
.menu-bottom { display: flex; flex-direction: column; gap: 18px; }
.menu-top { display: flex; flex-direction: column; gap: 18px; }
.menu-buttons { display: flex; flex-direction: column; gap: 10px; max-width: 300px; }
.menu-buttons .btn:not(.big) { padding: 9px 22px; font-size: 18px; }
.menu-stats { color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.menu-stats span { background: rgba(0,0,0,.25); padding: 5px 10px; border-radius: 10px; }
.credits { position: absolute; right: 18px; bottom: calc(12px + var(--safe-b)); color: var(--muted); font-size: 13px; text-shadow: 0 1px 0 var(--ink); }

/* ── Selección ── */
#select { align-items: flex-end; justify-content: flex-start; padding: 80px 24px calc(24px + var(--safe-b)); }
.select-layout { display: flex; width: 100%; gap: 22px; align-items: flex-end; justify-content: space-between; }
.detail { width: min(400px, 100%); overflow: hidden; }
.dscroll { max-height: calc(100vh - 140px); overflow-y: auto; }
.detail .dname { font-family: Lilita, sans-serif; font-size: 34px; display: flex; align-items: center; gap: 10px; }
.evo-line { color: var(--muted); font-size: 14px; margin: 2px 0 10px; }
.stat { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 8px; margin: 6px 0; font-size: 14px; }
.stat .bar { height: 10px; background: var(--ink); border-radius: 6px; overflow: hidden; }
.stat .bar i { display: block; height: 100%; background: var(--yellow); border-radius: 6px; }
.feat { background: var(--panel2); border-radius: 14px; padding: 10px 12px; margin-top: 10px; font-size: 14px; }
.feat b { color: var(--yellow); }
.select-bottom { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; width: min(520px, 100%); }
.cards { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.ccard { width: 108px; padding: 12px 8px 10px; border-radius: 18px; background: var(--panel); border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--ink); cursor: pointer; text-align: center; transition: transform .12s; position: relative; }
.ccard:hover { transform: translateY(-4px); }
.ccard.on { border-color: var(--yellow); box-shadow: 0 6px 0 var(--ink), 0 0 0 3px var(--yellow); transform: translateY(-6px); }
.ccard .cicon { font-size: 36px; width: 60px; height: 60px; margin: 0 auto 6px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--ink); }
.ccard .cname { font-family: Lilita, sans-serif; font-size: 17px; }
.ccard .ctype { font-size: 11px; color: var(--muted); }
.ccard.locked .cicon { filter: grayscale(1) brightness(.5); }
.ccard .lock { position: absolute; top: 6px; right: 8px; font-size: 16px; }
.mode-toggle { display: flex; background: var(--ink); border-radius: 14px; padding: 4px; gap: 4px; }
.mode-toggle button { font-family: Lilita, sans-serif; font-size: 17px; color: var(--muted); background: none; border: 0; padding: 8px 16px; border-radius: 10px; cursor: pointer; }
.mode-toggle button.on { background: var(--yellow); color: var(--ink); }
.mode-toggle button:disabled { opacity: .5; cursor: not-allowed; }
.mode-toggle .tlbl { align-self: center; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 0 4px 0 6px; }
.mode-toggle button i { font-style: normal; }
.mode-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.diff-toggle button { padding: 8px 11px; }
.diff-hint { margin: -4px 0 0; font-size: 13px; color: #fff; text-shadow: 0 1px 2px #000a; text-align: right; min-height: 1em; }
.diff-hint.center { text-align: center; text-shadow: none; color: var(--muted); }
.diff-hint b { color: var(--yellow); }
.type-pill { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 999px; color: var(--ink); font-weight: 900; border: 2px solid var(--ink); }

/* ── Tienda ── */
.shop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 12px; }
.sitem { background: var(--panel2); border-radius: 16px; padding: 12px; display: grid; grid-template-columns: 44px 1fr; gap: 4px 10px; align-items: center; border: 3px solid var(--ink); }
.sitem .sicon { font-size: 28px; grid-row: span 2; text-align: center; }
.sitem .sname { font-family: Lilita, sans-serif; font-size: 18px; }
.sitem .sdesc { font-size: 13px; color: var(--muted); }
.sitem .pips { display: flex; gap: 4px; grid-column: 2; }
.sitem .pips i { width: 16px; height: 8px; border-radius: 4px; background: var(--ink); }
.sitem .pips i.on { background: var(--yellow); }
.sitem button { grid-column: 1 / -1; margin-top: 6px; }

.code-box { margin-top: 18px; background: var(--ink); border-radius: 16px; padding: 12px 14px; border: 3px dashed var(--line); }
.code-box label { font-family: Lilita, sans-serif; font-size: 17px; color: var(--yellow); }
.code-row { display: flex; gap: 8px; margin-top: 8px; }
.code-row input { flex: 1; min-width: 0; font: 900 16px Nunito, sans-serif; color: var(--text); background: var(--panel2); border: 3px solid var(--line); border-radius: 12px; padding: 8px 12px; outline: none; user-select: text; -webkit-user-select: text; letter-spacing: 1px; }
.code-row input:focus { border-color: var(--yellow); }
.code-msg { margin: 8px 0 0; font-size: 14px; min-height: 1em; }
.code-msg.ok { color: var(--green); }
.code-msg.bad { color: var(--red); }
.code-box.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ── Cómo jugar ── */
.howto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.keys { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; font-size: 15px; }
kbd { font-family: Lilita, sans-serif; background: var(--ink); border-radius: 7px; padding: 2px 8px; border-bottom: 3px solid #000; font-size: 13px; color: var(--yellow); }
.tchart { border-collapse: collapse; font-size: 13px; width: 100%; }
.tchart th, .tchart td { padding: 5px; text-align: center; border: 2px solid var(--ink); }
.tchart th { background: var(--panel2); font-size: 18px; }
.tchart td.s { background: #2f7a3a; color: #c9ffd6; }
.tchart td.w { background: #5a2a3a; color: #ffc4d2; }
.tchart td.n { background: #3a2a2a; color: #ff9aa9; }
.tchart td.e { color: var(--muted); }

/* ── Ajustes ── */
.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 2px solid var(--panel2); font-size: 16px; }
input[type=range] { accent-color: var(--yellow); width: 55%; }
input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--yellow); }
select { font-family: Nunito; font-weight: 900; background: var(--ink); color: var(--text); border: 2px solid var(--line); border-radius: 10px; padding: 6px 10px; }
#btnReset { margin-top: 14px; }

/* ── HUD ── */
#hud { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
#hud button { pointer-events: auto; }
.xpbar { position: absolute; top: 0; left: 0; right: 0; height: 16px; background: rgba(27,21,48,.85); border-bottom: 3px solid var(--ink); }
.xpfill { height: 100%; width: 0; background: linear-gradient(90deg, #4fd8ff, #8f7dff); transition: width .15s; box-shadow: inset 0 -4px 0 rgba(0,0,0,.2); }
.xpbar span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-family: Lilita, sans-serif; font-size: 13px; line-height: 16px; text-shadow: 0 1px 0 var(--ink); }
.hud-tl { position: absolute; top: 26px; left: 14px; display: flex; gap: 10px; align-items: center; }
.portrait { width: 58px; height: 58px; border-radius: 50%; border: 4px solid var(--ink); display: grid; place-items: center; font-size: 30px; box-shadow: 0 4px 0 var(--ink); }
.pname { font-family: Lilita, sans-serif; font-size: 18px; text-shadow: 0 2px 0 var(--ink); }
.hpbar { width: 220px; height: 22px; background: var(--ink); border-radius: 12px; border: 3px solid var(--ink); position: relative; overflow: hidden; }
.hpfill { height: 100%; width: 100%; background: linear-gradient(#7dff9d, #2fd36a); border-radius: 8px; transition: width .15s; }
.hpfill.low { background: linear-gradient(#ff8a9d, #ff3b5c); }
.hpbar span { position: absolute; inset: 0; text-align: center; font-size: 13px; line-height: 16px; text-shadow: 0 1px 0 var(--ink); }
.hud-tc { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); text-align: center; }
.timer { font-size: 38px; text-shadow: 0 3px 0 var(--ink); line-height: 1; }
.mods-badge { margin-top: 6px; display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(155, 61, 255, 0.85); color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 2px 0 var(--ink); }
.hud-tc .sub { display: flex; gap: 14px; justify-content: center; font-size: 14px; text-shadow: 0 2px 0 var(--ink); margin-top: 2px; }
#nextBoss { color: #ffb0b0; }
.bossbar { margin-top: 8px; width: min(440px, 70vw); }
.bname { font-family: Lilita, sans-serif; font-size: 18px; text-shadow: 0 2px 0 var(--ink); }
.bbar { height: 16px; background: var(--ink); border-radius: 10px; border: 3px solid var(--ink); overflow: hidden; }
.bfill { height: 100%; width: 100%; background: linear-gradient(#ff8a5c, #ff3b3b); transition: width .15s; }
.hud-tr { position: absolute; top: 28px; right: 14px; display: flex; gap: 10px; align-items: center; }
.hud-bl { position: absolute; left: 14px; bottom: calc(14px + var(--safe-b)); display: flex; flex-direction: column; gap: 6px; }
.slots { display: flex; gap: 6px; flex-wrap: wrap; max-width: 290px; }
.slot { width: 50px; height: 50px; border-radius: 14px; border: 3px solid var(--ink); background: rgba(42,34,80,.9); display: grid; place-items: center; font-size: 24px; position: relative; box-shadow: 0 3px 0 var(--ink); }
.slot .lv { position: absolute; bottom: -5px; right: -5px; font-family: Lilita, sans-serif; font-size: 12px; background: var(--yellow); color: var(--ink); border-radius: 8px; padding: 0 5px; border: 2px solid var(--ink); }
.slot.empty { opacity: .35; }
.slots.small .slot { width: 36px; height: 36px; font-size: 17px; border-radius: 10px; }
.hud-br { position: absolute; right: 18px; bottom: calc(18px + var(--safe-b)); display: flex; align-items: flex-end; gap: 14px; }
.ultbtn { width: 86px; height: 86px; border-radius: 50%; border: 4px solid var(--ink); background: var(--panel); position: relative; cursor: pointer; box-shadow: 0 5px 0 var(--ink); padding: 0; }
.ultring { position: absolute; inset: 4px; border-radius: 50%; background: conic-gradient(var(--yellow) 0%, transparent 0%); opacity: .9; }
.ulticon { position: relative; font-size: 34px; filter: grayscale(.8) brightness(.7); }
.ultkey { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font-family: Lilita, sans-serif; font-size: 13px; background: var(--ink); color: var(--yellow); border-radius: 8px; padding: 0 7px; }
.ultbtn.ready { animation: pulse 0.8s ease-in-out infinite; }
.ultbtn.ready .ulticon { filter: none; }
@keyframes pulse { 50% { transform: scale(1.08); box-shadow: 0 5px 0 var(--ink), 0 0 24px var(--yellow); } }
.touchbtns { display: none; flex-direction: column; gap: 12px; }
.tbtn { width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--ink); background: var(--panel2); font-size: 26px; color: var(--text); box-shadow: 0 4px 0 var(--ink); position: relative; overflow: hidden; padding: 0; }
.cdmask { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0,0,0,.55); }
body.touch .touchbtns { display: flex; }
body.touch .ultkey, body.touch .hint { display: none; }
.hint { position: absolute; bottom: calc(14px + var(--safe-b)); left: 50%; transform: translateX(-50%); font-size: 13px; color: var(--text); background: rgba(27,21,48,.7); padding: 6px 14px; border-radius: 999px; white-space: nowrap; transition: opacity 1s; }

#banner { position: absolute; top: 22%; left: 50%; transform: translate(-50%, -50%) scale(.6); text-align: center; opacity: 0; transition: opacity .25s, transform .35s cubic-bezier(.2,1.6,.4,1); }
#banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#banner .btitle { font-family: Lilita, sans-serif; font-size: clamp(34px, 6vw, 60px); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); white-space: nowrap; }
#banner .bsub { font-size: 17px; text-shadow: 0 2px 0 var(--ink); margin-top: 4px; }

#vignette { position: fixed; inset: 0; pointer-events: none; z-index: 7; box-shadow: inset 0 0 160px 40px rgba(255,40,70,.0); transition: box-shadow .4s; }
#vignette.hurt { box-shadow: inset 0 0 160px 40px rgba(255,40,70,.55); transition: none; }
#vignette.low { box-shadow: inset 0 0 140px 30px rgba(255,40,70,.3); }
#flash { position: fixed; inset: 0; pointer-events: none; z-index: 8; background: #fff; opacity: 0; transition: opacity .6s; }
#flash.on { opacity: .85; transition: none; }

#joystick { position: fixed; width: 130px; height: 130px; border-radius: 50%; border: 4px solid rgba(255,255,255,.35); background: rgba(27,21,48,.35); transform: translate(-50%, -50%); z-index: 6; pointer-events: none; display: none; }
#joystick.on { display: block; }
#joyKnob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.75); border: 4px solid var(--ink); transform: translate(-50%, -50%); }

/* ── Cartas de mejora ── */
.lvl-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.lvl-title { font-size: clamp(40px, 7vw, 64px); color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); margin: 0; animation: bob 2s ease-in-out infinite; }
.upcards { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.upcard { --rc: #9fb3c8; width: 220px; min-height: 270px; background: var(--panel); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 8px 0 var(--ink), 0 0 0 3px var(--rc) inset; padding: 16px 14px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .12s; position: relative; animation: cardIn .35s cubic-bezier(.2,1.5,.4,1) backwards; }
.upcard:nth-child(2) { animation-delay: .06s; } .upcard:nth-child(3) { animation-delay: .12s; } .upcard:nth-child(4) { animation-delay: .18s; }
@keyframes cardIn { from { transform: translateY(40px) scale(.8); opacity: 0; } }
.upcard:hover { transform: translateY(-8px) rotate(-1deg); }
.upcard .rar { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: var(--rc); }
.upcard .uicon { width: 76px; height: 76px; border-radius: 22px; border: 4px solid var(--ink); display: grid; place-items: center; font-size: 40px; background: var(--panel2); }
.upcard .uname { font-family: Lilita, sans-serif; font-size: 22px; line-height: 1.05; }
.upcard .ulvl { font-size: 13px; color: var(--muted); }
.upcard .ulvl b { color: var(--green); }
.upcard .udesc { font-size: 15px; margin-top: auto; }
.upcard .new { position: absolute; top: -12px; right: -10px; background: var(--pink); color: var(--ink); font-family: Lilita, sans-serif; padding: 2px 10px; border-radius: 10px; border: 3px solid var(--ink); transform: rotate(8deg); }
.upcard .key { position: absolute; top: 8px; left: 10px; font-family: Lilita, sans-serif; font-size: 13px; color: var(--muted); }
.upcard.legend { animation: cardIn .35s backwards, shine 1.6s linear infinite; }
@keyframes shine { 50% { box-shadow: 0 8px 0 var(--ink), 0 0 0 3px var(--rc) inset, 0 0 30px var(--rc); } }

/* ── Pausa y fin ── */
.build { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; justify-content: center; }
.build .slot { width: 44px; height: 44px; font-size: 22px; }
.end-title { font-size: 48px; color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); }
.end-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.end-stats div { background: var(--panel2); border-radius: 14px; padding: 10px; text-align: center; }
.end-stats b { display: block; font-family: Lilita, sans-serif; font-size: 26px; font-weight: 400; color: var(--yellow); }
.dmgrow { display: grid; grid-template-columns: 28px 110px 1fr 60px; gap: 8px; align-items: center; font-size: 14px; margin: 5px 0; }
.dmgrow .bar { height: 10px; border-radius: 6px; background: var(--ink); overflow: hidden; }
.dmgrow .bar i { display: block; height: 100%; }
.dmgrow span:last-child { text-align: right; color: var(--muted); }
.unlock { background: linear-gradient(90deg, #ffd23a, #ff6fa8); color: var(--ink); border-radius: 14px; padding: 10px; text-align: center; font-family: Lilita, sans-serif; font-size: 20px; margin-top: 10px; border: 3px solid var(--ink); }

/* ── Fases, portal, toasts ── */
.hud-tc .phase { font-family: Lilita, sans-serif; font-size: 15px; background: rgba(27,21,48,.75); padding: 2px 12px; border-radius: 999px; display: inline-block; margin-bottom: 2px; text-shadow: 0 1px 0 var(--ink); }
#fade { position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: 0; transition: opacity .6s; background: radial-gradient(circle, #f2e8ff 0%, #7a5cff 55%, #1b1530 100%); }
#fade.on { opacity: 1; }
#toasts { position: fixed; top: 88px; right: 14px; z-index: 40; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { display: flex; gap: 10px; align-items: center; background: var(--panel); border: 3px solid var(--ink); border-radius: 16px; padding: 8px 14px 8px 8px; box-shadow: 0 5px 0 var(--ink), 0 0 0 2px var(--yellow) inset; animation: toastIn .4s cubic-bezier(.2,1.5,.4,1); transition: opacity .5s, transform .5s; max-width: 320px; }
.toast.out { opacity: 0; transform: translateX(40px); }
.toast .ticon { font-size: 30px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--ink); border-radius: 12px; }
.toast .tt { font-family: Lilita, sans-serif; font-size: 16px; color: var(--yellow); }
.toast .ts { font-size: 13px; }
@keyframes toastIn { from { transform: translateX(60px) scale(.8); opacity: 0; } }

/* ── Tienda con pestañas ── */
.tabs { display: flex; gap: 6px; background: var(--ink); padding: 4px; border-radius: 14px; margin: 4px 0 10px; }
.tabs button { flex: 1; font-family: Lilita, sans-serif; font-size: 16px; color: var(--muted); background: none; border: 0; padding: 8px 6px; border-radius: 10px; cursor: pointer; }
.tabs button.on { background: var(--yellow); color: var(--ink); }
.shop-head { grid-column: 1 / -1; margin: 6px 0 0; }
.sitem.unique { border-color: #8a6a00; background: linear-gradient(135deg, var(--panel2), #4a3a1a); }
.sitem .how, .feat.how { color: var(--yellow); }
.cicon.mini { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink); display: grid; place-items: center; font-size: 22px; margin: 0 auto; }
.swatch { display: block; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--ink); margin: 0 auto; }

/* ── Aspecto en la selección ── */
.looks { background: rgba(27,21,48,.82); border: 3px solid var(--ink); border-radius: 16px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.looks-row { display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.looks-row .lbl { font-size: 18px; flex: none; }
.chip { flex: none; width: 38px; height: 38px; border-radius: 12px; border: 3px solid var(--ink); background: var(--panel2); cursor: pointer; padding: 0; position: relative; display: grid; place-items: center; font-size: 20px; }
.chip i { width: 24px; height: 24px; border-radius: 50%; display: block; border: 2px solid rgba(0,0,0,.4); }
.chip.on { border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow); }
.chip.locked > i, .chip.locked > span { filter: grayscale(.5) brightness(.6); }
.chip b { position: absolute; right: -6px; top: -7px; font-size: 11px; font-weight: 400; }
.look-buy { display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: 13px; }
.select-bottom .cards { flex-wrap: nowrap; overflow-x: auto; max-width: 520px; padding: 10px 4px 12px; justify-content: flex-start; scrollbar-width: thin; }
.select-bottom .ccard { flex: none; width: 92px; padding: 10px 6px 8px; }
.select-bottom .ccard .cicon { width: 50px; height: 50px; font-size: 28px; }
.select-bottom .ccard .cname { font-size: 15px; }
.looks { max-width: 520px; }
.ccard.unique { background: linear-gradient(160deg, var(--panel), #4a3a1a); }
.ccard.secret, .sitem.secret { background: linear-gradient(160deg, var(--panel), #14404a); }
.sitem.secret { border-color: #2a8a9a; }

/* ── Trofeos ── */
.tsum { margin: 4px 0 12px; }
.trophy-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.trophy { display: flex; gap: 10px; background: var(--panel2); border: 3px solid var(--ink); border-radius: 16px; padding: 10px; opacity: .85; }
.trophy.done { opacity: 1; background: linear-gradient(135deg, #4a3a1a, var(--panel2)); border-color: #8a6a00; }
.trophy .ticon { font-size: 30px; width: 48px; height: 48px; flex: none; display: grid; place-items: center; background: var(--ink); border-radius: 12px; filter: grayscale(.8); }
.trophy.done .ticon { filter: none; box-shadow: 0 0 14px rgba(255,210,58,.5); }
.trophy .tbody { flex: 1; min-width: 0; }
.trophy .tname { font-family: Lilita, sans-serif; font-size: 17px; }
.trophy .tdesc { font-size: 13px; color: var(--muted); }
.trophy .tbar { position: relative; height: 16px; background: var(--ink); border-radius: 8px; overflow: hidden; margin: 6px 0 4px; }
.trophy .tbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ffd23a, #ff6fa8); }
.trophy .tbar span { position: relative; display: block; text-align: center; font-size: 11px; line-height: 16px; text-shadow: 0 1px 0 var(--ink); }
.trophy .treward { font-size: 12px; color: var(--yellow); }
.tgot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--panel2); border-radius: 12px; padding: 8px 10px; margin: 6px 0; font-size: 14px; }
.tgot span { color: var(--yellow); font-size: 13px; }

/* ── Evoluciones ── */
.evorow { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; font-size: 13px; background: var(--panel2); border-radius: 10px; padding: 6px 10px; margin: 4px 0; }
.evorow b { color: var(--yellow); }
#phaseList .evorow { grid-template-columns: 1fr auto; }
.slot.evo { border-color: #ffc531; box-shadow: 0 3px 0 var(--ink), 0 0 12px rgba(255,197,49,.6); }
.slot.evo .lv { background: #ff6fa8; }
.upcard.evolve { background: linear-gradient(160deg, var(--panel), #5a3a10); }
.upcard .new.evo { background: var(--yellow); }
.evohints { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.evohint { font-size: 12px; color: var(--muted); background: var(--ink); border-radius: 8px; padding: 4px 8px; }
.evohint.ready { color: var(--yellow); }
.end-stats .wide { grid-column: 1 / -1; }

/* ── Versión Alpha y novedades ── */
.alpha-badge { align-self: flex-start; font-family: Lilita, sans-serif; font-size: 14px; letter-spacing: 1px; color: var(--ink); background: linear-gradient(90deg, #4fd8ff, #b46bff); border: 3px solid var(--ink); border-radius: 999px; padding: 3px 12px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; transform: rotate(-3deg); margin-top: -6px; }
.alpha-badge.static { cursor: default; transform: none; margin: 0; font-size: 13px; }
#loading .alpha-badge { align-self: center; margin-top: -10px; cursor: default; }
.btn .newsdot { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--pink); border: 3px solid var(--ink); }
.alpha-note { background: #14404a; border: 3px dashed #2a8a9a; border-radius: 14px; padding: 10px 12px; font-size: 14px; margin: 4px 0 12px; }
.clver { background: var(--panel2); border: 3px solid var(--ink); border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; }
.clver.current { border-color: var(--yellow); }
.clhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.clhead b { font-family: Lilita, sans-serif; font-weight: 400; font-size: 19px; }
.vtag { font-family: Lilita, sans-serif; background: var(--ink); color: var(--yellow); border-radius: 8px; padding: 2px 8px; font-size: 14px; }
.clsec h4 { margin: 8px 0 4px; font-size: 14px; }
.clsec.add h4 { color: var(--green); } .clsec.chg h4 { color: var(--cyan); } .clsec.fix h4 { color: #ffb02e; }
.clsec ul { margin: 0; padding-left: 20px; font-size: 14px; display: grid; gap: 3px; }

/* ── Responsive ── */
@media (min-width: 761px) and (max-height: 820px) {
  .menu-side { padding: 3vh 40px; gap: 14px; }
  .menu-side .logo span { font-size: 78px; }
  .menu-top, .menu-bottom { gap: 12px; }
  .menu-buttons .btn.big { font-size: 24px; padding: 10px 26px; }
}
@media (max-width: 760px) {
  .menu-side { width: 100%; height: 100%; padding: 4vh 20px calc(40px + var(--safe-b)); justify-content: space-between; gap: 10px; background: linear-gradient(180deg, rgba(27,21,48,.85) 0%, rgba(27,21,48,0) 32%, rgba(27,21,48,0) 55%, rgba(27,21,48,.85) 80%); }
  .menu-side .logo span { font-size: 64px; }
  .tagline { font-size: 15px; }
  .menu-top { display: flex; flex-direction: column; gap: 10px; }
  .menu-buttons { max-width: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .menu-buttons .btn.big { grid-column: 1 / -1; }
  .menu-buttons .btn:last-child:nth-child(even) { grid-column: 1 / -1; }
  .menu-buttons .btn:not(.big) { font-size: 14px; padding: 10px 4px; }
  .menu-stats { font-size: 12px; justify-content: center; }
  #menu { align-items: stretch; }
  .screen > .topbar h2 { font-size: 22px; }
  body.touch .hud-br { flex-direction: column-reverse; align-items: center; gap: 10px; }
  body.touch .touchbtns { flex-direction: row; }
  body.touch .tbtn { width: 58px; height: 58px; }
  #select { padding: 70px 12px calc(12px + var(--safe-b)); }
  .select-layout { flex-direction: column; align-items: stretch; gap: 10px; }
  .detail { width: 100%; padding: 12px 14px; font-size: 13px; }
  .dscroll { max-height: 19vh; }
  .detail .stat { margin: 3px 0; }
  .detail .dname { font-size: 26px; }
  .select-bottom { align-items: stretch; width: 100%; }
  .mode-row { justify-content: center; gap: 6px; }
  .mode-toggle .tlbl { display: none; }
  .mode-toggle button { font-size: 15px; padding: 6px 10px; }
  .diff-toggle button i { display: none; }
  .diff-hint { text-align: center; font-size: 12px; }
  .mode-toggle button { padding: 6px 8px; }
  .select-bottom .cards { gap: 8px; padding: 8px 2px 10px; max-width: none; }
  .select-bottom .ccard { width: 76px; }
  .looks { max-width: none; padding: 6px 8px; }
  .chip { width: 34px; height: 34px; }
  #toasts { top: 120px; left: 50%; right: auto; transform: translateX(-50%); }
  .trophy-list { grid-template-columns: 1fr; }
  .ccard { width: 76px; padding: 8px 4px; }
  .ccard .cicon { width: 44px; height: 44px; font-size: 26px; }
  .ccard .cname { font-size: 14px; }
  .howto-grid { grid-template-columns: 1fr; }
  .hpbar { width: 140px; }
  .portrait { width: 46px; height: 46px; font-size: 24px; }
  .timer { font-size: 28px; }
  .hud-tc { top: 72px; }
  .slot { width: 40px; height: 40px; font-size: 19px; }
  .slots.small .slot { width: 30px; height: 30px; font-size: 14px; }
  .upcard { width: calc(50% - 10px); min-height: 200px; padding: 12px 8px; }
  .upcard .uicon { width: 56px; height: 56px; font-size: 30px; }
  .upcard .uname { font-size: 18px; }
  .upcards { gap: 10px; }
  .ultbtn { width: 74px; height: 74px; }
}
@media (max-height: 520px) {
  .menu-side { padding: 16px 30px; gap: 10px; }
  .logo span { font-size: 54px; }
  .btn.big { font-size: 22px; padding: 10px 22px; }
  .btn { padding: 8px 16px; font-size: 17px; }
  .upcard { min-height: 170px; }
  .dscroll { max-height: 55vh; }
}

/* ── Celular en horizontal (pantallas bajas y anchas) ──
   Va después de los bloques de celular vertical para ganarles: en horizontal se usa un diseño propio. */
@media (orientation: landscape) and (max-height: 540px) {
  :root { --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); }
  .screen { padding: 10px calc(14px + var(--safe-r)) 10px calc(14px + var(--safe-l)); }
  /* Las ventanas se centran si caben y se desplazan si no (nada queda cortado) */
  .screen.dim { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .screen.dim > * { margin: auto; }
  .panel { max-height: none; padding: 14px 18px; border-radius: 20px; }
  h2 { font-size: 24px; }
  .btn { padding: 7px 14px; font-size: 16px; }
  .btn.big { font-size: 20px; padding: 8px 18px; }
  .btn.small { font-size: 14px; padding: 6px 12px; }

  /* Menú: columna a la izquierda que se puede desplazar, criatura a la derecha */
  #menu { align-items: stretch; }
  .menu-side { width: min(400px, 52%); height: 100%; overflow-y: auto; padding: 10px 18px calc(10px + var(--safe-b)) calc(18px + var(--safe-l)); gap: 8px; justify-content: flex-start;
    background: linear-gradient(90deg, rgba(27,21,48,.92) 62%, rgba(27,21,48,0)); }
  .menu-side .logo span, .logo span { font-size: 40px; -webkit-text-stroke: 3px var(--ink); text-shadow: 0 4px 0 var(--ink); }
  .logo span:last-child { margin-left: 20px; }
  .menu-top, .menu-bottom { gap: 8px; }
  .tagline { display: none; }
  .alpha-badge { font-size: 12px; margin-top: -2px; }
  .menu-buttons { max-width: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .menu-buttons .btn.big { grid-column: 1 / -1; font-size: 20px; padding: 7px 16px; }
  .menu-buttons .btn:last-child:nth-child(even) { grid-column: auto; }
  .menu-buttons .btn:not(.big) { font-size: 14px; padding: 7px 6px; }
  .menu-stats { font-size: 11px; gap: 5px; justify-content: flex-start; }
  .menu-stats span { padding: 3px 7px; }
  .credits { font-size: 11px; bottom: calc(6px + var(--safe-b)); right: calc(12px + var(--safe-r)); }

  /* Elegir criatura: ficha a la izquierda, opciones a la derecha, la criatura entre ambas */
  .screen > .topbar { top: 8px; left: calc(12px + var(--safe-l)); right: calc(12px + var(--safe-r)); }
  .screen > .topbar h2 { display: none; }
  #select { align-items: flex-end; padding: 54px calc(12px + var(--safe-r)) calc(8px + var(--safe-b)) calc(12px + var(--safe-l)); }
  .select-layout { flex-direction: row; align-items: flex-end; gap: 10px; }
  .detail { width: min(250px, 30%); padding: 10px 12px; font-size: 12px; }
  .dscroll { max-height: calc(100vh - 80px); }
  .detail .dname { font-size: 22px; }
  .detail .stat { margin: 2px 0; }
  .select-bottom { width: min(420px, 50%); align-items: stretch; gap: 6px; }
  .mode-toggle { align-self: flex-end; padding: 3px; }
  .mode-toggle button { font-size: 14px; padding: 4px 12px; }
  .mode-row { gap: 4px; }
  .mode-toggle .tlbl { display: none; }
  .diff-toggle button { padding: 4px 8px; }
  .diff-toggle button i { display: none; }
  .diff-hint { font-size: 11px; margin-top: -2px; }
  .looks { max-width: none; padding: 5px 8px; gap: 4px; }
  .chip { width: 28px; height: 28px; }
  .select-bottom .cards { max-width: none; gap: 6px; padding: 6px 2px 8px; }
  .select-bottom .ccard, .ccard { width: 70px; padding: 6px 4px; border-width: 3px; }
  .select-bottom .ccard .cicon, .ccard .cicon { width: 36px; height: 36px; font-size: 20px; margin-bottom: 3px; }
  .select-bottom .ccard .cname, .ccard .cname { font-size: 13px; }
  .ccard .ctype { font-size: 10px; }
  #btnStart { font-size: 18px; padding: 7px 14px; }

  /* Partida: HUD más compacto para dejar ver el mapa */
  .xpbar { height: 13px; } .xpbar span { font-size: 11px; line-height: 13px; }
  .hud-tl { top: 18px; left: calc(10px + var(--safe-l)); gap: 7px; }
  .portrait { width: 40px; height: 40px; font-size: 21px; border-width: 3px; }
  .pname { font-size: 15px; }
  .hpbar { width: 150px; height: 18px; } .hpbar span { font-size: 11px; line-height: 12px; }
  .hud-tc { top: 16px; }
  .hud-tc .phase { font-size: 13px; }
  .timer { font-size: 26px; }
  .hud-tc .sub { font-size: 12px; gap: 10px; }
  .bossbar { width: min(340px, 44vw); margin-top: 4px; }
  .hud-tr { top: 18px; right: calc(10px + var(--safe-r)); }
  .iconbtn { width: 40px; height: 40px; }
  .hud-bl { left: calc(10px + var(--safe-l)); bottom: calc(8px + var(--safe-b)); gap: 4px; }
  .slot { width: 34px; height: 34px; font-size: 17px; border-radius: 10px; }
  .slots.small .slot { width: 26px; height: 26px; font-size: 13px; }
  .hud-br, body.touch .hud-br { right: calc(12px + var(--safe-r)); bottom: calc(10px + var(--safe-b)); flex-direction: row; align-items: flex-end; gap: 10px; }
  body.touch .touchbtns { flex-direction: column; gap: 8px; }
  body.touch .tbtn { width: 54px; height: 54px; font-size: 22px; }
  .ultbtn { width: 70px; height: 70px; }
  .altar-prompt { bottom: calc(14px + var(--safe-b)); padding: 6px 12px; }
  .altar-prompt b { font-size: 16px; } .altar-prompt small { font-size: 11px; }
  #toasts { top: 64px; right: calc(12px + var(--safe-r)); left: auto; transform: none; }
  #banner .btitle { font-size: 30px; } #banner .bsub { font-size: 13px; }
  #joystick { width: 110px; height: 110px; }

  /* Subir de nivel y cofres: cartas en una fila, más bajas */
  .lvl-wrap { gap: 6px; }
  .lvl-title { font-size: 30px; text-shadow: 0 3px 0 var(--ink); -webkit-text-stroke: 2px var(--ink); }
  .lvl-wrap > p.muted { display: none; }
  .upcards { flex-wrap: nowrap; gap: 10px; }
  .upcard { width: min(210px, 30vw); min-height: 0; padding: 10px 8px; gap: 4px; border-radius: 16px; }
  .upcard .uicon { width: 44px; height: 44px; font-size: 24px; border-width: 3px; border-radius: 14px; }
  .upcard .uname { font-size: 16px; }
  .upcard .ulvl, .upcard .rar { font-size: 11px; }
  .upcard .udesc { font-size: 12px; }
  .upcard .new { font-size: 12px; padding: 1px 7px; top: -9px; }
}

/* ── Cartel del altar de invocación ── */
.altar-prompt { position: absolute; left: 50%; bottom: calc(150px + var(--safe-b)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: 18px; border: 3px solid var(--ink); background: linear-gradient(180deg, #4b3f8a, #2a2250); color: var(--text);
  box-shadow: 0 5px 0 var(--ink), 0 0 24px rgba(185,168,255,.55); cursor: pointer; pointer-events: auto; font: inherit; animation: altarPulse 1.4s ease-in-out infinite; z-index: 6; }
.altar-prompt .ap-icon { font-size: 30px; }
.altar-prompt .ap-text { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.altar-prompt b { font-family: Lilita, sans-serif; font-weight: 400; font-size: 20px; color: var(--yellow); }
.altar-prompt small { font-size: 13px; color: var(--muted); }
.altar-prompt kbd { font-family: Lilita, sans-serif; font-size: 18px; background: var(--yellow); color: var(--ink); border-radius: 8px; padding: 2px 10px; border: 2px solid var(--ink); }
body.touch .altar-prompt kbd { display: none; }
@keyframes altarPulse { 50% { box-shadow: 0 5px 0 var(--ink), 0 0 38px rgba(185,168,255,.9); } }

/* ── Novedades: próximas versiones ── */
.clver.soon { border-style: dashed; opacity: .9; }
.clver.soon p { margin: 6px 0 0; color: var(--muted); }

/* ── v0.8 · Cuenta y progreso en la nube ── */
.badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acc-chip { font-family: Nunito, sans-serif; font-weight: 900; font-size: 13px; color: var(--text); background: rgba(27,21,48,.8); border: 3px solid var(--ink); border-radius: 999px; padding: 3px 12px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; margin-top: -6px; max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-chip.on { background: linear-gradient(90deg, #2a7a52, #2f9b6a); }
.acc-chip:hover { filter: brightness(1.15); }
.play-row { display: flex; flex-direction: column; gap: 10px; }
.btn.pink { background: var(--pink); color: var(--ink); }
.sync-pill { font-size: 12px; font-weight: 900; color: var(--muted); white-space: nowrap; }
.sync-pill.ok { color: var(--green); } .sync-pill.error, .sync-pill.offline { color: #ffb02e; }
.acc-form { display: flex; flex-direction: column; gap: 10px; }
.acc-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); }
.acc-form input { font: 900 16px Nunito, sans-serif; color: var(--text); background: var(--ink); border: 3px solid var(--line); border-radius: 12px; padding: 9px 12px; outline: none; user-select: text; -webkit-user-select: text; }
.acc-form input:focus { border-color: var(--yellow); }
.acc-msg { min-height: 1.2em; margin: 2px 0 0; font-size: 14px; }
.acc-msg.ok { color: var(--green); } .acc-msg.bad { color: var(--red); }
.acc-hello { display: flex; align-items: center; gap: 12px; background: var(--ink); border-radius: 16px; padding: 10px 14px; }
.acc-hello b { font-family: Lilita, sans-serif; font-weight: 400; font-size: 22px; display: block; }
.acc-hello small { color: var(--muted); font-size: 13px; }
.acc-avatar { font-size: 30px; }
.acc-summary { margin: 12px 0 6px; font-size: 14px; background: var(--panel2); border-radius: 12px; padding: 8px 12px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 10px; }
.choice { font: inherit; color: var(--text); background: var(--panel2); border: 3px solid var(--line); border-radius: 16px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; text-align: left; box-shadow: 0 4px 0 var(--ink); }
.choice b { font-family: Lilita, sans-serif; font-weight: 400; font-size: 18px; color: var(--yellow); }
.choice span { font-size: 13px; line-height: 1.5; }
.choice:hover { border-color: var(--yellow); }
.choice:disabled { opacity: .5; }
@media (max-width: 760px) { .choice-grid { grid-template-columns: 1fr; } .play-row { display: contents; } }
@media (orientation: landscape) and (max-height: 540px) { .play-row { display: contents; } .acc-chip { font-size: 11px; padding: 2px 9px; } }

.toast.greet { box-shadow: 0 5px 0 var(--ink), 0 0 0 2px var(--pink) inset; }
.toast.greet .tt { color: var(--pink); }
.toast.greet .ts { font-size: 15px; font-weight: 900; }

/* ── v0.9 · Sala multijugador ── */
.btn.wide { width: 100%; margin: 6px 0; }
.join-row { display: flex; gap: 8px; margin-top: 6px; }
.join-row input { flex: 1; min-width: 0; font: 400 24px Lilita, sans-serif; letter-spacing: 4px; text-align: center; color: var(--yellow); background: var(--ink); border: 3px solid var(--line); border-radius: 14px; padding: 6px 10px; outline: none; user-select: text; -webkit-user-select: text; }
.join-row input:focus { border-color: var(--yellow); }
.room-code { display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--ink); border-radius: 16px; padding: 10px 14px; flex-wrap: wrap; }
.room-code span { color: var(--muted); }
.room-code b { font-family: Lilita, sans-serif; font-weight: 400; font-size: 42px; letter-spacing: 6px; color: var(--yellow); line-height: 1; }
.roster { display: grid; gap: 8px; margin: 12px 0; }
.rp { display: flex; align-items: center; gap: 10px; background: var(--panel2); border: 3px solid var(--line); border-radius: 14px; padding: 8px 12px; }
.rp.me { border-color: var(--yellow); }
.rp .ricon { font-size: 24px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--ink); flex: none; }
.rp .rname { font-family: Lilita, sans-serif; font-size: 18px; }
.rp .rsub { font-size: 12px; color: var(--muted); }
.rp .rstate { margin-left: auto; font-size: 13px; font-weight: 900; white-space: nowrap; }
.rp .rstate.ok { color: var(--green); }
.rp.empty { opacity: .45; border-style: dashed; }
.center-toggle { justify-content: center; margin: 8px auto 4px; width: max-content; }
.mp-badge { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 900; background: rgba(27,21,48,.8); border-radius: 999px; padding: 1px 10px; pointer-events: none; }
/* ── Formulario de opiniones ── */
a.btn { text-decoration: none; text-align: center; display: inline-block; }
.btn.feedback { background: linear-gradient(90deg, #3a2f7a, #5a3a8a); }
.feedback-line { margin: 12px 0 0; color: var(--muted); }
.feedback-line a { color: var(--yellow); font-weight: 900; }

/* Multijugador en partida */
body.spectating .hud-bl, body.spectating .hud-br, body.spectating .xpbar, body.spectating .hud-tl .hpwrap .hpbar, body.spectating #altarPrompt { display: none !important; }
body.spectating #hint { display: none; }
body.coop #pause .panel::after { content: 'En multijugador la partida sigue mientras estás en pausa.'; display: block; margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; }
/* ── Mapa de la fase (M) ── */
#mapView { position: fixed; inset: 0; z-index: 30; background: rgba(14,10,32,.86); backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px calc(12px + env(safe-area-inset-right, 0px)) calc(12px + var(--safe-b)) calc(12px + env(safe-area-inset-left, 0px)); }
#mapCanvas { width: min(84vh, 92vw); height: min(84vh, 92vw); max-height: calc(100vh - 120px); max-width: calc(100vh - 120px); touch-action: none; }
.map-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.map-head b { font-family: Lilita, sans-serif; font-weight: 400; font-size: 22px; color: var(--yellow); }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: 13px; }
.map-legend span { background: rgba(0,0,0,.35); border-radius: 999px; padding: 3px 10px; }
@media (orientation: landscape) and (max-height: 540px) {
  #mapView { flex-direction: row; flex-wrap: wrap; }
  #mapCanvas { width: calc(100vh - 30px); height: calc(100vh - 30px); max-width: none; max-height: none; }
  .map-head { flex-direction: column; align-items: flex-start; max-width: 200px; }
  .map-legend { flex-direction: column; align-items: flex-start; max-width: 200px; }
}

/* ── v0.9.1: correo de la cuenta, avisos y multijugador ── */
.linkbtn { background: none; border: 0; padding: 2px 0; color: var(--yellow); font: 900 14px Nunito, sans-serif; text-decoration: underline; cursor: pointer; align-self: center; }
.linkbtn:hover { filter: brightness(1.2); }
.acc-badge { display: inline-block; font: 900 12px Nunito, sans-serif; color: var(--ink); background: var(--green); border-radius: 999px; padding: 1px 8px; margin: 2px 0; }
.acc-badge.owner { background: linear-gradient(135deg, #ffe27a, #ffb02e); }
.acc-email { margin: 10px 0; background: var(--panel2); border-radius: 14px; padding: 10px 12px; font-size: 14px; }
.acc-email p { margin: 0 0 8px; }
.acc-email .row-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
#emInput { font: 900 16px Nunito, sans-serif; letter-spacing: 0; text-align: left; color: var(--text); }
.code-input { font: 400 26px Lilita, sans-serif !important; letter-spacing: 8px !important; text-align: center; color: var(--yellow) !important; }
#accRecover h3 { margin-top: 0; }
#accRecover > .btn { margin-top: 10px; }
.ghostbtn { background: var(--panel); color: var(--text); }
.panel.narrow { width: min(420px, 100%); }
.notice-icon { font-size: 54px; text-align: center; line-height: 1; margin-bottom: 6px; }
#noticeText { white-space: pre-line; }
.sync-pill.elsewhere { background: #8a5a20; }
/* Sala: sacar jugadores */
.rp .rkick { margin-left: auto; font: 900 12px Nunito, sans-serif; background: var(--red); color: #fff; border: 0; border-radius: 10px; padding: 4px 9px; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.rp .rkick + .rstate { margin-left: 8px; }
.rstate.away { background: #8a5a20; }
/* Pausa en multijugador: lista del equipo */
#pauseTeam { margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
#pauseTeam:empty { display: none; }
.team-row { display: flex; align-items: center; gap: 8px; background: var(--ink); border-radius: 12px; padding: 6px 10px; font-size: 14px; }
.team-row b { font-family: Lilita, sans-serif; font-weight: 400; font-size: 17px; }
.team-row .tstate { color: var(--muted); font-size: 12px; }
.team-row .tstate.bad { color: #ffb347; }
.team-row button { margin-left: auto; font: 900 12px Nunito, sans-serif; background: var(--red); color: #fff; border: 0; border-radius: 10px; padding: 4px 9px; cursor: pointer; }
/* Aviso de red en la partida (esperando al anfitrión, reconectando…) */
#netWarn { position: fixed; top: calc(74px + var(--safe-t, 0px)); left: 50%; transform: translateX(-50%); z-index: 12; background: rgba(27,21,48,.92); border: 3px solid #ffb347; color: var(--text); border-radius: 14px; padding: 6px 14px; font: 900 14px Nunito, sans-serif; pointer-events: none; text-align: center; max-width: 90vw; }
.unlock.warn { background: linear-gradient(90deg, #ffb347, #ff8a5c); font-size: 17px; }
.acc-badge { margin-right: 6px; }

/* Novedades: aviso de que la versión salió de las opiniones de los jugadores */
.clnote { margin: 6px 0 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255,210,58,.12); border: 2px dashed rgba(255,210,58,.55); font-size: 14px; }
.clnote a { color: var(--yellow); font-weight: 900; }