:root {
  --ink: #f4e8cc;
  --dim: #b7a586;
  --mute: #7d6d58;
  --gold: #e3b95a;
  --gold-hi: #ffe3a0;
  --brass: #a87a34;
  --wood: #170f09;
  --wood-2: #24170d;
  --red: #c4321f;
  --red-hi: #ff6a48;
  --line: rgba(227, 185, 90, 0.45);
  --display: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --title: 'Cinzel', Georgia, serif;
  --serif: 'IM Fell English', Georgia, serif;
  --ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --dock-bottom: calc(var(--hand-top, 15vh) + 12px); /* just over your cards (scene.js sets --hand-top) */
  /* One set of corners for everything (portraits, the clock and the trigger stay round), and one margin
     from the screen's edges. */
  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 6px;
  --edge: 22px;
  --edge-t: max(var(--edge), env(safe-area-inset-top));
  --edge-b: max(var(--edge), env(safe-area-inset-bottom));
  --edge-l: max(var(--edge), env(safe-area-inset-left));
  --edge-r: max(var(--edge), env(safe-area-inset-right));
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0806; color: var(--ink); font-family: var(--ui); -webkit-tap-highlight-color: transparent; user-select: none; }
canvas#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
button, input { font: inherit; color: inherit; }
kbd { font-family: var(--ui); font-size: 10px; font-weight: 700; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.2); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; color: var(--dim); }

