/* Lamplight: shared tokens + card faces.
   Everything on the table is either printed on the felt (gold ink) or an object sitting on it. */
:root {
  --baize-hi: #226a47;
  --baize: #185236;
  --baize-deep: #0b2d1e;
  --walnut: #5b351d;
  --walnut-dark: #26150b;
  --leather: #17110d;
  --brass: #c9a55a;
  --brass-hi: #ead39a;
  --ivory: #f5eedd;
  --stock: #f7f1e2;
  --ink: #f5eedd;                          /* text on felt */
  --ink-dim: rgba(245, 238, 221, .6);
  --gold-ink: rgba(218, 188, 118, .78);    /* printing on the felt */
  --gold-faint: rgba(218, 188, 118, .32);
  --gold: var(--brass);
  --card-red: #a8222b;
  --card-black: #1c1a1f;
  --paper-ink: #2a2320;
  --display: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
  --serif: 'IM Fell English', Georgia, serif;
  --num: 'DM Serif Display', Georgia, serif;
  --ui: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Seat markers: clay chip colours, muted so they sit on the felt quietly. */
  --seat-0: #3f6fa6;
  --seat-1: #c0633a;
  --seat-2: #8a5a9e;
  --seat-3: #4f8f5c;
  --seat-4: #b23a3e;
  --seat-5: #3f9a9a;
  --seat-6: #c9a24a;
  --seat-7: #d9d2c0;
  /* Veto inks */
  --oc-R: #e3233a;
  --oc-O: #f2a000;
  --oc-T: #00a39b;
  --oc-P: #9a3cd0;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--ui);
  color: var(--ink);
  background: radial-gradient(ellipse at center, var(--baize-hi) 0%, var(--baize) 55%, var(--baize-deep) 100%);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; }
:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- playing cards */
.card {
  --cw: 80px;
  position: relative;
  flex: none;
  width: var(--cw);
  height: calc(var(--cw) * 1.4);
  border-radius: calc(var(--cw) * .07);
  background:
    repeating-linear-gradient(0deg, rgba(120, 100, 60, .025) 0 1px, transparent 1px 3px),
    linear-gradient(165deg, #fbf7ec 0%, var(--stock) 55%, #ece3cd 100%);
  box-shadow:
    0 0 0 .5px rgba(40, 30, 10, .35),
    0 calc(var(--cw) * .012) calc(var(--cw) * .02) rgba(0, 0, 0, .25),
    0 calc(var(--cw) * .05) calc(var(--cw) * .12) rgba(0, 0, 0, .3);
  font-family: var(--serif);
  font-size: calc(var(--cw) * .19);
  color: var(--card-black);
  user-select: none;
  -webkit-user-select: none;
}
.card.red { color: var(--card-red); }

.card .corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .9;
  width: 1.1em;
}
.card .corner.tl { top: 5%; left: 4.5%; }
.card .corner.br { bottom: 5%; right: 4.5%; transform: rotate(180deg); }
.card .corner b { font-family: var(--num); font-weight: 400; font-size: 1.05em; letter-spacing: -.04em; }
.card .corner i { font-style: normal; font-size: .82em; margin-top: .05em; }

/* Number cards: real pip layouts */
.card .pips { position: absolute; inset: 19% 31%; }
.card .pips i {
  position: absolute;
  font-style: normal;
  line-height: 1;
  font-size: calc(var(--cw) * .17);
  transform: translate(-50%, -50%);
}
.card .pips i.down { transform: translate(-50%, -50%) rotate(180deg); }
.card.ten .pips i { font-size: calc(var(--cw) * .155); }
.card .ace-pip {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%);
  font-size: calc(var(--cw) * .5); line-height: 1;
}
.card.ace-s .ace-pip { font-size: calc(var(--cw) * .56); }
.card.ace-s::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: calc(var(--cw) * .01 + .4px) solid rgba(28, 26, 31, .5);
  box-shadow: inset 0 0 0 calc(var(--cw) * .025) var(--stock), inset 0 0 0 calc(var(--cw) * .035) rgba(201, 165, 90, .7);
}

