/* =====================================================================
   Wizbang Private Pub (2026-10-29, Sean): the six rooms and everything on their walls.
   One markup, six looks: .pub[data-room="mahogany|parlor|speakeasy|lodge|garage|sports"].
   Every texture is drawn in CSS or inline SVG, so it stays sharp on any screen. No hard offset shadows,
   no thick outlines. Plan: the project doc claude/pub-plan.md.
   ===================================================================== */

/* ---------- the room tokens ---------- */
.pub {
  --wall: #3b1712; --wall2: #2a0f0b; --wood: #5a2316; --wood2: #3a140c; --brass: #c9a456; --brass2: #8a6a2c;
  --ink: #f3e6cf; --soft: #cdb79a; --panel: rgba(28, 10, 6, .74); --panel2: rgba(52, 20, 12, .6); --line: rgba(243, 230, 207, .14);
  --accent: #d4af5f; --on-accent: #241008; --felt: #6b1c22; --rail: #4a1a10; --chalk: #23272a; --chalk-ink: #eef0ea;
  --sign: "Playfair Display", Georgia, serif; --head: "Playfair Display", Georgia, serif; --body: "Geist", system-ui, sans-serif;
  --glow: rgba(255, 214, 150, .22);
  position: relative; isolation: isolate; color: var(--ink); font-family: var(--body);
}
.pub[data-room="parlor"] {
  --wall: #ebe4d6; --wall2: #e0d6c3; --wood: #6b4a32; --wood2: #4c3322; --brass: #c09a5f; --brass2: #8c6a3a;
  --ink: #2c2722; --soft: #6c6257; --panel: rgba(255, 252, 246, .9); --panel2: rgba(244, 238, 228, .9); --line: rgba(44, 39, 34, .12);
  --accent: #a8606d; --on-accent: #fff; --felt: #7f9c86; --rail: #6b4a32; --chalk: #2f3532;
  --sign: "Cormorant Garamond", Georgia, serif; --head: "Cormorant Garamond", Georgia, serif; --glow: rgba(255, 236, 214, .5);
}
.pub[data-room="speakeasy"] {
  --wall: #0e0d0f; --wall2: #070708; --wood: #1d1611; --wood2: #110c09; --brass: #d3ab55; --brass2: #8e6d2a;
  --ink: #efe6cf; --soft: #b9ad92; --panel: rgba(12, 11, 13, .82); --panel2: rgba(30, 26, 22, .7); --line: rgba(211, 171, 85, .22);
  --accent: #d3ab55; --on-accent: #120d06; --felt: #1c2947; --rail: #1a1410; --chalk: #1d2023;
  --sign: "Limelight", Georgia, serif; --head: "Poiret One", "Limelight", Georgia, serif; --glow: rgba(211, 171, 85, .16);
}
.pub[data-room="lodge"] {
  --wall: #3d2b1c; --wall2: #2b1e13; --wood: #7a5532; --wood2: #4f3620; --brass: #b98a4e; --brass2: #7a5528;
  --ink: #f2e8d8; --soft: #d0bfa4; --panel: rgba(34, 24, 15, .78); --panel2: rgba(60, 42, 26, .6); --line: rgba(242, 232, 216, .14);
  --accent: #d0773a; --on-accent: #1d1209; --felt: #2e5a3c; --rail: #6b4a2a; --chalk: #262b27;
  --sign: "Rye", Georgia, serif; --head: "Rye", Georgia, serif; --glow: rgba(255, 160, 80, .2);
}
.pub[data-room="garage"] {
  --wall: #1c1e22; --wall2: #121316; --wood: #2c2f35; --wood2: #1b1d21; --brass: #a9b1bb; --brass2: #5d646d;
  --ink: #e9edf1; --soft: #a7b0ba; --panel: rgba(16, 17, 20, .8); --panel2: rgba(38, 41, 47, .65); --line: rgba(233, 237, 241, .12);
  --accent: #ff4f7a; --accent2: #35e0ff; --on-accent: #12070b; --felt: #3a4048; --rail: #24272c; --chalk: #202326;
  --sign: "Tilt Neon", "Geist", sans-serif; --head: "Oswald", "Geist", sans-serif; --glow: rgba(255, 79, 122, .18);
}
.pub[data-room="sports"] {
  --wall: #10203a; --wall2: #0a1526; --wood: #5b3a22; --wood2: #3b2416; --brass: #f2c14e; --brass2: #a07a1c;
  --ink: #f3f6fa; --soft: #b8c4d6; --panel: rgba(8, 16, 30, .8); --panel2: rgba(22, 38, 64, .7); --line: rgba(243, 246, 250, .13);
  --accent: #ffb81c; --on-accent: #10203a; --felt: #a3282c; --rail: #3b2416; --chalk: #1b2230;
  --sign: "Bebas Neue", "Oswald", sans-serif; --head: "Bebas Neue", "Oswald", sans-serif; --glow: rgba(255, 184, 28, .14);
}

/* ---------- the walls ---------- */
.pub-walls { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--wall); }
.pub-walls::before, .pub-walls::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
/* light from the lamps over the table */
.pub-walls::after { background: radial-gradient(60% 38% at 50% 14%, var(--glow), transparent 70%), radial-gradient(120% 80% at 50% 120%, rgba(0, 0, 0, .45), transparent 60%); }
.pub[data-room="parlor"] .pub-walls::after { background: radial-gradient(60% 40% at 50% 12%, var(--glow), transparent 70%), radial-gradient(120% 90% at 50% 130%, rgba(60, 40, 20, .18), transparent 60%); }

