:root {
  --bg-color: #e0e0dc;
  --text-color: #000000;
  --card-bg: rgba(236, 236, 232, 0.8);        
  --card-border: #cccccc;
  --box-bg: #e5e5e1;         
  --sky-element: #ffcc33;
  --anim-speed: 1.2s;
  --anim-curve: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bg-color: #121212;       
  --text-color: #ffffff;
  --card-bg: rgba(30, 30, 30, 0.8);
  --card-border: #333333;
  --box-bg: #1e1e1e;
  --sky-element: #f0f0f0;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--anim-speed) var(--anim-curve), 
              color 0.8s ease-in-out, 
              border-color 0.8s ease-in-out;
}

body {
  margin: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Courier Prime', 'Courier New', monospace;
  overflow-x: hidden;
}

a { 
  text-decoration: none !important; 
  color: inherit; 
}

.sky-background {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

.celestial-body {
  position: absolute;
  top: 8%; right: 10%; width: 50px; height: 50px;
  border-radius: 50%;
  background-color: var(--sky-element);
  box-shadow: 0 0 30px var(--sky-element);
  transition: all var(--anim-speed) var(--anim-curve);
}

[data-theme="dark"] .celestial-body {
  box-shadow: 12px 12px 0 0 #f0f0f0;
  background-color: transparent;
  transform: rotate(-15deg);
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.main-title {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  font-size: clamp(40px, 8vw, 64px);
  font-weight: 800;
  letter-spacing: -2px;
  margin: 0;
  cursor: pointer;
  user-select: none;
  line-height: 1;
}

#main-g {
  position: relative;
  display: inline-block;
}

.logo-sloth-emoji {
  position: absolute;
  left: -10%;
  top: 65%;
  transform: translateX(60%);
  width: 40px;
  height: 40px;
  transform-origin: top center;
  animation: sloth-swing 3s ease-in-out infinite;
  z-index: 2;
}

@keyframes sloth-swing {
  0%, 100% { transform: rotate(-5deg); }
  50%       { transform: rotate(5deg); }
}

/* sloth en dispositivos tactiles */
@media (hover: none) and (pointer: coarse) {
  .logo-sloth-emoji {
    width: 0.9em;
    height: 0.9em;
    left: 50%;
    top: 60%;
    transform: translateX(-50%);
  }
  @keyframes sloth-swing {
    0%, 100% { transform: translateX(-50%) rotate(-5deg); }
    50%       { transform: translateX(-50%) rotate(5deg); }
  }
}

.subtitle { 
  margin-top: -5px; 
  min-height: 1.5em;
  opacity: 0.8; 
  font-size: clamp(14px, 3.5vw, 18px);
  font-family: 'Courier New', monospace;
}

.grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

/* ── HOVER INTERACCIÓN EN TARJETAS — SELLO DE APROBACIÓN ── */
.item {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  overflow: hidden;
  display: flex; 
  flex-direction: column; 
  height: 100%;
  backdrop-filter: blur(4px);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}

a.item:hover,
a.item:focus {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.13), 0 4px 10px rgba(0,0,0,0.06);
}

/* ── SELLO REALISTA RECTANGULAR — abajo izquierda, no solapa texto ── */
a.item .card-stamp {
  position: absolute;
  top: 15px;
  left: 10px;

  /* Tamaño contenido para no pisar título ni descripción */
  max-width: 42%;

  /* Forma de sello: rectángulo con esquinas levemente redondeadas */
  border-radius: 3px;

  /* Rotación irregular como sello estampado a mano */
  transform: rotate(-11deg) scale(0);
  transform-origin: top left;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity   0.18s ease;

  /* ── Tinta roja envejecida ── */
  --ink: #b01800;

  /* Doble borde: exterior + gap transparente + interior más fino */
  border: 2.5px solid var(--ink);
  box-shadow:
    inset 0 0 0 1.5px var(--ink),          /* borde interior */
    inset 0 0 0 3.5px transparent,          /* gap entre bordes */
    /* sombra de tinta exterior que sangra levemente */
    0.5px 0.5px 0 rgba(176,24,0,0.2),
    -0.3px 0.3px 0 rgba(176,24,0,0.12);

  color: var(--ink);
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
  white-space: pre-line;
  padding: 5px 8px;

  /* Fondo: mancha de tinta muy sutil centrada, como cuando el goma absorbe */
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    rgba(176,24,0,0.06) 0%,
    transparent 75%
  );

  /* La tinta se mezcla con el papel en vez de ser color plano digital */
  mix-blend-mode: multiply;
}

[data-theme="dark"] a.item .card-stamp {
  --ink: #ff4422;
  mix-blend-mode: screen;
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    rgba(255,68,34,0.08) 0%,
    transparent 75%
  );
}

a.item:hover .card-stamp,
a.item:focus .card-stamp {
  transform: rotate(-11deg) scale(1);
  opacity: 0.85;
}

/* ── STAGGERED ENTRANCE ANIMATION ── */
@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.grid .item,
.grid > div {
  opacity: 0;
  animation: card-enter 0.5s ease forwards;
}

