/* =====================================================================
   ARCADEO — recreativa de barrio a medianoche
   Tokens → base → componentes → secciones. Mobile-first.
   ===================================================================== */

:root {
	--tinta: #262C5F;      /* índigo suave */
	--tinta-2: #1E234E;
	--panel: #333A78;
	--panel-2: #4A529F;
	--marquesina: #FFC97A; /* miel */
	--chicle: #FF8FA3;     /* coral */
	--crt: #7FD7DD;        /* menta */
	--hueso: #FFF5E6;      /* crema */
	--muted: #B9BEEA;

	--font-display: 'Unbounded', system-ui, sans-serif;
	--font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-score: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	--radius: 22px;
	--wrap: 1100px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* el atributo hidden manda siempre (arregla overlays con display propio) */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* Red de seguridad universal: nada debe superar el ancho del viewport en móvil.
   overflow-x: clip (no 'hidden') NO crea contexto de scroll, así el header sticky sigue funcionando. */
body { overflow-x: clip; max-width: 100%; }
body {
	margin: 0;
	background:
		radial-gradient(1200px 600px at 80% -10%, rgba(127, 215, 221, .14), transparent 60%),
		radial-gradient(900px 500px at 10% 110%, rgba(255, 143, 163, .16), transparent 60%),
		var(--tinta);
	color: var(--hueso);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	min-height: 100dvh;
}
img { max-width: 100%; height: auto; }
a { color: var(--crt); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--marquesina); outline-offset: 2px; border-radius: 6px; }

.skip-link {
	position: absolute; left: -999px; top: 0;
	background: var(--marquesina); color: var(--tinta);
	padding: 10px 16px; z-index: 100; font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.section { padding-block: 56px; }
.muted { color: var(--muted); }

.h-display {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.7rem, 5vw, 2.8rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0 0 24px;
	text-wrap: balance;
}
.h-display .h-sub { font-size: .5em; color: var(--muted); font-weight: 500; }
.h-sm { font-size: clamp(1.2rem, 3.5vw, 1.6rem); margin-top: 48px; }

.prose { max-width: 68ch; color: var(--muted); }
.prose a { color: var(--crt); }

/* ---------- Botones y pills ---------- */
.btn {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: .95rem;
	color: var(--tinta);
	background: var(--marquesina);
	border: 0;
	border-radius: 999px;
	padding: 12px 24px;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--marquesina) 55%, transparent);
	transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), box-shadow .16s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--marquesina) 65%, transparent); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn-big { font-size: 1.05rem; padding: 16px 32px; }
.btn-small { padding: 8px 16px; font-size: .8rem; }
.btn-ghost { background: transparent; color: var(--hueso); box-shadow: inset 0 0 0 2px var(--panel-2); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--crt); }
.btn-ad { background: var(--crt); }

.pill {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--panel);
	border: 1px solid var(--panel-2);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: .85rem;
	font-family: var(--font-score);
}
.pill b { font-weight: 700; }

/* ---------- Header / footer ---------- */
.site-head {
	position: sticky; top: 0; z-index: 120;
	display: flex; align-items: center; gap: 16px;
	padding: 12px 20px;
	background: color-mix(in srgb, var(--tinta-2) 82%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--panel);
}
.brand {
	font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
	color: var(--hueso); letter-spacing: .06em;
}
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--chicle); }
.site-nav { display: flex; gap: 4px; margin-left: auto; }
.site-nav a {
	color: var(--muted); font-weight: 600; font-size: .9rem;
	padding: 8px 12px; border-radius: 10px;
}
.site-nav a:hover { color: var(--hueso); background: var(--panel); text-decoration: none; }
/* Entrada de nav deshabilitada ("próximamente"): visible pero no clicable */
.site-nav-soon { color: var(--muted); font-weight: 600; font-size: .9rem; padding: 8px 12px; border-radius: 10px; opacity: .5; cursor: not-allowed; white-space: nowrap; }
.head-user { display: flex; gap: 8px; align-items: center; }
/* Evita scroll horizontal a nivel de página sin romper el header sticky (clip ≠ hidden). */
#contenido { overflow-x: clip; }

.site-foot {
	margin-top: 64px; padding: 40px 20px 56px;
	text-align: center; color: var(--muted);
	border-top: 1px solid var(--panel);
	font-size: .9rem;
}
.foot-links a { color: var(--muted); }

/* --- Footer grande de la landing (sala recreativa) --- */
.site-foot-big { text-align: left; padding: 56px 20px 30px; background: linear-gradient(180deg, transparent, rgba(10, 13, 36, .65)); }
.foot-grid { display: grid; gap: 32px 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (min-width: 960px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .foot-brand { grid-column: auto; } }
.foot-brand .brand { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--hueso); }
.foot-tag { margin: 10px 0 14px; line-height: 1.55; max-width: 34ch; }
.foot-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-chip {
	font-family: var(--font-score); font-size: .68rem; letter-spacing: .06em;
	background: var(--panel); border: 1px solid var(--panel-2); border-radius: 999px;
	padding: 5px 11px; color: var(--hueso); white-space: nowrap;
}
.foot-col { display: grid; gap: 9px; align-content: start; }
.foot-col h4 {
	margin: 0 0 4px; font-family: var(--font-display); font-size: .78rem;
	letter-spacing: .14em; text-transform: uppercase; color: var(--marquesina);
}
.foot-col a { color: var(--muted); text-decoration: none; font-size: .9rem; width: fit-content; transition: color .15s ease, translate .15s ease; }
.foot-col a:hover { color: var(--hueso); translate: 3px 0; }
.foot-coin { text-align: center; margin: 44px 0 10px; }
.foot-slot {
	font-family: var(--font-score); font-size: .78rem; letter-spacing: .3em; color: var(--marquesina);
	border: 1px solid color-mix(in srgb, var(--marquesina) 45%, transparent);
	border-radius: 6px; padding: 8px 18px 8px 22px; display: inline-block;
	box-shadow: inset 0 0 18px -8px var(--marquesina);
}
.coin-blink { font-style: normal; animation: coin-blink 1.1s steps(1) infinite; }
@keyframes coin-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .coin-blink { animation: none; } }
.foot-legal { text-align: center; margin: 8px 0 0; font-size: .78rem; color: var(--muted); opacity: .8; }

/* --- Footer arcade compartido (lo inyecta js/fx.js en TODAS las páginas) --- */
.foot-arcade { padding: 0 0 26px; }
.foot-arcade .foot-grid { padding-inline: 20px; }
.foot-scene {
	display: block; width: 100%; height: auto;
	image-rendering: pixelated;
	background: #0a0d24;
	border-bottom: 1px solid var(--panel);
	margin-bottom: 36px;
}
.foot-hiscore {
	margin: 10px 0 0; font-family: var(--font-score); font-size: .7rem;
	letter-spacing: .14em; text-transform: uppercase; color: var(--marquesina);
}
.foot-hiscore b { color: var(--hueso); }
.press-start {
	display: inline-block; margin-top: 14px; text-decoration: none;
	font-family: var(--font-display); font-weight: 800; font-size: .8rem; letter-spacing: .08em;
	color: var(--crt); border: 1px dashed color-mix(in srgb, var(--crt) 55%, transparent);
	border-radius: 10px; padding: 9px 14px;
	animation: coin-blink 1.4s steps(1) infinite;
}
.press-start small { font-family: var(--font-score); font-weight: 400; letter-spacing: .05em; color: var(--muted); }
.press-start:hover { animation: none; background: color-mix(in srgb, var(--crt) 12%, transparent); }
.foot-konami { font-family: var(--font-score); letter-spacing: .16em; color: var(--muted); cursor: help; }
@media (prefers-reduced-motion: reduce) { .press-start { animation: none; } }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	min-height: 92dvh;
	display: grid; place-items: center;
	overflow: hidden;
	text-align: center;
	padding: 40px 20px;
}
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-inner { position: relative; z-index: 2; max-width: 780px; }
.hero-badge {
	display: inline-block;
	font-family: var(--font-score); font-size: .8rem;
	color: var(--marquesina);
	border: 1px dashed color-mix(in srgb, var(--marquesina) 55%, transparent);
	border-radius: 999px; padding: 6px 14px; margin: 0 0 20px;
}
.hero-title {
	font-family: var(--font-display); font-weight: 800;
	font-size: clamp(2.6rem, 11vw, 6.5rem);
	line-height: .96; letter-spacing: -0.02em;
	margin: 0 0 20px;
	text-shadow: 0 0 40px rgba(255, 93, 143, .25);
}
.hero-rotator { display: inline-grid; color: var(--chicle); }
.hero-rotator .rot { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .35s ease; }
.hero-rotator .rot.is-on { opacity: 1; transform: none; }
.hero-sub { color: var(--muted); font-size: clamp(1rem, 2.4vw, 1.15rem); max-width: 54ch; margin: 0 auto 28px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-blob {
	position: absolute; z-index: 1; border-radius: 50%;
	filter: blur(70px); opacity: .5; pointer-events: none;
}
.blob-a { width: 380px; height: 380px; background: var(--chicle); top: -80px; left: -120px; }
.blob-b { width: 320px; height: 320px; background: var(--crt); bottom: -60px; right: -100px; }
.hero-scrollhint {
	position: absolute; bottom: 18px; left: 50%; translate: -50% 0;
	color: var(--muted); animation: hint 1.6s ease-in-out infinite;
}
@keyframes hint { 50% { transform: translateY(6px); opacity: .5; } }

/* ---------- Marquesina (firma): letrero con bombillas ---------- */
.marquee {
	position: relative;
	background: linear-gradient(90deg, var(--chicle), var(--marquesina), var(--crt), var(--chicle));
	background-size: 300% 100%;
	animation: neon-slide 14s linear infinite;
	color: var(--tinta);
	overflow: hidden;
	padding: 14px 0;
}
.marquee::before, .marquee::after {
	content: ""; position: absolute; left: 0; right: 0; height: 8px; z-index: 2;
	background-image: radial-gradient(circle 3px, var(--tinta-2) 45%, rgba(255,255,255,.95) 46%, rgba(255,255,255,0) 70%);
	background-size: 22px 8px;
	animation: bulbs .9s steps(2) infinite;
}
.marquee::before { top: 2px; }
.marquee::after { bottom: 2px; animation-delay: .45s; }
@keyframes bulbs { to { background-position-x: 22px; } }
@keyframes neon-slide { to { background-position-x: 300%; } }
.marquee-track {
	display: flex; align-items: center; width: max-content;
	font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: .12em;
	animation: marquee 22s linear infinite;
	will-change: transform;
}
/* dos segmentos idénticos: JS los rellena hasta superar el ancho → el bucle -50% nunca deja hueco */
.marquee-seq { display: flex; gap: 28px; align-items: center; flex: none; padding-right: 28px; }
.marquee-track i { width: 8px; height: 8px; background: var(--tinta); border-radius: 50%; flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Grid de juegos ---------- */
.games-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 18px;
}
.game-card {
	--accent: var(--marquesina);
	position: relative;
	display: flex; flex-direction: column; gap: 8px;
	background: linear-gradient(160deg, var(--panel), var(--tinta-2));
	border: 1px solid var(--panel-2);
	border-radius: var(--radius);
	padding: 22px;
	color: var(--hueso);
	overflow: hidden;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.game-card::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
	background: var(--accent);
}
.game-card:hover {
	text-decoration: none;
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--accent) 60%, var(--panel-2));
	box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--accent) 55%, transparent);
}
.game-emoji { font-size: 2.2rem; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.game-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; margin: 4px 0 0; }
.game-card p { color: var(--muted); font-size: .9rem; margin: 0; flex: 1; }
.game-go { color: var(--accent); font-weight: 700; font-size: .9rem; }
.tag-premium {
	font-family: var(--font-score); font-size: .6rem; vertical-align: middle;
	color: var(--tinta); background: var(--marquesina);
	border-radius: 4px; padding: 2px 6px; letter-spacing: .08em;
}

/* ---------- Cómo funciona ---------- */
.how { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .how { grid-template-columns: repeat(3, 1fr); } }
.how-item {
	background: var(--panel); border: 1px solid var(--panel-2);
	border-radius: var(--radius); padding: 24px;
}
.how-n { font-size: 1.8rem; }
.how-item h3 { font-family: var(--font-display); font-size: 1rem; margin: 10px 0 6px; }
.how-item p { color: var(--muted); margin: 0; font-size: .92rem; }

/* ---------- Leaderboard ---------- */
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.board li {
	display: flex; align-items: center; gap: 12px;
	background: var(--panel); border: 1px solid var(--panel-2);
	border-radius: 14px; padding: 10px 16px;
}
.board li:nth-child(1) { border-color: var(--marquesina); }
.board li:nth-child(2) { border-color: color-mix(in srgb, var(--hueso) 45%, var(--panel-2)); }
.board li:nth-child(3) { border-color: color-mix(in srgb, var(--chicle) 60%, var(--panel-2)); }
.board-pos { font-family: var(--font-score); font-weight: 700; width: 28px; text-align: center; color: var(--muted); }
.board-avatar { border-radius: 50%; width: 36px; height: 36px; }
.board-name { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-plays { color: var(--muted); font-size: .8rem; }
.board-score { font-family: var(--font-score); font-weight: 700; font-size: 1.05rem; color: var(--marquesina); }
.board-empty, .board-empty-msg { color: var(--muted); padding: 14px 6px; }

.board-tabs { display: flex; gap: 8px; margin: 18px 0 14px; flex-wrap: wrap; }
.tab {
	background: var(--panel); color: var(--muted);
	border: 1px solid var(--panel-2); border-radius: 999px;
	padding: 8px 18px; font-weight: 700; font-size: .85rem; cursor: pointer;
}
.tab.is-on { background: var(--marquesina); color: var(--tinta); border-color: var(--marquesina); }
.tab:hover { text-decoration: none; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.chip {
	background: var(--panel); color: var(--hueso);
	border: 1px solid var(--panel-2); border-radius: 999px;
	padding: 8px 14px; font-size: .85rem; font-weight: 600;
}
.chip.is-on { border-color: var(--crt); color: var(--crt); }
.chip:hover { text-decoration: none; border-color: var(--crt); }
.chip { cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.chip b { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px;
	background: rgba(255,255,255,.08); color: var(--muted); font-size: .74rem; font-weight: 700; }
.chip.is-on b { background: var(--crt); color: #06210f; }
.games-filter { margin: 10px 0 4px; }
.games-count { font-size: .82rem; margin: 0 0 14px; color: var(--muted); }
.games-grid .game-card[hidden] { display: none; }

/* ---------- Perfil: tarjetas de combate (avatar + bestia) ---------- */
.combat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 8px; }
.combat-card { background: var(--panel); border: 1px solid var(--panel-2); border-radius: 18px; padding: 16px; }
.cc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cc-emoji { font-size: 2.4rem; width: 56px; height: 56px; display: grid; place-items: center; background: var(--tinta-2); border-radius: 16px; border: 1px solid var(--panel-2); }
.cc-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cc-stats span { background: var(--tinta-2); border-radius: 10px; padding: 6px 10px; font-size: .82rem; color: var(--muted); }
.cc-stats b { color: var(--hueso); font-family: var(--font-score); }
.cc-lvl { font-size: .85rem; color: var(--muted); margin-bottom: 8px; }
.cc-lvl b { color: var(--crt); }
.cc-lvl .xpbar { margin-top: 6px; }
.cc-note { font-size: .78rem; margin: 0; }

/* ---------- Mochila (rejilla de slots, aspecto de inventario) ---------- */
.backpack {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px;
	background: linear-gradient(160deg, var(--tinta-2), var(--panel)); border: 1px solid var(--panel-2);
	border-radius: 16px; padding: 12px; margin-bottom: 8px;
}
.bag-slot {
	position: relative; aspect-ratio: 1; border-radius: 12px; border: 1px dashed var(--panel-2);
	background: rgba(0, 0, 0, .18); display: grid; place-items: center;
}
.bag-slot.filled { border-style: solid; border-color: var(--panel-2); background: var(--panel); cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; }
.bag-slot.filled:hover { transform: translateY(-3px); border-color: var(--marquesina); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .8); }
.bag-slot.equipped { border-color: var(--crt); box-shadow: inset 0 0 0 1px var(--crt); }
.bag-emoji { font-size: 1.8rem; line-height: 1; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); }
.bag-count { position: absolute; top: 3px; right: 5px; font-family: var(--font-score); font-size: .66rem; font-weight: 700; color: var(--hueso); background: rgba(0, 0, 0, .6); border-radius: 6px; padding: 0 4px; }
.bag-sell { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: .58rem; font-weight: 700; color: var(--marquesina); opacity: 0; transition: opacity .12s; }
.bag-slot.filled:hover .bag-sell { opacity: 1; }
/* Panel "Tu equipo" del perfil (bonito, estilo tienda) */
.pg-wrap { background: linear-gradient(160deg, var(--panel), var(--tinta-2)); border: 1px solid var(--panel-2); border-radius: 18px; padding: 16px; margin-bottom: 8px; }
.pg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pg-cls { font-size: 1.05rem; }
.pg-dmg { font-family: var(--font-score); font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.pg-dmg.fis { color: #FFD24A; background: rgba(255, 210, 74, .12); border: 1px solid rgba(255, 210, 74, .35); }
.pg-dmg.mag { color: #c9a8ff; background: rgba(180, 140, 255, .14); border: 1px solid rgba(180, 140, 255, .4); }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pg-slot { position: relative; display: flex; align-items: center; gap: 8px; background: var(--tinta-2); border: 1px solid var(--panel-2); border-radius: 12px; padding: 8px 10px; min-width: 0; }
/* Aura de encantamiento: BRILLO puro que respira (sin reflejos barriendo).
 * Cuanto más nivel (--g 0..1), más intensa. A +20 arde. */
.pg-slot.ench {
	border-color: var(--marquesina);
	background:
		radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--marquesina) calc(var(--g, 0) * 30%), transparent), transparent 75%),
		var(--tinta-2);
	animation: ench-aura 2s ease-in-out infinite;
}
@keyframes ench-aura {
	0%, 100% {
		box-shadow:
			0 0 calc(var(--g, 0) * 20px) color-mix(in srgb, var(--marquesina) calc(var(--g, 0) * 85%), transparent),
			0 0 calc(var(--g, 0) * 48px) color-mix(in srgb, var(--marquesina) calc(var(--g, 0) * 45%), transparent),
			inset 0 0 calc(var(--g, 0) * 16px) color-mix(in srgb, var(--marquesina) calc(var(--g, 0) * 35%), transparent);
	}
	50% {
		box-shadow:
			0 0 calc(var(--g, 0) * 34px) color-mix(in srgb, var(--marquesina) calc(var(--g, 0) * 100%), transparent),
			0 0 calc(var(--g, 0) * 80px) color-mix(in srgb, var(--marquesina) calc(var(--g, 0) * 70%), transparent),
			inset 0 0 calc(var(--g, 0) * 26px) color-mix(in srgb, var(--marquesina) calc(var(--g, 0) * 50%), transparent);
	}
}
.pg-slot.ench .pg-emoji { animation: ench-emoji 2s ease-in-out infinite; }
@keyframes ench-emoji {
	0%, 100% { filter: drop-shadow(0 0 calc(var(--g, 0) * 8px) var(--marquesina)); }
	50% { filter: drop-shadow(0 0 calc(var(--g, 0) * 16px) var(--marquesina)) brightness(1.15); }
}
.pg-slot.ench .pg-plus { font-size: .78rem; animation: ench-plus 2s ease-in-out infinite; }
@keyframes ench-plus { 50% { text-shadow: 0 0 14px var(--marquesina), 0 0 26px var(--marquesina); } }
@media (prefers-reduced-motion: reduce) {
	.pg-slot.ench, .pg-slot.ench .pg-emoji, .pg-slot.ench .pg-plus { animation: none; }
	.pg-slot.ench {
		box-shadow:
			0 0 calc(var(--g, 0) * 24px) color-mix(in srgb, var(--marquesina) calc(var(--g, 0) * 85%), transparent),
			inset 0 0 calc(var(--g, 0) * 16px) color-mix(in srgb, var(--marquesina) calc(var(--g, 0) * 35%), transparent);
	}
}
.pg-emoji { font-size: 1.5rem; flex: 0 0 auto; }
.pg-plus { position: absolute; top: 4px; right: 6px; font-family: var(--font-score); font-size: .64rem; font-weight: 800; color: var(--marquesina); text-shadow: 0 0 8px color-mix(in srgb, var(--marquesina) 70%, transparent); }
.pg-txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.pg-txt small { color: var(--muted); font-size: .64rem; }
.pg-txt b { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.pg-stats span { font-family: var(--font-score); font-size: .74rem; background: var(--tinta-2); border: 1px solid var(--panel-2); border-radius: 8px; padding: 4px 8px; color: var(--muted); }
.pg-stats b { color: var(--hueso); }
.pg-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pg-note { font-size: .78rem; margin: 10px 0 0; }
/* Multiselección de la mochila (vender varios) */
.bag-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.bag-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bag-selbar #bag-selinfo { font-family: var(--font-score); font-size: .82rem; color: var(--marquesina); font-weight: 700; }
.bag-slot.selectable { cursor: pointer; }
.bag-slot.selectable .bag-sell { opacity: 1; }
.bag-slot.is-sel { border-color: var(--marquesina); box-shadow: inset 0 0 0 2px var(--marquesina), 0 8px 18px -10px rgba(0, 0, 0, .8); }
.bag-check { position: absolute; top: 3px; left: 5px; font-size: .8rem; font-weight: 800; color: var(--tinta); background: var(--marquesina); border-radius: 50%; width: 18px; height: 18px; display: grid; place-items: center; line-height: 1; }
/* Ficha de objeto de la mochila (Ver/Equipar) */
/* (posicionamiento de .p-item-overlay: ver la regla consolidada de overlays de página junto a .dg-overlay) */
.p-item-card { max-width: min(440px, 94vw); width: 100%; }
.pi-stats { display: grid; gap: 6px; width: 100%; margin: 8px 0; }
.pi-stat { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; background: var(--tinta-2); border-radius: 10px; padding: 8px 12px; font-size: .9rem; }
.pi-stat > span:first-child { color: var(--muted); text-align: left; }
.pi-stat > b { font-family: var(--font-score); color: var(--hueso); }
.pi-delta { min-width: 44px; text-align: right; font-family: var(--font-score); font-size: .84rem; }
.pi-delta .up { color: #9CFF8F; }
.pi-delta .down { color: #FF9DB8; }
.pi-power { border: 1px solid var(--panel-2); background: transparent; }

/* ---------- Stats / CTA final ---------- */
.cta-final { text-align: center; }
.stat-big { font-family: var(--font-score); color: var(--muted); margin-bottom: 8px; }
.stat-big span { color: var(--crt); font-size: 1.6rem; font-weight: 700; }

/* ---------- Página de juego ---------- */
.game-page { --accent: var(--marquesina); }
.game-topbar { display: flex; align-items: center; gap: 14px; padding-block: 14px; }
.auto-sw { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--muted); cursor: pointer; user-select: none; position: relative; }
.auto-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.auto-sw-track { width: 34px; height: 18px; border-radius: 999px; background: var(--panel-2); position: relative; transition: background .18s; flex: 0 0 auto; }
.auto-sw-dot { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--hueso); transition: transform .18s; }
.auto-sw input:checked + .auto-sw-track { background: var(--crt); }
.auto-sw input:checked + .auto-sw-track .auto-sw-dot { transform: translateX(16px); }
.game-topbar .back { color: var(--muted); font-weight: 600; flex: none; }
.game-title {
	font-family: var(--font-display); font-weight: 800;
	font-size: clamp(1.1rem, 3.5vw, 1.5rem); margin: 0; flex: 1;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.game-info { background: none; border: 0; cursor: pointer; font-size: 1.15rem; padding: 2px 6px; border-radius: 8px; line-height: 1; flex: none; }
.game-info:hover { background: var(--panel); }
.game-help { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; overflow-y: auto; padding: 20px; background: rgba(5, 7, 26, .82); backdrop-filter: blur(4px); }
.game-help-card { max-width: 400px; text-align: center; background: linear-gradient(160deg, var(--panel), var(--tinta-2)); border: 1px solid var(--panel-2); border-radius: var(--radius); padding: 26px 22px; display: grid; gap: 10px; justify-items: center; animation: wave-in .35s cubic-bezier(.34, 1.56, .64, 1); }
.game-help-emoji { font-size: 2.8rem; }
.game-help-card h3 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; }
.game-help-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.game-stage {
	position: relative;
	max-width: 640px; margin-inline: auto;
	padding-inline: 12px;
}
#game {
	display: block; width: 100%;
	height: min(68dvh, 620px);
	background: var(--tinta-2);
	border: 1px solid var(--panel-2);
	border-top: 4px solid var(--accent);
	border-radius: var(--radius);
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
#game-dom { max-width: 480px; margin-inline: auto; }
.game-nav { max-width: 640px; margin-inline: auto; display: flex; gap: 10px; padding-top: 14px; }
.game-nav-btn { flex: 1; }
.game-nav-btn:disabled { opacity: .4; cursor: default; }
.game-below { max-width: 640px; padding-block: 28px; }

/* Overlay de game over */
.gameover {
	position: absolute; inset: 0 12px;
	display: grid; place-items: center;
	overflow-y: auto; padding: 10px 0; /* si la tarjeta es más alta que el escenario, se puede desplazar */
	background: color-mix(in srgb, var(--tinta-2) 78%, transparent);
	backdrop-filter: blur(6px);
	border-radius: var(--radius);
	z-index: 5;
}
.gameover[hidden] { display: none; }
.gameover-card { text-align: center; padding: 24px; width: min(92%, 380px); }
.go-label { font-family: var(--font-score); color: var(--muted); letter-spacing: .2em; font-size: .75rem; margin: 0; }
.go-score {
	font-family: var(--font-display); font-weight: 800;
	font-size: clamp(3rem, 14vw, 4.5rem); line-height: 1;
	margin: 6px 0 4px; color: var(--marquesina);
}
.go-best { color: var(--chicle); font-weight: 800; margin: 0 0 6px; }
.go-toast { color: var(--crt); font-weight: 700; margin: 0 0 6px; }
.go-actions { display: grid; gap: 10px; margin-top: 16px; }
.go-login { font-size: .85rem; color: var(--muted); margin-top: 14px; }

/* Palabra del Día (juego DOM) — contenedor con marco, como el canvas de los demás juegos */
#game-dom {
	max-width: 520px; margin-inline: auto; overflow-x: hidden;
	background: var(--tinta-2);
	border: 1px solid var(--panel-2);
	border-top: 4px solid var(--accent, var(--marquesina));
	border-radius: var(--radius);
	padding: 20px 14px 26px;
}
.pd-grid { display: grid; gap: 6px; margin: 14px auto; width: min(320px, 90vw); }
.pd-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pd-cell {
	aspect-ratio: 1; width: 100%;
	display: grid; place-items: center;
	background: var(--panel); border: 2px solid var(--panel-2); border-radius: 8px;
	font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, 6vw, 1.5rem);
	text-transform: uppercase;
	transition: background .25s ease, border-color .25s ease, transform .12s ease;
}
.pd-cell.is-filled { border-color: var(--muted); transform: scale(1.04); }
.pd-cell.g { background: #3E9B4F; border-color: #3E9B4F; }
.pd-cell.y { background: #C9A227; border-color: #C9A227; }
.pd-cell.x { background: var(--panel-2); border-color: var(--panel-2); color: var(--muted); }
.pd-kbd { display: grid; gap: 6px; margin-top: 14px; width: min(460px, 96vw); margin-inline: auto; }
.pd-kbd-row { display: flex; gap: 4px; justify-content: center; }
.pd-key {
	flex: 1 1 0; min-width: 0; height: 46px; padding: 0 2px;
	background: var(--panel); color: var(--hueso);
	border: 1px solid var(--panel-2); border-radius: 8px;
	font-weight: 700; font-size: clamp(.65rem, 3vw, .9rem); cursor: pointer;
}
.pd-key.wide { flex: 1.7 1 0; }
.pd-key.g { background: #3E9B4F; }
.pd-key.y { background: #C9A227; }
.pd-key.x { background: var(--tinta-2); color: var(--muted); }
.pd-msg { text-align: center; font-weight: 700; min-height: 1.4em; margin: 10px 0 0; }
.pd-result { text-align: center; padding: 18px 0; }

/* ---------- Bloqueado / perfil ---------- */
.locked { text-align: center; }
.locked-emoji { font-size: 3.4rem; margin: 0 0 8px; }
.locked .btn { margin: 6px; }

.profile-head { display: flex; gap: 18px; align-items: center; margin-bottom: 26px; }
.profile-avatar { border-radius: 22px; border: 2px solid var(--panel-2); }
.profile-level { color: var(--muted); margin: 4px 0 10px; }
.xpbar {
	width: min(340px, 100%); height: 12px;
	background: var(--panel); border-radius: 999px; overflow: hidden;
	border: 1px solid var(--panel-2);
}
.xpbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--crt), var(--chicle)); }
.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 520px; }
.stat-card {
	background: var(--panel); border: 1px solid var(--panel-2); border-radius: 14px;
	padding: 14px; text-align: center; display: grid; gap: 2px;
}
.stat-card span { font-size: 1.4rem; }
.stat-card b { font-family: var(--font-score); font-size: 1.2rem; }
.stat-card small { color: var(--muted); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.ach {
	background: var(--panel); border: 1px solid var(--panel-2); border-radius: 12px;
	padding: 14px 10px; text-align: center; display: grid; gap: 4px;
	opacity: .35; filter: grayscale(1);
}
.ach.is-got { opacity: 1; filter: none; border-color: var(--marquesina); }
.ach-emoji { font-size: 1.5rem; }
.ach-name { font-size: .75rem; color: var(--muted); }
.profile-foot { margin-top: 40px; }
.profile-foot a { color: var(--muted); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.marquee-track { animation: none; }
	html { scroll-behavior: auto; }
}

/* =========== Extras solo-DEMO =========== */
.ad-modal {
	position: fixed; inset: 0; z-index: 200;
	display: grid; place-items: center;
	overflow-y: auto; padding: 16px;
	background: rgba(10, 13, 36, .88);
	backdrop-filter: blur(6px);
}
.ad-box {
	background: var(--panel); border: 1px solid var(--panel-2);
	border-radius: var(--radius); padding: 32px 40px; text-align: center;
	width: min(90%, 360px);
}
.ad-tag { font-family: var(--font-score); font-size: .7rem; letter-spacing: .25em; color: var(--chicle); margin: 0; }
.ad-label { font-family: var(--font-display); font-weight: 800; margin: 10px 0 0; }
.ad-count { font-family: var(--font-display); font-weight: 800; font-size: 3.2rem; color: var(--marquesina); margin: 10px 0; }
.ad-note { color: var(--muted); font-size: .8rem; margin: 0; }

.board li.is-you { border-color: var(--crt); background: color-mix(in srgb, var(--crt) 12%, var(--panel)); }
.board-avatar-txt { width: 36px; height: 36px; display: grid; place-items: center; font-size: 1.3rem; }
.demo-note {
	text-align: center; font-size: .8rem; color: var(--muted);
	border: 1px dashed var(--panel-2); border-radius: 10px;
	padding: 8px 14px; margin: 18px auto 0; width: fit-content;
}

/* =========== Dopamina pack =========== */

/* --- Píxel, la mascota --- */
.mascota { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: grid; justify-items: end; gap: 8px; }
.mascota-sprite-wrap { position: relative; }
.mascota-close {
	position: absolute; top: -6px; right: -6px; z-index: 1;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--tinta-2); border: 1px solid var(--panel-2); color: var(--muted);
	font-size: .7rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .4); transition: background .15s, color .15s;
}
.mascota-close:hover { background: var(--chicle); color: #fff; }
.mascota-sprite {
	font-size: 2.4rem; line-height: 1;
	background: var(--panel); border: 2px solid var(--panel-2);
	border-radius: 50%; width: 64px; height: 64px;
	cursor: pointer; display: grid; place-items: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
	animation: mascota-bob 2.6s ease-in-out infinite;
}
.mascota-sprite.excited { animation: mascota-party .5s ease-in-out 4; border-color: var(--marquesina); }
.mascota-sprite.sad { filter: grayscale(.6); }
@keyframes mascota-bob { 50% { transform: translateY(-7px); } }
@keyframes mascota-party { 25% { transform: rotate(-12deg) scale(1.12); } 75% { transform: rotate(12deg) scale(1.12); } }
.mascota-bubble {
	max-width: min(260px, 72vw);
	background: var(--hueso); color: var(--tinta);
	border-radius: 14px 14px 2px 14px;
	padding: 10px 14px; font-size: .88rem; font-weight: 600;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.mascota-bubble p { margin: 0; }
.mascota-bubble a { color: #B3005E; font-weight: 800; }
.mascota-bubble.pop { animation: bubble-pop .28s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes bubble-pop { from { transform: scale(.6) translateY(8px); opacity: 0; } }

/* --- Confetti de récord --- */
.confetti {
	position: fixed; top: -12px; z-index: 150;
	width: 9px; height: 14px; border-radius: 2px;
	pointer-events: none;
	animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
	to { transform: translateY(105vh) translateX(var(--drift, 0px)) rotate(720deg); opacity: .9; }
}

/* --- Hub diario "Tu día en Arcadeo" (reto + cofre + racha + ruleta + misiones) --- */
/* Tracker del día: resumen de un vistazo (n/4) + chips-ancla a cada bloque */
.day-tracker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 4px; }
.dt-count { font-family: var(--font-score); font-size: .74rem; font-weight: 800; letter-spacing: .04em;
	color: var(--marquesina); background: color-mix(in srgb, var(--marquesina) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--marquesina) 45%, transparent); border-radius: 999px; padding: 6px 13px; }
.dt-count.all { color: #7CFF6B; background: rgba(124, 255, 107, .1); border-color: rgba(124, 255, 107, .45); }
.dt-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; color: var(--hueso);
	background: var(--panel); border: 1px solid var(--panel-2); border-radius: 999px; padding: 6px 13px;
	transition: border-color .15s ease, transform .15s ease; position: relative; }
.dt-chip:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--marquesina); }
/* pendiente: puntito ámbar que late = "te espera algo" */
.dt-chip:not(.done)::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FFB020;
	box-shadow: 0 0 8px #FFB020; animation: dt-blink 1.6s ease-in-out infinite; }