/* Mahogany: raised panels with real-looking grain, a chair rail in brass */
.pub[data-room="mahogany"] .pub-walls {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.28' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.03 0 0 0 0 0.01 0 0 0 1.1 -0.45'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23g)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, transparent 0 238px, rgba(0, 0, 0, .35) 238px 240px, rgba(255, 220, 190, .06) 240px 242px),
    linear-gradient(180deg, #4a1c12, #3b1610 55%, #2a0f0a);
}
/* Parlor: a quiet botanical wallpaper above walnut wainscot */
.pub[data-room="parlor"] .pub-walls {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='160' viewBox='0 0 120 160'%3E%3Cg fill='none' stroke='%237f9c86' stroke-width='1.3' opacity='.55'%3E%3Cpath d='M60 0c-14 30 14 50 0 80s14 50 0 80'/%3E%3Cpath d='M60 26c12-10 26-8 32 2-10 8-24 8-32-2zM60 66c-12-10-26-8-32 2 10 8 24 8 32-2zM60 106c12-10 26-8 32 2-10 8-24 8-32-2zM60 146c-12-10-26-8-32 2 10 8 24 8 32-2z'/%3E%3C/g%3E%3Ccircle cx='18' cy='40' r='2.2' fill='%23c9909a' opacity='.5'/%3E%3Ccircle cx='102' cy='120' r='2.2' fill='%23c9909a' opacity='.5'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #efe9dd, #e6dece);
}
.pub[data-room="parlor"] .pub-walls::before {
  top: auto; height: 150px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.3' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.11 0 0 0 0 0.06 0 0 0 0.9 -0.4'/%3E%3C/filter%3E%3Crect width='400' height='200' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #c09a5f 0 3px, #6b4a32 3px 100%);
}
/* Speakeasy: black lacquer with gold art deco fans */
.pub[data-room="speakeasy"] .pub-walls {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48' viewBox='0 0 96 48'%3E%3Cg fill='none' stroke='%23d3ab55' stroke-width='1' opacity='.32'%3E%3Cpath d='M0 48a48 48 0 0 1 96 0M12 48a36 36 0 0 1 72 0M24 48a24 24 0 0 1 48 0M36 48a12 12 0 0 1 24 0M48 0v48'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #121014, #0b0a0c);
}
.pub[data-room="speakeasy"] .pub-walls::before { background: linear-gradient(90deg, rgba(211, 171, 85, .14) 0 1px, transparent 1px calc(100% - 1px), rgba(211, 171, 85, .14) calc(100% - 1px)); }
/* Lodge: stacked logs with chinking, warm firelight from the side */
.pub[data-room="lodge"] .pub-walls {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.18' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.09 0 0 0 0 0.04 0 0 0 1 -0.42'/%3E%3C/filter%3E%3Crect width='500' height='300' filter='url(%23g)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(180deg, #5b3f25 0, #7a5532 18px, #6a4a2c 34px, #3c2a18 44px, #d9cbb0 44px, #c9b896 47px, #2b1e13 48px),
    #4a331f;
}
.pub[data-room="lodge"] .pub-walls::after { background: radial-gradient(50% 60% at 0% 70%, rgba(255, 140, 60, .22), transparent 70%), radial-gradient(60% 38% at 50% 12%, var(--glow), transparent 70%), radial-gradient(120% 80% at 50% 120%, rgba(0, 0, 0, .5), transparent 60%); }
/* Garage: painted brick over diamond plate */
.pub[data-room="garage"] .pub-walls {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg fill='%23262a30'%3E%3Crect x='1' y='1' width='58' height='28' rx='1.5'/%3E%3Crect x='61' y='1' width='58' height='28' rx='1.5'/%3E%3Crect x='-29' y='31' width='58' height='28' rx='1.5'/%3E%3Crect x='31' y='31' width='58' height='28' rx='1.5'/%3E%3Crect x='91' y='31' width='58' height='28' rx='1.5'/%3E%3C/g%3E%3C/svg%3E"),
    #16181b;
}
.pub[data-room="garage"] .pub-walls::before {
  top: auto; height: 120px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cg fill='%23b9c1ca' opacity='.35'%3E%3Cpath d='M4 10l6-6 2 2-6 6zM18 24l6-6 2 2-6 6z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #5d646d 0 2px, #2f343a 2px, #22262b);
}
/* Sports bar: navy with pinstripes, team pennants across the top */
.pub[data-room="sports"] .pub-walls { background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 255, 255, .03) 46px 48px), linear-gradient(180deg, #13284a, #0b1729); }
.pub[data-room="sports"] .pub-walls::before {
  height: 70px; bottom: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='70'%3E%3Cpath d='M0 8q90 18 180 0' fill='none' stroke='%23d9dee6' stroke-width='1.2' opacity='.5'/%3E%3Cpath d='M20 12l12 42 12-40z' fill='%23ffb81c' opacity='.85'/%3E%3Cpath d='M70 16l12 42 12-41z' fill='%23d64545' opacity='.85'/%3E%3Cpath d='M120 16l12 42 12-42z' fill='%23f3f6fa' opacity='.8'/%3E%3C/svg%3E") repeat-x;
}

/* ---------- the layout ---------- */
.pub-in { max-width: 1180px; margin: 0 auto; padding: 1.4rem 1rem 3rem; }
.pub h2, .pub h3 { font-family: var(--head); color: var(--ink); letter-spacing: .01em; }
.pub h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 0 0 .8rem; font-weight: 700; }
.pub[data-room="sports"] h2, .pub[data-room="garage"] h2 { text-transform: none; letter-spacing: .03em; font-weight: 600; }
.pub[data-room="speakeasy"] h2 { font-weight: 400; letter-spacing: .06em; }
.pub-card { background: var(--panel); border-radius: 14px; padding: 1.1rem 1.2rem; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05); backdrop-filter: blur(2px); }
.pub[data-room="parlor"] .pub-card { box-shadow: 0 16px 36px -26px rgba(60, 40, 20, .45), inset 0 0 0 1px rgba(192, 154, 95, .25); }
.pub[data-room="speakeasy"] .pub-card { box-shadow: inset 0 0 0 1px rgba(211, 171, 85, .3), 0 18px 40px -26px #000; border-radius: 4px; }
.pub-quiet { color: var(--soft); margin: 0; }
.pub a { color: var(--accent); }
.pub .btn { font: 600 .95rem var(--body); padding: .6rem 1.1rem; border-radius: 999px; border: 0; background: var(--accent); color: var(--on-accent); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.pub .btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.pub[data-room="speakeasy"] .btn { border-radius: 3px; letter-spacing: .04em; }

/* ---------- the sign over the door ---------- */
.pub-door { display: grid; justify-items: center; gap: .7rem; padding: 1.6rem 0 1.8rem; text-align: center; }
.pub-sign { position: relative; display: inline-grid; justify-items: center; gap: .25rem; max-width: 100%; padding: 1.1rem 2.4rem 1.2rem; }
.pub-sign-name { font: 700 clamp(2rem, 6.4vw, 4.2rem)/1.02 var(--sign); overflow-wrap: anywhere; }
.pub-sign-sub { font: 500 .82rem var(--body); letter-spacing: .22em; text-transform: uppercase; opacity: .85; }
.pub-door-line { margin: 0; color: var(--soft); font-size: .98rem; }
.pub-door-line b { color: var(--ink); font-weight: 600; }

/* Mahogany: a carved board, gold-leaf letters, brass screws */
.pub[data-room="mahogany"] .pub-sign {
  border-radius: 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.35' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.02 0 0 0 0 0.01 0 0 0 1 -0.4'/%3E%3C/filter%3E%3Crect width='400' height='160' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #5e2416, #3e150c);
  box-shadow: inset 0 0 0 6px rgba(0, 0, 0, .18), inset 0 0 0 7px rgba(201, 164, 86, .55), inset 0 2px 0 8px rgba(255, 220, 180, .06), 0 22px 40px -22px #000;
}
.pub[data-room="mahogany"] .pub-sign::before, .pub[data-room="mahogany"] .pub-sign::after {
  content: ""; position: absolute; top: 14px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3c4, #c9a456 45%, #6d5124);
}
.pub[data-room="mahogany"] .pub-sign::before { left: 14px; } .pub[data-room="mahogany"] .pub-sign::after { right: 14px; }
.pub[data-room="mahogany"] .pub-sign-name, .pub[data-room="speakeasy"] .pub-sign-name {
  background: linear-gradient(180deg, #fbefc4 0%, #e7c56f 38%, #b88a2c 52%, #f2d98c 74%, #c99a3c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .45));
}
.pub[data-room="mahogany"] .pub-sign-sub { color: #e7c56f; }
/* Parlor: an oval brass frame, walnut ink, italic */
.pub[data-room="parlor"] .pub-sign {
  padding: 1.4rem 3.4rem 1.5rem; border-radius: 50%/50%;
  background: radial-gradient(ellipse at 50% 40%, #fffdf8, #f3ece0);
  box-shadow: 0 0 0 5px #fffaf1, 0 0 0 9px #c09a5f, 0 0 0 10px #8c6a3a, 0 20px 40px -24px rgba(60, 40, 20, .6);
}
.pub[data-room="parlor"] .pub-sign-name { font-style: italic; font-weight: 600; color: #4c3322; }
.pub[data-room="parlor"] .pub-sign-sub { color: #a8606d; }
/* Speakeasy: a black panel with a stepped gold deco frame */
.pub[data-room="speakeasy"] .pub-sign {
  border-radius: 2px; padding: 1.3rem 2.8rem;
  background: linear-gradient(180deg, #141215, #0a090b);
  box-shadow: inset 0 0 0 1px #d3ab55, inset 0 0 0 5px #0a090b, inset 0 0 0 6px rgba(211, 171, 85, .6), 0 22px 40px -22px #000;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}
.pub[data-room="speakeasy"] .pub-sign-name { font-weight: 400; letter-spacing: .04em; }
.pub[data-room="speakeasy"] .pub-sign-sub { color: #d3ab55; }
/* Lodge: a pine plank hanging from two chains, burned letters */
.pub[data-room="lodge"] .pub-sign {
  margin-top: 28px; border-radius: 8px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.25' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.18 0 0 0 0 0.08 0 0 0 0.9 -0.35'/%3E%3C/filter%3E%3Crect width='400' height='160' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #d9b27c, #b98a52);
  box-shadow: inset 0 0 18px rgba(80, 40, 10, .35), 0 22px 40px -24px #000;
}
.pub[data-room="lodge"] .pub-sign::before, .pub[data-room="lodge"] .pub-sign::after {
  content: ""; position: absolute; top: -30px; width: 3px; height: 30px;
  background: repeating-linear-gradient(180deg, #8b8f94 0 5px, #4a4d51 5px 7px);
}
.pub[data-room="lodge"] .pub-sign::before { left: 18%; } .pub[data-room="lodge"] .pub-sign::after { right: 18%; }
.pub[data-room="lodge"] .pub-sign-name { color: #3a1f0c; text-shadow: 0 0 1px rgba(40, 15, 0, .6), 0 1px 0 rgba(255, 230, 190, .35); font-weight: 400; }
.pub[data-room="lodge"] .pub-sign-sub { color: #5b3417; }
/* Garage: neon tubes on the brick */
.pub[data-room="garage"] .pub-sign { padding: .6rem 1rem; }
.pub[data-room="garage"] .pub-sign-name {
  font-weight: 400; color: #ffe1ea;
  text-shadow: 0 0 2px #fff, 0 0 6px #ff4f7a, 0 0 14px #ff4f7a, 0 0 28px rgba(255, 79, 122, .8), 0 0 54px rgba(255, 79, 122, .45);
  animation: pub-neon 7s infinite;
}
.pub[data-room="garage"] .pub-sign-sub { color: #c9f8ff; letter-spacing: .3em; text-shadow: 0 0 2px #fff, 0 0 8px #35e0ff, 0 0 18px rgba(53, 224, 255, .7); }
@keyframes pub-neon { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .72; } }
/* Sports bar: an LED scoreboard */
.pub[data-room="sports"] .pub-sign {
  border-radius: 8px; padding: .9rem 2.2rem 1rem;
  background: radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1.6px) 0 0 / 6px 6px, linear-gradient(180deg, #0b0d10, #05070a);
  box-shadow: inset 0 0 0 3px #2b3340, inset 0 0 0 4px #000, 0 22px 40px -22px #000;
}
.pub[data-room="sports"] .pub-sign-name { color: #ffd35a; letter-spacing: .06em; font-weight: 400; text-shadow: 0 0 10px rgba(255, 184, 28, .55), 0 0 2px rgba(255, 240, 200, .9); }
.pub[data-room="sports"] .pub-sign-sub { color: #ff5a5a; text-shadow: 0 0 8px rgba(255, 90, 90, .6); }

/* ---------- the floor: the game table and the chalkboard ---------- */
.pub-floor { display: grid; gap: 1.2rem; align-items: start; }
@media (min-width: 1000px) { .pub-floor { grid-template-columns: minmax(0, 1fr) 330px; } }
.pub-table { padding: 1rem; scroll-margin-top: 1rem; }
.pub-top { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.pub-tabs, .pub-modes { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pub-tabs button, .pub-mode, .pub-sound { font: 600 .9rem var(--body); padding: .45rem .85rem; border-radius: 999px; border: 0; box-shadow: inset 0 0 0 1px var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.pub-tabs button[aria-selected="true"], .pub-mode.on { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.pub[data-room="speakeasy"] .pub-tabs button, .pub[data-room="speakeasy"] .pub-mode, .pub[data-room="speakeasy"] .pub-sound { border-radius: 3px; }
.pub-sound { opacity: .8; }
.pub-level, .pub-names { display: inline-flex; gap: .4rem; align-items: center; font-size: .9rem; color: var(--soft); flex-wrap: wrap; }
.pub-level select, .pub-names select, .pub-names input { font: inherit; color: var(--ink); background: var(--panel2); border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 8px; padding: .35rem .55rem; max-width: 11rem; }
.pub-status { min-height: 1.4em; margin: .1rem 0 .6rem; color: var(--soft); }
@media (max-width: 620px) { .pub-status { min-height: 2.9em; } }
.pub-stage { position: relative; min-height: 220px; touch-action: none; }
.pub-stage .rm-loading { display: grid; place-items: center; min-height: 220px; margin: 0; color: var(--soft); }
/* games' own bars (the same games as NoReasonWeb's Rec Room) take the room's colors */
.pub .pool-bar, .pub .darts-bar { color: var(--ink); }
.pub .pool-info, .pub .pool-power-word, .pub .pool-spin-word { color: var(--soft); }
.pub .pool-track { background: rgba(0, 0, 0, .3); }
.pub[data-room="parlor"] .pool-track { background: rgba(44, 39, 34, .12); }
.pub .pool-nudge, .pub .pool-view { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); border: 0; background: transparent; }
.pub .darts-turn i { background: rgba(0, 0, 0, .25); color: var(--soft); }
.pub[data-room="parlor"] .darts-turn i { background: rgba(44, 39, 34, .08); }
.pub .darts-turn i.now { background: var(--accent); color: var(--on-accent); }
.pub .darts-turn i.got { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--ink); }
.pub .darts-score b { font-family: var(--head); color: var(--ink); }
.pub .darts-score > span.up b { color: var(--accent); }

/* the bartender's line, under the table */
.pub-barkeep { display: flex; gap: .75rem; align-items: flex-start; margin-top: .9rem; min-height: 48px; }
.pub-barkeep[hidden] { display: none; }
.pub-barkeep-face { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--panel2); box-shadow: inset 0 0 0 1px var(--line); }
.pub-barkeep-face svg { width: 24px; height: 24px; color: var(--accent); }
.pub-barkeep p { margin: 0; padding: .55rem .85rem; border-radius: 4px 14px 14px 14px; background: var(--panel2); line-height: 1.4; max-width: 46rem; }
.pub-barkeep p small { display: block; color: var(--soft); font-size: .78rem; margin-bottom: .1rem; }
.pub-barkeep p.fresh { animation: pub-pop .35s ease-out; }
@keyframes pub-pop { from { transform: translateY(4px); opacity: 0; } }

/* the done card after a game */
.pub-done { margin-top: 1rem; padding: 1rem; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pub-done[hidden] { display: none; }
.pub-result { margin: 0 0 .7rem; font-size: 1.12rem; font-weight: 700; }
.pub-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* ---------- the chalkboard ---------- */
.pub-chalk {
  position: relative; padding: 1.3rem 1.25rem 1.1rem; border-radius: 10px; color: var(--chalk-ink); font-family: "Patrick Hand", "Comic Sans MS", cursive; font-size: 1.12rem;
  background: radial-gradient(circle at 18% 28%, rgba(255, 255, 255, .06), transparent 42%), radial-gradient(circle at 80% 72%, rgba(255, 255, 255, .05), transparent 46%), var(--chalk);
  box-shadow: inset 0 0 0 9px var(--wood), inset 0 0 0 10px rgba(0, 0, 0, .35), inset 0 0 40px rgba(0, 0, 0, .55), 0 20px 40px -26px #000;
}
.pub[data-room="speakeasy"] .pub-chalk { box-shadow: inset 0 0 0 7px #0a090b, inset 0 0 0 8px #d3ab55, inset 0 0 40px rgba(0, 0, 0, .6), 0 20px 40px -26px #000; }
.pub[data-room="sports"] .pub-chalk { font-family: "Oswald", "Geist", sans-serif; font-size: 1rem; box-shadow: inset 0 0 0 8px #2b3340, inset 0 0 40px rgba(0, 0, 0, .55), 0 20px 40px -26px #000; }
.pub-chalk h2 { font: 400 1.85rem "Patrick Hand", cursive; color: var(--chalk-ink); margin: .1rem .2rem .5rem; }
.pub[data-room="sports"] .pub-chalk h2 { font: 400 1.9rem "Bebas Neue", sans-serif; letter-spacing: .05em; color: #ffd35a; }
.pub-chalk h3 { margin: .9rem 0 .25rem; font: 400 1.25rem "Patrick Hand", cursive; color: #ffe9a8; }
.pub[data-room="sports"] .pub-chalk h3 { font: 500 1rem "Oswald", sans-serif; letter-spacing: .06em; color: #9fc4ff; }
.pub-list { list-style: none; margin: 0; padding: 0; }
.pub-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .55rem; padding: .22rem 0; border-bottom: 1px dashed rgba(255, 255, 255, .13); }
.pub-list b { font-weight: 400; }
.pub-list .n { width: 1.3rem; opacity: .65; }
.pub-list .s { margin-left: auto; opacity: .85; }
.pub-list small { font-size: .82rem; opacity: .7; }
.pub-x { margin-left: .2rem; border: 0; background: transparent; color: inherit; font-size: 1.05rem; cursor: pointer; opacity: .55; }
.pub-x:hover, .pub-x:focus-visible { opacity: 1; }

/* ---------- the wall: brass plaques, the trophy shelf, the Wall of Shame ---------- */
.pub-wallrow { display: grid; gap: 1.2rem; margin-top: 1.4rem; }
@media (min-width: 860px) { .pub-wallrow { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.pub-plaques { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pub-plaque {
  position: relative; padding: .85rem .95rem .8rem; border-radius: 6px; color: #2b1d08; text-align: center;
  background: linear-gradient(135deg, #f6e2a4 0%, #d2a94f 28%, #f3dc95 48%, #b88a34 70%, #e9c979 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 10px 22px -14px rgba(0, 0, 0, .8);
}
.pub[data-room="garage"] .pub-plaque, .pub[data-room="sports"] .pub-plaque { background: linear-gradient(135deg, #f3f5f7, #b9c1ca 30%, #eef1f4 50%, #9aa3ad 72%, #dfe4e9); color: #1b1f24; }
.pub-plaque::before, .pub-plaque::after { content: ""; position: absolute; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #8a6a2c 70%); }
.pub-plaque::before { left: 7px; } .pub-plaque::after { right: 7px; }
.pub-plaque small { display: block; font: 600 .66rem var(--body); letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.pub-plaque b { display: block; margin: .2rem 0 .1rem; font: 700 1.15rem var(--head); text-shadow: 0 1px 0 rgba(255, 255, 255, .45); overflow-wrap: anywhere; }
.pub-plaque span { font-size: .85rem; }
.pub-shelf { margin-top: 1rem; }
.pub-trophies { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; padding: .4rem .2rem .8rem; position: relative; }
.pub-trophies::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; border-radius: 3px; background: linear-gradient(180deg, var(--wood), var(--wood2)); box-shadow: 0 8px 14px -8px #000; }
.pub-trophy { display: grid; justify-items: center; gap: .2rem; width: 96px; text-align: center; position: relative; z-index: 1; }
.pub-trophy svg { width: 46px; height: 56px; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
.pub-trophy span { font-size: .76rem; line-height: 1.2; color: var(--soft); }
.pub-trophy b { font-size: .8rem; color: var(--ink); font-weight: 600; }
.pub-shame { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.pub-frame {
  padding: .7rem .75rem; text-align: center; background: #f4efe4; color: #2b2622; transform: rotate(-1.2deg);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 0 0 7px var(--wood), 0 0 0 8px rgba(0, 0, 0, .3), 0 14px 22px -14px #000;
  margin: 8px;
}
.pub-frame:nth-child(even) { transform: rotate(1.4deg); }
.pub-frame small { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #8a2a2a; }
.pub-frame b { display: block; font: 700 1.05rem var(--head); margin: .15rem 0; }
.pub-frame span { font-size: .82rem; color: #5d554c; }

/* ---------- the mug rack: every regular's engraved mug over the bar ---------- */
.pub-mugs { margin-top: 1.4rem; }
.pub-rack { position: relative; display: flex; gap: 1.1rem; overflow-x: auto; padding: 26px .6rem 1.1rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.pub-rack::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 12px; border-radius: 3px; background: linear-gradient(180deg, var(--wood), var(--wood2)); box-shadow: 0 8px 14px -8px #000; min-width: 100%; }
.pub-mug { position: relative; flex: none; width: 92px; display: grid; justify-items: center; gap: .3rem; scroll-snap-align: start; text-align: center; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.pub-mug-cup {
  position: relative; width: 58px; height: 70px; margin-top: 6px; border-radius: 6px 6px 12px 12px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .55) 0 8%, rgba(255, 255, 255, .05) 22%, rgba(255, 255, 255, .0) 60%, rgba(0, 0, 0, .12) 100%), var(--mug, #e9d7a8);
  box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .08), 0 10px 14px -10px #000;
}
.pub-mug-cup::before { content: ""; position: absolute; right: -15px; top: 14px; width: 18px; height: 34px; border-radius: 0 14px 14px 0; box-shadow: inset -6px 0 0 -1px var(--mug, #e9d7a8), inset -6px 0 0 0 rgba(0, 0, 0, .12); }
.pub-mug-cup::after { content: ""; position: absolute; left: 50%; top: -14px; width: 2px; height: 14px; background: linear-gradient(180deg, #8b8f94, #4a4d51); }
.pub-mug-init { position: absolute; inset: 0; display: grid; place-items: center; font: 700 1.3rem var(--head); color: rgba(0, 0, 0, .55); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.pub-mug-cup.dark .pub-mug-init { color: rgba(255, 255, 255, .88); text-shadow: 0 1px 1px rgba(0, 0, 0, .45); }
.pub-mug b { font-size: .86rem; font-weight: 600; color: var(--ink); line-height: 1.15; overflow-wrap: anywhere; }
.pub-mug small { font-size: .74rem; color: var(--soft); line-height: 1.2; }
.pub-mug:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }

/* ---------- the tab, the rules, game night ---------- */
.pub-lower { display: grid; gap: 1.2rem; margin-top: 1.4rem; }
@media (min-width: 860px) { .pub-lower { grid-template-columns: 1fr 1fr; } }
.pub-tab-list { list-style: none; padding: 0; margin: 0 0 .8rem; }
.pub-tab-list li { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.pub-tab-list li .what { flex: 1 1 12rem; }
.pub-tab-list li small { color: var(--soft); }
.pub-tab-list li.paid { opacity: .55; text-decoration: line-through; }
.pub-form { display: grid; gap: .55rem; }
.pub-form .pub-row > * { flex: 1 1 9rem; }
.pub-form input, .pub-form select, .pub-form textarea { font: inherit; color: var(--ink); background: var(--panel2); border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 8px; padding: .5rem .65rem; min-width: 0; }
.pub-rules-body { white-space: pre-line; }
.pub-night { display: flex; gap: .9rem; align-items: center; padding: .8rem .9rem; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); margin-bottom: .9rem; }
.pub-night time { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font: 700 .78rem var(--body); text-transform: uppercase; line-height: 1.1; text-align: center; }
.pub-night time b { display: block; font: 700 1.4rem var(--head); }
.pub-not-money { margin: 1.4rem auto 0; max-width: 60rem; text-align: center; color: var(--soft); font-size: .86rem; }


/* ---------- the games' own controls (same games as NoReasonWeb's Rec Room; copied from noreason site.css) ---------- */
/* The pool table's own controls (games/pool.js) */
.pool { position: relative; }
.pool-table { display: block; width: 100%; outline: none; cursor: crosshair; touch-action: none; }
.pool-table:focus-visible { box-shadow: 0 0 0 3px var(--accent); border-radius: 12px; }
.pool-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem 1rem; align-items: center; margin-top: .8rem; }
.pool-spin { display: grid; justify-items: center; gap: .2rem; }
.pool-spinball { width: 72px; height: 72px; border-radius: 50%; cursor: pointer; touch-action: none; }
.pool-spinball:focus-visible, .pool-power:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pool-spin-word { font-size: .8rem; color: var(--soft); white-space: nowrap; }
.pool-power { display: grid; gap: .35rem; cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 12px; }
.pool-track { position: relative; height: 34px; border-radius: 17px; overflow: hidden; background: #00000038; box-shadow: inset 0 2px 6px #0006; }
.pool-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #6fcf7a, var(--accent) 60%, #e8573f); opacity: .85; }
.pool-stick { position: absolute; top: 50%; right: 10px; width: 78%; height: 9px; margin-top: -4.5px; border-radius: 5px;
  background: linear-gradient(90deg, #2a160a 0 22%, #141414 22% 38%, #5a2e15 38% 52%, #d9b77c 52% 96%, #f3eee2 96% 98.5%, #3d6fb3 98.5%); box-shadow: 0 2px 4px #0007; transition: transform .05s linear; }
.pool-power-word { font-size: .82rem; color: var(--soft); }
.pool-tools { display: flex; gap: .35rem; align-items: center; }
.pool-nudge, .pool-view { font: inherit; font-size: .9rem; min-height: 36px; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.pool-nudge { width: 38px; padding: 0; font-size: 1.3rem; line-height: 1; }
.pool-info { grid-column: 1 / -1; color: var(--soft); font-size: .92rem; }
@media (max-width: 620px) {
  .pool-bar { grid-template-columns: auto minmax(0, 1fr); }
  .pool-tools { grid-column: 1 / -1; justify-content: center; }
}
/* The dartboard's own bar (games/darts.js) */
.darts-board { display: block; width: 100%; outline: none; cursor: crosshair; touch-action: none; border-radius: 12px; }
.darts-board:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.darts-bar { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; justify-content: space-between; margin-top: .8rem; }
.darts-score { display: flex; gap: 1.1rem; align-items: baseline; font-size: 1rem; }
.darts-score b { font: 800 1.5rem var(--head); }
.darts-score > span { color: var(--soft); }
.darts-score > span.up { color: var(--ink); }
.darts-score > span.up b { color: var(--accent); }
.darts-turn { display: flex; flex-wrap: wrap; gap: .3rem; }
.darts-turn i { font-style: normal; min-width: 1.9rem; padding: .2rem .45rem; border-radius: 6px; text-align: center; font-size: .82rem; background: #00000026; color: var(--soft); }
.darts-turn i.got { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--ink); }
.darts-turn i.now { background: var(--accent); color: var(--on-accent); font-weight: 700; }

/* ---------- small screens ---------- */
@media (max-width: 620px) {
  .pub-in { padding: 1rem 12px 2.4rem; }
  .pub-sign { padding: .9rem 1.4rem 1rem; }
  .pub[data-room="parlor"] .pub-sign { padding: 1rem 1.8rem 1.1rem; }
  .pub-table { padding: .7rem .55rem; }
}
.pub[data-room="garage"] .pub-in, .pub[data-room="parlor"] .pub-in { padding-bottom: 170px; }
@media (prefers-reduced-motion: reduce) { .pub[data-room="garage"] .pub-sign-name { animation: none; } .pub-barkeep p.fresh { animation: none; } }

/* ---------- the pub owns its homepage: the usual homepage parts step aside ---------- */
html[data-package="pub"] main:not(#lastcall) > :not(#pk) { display: none !important; }
html[data-package="pub"] #pk { padding: 0; margin: 0; }
html[data-package="pub"] main { padding: 0; }

/* ---------- dialogs: pick the room, your mug ---------- */
.pub-dlg { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; border: 0; border-radius: 16px; padding: 1.3rem 1.3rem 1.1rem; background: var(--wall2); color: var(--ink); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7); }
.pub[data-room="parlor"] .pub-dlg { background: #fbf7ef; }
.pub-dlg::backdrop { background: rgba(10, 6, 4, .6); backdrop-filter: blur(3px); }
.pub-dlg h2 { margin: 0 0 .3rem; }
.pub-rooms { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-top: 1rem; }
.pub-room { display: grid; gap: .25rem; text-align: left; padding: .6rem; border-radius: 12px; border: 0; background: var(--panel2); color: var(--ink); cursor: pointer; font: inherit; box-shadow: inset 0 0 0 1px var(--line); }
.pub-room.on { box-shadow: inset 0 0 0 2px var(--accent); }
.pub-room:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pub-room-sw { display: block; height: 64px; border-radius: 8px; }
.pub-room b { font-size: .95rem; }
.pub-room small { color: var(--soft); font-size: .8rem; }
.pub-swatches { gap: .45rem; margin-top: .3rem; }
.pub-sw { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.pub-sw.on { box-shadow: 0 0 0 2px var(--wall2), 0 0 0 4px var(--accent); }
.pub-form label, label.pub-form { display: grid; gap: .3rem; font-size: .9rem; }

/* ---------- every page of a pub wears the room: header, footer, Board, chat (core.js sets html data-room) ---------- */
html[data-room="mahogany"]  { --ground: #1f0b07; --panel: #2a0f0b; }
html[data-room="speakeasy"] { --ground: #0a090b; --panel: #121014; }
html[data-room="lodge"]     { --ground: #22170e; --panel: #2b1e13; }
html[data-room="garage"]    { --ground: #111215; --panel: #17191c; }
html[data-room="sports"]    { --ground: #08111f; --panel: #0d1a2e; }
html[data-room="parlor"]    { --ground: #f3ede2; --panel: #fbf7ef; }
.pub [hidden] { display: none !important; }

/* ---------- check-in 2: live tables, heckles, ghosts, the highlight reel, game night, Last Call ---------- */
@media (min-width: 1100px) { .pub-lower { grid-template-columns: 1fr 1fr 1fr; } }
.pub-stage-wrap { position: relative; }
.pub-bubbles { position: absolute; top: .6rem; right: .6rem; display: grid; gap: .35rem; justify-items: end; pointer-events: none; max-width: min(60%, 18rem); z-index: 2; }
.pub-bubble { margin: 0; padding: .4rem .7rem; border-radius: 14px 14px 4px 14px; background: var(--panel); color: var(--ink); font-size: .9rem; box-shadow: 0 10px 24px -14px #000; animation: pub-pop .3s ease-out, pub-fade 5.2s ease-in forwards; }
.pub-bubble b { color: var(--accent); }
@keyframes pub-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.pub-heckle { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .7rem; }
.pub-heckle-form { display: inline-flex; gap: .35rem; flex: 1 1 14rem; }
.pub-heckle-form input { flex: 1; min-width: 0; font: inherit; color: var(--ink); background: var(--panel2); border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px; padding: .4rem .8rem; }
.pub-live { display: grid; gap: .8rem; justify-items: start; padding: 1.2rem; border-radius: 12px; background: var(--panel2); min-height: 220px; align-content: center; }
.pub-live h3 { margin: 0; font-size: 1.15rem; }
.pub-live .pub-tab-list { width: 100%; margin: 0; }
.pub-live-who { margin: 0 0 .5rem; font-weight: 600; color: var(--accent); }
.pub-sound.on { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.pub-sotn { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .8rem; margin-top: .4rem; padding: .7rem 1rem; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.pub-sotn-kick { font: 600 .72rem var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.pub-sotn .btn { padding: .4rem .9rem; font-size: .88rem; }
.pub-night2 { display: grid; gap: .6rem; margin-bottom: .9rem; padding: .8rem .9rem; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.pub-night-head { display: flex; gap: .8rem; align-items: center; }
.pub-night-head time { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font: 700 .74rem var(--body); text-transform: uppercase; line-height: 1.1; }
.pub-night-head time b { font: 700 1.3rem var(--head); }
.pub-night-head p { margin: .15rem 0 0; }
.pub-dlg-wide { width: min(980px, calc(100vw - 24px)); }
.pub-replay { min-height: 200px; }
.pub-lc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .8rem; margin: 0 0 1.4rem; }
.pub-lc-tile { display: grid; justify-items: center; padding: .9rem; border-radius: 12px; background: var(--panel); }
.pub-lc-tile b { font: 700 2rem var(--head); color: var(--accent); }
.pub-lc-tile span { color: var(--soft); font-size: .9rem; }
.pub-lc-plaques { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pub-lc-plaques .btn { background: rgba(43, 29, 8, .85); color: #f6e2a4; }
@media (max-width: 620px) { .pub-bubbles { max-width: 75%; } .pub-live { padding: .9rem; } }

/* ---------- the poker room (pub-poker.js) ---------- */
.pk-lobby .pk-bank { margin: 0; }
.pk-lobby .pk-bank b { color: var(--accent); font: 700 1.2rem var(--head); }
.pk-open { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; }
.pk-open input, .pk-open select { font: inherit; color: var(--ink); background: var(--panel); border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 8px; padding: .5rem .65rem; min-width: 0; flex: 1 1 9rem; }
.pk-note { font-size: .85rem; }
.pk-room { display: grid; gap: .8rem; }
.pk-head { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; justify-content: space-between; }
.pk-head span { color: var(--soft); font-size: .9rem; }
.pk-felt { position: relative; aspect-ratio: 16 / 9.5; border-radius: 999px; margin: 6px 4% 30px;
  background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--felt) 88%, #fff 12%), var(--felt) 58%, color-mix(in srgb, var(--felt) 70%, #000 30%));
  box-shadow: 0 0 0 14px var(--rail), 0 0 0 16px color-mix(in srgb, var(--rail) 60%, #000 40%), 0 0 0 17px rgba(255, 255, 255, .08), 0 30px 50px -24px #000, inset 0 0 60px rgba(0, 0, 0, .35); }
.pk-felt::after { content: ""; position: absolute; inset: 12% 10%; border-radius: 999px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1); pointer-events: none; }
.pk-mid { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .45rem; z-index: 1; }
.pk-board { display: flex; gap: .35rem; }
.pk-pot { margin: 0; padding: .2rem .8rem; border-radius: 999px; background: rgba(0, 0, 0, .35); color: #fff; font-weight: 700; font-size: .95rem; }
.pk-card { position: relative; display: inline-block; width: clamp(30px, 5.2vw, 52px); aspect-ratio: 5 / 7; border-radius: 6px; background: linear-gradient(160deg, #ffffff, #f1ede4); color: #1b1d22;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 4px 10px -4px rgba(0, 0, 0, .6); font-family: "Geist", system-ui, sans-serif; overflow: hidden; }
.pk-card.red { color: #c0262d; }
.pk-card.big { width: clamp(40px, 6.4vw, 64px); }
.pk-c-corner { position: absolute; left: 10%; top: 5%; display: grid; justify-items: center; line-height: .95; }
.pk-c-corner b { font-size: clamp(.7rem, 1.35vw, 1.05rem); font-weight: 700; }
.pk-c-corner i { font-style: normal; font-size: clamp(.6rem, 1.1vw, .85rem); }
.pk-c-pip { position: absolute; right: 12%; bottom: 8%; font-size: clamp(1rem, 2.4vw, 1.8rem); line-height: 1; }
.pk-back { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 80%, #000 20%) 0 4px, color-mix(in srgb, var(--accent) 55%, #000 45%) 4px 8px); box-shadow: inset 0 0 0 3px #fff, 0 4px 10px -4px rgba(0, 0, 0, .6); }
.pk-slot { background: rgba(0, 0, 0, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.pk-seat { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .2rem; min-width: 90px; z-index: 2; }
.pk-seat.empty .pk-empty { font-size: .78rem; color: rgba(255, 255, 255, .55); padding: .3rem .6rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.pk-hole { display: flex; gap: .2rem; min-height: 10px; }
.pk-hole .pk-card:nth-child(2) { margin-left: -14%; transform: rotate(6deg); }
.pk-hole .pk-card:nth-child(1) { transform: rotate(-4deg); }
.pk-plate { display: grid; justify-items: center; padding: .25rem .7rem; border-radius: 10px; background: rgba(10, 8, 6, .82); color: #f4efe6; font-size: .8rem; line-height: 1.25; box-shadow: 0 6px 14px -8px #000; max-width: 150px; }
.pk-plate b { font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-plate span { color: #e7c56f; }
.pk-seat.turn .pk-plate { box-shadow: 0 0 0 2px var(--accent), 0 0 18px var(--accent); }
.pk-seat.won .pk-plate { box-shadow: 0 0 0 2px #f2d98c, 0 0 22px rgba(242, 217, 140, .8); }
.pk-seat.folded { opacity: .55; }
.pk-dealer { position: absolute; right: -10px; top: 40%; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #222; font: 700 .7rem system-ui; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.pk-bet { position: absolute; bottom: -22px; padding: .05rem .5rem; border-radius: 999px; background: radial-gradient(circle at 30% 30%, #ffe08a, #c9a03c); color: #2b1d08; font: 700 .75rem system-ui; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.pk-shown { position: absolute; top: -18px; padding: .05rem .5rem; border-radius: 6px; background: rgba(0, 0, 0, .7); color: #fff; font-size: .72rem; white-space: nowrap; }
.pk-clock { position: absolute; left: 50%; bottom: -6px; width: 80%; height: 3px; transform: translateX(-50%); border-radius: 2px; background: var(--accent); transform-origin: left; animation: pk-clock var(--t, 40s) linear forwards; }
@keyframes pk-clock { from { transform: translateX(-50%) scaleX(1); } to { transform: translateX(-50%) scaleX(0); } }
.pk-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.pk-raise { display: grid; gap: .35rem; flex: 1 1 260px; padding: .55rem .7rem; border-radius: 12px; background: var(--panel2); }
.pk-raise-top { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pk-raise-top b { color: var(--accent); font: 700 1.1rem var(--head); margin-right: auto; }
.pk-raise input[type="range"] { width: 100%; accent-color: var(--accent); }
.pk-log { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; color: var(--soft); font-size: .85rem; }
@media (max-width: 620px) {
  .pk-felt { aspect-ratio: 3 / 4; margin: 10px 8% 30px; }
  .pk-seat { min-width: 70px; }
  .pk-plate { font-size: .72rem; padding: .2rem .45rem; max-width: 96px; }
  .pk-plate b { max-width: 88px; }
}
@media (prefers-reduced-motion: reduce) { .pk-clock { animation: none; } }
@media (max-width: 620px) {
  .pk-board .pk-card { width: 27px; }
  .pk-board { gap: .2rem; }
  .pk-mid { top: 50%; }
  .pk-hole .pk-card { width: 26px; }
  .pk-hole .pk-card.big { width: 40px; }
}

/* ---------- the card and tile tables (pub-cards.js) ---------- */
.ct-room { gap: .7rem; }
.ct-body { display: grid; gap: .7rem; }
.ct-felt { position: relative; display: grid; gap: .9rem; justify-items: center; padding: 1rem .8rem 1.1rem; border-radius: 22px; min-height: 220px;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--felt) 88%, #fff 12%), var(--felt) 60%, color-mix(in srgb, var(--felt) 70%, #000 30%));
  box-shadow: 0 0 0 10px var(--rail), 0 0 0 11px color-mix(in srgb, var(--rail) 60%, #000 40%), 0 24px 40px -24px #000, inset 0 0 50px rgba(0, 0, 0, .3); margin: 10px 10px 4px; color: #f4efe6; }
.ct-wait { align-content: center; text-align: center; }
.ct-sat { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.ct-sat li { padding: .2rem .7rem; border-radius: 999px; background: rgba(0, 0, 0, .35); font-size: .85rem; }
.ct-seat { position: relative; display: grid; justify-items: center; padding: .25rem .75rem; border-radius: 10px; background: rgba(10, 8, 6, .82); color: #f4efe6; font-size: .8rem; line-height: 1.3; box-shadow: 0 6px 14px -8px #000; }
.ct-seat b { font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-seat span { color: #e7c56f; }
.ct-seat.turn { box-shadow: 0 0 0 2px var(--accent), 0 0 18px var(--accent); }
.ct-opp, .ct-pile { display: grid; justify-items: center; gap: .35rem; }
.ct-opps { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; justify-content: center; }
.ct-pile small, .ct-took { color: rgba(255, 255, 255, .78); font-size: .8rem; margin: 0; text-align: center; }
.ct-mid { display: flex; flex-wrap: wrap; gap: 1.2rem 1.8rem; justify-content: center; align-items: flex-start; }
.ct-count b { font: 700 1.8rem/1 var(--head); color: #f2d98c; }
.ct-fan { display: flex; justify-content: center; flex-wrap: nowrap; }
.ct-fan > * + * { margin-left: -12px; }
.ct-fan .ct-tile + .ct-tile { margin-left: -8px; }
.pk-card.ct-small { width: clamp(24px, 3.6vw, 34px); }
.pk-card.ct-small .pk-c-corner b { font-size: .68rem; } .pk-card.ct-small .pk-c-corner i { font-size: .6rem; } .pk-card.ct-small .pk-c-pip { font-size: .9rem; }
.ct-hand { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; padding: .6rem .4rem; border-radius: 14px; background: var(--panel2); min-height: 4rem; }
.ct-hand .pk-card { width: clamp(38px, 6vw, 58px); }
.ct-btn { font: inherit; border: 0; padding: 0; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.ct-btn:not(:disabled):hover, .ct-btn:not(:disabled):focus-visible { transform: translateY(-5px); }
.ct-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ct-btn:disabled { cursor: default; }
.ct-on { transform: translateY(-10px); box-shadow: 0 0 0 2px var(--accent), 0 8px 16px -6px rgba(0, 0, 0, .6); }
.ct-btn.ct-on:hover { transform: translateY(-10px); }
.ct-dim { opacity: .45; }
.pk-card.ct-mark { background: linear-gradient(160deg, #fffaf0, #f3e2b4); box-shadow: inset 0 -3px 0 #c9a03c, 0 4px 10px -4px rgba(0, 0, 0, .5); }
.ct-note { margin: 0; text-align: center; color: var(--soft); font-size: .9rem; }
.ct-note b { color: var(--ink); }
.ct-scores { display: flex; flex-wrap: wrap; gap: .5rem; }
.ct-score { flex: 1 1 8rem; display: grid; gap: .1rem; padding: .45rem .75rem; border-radius: 12px; background: var(--panel2); }
.ct-score.us { box-shadow: inset 0 0 0 1px var(--accent); }
.ct-score small { color: var(--soft); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-score b { font: 700 1.5rem/1.1 var(--head); color: var(--accent); }
.ct-score span { color: var(--soft); font-size: .8rem; }
.ct-peg { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--p), color-mix(in srgb, var(--ink) 14%, transparent) var(--p)); }
.ct-last { margin: 0; color: var(--soft); font-size: .88rem; }
.ct-last summary { cursor: pointer; color: var(--ink); }
.ct-show { display: flex; flex-wrap: wrap; gap: 1rem; padding-top: .6rem; }
.ct-show > div { display: grid; gap: .3rem; }
.ct-show small { color: var(--ink); font-weight: 600; }
.ct-log li { max-width: 100%; }
/* spades: four seats round the table */
.ct-four { grid-template-areas: ". n ." "w t e" ". s ."; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 300px; }
.ct-spot.n { grid-area: n; } .ct-spot.w { grid-area: w; justify-self: start; } .ct-spot.e { grid-area: e; justify-self: end; }
.ct-four .ct-trick { grid-area: t; position: relative; width: 170px; height: 150px; }
.ct-four .ct-took { grid-area: s; }
.ct-t { position: absolute; left: 50%; top: 50%; }
.ct-t .pk-card { width: 46px; }
.ct-t.s { transform: translate(-50%, -8%); } .ct-t.n { transform: translate(-50%, -92%); } .ct-t.w { transform: translate(-125%, -50%) rotate(-8deg); } .ct-t.e { transform: translate(25%, -50%) rotate(8deg); }
/* dominoes */
.ct-tile { --tw: 26px; display: inline-flex; align-items: center; gap: 0; padding: 2px; border-radius: 6px; background: linear-gradient(160deg, #fffdf6, #ece4d2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 3px 6px -3px rgba(0, 0, 0, .55); color: #1b1d22; }
.ct-tile.v { flex-direction: column; }
.ct-half { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); width: var(--tw); height: var(--tw); padding: 3px; box-sizing: border-box; }
.ct-half i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; place-self: center; }
.ct-bar { width: 1px; align-self: stretch; margin: 3px 0; background: rgba(0, 0, 0, .35); }
.ct-tile.v .ct-bar { width: auto; height: 1px; margin: 0 3px; }
.ct-tile.back { width: 14px; height: 26px; padding: 0; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 80%, #000 20%) 0 3px, color-mix(in srgb, var(--accent) 55%, #000 45%) 3px 6px); box-shadow: inset 0 0 0 2px #fff; }
.ct-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px; max-width: 100%; }
.ct-line .ct-tile { --tw: 22px; }
.ct-line .ct-half i { width: 4px; height: 4px; }
.ct-tiles .ct-tile { --tw: 30px; }
.ct-tiles .ct-half i { width: 6px; height: 6px; }
@media (max-width: 560px) {
  .ct-four { grid-template-areas: "n n" "w e" "t t" "s s"; grid-template-columns: 1fr 1fr; }
  .ct-four .ct-trick { justify-self: center; }
  .ct-felt { margin: 8px 8px 4px; padding: .8rem .5rem 1rem; }
  .ct-hand .pk-card { width: 36px; }
}
@media (prefers-reduced-motion: reduce) { .ct-btn { transition: none; } .ct-btn:not(:disabled):hover { transform: none; } }