/* ---- Panels ---- */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--edge); pointer-events: none; z-index: 5; }
.screen > * { pointer-events: auto; }
.panel {
  position: relative;
  background: linear-gradient(180deg, rgba(38, 25, 15, 0.94), rgba(18, 11, 7, 0.96));
  border: 1px solid #5c4020;
  border-radius: var(--r-lg);
  padding: 26px 28px;
  width: min(460px, 100%);
  max-height: calc(100vh - 2 * var(--edge));
  overflow-y: auto;
  box-shadow: 0 0 0 4px rgba(10, 6, 3, 0.85), 0 0 0 5px rgba(227, 185, 90, 0.35), 0 30px 80px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 220, 150, 0.08), inset 0 0 60px rgba(255, 160, 60, 0.05);
}
.panel::before, .panel::after { content: '◆'; position: absolute; top: 8px; color: var(--brass); font-size: 9px; opacity: 0.8; }
.panel::before { left: 10px; }
.panel::after { right: 10px; }
h1, h2 { font-family: var(--title); font-weight: 700; margin: 0; color: var(--gold); letter-spacing: 0.04em; }
.label { display: block; font-family: var(--title); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.field { display: block; margin: 16px 0; }
.hint { color: var(--dim); font-size: 14px; margin: 12px 0 4px; text-align: center; font-family: var(--serif); font-style: italic; }
.code { font-family: var(--title); font-weight: 900; color: var(--gold-hi); letter-spacing: 0.22em; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.center { justify-content: center; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--brass); margin: 10px 0 4px; font-size: 12px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }

/* ---- Buttons ---- */
.btn {
  cursor: pointer;
  font-family: var(--title); font-weight: 700; letter-spacing: 0.06em; font-size: 14px;
  border: 1px solid #6a4a24; border-radius: var(--r-md); padding: 12px 18px;
  background: linear-gradient(180deg, #3a2614, #24160b);
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.12), 0 3px 0 #0c0704, 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.18); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.12), 0 1px 0 #0c0704; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.gold { color: #2a1606; border-color: #ffe0a0; background: linear-gradient(180deg, #ffd884, #d9993a 55%, #b8762a); text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 0 #6a3e12, 0 6px 18px rgba(255, 170, 60, 0.3); }
.btn.big { font-size: 18px; padding: 15px 22px; }
.btn.small { font-size: 12px; padding: 7px 12px; }
.btn.wide { width: 100%; }
button.link { cursor: pointer; background: none; border: none; color: var(--dim); text-decoration: underline; text-underline-offset: 3px; padding: 6px; font-family: var(--serif); font-size: 15px; }
button.link:hover { color: var(--ink); }
button.icon { cursor: pointer; width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; font-size: 17px; font-weight: 700; border-radius: var(--r-md); border: 1px solid #6a4a24; background: linear-gradient(180deg, #3a2614, #1a0f07); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); }
button.icon:hover { filter: brightness(1.25); }
button.icon svg { width: 20px; height: 20px; fill: currentColor; }
button.icon.off .wave { display: none; }
button.icon.off { color: var(--mute); }
input {
  background: rgba(0, 0, 0, 0.5); border: 1px solid #5c4020; border-radius: var(--r-md); padding: 12px 14px; outline: none; width: 100%; font-size: 16px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5); user-select: text;
}
input:focus { border-color: var(--gold); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(227, 185, 90, 0.18); }
.shake { animation: shake 0.4s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ---- Menu ---- */
.menu-panel { text-align: center; }
.logo { display: flex; align-items: center; justify-content: center; gap: 12px; }
.logo img { width: 64px; height: 64px; filter: drop-shadow(0 0 16px rgba(255, 170, 60, 0.8)); animation: lantern 3s ease-in-out infinite; }
@keyframes lantern { 50% { filter: drop-shadow(0 0 26px rgba(255, 190, 80, 1)); transform: rotate(2deg); } }
.logo h1 { font-family: var(--display); font-weight: 900; font-size: 46px; line-height: 0.95; color: var(--gold-hi); text-align: left; text-shadow: 0 0 24px rgba(255, 170, 60, 0.45), 0 2px 0 #5a3410; }
.logo h1 small { display: block; font-size: 20px; color: var(--gold); letter-spacing: 0.3em; }
.tagline { font-family: var(--serif); font-style: italic; color: var(--dim); margin: 10px 0 0; font-size: 18px; }
.menu-panel .field { text-align: left; }
.chars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.char { cursor: pointer; padding: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 38%, #5a3d22, #1a0f07 70%); border: 2px solid #4a3218; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; }
.char img { width: 100%; height: 100%; display: block; transform: scale(1.12); }
.char:hover { transform: translateY(-2px); border-color: var(--brass); }
.char.on { border-color: var(--gold-hi); box-shadow: 0 0 0 3px rgba(227, 185, 90, 0.25), 0 0 18px rgba(255, 190, 90, 0.55); transform: scale(1.08); }
.char.taken { opacity: 0.28; filter: grayscale(1); cursor: not-allowed; transform: none; }
.chars.small { grid-template-columns: repeat(6, 48px); justify-content: center; }
.char-name { margin-top: 10px; text-align: center; font-size: 15px; }
.char-name b { font-family: var(--title); color: var(--gold-hi); }
.char-name i { font-family: var(--serif); color: var(--dim); }
.actions { display: grid; gap: 10px; margin: 18px 0 8px; }
.join { display: grid; grid-template-columns: 120px 1fr; gap: 10px; }
.join input { text-transform: uppercase; text-align: center; letter-spacing: 0.3em; font-family: var(--title); font-weight: 900; }

/* ---- Lobby ---- */
.lobby-panel { width: min(520px, 100%); }
.lobby-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.lobby-head h2 { font-size: 40px; line-height: 1; }
.invite { text-align: right; }
.invite-row { display: flex; gap: 8px; align-items: center; }
.invite a { color: var(--gold); font-size: 14px; word-break: break-all; }
.seats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seat { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 8px 10px; border-radius: var(--r-md); background: linear-gradient(180deg, rgba(255, 220, 150, 0.06), rgba(0, 0, 0, 0.2)); border: 1px solid rgba(227, 185, 90, 0.25); min-height: 132px; }
.seat img { width: 66px; height: 66px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #5a3d22, #1a0f07 70%); border: 2px solid var(--brass); margin-bottom: 4px; }
.seat b { font-family: var(--title); font-size: 15px; }
.seat small { color: var(--dim); font-size: 12px; }
.seat.you { border-color: var(--gold); box-shadow: 0 0 16px rgba(227, 185, 90, 0.2); }
.seat.away { opacity: 0.55; }
.seat.empty { cursor: default; border-style: dashed; background: rgba(0, 0, 0, 0.18); color: var(--mute); justify-content: center; font: inherit; }
button.seat.empty { cursor: pointer; color: var(--dim); transition: border-color 0.15s, background 0.15s; }
button.seat.empty:hover { border-color: var(--gold); background: rgba(227, 185, 90, 0.08); color: var(--ink); }
.seat .plus { font-family: var(--title); font-size: 34px; line-height: 1; color: var(--brass); }
.seat-x { cursor: pointer; position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #6a4a24; background: #1a0f07; color: var(--dim); font-size: 11px; padding: 0; }
.seat-x:hover { color: var(--red-hi); border-color: var(--red); }
.crown { color: var(--gold-hi); margin-left: 4px; }
#start { margin-top: 6px; }

/* ---- HUD ---- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
#hud > * { pointer-events: auto; }

#plaque {
  position: absolute; top: var(--edge-t); left: var(--edge-l);
  display: flex; align-items: center; gap: 14px; padding: 8px 22px 8px 12px; pointer-events: none;
  background: linear-gradient(180deg, rgba(38, 25, 15, 0.95), rgba(18, 11, 7, 0.95));
  border: 1px solid #6a4a24; border-radius: var(--r-md); box-shadow: 0 0 0 3px rgba(10, 6, 3, 0.8), 0 0 0 4px rgba(227, 185, 90, 0.3), 0 8px 24px rgba(0, 0, 0, 0.5);
}
.plaque-card { width: 46px; height: 68px; margin: -14px 0 -14px 0; transform: rotate(-7deg); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)); }
.plaque-card img { width: 100%; height: 100%; border-radius: 4px; }
.plaque-text { display: flex; flex-direction: column; line-height: 1.1; }
.plaque-text small { font-size: 11px; color: var(--dim); letter-spacing: 0.08em; }
.plaque-sign { font-family: var(--title); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.plaque-sign b { font-family: var(--display); font-size: 24px; letter-spacing: 0.03em; text-transform: none; color: var(--gold-hi); margin-left: 4px; }
#plaque[data-sign='sun'] .plaque-sign b { color: #ffc94a; }
#plaque[data-sign='moon'] .plaque-sign b { color: #a9c4ff; }
#plaque[data-sign='star'] .plaque-sign b { color: #ff8a8a; }
.pile-icon { display: inline-block; width: 8px; height: 11px; margin-right: 5px; vertical-align: -1px; border-radius: 2px; background: #1f5a5e; border: 1px solid var(--gold); box-shadow: 2px -2px 0 -1px #1f5a5e, 2px -2px 0 0 var(--gold); }

#corner { position: absolute; top: var(--edge-t); right: var(--edge-r); display: flex; gap: 8px; align-items: center; }
#corner .code { font-size: 16px; margin-right: 4px; padding: 9px 12px; border-radius: var(--r-md); background: rgba(0, 0, 0, 0.45); border: 1px solid #4a3218; }

/* The announcer */
#feed {
  position: absolute; top: var(--edge-t); left: 50%; transform: translate(-50%, -8px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; max-width: calc(100vw - 2 * var(--edge));
  background: rgba(14, 9, 5, 0.9); border: 1px solid #4a3218; border-radius: var(--r-md); font-size: 15px; white-space: nowrap;
  transition: opacity 0.25s, transform 0.25s;
}
#feed.show { opacity: 1; transform: translate(-50%, 0); }
#feed img { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #5a3d22, #1a0f07 70%); border: 1px solid var(--brass); }
#feed span:only-child { padding-left: 10px; }
#feed b { font-family: var(--title); color: var(--ink); }
#feed em { font-style: normal; font-weight: 800; color: var(--gold-hi); }
#feed.danger { border-color: rgba(255, 90, 60, 0.6); box-shadow: 0 0 18px rgba(255, 60, 30, 0.25); }
#feed.danger em { color: var(--red-hi); }
#feed.warn { border-color: var(--red); }

/* Stamped words */
#stamp { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); pointer-events: none; text-align: center; opacity: 0; }
#stamp b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(48px, 8.5vw, 96px); line-height: 1; letter-spacing: 0.02em; color: var(--gold-hi); -webkit-text-stroke: 2px #2a1606; text-shadow: 0 6px 0 #2a1606, 0 0 40px rgba(255, 170, 60, 0.6); }
#stamp small { display: inline-block; margin-top: 10px; font-family: var(--title); font-weight: 700; font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: rgba(10, 6, 3, 0.8); padding: 6px 14px; border-radius: var(--r-sm); border: 1px solid #4a3218; }
#stamp.show { animation: stamp 1.7s cubic-bezier(.2, .9, .3, 1.2) forwards; }
#stamp.liar b, #stamp.lie b { color: #ff5a3a; text-shadow: 0 6px 0 #3a0a04, 0 0 50px rgba(255, 50, 20, 0.7); }
#stamp.liar { --rot: -8deg; }
#stamp.lie { --rot: 6deg; }
#stamp.truth b { color: #ffe08a; }
#stamp.click b { color: #e8e0d0; text-shadow: 0 6px 0 #2a2218, 0 0 30px rgba(255, 255, 255, 0.35); }
#stamp.bang b { color: #fff4e0; font-size: clamp(64px, 12vw, 130px); -webkit-text-stroke: 3px #5a0a00; text-shadow: 0 8px 0 #5a0a00, 0 0 80px rgba(255, 80, 20, 0.95); }
#stamp.turn b { font-size: clamp(42px, 8vw, 80px); }
@keyframes stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.4) rotate(var(--rot, -4deg)); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(0.94) rotate(var(--rot, -4deg)); }
  18% { transform: translate(-50%, -50%) scale(1.03) rotate(var(--rot, -4deg)); }
  24%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(var(--rot, -4deg)); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(0.96) rotate(var(--rot, -4deg)); }
}

/* The round's sign, dealt */
#bigSign { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; }
#bigSign img { width: 150px; border-radius: 12px; box-shadow: 0 0 0 3px rgba(227, 185, 90, 0.6), 0 0 70px rgba(255, 180, 80, 0.6); }
#bigSign b { font-family: var(--display); font-weight: 900; font-size: 36px; color: var(--gold-hi); text-shadow: 0 3px 0 #2a1606, 0 0 20px rgba(0, 0, 0, 0.8); text-align: center; line-height: 1; }
#bigSign b small { display: block; font-family: var(--title); font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
#bigSign.play { animation: bigsign 1.9s ease forwards; }
@keyframes bigsign {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotateY(180deg); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotateY(0); }
  30% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -260%) scale(0.3); }
}

/* You */
#me {
  position: absolute; left: var(--edge-l); bottom: var(--edge-b);
  display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; pointer-events: none;
  background: linear-gradient(180deg, rgba(38, 25, 15, 0.94), rgba(18, 11, 7, 0.94)); border: 1px solid #5c4020; border-radius: var(--r-md);
  box-shadow: 0 0 0 3px rgba(10, 6, 3, 0.8), 0 8px 24px rgba(0, 0, 0, 0.5);
}
.me-pic img { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #5a3d22, #1a0f07 70%); border: 2px solid var(--gold); display: block; }
.me-body > b { font-family: var(--title); font-size: 15px; }
.me-gun { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; }
.me-gun small { display: block; font-family: var(--title); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
.me-gun b { font-family: var(--title); font-weight: 900; font-size: 20px; }
#me.dead { filter: grayscale(1); opacity: 0.6; }
#me .bubble { left: 40px; top: -8px; transform: translateY(-100%); }
.danger-bar { display: flex; gap: 3px; }
.danger-bar i { width: 18px; height: 5px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.danger-bar i.on:nth-child(1) { background: #b8d48a; }
.danger-bar i.on:nth-child(2) { background: #e6d070; }
.danger-bar i.on:nth-child(3) { background: #f0b050; }
.danger-bar i.on:nth-child(4) { background: #f08a3a; }
.danger-bar i.on:nth-child(5) { background: #f05a30; }
.danger-bar i.on:nth-child(6) { background: #ff3030; }

/* The barrels, drawn */
.cyl { display: block; flex: none; }
.cyl-body { fill: #2e2112; stroke: #d6a84c; stroke-width: 4; }
.ch-hole { fill: #0e0905; stroke: #c99a44; stroke-width: 2.5; }
.ch-core { fill: #33261a; }
.ch.spent .ch-hole { fill: #17110c; stroke: #4e4032; }
.ch-x { stroke: #7a6a56; stroke-width: 3; stroke-linecap: round; }
.ch.next .ch-hole { stroke: #ff6a48; stroke-width: 4; animation: next 1s ease-in-out infinite; }
.ch.next .ch-core { fill: #5a1a10; }
@keyframes next { 50% { stroke: #ffc0a0; } }
.cyl-pin { fill: #d6a84c; }
.cyl.dead { opacity: 0.5; filter: grayscale(1); }
.d0 { color: #b8d48a; } .d1 { color: #e6d070; } .d2 { color: #f0b050; } .d3 { color: #f08a3a; } .d4 { color: #f05a30; }
.d5 { color: #ff3030; animation: blink 0.8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.55; } }

/* Whose move it is, when it isn't yours */
#status {
  position: absolute; left: 50%; bottom: var(--dock-bottom); transform: translate(-50%, 10px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; white-space: nowrap;
  background: rgba(14, 9, 5, 0.88); border: 1px solid #4a3218; border-radius: var(--r-md); font-size: 15px; transition: opacity 0.2s, transform 0.2s;
}
#status.show { opacity: 1; transform: translate(-50%, 0); }
#status img { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--brass); background: radial-gradient(circle at 50% 38%, #5a3d22, #1a0f07 70%); }
#status b { font-family: var(--title); }
#status.danger { border-color: rgba(255, 90, 60, 0.6); }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); animation: dot 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Your move */
#hint {
  position: absolute; left: 50%; bottom: calc(var(--dock-bottom) + 122px); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px);
  text-align: center; font-size: 15px; color: var(--ink); text-shadow: 0 1px 6px #000, 0 0 2px #000; pointer-events: none; opacity: 0; transition: opacity 0.2s;
}
#hint.show { opacity: 1; }
#hint b { color: var(--gold-hi); }
#dock {
  position: absolute; left: 50%; bottom: var(--dock-bottom); transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 14px; transition: opacity 0.2s, transform 0.25s cubic-bezier(.2, .9, .3, 1.3);
}
#dock.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.act {
  position: relative; cursor: pointer; width: 176px; height: 80px; border-radius: var(--r-md); padding: 8px 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  transition: transform 0.1s, filter 0.15s, box-shadow 0.15s;
}
.act b { font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1; }
.act small { font-family: var(--title); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.act kbd { position: absolute; top: 6px; right: 8px; }
.act:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.12); }
.act:active:not(:disabled) { transform: translateY(2px); }
.act.liar {
  color: #fff3e6; border: 2px solid #ffb08a;
  background: radial-gradient(ellipse at 50% 20%, #f0563a, #b0261a 60%, #7a140c);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -4px 0 rgba(0, 0, 0, 0.3), 0 4px 0 #4a0a04, 0 8px 24px rgba(255, 60, 30, 0.35);
  text-shadow: 0 2px 0 #4a0a04;
}
.act.liar b { font-size: 34px; }
.act.lay {
  color: #2a1606; border: 2px solid #ffe7b0;
  background: linear-gradient(180deg, #ffdc8c, #d9993a 60%, #a8681e);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -4px 0 rgba(0, 0, 0, 0.2), 0 4px 0 #5a3410, 0 8px 24px rgba(255, 170, 60, 0.3);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
}
.act.lay kbd { color: #5a3410; background: rgba(255, 255, 255, 0.3); border-color: rgba(90, 52, 16, 0.4); }
.act.lay:disabled { cursor: default; color: var(--dim); text-shadow: none; border: 2px dashed #6a4a24; background: rgba(20, 12, 6, 0.85); box-shadow: none; }
.act.lay:disabled kbd { display: none; }
.lay-cards { position: absolute; top: -30px; left: 50%; height: 40px; width: 0; }
.lay-cards img { position: absolute; width: 26px; height: 39px; left: -13px; border-radius: 3px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6); transform: translateX(calc(var(--i) * 15px)) rotate(calc(var(--i) * 9deg)); transform-origin: 50% 120%; animation: lay-in 0.2s ease-out; }
@keyframes lay-in { from { transform: translateY(12px) scale(0.6); opacity: 0; } }
#dock.forced .act.liar { width: 230px; height: 92px; animation: urge 1.1s ease-in-out infinite; }
@keyframes urge { 50% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 4px 0 #4a0a04, 0 0 40px rgba(255, 60, 30, 0.8); } }
#clock { position: relative; width: 74px; height: 74px; flex: none; border-radius: 50%; background: radial-gradient(circle, #24170d, #0e0905); box-shadow: 0 0 0 3px #0a0603, 0 0 0 4px #5c4020, 0 6px 16px rgba(0, 0, 0, 0.6); }
#clock svg { position: absolute; inset: 0; transform: rotate(-90deg); }
#clock circle { fill: none; stroke-width: 7; }
#clock .track { stroke: rgba(255, 255, 255, 0.06); }
#clock .fill { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 276.5; transition: stroke 0.3s; }
#clock b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--title); font-weight: 900; font-size: 26px; color: var(--gold-hi); }
#clock.low .fill { stroke: var(--red-hi); }
#clock.low b { color: var(--red-hi); animation: tick 1s ease-in-out infinite; }
@keyframes tick { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.25); } }

/* The trigger */
#pullWrap { position: absolute; left: 50%; bottom: calc(var(--dock-bottom) - 10px); transform: translate(-50%, 30px); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; }
#pullWrap.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#pullWrap p { margin: 0; font-size: 13px; color: var(--dim); text-shadow: 0 1px 4px #000; }
#pullBtn {
  position: relative; cursor: pointer; width: 148px; height: 148px; border-radius: 50%; border: 3px solid #ffb08a; touch-action: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff3e6;
  background: radial-gradient(circle at 50% 30%, #e0462e, #9a1e12 60%, #5a0c06);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3), inset 0 -6px 0 rgba(0, 0, 0, 0.35), 0 0 0 6px rgba(10, 6, 3, 0.8), 0 0 50px rgba(255, 50, 20, 0.5);
  animation: heart 0.9s ease-in-out infinite; transition: transform 0.1s;
}
#pullBtn svg { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); transform: rotate(-90deg); pointer-events: none; }
#pullBtn circle { fill: none; stroke-width: 5; }
#pullBtn .track { stroke: rgba(255, 255, 255, 0.08); }
#pullBtn .fill { stroke: #fff0d8; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; filter: drop-shadow(0 0 6px #ff8060); }
#pullBtn span { font-family: var(--title); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; line-height: 1.1; }
#pullBtn span b { display: block; font-family: var(--display); font-size: 34px; letter-spacing: 0.02em; text-transform: none; }
#pullBtn small { margin-top: 4px; font-family: var(--title); font-weight: 900; font-size: 14px; color: #ffd0b8; }
#pullBtn.holding { animation: none; transform: scale(0.94); }
@keyframes heart { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.05); } 30% { transform: scale(1.02); } }

#chat { position: absolute; right: var(--edge-r); bottom: var(--edge-b); width: 250px; display: flex; flex-direction: column; gap: 6px; }
#chatLog { display: flex; flex-direction: column; gap: 3px; font-size: 13px; pointer-events: none; }
#chatLog div { background: rgba(0, 0, 0, 0.6); padding: 5px 10px; border-radius: var(--r-sm); transition: opacity 1s; }
#chatLog div.old { opacity: 0; }
#chatLog b { color: var(--gold); font-family: var(--title); }
#chatInput { font-size: 13px; padding: 8px 11px; opacity: 0.65; }
#chatInput:focus { opacity: 1; }

/* Name tags over the players */
#tags { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
.tag {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(36, 24, 14, 0.92), rgba(16, 10, 6, 0.92)); border: 1px solid #5c4020; border-radius: var(--r-md);
  box-shadow: 0 0 0 2px rgba(10, 6, 3, 0.7), 0 6px 18px rgba(0, 0, 0, 0.45); transition: border-color 0.2s, box-shadow 0.2s, opacity 0.3s;
}
.tag-pic { position: relative; width: 40px; height: 40px; flex: none; }
.tag-pic img { width: 40px; height: 40px; border-radius: 50%; display: block; background: radial-gradient(circle at 50% 38%, #5a3d22, #1a0f07 70%); }
.tag-pic svg { position: absolute; inset: -4px; width: 48px; height: 48px; transform: rotate(-90deg); }
.tag-pic circle { fill: none; stroke: var(--gold-hi); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; filter: drop-shadow(0 0 3px rgba(255, 200, 100, 0.8)); }
.tag .nm { font-family: var(--title); font-weight: 700; font-size: 13px; }
.badge { margin-left: 6px; font-family: var(--ui); font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); border: 1px solid #4a3a2a; border-radius: 4px; padding: 0 4px; vertical-align: 2px; }
.tag-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.tag-row:empty { display: none; }
.mini-cards { display: inline-flex; }
.mini-cards { padding-left: 2px; }
.mini-cards i { width: 9px; height: 13px; margin-right: -4px; border-radius: 2px; background: linear-gradient(135deg, #2a6e72, #123c40); border: 1px solid var(--gold); transform-origin: 50% 100%; box-shadow: -1px 0 2px rgba(0, 0, 0, 0.5); }
.mini-cards i:nth-child(1) { transform: rotate(-16deg); } .mini-cards i:nth-child(2) { transform: rotate(-8deg); } .mini-cards i:nth-child(4) { transform: rotate(8deg); } .mini-cards i:nth-child(5) { transform: rotate(16deg); }
.tag-gun { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.tag-gun b { font-family: var(--title); font-weight: 900; font-size: 12px; }
.thinking { display: none; position: absolute; right: -6px; top: -6px; padding: 3px 6px; gap: 2px; border-radius: var(--r-sm); background: var(--gold); }
.thinking i { width: 4px; height: 4px; border-radius: 50%; background: #2a1606; animation: dot 1.2s infinite; }
.thinking i:nth-child(2) { animation-delay: 0.15s; }
.thinking i:nth-child(3) { animation-delay: 0.3s; }
.tag.turn { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(10, 6, 3, 0.7), 0 0 22px rgba(255, 190, 90, 0.55); }
.tag.turn .thinking { display: inline-flex; }
.tag.aiming { border-color: var(--red-hi); box-shadow: 0 0 0 2px rgba(10, 6, 3, 0.7), 0 0 26px rgba(255, 60, 30, 0.7); animation: tremble 0.12s infinite; }
@keyframes tremble { 50% { margin-left: 1px; } }
.tag.dead { opacity: 0.55; filter: grayscale(1); }
.tag.dead .nm::after { content: ' · out'; font-weight: 400; color: var(--red-hi); }
.tag.away .nm { font-style: italic; opacity: 0.6; }
.bubble {
  position: absolute; left: 50%; top: -8px; transform: translate(-50%, -100%) scale(0.6); opacity: 0;
  background: #f6ebd0; color: #22140a; font-family: var(--title); font-weight: 900; padding: 6px 14px; border-radius: var(--r-md); white-space: nowrap; max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; pointer-events: none; font-size: 15px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #f6ebd0; }
.bubble.show { animation: bubble 3s ease forwards; }
@keyframes bubble {
  0% { opacity: 0; transform: translate(-50%, -100%) scale(0.6); }
  10% { opacity: 1; transform: translate(-50%, -100%) scale(1.15); }
  18% { transform: translate(-50%, -100%) scale(1); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -100%) scale(1); }
}
#me .bubble.show { animation-name: bubble-me; }
@keyframes bubble-me { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }

/* The Peppermill to your temple */
#vignette { position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.8s; background: radial-gradient(ellipse at center, transparent 30%, rgba(70, 0, 0, 0.8) 100%); }
body.aiming #vignette { opacity: 1; animation: throb 0.9s infinite; }
body.myturn #vignette { opacity: 0.35; background: radial-gradient(ellipse at center, transparent 55%, rgba(255, 170, 60, 0.25) 100%); }
@keyframes throb { 50% { opacity: 0.7; } }
#flash { position: fixed; inset: 0; pointer-events: none; z-index: 6; opacity: 0; }
#flash.bang { background: #fff3d8; }
#flash.bang.go { animation: flash 0.5s ease-out; }
#flash.dead { background: #fff; }
#flash.dead.go { animation: death 3.6s ease-out forwards; }
@keyframes flash { 0% { opacity: 0.85; } 100% { opacity: 0; } }
@keyframes death { 0% { opacity: 1; background: #fff; } 8% { background: #a01010; opacity: 0.9; } 40% { background: #000; opacity: 0.95; } 100% { background: #000; opacity: 0; } }

/* The end */
#over { align-items: flex-end; padding-bottom: max(var(--edge-b), 6vh); }
.over-panel { text-align: center; padding: 34px 26px 20px; overflow: visible; }
.ribbon { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--title); font-weight: 900; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: #2a1606; padding: 7px 22px; border-radius: 4px; background: linear-gradient(180deg, #ffdc8c, #c8862e); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }
.over-panel img { width: 104px; height: 104px; border-radius: 50%; border: 3px solid var(--gold-hi); box-shadow: 0 0 0 5px rgba(227, 185, 90, 0.2), 0 0 40px rgba(255, 179, 71, 0.6); background: radial-gradient(circle at 50% 38%, #5a3d22, #1a0f07 70%); }
.over-panel h2 { font-family: var(--display); font-weight: 900; font-size: 36px; margin-top: 8px; color: var(--gold-hi); }
.over-panel p { font-family: var(--serif); font-style: italic; color: var(--dim); margin: 4px 0 14px; }

/* The rules */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.rules-panel { width: min(640px, 100%); }
.rules-panel h2 { font-family: var(--display); font-size: 30px; text-align: center; margin-bottom: 14px; }
.rules-panel ol { padding-left: 22px; line-height: 1.55; font-size: 15px; }
.rules-panel li { margin-bottom: 8px; }
.rules-panel li b { color: var(--gold-hi); }
.deck { display: flex; gap: 12px; justify-content: center; }
.deck figure { margin: 0; text-align: center; font-family: var(--title); font-size: 11px; color: var(--dim); }
.deck img { width: 78px; border-radius: 7px; display: block; margin-bottom: 6px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5); }
.deck figure:nth-child(odd) img { transform: rotate(-3deg); }
.deck figure:nth-child(even) img { transform: rotate(3deg); }
.keys { font-size: 13px; color: var(--dim); text-align: center; }
#rulesClose { display: block; margin: 8px auto 0; min-width: 160px; }

#loading { position: fixed; inset: 0; z-index: 20; background: #0b0806; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--dim); font-family: var(--serif); font-style: italic; transition: opacity 0.6s; }
#loading img { width: 70px; animation: lantern 1.2s infinite alternate; }
#loading.gone { opacity: 0; pointer-events: none; }
#offline { position: fixed; top: 0; left: 50%; transform: translateX(-50%); background: var(--red); padding: 6px 16px; border-radius: 0 0 10px 10px; z-index: 30; font-size: 14px; }

@media (max-width: 700px) {
  :root { --edge: 14px; }
  .panel { padding: 22px 18px; }
  .logo h1 { font-size: 36px; }
  .logo h1 small { font-size: 16px; }
  .logo img { width: 50px; height: 50px; }
  .seat { min-height: 116px; }
  .seat img { width: 54px; height: 54px; }
  .chars.small { grid-template-columns: repeat(6, 1fr); }
  #plaque { padding: 7px 12px 7px 9px; gap: 10px; }
  .plaque-card { width: 34px; height: 50px; }
  .plaque-sign b { font-size: 19px; }
  #corner .code { display: none; }
  #corner button.icon { width: 36px; height: 36px; }
  #feed { top: calc(var(--edge-t) + 112px); font-size: 13px; }
  #hint { width: calc(100vw - 24px); }
  #me { bottom: auto; top: calc(var(--edge-t) + 64px); padding: 5px 12px 5px 5px; gap: 7px; }
  .me-pic img { width: 34px; height: 34px; }
  .me-body > b, .me-gun small { display: none; }
  .me-gun { margin: 0; }
  #myGun svg { width: 30px; height: 30px; }
  .me-gun b { font-size: 14px; }
  .danger-bar { display: none; }
  #me .bubble { left: 30px; top: auto; bottom: -8px; transform: translateY(100%); }
  #chat { width: 44vw; bottom: auto; top: calc(var(--edge-t) + 64px); flex-direction: column-reverse; }
  .tag { padding: 3px 8px 3px 3px; gap: 5px; }
  .tag-pic, .tag-pic img { width: 30px; height: 30px; }
  .tag-pic svg { width: 38px; height: 38px; }
  .tag .nm { font-size: 11px; }
  .tag-gun b { display: none; }
  .mini-cards i { width: 7px; height: 10px; }
  .act { width: 128px; height: 70px; }
  .act b { font-size: 21px; }
  .act.liar b { font-size: 26px; }
  .act kbd { display: none; }
  #clock { width: 58px; height: 58px; }
  #clock b { font-size: 20px; }
  #dock { gap: 8px; }
  #dock.forced .act.liar { width: 190px; height: 80px; }
  #hint { bottom: calc(var(--dock-bottom) + 104px); font-size: 13px; }
  #pullBtn { width: 124px; height: 124px; }
  #stamp small { font-size: 12px; }
}

/* ---- Whose turn it is: a marker over their badge ---- */
.turn-mark { display: none; position: absolute; left: 50%; top: -16px; width: 0; height: 0; margin-left: -9px; border: 9px solid transparent; border-bottom: 0; border-top: 11px solid var(--gold-hi); filter: drop-shadow(0 0 6px rgba(255, 200, 100, 0.9)); animation: mark 0.9s ease-in-out infinite; }
.tag.turn .turn-mark, .tag.aiming .turn-mark, .tag.picking .turn-mark { display: block; }
.tag.aiming .turn-mark { border-top-color: var(--red-hi); filter: drop-shadow(0 0 6px rgba(255, 70, 40, 0.9)); }
.tag.picking { border-color: #b98cff; box-shadow: 0 0 0 2px rgba(10, 6, 3, 0.7), 0 0 22px rgba(170, 120, 255, 0.55); }
.tag.picking .turn-mark { border-top-color: #c9a8ff; }
@keyframes mark { 50% { transform: translateY(-4px); } }
.tag .thinking { display: none !important; }
/* How many they just laid. */
.laid { position: absolute; right: -8px; bottom: -10px; font-family: var(--title); font-size: 11px; font-weight: 700; color: #2a1606; background: linear-gradient(180deg, #ffdc8c, #d9993a); border-radius: var(--r-sm); padding: 1px 7px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.laid:empty { display: none; }
.laid b { font-weight: 900; }

/* ---- Picking who pulls (Crown, Storm) ---- */
#picker { position: absolute; left: 50%; bottom: var(--dock-bottom); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.25s; text-align: center; background: linear-gradient(180deg, rgba(38, 25, 15, 0.95), rgba(18, 11, 7, 0.96)); border: 1px solid #6a4a24; border-radius: var(--r-lg); padding: 14px; box-shadow: 0 0 0 3px rgba(10, 6, 3, 0.8), 0 0 0 4px rgba(185, 140, 255, 0.45), 0 12px 30px rgba(0, 0, 0, 0.6); }
#picker.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#pickerTitle { display: block; font-family: var(--title); font-size: 15px; color: #d9c4ff; margin-bottom: 10px; letter-spacing: 0.04em; }
#pickerList { display: flex; gap: 10px; justify-content: center; }
.pick { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 112px; padding: 10px 6px 8px; border-radius: var(--r-md); border: 1px solid #5c4020; background: rgba(0, 0, 0, 0.3); transition: transform 0.1s, border-color 0.15s, background 0.15s; }
.pick:hover { transform: translateY(-3px); border-color: var(--red-hi); background: rgba(255, 60, 30, 0.12); }
.pick img { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #5a3d22, #1a0f07 70%); border: 2px solid var(--brass); }
.pick b { font-family: var(--title); font-size: 13px; }
.pick small { font-family: var(--title); font-weight: 900; font-size: 12px; }

/* ---- The rules a table plays by ---- */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mode { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: var(--r-md); border: 1px solid #4a3218; background: rgba(0, 0, 0, 0.25); transition: border-color 0.15s, background 0.15s; }
.mode img { width: 34px; border-radius: 4px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); }
.mode b { font-family: var(--title); font-size: 13px; }
.mode.on { border-color: var(--gold); background: rgba(227, 185, 90, 0.12); box-shadow: 0 0 14px rgba(227, 185, 90, 0.25); }
.mode:disabled { cursor: default; }
.mode:disabled:not(.on) { opacity: 0.45; }
#modeNote { margin-top: 8px; min-height: 2.6em; }
#stamp.cursed b { color: #c88aff; text-shadow: 0 6px 0 #1a0628, 0 0 50px rgba(160, 80, 255, 0.8); }
#stamp.cursed { --rot: -6deg; }
#stamp.storm b { color: #bfe0ff; text-shadow: 0 6px 0 #0a1626, 0 0 50px rgba(120, 180, 255, 0.8); }
.rules-panel h3 { font-family: var(--title); color: var(--gold); margin: 18px 0 10px; text-align: center; }
.rules-panel ul { padding-left: 22px; line-height: 1.55; font-size: 15px; }
.rules-panel ul li b { color: var(--gold-hi); }

/* ---- Choosing who you are: arrows, and you standing in front of the bar ---- */
#menu, #lobby { justify-content: flex-start; padding-left: max(var(--edge-l), 5vw); }
.menu-panel { width: min(420px, 100%); }
.charpick { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; }
.arrow { cursor: pointer; height: 54px; border-radius: var(--r-md); border: 1px solid #6a4a24; background: linear-gradient(180deg, #3a2614, #1a0f07); font-family: var(--title); font-size: 30px; line-height: 1; color: var(--gold-hi); box-shadow: 0 3px 0 #0c0704; transition: transform 0.08s, filter 0.15s; }
.arrow:hover { filter: brightness(1.25); }
.arrow:active { transform: translateY(2px); box-shadow: none; }
.charpick .char-name { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 54px; padding: 4px 8px; border-radius: var(--r-md); background: rgba(0, 0, 0, 0.3); border: 1px solid #4a3218; }
.charpick .char-name b { font-size: 17px; }
.charpick .char-name i { font-size: 14px; }
@media (max-width: 700px) {
  #menu, #lobby { justify-content: center; align-items: flex-end; padding: var(--edge); }
  #menu .panel, #lobby .panel { max-height: 62vh; }
  .menu-panel .logo h1 { font-size: 30px; }
  .menu-panel .tagline { display: none; }
  .menu-panel .divider { display: none; }
  .menu-panel .field { margin: 10px 0; }
}