/* Court cards: framed, double-ended, split on the diagonal like a printed deck */
.card .court {
  position: absolute;
  inset: 13% 20%;
  display: flex;
  flex-direction: column;
  border: calc(var(--cw) * .012 + .4px) solid #2b4674;
  border-radius: calc(var(--cw) * .025);
  box-shadow: inset 0 0 0 calc(var(--cw) * .02) var(--stock), inset 0 0 0 calc(var(--cw) * .032) rgba(201, 165, 90, .85);
  background:
    linear-gradient(to bottom right, transparent calc(50% - .6px), rgba(43, 70, 116, .55) 50%, transparent calc(50% + .6px)),
    linear-gradient(to bottom right, rgba(201, 165, 90, .2) 50%, rgba(43, 70, 116, .1) 50%);
  overflow: hidden;
}
.card .court .half { flex: 1; display: flex; align-items: center; justify-content: center; gap: .08em; }
.card .court .half.inv { transform: rotate(180deg); }
.card .court b { font-family: var(--num); font-weight: 400; font-size: 1.55em; line-height: 1; }
.card .court i { font-style: normal; font-size: 1.05em; line-height: 1; margin-top: .35em; }

/* Card back: navy with a gold lattice and a medallion */
.card.back {
  background:
    radial-gradient(circle at 50% 50%, var(--brass) 0 5.5%, transparent 6%),
    radial-gradient(circle at 50% 50%, transparent 0 13%, rgba(234, 211, 154, .8) 13.5% 15%, transparent 15.5%),
    radial-gradient(circle at 50% 50%, #1b2440 0 17%, transparent 17.5%),
    repeating-linear-gradient(45deg, rgba(201, 165, 90, .38) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(201, 165, 90, .38) 0 1px, transparent 1px 6px),
    #1d2742;
  border: calc(var(--cw) * .05) solid var(--stock);
  box-shadow:
    inset 0 0 0 calc(var(--cw) * .014) rgba(201, 165, 90, .85),
    0 0 0 .5px rgba(40, 30, 10, .35),
    0 calc(var(--cw) * .05) calc(var(--cw) * .12) rgba(0, 0, 0, .35);
}

/* ---------------------------------------------------------------- Veto cards */
.card.oc { --c: var(--card-black); color: var(--c); font-family: var(--serif); }
.card.oc.c-R, .emb.e-R { --c: var(--oc-R); }
.card.oc.c-O, .emb.e-O { --c: var(--oc-O); }
.card.oc.c-T, .emb.e-T { --c: var(--oc-T); }
.card.oc.c-P, .emb.e-P { --c: var(--oc-P); }
.card.oc .frame {
  position: absolute; inset: 5.5%;
  border: calc(var(--cw) * .022) solid var(--c);
  border-radius: calc(var(--cw) * .045);
}
.card.oc .frame::after {
  content: ''; position: absolute; inset: calc(var(--cw) * .018);
  border: calc(var(--cw) * .006 + .3px) solid var(--c); border-radius: calc(var(--cw) * .03); opacity: .55;
}
.card.oc.c-W .frame { border-color: var(--oc-R) var(--oc-O) var(--oc-T) var(--oc-P); }
.card.oc.c-W .frame::after { border-color: var(--card-black); opacity: .25; }
.card.oc .corner { top: 10%; left: 11%; width: auto; }
.card.oc .corner.br { top: auto; left: auto; bottom: 10%; right: 11%; }
.card.oc .corner b { font-size: .95em; letter-spacing: -.04em; }
.card.oc .corner .emb { font-size: .42em; margin-top: .25em; }
.card.oc.c-W .corner b { color: var(--card-black); }

.emb { display: inline-block; width: 1em; height: 1em; background: var(--c); flex: none; }
.emb.e-R { border-radius: 50%; }
.emb.e-O { clip-path: polygon(50% 4%, 97% 94%, 3% 94%); }
.emb.e-T { border-radius: 12%; transform: scale(.88); }
.emb.e-P { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

.card.oc .big-emb {
  position: absolute; left: 50%; top: 50%; font-size: calc(var(--cw) * .58);
  transform: translate(-50%, -50%); opacity: .12;
}
.card.oc .emb.e-T.big-emb { transform: translate(-50%, -50%) scale(.88); }
.card.oc .val {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -55%);
  font-family: var(--num); font-size: calc(var(--cw) * .56); line-height: 1; letter-spacing: -.05em;
}
.card.oc .val.sym { font-size: calc(var(--cw) * .46); transform: translate(-50%, -52%); letter-spacing: 0; }
.card.oc .quad {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -58%) rotate(45deg);
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--cw) * .05); font-size: calc(var(--cw) * .17);
}
.card.oc.oc-d4 .quad { opacity: .3; font-size: calc(var(--cw) * .21); transform: translate(-50%, -50%) rotate(45deg); }
.card.oc.oc-d4 .val { color: var(--card-black); }
.card.oc .wild-word {
  position: absolute; left: 0; right: 0; bottom: 21%; text-align: center;
  font-family: var(--display); font-size: .78em; letter-spacing: .14em; color: var(--card-black);
}