.grid > *:nth-child(1)  { animation-delay: 0.05s; }
.grid > *:nth-child(2)  { animation-delay: 0.12s; }
.grid > *:nth-child(3)  { animation-delay: 0.19s; }
.grid > *:nth-child(4)  { animation-delay: 0.26s; }
.grid > *:nth-child(5)  { animation-delay: 0.33s; }
.grid > *:nth-child(6)  { animation-delay: 0.40s; }
.grid > *:nth-child(7)  { animation-delay: 0.47s; }
.grid > *:nth-child(8)  { animation-delay: 0.54s; }
.grid > *:nth-child(9)  { animation-delay: 0.61s; }
.grid > *:nth-child(10) { animation-delay: 0.68s; }
.grid > *:nth-child(11) { animation-delay: 0.75s; }
.grid > *:nth-child(12) { animation-delay: 0.82s; }
.grid > *:nth-child(13) { animation-delay: 0.89s; }
.grid > *:nth-child(14) { animation-delay: 0.96s; }
.grid > *:nth-child(15) { animation-delay: 1.03s; }
.grid > *:nth-child(16) { animation-delay: 1.10s; }
.grid > *:nth-child(17) { animation-delay: 1.17s; }
.grid > *:nth-child(18) { animation-delay: 1.24s; }


.internal-box, .card-image-container {
  height: 250px;
  background: var(--box-bg);
  border-bottom: 1px solid var(--card-border);
  position: relative;
  overflow: hidden;
}

.card-image { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  opacity: 0.9; 
  display: block;
}

.card-content { 
  padding: 18px 15px; 
  text-align: center; 
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  min-height: 105px;
}

.card-main-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-color);
  font-family: 'Space Mono', monospace;
}

.card-description {
  font-size: 13px;
  opacity: 0.65;
  font-style: italic;
  line-height: 1.3;
  color: var(--text-color);
  max-width: 90%;
  font-family: 'Courier Prime', monospace;
}

/* ── CONTADOR TYPEWRITER ── */
.card-counter {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  opacity: 0.25;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  height: 14px;
  margin-top: 6px;
  transition: opacity 0.25s ease;
  pointer-events: none;
  min-width: 60px;
  display: none; /* oculto por defecto */
}

/* ── EASTER EGG: tabla de contadores en el disclaimer ── */
#easter-egg-stats {
  display: none;
  margin-top: 14px;
  border-top: 1px dashed #ccc;
  padding-top: 12px;
}
[data-theme="dark"] #easter-egg-stats { border-color: #38362e; }

#easter-egg-stats-title {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 8px;
  text-align: center;
}

#easter-egg-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 4px 16px;
}

