:root {
  color-scheme: dark;
  color: #ececec;
  background: #1f1f1f;
  --ink: #ececec;
  --muted: #797979;
  --line: #4c4c4c;
  --paper: #141414;
  --green: #ececec;
  --green-soft: #242424;
  --yellow: #f1cb62;
  --red: #c84d49;
  --blue: #242424;
  --shadow: 0 10px 28px rgba(0, 0, 0, .36);
}

html,
body,
#app,
.app-shell {
  min-height: 100%;
  background: #1f1f1f;
  color: #ececec;
}

body {
  color-scheme: dark;
}

@keyframes card-flip-no-lift {
  0% {
    opacity: .25;
    transform: rotateY(90deg);
  }

  to {
    opacity: 1;
    transform: rotateY(0);
  }
}

.reveal-card.reveal-enter {
  animation: card-flip-no-lift .48s ease both;
}

.reveal-card.settlement-invalid-card.scoring-card,
.reveal-card.settlement-invalid-card.scoring-lift {
  animation: none !important;
  transform: translateY(0) !important;
}

.reveal-card.settlement-invalid-card.reveal-enter {
  animation: card-flip-no-lift .48s ease both !important;
}

.topbar {
  background: #141414;
  border-color: #4c4c4c;
}

.brand,
.brand-mark,
h1,
h2,
h3,
.section-title h2,
.lobby-intro h1,
.room-header h1,
.auth-panel h1 {
  color: #ececec;
}

.brand span,
.brand-mark span {
  border: 1px solid #4c4c4c;
  background: #242424;
  color: #ececec;
}

.topbar-user,
.room-badge,
.room-badge b,
.form-hint,
.auth-footnote,
.page-foot,
.online-dot,
.muted,
.lobby-intro > p:not(.eyebrow),
.intro-rule,
.member-tile small,
.member-row small {
  color: #797979;
}

.room-badge b,
.member-tile b,
.member-row b,
.section-title h2,
.room-header h1,
.lobby-intro h1 em {
  color: #ececec;
}

h1 em,
.lobby-intro h1 em {
  color: #f1cb62;
}

.eyebrow,
.preview-kicker,
.hand-help,
.played-preview,
.selection-count {
  color: #797979;
}

.link-button,
.mini-button {
  color: #797979;
}

.link-button:hover,
.mini-button:hover {
  color: #ececec;
}

.auth-panel,
.join-panel,
.room-card,
.side-panel,
.score-strip,
.admin-section {
  border-color: #4c4c4c;
  background: #141414;
  box-shadow: var(--shadow);
}

.auth-tabs,
.member-tile,
.member-grid .member-tile,
.member-row,
.score-row,
.admin-row,
.tab-button.active,
.run-status,
.room-code-copy:hover,
.room-code-copy:focus-visible {
  border-color: #4c4c4c;
  background: #242424;
  color: #ececec;
}

.tab-button {
  color: #797979;
}

.tab-button.active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  color: #ececec;
}

input,
textarea {
  border-color: #4c4c4c;
  background: #242424;
  color: #ececec;
}

input::placeholder,
textarea::placeholder {
  color: #797979;
}

input:focus,
textarea:focus {
  border-color: #ececec;
  box-shadow: 0 0 0 3px rgba(236, 236, 236, .14);
}

.primary-button {
  border-color: #ececec;
  background: #ececec;
  color: #141414;
  box-shadow: 0 3px #4c4c4c;
}

.secondary-button,
.sort-action,
.mini-button,
.item-button,
.shop-skip-button {
  border-color: #4c4c4c;
  background: #242424;
  color: #ececec;
}

.primary-button:hover:not(:disabled),
.sort-action:hover:not(:disabled),
.item-button:hover:not(:disabled) {
  border-color: #ececec;
  background: #ececec;
  color: #141414;
}

.secondary-button:hover:not(:disabled),
.mini-button:hover:not(:disabled),
.shop-skip-button:hover:not(:disabled) {
  border-color: #ececec;
  background: #262626;
  color: #ececec;
}

.avatar {
  border-color: #4c4c4c;
  background: #242424;
  color: #ececec;
}

.avatar-1,
.avatar-2,
.avatar-3 {
  background: #242424;
}

.run-status.playing,
.run-status.tie,
.run-status.shop,
.run-status.settlement,
.run-status.complete {
  border-color: #4c4c4c;
  background: #242424;
  color: #ececec;
}

.online-dot:before {
  background: #797979;
}

.online-dot.online:before {
  background: #ececec;
}

.feedback.notice {
  border-color: #4c4c4c;
  background: #242424;
  color: #ececec;
}

.feedback.error {
  border-color: #c84d49;
  background: #382020;
  color: #ffd0c7;
}

.page-foot {
  border-color: #4c4c4c;
}

::selection {
  background: #4c4c4c;
  color: #ececec;
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline-color: #ececec;
}

@media (max-width: 600px) {
  .topbar {
    background: #141414;
  }
}