/* Kirava · barra superior: buscador, bolita de mundo y menú de cuenta */

@layer components {

/* --- El buscador en la barra --------------------------------------------
   Se lleva todo el espacio libre porque es lo principal de la web. Si la caja
   viviera en el cuerpo de una página, dejaría de estar disponible en cuanto
   navegas a otra cosa — y eso es justo al revés de lo que hace falta. */

.topsearch {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 620px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-2) 0 var(--sp-3);
  height: 40px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.topsearch:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-wash);
}

.ts-icon { display: grid; place-items: center; color: var(--ink-3); flex: none; }
.topsearch:focus-within .ts-icon { color: var(--primary-ink); }

.topsearch input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-size: .95rem;
  color: var(--ink);
}
.topsearch input::placeholder { color: var(--ink-3); }
/* La X nativa de Chrome duplica nuestro botón de borrar. */
.topsearch input::-webkit-search-cancel-button { display: none; }

.ts-clear {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink-3);
  font-size: .72rem;
  transition: background var(--dur-fast), color var(--dur-fast), opacity var(--dur-fast);
}
.ts-clear:hover { background: var(--surface-3); color: var(--ink); }
.ts-clear.is-off { opacity: 0; pointer-events: none; }

.ts-hint { flex: none; opacity: .7; }
.topsearch:focus-within .ts-hint { opacity: 0; }

/* Mismo degradado de marca que el botón principal, y por lo mismo el texto va
   oscuro: sobre el amarillo del logotipo el blanco no se lee. Ver
   `--brand-gradient` en tokens.css. */
.ts-go {
  flex: none;
  padding: var(--sp-1) var(--sp-4);
  border-radius: 8px;
  background: var(--brand-gradient);
  color: var(--ink);
  font-size: .84rem;
  font-weight: 650;
}
/* Con JS la búsqueda es instantánea y el botón sobra; sin JS es imprescindible,
   así que se oculta desde aquí y no desde el HTML. */
:root[data-js="on"] .ts-go { display: none; }

/* --- Bolita de mundo ------------------------------------------------------
   El idioma actual va DENTRO del globo: se lee de un vistazo sin desplegar
   nada, y al pulsar salen todos los idiomas en los que está la web. */

.globe {
  position: relative;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary-ink);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.globe:hover,
.globe[aria-expanded="true"] { border-color: var(--primary); background: var(--primary-wash); }

.globe-ring { position: absolute; inset: 3px; width: auto; height: auto; opacity: .3; }
.globe-code {
  position: relative;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .01em;
  font-family: var(--font-num);
}

/* --- Cuenta ---------------------------------------------------------------
   Sin avatar subido: la inicial sobre un color estable derivado del usuario.
   Se reconoce igual, no hay que subir nada y no abre la superficie de ataque
   que trae aceptar ficheros. */