.ee-stat-row {
  display: flex;
  justify-content: space-between;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  opacity: 0.7;
  gap: 8px;
}
.ee-stat-name { opacity: 0.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ee-stat-count { font-weight: 700; white-space: nowrap; }
.item:hover .card-counter,
.item:focus .card-counter {
  opacity: 0.6;
}

/* ============================================
   OSO PEREZOSO - SELVA TROPICAL
   ============================================ */
.card-sloth-nature {
  background: linear-gradient(180deg, 
    #0d3b1e 0%, 
    #1a5c2e 25%, 
    #228b3a 50%, 
    #2d8b47 75%,
    #1e5631 100%
  );
  position: relative;
}

.jungle-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.palm-leaf {
  position: absolute;
  width: 120px;
  height: 35px;
  background: linear-gradient(90deg, #2d5a27, #1e4620);
  border-radius: 100px 0 100px 0;
  opacity: 0.7;
}

.palm-leaf::before,
.palm-leaf::after {
  content: '';
  position: absolute;
  background: linear-gradient(90deg, #3d7a37, #2d5a27);
  border-radius: 100px 0 100px 0;
}

.palm-leaf::before {
  width: 100px; height: 28px;
  top: 20px; left: 15px;
  transform: rotate(25deg);
}

.palm-leaf::after {
  width: 80px; height: 22px;
  top: 35px; left: 30px;
  transform: rotate(50deg);
}

.palm-left {
  top: -20px; left: -40px;
  transform: rotate(-30deg) scaleX(-1);
}

.palm-right {
  top: -10px; right: -40px;
  transform: rotate(20deg);
}

.palm-top {
  top: -30px; left: 30%;
  transform: rotate(5deg);
  opacity: 0.5;
}

.card-sloth-nature .nature-leaves {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.card-sloth-nature .leaf {
  position: absolute;
  font-size: 30px;
  animation: fallLeaf 10s infinite linear;
  opacity: 0.6;
}

.card-sloth-nature .leaf:nth-child(1) { left: 10%; animation-delay: 0s; }
.card-sloth-nature .leaf:nth-child(2) { left: 40%; animation-delay: 3s; }
.card-sloth-nature .leaf:nth-child(3) { left: 70%; animation-delay: 6s; }

@keyframes fallLeaf {
  from { top: -10%; transform: rotate(0deg); }
  to { top: 110%; transform: rotate(360deg); }
}

/* WORK IN PROGRESS CARD */
.card-construction {
  position: relative;
  overflow: hidden;
}

.construction-top {
  height: 250px;
  background: repeating-linear-gradient(
    45deg,
    #ffd700 0px,
    #ffd700 20px,
    #000 20px,
    #000 40px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--card-border);
}

.construction-sign {
  background: #333;
  color: #ffd700;
  padding: 30px;
  border: 4px solid #ffd700;
  transform: rotate(-5deg);
  text-align: center;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.construction-emoji {
  font-size: 48px;
  margin-bottom: 10px;
}

.construction-text {
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.construction-tape {
  position: absolute;
  top: 20%;
  left: -10%;
  right: -10%;
  height: 40px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 215, 0, 0.8) 0px,
    rgba(255, 215, 0, 0.8) 20px,
    transparent 20px,
    transparent 40px
  );
  transform: rotate(-10deg);
}

/* ============================================
   SLOTH - RAMA MEJORADA
   ============================================ */
.sloth-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}

.sloth-actions {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.sloth-scene {
  position: relative;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.branch {
  position: absolute;
  top: 38px;
  left: 0;
  width: 100%;
  height: 25px;
  background: linear-gradient(180deg, 
    #8B5A2B 0%, 
    #6B4423 30%, 
    #5A3818 60%, 
    #3D2610 100%
  );
  box-shadow: 
    0 8px 16px rgba(0,0,0,0.5),
    inset 0 5px 10px rgba(139, 90, 43, 0.4),
    inset 0 -5px 10px rgba(0,0,0,0.5);
  z-index: 2;
}

.branch::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 40px,
    rgba(0,0,0,0.1) 40px,
    rgba(0,0,0,0.1) 42px
  );
}

.branch::after {
  content: '';
  position: absolute;
  top: 8px; left: 15%;
  width: 12px; height: 10px;
  background: radial-gradient(ellipse, #3D2610 30%, transparent 70%);
  border-radius: 50%;
  box-shadow: 
    80px 2px 0 -2px rgba(61, 38, 16, 0.6),
    180px -1px 0 -1px rgba(61, 38, 16, 0.5),
    260px 3px 0 -2px rgba(61, 38, 16, 0.4);
}

.branch-detail {
  position: absolute;
  background: linear-gradient(180deg, #6B4423, #3D2610);
  border-radius: 0 0 4px 4px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.branch-detail:nth-child(1) {
  top: 25px; left: 20%;
  width: 8px; height: 15px;
  transform: rotate(5deg);
}

.branch-detail:nth-child(2) {
  top: 25px; right: 25%;
  width: 6px; height: 12px;
  transform: rotate(-3deg);
}

.sloth-emoji {
  position: absolute;
  font-size: 85px;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  animation: slothHang 3s ease-in-out infinite;
  user-select: none;
  z-index: 3;
}

@keyframes slothHang {
  0%, 100% { transform: translateX(-50%) translateY(0px); }
  50% { transform: translateX(-50%) translateY(6px); }
}

.sloth-container:active .sloth-emoji {
  animation: slothSwing 0.5s ease-in-out;
}

@keyframes slothSwing {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(-10deg); }
  75% { transform: translateX(-50%) rotate(10deg); }
}

.sloth-emoji.eating { animation: eatChew 0.6s ease-in-out !important; }
@keyframes eatChew {
  0%, 100% { transform: translateX(-50%) scale(1); }
  25% { transform: translateX(-50%) scale(1.1); }
  50% { transform: translateX(-50%) scale(0.95); }
  75% { transform: translateX(-50%) scale(1.05); }
}

.sloth-emoji.drinking { animation: drinkSip 0.8s ease-in-out !important; }
@keyframes drinkSip {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

.sloth-emoji.sleeping { animation: sleepBreathe 2s ease-in-out !important; }
@keyframes sleepBreathe {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50% { transform: translateX(-50%) scale(1.05); opacity: 0.9; }
}

.action-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  background: rgba(30, 86, 49, 0.6);
  backdrop-filter: blur(4px);
  font-size: 22px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn:hover {
  transform: scale(1.1);
  background: rgba(46, 139, 87, 0.7);
}

.action-btn:active {
  transform: scale(0.95);
}

.interaction-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 5;
}

.food-item {
  position: absolute;
  font-size: 32px;
  animation: flyToSloth 0.6s ease-in-out forwards;
  pointer-events: none;
}

@keyframes flyToSloth {
  0% {
    transform: translate(var(--start-x), var(--start-y)) scale(0.5);
    opacity: 0;
  }
  50% { opacity: 1; }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
}

.water-drop-anim {
  position: absolute;
  font-size: 28px;
  animation: dropFall 1s ease-in forwards;
  pointer-events: none;
}

@keyframes dropFall {
  0% {
    transform: translate(var(--start-x), var(--start-y)) scale(0.8);
    opacity: 0;
  }
  20% { opacity: 1; }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
}

.zzz-bubble {
  position: absolute;
  font-size: 32px;
  animation: floatUp 2.5s ease-out forwards;
  pointer-events: none;
}

@keyframes floatUp {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0.5);
    opacity: 0;
  }
  20% { opacity: 1; }
  100% {
    transform: translate(var(--drift-x), -80px) rotate(var(--drift-rot)) scale(1);
    opacity: 0;
  }
}

/* ── DISCLAIMER — TICKET / RECIBO ── */
.disclaimer-box {
  max-width: 900px;
  margin: 60px auto 20px;
  position: relative;
}

/* Efecto apilado de papel */
.disclaimer-box::before,
.disclaimer-box::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: var(--bg-color);
  border: 1px solid #ccc;
}
.disclaimer-box::before { transform: rotate(0.8deg) translateY(3px); z-index: 0; }
.disclaimer-box::after  { transform: rotate(-0.5deg) translateY(2px); z-index: 0; }

[data-theme="dark"] .disclaimer-box::before,
[data-theme="dark"] .disclaimer-box::after {
  background: #1a1a1a;
  border-color: #333;
}

.disclaimer-inner {
  background: #fffef7;
  border: 1px solid #d8d4c8;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-shadow: 2px 2px 12px rgba(0,0,0,0.07);
}

[data-theme="dark"] .disclaimer-inner {
  background: #1c1c18;
  border-color: #38362e;
}

/* Borde punteado superior e inferior tipo ticket */
.disclaimer-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 5%; right: 5%;
  height: 0;
  border-top: 2px dashed rgba(0,0,0,0.08);
  pointer-events: none;
}
.disclaimer-inner::after {
  content: '';
  position: absolute;
  bottom: 0; left: 5%; right: 5%;
  height: 0;
  border-bottom: 2px dashed rgba(0,0,0,0.08);
  pointer-events: none;
}

[data-theme="dark"] .disclaimer-inner::before,
[data-theme="dark"] .disclaimer-inner::after {
  border-color: rgba(255,255,255,0.06);
}

/* Layout horizontal único — grid en todas las pantallas */
.disclaimer-ticket-body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0;
  padding: 18px 0;
}

/* Número de ticket — columna izquierda */
.disclaimer-ticket-num {
  padding: 0 20px 0 22px;
  text-align: center;
  border-right: 1px dashed #ccc;
  flex-shrink: 0;
}
[data-theme="dark"] .disclaimer-ticket-num { border-color: #38362e; }

.disclaimer-ticket-num-label {
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.35;
  margin-bottom: 3px;
}
.disclaimer-ticket-num-val {
  font-family: 'Space Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  opacity: 0.18;
  line-height: 1;
  letter-spacing: -1px;
}

/* Texto central */
.disclaimer-ticket-content {
  padding: 0 24px;
}
.disclaimer-ticket-title {
  font-family: 'Space Mono', monospace;
  font-size: clamp(11px, 1.8vw, 14px);
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.disclaimer-ticket-text {
  font-family: 'Courier Prime', monospace;
  font-size: clamp(11px, 1.5vw, 13px);
  line-height: 1.6;
  color: var(--text-color);
  opacity: 0.7;
}
.disclaimer-ticket-text strong {
  font-weight: 700;
  opacity: 1;
  color: var(--text-color);
}

/* Sello — columna derecha */
.disclaimer-ticket-stamp {
  padding: 0 22px 0 20px;
  border-left: 1px dashed #ccc;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="dark"] .disclaimer-ticket-stamp { border-color: #38362e; }

.disclaimer-stamp-circle {
  width: 68px;
  height: 68px;
  border: 2.5px solid #cc2200;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  color: #cc2200;
  letter-spacing: 0.5px;
  transform: rotate(14deg);
  opacity: 0.6;
  text-transform: uppercase;
  line-height: 1.35;
  padding: 4px;
  box-shadow: inset 0 0 0 1.5px rgba(204,34,0,0.15);
  flex-shrink: 0;
}
[data-theme="dark"] .disclaimer-stamp-circle {
  border-color: #ff5533;
  color: #ff5533;
  box-shadow: inset 0 0 0 1.5px rgba(255,85,51,0.15);
}

@keyframes disclaimer-glow { from {} to {} } /* stub */

/* ── TALÓN DE LINKS — continuación del ticket del disclaimer ── */
.disclaimer-perf {
  position: relative;
  height: 0;
  margin: 0 20px;
  border-top: 1.5px dashed rgba(0,0,0,0.15);
}
[data-theme="dark"] .disclaimer-perf { border-top-color: rgba(255,255,255,0.12); }
.disclaimer-perf::before,
.disclaimer-perf::after {
  content: '';
  position: absolute;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-color);
  border: 1px solid #ccc;
}
[data-theme="dark"] .disclaimer-perf::before,
[data-theme="dark"] .disclaimer-perf::after { border-color: #333; }
.disclaimer-perf::before { left: -27px; }
.disclaimer-perf::after  { right: -27px; }

.disclaimer-stub {
  padding: 12px 20px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.disclaimer-stub-label {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  opacity: 0.4;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  white-space: nowrap;
}
.disclaimer-stub-links {
  display: flex;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
  justify-content: center;
}
.disclaimer-stub-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 4px 4px;
  height: 26px;
  border-radius: 8px;
  border: none;
  background: var(--chip-bg);
  color: #ffffff;
  text-decoration: none;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border-bottom: 3px solid var(--chip-shadow);
  transition: transform 0.12s ease, border-bottom-width 0.12s ease, filter 0.2s ease;
}
.disclaimer-stub-chip:hover {
  filter: brightness(1.08);
}
.disclaimer-stub-chip:active {
  transform: translateY(2px);
  border-bottom-width: 1px;
}
.disclaimer-stub-chip .ic-circle {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: rgba(255,255,255,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.disclaimer-stub-chip .ic-circle svg { width: 9px; height: 9px; }

.chip-x         { --chip-bg: #1a1a1a; --chip-shadow: #000000; }
.chip-cafecito  { --chip-bg: #8a5a35; --chip-shadow: #5c3a20; }
.chip-instagram { --chip-bg: #c2337b; --chip-shadow: #8a2054; }

[data-theme="dark"] .chip-x { --chip-bg: #f0f0f0; --chip-shadow: #b3b3b3; color: #000000; }
[data-theme="dark"] .chip-x .ic-circle { background: rgba(0,0,0,0.15); }
[data-theme="dark"] .chip-x .ic-circle svg { stroke: #000000 !important; }

/* ── X — giro completo de 360º al pasar el mouse ── */
.chip-x .ic-circle svg {
  transition: transform 0.6s ease;
}
.chip-x:hover .ic-circle svg {
  transform: rotate(360deg);
}

/* ── Cafecito — larga humito al pasar el mouse ── */
.chip-cafecito .ic-circle {
  position: relative;
  overflow: visible;
}
.chip-cafecito .ic-circle::before,
.chip-cafecito .ic-circle::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  top: -1px;
  opacity: 0;
  pointer-events: none;
}
.chip-cafecito .ic-circle::before { left: 5px; }
.chip-cafecito .ic-circle::after  { left: 10px; animation-delay: 0.35s; }
.chip-cafecito:hover .ic-circle::before,
.chip-cafecito:hover .ic-circle::after {
  animation: steam-rise 1.1s ease-out infinite;
}
@keyframes steam-rise {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  30%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-11px) scale(1.4); }
}

/* ── Instagram — flash de cámara al pasar el mouse ── */
.chip-instagram .ic-circle {
  position: relative;
  overflow: visible;
}
.chip-instagram .ic-circle::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
}
.chip-instagram:hover .ic-circle::after {
  animation: insta-flash 0.5s ease-out;
}
@keyframes insta-flash {
  0%   { opacity: 0; transform: scale(0.4); }
  35%  { opacity: 0.95; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* ── POPUP DE IDEA ENVIADA — mismo espiritu de ticket de papel ── */
.idea-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.idea-popup-overlay.visible {
  display: flex;
  opacity: 1;
}
.idea-popup-card {
  position: relative;
  max-width: 300px;
  width: 100%;
  background: #fffef7;
  border: 1px solid #d8d4c8;
  border-radius: 10px;
  box-shadow: 3px 3px 20px rgba(0,0,0,0.18);
  padding: 26px 22px 22px;
  text-align: center;
  font-family: 'Space Mono', monospace;
  color: #000000;
  transform: scale(0.9) rotate(-1deg);
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1);
}
.idea-popup-overlay.visible .idea-popup-card {
  transform: scale(1) rotate(-1deg);
}
[data-theme="dark"] .idea-popup-card {
  background: #1c1c18;
  border-color: #38362e;
  color: #ffffff;
}
.idea-popup-card::before,
.idea-popup-card::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%;
  height: 0;
  border-top: 2px dashed rgba(0,0,0,0.1);
  pointer-events: none;
}
.idea-popup-card::before { top: 14px; }
.idea-popup-card::after { bottom: 14px; }
[data-theme="dark"] .idea-popup-card::before,
[data-theme="dark"] .idea-popup-card::after {
  border-color: rgba(255,255,255,0.08);
}
.idea-popup-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  cursor: pointer;
  color: inherit;
  opacity: 0.5;
  padding: 4px;
  line-height: 1;
}
.idea-popup-close:hover { opacity: 1; }

.idea-popup-perez {
  width: 54px;
  height: 54px;
  display: block;
  margin: 2px auto 14px;
  animation: perez-hang 3s ease-in-out infinite;
  transform-origin: top center;
  user-select: none;
}

.idea-popup-bubble {
  position: relative;
  background: var(--box-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  margin: 0 0 22px;
}
.idea-popup-bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--box-bg);
  border-right: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}

.idea-popup-sub {
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.45;
  margin: 0 0 6px;
}

.idea-popup-countdown-num {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 10px;
  transition: transform 0.1s ease;
}
.idea-popup-countdown-num.tick {
  animation: idea-countdown-tick 0.3s ease;
}
@keyframes idea-countdown-tick {
  0%   { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.idea-popup-countdown-track {
  width: 100%;
  height: 4px;
  background: var(--card-border);
  border-radius: 4px;
  overflow: hidden;
}
.idea-popup-countdown-bar {
  height: 100%;
  width: 100%;
  background: var(--text-color);
  transform-origin: left;
  transform: scaleX(1);
}
.idea-popup-countdown-bar.run {
  transition: transform 3s linear;
  transform: scaleX(0);
}

.idea-popup-confirm-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 20px;
  border: 2px solid #1e5631;
  background: #2d8b47;
  color: #ffffff;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transform: scale(0.7);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), opacity 0.3s ease, filter 0.15s ease;
}
.idea-popup-confirm-btn.show {
  display: flex;
  transform: scale(1);
  opacity: 1;
}
.idea-popup-confirm-btn:hover {
  filter: brightness(1.1);
  transform: scale(1.04);
}
.idea-popup-confirm-btn:active {
  transform: scale(0.96);
}
[data-theme="dark"] .idea-popup-confirm-btn {
  border-color: #1a5c2e;
  background: #228b3a;
}

@media (max-width: 600px) {
  .disclaimer-stub {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .disclaimer-stub-links { width: 100%; }
}


.footer {
  margin-top: 60px;
  font-size: 16px;
  color: var(--text-color);
  opacity: 0.9;
  padding-bottom: 40px;
  text-align: center;
}

.footer a { font-weight: 700; }

.footer .monster-footer {
  display: inline-block;
  animation: monsterShake 3s ease-in-out infinite;
}

@keyframes monsterShake {
  0%, 93.33%, 100% { transform: translate(0, 0); }
  94.66% { transform: translate(-1px, 0); }
  96% { transform: translate(1px, 0); }
  97.33% { transform: translate(0, -1px); }
  98.66% { transform: translate(0, 1px); }
}

/* ── GLOBO BACK TO TOP ── */
#balloon-btn {
  position: fixed;
  bottom: 32px;
  right: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
#balloon-btn.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.b-balloon {
  font-size: 48px;
  line-height: 1;
  display: block;
  animation: b-float 3.5s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
  transform-origin: bottom center;
}
@keyframes b-float {
  0%   { transform: translateY(0)    rotate(-4deg); }
  30%  { transform: translateY(-10px) rotate(2deg); }
  60%  { transform: translateY(-5px)  rotate(-2deg); }
  100% { transform: translateY(0)    rotate(-4deg); }
}
#balloon-btn:hover .b-balloon {
  animation: b-float-excited 1s ease-in-out infinite;
}
@keyframes b-float-excited {
  0%   { transform: translateY(0)     rotate(-6deg) scale(1.06); }
  50%  { transform: translateY(-14px) rotate(6deg)  scale(1.09); }
  100% { transform: translateY(0)     rotate(-6deg) scale(1.06); }
}
#balloon-btn.flying .b-balloon,
#balloon-btn.flying .b-string { opacity: 0; transition: opacity 0.1s; }
#flying-balloon { position: fixed; font-size: 48px; pointer-events: none; z-index: 9999; line-height: 1; }
.sun-particle { position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); animation: sun-burst 0.7s ease-out forwards; }
@keyframes sun-burst {
  0%   { transform: translate(-50%,-50%) scale(1.2); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); opacity: 0; }
}
.sun-flash { position: fixed; pointer-events: none; z-index: 9998; border-radius: 50%; animation: sun-flash-anim 0.5s ease-out forwards; }
@keyframes sun-flash-anim {
  0%   { transform: translate(-50%,-50%) scale(0);   opacity: 1; }
  40%  { transform: translate(-50%,-50%) scale(2.5); opacity: .9; }
  100% { transform: translate(-50%,-50%) scale(5);   opacity: 0; }
}
.b-string {
  width: 1.5px;
  height: 36px;
  margin-top: -2px;
  background: repeating-linear-gradient(180deg, #999 0px, #999 3px, transparent 3px, transparent 7px);
  border-radius: 1px;
  animation: b-string-sway 3.5s ease-in-out infinite;
}
@keyframes b-string-sway {
  0%   { transform: rotate(-2deg); }
  30%  { transform: rotate(1.5deg); }
  60%  { transform: rotate(-1deg); }
  100% { transform: rotate(-2deg); }
}
#balloon-btn:hover .b-string {
  animation: b-string-sway-fast 1s ease-in-out infinite;
}
@keyframes b-string-sway-fast {
  0%   { transform: rotate(-4deg); }
  50%  { transform: rotate(4deg); }
  100% { transform: rotate(-4deg); }
}
.b-label {
  margin-top: 6px;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
  color: var(--text-color);
}
#balloon-btn:hover .b-label {
  opacity: 0.55;
  transform: translateY(0);
}
.b-clouds {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#balloon-btn:hover .b-clouds { opacity: 1; }
.b-cloud {
  font-size: 11px;
  animation: cloud-drift 2s ease-in-out infinite;
  opacity: 0.4;
}
.b-cloud:nth-child(1) { animation-delay: 0s;   font-size: 10px; }
.b-cloud:nth-child(2) { animation-delay: 0.3s; font-size: 13px; }
.b-cloud:nth-child(3) { animation-delay: 0.6s; font-size: 9px;  }
@keyframes cloud-drift {
  0%,100% { transform: translateX(0) translateY(0); }
  50%      { transform: translateX(3px) translateY(-3px); }
}
.b-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  font-size: 14px;
  animation: particle-burst 0.8s ease-out forwards;
}
@keyframes particle-burst {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

@media (max-width: 600px) {
  #balloon-btn {
    bottom: 20px;
    right: 16px;
  }
  .b-label { display: none; }
  .b-balloon { font-size: 38px; }
}

.celestial-body {
  cursor: pointer;
  pointer-events: all;
  z-index: 2;
}

/* ── STICKY NOTE — "En la lista" ── */
.wip-sticky-top {
  height: 250px;
  background: #e8e4dc;
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .wip-sticky-top {
  background: #1e1e1e;
}
.wip-sticky-top .sticky {
  background: #ffd700;
  width: 230px;
  min-height: 190px;
  padding: 20px;
  transform: rotate(3deg);
  box-shadow: 3px 4px 8px rgba(0,0,0,0.15), -1px -1px 0 rgba(0,0,0,0.05);
  position: relative;
  z-index: 2;
}
.wip-sticky-top .sticky::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 50px; height: 7px;
  background: rgba(255,255,255,0.5);
}
.wip-sticky-top .sticky-text {
  font-family: 'Courier Prime', monospace;
  font-size: 20px; color: #333; line-height: 1.5;
  font-weight: 700;
  margin-bottom: 4px;
}
.wip-sticky-top .sticky-check {
  display: flex; align-items: center;
  gap: 6px; margin-top: 8px;
}
.wip-sticky-top .sticky-box {
  width: 16px; height: 16px;
  border: 1.5px solid #555;
  border-radius: 2px; flex-shrink: 0;
}
.wip-sticky-top .sticky-box-done { background: #555; }
.wip-sticky-top .sticky-item {
  font-size: 17px; color: #444;
  font-family: 'Courier Prime', monospace;
}
.wip-sticky-top .done {
  text-decoration: line-through; opacity: 0.5;
}

.perez-total-counter {
  font-family: 'Space Mono', monospace;
  font-size: 7px;
  letter-spacing: 0.5px;
  opacity: 0;
  color: var(--text-color);
  text-align: center;
  white-space: nowrap;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.4s ease, margin 0.4s ease;
  margin-top: 0;
  pointer-events: none;
}
.perez-total-counter.visible {
  opacity: 0.4;
  max-height: 20px;
  margin-top: 3px;
}

/* ── PÉREZ MASCOTA DEL DISCLAIMER ── */
.perez-mascot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  position: relative;
  padding: 4px 2px;
}

.perez-mascot-emoji {
  width: 36px;
  height: 36px;
  line-height: 1;
  display: block;
  animation: perez-hang 3s ease-in-out infinite;
  transform-origin: top center;
  transition: transform 0.2s;
  user-select: none;
}
@keyframes perez-hang {
  0%,100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg) translateY(-2px); }
}
.perez-mascot-wrap:hover .perez-mascot-emoji {
  animation: perez-hang-excited 0.5s ease-in-out infinite;
}
@keyframes perez-hang-excited {
  0%,100% { transform: rotate(-8deg) scale(1.1); }
  50%      { transform: rotate(8deg) scale(1.12); }
}

