[hidden] {
      display: none !important;
    }

    .notts-active-layout {
      display: grid;
      gap: 1rem;
      align-items: start;
    }

    .notts-game-panel {
      border: 1px solid #d9d9d9;
      border-radius: 0.75rem;
      padding: 0.75rem;
      background: #fafafa;
    }

    .notts-game-meta {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
      gap: 0.75rem;
      margin-bottom: 0.75rem;
    }

    .notts-game-meta dl {
      margin: 0;
      display: grid;
      gap: 0.35rem;
    }

    .notts-game-meta dt {
      font-weight: 600;
    }

    .notts-game-meta dd {
      margin: 0;
      word-break: break-all;
      font-family: Consolas, monospace;
      font-size: 0.9rem;
    }

    .notts-turn-bar {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
      gap: 0.5rem;
      margin-bottom: 0.75rem;
    }

    .notts-turn-pill {
      border-radius: 999px;
      padding: 0.5rem 0.75rem;
      border: 1px solid #d9d9d9;
      background: #ffffff;
      font-size: 0.95rem;
    }

    #notts-game-message {
      min-height: 1.25rem;
      margin: 0 0 0.75rem;
    }

    #notts-game-message[data-tone="error"] {
      color: #b42318;
    }

    #notts-game-message[data-tone="ok"] {
      color: #027a48;
    }

    #notts-selection-status {
      margin: 0 0 0.75rem;
      color: #344054;
      min-height: 1.25rem;
    }

    .notts-board {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 0.35rem;
      width: 100%;
      max-width: 29.875rem;
    }

    .notts-cell {
      aspect-ratio: 1 / 1;
      border: 1px solid #d0d5dd;
      background: #ffffff;
      border-radius: 0.5rem;
      padding: 0.25rem;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 0.15rem;
      align-content: start;
      text-align: left;
      cursor: pointer;
      transition: background-color 120ms ease, border-color 120ms ease;
    }

    .notts-cell:hover:not(:disabled) {
      border-color: #667085;
      background: #f9fafb;
    }

    .notts-cell:disabled {
      cursor: default;
      opacity: 0.9;
    }

    .notts-cell.is-selected {
      border-color: #1570ef;
      background: #eff8ff;
    }

    .notts-cell.is-full {
      background: #fff7ed;
      border-color: #fdba74;
    }

    .notts-cell.is-readonly {
      background: #f8f9fb;
    }

    .notts-cell.is-collapse-choice {
      border-color: #175cd3;
      background: #eef4ff;
    }

    .notts-cell.is-join-player-1 {
      border-color: #1d4ed8;
      box-shadow: inset 0 0 0 1px #1d4ed8;
      background: #eaf2ff;
    }

    .notts-cell.is-join-player-2 {
      border-color: #b91c1c;
      box-shadow: inset 0 0 0 1px #b91c1c;
      background: #fff1f1;
    }

    .notts-cell-index {
      font-size: 0.65rem;
      color: #667085;
      line-height: 1;
    }

    .notts-cell-marks {
      display: grid;
      gap: 0.15rem;
      align-content: start;
      overflow: hidden;
    }

    .notts-cell-mark {
      display: block;
      font-size: 0.6rem;
      line-height: 1.15;
      border-radius: 0.25rem;
      padding: 0.1rem 0.2rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background: #f2f4f7;
      color: #101828;
    }

    .notts-cell-mark.player-1 {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .notts-cell-mark.player-2 {
      background: #fee2e2;
      color: #b91c1c;
    }

    .notts-cell-mark.is-cycle {
      border: 1px dashed #175cd3;
    }

    .notts-cell-mark.is-collapsed {
      border: 1px solid #027a48;
      background: #ecfdf3;
      color: #067647;
    }

    @media (max-width: 640px) {
      .notts-cell {
        padding: 0.15rem;
      }

      .notts-cell-mark {
        font-size: 0.52rem;
        padding: 0.05rem 0.15rem;
      }
    }