/* Table themes and deck choices are independent, including in the preview. */
:is(body, .appearance-preview)[data-theme="midnight"] {
  --ivory: #e9f5fc;
  --muted: #adcadc;
  --gold: #7be4e1;
  --line: #71acc847;
  --theme-page: radial-gradient(ellipse at 48% 22%, #18364b, #101e2f 53%, #0a111c);
  --theme-bar: #07101d80;
  --theme-panel: #112638;
  --theme-button: linear-gradient(#9beee6, #62c6ce);
  --theme-button-ink: #092d38;
  --theme-rail: linear-gradient(120deg, #47849c, #153349 37%, #315d79 70%, #101e32);
  --theme-felt: #123547;
}

:is(body, .appearance-preview)[data-theme="ivory"] {
  color-scheme: light;
  --ivory: #262e28;
  --muted: #49594d;
  --gold: #365d4a;
  --line: #66785f5c;
  --theme-page: radial-gradient(ellipse at 48% 22%, #fff9e9, #e5e1cf 67%, #dcd5bf);
  --theme-bar: #fff9eaad;
  --theme-panel: #faf6e7;
  --theme-button: linear-gradient(#477864, #315745);
  --theme-button-ink: #fff9ee;
  --theme-rail: linear-gradient(120deg, #bd9265, #74543b 37%, #b5885f 70%, #6c4e35);
  --theme-felt: #356155;
}

body:is([data-theme="midnight"], [data-theme="ivory"]) {
  background: var(--theme-page);
}

body:is([data-theme="midnight"], [data-theme="ivory"]) .topbar {
  background: var(--theme-bar);
}

body:is([data-theme="midnight"], [data-theme="ivory"]) :is(.instruments, .setting select, .online-invite input, .history-button) {
  background: var(--theme-panel);
  color: var(--ivory);
  border-color: var(--line);
}

body:is([data-theme="midnight"], [data-theme="ivory"]) .brass:not(.dialog-paper .brass) {
  background: var(--theme-button);
  color: var(--theme-button-ink);
  border-color: var(--gold);
  text-shadow: none;
}

body:is([data-theme="midnight"], [data-theme="ivory"]) .brass:not(.dialog-paper .brass):hover {
  filter: brightness(1.1);
}

body:is([data-theme="midnight"], [data-theme="ivory"]) :is(.tagline, .status-line p, footer, .instruments small) {
  color: var(--muted);
}

body:is([data-theme="midnight"], [data-theme="ivory"]) .player-scores .active {
  background: var(--theme-panel);
  border-color: var(--gold);
}

body:is([data-theme="midnight"], [data-theme="ivory"]) .side-notes :is(.small-note, .aside-footer) {
  color: var(--muted) !important;
}

body[data-theme="ivory"] .hero h1 {
  text-shadow: none;
}

body[data-theme="ivory"] :is(a, button, input, select):focus-visible {
  outline-color: #437b63;
}

body:is([data-theme="midnight"], [data-theme="ivory"]) .table-rail,
.appearance-preview:is([data-theme="midnight"], [data-theme="ivory"]) {
  background: var(--theme-rail);
  box-shadow: inset 0 1px 1px #fff4, inset 0 -2px 3px #0005, 0 10px 24px #0004;
}

body:is([data-theme="midnight"], [data-theme="ivory"]) .felt,
.appearance-preview:is([data-theme="midnight"], [data-theme="ivory"]) .felt {
  background: url('/assets/felt.svg'), var(--theme-felt);
}

body[data-theme]:not([data-theme="parlour"]) .appearance-preview[data-theme="parlour"] {
  background: repeating-linear-gradient(2deg, #ffffff04 0px, #0000000c 1px, #ffffff00 3px, #00000008 5px),
    linear-gradient(110deg, #6f4833, #3a241d 36%, #704a34 68%, #39261f);
}

body[data-theme]:not([data-theme="parlour"]) .appearance-preview[data-theme="parlour"] .felt {
  background: url('/assets/felt.svg'), #1c4737;
}

.back-wordmark, .modern-court {
  display: none;
}

[data-card-back="indigo"] .card-back {
  background:
    repeating-linear-gradient(135deg, transparent 0 5%, #91aeda70 5.2% 5.7%, transparent 6% 10%),
    repeating-linear-gradient(45deg, transparent 0 5%, #91aeda70 5.2% 5.7%, transparent 6% 10%),
    linear-gradient(145deg, #294d91, #141e47);
  border-color: #d7dfec;
  box-shadow: inset 0 0 0 1px #101733, inset 0 0 0 3px #819bd0;
}

[data-card-back="circuit"] .card-back {
  display: grid;
  place-items: center;
  border-color: #d8e8ec;
  background:
    repeating-linear-gradient(135deg, transparent 0 12%, #5dc3d819 12.3% 13%, transparent 13.3% 25%),
    radial-gradient(circle at 50% 50%, #153b53, #071525 76%);
  box-shadow: inset 0 0 0 1px #061524;
}

[data-card-back="circuit"] .card-back::before {
  position: absolute;
  content: '';
  inset: 7%;
  border: 1px solid #72d2df8c;
  border-radius: 7% 19%;
}

[data-card-back="circuit"] .back-wordmark {
  display: grid;
  place-items: center;
  width: 77%;
  aspect-ratio: 1;
  color: #e2fcff;
  background: #0b2031;
  border: 1px solid #68d6e1;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #0b2031, 0 0 0 3px #4a7eb7;
  font: 800 10cqw / 1 var(--sans);
  letter-spacing: .09em;
}

[data-card-back="burgundy-crest"] {
  --crest-edge: #a27457;
  --crest-stripe: #f3b49b25;
  --crest-center: #8d3549;
  --crest-shade: #4d192a;
  --crest-inset: #501d2b;
  --crest-frame: #e9ab82ad;
  --crest-ring: #e9b087;
  --crest-glow: #e29b7747;
}

:is([data-card-back="crest"], [data-card-back="burgundy-crest"]) .card-back {
  display: grid;
  place-items: center;
  border-color: var(--crest-edge, #304251);
  background:
    repeating-linear-gradient(135deg, var(--crest-stripe, #72d9e31b) 0 1px, transparent 1px 8px),
    radial-gradient(circle at 50% 40%, var(--crest-center, #1c343e), var(--crest-shade, #0b121c));
  box-shadow: inset 0 0 0 1px var(--crest-inset, #121d28);
}

:is([data-card-back="crest"], [data-card-back="burgundy-crest"]) .card-back::before {
  position: absolute;
  content: '';
  inset: 6%;
  border: 1px solid var(--crest-frame, #6bc9d49c);
  border-radius: 6% 17%;
}

:is([data-card-back="crest"], [data-card-back="burgundy-crest"]) .card-back::after {
  content: '';
  width: 83%;
  aspect-ratio: 556 / 570;
  border-radius: 50%;
  background: url('/assets/cojoro-mark.png') center / contain no-repeat;
  box-shadow: 0 0 0 1px var(--crest-ring, #64d0db), 0 0 8px var(--crest-glow, #53bec93b);
}

[data-card-set="modern"] .card-front {
  --court-ink: #174861;
  --court-accent: #32a6a9;
  background: linear-gradient(145deg, #fff 35%, #e8f1f3);
  color: #112737;
  border-color: #c6d6dc;
  box-shadow: none;
}

[data-card-set="modern"] .card-front.red {
  --court-ink: #8f3047;
  --court-accent: #d46560;
  color: #a32e45;
}

[data-card-set="modern"] .corner {
  font: 800 27cqw / .96 var(--sans);
  letter-spacing: -.05em;
}

[data-card-set="modern"] .card-front.ten .corner {
  font-size: 22cqw;
}

[data-card-set="modern"] .corner small {
  font-size: .65em;
}

[data-card-set="modern"] .pip-field {
  font-size: 21cqw;
}

[data-card-set="modern"] .card-front.ten .pip-field {
  font-size: 18cqw;
}

[data-card-set="modern"] .pips.ace {
  font-size: 62cqw;
}

[data-card-set="modern"] .period-court {
  display: none;
}

[data-card-set="modern"] .modern-court {
  display: grid;
  position: absolute;
  inset: 17% 26%;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--court-ink);
  border-radius: 8%;
  background:
    linear-gradient(146deg, transparent 47%, var(--court-accent) 48% 52%, transparent 53%),
    linear-gradient(146deg, #f5fbfc 50%, #dbe9ef 50%);
}

.royal-figure {
  position: absolute;
  width: 73%;
  height: 46%;
  top: 0;
  left: 0;
  display: grid;
  justify-items: center;
  align-content: center;
}

.royal-figure.inverted {
  inset: auto 0 0 auto;
  transform: rotate(180deg);
}

.royal-figure i {
  display: block;
  width: 57%;
  aspect-ratio: 1.45;
  background: var(--court-accent);
  clip-path: polygon(0 10%, 28% 46%, 50% 0, 72% 46%, 100% 10%, 89% 100%, 11% 100%);
}

.royal-figure b {
  display: block;
  width: 88%;
  height: 19cqw;
  background: var(--court-ink);
  clip-path: polygon(33% 0, 67% 0, 70% 45%, 100% 62%, 100% 100%, 0 100%, 0 62%, 30% 45%);
}

.modern-court[data-rank="Q"] .royal-figure i {
  clip-path: polygon(0 66%, 24% 45%, 50% 0, 76% 45%, 100% 66%, 86% 100%, 14% 100%);
}

.modern-court[data-rank="J"] .royal-figure i {
  clip-path: polygon(0 100%, 20% 46%, 85% 0, 100% 18%, 66% 100%);
}

.royal-seal {
  display: grid;
  place-items: center;
  z-index: 1;
  width: 58%;
  aspect-ratio: 1;
  background: #fff;
  color: var(--court-ink);
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 800 18cqw / 1 var(--serif);
}

.appearance-controls {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 9px 14px;
  align-items: center;
  margin-bottom: 18px;
}

.appearance-controls label {
  font-size: 12px;
  font-weight: 700;
}

.appearance-controls select {
  color-scheme: light;
  width: 100%;
  min-width: 0;
  padding: 7px;
  background: #fff8e9;
  color: #382e23;
  border: 1px solid #a9946b;
  border-radius: 4px;
  font-size: 12px;
}

.appearance-preview.table-rail {
  padding: 7px;
}

.appearance-samples.felt {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 13px;
}

.appearance-samples .card {
  display: block;
  box-shadow: 0 3px 4px #0005;
}

.appearance-samples .card-front {
  transform: none;
}

.appearance-samples .corner {
  font-size: 27cqw;
}

.appearance-samples .pip-field {
  font-size: 21cqw;
}

.appearance-samples .pips.ace {
  font-size: 61cqw;
}

.dialog-paper .appearance-note {
  margin: 12px 0 0;
  font-size: 11px;
}

@media (max-width: 480px) {
  .nav-actions {
    gap: 4px;
  }

  .nav-actions button {
    padding-inline: 5px;
  }

  .appearance-samples.felt {
    gap: 5px;
    padding: 9px;
  }
}