.perez-mascot-line {
  width: 42px;
  height: 1px;
  background: var(--text-color);
  opacity: 0.15;
}

.perez-mascot-label {
  font-family: 'Space Mono', monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.5px;
  opacity: 0.35;
  text-align: center;
}

.perez-mascot-actions {
  display: flex;
  gap: 3px;
  margin-top: 2px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.perez-mascot-wrap:hover .perez-mascot-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.perez-action-btn {
  width: 24px; height: 24px;
  background: var(--box-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, background 0.15s;
  padding: 0;
}
.perez-action-btn:hover {
  transform: scale(1.2);
  background: var(--bg-color);
}

.perez-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: var(--box-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px 8px 0 8px;
  padding: 5px 9px;
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform: translateY(4px) scale(0.95);
  z-index: 20;
}
@keyframes perez-pop {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, calc(-50% - 55px)) scale(0); opacity: 0; }
}

/* Ajustes para el ticket del disclaimer en móviles */
@media (max-width: 600px) {
  .disclaimer-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "content   content"
      "stublinks stamp";
    align-items: center;
    row-gap: 18px;
    column-gap: 14px;
    padding: 8px 20px 14px;
  }

  /* El N° de ticket desaparece en mobile */
  .disclaimer-ticket-num {
    display: none;
  }

  /* Convertimos los contenedores intermedios en "invisibles" para el grid,
     así sus hijos se acomodan directo en las áreas de arriba */
  .disclaimer-ticket-body {
    display: contents;
  }

  .disclaimer-perf {
    display: none;
  }

  .disclaimer-stub {
    display: contents;
  }

  .disclaimer-ticket-content {
    grid-area: content;
    padding: 0 6px;
    text-align: center;
  }

  .disclaimer-ticket-title {
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
  }

  .disclaimer-ticket-text {
    text-align: center;
  }

  .disclaimer-ticket-stamp {
    grid-area: stamp;
    border-left: none;
    padding: 0 6px 0 0;
    justify-self: end;
  }

  .disclaimer-stamp-circle {
    width: 55px;     /* Achicamos un poquito el sello para que no empuje */
    height: 55px;
    font-size: 7px;
  }

  /* Sacamos la etiqueta "TALÓN VÁLIDO PARA" para dejar solo las pills */
  .disclaimer-stub-label {
    display: none;
  }

  .disclaimer-stub-links {
    grid-area: stublinks;
    justify-self: center;
    justify-content: center;
    padding-left: 0;
    width: 100%;
  }

  /* Si se activa el easter egg, que ocupe todo el ancho debajo */
  #easter-egg-stats {
    grid-column: 1 / -1;
  }
}

