@layer views {
  .game {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast),
      transform var(--motion-fast);
  }

  .game:hover {
    border-color: var(--accent);
    box-shadow: var(--edge-lit), var(--glow-soft);
    transform: translateY(-2px);
  }

  .game__name {
    font-size: var(--text-lg);
    font-weight: 600;
  }

  .game__meta {
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .game__meter {
    margin-top: auto;
  }

  .game .btn {
    margin-top: var(--space-2);
  }

  .game__spent {
    color: var(--warn);
  }

  .run {
    align-items: baseline;
    font-size: var(--text-sm);
  }

  .run__status {
    min-width: 78px;
    font-weight: 600;
  }

  .run__status.validated { color: var(--success); }
  .run__status.flagged,
  .run__status.rejected { color: var(--danger); }

  .run__score {
    flex: 1 1 90px;
    color: var(--text-muted);
    font-family: var(--font-mono);
  }

  .run__when {
    color: var(--text-faint);
    font-size: var(--text-xs);
  }

  .ledger-frame {
    background-color: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--edge-well);
  }

  .ledger {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .ledger th {
    padding: var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background-color: var(--surface);
    background-image: var(--gloss-soft);
    border-bottom: 1px solid var(--border);
  }

  .ledger td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border);
    vertical-align: baseline;
  }

  .ledger tbody tr:nth-child(even) {
    background-color: var(--surface);
  }

  .ledger tbody tr:last-child td {
    border-bottom: 0;
  }

  .ledger td:last-child,
  .ledger th:last-child {
    text-align: right;
  }

  .ledger__amount {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
  }

  .ledger__amount--in { color: var(--success); }
  .ledger__amount--out { color: var(--text-muted); }

  .ledger__when {
    color: var(--text-faint);
    white-space: nowrap;
  }

  .member-hero {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    align-items: center;
  }

  .member-hero__frame {
    flex: none;
    width: calc(var(--art-hero) + var(--space-6));
    padding: var(--space-3);
    border-radius: var(--radius-lg);
  }

  .member-hero__body {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
  }

  .member-hero__name {
    font-size: var(--text-xl);
    font-weight: 300;
  }

  .member {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    text-align: center;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast),
      transform var(--motion-fast);
  }

  .member:hover {
    border-color: var(--border-strong);
    box-shadow: var(--edge-lit), var(--glow-soft);
    transform: translateY(-2px);
  }

  .member__frame {
    padding: var(--space-2) 0;
    border-radius: var(--radius-md);
  }

  .member--active {
    background-color: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: var(--edge-lit), var(--glow-accent);
  }

  .member__name {
    font-weight: 600;
  }

  .member__meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .member__foot {
    margin-top: auto;
    padding-top: var(--space-1);
  }

  .member--naming {
    border-color: var(--accent);
    box-shadow: var(--edge-lit), var(--glow-accent);
    transform: none;
  }

  .adopt-name {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: left;
  }

  .adopt-name__error {
    padding-left: var(--space-3);
    font-size: var(--text-xs);
    color: var(--danger);
  }

  .adopt-name__buttons {
    display: flex;
    gap: var(--space-2);
  }

  .adopt-name__buttons .btn {
    flex: 1;
    padding-inline: var(--space-3);
  }

  .item {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    width: 100%;
    padding: var(--space-3);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
  }

  .item:hover {
    border-color: var(--accent);
    box-shadow: var(--edge-lit), var(--glow-soft);
  }

  .item__name {
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .capacity {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }

  .capacity__row {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .search {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
    margin-bottom: var(--space-4);
  }

  .search .field {
    flex: 1 1 220px;
    margin-bottom: 0;
  }

  .result {
    width: 100%;
    padding: var(--space-3);
    font: inherit;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--motion-fast);
  }

  .result:hover {
    background-color: var(--surface-sunken);
  }

  .result__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .result__handle {
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .result__meta {
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .provenance {
    padding: 0;
    margin: var(--space-3) 0 0;
    list-style: none;
    border-left: 2px solid var(--border);
  }

  .provenance li {
    position: relative;
    padding: 0 0 var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }

  .provenance li::before {
    content: '';
    position: absolute;
    top: 8px;
    left: -6px;
    width: 10px;
    height: 10px;
    background-color: var(--accent);
    border-radius: 50%;
    box-shadow: var(--glow-accent);
  }

  .session__ua {
    flex: 1 1 220px;
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
  }

  .session__when {
    font-size: var(--text-xs);
    color: var(--text-faint);
  }

  .play-hud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
  }

  .play-hud > div {
    display: flex;
    flex: 1 1 120px;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    background-color: var(--surface);
    background-image: var(--gloss-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--edge-lit), var(--shadow-1);
  }

  .play-hud dt {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .play-hud dd {
    margin: 0;
    font: 600 var(--text-xl) / 1.2 var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
}