/* Chatai only. The page, panels and buttons come from kit/midnight.css. */

/* Start screen */
.menu { gap: calc(24 * var(--u)); }
.hero { flex: 1 1 0; min-height: 0; width: 100%; max-height: calc(560 * var(--u)); }
.weave-a, .weave-b { fill: none; stroke-width: 11; stroke-linecap: round; }
.weave-a { stroke: var(--wave-a); opacity: 0.5; }
.weave-b { stroke: var(--wave-b); opacity: 0.55; }
.lattice { fill: none; stroke: rgba(var(--amber-rgb), 0.55); stroke-width: 1.5; }
.hero-back { fill: var(--bg-1); stroke: var(--edge-bright); stroke-width: 3; }
.hero-face { fill: var(--card-ivory); stroke: rgba(var(--amber-rgb), 0.9); stroke-width: 3; }
.hero-rank { fill: var(--card-black); font-size: 44px; font-weight: 600; }
.hero-suit { fill: var(--card-black); }

.option { flex: none; width: 100%; flex-direction: column; gap: calc(16 * var(--u)); padding: calc(16 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); }
.option h2 { margin: 0; font-size: max(calc(40 * var(--u)), 15px); font-weight: 400; }
.choices { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(20 * var(--u)); }
.rule-note { margin: 0; font-size: max(calc(32 * var(--u)), 12px); color: var(--ink-soft); }
.pick.on { color: var(--go-ink); font-weight: 600; border-color: var(--amber); background: linear-gradient(180deg, rgba(var(--amber-rgb), 0.38), rgba(var(--amber-rgb), 0.2)); box-shadow: 0 0 calc(16 * var(--u)) rgba(var(--amber-rgb), 0.5), inset 0 1px 0 var(--sheen); } /* chosen at a glance (his note on menus, 8 Nov) */
.play { flex: none; width: 100%; height: max(calc(112 * var(--u)), 52px); font-size: max(calc(58 * var(--u)), 22px); }
.menu .wave { margin: auto 0 calc(10 * var(--u)); }

/* The mat */
.stats.three { grid-template-columns: repeat(3, 1fr); gap: calc(20 * var(--u)); }
.stats .plate.on { border-color: var(--amber); }
.mat {
  flex: 1 1 calc(960 * var(--u));
  min-height: 0;
  max-height: calc(1080 * var(--u));
  width: 100%;
  grid-area: board;
  display: grid;
  place-items: center;
  padding: calc(18 * var(--u));
  border: max(1px, calc(2 * var(--u))) solid var(--edge);
  border-radius: calc(20 * var(--u));
  background:
    repeating-linear-gradient(45deg, var(--cell-edge) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, var(--cell-edge) 0 1px, transparent 1px 7px),
    var(--cell);
  box-shadow: 0 0 calc(14 * var(--u)) var(--glow);
}
.cards { display: grid; justify-content: center; align-content: center; }

.card {
  position: relative;
  padding: 0;
  background: none;
  border: 0;
  border-radius: calc(var(--card-w) * 0.1);
  cursor: pointer;
  perspective: 700px;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.card::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--cell-edge); border-radius: inherit; background: var(--cell); }
.card:disabled { cursor: default; }
.flip { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform 0.28s ease; }
.card.up .flip { transform: rotateY(180deg); }
.card.taken .flip { visibility: hidden; }
.side { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: calc(var(--card-w) * 0.1); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.back {
  border: max(1px, calc(var(--card-w) * 0.015)) solid rgba(var(--amber-rgb), 0.75);
  background:
    repeating-linear-gradient(45deg, rgba(var(--amber-rgb), 0.5) 0 1px, transparent 1px calc(var(--card-w) * 0.13)),
    repeating-linear-gradient(-45deg, rgba(var(--amber-rgb), 0.5) 0 1px, transparent 1px calc(var(--card-w) * 0.13)),
    var(--bg-1);
}
.card:hover:not(:disabled):not(.up) .back { filter: brightness(var(--hover)); }
.front {
  transform: rotateY(180deg);
  border: max(1px, calc(var(--card-w) * 0.02)) solid var(--amber);
  background: linear-gradient(170deg, var(--card-ivory), var(--card-ivory-2));
  color: var(--card-black);
  box-shadow: 0 0 calc(var(--card-w) * 0.14) rgba(var(--amber-rgb), 0.75);
}
.front.red { color: var(--card-red); }
.card.up { z-index: 1; }
.ix { position: absolute; left: 7%; top: 3%; width: 34%; display: flex; flex-direction: column; align-items: center; font-size: calc(var(--card-w) * 0.3); line-height: 1; font-weight: 600; }
.ix svg { display: block; width: 62%; margin-top: 3%; fill: currentColor; }
.pip { position: absolute; right: 9%; bottom: 8%; width: 44%; fill: currentColor; }
.front.ace .pip { right: 24%; bottom: 20%; width: 54%; }
.face { position: absolute; right: -6%; bottom: 0; width: 90%; height: auto; display: block; }

.tray { flex: none; width: 100%; min-height: calc(78 * var(--u)); padding: calc(6 * var(--u)) calc(20 * var(--u)); font-size: max(calc(38 * var(--u)), 14px); line-height: 1.2; text-align: center; grid-area: tray; }

@media (prefers-reduced-motion: reduce) {
  .flip { transition: none; }
}
@media (min-aspect-ratio: 5/4) {
  .mat { width: var(--board); height: var(--board); max-height: none; }
  .screen.menu {
    display: flex;
    width: var(--panel);
    padding: calc(24 * var(--u)) 0;
    overflow-y: auto;
    row-gap: calc(20 * var(--u));
  }
  .menu .wave { display: none; }
}
@media (min-aspect-ratio: 5/4) and (max-height: 560px) {
  .hero { display: none; }
}