/* Kaboom Blocks: estilos. Los colores salen del tema (variables que pone main.js). */
:root {
  --bg: #141a33; --bg2: #0d1226; --panel: #1d2547; --line: rgba(160,180,255,.16); --accent: #f3c969; --accent2: #ff9f5a; --accent-text: #1a1a2e; --text: #f3f5ff; --muted: #8f9bc4; --danger: #ff5a5a;
  --mint: #2fcf8f; --font: 'Fredoka', 'Baloo 2', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --hud-h: 76px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); overflow: hidden; overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
#app { position: fixed; inset: 0; }
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#safe-probe { position: absolute; left: 0; bottom: 0; width: 1px; height: var(--safe-b); pointer-events: none; visibility: hidden; }
#top-probe { position: absolute; left: 0; top: 0; width: 1px; height: calc(var(--hud-h) + var(--safe-t)); pointer-events: none; visibility: hidden; }
.hidden { display: none !important; }
button { font-family: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent2); outline-offset: 3px; }
a { color: var(--accent); }

/* ---------- Botones ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 52px; padding: .5em 1.3em; border-radius: 18px; font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; color: var(--accent-text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 80%, #000)); box-shadow: 0 5px 0 color-mix(in srgb, var(--accent) 55%, #000), 0 10px 22px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 2px 0 rgba(255,255,255,.45); transition: transform .08s, box-shadow .08s, filter .15s; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 55%, #000), inset 0 2px 0 rgba(255,255,255,.45); }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn.mint { color: #053b26; background: linear-gradient(180deg, #a7ffd8, var(--mint) 55%, #18a56c); box-shadow: 0 5px 0 #0b6e47, 0 10px 22px rgba(47,207,143,.35), inset 0 2px 0 rgba(255,255,255,.6); }
.btn.mint:active { box-shadow: 0 1px 0 #0b6e47, inset 0 2px 0 rgba(255,255,255,.6); }
.btn.ghost { color: var(--text); background: color-mix(in srgb, var(--panel) 70%, transparent); box-shadow: inset 0 0 0 2px var(--line); }
.btn.ghost:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--line); }
.btn.big { min-height: 64px; font-size: 1.5rem; padding: .45em 1.8em; border-radius: 22px; }
.btn.small { min-height: 40px; font-size: .95rem; padding: .3em .9em; border-radius: 13px; }
.btn[disabled] { filter: grayscale(.7) brightness(.85); pointer-events: none; }
.ad-ico, .ad-tag { display: inline-grid; place-items: center; min-width: 1.7em; height: 1.15em; padding: 0 .25em; border-radius: 5px; background: rgba(0,0,0,.2); font-size: .68em; font-weight: 700; letter-spacing: .02em; }
.icon-btn { position: relative; width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; color: var(--text); background: color-mix(in srgb, var(--panel) 80%, transparent); box-shadow: inset 0 0 0 2px var(--line), 0 4px 12px rgba(0,0,0,.08); }
.icon-btn:active { transform: scale(.93); }
.icon-btn svg { width: 25px; height: 25px; }
.icon-btn .ad-tag { position: absolute; bottom: -6px; right: -6px; height: 18px; font-size: .62rem; color: #fff; background: var(--mint); box-shadow: 0 0 0 2px var(--bg); }
.badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--danger); color: #fff; font-size: .75rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); animation: pulse 1.6s ease-in-out infinite; }

/* ---------- Marcador ---------- */
#hud { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--hud-h) + var(--safe-t)); padding: calc(10px + var(--safe-t)) calc(14px + var(--safe-r)) 0 calc(14px + var(--safe-l)); display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; z-index: 2; }
#hud > * { pointer-events: auto; }
.hud-score { position: absolute; left: 50%; top: calc(4px + var(--safe-t)); transform: translateX(-50%); text-align: center; pointer-events: none; }
.hud-score .score { font-size: clamp(2.3rem, 9vw, 3rem); font-weight: 700; line-height: 1; color: var(--text); text-shadow: 0 3px 0 color-mix(in srgb, var(--text) 18%, transparent); transition: transform .12s; }
.hud-score .score.bump { transform: scale(1.08); }
.hud-score .best { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: .95rem; font-weight: 600; color: var(--muted); }
.hud-score .best svg { width: 15px; height: 15px; color: var(--accent2); }
.hud-score .combo { margin-top: 2px; font-weight: 700; font-size: .95rem; color: var(--accent); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s cubic-bezier(.2,1.6,.4,1); }
.hud-score .combo.on { opacity: 1; transform: scale(1); }

