:root {
  --bg: #0d0d12;
  --bg-panel: #17171f;
  --bg-panel-2: #1e1e28;
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.18);
  --text-main: #f4f3f7;
  --text-dim: #94919f;
  --ink: #121116;

  --c-rara: #7ed9a3;
  --c-superrara: #4db8ff;
  --c-epica: #b083ff;
  --c-mitica: #ff6fc4;
  --c-legendaria: #ffb43f;
  --c-ultralegendaria: #ff4d4d;

  --radius: 14px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

/* El atributo/propiedad `hidden` debe ganar siempre a cualquier `display`
   declarado en una clase (p. ej. los overlays usan `display: flex`), ya que
   por cascada CSS una regla de autor con la misma especificidad que la hoja
   de estilos del user-agent (`[hidden] { display: none }`) puede perder si
   no se refuerza. Sin esto, los overlays con `hidden` seguían renderizándose
   a pantalla completa y bloqueaban todos los clics de la app. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(255,255,255,0.05), transparent 60%),
    var(--bg);
  color: var(--text-main);
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  touch-action: manipulation;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  padding-bottom: var(--safe-bottom);
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  margin: 0 0 8px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Header */
.app-header {
  padding: calc(14px + var(--safe-top)) 16px 12px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(13, 13, 18, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-icon { display: block; border-radius: 8px; }
h1 {
  font-size: 1.25rem;
  color: var(--text-main);
  line-height: 1.15;
  font-weight: 700;
}
.subtitle {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.currency-bar {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.currency-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.cur-icon {
  display: inline-flex;
  color: var(--text-dim);
  flex-shrink: 0;
}
.cur-icon svg { display: block; width: 15px; height: 15px; }
#fichas-pill { border-color: var(--border-strong); }
#fichas-pill .cur-icon { color: var(--text-main); }
#fichas-pill.pulse { animation: pillPulse .5s ease; }
@keyframes pillPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: 48px;
}

.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}

.ticket-info p { margin: 0 0 12px; color: var(--text-dim); font-size: 0.9rem; }
.ticket-info strong { color: var(--text-main); }

.how-list {
  margin: 0;
  padding-left: 1.2em;
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.65;
}
.how-list li + li { margin-top: 6px; }
.how-list strong { color: var(--text-main); }

/* Buttons */
.btn {
  border: none;
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 700;
  font-family: 'Baloo 2', sans-serif;
  font-size: 0.95rem;
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .12s ease, opacity .12s ease, background-color .12s ease;
}
.btn:active { transform: scale(0.96); }
.btn:focus-visible {
  outline: 2px solid var(--text-main);
  outline-offset: 2px;
}
.btn-primary {
  background: var(--text-main);
  color: var(--ink);
}
.btn-secondary {
  background: transparent;
  color: var(--text-main);
  border: 1px solid var(--border-strong);
  width: 100%;
}
.btn-secondary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-danger {
  background: transparent;
  color: #ff8484;
  border: 1px solid rgba(255,132,132,0.4);
  width: 100%;
  margin-top: 14px;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}
.tab-btn {
  flex: 1 0 auto;
  min-height: 44px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-weight: 700;
  font-family: 'Baloo 2', sans-serif;
  font-size: 0.88rem;
  padding: 10px 12px;
  cursor: pointer;
  touch-action: manipulation;
  transform: translateY(1px);
}
.tab-btn:focus-visible {
  outline: 2px solid var(--text-main);
  outline-offset: -2px;
}
.tab-btn.active {
  color: var(--text-main);
  border-bottom-color: var(--text-main);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.pity-note { color: var(--text-dim); font-size: 0.88rem; margin: 0 0 12px; }
.pity-note strong { color: var(--text-main); }

/* Drop grid */
.drop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (min-width: 480px) {
  .drop-grid { grid-template-columns: repeat(2, 1fr); }
}

.drop-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}
.drop-orb-preview {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  animation: floatOrb 3s ease-in-out infinite;
}
@keyframes floatOrb {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.drop-star-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
.drop-star-emoji {
  position: relative;
  z-index: 1;
  font-size: 1.3rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.drop-card[data-tier="normal"] .drop-star-svg { fill: url(#grad-normal); }
.drop-card[data-tier="grande"] .drop-star-svg { fill: url(#grad-grande); }
.drop-card[data-tier="mega"] .drop-star-svg { fill: url(#grad-mega); }
.drop-card[data-tier="especial"] .drop-star-svg { fill: url(#grad-especial); }

.drop-name { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1rem; }
.drop-odds { font-size: 0.72rem; color: var(--text-dim); line-height: 1.4; }
.drop-cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text-main);
}
.drop-cost svg { width: 13px; height: 13px; }
.drop-open-btn {
  width: 100%;
  margin-top: 4px;
}

/* Collection */
.collection-summary { color: var(--text-dim); font-size: 0.88rem; }
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.char-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
}
.char-card.locked { opacity: 0.5; }
.char-card .char-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: var(--bg-panel-2);
}
.char-card.locked .char-icon {
  background: var(--bg-panel-2);
  filter: grayscale(1) brightness(0.4);
}
.char-card .char-name { font-weight: 700; font-size: 0.82rem; margin-bottom: 2px; }
.char-card.locked .char-name { color: var(--text-dim); }
.char-card .char-type { font-size: 0.68rem; color: var(--text-dim); }
.rarity-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rarity-rara { background: rgba(126,217,163,0.14); color: var(--c-rara); }
.rarity-superrara { background: rgba(77,184,255,0.14); color: var(--c-superrara); }
.rarity-epica { background: rgba(176,131,255,0.14); color: var(--c-epica); }
.rarity-mitica { background: rgba(255,111,196,0.14); color: var(--c-mitica); }
.rarity-legendaria { background: rgba(255,180,63,0.16); color: var(--c-legendaria); }
.rarity-ultralegendaria { background: rgba(255,77,77,0.16); color: var(--c-ultralegendaria); }

.char-ability {
  margin-top: 6px;
  font-size: 0.66rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.char-skins {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 0.68rem;
  color: var(--text-dim);
}
.skin-chip {
  display: inline-block;
  background: var(--bg-panel-2);
  border-radius: 8px;
  padding: 2px 6px;
  margin: 2px;
}

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.stat-box {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
}
.stat-value {
  display: block;
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.4rem;
  color: var(--text-main);
}
.stat-label { font-size: 0.72rem; color: var(--text-dim); }
.history-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  font-size: 0.85rem;
  max-height: 220px;
  overflow-y: auto;
}
.history-list li {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.history-entry {
  display: flex;
  align-items: center;
}
.history-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Opening overlay */
.open-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(6,6,9,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.open-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.open-orb {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  animation: orbIdle 1.6s ease-in-out infinite;

  /* Intensidad de la grieta/apertura por defecto (rareza baja).
     data-fx la sobreescribe con valores mayores para rarezas altas. */
  --charge-scale: 1.07;
  --charge-bright: 1.3;
  --shake-amp: 3deg;
  --split-dist: 28px;
  --split-lift: 9px;
  --split-rot: 22deg;
  --crack-glow: 6px;
  --rarity-glow: #fff2c0;
}
.open-orb[data-fx="mid"] {
  --charge-scale: 1.1; --charge-bright: 1.55; --shake-amp: 5deg;
  --split-dist: 36px; --split-lift: 13px; --split-rot: 30deg; --crack-glow: 9px;
}
.open-orb[data-fx="high"] {
  --charge-scale: 1.13; --charge-bright: 1.8; --shake-amp: 7deg;
  --split-dist: 44px; --split-lift: 16px; --split-rot: 37deg; --crack-glow: 13px;
}
.open-orb[data-fx="max"] {
  --charge-scale: 1.17; --charge-bright: 2.1; --shake-amp: 10deg;
  --split-dist: 54px; --split-lift: 20px; --split-rot: 48deg; --crack-glow: 18px;
}
@keyframes orbIdle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.05) rotate(3deg); }
}
.open-orb.spinning {
  animation: orbCharge 1s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes orbCharge {
  0% { transform: scale(1) rotate(0deg); filter: brightness(1); }
  28% { transform: scale(var(--charge-scale)) rotate(0deg); filter: brightness(var(--charge-bright)); }
  38% { transform: scale(var(--charge-scale)) rotate(calc(var(--shake-amp) * -1)); }
  46% { transform: scale(var(--charge-scale)) rotate(var(--shake-amp)); }
  54% { transform: scale(var(--charge-scale)) rotate(calc(var(--shake-amp) * -0.6)); filter: brightness(var(--charge-bright)); }
  62%, 100% { transform: scale(calc(var(--charge-scale) + 0.03)) rotate(0deg); filter: brightness(calc(var(--charge-bright) + 0.35)); }
}

/* Las dos mitades de la estrella: la misma forma duplicada, cada una recortada
   (clip-path) con un borde en zigzag que coincide con la grieta central, de
   modo que en reposo se superponen a la perfección y parecen una única
   estrella sólida. Al abrir, cada mitad se traslada y rota hacia un lado. */
.star-piece {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
}
.star-piece-left {
  clip-path: polygon(0% 0%, 50% 0%, 44% 20%, 57% 32%, 43% 46%, 58% 58%, 44% 72%, 56% 86%, 50% 98%, 50% 100%, 0% 100%);
}
.star-piece-right {
  clip-path: polygon(100% 0%, 50% 0%, 44% 20%, 57% 32%, 43% 46%, 58% 58%, 44% 72%, 56% 86%, 50% 98%, 50% 100%, 100% 100%);
}
.open-orb[data-tier="normal"] .star-piece { fill: url(#grad-normal); }
.open-orb[data-tier="grande"] .star-piece { fill: url(#grad-grande); }
.open-orb[data-tier="mega"] .star-piece { fill: url(#grad-mega); }
.open-orb[data-tier="especial"] .star-piece { fill: url(#grad-especial); }

.open-orb.spinning .star-piece-left { animation: starPieceLeft 1s cubic-bezier(.4,0,.2,1) forwards; }
.open-orb.spinning .star-piece-right { animation: starPieceRight 1s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes starPieceLeft {
  0%, 56% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(calc(var(--split-dist) * -1), calc(var(--split-lift) * -1)) rotate(calc(var(--split-rot) * -1)) scale(0.9); opacity: 0; }
}
@keyframes starPieceRight {
  0%, 56% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--split-dist), var(--split-lift)) rotate(var(--split-rot)) scale(0.9); opacity: 0; }
}

/* Líneas de grieta: la principal siempre se dibuja; las ramas extra solo
   aparecen según el nivel de rareza (data-fx), para un efecto de fractura
   más dramático en Mítica/Legendaria/Ultra Legendaria. */
.star-cracks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.star-cracks .crack {
  fill: none;
  stroke: var(--rarity-glow, #fff);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}
.open-orb.spinning .crack-main { animation: crackDraw 1s ease-out forwards; }
.open-orb.spinning[data-fx="mid"] .crack-b1,
.open-orb.spinning[data-fx="high"] .crack-b1,
.open-orb.spinning[data-fx="max"] .crack-b1 { animation: crackDraw 1s ease-out 0.04s forwards; }
.open-orb.spinning[data-fx="high"] .crack-b2,
.open-orb.spinning[data-fx="max"] .crack-b2 { animation: crackDraw 1s ease-out 0.07s forwards; }
.open-orb.spinning[data-fx="max"] .crack-b3 { animation: crackDraw 1s ease-out 0.1s forwards; }
@keyframes crackDraw {
  0% { stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 0 transparent); }
  18% { opacity: 1; }
  46% { stroke-dashoffset: 0; filter: drop-shadow(0 0 calc(var(--crack-glow) * 0.5) var(--rarity-glow, #fff)); }
  56% { filter: drop-shadow(0 0 var(--crack-glow) var(--rarity-glow, #fff)); opacity: 1; }
  72% { opacity: 0.5; }
  100% { opacity: 0; }
}

/* Destello radial en el instante de la ruptura, en el color de la rareza
   obtenida, que acompaña la separación de las dos mitades. */
.star-flash {
  position: absolute;
  inset: -35%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rarity-glow, #fff) 0%, transparent 68%);
  opacity: 0;
  pointer-events: none;
}
.open-orb.spinning .star-flash { animation: starFlashPop 1s ease-out forwards; }
@keyframes starFlashPop {
  0%, 52% { opacity: 0; transform: scale(0.3); }
  60% { opacity: 0.9; transform: scale(1); }
  78% { opacity: 0.35; transform: scale(1.7); }
  100% { opacity: 0; transform: scale(2.3); }
}

#open-orb-icon {
  position: relative;
  z-index: 2;
  font-size: 2.1rem;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.open-orb.spinning #open-orb-icon { animation: fadeOutIcon 0.4s ease-out 0.5s forwards; }
@keyframes fadeOutIcon {
  to { opacity: 0; transform: scale(1.3); }
}

.open-hint { color: var(--text-dim); font-size: 0.9rem; }

/* Particles */
#particle-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  overflow: hidden;
}
.particle {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
  animation: particleBurst 0.9s ease-out forwards;
}
@keyframes particleBurst {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

#shake-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 55;
  background: white;
  opacity: 0;
}
#shake-flash.flash { animation: flashPop 0.35s ease-out; }
@keyframes flashPop {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}
body.shaking { animation: shakeBody 0.4s ease-in-out; }
@keyframes shakeBody {
  0%, 100% { transform: translate(0,0); }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -4px); }
  60% { transform: translate(-4px, 4px); }
  80% { transform: translate(4px, -2px); }
}

/* Reveal overlay */
.reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 61;
  background: rgba(6,6,9,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.reveal-card {
  background: var(--bg-panel);
  border: 2px solid var(--border-strong);
  border-radius: 20px;
  padding: 28px 22px;
  text-align: center;
  max-width: 320px;
  width: 100%;
  animation: revealPop 0.45s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes revealPop {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.reveal-card.rarity-rara-card { box-shadow: 0 0 30px rgba(126,217,163,0.4); border-color: var(--c-rara); }
.reveal-card.rarity-superrara-card { box-shadow: 0 0 34px rgba(77,184,255,0.45); border-color: var(--c-superrara); }
.reveal-card.rarity-epica-card { box-shadow: 0 0 38px rgba(176,131,255,0.5); border-color: var(--c-epica); }
.reveal-card.rarity-mitica-card { box-shadow: 0 0 46px rgba(255,111,196,0.6); border-color: var(--c-mitica); animation: revealPop 0.45s cubic-bezier(.2,1.4,.4,1) both, pulseGlowM 1.4s ease-in-out infinite 0.45s; }
.reveal-card.rarity-legendaria-card { box-shadow: 0 0 60px rgba(255,180,63,0.75); border-color: var(--c-legendaria); animation: revealPop 0.45s cubic-bezier(.2,1.4,.4,1) both, pulseGlowL 1.2s ease-in-out infinite 0.45s; }
.reveal-card.rarity-ultralegendaria-card { box-shadow: 0 0 70px rgba(255,77,77,0.8); border-color: var(--c-ultralegendaria); animation: revealPop 0.45s cubic-bezier(.2,1.4,.4,1) both, pulseGlowU 1.05s ease-in-out infinite 0.45s; }
@keyframes pulseGlowM {
  0%, 100% { box-shadow: 0 0 30px rgba(255,111,196,0.45); }
  50% { box-shadow: 0 0 55px rgba(255,111,196,0.8); }
}
@keyframes pulseGlowL {
  0%, 100% { box-shadow: 0 0 40px rgba(255,180,63,0.55); }
  50% { box-shadow: 0 0 80px rgba(255,180,63,0.95); }
}
@keyframes pulseGlowU {
  0%, 100% { box-shadow: 0 0 45px rgba(255,77,77,0.6); }
  50% { box-shadow: 0 0 95px rgba(255,77,77,1); }
}

.reveal-rarity {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  margin: 0 0 10px;
}
.reveal-icon {
  font-size: 3.6rem;
  margin-bottom: 10px;
}
#reveal-name { font-size: 1.3rem; margin-bottom: 6px; }
.reveal-desc { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 10px; }
.reveal-new {
  background: var(--text-main);
  color: var(--ink);
  font-weight: 800;
  border-radius: 999px;
  padding: 6px 14px;
  display: inline-block;
  margin-bottom: 14px;
  font-size: 0.82rem;
  animation: newPulse 1s ease-in-out infinite;
}
@keyframes newPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.app-footer {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.78rem;
  padding: 20px 16px calc(24px + var(--safe-bottom));
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.footer-small { font-size: 0.7rem; opacity: 0.75; margin-top: 6px; }

@media (max-width: 340px) {
  .drop-grid { grid-template-columns: 1fr; }
}