/* Monofonto: pon el archivo en la carpeta fonts/ (monofonto.ttf o monofonto.otf) */
  @font-face {
    font-family: "Monofonto";
    src: local("Monofonto"), local("Monofonto Regular"),
         url("fonts/monofonto.woff2") format("woff2"),
         url("fonts/monofonto.ttf") format("truetype"),
         url("fonts/monofonto.otf") format("opentype");
    font-weight: 400; font-style: normal; font-display: swap;
  }
  :root {
    --noise-tv: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .78  0 0 0 0 .62  0 0 0 0 1  0 0 0 1.5 -.35'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --void: #121016;
    --panel: #1c1a23;
    --grime: #3b3745;
    --grime2: #4a3a6a;
    --bone: #dcd8e0;
    --purple: #8409ff;
    --purple-hot: #b476ff;
    --lavender: #c9b3f2;
    --orange: #ff8600;
    --hi: #e9a8ff;
    --g1: 132,9,255;
    --g2: 180,60,255;
    --g3: 233,168,255;
    --dk1: #0d0c11;
    --dk2: #0b0a0e;
    --line: #34303d;
    --line2: #4a4556;
    --dim: #7d7889;
    --grad: linear-gradient(90deg, var(--orange), var(--purple) 85%);
    --bar: linear-gradient(var(--purple), var(--purple));
    --muted: #8f8b99;
    --mono: "Monofonto", "Share Tech Mono", "Courier New", monospace;
    --display: var(--mono);
    --body: var(--mono);
  }
  * { box-sizing: border-box; margin: 0; }
  html { background: var(--void); }
  body {
    min-height: 100vh;
    color: var(--bone);
    font-family: var(--body);
    line-height: 1.5;
    display: grid; place-items: start center;
    padding: clamp(.75rem, 4vw, 3rem) .75rem;
    background:
      radial-gradient(ellipse 70% 35% at 50% 108%, rgba(var(--g1),.40), transparent 70%),
      radial-gradient(circle at 18% 22%, rgba(120,110,90,.10) 0 6%, transparent 18%),
      radial-gradient(circle at 82% 70%, rgba(120,110,90,.08) 0 8%, transparent 22%),
      var(--void);
  }
  /* ruido + scanlines + viñeta tipo CRT */
  body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 10; }
  body::before {
    opacity: .6; mix-blend-mode: overlay;
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
      repeating-linear-gradient(0deg, rgba(0,0,0,.4) 0 1px, transparent 1px 3px);
  }
  body::after {
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%);
  }
  /* barra que baja por la pantalla: ahora se mueve con transform (GPU/compositor) en vez de repintar */
  html::after {
    content: ""; position: fixed; left: 0; right: 0; top: -30vh; height: 30vh;
    pointer-events: none; z-index: 10; will-change: transform;
    background: linear-gradient(to bottom, transparent 0, rgba(var(--g1),.07) 50%, transparent 100%);
    animation: roll 7s linear infinite;
  }
  @keyframes roll { to { transform: translate3d(0, 160vh, 0); } }

  main {
    width: min(600px, 100%);
    padding: clamp(1.5rem, 5vw, 2.5rem);
    background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%), var(--panel);
    border: 1px solid var(--grime2);
    border-radius: 2px;
    box-shadow:
      0 0 0 5px var(--dk1), 0 0 0 6px var(--grime),
      0 0 40px rgba(var(--g1),.25),
      inset 0 0 60px rgba(0,0,0,.55);
  }
  .boot {
    font-family: var(--mono); font-size: 1rem;
    color: var(--purple-hot); opacity: .85;
    margin-bottom: 1.5rem;
  }
  @keyframes blink { 50% { opacity: 0; } }

  header {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    margin-bottom: 2.25rem;
  }
  .avatar {
    width: 120px; height: 120px; flex: none; object-fit: cover;
    border: 3px solid var(--purple);
    filter: contrast(1.1) saturate(.85);
    box-shadow: 0 0 0 4px var(--panel), 0 0 28px rgba(var(--g1),.55);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  }
  h1 {
    width: fit-content;
    font-family: var(--display); font-weight: 400;
    font-size: clamp(2.4rem, 10vw, 4.2rem);
    line-height: 1.05; letter-spacing: .02em;
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    /* aberración cromática */
    filter:
      drop-shadow(-3px 0 rgba(255,134,0,.45))
      drop-shadow(3px 0 rgba(var(--g1),.6))
      drop-shadow(0 0 .45em rgba(var(--g1),.55));
    animation: flicker 1.4s steps(1, end) 1 both, glitch 8s steps(1, end) 2s infinite;
  }
  .tagline { margin-top: 1rem; color: var(--muted); font-size: 1.05rem; line-height: 1.5; max-width: 36ch; }
  @keyframes flicker {
    0% { opacity: .15; } 8% { opacity: 1; } 12% { opacity: .2; } 20% { opacity: 1; }
    24% { opacity: .35; } 28%, 62% { opacity: 1; } 66% { opacity: .5; } 70%, 100% { opacity: 1; }
  }
  @keyframes glitch {
    0%, 94%, 100% { transform: none; }
    95% { transform: translateX(-4px) skewX(-4deg); }
    96% { transform: translateX(5px); }
    97% { transform: translateX(-2px) skewX(3deg); }
    98% { transform: none; }
  }

  section + section { margin-top: 2.25rem; }
  h2 {
    font-family: var(--display); font-weight: 400;
    font-size: 1.15rem; line-height: 1.3;
    color: var(--lavender);
    text-shadow: 0 0 8px rgba(var(--g1),.6);
    margin-bottom: .9rem;
  }
  ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
  .plate {
    position: relative;
    display: flex; align-items: center; gap: 1rem;
    padding: .8rem 1.1rem .8rem 1.7rem;
    background: var(--bar) 0 0 / 4px 100% no-repeat, rgba(0,0,0,.28);
    border: 1px solid var(--grime);
    color: inherit; text-decoration: none;
    transition: border-color .12s steps(2, end), background .12s steps(2, end), box-shadow .12s steps(2, end);
  }
  .plate::before {
    content: ">"; position: absolute; left: .45rem; top: 50%; transform: translateY(-50%); line-height: 1;
    font-family: var(--mono); color: var(--purple-hot); opacity: 0;
    transition: none;
  }
  .plate .txt { display: flex; flex-direction: column; gap: .1rem; }
  .plate .ico {
    width: 26px; height: 26px; flex: none;
    color: var(--lavender);
    filter: drop-shadow(0 0 5px rgba(var(--g1),.7));
    transition: color .12s steps(2, end), filter .12s steps(2, end);
  }
  .plate .pfp {
    display: none; flex: none; width: 40px; height: 40px; object-fit: cover;
    border: 2px solid var(--purple);
    box-shadow: 0 0 10px rgba(var(--g1),.55);
    border-radius: 50%;
  }
  .plate.has-pfp .pfp { display: block; }
  .plate.has-pfp .ico { display: none; }
  .plate .name { font-weight: 400; font-size: 1.3rem; line-height: 1.2; }
  .plate .hint { font-family: var(--mono); font-size: .95rem; line-height: 1.3; color: var(--muted); }
  .plate:hover::before, .plate:focus-visible::before { opacity: 1; }
  .plate:focus-visible { outline: 2px solid var(--purple-hot); outline-offset: 3px; }
  .plate.map { border-color: rgba(var(--g1),.55); }

  footer { margin-top: 2.5rem; font-family: var(--mono); font-size: .85rem; color: var(--muted); }


  /* entrada de la página estilo terminal */
  html.hold main { visibility: hidden; }
  html.hold main.on {
    visibility: visible;
    animation: tear 13s steps(1, end) 6s infinite, crt-on 1.1s cubic-bezier(.2, .8, .2, 1) backwards;
  }
  html.hold .plate { visibility: hidden; }
  html.hold .plate.show { visibility: visible; }
  .tc {
    display: inline-block; width: .55em; height: 1em; margin-left: .1em; vertical-align: -.12em;
    background: var(--purple-hot); box-shadow: 0 0 8px rgba(var(--g1),.9);
    animation: blink 1s steps(1) infinite;
  }
  @keyframes print {
    0% { opacity: 0; } 30% { opacity: .5; } 45% { opacity: 0; }
    60% { opacity: 1; } 75% { opacity: .6; } 100% { opacity: 1; }
  }
  .plate.show { animation: print .5s steps(1, end) both; }
  @keyframes tear {
    0%, 95%, 100% { transform: none; }
    96% { transform: translateX(3px) skewX(.8deg); }
    97% { transform: translateX(-4px); }
    98% { transform: translateX(2px) skewX(-.6deg); }
    99% { transform: none; }
  }
  main { animation: tear 13s steps(1, end) 6s infinite; }
  footer div + div { margin-top: .15rem; }
  #login:empty { display: none; }

  /* efectos al pasar el mouse sobre cada placa */
  .plate { overflow: hidden; }
  .plate.cmd .hint { color: var(--purple-hot); }
  @keyframes sweep {
    0%   { opacity: 1; transform: translateX(-100%); }
    100% { opacity: 1; transform: translateX(300%); }
  }
  .plate .static {
    position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background-image: var(--noise-tv);
  }
  .plate:hover .static, .plate:focus-visible .static { animation: tvstatic .28s steps(1, end) 1; }
  @keyframes tvstatic {
    0%   { opacity: .6;  background-position: 0 0; }
    25%  { opacity: 0; }
    40%  { opacity: .4;  background-position: 37px 11px; }
    60%  { opacity: 0; }
    75%  { opacity: .22; background-position: -20px 50px; }
    100% { opacity: 0; }
  }
  .plate:hover .ico, .plate:hover .pfp,
  .plate:focus-visible .ico, .plate:focus-visible .pfp { animation: icon-glitch .45s steps(1, end) 1; }
  @keyframes icon-glitch {
    0%   { transform: none; }
    15%  { transform: translate(-3px, 1px) skewX(-8deg); filter: drop-shadow(3px 0 rgba(var(--g1),1)) drop-shadow(-3px 0 rgba(255,255,255,.75)); }
    30%  { transform: translate(3px, -1px) skewX(6deg);  filter: drop-shadow(-3px 0 rgba(var(--g1),1)) drop-shadow(3px 0 rgba(255,255,255,.75)); }
    45%  { transform: translate(-1px, 0); }
    60%  { transform: translate(2px, 1px) skewX(-5deg);  filter: drop-shadow(2px 0 rgba(var(--g1),1)) drop-shadow(-2px 0 rgba(255,255,255,.75)); }
    75%  { transform: translate(-1px, -1px); }
    100% { transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    h1, html::after, main, .plate.show, .credit.show { animation: none; }
    .plate .static, .plate .ico, .plate .pfp { animation: none !important; }
    .plate, .plate::before, .plate .ico { transition: none; }
  }

  /* pantalla de arranque */
  #boot-screen { display: none; }
  html.booting #boot-screen {
    display: block;
    position: fixed; inset: 0; z-index: 9;
    background: var(--dk2);
    cursor: pointer;
    transition: opacity .15s ease .5s;
  }
  html.booting #boot-screen.done { opacity: 0; pointer-events: none; }
  html.booting body:not(.ready) h1 { animation-play-state: paused; }

  .crt {
    position: absolute; inset: 0;
    display: grid; place-items: center; padding: 1.5rem;
    animation: crt-on .8s cubic-bezier(.2,.8,.2,1) both;
  }
  .done .crt { animation: crt-off .5s ease-in forwards; }
  @keyframes crt-on {
    0%   { transform: scale(0, .004); filter: brightness(9); }
    35%  { transform: scale(1, .004); filter: brightness(7); }
    70%  { transform: scale(1, 1.04); filter: brightness(2.5); }
    100% { transform: none; filter: none; }
  }
  @keyframes crt-off {
    0%   { transform: none; filter: none; opacity: 1; }
    55%  { transform: scale(1, .004); filter: brightness(8); opacity: 1; }
    100% { transform: scale(0, .004); filter: brightness(8); opacity: 0; }
  }
  .boot-box {
    width: min(560px, 100%);
    font-family: var(--mono); font-size: 1rem; line-height: 1.55;
    color: var(--lavender);
    text-shadow: 0 0 6px rgba(var(--g1),.9), 0 0 18px rgba(var(--g1),.45);
    animation: phosphor 3.2s steps(1) infinite;
  }
  @keyframes phosphor {
    0%, 100% { opacity: 1; } 18% { opacity: .93; } 20% { opacity: 1; }
    57% { opacity: .96; } 59% { opacity: 1; } 83% { opacity: .92; } 85% { opacity: 1; }
  }
  #boot-log { min-height: 21em; white-space: pre; overflow: hidden; }
  #boot-log .ok { color: var(--hi); font-weight: bold;
    text-shadow: 0 0 6px rgba(var(--g3),.95), 0 0 16px rgba(var(--g2),.75); }
  #boot-log .cursor { display: inline-block; width: .6em; height: 1em; vertical-align: -.15em;
    background: var(--lavender); box-shadow: 0 0 8px rgba(var(--g1),.9); animation: blink 1s steps(1) infinite; }
  .boot-skip {
    position: absolute; right: 1.25rem; bottom: 1rem;
    font-family: var(--mono); font-size: .8rem; color: var(--muted);
  }

  /* estado de stream + reproductor */
  .live { margin-bottom: 2.25rem; }
  .live-bar {
    --accent: var(--line2);
    --tint: rgba(0,0,0,.28);
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: .85rem;
    padding: .8rem 1.1rem .8rem 1.7rem;
    font-family: var(--mono); font-size: 1.05rem; line-height: 1.3;
    color: var(--muted); text-decoration: none;
    /* misma barra lateral que las placas + rayado de "sin señal" */
    background:
      linear-gradient(var(--accent), var(--accent)) 0 0 / 4px 100% no-repeat,
      repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 2px, transparent 2px 7px),
      var(--tint);
    border: 1px solid var(--grime); border-radius: 2px;
    transition: border-color .12s steps(2, end), background .12s steps(2, end), box-shadow .12s steps(2, end);
  }
  .live-bar:hover, .live-bar:focus-visible {
    --accent: var(--purple); --tint: rgba(var(--g1),.14);
    border-color: var(--purple-hot);
    box-shadow: 0 0 18px rgba(var(--g1),.35), inset 0 0 14px rgba(var(--g1),.12);
  }
  .live-bar:focus-visible { outline: 2px solid var(--purple-hot); outline-offset: 3px; }
  /* ruido de TV (ráfagas ocasionales sin señal + al pasar el mouse) */
  .live-bar::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background-image: var(--noise-tv);
  }
  .live-bar::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,134,0,.38), rgba(255,200,120,.16), transparent);
    transform: translateX(-100%); opacity: 0;
  }
  .live:not(.is-live) .live-bar::before { animation: nosignal 11s steps(1, end) 2s infinite; }
  @keyframes nosignal {
    0%, 93%, 100% { opacity: 0; }
    94% { opacity: .32; background-position: 0 0; }
    95% { opacity: 0; }
    96% { opacity: .2; background-position: 37px 11px; }
    97% { opacity: 0; }
  }
  .live .live-bar:hover::before, .live .live-bar:focus-visible::before { animation: tvstatic .28s steps(1, end) 1; }
  .live .live-bar:hover::after, .live .live-bar:focus-visible::after { animation: sweep .7s steps(16, end) 1; }

  .live-ico {
    width: 24px; height: 24px; flex: none; color: var(--muted);
    transition: color .12s steps(2, end);
  }
  .live-ico .slash { stroke: var(--orange); filter: drop-shadow(0 0 4px rgba(255,134,0,.7)); }
  .live-ico .arcs { opacity: .75; }
  .live-bar:hover .live-ico, .live-bar:focus-visible .live-ico { color: var(--lavender); }
  .live-text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .off-label { color: var(--muted); }
  .off-tag {
    color: var(--orange); text-shadow: 0 0 8px rgba(255,134,0,.55);
    animation: dying 7s steps(1, end) infinite;
  }
  @keyframes dying {
    0%, 90%, 100% { opacity: 1; }
    91% { opacity: .3; } 92% { opacity: 1; } 94% { opacity: .5; } 95% { opacity: 1; }
  }

  /* medidor de señal: busca señal cuando no hay directo, se enciende cuando lo hay */
  .live-meter { display: flex; align-items: flex-end; gap: 3px; height: 1.1rem; flex: none; }
  .live-meter i { display: block; width: 4px; border-radius: 2px; background: var(--line); transform-origin: bottom; }
  .live-meter i:nth-child(1) { height: 30%; }
  .live-meter i:nth-child(2) { height: 55%; }
  .live-meter i:nth-child(3) { height: 78%; }
  .live-meter i:nth-child(4) { height: 100%; }
  .live:not(.is-live) .live-meter i { animation: seek 2.6s steps(1, end) infinite; }
  .live:not(.is-live) .live-meter i:nth-child(2) { animation-delay: .2s; }
  .live:not(.is-live) .live-meter i:nth-child(3) { animation-delay: .4s; }
  .live:not(.is-live) .live-meter i:nth-child(4) { animation-delay: .6s; }
  @keyframes seek {
    0%, 100% { background: var(--line); box-shadow: none; }
    10% { background: var(--orange); box-shadow: 0 0 6px rgba(255,134,0,.8); }
    22% { background: var(--line); box-shadow: none; }
  }

  .live.is-live .live-bar {
    --accent: var(--hi);
    color: var(--bone); border-color: rgba(var(--g3),.7);
    box-shadow: 0 0 16px rgba(var(--g2),.3);
  }
  .live.is-live .live-bar:hover, .live.is-live .live-bar:focus-visible {
    --accent: var(--purple-hot);
    border-color: var(--purple-hot);
    box-shadow: 0 0 18px rgba(var(--g1),.45), inset 0 0 14px rgba(var(--g1),.12);
  }
  .live.is-live .live-ico {
    color: var(--hi); filter: drop-shadow(0 0 6px rgba(var(--g2),.9));
  }
  .live.is-live .live-ico .slash { display: none; }
  .live.is-live .live-ico .arcs { opacity: 1; animation: blink 1.4s steps(1) infinite; }
  .live-tag { color: var(--hi); text-shadow: 0 0 8px rgba(var(--g2),.8); }
  .live.is-live .live-meter i {
    background: var(--hi); box-shadow: 0 0 6px rgba(var(--g2),.8);
    animation: eq 1.1s steps(1, end) infinite;
  }
  .live.is-live .live-meter i:nth-child(2) { animation-delay: .15s; }
  .live.is-live .live-meter i:nth-child(3) { animation-delay: .3s; }
  .live.is-live .live-meter i:nth-child(4) { animation-delay: .45s; }
  @keyframes eq {
    0%, 100% { transform: scaleY(1); } 25% { transform: scaleY(.55); }
    50% { transform: scaleY(.85); } 75% { transform: scaleY(.4); }
  }

  /* entrada tipo terminal, igual que las placas */
  html.hold .live-bar { visibility: hidden; }
  html.hold .live-bar.show { visibility: visible; }
  .live-bar.show { animation: print .5s steps(1, end) both; }
  .player { margin-top: .6rem; background: var(--dk2); border: 1px solid rgba(var(--g1),.55); border-radius: 2px; overflow: hidden; }
  .player-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: .35rem .7rem; font-family: var(--mono); font-size: .85rem;
    color: var(--lavender); border-bottom: 1px solid var(--grime);
  }
  .player-head button { font: inherit; color: var(--muted); background: none; border: 0; cursor: pointer; }
  .player-head button:hover, .player-head button:focus-visible { color: #fff; }
  .player-frame { aspect-ratio: 16 / 9; }
  .player-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
  @media (prefers-reduced-motion: reduce) {
    .live-ico .arcs, .live-meter i, .off-tag, .live-bar.show { animation: none !important; }
    .live-bar::before, .live-bar::after { animation: none !important; }
  }

  /* créditos */
  .credit {
    display: flex; align-items: center; gap: .9rem;
    font-family: var(--mono); font-size: .95rem; line-height: 1.5; color: var(--muted);
    padding: .65rem .9rem; background: rgba(0,0,0,.28);
    border: 1px solid var(--grime); border-left: 4px solid var(--purple);
  }
  .credit-pic {
    width: 48px; height: 48px; flex: none; object-fit: cover; border-radius: 50%;
    border: 2px solid var(--purple); box-shadow: 0 0 10px rgba(var(--g1),.55);
  }
  .credit a { color: var(--lavender); text-decoration: underline; text-underline-offset: .2em; text-shadow: 0 0 8px rgba(var(--g1),.6); }
  .credit a:hover, .credit a:focus-visible { color: #fff; }
  .credit b { font-weight: 400; color: var(--bone); }
  /* entra con la misma animación que los botones */
  html.hold .credit { visibility: hidden; }
  html.hold .credit.show { visibility: visible; }
  .credit.show { animation: print .5s steps(1, end) both; }

  /* modo ligero: equipos sin aceleración por hardware o con pocos FPS */
  html.lite body::before, html.lite::before, html.lite::after { display: none; }
  html.lite h1 { filter: none; animation: flicker 1.4s steps(1, end) 1 both; }
  html.lite main, html.lite.hold main.on { animation: none; }
  html.lite .plate .ico, html.lite .live-ico { filter: none; }
  html.lite .plate .ico, html.lite .plate .pfp { animation: none !important; }
  html.lite .plate .static,
  html.lite .live-bar::before, html.lite .live-bar::after,
  html.lite .live-meter i, html.lite .boot-box { animation: none !important; }
  html.lite .crt, html.lite .done .crt { animation: none; }
  html.lite .done .crt { opacity: 0; }

  /* ============ capa de terminal real (fósforo ámbar) ============ */
  body { text-shadow: 0 0 5px rgba(var(--g1), .5); }
  main { position: relative; }
  main::before {
    content: "TARAKAAS.SYS"; position: absolute; top: -.8rem; left: 1.4rem; padding: 0 .6rem;
    background: var(--panel); color: var(--lavender);
    font-family: var(--mono); font-size: .85rem; letter-spacing: .14em;
  }
  .tagline::before { content: "> "; color: var(--purple-hot); }
  h2 { overflow: hidden; white-space: nowrap; text-transform: uppercase; letter-spacing: .1em; }
  h2::before { content: "\25B8  "; color: var(--purple-hot); }
  h2::after {
    content: ""; display: inline-block; width: 100%; margin: 0 -100% 0 .8rem; vertical-align: middle;
    border-bottom: 1px dashed var(--grime2);
  }

  /* hover = video inverso, como un menú de terminal */
  .plate:hover, .plate:focus-visible {
    background: var(--purple-hot); border-color: var(--purple-hot);
    color: var(--dk1); text-shadow: none;
    box-shadow: 0 0 22px rgba(var(--g1), .55);
  }
  .plate:hover .name, .plate:focus-visible .name,
  .plate:hover .hint, .plate:focus-visible .hint, .plate.cmd:hover .hint,
  .plate:hover::before, .plate:focus-visible::before { color: var(--dk1); }
  .plate:hover .ico, .plate:focus-visible .ico { color: var(--dk1); filter: none; }
  .plate:hover .tc, .plate:focus-visible .tc { background: var(--dk1); box-shadow: none; }


  /* parpadeo de brillo del monitor */
  html::before {
    content: ""; position: fixed; inset: 0; z-index: 11; pointer-events: none; opacity: 0;
    background: rgba(var(--g1), .06); mix-blend-mode: screen;
    animation: bright 5.3s steps(1, end) infinite;
  }
  @keyframes bright {
    0%, 100% { opacity: 0; } 11% { opacity: 1; } 12% { opacity: .3; } 13% { opacity: 0; }
    47% { opacity: .6; } 48% { opacity: 0; } 80% { opacity: .9; } 81% { opacity: .2; } 82% { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) { html::before { animation: none; } }

  /* ============ panel lateral: avatar ASCII + terminal ============ */
  .stage { width: 100%; display: flex; justify-content: center; align-items: flex-start; gap: 1.6rem; }
  .stage > main { flex: 0 1 600px; min-width: 0; }
  #side {
    flex: 0 0 400px; position: sticky; top: clamp(.75rem, 4vw, 3rem);
    display: flex; flex-direction: column; gap: .8rem; padding: 1.5rem 14px 14px;
    background: var(--panel); border: 1px solid var(--grime2); border-radius: 2px;
    box-shadow: 0 0 40px rgba(var(--g1), .15), inset 0 0 60px rgba(0,0,0,.5);
    font-family: var(--mono);
  }
  #side::before {
    content: "TERMINAL.SYS"; position: absolute; top: -.8rem; left: 1.4rem; padding: 0 .6rem;
    background: var(--panel); color: var(--lavender); font-size: .85rem; letter-spacing: .14em;
  }
  html.hold #side:not(.on) { visibility: hidden; }
  .ascii {
    margin: 0; font: 7px/7px "Courier New", ui-monospace, monospace; white-space: pre; overflow: hidden;
    color: var(--lavender); opacity: .8; text-shadow: 0 0 4px rgba(var(--g1), .8); user-select: none;
  }
  #side.on .ascii { animation: scan 2.4s steps(44) both; }
  @keyframes scan { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
  .term { border-top: 1px dashed var(--grime2); padding-top: .6rem; display: flex; flex-direction: column; gap: .4rem; }
  .term-out {
    height: clamp(140px, 24vh, 240px); overflow-y: auto; font-size: .85rem; line-height: 1.35;
    scrollbar-width: thin; scrollbar-color: var(--grime2) transparent;
  }
  .tl { white-space: pre-wrap; word-break: break-word; color: var(--bone); }
  .tl.me { color: var(--lavender); }
  /* separación como en una consola real: cada comando (C:\TARAKAAS>) abre un bloque con más aire arriba,
     y cada mensaje de la terminal (.ini = su primera línea) queda separado del anterior. Las líneas de una misma lista van juntas. */
  .tl.me { margin-top: .95em; }
  .tl.ini { margin-top: .6em; }
  .tl.err { color: var(--orange); }
  .term-in { display: flex; gap: .5rem; align-items: center; color: var(--purple-hot); font-size: .9rem; }
  .term-in input {
    flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--bone);
    font: inherit; text-shadow: inherit; caret-color: var(--purple-hot); caret-shape: block;
  }
  #term-open, #term-x { display: none; font: inherit; cursor: pointer; }
  #sonido { font: inherit; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }
  #sonido:hover, #sonido:focus-visible { color: var(--purple-hot); }
  html.lite #side.on .ascii { animation: none; }
  @media (prefers-reduced-motion: reduce) { #side.on .ascii { animation: none; } }
  @media (max-width: 1099px) {
    .stage { display: block; }
    .stage > main { margin: 0 auto; }
    #side { display: none; position: fixed; left: .75rem; right: .75rem; bottom: .75rem; top: auto; z-index: 9; }
    #side.open { display: flex; }
    .ascii { display: none; }
    #term-open {
      display: block; position: fixed; right: .9rem; bottom: .9rem; z-index: 9; padding: .45rem .7rem;
      background: var(--panel); color: var(--purple-hot); border: 1px solid var(--grime2); border-radius: 2px;
    }
    #term-x { display: block; position: absolute; top: .3rem; right: .6rem; background: none; border: 0; color: var(--muted); }
  }


  /* ============ modos especiales: doom y portal (comandos "doom" y "portal") ============ */
  html.doom {
    --void: #0d0000; --panel: #1a0504; --grime: #4a1a14; --grime2: #6b1c10; --bone: #f1d9c6;
    --purple: #d41d00; --purple-hot: #ff4a1c; --lavender: #ff9a5c; --orange: #ffb300; --hi: #ffd479;
    --g1: 212,29,0; --g2: 255,80,20; --g3: 255,190,90; --dk1: #0a0202; --dk2: #080101;
    --line: #4a1a14; --line2: #6b2a1c; --dim: #9a6a5a; --muted: #b58a78;
  }
  html.portal {
    --void: #0c1117; --panel: #121a22; --grime: #2a3846; --grime2: #2f5b7a; --bone: #e6eef5;
    --purple: #0a8fe8; --purple-hot: #4cc3ff; --lavender: #8fd4ff; --orange: #ff9a1f; --hi: #ffc46b;
    --g1: 10,143,232; --g2: 76,195,255; --g3: 160,225,255; --dk1: #0a0e13; --dk2: #080b0f;
    --line: #2a3846; --line2: #3a5166; --dim: #6f8396; --muted: #8aa0b3;
  }
  /* los colores se funden en vez de cambiar de golpe (solo durante la transición) */
  html.modo-fade, html.modo-fade *, html.modo-fade *::before, html.modo-fade *::after {
    transition: color 1s ease, background-color 1s ease, border-color 1s ease, box-shadow 1s ease,
                text-shadow 1s ease, fill 1s ease, stroke 1s ease !important;
  }
  /* velo de color que sube y baja suave; tapa el cambio brusco de los degradados del fondo */
  .modo-wash { position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: 0; transition: opacity 1.1s ease; }
  .modo-wash.on { opacity: 1; }
  .modo-wash.doom {
    background: radial-gradient(ellipse 80% 45% at 50% 105%, rgba(255, 60, 0, .32), transparent 70%), rgba(90, 0, 0, .14);
  }
  .modo-wash.portal {
    background: radial-gradient(ellipse 50% 42% at 14% 106%, rgba(76, 195, 255, .30), transparent 70%),
                radial-gradient(ellipse 50% 42% at 86% 106%, rgba(255, 154, 31, .28), transparent 70%);
  }
  @media (prefers-reduced-motion: reduce) { .modo-wash { transition: none; } }

  /* capas de efecto sobre el dibujo ASCII (el original queda debajo y se va revelando al salir) */
  .ascii-fx { position: absolute; pointer-events: none; opacity: 1; color: transparent; text-shadow: none; }
  #side.on .ascii.ascii-fx { animation: none; }
  .ascii-fire {
    background: linear-gradient(to top, #fff4b0 0%, #ffb300 22%, #ff4a1c 50%, #b01000 75%, #3a0300 100%);
    -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 6px rgba(255, 70, 0, .7));
  }
  .ascii-p-logo {
    background: linear-gradient(90deg, #ff9a1f 14%, #4cc3ff 86%);
    -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(0 0 5px rgba(76, 195, 255, .45));
    animation: logoglow 2.6s ease-in-out infinite alternate;
  }
  .ascii-p-glint { color: #fff; text-shadow: 0 0 8px #fff, 0 0 14px rgba(255, 255, 255, .6); }
  @keyframes logoglow { from { filter: drop-shadow(0 0 4px rgba(76, 195, 255, .35)) brightness(1); } to { filter: drop-shadow(0 0 9px rgba(255, 154, 31, .6)) brightness(1.25); } }
  html.doom #side { box-shadow: 0 0 50px rgba(255, 60, 0, .35), inset 0 0 60px rgba(0, 0, 0, .6); }
  html.portal #side { box-shadow: -14px 0 40px rgba(76, 195, 255, .20), 14px 0 40px rgba(255, 154, 31, .16), inset 0 0 60px rgba(0, 0, 0, .55); }

  .tl a { color: var(--hi); text-decoration: underline; text-underline-offset: 2px; }
  .tl a:hover, .tl a:focus-visible { color: var(--purple-hot); }

  .doom-flash {
    position: fixed; inset: 0; z-index: 99; pointer-events: none; background: #ff2a00;
    animation: doomflash .9s ease-out both;
  }
  @keyframes doomflash { from { opacity: .85; } to { opacity: 0; } }

  /* portales (los dos de la animación de entrada y los que se abren con clic) */
  .pt {
    --cg: 76,195,255; --c: #4cc3ff;
    position: absolute; z-index: 8; width: 54px; height: 96px; margin: -48px 0 0 -27px; border-radius: 50%;
    pointer-events: none; border: 3px solid var(--c);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, .92) 30%, rgba(var(--cg), .5) 100%);
    box-shadow: 0 0 14px 2px rgba(var(--cg), .9), inset 0 0 14px rgba(var(--cg), .8);
    animation: ptopen .45s cubic-bezier(.2, 1.4, .4, 1) both, ptwob 2.2s ease-in-out .45s infinite;
  }
  .pt-naranja { --cg: 255,154,31; --c: #ff9a1f; }
  .pt.cerrando { animation: ptclose .4s ease-in both; }
  @keyframes ptopen { from { transform: scale(0); } to { transform: scale(1); } }
  @keyframes ptclose { from { transform: scale(1); } to { transform: scale(0); } }
  @keyframes ptwob {
    0%, 100% { border-radius: 50%; filter: brightness(1); }
    50% { border-radius: 47% 53% 51% 49% / 53% 47% 53% 47%; filter: brightness(1.3); }
  }
  .portal-flash { position: fixed; inset: 0; z-index: 99; pointer-events: none; }
  .portal-flash .pt {
    position: fixed; top: 50%; width: 150px; height: 270px; margin: -135px 0 0 -75px;
    animation: ptflash 1.4s ease-out both;
  }
  .portal-flash .pt-azul { left: 22%; }
  .portal-flash .pt-naranja { left: 78%; }
  @keyframes ptflash {
    0% { transform: scale(0); opacity: 1; } 35% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .doom-flash, .portal-flash { display: none; }
    .pt { animation: none; }
  }

  /* terminal del modo portal: pantalla ámbar tipo créditos del final del juego */
  html.portal .term {
    background: linear-gradient(#1b1203, #2b1b06); border: 1px solid #6b4a12; padding: .6rem;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .55);
  }
  html.portal .term-out .tl { color: #e2a43a; text-shadow: 0 0 6px rgba(226, 164, 58, .45); }
  html.portal .term-out .tl.me { color: #f7cf7c; }
  html.portal .term-out .tl.err { color: #ff6a2a; }
  html.portal .term-in, html.portal .term-in input { color: #f0b84a; caret-color: #f0b84a; }
  /* la letra que sale al ritmo de la canción */
  .tl.letra { color: #f7cf7c; letter-spacing: .02em; animation: letraIn .5s ease-out both; }
  @keyframes letraIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .ascii-p-logo, .tl.letra { animation: none; } }
  /* tipografía y cursor de la terminal en modo portal (monoespaciada, como la pantalla del juego) */
  html.portal #side { font-family: "Droid Sans Mono", "DejaVu Sans Mono", "Lucida Console", Menlo, Consolas, monospace; }
  html.portal #side::before { background: #3a2404; color: #e2a43a; }
  html.portal .term-in input { caret-shape: underscore; }

  /* ============ modo ligero (extra): lo que más cuesta pintar sin aceleración por hardware ============ */
  html.lite *, html.lite *::before, html.lite *::after { text-shadow: none !important; }   /* el resplandor del texto (todo el sitio y el ASCII) */
  html.lite main { box-shadow: 0 0 0 5px var(--dk1), 0 0 0 6px var(--grime); }              /* se queda el marco, sin el brillo difuso */
  html.lite #side, html.lite.doom #side, html.lite.portal #side { box-shadow: none; }
  html.lite .ascii-fire, html.lite .ascii-p-logo { filter: none; animation: none; }          /* filtros (uno de ellos animado) sobre el ASCII */
  html.lite .pt:not(.cerrando) { box-shadow: none; animation: ptopen .45s cubic-bezier(.2, 1.4, .4, 1) both; }
  html.lite.modo-fade, html.lite.modo-fade *, html.lite.modo-fade *::before, html.lite.modo-fade *::after { transition: none !important; }