/* Brighter Veto cards: a wash of the card's colour on the stock, a bolder frame and emblem */
.card.oc:not(.c-W) {
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, color-mix(in srgb, var(--c) 16%, transparent), transparent 75%),
    linear-gradient(165deg, color-mix(in srgb, var(--c) 6%, #fbf7ec) 0%, color-mix(in srgb, var(--c) 10%, var(--stock)) 100%);
}
.card.oc.c-W {
  background:
    conic-gradient(from 45deg at 50% 50%, color-mix(in srgb, var(--oc-R) 12%, var(--stock)) 0 25%, color-mix(in srgb, var(--oc-O) 12%, var(--stock)) 0 50%,
      color-mix(in srgb, var(--oc-T) 12%, var(--stock)) 0 75%, color-mix(in srgb, var(--oc-P) 12%, var(--stock)) 0);
}
.card.oc .frame { border-width: calc(var(--cw) * .03); }
.card.oc .big-emb { opacity: .22; }
.card.oc .val.tax { font-size: calc(var(--cw) * .44); transform: translate(-50%, -66%); }
.card.oc .tax-word { bottom: 22%; color: var(--c); font-size: .9em; letter-spacing: .22em; }
.card.oc.oc-d4 .val.tax { transform: translate(-50%, -62%); }
.card.oc.oc-d4 .wild-word { bottom: 19%; }
.card.oc.c-O .val, .card.oc.c-O .corner b, .card.oc.c-O .tax-word { color: color-mix(in srgb, var(--oc-O) 82%, #3a2200); }

/* ---------- TV remote: the highlight that follows the arrow keys ---------- */
html.tv-nav .tv-focus {
  outline: max(4px, .5vmin) solid #ffd66b !important;
  outline-offset: max(3px, .35vmin);
  box-shadow: 0 0 0 max(8px, 1vmin) rgba(255, 214, 107, .22), 0 0 max(24px, 4vmin) rgba(255, 214, 107, .55) !important;
  border-radius: 6px;
  z-index: 30;
}
html.tv-nav .box.tv-focus { transform: translateY(-6px) scale(1.04); }
html.tv-nav .sq.tv-focus { outline-offset: calc(-1 * max(4px, .5vmin)); }
html.tv-nav *:focus { outline: none; }
html.tv a.join, html.tv #btnFull { display: none !important; }
#tvToast {
  position: fixed; left: 50%; bottom: 8vh; transform: translate(-50%, 20px); opacity: 0; z-index: 100; pointer-events: none;
  background: var(--stock); color: var(--paper-ink); font-family: var(--serif); font-style: italic; font-size: max(20px, 2.6vmin);
  padding: 1.2vmin 3vmin 1.5vmin; border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: .25s;
}
#tvToast.show { opacity: 1; transform: translate(-50%, 0); }
/* On a TV, both rows of the game catalog fit on one screen. */
html.tv .box { min-height: 39vh; padding: 2.2vh 20px; }
html.tv .box .cards { top: 30%; transform: translate(-50%, -50%) scale(.62); }
html.tv .box .pot { font-size: 9vh; top: 28%; }
html.tv .box h2 { font-size: 5vh; }
html.tv .box p { font-size: 2.8vh; }
html.tv .box .play { margin-top: 1.2vh; font-size: 2vh; }
html.tv h1 { font-size: 8vh; }
html.tv .tag { font-size: 3vh; margin-top: .6vh; }
html.tv .shelf { gap: 2.4vh; }
html.tv .eyebrow { margin-bottom: 1.4vh; }
html.tv body { padding-top: 4vh; }
html.tv header { margin-bottom: 2vh; }