/* ---------- Textos flotantes ---------- */
#fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.pop { position: absolute; transform: translate(-50%, -50%); font-weight: 700; font-size: 1.4rem; color: #fff; white-space: nowrap; text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 14px rgba(0,0,0,.25); animation: popUp 1.1s ease-out forwards; }
.pop.boom { font-size: 1.6rem; color: #ffe27a; -webkit-text-stroke: 1.5px #a33a10; text-shadow: 0 4px 0 #7a2508; animation: boomPop .8s cubic-bezier(.2,1.6,.4,1) forwards; }
.pop.boom.big { font-size: clamp(3rem, 14vw, 5rem); }
.pop.perfect { font-size: 1.5rem; color: #fff; background: linear-gradient(90deg, var(--accent), var(--accent2)); padding: .2em .7em; border-radius: 999px; text-shadow: none; animation: popUp 1.6s ease-out forwards; }
.pop.record { font-size: 1.3rem; color: #3a2a00; background: linear-gradient(180deg, #fff1a8, #ffc93c); padding: .25em .8em; border-radius: 999px; text-shadow: none; box-shadow: 0 6px 18px rgba(255,180,40,.5); animation: popUp 2s ease-out forwards; }
.praise { position: absolute; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; display: flex; flex-direction: column; align-items: center; animation: praiseIn 1.3s cubic-bezier(.2,1.3,.4,1) forwards; }
.praise b { font-size: clamp(2rem, 9vw, 2.8rem); line-height: 1; color: #fff; -webkit-text-stroke: 2px color-mix(in srgb, var(--accent) 80%, #000); text-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 60%, #000), 0 0 22px color-mix(in srgb, var(--accent2) 70%, transparent); }
.praise i { font-style: normal; font-weight: 700; font-size: 1.35rem; color: var(--accent2); -webkit-text-stroke: 1px rgba(0,0,0,.35); margin-top: 2px; }
.praise em { font-style: normal; font-weight: 700; font-size: 1rem; color: #fff; background: var(--accent); border-radius: 999px; padding: .1em .7em; margin-top: 4px; }
.praise.tier-3 b { font-size: clamp(2.4rem, 11vw, 3.4rem); }
.praise.tier-4 b, .praise.tier-5 b { font-size: clamp(2.8rem, 13vw, 4.2rem); background: linear-gradient(180deg, #fff 20%, #ffe27a 55%, #ff7a2f); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; filter: drop-shadow(0 4px 0 #7a2508) drop-shadow(0 0 18px rgba(255,140,40,.7)); }
.praise.tier-5 { animation-duration: 1.9s; }
@keyframes popUp { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 70% { opacity: 1; transform: translate(-50%, -110%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -150%) scale(.95); } }
@keyframes boomPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(4deg); } 70% { opacity: 1; transform: translate(-50%, -60%) scale(1) rotate(0); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(.9); } }
@keyframes praiseIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 30% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; transform: translate(-50%, -62%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(.9); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* ---------- Avisos ---------- */
#toasts { position: absolute; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; z-index: 9; width: max-content; max-width: calc(100% - 24px); }
.toast { padding: 10px 16px; border-radius: 14px; background: color-mix(in srgb, var(--text) 88%, transparent); color: var(--bg); font-weight: 600; text-align: center; animation: rise .3s ease-out, fadeOut .4s 2.2s forwards; }
.toast.static { animation: none; background: color-mix(in srgb, var(--accent2) 30%, var(--panel)); color: var(--text); margin-bottom: 12px; }

/* ---------- Tutorial ---------- */
#tip { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.tip-text { position: absolute; left: 50%; top: calc(var(--hud-h) + var(--safe-t) - 6px); transform: translateX(-50%); max-width: calc(100% - 28px); padding: 10px 18px; border-radius: 16px; background: var(--panel); color: var(--text); font-weight: 700; font-size: 1.1rem; text-align: center; box-shadow: 0 0 0 2px var(--line), 0 10px 26px rgba(0,0,0,.18); animation: rise .35s cubic-bezier(.2,1.4,.4,1); }
.hand { position: absolute; width: 54px; height: 54px; left: 0; top: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); animation: handMove 2.2s ease-in-out infinite; }
.hand svg { width: 100%; height: 100%; }
@keyframes handMove { 0% { transform: translate(calc(var(--x0) - 14px), calc(var(--y0) - 6px)) scale(1); opacity: 0; } 10% { opacity: 1; } 20% { transform: translate(calc(var(--x0) - 14px), calc(var(--y0) - 6px)) scale(.88); } 70% { transform: translate(calc(var(--x1) - 14px), calc(var(--y1) - 6px)) scale(.88); opacity: 1; } 85%, 100% { transform: translate(calc(var(--x1) - 14px), calc(var(--y1) - 6px)) scale(1); opacity: 0; } }

/* ---------- Pantallas ---------- */
#screens { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#screens > .screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: calc(14px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l)); animation: fadeIn .25s ease-out; pointer-events: auto; }
.screen.modal { justify-content: center; justify-content: safe center; background: color-mix(in srgb, var(--bg2) 40%, rgba(0,0,0,.3)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); overflow-y: auto; }
.card { width: min(420px, 100%); background: var(--panel); border-radius: 26px; padding: 22px 20px 20px; box-shadow: 0 0 0 2px var(--line), 0 24px 60px rgba(0,0,0,.28); text-align: center; animation: rise .38s cubic-bezier(.2, 1.4, .4, 1); }
.card h2 { margin: 0 0 6px; font-size: 1.9rem; }
.sub { margin: 0 0 14px; color: var(--muted); }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }

/* Portada: deja ver el tablero de fondo (partida de demostración). */
.title-screen { justify-content: flex-start; }
.title-screen .logo { margin-top: -18px; }
.title-screen .title-bottom { margin-top: auto; }
.topbar { width: 100%; display: flex; justify-content: space-between; }
.logo { text-align: center; display: flex; flex-direction: column; align-items: center; }
.logo-bomb { width: clamp(64px, 18vw, 96px); height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); animation: wobble 2.4s ease-in-out infinite; transform-origin: 45% 70%; }
.logo-bomb .spark { animation: spark .25s steps(2) infinite; transform-origin: 55px 10px; }
.logo h1 { margin: -4px 0 0; font-size: clamp(3rem, 15vw, 5.4rem); line-height: .88; font-weight: 700; letter-spacing: .01em; color: #fff; -webkit-text-stroke: 3px color-mix(in srgb, var(--accent) 75%, #000);
  text-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 60%, #000), 0 12px 24px rgba(0,0,0,.25); }
.logo h1 span { display: block; margin-top: 4px; font-size: .52em; letter-spacing: .32em; padding-left: .32em; color: var(--accent2); -webkit-text-stroke: 2px color-mix(in srgb, var(--accent2) 50%, #000); }
.logo p { margin: 10px 0 0; color: var(--text); font-weight: 600; font-size: clamp(1rem, 3.6vw, 1.2rem); background: color-mix(in srgb, var(--panel) 75%, transparent); padding: .3em .9em; border-radius: 999px; }
.title-bottom { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.best-line { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 1.1rem; font-weight: 600; background: color-mix(in srgb, var(--panel) 80%, transparent); padding: .25em .9em; border-radius: 999px; }
.best-line svg { width: 18px; height: 18px; color: var(--accent2); }
.best-line b { font-size: 1.25rem; }
.menu-row { display: flex; gap: 10px; }
.menu-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 92px; padding: 10px 12px 8px; border-radius: 18px; font-weight: 600; font-size: .9rem; background: color-mix(in srgb, var(--panel) 85%, transparent); box-shadow: inset 0 0 0 2px var(--line); }
.menu-btn svg { width: 26px; height: 26px; color: var(--accent); }
.menu-btn:active { transform: scale(.95); }
@keyframes wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-3px); } }
@keyframes spark { to { transform: scale(1.35); } }

/* Fin de partida */
.screen.modal.over { background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35)); backdrop-filter: none; -webkit-backdrop-filter: none; justify-content: flex-end; justify-content: safe flex-end; }
.over-card .cause { font-weight: 700; color: var(--danger); margin-bottom: 2px; }
.over-card .final { font-size: clamp(3.2rem, 15vw, 4.4rem); font-weight: 700; line-height: 1; margin: 2px 0 10px; color: var(--text); }
.over-card .final.record { background: linear-gradient(180deg, #ffe680, #ff9f1c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(0,0,0,.15)); animation: pulse 1.4s ease-in-out infinite; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.stats div { padding: 8px 4px; border-radius: 14px; background: color-mix(in srgb, var(--bg) 60%, var(--panel)); }
.stats b { display: block; font-size: 1.3rem; }
.stats span { font-size: .85rem; color: var(--muted); }
.revive-slot:not(:empty) { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.revive-slot .hint { font-size: .85rem; color: var(--muted); }
.unlock { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border-radius: 14px; font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--accent2) 30%, var(--panel)); animation: rise .4s .3s both cubic-bezier(.2,1.5,.4,1); }
.unlock svg { width: 22px; height: 22px; color: var(--accent); }

/* Paneles */
.panel-screen { background: var(--bg); }
.panel-head { width: min(560px, 100%); display: grid; grid-template-columns: 50px 1fr 50px; align-items: center; gap: 10px; margin-bottom: 10px; }
.panel-head h2 { margin: 0; text-align: center; font-size: 1.6rem; }
.panel-body { width: min(560px, 100%); flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding-bottom: 10px; }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.theme-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px; border-radius: 20px; background: linear-gradient(180deg, var(--tb), var(--tb2)); box-shadow: inset 0 0 0 2px var(--line); color: var(--tt, #fff); text-shadow: var(--ts, 0 1px 2px rgba(0,0,0,.4)); cursor: pointer; }
.theme-card.on { box-shadow: inset 0 0 0 3px var(--accent), 0 6px 18px rgba(0,0,0,.18); }
.theme-card .mini { display: grid; grid-template-columns: repeat(3, 22px); gap: 4px; padding: 8px; border-radius: 12px; background: var(--tc); }
.theme-card .mini i { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.35); }
.theme-card b { font-size: 1.05rem; }
.theme-card .sel { font-size: .8rem; font-weight: 700; background: var(--accent); color: var(--accent-text); padding: .1em .6em; border-radius: 999px; text-shadow: none; }
.theme-card .lock { position: absolute; inset: 0; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px 6px; background: rgba(20,14,30,.66); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); font-weight: 700; }
.theme-card .lock svg { width: 26px; height: 26px; }
.theme-card.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.settings { text-align: left; display: flex; flex-direction: column; gap: 12px; margin: 0 auto; }
.setting { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--bg) 70%, var(--panel)); flex-wrap: wrap; justify-content: flex-end; }
.seg button { min-height: 36px; padding: 0 11px; border-radius: 9px; font-weight: 600; color: var(--muted); }
.seg button.on { background: var(--accent); color: var(--accent-text); }
.nick { width: 150px; min-height: 40px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); color: var(--text); font: 600 1rem var(--font); user-select: text; -webkit-user-select: text; }
.links { text-align: center; font-size: .9rem; color: var(--muted); }
.settings .b-reset { align-self: center; }
.rank-list ol { list-style: none; margin: 0; padding: 0; counter-reset: r; text-align: left; }
.rank-list li { counter-increment: r; display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 10px; }
.rank-list li::before { content: counter(r) '.'; width: 2em; color: var(--muted); }
.rank-list li span { flex: 1; }
.rank-list li:nth-child(odd) { background: color-mix(in srgb, var(--bg) 60%, var(--panel)); }
.rank-list li.me { background: color-mix(in srgb, var(--accent2) 35%, var(--panel)); font-weight: 700; }
.howto { background: var(--panel); border-radius: 22px; padding: 6px 20px 14px; box-shadow: 0 0 0 2px var(--line); line-height: 1.5; }
.howto h1 { font-size: 1.35rem; } .howto h2 { font-size: 1.15rem; color: var(--accent); margin-bottom: 4px; }
.howto ul { padding-left: 1.2em; margin-top: 4px; }