@keyframes dt-blink { 50% { opacity: .35; } }
.dt-chip.done { color: var(--muted); opacity: .75; }
/* anclas del tracker: que el header pegajoso no tape el destino */
#daily-card, #chest-card, #wheel-card, #login-card { scroll-margin-top: 90px; }
/* reto ya cumplido hoy: la tarjeta se calma */
.daily-card.done::before { animation: none; opacity: .35; }
@media (prefers-reduced-motion: reduce) { .dt-chip:not(.done)::after { animation: none; } }

/* Flujo vertical con secciones AGRUPADAS y aire (antes: bento denso e ilegible).
 * Jerarquía: RETO (protagonista) › GRATIS HOY (cofre+ruleta) › racha compacta › MISIONES. */
.hub-grid { display: grid; gap: 22px; margin-top: 14px; }
.hub-grid > * { position: relative; min-width: 0; }
/* sub-encabezados que nombran y separan cada bloque */
.hub-sub-h { font-family: var(--font-display); font-size: 1.08rem; margin: 8px 0 -8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hub-sub-h .h-sub { color: var(--muted); font-family: var(--font-body); font-weight: 400; font-size: .82rem; }
/* filas de 2 columnas: premios (cofre+ruleta) y misiones (hoy+semana) */
.freebies { display: grid; gap: 16px; grid-template-columns: 1fr; }
.missions-row { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) {
	.freebies { grid-template-columns: 250px 1fr; align-items: stretch; }
	.missions-row { grid-template-columns: 1fr 1fr; }
}
/* Etiqueta flotante que nombra el reto (el único que la conserva) */
.hub-tag {
	position: absolute; top: -11px; left: 16px; z-index: 3;
	font-family: var(--font-score); font-weight: 700; font-size: .64rem;
	letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
	background: var(--tinta-2); color: var(--tag, var(--marquesina));
	border: 1px solid color-mix(in srgb, var(--tag, var(--marquesina)) 60%, transparent);
	border-radius: 999px; padding: 4px 11px;
	box-shadow: 0 5px 12px -6px rgba(0, 0, 0, .85);
	pointer-events: none;
}
.tag-hoy { --tag: var(--chicle); }
.daily-body { flex: 1 1 220px; }
/* misiones dentro del hub: encabezado propio y altura completa para que casen */
.hub-grid .missions, .hub-grid .weekly-card { margin-top: 0; height: 100%; background: linear-gradient(160deg, var(--panel), var(--tinta-2)); }
.missions-h { font-family: var(--font-display); font-size: .98rem; margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.missions-h .h-sub { color: var(--muted); font-family: var(--font-body); font-weight: 400; font-size: .74rem; }
.freebie-h { font-family: var(--font-display); font-size: 1rem; margin: 0 0 6px; }
.freebie-h .h-sub { color: var(--muted); font-family: var(--font-body); font-weight: 400; font-size: .74rem; }
.hub-grid .wheel-wrap { width: min(220px, 62vw); }
.hub-grid .wheel-label { font-size: .62rem; width: 52px; }
.hub-grid .wheel-label span { font-size: .95rem; }
.daily-card {
	position: relative;
	display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
	background: linear-gradient(160deg, var(--panel), var(--tinta-2));
	border-radius: var(--radius); padding: 22px;
	border: 2px solid transparent;
	background-clip: padding-box;
}
.daily-card::before {
	content: ""; position: absolute; inset: -2px; z-index: -1;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--chicle), var(--marquesina), var(--crt), var(--chicle));
	background-size: 300% 100%;
	animation: neon-slide 6s linear infinite;
}
.daily-emoji { font-size: 3rem; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }
.daily-card h3 { font-family: var(--font-display); margin: 0; font-size: 1.3rem; }
.daily-card .muted { margin: 2px 0 0; font-size: .88rem; }
.daily-count { font-family: var(--font-score); color: var(--marquesina); font-weight: 700; }
.daily-card .btn { margin-left: auto; }
.chest-card {
	position: relative; overflow: hidden;
	display: grid; place-items: center; gap: 6px; text-align: center;
	background: linear-gradient(160deg, #241a2e, var(--tinta-2));
	border: 1px solid var(--panel-2);
	border-radius: var(--radius); padding: 20px 16px 16px; cursor: pointer;
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.chest-card:hover { transform: translateY(-3px); border-color: #ffcf4a; box-shadow: 0 16px 34px -20px rgba(255, 207, 74, .55); }
.chest-title { font-family: var(--font-display); font-size: .96rem; }
.chest-sub { color: var(--muted); font-size: .78rem; }

/* ==================================================================
 * COFRE 3D REAL — caja con 6 caras + tapa con bisagra trasera, en
 * perspectiva de verdad (preserve-3d). Secuencia: tiembla → la tapa
 * gira → erupción de luz + onda + monedas → premio.
 * ================================================================ */
.chest-scene { position: relative; width: 122px; height: 104px; margin: 4px auto 2px; perspective: 520px; }

/* el cofre entero: un punto 3D en el centro de la escena; balancea en reposo */
.chest3 { position: absolute; left: 50%; top: 60%; width: 0; height: 0; transform-style: preserve-3d;
	transform: rotateX(-16deg) rotateY(24deg); }
.chest-card:not(.opened):not(.opening) .chest3 { animation: chest3-idle 4.2s ease-in-out infinite; }
@keyframes chest3-idle {
	0%, 100% { transform: rotateX(-16deg) rotateY(16deg) translateY(0); }
	50% { transform: rotateX(-13deg) rotateY(31deg) translateY(-3px); }
}

/* caras: todas cuelgan del punto central (translate −50% las centra) */
.cb, .cl { position: absolute; left: 0; top: 0; border: 2px solid #2e1c0c; box-sizing: border-box; }
/* — CAJA (88 × 42 × 56) — */
.cb-front { width: 88px; height: 42px; border-radius: 3px 3px 7px 7px;
	transform: translate(-50%, -50%) translateZ(28px);
	background: linear-gradient(#8a5a2b, #6f451f 55%, #46290d);
	box-shadow: inset 0 -8px 10px -7px rgba(0, 0, 0, .7), inset 0 4px 6px -4px rgba(255, 200, 120, .4); }
.cb-back { width: 88px; height: 42px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(28px); background: #4a2d12; }
.cb-left { width: 56px; height: 42px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(44px); background: linear-gradient(#6f451f, #3d250e); }
.cb-right { width: 56px; height: 42px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(44px); background: linear-gradient(#7a4e23, #46290d); }
.cb-bottom { width: 88px; height: 56px; transform: translate(-50%, -50%) rotateX(90deg) translateZ(-21px); background: #33200f; }
/* interior: oro que arde cuando la tapa se levanta */
.cb-inner { width: 80px; height: 48px; border: 0; border-radius: 4px;
	transform: translate(-50%, -50%) rotateX(90deg) translateZ(17px);
	background: radial-gradient(ellipse at 50% 45%, #fff3c0, #ffcf4a 55%, #b87a16 85%);
	opacity: 0; transition: opacity .3s ease .16s;
	box-shadow: 0 0 22px 6px rgba(255, 207, 74, .0); }
/* vetas doradas del frente */
.cb-front::before, .cb-front::after { content: ""; position: absolute; top: -2px; bottom: -2px; width: 7px;
	background: linear-gradient(#ffcf4a, #a9751a); box-shadow: 0 0 3px rgba(0, 0, 0, .5); }
.cb-front::before { left: 13px; } .cb-front::after { right: 13px; }

/* — TAPA (88 × 26 × 56), bisagra en la arista trasera-inferior — */
.clid { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d;
	transform: translateY(-34px);
	transform-origin: 0px 13px -28px;                 /* la arista de atrás */
	transition: transform .62s cubic-bezier(.45, -0.28, .18, 1.35); }
.cl-front { width: 88px; height: 26px; border-radius: 9px 9px 2px 2px;
	transform: translate(-50%, -50%) translateZ(28px);
	background: linear-gradient(#9a6530, #6b421c);
	box-shadow: inset 0 3px 6px -3px rgba(255, 205, 120, .5); }
.cl-back { width: 88px; height: 26px; border-radius: 9px 9px 2px 2px; transform: translate(-50%, -50%) rotateY(180deg) translateZ(28px); background: #573517; }
.cl-left { width: 56px; height: 26px; border-radius: 8px 8px 2px 2px; transform: translate(-50%, -50%) rotateY(-90deg) translateZ(44px); background: linear-gradient(#7d4f24, #4a2c10); }
.cl-right { width: 56px; height: 26px; border-radius: 8px 8px 2px 2px; transform: translate(-50%, -50%) rotateY(90deg) translateZ(44px); background: linear-gradient(#8a5a2b, #573517); }
.cl-top { width: 88px; height: 56px; border-radius: 8px;
	transform: translate(-50%, -50%) rotateX(90deg) translateZ(13px);
	background: linear-gradient(120deg, #a56d33, #7a4e23 60%, #5c3a16);
	box-shadow: inset 0 0 0 3px rgba(255, 207, 74, .25); }
.cl-front::before, .cl-front::after { content: ""; position: absolute; top: -2px; bottom: -2px; width: 7px; background: linear-gradient(#ffcf4a, #a9751a); }
.cl-front::before { left: 11px; } .cl-front::after { right: 11px; }

/* cerradura sobre la costura frontal */
.chest-lock { width: 16px; height: 19px; position: absolute; left: 0; top: 0; z-index: 2;
	transform: translate(-50%, -50%) translate3d(0, -16px, 29.5px);
	border-radius: 3px 3px 4px 4px; border: 1.5px solid #7a5410;
	background: linear-gradient(#ffe89a, #d59a1e); box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.chest-lock::after { content: ""; position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 3px; height: 6px; background: #5a3a08; border-radius: 2px; }

/* efectos de la escena */
.chest-glow { position: absolute; inset: -18%; border-radius: 50%; opacity: 0; pointer-events: none;
	background: radial-gradient(circle, rgba(255, 207, 74, .55), transparent 62%);
	transition: opacity .45s ease, transform .55s ease; }
.chest-beam { position: absolute; left: 50%; bottom: 44px; width: 78px; height: 130px; opacity: 0; pointer-events: none;
	transform: translateX(-50%) scaleY(.3); transform-origin: 50% 100%;
	background: linear-gradient(to top, rgba(255, 232, 150, .8), rgba(255, 232, 150, 0));
	clip-path: polygon(38% 100%, 62% 100%, 100% 0, 0 0); }
.chest-ring { position: absolute; left: 50%; top: 74%; width: 96px; height: 96px; opacity: 0; pointer-events: none;
	border: 3px solid rgba(255, 207, 74, .8); border-radius: 50%;
	transform: translate(-50%, -50%) rotateX(72deg) scale(.3); }
.chest-amount { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); z-index: 6;
	font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: #ffe89a; white-space: nowrap;
	text-shadow: 0 0 18px rgba(255, 207, 74, .9), 0 2px 4px rgba(0, 0, 0, .6); pointer-events: none; }
.chest-amount.go { animation: chest-amount-rise 1.3s ease forwards; }
@keyframes chest-amount-rise { 0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.5); } 25% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.15); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-22px) scale(1); } }

/* FASE 1 · carga: el cofre tiembla cada vez más fuerte y la cerradura palpita */
.chest-card.charging .chest-scene { animation: chest-rumble .4s linear; }
@keyframes chest-rumble {
	0% { transform: translate(0, 0) rotate(0); } 15% { transform: translate(-1px, 1px) rotate(-.6deg); }
	30% { transform: translate(2px, -1px) rotate(.8deg); } 45% { transform: translate(-2px, 0) rotate(-1deg); }
	60% { transform: translate(3px, 1px) rotate(1.2deg); } 75% { transform: translate(-3px, -2px) rotate(-1.5deg); }
	90% { transform: translate(3px, 2px) rotate(1.5deg); } 100% { transform: translate(0, 0) rotate(0); }
}
.chest-card.charging .chest-lock { animation: lock-throb .4s ease; }
@keyframes lock-throb { 50% { box-shadow: 0 0 16px 4px rgba(255, 207, 74, .9), 0 2px 4px rgba(0, 0, 0, .5); } }

/* FASE 2 · apertura: la tapa GIRA sobre su bisagra, el oro estalla */
.chest-card.opening .chest3, .chest-card.opened .chest3 { animation: none; }
.chest-card.opening .clid, .chest-card.opened .clid { transform: translateY(-34px) rotateX(-108deg); }
.chest-card.opening .cb-inner, .chest-card.opened .cb-inner { opacity: 1; box-shadow: 0 0 26px 8px rgba(255, 207, 74, .55); }
.chest-card.opening .chest-glow { opacity: 1; transform: scale(1.4); }
.chest-card.opened .chest-glow { opacity: .35; }
.chest-card.opening .chest-beam { animation: beam-erupt .8s ease-out forwards; }
@keyframes beam-erupt { 0% { opacity: 0; transform: translateX(-50%) scaleY(.25); } 30% { opacity: 1; transform: translateX(-50%) scaleY(1.05); } 100% { opacity: 0; transform: translateX(-50%) scaleY(1.15); } }
.chest-card.opening .chest-ring { animation: ring-out .65s ease-out forwards; }
@keyframes ring-out { 0% { opacity: .9; transform: translate(-50%, -50%) rotateX(72deg) scale(.3); } 100% { opacity: 0; transform: translate(-50%, -50%) rotateX(72deg) scale(2.1); } }
.chest-card.opening .chest-lock, .chest-card.opened .chest-lock { transform: translate(-50%, -50%) translate3d(0, -12px, 29.5px) rotate(16deg); opacity: .85; }
.chest-card.opened { cursor: default; }
.chest-card.opened .chest-title { color: var(--muted); }

/* monedas que brotan del cofre (JS las posiciona y lanza) */
.chest-coin { position: fixed; z-index: 401; font-size: 1.35rem; pointer-events: none; will-change: transform, opacity;
	animation: chest-coin-fly 1.1s cubic-bezier(.2, .7, .3, 1) forwards; }
.chest-coin.s2 { font-size: 1rem; }
@keyframes chest-coin-fly {
	0% { transform: translate(-50%, -50%) scale(.4) rotate(0); opacity: 0; }
	22% { opacity: 1; }
	100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -80px))) scale(1.05) rotate(var(--rot, 160deg)); opacity: 0; }
}
/* fogonazo de pantalla al abrir (JS lo inyecta con --fx/--fy en el cofre) */
.chest-flash { position: fixed; inset: 0; z-index: 399; pointer-events: none;
	background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), rgba(255, 240, 180, .5), transparent 42%);
	animation: chest-flash-fade .55s ease-out forwards; }
@keyframes chest-flash-fade { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.chest-card:not(.opened):not(.opening) .chest3 { animation: none; }
	.clid { transition: none; }
	.chest-card.charging .chest-scene, .chest-card.charging .chest-lock,
	.chest-card.opening .chest-beam, .chest-card.opening .chest-ring, .chest-amount.go { animation: none; }
	.chest-flash { animation: none; opacity: 0; }
}

/* Racha diaria COMPACTA: una tira fina en vez de una tarjeta enorme */
.streak-strip { background: linear-gradient(160deg, var(--panel), var(--tinta-2)); border: 1px solid var(--panel-2); border-radius: var(--radius); padding: 12px 16px; display: grid; gap: 9px; }
.streak-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.streak-hd b { font-family: var(--font-display); font-size: .96rem; }
.streak-strip .login-cal { grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0; }
.streak-strip .login-day { padding: 6px 2px 7px; gap: 1px; }
.streak-strip .login-day small { font-size: .5rem; }
.streak-strip .login-day .login-rw { font-size: 1.05rem; }
.streak-strip .login-day .login-amt { font-size: .6rem; }
.streak-strip .login-day.claimed::after { top: 3px; right: 4px; font-size: .7rem; }
.streak-strip .login-claim-row { margin-top: 2px; }
.streak-strip .login-claim-row .btn { padding: 8px 18px; }
.streak-strip .login-claim-row .muted { font-size: .8rem; }

/* --- Ticker de actividad --- */
.ticker {
	display: flex; align-items: center; gap: 10px;
	background: var(--tinta-2); border-block: 1px solid var(--panel);
	padding: 8px 16px; font-size: .82rem; color: var(--muted);
	overflow: hidden; white-space: nowrap;
}
.ticker b { color: var(--hueso); }
.ticker-item { animation: ticker-in .4s ease; }
@keyframes ticker-in { from { opacity: 0; transform: translateY(8px); } }

/* --- Overlay: near-miss + siguiente --- */
.go-near { color: var(--marquesina); font-weight: 800; margin: 0 0 6px; animation: near-pulse 1s ease-in-out infinite; }
@keyframes near-pulse { 50% { transform: scale(1.06); } }

/* --- HUD: pop de monedas al cambiar --- */
.pill b.bump { animation: coin-bump .4s cubic-bezier(.34, 1.56, .64, 1); display: inline-block; }
@keyframes coin-bump { 40% { transform: scale(1.45); color: var(--marquesina); } }

/* --- Tilt 3D de las cards (transform lo pone JS) --- */
.game-card { transform-style: preserve-3d; will-change: transform; }
.game-card .game-emoji { transform: translateZ(26px); }

@media (prefers-reduced-motion: reduce) {
	.mascota-sprite, .chest-emoji, .go-near, .daily-card::before { animation: none !important; }
	.confetti { display: none; }
}

/* =========== Punch pack: boot, CRT, showcase, fantasmas =========== */

/* --- Capa CRT global (sutil) + modo fósforo (Konami) --- */
.crt-layer {
	position: fixed; inset: 0; z-index: 80; pointer-events: none;
	background:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, .04) 0 1px, transparent 1px 4px),
		radial-gradient(ellipse at center, transparent 66%, rgba(0, 0, 0, .18) 100%);
	mix-blend-mode: multiply;
	opacity: .6;
}
body.fosforo { filter: sepia(1) hue-rotate(60deg) saturate(2.4) contrast(1.05); }
body.fosforo .crt-layer { opacity: 1; background:
	repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px),
	radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, .4) 100%); }

/* --- Barra de progreso de scroll --- */
.scroll-power {
	position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 95;
	background: linear-gradient(90deg, var(--chicle), var(--marquesina), var(--crt));
	transform-origin: left; transform: scaleX(0);
}

/* --- Transición apagado CRT entre páginas --- */
.crt-wipe {
	position: fixed; inset: 0; z-index: 400; pointer-events: none;
	background: #05071A; opacity: 0;
	clip-path: inset(50% 0 50% 0);
	transition: clip-path .24s ease-in, opacity .1s;
}
.crt-wipe.on { opacity: 1; clip-path: inset(0 0 0 0); }

/* --- Mute pill --- */
/* Botón de venta en estado "confirma" (el objeto está equipado): alerta rosa */
.btn-confirm-sell {
	border-color: var(--chicle) !important;
	color: var(--chicle) !important;
	box-shadow: 0 0 16px -6px var(--chicle);
	animation: confirm-pulse 1s ease-in-out infinite;
}
@keyframes confirm-pulse { 50% { box-shadow: 0 0 22px -4px var(--chicle); } }
@media (prefers-reduced-motion: reduce) { .btn-confirm-sell { animation: none; } }

.pill-mute { cursor: pointer; transition: opacity .15s ease, border-color .15s ease; }
.pill-mute.is-off { opacity: .55; border-color: color-mix(in srgb, var(--muted) 60%, transparent); }

/* --- Números fantasma --- */
.wrap.section { position: relative; }
.ghost-num {
	position: absolute; top: -0.15em; right: -2%; z-index: -1;
	font-family: var(--font-display); font-weight: 800;
	font-size: clamp(7rem, 26vw, 15rem); line-height: 1;
	color: transparent;
	-webkit-text-stroke: 2px var(--panel-2);
	opacity: .55; pointer-events: none; user-select: none;
	white-space: nowrap;
}

/* --- Iniciales de récord --- */
.go-initials {
	display: flex; gap: 8px; align-items: center; justify-content: center;
	margin: 4px 0 8px;
}
.go-initials label {
	display: flex; gap: 8px; align-items: center;
	font-family: var(--font-score); font-size: .7rem; letter-spacing: .2em; color: var(--muted);
}
.go-initials input {
	width: 84px; text-align: center; text-transform: uppercase;
	font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
	color: var(--marquesina); background: var(--tinta-2);
	border: 2px solid var(--panel-2); border-radius: 10px; padding: 6px 0;
	letter-spacing: .3em;
}
.go-initials input:focus { border-color: var(--marquesina); outline: none; }

@media (prefers-reduced-motion: reduce) {
	.crt-wipe { display: none; }
	.scroll-power { display: none; }
}

/* =========== La Máquina (secuencia scroll) =========== */
.cab-seq {
	position: relative; height: 100dvh; overflow: hidden;
	display: grid; place-items: center;
	background:
		radial-gradient(60% 50% at 50% 100%, rgba(255, 93, 143, .08), transparent 70%),
		var(--tinta-2);
	border-block: 1px solid var(--panel);
}
.cab-stage { position: relative; will-change: transform; }

/* --- El mueble --- */
.cabinet {
	position: relative;
	width: min(300px, 68vw);
	filter: drop-shadow(0 34px 60px rgba(0, 0, 0, .65));
}
.cab-marquee {
	background: linear-gradient(#241638, #191E45);
	border: 6px solid #05071A; border-bottom: 0;
	border-radius: 16px 16px 0 0;
	text-align: center; padding: 12px 8px;
	font-family: var(--font-display); font-weight: 800; letter-spacing: .14em;
	color: var(--marquesina); font-size: .95rem;
}
.cab-bezel { background: #05071A; padding: 14px; }
.cab-screen {
	position: relative;
	aspect-ratio: 4 / 3.4;
	background: #000;
	border-radius: 10px; overflow: hidden;
	border: 3px solid #12163A;
}
#cab-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cab-scan {
	position: absolute; inset: 0; pointer-events: none;
	background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px);
}
.cab-glare {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .12) 42%, rgba(255, 255, 255, .03) 50%, transparent 60%);
}
.cab-off { position: absolute; inset: 0; background: #020309; box-shadow: inset 0 0 40px #000; }

.cab-panel {
	display: flex; align-items: center; gap: 18px;
	background: linear-gradient(#222860, #191E45);
	border: 6px solid #05071A; border-block: 0;
	padding: 18px 20px 14px;
	transform: perspective(340px) rotateX(16deg);
	transform-origin: top;
}
.cab-joy { position: relative; width: 12px; height: 30px; background: #05071A; border-radius: 8px; }
.cab-joy i {
	position: absolute; top: -15px; left: 50%; translate: -50%;
	width: 26px; height: 26px; border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, #FF9DB8, var(--chicle) 55%, #8C2B44);
}
.cab-btn { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .35), 0 2px 0 #05071A; }
.cab-btn.b1 { margin-left: auto; background: radial-gradient(circle at 34% 30%, #FFE9A6, var(--marquesina) 60%, #B8860B); }
.cab-btn.b2 { background: radial-gradient(circle at 34% 30%, #B8F3FB, var(--crt) 60%, #1E7C8C); }

.cab-lower {
	position: relative;
	display: grid; place-items: center;
	background: linear-gradient(#12163A, #0A0D24);
	border: 6px solid #05071A; border-top: 0;
	border-radius: 0 0 16px 16px;
	padding: 16px;
}
.cab-slot {
	position: relative;
	display: grid; justify-items: center; gap: 4px;
	background: #05071A; border: 2px solid #12163A; border-radius: 8px;
	padding: 8px 14px;
}
.cab-slot i { width: 5px; height: 22px; background: #000; border-radius: 2px; box-shadow: 0 0 0 3px #191E45; }
.cab-slot small { font-family: var(--font-score); font-size: .55rem; letter-spacing: .22em; color: var(--muted); }
.cab-slot-flash {
	position: absolute; inset: -10px; border-radius: 12px; pointer-events: none;
	background: radial-gradient(circle, rgba(255, 210, 74, .8), transparent 70%);
	opacity: 0;
}
.cab-feet { display: flex; justify-content: space-between; padding: 0 10px; }
.cab-feet i { width: 26px; height: 12px; background: #05071A; border-radius: 0 0 6px 6px; }

/* --- Moneda POV --- */
.cab-coin { position: absolute; z-index: 8; pointer-events: none; will-change: transform, filter; }
.cab-coin {
	display: grid; place-items: center;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 28%, #FFE9A6, var(--marquesina) 55%, #B8860B);
	color: #7A5B00; font-weight: 800;
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .28), 0 6px 14px rgba(0, 0, 0, .45);
}

/* --- Rótulos y CTA --- */
.cab-caption {
	position: absolute; left: 0; right: 0; z-index: 5; pointer-events: none;
	text-align: center; margin: 0;
	font-family: var(--font-display); font-weight: 800;
	font-size: clamp(1.05rem, 4.4vw, 1.7rem); letter-spacing: .06em;
	color: var(--hueso); text-shadow: 0 4px 26px rgba(0, 0, 0, .85);
}
.cap-1 { top: 9%; }
.cap-2 { bottom: 8%; color: var(--crt); }
.cab-cta {
	position: absolute; inset: 0; z-index: 6;
	display: grid; place-items: center; align-content: center; gap: 12px;
	text-align: center; padding: 20px;
	background: radial-gradient(ellipse at center, rgba(5, 7, 26, 0) 28%, rgba(5, 7, 26, .58));
}
.cab-cta-kicker { margin: 0; font-family: var(--font-score); font-size: .72rem; letter-spacing: .3em; color: var(--marquesina); }
.cab-cta-title {
	margin: 0; font-family: var(--font-display); font-weight: 800;
	font-size: clamp(2rem, 9vw, 4.2rem); letter-spacing: -0.01em;
	text-shadow: 0 10px 44px rgba(0, 0, 0, .9);
}

/* --- Fallback estático (sin GSAP / reduced-motion) --- */
.cab-static { height: auto; padding: 64px 20px; }
.cab-static .cab-off, .cab-static .cab-coin, .cab-static .cab-caption { display: none; }
.cab-static .cab-cta { position: static; background: none; opacity: 1; transform: none; pointer-events: auto; margin-top: 22px; }

/* =========== v4: legibilidad, economía, misiones y guiños =========== */

/* Header sólido al hacer scroll (legible sobre cualquier fondo). */
.site-head.scrolled {
	background: color-mix(in srgb, var(--tinta-2) 96%, transparent);
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5);
}

/* Emojis con vida en las cards. */
.game-card:hover .game-emoji { animation: emoji-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes emoji-pop { 40% { transform: translateZ(26px) scale(1.25) rotate(-8deg); } }
.tag-2p {
	font-family: var(--font-score); font-size: .6rem; vertical-align: middle;
	color: var(--tinta); background: var(--crt);
	border-radius: 4px; padding: 2px 6px; letter-spacing: .08em;
}

/* Candados de la economía. */
.game-card.is-locked { filter: saturate(.75); }
.game-card.is-locked .game-emoji { filter: grayscale(.5) drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.lock-badge {
	position: absolute; top: 12px; right: 12px;
	background: color-mix(in srgb, var(--tinta-2) 88%, transparent);
	border: 1px solid var(--panel-2); border-radius: 999px;
	padding: 5px 12px; font-family: var(--font-score); font-size: .72rem; font-weight: 700;
	color: var(--marquesina);
}
.unlock-price { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--marquesina); margin: 6px 0 14px; }
.unlock-price small { font-family: var(--font-score); font-size: .8rem; color: var(--muted); font-weight: 400; }
.unlock-screen .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* Misiones diarias. */
.missions { margin-top: 16px; background: var(--panel); border: 1px solid var(--panel-2); border-radius: var(--radius); padding: 18px 20px; }
.missions h3 { font-family: var(--font-display); font-size: 1rem; margin: 0 0 12px; }
.missions ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.missions li { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "label state reward" "bar bar bar"; gap: 4px 10px; align-items: center; font-size: .9rem; }
.m-label { grid-area: label; font-weight: 600; }
.m-state { grid-area: state; font-family: var(--font-score); font-size: .78rem; color: var(--muted); }
.m-reward { grid-area: reward; font-family: var(--font-score); font-size: .78rem; color: var(--marquesina); font-weight: 700; }
.m-bar { grid-area: bar; height: 7px; background: var(--tinta-2); border-radius: 999px; overflow: hidden; }
.m-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--crt), var(--chicle)); transition: width .4s ease; }
.missions li.is-done .m-label { color: var(--muted); text-decoration: line-through; }
.missions li.is-done .m-bar i { background: #4CAF7D; }

/* 1UP flotante al subir de nivel. */
.oneup {
	position: fixed; left: 50%; top: 38%; z-index: 260; translate: -50% 0;
	font-family: var(--font-display); font-weight: 800;
	font-size: clamp(1.6rem, 7vw, 2.6rem); color: #7CFF6B;
	text-shadow: 0 6px 30px rgba(0, 0, 0, .7);
	pointer-events: none;
	animation: oneup 1.6s ease forwards;
}
@keyframes oneup {
	0% { opacity: 0; transform: translateY(26px) scale(.7); }
	18% { opacity: 1; transform: translateY(0) scale(1.08); }
	30% { transform: translateY(0) scale(1); }
	100% { opacity: 0; transform: translateY(-60px); }
}

/* Banner de reto por link. */
.challenge {
	margin: 0 0 10px; text-align: center;
	background: color-mix(in srgb, var(--chicle) 20%, var(--panel));
	border: 1px solid var(--chicle); border-radius: 12px;
	padding: 9px 14px; font-size: .92rem;
}

/* Barrel roll (triple click en el logo). */
body.roll { animation: barrel 1.1s cubic-bezier(.45, 0, .3, 1); }
@keyframes barrel { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	body.roll, .game-card:hover .game-emoji, .oneup { animation: none !important; }
}

/* =====================================================================
   v5 — CAPA RPG: header rico · La Tienda · La Mazmorra · máquina realista
   ===================================================================== */

/* ---------- Helpers compartidos ---------- */
.grad-text {
	background: linear-gradient(90deg, var(--chicle), var(--marquesina) 50%, var(--crt));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.shop-kicker {
	font-family: var(--font-score); font-size: .72rem; letter-spacing: .18em;
	color: var(--marquesina); margin: 0 0 10px; text-transform: uppercase;
}
.power-meter {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--tinta-2); border: 1px solid var(--panel-2); border-radius: 999px;
	padding: 6px 14px; font-family: var(--font-score); font-size: .8rem;
}
.power-meter span { color: var(--muted); letter-spacing: .12em; }
.power-meter b { font-family: var(--font-display); font-size: 1.15rem; color: var(--marquesina); }
.power-meter.big { font-size: .9rem; }
.power-meter.big b { font-size: 1.5rem; }
.stat-chip {
	display: inline-flex; align-items: center; gap: 3px;
	font-family: var(--font-score); font-size: .72rem; font-weight: 700;
	border-radius: 6px; padding: 3px 8px; background: var(--tinta-2); color: var(--hueso);
}
.stat-chip.atk { color: #FF9DB8; } .stat-chip.def { color: #8FE3EB; }
.stat-chip.hp { color: #9CFF8F; } .stat-chip.blk { color: #CBB0FF; }
.stat-chip.cos { color: var(--marquesina); }
.stat-chip.mana { color: #8fd0ff; } .stat-chip.mag { color: #c9a8ff; } .stat-chip.mres { color: #8FE3EB; }

/* ---------- HEADER enriquecido ---------- */
.site-head {
	gap: 12px;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--tinta-2) 92%, transparent), color-mix(in srgb, var(--tinta) 80%, transparent));
	box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 30px -20px rgba(0, 0, 0, .8);
}
.site-head::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 1;
	background: linear-gradient(90deg, var(--chicle), var(--marquesina), var(--crt), var(--chicle));
	background-size: 300% 100%; animation: neon-slide 10s linear infinite; opacity: .9;
}
.brand { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.brand-mark {
	display: inline-block; color: var(--chicle);
	filter: drop-shadow(0 0 8px color-mix(in srgb, var(--chicle) 70%, transparent));
	animation: brand-pulse 3.4s ease-in-out infinite;
}
@keyframes brand-pulse { 50% { transform: translateY(-2px) rotate(-6deg); filter: drop-shadow(0 0 14px var(--marquesina)); } }
.site-nav {
	overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
	flex-wrap: nowrap; padding-bottom: 2px;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { white-space: nowrap; transition: background .16s, color .16s; }
.site-nav a.is-active {
	color: var(--tinta); background: var(--marquesina);
	box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--marquesina) 70%, transparent);
}
.site-nav a.is-active:hover { color: var(--tinta); }
/* Enlace "Comprar" destacado en la barra de navegación */
.site-nav a.nav-buy {
	color: #1a1030; background: linear-gradient(120deg, var(--marquesina), var(--chicle));
	font-weight: 800; border-radius: 999px; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--chicle) 70%, transparent);
}
.site-nav a.nav-buy:hover { color: #1a1030; filter: brightness(1.08); }
/* "Mi cuenta": separado del resto y con un acento propio (acceso a la cuenta,
 * no una sección del juego). Se despega con un margen y una línea superior. */
.site-nav a.nav-account {
	margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--panel-2);
	color: var(--crt); font-weight: 700;
}
.site-nav a.nav-account:hover { color: var(--tinta); background: var(--crt); }
.site-nav a.nav-account.is-active { color: var(--tinta); background: var(--crt); border-top-color: transparent; }
/* ---- Menú desplegable UNIVERSAL (también en escritorio): un único botón ☰ Menú ---- */
.nav-toggle { display: inline-flex; align-items: center; gap: 8px; order: 0; padding: 8px 13px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: var(--panel); border: 1px solid var(--panel-2); color: var(--hueso); cursor: pointer; }
.nav-toggle:hover { background: var(--panel-2); }
.nav-toggle-bars { display: flex; flex-direction: column; gap: 4px; }
.nav-toggle-bars span { display: block; width: 18px; height: 2px; background: var(--hueso); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle-txt { font-family: var(--font-display); font-weight: 800; font-size: .9rem; letter-spacing: .02em; }
.site-head.nav-open .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-head.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.site-head.nav-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.pill-coins { background: linear-gradient(180deg, #2c3372, #232a5f); border-color: #4a529f; }
.pill-coins b { color: var(--marquesina); }
.pill-level { background: linear-gradient(180deg, #33285e, #251d47); border-color: #4a3f8f; }
.pill-level b { color: #CBB0FF; }
.pill-avatar {
	padding: 4px; width: 34px; height: 34px; justify-content: center;
	font-size: 1.15rem; border-radius: 50%;
	background: radial-gradient(circle at 35% 28%, var(--panel-2), var(--panel));
}
.pill-avatar:hover { box-shadow: 0 0 0 2px var(--crt); }
/* La navegación se colapsa SIEMPRE en un panel desplegable anclado bajo el botón. */
.site-nav {
	position: absolute; top: calc(100% + 6px); right: 12px; left: auto; margin: 0;
	width: min(300px, calc(100vw - 24px));
	flex-direction: column; align-items: stretch; gap: 3px; overflow: hidden;
	background: color-mix(in srgb, var(--tinta-2) 97%, transparent); backdrop-filter: blur(14px);
	border: 1px solid var(--panel-2); border-radius: 16px;
	box-shadow: 0 26px 46px -22px rgba(0, 0, 0, .95);
	padding: 0; max-height: 0; visibility: hidden; opacity: 0;
	transition: max-height .26s ease, padding .26s ease, opacity .18s ease, visibility 0s linear .26s;
	z-index: 60;
}
.site-head.nav-open .site-nav { max-height: min(80vh, 640px); overflow-y: auto; visibility: visible; opacity: 1; padding: 8px; transition: max-height .26s ease, padding .26s ease, opacity .18s ease; }
.site-nav a { white-space: nowrap; font-size: .96rem; padding: 11px 14px; border-radius: 10px; }
.site-nav a:hover, .site-nav a.is-active { background: var(--panel-2); color: var(--hueso); }
.site-nav a.is-active { box-shadow: inset 3px 0 0 var(--marquesina); }
/* head-user a la derecha; "Comprar" el más a la derecha del todo (order alto en el flex). */
.head-user { margin-left: auto; }
.head-user .nav-buy { order: 9; color: #1a1030; background: linear-gradient(120deg, var(--marquesina), var(--chicle)); font-weight: 800; border-radius: 999px; padding: 8px 14px; font-size: .9rem; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--chicle) 70%, transparent); white-space: nowrap; }
.head-user .nav-buy:hover { color: #1a1030; filter: brightness(1.08); text-decoration: none; }
/* Nivel, racha y boosts YA NO se muestran en el header (están en el perfil). */
.head-user .pill-streak, .head-user .pill-level { display: none; }
/* Pantallas pequeñas: el panel casi al ancho completo y el botón pierde la etiqueta. */
@media (max-width: 560px) {
	.site-head { gap: 10px; padding: 10px 14px; }
	.site-nav { right: 8px; left: auto; width: calc(100vw - 16px); }
	.nav-toggle-txt { display: none; }
	.head-user .nav-buy { padding: 7px 11px; font-size: .82rem; }
}
/* Móviles muy estrechos: "Comprar" solo icono y sin botón de mute, para que quepa todo. */
@media (max-width: 440px) {
	.head-user { gap: 6px; }
	.pill-mute { display: none; }
	.head-user .nav-buy { font-size: 0; padding: 8px 10px; }
	.head-user .nav-buy::after { content: "💳"; font-size: 1.05rem; }
}
@media (max-width: 380px) {
	.brand { font-size: .95rem; }
	.pill { padding: 5px 10px; font-size: .78rem; }
}

/* ---------- MÁQUINA hiperrealista (mejora de v4) ---------- */
.cabinet { filter: drop-shadow(0 40px 70px rgba(0, 0, 0, .75)); }
.cabinet::after {
	content: ""; position: absolute; left: 8%; right: 8%; bottom: -30px; height: 34px; z-index: -1;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, .6), transparent 72%);
	filter: blur(4px);
}
.cab-marquee {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 40%),
		linear-gradient(#3a2358, #241638 60%, #191E45);
	box-shadow: inset 0 0 20px rgba(255, 201, 122, .12), inset 0 2px 0 rgba(255, 255, 255, .1);
	text-shadow: 0 0 10px rgba(255, 201, 122, .35);
	position: relative;
}
.cab-marquee::before {
	content: ""; position: absolute; left: 10px; right: 10px; top: 4px; height: 4px; border-radius: 4px;
	background-image: radial-gradient(circle 2px, rgba(255, 240, 200, .9) 45%, transparent 55%);
	background-size: 12px 4px; opacity: .5;
}
.cab-bezel {
	background: linear-gradient(160deg, #0c1030, #05071A 60%);
	box-shadow: inset 0 2px 3px rgba(255, 255, 255, .06), inset 0 -6px 14px rgba(0, 0, 0, .7);
	padding: 16px;
}
.cab-screen {
	box-shadow:
		inset 0 0 46px rgba(0, 0, 0, .75),
		inset 0 0 100px rgba(0, 0, 0, .5),
		0 0 0 3px #0a0e26;
	border: 3px solid #0a0e26;
}
.cab-screen::after { /* curvatura CRT */
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
	border-radius: 10px;
	box-shadow: inset 0 0 34px rgba(0, 0, 0, .55);
	background: radial-gradient(120% 120% at 50% 42%, transparent 62%, rgba(0, 0, 0, .38));
}
.cab-glare {
	background: linear-gradient(118deg, transparent 26%, rgba(255, 255, 255, .16) 40%, rgba(255, 255, 255, .04) 48%, transparent 58%);
}
.cab-panel {
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px),
		linear-gradient(#2a3170, #191E45);
	box-shadow: inset 0 3px 4px rgba(255, 255, 255, .08), inset 0 -8px 16px rgba(0, 0, 0, .5);
}
.cab-panel::after { /* rejilla de altavoz */
	content: ""; width: 34px; height: 26px; margin-left: 6px; align-self: center;
	background-image: radial-gradient(circle 1.6px, #05071A 60%, transparent 62%);
	background-size: 7px 7px; opacity: .7; border-radius: 3px;
}
.cab-btn { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .35), inset 0 3px 4px rgba(255, 255, 255, .4), 0 2px 0 #05071A; }
.cab-lower {
	background: linear-gradient(#141a44, #0A0D24);
	box-shadow: inset 0 4px 8px rgba(0, 0, 0, .5);
}

/* ---------- Puerta de monedas (brass coin door) ---------- */
.coin-door { display: grid; justify-items: center; gap: 6px; }
.cab-slot {
	position: relative;
	display: grid; place-items: center;
	width: 54px; height: 46px; padding: 0;
	background:
		linear-gradient(180deg, #ffe9a6 0%, #e8c66a 30%, #b8860b 62%, #7a5a12 100%);
	border: 2px solid #6b4e0e; border-radius: 9px;
	box-shadow:
		inset 0 2px 2px rgba(255, 255, 255, .6), inset 0 -4px 5px rgba(0, 0, 0, .45),
		0 3px 6px rgba(0, 0, 0, .5);
}
.cab-slot .cab-slit {
	width: 7px; height: 30px; border-radius: 4px;
	background: linear-gradient(180deg, #000, #12122a);
	box-shadow: inset 0 0 5px #000, inset 0 3px 3px rgba(0, 0, 0, .9), 0 0 0 2px rgba(0, 0, 0, .35);
}
.coin-door-label {
	font-family: var(--font-score); font-size: .5rem; letter-spacing: .2em; color: var(--marquesina);
	animation: coin-blink 1.4s steps(2) infinite;
}
@keyframes coin-blink { 50% { opacity: .35; } }
.coin-return {
	width: 20px; height: 8px; border-radius: 0 0 6px 6px;
	background: linear-gradient(#2a2f66, #12163A); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .6);
}

/* ---------- Moneda hiperrealista ---------- */
.cab-coin {
	color: #7A5B00; font-weight: 800;
	background:
		radial-gradient(circle at 36% 30%, #fff6d6 0%, #FFE9A6 22%, #f0c34e 48%, #c8931c 72%, #9a6f12 100%);
	box-shadow:
		inset 0 3px 4px rgba(255, 255, 255, .7),
		inset 0 -5px 8px rgba(122, 82, 0, .6),
		inset 0 0 0 2px rgba(255, 240, 200, .35),
		0 8px 16px rgba(0, 0, 0, .5);
}
.cab-coin::before { /* canto estriado */
	content: ""; position: absolute; inset: -1px; border-radius: 50%;
	background: repeating-conic-gradient(#b8860b 0deg 6deg, #ffe9a6 6deg 12deg);
	opacity: .35; -webkit-mask: radial-gradient(circle, transparent 66%, #000 68%); mask: radial-gradient(circle, transparent 66%, #000 68%);
}
.cab-coin::after { /* brillo especular */
	content: ""; position: absolute; top: 12%; left: 18%; width: 42%; height: 30%; border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .85), transparent 70%);
}
.cab-coin { display: grid; place-items: center; text-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 -1px 0 rgba(0, 0, 0, .3); }

/* =====================================================================
   LA TIENDA
   ===================================================================== */
.shop-hero {
	background:
		radial-gradient(700px 300px at 85% -20%, rgba(255, 143, 163, .16), transparent 60%),
		radial-gradient(500px 300px at 0% 120%, rgba(127, 215, 221, .14), transparent 60%);
	padding: 40px 0 20px; border-bottom: 1px solid var(--panel);
}
.shop-hero-inner { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 820px) { .shop-hero-inner { grid-template-columns: 1.4fr .9fr; } }
.shop-title { margin: 0 0 10px; }
.shop-sub { max-width: 52ch; }
.loadout-card {
	background: linear-gradient(160deg, var(--panel), var(--tinta-2));
	border: 1px solid var(--panel-2); border-radius: var(--radius);
	padding: 18px 20px; display: grid; gap: 12px;
}
.loadout-card h3 { margin: 0; font-family: var(--font-display); font-size: 1rem; }
/* Rejilla de contenedores grandes con el objeto equipado (sin muñeco) */
.loadout-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.lo-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; text-align: center; background: var(--tinta-2); border: 1px solid var(--panel-2); border-radius: 14px; padding: 14px 10px 12px; cursor: pointer; color: var(--hueso); font-family: var(--font-body); transition: border-color .15s, transform .12s, background .15s; }
.lo-slot:hover { border-color: var(--crt); transform: translateY(-3px); }
.lo-slot.has-gear { border-color: color-mix(in srgb, var(--crt) 55%, var(--panel-2)); background: color-mix(in srgb, var(--crt) 8%, var(--tinta-2)); }
.lo-emoji { font-size: 2.1rem; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.lo-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; min-width: 0; width: 100%; }
.lo-txt small { color: var(--muted); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.lo-txt b { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doll-wrap, .doll-canvas { display: none; }
/* Encantamiento: +N badge y glow que crece con el nivel */
.lo-slot { position: relative; }
.lo-slot.ench { box-shadow: 0 0 calc(6px + var(--g, 0) * 22px) color-mix(in srgb, var(--marquesina) calc(30% + var(--g) * 60%), transparent); border-color: var(--marquesina); }
.lo-plus, .ench-plus { position: absolute; top: 4px; right: 6px; font-family: var(--font-score); font-weight: 800; font-size: .74rem; color: #1a1030; background: var(--marquesina); border-radius: 8px; padding: 0 5px; }
.ench-wrap { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ench-card { display: flex; gap: 14px; align-items: flex-start; background: var(--panel); border: 1px solid var(--panel-2); border-radius: 18px; padding: 16px; }
.ench-item { position: relative; width: 74px; height: 74px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 16px; background: var(--tinta-2); border: 1px solid var(--panel-2); box-shadow: 0 0 calc(4px + var(--g, 0) * 30px) color-mix(in srgb, var(--marquesina) calc(20% + var(--g) * 70%), transparent); }
.ench-emoji { font-size: 2.4rem; filter: drop-shadow(0 0 calc(var(--g, 0) * 10px) var(--marquesina)); }
.ench-body { min-width: 0; }
.ench-body b { font-size: 1rem; }
.ench-chance { font-size: .82rem; margin: 8px 0; }
.ench-chance .up, .ench-body .up { color: #9CFF8F; }
.ench-chance .down { color: #FF9DB8; }
.ench-note { font-size: .78rem; margin: 8px 0; }
.ench-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* Medidor de FURIA de la Arena */
.rage-meter { grid-column: 1 / -1; position: relative; height: 20px; border-radius: 999px; overflow: hidden; background: var(--tinta-2); border: 1px solid var(--panel-2); margin-bottom: 2px; }
.rage-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FF9D2F, #FF3B3B); transition: width .2s ease; }
.rage-meter b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-score); font-size: .68rem; color: var(--hueso); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.rage-meter.full { border-color: #FF3B3B; box-shadow: 0 0 14px -2px #FF3B3B; }
.rage-meter.full i { animation: today-pulse 1s ease-in-out infinite; }
.arena-act[data-act="rage"] { background: linear-gradient(120deg, #FF9D2F, #FF3B3B); color: #1a1030; font-weight: 800; }
.arena-act[data-act="rage"]:disabled { background: var(--panel); color: var(--muted); }

/* =====================================================================
   SALA DE CHAT
   ===================================================================== */
.chat-intro { max-width: 70ch; }
.chat-layout { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 14px; }
@media (min-width: 780px) { .chat-layout { grid-template-columns: 1fr 280px; } }
.chat-main { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--panel-2); border-radius: 18px; overflow: hidden; }
/* Sala isométrica estilo Habbo */
/* cielo del pueblo: atardecer índigo con estrellas; el canvas pinta el suelo encima */
.chat-room-wrap {
	position: relative;
	background:
		radial-gradient(1.4px 1.4px at 12% 12%, rgba(255, 255, 255, .6), transparent 100%),
		radial-gradient(1.2px 1.2px at 30% 26%, rgba(255, 255, 255, .4), transparent 100%),
		radial-gradient(1.6px 1.6px at 52% 9%, rgba(255, 255, 255, .55), transparent 100%),
		radial-gradient(1.1px 1.1px at 68% 22%, rgba(255, 255, 255, .38), transparent 100%),
		radial-gradient(1.5px 1.5px at 84% 14%, rgba(255, 255, 255, .5), transparent 100%),
		radial-gradient(1.2px 1.2px at 93% 30%, rgba(255, 255, 255, .35), transparent 100%),
		radial-gradient(120% 100% at 50% -12%, #3c4083 0%, #262a58 46%, #131538 100%);
}
.chat-room-wrap { isolation: isolate; }
/* cielo diurno superpuesto: el ciclo día/noche del pueblo lo funde con la clase .is-day */
.chat-room-wrap::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 2.5s ease; background: radial-gradient(120% 100% at 50% -12%, #aee2ff 0%, #7fb8e8 46%, #5a90c8 100%); }
.chat-room-wrap.is-day::before { opacity: 1; }
.chat-room-wrap::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 110px 26px rgba(5, 7, 26, .5); }
.chat-daybadge { position: absolute; top: 10px; right: 10px; z-index: 2; font-family: var(--font-score); font-size: .7rem; font-weight: 700; color: var(--hueso); background: rgba(5, 7, 26, .6); border: 1px solid var(--panel-2); border-radius: 999px; padding: 4px 10px; pointer-events: none; backdrop-filter: blur(3px); }
#chat-room { display: block; width: 100%; height: min(62vh, 540px); touch-action: none; cursor: default; }
.chat-place { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--font-score); font-size: .74rem; font-weight: 700; letter-spacing: .03em; color: var(--hueso); background: rgba(5, 7, 26, .68); border: 1px solid color-mix(in srgb, var(--marquesina) 35%, transparent); border-radius: 999px; padding: 5px 12px; pointer-events: none; backdrop-filter: blur(3px); }
.chat-place small { color: var(--muted); font-weight: 600; }
.chat-room-hint { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 2; display: flex; gap: 4px 14px; flex-wrap: wrap; justify-content: center; font-size: .68rem; color: var(--muted); background: rgba(5, 7, 26, .62); padding: 5px 14px; border-radius: 12px; pointer-events: none; max-width: 94%; backdrop-filter: blur(3px); }
.chat-room-hint span { white-space: nowrap; }
.chat-log-details { border-top: 1px solid var(--panel-2); background: var(--tinta-2); }
.chat-log-details > summary { cursor: pointer; padding: 10px 14px; font-size: .82rem; font-weight: 700; color: var(--muted); list-style: none; }
.chat-log-details > summary::-webkit-details-marker { display: none; }
.chat-log-details[open] > summary { color: var(--hueso); }
.chat-log { list-style: none; margin: 0; padding: 14px; display: flex; flex-direction: column; gap: 10px; height: 34vh; overflow-y: auto; }
/* Chat privado (DM) */
.chat-dm-overlay { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; overflow-y: auto; padding: 16px; background: rgba(5, 7, 26, .72); backdrop-filter: blur(4px); }
.chat-dm-overlay[hidden] { display: none; }
.chat-dm-card { width: min(440px, 94vw); background: var(--panel); border: 1px solid var(--panel-2); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9); }
.chat-dm-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--tinta-2); border-bottom: 1px solid var(--panel-2); }
.chat-dm-head .cp-emoji { font-size: 1.4rem; }
.chat-dm-log { list-style: none; margin: 0; padding: 14px; display: flex; flex-direction: column; gap: 8px; height: 40vh; overflow-y: auto; }
.dm-msg { display: flex; }
.dm-msg.mine { justify-content: flex-end; }
.dm-msg.system { justify-content: center; }
.dm-bubble { max-width: 78%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--tinta-2); border: 1px solid var(--panel-2); font-size: .9rem; color: var(--hueso); word-break: break-word; }
.dm-msg.mine .dm-bubble { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border-radius: 14px 14px 4px 14px; }
.dm-bubble.sys { background: rgba(255, 93, 143, .12); border-color: color-mix(in srgb, var(--chicle) 45%, transparent); font-size: .82rem; color: var(--muted); }
.chat-msg { display: flex; gap: 10px; align-items: flex-start; }
.chat-msg.mine { flex-direction: row-reverse; text-align: right; }
.cm-emoji { font-size: 1.6rem; width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; background: var(--tinta-2); border-radius: 12px; border: 1px solid var(--panel-2); }
.cm-body { min-width: 0; }
.cm-name { font-size: .82rem; color: var(--crt); cursor: default; }
.chat-msg [data-name].cm-name { cursor: pointer; text-decoration: underline dotted; }
.chat-msg.mine .cm-name { color: var(--marquesina); }
.cm-text { display: block; font-size: .92rem; color: var(--hueso); word-break: break-word; }
.chat-inputbar { display: flex; gap: 8px; align-items: center; padding: 10px; border-top: 1px solid var(--panel-2); background: var(--tinta-2); }
.chat-me-emoji { font-size: 1.5rem; flex: 0 0 auto; }
#chat-input { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--panel-2); border-radius: 999px; padding: 10px 14px; color: var(--hueso); font-family: var(--font-body); font-size: .95rem; }
#chat-input:focus { outline: 2px solid var(--crt); }
.chat-side h2 { margin-top: 0; }
.chat-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.chat-player { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: var(--panel); border: 1px solid var(--panel-2); border-radius: 12px; padding: 8px 10px; cursor: pointer; color: var(--hueso); transition: border-color .12s, transform .12s; }
.chat-player:hover { border-color: var(--crt); transform: translateX(2px); }
.cp-emoji { font-size: 1.5rem; }
.cp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
.cp-info b { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-info small { font-family: var(--font-score); font-size: .68rem; }
.cp-beast { font-size: 1.4rem; }
.chat-gearlist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin: 8px 0; }
.chat-gear { display: flex; gap: 8px; align-items: center; background: var(--tinta-2); border-radius: 10px; padding: 6px 8px; text-align: left; }
.cg-emoji { font-size: 1.5rem; }
.cg-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
.cg-txt small { color: var(--muted); font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; }
.cg-txt b { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-beastbox { display: flex; gap: 12px; align-items: center; background: var(--tinta-2); border: 1px solid var(--panel-2); border-radius: 12px; padding: 10px 12px; width: 100%; text-align: left; }
.cb-emoji { font-size: 2.2rem; }
/* ---- Moderación del chat ---- */
.chat-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-side-head h2 { margin: 0; }
.chat-mod-note { font-size: .74rem; margin: 4px 0 10px; }
.chat-modstatus { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: .85rem; border: 1px solid var(--panel-2); }
.chat-modstatus.warn { background: rgba(255, 210, 74, .12); border-color: rgba(255, 210, 74, .5); color: var(--marquesina); }
.chat-modstatus.ban { background: rgba(255, 93, 143, .12); border-color: #8C2B44; color: #FF9DB8; }
.cm-top { display: flex; align-items: center; gap: 8px; }
.chat-msg.mine .cm-top { flex-direction: row-reverse; }
.cm-actions { display: inline-flex; gap: 2px; opacity: .35; transition: opacity .12s; }
.chat-msg:hover .cm-actions { opacity: 1; }
.cm-act { background: none; border: 0; cursor: pointer; font-size: .82rem; padding: 2px 3px; line-height: 1; border-radius: 6px; }
.cm-act:hover { background: var(--panel-2); }
.chat-msg.system .cm-emoji { background: rgba(255, 210, 74, .16); }
.chat-msg.system .cm-name { color: var(--marquesina); }
.chat-msg.system .cm-text { color: var(--muted); font-size: .86rem; }
.cp-badge { font-family: var(--font-score); font-size: .58rem; font-weight: 800; padding: 1px 5px; border-radius: 6px; vertical-align: middle; }
.cp-badge.ban { background: #8C2B44; color: #fff; }
.cp-badge.warn { background: rgba(255, 210, 74, .25); color: var(--marquesina); }
.cp-badge.blk { background: var(--panel-2); color: var(--muted); }
.cp-badge.rep { background: rgba(255, 93, 143, .18); color: #FF9DB8; }
.chat-player.is-banned { opacity: .55; }
.chat-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 200; max-width: 90%; background: var(--panel); border: 1px solid var(--panel-2); border-radius: 12px; padding: 10px 16px; font-size: .88rem; color: var(--hueso); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .8); animation: wave-in .3s ease; }
.chat-toast.warn { border-color: rgba(255, 210, 74, .55); }
.chat-toast.bad { border-color: #8C2B44; color: #FF9DB8; }
.chat-pin { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--panel-2); border-radius: 999px; padding: 10px 14px; color: var(--hueso); font-family: var(--font-body); }
.admin-list { display: grid; gap: 6px; width: 100%; max-height: 40vh; overflow-y: auto; margin: 6px 0; }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--tinta-2); border-radius: 10px; padding: 7px 10px; text-align: left; }
.admin-row > span:last-child { display: flex; gap: 6px; flex: 0 0 auto; }

/* =====================================================================
   RESPONSIVE — móvil / smartphone (UX + jugabilidad)
   ===================================================================== */
@media (max-width: 600px) {
	.wrap, .section { padding-left: 14px; padding-right: 14px; }
	.section { margin-block: 42px; }
	.h-display { font-size: clamp(1.45rem, 7.5vw, 2.1rem); }
	.h-sub { display: block; font-size: .8rem; margin-top: 2px; }
	.ghost-num { display: none; } /* números decorativos gigantes: fuera en móvil (evitan desbordes) */
	/* Rejillas */
	.games-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.shop-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.big-games-grid { grid-template-columns: 1fr; }
	.stat-cards { grid-template-columns: 1fr 1fr; }
	.combat-cards, .ench-wrap, .gear-bag-cols { grid-template-columns: 1fr; }
	.backpack { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
	.loadout-slots { grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); }
	.adv-cards { grid-template-columns: 1fr; }
	.how, .class-grid { grid-template-columns: 1fr; }
	/* Tienda */
	.shop-hero-inner { grid-template-columns: 1fr; }
	.shop-tab { padding: 8px 12px; font-size: .82rem; }
	.combat-card, .ench-card { padding: 14px; }
	.ench-card { flex-direction: column; align-items: center; text-align: center; }
	/* Página de minijuego */
	.game-topbar { gap: 8px; padding-block: 10px; }
	.game-title { font-size: .95rem; }
	.gameover-card { width: min(94%, 360px); padding: 18px; }
	.go-actions .btn { width: 100%; }
	/* Mazmorra */
	.dg-arena { max-height: 76vh; }
	.dg-controls { gap: 8px; flex-wrap: wrap; justify-content: center; }
	.dg-belt { order: 3; width: 100%; justify-content: center; }
	.dg-spell { min-width: 88px; }
	.dg-hpwrap { padding: 6px 7px; }
	.dg-levels { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
	/* Bestia */
	.beast-actions { gap: 8px; }
	.beast-act { flex: 1 1 42%; justify-content: center; padding: 11px 10px; font-size: .84rem; }
	.beast-needs { grid-template-columns: 1fr 1fr; }
	/* Arena */
	.arena-me { gap: 10px; }
	.arena-me-avatar { width: 60px; height: 60px; font-size: 2rem; }
	.battle-actions { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 6px; }
	.arena-act { font-size: .8rem; padding: 11px 6px; }
	.f-emoji { font-size: 2.4rem !important; }
	/* Mundo */
	.map-topbar { flex-wrap: wrap; gap: 8px; }
	.map-hud { flex-wrap: wrap; gap: 6px; }
	.map-hud-item { font-size: .72rem; padding: 4px 9px; }
	.map-arena { height: min(74vh, 620px); }
	.map-spell-btn { width: 52px; height: 52px; font-size: 1.5rem; right: 10px; bottom: 10px; }
	.map-vitals { width: min(56%, 220px); }
	/* Chat */
	.chat-log { height: 52vh; }
	.chat-gearlist { grid-template-columns: 1fr; }
	/* Pie */
	.foot-links { font-size: .8rem; line-height: 1.9; }
	.hero-cta, .go-actions { flex-direction: column; }
	.hero-cta .btn { width: 100%; }
	/* Inputs a 16px: evita el zoom automático de iOS al enfocar */
	input, textarea, select, #chat-input, .go-initials input { font-size: 16px; }
}
@media (max-width: 380px) {
	.games-grid, .shop-grid, .stat-cards { grid-template-columns: 1fr; }
	.beast-act { flex-basis: 100%; }
}
/* Objetivos táctiles cómodos y sin zoom accidental en táctil */
@media (hover: none) {
	.btn, .shop-tab, .chip, .beast-act, .lo-slot, .bag-slot, .dg-pot, .dg-level, .arena-act, .chat-player, .nav-toggle, .map-spell-btn { touch-action: manipulation; }
	.site-nav a { min-height: 44px; display: flex; align-items: center; }
}

/* Envuelven en varias líneas: NUNCA scroll horizontal (con la barra oculta el usuario
 * no ve que hay más categorías a la derecha y se pierde información). */
.shop-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 4px; margin-bottom: 8px; }
.shop-tab {
	flex: 0 0 auto; font-family: var(--font-display); font-weight: 800; font-size: .85rem;
	color: var(--muted); background: var(--panel); border: 1px solid var(--panel-2);
	border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: all .16s;
}
.shop-tab:hover { color: var(--hueso); }
.shop-tab.is-on { color: var(--tinta); background: var(--marquesina); border-color: var(--marquesina); }
/* el texto descriptivo respira antes de la rejilla de productos */
.shop-cat-note { margin: 0 0 24px; font-size: .9rem; }

.shop-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.shop-card {
	position: relative; overflow: hidden;
	background: linear-gradient(165deg, var(--panel), var(--tinta-2));
	border: 1px solid var(--panel-2); border-radius: 18px; padding: 18px 16px;
	display: flex; flex-direction: column; gap: 8px; text-align: center;
	transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s, border-color .18s;
}
.shop-card::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
	background: var(--accent, var(--marquesina)); opacity: .8;
}
.shop-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .7); border-color: color-mix(in srgb, var(--accent) 60%, var(--panel-2)); }
.shop-card.is-equipped { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 14px 30px -18px var(--accent); }
.shop-card.is-owned:not(.is-equipped) { opacity: .96; }
.shop-emoji {
	font-size: 2.6rem; line-height: 1; margin: 4px 0 2px;
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45));
}
.shop-card:hover .shop-emoji { animation: emoji-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
.shop-card h3 { margin: 0; font-family: var(--font-display); font-size: .98rem; }
.shop-desc { margin: 0; font-size: .78rem; min-height: 2.4em; }
.shop-stats { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 6px; }
/* el botón se pega ABAJO: con tarjetas de igual alto por fila, los botones quedan alineados
 * aunque el texto descriptivo tenga distinta longitud */
.shop-card .btn { width: 100%; margin-top: auto; }
.btn-equipped { background: var(--panel-2); color: var(--hueso); cursor: default; box-shadow: none; }
.btn-equip { background: var(--crt); }
.shop-badge {
	position: absolute; top: 10px; right: 10px; z-index: 2;
	font-family: var(--font-score); font-size: .58rem; font-weight: 700; letter-spacing: .08em;
	background: var(--marquesina); color: var(--tinta); border-radius: 5px; padding: 2px 7px;
}
.shop-badge.owned { background: var(--panel-2); color: var(--hueso); }
.shop-earn { text-align: center; }
.shop-earn .hero-cta { margin-top: 16px; }

/* =====================================================================
   LA MAZMORRA
   ===================================================================== */
.dungeon-body { background-color: #0c0f26; }
.dg-head { position: relative; padding-top: 24px; }
.dg-intro { max-width: 60ch; }
.dg-loadout {
	display: grid; gap: 16px; margin: 20px 0 40px;
	background: linear-gradient(160deg, var(--panel), var(--tinta-2));
	border: 1px solid var(--panel-2); border-radius: var(--radius); padding: 18px 20px;
	grid-template-columns: 1fr;
}
@media (min-width: 720px) { .dg-loadout { grid-template-columns: 1fr auto; align-items: center; } }
.dg-lo-gear { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dg-lo-slot { display: flex; align-items: center; gap: 10px; }
.dg-lo-icon { font-size: 1.5rem; width: 36px; text-align: center; }
.dg-lo-slot small { display: block; color: var(--muted); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.dg-lo-slot b { display: block; font-size: .92rem; }
.dg-lo-slot i { font-family: var(--font-score); font-size: .72rem; color: var(--marquesina); font-style: normal; }
.dg-lo-side { display: grid; gap: 10px; justify-items: start; }
.dg-potions { font-family: var(--font-score); font-size: .82rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dg-potions b { color: var(--crt); }

.dg-levels { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: 40px; }
.dg-level {
	position: relative; display: grid; gap: 4px; justify-items: center; text-align: center;
	background: linear-gradient(165deg, var(--panel), var(--tinta-2));
	border: 1px solid var(--panel-2); border-radius: 16px; padding: 20px 14px 18px;
	cursor: pointer; color: var(--hueso); font-family: var(--font-body);
	transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), box-shadow .16s, border-color .16s;
}
.dg-level:hover:not(:disabled) { transform: translateY(-4px); border-color: var(--chicle); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .7); }
.dg-level.is-locked { opacity: .5; cursor: not-allowed; filter: grayscale(.6); }
.dg-level.is-done { border-color: color-mix(in srgb, var(--crt) 45%, var(--panel-2)); }
.dg-level.is-final { background: linear-gradient(165deg, #3a2358, var(--tinta-2)); border-color: #6a4bb0; }
.dg-level-n {
	font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
	width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
	background: var(--tinta-2); color: var(--marquesina);
}
.dg-level.is-done .dg-level-n { background: var(--crt); color: var(--tinta); }
.dg-level-boss { font-size: 1.9rem; line-height: 1; margin: 2px 0; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.dg-level-name { font-family: var(--font-display); font-weight: 800; font-size: .82rem; }
.dg-level-req { font-family: var(--font-score); font-size: .66rem; color: var(--muted); }
.dg-level-req.short { color: #FF9DB8; }
.dg-level-reward { font-family: var(--font-score); font-size: .68rem; color: var(--marquesina); font-weight: 700; }

/* Compañero de gremio (co-op) */
.dg-coop {
	display: flex; align-items: center; gap: 14px; margin: 0 0 30px;
	background: linear-gradient(160deg, #1c3a44, var(--tinta-2));
	border: 1px solid #2e6b78; border-radius: var(--radius); padding: 14px 18px;
}
.dg-coop-emoji { font-size: 2rem; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); animation: raid-bob 3.2s ease-in-out infinite; }
.dg-coop-txt { flex: 1; min-width: 0; }
.dg-coop-txt b { display: block; font-size: .95rem; }
.dg-coop-txt small { color: var(--muted); font-size: .8rem; }

/* Incursión del gremio */
.dg-raid {
	background:
		radial-gradient(500px 200px at 100% 0%, rgba(180, 140, 255, .18), transparent 60%),
		linear-gradient(160deg, var(--panel), var(--tinta-2));
	border: 1px solid #5a4b9f; border-radius: var(--radius); padding: 20px 22px; display: grid; gap: 14px;
}
.dg-raid-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dg-raid-online {
	font-family: var(--font-score); font-size: .74rem; color: #9CFF8F;
	background: rgba(124, 255, 107, .12); border: 1px solid rgba(124, 255, 107, .3);
	border-radius: 999px; padding: 4px 10px;
}
.dg-raid-online b { color: #B6FFB0; }
.dg-raid-feed {
	margin: 8px 0 0; font-family: var(--font-score); font-size: .8rem; color: var(--marquesina);
	min-height: 1.2em;
}
.dg-raid-feed.pulse { animation: feed-pulse .5s ease; }
@keyframes feed-pulse { 0% { opacity: .3; transform: translateX(-6px); } 100% { opacity: 1; transform: none; } }
/* el bloque del jefe va sobre un fondo más oscuro, para separarlo del resto de la tarjeta */
.dg-raid-boss { display: flex; align-items: center; gap: 14px; background: rgba(0, 0, 0, .26); border: 1px solid color-mix(in srgb, var(--panel-2) 70%, transparent); border-radius: 16px; padding: 14px 16px; }
@media (max-width: 480px) { .dg-raid-boss { flex-direction: column; text-align: center; } .dg-raid-boss .dg-raid-info { width: 100%; } }
.dg-raid-emoji { font-size: 2.8rem; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5)); animation: raid-bob 3s ease-in-out infinite; }
@keyframes raid-bob { 50% { transform: translateY(-6px) scale(1.04); } }
.dg-raid-info { flex: 1; min-width: 0; }
.dg-raid-info > b { font-family: var(--font-display); font-size: 1.05rem; }
.dg-raid-mine { margin: 6px 0 0; font-size: .82rem; }
/* ranking arriba y botón DEBAJO, ambos a todo el ancho de la tarjeta */
.dg-raid-body { display: grid; gap: 12px; }
.dg-raid-body .btn { width: 100%; }
.dg-raid-board { margin: 0; }

/* Barras de vida genéricas */
.dg-bar { position: relative; height: 16px; background: var(--tinta-2); border: 1px solid var(--panel-2); border-radius: 999px; overflow: hidden; }
.dg-bar i { display: block; height: 100%; transition: width .18s ease; }
.dg-bar b, .dg-bar small { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-score); font-size: .66rem; font-weight: 700; color: var(--hueso); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.dg-bar-hero i { background: linear-gradient(90deg, #4CAF7D, #7CFF6B); }
.dg-bar-boss i { background: linear-gradient(90deg, #8C2B44, #FF5D8F); }
.dg-bar-raid { height: 20px; }
.dg-bar-raid i { background: linear-gradient(90deg, #6a4bb0, #B48CFF); }

/* Escenario de combate */
.dg-stage { position: relative; max-width: 620px; margin: 0 auto; padding: 12px 14px 40px; }
.dg-topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dg-exit { background: none; border: 0; color: var(--muted); font-weight: 700; cursor: pointer; font-size: .9rem; }
.dg-exit:hover { color: var(--hueso); }
.dg-stage-title { flex: 1; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 1rem; }
.dg-loot-badge { font-family: var(--font-score); font-weight: 700; color: var(--marquesina); }
/* HUD de vida/maná: overlay SIEMPRE visible sobre la arena durante el combate. */
.dg-hpwrap {
	position: absolute; top: 8px; left: 8px; right: 8px; z-index: 6;
	display: grid; gap: 5px; pointer-events: none;
	padding: 7px 9px; border-radius: 12px;
	background: linear-gradient(180deg, rgba(5, 7, 26, .72), rgba(5, 7, 26, .32));
	backdrop-filter: blur(2px);
}
.dg-hp-row, .dg-boss-row { display: flex; align-items: center; gap: 8px; }
.dg-hpwrap .dg-bar { height: 17px; flex: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.dg-hero-emoji, .dg-boss-emoji { font-size: 1.15rem; width: 24px; text-align: center; flex: 0 0 auto; }
/* El texto de oleada baja para no chocar con el HUD */
.dg-wave { top: 74px; }
.dg-wave.big { top: 42%; }
.dg-arena {
	position: relative; aspect-ratio: 3 / 4; max-height: 66vh; margin: 0 auto;
	border-radius: 14px; overflow: hidden; border: 2px solid #0a0e26;
	box-shadow: inset 0 0 60px rgba(0, 0, 0, .6), 0 20px 50px -24px rgba(0, 0, 0, .9);
}
#dg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.dg-wave {
	position: absolute; top: 8px; left: 50%; translate: -50% 0; pointer-events: none;
	font-family: var(--font-score); font-size: .78rem; color: var(--hueso);
	background: rgba(5, 7, 26, .6); padding: 3px 12px; border-radius: 999px;
}
.dg-wave.big {
	top: 42%; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 6vw, 2rem);
	background: none; color: var(--marquesina); text-shadow: 0 6px 26px rgba(0, 0, 0, .9);
	animation: wave-in .4s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes wave-in { from { opacity: 0; transform: translate(-50%, 10px) scale(.8); } }
.dg-timer {
	position: absolute; top: 8px; right: 10px;
	font-family: var(--font-score); font-weight: 700; color: var(--crt);
	background: rgba(5, 7, 26, .6); padding: 3px 10px; border-radius: 999px;
}
.dg-controls { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.dg-potion { flex: 0 0 auto; }
.dg-potion[disabled] { opacity: .5; }
.dg-hint { margin: 0; font-size: .78rem; flex: 1; min-width: 160px; }

.dg-overlay {
	position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px;
	background: rgba(5, 7, 26, .82); backdrop-filter: blur(3px);
}
.dg-arena { position: relative; }
/* Overlays a nivel de PÁGINA (ficha de objeto del perfil, modales del chat,
 * resultados/equipo de la arena, aventuras, modal de mazmorra): SIEMPRE fijos
 * al viewport. Con el `absolute` de la base se centraban en el DOCUMENTO y en
 * móvil había que hacer scroll para encontrar la ventana. Doble clase = más
 * especificidad que `.dg-overlay`, gana esté donde esté en el archivo.
 * (Los overlays internos de la mazmorra —#dg-overlay, #dg-help, dentro de
 * .dg-arena— siguen siendo absolute a su contenedor, a propósito.) */
.dg-overlay.p-item-overlay, .dg-overlay.chat-overlay, .dg-overlay.chat-dm-overlay,
.dg-overlay.adv-overlay, .dg-overlay.dg-modal-overlay, #arena-result, #arena-gear {
	position: fixed; inset: 0; z-index: 250;
	overflow-y: auto; padding: 24px 16px;
	align-items: start;
}
@media (min-width: 560px) {
	.dg-overlay.p-item-overlay, .dg-overlay.chat-overlay, .dg-overlay.chat-dm-overlay,
	.dg-overlay.adv-overlay, .dg-overlay.dg-modal-overlay, #arena-result, #arena-gear { align-items: center; }
}
.dg-result {
	text-align: center; max-width: 420px; display: grid; gap: 10px; justify-items: center;
	background: linear-gradient(165deg, var(--panel), var(--tinta-2));
	border: 1px solid var(--panel-2); border-radius: var(--radius); padding: 26px 22px;
	animation: wave-in .4s cubic-bezier(.34, 1.56, .64, 1);
}
.dg-result.defeat { border-color: #8C2B44; }
.dg-result.victory { border-color: var(--marquesina); }
.dg-result-emoji { font-size: 3.4rem; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
.dg-result-body { margin: 0; color: var(--muted); font-size: .95rem; }
.dg-result-actions { display: grid; gap: 8px; width: 100%; margin-top: 6px; }
.dg-result-actions .btn { width: 100%; }
/* El overlay vive dentro de .dg-arena para tapar solo la arena */

/* =====================================================================
   HOME — sección "Juegos completos"
   ===================================================================== */
.big-games { position: relative; }
.big-games-lead { max-width: 62ch; margin: -12px 0 26px; }
.big-games-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .big-games-grid { grid-template-columns: 1fr 1fr; } }
.big-card {
	position: relative; overflow: hidden; isolation: isolate;
	display: grid; gap: 8px; align-content: start;
	border-radius: var(--radius); padding: 26px 24px 22px;
	color: var(--hueso); border: 1px solid var(--panel-2);
	transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
	min-height: 210px;
}
.big-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .8); text-decoration: none; }
.mazmorra-card {
	background:
		radial-gradient(400px 260px at 85% 10%, rgba(180, 140, 255, .3), transparent 60%),
		linear-gradient(160deg, #2c2160, var(--tinta-2));
	border-color: #5a4b9f;
}
.tienda-card {
	background:
		radial-gradient(400px 260px at 85% 10%, rgba(255, 201, 122, .28), transparent 60%),
		linear-gradient(160deg, #33305e, var(--tinta-2));
	border-color: #7a6a3f;
}
.arena-card {
	background:
		radial-gradient(400px 260px at 85% 10%, rgba(255, 93, 143, .26), transparent 60%),
		linear-gradient(160deg, #3a2036, var(--tinta-2));
	border-color: #7a3f5a;
}
.aventuras-card {
	background:
		radial-gradient(400px 260px at 85% 10%, rgba(124, 255, 107, .2), transparent 60%),
		linear-gradient(160deg, #1f3a2a, var(--tinta-2));
	border-color: #3f7a55;
}
.big-emoji {
	font-size: 3.4rem; line-height: 1;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5));
	transition: transform .3s;
}
.big-card:hover .big-emoji { transform: scale(1.12) rotate(-6deg); }
.big-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.big-badges span {
	font-family: var(--font-score); font-size: .64rem; font-weight: 700; letter-spacing: .04em;
	background: color-mix(in srgb, var(--tinta-2) 70%, transparent); border: 1px solid var(--panel-2);
	border-radius: 999px; padding: 3px 9px; color: var(--marquesina);
}
.big-card h3 { margin: 2px 0 0; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; }
.big-card p { margin: 0; color: var(--muted); max-width: 42ch; }
.big-card .game-go {
	margin-top: 6px; font-family: var(--font-display); font-weight: 800; color: var(--marquesina);
}
.big-card::after {
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
	background: radial-gradient(600px 300px at 50% 120%, rgba(255, 255, 255, .06), transparent 60%);
}
.big-card:hover::after { opacity: 1; }

/* =====================================================================
   PUNCH — animaciones y detalles de vida
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
	/* Brillo que barre las cards de juego al pasar por encima */
	.game-card::after {
		content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
		background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .16) 50%, transparent 58%);
		transform: translateX(-130%); transition: transform .6s ease;
	}
	.game-card:hover::after { transform: translateX(130%); }

	/* Los blobs del hero respiran (opacity/filter no chocan con el parallax GSAP) */
	.hero-blob { animation: blob-breathe 9s ease-in-out infinite; }
	.blob-b { animation-duration: 12s; animation-delay: -3s; }
	@keyframes blob-breathe { 50% { opacity: .72; filter: blur(88px); } }

	/* Aurora lenta de fondo en secciones clave */
	.big-games::before, .cta-final::before {
		content: ""; position: absolute; inset: -10% -20%; z-index: -1; pointer-events: none;
		background:
			radial-gradient(40% 40% at 20% 30%, rgba(180, 140, 255, .12), transparent 60%),
			radial-gradient(40% 40% at 80% 70%, rgba(255, 201, 122, .1), transparent 60%);
		animation: aurora 18s ease-in-out infinite alternate;
	}
	@keyframes aurora { to { transform: translate3d(4%, 3%, 0) scale(1.1); } }
}
.big-games, .cta-final { isolation: isolate; }
.cta-final { position: relative; overflow: hidden; }

/* "Cómo funciona": elevación y giro del icono al pasar por encima */
.how-item { transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), border-color .2s, box-shadow .2s; }
.how-item:hover { transform: translateY(-5px); border-color: var(--crt); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .7); }
.how-n { display: inline-block; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.how-item:hover .how-n { transform: scale(1.18) rotate(-8deg); }

/* Micro-brillo en el número grande del contador */
.stat-big { position: relative; }

/* =====================================================================
   v6 — TEMAS DE LA WEB (data-theme repinta toda la interfaz)
   ===================================================================== */
:root[data-theme="vaporwave"] { --tinta: #241a3a; --tinta-2: #1a1230; --panel: #33245c; --panel-2: #4a3585; --marquesina: #ff9ecb; --chicle: #7a5cff; --crt: #25d3ff; --hueso: #f3e9ff; --muted: #b3a6d8; }
:root[data-theme="vaporwave"] body { background: radial-gradient(1200px 600px at 80% -10%, rgba(122, 92, 255, .22), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(255, 158, 203, .2), transparent 60%), var(--tinta); }

:root[data-theme="matrix"] { --tinta: #061710; --tinta-2: #030d08; --panel: #0c2417; --panel-2: #15532e; --marquesina: #00ff9c; --chicle: #35d94a; --crt: #7CFF6B; --hueso: #d6ffe4; --muted: #5fa877; }
:root[data-theme="matrix"] body { background: radial-gradient(1200px 600px at 80% -10%, rgba(0, 255, 156, .12), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(53, 217, 74, .1), transparent 60%), var(--tinta); }

:root[data-theme="ocean"] { --tinta: #0a2136; --tinta-2: #071a2b; --panel: #123a52; --panel-2: #1d5578; --marquesina: #38e0d0; --chicle: #2f7bff; --crt: #7fe9ff; --hueso: #eaf6ff; --muted: #93b6cf; }
:root[data-theme="ocean"] body { background: radial-gradient(1200px 600px at 80% -10%, rgba(56, 224, 208, .16), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(47, 123, 255, .18), transparent 60%), var(--tinta); }

:root[data-theme="lava"] { --tinta: #2a0f0d; --tinta-2: #1c0908; --panel: #48211a; --panel-2: #6e2f22; --marquesina: #ff9d2f; --chicle: #ff3b3b; --crt: #ffb36a; --hueso: #ffece0; --muted: #d0a08f; }
:root[data-theme="lava"] body { background: radial-gradient(1200px 600px at 80% -10%, rgba(255, 59, 59, .18), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(255, 157, 47, .16), transparent 60%), var(--tinta); }

:root[data-theme="bubblegum"] { --tinta: #3a1030; --tinta-2: #2a0a24; --panel: #5c2350; --panel-2: #8a3577; --marquesina: #ff9ecb; --chicle: #ff5db1; --crt: #7be0ff; --hueso: #fff0fa; --muted: #e0a6cf; }
:root[data-theme="bubblegum"] body { background: radial-gradient(1200px 600px at 80% -10%, rgba(255, 93, 177, .2), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(123, 224, 255, .16), transparent 60%), var(--tinta); }

:root[data-theme="gold"] { --tinta: #16130a; --tinta-2: #0d0b05; --panel: #2a2410; --panel-2: #4a3f16; --marquesina: #ffd24a; --chicle: #f5b301; --crt: #ffe28a; --hueso: #fff8e6; --muted: #c9b98f; }
:root[data-theme="gold"] body { background: radial-gradient(1200px 600px at 80% -10%, rgba(255, 210, 74, .16), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(245, 179, 1, .12), transparent 60%), var(--tinta); }

/* Swatches del tema en la card de la Tienda */
.theme-swatch { display: flex; gap: 5px; justify-content: center; margin: 2px 0 6px; }
.theme-swatch i { width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }

/* =====================================================================
   v6 — BOOSTS (cards con estado activo)
   ===================================================================== */
.shop-card.boost .shop-emoji { animation: none; }
.boost-active {
	font-family: var(--font-score); font-size: .68rem; font-weight: 700;
	color: var(--crt); background: color-mix(in srgb, var(--crt) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--crt) 40%, transparent);
	border-radius: 6px; padding: 3px 8px; align-self: center;
}
/* Píldora de boosts activos en el header */
/* Boosts activos en el header: emoji + nº de partidas que le quedan. Late suave para
 * llamar la atención (un buff temporal debe recordarte que lo estás gastando). */
.pill-boost { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; text-decoration: none;
	background: linear-gradient(180deg, #2c4a3a, #1e3a2c); border-color: #3a6b52;
	animation: boost-pulse 2.2s ease-in-out infinite; }
.pill-boost:hover { border-color: #7CFF6B; text-decoration: none; }
@keyframes boost-pulse { 50% { box-shadow: 0 0 16px -4px rgba(124, 255, 107, .6); } }
.pill-boost .bp-item { display: inline-flex; align-items: center; gap: 2px; font-size: .95rem; line-height: 1; }
.pill-boost .bp-item b { font-family: var(--font-score); font-size: .72rem; color: #9CFF8F; }
@media (prefers-reduced-motion: reduce) { .pill-boost { animation: none; } }

/* =====================================================================
   v6 — RULETA DE LA SUERTE
   ===================================================================== */
.wheel-section { text-align: center; }
.wheel-wrap { position: relative; width: min(330px, 82vw); aspect-ratio: 1; margin: 10px auto 18px; }
.wheel-pointer {
	position: absolute; top: -6px; left: 50%; translate: -50% 0; z-index: 4;
	width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent;
	border-top: 26px solid var(--marquesina); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5));
}
.wheel {
	position: absolute; inset: 0; border-radius: 50%;
	border: 8px solid #0a0e26;
	box-shadow: 0 0 0 4px var(--panel-2), inset 0 0 40px rgba(0, 0, 0, .5), 0 20px 50px -20px rgba(0, 0, 0, .8);
	transition: transform 4.4s cubic-bezier(.12, .84, .2, 1);
}
.wheel-label {
	position: absolute; translate: -50% -50%; z-index: 2;
	display: grid; justify-items: center; gap: 1px; text-align: center;
	font-family: var(--font-display); font-weight: 800; font-size: .74rem;
	color: #0a0d24; text-shadow: 0 1px 1px rgba(255, 255, 255, .4);
	pointer-events: none; width: 60px;
}
.wheel-label span { font-size: 1.1rem; }
.wheel-hub {
	position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: 3;
	width: 22%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff6d6, var(--marquesina) 55%, #b8860b);
	border: 4px solid #0a0e26; display: grid; place-items: center; font-size: 1.4rem;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
}
.wheel-info { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.wheel-free { font-family: var(--font-score); font-size: .82rem; color: var(--crt); }
.wheel-free.spent { color: var(--muted); }

/* ---------- Feedback de la ruleta ---------- */
/* aro que pulsa mientras gira (tensión) */
.wheel-wrap.spinning::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; z-index: 0; pointer-events: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--marquesina) 50%, transparent), 0 0 30px -4px var(--marquesina);
	animation: wheel-ring 1s ease-in-out infinite; }
@keyframes wheel-ring { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--marquesina) 75%, transparent), 0 0 44px -2px var(--marquesina); } }
/* el puntero rebota al caer en un gajo */
.wheel-pointer.hit { animation: wheel-ptr .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes wheel-ptr { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(7px); } 70% { transform: translateY(-3px); } }
/* gajo ganador resaltado */
.wheel-label.win { animation: wheel-win 1.4s ease; z-index: 5; }
.wheel-label.win span { filter: drop-shadow(0 0 8px #fff); }
@keyframes wheel-win { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 30% { transform: translate(-50%, -50%) scale(1.5); } }
/* premio flotante que sale del centro al acertar */
.wheel-prize { position: absolute; top: 50%; left: 50%; z-index: 6; transform: translate(-50%, -50%); font-size: 2.4rem; pointer-events: none;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)); }
.wheel-prize.go { animation: wheel-prize .9s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes wheel-prize { 0% { transform: translate(-50%, -50%) scale(0) rotate(-40deg); opacity: 0; } 40% { transform: translate(-50%, -90%) scale(1.5) rotate(8deg); opacity: 1; } 100% { transform: translate(-50%, -160%) scale(1.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wheel-wrap.spinning::before, .wheel-pointer.hit, .wheel-label.win, .wheel-prize.go { animation: none; } }

/* =====================================================================
   v6 — CALENDARIO DE LOGIN (ciclo de 7)
   ===================================================================== */
.login-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 6px; }
@media (max-width: 560px) { .login-cal { grid-template-columns: repeat(4, 1fr); } }
.login-day {
	position: relative; display: grid; gap: 3px; justify-items: center; text-align: center;
	background: var(--panel); border: 1px solid var(--panel-2); border-radius: 14px; padding: 12px 6px;
	font-family: var(--font-score); font-size: .7rem; color: var(--muted);
}
.login-day small { font-size: .6rem; letter-spacing: .05em; }
.login-day .login-rw { font-size: 1.4rem; }
.login-day .login-amt { font-family: var(--font-display); font-weight: 800; font-size: .78rem; color: var(--hueso); }
.login-day.claimed { opacity: .55; }
.login-day.claimed::after { content: "✓"; position: absolute; top: 6px; right: 8px; color: #7CFF6B; font-weight: 800; }
.login-day.today { border-color: var(--marquesina); box-shadow: 0 0 0 1px var(--marquesina), 0 10px 24px -14px var(--marquesina); animation: today-pulse 2s ease-in-out infinite; }
@keyframes today-pulse { 50% { box-shadow: 0 0 0 2px var(--marquesina), 0 14px 30px -12px var(--marquesina); } }
.login-day.big { background: linear-gradient(160deg, #33285e, var(--tinta-2)); }
.login-day.big .login-amt { color: var(--marquesina); }
.login-claim-row { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 14px; flex-wrap: wrap; }

/* Contenedores de recompensas diarias en la home (viven dentro de .hub-grid) */
.reward-card { background: linear-gradient(160deg, var(--panel), var(--tinta-2)); border: 1px solid var(--panel-2); border-radius: var(--radius); padding: 20px 22px; }
.reward-card h3 { margin: 0 0 14px; font-family: var(--font-display); font-size: 1.05rem; }
.reward-sub { font-size: .7rem; color: var(--muted); font-family: var(--font-score); font-weight: 400; }
.wheel {
	background: conic-gradient(
		#FF5D8F 0deg 45deg, #FFD24A 45deg 90deg, #4DD8E6 90deg 135deg, #7CFF6B 135deg 180deg,
		#B48CFF 180deg 225deg, #FF8FA3 225deg 270deg, #7FD7DD 270deg 315deg, #FFC97A 315deg 360deg);
}

/* =====================================================================
   v7 — PASE DE TEMPORADA
   ===================================================================== */
.pass-hero {
	background: radial-gradient(700px 320px at 85% -20%, rgba(255, 201, 122, .18), transparent 60%),
		radial-gradient(500px 300px at 0% 120%, rgba(180, 140, 255, .16), transparent 60%);
	padding: 40px 0 14px; border-bottom: 1px solid var(--panel);
}
.pass-intro { max-width: 62ch; }
.pass-status { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 760px) { .pass-status { grid-template-columns: 1.3fr .9fr; align-items: center; } }
.pass-prog-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-family: var(--font-score); }
.pass-prog-top b { font-family: var(--font-display); font-size: 1.1rem; }
.pass-ends { margin: 8px 0 0; font-size: .8rem; font-family: var(--font-score); }
.pass-premium-cta { display: grid; gap: 6px; justify-items: start; }
.pass-premium-cta small { font-size: .75rem; }
.pass-premium-on { font-family: var(--font-display); font-weight: 800; color: var(--marquesina); font-size: 1.1rem; }
.pass-explain { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 18px; }
.pass-ex { display: grid; gap: 2px; background: color-mix(in srgb, var(--tinta-2) 60%, transparent); border: 1px solid var(--panel-2); border-radius: 14px; padding: 12px 14px; }
.pass-ex span { font-size: 1.5rem; }
.pass-ex b { font-family: var(--font-display); font-size: .92rem; }
.pass-ex small { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.pass-legend { display: flex; gap: 10px; margin-bottom: 12px; }
.pass-leg { font-family: var(--font-score); font-size: .7rem; font-weight: 700; letter-spacing: .1em; border-radius: 6px; padding: 4px 10px; }
.pass-leg.free { background: var(--panel); color: var(--muted); border: 1px solid var(--panel-2); }
.pass-leg.prem { background: color-mix(in srgb, var(--marquesina) 20%, var(--panel)); color: var(--marquesina); border: 1px solid var(--marquesina); }
.pass-track { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x proximity; }
.pass-track::-webkit-scrollbar { height: 8px; }
.pass-track::-webkit-scrollbar-thumb { background: var(--panel-2); border-radius: 4px; }
.pass-col { flex: 0 0 auto; width: 124px; display: grid; gap: 8px; scroll-snap-align: start; }
.pass-tier-n { justify-self: center; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--tinta-2); border: 1px solid var(--panel-2); font-family: var(--font-display); font-weight: 800; color: var(--muted); }
.pass-tier-n.on { background: var(--marquesina); color: var(--tinta); border-color: var(--marquesina); }
.pass-reward { position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; border-radius: 14px; padding: 14px 8px; cursor: default; border: 1px solid var(--panel-2); background: var(--panel); color: var(--hueso); font-family: var(--font-body); min-height: 98px; }
.pass-reward.prem { background: linear-gradient(160deg, color-mix(in srgb, var(--marquesina) 16%, var(--panel)), var(--tinta-2)); border-color: color-mix(in srgb, var(--marquesina) 45%, var(--panel-2)); }
.pass-reward.locked { opacity: .45; filter: grayscale(.4); }
.pass-reward.ready { cursor: pointer; border-color: var(--crt); box-shadow: 0 0 0 1px var(--crt), 0 10px 22px -14px var(--crt); animation: today-pulse 2s ease-in-out infinite; }
.pass-reward.prem.ready { border-color: var(--marquesina); box-shadow: 0 0 0 1px var(--marquesina), 0 10px 22px -14px var(--marquesina); }
.pass-reward.claimed { opacity: .6; }
.pr-emoji { font-size: 1.7rem; line-height: 1; }
.pr-label { font-family: var(--font-score); font-size: .64rem; color: var(--muted); line-height: 1.2; }
.pr-get { font-family: var(--font-display); font-weight: 800; font-size: .7rem; color: var(--crt); }
.pass-reward.prem .pr-get { color: var(--marquesina); }
.pr-check { position: absolute; top: 6px; right: 8px; color: #7CFF6B; font-weight: 800; }

/* =====================================================================
   v7 — MASCOTA VIRTUAL
   ===================================================================== */
.pet-card { display: flex; gap: 16px; align-items: center; background: linear-gradient(160deg, var(--panel), var(--tinta-2)); border: 1px solid var(--panel-2); border-radius: var(--radius); padding: 18px 20px; }
.pet-avatar { position: relative; flex: 0 0 auto; width: 78px; height: 78px; display: grid; place-items: center; border-radius: 20px; background: radial-gradient(circle at 35% 28%, var(--panel-2), var(--panel)); border: 2px solid var(--panel-2); }
.pet-emoji { font-size: 2.6rem; animation: raid-bob 3s ease-in-out infinite; }
.pet-mood { position: absolute; bottom: -6px; right: -6px; font-size: 1.1rem; background: var(--tinta-2); border-radius: 50%; padding: 2px 3px; }
.pet-body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.pet-top { display: flex; align-items: baseline; gap: 10px; }
.pet-top b { font-family: var(--font-display); font-size: 1.05rem; }
.pet-bonus { font-family: var(--font-score); font-size: .78rem; color: var(--marquesina); font-weight: 700; }
.pet-bar-row { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; font-size: .72rem; font-family: var(--font-score); color: var(--muted); }
.pet-bar { height: 9px; background: var(--tinta-2); border-radius: 999px; overflow: hidden; }
.pet-bar i { display: block; height: 100%; background: linear-gradient(90deg, #4CAF7D, #7CFF6B); transition: width .3s; }
.pet-bar.xp i { background: linear-gradient(90deg, var(--crt), var(--chicle)); }
.pet-actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.pet-note { margin: 2px 0 0; font-size: .75rem; }

/* =====================================================================
   v7 — OFERTA DIARIA (Tienda)
   ===================================================================== */
.deal-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; background: radial-gradient(400px 140px at 0% 0%, rgba(255, 157, 47, .22), transparent 60%), linear-gradient(160deg, var(--panel), var(--tinta-2)); border: 1px solid #a5632f; border-radius: 16px; padding: 14px 18px; }
.deal-banner:empty { display: none; }
.deal-flame { font-size: 1.8rem; animation: raid-bob 2.4s ease-in-out infinite; }
.deal-info { display: grid; }
.deal-info b { font-family: var(--font-display); font-size: .9rem; color: #FFB055; }
.deal-item { font-size: .92rem; }
.deal-price { margin-left: auto; font-family: var(--font-score); }
.deal-price s { color: var(--muted); font-size: .8rem; }
.deal-price b { color: var(--marquesina); font-size: 1.05rem; }
.deal-done { font-family: var(--font-score); font-size: .8rem; color: #7CFF6B; font-weight: 700; }

/* Misiones semanales (reutiliza .missions) */
.weekly-card { margin-top: 20px; }

/* =====================================================================
   v7 — MAZMORRA v2 (maná, hechizos, pociones, bestia, ayuda)
   ===================================================================== */
.dg-bar-ico { font-size: 1rem; width: 22px; text-align: center; flex: 0 0 auto; }
.dg-bar-mana i { background: linear-gradient(90deg, #2f7bff, #7be0ff); }
.dg-info { background: none; border: 0; cursor: pointer; font-size: 1.05rem; padding: 2px 6px; border-radius: 8px; vertical-align: middle; }
.dg-info:hover { background: var(--panel); }

.dg-belt { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.dg-pot { position: relative; width: 50px; height: 50px; border-radius: 12px; background: var(--panel); border: 1px solid var(--panel-2); cursor: pointer; display: grid; place-items: center; transition: transform .12s, border-color .12s; }
.dg-pot span { font-size: 1.35rem; }
.dg-pot b { position: absolute; bottom: 1px; right: 4px; font-family: var(--font-score); font-size: .68rem; font-weight: 700; color: var(--marquesina); }
.dg-pot[disabled] { opacity: .38; cursor: default; }
.dg-pot:hover:not([disabled]) { border-color: var(--crt); transform: translateY(-2px); }
.dg-spell { position: relative; overflow: hidden; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 12px; border: 0; cursor: pointer; font-family: var(--font-display); font-weight: 800; color: #0a1230; background: linear-gradient(180deg, #a8dbff, #4d9dff); box-shadow: 0 8px 20px -10px #4d9dff; }
.dg-spell .dg-spell-ic { font-size: 1.2rem; }
.dg-spell.no-mana { filter: grayscale(.55); opacity: .7; cursor: not-allowed; }
.dg-spell-cd { position: absolute; inset: 0; background: rgba(10, 14, 38, .6); transform-origin: bottom; transform: scaleY(0); pointer-events: none; }

.dg-help-overlay { z-index: 11; }
.dg-help-card { text-align: left; max-width: 460px; }
.dg-help-list { list-style: none; margin: 6px 0 14px; padding: 0; display: grid; gap: 9px; font-size: .92rem; color: var(--muted); }
.dg-help-list b { color: var(--hueso); }

/* Tarjeta de la Bestia (tamagotchi de combate) */
.dg-beast-card { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 30px; background: linear-gradient(160deg, #2a1c3e, var(--tinta-2)); border: 1px solid #5a3f7a; border-radius: var(--radius); padding: 16px 18px; }
.beast-avatar { position: relative; flex: 0 0 auto; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 18px; background: radial-gradient(circle at 35% 28%, #3a2a52, #241634); border: 2px solid #5a3f7a; }
.beast-emoji { font-size: 2.6rem; animation: raid-bob 3s ease-in-out infinite; }
.beast-mood { position: absolute; bottom: -6px; right: -6px; font-size: 1.1rem; background: var(--tinta-2); border-radius: 50%; padding: 2px 3px; }
.beast-body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.beast-top { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.beast-top b { font-family: var(--font-display); font-size: .98rem; }
.beast-atk { font-family: var(--font-score); font-size: .74rem; color: var(--marquesina); font-weight: 700; }
.beast-bar-row { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; font-size: .9rem; }
.beast-bar { height: 8px; }
.beast-bar i { background: linear-gradient(90deg, #4CAF7D, #7CFF6B); }
.beast-xp { height: 13px; margin-top: 2px; }
.beast-xp i { background: linear-gradient(90deg, var(--crt), var(--chicle)); }
.beast-xp small { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-score); font-size: .6rem; color: var(--hueso); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.beast-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.beast-note { margin: 2px 0 0; font-size: .75rem; }

/* =====================================================================
   v10 — LA BESTIA (página propia, tamagotchi 3D con gestos)
   ===================================================================== */
.beast-page { padding-block: 22px 50px; }
.beast-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.beast-title b { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.beast-title .muted { font-size: .82rem; margin-left: 8px; }
.beast-mood-badge { font-size: 2rem; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.beast-room-wrap { position: relative; max-width: 860px; margin: 0 auto; padding-inline: 12px; overflow: visible; }
/* La bestia vive SOBRE la página: canvas transparente sin marco, deambula por la web.
 * BLEED: el canvas es MÁS ANCHO que su contenedor (márgenes negativos) para que la
 * bestia pueda asomarse fuera del área visible sin que el borde del canvas la corte;
 * en pantallas estrechas llega literalmente al borde físico de la pantalla. */
#beast-canvas {
	display: block; width: calc(100% + 140px); margin-inline: -70px; margin-bottom: -22px;
	height: min(62dvh, 560px);
	position: relative; z-index: 5;
	background: transparent; border: 0;
	touch-action: none; user-select: none; -webkit-user-select: none;
	cursor: grab;
}
#beast-canvas:active { cursor: grabbing; }
.beast-tips {
	text-align: center; font-size: .8rem; color: var(--muted);
	margin-top: 10px; padding: 8px 14px; background: var(--panel); border: 1px solid var(--panel-2); border-radius: 999px;
	transition: background .2s, color .2s;
}
.beast-tips.flash { background: color-mix(in srgb, var(--crt) 22%, var(--panel)); color: var(--hueso); }
.beast-needs { max-width: 720px; margin: 18px auto 0; padding-inline: 12px; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .beast-needs { grid-template-columns: repeat(4, 1fr); } }
.need { display: grid; gap: 5px; font-size: .78rem; color: var(--muted); }
.beast-need-bar, .beast-xp-bar { height: 10px; position: relative; }
.beast-need-bar i { background: linear-gradient(90deg, #4CAF7D, #7CFF6B); }
.beast-xp-bar { height: 14px; }
.beast-xp-bar i { background: linear-gradient(90deg, var(--crt), var(--chicle)); }
.beast-xp-bar small { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-score); font-size: .6rem; color: var(--hueso); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.beast-actions { max-width: 720px; margin: 16px auto 0; padding-inline: 12px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.beast-act { display: inline-flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--panel-2); border-radius: 14px; padding: 10px 14px; font-weight: 700; font-size: .9rem; color: var(--hueso); cursor: pointer; transition: transform .12s, border-color .12s, background .12s; }
.beast-act span { font-size: 1.2rem; }
.beast-act small { color: var(--muted); font-weight: 600; font-size: .72rem; }
.beast-act:hover { transform: translateY(-2px); border-color: var(--crt); text-decoration: none; }
.beast-act.cta { background: linear-gradient(120deg, var(--marquesina), var(--chicle)); color: #1a1030; border: none; }
.beast-act.cta small, .beast-act.cta { color: #1a1030; }
.beast-act.ghost { background: transparent; }

.beast-info { max-width: 720px; margin: 26px auto 0; padding-inline: 12px; }
.beast-info p { max-width: 62ch; }

/* =====================================================================
   v8 — ARENA DE BESTIAS (PvP por turnos)
   ===================================================================== */
.arena-hub { padding: 34px 0; }
.arena-hub > .wrap > .h-display { margin-bottom: 10px; }
.arena-intro { max-width: 62ch; }
.arena-status { display: grid; gap: 14px; margin: 18px 0; grid-template-columns: 1fr; }
@media (min-width: 720px) { .arena-status { grid-template-columns: 1fr 1.3fr; align-items: stretch; } }
.arena-league-card, .arena-me { background: linear-gradient(160deg, var(--panel), var(--tinta-2)); border: 1px solid var(--panel-2); border-radius: var(--radius); padding: 18px 20px; }
.arena-league-card { display: flex; align-items: center; gap: 16px; }
.arena-league-icon { font-size: 3rem; line-height: 1; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5)); }
.arena-league-card small { color: var(--muted); font-family: var(--font-score); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; display: block; }
.arena-league-card b { font-family: var(--font-display); font-size: 1.5rem; display: block; }
.arena-rating { font-family: var(--font-score); font-size: .82rem; display: block; }
.arena-next { display: block; font-size: .74rem; margin-top: 2px; }
.arena-me { display: flex; gap: 16px; align-items: center; }
.arena-me-avatar { position: relative; flex: 0 0 auto; width: 72px; height: 72px; display: grid; place-items: center; font-size: 2.6rem; border-radius: 18px; background: radial-gradient(circle at 35% 28%, var(--panel-2), var(--panel)); border: 2px solid var(--panel-2); }
.arena-me-beast { position: absolute; bottom: -6px; right: -6px; font-size: 1.3rem; background: var(--tinta-2); border-radius: 50%; padding: 2px; }
.arena-me-stats { flex: 1; display: grid; gap: 8px; }
.arena-me-stats > b { font-family: var(--font-display); font-size: .98rem; }
.arena-chips { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--font-score); font-size: .74rem; }
.arena-chips span { background: var(--tinta-2); border: 1px solid var(--panel-2); border-radius: 8px; padding: 3px 8px; }
.arena-chips .pw { color: var(--marquesina); border-color: color-mix(in srgb, var(--marquesina) 40%, var(--panel-2)); }
.arena-cta { text-align: center; margin: 10px 0 34px; }
.arena-board { max-width: 520px; }

.arena-battle { min-height: 70vh; position: relative; padding: 10px 0 40px; }
.battle-field { display: flex; align-items: stretch; gap: 8px; margin: 10px 0; }
.fighter { flex: 1; min-width: 0; text-align: center; background: linear-gradient(160deg, var(--panel), var(--tinta-2)); border: 1px solid var(--panel-2); border-radius: 18px; padding: 16px 12px; display: grid; gap: 6px; justify-items: center; }
.fighter-foe { border-color: #8C2B44; }
.fighter-you { border-color: color-mix(in srgb, var(--crt) 45%, var(--panel-2)); }
.fighter-avatar { position: relative; width: 66px; height: 66px; display: grid; place-items: center; border-radius: 16px; background: radial-gradient(circle at 35% 28%, var(--panel-2), var(--panel)); }
.f-emoji { font-size: 2.4rem; }
.f-beast { position: absolute; bottom: -6px; right: -6px; font-size: 1.2rem; background: var(--tinta-2); border-radius: 50%; padding: 1px 2px; }
.f-float { position: absolute; top: -8px; left: 50%; translate: -50% 0; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; opacity: 0; pointer-events: none; }
.f-float.go { animation: f-float .7s ease forwards; }
@keyframes f-float { 0% { opacity: 1; transform: translate(-50%, 0) scale(.7); } 30% { transform: translate(-50%, -10px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -34px); } }
.fighter.hit .fighter-avatar { animation: f-hit .3s; }
@keyframes f-hit { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); filter: brightness(1.7); } 75% { transform: translateX(5px); } }
.f-name { font-family: var(--font-display); font-size: 1rem; }
.f-rating { color: var(--muted); font-family: var(--font-score); font-size: .72rem; }
.f-hp { width: 100%; height: 15px; }
.fighter-you .f-hp i { background: linear-gradient(90deg, #4CAF7D, #7CFF6B); }
.fighter-foe .f-hp i { background: linear-gradient(90deg, #8C2B44, #FF5D8F); }
.f-mana { width: 100%; height: 8px; }
.f-mana i { background: linear-gradient(90deg, #2f7bff, #7be0ff); }
.battle-vs { align-self: center; font-family: var(--font-display); font-weight: 800; color: var(--marquesina); font-size: 1rem; flex: 0 0 auto; }
.battle-turn { text-align: center; font-family: var(--font-score); font-size: .8rem; color: var(--crt); margin: 4px 0; letter-spacing: .1em; }
.battle-log { background: rgba(5, 7, 26, .5); border: 1px solid var(--panel-2); border-radius: 12px; padding: 10px 14px; min-height: 84px; max-height: 108px; overflow-y: auto; font-size: .85rem; margin: 8px 0; }
.battle-log p { margin: 2px 0; }
.battle-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 8px; }
.arena-act { font-size: .88rem; padding: 12px 8px; }
.battle-legend { font-size: .74rem; color: var(--muted); margin: 8px 0 0; line-height: 1.55; }
.battle-legend b { color: var(--hueso); }
.arena-act s { font-family: var(--font-score); font-size: .7rem; text-decoration: none; opacity: .8; }
.arena-act[disabled] { opacity: .45; }

/* =====================================================================
   v8 — AVENTURAS (tablón de expediciones estilo Tanoth)
   Un color de "banda" por dificultad (--band) tiñe tarjeta, sello, barra
   de éxito y pantalla de viaje: verde=Fácil · miel=Moderada · rojo=Extrema.
   ===================================================================== */
.adv-intro { max-width: 64ch; }
.adv-power { margin: 6px 0 18px; }
.adv-hero-strip { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: linear-gradient(160deg, rgba(255, 201, 122, .06), transparent 55%), var(--panel); border: 1px solid var(--panel-2); border-radius: 16px; padding: 10px 16px; }
.adv-hero-face { font-size: 1.9rem; width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; background: var(--tinta-2); border: 2px solid color-mix(in srgb, var(--marquesina) 55%, var(--panel-2)); border-radius: 14px; box-shadow: 0 0 20px -8px var(--marquesina); }
.adv-hero-info small { display: block; font-family: var(--font-score); font-size: .62rem; letter-spacing: .1em; color: var(--muted); }
.adv-hero-info b { font-family: var(--font-display); font-size: 1.25rem; color: var(--marquesina); line-height: 1.1; }
.adv-power-note { flex: 1; min-width: 200px; font-size: .8rem; margin: 0; }
.adv-grid { display: block; }
.adv-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
/* Banner de estado: pips de expediciones gratis + coste de la extra */
.adv-status { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; background: linear-gradient(160deg, rgba(255, 201, 122, .07), transparent 60%), var(--panel); border: 1px solid color-mix(in srgb, var(--marquesina) 26%, var(--panel-2)); border-radius: 14px; padding: 10px 16px; margin-bottom: 16px; font-size: .88rem; }
.adv-status-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.adv-pips { display: inline-flex; gap: 5px; }
.adv-pip { display: grid; place-items: center; width: 30px; height: 30px; font-size: .82rem; font-style: normal; border-radius: 9px; background: var(--tinta-2); border: 1px solid color-mix(in srgb, var(--marquesina) 45%, var(--panel-2)); box-shadow: inset 0 0 10px rgba(255, 201, 122, .12); }
.adv-pip.used { opacity: .4; filter: grayscale(.5); border-color: var(--panel-2); box-shadow: none; }
.adv-status-cost { color: var(--marquesina); }
/* Tarjeta-cartel de expedición (esquinas ornamentales doradas) */
.adv-card { --band: #7FD7DD; position: relative; overflow: hidden; background: linear-gradient(180deg, var(--panel), var(--tinta-2) 72%); border: 1px solid color-mix(in srgb, var(--band) 30%, var(--panel-2)); border-radius: 18px; padding: 0 16px 16px; display: grid; gap: 8px; align-content: start; transition: transform .18s, box-shadow .18s, border-color .18s; }
.adv-card.band-easy, .adv-result-card.band-easy { --band: #7CFF6B; }
.adv-card.band-mod, .adv-result-card.band-mod { --band: #FFC97A; }
.adv-card.band-hard, .adv-result-card.band-hard { --band: #FF5D7A; }
.adv-card::before, .adv-card::after { content: ''; position: absolute; z-index: 2; width: 13px; height: 13px; border: 2px solid color-mix(in srgb, var(--marquesina) 60%, transparent); pointer-events: none; }
.adv-card::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; border-top-left-radius: 7px; }
.adv-card::after { top: 7px; right: 7px; border-left: 0; border-bottom: 0; border-top-right-radius: 7px; }
.adv-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--band) 60%, var(--panel-2)); box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--band) 35%, rgba(0, 0, 0, .85)); }
.adv-card.done { opacity: .55; filter: saturate(.55); }
/* Escena ilustrada: cielo teñido por la banda, el jefe acecha en la sombra */
.adv-scenebox { position: relative; height: 104px; margin: 0 -16px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(95% 140% at 50% 120%, color-mix(in srgb, var(--band) 24%, transparent), transparent 64%), linear-gradient(180deg, #12163a, #262b5c 82%); border-bottom: 1px solid color-mix(in srgb, var(--band) 28%, var(--panel-2)); }
.adv-scene-ground { position: absolute; left: 12%; right: 12%; bottom: 7px; height: 14px; border-radius: 50%; background: rgba(0, 0, 0, .42); filter: blur(4px); }
.adv-scene { position: relative; font-size: 3rem; line-height: 1; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); transition: transform .25s; }
.adv-card:hover .adv-scene { transform: scale(1.1) rotate(-3deg); }
.adv-foe-peek { position: absolute; right: 13px; bottom: 7px; font-size: 1.5rem; line-height: 1; transform: rotate(7deg); filter: brightness(.35) drop-shadow(0 0 9px color-mix(in srgb, var(--band) 65%, transparent)); transition: filter .25s, transform .25s; }
.adv-card:hover .adv-foe-peek { filter: brightness(.9) drop-shadow(0 0 9px color-mix(in srgb, var(--band) 80%, transparent)); transform: rotate(0deg) scale(1.18); }
/* Sello de lacre de dificultad + aviso de jefe (solapan la escena) */
.adv-seal { position: absolute; top: 88px; left: 14px; z-index: 2; font-family: var(--font-score); font-size: .6rem; font-weight: 800; letter-spacing: .05em; padding: 4px 11px; border-radius: 999px; transform: rotate(-4deg); border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 4px 10px rgba(0, 0, 0, .45); }
.adv-seal.easy { background: linear-gradient(180deg, #9dff8d, #4caf5d); color: #0a2a12; }
.adv-seal.mod { background: linear-gradient(180deg, #ffd98a, #dd9a37); color: #2a1c04; }
.adv-seal.hard { background: linear-gradient(180deg, #ff7a94, #c22743); color: #fff; }
.adv-seal.inline { position: static; display: inline-block; transform: rotate(-3deg); flex: 0 0 auto; }
.adv-boss-badge { position: absolute; top: 88px; right: 14px; z-index: 2; font-family: var(--font-score); font-size: .58rem; font-weight: 700; background: rgba(10, 13, 36, .82); color: #ffb0c0; border: 1px solid #a5322f; border-radius: 999px; padding: 3px 9px; }
.adv-card h3 { margin: 8px 0 0; font-family: var(--font-display); font-size: .98rem; line-height: 1.3; }
.adv-desc { margin: 0; font-size: .8rem; min-height: 2.4em; }
/* La decisión de un vistazo: barra de éxito grande + chips de recompensa */
.adv-chance-row { display: flex; align-items: center; gap: 10px; }
.adv-cbar { flex: 1; height: 10px; border-radius: 999px; background: var(--tinta-2); border: 1px solid var(--panel-2); overflow: hidden; }
.adv-cbar i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .4s ease; background: #FF9DB8; }
.adv-cbar i.hi { background: linear-gradient(90deg, #4caf7d, #7CFF6B); }
.adv-cbar i.mid { background: linear-gradient(90deg, #dd9a37, #FFD24A); }
.adv-cbar i.lo { background: linear-gradient(90deg, #b0324a, #FF9DB8); }
.adv-chance { font-family: var(--font-display); font-weight: 800; font-size: 1rem; min-width: 52px; text-align: right; }
.adv-chance.hi { color: #9CFF8F; }
.adv-chance.mid { color: #FFD24A; }
.adv-chance.lo { color: #FF9DB8; }
.adv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adv-chip { font-family: var(--font-score); font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--tinta-2); border: 1px solid var(--panel-2); color: var(--hueso); }
.adv-chip.coin { color: var(--marquesina); border-color: color-mix(in srgb, var(--marquesina) 45%, var(--panel-2)); background: rgba(255, 201, 122, .08); }
.adv-chip.xp { color: #9CFF8F; border-color: color-mix(in srgb, #7CFF6B 38%, var(--panel-2)); background: rgba(124, 255, 107, .07); }
.adv-chip.stages { color: var(--muted); font-weight: 600; }
.adv-chip.loot { background: rgba(255, 201, 122, .06); }
.adv-drop { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.adv-drop-pct { font-family: var(--font-score); font-size: .7rem; font-weight: 800; color: var(--marquesina); background: rgba(255, 201, 122, .12); border: 1px dashed color-mix(in srgb, var(--marquesina) 50%, transparent); border-radius: 8px; padding: 3px 8px; }
.adv-card .btn { width: 100%; margin-top: 2px; }
/* Overlay del viaje/combate/resultado — hereda la banda de la aventura */
.adv-result-card { --band: #7FD7DD; max-width: 400px; border: 1px solid color-mix(in srgb, var(--band) 38%, var(--panel-2)); }
/* (posicionamiento de .adv-overlay: ver la regla consolidada de overlays de página junto a .dg-overlay) */
.adv-ov-head { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.adv-ov-head h2 { margin: 0; }
.adv-result-card.exploring { max-width: min(600px, 94vw); width: 100%; box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--band) 30%, rgba(0, 0, 0, .9)); }
.adv-result-card.exploring .adv-scene-anim { height: clamp(150px, 34vh, 260px); }
.adv-result-card.exploring .adv-hero-walk, .adv-result-card.exploring .adv-foe-wait { font-size: clamp(2.4rem, 9vw, 3.6rem); }
.adv-result-card.fighting { max-width: min(520px, 94vw); width: 100%; }
.adv-result-card.victory { border-color: color-mix(in srgb, var(--marquesina) 65%, var(--panel-2)); box-shadow: 0 0 70px -22px var(--marquesina), 0 30px 80px -30px rgba(0, 0, 0, .9); }
.adv-result-card.defeat { border-color: #8C2B44; filter: saturate(.85); }
/* Barra de probabilidad EN VIVO durante el viaje */
.adv-chance-live { display: flex; align-items: center; gap: 8px; font-size: .8rem; margin: 6px 0 2px; }
.adv-chance-live .adv-cbar { height: 12px; }
.adv-chance-live b { font-family: var(--font-display); min-width: 46px; text-align: right; font-size: 1.05rem; }
.adv-jlog li.narr { color: var(--muted); font-style: italic; }
.adv-jlog li.boss { color: #ffb0c0; font-weight: 700; text-shadow: 0 0 14px rgba(255, 93, 122, .4); }
/* Combate de aventura: emoji + barra + placa de nombre */
.adv-combat { display: flex; align-items: flex-start; justify-content: center; gap: 10px; margin: 12px 0 6px; }
.ac-side { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.ac-hp { width: 100%; height: 14px; }
.ac-hp i { background: linear-gradient(90deg, #4CAF7D, #7CFF6B); }
.ac-hp.foe i { background: linear-gradient(90deg, #8C2B44, #FF5D8F); }
.ac-emoji { font-size: clamp(2.6rem, 12vw, 4rem); line-height: 1; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5)); }
.ac-name { font-family: var(--font-score); font-size: .68rem; color: var(--hueso); background: rgba(10, 13, 36, .6); border: 1px solid var(--panel-2); border-radius: 999px; padding: 2px 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-vs { font-size: 1.6rem; flex: 0 0 auto; margin-top: 26px; animation: raid-bob 1.1s ease-in-out infinite; }
.ac-hit { animation: ac-hit .28s ease; }
@keyframes ac-hit { 0% { transform: none; filter: brightness(2.2); } 40% { transform: translateX(6px) scale(1.12); } 100% { transform: none; } }
.ac-log { min-height: 1.2em; margin: 4px 0 0; font-size: .86rem; }
/* Escena de exploración: el avatar camina hacia el enemigo */
.adv-scene-anim { position: relative; width: 100%; height: 92px; margin: 8px 0; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 150% at 50% 130%, color-mix(in srgb, var(--band) 16%, transparent), transparent 60%), linear-gradient(180deg, #12173a, #0e1428); border: 1px solid color-mix(in srgb, var(--band) 24%, var(--panel-2)); box-shadow: inset 0 -18px 30px -18px rgba(0, 0, 0, .8); }
.adv-bg { position: absolute; inset: 0; display: flex; align-items: center; font-size: 2.6rem; opacity: .15; white-space: nowrap; letter-spacing: 6px; animation: adv-scroll 3.6s linear; }
@keyframes adv-scroll { to { transform: translateX(-42%); } }
.adv-foe-wait { position: absolute; right: 16px; top: 50%; font-size: 2.1rem; transform: translateY(-50%); animation: adv-foe 3.6s ease; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--band) 55%, transparent)); }
@keyframes adv-foe { 0%, 68% { transform: translateY(-50%) scale(1); } 78% { transform: translateY(-50%) scale(1.3) rotate(-10deg); } 100% { transform: translateY(-50%) scale(1); } }
.adv-hero-walk { position: absolute; left: 12px; top: 50%; font-size: 2.1rem; transform: translateY(-50%); animation: adv-walk 3.6s cubic-bezier(.42, 0, .55, 1) forwards, adv-bob .32s ease-in-out infinite; }
@keyframes adv-walk { 0% { left: 12px; } 72%, 100% { left: calc(100% - 96px); } }
@keyframes adv-bob { 50% { margin-top: -4px; } }

/* =====================================================================
   v8 — Mazmorra: miniaturas de jefe, drops, energía de incursión, modal
   ===================================================================== */
.dg-level-thumb { width: 64px; height: 64px; margin: 4px auto; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.dg-level-name { font-size: .84rem !important; line-height: 1.15; }
.dg-drop {
	position: absolute; top: 68px; left: 50%; transform: translateX(-50%); z-index: 12;
	background: linear-gradient(180deg, #ffe9a6, #ffc94a); color: #3a2600;
	font-family: var(--font-display); font-weight: 800; font-size: .9rem;
	padding: 8px 16px; border-radius: 999px; box-shadow: 0 12px 30px -8px rgba(255, 201, 74, .7); white-space: nowrap;
	animation: drop-in .4s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes drop-in { from { opacity: 0; transform: translate(-50%, -14px) scale(.7); } }
.dg-modal-overlay { position: fixed; z-index: 250; }
.dg-raid-drops { margin-top: 12px; display: grid; gap: 8px; font-size: .82rem; }
.dg-drops-head { display: flex; align-items: center; gap: 2px; }
.dg-drop-list { display: flex; flex-wrap: wrap; gap: 8px; }
.dg-drop-chip { display: flex; align-items: center; gap: 8px; background: var(--tinta-2); border: 1px solid var(--panel-2); border-radius: 12px; padding: 7px 11px; }
.dg-drop-emoji { font-size: 1.35rem; line-height: 1; }
.dg-drop-meta { display: grid; line-height: 1.25; }
.dg-drop-cat { font-family: var(--font-score); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dg-drop-chip i { font-family: var(--font-score); font-size: .72rem; color: var(--marquesina); font-style: normal; font-weight: 700; }
.dg-raid-energy { font-family: var(--font-score); font-size: .8rem; margin-top: 8px; background: rgba(124, 255, 107, .08); border: 1px solid rgba(124, 255, 107, .22); border-radius: 10px; padding: 8px 12px; }
.dg-raid-energy b { color: var(--crt); }

/* Sección de pago en la Tienda */
.shop-tab-pay { color: #0a1230; background: linear-gradient(180deg, #a8dbff, #4d9dff); border-color: #4d9dff; }
.shop-tab-pay.is-on { color: var(--tinta); background: var(--marquesina); border-color: var(--marquesina); }
.pay-head { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 800; font-size: 1rem; margin: 10px 0 0; color: var(--hueso); }
/* encabezado de sección dentro de un grid (packs de pago…) */
.shop-group-h { margin-top: 22px; border-top: 1px solid var(--panel-2); padding-top: 14px; }
.shop-group-h:first-child { margin-top: 2px; border-top: 0; padding-top: 0; }
/* sub-pastillas de subcategoría (Armas, Cascos… · Monedas, Valor, Reliquias) */
/* Separación clara respecto a la fila de CATEGORÍAS de arriba (jerarquía visible sin divisores).
 * Este margen superior es el ÚNICO sitio donde se define el hueco categoría→subcategoría:
 * lo heredan también las subpastillas de la bestia y del ranking, para que sea idéntico. */
.shop-subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 10px; }
.shop-subtab { font-family: var(--font-score); font-size: .8rem; font-weight: 700; letter-spacing: .02em; padding: 8px 15px; border-radius: 999px; background: var(--panel); border: 1px solid var(--panel-2); color: var(--muted); cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.shop-subtab:hover { color: var(--hueso); border-color: color-mix(in srgb, var(--marquesina) 50%, var(--panel-2)); }
.shop-subtab.is-on { background: var(--marquesina); color: var(--tinta); border-color: var(--marquesina); }
/* fila de pastillas PADRE (rincón de la bestia): mismo tamaño que las pestañas principales */
.shop-subtabs-lg .shop-subtab { font-family: var(--font-display); font-weight: 800; font-size: .85rem; padding: 9px 16px; }
/* 2º nivel (dentro de "Comprar" de la bestia): sin divisor vertical y con el MISMO
 * hueco que categoría→subcategoría, heredado de .shop-subtabs (no se sobrescribe). */
/* subcategoría delante del objeto en la oferta del día */
.deal-cat { display: inline-block; font-family: var(--font-score); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; margin-right: 7px; border-radius: 999px; background: color-mix(in srgb, var(--marquesina) 22%, transparent); color: var(--marquesina); border: 1px solid color-mix(in srgb, var(--marquesina) 45%, transparent); vertical-align: middle; }
.pay-card .btn-pay { width: 100%; background: linear-gradient(180deg, #a8dbff, #4d9dff); color: #0a1230; }
.pay-card.exclusive .btn-pay { background: linear-gradient(180deg, #d7b8ff, #a06bff); color: #180a30; }
.pay-card.best { box-shadow: 0 0 0 1px var(--marquesina), 0 14px 30px -16px var(--marquesina); }
.pay-bonus { color: #9CFF8F; }

/* =====================================================================
   v9 — MUNDO ABIERTO (mapa, encuentros, bestiario)
   ===================================================================== */
.map-page { max-width: 760px; margin: 0 auto; padding: 12px 14px 40px; }
.map-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 10px; flex-wrap: wrap; }
.map-hud { display: flex; gap: 8px; flex-wrap: wrap; }
.map-hud-item { font-family: var(--font-score); font-size: .8rem; background: var(--panel); border: 1px solid var(--panel-2); border-radius: 999px; padding: 5px 12px; }
.map-arena { position: relative; height: min(66vh, 560px); border-radius: 16px; overflow: hidden; border: 2px solid #0a0e26; box-shadow: inset 0 0 60px rgba(0, 0, 0, .5), 0 20px 50px -24px rgba(0, 0, 0, .9); }
#map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#map-canvas:active { cursor: grabbing; }
.map-hint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: .72rem; color: var(--hueso); background: rgba(5, 7, 26, .55); padding: 4px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis; }
.map-encounter { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; background: rgba(5, 7, 26, .72); backdrop-filter: blur(3px); }
.enc-card { text-align: center; max-width: 340px; background: linear-gradient(160deg, var(--panel), var(--tinta-2)); border: 1px solid var(--panel-2); border-radius: var(--radius); padding: 22px 20px; display: grid; gap: 8px; justify-items: center; animation: wave-in .35s cubic-bezier(.34, 1.56, .64, 1); }
.enc-card.victory { border-color: var(--marquesina); }
.enc-card.defeat { border-color: #8C2B44; }
.enc-beast { font-size: 3.4rem; animation: raid-bob 2.4s ease-in-out infinite; }
.enc-card h3 { margin: 0; font-family: var(--font-display); font-size: 1.2rem; }
.enc-rarity { margin: 0; font-family: var(--font-score); font-size: .78rem; color: var(--marquesina); }
.enc-info { margin: 0; font-size: .82rem; }
.enc-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.enc-actions .btn { padding: 10px 16px; }
.map-dex-panel { position: absolute; inset: 0; z-index: 11; background: rgba(5, 7, 26, .92); backdrop-filter: blur(4px); padding: 16px; overflow-y: auto; }
.dex-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dex-head h3 { margin: 0; font-family: var(--font-display); }
.dex-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.dex-cell { background: var(--tinta-2); border: 1px solid var(--panel-2); border-radius: 12px; padding: 10px 4px; text-align: center; display: grid; gap: 2px; justify-items: center; opacity: .5; }
.dex-cell.got { opacity: 1; border-color: color-mix(in srgb, var(--crt) 40%, var(--panel-2)); }
.dex-cell span { font-size: 1.7rem; }
.dex-cell small { font-size: .64rem; line-height: 1.1; color: var(--muted); }
.dex-cell.got small { color: var(--hueso); }
.dex-rar { font-style: normal; font-size: .6rem; color: var(--marquesina); }
.dex-emoji { font-size: 1.8rem; }
/* Panel de Colección: 3 bloques (bestiario / herbario / minerales) */
.dex-coll { display: block; }
.coll-block { margin-bottom: 18px; }
.coll-h { margin: 0 0 2px; font-family: var(--font-display); font-size: 1rem; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.coll-h b { color: var(--marquesina); font-family: var(--font-score); font-size: .82rem; }
.coll-done { color: #7CFF6B; font-family: var(--font-score); font-size: .68rem; }
.coll-hint { font-size: .72rem; margin: 0 0 8px; }
/* Mochila integrada en el mapa: panel pequeño flotante (el mapa sigue visible detrás,
   a diferencia del bestiario que sí ocupa toda la pantalla). */
/* Mochila del mundo: cajón lateral limpio (no una cajita apretada) */
.map-bag-panel {
	inset: 0 0 0 auto;
	width: min(360px, 90%); max-height: none;
	border-radius: 18px 0 0 18px; border: 0; border-left: 1px solid var(--panel-2);
	background: linear-gradient(180deg, color-mix(in srgb, var(--tinta-2) 96%, transparent), rgba(5, 7, 26, .96));
	box-shadow: -24px 0 60px -24px rgba(0, 0, 0, .9);
	padding: 14px; display: flex; flex-direction: column;
	animation: bag-slide .22s ease;
}
@keyframes bag-slide { from { transform: translateX(20px); opacity: 0; } }
.map-bag-panel .dex-head { margin-bottom: 10px; flex: 0 0 auto; }
.map-bag-body { display: grid; gap: 6px; overflow-y: auto; padding-right: 2px; }
.mb-top { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-score); font-size: .82rem; padding: 2px 2px 8px; border-bottom: 1px solid var(--panel-2); margin-bottom: 4px; }
.mb-top .mb-coins { color: var(--marquesina); }
.mb-head { font-family: var(--font-score); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 10px 0 2px; }
.mb-head small { text-transform: none; letter-spacing: 0; }
.mb-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--panel-2); border-radius: 12px; padding: 8px 10px; }
.mb-emoji { font-size: 1.6rem; }
.mb-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.mb-txt b { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-txt small { color: var(--muted); font-size: .68rem; }
.mb-acts { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.mb-eqp { font-family: var(--font-score); font-size: .7rem; color: var(--crt); }
.mb-row .btn { font-size: .72rem; padding: 6px 10px; }
.mb-empty { padding: 24px 14px; text-align: center; }
.loot-note { font-size: .76rem; margin: 2px 0 8px; padding: 8px 10px; border-radius: 10px; line-height: 1.35; }
.loot-note.risk { color: #FF9DB8; background: rgba(255, 93, 143, .1); border: 1px solid #8C2B44; }
.loot-note.safe { color: #9CFF8F; background: rgba(124, 255, 107, .1); border: 1px solid color-mix(in srgb, #7CFF6B 40%, var(--panel-2)); }
.dex-cell small { font-size: .6rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 72px; }
.dex-stars { font-size: .55rem; }
.map-below { padding-block: 24px; max-width: 760px; }

/* =====================================================================
   v9 — RAZAS / CLASES + afinidad de equipo
   ===================================================================== */
.dg-class-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-score); font-size: .78rem; font-weight: 700; background: color-mix(in srgb, var(--marquesina) 16%, var(--panel)); border: 1px solid color-mix(in srgb, var(--marquesina) 40%, var(--panel-2)); color: var(--marquesina); border-radius: 999px; padding: 5px 12px; text-decoration: none; }
.dg-class-chip:hover { text-decoration: none; border-color: var(--marquesina); }
.loadout-class { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .74rem; }
.affin { display: block; font-family: var(--font-score); font-size: .64rem; font-weight: 700; border-radius: 6px; padding: 3px 6px; margin-bottom: 6px; text-align: center; }
.affin.good { color: #9CFF8F; background: rgba(124, 255, 107, .12); border: 1px solid rgba(124, 255, 107, .3); }
.affin.bad { color: #FF9DB8; background: rgba(255, 93, 143, .12); border: 1px solid rgba(255, 93, 143, .3); }
.shop-card.penalized { filter: saturate(.85); }

.class-current { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(160deg, var(--panel), var(--tinta-2)); border: 1px solid var(--panel-2); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; }
.class-cur-emoji { font-size: 2.6rem; flex: 0 0 auto; }
.class-current b { font-family: var(--font-display); font-size: 1.1rem; }
.class-current p { margin: 4px 0 0; font-size: .85rem; }
.class-pref { font-size: .78rem !important; }
.class-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 10px; }
.class-card { position: relative; text-align: left; background: linear-gradient(165deg, var(--panel), var(--tinta-2)); border: 1px solid var(--panel-2); border-radius: 16px; padding: 16px 14px 46px; cursor: pointer; color: var(--hueso); font-family: var(--font-body); display: grid; gap: 4px; transition: transform .16s, border-color .16s, box-shadow .16s; }
.class-card:hover { transform: translateY(-3px); border-color: var(--marquesina); box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .7); }
.class-card.is-on { border-color: var(--crt); box-shadow: 0 0 0 1px var(--crt); }
.class-emoji { font-size: 2rem; }
.class-card b { font-family: var(--font-display); font-size: 1.05rem; }
.class-tag { color: var(--marquesina); font-family: var(--font-score); font-size: .68rem; letter-spacing: .05em; }
.class-desc { margin: 2px 0 4px; font-size: .78rem; color: var(--muted); line-height: 1.4; }
.class-mods { display: flex; flex-wrap: wrap; gap: 4px; }
.cm { font-family: var(--font-score); font-size: .64rem; font-weight: 700; border-radius: 5px; padding: 2px 6px; background: var(--tinta-2); color: var(--muted); }
.cm.up { color: #9CFF8F; background: rgba(124, 255, 107, .1); }
.cm.down { color: #FF9DB8; background: rgba(255, 93, 143, .1); }
.class-active, .class-pick { position: absolute; bottom: 12px; left: 14px; font-family: var(--font-display); font-weight: 800; font-size: .8rem; }
.class-active { color: var(--crt); }
.class-pick { color: var(--marquesina); }

/* =====================================================================
   v10 — MECÁNICAS ACTIVAS: timing, QTE, dash, expediciones interactivas
   ===================================================================== */
/* Dash de la mazmorra */
.dg-dash { background: linear-gradient(180deg, #d7b8ff, #a06bff); box-shadow: 0 8px 20px -10px #a06bff; }

/* Barra de precisión de la Arena */
.timing-wrap { margin: 10px 0; text-align: center; animation: wave-in .25s cubic-bezier(.34, 1.56, .64, 1); }
.timing-txt { margin: 0 0 8px; font-family: var(--font-score); font-size: .8rem; color: var(--crt); }
.timing-bar { position: relative; display: flex; height: 30px; border-radius: 999px; overflow: hidden; border: 2px solid var(--panel-2); cursor: pointer; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .5); }
.timing-zone { flex: 1; }
.timing-zone.weak { background: #5a2333; flex: 1.4; }
.timing-zone.good { background: #7a6a1e; flex: 1.1; }
.timing-zone.perfect { background: #1e7a4a; flex: .8; box-shadow: inset 0 0 12px rgba(124, 255, 107, .6); }
.timing-marker { position: absolute; top: -3px; bottom: -3px; width: 5px; margin-left: -2.5px; background: #fff; border-radius: 3px; box-shadow: 0 0 10px #fff, 0 0 20px #7be0ff; pointer-events: none; }
.tim-perfect { color: #9CFF8F; }
.tim-good { color: var(--marquesina); }
.tim-weak { color: #FF9DB8; }

/* QTE de bloqueo */
.qte-block {
	display: block; margin: 10px auto; padding: 14px 30px;
	font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
	color: #0a1230; background: linear-gradient(180deg, #a8dbff, #4d9dff);
	border: 0; border-radius: 999px; cursor: pointer;
	box-shadow: 0 0 0 0 rgba(77, 157, 255, .7);
	animation: qte-pulse var(--qte-ms, 600ms) linear forwards, qte-ring .5s ease-out infinite;
}
.qte-block.hit { background: linear-gradient(180deg, #b6ffb0, #4caf7d); animation: none; transform: scale(1.08); }
@keyframes qte-pulse { from { filter: brightness(1.25); } to { filter: brightness(.55); transform: scale(.94); } }
@keyframes qte-ring { from { box-shadow: 0 0 0 0 rgba(77, 157, 255, .7); } to { box-shadow: 0 0 0 16px rgba(77, 157, 255, 0); } }

/* Tarjetas de combate: embestida + flash de crítico + bestia dibujada */
.fighter.lunge-r { animation: lunge-r .4s cubic-bezier(.34, 1.56, .64, 1); }
.fighter.lunge-l { animation: lunge-l .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes lunge-r { 30% { transform: translateX(14px) scale(1.03); } }
@keyframes lunge-l { 30% { transform: translateX(-14px) scale(1.03); } }
.battle-field.crit { animation: crit-flash .35s ease; }

/* ===== Arena: pelea BRUTAL — shake, floaters, chispas, combo, K.O. ===== */
@keyframes shake-s { 25% { transform: translate(2px, -1px); } 50% { transform: translate(-2px, 1px); } 75% { transform: translate(1px, 0); } }
@keyframes shake-m { 20% { transform: translate(5px, -3px); } 40% { transform: translate(-5px, 3px); } 60% { transform: translate(4px, 2px); } 80% { transform: translate(-3px, -2px); } }
@keyframes shake-l { 15% { transform: translate(9px, -5px) rotate(.4deg); } 30% { transform: translate(-8px, 5px); } 45% { transform: translate(7px, 3px) rotate(-.4deg); } 60% { transform: translate(-6px, -4px); } 80% { transform: translate(4px, 2px); } }
.battle-field.shake-s { animation: shake-s .18s ease; }
.battle-field.shake-m { animation: shake-m .3s ease; }
.battle-field.shake-l { animation: shake-l .45s ease; }
.fighter { position: relative; }
/* daño flotante apilable (crítico = ENORME y dorado) */
.dmg-float {
	position: absolute; top: 4px; z-index: 6; pointer-events: none;
	font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
	text-shadow: 0 2px 6px rgba(0, 0, 0, .7);
	animation: dmg-float .95s cubic-bezier(.2, .7, .3, 1) forwards;
}
.dmg-float.big { font-size: 2.1rem; -webkit-text-stroke: 1px rgba(0, 0, 0, .35); }
@keyframes dmg-float { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 16% { opacity: 1; transform: translateY(-6px) scale(1.28); } 100% { opacity: 0; transform: translateY(-54px) scale(1); } }
/* chispas del impacto */
.spark { position: absolute; top: 38%; z-index: 5; font-size: 1rem; pointer-events: none; animation: spark-fly .7s ease-out forwards; }
@keyframes spark-fly { to { transform: translate(var(--dx), var(--dy)) rotate(90deg); opacity: 0; } }
/* flash rojo al encajar */
.fighter.hit::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 70, 90, .24); animation: hit-fade .32s forwards; pointer-events: none; }
@keyframes hit-fade { to { opacity: 0; } }
/* barra de vida con ESTELA fantasma (el daño reciente se ve vaciarse) */
.f-hp { position: relative; overflow: hidden; }
.f-hp-ghost { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: #ffd9a0; opacity: .8; transition: width .7s cubic-bezier(.2, .7, .3, 1) .22s; }
.f-hp i { position: relative; z-index: 1; transition: width .12s ease; }
.f-hp-txt { position: relative; z-index: 2; }
/* vida crítica: la tarjeta late; el campo se tiñe si eres TÚ el tocado */
.fighter.low { animation: low-pulse 1.1s ease-in-out infinite; }
@keyframes low-pulse { 50% { box-shadow: 0 0 0 2px rgba(255, 59, 59, .5), 0 0 22px -6px #ff3b3b; } }
.battle-field.peril::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 70px -14px rgba(255, 40, 60, .6); animation: peril-pulse 1.2s ease-in-out infinite; }
@keyframes peril-pulse { 50% { opacity: .4; } }
/* el rival "carga" su golpe (telegraph del bloqueo) */
.fighter.windup { animation: windup .72s ease; }
.fighter.windup .f-emoji { display: inline-block; animation: windup-emo .72s ease; }
@keyframes windup { 30% { transform: scale(1.05) translateY(-4px); box-shadow: 0 0 26px -6px #FFD24A; } 60% { transform: scale(1.02); } }
@keyframes windup-emo { 30% { transform: scale(1.25) rotate(-8deg); } }
/* banners centrales (turno / aviso / combo roto) */
.battle-banner {
	position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); z-index: 8;
	font-family: var(--font-display); font-weight: 800; font-size: clamp(1rem, 4.4vw, 1.45rem);
	padding: 10px 22px; border-radius: 14px; white-space: nowrap; pointer-events: none;
	background: rgba(10, 13, 36, .88); border: 1px solid var(--panel-2);
}
.battle-banner.go { animation: bn-in .8s cubic-bezier(.34, 1.56, .64, 1) forwards; }
@keyframes bn-in { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); } 22% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
.battle-banner.bn-warn { color: #FFD24A; border-color: rgba(255, 210, 74, .55); box-shadow: 0 0 34px -10px #FFD24A; }
.battle-banner.bn-turn { color: var(--crt); border-color: color-mix(in srgb, var(--crt) 45%, var(--panel-2)); }
.battle-banner.bn-bad { color: #FF5D8F; }
/* medidor de combo */
.combo-badge {
	position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 7; pointer-events: none;
	font-family: var(--font-score); font-weight: 800; font-size: .72rem; letter-spacing: .08em;
	color: #FFD24A; background: rgba(10, 13, 36, .82); border: 1px solid rgba(255, 210, 74, .55);
	border-radius: 999px; padding: 4px 12px;
}
.combo-badge.pop { animation: combo-pop .32s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes combo-pop { 40% { transform: translateX(-50%) scale(1.3); } }
/* K.O. cinematográfico */
.ko-splash {
	position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; pointer-events: none;
	font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 18vw, 5.5rem);
	color: #FFD24A; -webkit-text-stroke: 2px #7a1430; text-shadow: 0 10px 34px rgba(0, 0, 0, .75);
}
.ko-splash.go { animation: ko-in 1s cubic-bezier(.34, 1.56, .64, 1) forwards; }
@keyframes ko-in { 0% { opacity: 0; transform: scale(3) rotate(-9deg); } 26% { opacity: 1; transform: scale(1) rotate(-4deg); } 72% { opacity: 1; transform: scale(1.05) rotate(-4deg); } 100% { opacity: 0; } }
.fighter.ko { animation: ko-fall .9s ease forwards; }
@keyframes ko-fall { to { transform: rotate(6deg) translateY(16px); opacity: .45; filter: grayscale(.85); } }
/* tarjeta de resultado: delta grande + progreso de liga + racha */
.res-delta { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1; }
.res-delta.up { color: #7CFF6B; } .res-delta.down { color: #FF5D8F; }
.lg-progress { width: min(100%, 340px); display: grid; gap: 5px; }
.lg-progress .lg-bar { position: relative; height: 12px; border-radius: 999px; background: var(--tinta-2); border: 1px solid var(--panel-2); overflow: hidden; }
.lg-progress .lg-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--marquesina), #ff9d2f); transition: width .95s cubic-bezier(.2, .7, .3, 1); }
.lg-progress small { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-family: var(--font-score); font-size: .64rem; }
.res-streak { color: #FFD24A; font-family: var(--font-score); font-size: .78rem; }
.res-streak.muted { color: var(--muted); }
.league-up { margin: 0; font-family: var(--font-display); font-weight: 800; color: #FFD24A; background: rgba(255, 210, 74, .1); border: 1px dashed rgba(255, 210, 74, .6); border-radius: 12px; padding: 8px 14px; animation: combo-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
/* leyenda plegable */
details.battle-legend { margin-top: 12px; color: var(--muted); font-size: .85rem; }
details.battle-legend summary { cursor: pointer; font-family: var(--font-score); font-size: .74rem; letter-spacing: .06em; }
details.battle-legend p { margin: 8px 0 0; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
	.battle-field.shake-s, .battle-field.shake-m, .battle-field.shake-l, .fighter.windup,
	.fighter.windup .f-emoji, .combo-badge.pop, .fighter.low, .battle-field.peril::before, .league-up { animation: none; }
}
@keyframes crit-flash { 20% { filter: brightness(1.6) saturate(1.4); } }
.f-beast-canvas { position: absolute; bottom: -12px; right: -14px; width: 42px; height: 42px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }

/* =====================================================================
   v10 — MUNDO 3D POV (raycasting estilo Minecraft)
   ===================================================================== */
#map-canvas { image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; cursor: grab; }
#map-canvas:active { cursor: grabbing; }
.map-vitals { position: absolute; top: 10px; left: 10px; z-index: 5; display: grid; gap: 6px; width: min(200px, 46%); pointer-events: none; }
.map-hpbar { height: 14px; }
.map-hpbar i { background: linear-gradient(90deg, #4CAF7D, #7CFF6B); }
.map-manabar { height: 12px; }
.map-manabar i { background: linear-gradient(90deg, #2f7bff, #7be0ff); }
.map-spell-btn {
	position: absolute; right: 14px; bottom: 14px; z-index: 6;
	width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--crt);
	background: radial-gradient(circle at 40% 35%, #3a2f6e, #1a1440); color: #fff; font-size: 1.7rem;
	cursor: pointer; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .8); touch-action: manipulation;
}
.map-spell-btn:active { transform: scale(.94); }
.map-topbtns { display: flex; gap: 8px; flex-wrap: wrap; }
#map-pvp-btn.is-on { background: linear-gradient(120deg, #FF9D2F, #FF3B3B); color: #1a1030; font-weight: 800; border-color: transparent; }
.map-pocket { justify-self: start; font-family: var(--font-score); font-size: .74rem; font-weight: 700; color: var(--marquesina); background: rgba(5, 7, 26, .62); border: 1px solid var(--panel-2); border-radius: 999px; padding: 3px 10px; }
.map-pocket.rich { color: #FFD24A; border-color: #FFD24A; animation: today-pulse 2s ease-in-out infinite; }
.map-mini { position: absolute; top: 10px; right: 10px; z-index: 5; width: 110px; height: 110px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .18); opacity: .92; background: #0a0e20; pointer-events: none; }
@media (max-width: 560px) { .map-mini { width: 84px; height: 84px; } }
.map-actions { position: absolute; right: 12px; bottom: 46px; z-index: 6; display: grid; gap: 10px; }
.map-act {
	width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25);
	background: rgba(10, 14, 38, .66); color: var(--hueso); font-size: 1.5rem; cursor: pointer;
	backdrop-filter: blur(3px); touch-action: none; user-select: none; -webkit-user-select: none;
	transition: transform .1s, border-color .1s;
}
.map-act:active { transform: scale(.9); border-color: var(--crt); }
.map-act.atk { border-color: rgba(255, 93, 143, .5); }
.map-act.mine { border-color: rgba(123, 224, 255, .5); }
.map-toasts { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 7; display: grid; gap: 6px; justify-items: center; pointer-events: none; width: max-content; max-width: 92%; }
.map-toast {
	font-family: var(--font-score); font-size: .78rem; font-weight: 700; text-align: center;
	color: var(--hueso); background: rgba(5, 7, 26, .78); border: 1px solid var(--panel-2);
	border-radius: 999px; padding: 6px 14px;
	animation: map-toast-in .25s cubic-bezier(.34, 1.56, .64, 1), map-toast-out .4s ease 2.1s forwards;
}
.map-toast.good { border-color: rgba(124, 255, 107, .45); }
.map-toast.warn { border-color: rgba(255, 210, 74, .5); color: var(--marquesina); }
.map-toast.bad { border-color: #8C2B44; color: #FF9DB8; }
.map-toast.drop { border-color: var(--marquesina); color: var(--marquesina); }
.map-toast.bank { border-color: var(--crt); color: var(--crt); }
@keyframes map-toast-in { from { opacity: 0; transform: translateY(-8px) scale(.8); } }
@keyframes map-toast-out { to { opacity: 0; transform: translateY(-6px); } }
.enc-card.defeat { border-color: #8C2B44; }
/* Retratos generativos de criaturas (encuentros + bestiario) */
.enc-spr { width: 108px; height: 90px; image-rendering: pixelated; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); }
.dex-img { width: 48px; height: 42px; image-rendering: pixelated; }

/* Viaje por etapas estilo Tanoth: registro-pergamino, decisiones y botín */
.adv-skill-row { display: flex; gap: 8px; align-items: baseline; justify-content: center; font-size: .82rem; margin: 6px 0 0; flex-wrap: wrap; }
.adv-skill { font-family: var(--font-display); font-weight: 800; }
.adv-skill.up { color: #9CFF8F; }
.adv-skill.down { color: #FF9DB8; }
.adv-stage-ind { margin-left: auto; font-family: var(--font-score); font-size: .72rem; font-weight: 800; color: var(--marquesina); background: rgba(255, 201, 122, .1); border: 1px solid color-mix(in srgb, var(--marquesina) 35%, transparent); border-radius: 999px; padding: 2px 10px; }
.adv-jbar { height: 8px; border-radius: 999px; background: var(--tinta-2); border: 1px solid var(--panel-2); overflow: hidden; margin: 6px 0 4px; }
.adv-jbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--crt), var(--marquesina)); transition: width .5s ease; }
.adv-jlog { list-style: none; margin: 8px 0 0; padding: 10px 12px; max-height: 116px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; background: linear-gradient(180deg, rgba(255, 235, 200, .05), transparent 40%), rgba(5, 7, 26, .45); border: 1px solid color-mix(in srgb, var(--marquesina) 20%, var(--panel-2)); border-radius: 12px; font-size: .82rem; text-align: left; }
.adv-jlog li { color: var(--hueso); animation: ticker-in .3s ease; }
.adv-choices { display: grid; gap: 8px; margin-top: 10px; }
@media (min-width: 460px) { .adv-choices { grid-template-columns: 1fr 1fr; } }
.adv-choice { width: 100%; }
.adv-choice small { display: block; font-weight: 600; opacity: .75; font-size: .64rem; letter-spacing: .03em; }
.adv-choice.risky { background: linear-gradient(180deg, #ff9db8, #e0567e); box-shadow: 0 8px 22px -8px rgba(255, 93, 122, .5); }
.adv-choice.safe { background: linear-gradient(180deg, #a8ecdf, #7FD7DD); box-shadow: 0 8px 22px -8px rgba(127, 215, 221, .45); }
.adv-choice:disabled { opacity: .45; }
.adv-loot { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; padding: 10px 14px; background: rgba(255, 201, 122, .12); border: 1px dashed color-mix(in srgb, var(--marquesina) 55%, transparent); border-radius: 12px; font-size: .9rem; animation: wave-in .4s ease; }
.adv-loot-emoji { font-size: 1.4rem; filter: drop-shadow(0 0 10px rgba(255, 201, 122, .6)); }
.adv-loot.chest .adv-loot-emoji { font-size: 2rem; }
.adv-loot-txt { text-align: left; }
.adv-loot-txt small { display: block; }
/* Vigor del viaje */
.adv-vigor { display: flex; align-items: center; gap: 8px; font-size: .78rem; margin: 4px 0 0; }
.adv-vbar { flex: 1; height: 10px; border-radius: 999px; background: var(--tinta-2); border: 1px solid var(--panel-2); overflow: hidden; }
.adv-vbar i { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #e0567e, #FF9D4A 45%, #7CFF6B); transition: width .4s ease; }
.adv-vbar i.low { animation: vigor-blink .8s ease-in-out infinite; }
@keyframes vigor-blink { 50% { filter: brightness(1.7); } }
.adv-vigor b { font-family: var(--font-score); min-width: 34px; text-align: right; }
/* Mapa-pergamino de la expedición */
.adv-map { display: block; width: 100%; height: clamp(160px, 28vh, 230px); margin: 8px 0 2px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--band) 32%, var(--panel-2)); box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .7); }
/* Decisiones de 3 vías */
.adv-choices.tri { grid-template-columns: 1fr; }
@media (min-width: 640px) { .adv-choices.tri { grid-template-columns: 1fr 1fr 1fr; } }
.adv-choice.wit { background: linear-gradient(180deg, #d8c2ff, #B48CFF); box-shadow: 0 8px 22px -8px rgba(180, 140, 255, .5); }
/* Minijuegos del viaje: pulso / machacar / reflejo — a lo ANCHO de la ventana */
.adv-choices { width: 100%; }
.adv-timing { display: grid; gap: 10px; justify-items: center; width: 100%; grid-column: 1 / -1; }
.adv-tbar { position: relative; width: 100%; height: 24px; border-radius: 999px; background: var(--tinta-2); border: 1px solid var(--panel-2); overflow: hidden; cursor: pointer; }
.adv-tzone { position: absolute; top: 0; bottom: 0; background: linear-gradient(180deg, #ffd98a, #dd9a37); opacity: .9; box-shadow: 0 0 14px rgba(255, 210, 74, .45); }
.adv-tcur { position: absolute; top: -2px; bottom: -2px; width: 4px; background: #fff; box-shadow: 0 0 10px #fff; border-radius: 2px; }
.adv-tbtn { min-width: 150px; }
.adv-mfill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: linear-gradient(90deg, #e0567e, #FF9D4A 55%, #7CFF6B); transition: width .08s linear; }
.adv-rx { width: min(240px, 80%); padding: 22px 10px; border-radius: 18px; border: 0; cursor: pointer; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; transition: transform .1s; }
.adv-rx:active { transform: scale(.96); }
.adv-rx.wait { background: var(--tinta-2); color: var(--muted); border: 1px dashed var(--panel-2); }
.adv-rx.go { background: linear-gradient(180deg, #ffd98a, #dd9a37); color: #2a1c04; box-shadow: 0 0 30px rgba(255, 210, 74, .65); animation: rx-pop .18s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes rx-pop { from { transform: scale(.8); } }
/* Botones de vía con etiqueta corta + icono ℹ️ de detalle */
.adv-choice { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }
.adv-ch-txt { flex: 1; min-width: 0; }
.adv-info { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; font-style: normal; font-size: .78rem; border-radius: 50%; background: rgba(10, 13, 36, .28); transition: transform .12s, background .12s; }
.adv-info:hover { transform: scale(1.18); background: rgba(10, 13, 36, .45); }
.adv-infobox { margin-top: 8px; padding: 8px 12px; font-size: .8rem; text-align: left; background: rgba(5, 7, 26, .45); border: 1px solid color-mix(in srgb, var(--marquesina) 30%, var(--panel-2)); border-radius: 12px; animation: wave-in .25s ease; }
/* COMBATE FINAL: escenario protagonista (avatar vs enemigos) */
.adv-battle { position: relative; width: 100%; height: clamp(210px, 42vh, 300px); margin: 10px 0 4px; border-radius: 16px; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-around; padding: 12px 6px 26px; border: 1px solid color-mix(in srgb, var(--band) 40%, var(--panel-2)); background: radial-gradient(120% 90% at 50% 108%, color-mix(in srgb, var(--band) 26%, transparent), transparent 60%), linear-gradient(180deg, #0c1028, #1a1440 62%, #241634); box-shadow: inset 0 -26px 40px -20px rgba(0, 0, 0, .8); }
.ab-torch { position: absolute; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: #ffca6e; box-shadow: 0 0 22px 8px rgba(255, 180, 90, .35); animation: ab-flick 1.6s ease-in-out infinite; }
.ab-torch.l { left: 9%; }
.ab-torch.r { right: 9%; animation-delay: .7s; }
@keyframes ab-flick { 50% { box-shadow: 0 0 30px 12px rgba(255, 180, 90, .5); } }
.ab-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 1; min-width: 0; flex: 1; }
.ab-emoji { font-size: clamp(3rem, 15vw, 4.6rem); line-height: 1; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); }
.ab-emoji.boss { animation: ab-boss 1.2s ease-in-out infinite; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)) drop-shadow(0 0 18px rgba(255, 93, 122, .55)); }
@keyframes ab-boss { 50% { transform: scale(1.06); } }
.ab-emoji.atk-l { animation: ab-atkl .34s ease; }
.ab-emoji.atk-r { animation: ab-atkr .34s ease; }
@keyframes ab-atkl { 45% { transform: translateX(36px) rotate(8deg) scale(1.1); } }
@keyframes ab-atkr { 45% { transform: translateX(-36px) rotate(-8deg) scale(1.1); } }
.ab-emoji.enter { animation: ab-enter .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ab-enter { from { transform: translateX(60px) scale(.5); opacity: 0; } }
.ab-emoji.die { animation: ab-die .7s ease forwards; }
@keyframes ab-die { to { transform: rotate(80deg) translateY(26px); opacity: 0; filter: grayscale(1); } }
.ab-shadow { width: 62%; height: 10px; border-radius: 50%; background: rgba(0, 0, 0, .45); filter: blur(3px); margin-top: -6px; }
.ab-plate { display: flex; flex-direction: column; align-items: center; gap: 3px; width: min(150px, 92%); background: rgba(10, 13, 36, .66); border: 1px solid var(--panel-2); border-radius: 10px; padding: 4px 8px; }
.ab-plate b { font-family: var(--font-score); font-size: .62rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-plate small { font-family: var(--font-score); font-size: .58rem; color: var(--muted); }
.ab-hp { width: 100%; height: 8px; border-radius: 999px; background: rgba(0, 0, 0, .55); overflow: hidden; }
.ab-hp i { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #4CAF7D, #7CFF6B); transition: width .28s ease; }
.ab-hp.foe i { background: linear-gradient(90deg, #8C2B44, #FF5D8F); }
.ab-vs { align-self: center; font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: color-mix(in srgb, var(--band) 75%, #fff); text-shadow: 0 0 14px color-mix(in srgb, var(--band) 60%, transparent); z-index: 1; flex: 0 0 auto; }
.ab-banner { position: absolute; left: 50%; top: 13%; transform: translate(-50%, 0) scale(.6); font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 4.5vw, 1.5rem); color: var(--hueso); text-shadow: 0 3px 12px rgba(0, 0, 0, .85); opacity: 0; pointer-events: none; z-index: 3; white-space: nowrap; transition: opacity .2s, transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.ab-banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ab-banner.win { color: var(--marquesina); }
.ab-banner.boss, .ab-banner.lose { color: #FF9DB8; }
.ab-float { position: absolute; top: 36%; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; text-shadow: 0 2px 6px rgba(0, 0, 0, .85); animation: ab-float .95s ease forwards; pointer-events: none; z-index: 2; }
@keyframes ab-float { from { opacity: 0; transform: translateY(8px) scale(.7); } 25% { opacity: 1; } to { opacity: 0; transform: translateY(-36px) scale(1.15); } }
.ab-slash { position: absolute; top: 40%; width: 36px; height: 36px; pointer-events: none; z-index: 2; background: linear-gradient(135deg, transparent 42%, #fff 50%, transparent 58%); animation: ab-slashfx .3s ease forwards; }
@keyframes ab-slashfx { from { transform: rotate(-20deg) scale(.5); opacity: 1; } to { transform: rotate(25deg) scale(1.4); opacity: 0; } }
.adv-battle.shake { animation: ab-shake .3s ease; }
.adv-battle.shake-hard { animation: ab-shake .45s ease; }
@keyframes ab-shake { 20% { transform: translate(3px, -2px); } 40% { transform: translate(-3px, 2px); } 60% { transform: translate(2px, 1px); } 80% { transform: translate(-2px, -1px); } }

/* ---- BESTIA: cuartel de progresión (stats + entrenamiento) ---- */
.beast-statpanel, .beast-train { margin-top: 18px; }
.bs-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.bs-card { display: grid; justify-items: center; gap: 2px; background: linear-gradient(160deg, var(--panel), var(--tinta-2)); border: 1px solid var(--panel-2); border-radius: 14px; padding: 12px 8px; text-align: center; }
.bs-card span { font-size: 1.4rem; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.bs-card b { font-family: var(--font-display); font-size: 1.15rem; color: var(--marquesina); }
.bs-card small { color: var(--muted); font-size: .68rem; line-height: 1.3; }
.bs-card i.up { color: #9CFF8F; font-style: normal; }
.bs-freebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: .8rem; background: var(--panel); border: 1px solid var(--panel-2); border-radius: 12px; padding: 8px 12px; }
.bs-freebar .adv-vbar { flex: 1; min-width: 120px; }
.bs-freebar b { font-family: var(--font-score); }
.bs-freebar small { width: 100%; }
.bt-grid { display: grid; gap: 10px; }
.bt-card { display: flex; align-items: center; gap: 12px; background: linear-gradient(160deg, var(--panel), var(--tinta-2)); border: 1px solid color-mix(in srgb, var(--marquesina) 26%, var(--panel-2)); border-radius: 14px; padding: 10px 14px; }
/* Resultado de la sesión de entrenamiento de la bestia */
.bt-result { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 6px 0 2px; animation: modal-pop .3s cubic-bezier(.34, 1.56, .64, 1); }
.bt-verdict { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.bt-gains { display: grid; gap: 6px; width: min(100%, 380px); }
.bt-gain { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; background: var(--tinta-2); border: 1px solid var(--panel-2); border-radius: 10px; padding: 7px 12px; font-size: .88rem; }
.bt-gain b { color: var(--hueso); }
.bt-gain i { font-style: normal; font-family: var(--font-score); font-size: .68rem; color: var(--muted); }
.bt-gain i.up { color: var(--marquesina); font-weight: 700; }
.bt-xpbar { width: min(100%, 380px); }
@media (prefers-reduced-motion: reduce) { .bt-result { animation: none; } }
.bt-emoji { font-size: 1.7rem; flex: 0 0 auto; }
.bt-txt { flex: 1; min-width: 0; }
.bt-txt small { display: block; color: var(--muted); font-size: .74rem; }
.bt-note { font-size: .74rem; margin: 2px 0 0; }
.bt-game { display: grid; gap: 10px; justify-items: center; margin-top: 12px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--marquesina) 35%, var(--panel-2)); border-radius: 14px; padding: 14px; animation: wave-in .3s ease; }

/* =====================================================================
   ARENA v2 — épica y cómoda en el móvil
   ===================================================================== */
.battle-field { position: relative; gap: 10px; padding: 18px 10px 16px; border-radius: 20px; border: 1px solid var(--panel-2); overflow: hidden; background: radial-gradient(130% 100% at 50% 112%, rgba(255, 93, 143, .15), transparent 60%), radial-gradient(90% 70% at 12% 0%, rgba(127, 215, 221, .10), transparent 60%), linear-gradient(180deg, #10132e, #1c1440 70%, #241634); }
.battle-field::before { content: 'ARENA'; position: absolute; inset: auto 0 2px; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; color: rgba(255, 255, 255, .045); letter-spacing: .3em; pointer-events: none; }
.fighter { position: relative; background: rgba(10, 13, 36, .5); backdrop-filter: blur(2px); }
.f-emoji { font-size: clamp(2.6rem, 13vw, 3.6rem); }
.f-gear { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--panel-2); background: rgba(10, 13, 36, .72); cursor: pointer; font-size: .95rem; display: grid; place-items: center; transition: transform .12s, border-color .12s; }
.f-gear:hover { transform: scale(1.15); border-color: var(--marquesina); }
.f-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; font-family: var(--font-score); font-size: .64rem; }
.f-chips span { background: rgba(5, 7, 26, .55); border: 1px solid var(--panel-2); border-radius: 6px; padding: 2px 6px; }
.f-xpbar { width: 100%; max-width: 220px; height: 7px; border-radius: 999px; background: var(--tinta-2); border: 1px solid var(--panel-2); overflow: hidden; }
.f-xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--crt), #B48CFF); }
.arena-me-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.battle-turn { font-size: .86rem; padding: 4px 14px; width: max-content; margin: 8px auto; border-radius: 999px; background: rgba(127, 215, 221, .1); border: 1px solid color-mix(in srgb, var(--crt) 40%, var(--panel-2)); }
.mash-wrap { display: grid; gap: 8px; justify-items: center; margin: 8px 0; }
.mash-wrap .adv-tbar { max-width: 520px; }
@media (max-width: 640px) {
	.battle-actions { position: sticky; bottom: 8px; z-index: 30; background: color-mix(in srgb, var(--tinta-2) 90%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--panel-2); border-radius: 16px; padding: 8px; box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, .6); }
	.f-emoji { font-size: 2.5rem; }
	.f-gear { width: 36px; height: 36px; }
}
/* Diálogo de cofre abierto (perfil) + slot de cofre en la mochila */
.chest-loot { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; width: 100%; }
.chest-loot li { display: flex; gap: 10px; align-items: center; background: var(--tinta-2); border: 1px solid var(--panel-2); border-radius: 12px; padding: 8px 12px; animation: wave-in .35s ease both; }
.chest-loot li:nth-child(2) { animation-delay: .14s; }
.chest-loot li:nth-child(3) { animation-delay: .28s; }
.chest-loot li:nth-child(4) { animation-delay: .42s; }
.chest-loot li:nth-child(5) { animation-delay: .56s; }
.chest-it-emoji { font-size: 1.5rem; flex: 0 0 auto; }
.chest-loot small { display: block; font-size: .72rem; }
.bag-slot.chest { border-color: color-mix(in srgb, var(--marquesina) 55%, var(--panel-2)); box-shadow: 0 0 14px -4px var(--marquesina); }
.bag-slot .bag-open { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); font-family: var(--font-score); font-size: .52rem; font-weight: 800; color: var(--marquesina); letter-spacing: .04em; }


/* =====================================================================
   UI POLISH global — micro-interacciones premium
   Fundido de página, header de cristal, revelado al hacer scroll, brillo
   que sigue al cursor, modales con pop y pulsación táctil coherente.
   ===================================================================== */
::selection { background: color-mix(in srgb, var(--marquesina) 70%, transparent); color: var(--tinta); }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
	body { animation: page-in .5s ease both; }
}
@keyframes page-in { from { opacity: 0; } }
body.page-leave { opacity: 0; transition: opacity .14s ease; }
/* header de cristal (se densifica al hacer scroll) */
.site-head { backdrop-filter: blur(16px) saturate(1.35); transition: background .3s ease, box-shadow .3s ease; }
.site-head.scrolled { background: color-mix(in srgb, var(--tinta-2) 92%, transparent); box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .85); }
/* el menú es desplegable en todos los tamaños: los enlaces mantienen el mismo padding */
.site-nav a { transition: background .18s ease; }
.site-nav a:hover { text-decoration: none; }
/* revelado suave al hacer scroll (páginas interiores) */
.ui-reveal { opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .55s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.ui-reveal.is-in { opacity: 1; transform: none; }
/* brillo especular que sigue al cursor */
.game-card, .big-card, .adv-card, .shop-card, .stat-card, .reward-card, .bt-card, .arena-me, .arena-league-card, .daily-card, .chest-card { position: relative; }
.card-glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .10), transparent 62%); }
.game-card:hover .card-glow, .big-card:hover .card-glow, .adv-card:hover .card-glow, .shop-card:hover .card-glow, .stat-card:hover .card-glow, .reward-card:hover .card-glow, .bt-card:hover .card-glow, .arena-me:hover .card-glow, .arena-league-card:hover .card-glow, .daily-card:hover .card-glow, .chest-card:hover .card-glow { opacity: 1; }
/* modales y overlays con pop elástico */
.dg-overlay { animation: overlay-in .22s ease; }
.dg-overlay .dg-result { animation: modal-pop .34s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes overlay-in { from { opacity: 0; } }
@keyframes modal-pop { from { opacity: 0; transform: translateY(14px) scale(.94); } }
/* pulsación táctil coherente en todos los controles */
.chip, .beast-act, .arena-act, .shop-tab, .bag-slot, .chat-player, .adv-choice, .dg-level { transition: transform .12s ease, border-color .15s ease, background .15s ease; }
.chip:active, .beast-act:active, .arena-act:active, .shop-tab:active, .bag-slot:active, .chat-player:active, .adv-choice:active, .dg-level:active { transform: scale(.96); }
/* barra de desplazamiento fina y del tema */
* { scrollbar-width: thin; scrollbar-color: var(--panel-2) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--panel-2); border-radius: 999px; border: 2px solid var(--tinta); }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--panel-2) 70%, var(--crt)); }
::-webkit-scrollbar-track { background: transparent; }
/* hover con vida en tarjetas informativas (solo ratón) */
@media (pointer: fine) {
	.stat-card, .reward-card, .bt-card, .bs-card { transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease, border-color .22s ease; }
	.stat-card:hover, .reward-card:hover, .bt-card:hover, .bs-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--crt) 40%, var(--panel-2)); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .7); }
}
@media (prefers-reduced-motion: reduce) {
	.ui-reveal { opacity: 1; transform: none; transition: none; }
	.dg-overlay, .dg-overlay .dg-result { animation: none; }
	body { animation: none; }
}

/* ---- PERFIL: legible, por secciones y con navegación propia ---- */
.profile-avatar { width: 84px; height: 84px; font-size: 2.7rem; display: grid; place-items: center; background: radial-gradient(circle at 35% 28%, var(--panel-2), var(--panel)); border-radius: 22px; border: 2px solid color-mix(in srgb, var(--marquesina) 45%, var(--panel-2)); box-shadow: 0 0 24px -10px var(--marquesina); flex: 0 0 auto; }
.profile-class-chip { display: inline-block; vertical-align: middle; font-family: var(--font-score); font-size: .78rem; font-weight: 700; color: var(--crt); background: rgba(127, 215, 221, .1); border: 1px solid color-mix(in srgb, var(--crt) 40%, var(--panel-2)); border-radius: 999px; padding: 4px 12px; margin-left: 8px; }
.profile-nav { position: sticky; top: 60px; z-index: 40; display: flex; gap: 6px; overflow-x: auto; padding: 8px; margin: 14px 0 6px; background: color-mix(in srgb, var(--tinta-2) 88%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--panel-2); border-radius: 999px; scrollbar-width: none; }
.profile-nav::-webkit-scrollbar { display: none; }
.profile-nav a { flex: 0 0 auto; font-family: var(--font-score); font-size: .72rem; font-weight: 700; color: var(--hueso); background: var(--panel); border: 1px solid var(--panel-2); border-radius: 999px; padding: 6px 12px; transition: border-color .15s, background .15s, transform .12s; }
.profile-nav a:hover { text-decoration: none; border-color: var(--marquesina); background: color-mix(in srgb, var(--marquesina) 12%, var(--panel)); }
.profile-nav a:active { transform: scale(.95); }
/* separadores de sección: mismo ritmo visual en toda la página */
.profile > .h-sm { margin-top: 54px; padding-top: 26px; border-top: 1px solid var(--panel-2); }
/* las anclas no quedan tapadas por el header ni la nav pegajosa */
.profile > .h-sm, #clase { scroll-margin-top: 126px; }

/* ---- TIENDA: compra que VUELA a la mochila + Rincón de la Bestia ---- */
.fly-item { position: fixed; z-index: 400; font-size: 2rem; pointer-events: none; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6)); }
.fly-tag { position: fixed; z-index: 400; transform: translate(-50%, -120%); font-family: var(--font-score); font-size: .72rem; font-weight: 800; color: var(--marquesina); background: rgba(10, 13, 36, .85); border: 1px solid color-mix(in srgb, var(--marquesina) 45%, transparent); border-radius: 999px; padding: 4px 12px; pointer-events: none; animation: fly-tag-up 1.3s ease forwards; }
@keyframes fly-tag-up { from { opacity: 0; } 20% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -260%); } }
.bag-pop { animation: bag-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes bag-pop { 40% { transform: scale(1.22); } }
.beast-shop { border-top: 1px solid var(--panel-2); }
.beast-shop-h { font-family: var(--font-display); font-size: 1rem; margin: 26px 0 10px; }
.beast-shop-now { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: linear-gradient(160deg, rgba(197, 140, 255, .08), transparent 60%), var(--panel); border: 1px solid color-mix(in srgb, #c58cff 30%, var(--panel-2)); border-radius: 16px; padding: 10px 16px; margin-bottom: 6px; }
.bs-now-emoji { font-size: 2.2rem; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.bs-now-txt { flex: 1; min-width: 0; }
.bs-now-txt small { display: block; }

/* ---- PERFIL: muñeco con forma HUMANA + equipo de la bestia ---- */
/* Muñeco humano: columna central = cabeza→cuello→torso→piernas→pies; brazos a
 * los lados (arma/escudo alargados) y manos (guantes/brazalete) a la altura de
 * la cadera. Ancho contenido para que la silueta se lea como una persona. */
.pg-doll {
	position: relative; display: grid; gap: 8px;
	max-width: 420px; margin: 0 auto;
	grid-template-columns: 1fr 1.12fr 1fr;
	grid-template-areas:
		'.      helmet .'
		'weapon amulet shield'
		'weapon armor  shield'
		'gloves pants  bracelet'
		'.      boots  .';
}
.pg-doll .pg-slot {
	flex-direction: column; justify-content: center; text-align: center;
	gap: 3px; padding: 10px 6px; min-height: 76px;
}
.pg-doll .pg-emoji { font-size: 1.7rem; }
.pg-doll .pg-txt { align-items: center; }
.pg-doll .pg-txt small { font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; }
.pg-doll .pg-txt b {
	white-space: normal; font-size: .7rem; line-height: 1.18; max-width: 100%;
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pg-doll-shadow { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(9rem, 42vw, 15rem); opacity: .06; pointer-events: none; filter: grayscale(1); z-index: 0; }
.pg-doll .pg-slot { position: relative; z-index: 1; }
.pg-doll .pg-slot.pg-click { cursor: pointer; transition: transform .14s ease, border-color .14s ease; }
.pg-doll .pg-slot.pg-click:hover { transform: translateY(-2px); border-color: var(--marquesina); }
/* Panel de la bestia: compacto, centrado y alineado con el muñeco de arriba */
.pg-beast { max-width: 420px; margin: 12px auto 8px; padding: 12px 14px; }
.pg-beast .pg-head { margin-bottom: 8px; }
.pg-beast .pg-cls { font-size: .92rem; }
.pg-beast .pg-dmg { font-size: .64rem; padding: 3px 8px; }
.pg-grid-beast { display: grid; gap: 6px; grid-template-columns: repeat(4, 1fr); }
.pg-grid-beast .pg-slot { flex-direction: column; justify-content: center; text-align: center; gap: 2px; padding: 7px 4px; }
.pg-grid-beast .pg-emoji { font-size: 1.25rem; }
.pg-grid-beast .pg-txt { align-items: center; }
.pg-grid-beast .pg-txt small { font-size: .56rem; letter-spacing: .04em; text-transform: uppercase; }
.pg-grid-beast .pg-txt b { white-space: normal; font-size: .62rem; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pg-beast .pg-stats { margin: 10px 0 6px; justify-content: center; }
.pg-beast .pg-stats span { font-size: .66rem; padding: 3px 6px; }
.pg-beast .pg-note { font-size: .7rem; text-align: center; }
@media (max-width: 420px) { .pg-grid-beast { grid-template-columns: repeat(2, 1fr); } }
.pg-beast { margin-top: 12px; border-color: color-mix(in srgb, #c58cff 30%, var(--panel-2)); }

/* ---- MUNDO: chip de botín sin asegurar ---- */
.map-hud-item.risk, #map-pocket.risk { border-color: color-mix(in srgb, #FF5D8F 55%, var(--panel-2)); animation: vigor-blink 1s ease-in-out infinite; }
.pk-risk { color: #FF9DB8; }

/* ---- ARENA: el coliseo (gradas/albero/banderines) se retiró; el campo de duelo
 * minimalista vive en el bloque "ARENA · rediseño minimalista" del final. ---- */
.arena-board li { position: relative; }
.board-challenge { margin-left: auto; flex: 0 0 auto; }

/* =====================================================================
   RAREZA del equipo + comparativa de atributos (mochila / tienda / mapa)
   ===================================================================== */
.rar-badge { display: inline-block; font-family: var(--font-score); font-size: .58rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; line-height: 1.4; vertical-align: middle; }
/* Tienda: el tag de rareza va en su PROPIA línea, debajo del nombre */
.rar-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin: 2px 0 6px; }
/* Tag de rareza en las ranuras del muñeco "Tu equipo" (centrado arriba) */
.pg-rar {
	position: absolute; top: 3px; left: 50%; transform: translateX(-50%); z-index: 2;
	width: max-content; max-width: calc(100% - 8px);
	font-family: var(--font-score); font-size: .4rem; font-weight: 800;
	letter-spacing: .03em; text-transform: uppercase; line-height: 1.5;
	white-space: nowrap; overflow: hidden;
	border-radius: 5px; padding: 0 4px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
/* comparativa: filas atributo → valor → delta */
.gd-block { margin: 6px 0 0; padding: 8px 10px; background: rgba(5, 7, 26, .4); border: 1px solid var(--panel-2); border-radius: 10px; }
.gd-head { font-family: var(--font-score); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.gd-row { display: flex; align-items: center; gap: 8px; font-size: .78rem; padding: 1px 0; }
.gd-row > span { flex: 1; color: var(--muted); }
.gd-row > b { font-family: var(--font-score); min-width: 34px; text-align: right; }
.gd-d { font-family: var(--font-score); font-size: .74rem; font-weight: 800; min-width: 42px; text-align: right; }
.gd-up { color: #7CFF6B; } .gd-down { color: #FF9DB8; } .gd-same { color: var(--muted); }
.gd-eqp { color: var(--crt); font-family: var(--font-score); font-size: .72rem; }
.gd-line { font-family: var(--font-score); font-size: .72rem; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gd-line .gd-d { min-width: 0; }
/* borde por rareza en slots/celdas de equipo */
.rar-bd { box-shadow: inset 0 0 0 2px currentColor; }
.shop-rar { margin: -2px 0 6px; }
.shop-card { border-top: 2px solid var(--rar, transparent); }
.rar-pip { position: absolute; top: 5px; left: 5px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .4), 0 0 6px currentColor; z-index: 2; }
/* Tag de rareza en los slots de mochila: TEXTO como en la tienda (no un punto).
 * El óvalo mide SOLO lo que miden las letras (max-content, centrado arriba). */
.bag-rar {
	position: absolute; top: 3px; left: 50%; transform: translateX(-50%); z-index: 2;
	width: max-content; max-width: calc(100% - 6px);
	font-family: var(--font-score); font-size: .44rem; font-weight: 800;
	letter-spacing: .03em; text-transform: uppercase; line-height: 1.5;
	text-align: center; white-space: nowrap; overflow: hidden;
	border-radius: 6px; padding: 0 5px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
/* …y abajo, del mismo tamaño, EQUIPADO en los objetos puestos */
.bag-eqt {
	position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); z-index: 2;
	width: max-content; max-width: calc(100% - 6px);
	font-family: var(--font-score); font-size: .44rem; font-weight: 800;
	letter-spacing: .03em; line-height: 1.5; white-space: nowrap; overflow: hidden;
	color: var(--tinta); background: var(--crt);
	border-radius: 6px; padding: 0 5px;
}
.bag-slot.equipped .bag-sell { display: none; }   /* EQUIPADO ocupa ese hueco; el precio va en la ficha */
.pg-slot, .bag-slot { position: relative; }
/* delta compacto (+XX verde / −XX rojo) para las cards de la tienda */
.gd-mini { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; justify-content: center; }
.gd-chip { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-score); font-size: .74rem; background: rgba(5, 7, 26, .35); border: 1px solid var(--panel-2); border-radius: 8px; padding: 2px 7px; }
.gd-chip b { font-weight: 800; }
/* encantar desde la ficha del objeto (perfil) */
.pi-ench { margin: 8px 0 2px; padding: 8px 10px; background: rgba(180, 140, 255, .1); border: 1px solid color-mix(in srgb, #B48CFF 40%, var(--panel-2)); border-radius: 10px; font-size: .82rem; }
.pi-ench small { display: block; margin-top: 2px; font-size: .72rem; }
.pg-click { cursor: pointer; transition: transform .12s, border-color .12s; }
.pg-click:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--crt) 45%, var(--panel-2)); }
.ench-hint { font-size: .8rem; margin-top: 12px; }

/* ---- Ajuste de rotación del cambio automático (landing) ---- */
.games-subrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.games-subrow .games-count { margin: 0; }
.autoplay-cfg-btn { flex: 0 0 auto; }
.ap-overlay { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 16px; background: rgba(5, 7, 26, .72); backdrop-filter: blur(4px); overflow-y: auto; }
.ap-overlay[hidden] { display: none; }
.ap-card { width: min(560px, 96vw); max-height: 88vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--panel-2); border-radius: 18px; padding: 18px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9); animation: modal-pop .3s cubic-bezier(.34, 1.56, .64, 1); }
.ap-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ap-head h3 { margin: 0; font-family: var(--font-display); font-size: 1.1rem; }
.ap-intro { font-size: .82rem; margin: 0 0 12px; }
.ap-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ap-count { font-family: var(--font-score); font-size: .74rem; margin-left: auto; }
.ap-grid { display: grid; gap: 14px; }
.ap-cat-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ap-cat-h b { font-family: var(--font-display); font-size: .9rem; }
.ap-cat-all { background: none; border: 0; color: var(--crt); font-family: var(--font-score); font-size: .68rem; cursor: pointer; padding: 2px 4px; text-decoration: underline dotted; }
.ap-cat-all:hover { color: var(--marquesina); }
.ap-cat > label { display: inline-flex; }
.ap-cat { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ap-cat .ap-cat-h { grid-column: 1 / -1; }
.ap-item { display: flex; align-items: center; gap: 8px; background: var(--tinta-2); border: 1px solid var(--panel-2); border-radius: 10px; padding: 7px 10px; cursor: pointer; font-size: .82rem; transition: border-color .12s, opacity .12s; opacity: .5; }
.ap-item.on { opacity: 1; border-color: color-mix(in srgb, var(--crt) 40%, var(--panel-2)); }
.ap-item input { accent-color: var(--crt); width: 16px; height: 16px; flex: 0 0 auto; }
.ap-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- landing: cabecera de juegos con botón de rotación bien colocado ---- */
.games-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.autoplay-cfg-btn { flex: 0 0 auto; }
/* ---- juego: acceso directo (dado) junto al switch de auto ---- */
.rot-shortcut { flex: 0 0 auto; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--panel); border: 1px solid var(--panel-2); font-size: 1rem; text-decoration: none; transition: transform .12s, border-color .12s; }
.rot-shortcut:hover { transform: translateY(-2px); border-color: var(--marquesina); text-decoration: none; }
/* ---- gameover limpio: tap para reintentar ---- */
.gameover { cursor: pointer; }
.go-again { margin-top: 14px; font-family: var(--font-score); font-size: .82rem; color: var(--crt); animation: go-again-pulse 1.4s ease-in-out infinite; }
@keyframes go-again-pulse { 50% { opacity: .55; } }

/* ---------- Tanda 91: badge en vivo, cofre, popup de premio, ver más, ranking landing ---------- */
.hero-badge-live { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #7CFF6B; box-shadow: 0 0 0 0 rgba(124, 255, 107, .7); animation: live-pulse 1.8s ease-out infinite; vertical-align: middle; margin-right: 3px; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(124, 255, 107, .6); } 70% { box-shadow: 0 0 0 8px rgba(124, 255, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(124, 255, 107, 0); } }

.chest-card.bursting { animation: chest-burst .5s ease; }
@keyframes chest-burst { 0% { transform: scale(1); } 30% { transform: scale(1.12) rotate(-4deg); } 55% { transform: scale(.96) rotate(3deg); } 100% { transform: scale(1); } }

/* Popup de recompensa (cofre diario / ruleta) */
.reward-pop { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(6, 8, 20, .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .22s ease; }
.reward-pop.show { opacity: 1; }
.reward-pop-card { position: relative; text-align: center; padding: 28px 34px; border-radius: 22px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid color-mix(in srgb, var(--marquesina) 45%, var(--panel-2)); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8); transform: scale(.7) translateY(10px); transition: transform .3s cubic-bezier(.2, 1.3, .4, 1); }
.reward-pop.show .reward-pop-card { transform: scale(1) translateY(0); }
.reward-pop-glow { position: absolute; inset: -30%; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--marquesina) 55%, transparent), transparent 60%); z-index: -1; animation: rp-glow 2.4s ease-in-out infinite; }
@keyframes rp-glow { 50% { opacity: .5; } }
.reward-pop-icon { font-size: 3.4rem; line-height: 1; animation: rp-pop .5s ease; }
@keyframes rp-pop { 0% { transform: scale(0) rotate(-20deg); } 60% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
.reward-pop-title { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: var(--marquesina); margin-top: 8px; }
.reward-pop-sub { color: var(--hueso); font-weight: 600; margin-top: 4px; }
.reward-pop-hint { color: var(--muted); font-size: .78rem; margin-top: 12px; }

/* Botón "Ver más juegos" y chips del ranking en la landing */
.games-more { display: block; margin: 22px auto 0; }

@media (prefers-reduced-motion: reduce) {
	.chest-card.bursting, .reward-pop-card, .reward-pop-icon, .reward-pop-glow, .hero-badge-live { animation: none; }
}

/* Boosts activos en el perfil (movidos desde el header) */
.profile-boosts { margin: 6px 0 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pb-label { font-weight: 700; color: var(--hueso); font-size: .9rem; }
.pb-chip { background: var(--panel-2); border: 1px solid var(--panel); border-radius: 999px; padding: 5px 11px; font-size: .82rem; font-weight: 600; }

/* ---------- MAZMORRA · resumen de escuadra (héroe + bestia) ---------- */
.dg-squad { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 0 0 34px; }
@media (min-width: 800px) { .dg-squad { grid-template-columns: 1.35fr 1fr; } }
.dg-unit {
	position: relative; overflow: hidden;
	background: linear-gradient(165deg, var(--panel), var(--tinta-2));
	border: 1px solid var(--panel-2); border-radius: var(--radius);
	padding: 16px 18px; display: flex; flex-direction: column; gap: 14px;
}
.dg-unit::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); opacity: .9; }
.dg-unit-you { --accent: var(--marquesina); }
.dg-unit-beast { --accent: #c58cff; border-color: #5a3f7a; background: linear-gradient(165deg, #2a1c3e, var(--tinta-2)); }
.dg-unit-head { display: flex; align-items: center; gap: 12px; }
.dg-unit-emoji {
	flex: 0 0 auto; width: 54px; height: 54px; display: grid; place-items: center; font-size: 1.9rem;
	border-radius: 16px; background: radial-gradient(circle at 35% 28%, var(--panel-2), var(--panel));
	border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--panel-2));
}
.dg-unit-id { flex: 1; min-width: 0; display: grid; }
.dg-unit-id b { font-family: var(--font-display); font-size: 1rem; }
.dg-unit-id small { color: var(--muted); font-size: .74rem; }
.dg-unit-power { text-align: right; line-height: 1.1; }
.dg-unit-power small { display: block; font-family: var(--font-score); font-size: .58rem; letter-spacing: .14em; color: var(--muted); }
.dg-unit-power b { font-family: var(--font-display); font-size: 1.45rem; color: var(--marquesina); }
.dg-unit-tag { font-family: var(--font-score); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: #c58cff; border: 1px solid color-mix(in srgb, #c58cff 45%, transparent); background: color-mix(in srgb, #c58cff 15%, transparent); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
/* stats en UNA SOLA FILA (6 en el héroe, 2 en la bestia), compactos para que quepan */
.dg-stats { display: grid; gap: 6px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dg-unit-beast .dg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dg-stat { background: rgba(255, 255, 255, .035); border: 1px solid var(--panel-2); border-radius: 11px; padding: 8px 3px; text-align: center; display: grid; gap: 1px; min-width: 0; }
.dg-stat-ic { font-size: .82rem; line-height: 1; }
.dg-stat b { font-family: var(--font-display); font-size: .88rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
.dg-stat small { color: var(--muted); font-size: .54rem; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-unit-beast .dg-stat-ic { font-size: 1rem; }
.dg-unit-beast .dg-stat b { font-size: 1.05rem; }
.dg-unit-beast .dg-stat small { font-size: .62rem; }
.dg-unit-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dg-gear-row { display: flex; gap: 6px; }
.dg-gear-chip { width: 32px; height: 32px; display: grid; place-items: center; font-size: 1.05rem; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--panel); }
.dg-unit-foot-xp { flex-direction: column; align-items: stretch; gap: 5px; }
.dg-xp { display: block; height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.dg-xp i { display: block; height: 100%; background: linear-gradient(90deg, #8a5fd0, #c58cff); }
.dg-xp-txt { color: var(--muted); font-size: .7rem; }

/* Tarjetas de nivel: que se lean como BOTONES, no como fichas informativas */
/* mismo estilo que "Golpear al jefe": hereda .btn y solo se ajusta el layout */
.dg-level-go { display: block; width: 100%; margin-top: 10px; text-align: center; transition: filter .16s ease; }
.dg-level.is-done .dg-level-go { background: var(--crt); }
.dg-level:hover:not(:disabled) .dg-level-go { filter: brightness(1.1); }
.dg-level:hover:not(:disabled) { box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .7), inset 0 0 0 1px var(--chicle); }
.dg-level:active:not(:disabled) { transform: translateY(-1px) scale(.985); }

/* ==================================================================
 * MAZMORRA · overhaul estético del hub
 * Atmósfera de caverna a la luz de las antorchas: brasas cálidas
 * arriba, oscuridad abajo, y profundidad real en el mapa de niveles.
 * ================================================================ */

/* --- Fondo: caverna iluminada, viñeta hacia abajo --- */
.dungeon-body {
	background:
		radial-gradient(920px 460px at 10% -6%, rgba(255, 93, 143, .11), transparent 62%),
		radial-gradient(1100px 520px at 92% -10%, rgba(180, 140, 255, .13), transparent 62%),
		radial-gradient(1500px 900px at 50% 128%, rgba(4, 2, 12, .95), transparent 72%),
		#0c0f26;
	background-attachment: fixed;
}

/* --- Cabecera: la boca de la mazmorra --- */
.dg-head { padding: 40px 0 8px; }
.dg-head .shop-kicker { color: var(--chicle); }
.dg-head .h-display {
	font-size: clamp(2.1rem, 6vw, 3.3rem);
	text-shadow: 0 0 34px color-mix(in srgb, var(--chicle) 30%, transparent);
}
.dg-head::after {
	content: ""; display: block; height: 2px; margin-top: 26px;
	background: linear-gradient(90deg, var(--chicle), var(--marquesina) 30%, transparent 78%);
	border-radius: 999px; opacity: .55;
}

/* --- Encabezados de sección: regla degradada que ancla cada bloque --- */
.dg-hub .h-sm { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 46px; }
.dg-hub .h-sm::after {
	content: ""; flex: 1 1 60px; height: 1px; align-self: center;
	background: linear-gradient(90deg, var(--panel-2), transparent);
}

/* --- Escuadra: paneles con halo del color de cada unidad --- */
.dg-unit {
	border-radius: 20px;
	box-shadow: 0 22px 44px -28px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .045);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dg-unit::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
	background: radial-gradient(420px 170px at 0% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%);
}
.dg-unit:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--panel-2)); box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .95), 0 0 26px -10px color-mix(in srgb, var(--accent) 55%, transparent); }
.dg-unit-emoji {
	width: 58px; height: 58px; font-size: 2rem; border-radius: 17px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 12px 22px -14px color-mix(in srgb, var(--accent) 80%, transparent);
}
.dg-unit-power b { text-shadow: 0 0 20px color-mix(in srgb, var(--marquesina) 55%, transparent); }
.dg-stat { background: rgba(0, 0, 0, .24); transition: border-color .15s ease, background .15s ease; }
.dg-unit:hover .dg-stat { border-color: color-mix(in srgb, var(--accent) 26%, var(--panel-2)); }

/* --- Mapa: cuanto más hondo, más oscuro y más rojo (dg-depth-1/2/3) --- */
.dg-level { border-radius: 18px; overflow: hidden; box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .9); }
.dg-level::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(200px 110px at 50% 0%, rgba(255, 255, 255, .05), transparent 70%);
}
.dg-depth-2 { background: linear-gradient(165deg, #171331, #100b22); }
.dg-depth-3 { background: linear-gradient(165deg, #1d0f28, #12081c); border-color: #4a2440; }
.dg-depth-3:not(.is-locked) .dg-level-name { text-shadow: 0 0 14px rgba(255, 93, 143, .45); }
.dg-level-n {
	position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; font-size: .88rem;
	border: 1px solid var(--panel-2); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .8); z-index: 2;
}
.dg-level-thumb { transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.dg-level:hover:not(:disabled) .dg-level-thumb { transform: scale(1.12); }
.dg-level.is-done { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crt) 35%, transparent), 0 14px 30px -22px rgba(0, 0, 0, .9); }
.dg-level.is-final { box-shadow: 0 0 26px -8px rgba(180, 140, 255, .55), 0 14px 30px -22px rgba(0, 0, 0, .9); animation: dg-final-pulse 3.2s ease-in-out infinite; }
@keyframes dg-final-pulse { 50% { box-shadow: 0 0 34px -6px rgba(255, 93, 143, .6), 0 14px 30px -22px rgba(0, 0, 0, .9); } }

/* --- Incursión: guarida del jefe --- */
.dg-raid {
	border-radius: 22px; padding: 22px 24px;
	box-shadow: 0 26px 60px -32px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.dg-raid-emoji {
	width: 76px; height: 76px; display: grid; place-items: center; font-size: 2.6rem;
	background: radial-gradient(circle at 35% 30%, #241634, #12081f);
	border: 1px solid #5a3f7a; border-radius: 20px;
	box-shadow: 0 0 28px -8px rgba(180, 140, 255, .55);
}
.dg-bar-raid { height: 22px; border-color: #5a4b9f; }
.dg-bar-raid i { position: relative; background: linear-gradient(90deg, #6a4bb0, #b48cff); }
.dg-bar-raid i::after {
	content: ""; position: absolute; inset: 0;
	background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .12) 0 10px, transparent 10px 20px);
	animation: dg-raid-stripes 1.1s linear infinite;
}
@keyframes dg-raid-stripes { to { background-position: 28px 0; } }
.dg-drop-chip { transition: transform .15s ease, border-color .15s ease; }
.dg-drop-chip:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--marquesina) 45%, var(--panel-2)); }

@media (prefers-reduced-motion: reduce) {
	.dg-level.is-final { animation: none; }
	.dg-bar-raid i::after { animation: none; }
	.dg-unit:hover, .dg-level:hover:not(:disabled) .dg-level-thumb { transform: none; }
}

/* ==================================================================
 * ARENA · overhaul de UX
 * Hub: jerarquía clara (estado → CTA imponente → clasificación).
 * Combate: columna enfocada + DOCK de interacción fijo (el ojo del
 * jugador siempre mira al mismo sitio) + acciones con jerarquía.
 * ================================================================ */

/* --- Hub: cabecera --- */
.arena-hub { padding: 40px 0 34px; }
.arena-hub .shop-kicker { color: #7be0ff; }
.arena-hub .h-display {
	font-size: clamp(2.1rem, 6vw, 3.2rem);
	text-shadow: 0 0 34px rgba(123, 224, 255, .3);
}
.arena-intro { font-size: .92rem; }

/* --- Hub: tarjetas de estado con halo --- */
.arena-league-card, .arena-me {
	position: relative; overflow: hidden; border-radius: 20px;
	box-shadow: 0 22px 44px -28px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .045);
}
.arena-league-card::after, .arena-me::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
	background: radial-gradient(380px 160px at 0% 0%, rgba(123, 224, 255, .12), transparent 62%);
}
.arena-me::after { background: radial-gradient(380px 160px at 0% 0%, color-mix(in srgb, var(--marquesina) 12%, transparent), transparent 62%); }

/* --- Hub: el CTA es el protagonista absoluto --- */
.arena-cta { display: grid; justify-items: center; gap: 9px; margin: 26px 0 42px; }
.arena-fight-btn {
	width: min(430px, 100%); padding: 18px 30px; font-size: 1.12rem; border-radius: 999px;
	background: linear-gradient(120deg, var(--marquesina), var(--chicle));
	box-shadow: 0 18px 42px -14px color-mix(in srgb, var(--chicle) 60%, transparent);
	animation: arena-cta-pulse 2.8s ease-in-out infinite;
}
.arena-fight-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
@keyframes arena-cta-pulse { 50% { box-shadow: 0 18px 54px -10px color-mix(in srgb, var(--chicle) 85%, transparent); } }
.arena-cta-note { font-size: .74rem; letter-spacing: .02em; }
.arena-board { max-width: 560px; }

/* --- Combate: columna de duelo enfocada --- */
.battle-wrap { max-width: 700px; margin-inline: auto; }
.arena-battle { padding-top: 16px; }
.battle-field {
	position: relative; border-radius: 22px; overflow: hidden;
	border: 1px solid #3a3f6e; padding: 30px 12px 16px;
	box-shadow: 0 26px 60px -32px rgba(0, 0, 0, .95);
}
/* luchadores "de cristal" sobre la arena: el escenario se ve detrás */
.battle-field .fighter {
	background: rgba(8, 10, 30, .62); backdrop-filter: blur(5px);
	border-radius: 16px; z-index: 1;
	box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .9);
}
.fighter-you { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crt) 30%, transparent), 0 14px 30px -20px rgba(0, 0, 0, .9); }
.fighter-foe { box-shadow: inset 0 0 0 1px rgba(255, 93, 143, .3), 0 14px 30px -20px rgba(0, 0, 0, .9); }
.battle-vs {
	position: relative; z-index: 1; flex: 0 0 auto; align-self: center;
	width: 46px; height: 46px; display: grid; place-items: center;
	background: radial-gradient(circle at 35% 30%, #2c3372, #191e45);
	border: 2px solid var(--marquesina); border-radius: 50%;
	font-size: .8rem; box-shadow: 0 0 24px -6px var(--marquesina);
}

/* --- DOCK de interacción: altura fija, todo pasa AQUÍ --- */
.battle-dock {
	min-height: 128px; display: grid; place-items: center; align-content: center; gap: 10px;
	margin: 12px 0; padding: 12px 14px; border-radius: 18px;
	background: rgba(5, 7, 26, .55);
	border: 1px solid color-mix(in srgb, var(--crt) 18%, var(--panel-2));
}
.battle-dock > * { margin: 0; width: 100%; }
.battle-dock .battle-turn { width: auto; }
.timing-wrap, .mash-wrap { max-width: 470px; }
.battle-dock .qte-block { width: min(340px, 100%); }
.battle-turn {
	font-family: var(--font-display); font-weight: 800; font-size: .92rem;
	letter-spacing: .14em; color: var(--crt); margin: 0;
	transition: color .2s ease, opacity .2s ease;
}
.battle-turn.is-foe { color: #FF9DB8; }
.battle-turn.is-busy { opacity: .45; }

/* --- Acciones: jerarquía real (Atacar manda, el resto acompaña) --- */
.battle-actions { grid-template-columns: repeat(6, 1fr); gap: 8px; }
.arena-act[data-act="attack"] { grid-column: span 3; font-size: 1.02rem; padding: 15px 8px; }
.arena-act[data-act="rage"] { grid-column: span 3; padding: 15px 8px; }
.arena-act[data-act="beast"], .arena-act[data-act="defend"], .arena-act[data-act="potion"] {
	grid-column: span 2; background: var(--panel); color: var(--hueso);
	border: 1px solid var(--panel-2); font-size: .8rem; padding: 11px 6px;
}
.arena-act[data-act="beast"]:hover:not(:disabled), .arena-act[data-act="defend"]:hover:not(:disabled), .arena-act[data-act="potion"]:hover:not(:disabled) { border-color: var(--crt); }

/* --- Log: feed secundario, la última línea es la que habla --- */
.battle-log {
	background: transparent; border: 0; border-left: 2px solid var(--panel-2);
	border-radius: 0; padding: 2px 12px; margin: 14px 0 6px;
	min-height: 58px; max-height: 84px; font-size: .78rem; color: var(--muted);
}
.battle-log p:last-child { color: var(--hueso); }

@media (max-width: 480px) {
	.battle-field { padding: 26px 8px 12px; gap: 6px; }
	.battle-vs { width: 38px; height: 38px; font-size: .7rem; }
	.battle-dock { min-height: 118px; }
	.arena-act[data-act="beast"], .arena-act[data-act="defend"], .arena-act[data-act="potion"] { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
	.arena-fight-btn { animation: none; }
}

/* ==================================================================
 * ARENA · rediseño minimalista (fuera coliseo, dentro el foco)
 * Un duelo se entiende con 3 cosas: quién pelea, cuánta vida queda y
 * qué puedo hacer ahora. Todo lo demás es ruido y se ha quitado.
 * ================================================================ */

/* desplazamiento suave en toda la web (profesional y barato) */
html { scroll-behavior: smooth; }

/* --- Campo de duelo: foco central + aura de cada bando --- */
.battle-field {
	background:
		radial-gradient(56% 92% at 15% 55%, rgba(124, 255, 107, .08), transparent 62%),
		radial-gradient(56% 92% at 85% 55%, rgba(255, 93, 143, .10), transparent 62%),
		radial-gradient(130% 150% at 50% -12%, #1a1f4c 0%, #10132e 56%, #0a0d24 100%);
	border-color: #2c3160; padding: 18px 12px 16px;
}
/* luchadores: tarjetas casi invisibles — el protagonista es el personaje y su vida */
.battle-field .fighter { background: rgba(8, 10, 30, .38); backdrop-filter: blur(3px); border: 1px solid rgba(255, 255, 255, .06); box-shadow: none; }
.fighter-you, .fighter-foe { box-shadow: none; }
.fighter-avatar { width: 74px; height: 74px; border-radius: 20px; background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .07), transparent 70%); }
.fighter-you .fighter-avatar { box-shadow: inset 0 0 0 2px rgba(124, 255, 107, .35); }
.fighter-foe .fighter-avatar { box-shadow: inset 0 0 0 2px rgba(255, 93, 143, .35); }
.f-emoji { font-size: 2.7rem; }
.f-name { font-size: .95rem; letter-spacing: .01em; }
.f-rating { font-size: .66rem; opacity: .75; }
/* la VIDA es la información crítica: barra gorda, lo demás susurra */
.f-hp { height: 19px; border-radius: 999px; }
.f-chips { gap: 10px; font-size: .68rem; }
.f-chips span { background: transparent; border: 0; padding: 0; color: var(--muted); }
/* info de equipación: discreta, universal (ⓘ), aparece sin gritar */
.f-gear { background: transparent; border-color: transparent; color: var(--muted); font-size: 1.05rem; opacity: .55; }
.f-gear:hover { opacity: 1; transform: none; border-color: var(--panel-2); background: rgba(10, 13, 36, .6); }
/* VS: anillo mínimo que respira */
.battle-vs { width: 42px; height: 42px; border-width: 1px; font-size: .74rem; animation: vs-ring 2.6s ease-out infinite; }
@keyframes vs-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--marquesina) 38%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }

/* --- Dock e indicador de turno: una sola voz --- */
.battle-dock { border: 0; background: rgba(5, 7, 26, .45); }
.battle-turn {
	padding: 7px 20px; border-radius: 999px;
	background: color-mix(in srgb, var(--crt) 9%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crt) 32%, transparent);
}
.battle-turn.is-foe { background: rgba(255, 93, 143, .09); box-shadow: inset 0 0 0 1px rgba(255, 93, 143, .38); }

/* --- Coreografía de entrada (clase .enter, la pone startBattle ~800ms) --- */
.arena-battle.enter .fighter-you { animation: f-enter-l .5s cubic-bezier(.22, .9, .32, 1.15) both; }
.arena-battle.enter .fighter-foe { animation: f-enter-r .5s cubic-bezier(.22, .9, .32, 1.15) .07s both; }
.arena-battle.enter .battle-vs { animation: vs-pop .55s cubic-bezier(.34, 1.56, .64, 1) .2s both, vs-ring 2.6s ease-out .8s infinite; }
.arena-battle.enter .battle-dock { animation: rise-in .45s ease .26s both; }
.arena-battle.enter .battle-actions { animation: rise-in .45s ease .34s both; }
@keyframes f-enter-l { from { opacity: 0; transform: translateX(-48px) scale(.92); } }
@keyframes f-enter-r { from { opacity: 0; transform: translateX(48px) scale(.92); } }
@keyframes vs-pop { from { opacity: 0; transform: scale(.2) rotate(-150deg); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } }

/* --- CTA del hub: brillo especular que barre el botón --- */
.arena-fight-btn { position: relative; overflow: hidden; }
.arena-fight-btn::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 34%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-18deg); animation: cta-shine 3.4s ease-in-out infinite;
}
@keyframes cta-shine { 0%, 55% { left: -45%; } 90%, 100% { left: 135%; } }

/* --- Clasificación: filas con reveal por scroll (ui-reveal) y hover claro --- */
.arena-board li { transition: background .15s ease; border-radius: 10px; }
.arena-board li:hover { background: rgba(255, 255, 255, .04); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.battle-vs, .arena-battle.enter .battle-vs { animation: none; }
	.arena-fight-btn::after { animation: none; opacity: 0; }
	.arena-battle.enter .fighter-you, .arena-battle.enter .fighter-foe,
	.arena-battle.enter .battle-dock, .arena-battle.enter .battle-actions { animation: none; }
}

/* ==================================================================
 * ARENA · ajustes de presencia
 * CTA y clasificación a TODO el ancho; el combate llena la pantalla.
 * ================================================================ */

/* CTA y clasificación a todo el ancho del contenedor */
.arena-fight-btn { width: 100%; }
.arena-board { max-width: none; }

/* --- El combate ocupa la pantalla: columna a alto completo --- */
.battle-wrap { max-width: 780px; min-height: calc(100vh - 150px); display: flex; flex-direction: column; }
.battle-field { flex: 1 1 auto; min-height: clamp(320px, 44vh, 480px); align-items: center; padding: 22px 14px; }
.battle-field .fighter { align-self: stretch; align-content: center; padding: 22px 12px; }
.fighter-avatar { width: 86px; height: 86px; }
.f-emoji { font-size: 3.1rem; }
.f-name { font-size: 1.05rem; }
.battle-dock { min-height: 138px; }
/* aire entre las acciones y el histórico de combate */
.battle-log { margin: 26px 0 10px; }
.battle-legend { margin-top: auto; padding-top: 10px; }

/* --- Fondo animado sutil detrás del combate: dos auras que derivan --- */
.arena-battle { position: relative; overflow: hidden; }
.arena-battle::before {
	content: ""; position: absolute; inset: -22%; z-index: 0; pointer-events: none;
	background:
		radial-gradient(38% 30% at 18% 28%, rgba(124, 255, 107, .055), transparent 62%),
		radial-gradient(40% 32% at 82% 72%, rgba(255, 93, 143, .07), transparent 62%),
		radial-gradient(30% 24% at 60% 12%, rgba(123, 224, 255, .05), transparent 62%);
	animation: battle-drift 16s ease-in-out infinite alternate;
}
@keyframes battle-drift { to { transform: translate3d(4%, -3%, 0) scale(1.08); } }
.battle-wrap { position: relative; z-index: 1; }
/* foco central del campo que "respira" (vive en ::after: no choca con .crit ni .peril) */
.battle-field::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
	background: radial-gradient(52% 62% at 50% 42%, rgba(255, 255, 255, .045), transparent 72%);
	animation: field-breathe 5.5s ease-in-out infinite;
}
@keyframes field-breathe { 50% { opacity: .4; } }

@media (max-width: 480px) { .battle-field { min-height: clamp(280px, 38vh, 420px); } .fighter-avatar { width: 72px; height: 72px; } .f-emoji { font-size: 2.5rem; } }
@media (prefers-reduced-motion: reduce) {
	.arena-battle::before, .battle-field::after { animation: none; }
}

/* ==================================================================
 * BESTIA · reorganización: stats bajo el nombre + todo más compacto
 * ================================================================ */
.beast-statrow { margin: 2px 0 10px; display: grid; gap: 8px; }
.beast-statrow .bs-cards { gap: 8px; }
.beast-statrow .bs-card { padding: 9px 6px; }
.beast-statrow .bs-card b { font-size: 1rem; }
.beast-statrow .bs-card small { font-size: .6rem; }
.beast-statrow .bs-freebar { margin-top: 0; font-size: .74rem; }
.beast-how { margin: 0 auto 12px; }
.beast-how summary { cursor: pointer; }
/* entrenamiento comprimido */
.beast-train { margin-top: 18px; }
.beast-train .h-sm { margin: 0 0 10px; }
.bt-card { padding: 10px 12px; gap: 10px; }
.bt-card .bt-emoji { font-size: 1.5rem; }
.bt-card .bt-txt small { font-size: .72rem; line-height: 1.35; }
.bt-note { font-size: .72rem; margin: 4px 0 0; }
/* ==================================================================
 * AVENTURAS · tarjetas y panel de poder
 * ================================================================ */
/* el tag JEFE ya no pisa el emoji del jefe: arriba a la derecha del escenario */
.adv-boss-badge { top: 10px; right: 26px; }
/* botón de la tarjeta abajo y centrado (flex column + margin-top auto) */
.adv-card { display: flex; flex-direction: column; }
.adv-card > .btn { margin-top: auto; align-self: center; min-width: 74%; text-align: center; }
/* panel "tu poder": stats mini del avatar y la bestia + botones de mejora */
.adv-power-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.aps-chip { font-family: var(--font-score); font-size: .72rem; background: var(--tinta-2); border: 1px solid var(--panel-2); border-radius: 8px; padding: 4px 9px; white-space: nowrap; }
.aps-chip.beast { border-color: color-mix(in srgb, #c58cff 45%, var(--panel-2)); color: #d9c2ff; }
.adv-power-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 560px) { .adv-power-btns { margin-left: 0; width: 100%; } .adv-power-btns .btn { flex: 1; text-align: center; } }

/* ==================================================================
 * ENGANCHE GLOBAL: aurora ambiental, anillo de XP, racha en peligro
 * ================================================================ */

/* Aurora de neón que deriva por TODA la web (blend screen: solo suma luz) */
.aurora-layer {
	position: fixed; inset: -14%; z-index: 1; pointer-events: none;
	mix-blend-mode: screen;
	background:
		radial-gradient(42% 34% at 12% 16%, rgba(255, 93, 143, .07), transparent 62%),
		radial-gradient(38% 30% at 88% 10%, rgba(77, 216, 230, .06), transparent 62%),
		radial-gradient(46% 38% at 72% 92%, rgba(180, 140, 255, .06), transparent 62%);
	animation: aurora-drift 30s ease-in-out infinite alternate;
}
@keyframes aurora-drift { to { transform: translate3d(3%, -2.5%, 0) scale(1.08) rotate(.5deg); } }

/* Anillo de XP alrededor del avatar del header: progresión SIEMPRE visible */
.pill-avatar { position: relative; z-index: 0; }
.pill-avatar::before {
	content: ""; position: absolute; inset: -3px; border-radius: 50%; z-index: -1;
	background: conic-gradient(var(--marquesina) var(--xp, 0%), var(--panel-2) 0);
}

/* Racha en peligro (landing): loss aversion con CTA directo */
.streak-danger {
	display: flex; align-items: center; gap: 12px;
	max-width: var(--maxw, 1100px); margin: 14px auto 0; padding: 12px 16px;
	width: calc(100% - 40px);
	background: linear-gradient(120deg, rgba(255, 93, 60, .14), rgba(255, 210, 74, .08));
	border: 1px solid rgba(255, 130, 60, .45); border-radius: 14px;
	animation: sd-pulse 2.2s ease-in-out infinite;
}
@keyframes sd-pulse { 50% { border-color: rgba(255, 93, 60, .8); box-shadow: 0 0 24px -8px rgba(255, 93, 60, .55); } }
.sd-flame { font-size: 1.7rem; line-height: 1; animation: sd-flame 1s ease-in-out infinite alternate; }
@keyframes sd-flame { to { transform: scale(1.15) rotate(-4deg); } }
.sd-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sd-txt b { font-size: .95rem; }
.sd-txt small { color: var(--muted); font-size: .76rem; }
.streak-danger .btn { flex: 0 0 auto; }

/* Regalo sorpresa: burbuja flotante que bambolea pidiendo un toque */
.gift-bubble {
	position: fixed; left: 18px; bottom: 76px; z-index: 140;
	width: 54px; height: 54px; border-radius: 50%;
	display: grid; place-items: center; font-size: 1.6rem; cursor: pointer;
	background: radial-gradient(circle at 32% 28%, #3a3f7e, #232a5f);
	border: 2px solid var(--marquesina);
	box-shadow: 0 0 22px -4px color-mix(in srgb, var(--marquesina) 70%, transparent), 0 10px 22px -10px rgba(0, 0, 0, .8);
	animation: gift-wobble 2.4s ease-in-out infinite;
}
.gift-bubble:hover { transform: scale(1.12); }
@keyframes gift-wobble { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-6px); } }

/* Chip del reto del día bajo el CTA del hero: la primera decisión ya está tomada */
.hero-daily-chip {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
	padding: 8px 16px; border-radius: 999px; font-size: .82rem; color: var(--hueso);
	background: color-mix(in srgb, var(--marquesina) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--marquesina) 45%, transparent);
	box-shadow: 0 0 18px -8px color-mix(in srgb, var(--marquesina) 60%, transparent);
	animation: chip-glow 2.6s ease-in-out infinite;
}
.hero-daily-chip:hover { text-decoration: none; background: color-mix(in srgb, var(--marquesina) 20%, transparent); }
.hero-daily-chip b { color: var(--marquesina); }
@keyframes chip-glow { 50% { box-shadow: 0 0 26px -6px color-mix(in srgb, var(--marquesina) 80%, transparent); } }

/* Próximos objetivos en el game-over: 3 barras de meta (nivel · objeto · misión) */
.go-goals { display: grid; gap: 7px; margin: 14px auto 4px; max-width: 320px; text-align: left; }
.gg-row { display: flex; align-items: center; gap: 9px; }
.gg-ic { flex: 0 0 auto; font-size: 1.05rem; line-height: 1; }
.gg-mid { flex: 1; min-width: 0; display: grid; gap: 3px; }
.gg-mid small { font-size: .66rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gg-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.gg-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--marquesina) 65%, transparent), var(--marquesina)); }
.gg-tail { flex: 0 0 auto; font-family: var(--font-score); font-size: .64rem; color: var(--marquesina); white-space: nowrap; }
.gg-streak { text-align: center; font-family: var(--font-score); font-size: .68rem; color: #FF9D4A; margin-top: 2px; }

/* ==================================================================
 * LANDING · heading neón + disolución al hacer scroll + footer compacto
 * ================================================================ */

/* "MATA EL": texto de gradiente neón vivo que respira */
.hero-neon {
	background: linear-gradient(100deg, var(--chicle), var(--marquesina) 45%, var(--crt) 80%, var(--chicle));
	background-size: 280% 100%;
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	filter: drop-shadow(0 0 26px color-mix(in srgb, var(--chicle) 40%, transparent));
	animation: neon-flow 7s linear infinite;
}
@keyframes neon-flow { to { background-position-x: 280%; } }
/* la palabra rotatoria late con luz propia */
.hero-rotator .rot.is-on { text-shadow: 0 0 30px color-mix(in srgb, var(--marquesina) 55%, transparent); animation: rot-glow 2.2s ease-in-out infinite; }
@keyframes rot-glow { 50% { text-shadow: 0 0 44px color-mix(in srgb, var(--marquesina) 85%, transparent); } }

/* DISOLUCIÓN espectacular ligada a la posición del scroll (progressive enhancement:
 * navegadores sin animation-timeline simplemente no la ven). Al bajar, el titular
 * se expande, se desenfoca y se disuelve como neón apagándose. */
@supports (animation-timeline: scroll()) {
	.hero-title { animation: title-dissolve linear both; animation-timeline: scroll(); animation-range: 0 70vh; }
	@keyframes title-dissolve { to { letter-spacing: .4em; filter: blur(9px); opacity: 0; transform: translateY(-14px); } }
	.hero-badge, .hero-sub { animation: hero-fade linear both; animation-timeline: scroll(); animation-range: 0 45vh; }
	@keyframes hero-fade { to { opacity: 0; transform: translateY(-10px); } }
}

/* Footer: en pantallas anchas ocupaba demasiado — compacto y en una línea de aire */
@media (min-width: 900px) {
	.site-foot { margin-top: 44px; padding: 22px 20px 26px; font-size: .84rem; }
	.site-foot p { margin: 4px 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-neon, .hero-rotator .rot.is-on { animation: none; }
	.hero-title, .hero-badge, .hero-sub { animation: none; }
}

/* Volver arriba: FAB discreto a la izquierda (la mascota vive a la derecha) */
.to-top {
	position: fixed; left: 18px; bottom: 18px; z-index: 130;
	width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center; font-size: 1.1rem; font-weight: 800; cursor: pointer;
	color: var(--hueso); background: var(--panel); border: 1px solid var(--panel-2);
	box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .8);
	opacity: 0; pointer-events: none; transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, border-color .15s ease;
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { border-color: var(--crt); }

/* Accesibilidad: foco de teclado SIEMPRE visible y coherente en toda la web */
:focus-visible { outline: 2px solid var(--crt); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.aurora-layer, .sd-flame, .streak-danger, .gift-bubble, .hero-daily-chip { animation: none; }
}

/* resultado de la sesión, compacto */
.bt-result { padding: 12px 14px; gap: 5px; }
.bt-result .bt-verdict { font-size: 1.05rem; margin: 0 0 2px; }
.bt-result .bt-gain { font-size: .78rem; padding: 4px 8px; }
.bt-result .bt-xpbar { margin-top: 4px; }
.bt-result .dg-result-actions { margin-top: 8px; }
.bt-result .dg-result-actions .btn { padding: 9px 14px; font-size: .84rem; }

/* ==================================================================
 * CUENTAS — chip del header y modal de registro/login.
 * El juego se juega de INVITADO; esto solo aparece cuando el jugador
 * ya tiene algo que perder.
 * ================================================================ */
/* --- Foto de perfil: la imagen encaja en cualquier hueco de avatar --- */
.av-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.has-photo { overflow: hidden; padding: 0; }
[data-avatar-chip].has-photo, .pill-avatar.has-photo { border-radius: 50%; }

/* --- Chip de cuenta en el header --- */
.cuenta-chip { cursor: pointer; font-size: .78rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 5px; }
.cuenta-chip .cc-face { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem;
	background: radial-gradient(circle at 35% 28%, var(--panel-2), var(--panel)); overflow: hidden; flex: 0 0 auto; }
.cuenta-chip .cc-txt { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.cuenta-chip.is-on { background: linear-gradient(180deg, #2c4a3a, #1e3a2c); border-color: #3a6b52; color: #9CFF8F; }

/* --- Modal --- */
.cuenta-modal { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 20px;
	background: rgba(5, 7, 26, .82); backdrop-filter: blur(5px); opacity: 0; transition: opacity .2s ease; }
.cuenta-modal.is-open { opacity: 1; }
.cm-box { position: relative; width: min(430px, 100%); max-height: 92vh; overflow-y: auto; text-align: center;
	background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--chicle) 22%, var(--panel)), var(--tinta-2) 60%);
	border: 1px solid var(--panel-2); border-radius: 22px; padding: 24px 24px 20px; display: grid; gap: 12px;
	box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .95); transform: translateY(16px) scale(.96); opacity: 0;
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease; }
.cuenta-modal.is-open .cm-box { transform: none; opacity: 1; }
.cm-close { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--muted);
	font-size: 1.05rem; cursor: pointer; padding: 4px 9px; border-radius: 9px; z-index: 2; }
.cm-close:hover { color: var(--hueso); background: var(--panel-2); }

.cm-brand { display: inline-flex; align-items: center; gap: 7px; justify-content: center; }
.cm-logo { font-size: 1.15rem; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--marquesina) 60%, transparent)); }
.cm-brandname { font-family: var(--font-score); font-weight: 800; letter-spacing: .16em; font-size: .72rem; color: var(--muted); }

.cm-avatar { display: grid; place-items: center; overflow: hidden; }
.cm-avatar-lg { width: 84px; height: 84px; margin: 2px auto 0; border-radius: 50%; font-size: 2.6rem;
	background: radial-gradient(circle at 35% 28%, var(--panel-2), var(--panel));
	border: 3px solid color-mix(in srgb, var(--marquesina) 55%, var(--panel-2));
	box-shadow: 0 0 28px -8px var(--marquesina); }
.cm-avatar-wrap { position: relative; width: 84px; margin: 2px auto 0; }
.cm-avatar-wrap .cm-avatar-lg { margin: 0; }
.cm-cam { position: absolute; right: -4px; bottom: -4px; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
	background: var(--chicle); border: 2px solid var(--tinta-2); color: #fff; font-size: .82rem; display: grid; place-items: center;
	box-shadow: 0 4px 10px -3px rgba(0, 0, 0, .6); transition: transform .15s ease; }
.cm-cam:hover { transform: scale(1.12); }

.cm-title { font-family: var(--font-display); font-size: 1.28rem; margin: 4px 0 0; }
.cm-hook { color: var(--muted); font-size: .88rem; margin: 0; line-height: 1.5; }
.cm-hook b { color: var(--marquesina); }
.cm-stats { margin: 0; font-size: .95rem; color: var(--hueso); }
.cm-stats b { color: var(--marquesina); font-family: var(--font-score); }
.cm-cloud { font-size: .74rem; color: #9CFF8F; }
.cm-perks { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 2px 0; }
.cm-perks span { font-size: .7rem; color: var(--muted); background: var(--panel); border: 1px solid var(--panel-2);
	border-radius: 999px; padding: 4px 9px; }

.cm-tabs { display: flex; gap: 6px; background: var(--tinta); border: 1px solid var(--panel-2); border-radius: 999px; padding: 4px; margin-top: 2px; }
.cm-tab { flex: 1; padding: 8px 10px; font-size: .82rem; font-weight: 700; cursor: pointer; color: var(--muted);
	background: none; border: 0; border-radius: 999px; transition: background .15s ease, color .15s ease; }
.cm-tab.is-on { background: var(--chicle); color: #fff; }

#cm-form { display: grid; gap: 10px; text-align: left; margin-top: 2px; }
.cm-lab { display: grid; gap: 4px; font-size: .74rem; color: var(--muted); font-weight: 600; }
.cm-lab input { padding: 11px 12px; font-size: .95rem; color: var(--hueso);
	background: var(--tinta); border: 1px solid var(--panel-2); border-radius: 11px; transition: border-color .15s, outline-color .15s; }
.cm-lab input:focus { outline: 2px solid var(--marquesina); outline-offset: 1px; border-color: var(--marquesina); }
.cm-submit { margin-top: 2px; }
.cm-submit.is-busy { opacity: .7; pointer-events: none; }
.cm-msg { margin: 0; font-size: .8rem; color: var(--crt); min-height: 1em; }
.cm-msg.is-err { color: #FF9DB8; }
.cm-fine { margin: 2px 0 0; font-size: .72rem; color: var(--muted); text-align: center; line-height: 1.45; }

.cm-actions { display: grid; gap: 8px; margin-top: 6px; }
.cm-actions .btn { width: 100%; justify-content: center; }
.cm-danger { color: #FF9DB8 !important; }
.cm-danger:hover { border-color: #FF9DB8 !important; }

/* --- Botón de cámara en la página de perfil --- */
.profile-avatar-wrap { position: relative; flex: 0 0 auto; }
.profile-cam { position: absolute; right: -5px; bottom: -5px; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
	background: var(--chicle); border: 2px solid var(--tinta); color: #fff; font-size: .82rem; display: grid; place-items: center;
	box-shadow: 0 4px 10px -3px rgba(0, 0, 0, .6); transition: transform .15s ease; }
.profile-cam:hover { transform: scale(1.12); }
.profile-avatar.has-photo { background: none; }

@media (prefers-reduced-motion: reduce) {
	.cuenta-modal, .cm-box { transition: none; }
	.cm-cam, .profile-cam { transition: none; }
}

/* ==================================================================
 * PÁGINA "MI CUENTA" — foto, compras y datos, con el estilo de la web.
 * ================================================================ */
.account { max-width: 780px; }
/* Estado invitado */
.acc-guest { display: grid; place-items: center; min-height: 46vh; }
.acc-guest-box { text-align: center; max-width: 440px; display: grid; gap: 12px; justify-items: center;
	background: linear-gradient(160deg, var(--panel), var(--tinta-2)); border: 1px solid var(--panel-2);
	border-radius: 22px; padding: 34px 28px; }
.acc-guest-emoji { font-size: 3rem; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--crt) 55%, transparent)); }

/* Cabecera de la cuenta */
.acc-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.acc-id { display: flex; align-items: center; gap: 16px; }
.acc-avatar { width: 64px; height: 64px; font-size: 2rem; border-radius: 50%; overflow: hidden;
	background: radial-gradient(circle at 35% 28%, var(--panel-2), var(--panel));
	border: 2px solid color-mix(in srgb, var(--marquesina) 45%, var(--panel-2)); }
.acc-head .h-display { margin: 0; font-size: 1.5rem; }
.acc-sub { margin: 3px 0 0; font-size: .82rem; color: var(--muted); }
.acc-cloud { color: #9CFF8F; }
.acc-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.acc-quick .pill b { color: var(--marquesina); font-family: var(--font-score); }

/* Pestañas */
.acc-tabs { display: flex; gap: 6px; flex-wrap: wrap; background: var(--tinta); border: 1px solid var(--panel-2);
	border-radius: 999px; padding: 5px; margin-bottom: 16px; }
.acc-tab { flex: 1; min-width: 110px; padding: 10px 12px; font-size: .84rem; font-weight: 700; cursor: pointer;
	color: var(--muted); background: none; border: 0; border-radius: 999px; transition: background .15s, color .15s; }
.acc-tab.is-on { background: var(--chicle); color: #fff; }

.acc-panel { animation: acc-fade .25s ease; }
@keyframes acc-fade { from { opacity: 0; transform: translateY(6px); } }
.acc-card { background: linear-gradient(160deg, var(--panel), var(--tinta-2)); border: 1px solid var(--panel-2);
	border-radius: 18px; padding: 22px; }
.acc-card + .acc-card { margin-top: 14px; }

/* Foto */
.acc-photo-card { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.acc-photo-big { flex: 0 0 auto; }
.acc-avatar-lg { width: 120px; height: 120px; font-size: 3.6rem; border-radius: 26px; overflow: hidden;
	background: radial-gradient(circle at 35% 28%, var(--panel-2), var(--panel));
	border: 3px solid color-mix(in srgb, var(--marquesina) 50%, var(--panel-2)); box-shadow: 0 0 30px -10px var(--marquesina); }
.acc-photo-big .profile-cam { width: 34px; height: 34px; font-size: .9rem; }
.acc-photo-txt { flex: 1 1 220px; }
.acc-photo-txt h2 { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 6px; }
.acc-photo-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.acc-fine { margin: 10px 0 0; font-size: .72rem; color: var(--muted); }

/* Compras */
.acc-orders { display: grid; gap: 12px; }
.acc-order { background: var(--tinta); border: 1px solid var(--panel-2); border-radius: 14px; padding: 14px 16px; }
.acc-order-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.acc-order-top b { font-family: var(--font-display); }
.acc-order-status { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: var(--muted); background: var(--panel); border: 1px solid var(--panel-2); border-radius: 999px; padding: 3px 9px; }
.acc-order-status.is-paid { color: #7CFF6B; border-color: rgba(124, 255, 107, .4); background: rgba(124, 255, 107, .08); }
.acc-order-items { margin: 8px 0; font-size: .88rem; color: var(--hueso); }
.acc-order-foot { display: flex; justify-content: space-between; align-items: baseline; }
.acc-order-foot b { font-family: var(--font-score); color: var(--marquesina); }
.acc-empty { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 22px 10px; }
.acc-empty span { font-size: 2.4rem; }
.acc-loading { text-align: center; }

/* Datos */
#acc-form { display: grid; gap: 12px; }
#acc-form input:disabled { opacity: .6; cursor: not-allowed; }
.acc-hr { border: 0; border-top: 1px solid var(--panel-2); margin: 6px 0 2px; }
.acc-legend { margin: 0; font-size: .8rem; color: var(--muted); }
.acc-danger-card { text-align: center; }