:root {
  color-scheme: dark;
  --ink: #f4e7d3;
  --muted: #b9a68d;
  --paper: #171310;
  --paper-2: #221b16;
  --paper-3: #2d231b;
  --line: #584733;
  --accent: #d8a25a;
  --accent-2: #a96034;
  --danger: #c74b42;
  --law: #6f9fc8;
  --good: #77b968;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.38);
  font-family: Inter, "Segoe UI", "Avenir Next", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 20% 0%, rgba(216, 162, 90, 0.12), transparent 34%),
    radial-gradient(circle at 90% 90%, rgba(111, 159, 200, 0.08), transparent 35%),
    linear-gradient(155deg, #12100e, #1d1712 52%, #12100e);
  color: var(--ink);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

button {
  font: inherit;
  cursor: pointer;
  border: 0;
}

.app {
  width: min(1380px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 18px 0 26px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.brand img {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.45));
}

.brand-text {
  min-width: 0;
}

.brand h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 3.2vw, 41px);
  line-height: .95;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.brand p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.top-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn {
  min-height: 41px;
  padding: 9px 17px;
  border-radius: 5px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: linear-gradient(180deg, #3a2e23, #241c16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .12s ease, border-color .12s ease, filter .12s ease;
}

.btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--accent); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn.primary {
  color: #191108;
  border-color: #e5b471;
  background: linear-gradient(180deg, #efc178, #c98140);
  font-weight: 750;
}
.btn.ghost { background: transparent; }
.btn.danger { border-color: #813b34; color: #f1b7b1; }
.btn.small { min-height: 34px; padding: 6px 10px; font-size: 13px; }

.screen {
  display: none;
  animation: fade .22s ease;
}
.screen.active { display: block; }
main {
  flex: 1;
  min-height: 0;
  display: flex;
}
#gameScreen.active {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(42,33,25,.96), rgba(22,18,14,.98));
  box-shadow: var(--shadow);
}

.lobby {
  width: min(920px, 100%);
  margin: 7vh auto;
  padding: 38px;
  text-align: center;
}
.lobby h2 {
  font-family: Georgia, serif;
  font-size: clamp(27px, 4vw, 45px);
  margin: 0 0 12px;
  letter-spacing: .05em;
}
.lobby p { color: var(--muted); line-height: 1.65; margin: 0 auto 26px; max-width: 660px; }
.settings {
  display: flex;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.setting {
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  background: #1b1611;
}
.setting[aria-pressed="true"] {
  color: #191108;
  background: linear-gradient(180deg, #e7bb76, #bf7e3e);
  border-color: #e7bb76;
  font-weight: 700;
}
.rules-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 32px;
  text-align: left;
}
.lobby-rank {
  margin: -10px auto 18px;
  color: var(--accent);
  font-size: 14px;
  letter-spacing: .06em;
}
.lobby-rank span { color: var(--muted); }
.rule {
  padding: 14px;
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,.025);
}
.rule strong { display: block; margin-bottom: 5px; }
.rule span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.rule.trust { border-left-color: #8ec07c; }
.rule.trust strong { color: #cfe7c4; }
.taunt-bubble .taunt-label {
  display: block;
  color: #e5bb76;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 2px;
  text-transform: uppercase;
}
.trust-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: grid;
  font-size: 12px;
  gap: 4px;
  line-height: 1.45;
  margin: 0 auto;
  max-width: min(96vw, 1380px);
  padding: 12px 0 18px;
}
.trust-footer strong { color: var(--text); }
.trust-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 4px;
}
.trust-footer a { color: var(--accent); }

.game-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.side {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
}
.status-panel, .players-panel, .log-panel { padding: 14px; }
.panel h3 {
  margin: 0 0 11px;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.status-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(184,155,116,.22);
  font-size: 13px;
}
.status-line:last-child { border: 0; }
.status-line span { color: var(--muted); }
.status-line strong { text-align: right; }

.player-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid rgba(88,71,51,.7);
  border-radius: 5px;
  background: rgba(255,255,255,.025);
}
.player-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(216,162,90,.28); }
.player-card.outlaw .role { color: #efb377; }
.player-card.lawman .role { color: var(--law); }
.player-card .who { font-weight: 700; }
.player-card .role { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.player-card .count { font-size: 23px; font-weight: 800; align-self: center; }
.player-card .warning { grid-column: 1 / -1; color: #efb377; font-size: 12px; }

.log {
  max-height: 260px;
  overflow-y: auto;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}
.log p { margin: 0 0 7px; }
.log b { color: var(--ink); }

.table-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(120px, 1fr) auto;
  overflow: hidden;
}
.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.14);
}
.phase-title {
  font-family: Georgia, serif;
  font-size: 21px;
  letter-spacing: .045em;
}
.phase-note { color: var(--muted); font-size: 13px; text-align: right; }

