/* web bbclub · "Bilbo Hustlers 2004"
   Diseño y desarrollo: Unai de León, 2026. Basado en docs/styleguide/styleguide.css.
   Reglas: 960 px fijo, cajas-ventana con barra gel, sombras duras, Verdana 11/12 px,
   Silkscreen 16 px en barras, Anton en titulares, VT323 en contadores. Sin style="" inline. */

@font-face { font-family: "Silkscreen"; src: url(/s/fonts/silkscreen-regular.3f56bc19d1.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Silkscreen"; font-weight: 700; src: url(/s/fonts/silkscreen-bold.87f43a7335.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "VT323"; src: url(/s/fonts/vt323-regular.fa5bddc8a7.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Anton"; src: url(/s/fonts/anton-regular.bc541f207d.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url(/s/fonts/pressstart2p-regular.6d41f6f81d.woff2) format("woff2"); font-display: swap; }

:root {
  --bb-black: #000000;
  --bb-panel: #111111;
  --bb-panel-2: #1c1c1c;
  --bb-line: #333333;
  --bb-white: #ffffff;
  --bb-cream: #fbf5e9;
  --bb-muted: #9a9a9a;
  --bb-cyan: #03f7fe;
  --bb-cyan-deep: #0fb5b5;
  --bb-cyan-edge: #0a8c99;
  --bb-pink: #ff2e9a;
  --bb-lime: #b6ff3b;
  --bb-purple: #7a2cff;
  --eh-red: #da291c;
  --eh-green: #009a44;
  --warn-yellow: #ffe600;
  --paper: #f2efe6;
  --ink: #111111;

  --gel-cyan: linear-gradient(#e6ffff 0%, #8ffbff 49%, #03f7fe 50%, #0fb5b5 100%);
  --gel-cyan-down: linear-gradient(#0fb5b5 0%, #03f7fe 50%, #8ffbff 51%, #e6ffff 100%);
  --gel-black: linear-gradient(#5a5a5a 0%, #2b2b2b 49%, #000 50%, #1a1a1a 100%);
  --gel-black-hover: linear-gradient(#6a6a6a, #3b3b3b 49%, #0a0a0a 50%, #2a2a2a);
  --gel-pink: linear-gradient(#ffe6f3 0%, #ffb8dc 40%, #ff8ac6 50%, #ff2e9a 100%);
  --gel-lime: linear-gradient(#f4ffd9 0%, #d6ff8a 49%, #b6ff3b 50%, #7fc414 100%);
  --gel-eh: linear-gradient(#5fd38f 0%, #19b35d 49%, #009a44 50%, #006b2f 100%);
  --gel-purple: linear-gradient(#e7d9ff 0%, #b48cff 49%, #7a2cff 50%, #4b12b8 100%);
  --gel-red: linear-gradient(#ffd3cf 0%, #ff7d70 49%, #da291c 50%, #8f150b 100%);
  --hard-shadow: 3px 3px 0 #000;

  --font-body: Verdana, Tahoma, Geneva, sans-serif;
  --font-pixel: "Silkscreen", "Press Start 2P", monospace;
  --font-display: "Anton", Impact, "Arial Black", sans-serif;
  --font-term: "VT323", "Courier New", monospace;
  --font-8bit: "Press Start 2P", "Silkscreen", monospace;
  --font-ui: bold 10px/1.2 Tahoma, Verdana, Geneva, sans-serif;

  --cur-arrow: url(/s/assets/cursors/arrow-cyan.a5e44fe578.png) 0 0, auto;
  --cur-hand: url(/s/assets/cursors/hand-cyan.6e6cbc2df3.png) 5 0, pointer;
}

* { box-sizing: border-box; }
html {
  background: #000 url(/s/assets/textures/checker-cyan-dark-64.b0eb5f9978.png);
  cursor: var(--cur-arrow);
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; padding: 14px 0 24px; font: 12px/1.45 var(--font-body); color: var(--bb-white); }
a { color: var(--bb-cyan); text-decoration: none; cursor: var(--cur-hand); }
a:hover { text-decoration: underline; color: #fff; }
/* Enlaces dentro de texto corrido: subrayados como en 2004 y distinguibles sin depender del color (WCAG 1.4.1). */
:where(p, .bbc, .bb-help, .bb-small, .bb-whosonline, dd, label) a:not([class*="bb-btn"]):not(.report) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
:where(p, .bbc, .bb-whosonline, dd) a[class^="nick-"], :where(p, .bbc, .bb-whosonline, dd) a[href^="/u/"] { text-decoration-style: dotted; }
.bb-footer p.bb-credit a, .bb-footer p.bb-credit a:hover { text-decoration: none; }
a:visited { color: var(--bb-cyan-deep); }
button, summary, label[for], select, input[type="checkbox"], input[type="radio"] { cursor: var(--cur-hand); }
:focus-visible { outline: 1px dotted var(--bb-cyan); outline-offset: 2px; }
img { max-width: 100%; }
img.px, .px { image-rendering: pixelated; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 8px; }
hr { border: 0; border-top: 1px dotted #333; margin: 10px 0; }
code, pre { font: 14px/1.2 var(--font-term); }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bb-skip { position: absolute; left: 8px; top: -40px; z-index: 50; padding: 6px 10px; font: var(--font-ui); text-transform: uppercase; color: #000; background: var(--warn-yellow); border: 2px solid #000; }
.bb-skip:focus { top: 8px; }
.bb-muted { color: var(--bb-muted); }
.bb-small { font-size: 10px; }
.bb-center { text-align: center; }
.bb-right { text-align: right; }
.bb-nowrap { white-space: nowrap; }
.bb-hide { display: none !important; }
.bb-mt { margin-top: 8px; }
.bb-mb0 { margin-bottom: 0; }

/* ---------- page shell ---------- */
.bb-page {
  position: relative; width: 960px; margin: 0 auto; background: #000;
  border: 1px solid #000; outline: 2px solid var(--bb-cyan-edge);
  box-shadow: 8px 8px 0 rgba(3, 247, 254, .18);
}

.bb-header {
  position: relative; height: 178px; overflow: hidden;
  background: #000 url(/s/assets/textures/sparkle-tile-black.59acd57d9b.gif);
  border-bottom: 1px solid #222;
}
.bb-header__logo-link { position: absolute; left: 18px; top: 8px; display: block; }
.bb-header__logo { display: block; width: 205px; height: auto; filter: drop-shadow(3px 3px 0 #000); }
.bb-header__claim {
  position: absolute; left: 248px; top: 26px; margin: 0;
  font: 44px/0.95 var(--font-display); text-transform: uppercase; letter-spacing: 1px;
  color: #fff; -webkit-text-stroke: 1px #000;
  text-shadow: 3px 3px 0 var(--bb-purple), 6px 6px 0 #000;
}
.bb-header__claim small { display: block; font-size: 22px; color: var(--bb-lime); text-shadow: 2px 2px 0 #000; letter-spacing: 3px; }
.bb-header__meta { position: absolute; left: 252px; top: 128px; margin: 0; font: 20px/1 var(--font-term); color: var(--bb-cyan); }
.bb-header__meta .cursor { animation: bb-blink 1s steps(1) infinite; }
.bb-header__flag { position: absolute; right: 22px; top: 22px; }
.bb-header__gems { position: absolute; right: 150px; top: 34px; display: flex; gap: 8px; }
.bb-header__burst { position: absolute; right: 34px; top: 92px; width: 78px; height: 78px; transform: rotate(8deg); }

/* Variante de sección (foro, fiestas, blog...) y compacta (perfiles) */
.bb-header--section { height: 120px; }
.bb-header--section .bb-header__logo { width: 140px; }
.bb-header--section .bb-header__claim { left: 180px; top: 22px; font-size: 40px; }
.bb-header--compact { height: 70px; }
.bb-header--compact .bb-header__logo-link { top: 4px; }
.bb-header--compact .bb-header__logo { width: 70px; }
.bb-header--compact .bb-header__claim { left: 96px; top: 14px; font-size: 34px; }
.bb-header--compact .bb-header__flag { top: 6px; }

/* Selector ES | EU: dos botones gel pegados (el activo, en gel cian). */
.bb-lang { position: absolute; right: 12px; bottom: 8px; z-index: 1; margin: 0; }
.bb-header:not(.bb-header--section):not(.bb-header--compact) .bb-lang { right: 132px; }
.bb-lang form { display: flex; margin: 0; }
.bb-lang button {
  min-width: 30px; height: 20px; padding: 0 7px; font: var(--font-ui); letter-spacing: .5px; color: #fff; text-shadow: 0 -1px 0 #000;
  background: var(--gel-black); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 2px 2px 0 #000;
}
.bb-lang button:first-child { border-radius: 5px 0 0 5px; }
.bb-lang button:last-child { border-left: 0; border-radius: 0 5px 5px 0; }
.bb-lang button[aria-pressed="true"] { color: #002024; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); background: var(--gel-cyan); border-color: var(--bb-cyan-edge); }
.bb-lang button:hover { filter: brightness(1.25); }
.bb-lang button:focus-visible { outline: 1px dotted #fff; outline-offset: -4px; }

/* ---------- marquee pill ---------- */
.bb-marquee {
  position: relative; height: 24px; margin: 8px 10px; overflow: hidden;
  border-radius: 999px; border: 1px solid var(--bb-cyan-edge);
  background: var(--gel-cyan);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 4px rgba(0, 0, 0, .7);
}
.bb-marquee::after { content: ""; position: absolute; left: 14px; right: 14px; top: 1px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .45); pointer-events: none; }
.bb-marquee__track {
  display: inline-flex; white-space: nowrap;
  font: bold 12px/24px var(--font-body); color: #00262a; text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
  animation: bb-marquee var(--marquee-speed, 60s) linear infinite;
}
.bb-marquee__track > span { padding: 0 24px 0 14px; }
.bb-marquee:hover .bb-marquee__track { animation-play-state: paused; }
@keyframes bb-marquee { to { transform: translateX(-50%); } }

/* ---------- nav (gel negro Vista) + barra del usuario ----------
   Escritorio: secciones a la izquierda y, a la derecha, las herramientas con icono pixel
   (perfil, MP, avisos y cuenta) o Entrar / Únete a la crew.
   Móvil (≤760 px): las secciones van en un menú Inicio de Win98 detrás del botón MENÚ, y las
   herramientas se quedan a la vista con su texto debajo, como una barra de Outlook Express. */
.bb-nav { position: relative; z-index: 20; display: flex; flex-wrap: wrap; min-height: 32px; background: var(--gel-black); border-top: 1px solid #777; border-bottom: 1px solid #000; }
.bb-nav__toggle, .bb-nav__banner { display: none; }
.bb-nav__panel { display: flex; flex: 1 1 auto; min-width: 0; }
.bb-nav__list { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.bb-nav__list > li { display: flex; }
.bb-nav__list a {
  display: flex; align-items: center; min-height: 32px; padding: 0 13px;
  font: bold 11px var(--font-body); color: #fff; text-shadow: 0 -1px 0 #000;
  border-right: 1px solid #000; box-shadow: 1px 0 0 #555;
}
.bb-nav__list a:visited { color: #fff; }
.bb-nav__list a:hover { color: #fff; text-decoration: none; background: var(--gel-black-hover); }
.bb-nav__list a[aria-current="page"] { color: var(--bb-cyan); box-shadow: 1px 0 0 #555, inset 0 -3px 0 var(--bb-cyan); }
.bb-nav__list .bb-ico { display: none; }
.bb-ico { display: block; flex: none; width: 24px; height: 24px; image-rendering: pixelated; }

.bb-nav__tools { display: flex; margin: 0 0 0 auto; padding: 0; list-style: none; }
.bb-nav__tools > li { position: relative; display: flex; }
.bb-nav__tools form { display: flex; margin: 0; }
.bb-tool {
  position: relative; display: flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 9px;
  font: bold 11px var(--font-body); color: #fff; text-shadow: 0 -1px 0 #000; white-space: nowrap;
  background: none; border: 0; border-left: 1px solid #000; box-shadow: inset 1px 0 0 #555; cursor: var(--cur-hand);
}
.bb-tool:visited { color: #fff; }
.bb-tool:hover { color: #fff; text-decoration: none; background: var(--gel-black-hover); }
.bb-tool[aria-current="page"] { color: var(--bb-cyan); box-shadow: inset 1px 0 0 #555, inset 0 -3px 0 var(--bb-cyan); }
.bb-tool__label { display: flex; align-items: center; }
.bb-tool__short { display: none; }
.bb-tool__nick { display: block; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.bb-tool--cta, .bb-tool--cta:visited, .bb-tool--cta:hover { color: #1d3300; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); background: var(--gel-lime); }
.bb-tool--cta:hover { filter: brightness(1.08); }
.bb-tool--cta[aria-current="page"] { color: #1d3300; box-shadow: inset 0 -3px 0 #1d3300; }
summary.bb-tool { list-style: none; }
summary.bb-tool::-webkit-details-marker { display: none; }
.bb-nav__user details[open] > summary.bb-tool { background: var(--gel-black-hover); box-shadow: inset 1px 1px 3px #000; }
.bb-nav__count { display: inline-block; min-width: 16px; margin-left: 5px; padding: 0 4px; font: bold 9px/14px Tahoma, sans-serif; text-align: center; color: #fff; text-shadow: none; background: var(--bb-pink); border: 1px solid #000; border-radius: 8px; }
.bb-tool .bb-nav__count { margin-left: 0; }

/* Menú de la cuenta: menú de Windows 98, con la cabecera azul de las ventanas activas. */
.bb-nav__menu {
  position: absolute; right: 0; top: 100%; z-index: 30; min-width: 240px; margin: 0; padding: 2px; list-style: none; color: #000;
  background: #c0c0c0; border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040; box-shadow: var(--hard-shadow);
}
.bb-nav__menu-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; padding: 5px 8px; color: #fff; background: linear-gradient(90deg, #000080, #1084d0); }
.bb-nav__menu-head span { display: flex; flex-direction: column; min-width: 0; }
.bb-nav__menu-head small { font: 10px Tahoma, Verdana, sans-serif; color: #dfe9ff; }
.bb-nav__menu-head b { overflow: hidden; font: bold 13px Tahoma, Verdana, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.bb-nav__menu a, .bb-nav__menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 3px 10px 3px 6px;
  font: 11px Tahoma, Verdana, sans-serif; color: #000; text-align: left; text-shadow: none; background: none; border: 0; cursor: var(--cur-hand);
}
.bb-nav__menu a:visited { color: #000; }
.bb-nav__menu a:hover, .bb-nav__menu button:hover, .bb-nav__menu a:focus-visible, .bb-nav__menu button:focus-visible { color: #fff; text-decoration: none; background: #000080; }
.bb-nav__menu a:focus-visible, .bb-nav__menu button:focus-visible { outline: 1px dotted #fff; outline-offset: -3px; }
.bb-nav__menu .bb-nav__count { margin-left: auto; }
.bb-nav__menu-out { margin-top: 3px; padding-top: 3px; border-top: 1px solid #808080; box-shadow: inset 0 1px 0 #fff; }
.bb-nav__menu form { margin: 0; }

@media (max-width: 760px) {
  .bb-nav { align-items: center; gap: 4px; min-height: 58px; padding: 5px 6px; }
  /* Sin JS: el panel se ve siempre, debajo de la barra. Con JS: se abre encima del contenido. */
  .bb-nav__panel { order: 3; flex-basis: 100%; padding: 2px; color: #000; background: #c0c0c0; border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040; box-shadow: var(--hard-shadow); }
  .js .bb-nav__panel { position: absolute; left: 6px; top: 100%; z-index: 30; display: none; width: min(340px, calc(100% - 12px)); margin-top: 2px; }
  .js .bb-nav__panel.is-open { display: flex; }
  .bb-nav__banner {
    display: block; flex: none; width: 32px; padding: 10px 0; overflow: hidden; white-space: nowrap;
    font: 26px/32px var(--font-display); letter-spacing: 1px; color: #fff; text-transform: uppercase; text-shadow: 2px 2px 0 #000;
    background: linear-gradient(var(--bb-cyan-deep), #000 80%); writing-mode: vertical-rl; transform: rotate(180deg);
  }
  .bb-nav__banner b { font-weight: normal; color: var(--bb-cyan); }
  .bb-nav__list { flex: 1; flex-direction: column; flex-wrap: nowrap; min-width: 0; }
  .bb-nav__list > li + li { border-top: 1px dotted #808080; }
  .bb-nav__list a {
    flex: 1; gap: 10px; min-height: 46px; padding: 4px 10px 4px 8px;
    font: bold 13px Tahoma, Verdana, sans-serif; color: #000; text-shadow: none; border: 0; box-shadow: none;
  }
  .bb-nav__list a:visited { color: #000; }
  .bb-nav__list .bb-ico { display: block; }
  .bb-nav__list a:hover, .bb-nav__list a:focus-visible { color: #fff; background: #000080; }
  .bb-nav__list a:focus-visible { outline: 1px dotted #fff; outline-offset: -4px; }
  .bb-nav__list a[aria-current="page"] { color: #002024; background: var(--gel-cyan); box-shadow: inset 0 0 0 1px var(--bb-cyan-edge); }
  .bb-nav__list a[aria-current="page"]::after { content: ""; width: 15px; height: 12px; margin-left: auto; background: url(/s/assets/icons/brand/diamond-pixel-15.9a0624019f.png) no-repeat; image-rendering: pixelated; }

  /* Botón MENÚ: el "Inicio" de Win98 con el corazón BB. */
  .js .bb-nav__toggle {
    display: inline-flex; align-items: center; gap: 6px; flex: none; height: 44px; padding: 0 9px 0 8px;
    font: bold 13px Tahoma, Verdana, sans-serif; color: #000; background: #c0c0c0;
    border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040; box-shadow: 1px 1px 0 #000;
  }
  .bb-nav__toggle img { image-rendering: pixelated; }
  .bb-nav__toggle[aria-expanded="true"] { border-style: inset; border-color: #404040 #fff #fff #404040; box-shadow: none; background: #d4d4d4; }
  .bb-nav__toggle[aria-expanded="true"] .bb-nav__caret { transform: rotate(180deg); }
  .bb-nav__toggle:focus-visible { outline: 1px dotted #000; outline-offset: -6px; }
  .bb-nav__caret { font-size: 11px; }

  /* Herramientas: icono con su nombre debajo y el contador en la esquina del icono. */
  .bb-nav__tools { gap: 2px; }
  .bb-tool {
    flex-direction: column; justify-content: center; gap: 3px; min-width: 52px; min-height: 48px; padding: 3px 5px;
    font: var(--font-ui); letter-spacing: .3px; text-transform: uppercase; border: 1px solid transparent; border-radius: 4px; box-shadow: none;
  }
  .bb-tool:hover, .bb-tool:active { border-color: #000; box-shadow: inset 0 1px 0 #6a6a6a; }
  .bb-tool[aria-current="page"] { color: var(--bb-cyan); border-color: #000; box-shadow: inset 0 -3px 0 var(--bb-cyan); }
  .bb-tool__nick, .bb-tool__caret { display: none; }
  .bb-tool__short { display: inline; }
  .bb-tool .bb-nav__count { position: absolute; top: 1px; left: calc(50% + 5px); }
  .bb-tool--cta { padding: 3px 9px; border-color: #6aa10c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 3px rgba(0, 0, 0, .7); }
  .bb-nav__tools > li.bb-nav__user { position: static; }
  .bb-nav__user details[open] > summary.bb-tool { border-color: #000; }
  .bb-nav__menu { left: 6px; right: 6px; min-width: 0; margin-top: 2px; }
  .bb-nav__menu a, .bb-nav__menu button { min-height: 44px; font-size: 13px; }
}
@media (max-width: 370px) {
  .bb-nav { padding: 5px 4px; }
  .js .bb-nav__toggle { gap: 4px; padding: 0 6px; }
  .bb-tool { min-width: 46px; padding: 3px 2px; font-size: 9px; letter-spacing: 0; }
  .bb-header__logo, .bb-header--section .bb-header__logo { width: 80px; }
  .bb-header__claim, .bb-header--section .bb-header__claim, .bb-header--compact .bb-header__claim { font-size: 20px; }
  .bb-header__claim small { font-size: 11px; letter-spacing: 1px; }
}

/* ---------- columns ---------- */
.bb-cols { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px; padding: 10px; }
.bb-side, .bb-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bb-single { display: flex; flex-direction: column; gap: 10px; padding: 10px; min-width: 0; }

/* ---------- window box ---------- */
.bb-window { background: var(--bb-panel); border: 1px solid var(--bb-cyan-edge); box-shadow: var(--hard-shadow); min-width: 0; }
.bb-window__bar {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  min-height: 24px; padding: 0 4px 0 8px; margin: 0;
  background: var(--gel-cyan); border-bottom: 1px solid var(--bb-cyan-edge);
  font: 16px/24px var(--font-pixel); color: #002024; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.bb-window__bar::before { content: ""; position: absolute; left: 3px; right: 3px; top: 1px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, .5); pointer-events: none; }
.bb-window__bar img { image-rendering: pixelated; vertical-align: -2px; }
.bb-window__bar a, .bb-window__bar a:visited { color: inherit; }
.bb-window__title { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-side .bb-window__bar { min-height: 20px; font: bold 10px/20px Tahoma, Verdana, sans-serif; letter-spacing: .6px; }
.bb-wbtns { display: flex; gap: 2px; position: relative; flex: none; }
.bb-wbtns span {
  width: 15px; height: 14px; display: grid; place-items: center;
  font: bold 9px/1 var(--font-body); color: #033; background: linear-gradient(#fff, #c8ffff);
  border: 1px solid var(--bb-cyan-edge); border-radius: 2px; text-shadow: none;
}
.bb-side .bb-wbtns span { width: 12px; height: 11px; font-size: 7px; }
.bb-window__body { padding: 8px; }
.bb-window__body--flush { padding: 0; }
.bb-window--black .bb-window__bar { background: var(--gel-black); color: #fff; text-shadow: 0 -1px 0 #000; border-bottom-color: #000; }
.bb-window--black { border-color: #555; }
.bb-window--black .bb-wbtns span { color: #fff; background: linear-gradient(#666, #222); border-color: #000; }
.bb-window--pink .bb-window__bar { background: var(--gel-pink); color: #4a0026; }
.bb-window--pink { border-color: #c2146f; }
.bb-window--pink .bb-wbtns span { color: #4a0026; background: linear-gradient(#fff, #ffd6eb); border-color: #c2146f; }
.bb-window--lime .bb-window__bar { background: var(--gel-lime); color: #1d3300; }
.bb-window--lime { border-color: #6aa10c; }
.bb-window--lime .bb-wbtns span { color: #1d3300; background: linear-gradient(#fff, #eaffc7); border-color: #6aa10c; }
.bb-window--eh .bb-window__bar { background: var(--gel-eh); color: #fff; text-shadow: 0 -1px 0 #003015; }
.bb-window--eh { border-color: var(--eh-green); }
.bb-window--eh .bb-wbtns span { color: #003015; background: linear-gradient(#fff, #c9f5da); border-color: #006b2f; }
.bb-window--purple .bb-window__bar { background: var(--gel-purple); color: #fff; text-shadow: 0 -1px 0 #2a0670; }
.bb-window--purple { border-color: var(--bb-purple); }
.bb-window--purple .bb-wbtns span { color: #2a0670; background: linear-gradient(#fff, #e3d4ff); border-color: #4b12b8; }
.bb-window--red .bb-window__bar { background: var(--gel-red); color: #fff; text-shadow: 0 -1px 0 #5a0d06; }
.bb-window--red { border-color: var(--eh-red); }
.bb-window--double { border: 3px double var(--bb-cyan-edge); }

/* ---------- sidebar widgets ---------- */
.bb-flyer {
  position: relative; display: block; min-height: 168px; overflow: hidden; border: 2px solid #000; outline: 1px solid var(--bb-purple);
  background:
    radial-gradient(circle at 70% 30%, rgba(182, 255, 59, .35), transparent 55%),
    linear-gradient(160deg, #1b0638, #000 70%);
  padding: 8px; color: #fff;
}
a.bb-flyer:hover { text-decoration: none; filter: brightness(1.1); }
.bb-flyer__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.bb-flyer__title { display: block;
  position: relative; margin: 0; font: 28px/0.9 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere;
  background: linear-gradient(#fff 0%, #d9ffa0 45%, #7fc414 55%, #e9ffc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px #000; filter: drop-shadow(2px 2px 0 var(--bb-purple));
}
.bb-flyer__date { display: block; position: relative; font: 22px/1 var(--font-term); color: var(--bb-pink); margin: 6px 0 0; }
.bb-flyer__venue { display: block; position: relative; margin: 4px 60px 0 0; font: bold 9px/1.3 var(--font-body); color: #fff; text-transform: uppercase; }
.bb-flyer__burst { position: absolute; right: -6px; bottom: -8px; width: 70px; height: 70px; transform: rotate(-10deg); }
.bb-flyer__tape { position: absolute; left: -10px; top: 6px; width: 54px; height: 14px; background: rgba(255, 255, 230, .55); transform: rotate(-35deg); }

.bb-counter { display: flex; justify-content: center; gap: 2px; padding: 4px; background: #000; border: 2px inset #444; font-variant-numeric: tabular-nums; }
.bb-counter span {
  width: 18px; height: 28px; display: grid; place-items: center;
  font: 26px/1 var(--font-term); color: var(--bb-cyan); text-shadow: 0 0 6px rgba(3, 247, 254, .8);
  background: linear-gradient(#222 0 48%, #000 48% 52%, #1a1a1a 52%); border: 1px solid #333;
}
.bb-counter--pink span { color: var(--bb-pink); text-shadow: 0 0 6px rgba(255, 46, 154, .8); }
.bb-counter--lime span { color: var(--bb-lime); text-shadow: 0 0 6px rgba(182, 255, 59, .8); }
.bb-counter__label { margin: 4px 0 0; text-align: center; font: 8px var(--font-pixel); color: var(--bb-muted); }
.bb-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; text-align: center; margin-top: 6px; font-variant-numeric: tabular-nums; }
.bb-countdown b { display: block; font: 24px/1 var(--font-term); color: var(--bb-lime); background: #000; border: 1px inset #444; }
.bb-countdown small { font: 8px var(--font-pixel); color: var(--bb-muted); text-transform: uppercase; }
.bb-countdown--big b { font-size: 40px; padding: 4px 0; }
.bb-countdown--big small { font-size: 8px; }

.bb-online { list-style: none; margin: 0; padding: 0; }
.bb-online li { display: flex; align-items: center; gap: 5px; padding: 2px 0; border-bottom: 1px dotted #2a2a2a; font-size: 11px; min-width: 0; }
.bb-online li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #00ff00; box-shadow: 0 0 4px #00ff00; flex: none; }
.bb-dot--off { background: #444; box-shadow: none; }

.bb-gb-entry { padding: 4px 0; border-bottom: 1px dotted #2a2a2a; font-size: 11px; overflow-wrap: anywhere; }
.bb-gb-entry b, .bb-gb-entry b a { color: var(--bb-pink); }
.bb-gb-entry time { display: block; font: 8px var(--font-pixel); color: var(--bb-muted); text-transform: uppercase; }

.bb-stack { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.bb-stack img { image-rendering: pixelated; display: block; }

/* ---------- player facade (mini-Winamp / WMP9) ---------- */
.bb-player {
  border: 1px solid #000; border-radius: 4px; padding: 4px;
  background: linear-gradient(#4a4f5a, #23262d 50%, #15171c); box-shadow: inset 0 1px 0 #7a808c, var(--hard-shadow);
}
.bb-player__lcd {
  min-height: 30px; padding: 3px 5px; background: #000 url(/s/assets/textures/scanlines-2x4.c5c6a973d7.png);
  border: 1px inset #555; font: 16px/12px var(--font-term); color: #39ff14; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-transform: uppercase;
}
.bb-player__lcd small { display: block; color: #1f9e0c; font-size: 13px; text-transform: none; overflow: hidden; text-overflow: ellipsis; }
.bb-player__viz { display: flex; align-items: flex-end; gap: 2px; height: 16px; margin: 4px 0; }
.bb-player__viz i { flex: 1; height: 50%; background: linear-gradient(#ff2e9a, #ffe600 50%, #39ff14); }
.bb-player__viz i:nth-child(10n+1) { height: 40%; } .bb-player__viz i:nth-child(10n+2) { height: 80%; }
.bb-player__viz i:nth-child(10n+3) { height: 55%; } .bb-player__viz i:nth-child(10n+4) { height: 95%; }
.bb-player__viz i:nth-child(10n+5) { height: 35%; } .bb-player__viz i:nth-child(10n+6) { height: 70%; }
.bb-player__viz i:nth-child(10n+7) { height: 50%; } .bb-player__viz i:nth-child(10n+8) { height: 85%; }
.bb-player__viz i:nth-child(10n+9) { height: 30%; } .bb-player__viz i:nth-child(10n) { height: 65%; }
.bb-player.is-loading .bb-player__viz i { animation: bb-viz .5s steps(4) infinite alternate; }
.bb-player__ctrl { display: flex; gap: 3px; align-items: center; }
.bb-player__ctrl button, .bb-player__ctrl .fake {
  display: inline-grid; place-items: center; width: 22px; height: 16px; padding: 0; font: 9px/1 var(--font-body); color: #ddd;
  background: linear-gradient(#6b7180, #2b2f38); border: 1px solid #000; border-radius: 2px;
}
.bb-player__ctrl button.play { width: 30px; color: #000; background: var(--gel-cyan); }
.bb-player__ctrl button.play:active { background: var(--gel-cyan-down); }
.bb-player__note { margin: 3px 0 0; font: 8px/1.3 var(--font-pixel); color: #8a8f99; text-transform: uppercase; }
.bb-player__frame { position: relative; width: 100%; border: 1px inset #555; background: #000; }
.bb-player__frame iframe { display: block; width: 100%; border: 0; }
.bb-player__frame--video { aspect-ratio: 16 / 9; }
.bb-player__frame--video iframe { height: 100%; }
.bb-player__frame--audio iframe { height: 152px; }
.bb-player__frame--soundcloud iframe { height: 166px; }
.bb-player__frame--bandcamp iframe { height: 120px; }
.bb-player--video .bb-player__screen {
  display: grid; place-items: center; aspect-ratio: 16 / 9; margin-bottom: 4px;
  background: #000 url(/s/assets/textures/scanlines-2x4.c5c6a973d7.png); border: 1px inset #555;
}
.bb-player--video .bb-player__screen button {
  width: 64px; height: 44px; font: 24px/1 var(--font-body); color: #000; background: var(--gel-cyan);
  border: 1px solid var(--bb-cyan-edge); border-radius: 8px; box-shadow: inset 0 1px 0 #fff, var(--hard-shadow);
}
.bb-player--empty .bb-player__lcd { color: #1f9e0c; }

/* ---------- content atoms ---------- */
.bb-h1 { margin: 0 0 6px; font: 32px/1 var(--font-display); text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0 var(--bb-purple), 4px 4px 0 #000; letter-spacing: .5px; overflow-wrap: anywhere; }
.bb-h1--cyan { text-shadow: 2px 2px 0 var(--bb-cyan-deep), 4px 4px 0 #000; }
.bb-h2 { margin: 10px 0 6px; font: 22px/1.05 var(--font-display); text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0 #000; }
.bb-h3 { margin: 8px 0 4px; font: var(--font-ui); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--bb-cyan); }
.bb-lead { font-size: 12px; color: var(--bb-cream); }
.bb-hl { background: var(--bb-cyan); color: #000; padding: 0 3px; }
.bb-polaroid { float: left; margin: 2px 12px 6px 0; padding: 6px 6px 22px; background: var(--paper); transform: rotate(-3deg); box-shadow: 3px 3px 0 #000; position: relative; }
.bb-polaroid img { display: block; width: 150px; height: 150px; object-fit: cover; background: #000; }
.bb-polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 8px var(--font-pixel); color: #111; text-transform: uppercase; }
.bb-polaroid::before, .bb-polaroid::after { content: ""; position: absolute; width: 46px; height: 14px; background: rgba(255, 255, 220, .6); top: -6px; }
.bb-polaroid::before { left: -12px; transform: rotate(-30deg); }
.bb-polaroid::after { right: -12px; transform: rotate(30deg); }
.bb-polaroid--right { float: right; margin: 2px 0 6px 12px; transform: rotate(3deg); }
.bb-clear { clear: both; }

.bb-list { list-style: none; margin: 0; padding: 0; }
.bb-list li { display: flex; gap: 6px; align-items: baseline; padding: 4px 6px; border-bottom: 1px dotted #2a2a2a; min-width: 0; }
.bb-list li:nth-child(even) { background: var(--bb-panel-2); }
.bb-list li > a { overflow-wrap: anywhere; }
.bb-list .meta { margin-left: auto; padding-left: 6px; color: var(--bb-muted); font-size: 10px; white-space: nowrap; }
.bb-list--empty { padding: 8px; color: var(--bb-muted); font-size: 11px; }
.bb-badge { vertical-align: middle; image-rendering: pixelated; }

.bb-event { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px; border-bottom: 1px dotted #2a2a2a; color: #fff; }
a.bb-event:hover { text-decoration: none; background: #161616; }
a.bb-event:visited { color: #fff; }
.bb-event:last-child { border-bottom: 0; }
.bb-event__flyer { height: 96px; display: grid; place-items: center; overflow: hidden; text-align: center; font: 18px/0.9 var(--font-display); text-transform: uppercase; color: var(--bb-lime); background: linear-gradient(160deg, #1b0638, #000); border: 1px solid var(--bb-purple); -webkit-text-stroke: .5px #000; }
.bb-event__flyer img { width: 100%; height: 100%; object-fit: cover; }
.bb-event__ftext { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; padding: 0 4px; overflow-wrap: anywhere; text-shadow: 2px 2px 0 var(--bb-purple); }
.bb-event__ftext--l { font-size: 22px; }
.bb-event__ftext--m { font-size: 18px; }
.bb-event__ftext--s { font-size: 14px; line-height: 1; }
.bb-event__date { font: 28px/1 var(--font-term); color: var(--bb-pink); }
.bb-event__name { font: 20px/1 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.bb-event__where { color: var(--bb-muted); font-size: 11px; }
.bb-event__burst { width: 64px; height: 64px; }
/* Fiestas pasadas: apagadas en el flyer y el titular, pero con el texto legible (contraste AA). */
.bb-event--past .bb-event__flyer, .bb-event--past .bb-event__burst { opacity: .6; filter: grayscale(.6); }
.bb-event--past .bb-event__name { color: #c8c8c8; }
.bb-event--past .bb-event__date { color: var(--bb-muted); }

.bb-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.bb-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.bb-release { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.bb-release__item { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; align-items: center; min-width: 0; }
.bb-release__cover { width: 70px; height: 70px; display: grid; place-items: center; overflow: hidden; font: 12px/1 var(--font-display); text-align: center; text-transform: uppercase; border: 1px solid #000; box-shadow: var(--hard-shadow); }
.bb-release__cover img { width: 100%; height: 100%; object-fit: cover; }
.cover-black { background: #000; color: var(--bb-cyan); }
.cover-green { background: var(--eh-green); color: #000; }
.cover-pink { background: var(--bb-pink); color: #000; }
.cover-lime { background: var(--bb-lime); color: #000; }
.cover-purple { background: var(--bb-purple); color: #fff; }
.cover-cyan { background: var(--bb-cyan); color: #000; }

.bb-burst { display: inline-block; width: 80px; height: 80px; transform: rotate(-8deg); }
.bb-tape-divider { height: 26px; background: url(/s/assets/textures/caution-tape-kontuz.637afa364b.png) repeat-x; animation: bb-tape 20s linear infinite; }
.bb-gif-divider { display: flex; justify-content: center; gap: 10px; padding: 4px 0; }
.bb-gif-divider img { image-rendering: pixelated; }

/* ---------- buttons & forms ---------- */
.bb-btn {
  display: inline-block; position: relative; padding: 4px 14px; border-radius: 999px; cursor: var(--cur-hand);
  font: var(--font-ui); line-height: 14px; letter-spacing: .5px; text-transform: uppercase; color: #002024; text-decoration: none; text-align: center;
  background: var(--gel-cyan); border: 1px solid var(--bb-cyan-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 3px rgba(0, 0, 0, .7);
}
.bb-btn:visited { color: #002024; }
.bb-btn:hover { text-decoration: none; filter: brightness(1.08); color: #002024; }
.bb-btn:active { background: var(--gel-cyan-down); transform: translateY(1px); }
.bb-btn--pink, .bb-btn--pink:visited, .bb-btn--pink:hover { background: var(--gel-pink); border-color: #c2146f; color: #4a0026; }
.bb-btn--lime, .bb-btn--lime:visited, .bb-btn--lime:hover { background: var(--gel-lime); border-color: #6aa10c; color: #1d3300; }
.bb-btn--black, .bb-btn--black:visited, .bb-btn--black:hover { background: var(--gel-black); border-color: #000; color: #fff; text-shadow: 0 -1px 0 #000; }
.bb-btn--red, .bb-btn--red:visited, .bb-btn--red:hover { background: var(--gel-red); border-color: #8f150b; color: #fff; text-shadow: 0 -1px 0 #5a0d06; }
.bb-btn--small { padding: 2px 9px; }
.bb-btn[disabled], .bb-btn98[disabled] { opacity: .5; cursor: not-allowed; }
.bb-btn98 {
  display: inline-block; padding: 2px 8px; font: 11px var(--font-body); color: #000; cursor: var(--cur-hand); text-decoration: none;
  background: #c0c0c0; border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040;
}
.bb-btn98:visited, .bb-btn98:hover { color: #000; text-decoration: none; }
.bb-btn98:active { border-style: inset; }
.bb-btn98:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.bb-btn98--danger { color: #8f150b; font-weight: bold; }
.bb-input, .bb-textarea, .bb-select {
  width: 100%; padding: 4px 5px; font: 12px var(--font-body); color: #fff; background: #000;
  border: 2px inset #555; border-right-color: #888; border-bottom-color: #888; border-radius: 0;
}
.bb-select { padding: 3px 4px; }
.bb-input[type="color"] { width: 44px; height: 26px; padding: 1px; }
.bb-input--short { max-width: 120px; }
.bb-input--mid { max-width: 280px; }
.bb-textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
.bb-textarea--short { min-height: 60px; }
.bb-textarea--tall { min-height: 220px; }
.bb-input:focus, .bb-textarea:focus, .bb-select:focus { outline: 1px dotted var(--bb-cyan); outline-offset: 1px; }
.bb-input[aria-invalid="true"], .bb-textarea[aria-invalid="true"] { border-color: var(--eh-red); }
.bb-label { display: block; margin: 8px 0 2px; font: var(--font-ui); text-transform: uppercase; color: var(--bb-cyan); }
.bb-label small { font-weight: normal; text-transform: none; color: var(--bb-muted); }
.bb-help { margin: 2px 0 0; font-size: 10px; color: var(--bb-muted); }
.bb-field-error { margin: 2px 0 0; font-size: 11px; font-weight: bold; color: #ff6a5e; }
.bb-check { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0; font-size: 11px; }
.bb-check input { margin: 2px 0 0; flex: none; accent-color: var(--bb-cyan); }
.bb-form-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; margin-top: 10px; }
.bb-form-actions--left { justify-content: flex-start; }
.bb-fieldset { margin: 10px 0 0; padding: 6px 8px 8px; border: 1px solid #333; }
.bb-fieldset legend { padding: 0 4px; font: var(--font-ui); text-transform: uppercase; color: var(--bb-pink); }
.bb-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.bb-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bb-form-narrow { max-width: 420px; }
.bb-pw { position: relative; display: flex; gap: 4px; }
.bb-pw .bb-input { flex: 1; }
.bb-meter { margin: 4px 0 0; font-size: 10px; color: var(--bb-muted); }
.bb-meter b { font-family: var(--font-term); font-size: 14px; letter-spacing: -1px; }
.bb-meter .lvl0 { color: #ff6a5e; } .bb-meter .lvl1 { color: #ffa53d; } .bb-meter .lvl2 { color: var(--warn-yellow); } .bb-meter .lvl3, .bb-meter .lvl4 { color: var(--bb-lime); }
.bb-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.bb-inline-form { display: inline; margin: 0; }
.bb-linkbtn { padding: 0; font: inherit; color: var(--bb-cyan); background: none; border: 0; text-decoration: none; }
.bb-linkbtn:hover { text-decoration: underline; color: #fff; }

.bb-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: #c0c0c0; border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040; }
.bb-toolbar .bb-btn98 { padding: 0 6px; min-height: 20px; font-size: 11px; border-width: 1px; }
.bb-toolbar img { image-rendering: pixelated; display: block; }
.bb-toolbar__sep { width: 1px; background: #808080; box-shadow: 1px 0 0 #fff; margin: 0 3px; }
.bb-toolbar select { height: 20px; font: 11px var(--font-body); background: #fff; border: 1px inset #808080; }
.bb-pop { position: relative; display: inline-block; }
.bb-pop__panel { position: absolute; left: 0; top: 100%; z-index: 20; display: grid; gap: 2px; padding: 4px; background: #c0c0c0; border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040; box-shadow: var(--hard-shadow); }
.bb-pop__panel--smilies { grid-template-columns: repeat(7, 26px); left: auto; right: 0; }
.bb-pop__panel--colors { grid-template-columns: repeat(4, 24px); }
.bb-pop__panel--colors button { width: 24px; height: 20px; padding: 0; border: 1px solid #000; }
.bb-pop__panel--sizes { grid-template-columns: 1fr; min-width: 110px; }
.bb-editor__preview { margin-top: 6px; padding: 8px 10px; background: var(--bb-panel-2); border: 1px dashed var(--bb-cyan-edge); min-height: 40px; }
.bb-editor__preview:empty { display: none; }
.bb-editor__count { font-size: 10px; color: var(--bb-muted); }

.bb-flash { margin: 0; padding: 8px 10px; font-weight: bold; color: #000; border: 2px solid #000; }
.bb-flash a, .bb-flash a:visited { color: #000; text-decoration: underline; }
.bb-flash--warn { background: var(--warn-yellow) url(/s/assets/textures/caution-tape-kontuz.637afa364b.png) repeat-x 0 100%; padding-bottom: 32px; }
.bb-flash--ok { background: #c9ffd9; border-color: var(--eh-green); box-shadow: inset 0 0 0 2px #fff; }
.bb-flash--err { background: #ffd6d2; border-color: var(--eh-red); box-shadow: inset 0 0 0 2px #fff; }
.bb-flash--info { background: #d9fdff; border-color: var(--bb-cyan-edge); box-shadow: inset 0 0 0 2px #fff; }
.bb-flash--blink { animation: bb-blink 1.2s steps(1) infinite; }
.bb-flashes { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 0; }

/* ---------- tablas genéricas ---------- */
.bb-table { width: 100%; border-collapse: collapse; background: var(--bb-panel); font-size: 11px; }
.bb-table th { height: 22px; padding: 0 6px; text-align: left; background: var(--gel-cyan); color: #002024; font: var(--font-ui); text-transform: uppercase; letter-spacing: .5px; border: 1px solid var(--bb-cyan-edge); }
.bb-table td { padding: 5px 6px; border: 1px solid #262626; vertical-align: top; overflow-wrap: anywhere; }
.bb-table tr:nth-child(even) td { background: var(--bb-panel-2); }
.bb-table--kv th { width: 34%; background: #1c1c1c; color: var(--bb-cyan); border-color: #262626; }
.bb-table .num { text-align: right; }
.bb-table td.num { font: 16px/1 var(--font-term); color: var(--bb-cream); }
.bb-table-wrap { overflow-x: auto; }

/* ---------- forum ---------- */
.bb-crumbs { font-size: 11px; color: var(--bb-muted); margin: 0; overflow-wrap: anywhere; }
.bb-crumbs a { font-weight: bold; }
.bb-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.bb-bar__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bb-search { display: flex; gap: 4px; margin: 0; }
.bb-search .bb-input { width: 180px; }
.bb-forum { width: 100%; border-collapse: collapse; border: 1px solid var(--bb-cyan-edge); box-shadow: var(--hard-shadow); background: var(--bb-panel); }
.bb-forum th {
  height: 24px; padding: 0 6px; text-align: center; background: var(--gel-cyan); color: #002024;
  font: var(--font-ui); letter-spacing: .5px; text-transform: uppercase; border: 1px solid var(--bb-cyan-edge);
}
.bb-forum th:first-child { text-align: left; }
.bb-forum td { padding: 6px; border: 1px solid #262626; vertical-align: middle; font-size: 11px; }
.bb-forum tbody tr:nth-child(even) td { background: var(--bb-panel-2); }
.bb-forum tbody tr:hover td { background: #1f2a2a; }
.bb-forum .cat td { padding: 4px 6px; background: #000 !important; color: var(--bb-cyan); font: var(--font-ui); text-transform: uppercase; letter-spacing: 1.5px; border-top: 2px solid var(--bb-cyan-edge); }
.bb-forum .cat img { vertical-align: -1px; margin-right: 3px; }
.bb-forum .ico { width: 34px; text-align: center; }
.bb-forum .ico img { display: block; margin: 0 auto; }
.bb-forum .num { width: 64px; text-align: center; font: 18px/1 var(--font-term); color: var(--bb-cream); font-variant-numeric: tabular-nums; }
.bb-forum .last { width: 170px; font-size: 10px; color: var(--bb-muted); }
.bb-forum .fname { font-weight: bold; font-size: 12px; overflow-wrap: anywhere; }
.bb-forum .fdesc { display: block; color: var(--bb-muted); font-size: 11px; }
.bb-forum .tmeta { display: block; color: var(--bb-muted); font-size: 10px; }
.bb-forum .is-hidden td { opacity: .55; }
.bb-forum .bb-badge { margin-left: 3px; }
.bb-forum__sub { display: block; margin-top: 2px; font-size: 10px; color: var(--bb-muted); }

.bb-pager { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; font-size: 11px; }
.bb-pager a, .bb-pager b, .bb-pager span.gap { padding: 0 5px; border: 1px solid #333; background: #111; }
.bb-pager span.gap { border-color: transparent; background: none; }
.bb-pager b { color: #000; background: var(--bb-cyan); border-color: var(--bb-cyan-edge); }

.bb-post { display: grid; grid-template-columns: 150px minmax(0, 1fr); border: 1px solid var(--bb-cyan-edge); background: var(--bb-panel); box-shadow: var(--hard-shadow); scroll-margin-top: 10px; }
.bb-post:target { outline: 2px dotted var(--bb-pink); outline-offset: 2px; }
.bb-post + .bb-post { margin-top: 10px; }
.bb-post__author { padding: 8px; background: var(--bb-panel-2); border-right: 1px solid #262626; font-size: 10px; color: var(--bb-muted); overflow-wrap: anywhere; }
.bb-post__nick { display: block; font-weight: bold; font-size: 12px; }
.bb-post__nick.admin, .bb-post__nick.admin:visited, .nick-admin, .nick-admin:visited { color: #ff4a3d; text-shadow: 0 0 1px #000; }
.bb-post__nick.mod, .bb-post__nick.mod:visited, .nick-mod, .nick-mod:visited { color: #19d36a; }
.bb-post__avatar { display: block; width: 100px; height: 100px; margin: 6px 0; object-fit: cover; border: 2px solid #000; outline: 1px solid var(--bb-cyan-edge); background: #000; }
.bb-post__rank { color: var(--bb-cream); font-weight: bold; }
.bb-stars { color: var(--warn-yellow); letter-spacing: 1px; font-size: 11px; }
.bb-post__meta { display: block; }
.bb-post__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 8px; background: #000; border-bottom: 1px solid #262626; font-size: 10px; color: var(--bb-muted); }
.bb-post__head b { color: #fff; font-size: 11px; overflow-wrap: anywhere; }
.bb-post__head a { color: var(--bb-muted); }
.bb-post__main { display: flex; flex-direction: column; min-width: 0; }
.bb-post__body { flex: 1; padding: 10px 12px; font-size: 12px; min-height: 120px; overflow-wrap: anywhere; }
.bb-post__edited { margin: 8px 0 0; font-size: 10px; font-style: italic; color: var(--bb-muted); }
.bb-post__sig { margin: 10px 12px 10px; padding-top: 4px; border-top: 1px solid #333; font-size: 10px; color: var(--bb-muted); max-height: 4.5em; overflow: hidden; }
.bb-post__sig .bbc-img { max-height: 60px; }
.bb-post__foot { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; align-items: center; padding: 4px 8px; border-top: 1px solid #262626; background: #0a0a0a; }
.bb-post__foot .bb-btn { padding: 2px 9px; }
.bb-post__foot .report { margin-right: auto; }
.bb-post__foot form { margin: 0; }
.bb-post--hidden { opacity: .6; border-style: dashed; }
.bb-post--deleted .bb-post__body { color: var(--bb-muted); font-style: italic; min-height: 0; }
.bb-modbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 4px 6px; background: #1a1400; border: 1px dashed var(--warn-yellow); font-size: 10px; }
.bb-modbar b { font: var(--font-ui); color: var(--warn-yellow); text-transform: uppercase; }
.bb-modbar form { display: flex; gap: 3px; align-items: center; margin: 0; }
.bb-modbar .bb-input, .bb-modbar .bb-select { width: auto; padding: 1px 3px; font-size: 10px; }

.bb-whosonline { font-size: 11px; color: var(--bb-muted); }
.bb-whosonline b { color: #fff; }

/* ---------- contenido BBCode ---------- */
.bbc { overflow-wrap: anywhere; }
.bbc p { margin: 0 0 8px; }
.bbc ul, .bbc ol { margin: 4px 0 8px; padding-left: 22px; }
.bbc .smiley { vertical-align: -4px; image-rendering: pixelated; }
.bbc-img { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; border: 1px solid #000; }
.bbc-quote, .bb-quote { margin: 6px 0; padding: 6px 8px; background: #000; border: 1px solid #333; border-left: 3px solid var(--bb-cyan); font-size: 11px; color: #ccc; }
.bbc-quote__by, .bb-quote cite { display: block; font: var(--font-ui); color: var(--bb-cyan); font-style: normal; margin-bottom: 3px; text-transform: none; }
.bbc-code { margin: 6px 0; padding: 6px 8px; overflow-x: auto; white-space: pre-wrap; font: 15px/1.15 var(--font-term); color: #39ff14; background: #000 url(/s/assets/textures/scanlines-2x4.c5c6a973d7.png); border: 1px inset #555; }
.bbc-spoiler { margin: 6px 0; border: 1px dashed #555; }
.bbc-spoiler > summary { padding: 2px 6px; font: var(--font-ui); text-transform: uppercase; color: var(--bb-pink); background: #0a0a0a; }
.bbc-spoiler > div { padding: 6px 8px; }
.bbc-h2 { margin: 10px 0 6px; font: 24px/1.05 var(--font-display); text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0 var(--bb-purple); }
.bbc-h3 { margin: 8px 0 4px; font: 16px/1.1 var(--font-pixel); text-transform: uppercase; color: var(--bb-cyan); }
.bbc-center { text-align: center; }
.bbc a { overflow-wrap: anywhere; }
.c-red { color: #ff4a3d; } .c-orange { color: #ff9a1f; } .c-yellow { color: var(--warn-yellow); } .c-lime { color: var(--bb-lime); }
.c-green { color: #19d36a; } .c-cyan { color: var(--bb-cyan); } .c-blue { color: #5aa9ff; } .c-purple { color: #b48cff; }
.c-pink { color: var(--bb-pink); } .c-white { color: #fff; } .c-cream { color: var(--bb-cream); } .c-gray { color: var(--bb-muted); }
.c-gold { color: #ffc93c; } .c-magenta { color: #ff5cf4; } .c-teal { color: var(--bb-cyan-deep); } .c-brown { color: #c98a5a; }
.s-small { font-size: 10px; } .s-big { font-size: 16px; } .s-huge { font-size: 22px; line-height: 1.1; }
.bb-facade { margin: 6px 0; max-width: 480px; }

/* ---------- fanzine xerox (blog y páginas largas) ---------- */
.bb-xerox {
  position: relative; padding: 16px 18px; color: var(--ink); background: var(--paper);
  border: 1px solid #000; box-shadow: 4px 4px 0 #000; overflow: hidden;
}
.bb-xerox::after { content: ""; position: absolute; inset: 0; background: url(/s/assets/textures/xerox-grain-256.54a924c17f.png); opacity: .4; mix-blend-mode: multiply; pointer-events: none; }
.bb-xerox > * { position: relative; }
.bb-xerox a, .bb-xerox a:visited { color: #b3150a; text-decoration: underline; }
.bb-xerox a:hover { color: #000; }
.bb-xerox .bbc-quote { color: #222; background: #fff; border-color: #111; border-left-color: var(--eh-red); }
.bb-xerox .bbc-quote__by { color: var(--eh-red); }
.bb-xerox .bbc-h2 { color: var(--ink); text-shadow: 2px 2px 0 var(--bb-pink); }
.bb-xerox .bbc-h3 { color: var(--eh-red); }
.bb-xerox .c-white, .bb-xerox .c-cream { color: var(--ink); background: #fff; }
.bb-xerox .c-cyan, .bb-xerox .c-lime, .bb-xerox .c-yellow { color: var(--ink); background: var(--bb-cyan); padding: 0 2px; }
.bb-xerox .bbc-img { border: 4px solid #fff; box-shadow: 2px 2px 0 #000; }
.bb-xerox__title { margin: 0 0 4px; font: 40px/1.12 var(--font-display); text-transform: uppercase; color: var(--ink); letter-spacing: .5px; }
.bb-xerox__title span { background: var(--bb-cyan); padding: 0 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.bb-xerox__meta { margin: 0 0 12px; font: 16px/1 var(--font-term); color: #555; }
.bb-xerox__stamp { display: inline-block; padding: 1px 6px; font: 18px/1.1 var(--font-display); text-transform: uppercase; color: var(--eh-green); border: 3px solid var(--eh-green); transform: rotate(-4deg); }
.bb-xerox__cover { position: relative; float: right; width: 46%; margin: 0 0 10px 14px; padding: 6px; background: #fff; box-shadow: 3px 3px 0 #000; transform: rotate(1.5deg); }
.bb-xerox__cover img { display: block; width: 100%; height: auto; filter: grayscale(.2) contrast(1.1); }
.bb-xerox__cover::before, .bb-xerox__cover::after { content: ""; position: absolute; width: 58px; height: 16px; background: rgba(255, 255, 220, .7); top: -7px; }
.bb-xerox__cover::before { left: -14px; transform: rotate(-32deg); }
.bb-xerox__cover::after { right: -14px; transform: rotate(32deg); }
.bb-xerox__body { font: 13px/1.6 var(--font-body); max-width: 75ch; }
.bb-xerox .bb-table td { border-color: #bbb; }
.bb-xerox .bb-table tr:nth-child(even) td { background: #e9e5da; }

/* ---------- cuenta, paneles ---------- */
.bb-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; border-bottom: 2px solid var(--bb-cyan-edge); }
.bb-tabs a { display: block; padding: 4px 10px; font: var(--font-ui); text-transform: uppercase; color: #ccc; background: #1c1c1c; border: 1px solid #333; border-bottom: 0; }
.bb-tabs a:visited { color: #ccc; }
.bb-tabs a:hover { color: #fff; text-decoration: none; background: #262626; }
.bb-tabs a[aria-current="page"] { color: #002024; background: var(--gel-cyan); border-color: var(--bb-cyan-edge); }
.bb-kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 11px; }
.bb-kv dt { font: var(--font-ui); text-transform: uppercase; color: var(--bb-cyan); }
.bb-kv dd { margin: 0; overflow-wrap: anywhere; }
.bb-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin: 8px 0; padding: 8px; font: 20px/1.1 var(--font-term); color: var(--bb-lime); background: #000; border: 2px inset #444; list-style: none; }
.bb-qr { display: inline-block; padding: 8px; background: #fff; border: 2px solid #000; box-shadow: var(--hard-shadow); }
.bb-qr img { display: block; width: 200px; height: 200px; image-rendering: pixelated; }
.bb-secret { font: 18px/1.2 var(--font-term); color: var(--bb-lime); letter-spacing: 1px; overflow-wrap: anywhere; }
.bb-usercell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bb-usercell img { width: 24px; height: 24px; object-fit: cover; border: 1px solid #000; background: #000; }
.bb-avatar-sm { width: 48px; height: 48px; object-fit: cover; border: 2px solid #000; outline: 1px solid var(--bb-cyan-edge); background: #000; }
.bb-grid-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.bb-usercard { display: block; padding: 6px; text-align: center; font-size: 11px; background: var(--bb-panel-2); border: 1px solid #333; overflow-wrap: anywhere; }
.bb-usercard:hover { border-color: var(--bb-cyan); text-decoration: none; }
.bb-usercard img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 4px; background: #000; border: 2px solid #000; }
.bb-usercard small { display: block; color: var(--bb-muted); }
.bb-pill { display: inline-block; padding: 0 6px; font: var(--font-ui); text-transform: uppercase; color: #000; background: var(--bb-cyan); border: 1px solid #000; }
.bb-pill--pink { background: var(--bb-pink); color: #fff; }
.bb-pill--lime { background: var(--bb-lime); }
.bb-pill--yellow { background: var(--warn-yellow); }
.bb-pill--red { background: var(--eh-red); color: #fff; }
.bb-pill--gray { background: #555; color: #fff; }

/* ---------- mapa de Euskal Herria ---------- */
.bb-map { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.bb-map a path, .bb-map a polygon { fill: #111; stroke: var(--bb-cyan); stroke-width: 2; transition: fill .1s steps(1); }
.bb-map a:hover path, .bb-map a:focus path, .bb-map a:hover polygon, .bb-map a:focus polygon { fill: var(--eh-green); }
.bb-map a.has-artists path, .bb-map a.has-artists polygon { fill: #1b0638; }
.bb-map text { font: 10px var(--font-pixel); fill: #fff; text-transform: uppercase; pointer-events: none; }
.bb-map text.count { font: 18px var(--font-term); fill: var(--bb-lime); }
.bb-map .border-line { fill: none; stroke: var(--warn-yellow); stroke-width: 1.5; stroke-dasharray: 5 4; }
.bb-map polygon { stroke-linejoin: round; }
.bb-map a.has-artists:hover polygon, .bb-map a.has-artists:focus polygon { fill: var(--eh-green); }
.bb-map a:focus { outline: none; }
.bb-map a:focus polygon { stroke: var(--warn-yellow); stroke-dasharray: 3 2; }
.bb-map text.sm { font-size: 8px; }
.bb-map text.count.sm { font-size: 15px; }
.bb-map .sea { font: 15px var(--font-term); fill: var(--bb-cyan-deep); letter-spacing: 1px; }
.bb-map .sea.wave { fill: #0a5560; }
.bb-map .compass polygon { fill: var(--bb-cyan); }
.bb-map .compass polygon.s { fill: #333; }
.bb-map .compass text { font: 10px var(--font-pixel); fill: var(--bb-cyan); }
@media (prefers-reduced-motion: no-preference) {
  .bb-map .sea.wave { animation: bb-wave 2.4s steps(4) infinite; }
}
@keyframes bb-wave { 50% { transform: translateX(6px); } }

/* ---------- modal Win98/XP (CMS, confirmaciones) ---------- */
.bb-modal-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .6) url(/s/assets/textures/scanlines-2x4.c5c6a973d7.png); }
.bb-modal { position: fixed; left: 50%; top: 40px; z-index: 41; width: min(720px, calc(100vw - 16px)); max-height: calc(100vh - 60px); overflow: auto; transform: translateX(-50%); color: #000; background: #ece9d8; border: 2px solid #0a246a; box-shadow: 6px 6px 0 #000; }
.bb-modal__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 4px 3px 8px; font: bold 12px Tahoma, sans-serif; color: #fff; background: linear-gradient(#0a5fd8, #0a3fa6); text-shadow: 1px 1px 0 #000; }
.bb-modal__bar a.close, .bb-modal__bar a.close:visited { display: grid; place-items: center; width: 20px; height: 18px; font: bold 12px/1 Tahoma, sans-serif; color: #fff; background: linear-gradient(#e8664f, #c1300f); border: 1px solid #fff; border-radius: 3px; text-decoration: none; }
.bb-modal__body { padding: 10px; font: 11px Tahoma, Verdana, sans-serif; }
.bb-modal .bb-label { color: #0a246a; }
.bb-modal .bb-help { color: #555; }
.bb-modal .bb-input, .bb-modal .bb-textarea, .bb-modal .bb-select { color: #000; background: #fff; border-color: #7f9db9; border-style: solid; border-width: 1px; }
.bb-modal .bb-fieldset { border-color: #aca899; }
.bb-modal .bb-fieldset legend { color: #0a246a; }
.bb-modal .bb-editor__preview { color: #fff; background: #111; }

/* ---------- 404 / 500 ---------- */
.bb-error { padding: 20px; text-align: center; }
.bb-error__code { margin: 0; font: 120px/0.9 var(--font-display); color: var(--bb-pink); -webkit-text-stroke: 2px #000; text-shadow: 6px 6px 0 var(--bb-purple), 10px 10px 0 #000; }
.bb-error__msg { margin: 10px 0 14px; font: 26px/1.1 var(--font-term); color: var(--bb-lime); }
.bb-error__bsod { max-width: 520px; margin: 0 auto 14px; padding: 10px 14px; text-align: left; font: 16px/1.25 var(--font-term); color: #fff; background: #0000aa; border: 2px solid #fff; }

/* ---------- footer ---------- */
.bb-footer { border-top: 1px solid #222; }
.bb-footer__tape { height: 26px; background: url(/s/assets/textures/caution-tape-kontuz.637afa364b.png) repeat-x; animation: bb-tape 20s linear infinite; }
.bb-footer__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 10px; }
.bb-footer__buttons img { image-rendering: pixelated; display: block; }
.bb-footer__legal { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 12px 10px; font-size: 10px; color: #666; }
.bb-footer__legal nav { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.bb-footer__legal nav a, .bb-footer__legal nav a:visited, .bb-footer__legal nav button { color: #888; }
.bb-footer__legal nav button { padding: 0; font: 10px var(--font-body); background: none; border: 0; }
.bb-footer__legal nav button:hover { color: #fff; text-decoration: underline; }
.bb-footer__legal form { display: inline; margin: 0; }
.bb-credit { margin: 0; font: 8px var(--font-pixel); color: #444; white-space: nowrap; }
.bb-credit a, .bb-credit a:visited { color: #444; }
.bb-credit a:hover { color: var(--bb-cyan); text-decoration: none; }
.bb-quiet { font: 8px var(--font-pixel); color: #666; }

/* ---------- efectos (estela del cursor, purpurina, nieve, corazones, burbujas) ---------- */
.fx-layer { position: fixed; inset: 0; z-index: 35; overflow: hidden; pointer-events: none; }
.fx-star { position: fixed; z-index: 36; width: 9px; height: 9px; pointer-events: none; background: url(/s/assets/icons/brand/diamond-pixel-15.9a0624019f.png) center / contain no-repeat; image-rendering: pixelated; animation: fx-star .7s linear forwards; }
.fx-flake, .fx-heart, .fx-bubble, .fx-glitter { position: absolute; top: -20px; pointer-events: none; animation: fx-fall linear infinite; }
.fx-flake { width: 6px; height: 6px; background: #fff; box-shadow: 0 0 3px #fff; }
.fx-heart { width: 16px; height: 16px; background: url(/s/assets/icons/heart-pixel-pink-16.35403d68a0.png) center / contain no-repeat; image-rendering: pixelated; animation-name: fx-rise; top: auto; bottom: -20px; }
.fx-bubble { width: 18px; height: 18px; border: 1px solid rgba(230, 255, 255, .8); border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .9), rgba(3, 247, 254, .15) 40%, transparent 70%); animation-name: fx-rise; top: auto; bottom: -24px; }
.fx-glitter { width: 3px; height: 3px; background: #fff; box-shadow: 0 0 4px var(--bb-cyan); animation-name: fx-twinkle; }

/* ---------- animaciones ---------- */
@keyframes bb-tape { to { background-position: -322px 0; } }
@keyframes bb-blink { 50% { opacity: 0; } }
@keyframes bb-viz { to { transform: scaleY(.3); transform-origin: bottom; } }
@keyframes fx-star { to { opacity: 0; transform: translateY(14px) scale(.4); } }
@keyframes fx-fall { to { transform: translateY(110vh); } }
@keyframes fx-rise { to { transform: translateY(-110vh); } }
@keyframes fx-twinkle { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.blink { animation: bb-blink 1s steps(1) infinite; }

/* ---------- modo tranquilo (cookie) y reduced motion ---------- */
html.is-quiet .bb-header { background-image: url(/s/assets/textures/sparkle-tile-black.still.bb06af129b.png); }
html.is-quiet .bb-marquee__track, html.is-quiet .bb-footer__tape, html.is-quiet .bb-tape-divider,
html.is-quiet .blink, html.is-quiet .bb-header__meta .cursor, html.is-quiet .bb-flash--blink, html.is-quiet .bb-player.is-loading .bb-player__viz i { animation: none; }
html.is-quiet .fx-layer, html.is-quiet .fx-star { display: none; }
@media (prefers-reduced-motion: reduce) {
  .bb-marquee__track, .bb-footer__tape, .bb-tape-divider, .blink, .bb-header__meta .cursor, .bb-flash--blink, .bb-player.is-loading .bb-player__viz i { animation: none; }
  .fx-layer, .fx-star { display: none; }
}

/* ---------- responsive (DESIGN.md §9) ---------- */
@media (max-width: 980px) {
  body { padding-top: 8px; }
  .bb-page { width: auto; max-width: 960px; margin-left: 8px; margin-right: 8px; }
}
@media (max-width: 760px) {
  /* Cabecera compacta: logo | lema | ikurriña e idioma, en rejilla (logo y bandera nunca se tocan). */
  .bb-header, .bb-header--section, .bb-header--compact {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 6px 10px;
    height: auto; min-height: 0; padding: 8px 8px 8px 10px;
  }
  .bb-header__logo-link { position: static; grid-column: 1; grid-row: 1 / span 2; }
  .bb-header__logo, .bb-header--section .bb-header__logo { width: 96px; }
  .bb-header--compact .bb-header__logo { width: 60px; }
  .bb-header__claim, .bb-header--section .bb-header__claim, .bb-header--compact .bb-header__claim { position: static; grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 24px; line-height: .95; overflow-wrap: anywhere; }
  .bb-header__claim small { margin-top: 4px; font-size: 13px; line-height: 1.05; letter-spacing: 1.5px; }
  .bb-header__meta, .bb-header__gems, .bb-header__burst { display: none; }
  .bb-header__flag, .bb-header--compact .bb-header__flag { position: static; grid-column: 3; grid-row: 1; justify-self: end; align-self: start; width: 54px; height: auto; }
  .bb-lang, .bb-header:not(.bb-header--section):not(.bb-header--compact) .bb-lang { position: static; grid-column: 3; grid-row: 2; justify-self: end; align-self: end; }
  .bb-lang button { min-width: 40px; height: 34px; padding: 0 8px; font-size: 11px; }

  .bb-cols { display: flex; flex-direction: column; }
  .bb-side { display: contents; }
  .bb-main { order: 1; }
  .bb-side > * { order: 2; }
  .bb-side > .bb-window--event { order: 0; }
  .bb-two, .bb-three, .bb-release, .bb-form-grid, .bb-form-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .bb-event { grid-template-columns: 64px minmax(0, 1fr); }
  .bb-event__flyer { height: 64px; font-size: 13px; }
  .bb-event__ftext--l { font-size: 15px; }
  .bb-event__ftext--m { font-size: 12px; }
  .bb-event__ftext--s { font-size: 10px; }
  .bb-event__burst { grid-column: 2; width: 48px; height: 48px; }
  .bb-event__date { font-size: 22px; }

  /* Foro: filas apiladas, una tarjeta por subforo */
  .bb-forum thead, .bb-forum .num, .bb-forum .last { display: none; }
  .bb-forum .tmeta--mobile { display: block; }
  .bb-post { grid-template-columns: minmax(0, 1fr); }
  .bb-post__author { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; border-right: 0; border-bottom: 1px solid #262626; }
  .bb-post__avatar { width: 48px; height: 48px; margin: 0; }
  .bb-post__meta { display: none; }
  .bb-post__foot .bb-btn { min-height: 40px; padding: 4px 12px; }

  .bb-kv { grid-template-columns: minmax(0, 1fr); }
  /* Listas con acciones (Top 8, peticiones...): si no caben, los botones bajan a su propia línea. */
  .bb-list li { flex-wrap: wrap; }
  .bb-list .meta { white-space: normal; }
  .bb-grid-users { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
  .bb-footer__legal { flex-direction: column; gap: 6px; align-items: flex-start; }
  /* Botones de 40 px de alto como mínimo (DESIGN.md §9), con el texto centrado. */
  .bb-btn, .bb-btn98 { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; }
  .bb-btn { padding-top: 4px; padding-bottom: 4px; }
  .bb-toolbar .bb-btn98 { min-height: 36px; padding: 0 9px; }
  /* 16 px para que el móvil no haga zoom al escribir. Los textarea conservan su alto (antes se quedaban en 36 px). */
  .bb-input, .bb-select { min-height: 40px; font-size: 16px; }
  .bb-textarea { font-size: 16px; }
  .bb-search .bb-input { width: 100%; }
  .bb-search { flex: 1; }
  .bb-xerox__cover { float: none; width: auto; margin: 0 0 12px; }
  .bb-xerox__title { font-size: 30px; }
  .bb-error__code { font-size: 80px; }
  .bb-tabs a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; }
  .bb-codes { grid-template-columns: minmax(0, 1fr); }

  /* La próxima fiesta sube arriba, pero compacta. Las cajas del sidebar que repiten la página (.is-here) no salen. */
  .bb-window--event .bb-flyer { min-height: 104px; }
  .bb-window--event .bb-flyer__title { font-size: 24px; }
  .bb-window--event .bb-flyer__burst { width: 58px; height: 58px; }
  .bb-window--event .bb-countdown b { font-size: 20px; }
  .bb-side .is-here { display: none; }
  /* Objetivos táctiles de 40 px: paginación, enlaces legales y webring. */
  .bb-pager { gap: 4px; font-size: 12px; }
  .bb-pager a, .bb-pager b, .bb-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 10px; }
  .bb-footer__legal nav { gap: 0 2px; }
  .bb-footer__legal nav a, .bb-footer__legal nav button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; font-size: 11px; }
  .bb-webring a { display: inline-flex; align-items: center; min-height: 40px; }
  .bb-post__body { min-height: 56px; }
}
@media (min-width: 761px) { .tmeta--mobile, .bb-forum .tmeta--mobile { display: none; } }
@media (hover: none) { .fx-star { display: none; } }

/* =====================================================================
   PERFILES MySpace (.pf-*). Solo consumen variables --pf-* generadas por
   el servidor desde tokens validados; nada de CSS del usuario.
   ===================================================================== */
body.is-profile .bb-page { background: transparent; }
body.is-profile .bb-footer { background: #000; }
.pf-wrap { display: flex; flex-direction: column; gap: 6px; padding: 10px; min-width: 0; }
/* Acciones de la WEB, fuera del contenedor del tema: siempre visibles y con estilo BB. */
.pf-safebar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin: 0; }
.pf-safebar form { margin: 0; }
.pf-safebar a, .pf-safebar button, .pf-safe-actions a, .pf-safe-actions button {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font: var(--font-ui); text-transform: uppercase; text-decoration: none;
  color: #fff; background: #111; border: 1px solid #555; cursor: var(--cur-hand);
}
.pf-safebar a:visited, .pf-safe-actions a:visited { color: #fff; }
.pf-safebar .report, .pf-safe-actions .report { color: #000; background: var(--warn-yellow); border-color: #000; }
.pf-safebar a:hover, .pf-safebar button:hover, .pf-safe-actions a:hover, .pf-safe-actions button:hover { filter: brightness(1.2); text-decoration: none; }

.pf {
  contain: layout paint; isolation: isolate; position: relative; overflow: hidden; min-width: 0;
  font-family: var(--pf-font); font-size: var(--pf-size); color: var(--pf-text); cursor: var(--pf-cursor);
}
.pf a, .pf a:visited { color: var(--pf-link); cursor: var(--cur-hand); }
.pf a:hover { color: var(--pf-accent); }
.pf--scanlines::after { content: ""; position: absolute; inset: 0; background: url(/s/assets/textures/scanlines-2x4.c5c6a973d7.png); opacity: .35; pointer-events: none; }
.pf-banner {
  position: relative; display: flex; align-items: flex-end; gap: 10px; min-height: 170px; padding: 12px 16px; overflow: hidden;
  border: var(--pf-border-w) var(--pf-border-style) var(--pf-border); border-radius: var(--pf-radius);
  /* El lado oscuro es el color de las cajas con un 25 % de negro (no negro puro): así el nick se lee
     también en temas claros, y el aviso de contraste (theme-contrast.js, bannerDark) mide lo mismo. */
  background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--pf-accent) 55%, transparent), transparent 45%), radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--pf-link) 55%, transparent), transparent 50%), linear-gradient(120deg, var(--pf-box), color-mix(in srgb, var(--pf-box) 75%, #000) 70%);
}
/* Cajas claras sin foto de banner: nick oscuro sin contorno negro, con sombra dura del color de detalles. */
.pf--light .pf-banner:not(.pf-banner--img) h1 { -webkit-text-stroke: 0; text-shadow: 3px 3px 0 var(--pf-accent); }
.pf-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-banner h1 { position: relative; margin: 0; font: 56px/0.9 var(--font-display); text-transform: uppercase; color: var(--pf-header); -webkit-text-stroke: 1px #000; text-shadow: 3px 3px 0 var(--pf-border), 6px 6px 0 #000; overflow-wrap: anywhere; }
.pf-mood { position: relative; margin-left: auto; max-width: 55%; padding: 2px 8px; font: 20px/1.1 var(--font-term); color: var(--pf-accent); background: rgba(0, 0, 0, .65); border: 1px solid var(--pf-accent); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-mood--marquee { text-overflow: clip; }
.pf-mood--marquee span { display: inline-block; padding-left: 100%; animation: pf-mood 14s linear infinite; }
@keyframes pf-mood { to { transform: translateX(-100%); } }
.pf-cols { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.pf-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pf-box { background: color-mix(in srgb, var(--pf-box) calc(var(--pf-box-alpha) * 100%), transparent); border: var(--pf-border-w) var(--pf-border-style) var(--pf-border); border-radius: var(--pf-radius); overflow: hidden; min-width: 0; }
.pf-box > h2 { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0; padding: 0 8px; min-height: 24px; font: 16px/24px var(--font-pixel); text-transform: uppercase; color: var(--pf-title-fg); background: var(--pf-title-bg, var(--pf-title)); overflow: hidden; white-space: nowrap; }
.pf-box > h2::before { content: ""; position: absolute; left: 3px; right: 3px; top: 1px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, .45); pointer-events: none; }
.pf--title-flat .pf-box > h2::before { display: none; }
.pf-box > h2 small { position: relative; font: var(--font-ui); text-transform: none; }
.pf-box > div { padding: 8px; overflow-wrap: anywhere; }
.pf-box > div.pf-flush { padding: 0; }
.pf-avatar { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #000 url(/s/assets/textures/checker-punk-32.5de02816d5.png); border: 3px solid #000; outline: 2px solid var(--pf-border); }
.pf-facts { margin: 8px 0 0; line-height: 1.6; }
.pf-facts b { color: var(--pf-accent); }
.pf-details { width: 100%; border-collapse: collapse; font-size: 11px; }
.pf-details th { width: 42%; text-align: left; padding: 3px 6px; font-weight: bold; color: var(--pf-text); background: color-mix(in srgb, var(--pf-title) 22%, var(--pf-box)); /* texto normal: su contraste con las cajas ya se vigila en el editor */ border: 1px solid var(--pf-border); vertical-align: top; }
.pf-details td { padding: 3px 6px; border: 1px solid var(--pf-border); overflow-wrap: anywhere; }
.pf-top8 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; font-size: 11px; }
.pf-top8 a { display: block; overflow-wrap: anywhere; }
.pf-top8 img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #000; border: 2px solid #000; outline: 1px solid var(--pf-border); margin-bottom: 3px; }
.pf-top8__empty { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 3px; font: 28px var(--font-term); color: var(--pf-border); border: 2px dashed var(--pf-border); }
.pf-top8__slot { opacity: .7; }
.pf-top8__slot:hover, .pf-top8__slot:focus { opacity: 1; }
.pf-top8__none, .pf-top8__note { margin: 0; font-size: 11px; color: var(--pf-text); opacity: .8; }
.pf-top8__note { margin-top: 6px; text-align: right; }
.pf-comment { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; padding: 8px; border-bottom: 1px dotted var(--pf-border); }
.pf-comment > a > img { width: 80px; height: 80px; object-fit: cover; background: #000; border: 2px solid #000; }
.pf-comment time { display: block; font-size: 10px; opacity: .75; margin-bottom: 4px; }
.pf-comment form { display: inline; margin: 0; }
.pf-comment .bb-linkbtn { font-size: 10px; color: var(--pf-link); }
.pf-wall-head { margin: 0; padding: 6px 8px; font-size: 11px; border-bottom: 1px dotted var(--pf-border); }
.pf-wall-form { padding: 8px; border-top: 1px dotted var(--pf-border); }
.pf-wall-form .bb-textarea { min-height: 70px; }
.pf-safe-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pf .pf-safe-actions a, .pf .pf-safe-actions a:visited, .pf .pf-safe-actions a:hover { color: #fff; } /* caja de la web: no hereda el color de enlaces del tema */
.pf-safe-actions form { margin: 0; }
.pf-safe-actions a, .pf-safe-actions button { width: 100%; }
.pf-blinkies { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.pf-blinkies img { image-rendering: pixelated; display: block; }
.pf-online { display: inline-block; margin-top: 4px; }
.pf .bb-player { box-shadow: none; }
.pf .bbc-quote { color: inherit; background: rgba(0, 0, 0, .35); }
.pf .bb-list li:nth-child(even) { background: transparent; }
.pf .bb-list li { border-bottom-color: var(--pf-border); }
.pf .bb-list .meta { color: var(--pf-text); }

/* Perfil: barra del dueño (fuera del tema, con el estilo de la web) */
.pf-ownerbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 6px 8px; font-size: 11px; color: #fff; background: #000; border: 1px solid var(--bb-cyan-edge); box-shadow: var(--hard-shadow); }
.pf-ownerbar p { flex: 1 1 260px; margin: 0; }
.pf-ownerbar b { color: var(--bb-cyan); }
.pf-ownerbar__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-ownerbar--visitor { border: 2px solid var(--warn-yellow); }
.pf-ownerbar--visitor b { color: var(--warn-yellow); }
.pf-owner-hint { margin: 0; font-size: 11px; }
.pf-top8__count { margin: 0 0 6px; font-size: 11px; }

/* Editor de perfil y tema (/cuenta/perfil): asistente por pasos con vista previa en vivo */
#pe-theme, #pe-preset-form { display: none; } /* vacíos: sus campos van repartidos con form="..." */
.pe { display: flex; flex-direction: column; gap: 10px; }
.pe-steps ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.pe-steps a { display: flex; align-items: center; gap: 6px; height: 100%; padding: 4px 8px 4px 4px; font: var(--font-ui); text-transform: uppercase; color: #fff; background: var(--gel-black); border: 1px solid #000; box-shadow: var(--hard-shadow); text-decoration: none; }
.pe-steps a:visited { color: #fff; }
.pe-steps a:hover { color: var(--bb-cyan); text-decoration: none; }
.pe-steps b, .pe-num { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; font: 16px/1 var(--font-display); color: #000; text-shadow: none; background: var(--warn-yellow); border: 1px solid #000; border-radius: 50%; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.pe-num { margin-right: 8px; }
.pe-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; align-items: start; }
.pe-main { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pe-side { grid-column: 2; grid-row: 1; position: sticky; top: 10px; z-index: 7; min-width: 0; }
.pe-step { scroll-margin-top: calc(var(--pe-sticky, 0px) + 10px); }
.pe-lead { max-width: 75ch; margin: 0 0 8px; color: var(--bb-cream); }
.pe-saved { margin: 0 0 8px; }
.pe-sub { margin: 0; font: var(--font-ui); text-transform: uppercase; color: var(--bb-cyan); }
.pe-what { margin: 2px 0 6px; font-size: 11px; }

/* Vista previa: un mini-perfil que se pinta con las mismas variables --pf-* que el perfil de verdad */
.pe-preview > summary { list-style: none; cursor: var(--cur-hand); }
.pe-preview > summary::-webkit-details-marker { display: none; }
.pe-preview__toggle { position: relative; font: bold 10px var(--font-body); }
.pe-preview__toggle::before { content: "▲"; }
.pe-preview:not([open]) .pe-preview__toggle::before { content: "▼"; }
#pf-preview-bg { position: relative; padding: 8px; overflow: hidden; border: 2px inset #444; }
#pf-preview { font-family: var(--pf-font); font-size: var(--pf-size); color: var(--pf-text); }
#pf-preview a { color: var(--pf-link); }
#pf-preview .pf-banner { flex-wrap: wrap; gap: 4px; min-height: 64px; padding: 6px 8px; }
#pf-preview .pf-banner h1 { font-size: 26px; }
#pf-preview .pf-mood { margin-left: 0; max-width: 100%; font-size: 15px; }
.pe-pv { display: grid; gap: 6px; margin-top: 6px; }
.pe-pv .pf-box > div { padding: 6px; }
.pe-pv__avatar { float: left; width: 40px; height: 40px; margin: 0 6px 2px 0; object-fit: cover; background: #000; border: 2px solid #000; }
.pe-pv__text { margin: 0; line-height: 1.35; }
.pe-pv__text b { color: var(--pf-accent); }
.pe-pv .pf-top8 { gap: 4px; }
.pe-pv .pf-top8__empty { margin: 0; font-size: 18px; }
/* Zona resaltada al pasar por un color: lo demás se oscurece y la zona sale con borde KONTUZ */
#pf-preview::after { content: ""; position: absolute; inset: 0; z-index: 3; background: rgba(0, 0, 0, .62); opacity: 0; pointer-events: none; }
#pf-preview-bg[data-hl]:not([data-hl="bg"]) #pf-preview::after { opacity: 1; }
#pf-preview-bg[data-hl="box"] [data-zone~="box"], #pf-preview-bg[data-hl="border"] [data-zone~="border"],
#pf-preview-bg[data-hl="title"] [data-zone~="title"], #pf-preview-bg[data-hl="titleText"] [data-zone~="titleText"],
#pf-preview-bg[data-hl="text"] [data-zone~="text"], #pf-preview-bg[data-hl="link"] [data-zone~="link"],
#pf-preview-bg[data-hl="accent"] [data-zone~="accent"], #pf-preview-bg[data-hl="headerText"] [data-zone~="headerText"] {
  position: relative; z-index: 4; outline: 2px dashed var(--warn-yellow); outline-offset: 1px;
}
#pf-preview-bg[data-hl="bg"] { outline: 3px dashed var(--warn-yellow); outline-offset: -5px; }
#pf-preview-bg[data-hl="bg"] #pf-preview { opacity: .3; }
.pe-preview__now { margin: 6px 0 0; font: var(--font-ui); text-transform: uppercase; color: var(--warn-yellow); }
.pe-preview__actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }

/* 1. Galería de temas: miniatura = barra con el nombre (b) + fondo (i) con una cajita dentro.
   Contrato: .pe-preset--<clave> b {...} y .pe-preset--<clave> i {...} a mano ganan a las muestras
   generadas (:where(), /tema-editor/<hash>.css), que salen solas para cualquier preset nuevo. */
.pe-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pe-preset { position: relative; display: block; width: 100%; padding: 0; font: inherit; text-align: left; color: #fff; background: #000; border: 2px solid #000; box-shadow: var(--hard-shadow); cursor: var(--cur-hand); }
.pe-preset b { display: block; height: 22px; padding: 0 6px; font: var(--font-ui); line-height: 22px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #000; }
.pe-preset i { position: relative; display: block; height: 84px; background-color: #111; image-rendering: pixelated; }
.pe-preset__win { position: absolute; inset: 14px 16px 12px; overflow: hidden; background: var(--pp-box, #111); border: 2px solid var(--pp-border, #333); border-radius: var(--pp-radius, 0); }
.pe-preset__win span { display: block; }
.pe-preset__win span:nth-child(1) { height: 10px; background: var(--pp-title-bg, #555); }
.pe-preset__win span:nth-child(2) { width: 70%; height: 3px; margin: 8px 8px 0; background: var(--pp-text, #fff); }
.pe-preset__win span:nth-child(3) { width: 40%; height: 3px; margin: 6px 8px 0; background: var(--pp-link, #03f7fe); }
.pe-preset:hover, .pe-preset:focus-visible { outline: 2px dotted var(--bb-cyan); outline-offset: 2px; }
.pe-preset[aria-current="true"] { border-color: var(--warn-yellow); }
.pe-preset[aria-current="true"]::after { content: "✓"; position: absolute; top: -9px; right: -7px; display: grid; place-items: center; width: 22px; height: 22px; font: bold 13px/1 var(--font-body); color: #000; background: var(--warn-yellow); border: 1px solid #000; border-radius: 50%; }
.pe-preset--ciber-cian b { background: var(--gel-cyan); color: #002024; } .pe-preset--ciber-cian i { background: url(/s/assets/textures/checker-cyan-dark-64.b0eb5f9978.png); }
.pe-preset--ikurrina b { background: #009a44; color: #000; } .pe-preset--ikurrina i { background: #da291c url(/s/assets/flags/ikurrina-pixel-25x14.463d5a85d8.png) center / 50px 28px; }
.pe-preset--glitter-rosa b { background: var(--gel-pink); color: #4a0026; }
.pe-preset--fotocopia-punk b { background: #111; color: #fff; } .pe-preset--fotocopia-punk i { background: #f2efe6 url(/s/assets/textures/xerox-grain-256.54a924c17f.png); }
.pe-preset--frutiger-aero b { background: var(--gel-cyan); color: #002024; } .pe-preset--frutiger-aero i { background: linear-gradient(#050b14, #0b2a3a); }
.pe-preset--vista-glass b { background: var(--gel-black); color: #fff; } .pe-preset--vista-glass i { background: linear-gradient(#bfe6ff, #5aa9e6); }
.pe-preset--ajedrez-ska b { background: #fff; color: #000; } .pe-preset--ajedrez-ska i { background: url(/s/assets/textures/checker-punk-32.5de02816d5.png); }
.pe-preset--noche-de-bilbo b { background: #7a2cff; color: #fff; }
.pe-restart { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 11px; color: var(--bb-muted); }

/* 2. Fotos */
.pe-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pe-img { display: flex; flex-direction: column; min-width: 0; padding: 8px; background: #0a0a0a; border: 1px solid #262626; }
.pe-img form { margin: 0; }
.pe-img figure { display: grid; place-items: center; height: 110px; margin: 0 0 4px; overflow: hidden; background: #000 url(/s/assets/textures/checker-punk-32.5de02816d5.png); border: 2px inset #444; }
.pe-img figure img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pe-img--avatar figure img { width: 100px; height: 100px; object-fit: cover; }
.pe-img .bb-label { margin-top: 4px; }
.pe-file { width: 100%; font-size: 11px; color: var(--bb-muted); }
.pe-file::file-selector-button { margin-right: 6px; padding: 3px 8px; font: 11px var(--font-body); color: #000; background: #c0c0c0; border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040; cursor: var(--cur-hand); }
.pe-img__actions, .pe-img__rm { margin-top: 6px; }

/* 3. Colores: cada fila dice qué cambia, con un mini-diagrama de la zona (en amarillo KONTUZ) */
.pe-color { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; margin: 0 -4px; padding: 6px 4px; border: 1px dashed transparent; }
.pe-color + .pe-color { border-top-color: #262626; }
.pe-color:hover, .pe-color:focus-within { background: #161616; border-color: #555; }
.pe-color__txt { min-width: 0; }
.pe-color__txt label { display: block; font-weight: bold; color: #fff; }
.pe-color__txt small { display: block; font-size: 11px; line-height: 1.35; color: var(--bb-muted); }
.pe-color__in { display: flex; gap: 4px; align-items: center; }
.pe-swatch { width: 52px; height: 32px; padding: 2px; cursor: var(--cur-hand); background: #c0c0c0; border: 2px outset #fff; border-right-color: #404040; border-bottom-color: #404040; }
.pe-color .bb-input--hex { width: 92px; font-family: var(--font-term); font-size: 18px; text-transform: lowercase; }
.pe-dia {
  --d-page: #262626; --d-nick: #8a8a8a; --d-acc: #5a5a5a; --d-border: #6a6a6a; --d-box: #3c3c3c; --d-bar: #7a7a7a; --d-bartx: #bdbdbd; --d-txt: #9a9a9a; --d-lnk: #9a9a9a;
  display: block; width: 56px; height: 44px; border: 1px solid #000; background-color: var(--d-page); background-repeat: no-repeat;
  background-image: linear-gradient(var(--d-lnk), var(--d-lnk)), linear-gradient(var(--d-txt), var(--d-txt)), linear-gradient(var(--d-txt), var(--d-txt)),
    linear-gradient(var(--d-bartx), var(--d-bartx)), linear-gradient(var(--d-bar), var(--d-bar)), linear-gradient(var(--d-box), var(--d-box)),
    linear-gradient(var(--d-border), var(--d-border)), linear-gradient(var(--d-acc), var(--d-acc)), linear-gradient(var(--d-nick), var(--d-nick));
  background-position: 11px 36px, 11px 27px, 11px 31px, 10px 21px, 7px 19px, 7px 19px, 5px 17px, 38px 4px, 5px 4px;
  background-size: 16px 3px, 32px 3px, 26px 3px, 14px 3px, 42px 7px, 42px 22px, 46px 26px, 13px 8px, 28px 8px;
}
.pe-dia--bg { --d-page: var(--warn-yellow); }
.pe-dia--headerText { --d-nick: var(--warn-yellow); }
.pe-dia--accent { --d-acc: var(--warn-yellow); }
.pe-dia--title { --d-bar: var(--warn-yellow); --d-bartx: #7a7a7a; }
.pe-dia--titleText { --d-bartx: var(--warn-yellow); --d-bar: #4a4a4a; }
.pe-dia--box { --d-box: var(--warn-yellow); --d-txt: #7a6a00; --d-lnk: #7a6a00; }
.pe-dia--border { --d-border: var(--warn-yellow); }
.pe-dia--text { --d-txt: var(--warn-yellow); }
.pe-dia--link { --d-lnk: var(--warn-yellow); --d-txt: #5a5a5a; }
/* Fichas de elegir (estilo de barra, letra, borde, cursor): radio oculto, ficha entera clicable */
.pe-ts input, .pe-font input, .pe-bs input, .pe-cur input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pe-ts, .pe-font, .pe-bs, .pe-cur { position: relative; cursor: var(--cur-hand); background: #0a0a0a; border: 2px solid #262626; }
:is(.pe-ts, .pe-font, .pe-bs, .pe-cur):hover { border-color: #555; }
:is(.pe-ts, .pe-font, .pe-bs, .pe-cur):has(input:checked) { border-color: var(--bb-cyan); }
:is(.pe-ts, .pe-font, .pe-bs, .pe-cur):has(input:focus-visible) { outline: 2px dotted var(--bb-cyan); outline-offset: 2px; }
:is(.pe-ts, .pe-bs, .pe-cur) b, .pe-font span { font: var(--font-ui); text-transform: uppercase; color: #ccc; }
:is(.pe-ts, .pe-bs, .pe-cur):has(input:checked) b, .pe-font:has(input:checked) span { color: var(--bb-cyan); }
.pe-ts-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin-bottom: 4px; }
.pe-ts i { display: block; height: 24px; padding: 0 6px; overflow: hidden; font: 12px/24px var(--font-pixel); font-style: normal; text-transform: uppercase; white-space: nowrap; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .45); border-bottom: 1px solid #000; }
.pe-ts b { display: block; padding: 3px 5px; font-size: 9px; }
.pe-ts--gel-cyan i { color: #002024; text-shadow: none; } .pe-ts--gel-pink i { color: #4a0026; text-shadow: none; } .pe-ts--gel-lime i { color: #1d3300; text-shadow: none; }
.pe-ts--flat i { color: var(--pe-flat-fg, #fff); text-shadow: none; }
.pe-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.pe-font { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; }
.pe-font b { font-size: 18px; font-weight: normal; line-height: 1.2; text-transform: none; color: #fff; white-space: nowrap; overflow: hidden; }
.pe-font--press-start b { font-size: 10px; line-height: 22px; }
.pe-font--vt323 b { font-size: 22px; line-height: 1; }
.pe-bs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-bottom: 4px; }
.pe-bs { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; }
.pe-bs i { display: block; width: 100%; height: 22px; background: #111; border: 4px solid var(--bb-cyan-deep); }
.pe-bs--dashed i { border-style: dashed; } .pe-bs--dotted i { border-style: dotted; } .pe-bs--double i { border-style: double; border-width: 6px; }
.pe-bs--ridge i { border-style: ridge; } .pe-bs--outset i { border-style: outset; }
.pe-cursors { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-cur { display: flex; align-items: center; gap: 6px; padding: 6px 10px; }
.pe-cur img { image-rendering: pixelated; }
.pe-cur i { display: block; width: 14px; height: 14px; border: 1px dashed #777; }
.pe-checks { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.pe-checks .bb-check { margin: 2px 0; }
.pe-blinkies { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.pe-blinkies label { display: flex; align-items: center; gap: 6px; padding: 3px; background: #0a0a0a; border: 1px solid #262626; }
.pe-blinkies img { image-rendering: pixelated; max-width: 150px; }
.pe-range { display: flex; align-items: center; gap: 6px; }
.pe-range input[type="range"] { flex: 1; min-width: 0; accent-color: var(--bb-cyan); }
.pe-range output { min-width: 44px; font: 16px var(--font-term); color: var(--bb-lime); }
.pe-warnbox { margin: 10px 0 0; }
.pe-warnbox .bb-flash { font-weight: normal; }
.pe-issues { margin: 4px 0 8px; padding: 0 0 0 18px; }
.pe-issues li { margin: 4px 0; }
.pe-issues small { font-size: 10px; }
.pe-issues .bb-btn98 { margin-left: 4px; padding: 0 6px; }

/* 5. Avanzado: plegado por defecto */
.pe-adv > summary { list-style: none; cursor: var(--cur-hand); }
.pe-adv > summary::-webkit-details-marker { display: none; }
.pe-adv__hint { position: relative; font: var(--font-ui); text-transform: uppercase; color: #ccc; text-shadow: none; }
.pe-adv__hint::after { content: " ▼"; }
.pe-adv[open] .pe-adv__hint::after { content: " ▲"; }
.pe-step--adv .pe-adv:not([open]) > summary { border-bottom: 0; }

/* Barra de "sin guardar": sale (con JS) en cuanto tocas el aspecto, con cinta KONTUZ */
.pe-savebar { position: sticky; bottom: 8px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 10px; background: #000; border: 6px solid; border-image: repeating-linear-gradient(45deg, #ffe600 0 8px, #000 8px 16px) 6; box-shadow: var(--hard-shadow); }
.pe-savebar p { flex: 1 1 200px; margin: 0; font-weight: bold; color: var(--warn-yellow); }

/* Cuenta (/cuenta/*): sesiones legibles */
.ac-ua { display: block; margin-top: 2px; font-size: 10px; color: var(--bb-muted); overflow-wrap: anywhere; }
.ac-sessions tr.is-current b { color: var(--bb-lime); }
.ac-closeall { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }

@media (max-width: 760px) {
  /* Perfil en una columna: cabecera (banner + foto con datos), contacto, detalles, canción, sobre mí,
     posts, Top 8 y muro; intereses, visitas y blinkies al final (no tienen nada que pulsar). */
  .pf-wrap { padding: 0; }
  .pf-ownerbar__actions { width: 100%; }
  .pf-ownerbar__actions .bb-btn { flex: 1 1 140px; }
  .pf-safebar a, .pf-safebar button { min-height: 36px; }
  .pf-banner { flex-wrap: wrap; gap: 6px; min-height: 104px; padding: 10px; }
  .pf-banner h1 { font-size: 38px; }
  .pf-mood { margin-left: 0; max-width: 100%; font-size: 18px; }
  .pf-cols { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .pf-col { display: contents; }
  .pf-sec--interests, .pf-sec--visits, .pf-blinkies { order: 1; }
  .pf-id > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: start; }
  .pf-avatar { width: 112px; }
  .pf-facts { margin: 0; font-size: 11px; line-height: 1.5; }
  .pf-online img { max-width: 100%; height: auto; }
  .pf-safe-actions a, .pf-safe-actions button { justify-content: center; min-height: 40px; }
  .pf-top8 { gap: 4px; }
  .pf-comment { grid-template-columns: 52px minmax(0, 1fr); }
  .pf-comment > a > img { width: 48px; height: 48px; }
  .pf-comment .bb-linkbtn, .pf-comment .bb-small { display: inline-block; padding: 6px 0; }

  /* Editor: vista previa arriba, pegada y plegable; controles grandes */
  .pe-steps a { flex-direction: column; justify-content: flex-start; gap: 2px; padding: 4px 2px; font-size: 9px; text-align: center; }
  .pe-grid { grid-template-columns: minmax(0, 1fr); }
  .pe-side, .pe-main { grid-column: 1; grid-row: auto; }
  .pe-side { top: 0; }
  .pe-preview .bb-window__body { padding: 6px; }
  .pe-preview .bb-help { display: none; }
  #pf-preview-bg { padding: 6px; }
  #pf-preview .pf-banner { min-height: 44px; padding: 4px 6px; }
  #pf-preview .pf-banner h1 { font-size: 22px; }
  #pf-preview .pf-mood { font-size: 13px; }
  .pe-pv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pe-pv__avatar { width: 28px; height: 28px; }
  .pe-pv__text { font-size: 11px; }
  .pe-pv .pf-top8 { gap: 3px; }
  .pe-pv .pf-top8__empty { font-size: 14px; border-width: 1px; }
  .pe-preview__actions .bb-btn { min-height: 32px; padding-top: 6px; padding-bottom: 6px; }
  .pe-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-preset i { height: 70px; }
  .pe-images { grid-template-columns: minmax(0, 1fr); }
  .pe-color { grid-template-columns: 48px minmax(0, 1fr); }
  .pe-color__in { grid-column: 2; }
  .pe-dia { width: 48px; height: 40px; background-size: 14px 3px, 26px 3px, 20px 3px, 12px 3px, 36px 7px, 36px 20px, 40px 24px, 11px 8px, 24px 8px; background-position: 9px 33px, 9px 25px, 9px 29px, 8px 19px, 6px 17px, 6px 17px, 4px 15px, 32px 4px, 4px 4px; }
  .pe-swatch { width: 64px; height: 40px; }
  .pe-color .bb-input--hex { width: 110px; }
  .pe-ts-list, .pe-fonts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-bs-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pe-cur, .pe-checks .bb-check, .pe-blinkies label { min-height: 40px; align-items: center; }
  .pe-checks .bb-check input, .pe-blinkies input { width: 18px; height: 18px; }
  .pe-range input[type="range"] { height: 36px; }
  .pe-file { min-height: 40px; }
  .pe-savebar { bottom: 0; }
  .pe-savebar .bb-btn, .pe-savebar .bb-btn98 { flex: 1 1 140px; min-height: 40px; }

  /* Cuenta: pestañas en rejilla de 3 y sesiones en fichas */
  .ac-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
  .ac-tabs a { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 4px; text-align: center; border-bottom: 1px solid #333; }
  .ac-nav ~ * .bb-window__title { white-space: normal; line-height: 18px; padding: 3px 0; }
  .ac-sessions thead { display: none; }
  .ac-sessions, .ac-sessions tbody, .ac-sessions tr, .ac-sessions td { display: block; }
  .ac-sessions tr { padding: 8px; border-bottom: 1px solid #333; }
  .ac-sessions tr:nth-child(even) { background: var(--bb-panel-2); }
  .ac-sessions td, .ac-sessions tr:nth-child(even) td { padding: 2px 0; background: none; border: 0; }
  .ac-sessions td[data-label]:not(:first-child)::before { content: attr(data-label) ": "; font: var(--font-ui); text-transform: uppercase; color: var(--bb-cyan); }
  .ac-sessions .bb-nowrap { white-space: normal; }
  .ac-sessions__act { margin-top: 6px; }
  .ac-sessions__act .bb-btn98 { width: 100%; min-height: 40px; }
  .ac-closeall .bb-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .pf-mood--marquee span { animation: none; padding-left: 0; } }
html.is-quiet .pf-mood--marquee span { animation: none; padding-left: 0; }

/* ---------- foro: ajustes de la barra y búsqueda ---------- */
.bb-bar .bb-h2 { margin: 0; display: flex; align-items: center; gap: 6px; }
mark.bb-hl { color: #000; }

/* ---------- bloques del CMS ---------- */
.bb-lead-body { font-size: 12px; }
.bb-lead-body > :first-child { color: var(--bb-cream); }
.bb-polaroid--big img { width: auto; max-width: 100%; height: auto; max-height: 420px; }
.bb-polaroid--big { float: none; display: inline-block; }
.cms-figure { position: relative; display: inline-block; max-width: 100%; margin: 6px; padding: 6px; background: #fff; box-shadow: 3px 3px 0 #000; }
.cms-figure img { display: block; max-width: 100%; height: auto; }
.cms-figure figcaption { padding-top: 4px; font: 8px var(--font-pixel); text-align: center; color: #111; text-transform: uppercase; }
.cms-figure--tape::before, .cms-figure--tape::after { content: ""; position: absolute; width: 46px; height: 14px; background: rgba(255, 255, 220, .65); top: -6px; }
.cms-figure--tape::before { left: -10px; transform: rotate(-30deg); }
.cms-figure--tape::after { right: -10px; transform: rotate(30deg); }
.cms-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 6px; list-style: none; }
.cms-gallery li:nth-child(odd) .cms-figure { transform: rotate(-1.5deg); }
.cms-gallery li:nth-child(even) .cms-figure { transform: rotate(1.5deg); }
.cms-gallery img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.cms-featured { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; align-items: center; }
.cms-starburst { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px; }
.cms-starburst__text { margin: 0; font: 26px/1 var(--font-display); text-transform: uppercase; color: var(--warn-yellow); text-shadow: 2px 2px 0 var(--bb-purple), 4px 4px 0 #000; }
.cms-marquee { margin: 0; }
.cms-buttons { padding: 4px 0; }
.cms-listen { margin-top: 4px; }
.cms-listen > summary { list-style: none; display: inline-block; }
.cms-listen > summary::-webkit-details-marker { display: none; }
.cms-listen[open] > summary { margin-bottom: 6px; }
.bb-window__body--paper { padding: 0; }
.bb-window__body--paper > .bb-xerox { border: 0; box-shadow: none; }
.bb-xerox-page .bb-window { max-width: 100%; }

/* ---------- blog ---------- */
.blog-card { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 14px; }
.blog-card:not(:has(.blog-card__cover)) { grid-template-columns: minmax(0, 1fr); }
.blog-card__cover { display: block; padding: 5px; background: #fff; box-shadow: 3px 3px 0 #000; transform: rotate(-2deg); }
.blog-card__cover img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(.3) contrast(1.1); }
.blog-card__paper { padding: 10px 14px; }
.blog-card__title { font-size: 26px; }
.blog-card__title a, .blog-card__title a:visited { color: var(--ink); text-decoration: none; }
.blog-post { margin: 0 0 10px; }
.blog-post .bb-xerox__stamp { float: right; margin-left: 10px; }
.blog-comment { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 8px; border-bottom: 1px dotted #2a2a2a; }
.blog-comment form { margin: 0; }

/* ---------- fiestas ---------- */
.ev-detail { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.ev-flyer { float: none; width: auto; margin: 0; }
.ev-flyer-big { min-height: 320px; }
.ev-flyer-big .bb-flyer__title { font-size: 44px; }
.ev-going { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.ev-going form { margin: 0; }
.ev-going__btn { padding: 8px 22px; font-size: 13px; }
.ev-going .bb-counter__label { width: 100%; margin: 0; text-align: left; }

/* ---------- lanzamientos, artistas ---------- */
.rel-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rel-card { padding: 8px; background: var(--bb-panel-2); border: 1px solid #262626; }
.art-map { position: relative; padding: 6px; background: #000 url(/s/assets/textures/scanlines-2x4.c5c6a973d7.png); border: 2px inset #444; }
.art-map__flag { position: absolute; right: 8px; top: 8px; }
.bb-usercard.is-crew { border-color: var(--bb-cyan); box-shadow: 0 0 0 1px var(--bb-cyan-edge) inset; }
/* Fichas de artista: muro de polaroids un poco torcidas; la de la crew lleva celo cian. */
/* Polaroids de las fichas y tarjetas de miembros en la misma fila. */
.art-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 14px; padding: 6px 4px 2px; }
.art-row .art-card { width: 150px; }
.art-row .bb-usercard { width: 118px; }
.art-card, .art-card:visited { position: relative; display: block; padding: 6px 6px 8px; color: var(--ink); background: var(--paper); box-shadow: 3px 3px 0 #000; transform: rotate(-1.5deg); text-decoration: none; overflow-wrap: anywhere; }
.art-card:nth-child(even) { transform: rotate(1.5deg); }
.art-card:hover, .art-card:focus-visible { color: var(--ink); text-decoration: none; transform: rotate(0) scale(1.03); box-shadow: 3px 3px 0 #000, 0 0 0 2px var(--bb-cyan); z-index: 1; }
.art-card.is-crew::before { content: ""; position: absolute; top: -7px; left: 50%; width: 54px; height: 14px; margin-left: -27px; background: rgba(3, 247, 254, .55); transform: rotate(-4deg); }
.art-card__photo { position: relative; display: block; margin-bottom: 6px; background: #000; border: 1px solid #000; }
.art-card__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.art-card__spotify { position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; font: var(--font-ui); font-size: 9px; text-transform: uppercase; color: #002b10; background: linear-gradient(#c8f7d8 0%, #6fe39a 49%, #1db954 50%, #12823a 100%); border: 1px solid #0b5a28; box-shadow: 2px 2px 0 #000; }
.art-card b { display: block; font: 17px/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .3px; }
.art-card b .bb-badge { vertical-align: 2px; }
.art-card small { display: block; margin-top: 2px; font-size: 10px; color: #555; }
@media (prefers-reduced-motion: no-preference) { .art-card { transition: transform .12s steps(3); } }

.art-profile__grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; }
.art-profile__side { text-align: center; }
.art-profile__photo { float: none; display: inline-block; margin: 6px 0 4px; }
.art-profile__photo img { width: 200px; height: 200px; }
.art-profile__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 14px 0 6px; }
.art-profile__tags .px { vertical-align: -1px; }
.art-profile__where { margin: 4px 0 10px; font-size: 11px; color: var(--bb-muted); }
.art-profile__main .bbc { font-size: 12px; }
.art-links { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.art-links .bb-btn { display: block; }
.art-links__spotify, .art-links__spotify:visited, .art-links__spotify:hover { background: linear-gradient(#c8f7d8 0%, #6fe39a 49%, #1db954 50%, #12823a 100%); border-color: #0b5a28; color: #002b10; }
.art-links__instagram, .art-links__instagram:visited, .art-links__instagram:hover { background: linear-gradient(#f77ec4 0%, #e0479e 49%, #c1358a 50%, #6a26c9 100%); border-color: #4b1394; color: #fff; text-shadow: 0 1px 0 #3d0a40, 0 -1px 0 #3d0a40; }
.art-links__youtube, .art-links__youtube:visited, .art-links__youtube:hover { background: var(--gel-red); border-color: #8f150b; color: #fff; text-shadow: 0 -1px 0 #5a0d06; }
.art-links__soundcloud, .art-links__soundcloud:visited, .art-links__soundcloud:hover { background: linear-gradient(#ffe2c7 0%, #ffab66 49%, #ff5500 50%, #c03f00 100%); border-color: #8a2e00; color: #2b0d00; }
.art-links__bandcamp, .art-links__bandcamp:visited, .art-links__bandcamp:hover { background: linear-gradient(#d9f3f8 0%, #8fd0de 49%, #3a9db3 50%, #1d6676 100%); border-color: #154e5a; color: #00222a; }
.art-links__tiktok, .art-links__tiktok:visited, .art-links__tiktok:hover { background: var(--gel-black); border-color: #000; color: #fff; text-shadow: -1px 0 0 var(--bb-cyan), 1px 0 0 var(--bb-pink); }

@media (max-width: 760px) {
  /* En móvil el titular va debajo de la polaroid: al lado no cabe y partía palabras ("MOVIMIENT-O"). */
  .bb-polaroid + .bb-h1 { clear: both; padding-top: 4px; }
  .art-profile__grid { grid-template-columns: minmax(0, 1fr); }
  .art-row { gap: 16px 12px; }
  .art-row .art-card, .art-row .bb-usercard { width: calc(50% - 6px); }
  .cms-featured, .ev-detail, .rel-list { grid-template-columns: minmax(0, 1fr); }
  .cms-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-card { grid-template-columns: minmax(0, 1fr); }
  /* El sello OFICIAL BB va encima del título: flotando a su lado lo pisaba. */
  .blog-post .bb-xerox__stamp { float: none; margin: 0 0 10px; }
  .art-links .bb-btn { display: flex; }
  .cms-starburst__text { font-size: 20px; }
  .art-map__flag { width: 50px; height: auto; }
}

/* ======================================================================
   Extras Y2K (fase 8): scrollbars gel, selección, brillo de gel, starbursts
   que bailan, webring, barra de estado Win98 y el MODO BB (código Konami).
   Todo lo que se mueve se apaga con reduced-motion y con el modo tranquilo.
   ====================================================================== */
html { scrollbar-color: var(--bb-cyan-deep) #000; }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: #000 url(/s/assets/textures/scanlines-2x4.c5c6a973d7.png); border-left: 1px solid #222; }
::-webkit-scrollbar-thumb { background: var(--gel-cyan); border: 1px solid var(--bb-cyan-edge); border-radius: 7px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
::-webkit-scrollbar-thumb:hover { background: var(--gel-pink); border-color: #c2146f; }
::-webkit-scrollbar-corner { background: #000; }
::selection { background: var(--bb-pink); color: #000; text-shadow: none; }

.bb-btn { overflow: hidden; }
.bb-btn::after {
  content: ""; position: absolute; top: -2px; bottom: -2px; left: -45%; width: 30%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent); transform: skewX(-20deg);
}

.bb-webring { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; padding: 2px 10px 8px; font: var(--font-ui); text-transform: uppercase; }
.bb-webring a, .bb-webring a:visited { color: var(--bb-cyan); }
.bb-webring a:hover { color: var(--bb-pink); }
.bb-webring__name { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; color: #000; background: var(--gel-lime); border: 1px solid #6aa10c; border-radius: 999px; letter-spacing: 1px; }
.bb-webring__name img { image-rendering: pixelated; }

.bb-statusbar { display: flex; gap: 2px; margin: 0 6px 6px; padding: 2px; font: 11px var(--font-body); color: #000; background: #c0c0c0; border: 1px solid #fff; border-right-color: #404040; border-bottom-color: #404040; }
.bb-statusbar__cell { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; white-space: nowrap; border: 1px solid #808080; border-right-color: #fff; border-bottom-color: #fff; }
.bb-statusbar__cell--main { flex: 1; }
.bb-statusbar__cell img { image-rendering: pixelated; }
.bb-statusbar__led { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #eaffd0, #4ad000 60%, #1d5a00); border: 1px solid #1d3300; }

.bb-empty { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px; color: var(--bb-muted); }
.bb-empty img { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.bb-empty b { color: var(--bb-white); }

.bb-konami { position: fixed; z-index: 60; left: 50%; top: 30%; width: min(320px, calc(100vw - 32px)); transform: translateX(-50%); }
.bb-konami .bb-window__body { text-align: center; }
.bb-konami__big { margin: 4px 0; font: 30px/1 var(--font-display); text-transform: uppercase; color: var(--warn-yellow); text-shadow: 2px 2px 0 var(--bb-purple), 4px 4px 0 #000; }
.bb-konami__small { margin: 0; font: 16px var(--font-term); color: var(--bb-cyan); }
.fx-diamond { position: absolute; top: -24px; width: 15px; height: 12px; pointer-events: none; background: url(/s/assets/icons/brand/diamond-pixel-15.9a0624019f.png) center / contain no-repeat; image-rendering: pixelated; animation: fx-fall linear forwards; }
.fx-heart--fall { top: -20px; bottom: auto; animation-name: fx-fall; animation-fill-mode: forwards; }

@media (prefers-reduced-motion: no-preference) {
  .bb-btn:hover::after, .bb-btn:focus-visible::after { opacity: 1; animation: bb-shine .7s steps(7) 1; }
  .bb-event__burst, .bb-flyer__burst, .bb-header__burst, .bb-burst, .cms-starburst img { animation: bb-wobble 1.6s steps(2) infinite; }
  .bb-statusbar__led { animation: bb-led 1.2s steps(1) infinite; }
  html.is-bbmode .bb-header__logo { animation: bb-hue 1s steps(6) infinite; }
  html.is-bbmode .bb-marquee__track { animation-duration: 6s; }
}
@keyframes bb-shine { from { left: -45%; } to { left: 125%; } }
@keyframes bb-wobble { 0% { transform: rotate(-6deg) scale(1); } 100% { transform: rotate(4deg) scale(1.05); } }
@keyframes bb-led { 50% { filter: brightness(.55); } }
@keyframes bb-hue { to { filter: hue-rotate(360deg); } }
html.is-quiet .bb-btn:hover::after, html.is-quiet .bb-event__burst, html.is-quiet .bb-flyer__burst, html.is-quiet .bb-header__burst,
html.is-quiet .bb-burst, html.is-quiet .cms-starburst img, html.is-quiet .bb-statusbar__led { animation: none; }

@media (max-width: 760px) {
  .bb-statusbar { flex-wrap: wrap; }
  .bb-statusbar__cell--wide, .bb-statusbar__cell--zone { display: none; }
}

/* Ficha de fiesta: calendario, cómo llegar y la crew que va (avatares) */
.ev-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.ev-crew { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.ev-crew li { position: relative; width: 64px; text-align: center; font-size: 10px; }
.ev-crew a { display: block; overflow-wrap: anywhere; }
.ev-crew a img { display: block; width: 48px; height: 48px; margin: 0 auto 2px; object-fit: cover; image-rendering: pixelated; border: 2px solid #000; outline: 1px solid var(--bb-lime); box-shadow: var(--hard-shadow); }
.ev-crew a:hover img, .ev-crew a:focus img { outline-color: var(--bb-pink); }
.ev-crew__gem { position: absolute; top: -4px; right: 4px; image-rendering: pixelated; }

/* Selector visual de fondos del editor de perfil (radios con muestra de la textura real) */
.pe-textures-wrap { grid-column: 1 / -1; }
.pe-textures { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; margin-top: 2px; }
.pe-tex { position: relative; display: block; cursor: var(--cur-hand); background: #000; border: 2px solid #000; box-shadow: var(--hard-shadow); }
.pe-tex input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pe-tex i { display: block; height: 44px; background: #111 center; image-rendering: pixelated; }
.pe-tex b { display: block; padding: 2px 3px; font: var(--font-ui); font-size: 9px; line-height: 12px; text-transform: uppercase; color: #fff; background: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-tex:hover b { background: #333; }
.pe-tex:has(input:checked) { border-color: var(--bb-cyan); }
.pe-tex:has(input:checked) b { color: #002024; background: var(--gel-cyan); }
.pe-tex:has(input:focus-visible) { outline: 2px dotted var(--bb-cyan); outline-offset: 2px; }
.pe-tex--none i { background: repeating-linear-gradient(45deg, #111 0 6px, #1c1c1c 6px 12px); }
.pe-tex--ikurrina i { background-size: 50px 28px; }
.pe-tex--scanlines i { background-color: #0b2a3a; }
.pe-tex--sparkle-transparent i { background-color: #000; }
.pe-tex--checker-cyan i { background-image: url(/s/assets/textures/checker-cyan-dark-64.b0eb5f9978.png); }
.pe-tex--sparkle-black i { background-image: url(/s/assets/textures/sparkle-tile-black.59acd57d9b.gif); }
.pe-tex--sparkle-transparent i { background-image: url(/s/assets/textures/sparkle-tile-transparent.10a7985d1e.gif); }
.pe-tex--checker-punk i { background-image: url(/s/assets/textures/checker-punk-32.5de02816d5.png); }
.pe-tex--xerox i { background-image: url(/s/assets/textures/xerox-grain-256.54a924c17f.png); }
.pe-tex--ikurrina i { background-image: url(/s/assets/flags/ikurrina-pixel-25x14.463d5a85d8.png); }
.pe-tex--scanlines i { background-image: url(/s/assets/textures/scanlines-2x4.c5c6a973d7.png); }
.pe-tex--noche-estrellada i { background-image: url(/s/assets/textures/bg-noche-estrellada.7cca2e5f4c.gif); }
.pe-tex--purpurina-rosa i { background-image: url(/s/assets/textures/bg-purpurina-rosa.63155107fc.gif); }
.pe-tex--purpurina-cian i { background-image: url(/s/assets/textures/bg-purpurina-cian.438410d8b7.gif); }
.pe-tex--corazones i { background-image: url(/s/assets/textures/bg-corazones.6a64456bfa.gif); }
.pe-tex--burbujas i { background-image: url(/s/assets/textures/bg-burbujas.ed0dd21be8.gif); }
.pe-tex--nieve i { background-image: url(/s/assets/textures/bg-nieve.c9156491a1.gif); }
.pe-tex--ajedrez-movil i { background-image: url(/s/assets/textures/bg-ajedrez-movil.182fd2840b.gif); }
.pe-tex--kontuz i { background-image: url(/s/assets/textures/bg-kontuz.8fc5f0e7fa.gif); }
.pe-tex--disco i { background-image: url(/s/assets/textures/bg-disco.942b879f2d.gif); }
html.is-quiet .pe-textures i { animation: none; }
html.is-quiet .pe-tex--sparkle-black i { background-image: url(/s/assets/textures/sparkle-tile-black.still.bb06af129b.png); }
html.is-quiet .pe-tex--sparkle-transparent i { background-image: url(/s/assets/textures/sparkle-tile-transparent.still.f131ee23ce.png); }
html.is-quiet .pe-tex--noche-estrellada i { background-image: url(/s/assets/textures/bg-noche-estrellada.still.a27f29c558.png); }
html.is-quiet .pe-tex--purpurina-rosa i { background-image: url(/s/assets/textures/bg-purpurina-rosa.still.fb0edf8869.png); }
html.is-quiet .pe-tex--purpurina-cian i { background-image: url(/s/assets/textures/bg-purpurina-cian.still.e48b719142.png); }
html.is-quiet .pe-tex--corazones i { background-image: url(/s/assets/textures/bg-corazones.still.c78fe331e7.png); }
html.is-quiet .pe-tex--burbujas i { background-image: url(/s/assets/textures/bg-burbujas.still.57cce9f089.png); }
html.is-quiet .pe-tex--nieve i { background-image: url(/s/assets/textures/bg-nieve.still.f9d1f42399.png); }
html.is-quiet .pe-tex--ajedrez-movil i { background-image: url(/s/assets/textures/bg-ajedrez-movil.still.6964dd7222.png); }
html.is-quiet .pe-tex--kontuz i { background-image: url(/s/assets/textures/bg-kontuz.still.7cca306fe8.png); }
html.is-quiet .pe-tex--disco i { background-image: url(/s/assets/textures/bg-disco.still.3807745f0e.png); }
@media (prefers-reduced-motion: reduce) {
  .pe-tex--sparkle-black i { background-image: url(/s/assets/textures/sparkle-tile-black.still.bb06af129b.png); }
  .pe-tex--sparkle-transparent i { background-image: url(/s/assets/textures/sparkle-tile-transparent.still.f131ee23ce.png); }
  .pe-tex--noche-estrellada i { background-image: url(/s/assets/textures/bg-noche-estrellada.still.a27f29c558.png); }
  .pe-tex--purpurina-rosa i { background-image: url(/s/assets/textures/bg-purpurina-rosa.still.fb0edf8869.png); }
  .pe-tex--purpurina-cian i { background-image: url(/s/assets/textures/bg-purpurina-cian.still.e48b719142.png); }
  .pe-tex--corazones i { background-image: url(/s/assets/textures/bg-corazones.still.c78fe331e7.png); }
  .pe-tex--burbujas i { background-image: url(/s/assets/textures/bg-burbujas.still.57cce9f089.png); }
  .pe-tex--nieve i { background-image: url(/s/assets/textures/bg-nieve.still.f9d1f42399.png); }
  .pe-tex--ajedrez-movil i { background-image: url(/s/assets/textures/bg-ajedrez-movil.still.6964dd7222.png); }
  .pe-tex--kontuz i { background-image: url(/s/assets/textures/bg-kontuz.still.7cca306fe8.png); }
  .pe-tex--disco i { background-image: url(/s/assets/textures/bg-disco.still.3807745f0e.png); }
}
.pe-preset--glitter-rosa i { background: #1a0010 url(/s/assets/textures/bg-purpurina-rosa.63155107fc.gif); }
.pe-preset--noche-de-bilbo i { background: #05030f url(/s/assets/textures/bg-noche-estrellada.7cca2e5f4c.gif); }
html.is-quiet .pe-preset--glitter-rosa i { background-image: url(/s/assets/textures/bg-purpurina-rosa.still.fb0edf8869.png); }
html.is-quiet .pe-preset--noche-de-bilbo i { background-image: url(/s/assets/textures/bg-noche-estrellada.still.a27f29c558.png); }
/* Fondo de perfil animado (textura GIF o GIF subido): con reduced-motion se usa la versión congelada. */
@media (prefers-reduced-motion: reduce) {
  html.pf-anim { background-image: var(--pf-bg-still) !important; }
}

/* ======================================================================
   Bloques nuevos del CMS: cita, aviso, preguntas, botones, cuenta atrás y blinkies.
   ====================================================================== */
.cms-quote { margin: 14px 4px; padding: 6px 4px; text-align: center; }
.cms-quote blockquote { margin: 0; }
.cms-quote p { margin: 0; font: 34px/1.05 var(--font-display); text-transform: uppercase; color: #fff; white-space: pre-line; overflow-wrap: anywhere; text-shadow: 3px 3px 0 var(--q-shadow, var(--bb-purple)), 6px 6px 0 #000; }
.cms-quote figcaption { margin-top: 8px; font: 10px var(--font-pixel); color: var(--bb-cyan); text-transform: uppercase; letter-spacing: 1px; }
.cms-quote figcaption::before { content: "// "; color: var(--bb-pink); }
.cms-quote--cyan { --q-shadow: var(--bb-cyan-deep); }
.cms-quote--pink { --q-shadow: var(--bb-pink); }
.cms-notice { margin: 10px 0; font-weight: normal; }
.cms-notice .bbc { color: #000; }
.cms-notice .bbc a, .cms-notice .bbc a:visited { color: #000; }
.cms-faq { border-bottom: 1px dashed #333; }
.cms-faq > summary { position: relative; padding: 7px 4px 7px 22px; font-weight: bold; color: #fff; cursor: var(--cur-hand); list-style: none; }
.cms-faq > summary::-webkit-details-marker { display: none; }
.cms-faq > summary::before { content: "▶"; position: absolute; left: 4px; top: 9px; font-size: 10px; color: var(--bb-pink); }
.cms-faq[open] > summary::before { content: "▼"; color: var(--bb-cyan); }
.cms-faq > summary:hover { color: var(--bb-cyan); }
.cms-faq > .bbc { padding: 0 6px 10px 22px; }
.cms-btnrow { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 12px 0; }
.cms-btnrow--center { justify-content: center; }
.cms-btnrow--right { justify-content: flex-end; }
.bb-btn--big { padding: 9px 22px; font-size: 12px; letter-spacing: 1px; }
.bb-btn--purple, .bb-btn--purple:visited, .bb-btn--purple:hover { background: var(--gel-purple); border-color: #4b12b8; color: #fff; text-shadow: 0 -1px 0 #2a0670; }
.cms-countdown { text-align: center; }
.cms-countdown__label { margin: 0 0 4px; font: 22px/1.1 var(--font-display); text-transform: uppercase; color: var(--warn-yellow); text-shadow: 2px 2px 0 var(--bb-purple); }
.cms-countdown__label a, .cms-countdown__label a:visited { color: inherit; }
.cms-countdown__done { margin: 6px 0; font: 30px/1 var(--font-display); color: var(--bb-lime); text-transform: uppercase; }
.cms-blinkies { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 8px 0; }
.cms-blinkies img { image-rendering: pixelated; }

/* ======================================================================
   BB·AMP (Radio BB): reproductor estilo Winamp 2.x. Gris metálico, LCD verde y
   barras de espectro. Se usa en /radio (ventanita), en el sidebar y en el bloque del CMS.
   ====================================================================== */
.bb-amp { max-width: 100%; color: #cfd2d8; background: linear-gradient(#3c3c4a, #23232c 60%, #1a1a22); border: 1px solid #000; box-shadow: inset 1px 1px 0 #6d6d80, inset -1px -1px 0 #0b0b10, 3px 3px 0 #000; font: 11px var(--font-body); }
.bb-amp__bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 4px 2px 6px; font: 8px var(--font-pixel); text-transform: uppercase; letter-spacing: 1px; color: #fff; background: linear-gradient(90deg, #12122a, #3a2b8f 45%, var(--bb-pink) 100%); border-bottom: 1px solid #000; }
.bb-amp__name { display: inline-flex; align-items: center; gap: 4px; }
.bb-amp__name img { width: 12px; height: 12px; image-rendering: pixelated; }
.bb-amp__pop, .bb-amp__pop:visited { padding: 0 5px; font: 8px var(--font-pixel); color: #000; background: #c0c0c0; border: 1px outset #fff; text-decoration: none; }
.bb-amp__pop:hover { color: #000; background: var(--bb-cyan); text-decoration: none; }
.bb-amp__lcd { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "time viz" "title title" "meta meta"; gap: 2px 8px; margin: 5px; padding: 5px 6px; background: #000 url(/s/assets/textures/scanlines-2x4.c5c6a973d7.png); border: 2px inset #2a2a35; }
.bb-amp__time { grid-area: time; font: 34px/1 var(--font-term); letter-spacing: 1px; color: var(--bb-lime); text-shadow: 0 0 6px rgba(57, 255, 20, .55); }
.bb-amp__viz { grid-area: viz; align-self: end; justify-self: end; width: 100%; max-width: 152px; height: 34px; image-rendering: pixelated; }
.bb-amp__title { grid-area: title; overflow: hidden; white-space: nowrap; font: 15px/1.1 var(--font-term); color: var(--bb-lime); }
.bb-amp__title span { display: inline-block; }
.bb-amp__meta { grid-area: meta; display: flex; gap: 8px; font: 8px var(--font-pixel); color: #1f9e0c; text-transform: uppercase; }
.bb-amp__led { margin-left: auto; }
.bb-amp.is-playing .bb-amp__led { color: var(--bb-lime); text-shadow: 0 0 4px var(--bb-lime); }
.bb-amp__msg { margin: 6px 0; font: 16px/1.2 var(--font-term); color: var(--bb-lime); }
.bb-amp__seek, .bb-amp__vol { -webkit-appearance: none; appearance: none; height: 8px; background: #0b0b10; border: 1px inset #44445a; cursor: var(--cur-hand); }
.bb-amp__seek { display: block; width: calc(100% - 10px); margin: 2px 5px 4px; }
.bb-amp__seek:disabled { opacity: .5; cursor: default; }
.bb-amp__seek::-webkit-slider-thumb, .bb-amp__vol::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 10px; background: linear-gradient(#f4f4f8, #a8a8b8 50%, #7d7d92); border: 1px solid #000; }
.bb-amp__seek::-moz-range-thumb, .bb-amp__vol::-moz-range-thumb { width: 22px; height: 10px; border-radius: 0; background: linear-gradient(#f4f4f8, #a8a8b8 50%, #7d7d92); border: 1px solid #000; }
.bb-amp__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 0 5px 6px; }
.bb-amp__ctrl button { min-width: 26px; height: 22px; padding: 0 5px; font: bold 11px/1 Tahoma, Verdana, sans-serif; color: #000; background: linear-gradient(#f2f2f6, #b9b9c6 55%, #8d8da0); border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff; cursor: var(--cur-hand); }
.bb-amp__ctrl button:active { background: linear-gradient(#8d8da0, #b9b9c6); box-shadow: inset 1px 1px 0 #555; }
.bb-amp__ctrl button:focus-visible { outline: 1px dotted var(--bb-cyan); outline-offset: 1px; }
.bb-amp__ctrl .bb-amp__play { min-width: 34px; color: #002024; background: var(--gel-cyan); }
.bb-amp__ctrl .bb-amp__tog { font: 8px/1 var(--font-pixel); }
.bb-amp__ctrl .bb-amp__tog[aria-pressed="true"] { color: var(--bb-lime); background: #000; text-shadow: 0 0 3px var(--bb-lime); }
.bb-amp__vol { flex: 1; min-width: 50px; margin-left: 4px; }
.bb-amp__video { margin: 0 5px 6px; aspect-ratio: 16 / 9; background: #000; border: 2px inset #2a2a35; }
.bb-amp__video iframe { display: block; width: 100%; height: 100%; border: 0; }
.bb-amp__list { max-height: 220px; overflow: auto; margin: 0 5px 6px; padding: 2px 0; list-style: none; font: 15px/1.1 var(--font-term); background: #000; border: 2px inset #2a2a35; }
.bb-amp__track, .bb-amp__track:visited { display: flex; gap: 6px; padding: 1px 5px; color: #2ad62a; text-decoration: none; }
.bb-amp__track:hover, .bb-amp__track:focus-visible { color: #fff; background: #0a246a; text-decoration: none; }
.bb-amp__track.is-current { color: #fff; background: #10107a; }
.bb-amp__track .n, .bb-amp__track .d { color: #1f9e0c; }
.bb-amp__track.is-current .n, .bb-amp__track.is-current .d, .bb-amp__track:hover .n, .bb-amp__track:hover .d, .bb-amp__track:focus-visible .n, .bb-amp__track:focus-visible .d { color: inherit; }
.bb-amp__track .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-amp__more { margin: 0 5px 6px; }
.bb-amp__more > summary { padding: 2px 0 4px; font: 8px var(--font-pixel); text-transform: uppercase; color: var(--bb-cyan); cursor: var(--cur-hand); }
.bb-amp__more .bb-amp__list { margin: 0; }
.bb-amp__note { margin: 0 6px 6px; font: 8px/1.3 var(--font-pixel); color: #8a8f99; text-transform: uppercase; }
.bb-side .bb-amp { margin-bottom: 12px; }
.bb-side .bb-amp__time { font-size: 26px; }
.bb-side .bb-amp__viz { max-width: 100px; }
.bb-side .bb-amp__ctrl button { min-width: 22px; padding: 0 3px; }
.bb-side .bb-amp__vol { flex-basis: 100%; margin: 3px 0 0; }
.bb-window .bb-amp { box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .bb-amp__title.is-long span { padding-left: 100%; animation: bb-amp-scroll 12s linear infinite; }
}
@keyframes bb-amp-scroll { to { transform: translateX(-100%); } }
html.is-quiet .bb-amp__title.is-long span { padding-left: 0; animation: none; }
.bb-statusbar__cell--radio, .bb-statusbar__cell--radio:visited { font-weight: bold; color: #000; text-decoration: none; }
.bb-statusbar__cell--radio:hover { color: #fff; background: #0a246a; text-decoration: none; }

/* /radio: ventanita emergente */
body.bb-popup { padding: 8px; background: #000 url(/s/assets/textures/checker-cyan-dark-64.b0eb5f9978.png); }
body.bb-popup .bb-amp { max-width: 420px; margin: 0 auto; }
body.bb-popup .bb-amp__list { max-height: 50vh; }
.bb-popup__credit { max-width: 420px; margin: 8px auto 0; text-align: right; }

/* ===== Temas v2: efectos, easter eggs y miniaturas de presets ===== */
/* Fondos pixel art de assets/_generators/backgrounds-v2.cjs; efectos de public/js/effects.js y
   easter eggs de public/js/eggs.js (docs/EASTER_EGGS.md). Todo lo que se mueve se apaga con
   reduced-motion y con el modo tranquilo, y nada de esto captura el puntero salvo los avisos. */
:root {
  --gel-gold: linear-gradient(#fff6c8 0%, #ffd95a 49%, #e6a817 50%, #a8740a 100%);
  --gel-chrome: linear-gradient(#ffffff 0%, #dfe3ea 49%, #9aa3b0 50%, #c9ced6 100%);
  --gel-sunset: linear-gradient(#fff3b0 0%, #ffd27a 45%, #ff8ac6 50%, #ff4fae 100%);
}

/* Miniaturas de la galería de presets (contrato .pe-preset--<clave>: b = barra, i = fondo). */
.pe-preset--ria-de-noche i, .pe-preset--sirimiri i, .pe-preset--gaztetxe i, .pe-preset--trap-lila i, .pe-preset--arcade i, .pe-preset--mendiak i,
.pe-preset--hustler-dorado i, .pe-preset--club-laser i, .pe-preset--bola-disco i, .pe-preset--pantallazo-azul i, .pe-preset--mascota-pixel i,
.pe-preset--metro-vaporwave i { background-repeat: repeat; image-rendering: pixelated; }
.pe-preset--ria-de-noche b { background: var(--gel-gold); color: #1a1200; }
.pe-preset--ria-de-noche i { background-color: #070b1f; background-image: url(/s/assets/textures/bg-ria-noche.f1fa725c3b.gif); background-position: -8px -76px; }
.pe-preset--sirimiri b { background: #8a3a27; color: #fff; }
.pe-preset--sirimiri i { background-color: #222d39; background-image: url(/s/assets/textures/bg-sirimiri.d385424225.gif); background-position: 0 -62px; }
.pe-preset--gaztetxe b { background: #b6ff3b; color: #141414; }
.pe-preset--gaztetxe i { background-color: #241915; background-image: url(/s/assets/textures/bg-gaztetxe.4696112ee4.gif); background-position: -44px -86px; }
.pe-preset--trap-lila b { background: var(--gel-purple); color: #fff; }
.pe-preset--trap-lila i { background-color: #14042e; background-image: url(/s/assets/textures/bg-trap-lila.ef150a1fcf.gif); background-position: -14px -14px; }
.pe-preset--arcade b { background: #d6006f; color: #fff; }
.pe-preset--arcade i { background-color: #000; background-image: url(/s/assets/textures/bg-arcade.128aa6b7c6.gif); background-position: -36px 0; }
.pe-preset--mendiak b { background: var(--gel-eh); color: #00230e; }
.pe-preset--mendiak i { background-color: #24184f; background-image: url(/s/assets/textures/bg-mendiak.c21ab0d950.gif); background-position: -16px -72px; }
.pe-preset--hustler-dorado b { background: var(--gel-gold); color: #2a1a00; }
.pe-preset--hustler-dorado i { background-color: #050400; background-image: url(/s/assets/textures/bg-oro.62e227ec2a.gif); background-position: -8px -12px; }
.pe-preset--club-laser b { background: var(--gel-lime); color: #0b2000; }
.pe-preset--club-laser i { background-color: #04000a; background-image: url(/s/assets/textures/bg-club-laser.9177d2a05f.gif); background-position: 0 -8px; }
.pe-preset--bola-disco b { background: var(--gel-chrome); color: #1a0626; }
.pe-preset--bola-disco i { background-color: #0a0012; background-image: url(/s/assets/textures/bg-bola-disco.d064a02cfe.gif); background-position: -14px -34px; }
.pe-preset--pantallazo-azul b { background: #000080; color: #fff; }
.pe-preset--pantallazo-azul i { background-color: #0000aa; background-image: url(/s/assets/textures/bg-bsod.1aae6d96fb.gif); background-position: 0 -2px; }
.pe-preset--mascota-pixel b { background: #306230; color: #e0f8a0; }
.pe-preset--mascota-pixel i { background-color: #9bbc0f; background-image: url(/s/assets/textures/bg-lcd-verde.ffc092edd2.gif); background-position: -10px -38px; }
.pe-preset--metro-vaporwave b { background: var(--gel-sunset); color: #2a0040; }
.pe-preset--metro-vaporwave i { background-color: #120326; background-image: url(/s/assets/textures/bg-vaporwave.147fff7ef3.gif); background-position: -40px -58px; }

/* Muestras del selector de fondos (contrato .pe-tex--<clave>). */
.pe-tex--ria-noche i { background-image: url(/s/assets/textures/bg-ria-noche.f1fa725c3b.gif); background-position: -8px -76px; }
.pe-tex--sirimiri i { background-image: url(/s/assets/textures/bg-sirimiri.d385424225.gif); background-position: 0 -62px; }
.pe-tex--gaztetxe i { background-image: url(/s/assets/textures/bg-gaztetxe.4696112ee4.gif); background-position: -44px -84px; }
.pe-tex--trap-lila i { background-image: url(/s/assets/textures/bg-trap-lila.ef150a1fcf.gif); background-position: -14px -14px; }
.pe-tex--arcade i { background-image: url(/s/assets/textures/bg-arcade.128aa6b7c6.gif); background-position: -36px 0; }
.pe-tex--mendiak i { background-image: url(/s/assets/textures/bg-mendiak.c21ab0d950.gif); background-position: -16px -70px; }
.pe-tex--oro i { background-image: url(/s/assets/textures/bg-oro.62e227ec2a.gif); background-position: -8px -10px; }
.pe-tex--club-laser i { background-image: url(/s/assets/textures/bg-club-laser.9177d2a05f.gif); background-position: 0 -6px; }
.pe-tex--bola-disco i { background-image: url(/s/assets/textures/bg-bola-disco.d064a02cfe.gif); background-position: -14px -32px; }
.pe-tex--bsod i { background-image: url(/s/assets/textures/bg-bsod.1aae6d96fb.gif); background-position: 0 -2px; }
.pe-tex--lcd-verde i { background-image: url(/s/assets/textures/bg-lcd-verde.ffc092edd2.gif); background-position: -10px -36px; }
.pe-tex--vaporwave i { background-image: url(/s/assets/textures/bg-vaporwave.147fff7ef3.gif); background-position: -40px -56px; }
.pe-tex--cromo-bb i { background-image: url(/s/assets/textures/bg-cromo-bb.20d61b6ca7.gif); background-position: -14px -18px; }

/* Modo tranquilo y reduced-motion: la primera imagen congelada de cada fondo. */
html.is-quiet .pe-preset--ria-de-noche i, html.is-quiet .pe-tex--ria-noche i { background-image: url(/s/assets/textures/bg-ria-noche.still.a4b5fe9939.png); }
html.is-quiet .pe-preset--sirimiri i, html.is-quiet .pe-tex--sirimiri i { background-image: url(/s/assets/textures/bg-sirimiri.still.208e629981.png); }
html.is-quiet .pe-preset--gaztetxe i, html.is-quiet .pe-tex--gaztetxe i { background-image: url(/s/assets/textures/bg-gaztetxe.still.52d732b951.png); }
html.is-quiet .pe-preset--trap-lila i, html.is-quiet .pe-tex--trap-lila i { background-image: url(/s/assets/textures/bg-trap-lila.still.59bfb9422a.png); }
html.is-quiet .pe-preset--arcade i, html.is-quiet .pe-tex--arcade i { background-image: url(/s/assets/textures/bg-arcade.still.a5c6079216.png); }
html.is-quiet .pe-preset--mendiak i, html.is-quiet .pe-tex--mendiak i { background-image: url(/s/assets/textures/bg-mendiak.still.c95b26987a.png); }
html.is-quiet .pe-preset--hustler-dorado i, html.is-quiet .pe-tex--oro i { background-image: url(/s/assets/textures/bg-oro.still.45b586be2d.png); }
html.is-quiet .pe-preset--club-laser i, html.is-quiet .pe-tex--club-laser i { background-image: url(/s/assets/textures/bg-club-laser.still.c61c94ac9a.png); }
html.is-quiet .pe-preset--bola-disco i, html.is-quiet .pe-tex--bola-disco i { background-image: url(/s/assets/textures/bg-bola-disco.still.c67ced610a.png); }
html.is-quiet .pe-preset--pantallazo-azul i, html.is-quiet .pe-tex--bsod i { background-image: url(/s/assets/textures/bg-bsod.still.e80b9b36aa.png); }
html.is-quiet .pe-preset--mascota-pixel i, html.is-quiet .pe-tex--lcd-verde i { background-image: url(/s/assets/textures/bg-lcd-verde.still.44555f7274.png); }
html.is-quiet .pe-preset--metro-vaporwave i, html.is-quiet .pe-tex--vaporwave i { background-image: url(/s/assets/textures/bg-vaporwave.still.2b00bcfde2.png); }
html.is-quiet .pe-tex--cromo-bb i, html.is-quiet .bb-egg-dialog__preview { background-image: url(/s/assets/textures/bg-cromo-bb.still.ab8967b1aa.png); }
html.is-quiet .bb-egg__blinkie { background-image: url(/s/assets/textures/fx/blinkie-bb-secret.still.f7e528e0c3.png); }
@media (prefers-reduced-motion: reduce) {
  .pe-preset--ria-de-noche i, .pe-tex--ria-noche i { background-image: url(/s/assets/textures/bg-ria-noche.still.a4b5fe9939.png); }
  .pe-preset--sirimiri i, .pe-tex--sirimiri i { background-image: url(/s/assets/textures/bg-sirimiri.still.208e629981.png); }
  .pe-preset--gaztetxe i, .pe-tex--gaztetxe i { background-image: url(/s/assets/textures/bg-gaztetxe.still.52d732b951.png); }
  .pe-preset--trap-lila i, .pe-tex--trap-lila i { background-image: url(/s/assets/textures/bg-trap-lila.still.59bfb9422a.png); }
  .pe-preset--arcade i, .pe-tex--arcade i { background-image: url(/s/assets/textures/bg-arcade.still.a5c6079216.png); }
  .pe-preset--mendiak i, .pe-tex--mendiak i { background-image: url(/s/assets/textures/bg-mendiak.still.c95b26987a.png); }
  .pe-preset--hustler-dorado i, .pe-tex--oro i { background-image: url(/s/assets/textures/bg-oro.still.45b586be2d.png); }
  .pe-preset--club-laser i, .pe-tex--club-laser i { background-image: url(/s/assets/textures/bg-club-laser.still.c61c94ac9a.png); }
  .pe-preset--bola-disco i, .pe-tex--bola-disco i { background-image: url(/s/assets/textures/bg-bola-disco.still.c67ced610a.png); }
  .pe-preset--pantallazo-azul i, .pe-tex--bsod i { background-image: url(/s/assets/textures/bg-bsod.still.e80b9b36aa.png); }
  .pe-preset--mascota-pixel i, .pe-tex--lcd-verde i { background-image: url(/s/assets/textures/bg-lcd-verde.still.44555f7274.png); }
  .pe-preset--metro-vaporwave i, .pe-tex--vaporwave i { background-image: url(/s/assets/textures/bg-vaporwave.still.2b00bcfde2.png); }
  .pe-tex--cromo-bb i, .bb-egg-dialog__preview { background-image: url(/s/assets/textures/bg-cromo-bb.still.ab8967b1aa.png); }
  .bb-egg__blinkie { background-image: url(/s/assets/textures/fx/blinkie-bb-secret.still.f7e528e0c3.png); }
}

/* ---------- efectos v2 (capa delantera .fx-layer, ya definida arriba) ---------- */
.fx-drop, .fx-gem, .fx-confetti, .fx-firefly { position: absolute; pointer-events: none; }
/* Sirimiri: trazos finos y rápidos en diagonal. */
.fx-drop { top: -24px; width: 1px; height: 14px; background: linear-gradient(rgba(200, 225, 240, 0), rgba(200, 225, 240, .8)); animation: fx-rain linear infinite; }
@keyframes fx-rain { from { transform: translate(0, 0) rotate(14deg); } to { transform: translate(-28vh, 115vh) rotate(14deg); } }
/* Diamantes pixel que caen bamboleándose (el diamante de la identidad de BB, nunca un emoji). */
.fx-gem { top: -24px; width: 15px; height: 12px; background: url(/s/assets/icons/brand/diamond-pixel-15.9a0624019f.png) center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 0 3px rgba(143, 251, 255, .8)); animation: fx-gem linear infinite; }
.fx-gem--big { width: 30px; height: 24px; background-image: url(/s/assets/icons/brand/diamond-pixel-30.84ca225975.png); }
@keyframes fx-gem { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-8px, 28vh) rotate(-10deg); } 50% { transform: translate(0, 56vh) rotate(0); } 75% { transform: translate(8px, 84vh) rotate(10deg); } 100% { transform: translate(0, 115vh) rotate(0); } }
/* Confeti pixel en los colores de BB, girando a saltos. */
.fx-confetti { top: -12px; width: 6px; height: 4px; background: var(--fx-c, #03f7fe); animation: fx-confetti linear infinite; }
.fx-confetti:nth-child(6n + 2) { --fx-c: #ff2e9a; }
.fx-confetti:nth-child(6n + 3) { --fx-c: #b6ff3b; }
.fx-confetti:nth-child(6n + 4) { --fx-c: #ffe600; width: 4px; height: 6px; }
.fx-confetti:nth-child(6n + 5) { --fx-c: #7a2cff; }
.fx-confetti:nth-child(6n) { --fx-c: #fff; width: 4px; height: 4px; }
@keyframes fx-confetti { from { transform: translate(0, 0) rotate(0); } to { transform: translate(var(--fx-dx, 20px), 115vh) rotate(720deg); } }
/* Luciérnagas: puntos cálidos que vagan y se encienden. */
.fx-firefly { width: 3px; height: 3px; background: #eaff7a; box-shadow: 0 0 6px 2px rgba(234, 255, 122, .7); opacity: 0; animation: fx-firefly ease-in-out infinite; }
@keyframes fx-firefly {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: .95; }
  50% { transform: translate(var(--fx-dx, 30px), var(--fx-dy, -30px)); opacity: .25; }
  75% { opacity: .9; }
  100% { transform: translate(calc(var(--fx-dx, 30px) * -.6), calc(var(--fx-dy, -30px) * .8)); opacity: 0; }
}

/* Capa trasera: láseres y ecualizador DETRÁS de las cajas del perfil (no tapan el texto). */
.fx-back { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fx-laser { position: absolute; top: -8px; width: 3px; height: 160vh; margin-left: -1px; transform-origin: 50% 0; background: linear-gradient(var(--fx-c), rgba(0, 0, 0, 0) 80%); box-shadow: 0 0 8px var(--fx-c); opacity: .6; animation: fx-sweep ease-in-out infinite alternate; }
.fx-laser:nth-child(odd) { --fx-c: var(--fx-link, #03f7fe); }
.fx-laser:nth-child(even) { --fx-c: var(--fx-accent, #ff2e9a); }
@keyframes fx-sweep { from { transform: rotate(var(--fx-a0, -20deg)); } to { transform: rotate(var(--fx-a1, 20deg)); } }
.fx-eq { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 2px; height: 72px; padding: 0 2px; opacity: .7; }
.fx-eq i {
  flex: 1; height: 100%;
  background: repeating-linear-gradient(to top, rgba(0, 0, 0, 0) 0 4px, rgba(0, 0, 0, .9) 4px 6px), linear-gradient(to top, #b6ff3b 0 55%, #ffe600 55% 80%, #ff3b30 80%);
  clip-path: inset(60% 0 0 0); animation: fx-eq steps(1) infinite;
}
@keyframes fx-eq {
  0% { clip-path: inset(70% 0 0 0); } 17% { clip-path: inset(30% 0 0 0); } 33% { clip-path: inset(52% 0 0 0); }
  50% { clip-path: inset(12% 0 0 0); } 67% { clip-path: inset(44% 0 0 0); } 83% { clip-path: inset(24% 0 0 0); } 100% { clip-path: inset(70% 0 0 0); }
}

/* Destellos en los bordes de las cajas y estela de neón (posición fija, puestos con CSSOM). */
.fx-spark, .fx-trail { position: fixed; z-index: 36; pointer-events: none; }
.fx-spark {
  width: 9px; height: 9px;
  background: linear-gradient(#fff, #fff) center / 1px 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 1px no-repeat;
  filter: drop-shadow(0 0 2px var(--fx-accent, #03f7fe)); transform: scale(.2); animation: fx-spark .6s steps(4) forwards;
}
@keyframes fx-spark { 0% { transform: scale(.3); opacity: 1; } 50% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(.2); opacity: 0; } }
.fx-trail { width: 4px; height: 4px; background: var(--fx-accent, #ff2e9a); box-shadow: 0 0 4px var(--fx-accent, #ff2e9a), 0 0 9px var(--fx-accent, #ff2e9a); animation: fx-trail .5s linear forwards; }
@keyframes fx-trail { to { opacity: 0; transform: translateY(10px) scale(.4); } }

/* El nombre del perfil hace glitch un instante (clase puesta por effects.js). */
.fx-glitch { animation: fx-glitch .5s steps(1) 1; }
@keyframes fx-glitch {
  0% { transform: translate(3px, 0) skewX(-10deg); text-shadow: -3px 0 #03f7fe, 3px 0 #ff2e9a, 6px 6px 0 #000; clip-path: inset(8% 0 48% 0); }
  20% { transform: translate(-4px, 1px); text-shadow: 4px 0 #03f7fe, -3px 0 #ff2e9a, 6px 6px 0 #000; clip-path: inset(52% 0 6% 0); }
  40% { transform: translate(2px, -1px) skewX(8deg); clip-path: inset(0 0 72% 0); }
  60% { transform: translate(-1px, 0); text-shadow: -2px 0 #b6ff3b, 2px 0 #ff2e9a, 6px 6px 0 #000; clip-path: inset(30% 0 28% 0); }
  80%, 100% { transform: none; clip-path: none; }
}

/* Pestaña oculta: todo en pausa. Tranquilo y reduced-motion: nada. */
html.fx-paused .fx-layer *, html.fx-paused .fx-back *, html.fx-paused .fx-glitch, html.fx-paused .bb-fiesta-lights i { animation-play-state: paused; }
html.is-quiet .fx-back, html.is-quiet .fx-spark, html.is-quiet .fx-trail, html.is-quiet .bb-fiesta-ball, html.is-quiet .bb-fiesta-lights { display: none; }
html.is-quiet .fx-glitch { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .fx-back, .fx-spark, .fx-trail, .bb-fiesta-ball, .bb-fiesta-lights { display: none; }
  .fx-glitch { animation: none; }
}

/* ---------- easter eggs ---------- */
/* Aviso tipo globo de la bandeja de Windows XP, abajo a la derecha (lejos del logo y de la ikurriña). */
.bb-egg {
  position: fixed; z-index: 61; right: 16px; bottom: 18px; width: min(300px, calc(100vw - 32px)); margin: 0; padding: 8px 30px 10px 10px;
  font: 11px/1.4 Tahoma, Verdana, Geneva, sans-serif; color: #000; background: #ffffe1; border: 1px solid #000; border-radius: 8px; box-shadow: 3px 3px 0 #000;
}
.bb-egg::after { content: ""; position: absolute; right: 30px; bottom: -10px; border-style: solid; border-width: 10px 10px 0 0; border-color: #000 transparent transparent transparent; }
.bb-egg::before { content: ""; position: absolute; z-index: 1; right: 31px; bottom: -8px; border-style: solid; border-width: 8px 8px 0 0; border-color: #ffffe1 transparent transparent transparent; }
.bb-egg__title { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-weight: bold; font-size: 12px; }
.bb-egg__icon { flex: none; width: 16px; height: 16px; background: url(/s/assets/icons/heart-pixel-16.cec35bc98f.png) center / 16px 16px no-repeat; image-rendering: pixelated; }
.bb-egg__icon--gem { background-image: url(/s/assets/icons/brand/diamond-pixel-15.9a0624019f.png); background-size: 15px 12px; }
.bb-egg__big { margin: 2px 0 4px; font: 28px/1 var(--font-display); text-transform: uppercase; color: #000; text-shadow: 2px 2px 0 var(--bb-cyan); }
.bb-egg__text { margin: 0; }
.bb-egg__blinkie { display: block; width: 150px; height: 20px; margin-top: 6px; background: url(/s/assets/textures/fx/blinkie-bb-secret.60d96eb859.gif) no-repeat; image-rendering: pixelated; }
.bb-egg__close {
  position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0;
  font: bold 13px/1 Tahoma, sans-serif; color: #000; background: #ffffe1; border: 1px solid #a0a0a0; border-radius: 3px; cursor: var(--cur-hand);
}
.bb-egg__close:hover { color: #fff; background: linear-gradient(#e8664f, #c1300f); border-color: #000; }
.bb-egg__close:focus-visible { outline: 1px dotted #000; outline-offset: 1px; }
@media (max-width: 760px) { .bb-egg { right: 16px; bottom: 16px; } .bb-egg__close { width: 32px; height: 32px; } }

/* Diálogo Win98 del preset secreto. */
.bb-egg-dialog { position: fixed; z-index: 62; left: 50%; top: 28%; width: min(340px, calc(100vw - 32px)); transform: translateX(-50%); }
.bb-egg-dialog .bb-window__body { display: grid; gap: 8px; }
.bb-egg-dialog__preview { display: block; height: 72px; background: #07000f url(/s/assets/textures/bg-cromo-bb.20d61b6ca7.gif) -14px -14px; image-rendering: pixelated; border: 2px inset #444; }
.bb-egg-dialog__text { margin: 0; font-size: 12px; color: var(--bb-white); }
.bb-egg-dialog__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.bb-egg-dialog__actions form { margin: 0; }
@media (max-width: 760px) { .bb-egg-dialog__actions .bb-btn, .bb-egg-dialog__actions .bb-btn98 { min-height: 40px; } }

/* Modo fiesta: bola de espejos que baja y luces de colores que barren la página. */
.bb-fiesta-ball { position: fixed; z-index: 59; top: 0; left: 50%; width: 80px; height: 96px; margin-left: -40px; pointer-events: none; background: url(/s/assets/textures/fx/bola-disco.c1dc893e2f.gif) center / 80px 96px no-repeat; image-rendering: pixelated; animation: bb-ball-drop 1.2s steps(10) both; }
@keyframes bb-ball-drop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.bb-fiesta-lights { position: fixed; inset: 0; z-index: 58; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.bb-fiesta-lights i { position: absolute; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--fx-c, #03f7fe); box-shadow: 0 0 14px 5px var(--fx-c, #03f7fe); opacity: .45; animation: bb-spot linear infinite; }
.bb-fiesta-lights i:nth-child(4n + 2) { --fx-c: #ff2e9a; }
.bb-fiesta-lights i:nth-child(4n + 3) { --fx-c: #b6ff3b; }
.bb-fiesta-lights i:nth-child(4n) { --fx-c: #ffe600; }
@keyframes bb-spot { from { transform: translateX(-10vw); } to { transform: translateX(110vw); } }
@media (prefers-reduced-motion: no-preference) {
  html.is-josea .bb-marquee, html.is-fiesta .bb-marquee { --marquee-speed: 9s; }
}