/* dev.tandy.beer: the new look (loaded with a version stamp: see tests/stamp-assets.mjs).
   Beer-yellow, thick ink outlines, hard shadows, stickers at a tilt: the style of
   bochie.buzz, which the bar's owner liked. The VIP lounge, the Local Legends and the
   roulette keep their dark, golden insides, as rooms set into the yellow page. */
@font-face { font-family: 'Bagel Fat One'; font-weight: 400; font-display: swap; src: url(fonts/bagel-fat-one-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bagel Fat One'; font-weight: 400; font-display: swap; src: url(fonts/bagel-fat-one-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Nunito is a variable font: one file per character set covers 400-900. */
@font-face { font-family: 'Nunito'; font-weight: 400 900; font-display: swap; src: url(fonts/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-weight: 400 900; font-display: swap; src: url(fonts/nunito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* The fonts of the dark rooms (the cards, the roulette, the Legends), as on tandy.beer. */
@font-face { font-family: 'Anton'; font-weight: 400; font-display: swap; src: url(fonts/anton-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Anton'; font-weight: 400; font-display: swap; src: url(fonts/anton-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Libre Franklin is a variable font: one file per character set covers 400-700. */
@font-face { font-family: 'Libre Franklin'; font-weight: 400 700; font-display: swap; src: url(fonts/libre-franklin-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Franklin'; font-weight: 400 700; font-display: swap; src: url(fonts/libre-franklin-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Cinzel: engraved capitals, for the Local Legends only (variable 400-700). */
@font-face { font-family: 'Cinzel'; font-weight: 400 700; font-display: swap; src: url(fonts/cinzel-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cinzel'; font-weight: 400 700; font-display: swap; src: url(fonts/cinzel-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --honey: #FFC93C; --honey-deep: #F5A300; --honey-light: #FFE59A; --paper: #FFF8E7;
  --ink: #1E1A16; --ink-soft: #4B4036; --pink: #FF8FB1; --sky: #8FD3FF; --mint: #9BE7C4;
  --radius: 22px; --shadow: 6px 6px 0 var(--ink);
  --font-display: 'Bagel Fat One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Bubbles, faintly, on the yellow. */
  --fizz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%231E1A16' stroke-opacity='.08' stroke-width='2.5'%3E%3Ccircle cx='20' cy='24' r='9'/%3E%3Ccircle cx='84' cy='14' r='5'/%3E%3Ccircle cx='58' cy='62' r='12'/%3E%3Ccircle cx='104' cy='88' r='6'/%3E%3Ccircle cx='18' cy='98' r='5'/%3E%3C/g%3E%3C/svg%3E");
  /* The dark rooms keep tandy.beer's colours. (--muted is the lightest tone that meets
     WCAG AA on their backgrounds.) */
  --accent: #D4AF37; --bg: #1B1108; --bg-deep: #150D06; --cream: #F5EBD8; --muted: #947956;
  /* Room for the row of tabs along the bottom on phones. */
  --tabbar: 0px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); font-size: 1.05rem; line-height: 1.55; color: var(--ink); background: var(--honey) var(--fizz); overflow-x: clip; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.fine { margin: 0; font-size: .85rem; color: var(--ink-soft); }

/* ---- Buttons, chips, stickers, cards ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 48px; padding: .6em 1.3em; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.1;
  color: var(--ink); background: var(--pink); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 4px 4px 0 var(--ink); cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .2s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active, .btn.down { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { cursor: default; opacity: .6; transform: none; box-shadow: 2px 2px 0 var(--ink); }
.btn--honey { background: var(--honey); }
.btn--white { background: #fff; }
.btn:focus-visible, .chip--btn:focus-visible, .tab:focus-visible, .brand:focus-visible, .mode:focus-visible, .buddy:focus-visible, .next-more:focus-visible, .motion-switch:focus-visible,
.pick-toggle:focus-visible, .pick-chip:focus-visible, .pick-all:focus-visible, .sink-glass:focus-visible, .site-foot a:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }
.chip { display: inline-block; font-family: var(--font-body); font-weight: 800; font-size: .9rem; color: var(--ink); background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: .35em .9em; box-shadow: 3px 3px 0 var(--ink); }
.chip--btn { cursor: pointer; min-height: 40px; }
.chip--btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.kicker { display: inline-block; padding: .3em .95em; font-family: var(--font-body); font-weight: 900; font-size: .8rem; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  background: var(--sky); border: 2.5px solid var(--ink); border-radius: 999px; transform: rotate(-2deg); }
.kicker--pink { background: var(--pink); }
.kicker--mint { background: var(--mint); }
.kicker--white { background: #fff; }
.card { background: #fff; border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); }
/* A word that pops: white with an ink outline, at a tilt, wobbling. */
.pop { display: inline-block; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--ink); transform: rotate(-3deg); animation: wobble 4s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(2deg) scale(1.04); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(-3deg); } }
@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes stamp { from { transform: rotate(-3deg) scale(2.2); opacity: 0; } }
@keyframes logoFade { from { opacity: 0; } to { opacity: 1; } }

/* ---- The top: the site's name, and the tabs ---- */
.top { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 1152px; margin: 0 auto; padding: 16px 16px 4px; }
.brand { display: flex; align-items: center; gap: .3em; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--ink); text-decoration: none; }
.brand svg { width: 40px; height: 45px; animation: hover 2.4s ease-in-out infinite; }
.tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: .4em 1em .4em .8em; font-weight: 900; font-size: 1rem; line-height: 1.1; color: var(--ink); background: #fff;
  border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; -webkit-tap-highlight-color: transparent; }
.tab svg { width: 22px; height: 22px; flex: none; }
.tab:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.tab:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.tab[aria-current="page"] { color: var(--honey); background: var(--ink); }
/* Phones: the tabs sit along the bottom, in reach of a thumb, like an app's. */
@media (max-width: 720px) {
  :root { --tabbar: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .top { justify-content: center; padding-top: 12px; }
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; flex-wrap: nowrap; justify-content: space-around; gap: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 3px solid var(--ink); }
  .tab { flex: 1 1 0; flex-direction: column; gap: 1px; min-height: 52px; padding: 2px; font-size: .78rem; background: none; border: 0; border-radius: 14px; box-shadow: none; }
  .tab:hover, .tab:active { transform: none; box-shadow: none; }
  .tab svg { width: 34px; height: 30px; padding: 3px 5px; border: 2.5px solid transparent; border-radius: 999px; }
  .tab[aria-current="page"] { color: var(--ink); background: none; }
  .tab[aria-current="page"] svg { background: var(--honey); border-color: var(--ink); }
}

/* ---- The three pages ----
   One document; route.js (in <head>) says which page this address is before anything is
   drawn, and fun.js swaps them without a reload. Without scripts, they all show. */
html[data-view] .view { display: none; }
html[data-view="home"] #view-home, html[data-view="vips"] #view-vips, html[data-view="games"] #view-games { display: block; }
.view:focus { outline: none; }
.lively .view.arriving { animation: viewIn .3s ease both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(12px); } }

/* ---- Taps: the first screen ---- */
.hero { position: relative; padding: 8px 16px 30px; }
.hero-inner { position: relative; max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 28px; padding-top: 22px; min-height: min(58svh, 540px); }
.eyebrow { display: inline-block; margin: 0; padding: .35em 1em; font-weight: 900; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--honey); background: var(--ink); border-radius: 999px; transform: rotate(-2deg); }
.opens-heading { margin: .32em 0 .42em; font-size: clamp(2.5rem, 7.4vw, 4.8rem); line-height: 1; }
/* Hours, minutes, seconds: three tiles. */
.countdown { min-height: 5.4rem; }
.cd-tiles { display: inline-flex; gap: 14px; }
.cd-tile { display: grid; justify-items: center; min-width: 1.75em; padding: .12em .22em .16em; font-family: var(--font-display); font-size: clamp(2.6rem, 9.5vw, 4.6rem); line-height: 1; font-variant-numeric: tabular-nums;
  background: #fff; border: 3px solid var(--ink); border-radius: 20px; box-shadow: var(--shadow); }
.cd-tile b { font-weight: 400; }
.cd-tile i { margin-top: .1em; font: 900 .78rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.cd-tile:nth-child(2) { transform: rotate(-2deg); }
.cd-tile:nth-child(3) { background: var(--honey-light); transform: rotate(2deg); }
/* ...or one sticker: "It's open!" */
.cd-status { display: inline-block; padding: .14em .5em .2em; font-family: var(--font-display); font-size: clamp(2.4rem, 9vw, 4.6rem); line-height: 1.05; background: var(--mint); border: 3px solid var(--ink); border-radius: 22px;
  box-shadow: var(--shadow); transform: rotate(-3deg); }
.lively .cd-status { animation: stamp .5s cubic-bezier(.2, 1.6, .4, 1); }
.cd-status.happy { background: var(--pink); }
.cd-status.maybe { background: var(--sky); }
.cd-status.closed { background: #fff; }
/* Happy-hour countdown and "Today: ..." events, under the status. */
.status-note { display: inline-block; max-width: 34em; margin: 1.5em 0 0; padding: .4em 1em; font-weight: 800; font-size: .95rem; line-height: 1.4; text-wrap: balance; background: #fff; border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 3px 3px 0 var(--ink); }
.tagline { margin: 1.3em 0 0; font-weight: 800; font-style: italic; font-size: 1.1rem; }
#tagline { display: inline-block; transition: opacity .3s, transform .3s; }
#tagline.out { opacity: 0; transform: translateY(8px); }

/* The bar's logo on a beer mat. Each part of the logo is its own <svg> stacked in one
   box (traced from the bar's own; see assets/). */
.hero-art { position: relative; display: grid; place-items: center; }
.coaster { position: relative; display: grid; place-items: center; width: min(400px, 100%); aspect-ratio: 1; background: #fff; border: 4px solid var(--ink); border-radius: 50%; box-shadow: 9px 9px 0 var(--ink);
  transform: rotate(-6deg); animation: bob 3.6s ease-in-out infinite; }
.coaster::before { content: ''; position: absolute; inset: 13px; border: 3px dashed var(--honey-deep); border-radius: 50%; pointer-events: none; }
.logo { position: relative; width: 78%; aspect-ratio: 2505 / 1235; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.logo svg { fill-rule: evenodd; }
.logo .layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.logo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.logo .ink { fill: var(--ink); }
.logo .l-shadow { fill: var(--honey); }

/* Bubbles rising behind it all (transform only). */
.hero-fizz { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-fizz i { position: absolute; bottom: -40px; width: 22px; height: 22px; border: 3px solid var(--ink); border-radius: 50%; background: rgba(255, 255, 255, .55); opacity: .55; animation: rise 9s linear infinite; }
.hero-fizz i:nth-child(1) { left: 5%; animation-duration: 11s; }
.hero-fizz i:nth-child(2) { left: 16%; width: 12px; height: 12px; animation-delay: -3s; animation-duration: 8s; }
.hero-fizz i:nth-child(3) { left: 31%; width: 30px; height: 30px; animation-delay: -6s; animation-duration: 13s; }
.hero-fizz i:nth-child(4) { left: 46%; width: 14px; height: 14px; animation-delay: -1.5s; }
.hero-fizz i:nth-child(5) { left: 58%; animation-delay: -7s; animation-duration: 10s; }
.hero-fizz i:nth-child(6) { left: 69%; width: 10px; height: 10px; animation-delay: -4s; animation-duration: 7s; }
.hero-fizz i:nth-child(7) { left: 80%; width: 26px; height: 26px; animation-delay: -9s; animation-duration: 12s; }
.hero-fizz i:nth-child(8) { left: 91%; width: 14px; height: 14px; animation-delay: -2.5s; animation-duration: 8.5s; }
.hero-fizz i:nth-child(9) { left: 38%; width: 9px; height: 9px; animation-delay: -5s; animation-duration: 6.5s; }
@keyframes rise { from { transform: translate(0, 0); } 50% { transform: translate(14px, -45vh); } to { transform: translate(-6px, -95vh); } }

/* The yellow runs out in drips, onto the paper below. */
.drip { display: block; width: 100%; height: 80px; margin-bottom: -1px; background: var(--paper); }
.drip path { fill: var(--honey); }
.below { --gutter: 16px; padding: 34px var(--gutter) 56px; background: var(--paper); }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 18px; min-height: 0; padding-top: 10px; text-align: center; }
  .hero-art { order: -1; }
  .coaster { width: min(250px, 62vw); box-shadow: 6px 6px 0 var(--ink); }
  .coaster::before { inset: 9px; }
  /* While open the drinks are the point: a smaller mat, so they start sooner. */
  #opens.is-open .coaster { width: min(170px, 44vw); }
  .cd-tiles { gap: 10px; }
  .drip { height: 54px; }
  .below { --gutter: 12px; padding-top: 26px; padding-bottom: 44px; }
}

/* ---- The board, shown while open: On tap, Wine, Next up ---- */
.taps { max-width: 860px; margin: 14px auto 0; display: grid; gap: 46px; text-align: left; animation: logoFade .5s ease both; }
.board-block { position: relative; padding: 0 22px 20px; }
/* Each block's name is a sticker on its top edge. */
.board-block > h2 { margin: -17px 0 14px; font-size: 1rem; line-height: 1; }
.board-block > h2 .kicker { font-size: .95rem; }
.tap-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.tap-list li { padding: 11px 0 12px; border-bottom: 2px dashed rgba(30, 26, 22, .16); }
.tap-name { font-weight: 900; font-size: 1.05rem; line-height: 1.3; }
.tap-meta { margin-top: 2px; font-size: .88rem; line-height: 1.4; color: var(--ink-soft); }
.wine-dot, .beer-dot { display: inline-block; width: 13px; height: 17px; margin-right: 8px; vertical-align: -2px; }
/* The tap a beer's on, at the right of its name. */
.tap-no { float: right; margin: 1px 0 0 12px; padding: .2em .75em; font-weight: 900; font-size: .68rem; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: var(--honey); background: var(--ink); border-radius: 999px; }
.new-badge { display: inline-block; margin-left: 8px; padding: 0 .6em; font-weight: 900; font-size: .68rem; line-height: 1.7; letter-spacing: .1em; text-transform: uppercase; background: var(--pink); border: 2px solid var(--ink); border-radius: 999px;
  vertical-align: 2px; transform: rotate(-4deg); }
.kicked { margin: 14px 0 0; font-size: .92rem; line-height: 1.7; color: var(--ink-soft); }
.kicked-label { margin-right: 8px; font-weight: 900; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.kicked-name { margin-right: 10px; text-decoration: line-through 3px var(--pink); }
@media (max-width: 640px) { .tap-list { grid-template-columns: 1fr; } .board-block { padding: 0 16px 16px; } }
/* Next up: the kegs in the order they'll go on (whichever keg kicks, the next in line
   replaces it, so there are no tap numbers here). */
.next-sub { margin: 0 0 6px; font-weight: 800; font-size: .86rem; color: var(--ink-soft); }
.next-list li { position: relative; padding-left: 44px; }
/* Place in the queue: a numbered disc; the first one's pink and pulses. */
.q-no { position: absolute; left: 0; top: 11px; width: 32px; height: 32px; display: grid; place-items: center; font-family: var(--font-display); font-size: 1rem; line-height: 1; background: #fff; border: 2.5px solid var(--ink); border-radius: 50%; }
.q-first .q-no { background: var(--pink); }
.q-pulse { position: absolute; left: 0; top: 11px; width: 32px; height: 32px; border: 3px solid var(--pink); border-radius: 50%; animation: nextPulse 2.2s ease-out infinite; }
@keyframes nextPulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.next-more { display: block; min-height: 42px; margin: 16px auto 0; padding: 0 1.2em; font: 900 .9rem/1 var(--font-body); color: var(--ink); background: var(--honey); border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
.next-more:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.board-note { max-width: 860px; margin: 26px auto 0; padding: .7em 1em; font-weight: 800; font-size: .92rem; line-height: 1.45; text-align: center; background: #fff; border: 2.5px dashed var(--ink); border-radius: 16px; }

/* What's on: the event on now, and this week's scrolling past on a dark band. */
.whats-on { display: grid; justify-items: center; gap: 18px; margin: 36px calc(var(--gutter) * -1) 0; }
.taps[hidden] + .board-note[hidden] + .whats-on { margin-top: 0; }
.on-now { margin: 0 16px; padding: .45em 1.1em; font-weight: 800; font-size: 1rem; line-height: 1.4; background: var(--mint); border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 3px 3px 0 var(--ink); }
.on-now-label { margin-right: 6px; font-weight: 900; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.live-dot { position: relative; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--ink); vertical-align: 1px; }
.live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--ink); animation: livePulse 1.8s ease-out infinite; }
@keyframes livePulse { from { transform: scale(1); opacity: .6; } to { transform: scale(3); opacity: 0; } }
.ticker { width: 100%; overflow: hidden; padding: 16px 0; color: var(--paper); background: var(--ink); }
.ticker-track { display: flex; width: max-content; animation: tickerScroll var(--ticker-time, 30s) linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-list { display: flex; list-style: none; margin: 0; padding: 0; }
.ticker-list li { padding-left: .7em; font-family: var(--font-display); font-size: clamp(1.25rem, 3.6vw, 1.9rem); line-height: 1.2; white-space: nowrap; }
.ticker-list li::after { content: '✦'; margin-left: .7em; color: var(--honey); }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- The opening: a screenful of beer that parts down the middle ----
   0-0.6s the beer rises with its foam head, bubbles going up; at 0.85s the two halves
   slide apart (their inner edges frothy) and the page is there. Transforms only. With
   animations off it isn't shown; it hides itself at the end even without the script,
   and a tap skips it. */
.intro { position: fixed; inset: 0; z-index: 60; overflow: hidden; cursor: pointer; animation: introGone 0s linear 2.05s forwards; }
.intro.leaving { animation: introLeave 0.28s ease forwards; }
.calm .intro { display: none; }
.intro-back { position: absolute; inset: 0; background: var(--bg); animation: introBack 0.4s ease 0.85s forwards; }
.intro-half { position: absolute; top: 0; bottom: 0; width: 50.5%; overflow: hidden; will-change: transform;
  background: linear-gradient(180deg, #F7BE45 0%, #EAA028 32%, #D3801A 66%, #9A5810 100%); }
.intro-l { left: 0; animation: introL 1.9s both; }
.intro-r { right: 0; animation: introR 1.9s both; }
@keyframes introL { 0% { transform: translate(0, 100%); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); } 32% { transform: translate(0, 0); }
  45% { transform: translate(0, 0); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } 100% { transform: translate(-104%, 0); } }
@keyframes introR { 0% { transform: translate(0, 100%); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); } 32% { transform: translate(0, 0); }
  45% { transform: translate(0, 0); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } 100% { transform: translate(104%, 0); } }
@keyframes introBack { to { opacity: 0; } }
@keyframes introGone { to { visibility: hidden; } }
@keyframes introLeave { to { opacity: 0; visibility: hidden; } }
/* The head: a cream band with a bubbly underside. */
.intro-foam { position: absolute; left: 0; right: 0; top: 0; height: 15vh;
  background: radial-gradient(circle at 26px 0, #FFF8E6 25px, transparent 26px) 0 100% / 52px 30px repeat-x,
    linear-gradient(180deg, #FFFDF5, #FBEFD2) 0 0 / 100% calc(100% - 14px) no-repeat; }
/* Where the beer parts: a frothy edge on each half's inner side. */
.intro-edge { position: absolute; top: 0; bottom: 0; width: 22px; opacity: 0; animation: introEdge 0.25s ease 0.84s forwards;
  background: radial-gradient(circle at 40% 50%, rgba(255,248,230,0.95) 6px, rgba(255,248,230,0) 7px) 0 0 / 22px 19px repeat-y,
    radial-gradient(circle at 65% 50%, rgba(255,248,230,0.9) 4px, rgba(255,248,230,0) 5px) 0 7px / 22px 13px repeat-y,
    radial-gradient(circle at 25% 50%, rgba(255,248,230,0.8) 3px, rgba(255,248,230,0) 4px) 0 3px / 22px 27px repeat-y; }
@keyframes introEdge { to { opacity: 1; } }
.intro-l .intro-edge { right: -11px; }
.intro-r .intro-edge { left: -11px; transform: scaleX(-1); }
.intro-bubbles i { position: absolute; bottom: -20px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(255, 250, 230, 0.75); background: rgba(255, 255, 255, 0.18);
  animation: introBubble 1.6s cubic-bezier(0.4, 0, 0.8, 0.6) infinite; }
.intro-bubbles i:nth-child(1) { left: 8%; animation-delay: 0s; }
.intro-bubbles i:nth-child(2) { left: 18%; width: 5px; height: 5px; animation-delay: 0.3s; }
.intro-bubbles i:nth-child(3) { left: 29%; width: 11px; height: 11px; animation-delay: 0.15s; }
.intro-bubbles i:nth-child(4) { left: 38%; animation-delay: 0.6s; }
.intro-bubbles i:nth-child(5) { left: 47%; width: 6px; height: 6px; animation-delay: 0.45s; }
.intro-bubbles i:nth-child(6) { left: 57%; width: 10px; height: 10px; animation-delay: 0.05s; }
.intro-bubbles i:nth-child(7) { left: 66%; width: 5px; height: 5px; animation-delay: 0.75s; }
.intro-bubbles i:nth-child(8) { left: 74%; animation-delay: 0.25s; }
.intro-bubbles i:nth-child(9) { left: 82%; width: 12px; height: 12px; animation-delay: 0.55s; }
.intro-bubbles i:nth-child(10) { left: 90%; width: 6px; height: 6px; animation-delay: 0.1s; }
.intro-bubbles i:nth-child(11) { left: 13%; width: 9px; height: 9px; animation-delay: 0.9s; }
.intro-bubbles i:nth-child(12) { left: 61%; width: 7px; height: 7px; animation-delay: 1s; }
@keyframes introBubble { from { transform: translateY(0); opacity: 0.9; } to { transform: translateY(-105vh); opacity: 0.4; } }
/* Behind the parting beer: the yellow page. */
.intro-back { background: var(--honey); }

/* ======== From tandy.beer, unchanged: the VIP lounge, its cards, and the Local Legends ======== */
/* ---- VIP lounge: deep velvet, gold trim, and a trading card per regular ----
   Kept compact and dark (the owner found the first version too loud). */
.vip { position: relative; overflow: hidden; padding: 64px 20px 56px; border-top: 3px solid #3A2A16; color: var(--cream);
  background: radial-gradient(110% 55% at 50% 0%, #34101A 0%, #22090F 52%, #16060A 100%); }
/* Gold trim just inside the top and bottom edges. */
.vip::before, .vip::after { content: ''; position: absolute; left: 0; right: 0; height: 4px; pointer-events: none;
  border-top: 1px solid rgba(212, 175, 55, 0.4); border-bottom: 1px solid rgba(212, 175, 55, 0.4); }
.vip::before { top: 12px; }
.vip::after { bottom: 12px; }
.vip-inner { max-width: 1000px; margin: 0 auto; }
.vip-head { position: relative; max-width: 520px; margin: 0 auto 30px; text-align: center; }
/* "Members only" between two fine gold lines that draw outwards on arrival. */
.vip-eyebrow { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 8px; font-weight: 700; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: #D8BC86; }
.vip-eyebrow::before, .vip-eyebrow::after { content: ''; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, #C9A227); }
.vip-eyebrow::after { background: linear-gradient(90deg, #C9A227, transparent); }
.vip-eyebrow::before { transform-origin: 100% 50%; }
.vip-eyebrow::after { transform-origin: 0 50%; }
/* The title in gold foil, with a light sweeping across it now and then (it's clipped to
   the title's box, with room for the glow). */
.vip-title { position: relative; display: inline-block; overflow: hidden; margin: -10px -24px; padding: 10px 24px; font-family: 'Anton', Impact, sans-serif; font-weight: 400;
  font-size: clamp(40px, 8vw, 72px); line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; color: #F2C879; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .vip-title-text { background: linear-gradient(180deg, #FFF3C4 0%, #F2C879 38%, #C9A227 64%, #8A6A1A 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 0 #16060A) drop-shadow(0 0 14px rgba(242, 200, 121, 0.25)); }
}
.vip-title::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 22%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 252, 235, 0.95), transparent); mix-blend-mode: overlay;
  transform: translateX(-160%) skewX(-18deg); animation: titleSheen 7s ease-in-out 0.6s infinite paused; }
.vip.live .vip-title::after { animation-play-state: running; }
@keyframes titleSheen { 0% { transform: translateX(-160%) skewX(-18deg); } 22%, 100% { transform: translateX(560%) skewX(-18deg); } }
.vip-lede { margin: 12px auto 0; max-width: 30em; font-size: 15px; line-height: 1.55; color: #DCC5A4; }

/* The entrance: a red carpet running away from you (narrow at the far end), brass posts
   at the near corners, and the velvet rope across. On arrival the carpet rolls out
   towards you (a roll of carpet travels down it, widening as it comes closer), then the
   posts rise and the rope drops into its sag with a bounce. Once. */
.vip-entrance { position: relative; width: min(340px, 86%); aspect-ratio: 340 / 150; margin: 6px auto 0; }
.carpet { position: absolute; inset: 0; transform-origin: 50% 0; }
.carpet svg { display: block; width: 100%; height: 100%; }
.carpet-roll { position: absolute; left: 2%; width: 96%; top: 0; height: 10.5%; border-radius: 999px; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, #FF7A94 0%, #C2183F 35%, #6A0820 75%, #3A0410 100%); box-shadow: inset 0 0 0 1px rgba(242, 210, 122, 0.7), 0 4px 8px rgba(0, 0, 0, 0.5);
  transform-origin: 50% 0; }
.vip-rope { position: absolute; left: -3%; right: -3%; bottom: -6%; width: 106%; height: auto; overflow: visible; }
.rope-post, .rope-line { transform-box: view-box; }
.rope-post { transform-origin: 50% 100%; }
.rope-line { transform-origin: 180px 40px; }
.lively .vip.watching:not(.entered) .carpet { transform: scaleY(0); }
.lively .vip.watching:not(.entered) .rope-post { transform: translateY(16px); opacity: 0; }
.lively .vip.watching:not(.entered) .rope-line { transform: scaleY(0.1); opacity: 0; }
.lively .vip.watching:not(.entered) .vip-eyebrow::before, .lively .vip.watching:not(.entered) .vip-eyebrow::after { transform: scaleX(0); }
.lively .vip.entered .carpet { animation: carpetOut 1.05s cubic-bezier(0.25, 0.7, 0.3, 1) 0.15s both; }
.lively .vip.entered .carpet-roll { animation: carpetRoll 1.05s cubic-bezier(0.25, 0.7, 0.3, 1) 0.15s both; }
.lively .vip.entered .rope-post { animation: ropePost 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.3) 1s both; }
.lively .vip.entered .rope-post-r { animation-delay: 1.08s; }
.lively .vip.entered .rope-line { animation: ropeDrop 1.15s cubic-bezier(0.3, 0.7, 0.4, 1) 1.35s both; }
.lively .vip.entered .vip-eyebrow::before, .lively .vip.entered .vip-eyebrow::after { animation: lineDraw 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) 0.1s both; }
@keyframes carpetOut { from { transform: scaleY(0); } to { transform: none; } }
@keyframes carpetRoll { 0% { opacity: 1; transform: translateY(0) scaleX(0.27); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(860%) scaleX(0.97); } }
@keyframes ropePost { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ropeDrop { 0% { transform: scaleY(0.1); opacity: 0; } 12% { opacity: 1; } 55% { transform: scaleY(1.25); } 75% { transform: scaleY(0.92); } 90% { transform: scaleY(1.04); } 100% { transform: scaleY(1); opacity: 1; } }
@keyframes lineDraw { from { transform: scaleX(0); } to { transform: none; } }

/* Twinkling stars round the title. transform/opacity only, and only while the lounge is
   on screen (.live), so they never cost a repaint. */
.sparkle { position: absolute; width: 16px; height: 16px; background: #FFE9A8; opacity: 0.7; pointer-events: none;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: twinkle 2.8s ease-in-out infinite paused; }
.vip.live .sparkle { animation-play-state: running; }
.sparkle.s1 { left: 4%; top: 22%; }
.sparkle.s2 { right: 6%; top: 10%; width: 20px; height: 20px; animation-delay: -0.9s; }
.sparkle.s3 { right: 14%; top: 60%; width: 12px; height: 12px; animation-delay: -2.3s; }
@keyframes twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.5) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

.vip-body { display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 400px); gap: 48px; justify-content: center; align-items: center; }
.vip.has-vips .vip-body { grid-template-columns: minmax(0, 1fr); gap: 44px; }
.vip-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
/* Rows of cards, with a part-filled last row centred rather than left hanging. */
.vip.has-vips .vip-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.vip.has-vips .vip-pass { flex: 0 1 260px; }
@media (max-width: 760px) { .vip-body { grid-template-columns: minmax(0, 290px); gap: 40px; } .vip.has-vips .vip-pass { flex-basis: 280px; } }

/* ---- The King: one VIP, crowned, enlarged and centre stage ---- */
.vip-king { display: flex; justify-content: center; margin: 0 0 40px; }
.vip-king[hidden] { display: none; }
.king-stage { position: relative; display: flex; flex-direction: column; align-items: center; width: min(330px, 100%); }
/* A warm glow behind the King that breathes (opacity only). */
.king-stage::before { content: ''; position: absolute; left: -30%; right: -30%; top: 6%; bottom: -4%; pointer-events: none; opacity: 0.75;
  background: radial-gradient(closest-side, rgba(242, 200, 121, 0.38), rgba(242, 200, 121, 0.12) 55%, transparent); animation: kingGlow 4s ease-in-out infinite paused; }
.vip.live .king-stage::before { animation-play-state: running; }
.king-crown { position: relative; z-index: 3; width: 92px; height: auto; margin-bottom: -26px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); animation: crownFloat 3.2s ease-in-out infinite paused; }
.vip.live .king-crown { animation-play-state: running; }
.king-title { position: relative; z-index: 2; margin: 30px 0 14px; padding: 6px 18px; border: 1px solid #C9A227; border-radius: 999px; background: #1B0B0F;
  font-family: 'Anton', Impact, sans-serif; font-size: 18px; letter-spacing: 0.14em; text-transform: uppercase; color: #F2C879; box-shadow: 0 0 22px rgba(242, 200, 121, 0.25); }
.king-list { list-style: none; margin: 0; padding: 0; width: 100%; position: relative; z-index: 1; }
.vip-pass.king .pass-face.pass-front { box-shadow: 0 0 0 4px #16060A, 0 0 0 6px #E9C46A, 0 0 34px rgba(242, 200, 121, 0.45), 0 26px 50px rgba(0, 0, 0, 0.6); }
.vip-pass.king .pass-name { font-size: 30px; }
@keyframes kingGlow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes crownFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ---- A pass: a two-sided trading card ----
   The card tilts (with the phone, or towards the mouse); its inner layer turns over to
   show the back. Each face is its own little world (isolation) so the foil's blend modes
   only mix with the card. The face that's turned away is also hidden half-way through
   the turn (visibility), not just by backface-visibility, which some browsers get wrong
   with blended layers inside. */
.vip-pass { position: relative; display: flex; flex-direction: column; perspective: 1100px; }
.pass-card { flex: 1 1 auto; display: flex; flex-direction: column; transform-style: preserve-3d; cursor: pointer; will-change: transform; }
.pass-inner { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.2, 1); }
.vip-pass.flipped .pass-inner { transform: rotateY(180deg); }
.pass-face { position: relative; isolation: isolate; display: flex; flex-direction: column; flex: 1 1 auto; padding: 4.6%; border-radius: 16px; overflow: hidden;
  background: var(--backing, #1B1108) center / 100% 100%; border: 1px solid #C9A227;
  box-shadow: 0 0 0 4px #16060A, 0 0 0 5px rgba(201, 162, 39, 0.4), 0 22px 44px rgba(0, 0, 0, 0.55);
  -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: visibility 0s linear 0.2s; }
/* One fixed shape (1 x 2: room for the 4:5 photo and the words), so the painted backing fits it exactly. */
.pass-front { visibility: visible; aspect-ratio: 1 / 2; }
.vip-pass.flipped .pass-front { visibility: hidden; }
.pass-back { position: absolute; inset: 0; transform: rotateY(180deg); justify-content: flex-start; visibility: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(120% 70% at 50% 0%, #3A1018, #1B0B0C 70%); border-color: #8A6A1A; }
.vip-pass.flipped .pass-back { visibility: visible; }
.ink-dark { border-color: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 4px #16060A, 0 0 0 5px rgba(255, 255, 255, 0.35), 0 22px 44px rgba(0, 0, 0, 0.55); }

/* The foil. Bottom to top on the front: the backing (the face's background), the reverse
   holo's foil, the photo (with the holo rare's foil inside it), the full-art foils, the
   words, then the glare and the gloss. A foil is its pattern (a mask, painted by cards.js)
   with a band of rainbow inside that slides as the card tilts (.holo-shift, moved by
   lounge.js) and drifts slowly by itself while on screen (its <i>). The "wash" is the same
   rainbow, faint and unmasked, for a glassy sheen. Transforms only: nothing repaints. */
.holo, .glare, .gloss { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.holo { -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center; mask-position: center; mix-blend-mode: color-dodge; }
.holo-shift, .glare-shift { position: absolute; inset: -50%; will-change: transform; }
.holo-shift i, .glare-shift i { position: absolute; inset: 0; }
.holo-shift i { background: repeating-linear-gradient(115deg, #FF5C9E 0%, #FFD24A 4.5%, #6CF08A 9%, #4BE3FF 13.5%, #7F8CFF 18%, #E86BFF 22.5%, #FF5C9E 27%);
  animation: holoDrift 9s ease-in-out infinite alternate paused; }
.tex-gold .holo-shift i { background: repeating-linear-gradient(115deg, #FFF6D0 0%, #E9B83A 5%, #FFFFFF 9%, #C9971F 14%, #FFEAA0 19%, #FFF6D0 24%); }
.vip.live .holo-shift i { animation-play-state: running; }
@keyframes holoDrift { from { transform: translate(-5%, -3%); } to { transform: translate(5%, 3%); } }
/* How strong each foil is. */
.holo-card { z-index: 1; opacity: 0.8; }
.holo-card.holo-wash { opacity: 0.14; }
.holo-art { border-radius: 10px; opacity: 0.6; }
.holo-art.holo-wash { opacity: 0.12; }
.holo-full { z-index: 3; opacity: 0.62; }
.holo-full.holo-wash { opacity: 0.16; }
.holo-full.tex-gold { opacity: 0.9; }
.holo-full.tex-gold.holo-wash { opacity: 0.2; }
/* The glare: a broad light that slides across with the tilt; stronger on the rares. */
.glare { z-index: 5; mix-blend-mode: overlay; opacity: 0.78; }
.glare-shift { transform: translate(-16%, -20%); }
.glare-shift i { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 14%, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.18) 60%); }
.finish-normal .glare { opacity: 0.45; }
.finish-ultra .glare, .finish-secret .glare { opacity: 0.9; }
/* The gloss: the card's glassy surface, a soft light from the top left and a bright rim. */
.gloss { z-index: 5; background: linear-gradient(125deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 26%, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0) 76%, rgba(255, 255, 255, 0.07) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.3); }
.pass-band { position: relative; z-index: 4; display: flex; justify-content: space-between; gap: 8px; padding: 5px 9px; border-radius: 8px;
  background: linear-gradient(90deg, #B8860B, #F5E1A4 50%, #B8860B); color: #1B1108; font-weight: 700; font-size: 9.5px; letter-spacing: 0.15em; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.pass-band.band-silver { background: linear-gradient(90deg, #8E97A3, #F3F5F8 50%, #8E97A3); }
.finish-secret .pass-band { background: linear-gradient(90deg, #A8740A, #FFF0B8 30%, #E9B83A 55%, #FFF6D8 75%, #A8740A); }
/* The photo: the whole 4:5 portrait, as framed at the admin page. */
.pass-photo { position: relative; z-index: 2; flex: none; aspect-ratio: 4 / 5; margin-top: 8px; border: 2px solid #C9A227; border-radius: 11px; overflow: hidden; background: #0E0804; }
.ink-dark .pass-photo { border-color: rgba(27, 17, 8, 0.55); }
.pass-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pass-seal { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#F5E1A4, #E79AA2, #9FD8EA, #CDEFA9, #F5E1A4); color: #1B1108; font-family: 'Anton', Impact, sans-serif; font-size: 14px; letter-spacing: 0.06em;
  transform: rotate(-12deg); box-shadow: 0 0 0 2px #1B1108, 0 4px 10px rgba(0, 0, 0, 0.5); }
/* The words sit on a panel, so they read on any backing. */
/* The words on a panel, as see-through as each backing allows (--panel, from cards.js). */
.pass-info { position: relative; z-index: 4; flex: 1 1 auto; min-height: 0; overflow: hidden; margin-top: 8px; padding: 8px 9px 2px; border-radius: 10px; background: rgba(12, 7, 3, var(--panel, 0.5)); }
.ink-dark .pass-info { background: rgba(255, 255, 255, var(--panel, 0.6)); }
.pass-front .pass-blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pass-name { margin: 0 0 5px; font-family: 'Anton', Impact, sans-serif; font-weight: 400; font-size: 22px; line-height: 1.05; text-transform: uppercase; color: var(--cream); overflow-wrap: anywhere; }
.ink-dark .pass-name { color: #1B1108; }
.finish-secret .pass-name { color: #FFE9A8; }
.pass-blurb { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: #E6D7BC; overflow-wrap: anywhere; }
.ink-dark .pass-blurb { color: #2E2216; }
.pass-foot { position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding: 6px 2px 0;
  white-space: nowrap; font-weight: 700; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: #C9B08A; }
.pass-info + .pass-foot { margin-top: auto; }
.ink-dark .pass-foot, .ink-dark .pass-set { color: #3A2A16; }
.pass-barcode { flex: none; width: 62px; height: 20px; fill: currentColor; }
/* Like a card's set number: the rarity, and its number in the set. */
.pass-set { position: relative; z-index: 4; display: flex; justify-content: space-between; margin: 3px 2px 0; font-weight: 600; font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #B79B72; }
.pass-rarity { white-space: nowrap; }
.ink-dark .pass-foot, .ink-dark .pass-set { text-shadow: 0 0 6px rgba(255, 255, 255, 0.8); }
.ink-light .pass-foot, .ink-light .pass-set { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }

/* Full art (ultra and secret rare): the photo fills the card, the words on a dark fade. */
.pass-front.full-art .pass-photo { position: absolute; inset: 6px; margin: 0; aspect-ratio: auto; border: 0; border-radius: 12px; }
.pass-front.full-art .pass-photo img { object-position: 50% 28%; }
.pass-front.full-art .pass-info { flex: none; margin-top: auto; padding-top: 34px; border-radius: 0 0 10px 10px; margin-left: -6px; margin-right: -6px;
  background: linear-gradient(180deg, rgba(10, 6, 3, 0), rgba(10, 6, 3, 0.8) 30px, rgba(10, 6, 3, 0.86)); }
.pass-front.full-art .pass-foot, .pass-front.full-art .pass-set { margin-left: -6px; margin-right: -6px; padding-left: 8px; padding-right: 8px; background: rgba(10, 6, 3, 0.86); }
.pass-front.full-art .pass-foot { margin-top: 0; }
.pass-front.full-art .pass-set { margin-top: 0; margin-bottom: -10px; padding-top: 6px; padding-bottom: 10px; }
.pass-front.full-art .pass-blurb { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pass-front.full-art .pass-seal { display: none; }

/* Badges, on the front under the name, and with what they mean on the back. */
.pass-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin: -2px 0 9px; padding: 0; }
/* On the front, badges stay on one line (the back lists them all with what they mean). */
.pass-front .pass-badges { gap: 4px; margin: 0 0 6px; }
.pass-front .badge { padding: 2px 7px 2px 16px; font-size: 9px; }
.pass-front .badge::before { left: 5px; width: 8px; height: 8px; margin-top: -4px; }
.pass-front .pass-blurb { margin-bottom: 6px; font-size: 13px; line-height: 1.4; }
.badge { position: relative; display: inline-block; padding: 3px 8px 3px 19px; border-radius: 999px; font-weight: 700; font-size: 10px; line-height: 1.25; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--tone, #F2C879); color: #1B1108; }
.badge::before { content: ''; position: absolute; left: 6px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: #1B1108; opacity: 0.75;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.tone-gold { --tone: #F2C879; }
.tone-silver { --tone: #D9DDE3; }
.tone-red { --tone: #F09A9A; }
.tone-green { --tone: #A8DDA0; }
.tone-blue { --tone: #9CCBF0; }
.tone-purple { --tone: #CDB1F0; }
.tone-pink { --tone: #F5A8CF; }
.tone-amber { --tone: #F4BE7A; }
.tone-dark { --tone: #CFC2AC; }

/* The back. */
.back-band { margin: 0; padding: 6px 10px; border-radius: 8px; background: linear-gradient(90deg, #B8860B, #F5E1A4 50%, #B8860B); color: #1B1108;
  font-weight: 700; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; }
.back-name { margin: 14px 0 8px; font-family: 'Anton', Impact, sans-serif; font-size: 23px; line-height: 1.05; text-transform: uppercase; text-align: center; color: #F2C879; overflow-wrap: anywhere; }
.back-stats { margin: 0; display: grid; gap: 7px; }
.back-stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 5px; border-bottom: 1px dashed #5A4524; }
.back-stats dt { font-weight: 700; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #C9B08A; }
.back-stats dd { margin: 0; font-size: 13.5px; text-align: right; color: var(--cream); }
.back-stats dd small { display: block; margin-top: 1px; font-size: 11px; color: #B79B72; }
/* Dues: green when this month's pint is in, amber when it's due. */
.dues-paid dd { color: #8FDB9A; font-weight: 700; }
.dues-paid dd::before { content: '✓ '; }
.dues-due dd { color: #F4BE7A; font-weight: 700; }
.back-blurb { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: #E6D7BC; }
.back-badges { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.back-badges li { display: grid; gap: 3px; justify-items: start; }
.back-about { font-size: 12.5px; line-height: 1.4; color: #E6D7BC; }
.back-steps { margin: 4px 0 0; padding-left: 22px; display: grid; gap: 9px; font-size: 15px; line-height: 1.4; color: var(--cream); }
.back-steps li::marker { font-family: 'Anton', Impact, sans-serif; color: #F2C879; }
.back-small { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: #C9B08A; }
.pass-back .pass-barcode { margin-top: auto; padding-top: 10px; align-self: center; fill: #C9B08A; }

/* Turn over. */
.pass-flip { position: absolute; top: -11px; right: -11px; z-index: 6; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 2px solid #16060A; border-radius: 50%;
  background: linear-gradient(180deg, #F5E1A4, #C9A227); color: #1B1108; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); }
.pass-flip:focus-visible { outline: 3px solid #FFE9A8; outline-offset: 2px; }
.pass-flip[aria-pressed="true"] svg { transform: scaleX(-1); }

/* The empty pass: a spotlit silhouette waiting for a face. */
.pass-empty { background: radial-gradient(70% 55% at 50% 38%, rgba(255, 233, 168, 0.24), transparent 70%), #120A04; }
.pass-silhouette { position: absolute; left: 18%; right: 18%; bottom: 0; width: 64%; height: auto; }
/* On the silhouette's head (its centre is two-thirds of the way down the frame). */
.pass-q { position: absolute; left: 0; right: 0; top: 66.7%; transform: translateY(-50%); text-align: center; font-family: 'Anton', Impact, sans-serif; font-size: 44px; line-height: 1; color: #F2C879; }
.pass-here { position: absolute; left: 0; right: 0; top: 12px; margin: 0; text-align: center; font-weight: 700; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #F2C879; }
#vip-wanted .holo-art.holo-wash { mix-blend-mode: soft-light; opacity: 0.35; }

/* Cards are dealt in, one after another, the first time the lounge comes on screen. */
.lively .vip.watching:not(.dealt) .vip-pass.deal { opacity: 0; }
.lively .vip.dealt .vip-pass.deal { animation: dealIn 0.75s cubic-bezier(0.2, 0.8, 0.25, 1) both; animation-delay: calc(var(--i, 0) * 0.11s + 0.15s); }
@keyframes dealIn { from { opacity: 0; transform: translateY(46px) rotate(-5deg) scale(0.9); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }

/* Under the cards, just the call to action (the owner's choice, 2026-10-16). */
.vip-pitch { text-align: center; }
/* "How to get in:" then the answer in gold foil, with a glint sweeping across it and
   stars twinkling round it — transform/opacity only, and only while on screen (.live). */
.vip-how { margin: 0; }
.vip-how-label { margin: 0 0 6px; font-weight: 700; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: #D8BC86; }
.vip-how-cta { position: relative; display: inline-block; margin: 0; padding: 2px 4px; }
.gold-text { display: block; white-space: nowrap; font-family: 'Anton', Impact, sans-serif; font-size: clamp(28px, 8.4vw, 48px); line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase; color: #F2C879; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold-text { background: linear-gradient(180deg, #FFF8DC 0%, #FFE08A 22%, #E9B83A 45%, #B8860B 62%, #8A6410 74%, #E6C25A 88%, #FFF1B8 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 0 #16060A) drop-shadow(0 0 16px rgba(255, 210, 110, 0.3)); }
}
/* The glint: a bright diagonal band that brightens the gold as it passes ("overlay"
   lifts the bright letters a lot and the dark velvet around them hardly at all). */
.glint { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.glint::before { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 50%, transparent); mix-blend-mode: overlay;
  transform: translateX(-160%) skewX(-20deg); animation: glint 4.2s ease-in-out infinite paused; }
.vip.live .glint::before { animation-play-state: running; }
@keyframes glint { 0%, 55% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(420%) skewX(-20deg); } }
.sparkle.c1 { left: -14px; top: -6px; width: 14px; height: 14px; animation-delay: -0.4s; }
.sparkle.c2 { right: -16px; top: 4px; width: 18px; height: 18px; animation-delay: -1.5s; }
.sparkle.c3 { right: 22%; bottom: -12px; width: 11px; height: 11px; animation-delay: -2.2s; }
.sparkle.c4 { left: 18%; bottom: -10px; width: 10px; height: 10px; animation-delay: -1s; }
.vip.has-vips .vip-pitch { max-width: 520px; margin: 0 auto; text-align: center; }
.vip-fine { max-width: 46em; margin: 36px auto 0; text-align: center; font-size: 12.5px; line-height: 1.55; color: #C4A57F; }

/* ---- Local Legends: a hall of fame in black and gold ----
   Gold that glows, not glitters: engraved capitals, fine double rules, portraits in
   gilded arches. Rarer than the VIPs, and it should feel it. */
.legends { position: relative; padding: 76px 20px 64px; color: #EFE3C8; overflow: hidden;
  background: radial-gradient(70% 45% at 50% 0%, rgba(242, 200, 121, 0.13), transparent 70%), linear-gradient(180deg, #0E0A06, #080604); }
.legends::before { content: ''; position: absolute; inset: 14px; pointer-events: none; border: 1px solid rgba(201, 162, 39, 0.5);
  box-shadow: inset 0 0 0 5px #0A0705, inset 0 0 0 6px rgba(201, 162, 39, 0.28); }
.legends-inner { position: relative; max-width: 960px; margin: 0 auto; text-align: center; }
.legends-eyebrow { margin: 0 0 12px; font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 12px; letter-spacing: 0.42em; text-transform: uppercase; color: #C9A227; }
.legends-title { position: relative; display: inline-block; overflow: hidden; margin: -14px -28px; padding: 14px 28px; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: clamp(38px, 8.6vw, 74px); line-height: 1.05; letter-spacing: 0.05em; color: #F2C879; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .legends-word { background: linear-gradient(180deg, #FFF6D8 0%, #F5D98A 30%, #D4AF37 55%, #9A7416 78%, #E9C46A 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 18px rgba(242, 200, 121, 0.28)); }
}
/* A slow sheen across the title while it's on screen. */
.legends-title::after { content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 18%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 250, 230, 0.9), transparent); mix-blend-mode: overlay;
  transform: translateX(-200%) skewX(-18deg); animation: legendSheen 6.5s ease-in-out infinite paused; }
.legends.live .legends-title::after { animation-play-state: running; }
@keyframes legendSheen { 0%, 60% { transform: translateX(-200%) skewX(-18deg); } 100% { transform: translateX(650%) skewX(-18deg); } }
.legends-rule { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px auto 0; }
.legends-rule span { width: min(120px, 28vw); height: 1px; background: linear-gradient(90deg, transparent, #C9A227); }
.legends-rule span:last-child { background: linear-gradient(90deg, #C9A227, transparent); }
.legends-rule i { width: 9px; height: 9px; background: #F2C879; transform: rotate(45deg); box-shadow: 0 0 12px rgba(242, 200, 121, 0.6); }
.legends-lede { max-width: 32em; margin: 18px auto 0; font-size: 15px; line-height: 1.6; color: #CDBB98; }
.legends-grid { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 36px 30px; }
.legend { flex: 0 1 230px; display: flex; flex-direction: column; align-items: center; }
/* The arch: a gilded frame round the portrait, with a soft glow that breathes. */
.legend-frame { position: relative; width: 100%; aspect-ratio: 4 / 5; padding: 7px; border-radius: 50% 50% 14px 14px / 38% 38% 14px 14px;
  background: linear-gradient(160deg, #FFF3C4, #C9A227 30%, #7A5C12 55%, #E9C46A 80%, #8A6A1A); }
.legend-frame::before { content: ''; position: absolute; inset: -14px; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(242, 200, 121, 0.35), transparent); opacity: 0.6; animation: kingGlow 5s ease-in-out infinite paused; }
.legends.live .legend-frame::before { animation-play-state: running; }
.legend-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: inherit; box-shadow: 0 0 0 2px #0A0705; }
.legend-glint { position: absolute; inset: 7px; overflow: hidden; border-radius: 50% 50% 9px 9px / 38% 38% 9px 9px; pointer-events: none; }
.legend-glint::before { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 26%;
  background: linear-gradient(90deg, transparent, rgba(255, 245, 220, 0.55), transparent); mix-blend-mode: overlay;
  transform: translateX(-180%) skewX(-16deg); animation: legendSheen 7.5s ease-in-out infinite paused; animation-delay: calc(var(--i, 0) * 0.8s); }
.legends.live .legend-glint::before { animation-play-state: running; }
.legend-plaque { position: relative; margin-top: -14px; padding: 9px 18px 8px; min-width: 76%; border: 1px solid #C9A227; border-radius: 4px;
  background: linear-gradient(180deg, #2A2012, #140F08); box-shadow: inset 0 0 0 3px #0E0A06, inset 0 0 0 4px rgba(201, 162, 39, 0.35), 0 8px 20px rgba(0, 0, 0, 0.6); }
.legend-name { margin: 0; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: 0.05em; color: #F2C879; overflow-wrap: anywhere; }
.legend-since { margin: 3px 0 0; font-family: 'Cinzel', Georgia, serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #B9A27A; }
.legend-citation { max-width: 22em; margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: #D9C9A6; overflow-wrap: anywhere; }
/* Waiting for the first: an empty arch with a spotlight and a laurel. */
.legend-empty .legend-frame { display: grid; place-items: center; background: linear-gradient(160deg, #6E5A2A, #3A2F16 50%, #6E5A2A); }
.legend-empty .legend-frame::after { content: ''; position: absolute; inset: 7px; border-radius: 50% 50% 9px 9px / 38% 38% 9px 9px;
  background: radial-gradient(60% 50% at 50% 35%, rgba(242, 200, 121, 0.16), transparent 70%), #0C0906; }
.legend-laurel { position: relative; z-index: 1; width: 52%; height: auto; opacity: 0.85; }
.legend-empty .legend-name { color: #C9B08A; }
.legend-empty[hidden] { display: none; }
.legends-fine { max-width: 40em; margin: 40px auto 0; font-size: 12.5px; line-height: 1.55; color: #9E8B68; }
/* They rise into place the first time the section comes on screen. */
.lively .legends.watching:not(.arrived) .legend, .lively .legends.watching:not(.arrived) .legends-rule { opacity: 0; }
.lively .legends.arrived .legend { animation: legendRise 1s cubic-bezier(0.2, 0.8, 0.25, 1) both; animation-delay: calc(var(--i, 0) * 0.15s + 0.25s); }
.lively .legends.arrived .legends-rule { animation: ruleOpen 1.1s cubic-bezier(0.2, 0.8, 0.25, 1) 0.1s both; }
@keyframes legendRise { from { opacity: 0; transform: translateY(30px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes ruleOpen { from { opacity: 0; transform: scaleX(0.2); } to { opacity: 1; transform: none; } }
/* ---- The rooms: the VIP lounge and the Local Legends, set into the yellow page ----
   Inside they're as on tandy.beer (above); here they get the new look's frame: a thick
   ink outline, round corners and a hard shadow. */
.rooms { max-width: 1120px; margin: 0 auto; padding: 22px 16px 64px; display: grid; gap: 40px; }
.room { border: 3px solid var(--ink); border-radius: 28px; box-shadow: 8px 8px 0 var(--ink); }
.vip.room { border-top: 3px solid var(--ink); }
/* The gold trim and the Legends' inner frame follow the round corners. */
.vip.room::before, .vip.room::after { left: 26px; right: 26px; }
.legends.room::before { border-radius: 16px; }
/* The cards keep the type they were designed in. */
.pass-face { font-family: 'Libre Franklin', system-ui, sans-serif; }
.vip-lede, .vip-fine, .legends-lede, .legend-citation, .legends-fine { font-family: 'Libre Franklin', system-ui, sans-serif; }
@media (max-width: 720px) {
  .rooms { padding: 14px 8px 44px; gap: 28px; }
  .room { border-radius: 22px; box-shadow: 5px 5px 0 var(--ink); }
  .vip.room { padding: 54px 12px 46px; }
  .legends.room { padding: 64px 14px 54px; }
}

/* ======== From tandy.beer, unchanged: the roulette and its free-play table ======== */
/* ---- Roulette: the wheel, and the free-play table beside it (under it on phones) ---- */
.roulette-play { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; }
@media (min-width: 900px) { .roulette-play { flex-direction: row; justify-content: center; gap: 56px; } }
.wheel { --size: min(84vw, 58vh, 420px); width: var(--size); height: var(--size); position: relative; flex-shrink: 0; margin: 0; padding: 0; border: none; background: none; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wheel[hidden] { display: none; }
/* The idle glow is a fixed shadow on its own layer whose opacity pulses: the compositor
   animates that for free. Animating box-shadow directly repainted the whole wheel
   ~60 times a second, forever, even when scrolled out of view. */
.wheel::before { content: ''; position: absolute; inset: -2%; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.4); opacity: 0; animation: wheelGlow 3.6s ease-in-out infinite; }
.wheel[aria-disabled="true"] { cursor: default; }
.wheel[aria-disabled="true"]::before { animation: none; }
.wheel:focus-visible { outline: 3px solid #F2C879; outline-offset: 12px; }
/* The bowl never moves; the rotor and the ball each turn on their own layer, drawn once.
   (The old wheel's rotor was a CSS gradient that the browser re-drew every frame of the
   spin, which is what made it judder.) */
.bowl, .rotor, .disc { position: absolute; inset: 0; border-radius: 50%; }
.bowl svg, .disc svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bowl { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.6)); }
/* The rotor turns inside a round clip: a turning square's corners would otherwise poke
   out of the wheel, change the page's overflow every frame and make the browser repaint
   the whole page throughout the spin (tests/performance.test.mjs checks it doesn't). */
.rotor { z-index: 2; overflow: hidden; }
.disc { will-change: transform; }
.num { font-family: 'Anton', Impact, sans-serif; font-size: 13.5px; fill: #F5EBD8; }
/* A zero-size point at the wheel's centre, not a full-size box: a rotated square's
   corners poke past the screen edge on phones and make the page scroll sideways. */
.ball-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; pointer-events: none; will-change: transform; }
.ball { position: absolute; left: calc(var(--size) * -0.02); top: calc(var(--size) * -0.02); width: calc(var(--size) * 0.04); height: calc(var(--size) * 0.04); border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff, #EFEADF 42%, #9A9287 100%); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7), inset 0 -1px 2px rgba(0, 0, 0, 0.25); will-change: transform; }
.hub { position: absolute; top: 50%; left: 50%; width: calc(var(--size) * 0.22); height: calc(var(--size) * 0.22); margin: calc(var(--size) * -0.11) 0 0 calc(var(--size) * -0.11); border-radius: 50%; z-index: 4;
  background: radial-gradient(circle at 35% 30%, #F5E1A4, var(--accent) 55%, #7A5C12 100%); border: 3px solid #0B0704; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; }
.result { width: 70%; height: 70%; border-radius: 50%; border: 2px solid #0B0704; display: none; align-items: center; justify-content: center; font-family: 'Anton', Impact, sans-serif; font-size: calc(var(--size) * 0.07); line-height: 1; color: var(--cream); }
.result.show { display: flex; }

/* The free-play table: green felt, standing up to fit a phone. */
.table { width: min(360px, 100%); display: flex; flex-direction: column; gap: 12px; }
.table[hidden] { display: none; }
.table-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bank { margin: 0; font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #B79B72; }
.bank strong { display: block; font-family: 'Anton', Impact, sans-serif; font-weight: 400; font-size: 26px; line-height: 1.1; letter-spacing: 0.02em; color: var(--accent); }
.chip-picker { display: flex; gap: 7px; }
.chip-btn { width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, 0.8); background: var(--chip); color: #fff;
  font: 700 11px/1 'Libre Franklin', system-ui, sans-serif; box-shadow: 0 0 0 2px var(--chip), 0 3px 6px rgba(0, 0, 0, 0.5); cursor: pointer; transition: transform 0.15s ease; }
.chip-btn[aria-checked="true"] { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--chip), 0 0 0 4px #F2C879, 0 6px 10px rgba(0, 0, 0, 0.5); }
.chip-btn:disabled { opacity: 0.5; cursor: default; }
.chip-btn:focus-visible, .spot:focus-visible, .table-btn:focus-visible, .chips-refill:focus-visible { outline: 3px solid #F2C879; outline-offset: 2px; }
.chip-5 { --chip: #B3203A; }
.chip-25 { --chip: #1F7A45; }
.chip-100 { --chip: #26262C; }
.chip-500 { --chip: #5B2A86; }
/* The last dozen numbers, newest first (the newest ringed in gold). */
.spins-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.spins-row[hidden] { display: none; }
.spins-label { flex: none; font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #B79B72; }
.spins { list-style: none; margin: 0; padding: 2px; display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.spins li { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 400 12px/1 'Anton', Impact, sans-serif; color: #F5EBD8;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.spins li:first-child { width: 28px; height: 28px; font-size: 14px; box-shadow: inset 0 0 0 2px #F2C879; }
.felt { display: grid; grid-template-columns: 0.85fr 0.85fr 1fr 1fr 1fr; grid-template-rows: repeat(14, minmax(30px, auto)); gap: 3px; padding: 8px; border-radius: 14px;
  background: radial-gradient(120% 80% at 50% 0%, #1E6B43, #0F4A2C 70%, #0B3B23); border: 2px solid #8A6A1A; box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.45), 0 10px 26px rgba(0, 0, 0, 0.45); }
.spot { position: relative; display: grid; place-items: center; min-height: 30px; padding: 0; border: 1px solid rgba(245, 235, 216, 0.45); border-radius: 4px; background: transparent;
  color: #F5EBD8; font: 400 15px/1 'Anton', Impact, sans-serif; cursor: pointer; }
.spot:disabled { cursor: default; }
.n-red { background: #A6192E; }
.n-black { background: #141414; }
.n-green { background: #1F5C3A; }
.spot:not(:disabled):hover { box-shadow: inset 0 0 0 2px rgba(242, 200, 121, 0.7); }
.outside { font: 700 11px/1.1 'Libre Franklin', system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.dozen .spot-label, .even-money .spot-label { writing-mode: vertical-rl; transform: rotate(180deg); }
.o-red { background: rgba(166, 25, 46, 0.85); }
.o-black { background: rgba(20, 20, 20, 0.85); }
/* The winning places glow for a moment after the ball lands. */
.spot.won { animation: spotWin 0.65s ease-in-out 4; }
@keyframes spotWin { 50% { box-shadow: inset 0 0 0 3px #FFE9A8, 0 0 14px rgba(255, 233, 168, 0.8); } }
/* Chips on the table: a little stack showing how much is on that spot. */
.stack { position: absolute; z-index: 1; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 12px; display: none; place-items: center;
  font: 700 10px/1 'Libre Franklin', system-ui, sans-serif; color: #fff; background: var(--chip); border: 2px dashed rgba(255, 255, 255, 0.85); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); }
.stack.on { display: grid; }
.table-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.table-btn { min-height: 38px; padding: 0 14px; border: 1px solid #6B5436; border-radius: 999px; background: none; color: var(--cream); font: 700 11px/1 'Libre Franklin', system-ui, sans-serif;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.table-btn:disabled { opacity: 0.35; cursor: default; }
.bet-total { margin: 0 0 0 auto; font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #B79B72; }
.bet-total strong { margin-left: 4px; font-size: 14px; letter-spacing: 0.02em; color: var(--cream); }
.table-result { min-height: 1.4em; margin: 0; text-align: center; font-weight: 700; font-size: 15px; color: #F2C879; }
.chips-refill { align-self: center; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--accent); color: var(--bg-deep);
  font: 700 12px/1 'Libre Franklin', system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.chips-refill[hidden] { display: none; }
.table-note { margin: 0; text-align: center; font-size: 12px; line-height: 1.5; color: #B79B72; }

/* ======== From tandy.beer: the pop-up when a wheel picks a drink (restyled below) ======== */
/* The pint pop-up: card pops in, the glass pours in the beer's colour, foam swells, bubbles rise. */
.pint-pop { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px; background: rgba(12, 7, 3, 0.62); }
.pint-pop[hidden] { display: none; }
.pint-card { position: relative; width: min(320px, 100%); padding: 28px 24px 24px; border-radius: 20px; background: var(--cream); color: #1B1108; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.pint-pop.show .pint-card { animation: pintPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.pint { display: block; width: 104px; height: auto; margin: 0 auto 10px; overflow: visible; }
.pint-fill { transform: translateY(132px); }
.pint-pop.show .pint-fill { animation: pintPour 1.4s cubic-bezier(0.3, 0.7, 0.35, 1) 0.2s forwards; }
/* Foam grows up from the beer's surface: a thin cap while pouring, the full head as it lands. */
.pint-foam { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0.28); }
.pint-pop.show .pint-foam { animation: pintFoam 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s forwards; }
.pint-bubbles circle { opacity: 0; }
.pint-pop.show .pint-bubbles circle { animation: bubbleRise 2.2s linear 1.2s infinite; }
.pint-pop.show .pint-bubbles circle:nth-child(2) { animation-delay: 1.55s; }
.pint-pop.show .pint-bubbles circle:nth-child(3) { animation-delay: 1.9s; }
.pint-pop.show .pint-bubbles circle:nth-child(4) { animation-delay: 2.3s; }
.pint-pop.show .pint-bubbles circle:nth-child(5) { animation-delay: 2.65s; }
.pint-pop.show .pint-bubbles circle:nth-child(6) { animation-delay: 3s; }
@keyframes pintPop { from { opacity: 0; transform: scale(0.82) translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pintPour { from { transform: translateY(132px); } to { transform: translateY(0); } }
@keyframes pintFoam { to { transform: scaleY(1); } }
@keyframes bubbleRise { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 0.85; } 100% { opacity: 0; transform: translateY(-104px); } }
/* The wine glass: wine pours in, sloshes, and fizzes if it's sparkling. */
.wineglass { display: block; width: 104px; height: auto; margin: 0 auto 10px; overflow: visible; }
.pint[hidden], .wineglass[hidden] { display: none; }
.wine-fill { transform: translateY(46px); }
.pint-pop.show .wine-fill { animation: winePour 1.4s cubic-bezier(0.3, 0.7, 0.35, 1) 0.2s forwards; }
.pint-pop.show .wine-surface { animation: wineSlosh 1.1s ease-in-out 1.4s 2; }
.wine-bubbles circle { opacity: 0; }
.pint-pop.show .wineglass.fizz .wine-bubbles circle { animation: fizzRise 1.5s linear 1.3s infinite; }
.pint-pop.show .wineglass.fizz .wine-bubbles circle:nth-child(2) { animation-delay: 1.6s; }
.pint-pop.show .wineglass.fizz .wine-bubbles circle:nth-child(3) { animation-delay: 1.85s; }
.pint-pop.show .wineglass.fizz .wine-bubbles circle:nth-child(4) { animation-delay: 2.2s; }
.pint-pop.show .wineglass.fizz .wine-bubbles circle:nth-child(5) { animation-delay: 2.5s; }
@keyframes winePour { from { transform: translateY(46px); } to { transform: translateY(0); } }
@keyframes wineSlosh { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-12px); } 75% { transform: translateX(12px); } }
@keyframes fizzRise { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-34px); } }
.pint-note { margin: -10px 0 18px; font-style: italic; font-size: 14px; color: #6B5436; }
.pint-note[hidden] { display: none; }
.pint-label { margin: 0; font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #6B5436; }
.pint-name { margin: 4px 0 6px; font-family: 'Anton', Impact, sans-serif; font-weight: 400; font-size: 30px; line-height: 1.05; text-transform: uppercase; }
.pint-meta { margin: 0 0 18px; font-size: 14px; color: #6B5436; }
.pint-again { min-height: 44px; padding: 0 24px; border: 0; border-radius: 999px; background: #1B1108; color: var(--accent); font: 600 14px/1 'Libre Franklin', system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.pint-close { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; font-size: 26px; line-height: 1; color: #6B5436; cursor: pointer; }
.pint-again:focus-visible, .pint-close:focus-visible { outline: 3px solid #B8860B; outline-offset: 2px; }

/* The foam burst behind the pop-up as the result lands. */
.burst { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; }
.burst span { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--c, #FFF8E6); opacity: 0;
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.1); animation: burstOut 0.95s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes burstOut { 0% { opacity: 0.95; transform: translate(0, 0) scale(0.3); } 70% { opacity: 0.9; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); } }

/* The opening bell: a pint pours up the whole screen, "TAPS ARE OPEN", then it clears. */
.bell { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.bell[hidden] { display: none; }
.bell.ringing { animation: bellOut 0.6s ease 3.6s forwards; }
.bell-pour { position: absolute; inset: 0; background: linear-gradient(180deg, #F2B33D 0%, #D98A1C 55%, #8E5310 100%); transform: translateY(100%); }
.bell.ringing .bell-pour { animation: bellPour 1.4s cubic-bezier(0.3, 0.7, 0.35, 1) forwards; }
.bell-foam { position: absolute; left: -20px; right: -20px; top: -46px; height: 90px;
  background: radial-gradient(circle at 24px 30px, #FFF8E6 22px, transparent 23px) 0 0 / 48px 52px repeat-x, linear-gradient(#FFF8E6, #FFF8E6) 0 30px / 100% 60px no-repeat; }
.bell-pour span { position: absolute; bottom: -12px; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.bell.ringing .bell-pour span { animation: bellBubble 2.4s linear 0.6s infinite; }
.bell-pour span:nth-child(2) { left: 18%; animation-delay: 0.9s !important; }
.bell-pour span:nth-child(3) { left: 40%; width: 7px; height: 7px; animation-delay: 1.3s !important; }
.bell-pour span:nth-child(4) { left: 63%; animation-delay: 0.7s !important; }
.bell-pour span:nth-child(5) { left: 84%; width: 8px; height: 8px; animation-delay: 1.6s !important; }
.bell-text { position: relative; margin: 0; padding: 0 16px; text-align: center; font-family: 'Anton', Impact, sans-serif; font-size: clamp(56px, 13vw, 160px); line-height: 0.95;
  text-transform: uppercase; color: #FFF8E6; text-shadow: 0 4px 0 #6B3A0C, 0 12px 40px rgba(0, 0, 0, 0.45); opacity: 0; }
.bell.ringing .bell-text { animation: bellText 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s forwards; }
@keyframes bellPour { to { transform: translateY(0); } }
@keyframes bellBubble { from { transform: translateY(0); opacity: 0.8; } to { transform: translateY(-100vh); opacity: 0; } }
@keyframes bellText { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes bellOut { to { opacity: 0; } }

/* The logo easter egg: five taps and the foam overflows. A head of foam boils up over
   the logo (its own layer, scaled from its base), thick drips run down from it and a few
   drops let go, bubbles pop on top, then it all settles away. */
.foam-spill { position: absolute; left: -8%; right: -8%; top: -26%; height: 78%; pointer-events: none; z-index: 3; }
.foam-head { position: absolute; left: 0; right: 0; top: 0; height: 100%; transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 8px rgba(60, 30, 5, 0.35));
  animation: foamSurge 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both, foamBoil 0.55s ease-in-out 0.7s 3 alternate, foamAway 0.8s ease-in 2.9s forwards; }
.foam-head svg { display: block; width: 100%; height: 100%; }
.foam-drip { position: absolute; top: 90%; border-radius: 0 0 50% 50% / 0 0 26% 26%; transform-origin: 50% 0; transform: scaleY(0);
  background: linear-gradient(90deg, #EBCF9C, #FDF2D8 40%, #FFFEF8 55%, #F3DFB8); box-shadow: inset -2px -3px 0 rgba(184, 138, 72, 0.25);
  animation: foamDrip 1.25s cubic-bezier(0.5, 0, 0.8, 0.45) forwards, foamFade 0.8s ease-in 2.9s forwards; }
/* A round end on each drip, the way a heavy drip hangs. */
.foam-drip::after { content: ''; position: absolute; left: -12%; right: -12%; bottom: -28%; aspect-ratio: 1; border-radius: 50%; background: inherit; box-shadow: inherit; }
.foam-drop { position: absolute; top: calc(90% + var(--from, 60px)); width: 12px; height: 15px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; opacity: 0;
  background: linear-gradient(90deg, #EBCF9C, #FFFEF8 50%, #F3DFB8); animation: foamDrop 0.9s cubic-bezier(0.55, 0, 1, 0.45) forwards; }
.foam-pop { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.95); opacity: 0;
  animation: foamPop 0.45s ease-out forwards; }
@keyframes foamSurge { from { transform: scaleY(0.05) translateY(30%); } to { transform: none; } }
@keyframes foamBoil { to { transform: scale(1.03, 1.06); } }
@keyframes foamAway { to { transform: scaleY(0.6) translateY(-12%); opacity: 0; } }
@keyframes foamDrip { to { transform: scaleY(1); } }
@keyframes foamFade { to { opacity: 0; } }
@keyframes foamDrop { 0% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--fall, 200px)); } }
@keyframes foamPop { 0% { opacity: 0; transform: scale(0.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.7); } }

/* ---- Games ---- */
.games { position: relative; max-width: 1120px; min-height: 76svh; margin: 0 auto; padding: 4px 16px 72px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.games-head { max-width: 680px; text-align: center; }
.games-head h2 { margin: .3em 0 .3em; font-size: clamp(2.3rem, 7vw, 3.8rem); line-height: 1.02; }
.games-lede { margin: 0; font-weight: 800; font-size: 1.1rem; }
/* Which game: a row of chunky buttons. */
.modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; }
.mode { display: inline-flex; align-items: center; gap: .5em; min-height: 48px; padding: .4em 1.1em .4em .8em; font: 900 1rem/1.15 var(--font-body); color: var(--ink); background: #fff; border: 2.5px solid var(--ink); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; -webkit-tap-highlight-color: transparent; }
.mode svg { width: 24px; height: 24px; flex: none; }
.mode:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.mode:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.mode[aria-pressed="true"] { color: var(--honey); background: var(--ink); transform: rotate(-2deg); }
/* The beer and wine wheels while the bar's shut. */
.mode.locked { color: var(--ink-soft); background: var(--honey-light); border-style: dashed; box-shadow: none; cursor: default; transform: none; }
/* A locked one says when, under its name. */
.mode.locked { display: inline-grid; grid-template-columns: auto auto; column-gap: .5em; align-items: center; text-align: left; }
.mode.locked svg { grid-row: 1 / 3; }
.mode-lock { font-weight: 700; font-size: .72rem; line-height: 1.2; }
.sound-line { margin: -6px 0 0; }
/* Phones: "Pick my" goes (still read out by screen readers), so the games fit on two lines. */
@media (max-width: 560px) {
  .games { gap: 18px; }
  .modes { gap: 9px; }
  .mode { min-height: 44px; padding: .3em .85em .3em .6em; font-size: .92rem; }
  .mode svg { width: 20px; height: 20px; }
  .mode-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mode[data-mode="beer"] .mode-name, .mode[data-mode="wine"] .mode-name { text-transform: capitalize; }
  .mode-lock { text-transform: none; }
}

/* The roulette's room: dark and golden, like the lounge. */
.roulette-play { width: 100%; max-width: 980px; padding: 34px 20px; color: #EFE6D2; font-family: 'Libre Franklin', system-ui, sans-serif;
  background: radial-gradient(120% 70% at 50% 0%, #2B1B0E, var(--bg-deep) 75%); border: 3px solid var(--ink); border-radius: 28px; box-shadow: 8px 8px 0 var(--ink); }
@media (max-width: 720px) { .roulette-play { padding: 24px 12px; border-radius: 22px; box-shadow: 5px 5px 0 var(--ink); } }

/* "Pick my beer" / "Pick my wine": fairground wheels, in the new look's ink and paper. */
.beer-wheel { --size: min(88vw, 62vh, 440px); width: var(--size); height: var(--size); flex-shrink: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.beer-wheel[aria-disabled="true"] { cursor: default; }
.beer-wheel:focus-visible { outline: 3px dashed var(--ink); outline-offset: 10px; }
.beer-wheel svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(8px 8px 0 var(--ink)); }
.bw-seg { stroke: var(--ink); stroke-width: 2.5; }
.bw-sep { stroke: var(--ink); stroke-width: 2.5; }
.bw-peg { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.bw-label { font-family: var(--font-body); font-weight: 900; }
.bw-hub-text { font-family: var(--font-display); font-size: 21px; fill: var(--ink); }
.bw-pointer { fill: var(--pink); stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.wine-wheel .bw-pointer { fill: var(--mint); }
.bw-bulb { fill: #6B5A3A; }
.bw-bulb.on { fill: var(--honey); }
.bw-bulbs.win .bw-bulb { animation: bulbFlash .36s steps(1) 4; }
@keyframes bulbFlash { 50% { fill: #6B5A3A; } }
.beer-hint { margin: -4px 0 0; font-weight: 900; font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; }
/* Choosing what's on the beer/wine wheel. */
.pick-edit { width: min(600px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pick-toggle { min-height: 46px; display: inline-flex; align-items: center; gap: 12px; padding: 0 6px 0 18px; font: 800 .92rem/1.2 var(--font-body); color: var(--ink); background: #fff; border: 2.5px solid var(--ink); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
.pick-cta { padding: .5em 1em; font-weight: 900; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--honey); background: var(--ink); border-radius: 999px; }
.pick-toggle[aria-expanded="true"] .pick-cta { color: var(--ink); background: var(--mint); box-shadow: inset 0 0 0 2px var(--ink); }
.pick-panel { width: 100%; padding: 18px; text-align: center; background: #fff; border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); }
.pick-help { margin: 0 0 12px; font-weight: 700; font-size: .9rem; color: var(--ink-soft); }
.pick-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.pick-chip { display: inline-flex; align-items: center; min-height: 42px; padding: 6px 14px 6px 10px; font: 800 .92rem/1.25 var(--font-body); color: var(--ink); text-align: left; background: var(--honey-light); border: 2.5px solid var(--ink);
  border-radius: 999px; cursor: pointer; }
.pick-chip[aria-pressed="false"] { color: var(--ink-soft); text-decoration: line-through; background: none; border-style: dashed; }
.pick-chip[aria-pressed="false"] svg { opacity: .35; }
.pick-chip:disabled { cursor: not-allowed; }
.pick-all { margin-top: 12px; min-height: 42px; padding: 0 16px; font: 900 .82rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; color: var(--ink); background: none; border: 0; cursor: pointer; }

/* The result pop-up, as a sticker: over the whole screen now, not just the games. */
.pint-pop { position: fixed; z-index: 50; background: rgba(30, 26, 22, .6); }
.pint-card { width: min(330px, 100%); color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 26px; box-shadow: 8px 8px 0 var(--ink); }
.pint-label { font-weight: 900; color: var(--ink-soft); }
.pint-name { margin: 6px 0 8px; font-family: var(--font-display); font-size: 1.9rem; line-height: 1.05; text-transform: none; }
.pint-meta, .pint-note { color: var(--ink-soft); }
.pint-again { min-height: 48px; padding: 0 1.4em; font: 400 1.15rem/1 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--pink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.pint-again:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.pint-close { color: var(--ink); }
.pint-again:focus-visible, .pint-close:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }
.burst span { border: 2.5px solid var(--ink); box-shadow: none; }

/* ---- The new games: a picture to play on, and the score beside it ---- */
.game { width: 100%; }
.game-card { max-width: 940px; margin: 0 auto; padding: 24px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; align-items: center; border-radius: 28px; box-shadow: 8px 8px 0 var(--ink); }
.game-stage { position: relative; width: 100%; max-width: 420px; aspect-ratio: 300 / 340; margin: 0 auto; overflow: hidden; border: 3px solid var(--ink); border-radius: 22px;
  background: radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .55) 0 6px, transparent 7px), radial-gradient(circle at 82% 30%, rgba(255, 255, 255, .45) 0 4px, transparent 5px), radial-gradient(circle at 50% 38%, #CFEFFF 0 45%, var(--sky) 100%);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.game-side { display: grid; gap: 16px; min-width: 0; }
.game-side h3 { margin: 0; font-size: 2rem; line-height: 1.05; }
.game-how { margin: 0; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { margin: 0; padding: .45em .8em .5em; background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; }
.stat span { display: block; font-weight: 900; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.stat strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.8rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.game-quip { margin: 0; min-height: 3.5em; padding: .7em 1em; font-weight: 800; font-size: 1.05rem; line-height: 1.4; background: var(--paper); border: 2.5px dashed var(--ink); border-radius: 16px; }
.game-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
/* A stamp across the picture: "BURP!", "97". */
.game-banner { position: absolute; left: 50%; top: 14px; z-index: 4; padding: .3em .8em; font-family: var(--font-display); font-size: clamp(1.3rem, 5vw, 1.9rem); line-height: 1.1; white-space: nowrap; background: var(--honey); border: 3px solid var(--ink);
  border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); transform: translateX(-50%) rotate(-4deg); }
.lively .game-banner { animation: bannerStamp .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bannerStamp { from { transform: translateX(-50%) rotate(-4deg) scale(2.4); opacity: 0; } }
/* Phones: one column, in playing order: what to do, the picture, the buttons right under
   it (so both are on screen at once), then how it went. */
@media (max-width: 760px) {
  .game-card { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px 14px; }
  .game-side { display: contents; }
  .game-side h3 { order: 0; font-size: 1.7rem; text-align: center; }
  .game-how { order: 1; font-size: .95rem; line-height: 1.45; text-align: center; }
  .game-stage { order: 2; max-width: 280px; }
  .game-buttons { order: 3; justify-content: center; }
  .game-quip { order: 4; min-height: 0; }
  .stats { order: 5; }
  .game-card .fine { order: 6; text-align: center; }
}

/* Sink a pint: the glass is the button. */
.sink-glass { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; margin: 0; padding: 0; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.sink-glass svg { display: block; width: 62%; height: auto; overflow: visible; transform-origin: 50% 90%; }
.sink-fill { transition: transform .13s ease-out; }
/* "glug" drifting up from the glass. */
.glug { position: absolute; z-index: 3; font-family: var(--font-display); font-size: 1.25rem; line-height: 1; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; pointer-events: none; }

/* Perfect pour. */
.pour-art { display: block; width: 100%; height: 100%; }
.pour-handle { transform-box: view-box; transform-origin: 205px 34px; transition: transform .12s ease; }
.pouring .pour-handle { transform: rotate(-32deg); }
.pour-line-label { font: 900 13px var(--font-body); fill: var(--ink); }
#pour-hold { touch-action: none; -webkit-touch-callout: none; }

/* ---- The foot of the page ---- */
.site-foot { padding: 46px 16px calc(56px + var(--tabbar)); text-align: center; color: var(--paper); background: var(--ink); }
.footer-big { margin: 0 0 .25em; font-family: var(--font-display); font-size: 2.2rem; line-height: 1.1; color: var(--honey); }
.site-foot .about { max-width: 40em; margin: 0 auto 12px; font-size: .95rem; line-height: 1.6; }
/* Readable, not faint: this line is what tells people the site isn't the bar's own. */
.fan-note { margin: 0; font-weight: 800; font-size: .95rem; color: var(--honey-light); }
.preview-note { margin: 10px 0 0; font-size: .85rem; color: var(--honey-light); }
.site-foot a { color: var(--honey); font-weight: 800; }
/* The switch at the bottom: animations on or off for this visitor. */
.motion-line { margin: 20px 0 0; }
.motion-switch { min-height: 40px; padding: 0 1.1em; font: 800 .88rem/1 var(--font-body); color: var(--ink); background: #fff; border: 2.5px solid var(--paper); border-radius: 999px; cursor: pointer; }
.motion-switch:focus-visible { outline-color: var(--honey); }
.motion-switch[aria-pressed="true"] { background: var(--mint); }

/* The opening bell, in the new look's lettering. */
.bell-text { font-family: var(--font-display); font-size: clamp(3.4rem, 14vw, 9rem); line-height: 1; text-transform: none; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 7px 7px 0 var(--ink); }

/* ---- Frothy, the site's mug, in the corner: tap for bar wisdom ---- */
.buddy { position: fixed; right: 16px; bottom: calc(16px + var(--tabbar)); z-index: 30; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; background: #fff; border: 3px solid var(--ink); border-radius: 50%;
  box-shadow: 3px 3px 0 var(--ink); cursor: pointer; animation: hover 2.4s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.buddy svg { width: 40px; height: 45px; }
.bubble { position: fixed; right: 16px; bottom: calc(92px + var(--tabbar)); z-index: 30; max-width: min(290px, calc(100vw - 32px)); padding: 12px 16px; font-weight: 800; line-height: 1.4; background: #fff; border: 3px solid var(--ink);
  border-radius: 18px 18px 4px 18px; box-shadow: 4px 4px 0 var(--ink); transform-origin: bottom right; }
.lively .bubble.show { animation: bubblePop .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bubblePop { from { transform: scale(.3); opacity: 0; } }
@media (max-width: 720px) { .buddy { right: 10px; width: 54px; height: 54px; } .buddy svg { width: 33px; height: 37px; } .bubble { right: 10px; bottom: calc(78px + var(--tabbar)); } }
#confetti { position: fixed; inset: 0; z-index: 70; width: 100%; height: 100%; pointer-events: none; }

@keyframes wheelGlow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes bellFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- Animations off ----
   <html class="calm">: the phone asks for reduced motion (and this visitor hasn't turned
   animations on), or they've switched them off at the bottom of the page. Set before the
   page is drawn, by motion.js. Things still appear; the movement goes. */
.calm { scroll-behavior: auto; }
/* The new look's wobbles, bobs and bubbles. */
.calm .pop, .calm .coaster, .calm .brand svg, .calm .buddy, .calm .wheel::before { animation: none; }
.calm .hero-fizz { display: none; }
.calm #tagline { transition: none; }
.calm .btn, .calm .tab, .calm .mode, .calm .sink-fill, .calm .pour-handle { transition: none; }
.calm .glug { display: none; }
/* Beer/wine wheels: the spin and the pour stay (they're the point); the flashing,
   bouncing, sloshing and fizzing go. Chasing lights are switched off in JS. */
.calm .bw-bulbs.win .bw-bulb, .calm .pint-pop.show .pint-bubbles circle, .calm .pint-pop.show .wine-surface, .calm .pint-pop.show .wineglass.fizz .wine-bubbles circle { animation: none; }
.calm .pint-pop.show .pint-card { animation: logoFade .3s ease both; }
/* Next up, the lounge and the Legends sit still: no pulse, no twinkle, no drift, no tilt. */
.calm .q-pulse { animation: none; opacity: 0; }
.calm .sparkle, .calm .glint::before, .calm .legends-title::after, .calm .legend-glint::before, .calm .legend-frame::before,
.calm .king-stage::before, .calm .king-crown, .calm .holo-shift i, .calm .vip-title::after { animation: none; }
.calm .pass-card, .calm .pass-inner, .calm .pass-face { transition: none; }
.calm .ticker-track { animation: none; width: auto; }
.calm .ticker-list { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
.calm #ticker-copy { display: none; }
.calm .live-dot::after { animation: none; opacity: 0; }
.calm .burst span { animation: none; display: none; }
.calm .bell.ringing .bell-pour { animation: bellFadeIn .4s ease forwards; transform: none; opacity: 0; }
.calm .bell.ringing .bell-pour span { animation: none; }
.calm .bell.ringing .bell-text { animation: bellFadeIn .4s ease .3s forwards; transform: none; }
.calm .foam-head { animation: bellFadeIn .3s ease both, foamFade .6s ease 2.6s forwards; }
.calm .foam-drip, .calm .foam-drop, .calm .foam-pop { display: none; }
.calm .spot.won { animation: none; box-shadow: inset 0 0 0 3px #FFE9A8; }
.calm .chip-btn { transition: none; }
/* The roulette spin is the whole point of the wheel, so it isn't removed or shortened;
   only the ball's hops off the frets go (see SPIN in app.js). Likewise the new games:
   the beer still goes down, and still pours. */