:root {
    --bg: #04060a;
    --scene-ink: #edf2f6;
    --scene-ink-soft: #b4bfca;
    --scene-bronze: #d9b673;
    --scrim: rgba(3, 5, 9, 0.9);
    --ink: #12171d;
    --ink-soft: #46515d;
    --plate: rgba(236, 241, 246, 0.86);
    --plate-line: rgba(18, 23, 29, 0.16);
    --exit-ink: #1fae5c;
    --exit-plate: #07140c;
    --exit-line: rgba(31, 174, 92, 0.55);
    --exit-glow: rgba(31, 174, 92, 0.3);
    --focus: #2b6be4;
    --joy-ring: rgba(255, 255, 255, 0.38);
    --joy-knob: rgba(255, 255, 255, 0.3);
    --fade: #000000;
    --rec-ink: #ffe2de;
    --rec-dot: #ff2b1c;
    --rec-line: rgba(255, 64, 48, 0.42);
    --rec-plate: rgba(18, 3, 4, 0.62);
    --flash: #f2fff7;
    color-scheme: light;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ink: #e8eef4;
      --ink-soft: #a6b2be;
      --plate: rgba(9, 13, 19, 0.7);
      --plate-line: rgba(232, 238, 244, 0.16);
      --exit-ink: #3fe88e;
      --exit-line: rgba(63, 232, 142, 0.5);
      --exit-glow: rgba(63, 232, 142, 0.35);
      --focus: #8fb6ff;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --ink: #e8eef4;
    --ink-soft: #a6b2be;
    --plate: rgba(9, 13, 19, 0.7);
    --plate-line: rgba(232, 238, 244, 0.16);
    --exit-ink: #3fe88e;
    --exit-line: rgba(63, 232, 142, 0.5);
    --exit-glow: rgba(63, 232, 142, 0.35);
    --focus: #8fb6ff;
    color-scheme: dark;
  }
  html { height: 100%; background: var(--bg); scroll-padding-top: env(safe-area-inset-top, 0px); }
  body {
    height: 100%; margin: 0; background: var(--bg); color: var(--scene-ink);
    font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    overflow: hidden; -webkit-tap-highlight-color: transparent;
  }
  #app { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
  #app > canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; outline: none; }
  #app.pre .brand, #app.pre .tools, #app.pre .mode, #app.pre .rec, #app.pre .run, #app.pre .act { visibility: hidden; }

  .brand { position: absolute; left: 18px; top: 14px; pointer-events: none; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75); }
  .brand .name { margin: 0; font-family: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif; font-weight: 700; font-size: 19px; letter-spacing: 0.06em; color: var(--scene-bronze); }
  .brand .sub { margin: 3px 0 0; font-size: 12.5px; color: var(--scene-ink-soft); }

  .tools { position: absolute; right: 12px; top: 12px; display: flex; gap: 8px; align-items: center; }
  .tbtn {
    appearance: none; font: 500 13px/1.1 "IBM Plex Sans", system-ui, sans-serif; color: var(--ink);
    background: var(--plate); border: 1px solid var(--plate-line); border-radius: 9px; padding: 9px 11px;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer;
  }
  .fps { position: absolute; top: 46px; right: 4px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--scene-ink-soft); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85); min-width: 46px; text-align: right; pointer-events: none; }

  .sign {
    appearance: none; font: 600 15px/1 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: 0.01em;
    color: var(--exit-ink); background: var(--exit-plate); border: 1.5px solid var(--exit-line); border-radius: 5px;
    padding: 13px 18px; text-shadow: 0 0 12px var(--exit-glow); box-shadow: 0 0 22px var(--exit-glow); cursor: pointer;
  }
  .mode { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); white-space: nowrap; }

  .toast {
    position: absolute; left: 50%; bottom: 78px; transform: translate(-50%, 8px); max-width: min(86%, 420px);
    padding: 11px 14px; border-radius: 9px; background: var(--plate); border: 1px solid var(--plate-line); color: var(--ink);
    font-size: 14px; line-height: 1.4; text-align: center; opacity: 0; pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .toast.on { opacity: 1; transform: translate(-50%, 0); }

  .rec {
    position: absolute; left: 18px; top: 64px; display: flex; align-items: center; gap: 8px;
    padding: 6px 10px 6px 9px; border-radius: 7px; background: var(--rec-plate); border: 1px solid var(--rec-line);
    font: 600 13px/1 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: 0.05em; font-variant-numeric: tabular-nums;
    color: var(--rec-ink); opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .rec.on { opacity: 1; transform: none; }
  .rec .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rec-dot); box-shadow: 0 0 9px var(--rec-dot); }

  .act {
    position: absolute; left: 50%; bottom: 76px; transform: translate(-50%, 6px); display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px; width: max-content; max-width: 94vw; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .act.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
  .act .tbtn { padding: 12px 16px; font-size: 15px; }
  #app.acting .toast { bottom: 140px; }
  .run { position: absolute; right: 14px; bottom: 18px; display: none; padding: 12px 16px; font-size: 15px; }
  #app.touch .run { display: block; }
  .run[aria-pressed="true"] { border-color: var(--exit-line); color: var(--exit-ink); background: var(--exit-plate); box-shadow: 0 0 16px var(--exit-glow); }
  #app.riding .mode, #app.riding .run { visibility: hidden; }
  .flash { position: absolute; inset: 0; background: var(--flash); opacity: 0; pointer-events: none; transition: opacity 0.8s ease; }
  .flash.on { opacity: 1; transition-duration: 0.4s; }
  .arrive {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px;
    background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 0.6s ease;
  }
  .arrive.on { opacity: 1; pointer-events: auto; }
  .arrive .card { max-width: 30em; text-align: center; }
  .arrive .kicker { margin: 0 0 10px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--scene-ink-soft); }
  .arrive h2 { margin: 0 0 14px; font-family: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(36px, 9vw, 60px); line-height: 1; letter-spacing: 0.04em; color: var(--scene-bronze); }
  .arrive p { margin: 0 auto 22px; max-width: 26em; font-size: 16px; line-height: 1.55; color: var(--scene-ink); }

  .menu {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px;
    background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
  }
  .menu.on { opacity: 1; pointer-events: auto; }
  .menu .card { width: min(360px, 100%); text-align: center; }
  .menu h2 { margin: 0 0 18px; font-family: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif; font-weight: 700; font-size: 34px; letter-spacing: 0.04em; color: var(--scene-bronze); }
  .menu-actions { display: flex; flex-direction: column; gap: 10px; }
  .menu-actions .sign, .menu-actions .tbtn { width: 100%; padding: 13px 16px; font-size: 15px; }
  .menu-help { margin: 16px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--scene-ink-soft); }
  #app.touch #mMouse { display: none; }
  .arrive-alt { margin: 14px 0 0; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
  .act kbd { display: inline-block; margin-left: 9px; padding: 1px 6px; border-radius: 4px; border: 1px solid currentColor; font: 600 11px/1.4 "IBM Plex Sans", system-ui, sans-serif; opacity: 0.7; }
  @media (max-width: 560px) { #btnSound, #btnQuality { display: none; } }
  .cross { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.45); display: none; pointer-events: none; }
  #app.locked .cross { display: block; }
  .joy { position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 1.5px solid var(--joy-ring); display: none; pointer-events: none; }
  .joy .knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--joy-knob); }

  .fade { position: absolute; inset: 0; background: var(--fade); opacity: 0; pointer-events: none; transition: opacity 0.32s ease; }
  .fade.on { opacity: 1; }

  .intro {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 22px 28px;
    background: linear-gradient(to bottom, rgba(3, 5, 9, 0) 28%, var(--scrim) 80%); transition: opacity 0.6s ease;
  }
  .intro.gone { opacity: 0; pointer-events: none; }
  .intro h1 { margin: 0 0 14px; font-family: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(42px, 11vw, 76px); line-height: 1; letter-spacing: 0.04em; color: var(--scene-bronze); }
  .intro p { margin: 0 0 12px; max-width: 34em; font-size: 16px; line-height: 1.55; color: var(--scene-ink); }
  .intro p.how { font-size: 14px; color: var(--scene-ink-soft); }
  .intro .sign { align-self: flex-start; margin-top: 8px; font-size: 16px; padding: 14px 24px; }

  .tbtn:focus-visible, .sign:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  .fatal { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--scene-ink); background: var(--bg); font-size: 16px; line-height: 1.5; }
  .fatal[hidden] { display: none; }
  @media (prefers-reduced-motion: reduce) { .toast, .fade, .intro, .rec, .act, .flash, .arrive, .menu { transition: none; } }


