.inner-mode-icon {
        display: block;
        width: 1.45rem;
        height: 1.45rem;
        background: #737373;
        mask: url("/static/zero-inner-icon.svg") center / contain no-repeat;
        -webkit-mask: url("/static/zero-inner-icon.svg") center / contain no-repeat;
      }

      #inner-mode-toggle[aria-pressed="true"] {
        border-color: rgba(212, 175, 55, 0.75);
        background: rgba(212, 175, 55, 0.12);
      }

      #inner-mode-toggle[aria-pressed="true"] .inner-mode-icon {
        background: #d4af37;
      }

      .composer-icon-button {
        display: grid;
        height: 2rem;
        width: 2rem;
        place-items: center;
        border-radius: 0.5rem;
        border: 0;
        background: transparent;
        color: #d4af37;
        transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
      }

      .composer-icon-button:hover {
        background: rgba(212, 175, 55, 0.12);
      }

      .auto-play-icon {
        height: 1.25rem;
        width: 1.25rem;
        color: currentColor;
      }

      #auto-play-toggle span {
        display: none;
      }

      #message {
        scrollbar-width: thin;
        scrollbar-color: rgba(115, 115, 115, 0.75) rgba(10, 10, 10, 0.35);
      }

      #message::-webkit-scrollbar {
        width: 0.45rem;
      }

      #message::-webkit-scrollbar-track {
        background: rgba(10, 10, 10, 0.35);
        border-radius: 999px;
      }

      #message::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(115, 115, 115, 0.75);
      }

      #message::-webkit-scrollbar-thumb:hover {
        background: rgba(163, 163, 163, 0.9);
      }

      @keyframes send-button-glow {
        0%, 100% {
          box-shadow: 0 0 14px rgba(212, 175, 55, 0.36), 0 0 0 rgba(212, 175, 55, 0);
        }
        50% {
          box-shadow: 0 0 34px rgba(212, 175, 55, 0.86), 0 0 76px rgba(212, 175, 55, 0.34);
        }
      }

      #send-button.send-button-ready:not(:disabled) {
        animation: send-button-glow 1.45s ease-in-out infinite;
      }

      .composer-send-button {
        display: grid;
        width: 3.15rem;
        height: 3.15rem;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid rgba(245, 245, 245, 0.84);
        border-radius: 999px;
        background: #f5f5f5;
        color: #050505;
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
        transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease;
      }

      .composer-send-button svg {
        width: 1.55rem;
        height: 1.55rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.45;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .composer-send-button:hover:not(:disabled),
      .composer-send-button:focus-visible:not(:disabled) {
        border-color: rgba(253, 230, 138, 0.9);
        background: #fff7d6;
        color: #050505;
        box-shadow: 0 0 24px rgba(212, 175, 55, 0.32), 0 14px 36px rgba(0, 0, 0, 0.38);
        outline: none;
        transform: translateY(-1px);
      }

      .composer-send-button:active:not(:disabled) {
        transform: translateY(0) scale(0.98);
      }

      .composer-send-button:disabled {
        cursor: not-allowed;
        border-color: rgba(82, 82, 82, 0.72);
        background: rgba(64, 64, 64, 0.86);
        color: rgba(163, 163, 163, 0.86);
        box-shadow: none;
      }

      #send-button.send-button-ready:not(:disabled) {
        border-color: rgba(253, 230, 138, 0.95);
        background: #fff7d6;
        color: #050505;
      }

      .speaker-mask-icon {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        background: currentColor;
        mask: url("/static/zero-inner-icon.svg") center / contain no-repeat;
        -webkit-mask: url("/static/zero-inner-icon.svg") center / contain no-repeat;
      }

      .speaker-symbol-icon {
        display: inline-block;
        font-size: 1rem;
        line-height: 1;
      }

      .speaker-image-icon {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        object-fit: contain;
      }

      :root {
        --composer-space: 7rem;
        --suggested-response-space: 0px;
        --keyboard-inset: 0px;
      }

      .player-bubble {
        max-width: min(90vw, 32rem);
      }

      .player-turn {
        max-width: min(90vw, 32rem);
      }

      body.below-zero-page::before {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        height: 100lvh;
        z-index: -2;
        pointer-events: none;
        background:
          linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.2) 48%, rgba(0, 0, 0, 0.92) 100%),
          linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.34) 52%, rgba(0, 0, 0, 0.88) 100%),
          image-set(
            url("/static/images/games/bz-background.webp") type("image/webp"),
            url("/static/images/games/bz-background.png") type("image/png")
          ) center top / cover no-repeat;
      }

      body.below-zero-page::after {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        height: 100lvh;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient(circle at 50% 14%, rgba(40, 111, 170, 0.2), transparent 34%);
      }

      body.below-zero-page > nav,
      body.below-zero-page #composer-bar {
        background: rgba(0, 0, 0, 0.72);
        backdrop-filter: blur(10px);
      }

      body.below-zero-page #transcript {
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
      }

      body.devils-advocate-page::before {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        height: 100lvh;
        z-index: -2;
        pointer-events: none;
        background:
          linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.34) 50%, rgba(0, 0, 0, 0.92) 100%),
          linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.42) 56%, rgba(0, 0, 0, 0.9) 100%),
          image-set(
            url("/static/images/games/da-background.webp") type("image/webp"),
            url("/static/images/games/da-background.png") type("image/png")
          ) center top / cover no-repeat;
      }

      body.devils-advocate-page::after {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        height: 100lvh;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient(circle at 54% 18%, rgba(185, 28, 28, 0.2), transparent 34%);
      }

      body.devils-advocate-page > nav,
      body.devils-advocate-page #composer-bar {
        background: rgba(0, 0, 0, 0.72);
        backdrop-filter: blur(10px);
      }

      body.devils-advocate-page #transcript {
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
      }

      body.dead-pattern-page::before {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        height: 100lvh;
        z-index: -2;
        pointer-events: none;
        background:
          linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.28) 48%, rgba(0, 0, 0, 0.9) 100%),
          linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.38) 56%, rgba(0, 0, 0, 0.9) 100%),
          image-set(
            url("/static/images/games/dp_background.webp") type("image/webp"),
            url("/static/images/games/dp_background.png") type("image/png")
          ) center top / cover no-repeat;
      }

      body.dead-pattern-page::after {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        height: 100lvh;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient(circle at 52% 18%, rgba(148, 163, 184, 0.16), transparent 34%);
      }

      body.dead-pattern-page > nav,
      body.dead-pattern-page #composer-bar {
        background: rgba(0, 0, 0, 0.72);
        backdrop-filter: blur(10px);
      }

      body.dead-pattern-page #transcript {
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
      }

      .evidence-prompt {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center;
        margin: 1.75rem 0 0;
      }

      .evidence-prompt[hidden],
      .evidence-panel[hidden] {
        display: none;
      }

      .evidence-open-button {
        min-height: 2.75rem;
        border: 1px solid rgba(229, 229, 229, 0.44);
        border-radius: 0.45rem;
        background: rgba(8, 8, 8, 0.72);
        padding: 0.75rem 1.05rem;
        color: rgb(245, 245, 245);
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        box-shadow: 0 0 24px rgba(255, 255, 255, 0.08);
      }

      .evidence-open-button:hover,
      .evidence-open-button:focus-visible {
        border-color: rgba(255, 255, 255, 0.8);
        background: rgba(245, 245, 245, 0.12);
        outline: none;
      }

      body.evidence-view-active {
        overflow: hidden;
      }

      body.evidence-view-active #game-shell > section:first-child,
      #game-shell.evidence-view-active > section:first-child {
        display: none;
      }

      body.evidence-view-active #game-shell,
      #game-shell.evidence-view-active {
        max-width: none;
        min-height: 100vh;
        min-height: 100svh;
        padding: 0 !important;
      }

      .evidence-panel {
        position: fixed;
        inset: 0;
        z-index: 80;
        min-height: 100vh;
        min-height: 100svh;
        overflow: auto;
        padding: clamp(1rem, 3vh, 2.25rem) clamp(1rem, 4vw, 3rem);
        background:
          linear-gradient(90deg, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.94)),
          linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.82)),
          image-set(
            url("/static/images/games/dp_background.webp") type("image/webp"),
            url("/static/images/games/dp_background.png") type("image/png")
          ) center / cover no-repeat;
        color: rgb(245, 245, 245);
        isolation: isolate;
      }

      .evidence-back-button {
        position: fixed;
        left: 1rem;
        top: 50%;
        z-index: 82;
        display: grid;
        width: 3rem;
        height: 3rem;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 0.5rem;
        background: rgba(10, 10, 10, 0.72);
        color: rgb(245, 245, 245);
        font-size: 1.55rem;
        line-height: 1;
        backdrop-filter: blur(0.9rem);
      }

      .evidence-back-button:hover,
      .evidence-back-button:focus-visible {
        border-color: rgba(255, 255, 255, 0.4);
        background: rgba(38, 38, 38, 0.78);
        outline: none;
      }

      .evidence-stage {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: clamp(1rem, 2.5vh, 1.6rem);
        width: min(100%, 68rem);
        min-height: calc(100vh - clamp(2rem, 6vh, 4.5rem));
        min-height: calc(100svh - clamp(2rem, 6vh, 4.5rem));
        margin: 0 auto;
      }

      .evidence-title {
        text-align: center;
      }

      .evidence-title p {
        margin: 0;
        color: rgb(163, 163, 163);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.34em;
        text-transform: uppercase;
      }

      .evidence-title h2 {
        margin: 0.25rem 0 0;
        color: rgb(245, 245, 245);
        font-size: clamp(2.2rem, 7vw, 3.2rem);
        font-weight: 700;
        line-height: 1;
      }

      .evidence-title h3 {
        margin: 1.1rem 0 0.25rem;
        color: rgb(245, 245, 245);
        font-size: clamp(1.25rem, 4vw, 1.85rem);
        font-weight: 600;
        letter-spacing: 0.08em;
      }

      .evidence-title span {
        color: rgb(212, 212, 212);
        font-size: 0.78rem;
      }

      .evidence-layout {
        display: grid;
        grid-template-columns: minmax(18rem, 24rem) minmax(13rem, 16rem);
        justify-content: center;
        align-items: center;
        gap: clamp(1.2rem, 4vw, 2.4rem);
        min-height: 0;
      }

      .phone-frame {
        position: relative;
        width: min(24rem, 72vw);
        margin: 0 auto;
        border-radius: 2.7rem;
        border: 0.5rem solid rgba(18, 18, 18, 0.99);
        background: #050505;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.2),
          inset 0 0 0 0.55rem rgba(0, 0, 0, 0.85),
          0 0 0 1px rgba(255, 255, 255, 0.14),
          0 2rem 5rem rgba(0, 0, 0, 0.72);
      }

      .phone-frame::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0.72rem;
        z-index: 2;
        width: 5.1rem;
        height: 1.32rem;
        transform: translateX(-50%);
        border-radius: 999px;
        background: #030303;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.18),
          0 0 1rem rgba(0, 0, 0, 0.65);
      }

      .phone-screen {
        height: min(72vh, 43rem);
        min-height: 34rem;
        border-radius: 2.05rem;
        background:
          radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 28%),
          linear-gradient(180deg, #151515, #070707);
        padding: 1.15rem 1rem 1.15rem;
        color: rgb(245, 245, 245);
        overflow: hidden;
      }

      .phone-status,
      .phone-header,
      .phone-tabs,
      .phone-search,
      .phone-thread {
        display: flex;
        align-items: center;
      }

      .phone-status {
        justify-content: space-between;
        padding: 0.05rem 0.35rem 1rem;
        color: rgb(245, 245, 245);
        font-size: 0.72rem;
        font-weight: 700;
      }

      .phone-header {
        justify-content: space-between;
        padding: 0.25rem 0.2rem 0.8rem;
      }

      .phone-header strong {
        font-size: 0.88rem;
        font-weight: 700;
      }

      .phone-header button {
        width: 1.3rem;
        height: 1.3rem;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 999px;
        background: transparent;
        color: rgb(229, 229, 229);
        font-size: 0.75rem;
      }

      .phone-tabs {
        gap: 0.95rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        overflow-x: auto;
        scrollbar-width: none;
      }

      .phone-tabs button {
        position: relative;
        border: 0;
        background: transparent;
        padding: 0.6rem 0 0.55rem;
        color: rgb(163, 163, 163);
        font-size: 0.72rem;
        white-space: nowrap;
      }

      .phone-tabs button.is-active {
        color: rgb(245, 245, 245);
        font-weight: 800;
      }

      .phone-tabs button.is-active::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 2px;
        border-radius: 999px;
        background: rgb(245, 245, 245);
      }

      .phone-search {
        gap: 0.55rem;
        margin: 0.9rem 0 0.55rem;
      }

      .phone-search span {
        display: grid;
        width: 1.8rem;
        height: 1.8rem;
        flex: 0 0 auto;
        place-items: center;
        border-radius: 999px;
        color: rgb(163, 163, 163);
      }

      .phone-search span::before {
        content: "";
        width: 0.72rem;
        height: 0.72rem;
        border: 2px solid currentColor;
        border-radius: 999px;
        box-shadow: 0.36rem 0.36rem 0 -0.2rem currentColor;
        transform: rotate(-12deg);
      }

      .phone-search button {
        flex: 0 0 auto;
      }

      .phone-search input {
        min-width: 0;
        flex: 1;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.8rem;
        background: rgba(255, 255, 255, 0.06);
        padding: 0.65rem 0.8rem;
        color: rgb(229, 229, 229);
        font-size: 0.76rem;
      }

      .phone-search button {
        display: grid;
        width: 2.45rem;
        min-height: 2.45rem;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 0.75rem;
        background: rgba(255, 255, 255, 0.04);
        color: rgb(212, 212, 212);
      }

      .phone-search button::before {
        content: "";
        width: 0.95rem;
        height: 0.95rem;
        border: 2px solid currentColor;
        border-top-width: 0;
        clip-path: polygon(0 0, 100% 0, 62% 48%, 62% 100%, 38% 100%, 38% 48%);
      }

      .phone-message-list {
        display: grid;
        max-height: calc(100% - 8.4rem);
        overflow-y: auto;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.8rem;
        scrollbar-width: thin;
        scrollbar-color: rgba(115, 115, 115, 0.75) rgba(10, 10, 10, 0.35);
      }

      .phone-thread {
        width: 100%;
        gap: 0.75rem;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        background: rgba(255, 255, 255, 0.025);
        padding: 0.62rem 0.55rem;
        color: inherit;
        text-align: left;
      }

      .phone-thread:last-child {
        border-bottom: 0;
      }

      .phone-thread:hover,
      .phone-thread:focus-visible {
        background: rgba(255, 255, 255, 0.07);
        outline: none;
      }

      .phone-avatar {
        display: grid;
        flex: 0 0 auto;
        width: 2.1rem;
        height: 2.1rem;
        place-items: center;
        border-radius: 999px;
        background: linear-gradient(135deg, rgb(115, 115, 115), rgb(82, 82, 82));
        color: rgb(245, 245, 245);
        font-size: 0.75rem;
        font-weight: 800;
      }

      .phone-thread span:nth-child(2) {
        min-width: 0;
        flex: 1;
      }

      .phone-thread strong,
      .phone-thread small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .phone-thread strong {
        color: rgb(245, 245, 245);
        font-size: 0.78rem;
      }

      .phone-thread small,
      .phone-thread em {
        color: rgb(163, 163, 163);
        font-size: 0.7rem;
        font-style: normal;
      }

      .evidence-help-card {
        align-self: center;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 0.55rem;
        background: rgba(10, 10, 10, 0.58);
        padding: 1.25rem;
        box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(0.75rem);
      }

      .evidence-help-card p {
        margin: 0 0 0.8rem;
        color: rgb(163, 163, 163);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
      }

      .evidence-help-card span,
      .evidence-help-card small {
        display: block;
        color: rgb(212, 212, 212);
        font-size: 0.78rem;
        line-height: 1.6;
      }

      .evidence-help-card small {
        margin-top: 1.1rem;
        color: rgb(163, 163, 163);
      }

      .evidence-help-card div {
        width: 100%;
        height: 0.18rem;
        margin-top: 1rem;
        border-radius: 999px;
        background: linear-gradient(90deg, rgb(245, 245, 245) 0 18%, rgba(255, 255, 255, 0.2) 18% 100%);
      }

      .evidence-layout--timeline {
        grid-template-columns: minmax(24rem, 42rem) minmax(13rem, 16rem);
      }

      .timeline-file {
        width: min(100%, 42rem);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0.65rem;
        background: rgba(7, 7, 7, 0.82);
        box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.52);
        backdrop-filter: blur(0.9rem);
        overflow: hidden;
      }

      .timeline-file-header {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 1.05rem 1.15rem;
      }

      .timeline-file-header p {
        margin: 0;
        color: rgb(245, 245, 245);
        font-size: 0.9rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .timeline-file-header span {
        color: rgb(163, 163, 163);
        font-size: 0.72rem;
        text-align: right;
      }

      .timeline-table {
        display: grid;
      }

      .timeline-row {
        display: grid;
        grid-template-columns: 7.5rem minmax(0, 1fr);
        gap: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 0.82rem 1.15rem;
        color: rgb(229, 229, 229);
        font-size: 0.86rem;
        line-height: 1.45;
      }

      .timeline-row:last-child {
        border-bottom: 0;
      }

      .timeline-row--head {
        background: rgba(255, 255, 255, 0.055);
        color: rgb(163, 163, 163);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
      }

      .timeline-row time {
        color: rgb(245, 245, 245);
        font-weight: 800;
        white-space: nowrap;
      }

      .timeline-row--uncertain {
        background: rgba(212, 175, 55, 0.08);
      }

      .timeline-row--uncertain time {
        color: rgb(250, 204, 21);
      }

      @media (max-width: 640px) {
        :root {
          --composer-space: 6.5rem;
        }

        body.below-zero-page::before {
          background-position: center top;
        }

        #message {
          max-height: 6.5rem;
          overflow-y: auto;
        }

        .evidence-panel {
          padding: 0.8rem 0.85rem 1rem;
        }

        .evidence-back-button {
          left: 0.65rem;
          top: 0.75rem;
          width: 2.55rem;
          height: 2.55rem;
        }

        .evidence-layout {
          grid-template-columns: minmax(0, 1fr);
          align-content: start;
          gap: 0.9rem;
        }

        .evidence-layout--timeline {
          grid-template-columns: minmax(0, 1fr);
        }

        .phone-frame {
          width: min(100%, 22.5rem);
          margin: 0 auto;
        }

        .phone-screen {
          height: min(72vh, 38rem);
          min-height: 30rem;
        }

        .phone-message-list {
          max-height: 22rem;
        }

        .evidence-help-card {
          width: min(100%, 22rem);
          margin: 0 auto;
        }

        .timeline-row {
          grid-template-columns: minmax(5.75rem, 0.34fr) minmax(0, 1fr);
          gap: 0.7rem;
          padding: 0.78rem 0.85rem;
          font-size: 0.78rem;
        }

        .timeline-file-header {
          display: grid;
          padding: 0.9rem;
        }

        .timeline-file-header span {
          text-align: left;
        }

      }