/* Anuncio simulado (pruebas locales) */
.dev-ad { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0,0,0,.75); }
.dev-ad-box { width: min(340px, 90%); padding: 20px; border-radius: 20px; background: #111; color: #fff; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.dev-ad-tag { font-size: .8rem; color: #aaa; }
.dev-ad-art { width: 100%; aspect-ratio: 16/9; border-radius: 12px; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #333 0 12px, #2a2a2a 12px 24px); font-size: 2rem; font-weight: 700; }

/* Carga */
#loader { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 20; transition: opacity .4s; }
#loader.out { opacity: 0; pointer-events: none; }
.loader-bomb { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #6a7088, #11131c); animation: pulse .8s ease-in-out infinite; }
.noscript { padding: 20px; text-align: center; }

@keyframes fadeIn { from { opacity: 0; } }
#screens > .screen.out { animation: fadeOut .17s ease-in forwards; pointer-events: none; }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.96); } }

/* Pantallas bajas (móvil en horizontal) */
@media (max-height: 520px) {
  :root { --hud-h: 58px; }
  .hud-score .score { font-size: 2rem; }
  .logo-bomb { width: 48px; }
  .logo h1 { font-size: 2.6rem; }
  .logo p { display: none; }
  .btn.big { min-height: 52px; font-size: 1.25rem; }
  .card { padding: 14px 16px; }
  .over-card .final { font-size: 2.6rem; margin-bottom: 6px; }
  .stats { margin-bottom: 8px; }
  .screen.modal.over { justify-content: center; justify-content: safe center; }
  .over-card { width: min(560px, 100%); display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-items: center; text-align: center; }
  .over-card > .cause, .over-card > h2, .over-card > .final, .over-card > .stats { grid-column: 1; }
  .over-card > .revive-slot, .over-card > .unlock-slot, .over-card > .col { grid-column: 2; }
  .over-card > .cause { grid-row: 1; } .over-card > h2 { grid-row: 2; font-size: 1.4rem; } .over-card > .final { grid-row: 3; } .over-card > .stats { grid-row: 4; }
  .over-card > .revive-slot { grid-row: 1 / 3; margin: 0; } .over-card > .col { grid-row: 3 / 5; }
  .over-card > .unlock-slot { grid-column: 1; grid-row: 5; } .over-card .unlock { margin: 6px 0 0; padding: 4px 10px; font-size: .9rem; }
  .revive-slot .hint { display: none; }
  .over-card .btn.big { min-height: 48px; font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { .logo-bomb, .badge, .over-card .final.record { animation: none; } }

/* Telegram a pantalla completa: márgenes del sistema + zona de los botones flotantes de Telegram. */
body.tg-full {
  --safe-t: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-b: calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px));
  --safe-l: calc(var(--tg-safe-area-inset-left, 0px) + var(--tg-content-safe-area-inset-left, 0px));
  --safe-r: calc(var(--tg-safe-area-inset-right, 0px) + var(--tg-content-safe-area-inset-right, 0px));
}

/* Navegadores sin color-mix (iOS anterior a 16.2): colores planos equivalentes. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .btn { background: var(--accent); box-shadow: 0 5px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.45); }
  .btn.ghost, .icon-btn, .menu-btn, .best-line, .logo p { background: var(--panel); }
  .screen.modal { background: rgba(0,0,0,.45); }
  .stats div, .seg, .rank-list li:nth-child(odd) { background: rgba(127,127,127,.12); }
  .unlock, .rank-list li.me, .toast.static { background: var(--panel); }
  .toast { background: rgba(0,0,0,.8); color: #fff; }
  .logo h1 { -webkit-text-stroke: 3px #7a3a10; text-shadow: 0 6px 0 #5a2a08; }
  .praise b { -webkit-text-stroke: 2px #7a3a10; }
}

/* Volver al portal FizzPlays */
.home-link { text-decoration: none; width: auto; display: inline-flex; align-items: center; gap: 0; padding: 0 10px 0 4px; color: inherit; }
.home-link .chev { width: 20px; height: 20px; }
.home-link .fizz-logo { width: 30px; height: 30px; }
.home-btn { text-decoration: none; }
.home-btn .fizz-logo { width: 26px; height: 26px; }

/* Pausa: reiniciar, ajustes y menú siempre en una línea */
.pause-row { flex-wrap: nowrap; }
.pause-row .b-restart { flex: 1; min-width: 0; padding-left: .7em; padding-right: .7em; }
.pause-row .btn { padding-left: .8em; padding-right: .8em; }