/* Tronos & Clanes · look de juego mobile: noche violeta con luces de neón, botones con volumen y figuritas holográficas. */
:root {
  --bg1: #1A0B3D; --bg2: #2B0D57; --bg3: #47106E;
  --glass: rgba(255, 255, 255, .08); --glass-2: rgba(255, 255, 255, .14); --line: rgba(255, 255, 255, .16);
  --text: #FFF7FF; --muted: rgba(255, 240, 255, .68);
  --hot: #FF3D8B; --hot-2: #FF8A3D; --hot-d: #B3124F;
  --cyan: #3DE8FF; --cyan-d: #0F8FB3;
  --win: #3DFFA2; --lose: #FF4D6A; --gold: #FFC93D; --gold-d: #C98A00;
  --display: 'Lilita One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --body: 'Nunito', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box }
html, body { height: 100%; margin: 0 }
body { background: var(--bg1); color: var(--text); font-family: var(--body); font-weight: 700; font-size: 15px; line-height: 1.45; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
/* Nunca scroll horizontal: lo que se pase del ancho del celu se recorta. */
html, body { max-width: 100% }
body { overflow-x: hidden; overflow-x: clip }
img, svg, video, canvas { max-width: 100% }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; touch-action: manipulation }
/* 16px evita que el iPhone haga zoom al escribir (y quede la pantalla corrida). */
input { font: inherit; font-size: 16px; color: var(--text); max-width: 100% }
[hidden] { display: none !important }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; text-wrap: balance; margin: 0 }
p { margin: 0 }
em { font-style: normal }
.muted { color: var(--muted) }
.tiny { font-size: 12.5px; color: var(--muted); font-weight: 700 }
.num { font-family: var(--display); font-variant-numeric: tabular-nums }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums }

