@layer apps {
  .top-nav-spacer {
    flex: 1;
  }

  .arcade-top-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
  }

  .arcade-top-tab {
    border: 1px solid transparent;
    color: var(--text-muted);
    padding: 5px 9px;
    text-decoration: none;
  }

  .arcade-top-tab[href]:hover {
    border-color: var(--border);
    background: var(--surface-control-hover);
    color: var(--text);
  }

  .arcade-top-tab.is-active {
    border-color: var(--border-selected);
    background: var(--surface-selected);
    color: var(--text-selected);
  }

  .arcade-top-tab.is-disabled {
    cursor: default;
    opacity: 0.58;
  }

  .arcade-workspace {
    --left-panel-width: 280px;
  }

  .arcade-room-shell,
  .arcade-game-workspace {
    --left-panel-width: 320px;
  }

  .arcade-room-loading[hidden],
  .arcade-room-shell[hidden],
  .arcade-game-workspace[hidden],
  .arcade-section[hidden],
  .arcade-controls[hidden],
  .arcade-game-empty[hidden],
  .arcade-game-host[hidden] {
    display: none;
  }

  .arcade-section {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
  }

  .arcade-copy {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.92rem;
  }

  .arcade-status {
    min-width: 96px;
    border: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--text-muted);
    padding: 5px 8px;
    text-align: center;
    font-size: 0.86rem;
  }

  .arcade-muted-link,
  .arcade-side-detail {
    color: var(--text-muted);
  }

  .arcade-muted-link {
    cursor: default;
    opacity: 0.72;
  }

  .arcade-muted-link:hover {
    background: transparent;
    color: var(--text-muted);
  }

  .arcade-create-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
    align-items: end;
    gap: 10px;
    border: 1px solid var(--border);
    background: var(--surface-raised);
    padding: 12px;
  }

  .arcade-create-form label {
    display: grid;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.86rem;
  }

  .arcade-create-form input,
  .arcade-create-form button,
  .arcade-controls button,
  .arcade-game-actions button,
  .arcade-button-link,
  .arcade-game-link {
    min-height: 34px;
    border: 1px solid var(--border);
    background: var(--surface-control);
    color: var(--text);
    padding: 6px 10px;
  }

  .arcade-create-form button,
  .arcade-controls button,
  .arcade-game-actions button,
  .arcade-button-link,
  .arcade-game-link {
    cursor: pointer;
  }

  .arcade-create-form button:hover,
  .arcade-controls button:hover,
  .arcade-game-actions button:hover,
  .arcade-button-link:hover,
  .arcade-game-link:hover {
    background: var(--surface-control-hover);
  }

  .arcade-button-link,
  .arcade-game-link {
    display: inline-grid;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
  }

  .arcade-game-link {
    width: fit-content;
  }

  .arcade-game-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .arcade-status-players {
    position: absolute;
    left: 50%;
    display: flex;
    align-items: center;
    align-self: center;
    gap: 5px;
    transform: translateX(-50%);
  }

  .arcade-status-players[hidden] {
    display: none;
  }

  .arcade-game-actions button[hidden],
  .arcade-game-link[hidden] {
    display: none;
  }

  .arcade-settings-dialog {
    width: min(560px, calc(100vw - 28px));
  }

  .arcade-settings-panel {
    display: grid;
    gap: 14px;
    padding: 18px;
  }

  .arcade-settings-panel h2 {
    margin: 0;
  }

  .arcade-settings-panel label {
    display: grid;
    gap: 5px;
    color: var(--text-muted);
    font-size: 0.86rem;
  }

  .arcade-settings-panel :is(input, select, button) {
    min-height: 34px;
    border: 1px solid var(--border);
    background: var(--surface-control);
    color: var(--text);
    padding: 6px 9px;
  }

  .arcade-settings-panel button {
    cursor: pointer;
  }

  .arcade-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .arcade-settings-panel .arcade-settings-check {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .arcade-settings-check input {
    min-height: 0;
  }

  .arcade-game-picker-list {
    display: grid;
    gap: 6px;
  }

  .arcade-game-picker-option {
    display: grid;
    justify-items: start;
    gap: 3px;
    min-height: 48px;
    border: 1px solid var(--border);
    background: var(--surface-control);
    color: var(--text);
    cursor: pointer;
    padding: 8px 10px;
    text-align: left;
  }

  .arcade-game-picker-option:hover {
    border-color: var(--border-focus);
    background: var(--surface-control-hover);
  }

  .arcade-game-picker-option:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .arcade-game-picker-option:disabled:hover {
    border-color: var(--border);
    background: var(--surface-control);
  }

  .arcade-game-picker-option span {
    color: var(--text-muted);
    font-size: 0.8rem;
  }

  .arcade-controls button[aria-pressed="true"] {
    border-color: var(--border-selected);
    background: var(--surface-selected);
    color: var(--text-selected);
  }

  .arcade-controls button:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.68;
  }

  .arcade-room-list,
  .arcade-player-list {
    display: grid;
    gap: 4px;
  }

  .arcade-room-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    color: var(--text);
    padding: 10px;
    text-decoration: none;
  }

  .arcade-room-row:hover,
  .arcade-room-row:focus-visible {
    border-color: var(--border-selected);
    background: var(--surface-selected);
    color: var(--text-selected);
  }

  .arcade-room-row > div {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .arcade-room-row strong {
    overflow: hidden;
    color: var(--text-strong);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .arcade-room-row small,
  .arcade-player-row small {
    color: var(--text-muted);
  }

  .arcade-player-row,
  .arcade-empty {
    display: grid;
    gap: 2px;
    min-height: 30px;
    border-radius: 6px;
    color: var(--text-secondary);
    padding: 5px 8px;
  }

  .arcade-player-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }

  .arcade-player-row-body {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .arcade-player-row.is-active {
    border: 1px solid var(--border-selected);
    background: var(--surface-selected);
    color: var(--text-selected);
  }

  .arcade-player-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .arcade-avatar-badge {
    --avatar-bg: var(--surface-control);
    --avatar-border: var(--border);
    --avatar-glyph: #ffffff;
    display: inline-grid;
    place-items: center;
    width: 28px;
    aspect-ratio: 1;
    border: 1px solid var(--avatar-border);
    border-radius: 50%;
    background:
      radial-gradient(
        circle at 50% 35%,
        var(--avatar-glyph) 0 17%,
        transparent 18%
      ),
      radial-gradient(
      ellipse at 50% 82%,
      var(--avatar-glyph) 0 29%,
      transparent 30%
    ),
      var(--avatar-bg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, white 22%, transparent);
    flex: 0 0 auto;
  }

  .arcade-avatar-badge[data-avatar-size="small"] {
    width: 22px;
  }

  .arcade-avatar-badge[data-avatar-size="large"] {
    width: 36px;
  }

  :is(
    .arcade-avatar-badge,
    .arcade-card,
    .arcade-chess-square
  )[data-avatar-color="green"] {
    --avatar-bg: #16a34a;
    --avatar-border: #166534;
  }

  :is(
    .arcade-avatar-badge,
    .arcade-card,
    .arcade-chess-square
  )[data-avatar-color="red"] {
    --avatar-bg: #dc2626;
    --avatar-border: #991b1b;
  }

  :is(
    .arcade-avatar-badge,
    .arcade-card,
    .arcade-chess-square
  )[data-avatar-color="blue"] {
    --avatar-bg: #2563eb;
    --avatar-border: #1e40af;
  }

  :is(
    .arcade-avatar-badge,
    .arcade-card,
    .arcade-chess-square
  )[data-avatar-color="yellow"] {
    --avatar-bg: #ca8a04;
    --avatar-border: #854d0e;
  }

  :is(
    .arcade-avatar-badge,
    .arcade-card,
    .arcade-chess-square
  )[data-avatar-color="purple"] {
    --avatar-bg: #9333ea;
    --avatar-border: #6b21a8;
  }

  :is(
    .arcade-avatar-badge,
    .arcade-card,
    .arcade-chess-square
  )[data-avatar-color="orange"] {
    --avatar-bg: #ea580c;
    --avatar-border: #9a3412;
  }

  :is(
    .arcade-avatar-badge,
    .arcade-card,
    .arcade-chess-square
  )[data-avatar-color="cyan"] {
    --avatar-bg: #0891b2;
    --avatar-border: #155e75;
  }

  :is(
    .arcade-avatar-badge,
    .arcade-card,
    .arcade-chess-square
  )[data-avatar-color="pink"] {
    --avatar-bg: #db2777;
    --avatar-border: #9d174d;
  }

  :is(
    .arcade-avatar-badge,
    .arcade-card,
    .arcade-chess-square
  )[data-avatar-color="slate"] {
    --avatar-bg: #475569;
    --avatar-border: #334155;
  }

  :is(
    .arcade-avatar-badge,
    .arcade-card,
    .arcade-chess-square
  )[data-avatar-color="brown"] {
    --avatar-bg: #92400e;
    --avatar-border: #78350f;
  }

  :is(
    .arcade-avatar-badge,
    .arcade-card,
    .arcade-chess-square
  )[data-avatar-color="silver"] {
    --avatar-bg: #94a3b8;
    --avatar-border: #64748b;
  }

  :is(
    .arcade-avatar-badge,
    .arcade-card,
    .arcade-chess-square
  )[data-avatar-color="gold"] {
    --avatar-bg: #d97706;
    --avatar-border: #92400e;
  }

  .arcade-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .arcade-action {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .arcade-action small {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.25;
  }

  .arcade-game-empty {
    display: grid;
    align-content: start;
    gap: 6px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    padding: 14px;
  }

  .arcade-game-empty.is-starting {
    justify-items: center;
    align-content: center;
    min-height: 260px;
    gap: 14px;
    border-color: var(--border-selected);
    background: var(--surface-selected);
    color: var(--text-selected);
    text-align: center;
  }

  .arcade-game-empty h2,
  .arcade-game-empty p {
    margin: 0;
  }

  .arcade-game-empty p {
    color: var(--text-muted);
  }

  .arcade-start-loader {
    display: grid;
    justify-items: center;
    gap: 10px;
  }

  .arcade-start-loader > span:last-child {
    color: var(--text-muted);
    margin: 0;
  }

  .arcade-start-loader-ring {
    display: grid;
    place-items: center;
    width: 96px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      radial-gradient(
        circle at center,
        var(--surface-selected) 0 56%,
        transparent 57%
      ),
      conic-gradient(
      var(--border-selected) 0deg,
      var(--surface-control) 0
    );
    animation: arcade-start-loader-progress 2s linear both;
  }

  .arcade-start-loader-ring span {
    color: var(--text-strong);
    font-size: 1.25rem;
    font-weight: 700;
  }

  @keyframes arcade-start-loader-progress {
    to {
      background:
        radial-gradient(
          circle at center,
          var(--surface-selected) 0 56%,
          transparent 57%
        ),
        conic-gradient(
        var(--border-selected) 360deg,
        var(--surface-control) 0
      );
    }
  }

  .arcade-invite {
    display: grid;
    align-content: start;
    gap: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
    padding: 14px;
  }

  .arcade-invite h2 {
    margin: 0;
  }

  .arcade-invite-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .arcade-invite-copy input,
  .arcade-invite-copy button {
    min-height: 34px;
    border: 1px solid var(--border);
    background: var(--surface-control);
    color: var(--text);
    padding: 6px 10px;
  }

  .arcade-invite-copy input {
    min-width: 0;
  }

  .arcade-invite-copy button {
    width: 38px;
    cursor: pointer;
  }

  .arcade-invite-copy button:hover {
    background: var(--surface-control-hover);
  }

  .arcade-game-host,
  .arcade-match {
    display: grid;
    min-width: 0;
  }

  .arcade-match-main {
    align-content: start;
  }

  .arcade-game-main,
  .arcade-game-panel {
    min-width: 0;
  }

  .arcade-chess {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
  }

  .arcade-chess-settings-button[hidden] {
    display: none;
  }

  .status-bar.arcade-chess-ready {
    border-color: var(--semantic-success-border);
    background: var(--semantic-success-bg);
    color: var(--semantic-success-text);
  }

  .status-bar.arcade-chess-ready .status-message :is(strong, span),
  .status-bar.arcade-chess-ready .status-button {
    color: var(--semantic-success-text);
  }

  .arcade-chess-board-scroll {
    max-width: 100%;
    overflow: auto;
  }

  .arcade-chess-board-frame {
    position: relative;
    width: max-content;
  }

  .arcade-chess-board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--chess-columns, 8), 54px);
    grid-auto-rows: 54px;
    width: max-content;
    border: 1px solid var(--border);
    box-sizing: content-box;
  }

  .arcade-chess-board.is-ready-flash::after {
    position: absolute;
    z-index: 10;
    inset: 0;
    content: "";
    background: var(--semantic-success-border);
    pointer-events: none;
    animation: arcade-chess-ready-flash 500ms ease-out both;
  }

  @keyframes arcade-chess-ready-flash {
    0% {
      opacity: 0;
    }

    28% {
      opacity: 0.42;
    }

    100% {
      opacity: 0;
    }
  }

  .arcade-chess-square {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: var(--surface-raised);
    color: var(--text-strong);
    cursor: pointer;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.25rem;
    line-height: 1;
    padding: 0;
    isolation: isolate;
  }

  .arcade-chess-square[data-tone="dark"] {
    background: color-mix(in srgb, var(--surface-muted) 74%, var(--border));
  }

  .arcade-chess-square:focus-visible {
    z-index: 5;
    outline: 3px solid var(--border-selected);
    outline-offset: -3px;
  }

  .arcade-chess-square:disabled {
    cursor: default;
    opacity: 1;
  }

  .arcade-chess-square:is([data-last-from="true"], [data-last-to="true"]) {
    background: color-mix(
      in srgb,
      var(--semantic-warning-bg) 60%,
      var(--surface-raised)
    );
  }

  .arcade-chess-square[data-selected="true"] {
    z-index: 3;
    box-shadow: inset 0 0 0 4px var(--border-selected);
  }

  .arcade-chess-square[data-intent="true"] {
    z-index: 2;
    outline: 3px solid var(--avatar-bg, var(--border-selected));
    outline-offset: -3px;
  }

  .arcade-chess-square:is(
    [data-move-target="true"],
    [data-capture-target="true"],
    [data-attack-target="true"]
  )::after {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    content: "";
    width: 26%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--border-selected);
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  .arcade-chess-square[data-capture-target="true"]::after {
    width: 72%;
    border: 5px solid var(--semantic-danger-border);
    background: transparent;
  }

  .arcade-chess-square[data-attack-target="true"]::after {
    top: auto;
    right: 10%;
    bottom: 10%;
    left: auto;
    width: 18%;
    background: var(--semantic-warning-border);
    transform: none;
  }

  .arcade-chess-square[data-threatened="true"] {
    animation: arcade-chess-danger 900ms ease-in-out infinite alternate;
  }

  @keyframes arcade-chess-danger {
    to {
      background: var(--semantic-danger-bg);
      color: var(--semantic-danger-text);
      box-shadow: inset 0 0 0 4px var(--semantic-danger-border);
    }
  }

  .arcade-chess-game-over {
    position: absolute;
    z-index: 12;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 6px;
    background: rgb(0 0 0 / 48%);
    color: white;
    padding: 20px;
    text-align: center;
    pointer-events: none;
  }

  .arcade-chess-game-over[hidden] {
    display: none;
  }

  .arcade-chess-game-over strong {
    font-size: 1.5rem;
  }

  .arcade-chess-sidebar {
    display: grid;
    gap: 8px;
  }

  .arcade-chess-section {
    display: grid;
    gap: 7px;
    border-top: 1px solid var(--border-subtle);
    padding-top: 10px;
  }

  .arcade-chess-section h2 {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
  }

  .arcade-chess-player {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }

  .arcade-chess-player > div {
    display: grid;
    gap: 4px;
  }

  .arcade-chess-bot {
    display: grid;
    gap: 4px;
  }

  .arcade-chess-help {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.4;
  }

  .arcade-chess-meter {
    position: relative;
    height: 9px;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-control);
  }

  .arcade-chess-meter-charge,
  .arcade-chess-meter-banked {
    position: absolute;
    top: 0;
    bottom: 0;
  }

  .arcade-chess-meter-charge {
    left: 0;
    width: var(--meter-charge, 0%);
    background: var(--border-selected);
  }

  .arcade-chess-meter-banked {
    left: var(--meter-ready-start, 0%);
    width: var(--meter-banked, 0%);
    background: var(--semantic-success-border);
  }

  .arcade-chess-meter-threshold {
    position: absolute;
    z-index: 1;
    top: -1px;
    bottom: -1px;
    left: var(--meter-ready-start, 0%);
    width: 2px;
    background: var(--text-strong);
    transform: translateX(-1px);
  }

  .arcade-chess-meter.is-error {
    animation: arcade-chess-meter-error 600ms ease-out;
  }

  @keyframes arcade-chess-meter-error {
    0%,
    38%,
    72%,
    100% {
      border-color: var(--border);
      background: var(--surface-control);
    }

    18%,
    56% {
      border-color: var(--semantic-danger-border);
      background: var(--semantic-danger-bg);
      box-shadow: 0 0 0 2px var(--semantic-danger-border);
    }
  }

  .arcade-chess-lower {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.6fr);
    gap: 20px;
    width: min(100%, 760px);
  }

  .arcade-chess-history {
    color: var(--text-secondary);
  }

  .arcade-chess-history ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 20px;
    margin: 0;
    padding-left: 22px;
  }

  .arcade-chess-captured-pieces {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    color: var(--text-strong);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.5rem;
  }

  .arcade-match-panel {
    min-width: 0;
  }

  .arcade-match-side {
    display: grid;
    gap: 8px;
  }

  .arcade-match {
    align-content: start;
    gap: 12px;
  }

  .arcade-match-score {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px;
    min-width: 76px;
  }

  .arcade-match-score span {
    color: var(--text-muted);
    font-size: 0.8rem;
  }

  .arcade-match-score strong {
    color: var(--text-strong);
    font-size: 1.12rem;
  }

  .arcade-match-status {
    min-width: 0;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding-top: 8px;
  }

  .arcade-match-help {
    display: grid;
    gap: 6px;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding-top: 8px;
  }

  .arcade-match-help ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 16px;
  }

  .arcade-match-help li {
    line-height: 1.3;
  }

  .arcade-match-board {
    display: grid;
    grid-template-columns: repeat(8, minmax(46px, 1fr));
    gap: 8px;
    width: min(820px, 100%);
  }

  .arcade-card {
    aspect-ratio: 3 / 4;
    display: grid;
    place-items: center;
    min-width: 0;
    border: 1px solid var(--border);
    background: var(--surface-control);
    color: var(--text);
    cursor: pointer;
    font-family:
      "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1.35rem;
    line-height: 1.05;
    padding: 0;
    text-align: center;
    white-space: pre-line;
  }

  .arcade-card[data-face-up="true"] {
    border-color: var(--border-selected);
    background: var(--surface-selected);
    color: var(--text-selected);
  }

  .arcade-card[data-selected="true"] {
    border-color: var(--avatar-border, var(--semantic-warning-border));
    background: color-mix(
      in srgb,
      var(--avatar-bg, var(--surface-selected)) 22%,
      var(--surface-raised)
    );
    outline: 3px solid var(--avatar-bg, var(--semantic-warning-border));
    outline-offset: 1px;
  }

  .arcade-card[data-selected-by-self="true"] {
    box-shadow: inset 0 0 0 2px
      color-mix(in srgb, var(--avatar-bg, var(--border-selected)) 36%, white);
  }

  .arcade-card[data-locked="true"] {
    border-color: var(--avatar-border, var(--semantic-danger-border, #dc2626));
    background: var(--semantic-danger-bg, #fee2e2);
    color: var(--semantic-danger-text, #7f1d1d);
    cursor: not-allowed;
    animation: arcade-card-lock 5s ease-out both;
  }

  .arcade-card[data-locked-by-self="true"] {
    outline: 2px solid var(--avatar-bg, var(--semantic-danger-border, #dc2626));
    outline-offset: 1px;
  }

  .arcade-card[data-empty="true"] {
    visibility: hidden;
    pointer-events: none;
  }

  @keyframes arcade-card-lock {
    0%,
    8% {
      background: var(--semantic-danger-bg, #fee2e2);
      color: var(--semantic-danger-text, #7f1d1d);
      filter: saturate(1.6) brightness(1.05);
      font-size: 1.35rem;
      line-height: 1.05;
      opacity: 1;
      transform: scale(1);
    }

    12% {
      background: var(--semantic-danger-bg, #fee2e2);
      color: var(--semantic-danger-text, #7f1d1d);
      filter: saturate(0.9);
      font-size: 1.35rem;
      line-height: 1.05;
      opacity: 0.72;
      transform: scale(0.98);
    }

    20%,
    28% {
      background: var(--semantic-danger-bg, #fee2e2);
      color: var(--semantic-danger-text, #7f1d1d);
      filter: saturate(1.7) brightness(1.08);
      font-size: 1.35rem;
      line-height: 1.05;
      opacity: 1;
      transform: scale(1);
    }

    34% {
      background: var(--semantic-danger-bg, #fee2e2);
      color: var(--semantic-danger-text, #7f1d1d);
      filter: saturate(0.85);
      font-size: 1.35rem;
      line-height: 1.05;
      opacity: 0.74;
      transform: scale(0.98);
    }

    40% {
      background: var(--surface-control);
      color: transparent;
      filter: saturate(0.9);
      font-size: 0;
      line-height: 0;
      opacity: 0.92;
      transform: scale(0.98);
    }

    100% {
      background: var(--surface-control);
      color: transparent;
      filter: saturate(0.65);
      font-size: 0;
      line-height: 0;
      opacity: 0.55;
      transform: scale(0.98);
    }
  }

  @media (max-width: 760px) {
    .arcade-workspace,
    .arcade-room-shell,
    .arcade-game-workspace {
      grid-template-columns: 1fr;
      overflow: auto;
    }

    .arcade-create-form,
    .arcade-controls,
    .arcade-settings-grid {
      grid-template-columns: 1fr;
    }

    .arcade-match-board {
      grid-template-columns: repeat(4, minmax(44px, 1fr));
    }

    .arcade-chess-lower {
      grid-template-columns: 1fr;
    }

    .arcade-chess-history ol {
      grid-template-columns: 1fr;
    }
  }
}