/* ---------- Mundo 003 additions ---------- */
.intro .kicker { margin: 0 0 8px; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--scene-ink-soft); }
.intro .place { margin: -6px 0 12px; font-weight: 600; font-size: clamp(18px, 4.6vw, 24px); color: #7ff6ff; text-shadow: 0 0 18px rgba(18, 232, 220, 0.45); }
.intro { background: linear-gradient(to bottom, rgba(2, 3, 6, 0) 30%, rgba(4, 3, 10, 0.9) 82%); }
.brand .sub { color: #bff8ff; }
.os, .phone {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px;
  background: rgba(2, 4, 8, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 30; color-scheme: dark;
}
.os.on, .phone.on { opacity: 1; pointer-events: auto; }
.os-frame {
  width: min(1000px, 100%); height: min(660px, 100%); display: flex; flex-direction: column; overflow: hidden;
  background: rgba(7, 9, 14, 0.97); color: #dfe9f0; border: 1px solid rgba(18, 232, 220, 0.35); border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255, 43, 214, 0.14), 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 44px rgba(18, 232, 220, 0.14);
  font-family: "IBM Plex Sans", system-ui, Arial, sans-serif; -webkit-user-select: text; user-select: text; touch-action: pan-y;
}
.os-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(12, 15, 22, 0.96); border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.os-logo { font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; color: #7ff6ff; }
.os-tabs { display: flex; gap: 4px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.otab { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: #9fb3c0; cursor: pointer; white-space: nowrap; font: 500 13.5px "IBM Plex Sans", system-ui, Arial, sans-serif; }
.otab.on { background: rgba(18, 232, 220, 0.15); color: #effcff; }
.oico { font-family: "IBM Plex Mono", Menlo, Consolas, monospace; color: #ff7ad9; }
.os-clock { color: #9fb3c0; font: 500 13px "IBM Plex Mono", Menlo, Consolas, monospace; }
.os-x { width: 34px; height: 34px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.07); color: #effcff; font: 600 20px/34px Arial, sans-serif; cursor: pointer; }
.os-body { flex: 1; overflow: auto; padding: 14px 16px; overscroll-behavior: contain; }
.term { height: 100%; min-height: 300px; display: flex; flex-direction: column; padding: 10px 12px; border-radius: 8px; background: #04060a; cursor: text; font: 500 14px/1.45 "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace; }
.term-out { flex: 1; overflow: auto; white-space: pre-wrap; word-break: break-word; color: #cfe3ea; }
.term-row { display: flex; gap: 8px; align-items: center; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.term-prompt { color: #7ff6ff; white-space: nowrap; }
.term-in { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #effcff; font: inherit; caret-color: #ff2bd6; }
.olead { margin: 0 0 12px; color: #9fb3c0; }
.oh { margin: 18px 0 8px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #7ff6ff; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); color: #effcff; text-decoration: none; }
.card span { color: #9fb3c0; font-size: 13px; }
.card.here { border-color: rgba(255, 43, 214, 0.55); }
.obtn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border-radius: 9px; border: 1px solid rgba(18, 232, 220, 0.45); background: rgba(18, 232, 220, 0.08); color: #effcff; text-decoration: none; cursor: pointer; font: 600 13.5px "IBM Plex Sans", system-ui, Arial, sans-serif; }
.obtn.on { background: linear-gradient(90deg, rgba(255, 43, 214, 0.3), rgba(18, 232, 220, 0.3)); border-color: rgba(255, 255, 255, 0.28); }
.obtn.ghost { margin-top: 12px; }
.webbar { display: flex; gap: 8px; }
.webin { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.15); background: #04060a; color: #effcff; font: 500 15px "IBM Plex Sans", system-ui, Arial, sans-serif; }
.onote { margin: 8px 0 0; color: #8193a8; font-size: 12.5px; }
.crumb { margin-bottom: 8px; color: #7ff6ff; font: 500 13px "IBM Plex Mono", Menlo, Consolas, monospace; }
.flist { display: flex; flex-direction: column; gap: 4px; }
.fitem { text-align: left; padding: 9px 10px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, 0.035); color: #dfe9f0; cursor: pointer; font: 500 14px "IBM Plex Mono", Menlo, Consolas, monospace; }
.fitem.dir { color: #ff8ee0; }
.fview { min-height: 40px; margin-top: 10px; padding: 10px; border-radius: 8px; background: #04060a; color: #cfe3ea; white-space: pre-wrap; font: 500 13.5px/1.5 "IBM Plex Mono", Menlo, Consolas, monospace; }
.mixrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.card.pl iframe { border: 0; border-radius: 10px; }
.isa-log { height: 300px; max-height: 42vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 10px; }
.msg { max-width: 82%; padding: 9px 12px; border-radius: 12px; font-size: 14.5px; line-height: 1.42; }
.msg.isa { align-self: flex-start; background: rgba(18, 232, 220, 0.12); border: 1px solid rgba(18, 232, 220, 0.32); }
.msg.me { align-self: flex-end; background: rgba(255, 43, 214, 0.14); border: 1px solid rgba(255, 43, 214, 0.32); }
.phone-body {
  width: min(320px, 86vw); height: min(620px, 84%); display: flex; flex-direction: column; gap: 12px; padding: 18px 16px;
  border-radius: 38px; background: #050608; border: 2px solid #2a2d33; box-shadow: 0 0 0 6px #111317, 0 30px 80px rgba(0, 0, 0, 0.6); color: #effcff;
}
.phone-top { display: flex; justify-content: space-between; padding: 0 6px; color: #9fb3c0; font: 600 13px "IBM Plex Sans", system-ui, Arial, sans-serif; }
.phone-body h3 { margin: 4px 6px 0; font-size: 20px; }
.papps { display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.papp { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.055); color: #effcff; text-decoration: none; }
.pico { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(135deg, #ff2bd6, #12e8dc); color: #05070b; font: 700 18px "IBM Plex Sans", system-ui, Arial, sans-serif; }
.ptxt { display: flex; flex-direction: column; } .ptxt span { color: #9fb3c0; font-size: 13px; }
#phoneClose { margin-top: auto; }
.phead { margin: 6px 4px 0; color: #7ff6ff; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.pico.mus { background: linear-gradient(135deg, #1db954, #12e8dc); }
.onote.warn { color: #f0c27a; }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
iframe.spot { border: 0; border-radius: 12px; width: 100%; }
.obtn:focus-visible, .otab:focus-visible, .fitem:focus-visible, .papp:focus-visible, .card:focus-visible, .os-x:focus-visible { outline: 2px solid #7ff6ff; outline-offset: 2px; }
@media (max-width: 640px) { .os { padding: 0; } .os-frame { width: 100%; height: 100%; border-radius: 0; } .olbl { display: none; } .otab { padding: 8px 11px; } }
@media (prefers-reduced-motion: reduce) { .os, .phone { transition: none; } }

/* ---------- The laptop: live pages in 3D, or a full-screen panel ---------- */
.css3d { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.lap { display: flex; flex-direction: column; background: #06080c; color: #e6eef5; border: 2px solid rgba(18, 232, 220, 0.35); border-radius: 10px; overflow: hidden; pointer-events: auto; position: relative;
  font-family: "IBM Plex Sans", system-ui, Arial, sans-serif; color-scheme: dark; transition: box-shadow 0.3s ease; }
.lap.hablando { box-shadow: 0 0 0 2px rgba(127, 246, 255, 0.85), 0 0 34px rgba(18, 232, 220, 0.55); }
.lap.panel { position: absolute; inset: 0; z-index: 31; width: auto; height: auto; border-radius: 0; border: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.lap-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #0c0f16; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex: none; touch-action: manipulation; }
/* BUG-140: las pestañas viven en su propia franja desplazable; el tache «×» y «←» quedan siempre a la vista aunque no quepan */
.lap-tabs { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lap-tabs::-webkit-scrollbar { display: none; }
.lap-x { margin-left: auto; }
.lap-tabs.more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.lap-tabs.less { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }
.lap-tabs.more.less { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.lap-b { min-width: 38px; height: 38px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.07); color: #e6eef5; font: 600 18px/38px Arial, sans-serif; cursor: pointer; flex: none; }
.lap-b:disabled { opacity: 0.35; cursor: default; }
.lap-t { height: 38px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: #a9bccb; font: 600 15px "IBM Plex Sans", system-ui, Arial, sans-serif; cursor: pointer; white-space: nowrap; flex: none; }
.lap-t.on { background: rgba(18, 232, 220, 0.16); color: #ffffff; }
.lap-route { flex: 1; min-width: 60px; color: #7f8ea3; font: 500 13px "IBM Plex Mono", Menlo, Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.lap-body { flex: 1; position: relative; overflow: auto; background: #0a0d12; touch-action: pan-x pan-y; }
.lap-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #ffffff; }
.lap-load { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(6, 8, 12, 0.85); color: #7ff6ff; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.lap-load.on { opacity: 1; }
.demo { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; min-height: 100%; box-sizing: border-box; }
.demo h3 { margin: 0; font-size: 22px; color: #ffffff; }
.lap-badge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(240, 194, 122, 0.12); border: 1px solid rgba(240, 194, 122, 0.4); color: #f0c27a; font-size: 13.5px; }
.lap-real { color: #ffffff; text-decoration: underline; }
.demo-log { flex: 1; min-height: 180px; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.demo-row { display: flex; gap: 8px; }
.demo > .demo-in { flex: none; }
.demo-in { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.15); background: #04060a; color: #ffffff; font: 500 15px "IBM Plex Sans", system-ui, Arial, sans-serif; }
.demo-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border: 0; border-radius: 9px; background: linear-gradient(90deg, #ff2bd6, #12e8dc); color: #05070b; font: 700 15px "IBM Plex Sans", system-ui, Arial, sans-serif; cursor: pointer; text-decoration: none; align-self: flex-start; }
.demo-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.demo-lbl { width: 100%; color: #8fa2b5; font-size: 13px; }
.demo-chip { padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: #dfe9f0; font: 500 14px "IBM Plex Sans", system-ui, Arial, sans-serif; cursor: pointer; text-decoration: none; }
.demo-chip.on { background: rgba(18, 232, 220, 0.18); border-color: rgba(18, 232, 220, 0.6); color: #ffffff; }
.demo-done { margin: 0; color: #7dffa0; font-weight: 600; }
.demo-role { margin: 0; color: #7ff6ff; }
.demo-links { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-table { display: flex; flex-direction: column; gap: 8px; }
.demo-tr { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.demo-price { color: #f0c27a; font-weight: 700; }
.demo-card { display: block; padding: 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); color: #ffffff; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.1); }
.lap-qr { width: 260px; height: 260px; image-rendering: pixelated; align-self: center; background: #ffffff; padding: 12px; border-radius: 12px; }
canvas.snake { display: block; margin: 12px auto; max-width: 100%; border-radius: 8px; outline: none; }
@media (prefers-reduced-motion: reduce) { .lap { transition: none; } }

/* ---------- Notifications like a phone ---------- */
.notifs { position: absolute; top: calc(64px + env(safe-area-inset-top, 0px)); right: 14px; z-index: 26; display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100% - 28px)); pointer-events: none; }
.notif { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(14, 18, 26, 0.88); backdrop-filter: blur(12px); color: #e6eef5; text-align: left; font: 500 14px "IBM Plex Sans", system-ui, Arial, sans-serif; pointer-events: auto; cursor: pointer; animation: notifin 0.35s ease both; }
.notif.out { opacity: 0; transform: translateY(-8px); transition: all 0.35s ease; }
.nico { width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ff2bd6, #12e8dc); color: #05070b; font-weight: 800; }
.ntxt { display: flex; flex-direction: column; gap: 2px; } .ntxt strong { font-size: 13px; color: #7ff6ff; }
@keyframes notifin { from { opacity: 0; transform: translateY(-10px); } }
/* ---------- WhatsApp on the phone ---------- */
.papp.wa .pico.wa { background: #1fa855; color: #ffffff; }
.wa-head { display: flex; gap: 10px; align-items: center; padding: 8px 4px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.wa-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f0c27a, #ff2bd6); color: #05070b; font-weight: 800; flex: none; }
.wa-log { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.wa-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.wa-in { width: 100%; box-sizing: border-box; min-height: 56px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.15); background: #04060a; color: #ffffff; font: 500 15px "IBM Plex Sans", system-ui, Arial, sans-serif; resize: none; margin-bottom: 8px; }
/* ---------- Visualizer in the Music app ---------- */
canvas.viz { display: block; width: 100%; height: 96px; border-radius: 12px; background: rgba(4, 7, 11, 0.8); margin-bottom: 6px; }
.viz-cap { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .notif { animation: none; } }

/* what is hidden stays hidden, even with a display rule */
.lap [hidden], #phone [hidden] { display: none !important; }
/* BUG-140: el snake en el celular: el canvas cabe en el ancho y se queda el dedo (sin desplazar ni hacer zoom); botonera táctil debajo */
canvas.snake { display: block; width: min(660px, 100%); aspect-ratio: 660 / 400; height: auto; margin: 0 auto; touch-action: none; background: #04070b; outline: none; }
.snake-pad { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.snake-k { min-width: 56px; height: 46px; padding: 0 14px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: #e6eef5; font: 600 18px/46px "IBM Plex Sans", system-ui, Arial, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.snake-k:active { background: rgba(18, 232, 220, 0.22); }
.snake-k.quit { color: #ff9ad5; } .snake-k.again { color: #7ff6ff; }
@media (max-width: 640px) { .lap.panel .lap-route { display: none; } .lap.panel .lap-t { padding: 0 10px; font-size: 14px; } }