/* fondo con luces que se mueven */
.bg { position: fixed; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 50% 0%, var(--bg3), var(--bg2) 45%, var(--bg1) 80%); overflow: hidden }
.bg i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(70px); opacity: .35; animation: drift 18s ease-in-out infinite alternate }
.bg i:nth-child(1) { background: var(--hot); left: -25vmax; top: -10vmax }
.bg i:nth-child(2) { background: var(--cyan); right: -30vmax; top: 30vh; animation-duration: 22s; opacity: .22 }
.bg i:nth-child(3) { background: #7A3DFF; left: 10vw; bottom: -35vmax; animation-duration: 26s }
@keyframes drift { to { transform: translate(8vmax, 6vmax) scale(1.1) } }

.app { max-width: 480px; margin: 0 auto; min-height: 100%; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-top: 0; padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) }
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 6px calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding: calc(env(safe-area-inset-top, 0px) + 8px) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); background: linear-gradient(180deg, rgba(16, 6, 40, .97), rgba(30, 12, 70, .92)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 201, 61, .28); box-shadow: 0 8px 24px rgba(5, 0, 20, .45); border-radius: 0 0 20px 20px }
.logo { flex-shrink: 0; font-family: var(--display); font-size: clamp(22px, 7.5vw, 30px); letter-spacing: .02em; background: linear-gradient(180deg, #fff 30%, #FFD0E4); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 var(--hot-d)) drop-shadow(0 0 18px rgba(255, 61, 139, .55)) }
.logo span { color: var(--gold); -webkit-text-fill-color: var(--gold) }
.hdr-r { display: flex; gap: 6px; align-items: center; min-width: 0 }
.pill { white-space: nowrap; font-family: var(--display); font-size: clamp(13px, 4.2vw, 16px); background: linear-gradient(180deg, #FFE27A, var(--gold)); color: #4A2A00; border-radius: 99px; padding: 5px 12px 4px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 3px 0 var(--gold-d) }
.net { font-size: 11.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 6px; background: var(--glass); border: 1px solid var(--line); border-radius: 99px; padding: 6px 10px }
.net::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted) }
.net.on::before { background: var(--win); box-shadow: 0 0 10px var(--win) }
.net { white-space: nowrap }
.net.snd { font-size: 15px; padding: 4px 9px }
.net.snd::before { display: none }
/* Celus angostos: el estado de conexión queda solo como puntito. */
@media (max-width: 380px) { .net:not(.snd) { font-size: 0; gap: 0; padding: 8px } }
.h { font-size: 30px; margin-top: 4px }
#view { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; animation: viewIn .35s ease-out }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px) } }

/* botones con volumen */
.btn { --c1: #FF6FA8; --c2: var(--hot); --cd: var(--hot-d); --tc: #fff;
  font-family: var(--display); font-size: 17px; color: var(--tc); background: linear-gradient(180deg, var(--c1), var(--c2)); border-radius: 18px; padding: 13px 16px 12px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 rgba(0, 0, 0, .12), 0 5px 0 var(--cd), 0 10px 20px rgba(0, 0, 0, .25); text-shadow: 0 2px 0 rgba(0, 0, 0, .2); transition: transform .07s, box-shadow .07s; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1.1 }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 1px 0 var(--cd) }
.btn:disabled { filter: grayscale(.8); opacity: .5; cursor: not-allowed }
.btn small { font-family: var(--body); font-size: 11.5px; font-weight: 800; opacity: .9; text-shadow: none }
.btn.cyan { --c1: #8AF3FF; --c2: var(--cyan); --cd: var(--cyan-d); --tc: #032B3A; text-shadow: none }
.btn.gold { --c1: #FFE27A; --c2: var(--gold); --cd: var(--gold-d); --tc: #4A2A00; text-shadow: none }
.btn.dark { --c1: #5B3B8F; --c2: #3E2470; --cd: #22113F }
.btn.red { --c1: #FF7A8E; --c2: var(--lose); --cd: #A3162E }
.btn.glass { background: var(--glass); border: 1.5px solid var(--line); box-shadow: none; text-shadow: none; backdrop-filter: blur(8px) }
.btn.sm { font-size: 14px; padding: 9px 12px 8px; border-radius: 14px }
.btn.wide { width: 100% }
.btn:focus-visible, .choice:focus-visible, .dot:focus-visible, .bump:focus-visible, .tab:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.panel { background: var(--glass); border: 1.5px solid var(--line); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 10px; backdrop-filter: blur(10px) }
.panel h3 { font-size: 19px }
.panel label, .onb label { font-weight: 900; font-size: 13px; color: var(--muted) }
.field { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; background: rgba(0, 0, 0, .25); width: 100%; min-width: 0; font-weight: 800; outline: none }
.field:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(61, 232, 255, .25) }
.field::placeholder { color: rgba(255, 240, 255, .4) }
.tog { display: flex; align-items: center; gap: 10px; font-weight: 800 !important; font-size: 14.5px !important; color: var(--text) !important }
.tog input { width: 22px; height: 22px; accent-color: var(--hot); flex: none }
.banner { background: linear-gradient(90deg, rgba(255, 201, 61, .18), rgba(255, 61, 139, .18)); border: 1.5px solid rgba(255, 201, 61, .45); border-radius: 16px; padding: 10px 14px; font-size: 13.5px }
.note { background: rgba(255, 201, 61, .14); border: 1.5px solid rgba(255, 201, 61, .4); border-radius: 12px; padding: 8px 10px; font-size: 13px }

/* radar */
.radar { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 6px auto 0; border-radius: 50%; background: radial-gradient(circle, rgba(61, 232, 255, .16) 0, rgba(26, 11, 61, .9) 70%); border: 2px solid rgba(61, 232, 255, .45); box-shadow: 0 0 40px rgba(61, 232, 255, .25), inset 0 0 50px rgba(61, 232, 255, .15); overflow: hidden }
.rings { position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 15.6%, rgba(61, 232, 255, .22) 15.6% 16%) }
.sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(61, 232, 255, .55), rgba(61, 232, 255, 0) 20%); animation: spin 3.2s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.me-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(180deg, #FF6FA8, var(--hot)); border: 3px solid #fff; display: grid; place-items: center; font-size: 28px; box-shadow: 0 0 24px var(--hot) }
.me-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--hot); animation: ping 2s ease-out infinite }
@keyframes ping { to { transform: scale(2.4); opacity: 0 } }
.dot { position: absolute; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .95); border: 3px solid var(--cyan); display: grid; place-items: center; font-size: 24px; padding: 0; box-shadow: 0 0 16px rgba(61, 232, 255, .6); animation: pop .45s cubic-bezier(.2, 1.6, .4, 1) both, bob 3s ease-in-out infinite }
.dot i { position: absolute; right: -8px; top: -8px; font-style: normal; font-size: 12px; background: var(--bg1); border: 2px solid var(--cyan); border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center }
.dot.lg { border-color: var(--gold); box-shadow: 0 0 22px var(--gold) }
.dot.bot { border-style: dashed; border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .18); box-shadow: none }
.dot.busy { opacity: .45 }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.2); opacity: 0 } }
@keyframes bob { 50% { margin-top: -4px } }
/* radar real: jugadores a su distancia, flechas hacia donde hay más, norte arriba */
.north { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 900; color: var(--cyan); opacity: .85; pointer-events: none }
.dot.real { border-color: var(--hot); box-shadow: 0 0 18px rgba(255, 61, 139, .75); z-index: 2 }
.dot em { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px; font-style: normal; font-size: 10.5px; font-weight: 900; color: #fff; background: rgba(26, 11, 61, .9); padding: 1px 6px; border-radius: 99px; white-space: nowrap; pointer-events: none }
.dot.sleep { border-style: dashed; border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .55); box-shadow: none; animation: pop .45s both }
.arrow { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; line-height: 1.05; color: var(--gold); text-shadow: 0 0 10px rgba(255, 201, 61, .7); pointer-events: none; z-index: 1 }
.arrow svg { display: block; width: 13px; height: 13px; filter: drop-shadow(0 0 6px rgba(255, 201, 61, .8)) }
.arrow b { font-family: var(--display); font-size: 16px; font-weight: 400 }
.arrow small { font-size: 9.5px; font-weight: 900; color: var(--text); text-shadow: none; white-space: nowrap }
.loc-card { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(135deg, rgba(61, 232, 255, .18), rgba(122, 61, 255, .22)); border: 2px solid rgba(61, 232, 255, .55); border-radius: 22px; padding: 16px; box-shadow: 0 0 30px rgba(61, 232, 255, .18); animation: viewIn .35s ease-out }
.loc-card.warn { background: linear-gradient(135deg, rgba(255, 201, 61, .16), rgba(255, 61, 139, .16)); border-color: rgba(255, 201, 61, .6); box-shadow: none }
.loc-card > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 }
.loc-card h3 { font-size: clamp(19px, 5.6vw, 22px) }
.loc-card p { font-size: 15.5px; line-height: 1.4; font-weight: 700; color: var(--text) }
.loc-card .btn { margin-top: 4px; font-size: 18px }
.loc-i { font-size: 34px; line-height: 1; flex: none; filter: drop-shadow(0 0 10px rgba(61, 232, 255, .6)) }
.online-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center }
.online-row:empty { display: none }
.online-row button { display: flex; align-items: center; gap: 6px; background: var(--glass); border: 1.5px solid var(--line); border-radius: 99px; padding: 3px 10px 3px 3px; font-weight: 900; font-size: 13px; max-width: 100% }
.online-row button:disabled { opacity: .5 }
.online-row .av { width: 28px; height: 28px; font-size: 16px; border-radius: 50%; box-shadow: none }
.where { color: var(--cyan); font-weight: 900 }
.radar-hint { text-align: center; margin: 10px auto 2px; padding: 8px 16px; width: fit-content; max-width: 100%; border-radius: 99px; background: rgba(61, 232, 255, .12); border: 1.5px solid rgba(61, 232, 255, .45); color: #fff; font-weight: 900; font-size: 15px; animation: hintPulse 2.4s ease-in-out infinite }
@keyframes hintPulse { 50% { box-shadow: 0 0 18px rgba(61, 232, 255, .55) } }
.dot.real:not(.busy), .dot.bot { cursor: pointer }
.near { text-align: center; font-size: 14px; color: var(--muted) }
.near b { color: var(--cyan); font-family: var(--display); font-size: 17px; font-weight: 400 }
.drops { display: flex; flex-direction: column; gap: 8px }
.drops:empty { display: none }
.drop { background: linear-gradient(110deg, rgba(255, 201, 61, .25), rgba(255, 61, 139, .25)); border: 1.5px solid var(--gold); border-radius: 16px; padding: 10px 12px; font-size: 14px }

/* CHOCÁ */
.bump-wrap { display: grid; place-items: center; padding: 10px 0 4px }
.bump { position: relative; width: 184px; height: 184px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFB37A, var(--hot-2) 30%, var(--hot) 70%); box-shadow: inset 0 6px 0 rgba(255, 255, 255, .35), inset 0 -8px 0 rgba(0, 0, 0, .15), 0 8px 0 var(--hot-d), 0 0 50px rgba(255, 61, 139, .55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; transition: transform .08s }
.bump::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 3px solid rgba(255, 61, 139, .55); animation: breathe 1.8s ease-in-out infinite }
@keyframes breathe { 50% { transform: scale(1.07); opacity: .35 } }
.bump span { font-family: var(--display); font-size: 42px; line-height: 1; text-shadow: 0 3px 0 var(--hot-d) }
.bump small { font-size: 12px; font-weight: 900; max-width: 130px; text-align: center; line-height: 1.2 }
.bump.charging { animation: shake .12s linear infinite; transform: scale(.94) }
.bump.armed { background: radial-gradient(circle at 35% 30%, #CFFFE6, var(--win) 40%, #0FB36A 80%); box-shadow: inset 0 6px 0 rgba(255, 255, 255, .35), 0 8px 0 #0A7A48, 0 0 60px var(--win) }
.bump.armed span { text-shadow: 0 3px 0 #0A7A48 }
@keyframes shake { 25% { translate: -2px 1px } 75% { translate: 2px -1px } }
.sensor { display: block; margin: 0 auto; font-size: 12.5px; font-weight: 900; color: var(--cyan); background: rgba(61, 232, 255, .12); border: 1.5px solid rgba(61, 232, 255, .4); border-radius: 99px; padding: 6px 12px }
.how ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px }
.target { display: flex; gap: 12px; align-items: center; background: rgba(255, 61, 139, .14); border: 1.5px solid rgba(255, 61, 139, .45); border-radius: 14px; padding: 10px }
.av { width: 42px; height: 42px; border-radius: 14px; background: hsl(var(--h) 90% 72%); display: grid; place-items: center; font-size: 23px; flex: none; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15) }

/* figurita holográfica */
.fig { --b1: #B9C6FF; --b2: #8A9BFF; position: relative; border-radius: 18px; padding: 3px; background: linear-gradient(140deg, var(--b1), var(--b2)); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); min-width: 0; transform-style: preserve-3d; transition: transform .15s }
.fig-in { position: relative; border-radius: 15px; background: linear-gradient(180deg, #2E1660, #1D0C40); padding: 8px; display: flex; flex-direction: column; gap: 6px; overflow: hidden }
.fig-in::after { content: ""; position: absolute; inset: -50%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .22) 48%, rgba(61, 232, 255, .18) 52%, transparent 60%); animation: sheen 4s ease-in-out infinite; pointer-events: none }
@keyframes sheen { from { transform: translateX(-40%) } 60%, to { transform: translateX(40%) } }
.fig-av { aspect-ratio: 1; border-radius: 12px; background: radial-gradient(circle at 50% 35%, hsl(var(--h) 95% 80%), hsl(var(--h) 80% 60%)); display: grid; place-items: center; font-size: 42px; max-width: 100%; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15) }
.fig-name { font-family: var(--display); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.fig-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 4px; font-size: 11px; min-width: 0 }
.fig-meta .rk { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 7px; background: linear-gradient(140deg, var(--b1), var(--b2)); color: #140733 }
.fig-meta .num { font-size: 13px }
.fig-pow { position: absolute; top: -8px; right: -6px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; background: var(--bg1); border: 2px solid var(--b1); display: grid; place-items: center; font-size: 15px; box-shadow: 0 0 12px var(--b2) }
.fig-rara { --b1: #8AF3FF; --b2: #2EA8FF }
.fig-epica { --b1: #FF8AD0; --b2: #A23DFF }
.fig-leyenda { --b1: #FFE27A; --b2: #FF8A3D; background: conic-gradient(from var(--a, 0deg), #FFE27A, #FF8AD0, #8AF3FF, #FFE27A); animation: holo 4s linear infinite; box-shadow: 0 0 26px rgba(255, 201, 61, .6), 0 8px 20px rgba(0, 0, 0, .35) }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg }
@keyframes holo { to { --a: 360deg } }
.fig.locked { filter: grayscale(1) brightness(.7) }
.fig.big { width: 180px; margin: 0 auto }
.fig.big .fig-av { font-size: 70px }
.fig.big .fig-name { font-size: 19px }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px }
.slot { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.slot .rec { font-size: 12px; text-align: center; color: var(--muted) }
.slot .tiny { text-align: center }
.empty-box { background: var(--glass); border: 2px dashed var(--line); border-radius: 22px; padding: 24px; text-align: center; display: flex; flex-direction: column; gap: 6px }
.big-e { font-size: 44px }

/* poderes */
.powers { display: flex; flex-direction: column; gap: 10px }
.pw { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--glass); border: 1.5px solid var(--line); border-radius: 20px; padding: 12px }
.pw.full { border-color: var(--win); box-shadow: 0 0 18px rgba(61, 255, 162, .25) }
.pw-i { font-size: 30px; text-align: center; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .3)) }
.pw-n { font-family: var(--display); font-size: 17px; font-weight: 400 }
.rar { font-family: var(--body); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 7px; background: #B9C6FF; color: #140733; margin-left: 6px; vertical-align: 3px }
.rar.r { background: var(--cyan) } .rar.l { background: var(--gold) }
.bar { height: 10px; border-radius: 99px; background: rgba(0, 0, 0, .35); overflow: hidden; margin-top: 6px }
.bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--hot), var(--hot-2)); box-shadow: 0 0 10px var(--hot) }
.pw.full .bar span { background: linear-gradient(90deg, #0FB36A, var(--win)); box-shadow: 0 0 10px var(--win) }
.lock { max-width: 92px; text-align: right }
.steal { border-collapse: collapse; width: 100%; font-size: 14px }
.steal th { text-align: left; padding: 6px; color: var(--muted) }
.steal td { text-align: center; padding: 6px; font-family: var(--display); font-weight: 400 }
.steal tr + tr td, .steal tr + tr th { border-top: 1.5px solid var(--line) }

/* ranking */
.rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.rank li { display: grid; grid-template-columns: 30px 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--glass); border: 1.5px solid var(--line); border-radius: 18px; padding: 8px 12px }
.rank li:nth-child(1) .pos { color: var(--gold) } .rank li:nth-child(2) .pos { color: #D9E2FF } .rank li:nth-child(3) .pos { color: #FFB37A }
.rank li.me { background: linear-gradient(90deg, rgba(255, 61, 139, .35), rgba(255, 138, 61, .25)); border-color: var(--hot) }
.rank .pos { font-family: var(--display); font-size: 20px }
.rank .nm { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rank .nm em { font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; margin-left: 6px; color: var(--muted) }
.rank .nm em.live { color: var(--win) } .rank .nm em.lg-tag { color: var(--gold) }
.rank .pts { font-family: var(--display); font-size: 19px }
.rank li.empty { display: block; text-align: center; border-style: dashed; color: var(--muted) }

/* perfil */
.prof-top { display: flex; flex-direction: column; gap: 16px }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.stats div { background: var(--glass); border: 1.5px solid var(--line); border-radius: 16px; padding: 10px 4px; text-align: center; display: flex; flex-direction: column }
.stats b { font-family: var(--display); font-weight: 400; font-size: clamp(18px, 5.5vw, 22px) }
.stats span { font-size: 11px; color: var(--muted); font-weight: 900; overflow-wrap: anywhere }
.avs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px }
.av-pick { aspect-ratio: 1; border-radius: 12px; background: var(--glass); border: 1.5px solid var(--line); font-size: 21px; padding: 0; transition: transform .1s }
.av-pick.on { background: linear-gradient(180deg, #FF6FA8, var(--hot)); border-color: #fff; transform: scale(1.08); box-shadow: 0 0 14px var(--hot) }
.share-card { background: linear-gradient(120deg, var(--hot), #7A3DFF); border-radius: 16px; padding: 14px; font-weight: 900; font-size: 15px }
.rules { margin: 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 4px }

/* tabs */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 0 max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); pointer-events: none }
.tabs-in { pointer-events: auto; max-width: 460px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 6px; border-radius: 24px; background: rgba(26, 11, 61, .75); border: 1.5px solid var(--line); backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0, 0, 0, .4) }
.tab { color: var(--muted); font-weight: 900; font-size: 11.5px; padding: 8px 2px 6px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: background .2s, color .2s }
.tab svg { width: 22px; height: 22px }
.tab.on { color: #fff; background: linear-gradient(180deg, #FF6FA8, var(--hot)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 4px 14px rgba(255, 61, 139, .5) }

/* modal, toast, efectos */
.modal { position: fixed; inset: 0; z-index: 30; background: rgba(10, 3, 30, .7); backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; padding: 16px max(12px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); overflow-x: hidden; overflow-y: auto }
.modal-in { background: linear-gradient(180deg, #34156A, #1F0B45); border: 1.5px solid var(--line); border-radius: 28px; padding: clamp(14px, 5vw, 20px); width: 100%; max-width: 440px; min-width: 0; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); display: flex; flex-direction: column; gap: 12px; animation: up .3s cubic-bezier(.2, 1.3, .4, 1); max-height: 100%; overflow-x: hidden; overflow-y: auto }
@keyframes up { from { transform: translateY(40px); opacity: 0 } }
.sheet { display: flex; flex-direction: column; gap: 12px }
.center { text-align: center }
.onb { display: flex; flex-direction: column; gap: 10px }
.onb .logo { font-size: clamp(40px, 14vw, 52px); text-align: center }
.onb .lead { text-align: center; font-weight: 800; font-size: 16px }
.lbl { font-weight: 900; font-size: 13px; color: var(--muted) }
.toast { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40; background: #fff; color: #1A0B3D; border-radius: 16px; padding: 10px 16px; font-weight: 900; font-size: 14px; max-width: min(90vw, 420px); text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); animation: up .25s ease-out }
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 50 }
.float { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); font-family: var(--display); font-size: 64px; color: var(--gold); text-shadow: 0 4px 0 var(--gold-d), 0 0 30px var(--gold); animation: floatUp 1.4s ease-out forwards }
.float.neg { color: var(--lose); text-shadow: 0 4px 0 #8A1022 }
@keyframes floatUp { 0% { transform: translate(-50%, -20%) scale(.4); opacity: 0 } 20% { transform: translate(-50%, -50%) scale(1.15); opacity: 1 } 100% { transform: translate(-50%, -160%) scale(1); opacity: 0 } }

/* escáner */
.scan { position: relative; width: 100%; aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: #000 }
.scan video { width: 100%; height: 100%; object-fit: cover; display: block }
.scan-frame { position: absolute; inset: 18%; border: 4px solid var(--cyan); border-radius: 20px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35), 0 0 24px var(--cyan) }
.scan-frame::after { content: ""; position: absolute; left: 6%; right: 6%; height: 3px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: scanline 1.6s ease-in-out infinite alternate }
@keyframes scanline { from { top: 8% } to { top: 90% } }
.code-in { font-family: var(--mono); font-size: 30px; letter-spacing: .25em; text-align: center; text-transform: uppercase }

/* duelo */
.duel { position: fixed; inset: 0; z-index: 20; overflow-x: hidden; overflow-y: auto; background: radial-gradient(120% 70% at 50% 0%, #6A1270, #2B0D57 50%, #12062C); padding: calc(12px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) }
.duel > * { max-width: 460px; margin-left: auto; margin-right: auto }
.duel.shake { animation: bigshake .45s }
@keyframes bigshake { 20% { transform: translateX(-10px) } 40% { transform: translateX(9px) } 60% { transform: translateX(-6px) } 80% { transform: translateX(4px) } }
.d-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); margin-bottom: 14px }
.d-top .mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.x { flex-shrink: 0; max-width: 62%; text-align: center; border: 1.5px solid var(--line); border-radius: 12px; padding: 5px 12px; font-weight: 900; font-size: 12px; background: var(--glass) }
.d-center { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; padding-top: 10px; min-width: 0 }
.d-center h2 { font-size: clamp(24px, 8vw, 30px); overflow-wrap: anywhere }
.kicker { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; color: var(--cyan) }
.vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 18px }
.vs > b { font-family: var(--display); font-size: clamp(28px, 10vw, 40px); font-weight: 400; background: linear-gradient(180deg, #FFE27A, var(--hot-2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 var(--hot-d)); animation: vsPop .6s .3s cubic-bezier(.2, 1.8, .4, 1) both }
@keyframes vsPop { from { transform: scale(0) rotate(-30deg) } }
.vs .fig:first-child { animation: slideL .5s cubic-bezier(.2, 1.4, .4, 1) both }
.vs .fig:last-child { animation: slideR .5s cubic-bezier(.2, 1.4, .4, 1) both }
@keyframes slideL { from { transform: translateX(-80px) rotate(-14deg); opacity: 0 } }
@keyframes slideR { from { transform: translateX(80px) rotate(14deg); opacity: 0 } }
.qr { background: #fff; padding: 14px; border-radius: 22px; box-shadow: 0 0 40px rgba(61, 232, 255, .5); width: min(228px, 72vw); aspect-ratio: 1 }
.qr img, .qr canvas { width: 100% !important; height: auto !important; display: block }
.code { max-width: 100%; overflow-wrap: anywhere; font-family: var(--mono); font-size: clamp(22px, 9vw, 36px); letter-spacing: .18em; color: var(--gold); text-shadow: 0 0 20px rgba(255, 201, 61, .6) }
.spinner { width: 32px; height: 32px; border: 4px solid rgba(255, 255, 255, .2); border-top-color: var(--cyan); border-radius: 50%; animation: spin .8s linear infinite }
.bet { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center }
.stake { font-family: var(--display); font-size: clamp(56px, 20vw, 76px); line-height: .95; background: linear-gradient(180deg, #FFF3B0, var(--gold) 60%, var(--hot-2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 var(--gold-d)) drop-shadow(0 0 20px rgba(255, 201, 61, .5)) }
.stake.bump-anim { animation: stakeBump .4s cubic-bezier(.2, 1.8, .4, 1) }
@keyframes stakeBump { from { transform: scale(1.5) } }
.stake small { font-size: 22px }
.seq { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 8px }
.chip { font-size: 12px; font-weight: 900; background: var(--glass); border: 1.5px solid var(--line); border-radius: 99px; padding: 4px 10px }
.chip.me { border-color: var(--cyan); color: var(--cyan) }
.turn { font-family: var(--display); font-size: 22px }
.turn.wait { color: var(--muted); font-family: var(--body); font-weight: 900; font-size: 15px }
.bets { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; width: 100% }
.pw-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center }
.pw-btn { background: rgba(61, 255, 162, .14); border: 1.5px solid var(--win); border-radius: 99px; padding: 7px 14px; font-weight: 900; font-size: 13px; box-shadow: 0 0 14px rgba(61, 255, 162, .3) }
.pw-on, .spy { color: var(--win); font-weight: 900 }
.g-head { text-align: center; display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px }
.g-head h2 { font-size: clamp(26px, 9vw, 34px); overflow-wrap: anywhere; animation: vsPop .5s cubic-bezier(.2, 1.8, .4, 1) both }
.role { text-align: center; font-size: 19px; margin: 0 0 14px }
.role b { color: var(--gold) }
.choices { display: grid; gap: 12px }
.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.choice { background: linear-gradient(180deg, #4A2690, #321769); border: 1.5px solid var(--line); border-radius: 22px; padding: 18px 6px; font-family: var(--display); font-size: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15), 0 6px 0 #1A0B3D; transition: transform .07s }
.choice:active { transform: translateY(5px); box-shadow: 0 1px 0 #1A0B3D }
.choice span { font-size: 44px }
.choice.white { background: linear-gradient(180deg, #fff, #E6E0F5); color: #1A0B3D; min-height: 150px; justify-content: center; font-size: 22px }
.choice.black { background: linear-gradient(180deg, #2A2A2A, #000); min-height: 150px; justify-content: center; font-size: 22px }
.choice.n { font-size: 26px; padding: 14px 0 }
.locked { font-size: 20px }
.locked b { color: var(--gold) }
.rx { height: min(52vh, 400px); border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-family: var(--display); font-size: clamp(30px, 11vw, 40px); overflow-wrap: anywhere; user-select: none; -webkit-user-select: none; touch-action: manipulation; text-align: center; padding: 12px; transition: background .05s }
.rx small { font-family: var(--body); font-size: 14px; font-weight: 900 }
.rx-sync { background: var(--glass); border: 1.5px solid var(--line) }
.rx-wait { background: linear-gradient(180deg, #FF6A80, var(--lose)); box-shadow: 0 0 40px rgba(255, 77, 106, .5) }
.rx-go { background: linear-gradient(180deg, #8DFFC9, var(--win)); color: #053B22; box-shadow: 0 0 60px var(--win); animation: flash .2s }
.rx-done { background: var(--glass); border: 1.5px solid var(--line); color: var(--gold) }
@keyframes flash { from { transform: scale(1.04) } }
.result { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center }
.result { min-width: 0 }
.result .big { font-size: clamp(38px, 14vw, 60px); line-height: 1; overflow-wrap: anywhere }
.res-win .big { background: linear-gradient(180deg, #FFF3B0, var(--gold) 50%, var(--hot-2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 5px 0 var(--hot-d)) drop-shadow(0 0 30px rgba(255, 201, 61, .6)); animation: boom .6s cubic-bezier(.2, 1.8, .4, 1) both }
.res-lose .big { color: var(--lose); filter: drop-shadow(0 4px 0 #6A0C1B) }
@keyframes boom { from { transform: scale(.2) rotate(-12deg); opacity: 0 } }
.why { font-size: 16px }
.delta { font-family: var(--display); font-size: clamp(36px, 13vw, 48px) }
.delta.pos { color: var(--gold); text-shadow: 0 0 20px rgba(255, 201, 61, .5) } .delta.neg { color: var(--lose) }
.notes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center }
.notes li { font-size: 12.5px; font-weight: 900; background: var(--glass); border: 1.5px solid var(--line); border-radius: 99px; padding: 4px 10px }
.pw-x { font-weight: 900; color: var(--win) }
.won-fig { width: 156px; display: flex; flex-direction: column; gap: 10px; animation: boom .7s .2s cubic-bezier(.2, 1.6, .4, 1) both }
.won-fig p { font-size: 13px; font-weight: 900; color: var(--gold) }
.result .row2, .d-center .btn { width: 100% }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }
@media (max-width: 360px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .avs { grid-template-columns: repeat(6, minmax(0, 1fr)) }
  .choices { gap: 8px }
  .choice.n { font-size: 22px }
  .bets { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) }
  .bump { width: 164px; height: 164px }
  .bump span { font-size: 36px }
}

/* trivia */
.q-text { font-size: clamp(22px, 6.4vw, 28px); line-height: 1.2; overflow-wrap: anywhere }
.tclock { display: flex; align-items: center; gap: 10px; margin: 0 0 16px }
.tbar { flex: 1; height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden }
.tbar span { display: block; height: 100%; width: 100%; border-radius: 99px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); transition: width .1s linear, background .3s }
.tbar span.hurry { background: var(--lose); box-shadow: 0 0 12px var(--lose) }
.tclock b { font-family: var(--display); font-weight: 400; font-size: 28px; min-width: 34px; text-align: center; font-variant-numeric: tabular-nums }
.answers { display: grid; gap: 10px }
.answer { display: flex; align-items: center; gap: 12px; text-align: left; min-height: 58px; padding: 12px 14px; border-radius: 18px; border: 1.5px solid var(--line); background: linear-gradient(180deg, #4A2690, #321769); font-weight: 900; font-size: 16.5px; line-height: 1.25; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15), 0 5px 0 #1A0B3D; transition: transform .07s; overflow-wrap: anywhere }
.answer:active { transform: translateY(4px); box-shadow: 0 1px 0 #1A0B3D }
.answer span { flex: none; width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; font-family: var(--display); font-weight: 400; font-size: 16px }
.opp-done { margin-top: 12px; text-align: center; color: var(--gold); font-weight: 900 }

/* categorías de trivia */
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); gap: 8px }
.cat { display: flex; align-items: center; gap: 8px; min-width: 0; text-align: left; padding: 10px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--glass); font-weight: 900; font-size: 14px; transition: transform .1s }
.cat span { font-size: 20px; flex: none }
.cat.on { background: linear-gradient(180deg, #FF6FA8, var(--hot)); border-color: #fff; box-shadow: 0 0 12px rgba(255, 61, 139, .5) }
.cat:active { transform: scale(.96) }

.gps-warn { display: inline-block; margin-top: 6px; font-size: 12.5px; color: var(--gold) }

/* estilo: marcos (solo visual) */
.fig.frame-neon { background: linear-gradient(140deg, #3DE8FF, #FF3D8B); animation: neon 1.8s ease-in-out infinite }
@keyframes neon { 50% { box-shadow: 0 0 10px #3DE8FF, 0 0 26px rgba(255, 61, 139, .75), 0 8px 20px rgba(0, 0, 0, .35) } }
.fig.frame-fuego { background: conic-gradient(from var(--a, 0deg), #FFE27A, #FF8A3D, #FF3D3D, #FF8A3D, #FFE27A); animation: holo 2.2s linear infinite; box-shadow: 0 0 22px rgba(255, 110, 40, .75), 0 8px 20px rgba(0, 0, 0, .35) }
.fig.frame-hielo { background: linear-gradient(160deg, #FFFFFF, #8AF3FF 40%, #5A8BFF); box-shadow: 0 0 20px rgba(138, 243, 255, .7), 0 8px 20px rgba(0, 0, 0, .35) }
.fig.frame-holo { background: conic-gradient(from var(--a, 0deg), #FF3D8B, #FFC93D, #3DFFA2, #3DE8FF, #A23DFF, #FF3D8B); animation: holo 3s linear infinite; box-shadow: 0 0 24px rgba(255, 255, 255, .35), 0 8px 20px rgba(0, 0, 0, .35) }
.fig.frame-oro { background: linear-gradient(120deg, #8A5A00, #FFE27A 30%, #FFF6CC 45%, #C98A00 60%, #FFE27A 80%, #8A5A00); background-size: 250% 100%; animation: gold 3s linear infinite; box-shadow: 0 0 26px rgba(255, 201, 61, .7), 0 8px 20px rgba(0, 0, 0, .35) }
@keyframes gold { to { background-position: -250% 0 } }
.fig.frame-galaxia { background: radial-gradient(circle at 20% 20%, #fff 0 1px, transparent 2px), radial-gradient(circle at 75% 60%, #fff 0 1px, transparent 2px), conic-gradient(from var(--a, 0deg), #1A0B3D, #A23DFF, #2EA8FF, #1A0B3D); animation: holo 5s linear infinite; box-shadow: 0 0 28px rgba(162, 61, 255, .8), 0 8px 20px rgba(0, 0, 0, .35) }

/* grito de victoria */
.cry { font-family: var(--display); font-size: clamp(30px, 10vw, 44px); text-align: center; color: var(--gold); text-shadow: 0 3px 0 var(--gold-d), 0 0 22px rgba(255, 201, 61, .7); animation: cryIn .6s cubic-bezier(.2, 1.6, .4, 1) both; display: flex; flex-direction: column; align-items: center }
.cry.opp { color: #fff; text-shadow: 0 3px 0 var(--hot-d), 0 0 18px rgba(255, 61, 139, .7); font-size: clamp(24px, 8vw, 34px) }
.cry small { font-family: inherit; font-size: 13px; color: var(--muted); text-shadow: none; font-weight: 700 }
@keyframes cryIn { from { transform: scale(.3) rotate(-8deg); opacity: 0 } }

/* pase de temporada */
.pass-btn { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; text-align: left; width: 100%; padding: 14px 16px; border-radius: 22px; border: 1.5px solid rgba(255, 201, 61, .5); background: linear-gradient(135deg, rgba(255, 201, 61, .22), rgba(255, 61, 139, .18)); color: inherit; font: inherit; cursor: pointer }
.pass-btn span { grid-row: span 2; font-size: 30px }
.pass-btn b { font-family: var(--display); font-size: 17px }
.pass-btn small { color: var(--muted); font-size: 13px }
.x.back { align-self: flex-start }
.pass-top { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 4px }
.linkb { background: none; border: 0; color: var(--cyan); font: inherit; text-decoration: underline; cursor: pointer; padding: 0 }
.lvl { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap }
.lvl b { font-family: var(--display); font-size: 22px }
.lvl span { font-size: 13px; color: var(--muted) }
.plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.pi { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center }
.pi:not(.got) .mini { opacity: .75 }
.pi-n { font-weight: 800 }
.pi-b { display: flex; flex-direction: column; gap: 6px }
.mini { width: 56px }
.mini .fig-in { padding: 4px; gap: 2px }
.mini .fig-av { font-size: 22px }
.mini .fig-name, .mini .fig-meta, .mini .fig-pow { display: none }
.mini.cry-i { height: 56px; border-radius: 16px; background: var(--glass); border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 28px }
.plus { border-color: rgba(255, 201, 61, .45) }
.soon { font-style: normal; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; background: var(--gold); color: #4A2A00; border-radius: 7px; padding: 2px 7px; vertical-align: middle; margin-left: 6px }
.center { text-align: center }
details.how summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center }
details.how summary::-webkit-details-marker { display: none }
details.how summary::after { content: "+"; font-family: var(--display); font-size: 22px; color: var(--cyan); transition: transform .2s }
details.how[open] summary::after { transform: rotate(45deg) }

/* pregunta del día */
.daily { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; border-radius: 20px; border: 1.5px solid rgba(61, 232, 255, .45); background: linear-gradient(135deg, rgba(61, 232, 255, .18), rgba(162, 61, 255, .18)); color: inherit; font: inherit; cursor: pointer }
.daily .di { font-size: 30px }
.daily b { display: block; font-family: var(--display); font-weight: 400; font-size: 17px }
.daily small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.3 }
.daily .go { font-family: var(--display); font-size: 15px; padding: 8px 12px; border-radius: 12px; background: var(--cyan); color: #032B3A; border: 0; cursor: pointer }
.daily.done { cursor: default; border-color: var(--line) }

/* reto a distancia */
.btn.wa-big { --c1: #5BEA8C; --c2: #25D366; --cd: #128C4A; --tc: #05301A; text-shadow: none; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100% }
.btn.wa-big small, .btn.wa small { font-family: inherit; font-size: 12.5px; opacity: .85 }
.btn.wa { --c1: #5BEA8C; --c2: #25D366; --cd: #128C4A; --tc: #05301A; text-shadow: none; text-decoration: none; text-align: center }
#retos-box h3 { margin: 0 }
.rlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px }
.rlist button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 8px 10px; border-radius: 14px; border: 1.5px solid var(--line); background: rgba(0, 0, 0, .15); color: inherit; font: inherit; cursor: pointer }
.rlist .ri { font-size: 22px }
.rlist b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rlist small { display: block; font-size: 12px; color: var(--muted) }
.rlist .chev { font-size: 22px; color: var(--muted) }
.score { font-family: var(--display); font-size: 72px; line-height: 1; color: var(--gold) }
.score small { font-size: 32px; color: var(--muted) }
.vs-score { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100% }
.vs-score div { background: var(--glass); border: 1.5px solid var(--line); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; align-items: center; min-width: 0 }
.vs-score b { font-family: var(--display); font-weight: 400; font-size: 30px }
.vs-score span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100% }
.rlist-q { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; width: 100% }
.rlist-q li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .18) }
.rlist-q .rq { font-size: 13px; font-weight: 800 }
.rlist-q .rr { font-size: 12.5px }
.sheet.result .btn { width: 100% }

/* preguntas en el modal */
.quiz .q-text { margin: 0 }
.answer.sel { outline: 3px solid #fff; outline-offset: 2px }
.answer.ok { background: linear-gradient(180deg, #19C27A, #0E8A55); border-color: var(--win) }
.answer.bad { background: linear-gradient(180deg, #E0405A, #A3182F); border-color: var(--lose) }
.answer:disabled { cursor: default }
.qfb { min-height: 24px; text-align: center; font-weight: 900; font-size: 17px }

/* elegir tipo de reto y ranking del grupo */
.pick-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; align-items: center; text-align: left; width: 100%; padding: 14px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--glass); color: inherit; font: inherit; cursor: pointer }
.pick-opt span { grid-row: span 2; font-size: 30px }
.pick-opt b { font-family: var(--display); font-weight: 400; font-size: 18px }
.pick-opt small { color: var(--muted); font-size: 13px }
.board { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; max-height: 42vh; overflow-y: auto; text-align: left }
.board li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .18) }
.board li.me { background: rgba(255, 201, 61, .18); border: 1.5px solid rgba(255, 201, 61, .5) }
.board .pos { font-family: var(--display); font-size: 18px; text-align: center; color: var(--gold) }
.board .nm { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.board .sc { font-family: var(--display); font-size: 17px; text-align: right; display: flex; flex-direction: column; line-height: 1.1 }
.board .sc small { font-family: inherit; font-size: 11px; color: var(--muted) }

/* modo fiesta */
.btn.party-big { --c1: #C39BFF; --c2: #7A3DFF; --cd: #4A1FB3; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100% }
.btn.party-big small { font-family: inherit; font-size: 12.5px; opacity: .9 }
.sheet.party { gap: 10px }
.pp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0 }
.pp-top .kicker { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pp-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--glass); color: inherit; font: inherit; font-size: 15px; cursor: pointer }
.pp-code { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; background: rgba(0, 0, 0, .2); border-radius: 20px; padding: 12px }
.pp-code p { margin: 0 }
.pp-qr { background: #fff; padding: 8px; border-radius: 14px; line-height: 0; width: 156px; height: 156px; box-sizing: border-box }
.pp-qr img, .pp-qr canvas { width: 140px !important; height: 140px !important }
.pp-c { display: block; margin: 4px 0; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 9vw, 38px); letter-spacing: .06em; overflow-wrap: anywhere; color: var(--gold); line-height: 1; text-shadow: 0 3px 0 var(--gold-d) }
@media (max-width: 370px) { .pp-code { grid-template-columns: 1fr; justify-items: center; text-align: center } }
.pp-n { text-align: center; font-weight: 900; margin: 4px 0 0 }
.pp-people { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-height: 30vh; overflow-y: auto }
.pp-people:empty { display: none }
.pp-p { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px 3px 3px; border-radius: 99px; background: var(--glass); border: 1.5px solid var(--line); font-weight: 900; font-size: 13.5px; animation: ppPop .35s both; transition: border-color .2s, background .2s, opacity .2s }
.pp-p > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pp-p i, .pp-vote i, .pp-pod i { flex: none; font-style: normal; display: grid; place-items: center; border-radius: 50%; background: hsl(var(--h) 75% 60% / .35) }
.pp-p i { width: 28px; height: 28px; font-size: 17px }
.pp-p.host { border-color: var(--gold) }
.pp-p.off { opacity: .45 }
.pp-p.out { opacity: .55; text-decoration: line-through; border-color: var(--lose) }
.pp-p.ok { border-color: var(--win); background: rgba(61, 255, 162, .14) }
.pp-people.sm .pp-p { font-size: 12px; padding: 2px 8px 2px 2px }
.pp-people.sm .pp-p i { width: 22px; height: 22px; font-size: 13px }
.pp-wait { text-align: center; color: var(--muted); font-weight: 800; margin: 0 }
.pp-cd { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0 }
.pp-cd p { margin: 0; text-align: center }
.pp-cd b#pp-cd { font-family: var(--display); font-weight: 400; font-size: 104px; line-height: 1; color: var(--gold); text-shadow: 0 6px 0 var(--gold-d); animation: ppPop .45s both }
.pp-votes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr)); gap: 8px; max-height: 46vh; overflow-y: auto }
.pp-vote { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 10px 6px; border-radius: 18px; border: 1.5px solid var(--line); background: linear-gradient(180deg, #4A2690, #321769); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 4px 0 #1A0B3D; color: inherit; font: inherit; font-weight: 900; font-size: 14px; cursor: pointer }
.pp-vote:active { transform: translateY(3px); box-shadow: 0 1px 0 #1A0B3D }
.pp-vote i { width: 52px; height: 52px; font-size: 32px }
.pp-vote span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pp-vote.sel { outline: 3px solid #fff; outline-offset: 2px; background: linear-gradient(180deg, #FF6FA8, var(--hot)) }
.pp-vote:disabled { cursor: default }
.pp-vote:disabled:not(.sel) { opacity: .45 }
.q-text.sm { font-size: 18px; margin: 0 }
.answers.rv { gap: 6px }
.answers.rv .answer { min-height: 44px; padding: 8px 12px; font-size: 15px }
.answer.dim { opacity: .45 }
.qfb.ok { color: var(--win) }
.qfb.bad, .pp-big.bad { color: var(--lose) }
.pp-big { text-align: center; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 7.5vw, 32px); line-height: 1.15; margin: 4px 0 }
.pp-bars { display: flex; flex-direction: column; gap: 8px; width: 100%; max-height: 42vh; overflow-y: auto }
.pp-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; padding: 8px 10px; border-radius: 14px; background: rgba(0, 0, 0, .18); border: 1.5px solid transparent }
.pp-bar.top { background: rgba(255, 201, 61, .16); border-color: rgba(255, 201, 61, .5) }
.pp-bar .who { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pp-bar > b { font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--gold) }
.pp-bar .track { grid-column: 1 / -1; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden }
.pp-bar .track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--hot), var(--gold)); animation: ppGrow .8s cubic-bezier(.2, .9, .3, 1) both }
@keyframes ppGrow { from { width: 0 } }
.pp-bar .by { grid-column: 1 / -1; font-size: 16px; letter-spacing: 2px }
.pp-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end }
.pp-pod { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 10px 4px; border-radius: 18px 18px 8px 8px; background: rgba(0, 0, 0, .2); animation: ppPop .5s both }
.pp-pod b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px }
.pp-pod small { font-size: 11.5px; color: var(--muted); text-align: center }
.pp-pod .medal { font-size: 26px }
.pp-pod i { width: 48px; height: 48px; font-size: 28px }
.pp-pod.p1 { order: 2; padding-top: 18px; background: linear-gradient(180deg, rgba(255, 201, 61, .3), rgba(255, 201, 61, .08)); border: 1.5px solid rgba(255, 201, 61, .55); animation-delay: .3s }
.pp-pod.p1 i { width: 64px; height: 64px; font-size: 38px }
.pp-pod.p2 { order: 1; animation-delay: .15s }
.pp-pod.p3 { order: 3 }
.plus { color: var(--win) }
.board li.gap { display: block; text-align: center; background: none; padding: 0; color: var(--muted) }
@keyframes ppPop { from { transform: scale(.4); opacity: 0 } }
.party-bar { position: fixed; z-index: 7; left: 50%; transform: translateX(-50%); bottom: calc(92px + env(safe-area-inset-bottom, 0px)); width: min(440px, calc(100% - 24px)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 20px; border: 1.5px solid rgba(195, 155, 255, .7); background: linear-gradient(180deg, #5B2BC4, #3A1A8A); color: #fff; font: inherit; text-align: left; box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 22px rgba(122, 61, 255, .55); cursor: pointer; animation: pbIn .35s both }
@keyframes pbIn { from { transform: translateX(-50%) translateY(24px); opacity: 0 } }
.party-bar .pb-i { font-size: 26px }
.party-bar b { display: block; font-weight: 900; font-size: 15px }
.party-bar small { display: block; font-size: 12.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.party-bar .pb-go { font-family: var(--display); font-size: 16px; background: #fff; color: #3A1A8A; padding: 6px 12px; border-radius: 99px }

/* ---------- El Trono ---------- */
.trono { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 16px; border-radius: 22px; text-align: center; background: linear-gradient(160deg, rgba(255, 201, 61, .22), rgba(122, 61, 255, .22) 60%, rgba(26, 11, 61, .6)); border: 2px solid rgba(255, 201, 61, .7); box-shadow: 0 0 34px rgba(255, 201, 61, .25); animation: viewIn .35s ease-out; overflow: hidden }
.trono::before { content: ""; position: absolute; inset: -40% -20% auto; height: 120%; background: radial-gradient(circle at 50% 0, rgba(255, 201, 61, .28), transparent 60%); pointer-events: none }
.trono .kicker { color: var(--gold) }
.trono h2 { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.05; text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 18px rgba(255, 201, 61, .45) }
.trono.free { border-color: var(--line); background: var(--glass); box-shadow: none }
.trono.found { border-style: dashed }
.tr-owner { display: flex; gap: 14px; align-items: center; justify-content: center; text-align: left }
.tr-owner .fig { flex: 0 0 auto; transform: scale(.82); transform-origin: center }
.tr-sh { font-size: 20px; letter-spacing: 2px }
.sh-off { opacity: .22; filter: grayscale(1) }
.siege { display: flex; align-items: center; justify-content: center; gap: 10px }
.siege-bar { display: flex; gap: 6px }
.siege-bar span { width: 34px; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .15); border: 1px solid var(--line) }
.siege-bar span.on { background: linear-gradient(90deg, var(--gold), var(--hot-2)); border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 201, 61, .6) }
.siege small { font-weight: 900; color: var(--gold) }
.tr-wait, .tr-warn { font-weight: 800 }
.tr-warn { color: var(--lose) }
.btn.gold { --c1: #FFE07A; --c2: var(--gold); --cd: var(--gold-d); --tc: #3A2500; text-shadow: none; width: 100% }
.tr-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 14px; border-radius: 18px; border: 2px solid var(--lose); background: linear-gradient(135deg, rgba(255, 77, 106, .3), rgba(255, 61, 139, .15)); color: inherit; font: inherit; text-align: left; cursor: pointer; animation: hintPulse 1.8s ease-in-out infinite }
.tr-alert .tr-i { font-size: 30px }
.tr-alert b { display: block; font-size: 15px }
.tr-alert small { color: var(--muted); font-size: 13px }
.tr-rev { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--hot-2); background: rgba(255, 138, 61, .14) }
.tr-rev small { color: var(--muted) }
.tr-spot { padding: 12px 14px; border-radius: 18px; background: var(--glass); border: 1.5px dashed rgba(255, 201, 61, .45) }
.tr-spot summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; list-style: none; cursor: pointer }
.tr-spot summary::-webkit-details-marker { display: none }
.tr-spot summary > span:first-child { font-size: 26px }
.tr-spot summary b { display: block; font-size: 15px }
.tr-spot summary small { display: block; color: var(--muted); font-size: 12.5px }
.tr-spot .chev { transition: transform .2s }
.tr-steps { list-style: none; margin: 12px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px }
.tr-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; font-weight: 700 }
.tr-steps .st-i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); display: grid; place-items: center; font-size: 13px; font-weight: 900 }
.tr-steps li.done .st-i { background: var(--win); border-color: var(--win); color: #05301A }
.tr-steps li.done > span:nth-child(2) { color: var(--muted); text-decoration: line-through }
.tr-steps b { font-family: var(--mono); font-size: 13px; color: var(--gold) }
.tr-mine, .tr-near { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.tr-mine .tiny, .tr-near .tiny { width: 100% }
.tr-mine button, .tr-near button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 12px; border-radius: 14px; border: 1.5px solid rgba(255, 201, 61, .5); background: rgba(255, 201, 61, .1); color: inherit; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; max-width: 100% }
.tr-mine button i { font-style: normal; font-size: 11px }
.tr-near small { color: var(--muted); font-weight: 700; font-size: 12px }
.tr-troph { font-size: 13px; font-weight: 800; color: var(--gold) }
.radar.in-trono { border-color: var(--gold); box-shadow: 0 0 44px rgba(255, 201, 61, .45), inset 0 0 60px rgba(255, 201, 61, .18) }
.radar.in-trono .me-dot::before { content: "👑"; position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 22px; filter: drop-shadow(0 0 6px rgba(255, 201, 61, .8)) }
.tdot { position: absolute; transform: translate(-50%, -50%); z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--gold); background: rgba(58, 37, 0, .75); font-size: 20px; box-shadow: 0 0 16px rgba(255, 201, 61, .6); cursor: pointer; color: inherit; padding: 0 }
.tdot.free { border-color: var(--line); box-shadow: none; filter: grayscale(.6) }
.tdot em { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; font-style: normal; font-size: 10px; font-weight: 900; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; color: var(--gold) }
#trono-box { display: flex; flex-direction: column; gap: 10px }
#trono-box:empty { display: none }

/* ---------- Mapa de Tronos ---------- */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 99px; background: rgba(0, 0, 0, .25); border: 1.5px solid var(--line); margin-top: 6px }
.seg button { border: 0; border-radius: 99px; padding: 9px 8px; background: none; color: var(--muted); font: inherit; font-weight: 900; font-size: 14px; cursor: pointer }
.seg button.on { background: linear-gradient(180deg, #FFE07A, var(--gold)); color: #3A2500 }
.tmap { position: relative; isolation: isolate; z-index: 0; width: 100%; height: min(46vh, 380px); margin-top: 10px; border-radius: 22px; overflow: hidden; border: 2px solid rgba(255, 201, 61, .55); background: #1C0D44 }
.tmap-note { margin: 8px 4px 0; font-size: 12.5px; color: var(--muted); text-align: center }
.tmap .leaflet-control-attribution { font-size: 10px; background: rgba(0, 0, 0, .55); color: rgba(255, 255, 255, .7) }
.tmap .leaflet-control-attribution a { color: rgba(255, 255, 255, .85) }
.tmap-me { width: 34px; height: 34px; border-radius: 8px; border: 2px solid rgba(0, 0, 0, .2); background: #fff; color: #0F8FB3; font-size: 20px; line-height: 1; cursor: pointer }
.mp-place span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(30, 30, 30, .85); border: 1.5px dashed rgba(255, 255, 255, .45); font-size: 15px; filter: grayscale(.35) }
.mp-trono { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #3A2500; border: 3px solid var(--gold); box-shadow: 0 0 16px rgba(255, 201, 61, .75); font-size: 22px; cursor: pointer }
.mp-trono.mine { border-color: var(--win); box-shadow: 0 0 16px rgba(61, 255, 162, .7) }
.mp-trono.free { background: #2a2a2a; border: 2px dashed rgba(255, 255, 255, .5); box-shadow: none }
.mp-trono i { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 16px }
.mp-trono em { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px; padding: 1px 7px; border-radius: 99px; background: rgba(26, 11, 61, .9); color: var(--gold); font: 900 11px var(--body); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis }
.h3 { font-family: var(--display); font-weight: 400; font-size: 20px; margin: 18px 0 2px }
.kings li { display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) auto; gap: 10px; align-items: center }
.kings .pos { font-family: var(--display); font-size: 20px; text-align: center; color: var(--gold) }
.kings .av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: hsl(var(--h) 60% 35%); font-size: 22px }
.kings .who { min-width: 0 }
.kings .who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.kings .who small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.kings .n { font-weight: 900; color: var(--gold); white-space: nowrap }
.kings li.me { border-color: var(--gold) }
.kings .empty-k { grid-template-columns: auto minmax(0, 1fr) }
.kings .empty-k > span:first-child { font-size: 28px }
.kings .empty-k small { display: block; color: var(--muted); font-size: 13px; white-space: normal }
.crowns { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px }
.crowns li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap }
.crowns small { color: var(--muted) }
.tmap.osm .leaflet-tile-pane { filter: invert(1) hue-rotate(195deg) brightness(.85) contrast(.95) saturate(.7) }
.linkish { background: none; border: 0; padding: 4px; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; align-self: center }
/* Poderes del Trono */
.tr-pw { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 16px; border: 1.5px solid rgba(195, 155, 255, .5); background: rgba(122, 61, 255, .14); color: inherit; font: inherit; cursor: pointer }
.tr-pw .tiny { margin-right: auto }
.tr-pw i { font-style: normal; font-size: 18px; display: inline-flex; align-items: center; gap: 2px }
.tr-pw i b { font-size: 13px; font-weight: 900 }
.tr-pw i.off { opacity: .35; filter: grayscale(1) }
.pw-list, .spy { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left }
.pw-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: var(--glass); border: 1.5px solid var(--line) }
.pw-list li > span:first-child { font-size: 26px }
.pw-list small { display: block; color: var(--muted); font-size: 13px }
.spy li { padding: 10px 12px; border-radius: 12px; background: var(--glass); border: 1.5px solid var(--line); font-weight: 700 }
.answer.gone { opacity: .25; text-decoration: line-through }
.fifty { align-self: center }
.poster img { width: min(100%, 300px); aspect-ratio: 9 / 16; align-self: center; border-radius: 18px; border: 2px solid var(--gold); box-shadow: 0 10px 30px rgba(0, 0, 0, .5) }
/* Logo dibujado (marca.js): reemplaza al texto apenas está listo. */
html.logo-ready .logo { color: transparent; -webkit-text-fill-color: transparent; background: var(--logo-h) no-repeat left center / contain; width: clamp(170px, 52vw, 236px); height: clamp(50px, 15vw, 68px); overflow: hidden; filter: drop-shadow(0 4px 10px rgba(255, 140, 40, .35)) }
html.logo-ready .onb .logo { background-image: var(--logo-v); background-position: center; width: min(100%, 360px); height: auto; aspect-ratio: 1400 / 860; margin: 0 auto }
html.logo-ready .logo, html.logo-ready .logo * { font-size: 0 !important; color: transparent !important; -webkit-text-fill-color: transparent !important }
/* Encabezado: que nunca se salga de la pantalla en celulares angostos. */
html.logo-ready .logo { flex: 0 1 auto; width: clamp(150px, 50vw, 236px); min-width: 140px }
.top { min-width: 0 }
.hdr-r { flex-shrink: 1 }
.tabs-in { grid-template-columns: repeat(3, 1fr); max-width: 380px }
.lang-seg { margin-top: 0 }
/* Código de recuperación */
.rec-warn { border-color: rgba(255, 201, 61, .7); background: rgba(255, 201, 61, .1) }
.rec-code { font-family: var(--mono); font-size: clamp(20px, 6.5vw, 28px); letter-spacing: .06em; color: var(--gold); background: rgba(0, 0, 0, .35); border: 2px dashed var(--gold); border-radius: 16px; padding: 14px 10px; margin: 4px 0; user-select: all; -webkit-user-select: all; word-break: break-all }
.rec-nudge { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--gold); background: rgba(255, 201, 61, .12); color: inherit; font: inherit; text-align: left; cursor: pointer; font-size: 22px }
.rec-nudge b { display: block; font-size: 15px }
.rec-nudge small { display: block; color: var(--muted); font-size: 12.5px }
/* Tu reino */
.reino { border-color: rgba(255, 201, 61, .45) }
.reino-top { display: flex; align-items: center; justify-content: space-between }
.gold-pill { font-weight: 900; background: linear-gradient(180deg, #FFE07A, var(--gold)); color: #3A2500; border-radius: 99px; padding: 4px 12px }
.tb-top { display: flex; justify-content: space-between; align-items: center; font-weight: 900; font-size: 14px }
.tb-top b { color: var(--gold) }
.tributo, .misiones { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(0, 0, 0, .2) }
.gold-bar span { background: linear-gradient(90deg, #FFE07A, var(--gold)) }
.misiones ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px }
.misiones li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 700 }
.misiones .st-i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); display: grid; place-items: center; font-size: 12px }
.misiones li.done .st-i { background: var(--win); border-color: var(--win); color: #05301A }
.misiones li.done > span:nth-child(2) { color: var(--muted); text-decoration: line-through }
.misiones b { font-family: var(--mono); font-size: 12px; color: var(--gold) }
.reino .row2 .btn { display: flex; flex-direction: column; align-items: center; gap: 2px }
.reino .row2 .btn small { font-family: var(--body); font-size: 11px; opacity: .85 }
.upg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left }
.upg li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--glass) }
.upg li > span:first-child { font-size: 22px }
.upg small { display: block; color: var(--muted); font-size: 12.5px }
.upg-done { margin: 0; font-weight: 800; color: var(--win) }
.reino .btn.off { opacity: .6 }
/* ---------- Presentación (ayuda.js) ---------- */
.intro { display: flex; flex-direction: column; gap: 10px; text-align: center }
.intro h2 { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.05; color: var(--gold); text-shadow: 0 2px 0 rgba(0, 0, 0, .35) }
.ia { height: 200px; border-radius: 22px; overflow: hidden; position: relative; background: radial-gradient(120% 90% at 50% 10%, #5B2BC4, #1A0B3D); border: 2px solid rgba(255, 201, 61, .5) }
.ia-step { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .12em; color: var(--muted) }
.ia-b { min-height: 150px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left }
.ia-b li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.4 }
.ia-b li::before { content: "👑"; position: absolute; left: 0; top: 1px; font-size: 13px }
.ia-b b { color: var(--gold) }
.ia-dots { display: flex; gap: 6px; justify-content: center; margin: 4px 0 }
.ia-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .25) }
.ia-dots i.on { width: 22px; border-radius: 99px; background: var(--gold) }
/* paso 1: mapa */
.ia-map { position: absolute; inset: 0; background: #2a2a3a }
.ia-map .st { position: absolute; background: #4a4a60 }
.ia-map .h1 { left: 0; right: 0; top: 38%; height: 12px } .ia-map .h2 { left: 0; right: 0; top: 76%; height: 10px }
.ia-map .v1 { top: 0; bottom: 0; left: 40%; width: 12px } .ia-map .v2 { top: 0; bottom: 0; left: 70%; width: 10px; transform: skewX(-12deg) }
.ia-pin { position: absolute; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: rgba(30, 30, 30, .9); border: 2px dashed rgba(255, 255, 255, .5) }
.ia-pin.gold { width: 50px; height: 50px; font-size: 24px; background: #3A2500; border: 3px solid var(--gold); box-shadow: 0 0 18px rgba(255, 201, 61, .7) }
.ia-pin em { position: absolute; top: -16px; font-style: normal; font-size: 16px }
.ia-me { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--cyan); border: 3px solid #fff; box-shadow: 0 0 0 10px rgba(61, 232, 255, .2) }
/* paso 2: duelo */
.ia-duel { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 18px 16px }
.ia-av { justify-self: center; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 36px; background: linear-gradient(180deg, #FF6FA8, var(--hot)); border: 3px solid #fff }
.ia-av.r { background: linear-gradient(180deg, #6FE3FF, #0F8FB3) }
.ia-vs { font-family: var(--display); font-weight: 400; font-size: 30px; color: var(--gold); align-self: center }
.ia-q { grid-column: 1 / -1; margin-top: 10px; background: rgba(0, 0, 0, .35); border-radius: 14px; padding: 8px 10px; text-align: left }
.ia-q small { font-weight: 900; color: var(--gold) } .ia-q p { margin: 2px 0 6px; font-size: 13px; font-weight: 800 }
.ia-opt { display: inline-block; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 99px; margin-right: 6px; background: rgba(255, 255, 255, .12) }
.ia-opt.ok { background: var(--win); color: #05301A }
.ia-guard { position: absolute; right: 12px; bottom: 10px; font-size: 26px }
/* paso 3: defensa */
.ia-def { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px }
.ia-notif { display: flex; gap: 12px; align-items: center; background: rgba(255, 255, 255, .92); color: #2a0a3d; border-radius: 14px; padding: 8px 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); animation: hintPulse 2s ease-in-out infinite }
.ia-shields { font-size: 30px; letter-spacing: 4px }
.ia-castle { font-size: 54px; position: relative } .ia-castle em { position: absolute; right: -22px; bottom: 0; font-style: normal; font-size: 30px }
/* paso 4: crecer */
.ia-grow { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; padding: 18px; gap: 10px }
.ia-coins { font-size: 40px; text-align: center; align-self: center } .ia-coins b { display: block; font-size: 18px; color: var(--gold) }
.ia-lv { display: flex; align-items: flex-end; gap: 5px; height: 130px }
.ia-lv span { flex: 1; min-width: 0; overflow: visible; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #FFE07A, var(--gold-d)); display: grid; place-items: start center; font-size: 18px }
.ia-mis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; align-self: center }
.ia-mis li { height: 22px; border-radius: 8px; background: rgba(255, 255, 255, .12); font-weight: 900; color: #05301A; display: grid; place-items: center start; padding-left: 6px }
.ia-mis li:not(:empty) { background: var(--win) }
/* ---------- Ayuda ---------- */
.faq { display: flex; flex-direction: column; gap: 10px; margin-top: 12px }
.faq details summary { list-style: none; cursor: pointer }
.faq details summary::-webkit-details-marker { display: none }
.faq details summary { display: flex; align-items: center; gap: 10px }
.faq details summary h3 { flex: 1 }
.faq details summary::after { content: "›"; font-size: 24px; font-weight: 900; color: var(--gold) }
.faq details h3 { margin: 0; font-size: 16px }
.faq details p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--text) }
.faq details p b { color: var(--gold) }
.help-link { display: block; width: 100%; margin: 6px 0 4px; padding: 12px; border-radius: 16px; border: 1.5px dashed var(--line); background: none; color: var(--muted); font: inherit; font-weight: 800; cursor: pointer }
.prof-help { margin: 4px 0 }
/* ---------- Jugar con gente ---------- */
.gente { gap: 10px }
.gente .wa-big, .gente .party-big { margin: 0 }
.loc-card.slim { padding: 12px 14px; align-items: center }
.loc-card.slim > div { gap: 4px }
.loc-card.slim h3 { font-size: 18px }
.loc-card.slim p { margin: 0; font-size: 13px }
.loc-card.slim .btn { align-self: flex-start; margin-top: 4px }
#alerts-box:empty, #trono-box:empty { display: none }
#alerts-box, #trono-box { display: flex; flex-direction: column; gap: 10px }
.intro { touch-action: pan-y; user-select: none; -webkit-user-select: none }
.intro.in-r { animation: introInR .28s ease-out } .intro.in-l { animation: introInL .28s ease-out }
@keyframes introInR { from { transform: translateX(60px); opacity: 0 } }
@keyframes introInL { from { transform: translateX(-60px); opacity: 0 } }
.ia-dots i { cursor: pointer; transition: width .2s ease, background .2s ease }
.ia-dots { padding: 6px 0 }
/* ---------- Mapa simple ---------- */
#tmap-box { position: relative }
.tmap-note { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 2; margin: 0; padding: 6px 12px; border-radius: 99px; background: rgba(12, 4, 36, .88); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; pointer-events: none }
.tmap-legend { position: absolute; left: 10px; top: 20px; z-index: 2; display: flex; gap: 10px; padding: 5px 10px; border-radius: 99px; background: rgba(12, 4, 36, .82); font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, .85); pointer-events: none }
.tmap-legend span { display: inline-flex; align-items: center; gap: 4px }
.tmap-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50% }
.lg-t { background: #3A2500; border: 2px solid var(--gold) } .lg-f { background: rgba(255, 201, 61, .35); border: 2px solid var(--gold); transform: scale(.75) } .lg-m { background: #0B3A22; border: 2px solid var(--win) }
.tmap-fs { position: absolute; top: 20px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, .25); background: rgba(12, 4, 36, .85); color: #fff; font-size: 20px; line-height: 1; cursor: pointer }
#tmap-box.full { position: fixed; inset: 0; z-index: 15; background: #0C0424 }
#tmap-box.full .tmap { height: 100%; margin: 0; border: 0; border-radius: 0 }
#tmap-box.full .tmap-fs { top: calc(12px + env(safe-area-inset-top)); width: 44px; height: 44px; font-size: 18px }
#tmap-box.full .tmap-note { bottom: calc(34px + env(safe-area-inset-bottom)) }
#tmap-box.full .tmap-legend { top: calc(14px + env(safe-area-inset-top)) }
body.map-full { overflow: hidden }
.mp-dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 201, 61, .35); border: 2px solid var(--gold); box-shadow: 0 0 8px rgba(255, 201, 61, .55); cursor: pointer }
.mp-dot.big { width: 28px; height: 28px; display: grid; place-items: center; font-size: 14px; background: rgba(40, 20, 0, .85) }
.mp-dot.near { border-color: var(--cyan); animation: dotPulse 1.6s ease-out infinite }
@keyframes dotPulse { 0% { box-shadow: 0 0 0 0 rgba(61, 232, 255, .7) } 100% { box-shadow: 0 0 0 14px rgba(61, 232, 255, 0) } }
.mp-trono { width: 40px; height: 40px; font-size: 20px }
/* ---------- Hoy, Tu reino y Jugar con gente, compactos ---------- */
.hoy { border-color: rgba(61, 232, 255, .4) }
.hoy .daily { border: 0; background: rgba(0, 0, 0, .22); padding: 10px 12px; border-radius: 16px }
.mis summary { display: grid; grid-template-columns: auto auto auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(0, 0, 0, .22); list-style: none; cursor: pointer; font-weight: 900; font-size: 14px }
.mis summary::-webkit-details-marker { display: none }
.mis summary b { font-family: var(--mono); font-size: 12px; color: var(--gold) }
.mis-dots { display: inline-flex; gap: 4px }
.mis-dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35) }
.mis-dots i.on { background: var(--win); border-color: var(--win) }
.mis-r { justify-self: end; font-size: 13px }
.mis > summary .chev { grid-column: 5; justify-self: end; font-size: 22px; line-height: 1; color: var(--muted); transform: none; transition: transform .2s ease }
.mis[open] > summary .chev { transform: rotate(90deg) }
.mis-r { grid-column: 4 }
.mis ul { list-style: none; margin: 10px 0 0; padding: 0 4px; display: flex; flex-direction: column; gap: 8px }
.mis li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 700 }
.mis .st-i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); display: grid; place-items: center; font-size: 12px }
.mis li.done .st-i { background: var(--win); border-color: var(--win); color: #05301A }
.mis li.done > span:nth-child(2) { color: var(--muted); text-decoration: line-through }
.mis li b { font-family: var(--mono); font-size: 12px; color: var(--gold) }
.mis .tiny { margin: 8px 4px 0 }
.rs-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.rs { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1.5px solid transparent; color: inherit; font: inherit }
button.rs { cursor: pointer; border-color: rgba(195, 155, 255, .45) }
.rs b { font-family: var(--display); font-weight: 400; font-size: 18px }
.rs small { font-size: 11px; color: var(--muted); font-weight: 800 }
.g-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px }
.g-tiles button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 16px; border: 1.5px solid var(--line); background: rgba(255, 255, 255, .06); color: inherit; font: inherit; font-weight: 900; font-size: 12px; cursor: pointer }
.g-tiles button span { font-size: 24px; line-height: 1 }
.g-tiles button[data-act="reto"] { border-color: rgba(61, 255, 162, .5); background: rgba(61, 255, 162, .1) }
.g-tiles button[data-act="party"] { border-color: rgba(195, 155, 255, .55); background: rgba(122, 61, 255, .16) }
/* ---------- Perfil y Reyes simples ---------- */
.prof-hero { display: flex; flex-direction: column; gap: 12px; align-items: stretch }
#badge { display: block; width: min(64vw, 260px); height: auto; aspect-ratio: 900 / 1080; margin: 0 auto -4px; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45)) }
.prof-hero .tiny.center { text-align: center; margin: 0 }
.prof-hero .linkish { align-self: center }
.set-list { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; border: 1.5px solid var(--line); background: var(--glass) }
.set + .set { border-top: 1.5px solid var(--line) }
.set summary, .set-btn { display: grid; grid-template-columns: 28px auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px 16px; list-style: none; cursor: pointer; width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left }
.set summary::-webkit-details-marker { display: none }
.set-i { font-size: 20px; text-align: center }
.set summary b, .set-btn b { font-size: 15px }
.set summary small, .set-btn small { justify-self: end; color: var(--muted); font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100% }
.set .chev { color: var(--muted); transition: transform .2s }
.set-in { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px }
.set.warn summary small { color: var(--gold) }
.set.warn { background: rgba(255, 201, 61, .08) }
.linkish.del { align-self: center; color: var(--lose); margin: 4px 0 8px }
.rank-seg { margin: 4px 0 0 }
/* Flechas de lo que se despliega: abajo cerrado, arriba abierto. */
details > summary .chev, .faq details > summary::after { display: inline-block; transform: rotate(90deg); transition: transform .2s }
details[open] > summary .chev, .faq details[open] > summary::after { transform: rotate(-90deg) }
/* Interruptor (sonido en Perfil) */
.sw { position: relative; width: 42px; height: 24px; border-radius: 99px; background: rgba(255, 255, 255, .18); transition: background .2s }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s }
.sw.on { background: var(--win) } .sw.on::after { transform: translateX(18px) }
.photo-box { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 12px; border-top: 1.5px solid var(--line) }
.photo-box .tiny { margin: 0 }
/* ---------- Cofre Real ---------- */
.cofre-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 10px 12px; border-radius: 16px; border: 0; background: rgba(0, 0, 0, .22); color: inherit; font: inherit }
button.cofre-row { cursor: pointer }
.cofre-row .cr-i { font-size: 28px; filter: drop-shadow(0 0 8px rgba(255, 201, 61, .7)) }
.cofre-row b { display: block; font-family: var(--display); font-weight: 400; font-size: 16px; color: var(--gold) }
.cofre-row small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.3 }
.cofre-row .go { font-family: var(--display); font-size: 15px; padding: 8px 12px; border-radius: 12px; background: linear-gradient(180deg, #FFE07A, var(--gold)); color: #3A2500 }
.cofre-row.live { background: linear-gradient(135deg, rgba(255, 201, 61, .28), rgba(255, 61, 139, .22)); box-shadow: 0 0 0 1.5px rgba(255, 201, 61, .7) inset; animation: hintPulse 2s ease-in-out infinite }
.cofre-art { width: 92px; height: 92px; margin: 0 auto; display: grid; place-items: center; font-size: 50px; border-radius: 24px; background: linear-gradient(180deg, #7A3DFF, #3A1478); border: 3px solid var(--gold); box-shadow: 0 0 30px rgba(255, 201, 61, .55) }
.cofre-rules { list-style: none; margin: 4px 0; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .25); text-align: left; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 700 }
.cofre-rules li::before { content: "⚔️ " }
.cofre-rank { max-height: 46vh; overflow-y: auto; text-align: left }
.cofre-rank li { grid-template-columns: 30px 34px minmax(0, 1fr) auto }
.cofre-rank li:not(.alive) { opacity: .75 }
.cofre-rank .av { font-size: 22px; text-align: center }
.cofre-rank .nm em { color: var(--win) }
.mp-cofre { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-size: 26px; background: linear-gradient(180deg, #8A4DFF, #3A1478); border: 3px solid var(--gold); box-shadow: 0 0 18px rgba(255, 201, 61, .8); cursor: pointer }
.mp-cofre.open { animation: cofrePulse 1.4s ease-out infinite }
.mp-cofre em { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; padding: 1px 8px; border-radius: 99px; background: var(--gold); color: #3A2500; font: 900 11px var(--body); font-style: normal; white-space: nowrap }
@keyframes cofrePulse { 0% { box-shadow: 0 0 0 0 rgba(255, 201, 61, .8) } 100% { box-shadow: 0 0 0 18px rgba(255, 201, 61, 0) } }
/* ---------- Colección de cartas ---------- */
.col-head { display: flex; align-items: center; justify-content: space-between }
.col-seg { grid-template-columns: repeat(4, 1fr) }
.col-seg button { padding: 9px 2px; font-size: 13px }
.col-seg small { opacity: .7 }
.col-leg { display: flex; gap: 12px; justify-content: center; margin: 0 }
.rl { font-weight: 900 } .rl.ir { color: #A9B3C7 } .rl.br { color: #E39B5B } .rl.pl { color: #E6EDF8 } .rl.or { color: var(--gold) }
.cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.ccard { --c1: #6B7590; --c2: #2C3142; --rim: #A9B3C7; position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 0; aspect-ratio: 3 / 4.1; border-radius: 14px; border: 3px solid var(--rim); background: linear-gradient(180deg, var(--c1), var(--c2)); color: #fff; font: inherit; overflow: hidden; cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, .35) }
.ccard.br { --c1: #C9773A; --c2: #6B3412; --rim: #F0A868 }
.ccard.pl { --c1: #9AA8C8; --c2: #46506E; --rim: #EEF3FF }
.ccard.or { --c1: #E8A92A; --c2: #7A4A00; --rim: #FFE07A; box-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 0 16px rgba(255, 201, 61, .55) }
.cc-gem { position: absolute; top: 4px; left: 6px; z-index: 1; color: var(--rim); font-size: 14px; text-shadow: 0 1px 0 #000 }
.cc-art { flex: 1; display: grid; place-items: center; font-size: clamp(34px, 11vw, 46px); background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .35), transparent 65%); position: relative }
.cc-art i { position: absolute; right: 8px; bottom: 6px; font-style: normal; font-size: 18px }
.cc-nm { padding: 4px 6px 0; font-family: var(--display); font-size: 13px; line-height: 1.1; text-align: center; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.cc-sub { padding: 2px 6px 6px; font-size: 10.5px; font-weight: 900; text-align: center; color: rgba(255, 255, 255, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.col-empty { text-align: center; align-items: center }
.card-info .ci-top { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.card-info .ci-top h2 { font-size: 22px }
.ci-main { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 10px }
.ccard.big { width: 120px; cursor: default }
.ccard.big .cc-art { font-size: 54px }
.ci-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .3) }
.ci-tags small { display: block; font-size: 11px; color: var(--muted); font-weight: 900 }
.ci-tags b { font-family: var(--display); font-weight: 400; font-size: 16px }
.ci-side p { font-size: 14px; line-height: 1.45; margin: 10px 0 0 }
.ci-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px }
.ci-stats div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .08) }
.ci-stats span { grid-row: span 2; font-size: 22px; align-self: center }
.ci-stats small { font-size: 11px; color: var(--muted); font-weight: 900 }
.ci-stats b { font-family: var(--display); font-weight: 400; font-size: 17px }
/* ---------- Camino de rangos ---------- */
#pts { cursor: pointer }
.rank-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 12px 14px; border-radius: 18px; border: 1.5px solid rgba(255, 201, 61, .55); background: linear-gradient(135deg, rgba(255, 201, 61, .16), rgba(122, 61, 255, .2)); color: inherit; font: inherit; text-align: left; cursor: pointer }
.rk-i { font-size: 32px }
.rk-b b { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; color: var(--gold) }
.rk-b small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 800 }
.rk-bar, .rk-req .bar { display: block; height: 8px; margin-top: 6px; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden }
.rk-bar > span, .rk-req .bar > b { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FFE07A, var(--gold)) }
.rank-card .chev { color: var(--muted) }
.rank-up .rk-big { font-size: 72px; line-height: 1; filter: drop-shadow(0 6px 18px rgba(255, 201, 61, .6)) }
.rk-un { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center }
.rk-un li, .rd-un span { padding: 5px 10px; border-radius: 99px; background: rgba(255, 201, 61, .14); border: 1px solid rgba(255, 201, 61, .4); font-size: 12.5px; font-weight: 800 }
.rk-req { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100% }
.rk-req li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 700 }
.rk-req li > span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); display: grid; place-items: center; font-size: 11px }
.rk-req li.done > span { background: var(--win); border-color: var(--win); color: #05301A }
.rk-req li em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--gold) }
.rk-req li .bar { grid-column: 2 / -1; margin-top: 0 }
.road { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding-left: 4px }
.road::before { content: ""; position: absolute; left: 31px; top: 30px; bottom: 30px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, rgba(255, 255, 255, .15), var(--gold)) }
.rd-node { position: relative; width: 100%; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: start }
.rd-i { position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 30px; background: #2A1458; border: 2.5px solid rgba(255, 255, 255, .25) }
.rd-node.rd-done .rd-i { border-color: var(--gold); background: linear-gradient(180deg, #5A3200, #2A1458) }
.rd-node.rd-cur .rd-i { border-color: var(--gold); background: linear-gradient(180deg, #FFE07A, var(--gold-d)); box-shadow: 0 0 22px rgba(255, 201, 61, .7); transform: scale(1.08) }
.rd-node.rd-lock .rd-i span { filter: grayscale(1); opacity: .5 }
.rd-i i { position: absolute; right: -6px; bottom: -6px; font-style: normal; font-size: 18px }
.rd-b { padding: 10px 12px; border-radius: 16px; background: var(--glass); border: 1.5px solid var(--line); display: flex; flex-direction: column; gap: 6px }
.rd-node.rd-cur .rd-b { border-color: var(--gold) }
.rd-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px }
.rd-h b { font-family: var(--display); font-weight: 400; font-size: 19px }
.rd-h small { color: var(--gold); font-weight: 900; font-size: 12px }
.rd-node.rd-lock .rd-h b { color: var(--muted) }
.rd-un { display: flex; flex-wrap: wrap; gap: 6px }
.rd-node.rd-lock .rd-un span { background: rgba(255, 255, 255, .06); border-color: var(--line); color: var(--muted) }
.title-seg { grid-template-columns: repeat(4, 1fr) }
.title-seg button { font-size: 13px; padding: 9px 2px }
/* ---------- Desafíos especiales y mazo ---------- */
.rx-pad { display: grid; place-items: center; width: 100%; aspect-ratio: 1.4; border-radius: 24px; border: 3px dashed rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .3); color: var(--muted); font: inherit; font-family: var(--display); font-size: 22px; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none }
.rx-pad.go { border: 3px solid var(--gold); background: radial-gradient(circle, rgba(255, 201, 61, .45), rgba(122, 61, 255, .3)); font-size: 96px; animation: rxPop .18s ease-out }
.rx-pad.ok { border-color: var(--win) } .rx-pad.bad { border-color: var(--lose) }
@keyframes rxPop { from { transform: scale(.85) } }
.memo-seq { text-align: center; font-size: clamp(34px, 11vw, 46px); letter-spacing: .08em; padding: 18px 8px; border-radius: 20px; background: rgba(0, 0, 0, .3); border: 2px solid rgba(255, 201, 61, .5) }
.quiz .answer { overflow-wrap: anywhere }
.deck-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border-radius: 16px; border: 1.5px solid rgba(195, 155, 255, .45); background: rgba(122, 61, 255, .14); color: inherit; font: inherit; text-align: left; cursor: pointer }
.deck-row.off { opacity: .7 }
.dk-i { font-size: 24px }
.deck-row b { display: block; font-size: 14.5px } .deck-row small { display: block; color: var(--muted); font-size: 12px }
.dk-cards { display: flex; gap: 4px } .dk-cards i { font-style: normal; width: 30px; height: 38px; border-radius: 8px; display: grid; place-items: center; font-size: 17px; background: linear-gradient(180deg, #9AA8C8, #46506E); border: 2px solid #EEF3FF }
.deck-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 4px }
.dk-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; border: 2px solid var(--line); background: rgba(255, 255, 255, .06); color: inherit; font: inherit; cursor: pointer }
.dk-card span { font-size: 26px } .dk-card b { font-size: 12px; text-align: center }
.dk-card.sp { border-color: rgba(255, 201, 61, .45) }
.dk-card.on { border-color: var(--gold); background: rgba(255, 201, 61, .18); box-shadow: 0 0 12px rgba(255, 201, 61, .45) }
.dk-card em { position: absolute; top: -8px; right: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 12px; background: var(--gold); color: #3A2500 }
/* ---------- Personajes ---------- */
.hero-av { display: inline-block; width: 1.3em; height: 1.3em; border-radius: 50%; vertical-align: middle; object-fit: cover; flex-shrink: 0 }
.hero-pick { display: flex; flex-direction: column; gap: 10px }
.hero-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.hero-opt { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 5px; border-radius: 14px; border: 2px solid var(--line); background: rgba(255, 255, 255, .05); color: inherit; font: inherit; cursor: pointer }
.hero-opt img { width: 100%; max-width: 64px; aspect-ratio: 1; border-radius: 50% }
.hero-opt span { font-size: 11px; font-weight: 900; color: var(--muted) }
.hero-opt.on { border-color: var(--gold); background: rgba(255, 201, 61, .16); box-shadow: 0 0 14px rgba(255, 201, 61, .45) }
.hero-opt.on span { color: var(--gold) }
.skin-row { display: flex; gap: 10px; justify-content: center }
.skin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); cursor: pointer }
.skin.on { border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 201, 61, .6) }
/* Mapa alegre (prueba) */
.tmap-st { position: absolute; top: 66px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, .25); background: rgba(12, 4, 36, .85); font-size: 18px; line-height: 1; cursor: pointer }
#tmap-box.full .tmap-st { top: calc(64px + env(safe-area-inset-top)); width: 44px; height: 44px }
.tmap.vivid { background: #9BD86E }
.tmap.vivid .mp-dot { background: #FFD84D; border-color: #6A3A00; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7) }
.tmap.vivid .mp-dot.near { border-color: #0A6A9A; background: #3DE8FF }
.tmap.vivid .mp-trono { box-shadow: 0 0 0 3px #fff, 0 6px 12px rgba(0, 0, 0, .35) }
/* ---------- Clanes ---------- */
.clan-tag { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--cc); color: #1A0B3D; font: 900 11px var(--body); letter-spacing: .05em; vertical-align: middle }
.clan-row b { display: flex; align-items: center; gap: 6px }
.clan-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center }
.clan-crest { width: 110px; height: 128px; display: grid; place-items: center; clip-path: polygon(50% 100%, 6% 70%, 4% 6%, 50% 0, 96% 6%, 94% 70%); background: linear-gradient(180deg, var(--cc), color-mix(in srgb, var(--cc) 45%, #1A0B3D)); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)) }
.clan-crest span { font-family: var(--display); font-size: 32px; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .45) }
.clan-pw { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.clan-pw li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; border-radius: 14px; background: rgba(0, 0, 0, .2); opacity: .6 }
.clan-pw li.on { opacity: 1; box-shadow: 0 0 0 1.5px rgba(255, 201, 61, .5) inset }
.clan-pw li > span:first-child { font-size: 22px }
.clan-pw b { display: block } .clan-pw small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35 }
.clan-members li, .clan-list li { grid-template-columns: 30px 40px minmax(0, 1fr) auto }
.clan-list li { grid-template-columns: auto minmax(0, 1fr) auto }
.clan-list .nm small, #clan-rank .nm small { display: block; font-size: 12px; color: var(--muted); font-weight: 700 }
.clan-members .nm em { font-style: normal }
.clan-colors { display: flex; gap: 10px; flex-wrap: wrap }
.clan-colors .cc { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); cursor: pointer }
.clan-colors .cc.on { border-color: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .6) }
.rank-seg3 { grid-template-columns: repeat(3, 1fr) }
.mp-trono.clan { border-color: var(--cc) !important; box-shadow: 0 0 14px var(--cc) }
.mp-ctag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 0 5px; border-radius: 5px; background: var(--cc); color: #1A0B3D; font: 900 9.5px var(--body); line-height: 1.5; letter-spacing: .04em }
/* ---------- Transiciones (fx.js) ---------- */
.fx-coin { position: absolute; left: -12px; top: -12px; opacity: 0; font-size: 24px; line-height: 1; pointer-events: none; will-change: transform, opacity; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45)) }
.fx-bump { animation: fxBump .45s ease-out }
@keyframes fxBump { 30% { transform: scale(1.22) } 65% { transform: scale(.94) } }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.92) } }
@keyframes rowIn { from { opacity: 0; transform: translateX(-12px) } }
@keyframes growW { from { width: 0 } }
@keyframes softIn { from { opacity: 0; transform: translateY(-6px) } }
@keyframes popIn { 0% { transform: scale(.85) } 60% { transform: scale(1.08) } }
.cgrid .ccard, .deck-grid .dk-card, .hero-grid .hero-opt { animation: cardIn .38s ease-out backwards }
.rank li, .road .rd-node, .clan-pw li, .mis li, .rk-req li { animation: rowIn .32s ease-out backwards }
.cgrid .ccard:nth-child(2), .deck-grid .dk-card:nth-child(2), .hero-grid .hero-opt:nth-child(2), .rank li:nth-child(2), .road .rd-node:nth-child(2) { animation-delay: 40ms }
.cgrid .ccard:nth-child(3), .deck-grid .dk-card:nth-child(3), .hero-grid .hero-opt:nth-child(3), .rank li:nth-child(3), .road .rd-node:nth-child(3) { animation-delay: 80ms }
.cgrid .ccard:nth-child(4), .deck-grid .dk-card:nth-child(4), .hero-grid .hero-opt:nth-child(4), .rank li:nth-child(4), .road .rd-node:nth-child(4) { animation-delay: 120ms }
.cgrid .ccard:nth-child(5), .deck-grid .dk-card:nth-child(5), .hero-grid .hero-opt:nth-child(5), .rank li:nth-child(5), .road .rd-node:nth-child(5) { animation-delay: 160ms }
.cgrid .ccard:nth-child(6), .deck-grid .dk-card:nth-child(6), .hero-grid .hero-opt:nth-child(6), .rank li:nth-child(6), .road .rd-node:nth-child(6) { animation-delay: 200ms }
.cgrid .ccard:nth-child(7), .deck-grid .dk-card:nth-child(7), .hero-grid .hero-opt:nth-child(7), .rank li:nth-child(7), .road .rd-node:nth-child(7) { animation-delay: 240ms }
.cgrid .ccard:nth-child(8), .deck-grid .dk-card:nth-child(8), .hero-grid .hero-opt:nth-child(8), .rank li:nth-child(8), .road .rd-node:nth-child(8) { animation-delay: 280ms }
.cgrid .ccard:nth-child(9), .deck-grid .dk-card:nth-child(9), .hero-grid .hero-opt:nth-child(9), .rank li:nth-child(9), .road .rd-node:nth-child(9) { animation-delay: 320ms }
.cgrid .ccard:nth-child(10), .deck-grid .dk-card:nth-child(10), .hero-grid .hero-opt:nth-child(10), .rank li:nth-child(10), .road .rd-node:nth-child(10) { animation-delay: 360ms }
.cgrid .ccard:nth-child(11), .deck-grid .dk-card:nth-child(11), .hero-grid .hero-opt:nth-child(11), .rank li:nth-child(11), .road .rd-node:nth-child(11) { animation-delay: 400ms }
.cgrid .ccard:nth-child(12), .deck-grid .dk-card:nth-child(12), .hero-grid .hero-opt:nth-child(12), .rank li:nth-child(12), .road .rd-node:nth-child(12) { animation-delay: 440ms }
.rk-bar > span, .rk-req .bar > b, .bar > span, .bar span { animation: growW .9s cubic-bezier(.3, .7, .3, 1) backwards }
.set[open] > .set-in, .mis[open] > ul, details.panel[open] > p { animation: softIn .25s ease-out }
.hero-opt.on, .dk-card.on, .av-pick.on, .seg button.on, .skin.on, .cc.on { animation: popIn .3s ease-out }
.gold-pill, #pts { display: inline-block; transition: transform .2s }
.g-tiles button, .rs, .deck-row, .rank-card, .cofre-row, .set summary, .set-btn { transition: transform .12s ease, filter .12s ease }
.g-tiles button:active, button.rs:active, .deck-row:active, .rank-card:active, button.cofre-row:active, .set summary:active, .set-btn:active, .ccard:active { transform: scale(.96); filter: brightness(1.1) }

/* inicio: tarjeta "Ahora" y secciones plegables */
#home-next:empty { display: none }
.next { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 22px; border: 1.5px solid rgba(255, 201, 61, .55); background: linear-gradient(180deg, rgba(255, 201, 61, .16), rgba(255, 61, 139, .08)); box-shadow: 0 10px 30px rgba(0, 0, 0, .25), 0 0 26px rgba(255, 201, 61, .12); animation: nextIn .4s cubic-bezier(.2, 1.3, .4, 1) both }
.next.first { border-color: rgba(61, 232, 255, .55); background: linear-gradient(180deg, rgba(61, 232, 255, .14), rgba(122, 61, 255, .1)); box-shadow: 0 10px 30px rgba(0, 0, 0, .25), 0 0 26px rgba(61, 232, 255, .12) }
@keyframes nextIn { from { opacity: 0; transform: translateY(8px) scale(.98) } }
.next-k { margin: 0; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; color: var(--gold) }
.next.first .next-k { color: var(--cyan) }
.next-dots { position: absolute; top: 18px; right: 16px; display: flex; gap: 5px }
.next-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .2) }
.next-dots i.on { background: var(--cyan); box-shadow: 0 0 8px var(--cyan) }
.next-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center }
.next-i { font-size: 38px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)) }
.next-t b { display: block; font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.15 }
.next-t small { display: block; margin-top: 3px; font-size: 14px; color: var(--muted); line-height: 1.35 }
.fold { border-radius: 20px; border: 1.5px solid var(--line); background: var(--glass); backdrop-filter: blur(10px) }
.fold > summary { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px 16px; list-style: none; cursor: pointer; transition: transform .12s ease }
.fold > summary::-webkit-details-marker { display: none }
.fold > summary:active { transform: scale(.98) }
.fold-i { font-size: 22px; line-height: 1 }
.fold > summary b { font-family: var(--display); font-weight: 400; font-size: 18px; white-space: nowrap }
.fold > summary small { min-width: 0; text-align: right; font-size: 13px; font-weight: 800; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.fold > summary .chev { font-size: 22px; color: var(--muted); transition: transform .2s ease }
.fold[open] > summary .chev { transform: rotate(90deg) }
.fold-in { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px }
.fold .panel { background: none; border: 0; padding: 0; backdrop-filter: none; box-shadow: none }
.fold .reino-top { display: none }
.fold-in > .tiny { margin: 0 }
/* Cofre Real abierto: la tarjeta "Ahora" en dorado entero, con brillo que late */
.next.hot { border-color: #FFF0B3; background: linear-gradient(160deg, #FFE27A 0%, #FFC93D 45%, #F29A12 100%); color: #2A1000; box-shadow: 0 10px 30px rgba(0, 0, 0, .3), 0 0 0 0 rgba(255, 201, 61, .7); animation: nextIn .4s cubic-bezier(.2, 1.3, .4, 1) both, hotPulse 1.8s ease-in-out .4s infinite }
.next.hot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%); background-size: 250% 100%; animation: hotShine 2.6s ease-in-out infinite; pointer-events: none }
.next.hot .next-k { color: #7A2E00 }
.next.hot .next-t small { color: rgba(42, 16, 0, .78) }
.next.hot .next-i { font-size: 44px; animation: hotBounce 1.8s ease-in-out infinite }
.next.hot .btn { --c1: #6A2BD6; --c2: #4A1AA8; --cd: #2A0A66; --tc: #fff; position: relative; z-index: 1 }
@keyframes hotPulse { 50% { box-shadow: 0 10px 30px rgba(0, 0, 0, .3), 0 0 0 10px rgba(255, 201, 61, 0), 0 0 40px rgba(255, 201, 61, .65) } }
@keyframes hotShine { 0% { background-position: 120% 0 } 60%, 100% { background-position: -40% 0 } }
@keyframes hotBounce { 50% { transform: translateY(-4px) rotate(-6deg) } }
@media (prefers-reduced-motion: reduce) { .next.hot, .next.hot::after, .next.hot .next-i { animation: none } }
/* Fondo: que nunca se corte en iPhone. Al hacer scroll Safari mueve la capa fija y dejaba ver el color de abajo.
   La capa del degradé sobresale 25% de la pantalla arriba y abajo; el degradé y las manchas de color están
   corridos para que se vea igual que antes. */
.bg { inset: -25vh 0; inset: -25lvh 0; background: radial-gradient(120% 53.3% at 50% 16.7%, var(--bg3), var(--bg2) 45%, var(--bg1) 80%); transform: translateZ(0) }
.bg i:nth-child(1) { top: calc(25vh - 10vmax) }
.bg i:nth-child(2) { top: 55vh }
.bg i:nth-child(3) { bottom: calc(25vh - 35vmax) }

/* cuenta: botón de Google y detalles */
.btn.google { --c1: #FFFFFF; --c2: #F1F3F4; --cd: #C9CDD1; --tc: #1F1F1F; text-shadow: none; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px }
.g-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(from -45deg, #EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0); color: #fff; font: 900 13px/1 Arial, sans-serif; flex: none }
.acc-how { margin: 0; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .2); font-weight: 800; line-height: 1.7; overflow-wrap: anywhere }
.acc-how .g-ic { width: 18px; height: 18px; font-size: 11px; vertical-align: -3px }
.acc-more { margin-top: 2px }
.acc-more > summary { display: block; width: 100%; cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 800; list-style: none; text-align: center; padding: 6px; text-decoration: underline }
.acc-more > summary::-webkit-details-marker { display: none }
.acc-more[open] > summary { margin-bottom: 6px }
.acc-more .btn { width: 100% }
#acc-mail { font-size: 17px; text-align: center }
#acc-code { letter-spacing: .4em }
/* qué avisos recibir */
.ntf-kinds { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 4px 8px; border-left: 2px solid var(--line); margin-left: 10px }
.ntf-kinds[hidden] { display: none }
.ntf-kinds > .tiny { margin: 0 }
.tog.ntf-k { align-items: flex-start }
.tog.ntf-k span { display: block; line-height: 1.3 }
.tog.ntf-k b { font-weight: 900 }
.tog.ntf-k small { display: block; font-size: 12px; color: var(--muted); font-weight: 700 }

/* Presentación: los personajes llenan el círculo */
.ia-pin .hero-av, .ia-av .hero-av { width: 100%; height: 100% }
.ia-pin.gold { overflow: visible } .ia-pin .hero-av { border-radius: 50% }
.ia-castle em .hero-av { width: 40px; height: 40px; border: 2px solid #fff }
.ia-notif .hero-av { width: 26px; height: 26px; margin-right: 6px }

/* Locales patrocinados: el 🎁 del mapa, la promo en las tarjetas y tus beneficios */
.mp-gift { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: linear-gradient(180deg, #FF6FA8, var(--hot)); font-size: 14px; line-height: 1; display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: 0 0 12px rgba(255, 79, 154, .7); animation: giftBob 2.4s ease-in-out infinite }
@keyframes giftBob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
.promo-box { display: flex; gap: 10px; align-items: center; text-align: left; margin: 10px 0 12px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(160deg, rgba(255, 201, 61, .22), rgba(255, 79, 154, .14)); border: 1.5px solid rgba(255, 201, 61, .6) }
.promo-box > span { font-size: 26px }
.promo-box p { margin: 0; flex: 1; display: flex; flex-direction: column; gap: 2px }
.promo-box small, .mp-it small { color: var(--text-2, #C9B8E8); font-size: 12px }
.promo-box code, .mp-it code { font: 900 16px/1 ui-monospace, Menlo, monospace; letter-spacing: 2px; background: var(--gold); color: #1A0B3D; border-radius: 8px; padding: 6px 8px }
.my-promos { margin-top: 12px }
.my-promos .mp-h { margin: 0 0 6px; font-weight: 900 }
.mp-it { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255, 201, 61, .12); margin-bottom: 6px }
.mp-it p { margin: 0; flex: 1; display: flex; flex-direction: column; gap: 2px }
.is-local { display: block; margin-top: 10px }