.avatar-btn { border-radius: 50%; display: grid; place-items: center; }
.avatar {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  box-shadow: var(--shadow-1);
}
.avatar[data-seed="0"], .avatar[data-seed="1"], .avatar[data-seed="2"] { background: #5f9fa8; }
.avatar[data-seed="3"], .avatar[data-seed="4"], .avatar[data-seed="5"] { background: #e08533; }
.avatar[data-seed="6"], .avatar[data-seed="7"], .avatar[data-seed="8"] { background: #8aa35a; }
.avatar[data-seed="9"], .avatar[data-seed="a"], .avatar[data-seed="b"] { background: #9b5fc0; }
.avatar[data-seed="c"], .avatar[data-seed="d"] { background: #d2568f; }
.avatar[data-seed="e"], .avatar[data-seed="f"] { background: #3a8fd0; }
.avatar-lg { width: 42px; height: 42px; font-size: 1.05rem; }

/* --- Desplegables ---------------------------------------------------------
   Uno solo abierto a la vez, se cierran con Escape y al clicar fuera. */

.menu { position: relative; }

.menu-pop {
  position: absolute;
  top: calc(100% + var(--sp-2));
  min-width: 190px;
  padding: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  box-shadow: var(--shadow-3);
  z-index: 40;
  animation: pop var(--dur-fast) var(--ease-out);
}
.menu-pop-end { inset-inline-end: 0; }
.menu-pop-wide { min-width: 232px; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) } }

.menu-h {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: 9px;
  font-size: .88rem;
  color: var(--ink);
  text-align: start;
  transition: background var(--dur-fast);
}
.menu-item:hover { background: var(--surface-3); }
.menu-item.is-on { background: var(--primary-wash); color: var(--primary-ink); font-weight: 600; }
.menu-item-quiet { color: var(--ink-3); }
.menu-item-admin { color: var(--secondary-ink); font-weight: 600; }
.menu-form { margin-top: var(--sp-1); padding-top: var(--sp-1); border-top: 1px solid var(--line-soft); }

.mi-code {
  font-family: var(--font-num);
  font-size: .68rem;
  font-weight: 700;
  color: var(--ink-3);
  min-width: 1.7em;
}
.menu-item.is-on .mi-code { color: var(--primary-ink); }
.mi-name { flex: 1; }
.mi-tick { color: var(--primary-ink); }

.menu-me {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  margin-bottom: var(--sp-1);
  border-bottom: 1px solid var(--line-soft);
}
.menu-me-text { display: grid; gap: 1px; min-width: 0; }
.menu-me-text strong { font-size: .9rem; }
.menu-me-text span { font-size: .76rem; color: var(--ink-3); font-family: var(--font-num); }

.btn-sm { padding: var(--sp-2) var(--sp-4); font-size: .84rem; border-radius: 9px; }

/* --- Producto sellado en la rejilla de resultados -------------------------
   No hay imagen de catálogo del sellado, así que en vez de un hueco gris se le
   da identidad propia: se distingue de una carta de un vistazo, que es justo
   lo que hace falta cuando van mezclados. */

.sealed-tile {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sp-2);
  aspect-ratio: var(--card-ratio);
  padding: var(--sp-3);
  text-align: center;
  border-radius: 7px;
  background: linear-gradient(158deg, var(--surface), var(--surface-3));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.hit-sealed:hover .sealed-tile { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-3); }

.st-icon {
  width: 34%;
  aspect-ratio: 1;
  border-radius: 6px;
  background: currentColor;
  opacity: .16;
  color: var(--ink);
}
.sealed-tile[data-kind="booster_box"] { border-color: color-mix(in oklab, var(--secondary) 45%, var(--line)); }
.sealed-tile[data-kind="booster_box"] .st-icon { color: var(--secondary); opacity: .4; }
.sealed-tile[data-kind="etb"]         { border-color: color-mix(in oklab, var(--primary) 45%, var(--line)); }
.sealed-tile[data-kind="etb"] .st-icon { color: var(--primary); opacity: .45; }
.sealed-tile[data-kind="deck"] .st-icon { color: var(--accent); opacity: .5; }
.sealed-tile[data-kind="tin"] .st-icon { color: #9b5fc0; opacity: .35; }
.sealed-tile[data-kind="blister"] .st-icon { color: #d2568f; opacity: .35; }

.st-kind {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-2);
  line-height: 1.2;
}
.st-packs { font-size: .68rem; color: var(--ink-3); font-family: var(--font-num); }

/* --- Móvil ---------------------------------------------------------------
   El buscador se lleva la segunda fila entera: en un móvil es lo único de la
   barra que de verdad importa. */

@media (max-width: 720px) {
  .top { flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
  .top-right { gap: var(--sp-2); }
  .topsearch { order: 3; flex-basis: 100%; max-width: none; }
  .ts-hint { display: none; }

  /* El nombre se queda. Antes se ocultaba para ganar sitio, pero el buscador ya
     se lleva su propia fila, así que el sitio no hacía falta — y una marca
     reducida a un icono sin nombre no se reconoce ni se recuerda. Cabe de
     sobra: se encoge un punto y basta. */
  .brand-name { font-size: .95rem; }
}

/* Muy estrecho: ahí sí puede apretar, pero el nombre sigue estando. */
@media (max-width: 380px) {
  .brand-name { font-size: .88rem; }
}

}