@font-face {
    
    font-family: "Porte404Mono";
    src:
      local("Cascadia Mono"),
      local("Consolas"),
      local("Menlo"),
      local("Monaco"),
      local("Liberation Mono"),
      local("Courier New");
    font-display: swap;
  }

*,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    min-height: 100%;
    background: #05070d;
    scroll-behavior: smooth;
    overflow-x: hidden;
  }

  body {
    min-height: 100%;
    margin: 0;
    color: var(--text);
    font-family: var(--font-mono, Consolas, "Courier New", monospace);
    background: var(--page-bg);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  button,
  input {
    font: inherit;
  }

  button {
    border: 0;
  }

  img,
  svg {
    display: block;
    max-width: 100%;
  }

  
  [hidden] {
    display: none !important;
  }


  :root {
    --font-mono: "Porte404Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --page-bg: #05070d;
    --panel-bg: rgb(7 12 20 / 78%);
    --panel-bg-strong: rgb(5 8 14 / 90%);
    --panel-border: rgb(128 255 209 / 24%);
    --panel-border-hot: rgb(255 73 91 / 48%);
    --text: #f3f0e6;
    --muted: #a7b5bd;
    --soft: #d9e6df;
    --terminal: #66ffc7;
    --terminal-dim: #3bbd91;
    --danger: #ff495b;
    --warning: #ffd166;
    --blue: #67b7ff;
    --violet: #b08cff;
    --shadow: 0 18px 70px rgb(0 0 0 / 48%);
    --radius: 8px;
    --room-bg-image: none;
    --room-accent: #66ffc7;
    --progress-scale: 0;
    --safe-top: max(16px, env(safe-area-inset-top));
    --safe-bottom: max(16px, env(safe-area-inset-bottom));
  }

  ::selection {
    color: #020405;
    background: var(--terminal);
  }

  :focus {
    outline: 2px solid var(--warning);
    outline-offset: 3px;
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  :focus-visible {
    outline: 2px solid var(--warning);
    outline-offset: 3px;
  }


  .skip-link {
    position: fixed;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    z-index: 20;
    padding: 0.65rem 0.8rem;
    color: #06100d;
    background: var(--terminal);
    border-radius: var(--radius);
    transform: translateY(-140%);
    transition: transform 160ms ease;
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .app {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    isolation: isolate;
    overflow-x: hidden;
    overflow-x: clip;
  }

  .app::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    background:
      linear-gradient(120deg, rgb(102 255 199 / 10%), transparent 36%),
      linear-gradient(225deg, rgb(255 73 91 / 8%), transparent 42%),
      #05070d;
  }

  .app::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.13;
    background:
      repeating-linear-gradient(0deg, transparent 0 2px, rgb(255 255 255 / 9%) 3px, transparent 4px),
      repeating-linear-gradient(90deg, transparent 0 11px, rgb(102 255 199 / 6%) 12px, transparent 14px);
    mix-blend-mode: screen;
  }

  .topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
    padding: var(--safe-top) clamp(1rem, 3vw, 2rem) 0.85rem;
    background: linear-gradient(180deg, rgb(5 7 13 / 94%), rgb(5 7 13 / 72%) 78%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  
  .main-menu {
    position: relative;
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(1rem, 4vw, 2rem);
    place-items: center;
    overflow: hidden;
  }

  .main-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(circle at 50% 42%, rgb(102 255 199 / 13%), transparent 32%),
      linear-gradient(180deg, rgb(255 73 91 / 10%), transparent 36%),
      repeating-linear-gradient(0deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 48px),
      #05070d;
  }

  .main-menu__content {
    display: grid;
    gap: clamp(0.9rem, 3vw, 1.25rem);
    width: min(720px, 100%);
    padding: clamp(1rem, 4vw, 2rem);
    text-align: center;
    border: 1px solid rgb(102 255 199 / 24%);
    border-radius: var(--radius);
    background: rgb(5 8 14 / 74%);
    box-shadow: var(--shadow), inset 0 0 60px rgb(102 255 199 / 6%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .main-menu__code {
    color: var(--danger);
    font-size: clamp(0.78rem, 2vw, 0.94rem);
    text-transform: uppercase;
  }

  .main-menu__title {
    margin: 0;
    color: var(--text);
    font-size: clamp(3rem, 14vw, 8rem);
    line-height: 0.95;
  }

  .main-menu__text {
    margin: 0 auto;
    max-width: 42rem;
    color: var(--muted);
    font-size: clamp(0.98rem, 2.5vw, 1.2rem);
    line-height: 1.6;
  }

  .main-menu__language,
  .main-menu__player {
    justify-self: center;
  }

  .main-menu__language > span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--muted);
  }

  .main-menu__language > span::before {
    content: "";
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: var(--terminal);
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background:
      linear-gradient(currentColor 0 0) center / 100% 1px no-repeat,
      linear-gradient(90deg, transparent 40%, currentColor 48% 52%, transparent 60%) center / 100% 100% no-repeat;
    box-shadow: 0 0 14px rgb(102 255 199 / 25%);
    opacity: 0.95;
  }

  .main-menu__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
    width: min(520px, 100%);
    justify-self: center;
  }

  .main-menu__status {
    margin: 0;
    color: var(--muted);
    font-size: clamp(0.78rem, 2vw, 0.92rem);
  }

  .main-menu__status.is-admin-active {
    color: var(--terminal);
    text-shadow: 0 0 18px rgb(102 255 199 / 32%);
  }

  .audio-settings-button {
    position: fixed;
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    z-index: 70;
    min-width: 3.4rem;
    min-height: 3.1rem;
    padding: 0.55rem 0.72rem;
    color: var(--terminal);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0;
    background: rgb(4 9 15 / 88%);
    border: 1px solid rgb(102 255 199 / 38%);
    border-radius: var(--radius);
    box-shadow: 0 0 24px rgb(102 255 199 / 16%), inset 0 0 22px rgb(102 255 199 / 6%);
    cursor: pointer;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  }

  .audio-settings-button::before {
    content: "";
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 auto 0.18rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    box-shadow: 0 0 16px rgb(102 255 199 / 25%);
  }

  .audio-settings-button:hover,
  .audio-settings-button:focus-visible {
    transform: translateY(-2px);
    border-color: rgb(102 255 199 / 72%);
    box-shadow: 0 0 30px rgb(102 255 199 / 28%);
  }

  .audio-overlay {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: grid;
    place-items: end;
    padding: clamp(0.75rem, 3vw, 1.25rem);
    background: rgb(0 0 0 / 42%);
  }

  .audio-panel {
    display: grid;
    gap: 1rem;
    width: min(420px, 100%);
    padding: clamp(1rem, 3vw, 1.25rem);
    color: var(--text);
    background: rgb(5 9 16 / 94%);
    border: 1px solid rgb(102 255 199 / 30%);
    border-radius: var(--radius);
    box-shadow: var(--shadow), 0 0 42px rgb(102 255 199 / 12%);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  .audio-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .audio-panel__title {
    margin: 0;
    color: var(--terminal);
    font-size: clamp(1rem, 3vw, 1.2rem);
    text-transform: uppercase;
  }

  .audio-panel__close {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--text);
    background: rgb(255 255 255 / 6%);
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: var(--radius);
    cursor: pointer;
  }

  .audio-panel__controls {
    display: grid;
    gap: 0.85rem;
  }

  .audio-toggle,
  .audio-range {
    display: grid;
    gap: 0.45rem;
    color: var(--soft);
    font-size: 0.92rem;
  }

  .audio-toggle {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .audio-toggle input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--terminal);
  }

  .audio-range > span {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }

  .audio-range output {
    color: var(--terminal);
  }

  .audio-range input {
    width: 100%;
    accent-color: var(--terminal);
  }

  .topbar__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    min-width: 0;
  }

  .topbar__actions #resetButton,
  .topbar__actions #abandonButton {
    grid-column: 1 / -1;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
  }

  .brand__mark {
    display: grid;
    place-items: center;
    width: clamp(2.6rem, 8vw, 3.3rem);
    aspect-ratio: 1;
    color: #06100d;
    font-weight: 800;
    letter-spacing: 0;
    background: var(--terminal);
    border-radius: var(--radius);
    box-shadow: 0 0 24px rgb(102 255 199 / 24%);
  }

  .brand__title {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.5rem, 4vw, 2.55rem);
    line-height: 1;
    letter-spacing: 0;
  }

  .progress {
    display: grid;
    gap: 0.42rem;
    min-width: 0;
  }

  .progress__meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
    font-size: clamp(0.74rem, 2vw, 0.86rem);
  }

  .progress__track {
    position: relative;
    height: 0.42rem;
    overflow: hidden;
    background: rgb(255 255 255 / 9%);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 999px;
  }

  .progress__bar {
    position: absolute;
    inset: 0;
    transform: scaleX(var(--progress-scale));
    transform-origin: left center;
    background: linear-gradient(90deg, var(--terminal), var(--warning), var(--danger));
    transition: transform 420ms ease;
  }

  .progress__pips {
    display: grid;
    grid-template-columns: repeat(15, minmax(0, 1fr));
    gap: 0.2rem;
  }

  .progress__pip {
    height: 0.28rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 13%);
  }

  .progress__pip.is-done {
    background: rgb(102 255 199 / 78%);
  }

  .progress__pip.is-current {
    background: var(--danger);
    box-shadow: 0 0 14px rgb(255 73 91 / 55%);
  }

  .timer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.62rem 0.72rem;
    color: var(--soft);
    border: 1px solid rgb(102 255 199 / 20%);
    border-radius: var(--radius);
    background: rgb(0 0 0 / 22%);
    box-shadow: inset 0 0 18px rgb(102 255 199 / 5%);
  }

  .timer__label {
    color: var(--muted);
    font-size: clamp(0.72rem, 1.8vw, 0.82rem);
    text-transform: uppercase;
  }

  .timer__value {
    color: var(--terminal);
    font-variant-numeric: tabular-nums;
    font-size: clamp(0.95rem, 2.5vw, 1.08rem);
    text-shadow: 0 0 14px rgb(102 255 199 / 20%);
  }

  .game {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    gap: clamp(1rem, 3vw, 1.35rem);
    width: min(1180px, calc(100% - clamp(1rem, 4vw, 3rem)));
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 1.6rem) 0 var(--safe-bottom);
  }

  .room-backdrop {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-color: #05070d;
    background-image:
      var(--room-bg-image),
      repeating-linear-gradient(90deg, rgb(102 255 199 / 5%) 0 1px, transparent 1px 72px),
      repeating-linear-gradient(0deg, rgb(255 73 91 / 4%) 0 1px, transparent 1px 60px),
      linear-gradient(145deg, rgb(3 10 18 / 90%), rgb(9 5 16 / 92%) 46%, rgb(3 11 12 / 94%));
    background-position: center;
    background-size: cover, auto, auto, cover;
    filter: saturate(0.95);
    transform: translateZ(0);
  }

  .room-panel,
  .terminal-panel {
    position: relative;
    min-width: 0;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    background: var(--panel-bg);
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .room-panel {
    display: grid;
    gap: clamp(1rem, 3vw, 1.35rem);
    justify-items: center;
    padding: clamp(1rem, 3vw, 1.45rem);
    contain: layout paint style;
    overflow: hidden;
  }

  .room-panel__scan {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.2;
    background: linear-gradient(180deg, transparent, rgb(102 255 199 / 11%), transparent);
    transform: translateY(-100%);
    animation: scanline 8s linear infinite;
  }

  .room-header {
    display: grid;
    gap: 0.45rem;
    align-content: start;
    justify-items: center;
    width: min(760px, 100%);
    min-width: 0;
    text-align: center;
  }

  .room-number {
    margin: 0;
    color: var(--terminal);
    font-size: clamp(0.78rem, 1.7vw, 0.9rem);
    text-transform: uppercase;
  }

  .room-title {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.45rem, 5vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .room-rule {
    max-width: 68ch;
    margin: 0;
    color: var(--muted);
    font-size: clamp(0.94rem, 2.25vw, 1.05rem);
    line-height: 1.55;
    overflow-wrap: anywhere;
  }

  .door-stage {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: clamp(220px, 35vw, 330px);
    min-width: 0;
    perspective: 1000px;
  }

  .terminal-panel {
    display: grid;
    gap: 1rem;
    padding: clamp(0.85rem, 2vw, 1rem);
    align-self: start;
    content-visibility: auto;
    contain-intrinsic-size: 320px;
  }

  
  .confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    padding: clamp(1rem, 4vw, 2rem);
    place-items: center;
    background: rgb(0 0 0 / 68%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .confirm-dialog {
    display: grid;
    gap: 1rem;
    width: min(420px, 100%);
    padding: clamp(1rem, 4vw, 1.35rem);
    border: 1px solid var(--panel-border-hot);
    border-radius: var(--radius);
    background: var(--panel-bg-strong);
    box-shadow: var(--shadow), 0 0 36px rgb(255 73 91 / 14%);
  }

  .admin-dialog,
  .room-choice-dialog {
    width: min(720px, 100%);
  }

  .admin-form {
    display: grid;
    gap: 0.85rem;
  }

  .admin-error {
    min-height: 1.3em;
    margin: 0;
    color: var(--danger);
    font-size: 0.9rem;
  }

  .room-choice-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 0.55rem;
    max-height: min(56vh, 520px);
    overflow: auto;
    padding: 0.2rem;
  }

  .room-choice-item {
    display: grid;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 3.35rem;
    padding: 0.7rem;
    overflow: hidden;
    text-align: center;
    border: 1px solid rgb(102 255 199 / 24%);
    border-radius: var(--radius);
    color: var(--text);
    background: rgb(7 12 20 / 72%);
    cursor: pointer;
  }

  .room-choice-item:not(:disabled):hover {
    border-color: rgb(102 255 199 / 58%);
    box-shadow: 0 0 22px rgb(102 255 199 / 14%);
    transform: translateY(-1px);
  }

  .room-choice-item:disabled {
    color: rgb(167 181 189 / 46%);
    border-color: rgb(167 181 189 / 14%);
    background: rgb(5 8 14 / 50%);
    cursor: not-allowed;
    filter: grayscale(0.75);
  }

  .room-choice-item__number {
    color: var(--terminal);
    font-size: 0.74rem;
    text-transform: uppercase;
  }

  .room-choice-item:disabled .room-choice-item__number {
    color: rgb(167 181 189 / 42%);
  }

  .room-choice-item__title {
    display: block;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.25;
    font-size: clamp(0.78rem, 1.9vw, 0.9rem);
  }

  .confirm-dialog__title {
    margin: 0;
    color: var(--danger);
    font-size: clamp(1.15rem, 3vw, 1.5rem);
  }

  .confirm-dialog__text {
    margin: 0;
    color: var(--soft);
    line-height: 1.55;
  }

  .confirm-dialog__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }


  .glitch {
    position: relative;
    display: inline-block;
    text-shadow: 0 0 18px rgb(102 255 199 / 22%);
  }

  .glitch::before,
  .glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.58;
  }

  .glitch::before {
    color: var(--danger);
    transform: translate(1px, 0);
    clip-path: inset(0 0 55% 0);
    animation: glitch-a 3.8s steps(2, end) infinite;
  }

  .glitch::after {
    color: var(--blue);
    transform: translate(-1px, 0);
    clip-path: inset(55% 0 0 0);
    animation: glitch-b 4.7s steps(2, end) infinite;
  }

  .door {
    position: relative;
    display: grid;
    place-items: center;
    width: min(330px, 76vw);
    max-width: 100%;
    aspect-ratio: 0.68;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgb(10 18 28), rgb(4 7 13));
    box-shadow:
      inset 0 0 0 1px rgb(102 255 199 / 8%),
      inset 0 0 55px rgb(0 0 0 / 75%),
      0 0 42px rgb(102 255 199 / 15%);
    transform-style: preserve-3d;
    transition: filter 260ms ease, transform 260ms ease, opacity 260ms ease;
  }

  .door::before {
    content: "";
    position: absolute;
    inset: 8%;
    border: 1px solid rgb(102 255 199 / 16%);
    border-radius: calc(var(--radius) - 2px);
    box-shadow: inset 0 0 30px rgb(102 255 199 / 9%);
  }

  .door__leaf {
    position: absolute;
    inset-block: 0;
    width: 50%;
    background:
      linear-gradient(90deg, transparent, rgb(255 255 255 / 5%), transparent),
      linear-gradient(180deg, rgb(12 22 31), rgb(2 5 11));
    border: 1px solid rgb(102 255 199 / 13%);
    transition: transform 720ms cubic-bezier(.2,.8,.2,1), opacity 720ms ease;
  }

  .door__leaf--left {
    inset-inline-start: 0;
    transform-origin: left center;
  }

  .door__leaf--right {
    inset-inline-end: 0;
    transform-origin: right center;
  }

  .door__text {
    
    display: none;
  }

  .door__status {
    position: absolute;
    inset-block-end: 0.8rem;
    inset-inline: 0;
    color: rgb(102 255 199 / 72%);
    text-align: center;
    font-size: 0.75rem;
  }

  .door.is-opening {
    animation: door-shake 280ms linear 2;
    filter: brightness(1.35) saturate(1.2);
  }

  .door.is-opening .door__leaf--left {
    transform: rotateY(-72deg);
    opacity: 0.55;
  }

  .door.is-opening .door__leaf--right {
    transform: rotateY(72deg);
    opacity: 0.55;
  }

  .door.is-opening .door__text,
  .door.is-opening .door__status {
    opacity: 0;
  }

  .puzzle-content {
    display: grid;
    gap: 1rem;
    justify-items: center;
    width: 100%;
    min-width: 0;
    min-height: 160px;
    color: var(--soft);
    content-visibility: auto;
    contain-intrinsic-size: 420px;
  }

  .puzzle-stack {
    display: grid;
    gap: 1rem;
    justify-items: center;
    width: min(760px, 100%);
    min-width: 0;
    max-width: 760px;
    text-align: center;
  }

  .puzzle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 0.75rem;
    width: min(760px, 100%);
    min-width: 0;
    max-width: 760px;
  }

  .puzzle-box {
    min-width: 0;
    padding: clamp(0.9rem, 2.5vw, 1.15rem);
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: var(--radius);
    background: rgb(0 0 0 / 23%);
  }

  .puzzle-text {
    margin: 0;
    color: var(--soft);
    font-size: clamp(1rem, 2.7vw, 1.18rem);
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  .button {
    --button-bg: rgb(102 255 199 / 12%);
    --button-border: rgb(102 255 199 / 34%);
    --button-text: var(--text);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.78rem 1rem;
    color: var(--button-text);
    text-align: center;
    line-height: 1.15;
    text-decoration: none;
    overflow-wrap: anywhere;
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    border-radius: var(--radius);
    cursor: pointer;
    box-shadow: inset 0 0 20px rgb(255 255 255 / 3%);
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
    touch-action: manipulation;
  }

  .button:hover {
    transform: translateY(-1px);
    border-color: rgb(102 255 199 / 64%);
    box-shadow: 0 0 20px rgb(102 255 199 / 12%);
  }

  .button:active {
    transform: translateY(0);
  }

  .button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  .button--danger {
    --button-bg: rgb(255 73 91 / 15%);
    --button-border: rgb(255 73 91 / 54%);
  }

  .button--secondary {
    --button-bg: rgb(103 183 255 / 11%);
    --button-border: rgb(103 183 255 / 35%);
  }

  .button--ghost {
    --button-bg: rgb(255 255 255 / 6%);
    --button-border: rgb(255 255 255 / 16%);
    color: var(--muted);
  }

  .button--small {
    min-height: 38px;
    padding: 0.56rem 0.72rem;
    font-size: 0.82rem;
  }

  .button--play {
    justify-self: center;
    min-width: min(100%, 220px);
    min-height: 54px;
    color: #06100d;
    font-weight: 800;
    background: var(--terminal);
    border-color: rgb(102 255 199 / 86%);
    box-shadow: 0 0 30px rgb(102 255 199 / 18%);
  }

  .button--inline {
    min-height: auto;
    padding: 0.05rem 0.12rem;
    color: inherit;
    background: transparent;
    border-color: transparent;
    border-radius: 4px;
    box-shadow: none;
    text-decoration: none;
  }

  .button--inline:hover {
    background: rgb(102 255 199 / 10%);
  }

  .input-group {
    display: grid;
    gap: 0.45rem;
    width: min(460px, 100%);
    max-width: 460px;
    text-align: left;
  }

  .input-group label {
    color: var(--muted);
    font-size: 0.92rem;
  }

  .input,
  .range {
    width: 100%;
  }

  .input {
    min-height: 48px;
    padding: 0.72rem 0.82rem;
    color: var(--text);
    background: rgb(2 5 10 / 72%);
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: var(--radius);
    outline: 0;
    transition: border-color 160ms ease, box-shadow 160ms ease;
  }

  .input:focus {
    border-color: var(--terminal);
    box-shadow: 0 0 0 3px rgb(102 255 199 / 12%);
  }

  .range {
    accent-color: var(--terminal);
  }

  .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
    justify-content: center;
    width: 100%;
    min-width: 0;
  }

  .terminal-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--terminal);
    font-size: 0.76rem;
    text-transform: uppercase;
  }

  .terminal-heading--actions {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .assistant-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
  }

  .terminal-action-button {
    min-height: 32px;
    padding: 0.42rem 0.55rem;
    color: #06100d;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    background: var(--terminal);
    border: 1px solid rgb(102 255 199 / 68%);
    border-radius: 4px;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  }

  .terminal-action-button:hover,
  .terminal-action-button:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgb(102 255 199 / 18%);
  }

  .terminal-action-button--ghost {
    color: var(--muted);
    background: rgb(255 255 255 / 6%);
    border-color: rgb(255 255 255 / 18%);
  }

  .system-console,
  .assistant-panel {
    display: grid;
    gap: 0.7rem;
  }

  .system-log {
    display: grid;
    gap: 0.48rem;
    min-height: 145px;
    max-height: 280px;
    overflow: auto;
    overscroll-behavior: contain;
    padding-inline-end: 0.25rem;
  }

  .system-message {
    margin: 0;
    padding: 0.64rem 0.7rem;
    color: var(--soft);
    line-height: 1.45;
    background: rgb(0 0 0 / 25%);
    border-inline-start: 3px solid var(--terminal);
    border-radius: 4px;
    animation: message-in 180ms ease both;
  }

  .system-message[data-type="success"] {
    border-color: var(--terminal);
    color: #dcfff4;
  }

  .system-message[data-type="error"] {
    border-color: var(--danger);
    color: #ffdfe3;
  }

  .system-message[data-type="warning"] {
    border-color: var(--warning);
    color: #fff3cf;
  }

  .system-message[data-type="glitch"] {
    border-color: var(--violet);
    animation: message-in 180ms ease both, micro-glitch 820ms steps(2, end) 1;
  }

  .assistant-text {
    min-height: 5.6rem;
    margin: 0;
    padding: 0.8rem;
    color: var(--soft);
    line-height: 1.55;
    background: rgb(0 0 0 / 22%);
    border: 1px solid rgb(103 183 255 / 18%);
    border-radius: var(--radius);
  }

  .hint {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
  }


  .fx-scanlines,
  .fx-noise,
  .fx-vignette,
  .fx-digital-dust,
  .fx-screen-tear,
  .fx-alert-flash,
  .fx-code-rain {
    position: fixed;
    inset: 0;
    pointer-events: none;
  }

  .fx-scanlines {
    z-index: 18;
    opacity: 0.24;
    background:
      repeating-linear-gradient(
        180deg,
        transparent 0 3px,
        rgb(255 255 255 / 9%) 4px,
        transparent 5px
      );
    mix-blend-mode: screen;
  }

  .fx-noise {
    z-index: 18;
    opacity: 0.13;
    background:
      radial-gradient(circle at 12% 18%, rgb(255 255 255 / 56%) 0 1px, transparent 1px),
      radial-gradient(circle at 82% 64%, rgb(102 255 199 / 52%) 0 1px, transparent 1px),
      radial-gradient(circle at 46% 82%, rgb(255 73 91 / 42%) 0 1px, transparent 1px),
      repeating-linear-gradient(90deg, transparent 0 9px, rgb(255 255 255 / 10%) 10px, transparent 11px);
    background-size: 29px 31px, 41px 37px, 53px 47px, 17px 17px;
    animation: fx-noise-shift 780ms steps(2, end) infinite;
  }

  .fx-vignette {
    z-index: 17;
    opacity: 0.82;
    background:
      radial-gradient(circle at 50% 42%, transparent 0 42%, rgb(0 0 0 / 32%) 68%, rgb(0 0 0 / 64%) 100%);
  }

  .fx-grid-drift .room-backdrop {
    animation: fx-grid-drift 48s linear infinite;
  }

  .fx-title-glitch {
    animation: fx-title-glitch 360ms steps(2, end) infinite;
    text-shadow:
      3px 0 rgb(255 73 91 / 78%),
      -3px 0 rgb(102 255 199 / 74%),
      0 0 34px rgb(102 255 199 / 32%);
  }

  .fx-panel-glow {
    animation: fx-panel-glow 6.8s ease-in-out infinite;
  }

  .fx-panel-scan {
    position: absolute;
    inset-block: -12%;
    inset-inline-start: -18%;
    width: 18%;
    pointer-events: none;
    opacity: 0;
    background:
      linear-gradient(90deg, transparent, rgb(102 255 199 / 34%), rgb(255 255 255 / 18%), transparent);
    filter: blur(1px);
    transform: translateX(-120%) skewX(-14deg);
    animation: fx-panel-scan 2.6s ease-in-out forwards;
  }

  .door-stage {
    position: relative;
  }

  .fx-door-breathe:not(.is-opening) {
    animation: fx-door-breathe 5.8s ease-in-out infinite;
  }

  .fx-door-line::after {
    content: "";
    position: absolute;
    inset-block: 8%;
    inset-inline-start: 50%;
    z-index: 4;
    width: 2px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgb(102 255 199 / 76%), transparent);
    box-shadow: 0 0 20px rgb(102 255 199 / 58%);
    opacity: 0.68;
    animation: fx-door-line 2.4s ease-in-out infinite;
  }

  .fx-door-reflection {
    position: absolute;
    inset-block: 7%;
    inset-inline-start: -32%;
    z-index: 5;
    width: 22%;
    pointer-events: none;
    background:
      linear-gradient(90deg, transparent, rgb(255 255 255 / 32%), rgb(102 255 199 / 22%), transparent);
    filter: blur(1px);
    transform: skewX(-15deg);
    animation: fx-door-reflection 1.8s ease-in-out forwards;
  }

  .fx-button-glow .button:hover:not(:disabled),
  .fx-button-glow .button:focus-visible:not(:disabled) {
    transform: translateY(-3px);
    box-shadow:
      0 0 30px rgb(102 255 199 / 30%),
      0 0 10px rgb(255 73 91 / 10%),
      inset 0 0 28px rgb(102 255 199 / 9%);
  }

  .fx-terminal-cursor .room-rule::after,
  .fx-terminal-cursor .puzzle-stack > .puzzle-text:first-child::after,
  .fx-terminal-cursor .assistant-text::after,
  .fx-terminal-cursor .learning-message::after,
  .fx-terminal-cursor .error-local-message:not(:empty)::after,
  .fx-terminal-cursor .alchemy-message:not(:empty)::after {
    content: " _";
    color: var(--terminal);
    text-shadow: 0 0 12px rgb(102 255 199 / 34%);
    animation: cursor-blink 1.05s steps(2, end) infinite;
  }

  .fx-corruption-pixels {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
  }

  .fx-corruption-pixels span {
    position: absolute;
    inset-inline-start: var(--fx-x);
    inset-block-start: var(--fx-y);
    width: clamp(4px, 0.85vw, 9px);
    aspect-ratio: 1;
    background: var(--terminal);
    box-shadow:
      0 0 18px rgb(102 255 199 / 66%),
      8px 0 0 rgb(255 73 91 / 48%),
      -7px 4px 0 rgb(103 183 255 / 34%);
    opacity: 0;
    animation: fx-corruption-pixel 1.2s steps(2, end) var(--fx-delay) forwards;
  }

  .fx-panel-desync {
    animation: fx-panel-desync 520ms steps(2, end) both;
  }

  .fx-digital-dust {
    z-index: 16;
    overflow: hidden;
  }

  .fx-digital-dust span {
    position: absolute;
    inset-block-start: -14%;
    inset-inline-start: var(--fx-left);
    width: 1px;
    height: var(--fx-height);
    opacity: 0;
    background: linear-gradient(180deg, transparent, rgb(102 255 199 / 68%), transparent);
    box-shadow: 0 0 16px rgb(102 255 199 / 34%);
    animation: fx-digital-dust var(--fx-duration) linear var(--fx-delay) forwards;
  }

  .fx-screen-tear {
    z-index: 19;
    overflow: hidden;
    mix-blend-mode: screen;
  }

  .fx-screen-tear span {
    position: absolute;
    inset-inline: -5%;
    inset-block-start: var(--fx-top);
    height: clamp(10px, 2.4vw, 22px);
    opacity: 0;
    background:
      linear-gradient(90deg, transparent, rgb(102 255 199 / 26%), rgb(255 73 91 / 22%), transparent),
      repeating-linear-gradient(90deg, rgb(255 255 255 / 14%) 0 4px, transparent 4px 13px);
    transform: translateX(var(--fx-shift));
    animation: fx-screen-tear 660ms steps(2, end) var(--fx-delay) forwards;
  }

  .fx-hud-flicker .topbar,
  .fx-hud-flicker .progress,
  .fx-hud-flicker .timer,
  .fx-hud-flicker .brand__mark {
    animation: fx-hud-flicker 160ms steps(2, end) 5;
  }

  .fx-alert-flash {
    z-index: 19;
    opacity: 0;
    background:
      radial-gradient(circle at 50% 40%, transparent 0 48%, rgb(255 73 91 / 15%) 72%, rgb(255 73 91 / 28%) 100%),
      linear-gradient(180deg, rgb(255 73 91 / 8%), transparent 42%, rgb(102 255 199 / 7%));
    animation: fx-alert-flash 880ms ease-out forwards;
  }

  .fx-code-rain {
    z-index: 16;
    overflow: hidden;
    color: var(--terminal);
    font-size: clamp(0.68rem, 1.8vw, 0.9rem);
    text-shadow: 0 0 14px rgb(102 255 199 / 46%);
  }

  .fx-code-rain span {
    position: absolute;
    inset-block-start: -12%;
    inset-inline-start: var(--fx-left);
    opacity: 0;
    writing-mode: vertical-rl;
    letter-spacing: 0.12em;
    animation: fx-code-rain var(--fx-duration) linear var(--fx-delay) forwards;
  }


  .evade-zone {
    position: relative;
    display: grid;
    place-items: center;
    justify-self: stretch;
    width: 100%;
    min-height: 180px;
    overflow: hidden;
    border: 1px dashed rgb(255 73 91 / 28%);
    border-radius: var(--radius);
    background: rgb(255 73 91 / 6%);
  }

  .evade-button {
    transform: translate(var(--evade-x, 0), var(--evade-y, 0));
    transition: transform 190ms cubic-bezier(.2,.8,.2,1), filter 190ms ease;
  }

  .evade-button.is-unstable {
    animation: unstable 320ms steps(2, end) infinite;
  }

  .invisible-word {
    
    color: transparent;
    text-shadow: none;
    user-select: text;
    border-radius: 4px;
    transition: color 160ms ease, background-color 160ms ease;
  }

  .invisible-word:hover,
  .invisible-word:focus {
    color: transparent;
    background: transparent;
  }

  .invisible-word::selection {
    color: #020405;
    background: var(--terminal);
  }

  .fallback-reveal[hidden] {
    display: none;
  }

  .scroll-room {
    display: grid;
    gap: 1rem;
    justify-items: center;
    width: min(860px, 100%);
  }

  .scroll-void {
    width: 100%;
    min-height: 180vh;
    display: grid;
    align-items: start;
    padding-block-start: 1rem;
    color: rgb(167 181 189 / 45%);
    background:
      linear-gradient(180deg, transparent, rgb(102 255 199 / 4%) 55%, rgb(255 73 91 / 5%)),
      repeating-linear-gradient(0deg, transparent 0 42px, rgb(255 255 255 / 4%) 43px, transparent 44px);
    border-radius: var(--radius);
  }

  .deep-target {
    display: grid;
    gap: 0.8rem;
    justify-items: center;
    margin-block-start: 118vh;
    padding: clamp(1rem, 4vw, 1.4rem);
    border: 1px solid rgb(102 255 199 / 32%);
    border-radius: var(--radius);
    background: rgb(0 0 0 / 40%);
    box-shadow: 0 0 28px rgb(102 255 199 / 13%);
  }

  .hidden-door {
    width: min(160px, 42vw);
    aspect-ratio: 0.72;
    border: 1px solid rgb(102 255 199 / 44%);
    border-radius: var(--radius);
    background:
      linear-gradient(90deg, transparent 49%, rgb(102 255 199 / 30%) 50%, transparent 51%),
      linear-gradient(180deg, rgb(10 28 27), rgb(4 8 12));
    box-shadow: inset 0 0 30px rgb(102 255 199 / 14%);
  }

  .hold-area {
    display: grid;
    gap: 1rem;
    justify-items: center;
    width: min(560px, 100%);
    text-align: center;
  }

  .hold-button.is-pressing {
    animation: hard-shake 150ms linear infinite;
    border-color: var(--danger);
  }

  .hold-meter {
    width: min(100%, 460px);
    height: 0.75rem;
    overflow: hidden;
    background: rgb(255 255 255 / 8%);
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 999px;
  }

  .hold-meter__bar {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--terminal), var(--warning), var(--danger));
    transform: scaleX(0);
    transform-origin: left center;
  }

  .room-title-button {
    display: inline;
    padding: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: start;
    background: transparent;
    border-radius: 4px;
    cursor: default;
  }

  .room-title-button.is-hinting,
  .room-title-button:hover,
  .room-title-button:focus-visible {
    color: var(--terminal);
    text-shadow: 0 0 18px rgb(102 255 199 / 32%);
    cursor: pointer;
  }

  .mirror-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: min(860px, 100%);
  }

  .mirror-zone,
  .real-zone {
    min-height: 220px;
    padding: 1rem;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: var(--radius);
    background:
      repeating-linear-gradient(90deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 28px),
      rgb(0 0 0 / 26%);
  }

  .real-zone {
    display: grid;
    align-content: end;
    justify-items: start;
  }

  .mirror-zone {
    position: relative;
    overflow: hidden;
    border-color: rgb(103 183 255 / 34%);
    box-shadow: inset 0 0 36px rgb(103 183 255 / 10%);
  }

  .mirror-zone::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 0 42%, rgb(255 255 255 / 13%) 48%, transparent 54% 100%);
  }

  .mirror-world {
    display: grid;
    gap: 1rem;
    align-content: center;
    min-height: 190px;
    transform: scaleX(-1);
  }

  .mirror-readable {
    display: inline-block;
    transform: scaleX(-1);
  }

  .mirror-key {
    justify-self: end;
    width: 3rem;
    aspect-ratio: 1;
    padding: 0;
    color: #06100d;
    background: var(--warning);
    border-color: rgb(255 209 102 / 70%);
    border-radius: 999px;
    box-shadow: 0 0 24px rgb(255 209 102 / 32%);
  }

  .clock-face {
    display: inline-grid;
    width: min(100%, 390px);
    padding: 1rem;
    color: var(--danger);
    font-size: clamp(2.3rem, 12vw, 5rem);
    line-height: 1;
    text-align: center;
    border: 1px solid rgb(255 73 91 / 34%);
    border-radius: var(--radius);
    background: rgb(0 0 0 / 36%);
    text-shadow: 0 0 24px rgb(255 73 91 / 32%);
  }

  .clock-caption {
    margin: 0.5rem 0 0;
    color: var(--muted);
  }

  .counter-box {
    width: min(520px, 100%);
  }

  .counter-display {
    margin: 0;
    color: var(--terminal);
    font-size: clamp(1.65rem, 8vw, 4.4rem);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 24px rgb(102 255 199 / 24%);
    overflow-wrap: anywhere;
  }

  .counter-display.is-glitching {
    color: var(--danger);
    animation: micro-glitch 420ms steps(2, end) infinite;
    text-shadow: 0 0 24px rgb(255 73 91 / 26%);
  }

  .decor-writing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    width: min(620px, 100%);
    min-height: clamp(96px, 22vw, 160px);
    padding: clamp(1rem, 4vw, 1.4rem);
    border: 1px dashed rgb(102 255 199 / 24%);
    border-radius: var(--radius);
    background:
      repeating-linear-gradient(90deg, rgb(102 255 199 / 5%) 0 1px, transparent 1px 34px),
      rgb(0 0 0 / 24%);
    box-shadow: inset 0 0 36px rgb(102 255 199 / 7%);
  }

  .decor-writing__letters {
    min-width: 6ch;
    color: var(--terminal);
    font-size: clamp(1.8rem, 10vw, 5rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-align: center;
    text-shadow: 0 0 26px rgb(102 255 199 / 28%);
    overflow-wrap: anywhere;
  }

  .decor-writing__cursor {
    width: 0.55ch;
    height: clamp(1.8rem, 10vw, 5rem);
    background: var(--danger);
    box-shadow: 0 0 18px rgb(255 73 91 / 38%);
    animation: cursor-blink 900ms steps(2, end) infinite;
  }

  .error-archive {
    display: grid;
    gap: 0.75rem;
    width: min(680px, 100%);
    padding: clamp(0.9rem, 3vw, 1.1rem);
    text-align: left;
    border: 1px solid rgb(255 73 91 / 24%);
    border-radius: var(--radius);
    background: rgb(0 0 0 / 24%);
    box-shadow: inset 0 0 34px rgb(255 73 91 / 6%);
    transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
  }

  .error-archive__list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding-inline-start: 1.35rem;
    color: var(--soft);
    line-height: 1.5;
  }

  .error-archive__list li {
    padding: 0.45rem 0.55rem;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 4px;
    background: rgb(255 255 255 / 4%);
    overflow-wrap: anywhere;
  }

  .error-initial {
    display: inline-block;
    min-width: 0.72em;
    margin-inline-end: 0.03em;
    color: var(--terminal);
    font-weight: 800;
    text-shadow: 0 0 16px rgb(102 255 199 / 45%);
    transform: translateY(-0.02em);
  }

  .error-puzzle.has-secret .error-archive {
    border-color: rgb(102 255 199 / 45%);
    box-shadow: inset 0 0 34px rgb(102 255 199 / 9%), 0 0 30px rgb(102 255 199 / 10%);
  }

  .error-puzzle.has-secret .error-initial {
    color: #06100d;
    background: var(--terminal);
    border-radius: 3px;
    text-align: center;
    text-shadow: none;
    box-shadow: 0 0 16px rgb(102 255 199 / 28%);
  }

  .error-puzzle.is-solved {
    padding: clamp(0.8rem, 2vw, 1rem);
    border-radius: var(--radius);
    background:
      radial-gradient(circle at 50% 40%, rgb(102 255 199 / 14%), transparent 42%),
      rgb(0 0 0 / 8%);
  }

  .error-puzzle.is-solved .error-archive {
    animation: hard-shake 170ms linear 4;
  }

  .error-local-message {
    min-height: 1.6rem;
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
  }

  .error-local-message[data-type="error"] {
    color: #ffdfe3;
  }

  .error-local-message[data-type="warning"] {
    color: #fff3cf;
  }

  .error-local-message[data-type="glitch"],
  .error-local-message[data-type="success"] {
    color: var(--terminal);
  }

  .error-secret-hint {
    margin: 0;
    color: rgb(102 255 199 / 78%);
    font-size: 0.92rem;
    line-height: 1.5;
    text-shadow: 0 0 14px rgb(102 255 199 / 18%);
    animation: message-in 280ms ease both;
  }

  .error-final-text {
    max-width: 720px;
    margin: 0;
    color: var(--terminal);
    line-height: 1.65;
    text-shadow: 0 0 18px rgb(102 255 199 / 22%);
    animation: final-text-in 900ms ease both;
  }

  .impossible-sentence-box {
    width: min(620px, 100%);
    border-color: rgb(255 73 91 / 28%);
    background:
      linear-gradient(90deg, rgb(255 73 91 / 8%), transparent 24%, rgb(102 255 199 / 7%)),
      rgb(0 0 0 / 28%);
  }

  .impossible-sentence {
    margin: 0;
    color: var(--soft);
    font-size: clamp(1.45rem, 6vw, 3.6rem);
    line-height: 1.12;
    text-shadow: 0 0 24px rgb(255 73 91 / 20%);
    animation: micro-glitch 2.8s steps(2, end) infinite;
  }

  .cursor-puzzle {
    width: min(860px, 100%);
  }

  .cursor-room {
    --light-x: 50%;
    --light-y: 50%;
    position: relative;
    display: grid;
    place-items: center;
    width: min(860px, 100%);
    min-height: clamp(320px, 56vw, 520px);
    overflow: hidden;
    cursor: none;
    border: 1px solid rgb(102 255 199 / 20%);
    border-radius: var(--radius);
    background:
      radial-gradient(circle at var(--light-x) var(--light-y), rgb(102 255 199 / 18%), transparent 92px),
      radial-gradient(circle at center, rgb(255 73 91 / 12%), transparent 16%),
      repeating-linear-gradient(0deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 36px),
      rgb(0 0 0 / 46%);
    box-shadow: inset 0 0 70px rgb(0 0 0 / 72%);
    touch-action: none;
  }

  .cursor-light {
    position: absolute;
    z-index: 3;
    left: var(--light-x);
    top: var(--light-y);
    width: 26px;
    aspect-ratio: 1;
    pointer-events: none;
    border-radius: 999px;
    background: var(--terminal);
    box-shadow:
      0 0 16px rgb(102 255 199 / 82%),
      0 0 48px rgb(102 255 199 / 34%);
    transform: translate(-50%, -50%);
  }

  .cursor-hidden-phrase {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.18rem, 1vw, 0.48rem);
    max-width: min(620px, 88%);
    padding: 1rem;
    font-size: clamp(1.1rem, 5.4vw, 3rem);
    line-height: 1.25;
    letter-spacing: 0;
  }

  .cursor-letter {
    color: rgb(243 240 230 / 3%);
    text-shadow: none;
    transition: color 120ms ease, text-shadow 120ms ease, transform 120ms ease;
  }

  .cursor-letter.is-lit {
    color: var(--soft);
    text-shadow: 0 0 18px rgb(102 255 199 / 42%);
    transform: translateY(-1px);
  }

  .cursor-center {
    position: absolute;
    z-index: 1;
    width: min(120px, 30vw);
    aspect-ratio: 1;
    border: 1px dashed rgb(255 73 91 / 28%);
    border-radius: 999px;
    background: rgb(255 73 91 / 5%);
    box-shadow: 0 0 28px rgb(255 73 91 / 9%);
  }

  .elsewhere-word {
    position: absolute;
    z-index: 4;
    min-height: 42px;
    padding: 0.55rem 0.8rem;
    color: #06100d;
    background: var(--terminal);
    border: 1px solid rgb(102 255 199 / 80%);
    border-radius: var(--radius);
    box-shadow: 0 0 24px rgb(102 255 199 / 26%);
    cursor: pointer;
    animation: message-in 220ms ease both;
  }

  .elsewhere-word.is-top-left {
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
  }

  .elsewhere-word.is-top-right {
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
  }

  .elsewhere-word.is-bottom-left {
    inset-block-end: 1rem;
    inset-inline-start: 1rem;
  }

  .elsewhere-word.is-bottom-right {
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
  }

  .source-code-puzzle {
    width: min(760px, 100%);
  }

  .source-code-frame {
    display: grid;
    gap: 0.42rem;
    width: min(520px, 100%);
    padding: clamp(1rem, 4vw, 1.25rem);
    color: rgb(102 255 199 / 54%);
    text-align: left;
    border: 1px solid rgb(102 255 199 / 20%);
    border-radius: var(--radius);
    background:
      repeating-linear-gradient(0deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 26px),
      rgb(0 0 0 / 34%);
    box-shadow: inset 0 0 36px rgb(102 255 199 / 6%);
  }

  .source-code-frame span {
    overflow-wrap: anywhere;
  }

  .address-puzzle {
    width: min(760px, 100%);
  }

  .address-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    width: min(680px, 100%);
    padding: clamp(0.85rem, 3vw, 1rem);
    color: var(--muted);
    border: 1px solid rgb(102 255 199 / 22%);
    border-radius: var(--radius);
    background: rgb(0 0 0 / 32%);
    box-shadow: inset 0 0 30px rgb(102 255 199 / 6%);
    overflow-wrap: anywhere;
  }

  .address-display strong {
    color: var(--terminal);
    font-weight: 800;
    text-shadow: 0 0 16px rgb(102 255 199 / 24%);
  }

  .address-reveal {
    width: min(520px, 100%);
    padding: 0.85rem 1rem;
    color: var(--terminal);
    border: 1px solid rgb(102 255 199 / 34%);
    border-radius: var(--radius);
    background: rgb(102 255 199 / 8%);
    box-shadow: 0 0 28px rgb(102 255 199 / 12%);
    animation: message-in 240ms ease both;
  }

  .address-reveal p {
    margin: 0;
  }

  .keyboard-puzzle {
    width: min(680px, 100%);
  }

  .keyboard-target {
    display: grid;
    gap: 0.85rem;
    place-items: center;
    width: min(520px, 100%);
    min-height: clamp(180px, 35vw, 280px);
    padding: clamp(1rem, 4vw, 1.35rem);
    border: 1px solid rgb(102 255 199 / 22%);
    border-radius: var(--radius);
    background:
      radial-gradient(circle at 50% 50%, rgb(102 255 199 / 8%), transparent 48%),
      rgb(0 0 0 / 30%);
    box-shadow: inset 0 0 42px rgb(102 255 199 / 7%);
    cursor: pointer;
  }

  .keyboard-key {
    display: grid;
    place-items: center;
    width: min(260px, 76%);
    min-height: clamp(52px, 13vw, 82px);
    color: var(--terminal);
    font-size: clamp(1.8rem, 8vw, 3.8rem);
    border: 1px solid rgb(102 255 199 / 32%);
    border-radius: var(--radius);
    background: rgb(255 255 255 / 5%);
    box-shadow: 0 8px 0 rgb(0 0 0 / 32%), 0 0 24px rgb(102 255 199 / 10%);
  }

  .keyboard-target.is-solved .keyboard-key {
    transform: translateY(6px);
    box-shadow: 0 2px 0 rgb(0 0 0 / 32%), 0 0 34px rgb(102 255 199 / 20%);
  }

  .keyboard-result {
    min-height: 1.5rem;
    color: var(--terminal);
    line-height: 1.5;
    text-shadow: 0 0 16px rgb(102 255 199 / 24%);
  }

  
  .shadow-mirror-puzzle {
    width: min(860px, 100%);
  }

  .mirror-reversed-text {
    margin: 0;
    color: var(--soft);
    font-size: clamp(1.35rem, 5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: center;
    text-shadow:
      0 0 18px rgb(102 255 199 / 18%),
      2px 0 0 rgb(255 65 88 / 18%);
    animation: micro-glitch 1.9s steps(2, end) infinite;
  }

  .shadow-mirror-room {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    width: min(820px, 100%);
    min-height: clamp(260px, 44vw, 420px);
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: var(--radius);
    background: rgb(0 0 0 / 34%);
    box-shadow:
      inset 0 0 44px rgb(102 255 199 / 5%),
      0 0 38px rgb(0 0 0 / 24%);
    contain: layout paint;
  }

  .light-area,
  .shadow-area {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 100%;
    place-items: center;
    padding: clamp(1rem, 4vw, 1.5rem);
    font: inherit;
    border: 0;
    cursor: pointer;
  }

  .light-area {
    color: rgb(235 242 255 / 62%);
    background:
      radial-gradient(circle at 44% 42%, rgb(235 242 255 / 22%), transparent 36%),
      linear-gradient(135deg, rgb(102 255 199 / 12%), rgb(103 183 255 / 8%)),
      rgb(13 19 30 / 74%);
    text-transform: uppercase;
  }

  .shadow-area {
    color: transparent;
    background:
      radial-gradient(circle at 78% 24%, rgb(255 65 88 / 7%), transparent 28%),
      linear-gradient(135deg, rgb(0 0 0 / 52%), rgb(0 0 0 / 92%)),
      rgb(0 0 0);
  }

  .shadow-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(90deg, rgb(255 255 255 / 3%) 0 1px, transparent 1px 34px),
      radial-gradient(circle at 86% 82%, rgb(102 255 199 / 8%), transparent 22%);
    opacity: 0.72;
    pointer-events: none;
  }

  .light-area:hover,
  .light-area:focus-visible,
  .shadow-area:hover,
  .shadow-area:focus-visible {
    outline: 2px solid rgb(102 255 199 / 62%);
    outline-offset: -4px;
  }

  .shadow-answer {
    position: relative;
    z-index: 1;
    color: var(--terminal);
    font-size: clamp(1.4rem, 6vw, 3.2rem);
    font-weight: 900;
    text-shadow: 0 0 22px rgb(102 255 199 / 42%);
  }

  .shadow-area.is-found {
    background:
      radial-gradient(circle at 50% 50%, rgb(102 255 199 / 18%), transparent 34%),
      linear-gradient(135deg, rgb(0 0 0 / 28%), rgb(0 0 0 / 74%)),
      rgb(0 0 0);
    animation: hard-shake 220ms linear 2;
  }

  
  .sound-puzzle {
    width: min(820px, 100%);
  }

  .sound-console {
    display: grid;
    gap: 1rem;
    width: min(720px, 100%);
    padding: clamp(1rem, 4vw, 1.35rem);
    border: 1px solid rgb(102 255 199 / 22%);
    border-radius: var(--radius);
    background:
      repeating-linear-gradient(90deg, rgb(255 255 255 / 3%) 0 1px, transparent 1px 32px),
      radial-gradient(circle at 50% 0%, rgb(102 255 199 / 10%), transparent 42%),
      rgb(0 0 0 / 34%);
    box-shadow: inset 0 0 42px rgb(102 255 199 / 6%);
    contain: layout paint;
  }

  .sound-phrase {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.45rem, 2vw, 0.75rem);
    margin: 0;
    color: var(--soft);
    font-size: clamp(1rem, 3.5vw, 1.55rem);
    line-height: 1.4;
  }

  .sound-word {
    display: inline-flex;
    gap: 0.02em;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 0.45rem;
    background: rgb(0 0 0 / 24%);
  }

  .sound-letter {
    display: inline-block;
    min-width: 0.62em;
    text-align: center;
    transition:
      color 220ms ease,
      transform 220ms ease,
      text-shadow 220ms ease;
  }

  .sound-puzzle.is-solved .sound-letter[data-picked="true"] {
    color: var(--terminal);
    transform: translateY(-0.12rem);
    text-shadow: 0 0 18px rgb(102 255 199 / 48%);
  }

  .sound-pulse-meter {
    min-height: 2.6rem;
    display: grid;
    place-items: center;
    color: var(--muted);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: var(--radius);
    background: rgb(0 0 0 / 28%);
    text-transform: uppercase;
  }

  .sound-pulse-meter.is-pulsing {
    animation: sound-pulse 170ms ease both;
  }

  .sound-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    width: min(720px, 100%);
  }

  .sound-fallback {
    min-height: 48px;
    align-content: center;
    padding: 0.65rem 0.85rem;
    color: var(--muted);
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: var(--radius);
    background: rgb(0 0 0 / 22%);
  }

  .sound-fallback summary {
    color: var(--soft);
    cursor: pointer;
  }

  .sound-fallback p {
    margin: 0.5rem 0 0;
  }

  
  .alchemy-puzzle {
    width: min(900px, 100%);
  }

  .puzzle-subtitle {
    margin: 0;
    color: var(--soft);
    font-size: clamp(1.25rem, 4vw, 2rem);
    line-height: 1.15;
  }

  .alchemy-board {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.75fr);
    gap: clamp(0.85rem, 3vw, 1rem);
    width: 100%;
    align-items: stretch;
  }

  .alchemy-panel {
    display: grid;
    gap: 0.85rem;
    align-content: start;
    min-width: 0;
    padding: clamp(1rem, 4vw, 1.25rem);
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: var(--radius);
    background:
      radial-gradient(circle at 12% 0%, rgb(102 255 199 / 9%), transparent 36%),
      rgb(0 0 0 / 30%);
    box-shadow: inset 0 0 38px rgb(102 255 199 / 5%);
    contain: layout paint;
  }

  .alchemy-panel h4 {
    margin: 0;
    color: var(--terminal);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .alchemy-elements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 0.65rem;
  }

  .alchemy-element {
    min-height: 54px;
    padding: 0.72rem 0.78rem;
    color: var(--soft);
    font: inherit;
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 0.45rem;
    background:
      linear-gradient(145deg, rgb(255 255 255 / 7%), transparent),
      rgb(6 10 18 / 82%);
    cursor: pointer;
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease,
      color 180ms ease,
      transform 180ms ease;
  }

  .alchemy-element:hover,
  .alchemy-element:focus-visible {
    color: #fff8df;
    border-color: rgb(102 255 199 / 45%);
    box-shadow: 0 0 22px rgb(102 255 199 / 12%);
    transform: translateY(-1px);
  }

  .alchemy-element.is-selected {
    color: var(--terminal);
    border-color: rgb(102 255 199 / 72%);
    box-shadow:
      inset 0 0 24px rgb(102 255 199 / 10%),
      0 0 24px rgb(102 255 199 / 18%);
  }

  .alchemy-element.is-new {
    animation: alchemy-appear 380ms ease both;
  }

  .alchemy-element.is-key {
    color: #ffe49a;
    border-color: rgb(255 214 102 / 72%);
    background:
      radial-gradient(circle at 50% 30%, rgb(255 214 102 / 20%), transparent 52%),
      rgb(18 14 4 / 86%);
    box-shadow:
      inset 0 0 22px rgb(255 214 102 / 12%),
      0 0 24px rgb(255 214 102 / 20%);
    animation: key-glow 1.8s ease-in-out infinite;
  }

  .alchemy-selected,
  .alchemy-message {
    margin: 0;
    line-height: 1.5;
  }

  .alchemy-selected {
    min-height: 1.5rem;
    color: var(--soft);
  }

  .alchemy-message {
    min-height: 3rem;
    color: var(--muted);
  }

  .alchemy-password {
    margin: 0;
    color: #ffe49a;
    font-size: clamp(1.6rem, 7vw, 3.4rem);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-shadow: 0 0 26px rgb(255 214 102 / 40%);
    animation: final-text-in 420ms ease both;
  }

  .alchemy-puzzle.is-solved .alchemy-board {
    animation: alchemy-success 680ms ease both;
  }

  
  .revealing-room-puzzle {
    display: grid;
    gap: 1rem;
    justify-items: center;
    width: min(860px, 100%);
    text-align: center;
  }

  .learning-message {
    width: min(680px, 100%);
    min-height: 6.2rem;
    margin: 0;
    padding: clamp(1rem, 4vw, 1.25rem);
    color: var(--soft);
    line-height: 1.6;
    white-space: pre-line;
    border: 1px solid rgb(102 255 199 / 16%);
    border-radius: var(--radius);
    background:
      radial-gradient(circle at 50% 0%, rgb(102 255 199 / 8%), transparent 38%),
      rgb(0 0 0 / 28%);
    box-shadow: inset 0 0 34px rgb(102 255 199 / 5%);
  }

  .learning-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    width: min(720px, 100%);
  }

  .learning-action {
    animation: reveal-action 260ms ease both;
  }

  .learning-door {
    position: relative;
    display: grid;
    place-items: center;
    width: min(280px, 72vw);
    aspect-ratio: 0.72;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: var(--radius);
    background:
      linear-gradient(90deg, transparent 49%, rgb(102 255 199 / 16%) 50%, transparent 51%),
      linear-gradient(180deg, rgb(14 22 30), rgb(3 6 12));
    box-shadow:
      inset 0 0 46px rgb(0 0 0 / 66%),
      0 0 34px rgb(102 255 199 / 10%);
    transition:
      filter 280ms ease,
      box-shadow 280ms ease,
      transform 280ms ease;
  }

  .learning-door::before,
  .learning-door::after {
    content: "";
    position: absolute;
    inset-block: 0;
    width: 50%;
    background:
      linear-gradient(90deg, rgb(255 255 255 / 4%), transparent),
      rgb(8 14 24 / 88%);
    transition: transform 720ms cubic-bezier(.2,.8,.2,1), opacity 720ms ease;
  }

  .learning-door::before {
    inset-inline-start: 0;
    transform-origin: left center;
  }

  .learning-door::after {
    inset-inline-end: 0;
    transform-origin: right center;
  }

  .learning-door__label {
    position: relative;
    z-index: 2;
    color: rgb(102 255 199 / 72%);
    font-size: 0.78rem;
  }

  .learning-lock {
    position: relative;
    z-index: 3;
    display: grid;
    width: 54px;
    aspect-ratio: 0.86;
    border: 2px solid rgb(255 209 102 / 78%);
    border-radius: 8px 8px 6px 6px;
    background: rgb(18 13 2 / 92%);
    box-shadow: 0 0 24px rgb(255 209 102 / 28%);
    animation: lock-arrives 320ms ease both;
  }

  .learning-lock::before {
    content: "";
    position: absolute;
    inset-inline: 8px;
    inset-block-start: -22px;
    height: 28px;
    border: 2px solid rgb(255 209 102 / 78%);
    border-block-end: 0;
    border-radius: 999px 999px 0 0;
  }

  .learning-door.is-open {
    filter: brightness(1.35) saturate(1.2);
    box-shadow:
      inset 0 0 34px rgb(102 255 199 / 12%),
      0 0 54px rgb(102 255 199 / 30%);
  }

  .learning-door.is-open::before {
    transform: rotateY(-70deg);
    opacity: 0.55;
  }

  .learning-door.is-open::after {
    transform: rotateY(70deg);
    opacity: 0.55;
  }

  .learning-final {
    display: grid;
    gap: 0.85rem;
    justify-items: center;
    width: min(620px, 100%);
    padding: clamp(1rem, 4vw, 1.2rem);
    border: 1px solid rgb(102 255 199 / 24%);
    border-radius: var(--radius);
    background: rgb(0 0 0 / 30%);
    box-shadow: inset 0 0 34px rgb(102 255 199 / 6%);
    animation: final-text-in 360ms ease both;
  }

  .learning-question {
    margin: 0;
    color: var(--soft);
    line-height: 1.55;
  }

  .revealing-room-puzzle.is-solved {
    animation: revealing-success 780ms ease both;
  }

  .victory-panel {
    display: grid;
    gap: 1rem;
    min-height: min(64vh, 620px);
    place-content: center;
    justify-items: center;
    text-align: center;
  }

  .victory-panel--leaderboard {
    width: min(900px, 100%);
    place-content: start center;
  }

  .victory-title {
    margin: 0;
    color: var(--terminal);
    font-size: clamp(2rem, 8vw, 5rem);
    line-height: 1.02;
  }

  .victory-text {
    margin: 0 auto;
    max-width: 680px;
    color: var(--soft);
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    line-height: 1.6;
  }

  .victory-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 0.8rem;
    width: min(520px, 100%);
    margin: 0;
  }

  .victory-stats div {
    display: grid;
    gap: 0.3rem;
    padding: 0.9rem;
    border: 1px solid rgb(102 255 199 / 20%);
    border-radius: var(--radius);
    background: rgb(0 0 0 / 28%);
    box-shadow: inset 0 0 26px rgb(102 255 199 / 5%);
  }

  .victory-stats dt {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
  }

  .victory-stats dd {
    margin: 0;
    color: var(--terminal);
    font-size: clamp(1.35rem, 5vw, 2.2rem);
    font-weight: 800;
  }

  .leaderboard {
    display: grid;
    gap: 0.75rem;
    width: 100%;
    padding: clamp(0.85rem, 3vw, 1.1rem);
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: var(--radius);
    background:
      radial-gradient(circle at 50% 0%, rgb(102 255 199 / 8%), transparent 40%),
      rgb(0 0 0 / 26%);
  }

  .leaderboard h3 {
    margin: 0;
    color: var(--soft);
    font-size: clamp(1.05rem, 3vw, 1.35rem);
  }

  .leaderboard-table-wrap {
    width: 100%;
    overflow-x: auto;
  }

  .leaderboard-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    text-align: left;
  }

  .leaderboard-table th,
  .leaderboard-table td {
    padding: 0.68rem 0.72rem;
    border-block-end: 1px solid rgb(255 255 255 / 10%);
  }

  .leaderboard-table th {
    color: var(--terminal);
    font-size: 0.76rem;
    text-transform: uppercase;
  }

  .leaderboard-table td {
    color: var(--soft);
  }

  .leaderboard-warning {
    margin: 0;
    color: var(--warning);
    line-height: 1.5;
  }


  .is-leaving .room-panel,
  .is-leaving .terminal-panel {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }

  .is-entering .room-panel,
  .is-entering .terminal-panel {
    animation: enter-room 320ms ease both;
  }

  .app.is-glitching .room-panel {
    animation: micro-glitch 460ms steps(2, end) 1;
  }

  .app.is-completing-room .door-stage {
    animation: room-completion-door-focus 2s ease both;
  }

  .app.is-room-digital-transition .room-panel {
    filter: brightness(1.18) saturate(1.22);
  }

  .room-transition-overlay {
    --room-transition-duration: 3.6s;
    --transition-bg:
      repeating-linear-gradient(0deg, rgb(102 255 199 / 0%) 0 3px, rgb(102 255 199 / 20%) 4px, transparent 5px),
      repeating-linear-gradient(90deg, transparent 0 18px, rgb(255 73 91 / 16%) 19px, transparent 22px),
      radial-gradient(circle at 50% 48%, rgb(102 255 199 / 18%), transparent 34%),
      rgb(0 0 0 / 72%);
    --transition-before-bg:
      linear-gradient(90deg, transparent, rgb(102 255 199 / 34%), transparent),
      repeating-linear-gradient(180deg, transparent 0 24px, rgb(255 255 255 / 13%) 25px, transparent 28px);
    --transition-after-bg:
      linear-gradient(180deg, transparent 0 21%, rgb(255 73 91 / 28%) 22% 24%, transparent 25% 58%, rgb(102 255 199 / 26%) 59% 61%, transparent 62%),
      repeating-linear-gradient(90deg, rgb(255 255 255 / 18%) 0 5px, transparent 5px 18px);
    --transition-main-animation: room-digital-overlay var(--room-transition-duration) steps(2, end) forwards;
    --transition-before-animation: room-digital-sweep var(--room-transition-duration) cubic-bezier(.2,.8,.2,1) forwards;
    --transition-after-animation: room-digital-fracture var(--room-transition-duration) steps(2, end) forwards;
    position: fixed;
    inset: 0;
    z-index: 29;
    pointer-events: none;
    opacity: 0;
    background: var(--transition-bg);
    mix-blend-mode: screen;
    -webkit-backdrop-filter: saturate(1.25) contrast(1.12);
    backdrop-filter: saturate(1.25) contrast(1.12);
  }

  .room-transition-overlay::before,
  .room-transition-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .room-transition-overlay::before {
    background: var(--transition-before-bg);
    transform: translateX(-110%);
    animation: var(--transition-before-animation);
  }

  .room-transition-overlay::after {
    opacity: 0;
    background: var(--transition-after-bg);
    animation: var(--transition-after-animation);
  }

  .room-transition-overlay--signal-tear {
    --transition-bg:
      linear-gradient(90deg, rgb(255 73 91 / 18%), transparent 22%, rgb(102 255 199 / 18%) 78%, transparent),
      repeating-linear-gradient(0deg, transparent 0 13px, rgb(255 255 255 / 12%) 14px, transparent 17px),
      rgb(0 0 0 / 82%);
    --transition-before-bg:
      linear-gradient(180deg, transparent 0 18%, rgb(255 73 91 / 42%) 19% 25%, transparent 26% 49%, rgb(102 255 199 / 38%) 50% 56%, transparent 57%);
    --transition-after-bg:
      repeating-linear-gradient(90deg, rgb(255 73 91 / 32%) 0 4px, transparent 4px 17px, rgb(102 255 199 / 28%) 18px 21px, transparent 22px 36px);
    --transition-main-animation: room-signal-tear var(--room-transition-duration) steps(3, end) forwards;
    --transition-before-animation: room-signal-slice var(--room-transition-duration) steps(4, end) forwards;
    --transition-after-animation: room-signal-chroma var(--room-transition-duration) steps(2, end) forwards;
  }

  .room-transition-overlay--terminal-wipe {
    --transition-bg:
      repeating-linear-gradient(0deg, rgb(96 255 176 / 14%) 0 1px, transparent 1px 14px),
      linear-gradient(180deg, rgb(6 255 174 / 20%), transparent 38%, rgb(0 0 0 / 88%));
    --transition-before-bg:
      linear-gradient(180deg, transparent, rgb(96 255 176 / 58%), transparent),
      repeating-linear-gradient(90deg, transparent 0 42px, rgb(96 255 176 / 16%) 43px 45px, transparent 46px 84px);
    --transition-after-bg:
      repeating-linear-gradient(0deg, rgb(221 255 240 / 20%) 0 2px, transparent 2px 28px);
    --transition-main-animation: room-terminal-overlay var(--room-transition-duration) ease forwards;
    --transition-before-animation: room-terminal-wipe var(--room-transition-duration) cubic-bezier(.16,.84,.24,1) forwards;
    --transition-after-animation: room-terminal-cursor var(--room-transition-duration) steps(8, end) forwards;
  }

  .room-transition-overlay--scan-collapse {
    --transition-bg:
      linear-gradient(180deg, rgb(0 0 0 / 88%), rgb(102 255 199 / 16%) 48%, rgb(0 0 0 / 88%)),
      repeating-linear-gradient(0deg, transparent 0 9px, rgb(255 255 255 / 16%) 10px, transparent 12px);
    --transition-before-bg: linear-gradient(180deg, transparent 0 44%, rgb(102 255 199 / 72%) 48% 52%, transparent 56%);
    --transition-after-bg: linear-gradient(0deg, transparent 0 44%, rgb(255 73 91 / 54%) 48% 52%, transparent 56%);
    --transition-main-animation: room-collapse-overlay var(--room-transition-duration) ease forwards;
    --transition-before-animation: room-collapse-top var(--room-transition-duration) ease-in-out forwards;
    --transition-after-animation: room-collapse-bottom var(--room-transition-duration) ease-in-out forwards;
  }

  .room-transition-overlay--door-breach {
    --transition-bg:
      radial-gradient(ellipse at center, rgb(255 255 255 / 18%) 0 8%, rgb(102 255 199 / 24%) 9% 16%, transparent 17%),
      radial-gradient(ellipse at center, transparent 0 24%, rgb(0 0 0 / 86%) 25% 100%);
    --transition-before-bg: linear-gradient(90deg, transparent 0 48%, rgb(102 255 199 / 66%) 49% 51%, transparent 52%);
    --transition-after-bg: radial-gradient(circle at center, rgb(255 73 91 / 34%), transparent 34%);
    --transition-main-animation: room-breach-overlay var(--room-transition-duration) cubic-bezier(.25,.8,.3,1) forwards;
    --transition-before-animation: room-breach-line var(--room-transition-duration) ease forwards;
    --transition-after-animation: room-breach-flash var(--room-transition-duration) ease forwards;
  }

  .room-transition-overlay--pixel-storm {
    --transition-bg:
      repeating-conic-gradient(from 45deg, rgb(102 255 199 / 22%) 0 8%, transparent 8% 18%, rgb(255 73 91 / 18%) 18% 24%, transparent 24% 40%),
      rgb(0 0 0 / 82%);
    --transition-before-bg:
      repeating-linear-gradient(90deg, rgb(255 255 255 / 20%) 0 8px, transparent 8px 20px),
      repeating-linear-gradient(0deg, transparent 0 18px, rgb(102 255 199 / 16%) 19px 28px);
    --transition-after-bg:
      radial-gradient(circle at 22% 30%, rgb(102 255 199 / 44%) 0 3px, transparent 4px),
      radial-gradient(circle at 72% 62%, rgb(255 73 91 / 36%) 0 4px, transparent 5px),
      radial-gradient(circle at 48% 74%, rgb(255 255 255 / 30%) 0 2px, transparent 3px);
    --transition-main-animation: room-pixel-overlay var(--room-transition-duration) steps(5, end) forwards;
    --transition-before-animation: room-pixel-swarm var(--room-transition-duration) steps(6, end) forwards;
    --transition-after-animation: room-pixel-chunks var(--room-transition-duration) steps(4, end) forwards;
  }

  .room-transition-overlay--blackout-pulse {
    --transition-bg:
      radial-gradient(circle at center, transparent 0 18%, rgb(0 0 0 / 54%) 42%, rgb(0 0 0 / 94%) 100%),
      rgb(0 0 0 / 86%);
    --transition-before-bg: radial-gradient(circle at center, rgb(102 255 199 / 30%) 0 4%, transparent 5% 100%);
    --transition-after-bg:
      repeating-linear-gradient(0deg, transparent 0 7px, rgb(255 255 255 / 11%) 8px, transparent 10px);
    --transition-main-animation: room-blackout-overlay var(--room-transition-duration) ease forwards;
    --transition-before-animation: room-blackout-pulse var(--room-transition-duration) ease-in-out forwards;
    --transition-after-animation: room-blackout-static var(--room-transition-duration) steps(3, end) forwards;
  }

  .room-transition-overlay--void-iris {
    --transition-bg:
      radial-gradient(circle at center, transparent 0 18%, rgb(102 255 199 / 12%) 19% 23%, rgb(0 0 0 / 94%) 24% 100%);
    --transition-before-bg: radial-gradient(circle at center, transparent 0 28%, rgb(102 255 199 / 54%) 29% 31%, transparent 32%);
    --transition-after-bg: radial-gradient(circle at center, rgb(255 73 91 / 24%) 0 10%, transparent 11%);
    --transition-main-animation: room-iris-overlay var(--room-transition-duration) cubic-bezier(.2,.8,.2,1) forwards;
    --transition-before-animation: room-iris-close var(--room-transition-duration) cubic-bezier(.2,.8,.2,1) forwards;
    --transition-after-animation: room-iris-ring var(--room-transition-duration) ease forwards;
  }

  .room-transition-overlay--neon-rain {
    --transition-bg:
      linear-gradient(180deg, rgb(0 0 0 / 74%), rgb(3 18 28 / 86%)),
      repeating-linear-gradient(90deg, transparent 0 16px, rgb(102 255 199 / 18%) 17px, transparent 20px);
    --transition-before-bg:
      repeating-linear-gradient(90deg, transparent 0 34px, rgb(102 255 199 / 44%) 35px 37px, transparent 38px 70px);
    --transition-after-bg:
      repeating-linear-gradient(90deg, transparent 0 52px, rgb(255 73 91 / 25%) 53px 55px, transparent 56px 96px);
    --transition-main-animation: room-rain-overlay var(--room-transition-duration) ease forwards;
    --transition-before-animation: room-rain-fall var(--room-transition-duration) linear forwards;
    --transition-after-animation: room-rain-shear var(--room-transition-duration) linear forwards;
  }

  .room-transition-overlay--source-shift {
    --transition-bg:
      repeating-linear-gradient(0deg, rgb(221 255 240 / 10%) 0 1px, transparent 1px 20px),
      repeating-linear-gradient(90deg, transparent 0 60px, rgb(102 255 199 / 14%) 61px 63px, transparent 64px 120px),
      rgb(0 0 0 / 84%);
    --transition-before-bg:
      linear-gradient(90deg, transparent, rgb(102 255 199 / 36%), transparent),
      repeating-linear-gradient(0deg, transparent 0 18px, rgb(221 255 240 / 18%) 19px, transparent 22px);
    --transition-after-bg:
      linear-gradient(135deg, transparent 0 40%, rgb(255 73 91 / 34%) 41% 44%, transparent 45%),
      linear-gradient(-135deg, transparent 0 54%, rgb(102 255 199 / 30%) 55% 57%, transparent 58%);
    --transition-main-animation: room-source-overlay var(--room-transition-duration) steps(4, end) forwards;
    --transition-before-animation: room-source-crawl var(--room-transition-duration) linear forwards;
    --transition-after-animation: room-source-cut var(--room-transition-duration) steps(3, end) forwards;
  }

  .room-transition-overlay.is-active {
    animation: var(--transition-main-animation);
  }

  .room-transition-overlay.is-fading-out {
    animation: room-digital-fade-out 420ms ease forwards;
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .topbar {
      background: rgb(5 7 13 / 96%);
    }

    .main-menu__content,
    .room-panel,
    .terminal-panel {
      background: var(--panel-bg-strong);
    }

    .confirm-overlay {
      background: rgb(0 0 0 / 86%);
    }
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
  }

  @media (min-width: 760px) {
    .game {
      grid-template-columns: minmax(0, 920px);
      align-items: start;
    }

    .game.has-terminal-open {
      grid-template-columns: minmax(0, 1fr) minmax(290px, 0.36fr);
      justify-content: stretch;
    }

    .mirror-layout {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (max-width: 520px) {
    .room-choice-list {
      grid-template-columns: 1fr;
    }
  }

  @media (min-width: 980px) {
    .topbar {
      grid-template-columns: minmax(220px, 0.65fr) minmax(260px, 1fr) minmax(108px, auto) auto;
      align-items: center;
    }

    .topbar__actions {
      grid-template-columns: repeat(4, max-content);
      justify-content: flex-end;
    }

    .topbar__actions #resetButton,
    .topbar__actions #abandonButton {
      grid-column: auto;
    }
  }

  @media (max-width: 520px) {
    .form-row {
      align-items: stretch;
    }

    .form-row .button,
    .form-row .input-group {
      width: 100%;
    }

    .topbar {
      gap: 0.7rem;
      padding-inline: clamp(0.75rem, 4vw, 1rem);
    }

    .brand__mark {
      width: 2.35rem;
    }

    .progress__pips {
      gap: 0.14rem;
    }

    .game {
      width: min(100% - 0.75rem, 1180px);
      padding-block-start: 0.75rem;
    }

    .room-panel {
      padding: 0.85rem;
    }

    .door-stage {
      min-height: 190px;
    }

    .terminal-heading {
      font-size: 0.7rem;
    }

    .confirm-dialog__actions {
      grid-template-columns: 1fr;
    }

    .shadow-mirror-room {
      grid-template-columns: 1fr;
      min-height: 420px;
    }

    .light-area,
    .shadow-area {
      min-height: 210px;
    }

    .sound-actions .button,
    .sound-fallback {
      width: 100%;
    }

    .sound-word {
      padding-inline: 0.45rem;
    }

    .alchemy-board {
      grid-template-columns: 1fr;
    }

    .alchemy-elements {
      grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    }

    .learning-actions .button,
    .learning-final .button,
    .revealing-room-puzzle > .button {
      width: 100%;
    }

    .learning-message {
      min-height: 7.8rem;
    }

    .victory-stats {
      grid-template-columns: 1fr;
    }

    .leaderboard {
      padding-inline: 0.65rem;
    }

  }

  @media (max-width: 360px) {
    .main-menu {
      padding: 0.75rem;
    }

    .main-menu__content {
      padding: 0.9rem;
    }

    .button {
      min-height: 44px;
      padding-inline: 0.72rem;
    }

    .button--small {
      min-height: 40px;
      font-size: 0.76rem;
    }

    .room-title {
      font-size: clamp(1.25rem, 8vw, 1.7rem);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.001ms !important;
    }

    .fx-noise,
    .fx-scanlines,
    .fx-vignette {
      opacity: 0.045;
    }

    .fx-panel-scan,
    .fx-door-reflection,
    .fx-corruption-pixels,
    .fx-digital-dust,
    .fx-screen-tear,
    .fx-alert-flash,
    .fx-code-rain,
    .fx-title-glitch,
    .fx-panel-desync,
    .fx-hud-flicker .topbar,
    .fx-hud-flicker .progress,
    .fx-hud-flicker .timer,
    .fx-hud-flicker .brand__mark {
      display: none !important;
    }

    .app.is-completing-room .door-stage,
    .room-transition-overlay,
    .room-transition-overlay::before,
    .room-transition-overlay::after {
      animation-duration: 0.001ms !important;
    }
  }

  @keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
  }

  @keyframes glitch-a {
    0%, 89%, 100% { transform: translate(1px, 0); }
    90% { transform: translate(3px, -1px); }
    92% { transform: translate(-2px, 1px); }
  }

  @keyframes glitch-b {
    0%, 84%, 100% { transform: translate(-1px, 0); }
    85% { transform: translate(-3px, 1px); }
    87% { transform: translate(2px, -1px); }
  }

  @keyframes message-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes door-shake {
    0%, 100% { transform: translateX(0) rotateZ(0); }
    25% { transform: translateX(-2px) rotateZ(-0.35deg); }
    50% { transform: translateX(2px) rotateZ(0.35deg); }
    75% { transform: translateX(-1px) rotateZ(-0.2deg); }
  }

  @keyframes hard-shake {
    0%, 100% { transform: translateX(0); }
    33% { transform: translateX(-2px); }
    66% { transform: translateX(2px); }
  }

  @keyframes sound-pulse {
    from {
      color: var(--terminal);
      box-shadow: inset 0 0 28px rgb(102 255 199 / 18%);
      transform: scale(0.99);
    }
    to {
      color: var(--soft);
      box-shadow: inset 0 0 8px rgb(102 255 199 / 5%);
      transform: scale(1);
    }
  }

  @keyframes alchemy-appear {
    from {
      opacity: 0;
      transform: translateY(8px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes key-glow {
    0%, 100% {
      box-shadow:
        inset 0 0 22px rgb(255 214 102 / 12%),
        0 0 20px rgb(255 214 102 / 16%);
    }
    50% {
      box-shadow:
        inset 0 0 28px rgb(255 214 102 / 18%),
        0 0 34px rgb(255 214 102 / 30%);
    }
  }

  @keyframes alchemy-success {
    0% { filter: brightness(1); }
    45% { filter: brightness(1.45) saturate(1.3); }
    100% { filter: brightness(1.12); }
  }

  @keyframes reveal-action {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes lock-arrives {
    0% {
      opacity: 0;
      transform: translateY(-6px) rotateZ(-2deg);
    }
    50% {
      opacity: 1;
      transform: translateY(0) rotateZ(2deg);
    }
    100% {
      opacity: 1;
      transform: translateY(0) rotateZ(0);
    }
  }

  @keyframes revealing-success {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.35) saturate(1.22); }
    100% { filter: brightness(1.08); }
  }

  @keyframes unstable {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(22deg) brightness(1.2); }
  }

  @keyframes micro-glitch {
    0%, 100% { transform: translate(0); filter: none; }
    20% { transform: translate(2px, -1px); filter: saturate(1.4); }
    40% { transform: translate(-2px, 1px); }
    60% { transform: translate(1px, 0); filter: contrast(1.15); }
  }

  @keyframes cursor-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }

  @keyframes final-text-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes enter-room {
    from {
      opacity: 0;
      transform: translateY(10px) scale(0.99);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes room-completion-door-focus {
    0% {
      transform: scale(1);
      filter: brightness(1);
    }
    35% {
      transform: scale(1.025);
      filter: brightness(1.16) saturate(1.12);
    }
    100% {
      transform: scale(1.018);
      filter: brightness(1.08) saturate(1.06);
    }
  }

  @keyframes room-digital-overlay {
    0% {
      opacity: 0;
      filter: contrast(1) brightness(1);
    }
    16% {
      opacity: 0.82;
      filter: contrast(1.25) brightness(1.1);
    }
    36% {
      opacity: 0.68;
      transform: translate3d(2px, -1px, 0);
    }
    56% {
      opacity: 0.9;
      transform: translate3d(-2px, 1px, 0);
    }
    100% {
      opacity: 0.96;
      filter: contrast(1.35) brightness(1.12);
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes room-digital-sweep {
    0% {
      opacity: 0;
      transform: translateX(-120%) skewX(-12deg);
    }
    18%, 76% {
      opacity: 1;
    }
    100% {
      opacity: 0.55;
      transform: translateX(120%) skewX(-12deg);
    }
  }

  @keyframes room-digital-fracture {
    0%, 100% {
      opacity: 0.18;
      clip-path: inset(0 0 0 0);
      transform: translate3d(0, 0, 0);
    }
    20% {
      opacity: 0.82;
      clip-path: inset(12% 0 72% 0);
      transform: translate3d(7px, 0, 0);
    }
    45% {
      opacity: 0.58;
      clip-path: inset(48% 0 31% 0);
      transform: translate3d(-10px, 0, 0);
    }
    70% {
      opacity: 0.9;
      clip-path: inset(73% 0 12% 0);
      transform: translate3d(5px, 0, 0);
    }
  }

  @keyframes room-digital-fade-out {
    from {
      opacity: 0.95;
      filter: brightness(1.15) contrast(1.2);
    }
    to {
      opacity: 0;
      filter: brightness(1) contrast(1);
    }
  }

  @keyframes room-signal-tear {
    0% { opacity: 0; transform: translate3d(0, 0, 0); filter: contrast(1); }
    18% { opacity: 0.95; transform: translate3d(6px, -2px, 0); filter: contrast(1.42) saturate(1.35); }
    42% { opacity: 0.76; transform: translate3d(-8px, 2px, 0); }
    68% { opacity: 0.98; transform: translate3d(3px, 0, 0); }
    100% { opacity: 0.94; transform: translate3d(0, 0, 0); }
  }

  @keyframes room-signal-slice {
    0%, 100% { opacity: 0.25; clip-path: inset(0 0 0 0); transform: translate3d(0, 0, 0); }
    24% { opacity: 1; clip-path: inset(18% 0 63% 0); transform: translate3d(-18px, 0, 0); }
    52% { opacity: 0.78; clip-path: inset(45% 0 38% 0); transform: translate3d(22px, 0, 0); }
    74% { opacity: 0.95; clip-path: inset(72% 0 12% 0); transform: translate3d(-10px, 0, 0); }
  }

  @keyframes room-signal-chroma {
    0% { opacity: 0; transform: translateX(-8px); }
    30%, 70% { opacity: 0.72; }
    100% { opacity: 0.22; transform: translateX(8px); }
  }

  @keyframes room-terminal-overlay {
    0% { opacity: 0; filter: brightness(1); }
    22% { opacity: 0.84; filter: brightness(1.22) contrast(1.14); }
    100% { opacity: 0.92; filter: brightness(1.08) contrast(1.2); }
  }

  @keyframes room-terminal-wipe {
    0% { opacity: 0; transform: translateY(-120%); }
    20%, 80% { opacity: 0.85; }
    100% { opacity: 0.45; transform: translateY(120%); }
  }

  @keyframes room-terminal-cursor {
    0%, 100% { opacity: 0.12; transform: translateX(-2%); }
    50% { opacity: 0.78; transform: translateX(2%); }
  }

  @keyframes room-collapse-overlay {
    0% { opacity: 0; transform: scaleY(1); }
    26% { opacity: 0.9; }
    72% { opacity: 0.95; transform: scaleY(0.88); }
    100% { opacity: 0.94; transform: scaleY(1); }
  }

  @keyframes room-collapse-top {
    0% { opacity: 0; transform: translateY(-52%); }
    30%, 75% { opacity: 0.95; }
    100% { opacity: 0.48; transform: translateY(0); }
  }

  @keyframes room-collapse-bottom {
    0% { opacity: 0; transform: translateY(52%); }
    30%, 75% { opacity: 0.8; }
    100% { opacity: 0.38; transform: translateY(0); }
  }

  @keyframes room-breach-overlay {
    0% { opacity: 0; filter: blur(0) brightness(1); }
    24% { opacity: 0.82; filter: blur(1px) brightness(1.2); }
    58% { opacity: 0.96; filter: blur(0) brightness(1.36); }
    100% { opacity: 0.9; filter: blur(0) brightness(1.1); }
  }

  @keyframes room-breach-line {
    0% { opacity: 0; transform: scaleX(0.15); }
    42% { opacity: 1; transform: scaleX(1); }
    100% { opacity: 0.55; transform: scaleX(1.25); }
  }

  @keyframes room-breach-flash {
    0%, 100% { opacity: 0.08; transform: scale(0.5); }
    36% { opacity: 0.72; transform: scale(1.4); }
    62% { opacity: 0.24; transform: scale(1.9); }
  }

  @keyframes room-pixel-overlay {
    0% { opacity: 0; background-size: 18px 18px, auto; }
    26% { opacity: 0.92; background-size: 10px 10px, auto; }
    58% { opacity: 0.84; background-size: 28px 28px, auto; }
    100% { opacity: 0.9; background-size: 14px 14px, auto; }
  }

  @keyframes room-pixel-swarm {
    0% { opacity: 0; transform: translate3d(-4%, -2%, 0) scale(1.08); }
    45% { opacity: 0.76; transform: translate3d(3%, 2%, 0) scale(1); }
    100% { opacity: 0.36; transform: translate3d(0, 0, 0) scale(1.04); }
  }

  @keyframes room-pixel-chunks {
    0% { opacity: 0; transform: scale(0.8); }
    30%, 78% { opacity: 0.9; }
    100% { opacity: 0.2; transform: scale(1.3); }
  }

  @keyframes room-blackout-overlay {
    0% { opacity: 0; filter: brightness(1); }
    20% { opacity: 0.88; filter: brightness(0.72); }
    56% { opacity: 0.7; filter: brightness(1.24); }
    100% { opacity: 0.92; filter: brightness(0.82); }
  }

  @keyframes room-blackout-pulse {
    0%, 100% { opacity: 0.08; transform: scale(0.2); }
    35% { opacity: 0.82; transform: scale(2.2); }
    66% { opacity: 0.18; transform: scale(3.4); }
  }

  @keyframes room-blackout-static {
    0% { opacity: 0; transform: translateY(-2px); }
    42% { opacity: 0.62; transform: translateY(2px); }
    100% { opacity: 0.2; transform: translateY(0); }
  }

  @keyframes room-iris-overlay {
    0% { opacity: 0; clip-path: circle(120% at 50% 50%); }
    22% { opacity: 0.88; clip-path: circle(78% at 50% 50%); }
    74% { opacity: 0.96; clip-path: circle(28% at 50% 50%); }
    100% { opacity: 0.94; clip-path: circle(12% at 50% 50%); }
  }

  @keyframes room-iris-close {
    0% { opacity: 0; transform: scale(2.2); }
    36%, 82% { opacity: 0.88; }
    100% { opacity: 0.45; transform: scale(0.42); }
  }

  @keyframes room-iris-ring {
    0% { opacity: 0; transform: scale(0.3); }
    44% { opacity: 0.5; transform: scale(1.2); }
    100% { opacity: 0.12; transform: scale(2); }
  }

  @keyframes room-rain-overlay {
    0% { opacity: 0; filter: saturate(1); }
    28% { opacity: 0.82; filter: saturate(1.35); }
    100% { opacity: 0.9; filter: saturate(1.18); }
  }

  @keyframes room-rain-fall {
    0% { opacity: 0; transform: translateY(-100%); }
    18%, 82% { opacity: 0.7; }
    100% { opacity: 0.28; transform: translateY(100%); }
  }

  @keyframes room-rain-shear {
    0% { opacity: 0; transform: translate3d(-3%, -80%, 0) skewX(-8deg); }
    45% { opacity: 0.55; transform: translate3d(2%, 0, 0) skewX(-8deg); }
    100% { opacity: 0.2; transform: translate3d(0, 80%, 0) skewX(-8deg); }
  }

  @keyframes room-source-overlay {
    0% { opacity: 0; transform: translate3d(0, 0, 0); }
    24% { opacity: 0.88; transform: translate3d(4px, 0, 0); }
    52% { opacity: 0.76; transform: translate3d(-5px, 0, 0); }
    100% { opacity: 0.92; transform: translate3d(0, 0, 0); }
  }

  @keyframes room-source-crawl {
    0% { opacity: 0; transform: translateX(-115%) skewX(-14deg); }
    22%, 80% { opacity: 0.72; }
    100% { opacity: 0.28; transform: translateX(115%) skewX(-14deg); }
  }

  @keyframes room-source-cut {
    0%, 100% { opacity: 0.16; clip-path: inset(0 0 0 0); }
    34% { opacity: 0.72; clip-path: inset(22% 0 58% 0); }
    64% { opacity: 0.55; clip-path: inset(61% 0 22% 0); }
  }

  @keyframes fx-noise-shift {
    0% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(-1.5%, 1%, 0); }
    50% { transform: translate3d(1%, -1.5%, 0); }
    75% { transform: translate3d(-0.5%, -1%, 0); }
    100% { transform: translate3d(0.75%, 0.5%, 0); }
  }

  @keyframes fx-grid-drift {
    from {
      background-position: center, 0 0, 0 0, center;
    }
    to {
      background-position: center, 72px 0, 0 60px, center;
    }
  }

  @keyframes fx-title-glitch {
    0%, 100% {
      transform: translate3d(0, 0, 0);
      filter: none;
    }
    28% {
      transform: translate3d(3px, -2px, 0);
      filter: saturate(1.5) contrast(1.12);
    }
    54% {
      transform: translate3d(-4px, 2px, 0);
      filter: contrast(1.2);
    }
    76% {
      transform: translate3d(3px, 1px, 0);
    }
  }

  @keyframes fx-panel-glow {
    0%, 100% {
      box-shadow: var(--shadow), 0 0 0 rgb(102 255 199 / 0%), inset 0 0 0 rgb(102 255 199 / 0%);
      border-color: var(--panel-border);
    }
    50% {
      box-shadow: var(--shadow), 0 0 46px rgb(102 255 199 / 20%), inset 0 0 48px rgb(102 255 199 / 8%);
      border-color: rgb(128 255 209 / 48%);
    }
  }

  @keyframes fx-panel-scan {
    0% {
      opacity: 0;
      transform: translateX(-140%) skewX(-14deg);
    }
    18%, 76% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translateX(740%) skewX(-14deg);
    }
  }

  @keyframes fx-door-breathe {
    0%, 100% {
      transform: scale(1);
      box-shadow:
        inset 0 0 0 1px rgb(102 255 199 / 8%),
        inset 0 0 55px rgb(0 0 0 / 75%),
        0 0 42px rgb(102 255 199 / 15%);
    }
    50% {
      transform: scale(1.014);
      box-shadow:
        inset 0 0 0 1px rgb(102 255 199 / 22%),
        inset 0 0 74px rgb(102 255 199 / 10%),
        0 0 68px rgb(102 255 199 / 28%);
    }
  }

  @keyframes fx-door-line {
    0%, 100% {
      opacity: 0.32;
      filter: brightness(0.9);
    }
    45% {
      opacity: 0.9;
      filter: brightness(1.55);
    }
    52% {
      opacity: 0.18;
    }
  }

  @keyframes fx-door-reflection {
    0% {
      opacity: 0;
      transform: translateX(0) skewX(-15deg);
    }
    24%, 68% {
      opacity: 0.9;
    }
    100% {
      opacity: 0;
      transform: translateX(650%) skewX(-15deg);
    }
  }

  @keyframes fx-corruption-pixel {
    0% {
      opacity: 0;
      transform: translate3d(0, 0, 0) scale(0.7);
    }
    20%, 62% {
      opacity: 1;
      transform: translate3d(3px, -2px, 0) scale(1.12);
    }
    100% {
      opacity: 0;
      transform: translate3d(-1px, 2px, 0) scale(0.82);
    }
  }

  @keyframes fx-panel-desync {
    0%, 100% {
      transform: translate3d(0, 0, 0);
      filter: none;
    }
    24% {
      transform: translate3d(2px, -1px, 0);
      filter: hue-rotate(10deg);
    }
    48% {
      transform: translate3d(-2px, 1px, 0);
      filter: saturate(1.2);
    }
    72% {
      transform: translate3d(1px, 0, 0);
    }
  }

  @keyframes fx-digital-dust {
    0% {
      opacity: 0;
      transform: translate3d(0, -10%, 0);
    }
    12%, 72% {
      opacity: 0.66;
    }
    100% {
      opacity: 0;
      transform: translate3d(0, 118vh, 0);
    }
  }

  @keyframes fx-screen-tear {
    0% {
      opacity: 0;
      clip-path: inset(0 100% 0 0);
      filter: none;
    }
    20%, 74% {
      opacity: 0.9;
      clip-path: inset(0 0 0 0);
      filter: saturate(1.5);
    }
    100% {
      opacity: 0;
      clip-path: inset(0 0 0 100%);
      filter: none;
    }
  }

  @keyframes fx-hud-flicker {
    0%, 100% {
      opacity: 1;
      filter: none;
      transform: translate3d(0, 0, 0);
    }
    35% {
      opacity: 0.72;
      filter: brightness(1.55) saturate(1.35);
      transform: translate3d(1px, 0, 0);
    }
    70% {
      opacity: 0.92;
      filter: hue-rotate(12deg);
      transform: translate3d(-1px, 0, 0);
    }
  }

  @keyframes fx-alert-flash {
    0% {
      opacity: 0;
      filter: brightness(1);
    }
    20% {
      opacity: 0.95;
      filter: brightness(1.2);
    }
    100% {
      opacity: 0;
      filter: brightness(1);
    }
  }

  @keyframes fx-code-rain {
    0% {
      opacity: 0;
      transform: translate3d(0, -8%, 0);
    }
    16%, 76% {
      opacity: 0.72;
    }
    100% {
      opacity: 0;
      transform: translate3d(0, 112vh, 0);
    }
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 320ms;
    animation-timing-function: ease;
  }