.table-area {
  position: relative;
  display: grid;
  grid-template-columns: minmax(158px, 225px) minmax(0, 1fr) minmax(158px, 225px);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "left center right"
    "you you you";
  gap: 6px 16px;
  padding: 16px 18px;
  min-height: 0;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at center, rgba(216,162,90,.08), transparent 68%),
    repeating-linear-gradient(43deg, rgba(255,255,255,.012) 0 2px, transparent 2px 8px);
}

.seat { position: relative; min-width: 0; }
.seat-left { grid-area: left; align-self: center; }
.seat-right { grid-area: right; align-self: center; }
.seat-you {
  grid-area: you;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 18px;
  width: 100%;
}
.seat-id { display: grid; justify-items: center; gap: 14px; }
.seat-you .seat-id { justify-items: start; }

.avatar {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: linear-gradient(160deg, #3a2e23, #241c16);
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.avatar-mark {
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--ink);
}
.avatar-mark.compact { font-size: 11.5px; letter-spacing: .09em; }
.seat.outlaw .avatar { border-color: #a96034; }
.seat.outlaw .avatar-mark { color: #efb377; }
.seat.lawman .avatar { border-color: #40678a; }
.seat.lawman .avatar-mark { color: #a9cbe8; }

.turn-arrow {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 9px solid var(--accent);
  filter: drop-shadow(0 0 7px rgba(232,183,110,.85));
  opacity: 0;
  pointer-events: none;
}
.seat.active .turn-arrow { opacity: 1; animation: arrowBounce 1.1s ease-in-out infinite; }
.seat.active .avatar {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(216,162,90,.22), 0 0 24px rgba(216,162,90,.5);
}
.seat.active .seat-name { color: var(--accent); }
@keyframes arrowBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 4px); }
}

.seat-meta { text-align: center; min-width: 0; }
.seat-you .seat-meta { text-align: left; }
.seat-name { font-size: 13px; font-weight: 750; }
.seat-role {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1px;
}
.seat.outlaw .seat-role { color: #efb377; }
.seat.lawman .seat-role { color: var(--law); }
.seat-count { font-size: 20px; font-weight: 800; line-height: 1; margin-top: 3px; }
.seat-count.low { color: #efb377; animation: countPulse 1.4s ease-in-out infinite; }
@keyframes countPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.seat-zone {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 96px;
  width: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 7px;
  transition: background .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.seat-you .seat-zone { margin-top: 0; }
.seat-zone.standing {
  background: rgba(216,162,90,.07);
  box-shadow: inset 0 0 0 1px rgba(216,162,90,.35);
}
.seat-zone.stale { opacity: .55; }
.seat-zone.pending { background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(184,155,116,.2); }
.zone-chip {
  position: absolute;
  top: -9px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: #241c15;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}
.zone-play { display: grid; justify-items: center; }
.zone-move {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}

.bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 7px 15px;
  border-radius: 10px;
  border: 1px solid #6a5741;
  background: rgba(22,17,13,.92);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  color: #c9b8a2;
  animation: pop .18s ease;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: rgba(22,17,13,.95);
}
.bubble .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: dotPulse 1s ease-in-out infinite;
}
.bubble .dot:nth-child(2) { animation-delay: .15s; }
.bubble .dot:nth-child(3) { animation-delay: .3s; }
@keyframes dotPulse {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}
@keyframes pop {
  from { transform: scale(.72); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.table-center { grid-area: center; display: grid; place-items: center; min-height: 120px; padding: 0 6px; }
.center-plaque {
  display: grid;
  gap: 5px;
  justify-items: center;
  text-align: center;
  padding: 12px 22px;
  border: 1px dashed rgba(216,162,90,.35);
  border-radius: 7px;
  background: rgba(18,14,11,.38);
}
.plaque-label { color: var(--accent); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.plaque-value { font-family: Georgia, serif; font-size: 17px; color: var(--ink); }

.cards {
  --card-width: 69px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.card {
  position: relative;
  width: var(--card-width);
  height: 99px;
  border-radius: 5px;
  border: 1px solid #d7c8b3;
  background: linear-gradient(160deg, #fffdf8, #eadfd0);
  color: #191512;
  box-shadow: 0 5px 12px rgba(0,0,0,.28);
  transition: transform .12s ease, box-shadow .12s ease, outline-color .12s ease;
  overflow: hidden;
}
.card.red { color: #a92f26; }
.card.joker { background: linear-gradient(160deg, #2b241d, #4d3b2a); color: #f3dfc1; border-color: #a98b62; }
.card .corner {
  position: absolute;
  left: 7px;
  top: 5px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 31px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
.card .pip {
  position: absolute;
  right: 7px;
  bottom: 6px;
  font-size: 31px;
  opacity: .82;
}
.card.back {
  width: 48px;
  height: 70px;
  border-color: #7e6446;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent),
    repeating-linear-gradient(45deg, #573b28 0 5px, #6d4b31 5px 10px);
  box-shadow: 0 4px 9px rgba(0,0,0,.3);
}
.card.back::after {
  content: "★";
  color: rgba(244,231,211,.65);
  font-size: 20px;
  display: grid;
  place-items: center;
  height: 100%;
}

.cards.mini { --card-width: 44px; gap: 4px; }
.cards.mini .card { width: 44px; height: 63px; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.cards.mini .card .corner { left: 4px; top: 3px; width: 16px; height: 20px; font-size: 10.5px; }
.cards.mini .card .pip { right: 3px; bottom: 2px; font-size: 16px; }

.hand-area {
  padding: 13px 16px 16px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,.15);
}
.hand-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  margin-bottom: 9px;
}
.hand-title { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.message {
  min-height: 22px;
  text-align: right;
  color: var(--muted);
  font-size: 13px;
}
.message.error { color: #f0a49b; }
.message.help { color: #e5bb76; }
.hand {
  min-height: 108px;
  justify-content: flex-start;
}
.hand .card { cursor: pointer; }
.hand .card:hover { transform: translateY(-4px); }
.hand .card.selected {
  transform: translateY(-13px);
  outline: 3px solid var(--accent);
  box-shadow: 0 12px 20px rgba(0,0,0,.4);
}
.hand .card.dim { opacity: .48; }
.controls {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.bid-panel, .stash-panel, .result-panel {
  position: absolute;
  inset: 18px;
  display: grid;
  place-items: center;
  text-align: center;
  background: rgba(12,10,8,.83);
  backdrop-filter: blur(3px);
}
.bid-box, .stash-box, .result-box {
  width: min(610px, 94%);
  padding: 26px;
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: #1c1712;
  box-shadow: var(--shadow);
}
.bid-box h2, .stash-box h2, .result-box h2 {
  font-family: Georgia, serif;
  font-size: 30px;
  margin: 0 0 10px;
}
.bid-box p, .stash-box p, .result-box p { color: var(--muted); line-height: 1.6; margin: 0 0 18px; }
.bid-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.bid-status {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 18px 0;
  font-size: 13px;
}
.bid-status div { padding: 9px; border: 1px dashed var(--line); color: var(--muted); }
.bid-status b { display: block; color: var(--ink); margin-bottom: 3px; }
.stash-cards { margin: 8px 0 20px; }
.result-role { font-family: Georgia, serif; font-size: 34px; color: var(--accent); margin-bottom: 8px; }
.score-change { font-size: 20px; font-weight: 800; margin-bottom: 18px; }
.positive { color: var(--good); }
.negative { color: #f0968d; }

.coach-report {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px dashed rgba(216,162,90,.4);
  border-radius: 7px;
  background: rgba(216,162,90,.05);
  text-align: left;
}
.coach-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
}
.coach-tag {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 10px;
  letter-spacing: .12em;
}
.coach-alignment { color: var(--ink); font-size: 14px; margin-bottom: 8px; }
.coach-points {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.coach-teaser {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed rgba(184,155,116,.25);
  color: #9c8a73;
  font-size: 10.5px;
  letter-spacing: .18em;
}

/* Interactive AI characters: comic-style taunt bubbles (Phase1 §6) */
.taunt-bubble {
  position: absolute;
  z-index: 40;
  top: -10px;
  left: 50%;
  width: min(230px, 64vw);
  padding: 9px 12px;
  border: 1.5px solid var(--accent);
  border-radius: 11px;
  background: rgba(24,19,14,.96);
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
  animation: tauntIn .3s cubic-bezier(.2, 1.5, .4, 1);
  pointer-events: none;
}
.taunt-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--accent);
  border-bottom: 0;
}
.taunt-bubble.fade { opacity: 0; transition: opacity .38s ease; }
@keyframes tauntIn {
  from { opacity: 0; transform: translateX(-50%) scale(.55); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}
.seat.p-toxic .avatar { border-color: #b0533f; }
.seat.p-boss .avatar { border-color: #7d8a5a; }
.seat.p-doomer .avatar { border-color: #5f6f8a; }

.overlay-hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 950px) {
  .game-grid { grid-template-columns: 1fr; }
  .side { grid-template-columns: 1fr 1fr; }
  .log-panel { grid-column: 1 / -1; }
  .table-panel { min-height: 0; }
  .table-area { min-height: 0; }
  .table-area {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "left right"
      "center center"
      "you you";
  }
  .seat-you { grid-template-columns: 1fr; justify-items: center; }
  .seat-you .seat-id { justify-items: center; }
  .seat-you .seat-meta { text-align: center; }
  .rules-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .app { width: min(100vw - 14px, 1380px); }
  .topbar { align-items: flex-start; flex-direction: column; }
  .side { grid-template-columns: 1fr; }
  .lobby { padding: 24px 15px; }
  .table-area { padding: 10px; }
  .bid-panel, .stash-panel, .result-panel { inset: 7px; }
  .cards { --card-width: 49px; }
  .card { height: 72px; }
  .card .corner { width: 18px; height: 22px; font-size: 11px; }
  .card .pip { font-size: 20px; }
  .avatar { width: 46px; height: 46px; }
  .seat-zone { min-height: 84px; }
  .cards.mini { --card-width: 36px; gap: 3px; }
  .cards.mini .card { width: 36px; height: 52px; }
  .cards.mini .card .corner { font-size: 9px; }
  .cards.mini .card .pip { font-size: 12px; }
  .hand .card.selected { transform: translateY(-8px); }
  .hand { min-height: 80px; }
  .phase-title { font-size: 17px; }
  .phase-note { display: none; }
}

/* True fullscreen layout: fill the screen and scale the cards up. */
:fullscreen body, :-webkit-full-screen body { overflow: hidden; }
:fullscreen .app, :-webkit-full-screen .app {
  width: calc(100vw - 24px);
  height: 100dvh;
  padding: 10px 0 12px;
}
:fullscreen .game-grid, :-webkit-full-screen .game-grid { grid-template-columns: 290px minmax(0, 1fr); }
:fullscreen .cards, :-webkit-full-screen .cards { --card-width: clamp(64px, min(4.6vw, 8dvh), 92px); }
:fullscreen .card, :-webkit-full-screen .card { height: calc(var(--card-width) * 1.435); }
:fullscreen .hand, :-webkit-full-screen .hand { min-height: calc(var(--card-width) * 1.435 + 22px); }
:fullscreen .card .corner, :-webkit-full-screen .card .corner {
  width: calc(var(--card-width) * .36);
  height: calc(var(--card-width) * .45);
  font-size: calc(var(--card-width) * .22);
}
:fullscreen .card .pip, :-webkit-full-screen .card .pip { font-size: calc(var(--card-width) * .45); }
:fullscreen .cards.mini, :-webkit-full-screen .cards.mini { --card-width: clamp(40px, min(2.8vw, 5.2dvh), 58px); gap: 5px; }
:fullscreen .cards.mini .card, :-webkit-full-screen .cards.mini .card {
  width: var(--card-width);
  height: calc(var(--card-width) * 1.43);
}