:root {
  --bg: #15161a; --bg2: #1d1f25; --ink: #e9e4d8; --dim: #8d8a80; --line: #2c2f38;
  --felt: #1f4a3a; --felt2: #163a2d; --rim: #5a3a22; --rim2: #3b2415;
  --brass: #d9b45c; --true: #6fbf7a; --lie: #e0645c;
  --serif: 'EB Garamond', Georgia, serif; --sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); overflow: hidden; }
#screen { display: grid; grid-template-columns: 300px 1fr; height: 100vh; gap: 16px; padding: 16px; }
aside { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.back { color: var(--dim); font-size: 13px; text-decoration: none; margin: -4px 0 -6px 2px; }
.back:hover { color: var(--ink); }
.panel { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.url { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; margin-bottom: 14px; }
.code { font-family: var(--serif); font-size: 54px; font-weight: 600; letter-spacing: .08em; line-height: 1; color: var(--brass); }
.qr { margin-top: 14px; }
.qr svg { width: 150px; height: 150px; border-radius: 6px; background: #fff; padding: 7px; display: block; }
.join.small .qr svg { width: 96px; height: 96px; }
.how p { margin: 0 0 8px; font-family: var(--serif); font-size: 16px; line-height: 1.35; color: #cfc9ba; }
.how p:last-child { margin: 0; }
.how b { color: var(--lie); font-weight: 600; }
.log { list-style: none; margin: 0; padding: 0 4px; overflow: hidden; flex: 1; font-size: 13px; color: var(--dim); }
.log li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.log li:first-child { color: var(--ink); }

#table-wrap { position: relative; display: flex; flex-direction: column; min-height: 0; }
.now { display: flex; align-items: baseline; gap: 14px; padding: 6px 4px 12px; }
.now .what { font-family: var(--serif); font-size: 30px; }
.now .who { color: var(--dim); font-size: 15px; }
.skip { margin-left: auto; background: transparent; color: var(--ink); border: 1px solid var(--dim); border-radius: 8px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.keys { color: var(--dim); font-size: 12px; text-align: center; padding-top: 8px; opacity: .7; }

#table { position: relative; flex: 1; min-height: 0; margin: 40px 110px 60px; }
#felt { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, var(--felt), var(--felt2) 75%);
  box-shadow: 0 0 0 14px var(--rim), 0 0 0 18px var(--rim2), 0 30px 60px rgba(0,0,0,.5), inset 0 0 80px rgba(0,0,0,.35); }

.seat { position: absolute; transform: translate(-50%, -50%); text-align: center; cursor: pointer; min-width: 120px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px 9px; transition: border-color .3s, box-shadow .3s; }
.seat .name { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.1; }
.seat .sub { color: var(--dim); font-size: 12px; margin-top: 2px; white-space: nowrap; }
.seat.cur { border-color: var(--brass); box-shadow: 0 0 0 2px var(--brass), 0 0 28px rgba(217,180,92,.35); }
.seat.away { opacity: .55; }
.seat.won { border-color: var(--true); box-shadow: 0 0 0 2px var(--true); }
.seat.takes { border-color: var(--lie); box-shadow: 0 0 0 2px var(--lie); }
.seat:hover { border-color: var(--dim); }
.fan { --cw: 22px; position: relative; height: 30px; width: 70px; margin: -34px auto 10px; }
.fan .card { position: absolute; left: 50%; bottom: 0; transform-origin: 50% 120%; margin-left: -11px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.fan .f0 { transform: rotate(-20deg); } .fan .f1 { transform: rotate(-12deg); } .fan .f2 { transform: rotate(-4deg); }
.fan .f3 { transform: rotate(4deg); } .fan .f4 { transform: rotate(12deg); } .fan .f5 { transform: rotate(20deg); }

#center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; width: 56%; }
.pile { --cw: 70px; position: relative; width: 70px; height: 98px; }
.pile .card { position: absolute; left: 0; top: 0; }
.pile .card.fresh { animation: drop .45s ease-out both; }
@keyframes drop { from { opacity: 0; translate: 0 -60px; } to { opacity: 1; translate: 0 0; } }
.pilecount { color: rgba(233,228,216,.7); font-size: 13px; }
.claim { margin-top: 6px; }
.kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(233,228,216,.7); }
.rank { font-family: var(--serif); font-size: 52px; font-weight: 600; line-height: 1.05; color: var(--brass); }
.timer { width: 240px; height: 4px; background: rgba(0,0,0,.3); border-radius: 2px; margin: 12px auto 0; overflow: hidden; }
.timer i { display: block; height: 100%; background: var(--brass); transform-origin: left; animation: drain linear both; }
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.big-line { font-family: var(--serif); font-size: 64px; font-weight: 600; line-height: 1; color: var(--brass); }
.sub-line { color: rgba(233,228,216,.8); font-size: 16px; max-width: 520px; line-height: 1.4; }

.revealed { --cw: 84px; display: flex; gap: 12px; perspective: 800px; }
.revealed .card.flip { animation: flip .55s ease-out both; }
@keyframes flip { from { transform: rotateY(90deg); opacity: .4; } to { transform: none; opacity: 1; } }
.stamp { font-family: var(--serif); font-size: 46px; font-weight: 600; letter-spacing: .04em; padding: 0 18px; border: 3px solid; border-radius: 10px; transform: rotate(-4deg); animation: stamp .35s .5s ease-out both; }
.stamp.true { color: var(--true); }
.stamp.lie { color: var(--lie); }
@keyframes stamp { from { opacity: 0; transform: rotate(-4deg) scale(1.6); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }

/* The lobby: the game's rules in the middle of the felt. */
.phase-lobby { width: 70% !important; }
.rules-card { background: rgba(21,22,26,.72); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px 22px 16px; text-align: left; max-width: 640px; }
.rules-card ol { margin: 0; padding-left: 20px; font-family: var(--serif); font-size: 16px; line-height: 1.35; color: #d9d3c4; }
.rules-card li { margin: 0 0 5px; padding-left: 2px; }
.rules-card li:last-child { margin: 0; }
.rules-card b { color: var(--brass); font-weight: 600; }
.extra .row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 14px; }
.extra .row b { font-family: var(--serif); font-size: 20px; color: var(--brass); font-weight: 600; }