/* ── TOAST: globo de diálogo con "alguien de tal ciudad jugó a tal juego" ──
   DESACTIVADO: quedó redundante con el ticker de arriba (misma info, dos lugares).
   Se deja comentado por si en el futuro se quiere reusar para otro tipo de aviso
   (logros, hitos, etc.) en vez de borrarlo.
#activity-toast {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9998;
  max-width: 290px;
  background: var(--card-bg, #fffef7);
  color: var(--text-color);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  padding: 10px 14px;
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
#activity-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
#activity-toast::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: var(--card-bg, #fffef7);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transform: rotate(45deg);
}
#activity-toast b {
  font-weight: 700;
}
[data-theme="dark"] #activity-toast {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] #activity-toast::after {
  border-color: rgba(255, 255, 255, 0.12);
}
@media (max-width: 480px) {
  #activity-toast {
    left: 10px;
    right: 10px;
    max-width: none;
    bottom: 10px;
  }
}
── FIN TOAST DESACTIVADO ── */


/* ── MARQUESINA: franja fija arriba con usuarios online (ticker) ── */
#marquee-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--card-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--card-border);
  padding: 7px 0;
  font-size: 12px;
  font-family: 'Courier Prime', 'Courier New', monospace;
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  cursor: pointer;
}
#marquee-bar .marquee-fixed {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 16px 0 14px;
  font-weight: 700;
  transition: padding 0.4s ease, border-color 0.4s ease;
  border-right: 1px solid var(--card-border);
  margin-right: 2px;
}
#marquee-bar.collapsed .marquee-fixed {
  border-right-color: transparent;
  padding-right: 0;
  margin-right: 0;
}
#marquee-bar .marquee-scroll-area {
  overflow: hidden;
  white-space: nowrap;
  padding-left: 16px;
  position: relative;
  height: 1.4em;
  width: 340px;
  flex-shrink: 0;
  transition: width 0.5s ease, opacity 0.4s ease, padding-left 0.5s ease;
  opacity: 1;
}
#marquee-bar.collapsed .marquee-scroll-area {
  width: 0;
  opacity: 0;
  padding-left: 0;
}
#marquee-bar .marquee-frase {
  position: absolute;
  left: 16px;
  right: 0;
  top: 50%;
  opacity: 0;
  transform: translateY(calc(-50% + 4px));
  transition: opacity 0.5s ease, transform 0.5s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: normal;
}
#marquee-bar .marquee-frase.visible {
  opacity: 1;
  transform: translateY(-50%);
}
#marquee-bar .marquee-frase .marquee-text {
  display: inline-block;
  white-space: nowrap;
}
/* Cuando el texto no entra en el ancho disponible, se activa el efecto marquesina (scroll horizontal continuo) */
#marquee-bar .marquee-frase.scrolling {
  text-overflow: clip;
}
#marquee-bar .marquee-frase.scrolling .marquee-text {
  padding-right: 48px;
  animation-name: marquee-slide-x;
  animation-timing-function: linear;
  animation-duration: var(--marquee-dur, 10s);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes marquee-slide-x {
  0%   { transform: translateX(0); }
  12%  { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
#marquee-bar .m-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2d8a3e;
  margin-right: 7px;
  animation: marquee-pulse 1.8s infinite;
  flex-shrink: 0;
}
@keyframes marquee-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
#marquee-bar b {
  font-weight: 700;
}
[data-theme="dark"] #marquee-bar {
  border-color: rgba(255, 255, 255, 0.12);
}

/* Empuja el body para que la marquesina no tape el contenido */
body {
  padding-top: 32px;
}

/* Responsive: mobile (celulares chicos) */
@media (max-width: 480px) {
  #marquee-bar {
    font-size: 11px;
    padding: 6px 0;
  }
  #marquee-bar .marquee-fixed {
    padding: 0 10px 0 10px;
    font-size: 11px;
  }
  #marquee-bar .marquee-scroll-area {
    padding-left: 10px;
    width: 180px;
  }
  #marquee-bar .marquee-frase {
    left: 10px;
  }
  #marquee-bar .m-dot {
    width: 5px;
    height: 5px;
    margin-right: 5px;
  }
  body {
    padding-top: 28px;
  }
}

/* Responsive: tablets */
@media (min-width: 481px) and (max-width: 900px) {
  #marquee-bar {
    font-size: 11.5px;
  }
  #marquee-bar .marquee-scroll-area {
    width: 280px;
  }
}