/* Beanville — the BEAN Machine pages on XRPL Home. Cream + cocoa, chunky ink outlines (from the Beanville playtest).
   Every class used by the BEAN pages lives here; pages scope it with <body class="bm-page">. */
.bm-page {
  color-scheme: light;
  --bg: #FFF6E6; --surface: #FFFFFF; --surface-2: #F7EBD6; --line: rgba(43,27,20,.14); --edge: #2B1B14;
  --text: #2B1B14; --muted: #6B5446; --accent: #C8322F; --accent-ink: #FFFFFF; --accent-soft: rgba(200,50,47,.10);
  --butter: #FFC93C; --butter-soft: #FFE9A8; --sign: #1F6B4F; --sign-ink: #FFFFFF; --sign-soft: #D7EDE3;
  --burn: #B24E14; --ok: #1F7A55; --bad: #B3261E; --warn: #8A5B00;
  --t-common: #6B5446; --t-uncommon: #1E6FA8; --t-rare: #0F6E6C; --t-epic: #6B3FC8; --t-legendary: #8A5B00; --t-mythic: #1F7A55;
  --pantry: #B7793F; --pantry-bg: #F3E1C7; --jelly: #D6457A; --jelly-bg: #FBD9E6; --odd: #6B3FC8; --odd-bg: #E4DBF7; --drift: #0F6E6C; --drift-bg: #D9EFEC;
  --sky: #CDEBF5; --grass: #B6E09A; --shadow: 0 6px 0 var(--edge);
  --f-display: "Bagel Fat One", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r-lg: 24px; --r-md: 16px; --r-sm: 12px;
}
/* Themes: no choice yet = follow the device (light or dark). The Beanville switch sets data-theme="light" | "dark" | "dood". */
@media (prefers-color-scheme: dark) {
  .bm-page:not([data-theme]) {
    color-scheme: dark;
    --bg: #1C120D; --surface: #2A1C15; --surface-2: #36251C; --line: rgba(255,240,220,.14); --edge: #0A0604;
    --text: #FFF6E6; --muted: #D2BFAB; --accent: #FF6B5E; --accent-ink: #2B0A06; --accent-soft: rgba(255,107,94,.16);
    --butter-soft: #4A3A14; --sign: #2F8B67; --sign-soft: #1D3B30; --burn: #FF9A57; --ok: #6FD6A5; --bad: #FF8A80; --warn: #FFC93C;
    --t-common: #D2BFAB; --t-uncommon: #7CC0F5; --t-rare: #4FC1B9; --t-epic: #B99BFF; --t-legendary: #FFC93C; --t-mythic: #6FD6A5;
    --pantry: #D89A5C; --pantry-bg: #3B2A1A; --jelly: #F07AA3; --jelly-bg: #3F1E2B; --odd: #A58BF0; --odd-bg: #2C2248; --drift: #4FC1B9; --drift-bg: #173432;
    --sky: #1E3448; --grass: #24402A;
  }
}
.bm-page[data-theme="dark"] {
    color-scheme: dark;
    --bg: #1C120D; --surface: #2A1C15; --surface-2: #36251C; --line: rgba(255,240,220,.14); --edge: #0A0604;
    --text: #FFF6E6; --muted: #D2BFAB; --accent: #FF6B5E; --accent-ink: #2B0A06; --accent-soft: rgba(255,107,94,.16);
    --butter-soft: #4A3A14; --sign: #2F8B67; --sign-soft: #1D3B30; --burn: #FF9A57; --ok: #6FD6A5; --bad: #FF8A80; --warn: #FFC93C;
    --t-common: #D2BFAB; --t-uncommon: #7CC0F5; --t-rare: #4FC1B9; --t-epic: #B99BFF; --t-legendary: #FFC93C; --t-mythic: #6FD6A5;
    --pantry: #D89A5C; --pantry-bg: #3B2A1A; --jelly: #F07AA3; --jelly-bg: #3F1E2B; --odd: #A58BF0; --odd-bg: #2C2248; --drift: #4FC1B9; --drift-bg: #173432;
    --sky: #1E3448; --grass: #24402A;
}
/* Dood mode: the DoodLabs lab look — black, neon green, gold, marker headings. */
.bm-page[data-theme="dood"] {
    color-scheme: dark;
    --bg: #000000; --surface: #101010; --surface-2: #161616; --line: rgba(0,255,160,.25); --edge: #00E28D;
    --text: #EFFFF8; --muted: #9ECFBB; --accent: #00FFA0; --accent-ink: #00140C; --accent-soft: rgba(0,255,160,.12);
    --butter: #FFD166; --butter-soft: #3A3014; --sign: #00E28D; --sign-ink: #00140C; --sign-soft: #0B2A1F; --burn: #FF9A57; --ok: #14FFB6; --bad: #FF6B6B; --warn: #FFD166;
    --t-common: #9ECFBB; --t-uncommon: #7CC0F5; --t-rare: #14FFB6; --t-epic: #C39BFF; --t-legendary: #FFD166; --t-mythic: #00FFA0;
    --pantry: #D89A5C; --pantry-bg: #1F170E; --jelly: #F07AA3; --jelly-bg: #2A0F1A; --odd: #B99BFF; --odd-bg: #1B1430; --drift: #14FFB6; --drift-bg: #0B2420;
    --sky: #0B1F1A; --grass: #0F2A1C; --shadow: 0 6px 0 #00563A, 0 0 22px rgba(0,255,160,.16);
    --f-display: "Permanent Marker", "Bagel Fat One", "Arial Rounded MT Bold", system-ui, sans-serif;
}
.bm-page[data-theme="dood"] .bm-net.test { background: #3A3014; color: #FFD166; }
.bm-page[data-theme="dood"] .bv-popsign, .bm-page[data-theme="dood"] .bv-popsign * { background-color: #0B2A1F; color: #00FFA0 !important; }
.bm-page[data-theme="dood"] .bv-popsign { border-color: #00FFA0; box-shadow: 0 0 24px rgba(0,255,160,.35); }
.bm-page[data-theme="dood"] .bv-popsign * { background-color: transparent; }
body.bm-page { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font: 16px/1.5 var(--f-body); }
.bm-page *, .bm-page *::before, .bm-page *::after { box-sizing: border-box; }
.bm-page [hidden] { display: none !important; }
.bm-page :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bm-page button, .bm-page select, .bm-page input { font: inherit; color: inherit; }
.bm-wrap { max-width: 1160px; margin: 0 auto; padding: 16px 16px 72px; display: grid; gap: 18px; }

/* network strip */
.bm-net { display: block; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .85rem; text-align: center; border: 2px solid var(--edge); }
.bm-net.test { background: var(--butter-soft); color: var(--text); }
.bm-net.main { background: #FFD9D6; color: #7A1410; }

/* Beanville top: brand + pills + tabs */
.bv-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bv-brand { display: flex; align-items: baseline; gap: 8px 14px; flex-wrap: wrap; }
.bv-brand .logo { margin: 0; font: 400 clamp(34px, 6vw, 50px)/1 var(--f-display); letter-spacing: .5px; color: var(--text); text-decoration: none; }
.bv-brand .sub { font-size: 14px; font-weight: 600; color: var(--muted); }
.bv-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 2px solid var(--edge); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--muted); }
.pill b { color: var(--text); font-family: var(--f-mono); }
.pill.pop { background: var(--sign); color: var(--sign-ink); letter-spacing: .08em; }
.pill.pop b { color: var(--sign-ink); font-size: 15px; letter-spacing: 0; }

.bm-hero { display: grid; gap: 6px; }
.bm-eyebrow, .eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bm-hero h1 { margin: 0; font: 400 clamp(30px, 5vw, 42px)/1.05 var(--f-display); color: var(--text); text-wrap: balance; }
.bm-hero p { margin: 0; color: var(--muted); max-width: 74ch; }
.bm-tabs { position: sticky; top: 0; z-index: 10; display: flex; gap: 6px; padding: 6px; margin-top: 8px; border-radius: 999px; background: var(--surface); border: 3px solid var(--edge); overflow-x: auto; scrollbar-width: none; }
.bm-tabs a { flex: 1 0 auto; text-align: center; padding: 8px 16px; border-radius: 999px; font-weight: 700; color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: 0; }
.bm-tabs a:hover { background: var(--surface-2); }
.bm-tabs a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }

/* cards + type */
.bm-card { background: var(--surface); border: 3px solid var(--edge); border-radius: var(--r-lg); padding: 20px; min-width: 0; }
.bm-card h2 { margin: 0 0 8px; font: 400 26px/1.1 var(--f-display); color: var(--text); text-wrap: balance; }
.bm-card h3 { margin: 0; font-size: 17px; }
.bm-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bm-row.between { justify-content: space-between; }
.hint, .muted { color: var(--muted); }
.hint { font-size: .9rem; margin: 4px 0 0; line-height: 1.5; }
.num, .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.mono { font-size: .85rem; overflow-wrap: anywhere; }
.bm-page a { color: var(--accent); font-weight: 700; }

/* buttons */
.bm-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 3px solid var(--edge); background: var(--surface); color: var(--text); font: 700 16px var(--f-body); text-decoration: none; cursor: pointer; box-shadow: none; }
.bm-page .btn:hover:not(:disabled) { background: var(--surface-2); }
.bm-page .btn.primary { background: var(--accent); color: var(--accent-ink); }
.bm-page .btn.primary:hover:not(:disabled) { filter: brightness(1.05); background: var(--accent); }
.bm-page .btn.secondary { background: var(--surface); color: var(--text); }
.bm-page .btn.gold { background: var(--butter); color: #2B1B14; }
.bm-page .btn.burn, .bm-page .btn.bm-roast { background: var(--burn); color: #FFF6E6; }
.bm-page .btn.big { min-height: 60px; padding: 0 34px; font: 400 24px/1 var(--f-display); letter-spacing: .5px; box-shadow: var(--shadow); }
.bm-page .btn.big:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--edge); }
.bm-page .btn.sm { min-height: 38px; padding: 0 12px; font-size: 13px; border-width: 2px; }
.bm-page .btn:disabled { opacity: .45; cursor: not-allowed; }

/* notes + badges + tiers */
.bm-note { margin: 10px 0 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border-left: 6px solid var(--ok); }
.bm-note.bad { border-left-color: var(--bad); }
.bm-note.warn { border-left-color: var(--butter); }
.bm-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--text); border: 2px solid var(--line); }
.bm-badge.ok { background: var(--sign-soft); color: var(--ok); border-color: transparent; }
.bm-badge.warn { background: var(--butter-soft); color: var(--text); border-color: transparent; }
.bm-badge.bad { background: var(--accent-soft); color: var(--bad); border-color: transparent; }
.bm-tier { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1.5px solid currentColor; vertical-align: 2px; }
.bm-tier.common { color: var(--t-common); } .bm-tier.uncommon { color: var(--t-uncommon); } .bm-tier.rare { color: var(--t-rare); } .bm-tier.epic { color: var(--t-epic); } .bm-tier.legendary { color: var(--t-legendary); } .bm-tier.mythic { color: var(--t-mythic); }
.fam { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--famBg, var(--surface-2)); color: var(--text); border: 2px solid var(--famC, var(--line)); }
.bm-rarity { display: inline-flex; align-items: baseline; gap: 4px; font: 700 13px var(--f-mono); color: var(--t-legendary); }

/* Xaman sign card */
.bm-xaman { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 12px; padding: 14px; border-radius: var(--r-md); background: var(--surface-2); border: 3px solid var(--edge); }
.bm-xaman img { border-radius: 12px; background: #fff; padding: 6px; border: 2px solid var(--edge); }
.bm-xaman-side { flex: 1 1 220px; }
.bm-xaman-side p { margin: 0 0 8px; }
/* review 3: what you approve, beside the QR */
.bm-signnet { display: inline-block; font-weight: 800; font-size: .78rem; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; border: 2px solid var(--edge); }
.bm-signnet.test { background: var(--butter-soft); color: var(--text); }
.bm-signnet.main { background: var(--accent); color: var(--accent-ink); }
.bm-signinfo { margin: 6px 0 10px; display: grid; gap: 4px; font-size: .92rem; }
.bm-signinfo > div { display: grid; grid-template-columns: minmax(96px, 30%) 1fr; gap: 8px; align-items: baseline; }
.bm-signinfo dt { color: var(--muted); font-weight: 700; font-size: .82rem; }
.bm-signinfo dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.bm-deadlines b[data-left] { font-variant-numeric: tabular-nums; }
.bm-checking { border-left-color: var(--butter); }
@media (max-width: 420px) { .bm-signinfo > div { grid-template-columns: 1fr; gap: 0; } }

/* setup steps (burn page) */
.bm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bm-steps li { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 2px solid var(--line); }
.bm-steps .n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--edge); font-weight: 900; }
.bm-steps li.done .n { background: var(--ok); color: #fff; }

/* BEAN tiles */
.bm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.bm-bean { display: grid; border: 3px solid var(--edge); border-radius: var(--r-md); overflow: hidden; background: var(--surface); text-align: left; padding: 0; color: inherit; font: inherit; }
button.bm-bean { cursor: pointer; }
button.bm-bean:hover img { transform: scale(1.03); }
.bm-bean[aria-pressed="true"] { outline: 4px solid var(--accent); outline-offset: -4px; }
.bm-bean img, .bm-bean .ph { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--surface-2); transition: transform .2s; }
.bm-bean .ph { display: grid; place-items: center; color: var(--muted); font-weight: 700; }
.bm-bean .m { padding: 8px 10px 10px; font-size: .85rem; display: grid; gap: 4px; border-top: 3px solid var(--edge); }
.bm-bean .m b { font: 700 13px var(--f-mono); }
.bm-bean .m span { color: var(--muted); font-size: 12px; }

/* tables, rack, fields */
table.bm-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.bm-table th, .bm-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.bm-table th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.bm-num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; text-align: right !important; }
.bm-swap { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--edge); background: var(--surface); font-size: 20px; cursor: pointer; }
.bm-swap:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink); }
.bm-swap:disabled { opacity: .35; cursor: not-allowed; }
td.changed { color: var(--accent); font-weight: 800; }
.bm-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.bm-stat > div { padding: 14px; border-radius: var(--r-md); background: var(--surface); border: 2px solid var(--edge); }
.bm-stat span { display: block; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.bm-stat b { font: 700 24px/1.2 var(--f-mono); }
.bm-meter, .bm-bar { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; min-width: 60px; }
.bm-meter i, .bm-bar i { display: block; height: 100%; background: var(--famC, var(--sign)); }
label.bm-field { display: grid; gap: 6px; font-weight: 700; font-size: .9rem; }
.bm-field input { min-height: 46px; padding: 0 12px; border-radius: var(--r-sm); border: 2px solid var(--edge); background: var(--surface); color: var(--text); }
.bm-seg, .bm-filter { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 999px; background: var(--surface); border: 3px solid var(--edge); }
.bm-filter { border-width: 0; padding: 0; background: none; }
.bm-seg button, .bm-filter button { min-height: 42px; padding: 6px 16px; border-radius: 999px; border: 0; background: none; font-weight: 700; cursor: pointer; color: var(--muted); }
.bm-filter button { border: 2px solid var(--edge); background: var(--surface); color: var(--text); }
.bm-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.bm-filter button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.bm-fee { display: grid; gap: 6px; margin-top: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 3px solid var(--burn); }
.bm-fee div { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; }
.bm-fee .total { border-top: 2px dashed var(--line); padding-top: 6px; font-weight: 800; color: var(--burn); font-family: var(--f-mono); }
.bm-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.bm-list li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 2px solid var(--line); }
.bm-list li[aria-selected="true"] { outline: 4px solid var(--accent); outline-offset: -4px; }
.bm-list .who { display: grid; gap: 2px; }
.bm-list .who small { color: var(--muted); }
.bm-danger { padding: 12px 14px; border-radius: var(--r-md); background: var(--accent-soft); border: 2px solid var(--bad); }
.bm-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-weight: 700; }
.bm-check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--burn); }

/* postcards (Moving Day) */
.bm-postcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-top: 12px; }
.bm-postcard { position: relative; padding: 12px; border-radius: 6px; background: #FFF6E6; color: #2B1B14; border: 2px solid #2B1B14; box-shadow: 0 6px 0 rgba(43,27,20,.3); transform: rotate(-1deg); }
.bm-postcard:nth-child(2n) { transform: rotate(1.2deg); }
.bm-postcard img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; border: 3px solid #2B1B14; display: block; background: #F7EBD6; }
.bm-postcard .stamp { position: absolute; top: 18px; right: 18px; padding: 4px 8px; border: 2px dashed #B3261E; color: #B3261E; font: 700 .7rem var(--f-mono); letter-spacing: .08em; background: #FFF6E6; transform: rotate(8deg); }
.bm-postcard p { margin: 8px 0 0; font-size: .88rem; line-height: 1.4; }
.bm-postcard b { font: 400 20px var(--f-display); }

/* ── The Machine page ── */
.bv-mint { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.bv-mcard { display: grid; gap: 14px; justify-items: center; }
.bv-host { width: 100%; display: flex; align-items: flex-end; gap: 12px; }
.bv-host img { width: 92px; height: auto; flex: none; }
.bv-bubble { position: relative; flex: 1; min-height: 76px; background: var(--surface); border: 3px solid var(--edge); border-radius: 20px; padding: 12px 16px; box-shadow: 4px 4px 0 var(--edge); line-height: 1.4; }
.bv-bubble .who { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.bv-bubble::before { content: ""; position: absolute; left: -14px; bottom: 16px; border: 12px solid transparent; border-right-color: var(--edge); border-left: 0; }
.bv-bubble::after { content: ""; position: absolute; left: -9px; bottom: 19px; border: 9px solid transparent; border-right-color: var(--surface); border-left: 0; }
.machine-art { width: min(100%, 400px); height: auto; overflow: visible; }
.machine-art .shake { transform-box: fill-box; transform-origin: 50% 100%; }
.machine-art.pulling .shake { animation: bvShake .12s linear 5; }
@keyframes bvShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px) rotate(-.6deg); } 75% { transform: translateX(4px) rotate(.6deg); } }
#mLever { transform-box: view-box; transform-origin: 440px 440px; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.machine-art.pulling #mLever { transform: rotate(52deg); }
#mCapsule { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.machine-art.drop #mCapsule { animation: bvDrop .6s cubic-bezier(.3,1.5,.6,1) forwards; }
@keyframes bvDrop { 0% { opacity: 1; transform: translateY(-40px) scale(.7); } 100% { opacity: 1; transform: none; } }
.machine-art.pulling #mBeans, .machine-art.working #mBeans { animation: bvJiggle .16s linear 4; }
.machine-art.working #mBeans { animation-iteration-count: infinite; animation-duration: .5s; }
@keyframes bvJiggle { 50% { transform: translateY(-5px); } }
.bv-price { width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 12px 16px; border-radius: var(--r-md); background: var(--butter-soft); border: 2px solid var(--edge); }
.bv-price b { font: 400 22px var(--f-display); }

/* the certificate: a paper object, same colours in both themes */
.bv-cert { --ink: #2B1B14; --ink-2: #6B5446; background: #FFF6E6; color: var(--ink); border: 5px solid #FFC93C; border-radius: 28px; padding: 12px; box-shadow: 0 10px 0 rgba(43,27,20,.35); }
.bv-cert .inner { border: 2px dashed #B7793F; border-radius: 18px; padding: 20px 22px; display: grid; gap: 16px; }
.bv-cert .head { text-align: center; }
.bv-cert .head .eyebrow { color: #8A6A52; letter-spacing: .22em; }
.bv-cert .head h2 { font: 400 clamp(26px, 4vw, 38px)/1.05 var(--f-display); margin: 0; color: var(--ink); }
.bv-cert .body { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 20px; align-items: start; }
.bv-stage { position: relative; width: 100%; aspect-ratio: 1; border: 4px solid var(--ink); border-radius: 20px; overflow: hidden; background: #F7EBD6; }
.bv-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bv-stage img.reveal { animation: bvReveal .7s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes bvReveal { from { opacity: 0; transform: translateY(-6%) scale(1.06); } to { opacity: 1; transform: none; } }
.bv-stage .tag { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(43,27,20,.78); color: #fff; font: 700 12px/1.4 var(--f-mono); }
.bv-wrapped { position: absolute; inset: 0; display: grid; place-items: center; background: #F7EBD6; }
.bv-wrapped svg { width: 62%; height: auto; animation: bvWobble .5s ease-in-out infinite alternate; }
.bv-wrapped.pop svg { animation: bvPop .35s ease-in forwards; }
@keyframes bvWobble { from { transform: rotate(-7deg) scale(.98); } to { transform: rotate(7deg) scale(1.03); } }
@keyframes bvPop { to { transform: scale(1.35); opacity: 0; } }
.bv-cert .certifies { color: var(--ink-2); font-size: 15px; }
.bv-cert .name { font: 400 clamp(28px, 3.3vw, 40px)/1.05 var(--f-display); margin: 2px 0 6px; overflow-wrap: anywhere; }
.bv-cert .line { margin: 0; font-size: 16px; }
.bv-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.bv-fact { background: #FFFFFF; border: 2px solid #E8D6BD; border-radius: 12px; padding: 8px 12px; min-width: 0; }
.bv-fact .k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8A6A52; }
.bv-fact .v { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.bv-fact .v.big { font: 700 22px var(--f-mono); }
.bv-cert .bm-tier.common { color: #6B5446; } .bv-cert .bm-tier.uncommon { color: #1E6FA8; } .bv-cert .bm-tier.rare { color: #0F6E6C; } .bv-cert .bm-tier.epic { color: #6B3FC8; } .bv-cert .bm-tier.legendary { color: #8A5B00; } .bv-cert .bm-tier.mythic { color: #1F7A55; }
.bv-cert .eyebrow { color: #8A6A52; }
.bv-traits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bv-traits li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 12px; background: #FFFFFF; opacity: .25; transition: opacity .3s; }
.bv-traits li.in { opacity: 1; }
.bv-traits .k { grid-column: 1 / -1; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8A6A52; font-weight: 700; }
.bv-traits .v { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.bv-traits .blank { color: #8A6A52; font-style: italic; font-weight: 600; }
.bv-traits li.isblank { background: #F3EADC; }
.bv-traits .odds { font: 500 12px var(--f-mono); color: #6B5446; }
.bv-cfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.bv-sign { display: grid; gap: 2px; }
.bv-sign .n { font: 400 22px var(--f-display); color: #4A3226; }
.bv-sign .rule { width: 170px; border-top: 2px solid var(--ink); }
.bv-sign .r { font-size: 13px; color: var(--ink-2); }
.bv-seal { width: 112px; height: 112px; flex: none; transition: transform .3s; }
.bv-seal.broken { filter: grayscale(1); opacity: .6; transform: rotate(-8deg); }
.bv-callouts { display: grid; gap: 8px; }
.bv-callout { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 14px; background: #2B1B14; color: #FFF6E6; font-size: 15px; }
.bv-callout svg { flex: none; margin-top: 2px; }
.bv-cert .bm-row .btn { border-color: #2B1B14; color: #2B1B14; background: #FFFFFF; }
.bv-cert .bm-row .btn.primary { background: #C8322F; color: #FFFFFF; }
.bv-cert .bm-xaman { background: #FFFFFF; border-color: #2B1B14; color: #2B1B14; }
.bv-cert .bm-note { background: #FFFFFF; color: #2B1B14; }
.bv-cert a { color: #0F6E6C; }

/* ── Town page ── */
.bv-sky { position: relative; min-height: 200px; border: 3px solid var(--edge); border-radius: var(--r-lg); background: var(--sky); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; padding: 18px 20px 0; }
.bv-sky .hills { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: var(--grass); border-top: 3px solid var(--edge); border-radius: 60% 60% 0 0 / 40px 40px 0 0; }
.bv-drifters { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: flex-end; padding-bottom: 44px; min-height: 150px; }
.bv-drifter { width: 110px; animation: bvFloat 3.4s ease-in-out infinite alternate; }
.bv-drifter img { width: 100%; border-radius: 50%; border: 3px solid var(--edge); background: #fff; display: block; }
.bv-drifter:nth-child(2n) { animation-delay: -1.6s; }
@keyframes bvFloat { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-12px) rotate(5deg); } }
.bv-drifters .empty { align-self: center; font-weight: 600; background: var(--surface); border: 2px solid var(--edge); border-radius: 999px; padding: 6px 14px; font-size: 14px; }
.bv-popsign { position: relative; z-index: 1; margin-bottom: 40px; background: var(--sign); color: var(--sign-ink); border: 4px solid #FFF6E6; outline: 3px solid var(--edge); border-radius: 16px; padding: 12px 18px; display: grid; gap: 2px; min-width: 200px; }
.bv-popsign .t { font: 400 22px var(--f-display); letter-spacing: 1px; }
.bv-popsign .p { font: 700 34px/1 var(--f-mono); }
.bv-popsign .s { font-size: 13px; opacity: .9; }
.bv-census { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.bv-cen { display: grid; gap: 6px; }
.bv-hood { border: 3px solid var(--edge); border-radius: var(--r-lg); background: var(--famBg); padding: 18px 18px 20px; display: grid; gap: 14px; }
.bv-hood .hh { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bv-hood .hh .nm { font: 400 26px/1.1 var(--f-display); }
.bv-hood .hh .motto { font-style: italic; color: var(--muted); font-size: 15px; }
.bv-hood .hh .cnt { margin-left: auto; font: 700 14px var(--f-mono); }
.bv-street { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px 12px; }
.bv-house { display: grid; gap: 6px; justify-items: center; text-align: center; background: none; border: 0; padding: 0; color: inherit; text-decoration: none; }
.bv-house .scene { width: 100%; aspect-ratio: 1 / .95; display: grid; }
.bv-house .scene > * { grid-area: 1 / 1; }
.bv-house .home { align-self: end; justify-self: start; width: 62%; height: 64%; display: grid; grid-template-rows: 44% 56%; }
.bv-house .roof { background: var(--famC); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.bv-house .wall { background: #FFF6E6; border: 3px solid var(--edge); border-top: 0; border-radius: 0 0 6px 6px; position: relative; }
.bv-house .wall::after { content: ""; position: absolute; left: 14%; top: 18%; width: 26%; height: 36%; background: #CDEBF5; border: 2px solid var(--edge); border-radius: 3px; }
.bv-house .who { position: relative; z-index: 1; align-self: end; justify-self: end; width: 60%; aspect-ratio: 1; margin-right: -6%; border-radius: 50%; overflow: hidden; border: 3px solid var(--edge); background: #fff; }
.bv-house .who img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bv-house .lbl { font: 700 12px var(--f-mono); color: var(--text); }
.bv-house .you { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-family: var(--f-body); font-size: 11px; }
.bv-house.mine .wall { box-shadow: 0 0 0 3px var(--accent); }
a.bv-house:hover .who { transform: translateY(-4px); transition: transform .2s; }
.bv-house.lot .home { opacity: .55; }
.bv-house.lot .roof { background: none; clip-path: none; border: 3px dashed var(--edge); border-bottom: 0; border-radius: 40px 40px 0 0; }
.bv-house.lot .wall { background: none; border-style: dashed; }
.bv-house.lot .wall::after { display: none; }

/* confetti + toast */
#bvConfetti { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
#bvConfetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: bvFall linear forwards; }
@keyframes bvFall { to { transform: translateY(110vh) rotate(720deg); } }
.bv-foot { color: var(--muted); font-size: 13px; text-align: center; }

@media (max-width: 860px) {
  .bv-mint { grid-template-columns: 1fr; }
  .bv-cert .body { grid-template-columns: 1fr; }
  .bv-cert .bv-stage { max-width: 320px; justify-self: center; }
  .bv-sky { grid-template-columns: 1fr; }
  .bv-popsign { margin-bottom: 80px; justify-self: start; }
}
@media (max-width: 640px) {
  .bm-steps li { grid-template-columns: 34px 1fr; }
  .bm-steps li > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .bv-traits { grid-template-columns: 1fr; }
  .bv-host img { width: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .bv-wrapped svg, .bv-drifter, .machine-art .shake, .machine-art #mBeans, .bv-stage img.reveal { animation: none !important; }
  #mLever { transition: none; }
}

/* Workbench live preview: now → after, painted by the server before anything is paid */
.bv-preview { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 6px 0 16px; }
.bv-pv { margin: 0; min-width: 0; }
.bv-pv .pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.bv-pv .shot { display: grid; gap: 4px; justify-items: center; min-width: 0; }
.bv-pv .shot > img, .bv-pv .after { width: 100%; aspect-ratio: 1; border: 3px solid var(--edge); border-radius: 16px; background: var(--surface-2); object-fit: cover; display: grid; place-items: center; overflow: hidden; }
.bv-pv .after img { width: 100%; height: 100%; object-fit: cover; }
.bv-pv .after .hint { margin: 0; padding: 8px; text-align: center; font-size: .8rem; }
.bv-pv .shot small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bv-pv .to { font: 400 22px/1 var(--f-display); color: var(--accent); }
.bv-pv figcaption { margin-top: 6px; text-align: center; font-weight: 700; }

/* ── Mayor Pinto's Arcade ─────────────────────────────────────────────────────────────────────────────
   The room is a deliberate single look (an arcade at night) in both themes; paper objects inside it stay cream. */
.arc-room { --room: #1B0F16; --room-2: #2A1620; --neon-a: #FF5FA2; --neon-b: #4FE3D6; --neon-c: #FFC93C; --paper: #FFF6E6; --ink: #2B1B14;
  position: relative; display: grid; gap: 18px; padding: 18px; border: 4px solid var(--edge); border-radius: var(--r-lg); overflow: hidden; color: #FFF6E6;
  background:
    radial-gradient(60% 45% at 20% 0%, rgba(255, 95, 162, .22), transparent 70%),
    radial-gradient(50% 40% at 85% 10%, rgba(79, 227, 214, .18), transparent 70%),
    linear-gradient(transparent 62%, rgba(0, 0, 0, .35)),
    repeating-conic-gradient(from 45deg at 50% 100%, #24131C 0 25%, #1B0F16 0 50%) 0 100% / 44px 44px,
    var(--room); }
.arc-roomtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.arc-neon { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font: 400 clamp(26px, 5vw, 44px)/1 var(--f-display); letter-spacing: 1px; }
.arc-neon .n1 { color: #FFE3F0; text-shadow: 0 0 6px var(--neon-a), 0 0 18px var(--neon-a), 0 0 34px var(--neon-a); animation: arcFlicker 7s infinite; }
.arc-neon .n2 { color: #E3FFFB; text-shadow: 0 0 6px var(--neon-b), 0 0 18px var(--neon-b), 0 0 34px var(--neon-b); animation: arcFlicker 9s 2s infinite; }
@keyframes arcFlicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .35; } }
.arc-soundbtn { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 2px solid rgba(255, 246, 230, .5); background: rgba(0, 0, 0, .3); color: #FFF6E6; font: 700 14px var(--f-body); cursor: pointer; }
.arc-soundbtn[aria-pressed="false"] { opacity: .7; }
.arc-backrow { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 12px; }
.arc-teaser { position: relative; display: grid; gap: 6px; justify-items: center; text-align: center; padding: 12px 10px 14px; border-radius: 18px 18px 10px 10px; border: 3px solid #0A0604; background: linear-gradient(#3A1D2B, #24131C); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .05), 0 0 22px rgba(255, 95, 162, .15); opacity: .9; }
.arc-teaser b { font: 400 16px/1.1 var(--f-display); color: #FFF6E6; }
.arc-teaser .soon { font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--neon-c); animation: arcBlink 1.6s steps(2) infinite; }
.arc-teaser .scr { width: 100%; height: 56px; border-radius: 10px; border: 3px solid #0A0604; background: #0E1A1F; overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 6px; padding: 6px 10px; }
.arc-teaser .scr i { display: block; height: 22px; border-radius: 50% 50% 45% 45%; background: #C98B4A; border: 2px solid #0A0604; animation: arcHop 1.8s ease-in-out infinite; }
.arc-teaser .scr i:nth-child(2) { animation-delay: .3s; background: #9BE07A; } .arc-teaser .scr i:nth-child(3) { animation-delay: .6s; background: #7CC7FF; }
.arc-teaser.claw .scr { background: linear-gradient(#10232B, #0E1A1F); }
.arc-teaser.claw .scr::before { content: ""; grid-column: 1 / -1; grid-row: 1; justify-self: center; width: 24px; height: 18px; border: 3px solid #D2BFAB; border-top: 0; border-radius: 0 0 12px 12px; animation: arcClaw 3.2s ease-in-out infinite; }
.arc-teaser.drop .scr { background: radial-gradient(circle, #5B3A4B 2px, transparent 3px) 0 0 / 14px 12px, #0E1A1F; }
.arc-teaser.counter { background: linear-gradient(#4A2A18, #2E1A0F); }
.arc-teaser .tickets { display: flex; gap: 4px; transform: rotate(-4deg); }
.arc-teaser .tickets span { font: 700 9px/1 var(--f-mono); letter-spacing: .08em; color: #2B1B14; background: #FFC93C; padding: 9px 6px; border-radius: 3px; border: 2px dashed #B24E14; }
@keyframes arcHop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-16px); } }
@keyframes arcClaw { 0%, 100% { transform: translate(-30px, -6px); } 45% { transform: translate(28px, -6px); } 60% { transform: translate(28px, 12px); } 80% { transform: translate(0, -6px); } }
@keyframes arcBlink { 50% { opacity: .35; } }
.arc-floor { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 20px; align-items: start; }
.arc-stage { display: grid; gap: 16px; justify-items: center; min-width: 0; }
.arc-stage .bv-bubble { color: var(--text); }
.arc-machine { position: relative; width: min(100%, 440px); padding-right: 42px; }
.arc-cab { position: relative; background: linear-gradient(#E8453F, #C8322F 60%, #A2231F); border: 4px solid #0A0604; border-radius: 40px 40px 22px 22px; padding: 14px 16px 18px; box-shadow: 0 8px 0 #0A0604, 0 0 40px rgba(255, 95, 162, .25); display: grid; gap: 12px; transition: box-shadow .4s, filter .4s; }
.arc-marquee { position: relative; display: grid; gap: 6px; justify-items: center; background: var(--paper); color: var(--ink); border: 3px solid #0A0604; border-radius: 20px; padding: 8px 10px; text-align: center; overflow: hidden; }
.arc-marquee b { font: 400 clamp(18px, 4.4vw, 25px)/1.05 var(--f-display); letter-spacing: .5px; min-height: 1.05em; }
.arc-bulbrow { width: 100%; height: 10px; background: radial-gradient(circle, #FFC93C 0 3.5px, rgba(43, 27, 20, .25) 4.5px, transparent 5px) 0 50% / 16px 10px repeat-x; }
.arc-cab.lit .arc-bulbrow { animation: arcChase .5s linear infinite; }
.arc-cab.lit .arc-bulbrow:last-child { animation-direction: reverse; }
@keyframes arcChase { to { background-position: 16px 50%; } }
.arc-window { position: relative; background: #0A0604; border: 3px solid #0A0604; border-radius: 16px; padding: 10px; }
.arc-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.reel { position: relative; height: 96px; overflow: hidden; background: linear-gradient(#E9DCC6, var(--paper) 30%, var(--paper) 70%, #E9DCC6); border-radius: 10px; border: 2px solid #2B1B14; }
.reel .strip { display: grid; will-change: transform; }
.reel .sym { height: 96px; display: grid; place-items: center; }
.reel .sym svg { width: 62px; height: 62px; }
.reel.blur .strip { filter: blur(1.4px); }
.reel.win { box-shadow: inset 0 0 0 3px var(--neon-c), 0 0 16px var(--neon-c); }
.arc-payline { position: absolute; left: 4px; right: 4px; top: 50%; height: 0; border-top: 3px dashed rgba(255, 201, 60, .75); pointer-events: none; }
.arc-static { position: absolute; inset: 0; border-radius: 13px; pointer-events: none; opacity: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .18) 0 2px, transparent 2px 4px); mix-blend-mode: screen; }
.arc-ticker { justify-self: stretch; text-align: center; font: 700 14px/1 var(--f-mono); letter-spacing: .18em; color: var(--neon-c); background: #0A0604; border: 3px solid #0A0604; border-radius: 10px; padding: 8px 6px; text-shadow: 0 0 8px rgba(255, 201, 60, .7); overflow: hidden; white-space: nowrap; }
.arc-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.arc-readout { background: var(--paper); color: var(--ink); border: 3px solid #0A0604; border-radius: 12px; padding: 8px 10px; display: grid; gap: 2px; min-width: 0; }
.arc-readout .lbl { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6B5446; }
.arc-readout b { font: 700 16px/1.2 var(--f-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.arc-chute { justify-self: center; position: relative; width: 132px; height: 46px; background: #0A0604; border: 3px solid #0A0604; border-radius: 0 0 18px 18px; display: grid; place-items: center; overflow: visible; }
.arc-capsule { position: absolute; left: 50%; top: -30px; width: 46px; height: 32px; margin-left: -23px; border-radius: 16px; border: 3px solid #0A0604; background: linear-gradient(90deg, var(--cap, #FFC93C) 50%, #FFF6E6 50%); opacity: 0; }
.arc-capsule i { position: absolute; inset: 4px 18px; border-radius: 4px; background: rgba(255, 255, 255, .55); }
.arc-cab.dropped .arc-capsule { animation: arcCapDrop .9s cubic-bezier(.3, 1.4, .6, 1) forwards; }
.arc-cab.opened .arc-capsule { animation: arcCapOpen .45s ease-in forwards; }
@keyframes arcCapDrop { 0% { opacity: 1; transform: translateY(-30px) rotate(-30deg) scale(.6); } 60% { opacity: 1; transform: translateY(40px) rotate(12deg) scale(1); } 80% { transform: translateY(30px) rotate(-6deg); } 100% { opacity: 1; transform: translateY(36px) rotate(0); } }
@keyframes arcCapOpen { 0% { opacity: 1; transform: translateY(36px) scale(1); } 100% { opacity: 0; transform: translateY(26px) scale(1.8); } }
.arc-lever { position: absolute; right: 0; top: 112px; width: 40px; height: 170px; border: 0; background: none; padding: 0; cursor: pointer; }
.arc-lever .base { position: absolute; left: 4px; bottom: 0; width: 32px; height: 24px; border-radius: 8px; background: #6B5446; border: 3px solid #0A0604; }
.arc-lever .rod { position: absolute; left: 16px; top: 28px; bottom: 16px; width: 8px; background: linear-gradient(90deg, #D2BFAB, #8E7663); border: 2px solid #0A0604; border-radius: 6px; transform-origin: 50% 100%; transition: transform .22s cubic-bezier(.5, 0, .7, .4); }
.arc-lever .knob { position: absolute; left: 3px; top: 0; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE9A8, #FFC93C 45%, #E0A11A); border: 3px solid #0A0604; transition: transform .22s cubic-bezier(.5, 0, .7, .4); }
.arc-lever:hover:not(:disabled) .knob { transform: translateY(4px); }
.arc-lever:disabled { cursor: not-allowed; opacity: .75; }
.arc-machine.pulled .arc-lever .rod { transform: scaleY(.35); }
.arc-machine.pulled .arc-lever .knob { transform: translateY(96px); }
.arc-cab.shake { animation: arcShake .09s linear infinite; }
.arc-cab.shake-hard { animation: arcShakeHard .07s linear infinite; }
@keyframes arcShake { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-2px, 1px) rotate(-.4deg); } 75% { transform: translate(2px, -1px) rotate(.4deg); } }
@keyframes arcShakeHard { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-5px, 2px) rotate(-1.2deg); } 75% { transform: translate(5px, -2px) rotate(1.2deg); } }
/* tier moods on the cabinet */
.arc-cab[data-tier="uncommon"] { box-shadow: 0 8px 0 #0A0604, 0 0 50px rgba(124, 199, 255, .55); }
.arc-cab[data-tier="rare"] { box-shadow: 0 8px 0 #0A0604, 0 0 60px rgba(79, 227, 214, .7); }
.arc-cab[data-tier="rare"] .arc-bulbrow { filter: hue-rotate(130deg) saturate(1.6); }
.arc-cab[data-tier="epic"] { box-shadow: 0 8px 0 #0A0604, 0 0 70px rgba(183, 148, 246, .8); }
.arc-cab.alarm .arc-bulbrow { filter: hue-rotate(-40deg) saturate(3); animation-duration: .18s; }
.arc-cab.alarm .arc-ticker { color: #FF6B5E; text-shadow: 0 0 10px #FF6B5E; animation: arcBlink .25s steps(2) infinite; }
.arc-cab[data-tier="legendary"] { box-shadow: 0 8px 0 #0A0604, 0 0 90px rgba(255, 201, 60, .95); }
.arc-cab.dark { filter: brightness(.18) saturate(.4); }
.arc-cab.glitch .arc-static { opacity: 1; animation: arcStatic .12s steps(3) infinite; }
.arc-cab.glitch .arc-reels { animation: arcGlitch .18s steps(2) infinite; }
.arc-cab.glitch .arc-marquee b { color: #1F7A55; font-family: var(--f-mono); letter-spacing: .08em; }
@keyframes arcStatic { 50% { transform: translateY(2px); opacity: .6; } }
@keyframes arcGlitch { 0% { transform: translate(0); filter: none; } 50% { transform: translate(3px, -1px) skewX(4deg); filter: hue-rotate(90deg) contrast(1.4); } }
/* the prize card: a paper tag inside the room */
.arc-prize { display: grid; gap: 8px; align-content: start; background: var(--paper); color: var(--ink); border: 4px solid #0A0604; border-radius: 22px; padding: 20px; box-shadow: 0 8px 0 #0A0604; min-width: 0; }
.arc-prize h2 { font: 400 clamp(30px, 4.6vw, 44px)/1.02 var(--f-display); margin: 0; color: var(--ink); text-wrap: balance; }
.arc-prize .bm-eyebrow { color: #8A6A52; letter-spacing: .24em; }
.arc-prize.flip { animation: arcFlip .7s cubic-bezier(.2, 1.3, .4, 1) both; transform-origin: 50% 0; }
@keyframes arcFlip { 0% { opacity: 0; transform: perspective(800px) rotateX(-80deg) translateY(-20px); } 100% { opacity: 1; transform: none; } }
.arc-tierline { justify-self: start; font: 700 13px/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; border: 2px solid currentColor; color: #6B5446; }
.arc-prize[data-tier="uncommon"] .arc-tierline { color: #1E6FA8; } .arc-prize[data-tier="rare"] .arc-tierline { color: #0F6E6C; } .arc-prize[data-tier="epic"] .arc-tierline { color: #6B3FC8; }
.arc-prize[data-tier="legendary"] .arc-tierline { color: #8A5B00; background: #FFE9A8; } .arc-prize[data-tier="secret"] .arc-tierline { color: #FFF6E6; background: #2B1B14; border-color: #2B1B14; }
.arc-prize[data-tier="rare"], .arc-prize[data-tier="epic"], .arc-prize[data-tier="legendary"], .arc-prize[data-tier="secret"] { border-width: 6px; border-style: double; }
.arc-prize[data-tier="rare"] { border-color: #0F6E6C; box-shadow: 0 8px 0 #0A0604, 0 0 0 6px rgba(79, 227, 214, .35); }
.arc-prize[data-tier="epic"] { border-color: #6B3FC8; box-shadow: 0 8px 0 #0A0604, 0 0 0 6px rgba(183, 148, 246, .45); }
.arc-prize[data-tier="legendary"] { border-color: #C58A00; background: linear-gradient(135deg, #FFF6E6, #FFE9A8 45%, #FFF6E6); box-shadow: 0 8px 0 #0A0604, 0 0 0 8px rgba(255, 201, 60, .55), 0 0 60px rgba(255, 201, 60, .6); }
.arc-prize[data-tier="secret"] { border-color: #2B1B14; background: repeating-linear-gradient(135deg, #FFF6E6 0 14px, #F7EBD6 14px 28px); }
.arc-artist { margin: 4px 0 0; font: 400 clamp(20px, 3vw, 26px)/1.1 var(--f-display); color: var(--ink); }
.arc-artist b { font-weight: 400; color: #C8322F; }
.arc-series { margin: 0; font: 700 15px/1.3 var(--f-body); color: #6B5446; letter-spacing: .04em; }
.arc-left { margin: 0; font: 700 13px var(--f-mono); color: #8A5B00; }
.arc-closet { margin: 6px 0 2px; font-weight: 800; color: #1F7A55; }
.arc-try { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 6px; }
.arc-trystage { position: relative; width: 132px; aspect-ratio: 1; border: 3px solid #0A0604; border-radius: 18px; background: #F7EBD6; overflow: visible; }
.arc-trystage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }
.arc-trystage img.new { opacity: 0; }
.arc-try.landed .arc-trystage img.new { animation: arcLand .7s cubic-bezier(.3, 1.5, .5, 1) forwards; }
.arc-try.landed .arc-trystage { animation: arcSquash .7s ease-out .35s; }
@keyframes arcLand { 0% { opacity: 0; transform: translateY(-46px) scale(1.12); } 55% { opacity: 1; transform: translateY(4px) scale(1); } 100% { opacity: 1; transform: none; } }
@keyframes arcSquash { 0%, 100% { transform: none; } 30% { transform: scale(1.08, .92); } 60% { transform: scale(.96, 1.05); } }
.arc-react { position: absolute; right: -12px; top: -18px; background: #FFF6E6; border: 3px solid #0A0604; border-radius: 14px; padding: 4px 9px; font: 700 13px var(--f-body); color: var(--ink); white-space: nowrap; opacity: 0; transform: scale(.6); }
.arc-try.landed .arc-react { animation: arcPop .4s cubic-bezier(.3, 1.6, .5, 1) .75s forwards; }
@keyframes arcPop { to { opacity: 1; transform: none; } }
/* full-screen effects layer */
.arc-fx { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.arc-fx .dim, .arc-fx .glow, .arc-fx .rays { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.arc-fx .dim { background: #000; }
.arc-fx .glow { background: radial-gradient(60% 55% at 50% 45%, var(--fxGlow, rgba(255, 201, 60, .45)), transparent 70%); }
.arc-fx .rays { background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255, 201, 60, .28) 0 8deg, transparent 8deg 22deg); }
.arc-fx.rays-on .rays { opacity: 1; animation: arcSpinRays 6s linear infinite; }
@keyframes arcSpinRays { to { transform: rotate(360deg) scale(1.4); } }
.arc-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.arc-fx .banner { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.6); opacity: 0; font: 400 clamp(40px, 11vw, 110px)/1 var(--f-display); color: #FFE9A8; text-shadow: 0 0 10px #FFC93C, 0 0 40px #FF8A00, 0 6px 0 #0A0604; letter-spacing: 2px; white-space: nowrap; text-align: center; }
.arc-fx .banner.small { font-size: clamp(22px, 5vw, 44px); font-family: var(--f-mono); color: #8CFFB9; text-shadow: 0 0 8px #1F7A55, 0 0 22px #1F7A55; letter-spacing: .1em; }
.arc-fx .banner.show { animation: arcBanner 1.9s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes arcBanner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
.arc-odds { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 10px; }
.arc-odd { background: var(--surface-2); border-radius: 12px; padding: 8px 10px; display: grid; gap: 2px; }
.arc-odd b { font: 700 18px var(--f-mono); font-variant-numeric: tabular-nums; }
.arc-free { background: var(--butter-soft); color: var(--text); border-color: transparent; }
@media (max-width: 860px) { .arc-floor { grid-template-columns: 1fr; } .arc-backrow { grid-template-columns: repeat(3, minmax(140px, 1fr)); overflow-x: auto; } }
@media (max-width: 520px) {
  .arc-room { padding: 12px; }
  .arc-backrow { grid-template-columns: repeat(3, 150px); overflow-x: auto; padding-bottom: 4px; }
  .reel, .reel .sym { height: 78px; } .reel .sym svg { width: 50px; height: 50px; }
  .arc-lever { top: 96px; height: 146px; } .arc-machine.pulled .arc-lever .knob { transform: translateY(80px); }
  .arc-try { grid-template-columns: 104px minmax(0, 1fr); } .arc-trystage { width: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .arc-neon .n1, .arc-neon .n2, .arc-teaser .soon, .arc-teaser .scr i, .arc-teaser.claw .scr::before, .arc-cab.lit .arc-bulbrow, .arc-cab.shake, .arc-cab.shake-hard, .arc-cab.glitch .arc-reels, .arc-fx.rays-on .rays { animation: none; }
  .arc-cab.dropped .arc-capsule, .arc-cab.opened .arc-capsule { animation: none; opacity: 0; }
  .arc-prize.flip, .arc-try.landed .arc-trystage img.new, .arc-try.landed .arc-react, .arc-try.landed .arc-trystage { animation: none; opacity: 1; transform: none; }
}/* the in-page Motion: Reduced switch (same rules as the device setting) */
body.arc-reduced .arc-neon .n1, body.arc-reduced .arc-neon .n2, body.arc-reduced .arc-teaser .soon, body.arc-reduced .arc-teaser .scr i, body.arc-reduced .arc-teaser.claw .scr::before, body.arc-reduced .arc-cab.lit .arc-bulbrow, body.arc-reduced .arc-cab.shake, body.arc-reduced .arc-cab.shake-hard, body.arc-reduced .arc-cab.glitch .arc-reels, body.arc-reduced .arc-fx.rays-on .rays { animation: none; }
body.arc-reduced .arc-cab.dropped .arc-capsule, body.arc-reduced .arc-cab.opened .arc-capsule { animation: none; opacity: 0; }
body.arc-reduced .arc-prize.flip, body.arc-reduced .arc-try.landed .arc-trystage img.new, body.arc-reduced .arc-try.landed .arc-react, body.arc-reduced .arc-try.landed .arc-trystage { animation: none; opacity: 1; transform: none; }
.arc-roombtns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.arc-soundbtn:disabled { cursor: default; }


/* Town: the Arcade's sign on Main Street */
.arc-sign { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; text-decoration: none; color: var(--text); }
.arc-sign-roof { width: 64px; height: 64px; border: 3px solid var(--edge); border-radius: 14px 14px 6px 6px; background: repeating-linear-gradient(90deg, var(--accent) 0 10px, #FFF6E6 10px 20px); }
.arc-sign-body { display: grid; gap: 2px; min-width: 0; }
.arc-sign-body b { font: 400 24px/1.1 var(--f-display); }
.arc-sign:hover { box-shadow: var(--shadow); }
@media (max-width: 560px) { .arc-sign { grid-template-columns: auto minmax(0, 1fr); } .arc-sign-go { grid-column: 1 / -1; } }

/* ── Live site guard ───────────────────────────────────────────────────────────
   The pages keep body.xrpl-home-utility so the XRPL Home header looks like every other page.
   That layer also forces its own link, heading, text and button colours with !important.
   Inside Beanville (main.bm-wrap) we put ours back; the header is untouched. */
body.bm-page main.bm-wrap a { color: var(--accent) !important; }
body.bm-page main.bm-wrap a:hover { color: var(--accent) !important; filter: brightness(1.1); }
body.bm-page main.bm-wrap .bv-brand .logo { color: var(--text) !important; }
body.bm-page main.bm-wrap .bm-tabs a { color: var(--muted) !important; }
body.bm-page main.bm-wrap .bm-tabs a[aria-current="page"] { color: var(--accent-ink) !important; }
body.bm-page main.bm-wrap h1, body.bm-page main.bm-wrap h2 { font-family: var(--f-display) !important; font-weight: 400 !important; color: var(--text) !important; }
body.bm-page main.bm-wrap h3 { font-family: var(--f-body) !important; font-weight: 700 !important; color: var(--text) !important; }
body.bm-page main.bm-wrap p { color: inherit !important; }
body.bm-page main.bm-wrap .bm-hero p, body.bm-page main.bm-wrap .hint, body.bm-page main.bm-wrap .muted,
body.bm-page main.bm-wrap .bm-eyebrow, body.bm-page main.bm-wrap .eyebrow, body.bm-page main.bm-wrap .bv-foot { color: var(--muted) !important; }
body.bm-page main.bm-wrap .mono, body.bm-page main.bm-wrap .num { font-family: var(--f-mono) !important; font-weight: inherit !important; }
body.bm-page main.bm-wrap input, body.bm-page main.bm-wrap select, body.bm-page main.bm-wrap textarea { font-family: var(--f-body) !important; color: var(--text) !important; background: var(--surface) !important; border-color: var(--edge) !important; }
body.bm-page main.bm-wrap .btn { font-family: var(--f-body) !important; font-weight: 700 !important; color: var(--text) !important; background: var(--surface) !important; border: 3px solid var(--edge) !important; border-radius: 999px !important; box-shadow: none !important; }
body.bm-page main.bm-wrap .btn:hover:not(:disabled) { background: var(--surface-2) !important; }
body.bm-page main.bm-wrap .btn.primary, body.bm-page main.bm-wrap .btn.primary:hover:not(:disabled) { background: var(--accent) !important; color: var(--accent-ink) !important; }
body.bm-page main.bm-wrap .btn.gold { background: var(--butter) !important; color: #2B1B14 !important; }
body.bm-page main.bm-wrap .btn.burn, body.bm-page main.bm-wrap .btn.bm-roast { background: var(--burn) !important; color: #FFF6E6 !important; }
body.bm-page main.bm-wrap .btn.big { font: 400 24px/1 var(--f-display) !important; box-shadow: var(--shadow) !important; }
body.bm-page main.bm-wrap .btn.big:active:not(:disabled) { box-shadow: 0 2px 0 var(--edge) !important; }
body.bm-page main.bm-wrap .btn.sm { border-width: 2px !important; }
/* the paper certificate keeps paper colours in both themes */
body.bm-page main.bm-wrap .bv-cert h2 { color: var(--ink) !important; }
body.bm-page main.bm-wrap .bv-cert .eyebrow { color: #8A6A52 !important; }
body.bm-page main.bm-wrap .bv-cert .certifies, body.bm-page main.bm-wrap .bv-cert .bv-sign .r { color: var(--ink-2) !important; }
body.bm-page main.bm-wrap .bv-cert a { color: #0F6E6C !important; }
body.bm-page main.bm-wrap .bv-cert .bm-row .btn { border-color: #2B1B14 !important; color: #2B1B14 !important; background: #FFFFFF !important; }
body.bm-page main.bm-wrap .bv-cert .bm-row .btn.primary { background: #C8322F !important; color: #FFFFFF !important; }
body.bm-page main.bm-wrap .bv-cert .bm-note { color: #2B1B14 !important; }
body.bm-page main.bm-wrap a.btn { color: var(--text) !important; text-decoration: none; }
body.bm-page main.bm-wrap a.arc-sign { color: var(--text) !important; }
body.bm-page main.bm-wrap .arc-sign .btn.primary { color: var(--accent-ink) !important; }
body.bm-page main.bm-wrap a.btn.primary { color: var(--accent-ink) !important; }
body.bm-page main.bm-wrap .arc-marquee b, body.bm-page main.bm-wrap .arc-readout b { color: #2B1B14 !important; }
body.bm-page main.bm-wrap .arc-cab.glitch .arc-marquee b { color: #1F7A55 !important; }
body.bm-page main.bm-wrap .arc-teaser b { color: #FFF6E6 !important; }
body.bm-page main.bm-wrap .arc-prize h2 { color: #2B1B14 !important; }
body.bm-page main.bm-wrap .arc-prize p, body.bm-page main.bm-wrap .arc-prize .hint { color: #2B1B14 !important; }
body.bm-page main.bm-wrap .arc-prize .bm-eyebrow { color: #8A6A52 !important; }
body.bm-page main.bm-wrap .arc-prize .arc-series { color: #6B5446 !important; }
body.bm-page main.bm-wrap .arc-prize .arc-left { color: #8A5B00 !important; }
body.bm-page main.bm-wrap .arc-prize .arc-closet { color: #1F7A55 !important; }
body.bm-page main.bm-wrap .arc-prize .arc-artist b { color: #C8322F !important; }
body.bm-page main.bm-wrap .arc-prize .btn { border-color: #2B1B14 !important; color: #2B1B14 !important; background: #FFFFFF !important; }
body.bm-page main.bm-wrap .arc-prize .btn.primary { background: #C8322F !important; color: #FFFFFF !important; }
body.bm-page main.bm-wrap .arc-room .arc-stage > .btn.primary { box-shadow: 0 6px 0 #0A0604, 0 0 24px rgba(255, 95, 162, .5) !important; }

/* Beanville theme switch (Light / Dark / Dood), in the top bar of every page */
.bv-theme { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; border: 2px solid var(--edge); background: var(--surface); }
.bv-theme button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 700 13px var(--f-body); cursor: pointer; }
.bv-theme button:hover { background: var(--surface-2); }
.bv-theme button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
body.bm-page main.bm-wrap .bv-theme button[aria-pressed="true"] { color: var(--accent-ink) !important; }

/* ── Arcade, round 2: real prize art, live wins, sticker book, share card ── */
.reel .sym img.art { width: 86%; height: 86%; object-fit: contain; display: block; margin: auto; filter: drop-shadow(0 3px 0 rgba(43,27,20,.35)); pointer-events: none; user-select: none; }
.reel .sym { display: flex; align-items: center; justify-content: center; }
.arc-prow { display: grid !important; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.arc-thumb { width: 56px; height: 56px; border-radius: 12px; background: var(--surface-2); border: 2px solid var(--line); object-fit: contain; }

.arc-wins { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 6px 6px 6px 14px; border-radius: 999px; background: rgba(0,0,0,.35); border: 2px solid rgba(255,246,230,.18); color: #FFF6E6; overflow: hidden; }
.arc-wins .lbl { flex: none; font: 700 11px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #FFC93C; }
.arc-wins-win { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.arc-wins-track { display: flex; gap: 22px; width: max-content; }
.arc-wins-track.moving { animation: arc-marquee 40s linear infinite; }
.arc-wins:hover .arc-wins-track { animation-play-state: paused; }
.arc-wins .win { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; }
.arc-wins .win img, .arc-wins .win .arc-mystery { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,246,230,.12); object-fit: contain; font-size: 16px; }
.arc-wins .win i { opacity: .65; font-style: normal; }
.arc-wins .win[data-tier="legendary"] b:last-of-type { color: #FFC93C; } .arc-wins .win[data-tier="epic"] b:last-of-type { color: #C9B2FF; } .arc-wins .win[data-tier="secret"] b:last-of-type { color: #8CFFB9; }
.arc-wins.flash { animation: arc-winflash 1.2s ease-out 2; }
@keyframes arc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes arc-winflash { 0% { box-shadow: 0 0 0 0 rgba(255,201,60,.9); } 100% { box-shadow: 0 0 0 16px rgba(255,201,60,0); } }

.arc-mystery { display: inline-grid; place-items: center; width: 100%; height: 100%; font: 400 40px/1 var(--f-display); color: #FFF6E6; background: repeating-linear-gradient(135deg, #6B3FC8 0 10px, #5A33AC 10px 20px); border-radius: inherit; }

.arc-series-book { display: grid; gap: 10px; padding: 14px 0; border-top: 2px dashed var(--line); }
.arc-series-book:first-child { border-top: 0; padding-top: 4px; }
.arc-count { font-weight: 700; color: var(--muted); } .arc-count b { color: var(--text); font-family: var(--f-mono); }
.arc-progress { height: 12px; border-radius: 999px; background: var(--surface-2); border: 2px solid var(--edge); overflow: hidden; }
.arc-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--butter), var(--accent)); transition: width .6s ease; }
.arc-stickers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.arc-sticker { display: grid; justify-items: center; gap: 4px; padding: 8px 6px 10px; border-radius: 16px; border: 2px dashed var(--line); background: var(--surface); text-align: center; }
.arc-sticker .pic { width: 84px; height: 84px; border-radius: 14px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.arc-sticker .pic img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) opacity(.28); transition: filter .4s ease; }
.arc-sticker b { font-size: 13px; line-height: 1.2; color: var(--muted); }
.arc-sticker .t { font: 700 10px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.arc-sticker.have { border-style: solid; border-color: var(--edge); box-shadow: 0 4px 0 var(--edge); transform: rotate(-1.5deg); }
.arc-sticker.have:nth-child(even) { transform: rotate(1.5deg); }
.arc-sticker.have .pic img { filter: none; }
.arc-sticker.have b { color: var(--text); }
.arc-sticker.have[data-tier="legendary"] { background: linear-gradient(160deg, var(--surface), var(--butter-soft)); }
.arc-sticker.have[data-tier="epic"] .t { color: var(--t-epic); } .arc-sticker.have[data-tier="legendary"] .t { color: var(--t-legendary); } .arc-sticker.have[data-tier="rare"] .t { color: var(--t-rare); } .arc-sticker.have[data-tier="uncommon"] .t { color: var(--t-uncommon); }
.arc-complete { margin: 0; font-weight: 800; color: var(--ok); }

.arc-share { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 16px; background: var(--surface-2); border: 2px solid var(--line); }
.arc-share img { width: 100%; max-width: 360px; justify-self: center; border-radius: 14px; border: 3px solid var(--edge); }

@media (prefers-reduced-motion: reduce) { .arc-wins-track.moving, .arc-wins.flash { animation: none; } .arc-sticker.have, .arc-sticker.have:nth-child(even) { transform: none; } }
body.arc-reduced .arc-wins-track.moving, body.arc-reduced .arc-wins.flash { animation: none; }
@media (max-width: 560px) { .arc-stickers { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .arc-sticker .pic { width: 72px; height: 72px; } .arc-prow { grid-template-columns: 44px minmax(0, 1fr); } .arc-prow .num { grid-column: 2; } .arc-thumb { width: 44px; height: 44px; } }

/* ── Arcade, round 3: Pinto's Claw Machine, Bean Drop, Pinto's Prize Counter ── */
.arc-games { grid-template-columns: repeat(4, minmax(140px, 1fr)); }
.arc-games .arc-teaser { font: inherit; color: inherit; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, opacity .18s; }
.arc-games .arc-teaser:disabled { cursor: default; opacity: .55; }
.arc-games .arc-teaser.open:hover:not([aria-pressed="true"]) { transform: translateY(-3px); box-shadow: inset 0 0 0 3px rgba(255,255,255,.06), 0 0 30px rgba(79,227,214,.35); }
.arc-games .arc-teaser[aria-pressed="true"] { opacity: 1; box-shadow: inset 0 0 0 3px var(--neon-b), 0 0 34px rgba(79,227,214,.55); transform: translateY(-2px); }
.arc-games .arc-teaser.open .soon { color: var(--neon-b); animation: none; }
.arc-games .arc-teaser[aria-pressed="true"] .soon { color: #0E1A1F; background: var(--neon-b); padding: 4px 8px; border-radius: 999px; }
.arc-games.busy .arc-teaser { pointer-events: none; }
.arc-teaser.slot .scr.reels { background: #FFF6E6; grid-template-columns: repeat(3, 1fr); align-items: center; }
.arc-teaser.slot .scr.reels i { height: 30px; border-radius: 6px; background: #C98B4A; animation: arcReelMini 1.4s steps(4) infinite; }
.arc-teaser.slot .scr.reels i:nth-child(2) { background: #FFC93C; animation-delay: .2s; } .arc-teaser.slot .scr.reels i:nth-child(3) { background: #4FE3D6; animation-delay: .4s; }
@keyframes arcReelMini { 50% { transform: translateY(-4px); } }
.arc-host { margin: 4px 0 2px; }
/* Pinto Tickets: a paper ticket stub (notched ends, perforation) */
.arc-tix { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 18px; background: linear-gradient(#FFD86A, #FFC93C); color: #2B1B14; font: 800 14px var(--f-body); border-radius: 6px;
  -webkit-mask: radial-gradient(circle 7px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 7px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
  box-shadow: inset 0 0 0 2px #0A0604; }
.arc-tix b { font: 800 18px var(--f-mono); }
.arc-tix small { font: 800 9px/1.05 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding-left: 8px; border-left: 2px dashed rgba(43,27,20,.55); }
.arc-tix.bump { animation: arcTix .6s ease; }
@keyframes arcTix { 30% { transform: scale(1.18) rotate(-3deg); } 60% { transform: scale(.96); } }
body.bm-page main.bm-wrap .arc-tix b { color: #2B1B14 !important; }

/* marquee shared by the new cabinets */
.claw-marquee { display: grid; justify-items: center; gap: 2px; padding: 10px 14px; border-radius: 16px 16px 6px 6px; border: 4px solid #0A0604; background: linear-gradient(#2E6BFF, #1B3FB3); box-shadow: 0 0 26px rgba(46,107,255,.55); }
.claw-marquee b { font: 400 24px/1.05 var(--f-display); color: #FFF6E6; text-shadow: 0 0 10px rgba(255,255,255,.6); }
.claw-marquee span { font: 800 11px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: #FFC93C; }
.claw-marquee.drop { background: linear-gradient(#B03CFF, #6A1FB3); box-shadow: 0 0 26px rgba(176,60,255,.55); }
.claw-marquee.counter { background: linear-gradient(#FF8A3C, #C2410C); box-shadow: 0 0 26px rgba(255,138,60,.55); }
body.bm-page main.bm-wrap .claw-marquee b { color: #FFF6E6 !important; }
.center { text-align: center; justify-content: center; }

/* Pinto's Claw Machine */
.claw-cab, .drop-cab, .counter-cab { width: min(100%, 480px); display: grid; gap: 10px; padding: 12px; border-radius: 24px; border: 4px solid #0A0604; background: linear-gradient(#24314A, #121A29); box-shadow: 0 8px 0 #0A0604, 0 0 40px rgba(46,107,255,.25); }
.claw-cab.wobble { animation: arcClawWob .22s ease-in-out 6; }
@keyframes arcClawWob { 25% { transform: translateX(-4px) rotate(-.6deg); } 75% { transform: translateX(4px) rotate(.6deg); } }
.claw-glass { position: relative; height: 330px; border-radius: 14px; border: 4px solid #0A0604; overflow: hidden; background: radial-gradient(ellipse at 50% 120%, rgba(79,227,214,.25), transparent 60%), linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,0) 40%), #0B1220; }
.claw-glass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.08) 38%, transparent 46%); pointer-events: none; }
.claw-rail { position: absolute; left: 4%; right: 4%; top: 10px; height: 8px; border-radius: 6px; background: linear-gradient(#C9D4E8, #7C8AA6); border: 2px solid #0A0604; }
.claw-arm { position: absolute; top: 14px; left: 50%; width: 60px; margin-left: -30px; z-index: 20; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.claw-arm .rope { display: block; width: 6px; height: 18px; background: repeating-linear-gradient(#C9D4E8 0 6px, #7C8AA6 6px 9px); border: 1px solid #0A0604; border-radius: 3px; }
.claw-arm .grip { position: relative; display: block; width: 60px; height: 40px; }
.claw-arm .grip i { position: absolute; top: 0; width: 10px; height: 36px; background: linear-gradient(#E8EEF8, #9AA8C2); border: 2px solid #0A0604; border-radius: 6px; transform-origin: top center; transition: transform .25s ease; }
.claw-arm .grip .l { left: 6px; transform: rotate(28deg); } .claw-arm .grip .r { right: 6px; transform: rotate(-28deg); }
.claw-arm .grip .m { left: 22px; width: 16px; height: 16px; border-radius: 6px; background: #FFC93C; }
.claw-arm.closed .grip .l { transform: rotate(6deg); } .claw-arm.closed .grip .r { transform: rotate(-6deg); }
.claw-arm .held { position: relative; margin-top: -24px; width: 52px; min-height: 0; }
.claw-pit { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; }
.cap { position: absolute; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; border: 3px solid #0A0604; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.85) 0 10%, transparent 11%), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 35%, #fff) 0 55%, var(--c) 56% 100%); transform: rotate(var(--r, 0deg)); box-shadow: 0 4px 0 rgba(0,0,0,.35); display: grid; place-items: center; overflow: hidden; }
.cap img { width: 92%; height: 92%; object-fit: contain; pointer-events: none; }
.cap .arc-mystery { font-size: 26px; }
.cap.held { position: relative; margin: 0; transform: none; }
.cap.falling { animation: arcCapFall .52s cubic-bezier(.5,0,1,1) forwards; }
@keyframes arcCapFall { to { transform: translateY(240px) rotate(160deg); opacity: .2; } }
.claw-chute { position: absolute; left: 2%; bottom: 0; width: 14%; height: 70px; border: 3px solid #0A0604; border-bottom: 0; border-radius: 8px 8px 0 0; background: repeating-linear-gradient(45deg, #FFC93C 0 8px, #2B1B14 8px 16px); display: grid; place-items: center; z-index: 15; }
.claw-chute span { font: 800 10px var(--f-mono); letter-spacing: .1em; color: #FFF6E6; background: #0A0604; padding: 2px 4px; border-radius: 4px; }
.claw-empty { position: absolute; inset: auto 0 30px; text-align: center; color: #C9D4E8; font-weight: 700; }
.claw-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Bean Drop */
.drop-cab { background: linear-gradient(#2A1440, #150A22); box-shadow: 0 8px 0 #0A0604, 0 0 40px rgba(176,60,255,.3); }
.drop-board { position: relative; border-radius: 14px; border: 4px solid #0A0604; overflow: hidden; background: #0C0716; }
.drop-board canvas { display: block; width: 100%; height: auto; }
.drop-pop { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.6); font: 400 44px/1 var(--f-display); color: #FFC93C; text-shadow: 0 0 18px rgba(255,201,60,.8), 0 4px 0 #0A0604; opacity: 0; pointer-events: none; white-space: nowrap; }
.drop-pop[data-size="huge"] { font-size: 64px; } .drop-pop[data-size="small"] { font-size: 34px; color: #FFF6E6; }
.drop-pop.show { animation: arcPop 1.8s ease-out forwards; }
@keyframes arcPop { 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1); } }

/* Pinto's Prize Counter */
.counter-cab { width: min(100%, 560px); background: linear-gradient(#3B2214, #1E1109); box-shadow: 0 8px 0 #0A0604, 0 0 40px rgba(255,138,60,.25); }
.counter-wallet { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.35); color: #FFF6E6; }
.counter-wallet .tix { font: 800 18px var(--f-body); color: #FFC93C; } .counter-wallet .tix b { font-family: var(--f-mono); }
.counter-wallet .hint { color: #E8D9C6 !important; margin: 0; }
.counter-shelf { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; border-radius: 14px; background: repeating-linear-gradient(180deg, #6B3E1F 0 6px, #5A3318 6px 12px); border: 4px solid #0A0604; }
.ctr-item { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 10px 8px; border-radius: 14px; background: #FFF6E6; color: #2B1B14; border: 3px solid #0A0604; box-shadow: 0 5px 0 #0A0604; }
.ctr-item .pic { width: 88px; height: 88px; border-radius: 12px; background: #F7EBD6; display: grid; place-items: center; overflow: hidden; }
.ctr-item .pic img { width: 100%; height: 100%; object-fit: contain; }
.ctr-item b { font-size: 14px; line-height: 1.15; }
.ctr-item .price { font: 800 16px var(--f-mono); color: #8A5B00; background: #FFE9A8; padding: 3px 10px; border-radius: 999px; border: 2px dashed #B24E14; }
.ctr-item small { color: #6B5446; }
.ctr-item .btn { min-height: 40px; width: 100%; }
.ctr-item[data-tier="legendary"] { background: linear-gradient(160deg, #FFF6E6, #FFE9A8); }
.counter-trade { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(0,0,0,.3); color: #FFF6E6; }
.counter-trade h3 { margin: 0; color: #FFF6E6; }
.counter-trade .hint { color: #E8D9C6 !important; }
.counter-spares { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ctr-spare { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; background: #FFF6E6; color: #2B1B14; border: 2px solid #0A0604; }
.ctr-spare small { color: #6B5446; }
body.bm-page main.bm-wrap .counter-trade h3 { color: #FFF6E6 !important; }
body.bm-page main.bm-wrap .ctr-item b, body.bm-page main.bm-wrap .ctr-spare b { color: #2B1B14 !important; }

@media (max-width: 860px) { .arc-games { grid-template-columns: repeat(4, minmax(132px, 1fr)); overflow-x: auto; } }
@media (max-width: 560px) { .arc-games { grid-template-columns: repeat(4, 140px); } .claw-glass { height: 290px; } .counter-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .arc-teaser.slot .scr.reels i, .claw-cab.wobble, .arc-tix.bump, .drop-pop.show { animation: none; } .drop-pop.show { opacity: 1; transform: translate(-50%, -50%); } }
body.arc-reduced .arc-teaser.slot .scr.reels i, body.arc-reduced .claw-cab.wobble, body.arc-reduced .arc-tix.bump { animation: none; }
body.arc-reduced .drop-pop.show { animation: none; opacity: 1; transform: translate(-50%, -50%); }


/* ── Arcade, round 6: Pinto Tickets, the Ticket Book, game exclusives (1 Oct) ── */
.ticket-book { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); gap: 12px; align-items: stretch; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.35); color: #FFF6E6; }
.tb-stub { position: relative; display: grid; align-content: center; justify-items: center; gap: 2px; padding: 12px 14px; color: #2B1B14; text-align: center;
  background: linear-gradient(160deg, #FFE38A, #FFC93C 55%, #F2A81E); border-radius: 8px; box-shadow: inset 0 0 0 2px #0A0604, inset 0 0 0 6px rgba(255,255,255,.35);
  -webkit-mask: radial-gradient(circle 10px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 10px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat; }
.tb-stub::after { content: ""; position: absolute; inset: 8px 22px; border: 2px dashed rgba(43,27,20,.35); border-radius: 4px; pointer-events: none; }
.tb-stub small { font: 800 9px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.tb-stub b { font: 800 40px/1 var(--f-mono); }
.tb-stub span { font: 400 18px/1 var(--f-display); }
.tb-rank { display: grid; gap: 6px; align-content: center; min-width: 0; }
.tb-eyebrow { margin: 0; font: 800 10px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: #FFC93C; }
.tb-rank h3 { margin: 0; font: 400 26px/1.05 var(--f-display); color: #FFF6E6; }
.tb-bar { height: 12px; border-radius: 999px; background: rgba(255,255,255,.12); border: 2px solid #0A0604; overflow: hidden; }
.tb-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(135deg, #FFC93C 0 10px, #FFD86A 10px 20px); transition: width .8s cubic-bezier(.3,.8,.3,1); }
.tb-next { margin: 0; font-size: 13px; color: #E8D9C6; }
.tb-next b { color: #FFC93C; }
.tb-chips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tb-chips li { font: 800 10px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; border: 1px dashed rgba(255,246,230,.35); color: rgba(255,246,230,.5); }
.tb-chips li.got { border-style: solid; border-color: #FFC93C; color: #FFC93C; }
.tb-chips li.now { background: #FFC93C; color: #2B1B14; }
.ticket-book.stamped .tb-rank h3 { animation: tbStamp .9s cubic-bezier(.2,1.6,.4,1); }
@keyframes tbStamp { 0% { transform: scale(2.2) rotate(-8deg); opacity: 0; } 60% { transform: scale(.94) rotate(2deg); opacity: 1; } 100% { transform: none; } }
.ctr-hint { margin: 0; text-align: center; }
body.bm-page main.bm-wrap .ctr-hint { color: #E8D9C6 !important; }
body.bm-page main.bm-wrap .tb-rank h3 { color: #FFF6E6 !important; }
body.bm-page main.bm-wrap .tb-stub b, body.bm-page main.bm-wrap .tb-stub span { color: #2B1B14 !important; }

/* shelf: Mayor's Pick spotlight and "only here" exclusives */
.ctr-item { position: relative; }
.ctr-item.featured { grid-column: span 2; background: radial-gradient(120% 90% at 50% 0%, #FFF3C4, #FFF6E6 60%); border-color: #B24E14; box-shadow: 0 5px 0 #0A0604, 0 0 0 3px #FFC93C, 0 0 28px rgba(255,201,60,.6); }
.ctr-item.featured .pic { width: 128px; height: 128px; }
.ctr-item.featured::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation: ctrShine 3.2s ease-in-out infinite; }
@keyframes ctrShine { 0%, 55% { background-position: -150% 0; } 100% { background-position: 150% 0; } }
.ctr-ribbon { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; padding: 3px 12px; border-radius: 6px; background: #C2410C; color: #FFF6E6; font: 800 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; border: 2px solid #0A0604; z-index: 2; }
.ctr-excl { position: absolute; top: 8px; right: -6px; padding: 2px 8px; background: #6A1FB3; color: #FFF6E6; font: 800 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; border: 2px solid #0A0604; border-radius: 4px 0 0 4px; z-index: 2; box-shadow: 0 2px 0 #0A0604; }
body.bm-page main.bm-wrap .ctr-ribbon, body.bm-page main.bm-wrap .ctr-excl { color: #FFF6E6 !important; }
.arc-excl { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #6A1FB3; color: #FFF6E6 !important; font: 800 10px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.arc-where { font: 700 10px var(--f-mono); color: var(--muted); letter-spacing: .04em; }
@media (max-width: 560px) { .ticket-book { grid-template-columns: 1fr; } .tb-stub b { font-size: 34px; } .ctr-item.featured .pic { width: 104px; height: 104px; } }
@media (prefers-reduced-motion: reduce) { .ctr-item.featured::before, .ticket-book.stamped .tb-rank h3 { animation: none; } .tb-bar i { transition: none; } }
body.arc-reduced .ctr-item.featured::before, body.arc-reduced .ticket-book.stamped .tb-rank h3 { animation: none; }

/* ── Arcade, round 7: ticket toast, streaks, weekly leaderboards (1 Oct) ── */
.tix-toast { position: fixed; bottom: 22px; left: 50%; z-index: 90; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: min(92vw, 460px);
  padding: 8px 14px; border-radius: 10px; background: linear-gradient(#FFD86A, #FFC93C); color: #2B1B14; font: 700 14px var(--f-body); border: 2px solid #0A0604; box-shadow: 0 4px 0 #0A0604, 0 0 24px rgba(255,201,60,.55);
  opacity: 0; transform: translate(-50%, 14px) scale(.96); pointer-events: none; transition: opacity .25s ease, transform .35s cubic-bezier(.2,1.6,.4,1); }
.tix-toast.show { opacity: 1; transform: translate(-50%, 0); }
.tix-toast b { font-family: var(--f-mono); }
.tix-toast i { font-style: normal; opacity: .5; }
body.bm-page main.bm-wrap .tix-toast, body.bm-page main.bm-wrap .tix-toast b { color: #2B1B14 !important; }
.tb-streak { margin: 0; font-size: 13px; color: #FFD9B0; }
.tb-streak b { color: #FF9A3C; }
.arc-board-reset { font: 800 12px var(--f-mono); letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text); }
.arc-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.arc-boardcol h3 { margin: 0 0 6px; font-size: 16px; }
.arc-ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.arc-ranks li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); border: 2px solid transparent; }
.arc-ranks li.hint { display: block; background: none; }
.arc-ranks .rk { font: 800 15px var(--f-mono); text-align: center; }
.arc-ranks .who { font: 700 13px var(--f-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-ranks .sc { font: 800 15px var(--f-mono); }
.arc-ranks li.top1 { background: linear-gradient(90deg, rgba(255,201,60,.35), var(--surface-2)); }
.arc-ranks li.you { border-color: var(--edge); }
.arc-board-you { margin: 10px 0 0; }
@media (max-width: 560px) { .arc-boards { grid-template-columns: 1fr; } .tix-toast { bottom: 14px; font-size: 13px; width: max-content; max-width: calc(100vw - 32px); } }
@media (prefers-reduced-motion: reduce) { .tix-toast, .tix-toast.show { transition: opacity .2s; transform: translate(-50%, 0); } }

/* ── Beanville Field Day (1 Oct): fairground, sack race track, Mayor's Showdown felt, Tug-of-Bean rope ── */
.fd-fair { --grass: #4C9A2A; --grass-2: #3E8423; --chalk: #F8F3E3; --ink: #2B1B14; --paper: #FFF6E6; position: relative; display: grid; gap: 14px; padding: 18px 16px 18px; border-radius: 26px; border: 4px solid #0A0604;
  background: radial-gradient(120% 70% at 50% 0%, #BFE6FF, #8FD0F5 45%, #7BC66A 46%, #5FAE3F 70%, #4C9A2A); box-shadow: 0 8px 0 #0A0604; color: var(--ink); overflow: hidden; }
.fd-bunting { height: 26px; margin: -18px -16px 0; background:
  conic-gradient(from 135deg at 50% 0, #E63946 0 90deg, transparent 90deg) 0 0 / 36px 26px repeat-x,
  conic-gradient(from 135deg at 50% 0, #FFC93C 0 90deg, transparent 90deg) 18px 0 / 36px 22px repeat-x; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.fd-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.fd-mayor { position: relative; width: 56px; height: 64px; }
.fd-mayor .face { position: absolute; inset: 14px 6px 0; border-radius: 50% 50% 46% 46%; background: #D9B48A; border: 3px solid #0A0604; }
.fd-mayor .face::before { content: ""; position: absolute; left: 30%; top: 38%; width: 6px; height: 6px; border-radius: 50%; background: #2B1B14; box-shadow: 14px 0 0 #2B1B14; }
.fd-mayor .hat { position: absolute; left: 10px; right: 10px; top: 0; height: 22px; background: #2B1B14; border-radius: 4px 4px 0 0; z-index: 1; box-shadow: 0 16px 0 -10px #2B1B14, inset 0 -5px 0 #E63946; }
.fd-says { margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--paper); border: 3px solid #0A0604; font: 600 15px/1.35 var(--f-body); color: var(--ink); position: relative; }
.fd-says::before { content: ""; position: absolute; left: -11px; top: 18px; border: 8px solid transparent; border-right-color: #0A0604; }
.fd-left { display: grid; justify-items: center; padding: 6px 12px; border-radius: 12px; background: var(--paper); border: 3px solid #0A0604; }
.fd-left .lbl { font: 800 9px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #6B5446; }
.fd-left b { font: 800 20px var(--f-mono); color: var(--ink); }
.fd-left small { font: 600 10px var(--f-mono); color: #6B5446; }
.fd-picker { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: rgba(255,246,230,.92); border: 3px solid #0A0604; }
.fd-picker h3 { margin: 0; font: 400 20px var(--f-display); color: var(--ink); }
.fd-beans { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.fd-bean { display: grid; justify-items: center; gap: 2px; min-width: 84px; padding: 6px; border-radius: 12px; border: 3px solid #0A0604; background: #FFF; color: var(--ink); cursor: pointer; font: inherit; }
.fd-bean[aria-pressed="true"] { background: #FFE38A; box-shadow: 0 4px 0 #0A0604; transform: translateY(-2px); }
.fd-bean[data-tired] { opacity: .55; }
.fd-bean b { font: 800 12px var(--f-mono); }
.fd-bean small { font: 600 10px var(--f-mono); color: #6B5446; }
.fd-av { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: #F7EBD6; display: block; }
.fd-av.regular { background: radial-gradient(circle at 38% 40%, #2B1B14 0 3px, transparent 3.5px), radial-gradient(circle at 62% 40%, #2B1B14 0 3px, transparent 3.5px), radial-gradient(ellipse 34% 44% at 50% 55%, #C98B4A 96%, transparent 100%); border-radius: 50%; }
.fd-stats { display: grid; gap: 6px; }
.fd-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.fd-fam, .fd-pill { font: 800 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; border: 2px solid #0A0604; }
.fd-fam { background: var(--fam); color: #0A0604; }
.fd-pill { background: #FFF; color: var(--ink); }
.fd-stat { display: grid; grid-template-columns: 54px minmax(0, 1fr) 34px; gap: 8px; align-items: center; font: 800 12px var(--f-mono); color: var(--ink); }
.fd-stat i { height: 12px; border-radius: 999px; background: #EADBC4; border: 2px solid #0A0604; overflow: hidden; display: block; }
.fd-stat i b { display: block; height: 100%; background: repeating-linear-gradient(135deg, #4C9A2A 0 8px, #6CC24A 8px 16px); }
.fd-stat em { font-style: normal; text-align: right; }
.fd-events { display: flex; gap: 8px; }
.fd-events button { flex: 1; min-height: 46px; border-radius: 14px; border: 3px solid #0A0604; background: rgba(255,246,230,.85); color: var(--ink); font: 400 18px var(--f-display); cursor: pointer; }
.fd-events button[aria-selected="true"] { background: #FFC93C; box-shadow: 0 4px 0 #0A0604; transform: translateY(-2px); }
.fd-stage { display: grid; gap: 10px; }
.fd-track { position: relative; padding: 16px 0 4px; border-radius: 16px; border: 3px solid #0A0604; background: repeating-linear-gradient(90deg, var(--grass) 0 44px, var(--grass-2) 44px 88px); overflow: hidden; }
.fd-finish { position: absolute; top: 0; bottom: 0; right: 5%; width: 14px; background: repeating-conic-gradient(#FFF 0 25%, #0A0604 0 50%) 0 0 / 14px 14px; opacity: .9; }
.fd-lanes { list-style: none; margin: 0; padding: 0; display: grid; }
.fd-lane { position: relative; height: 86px; border-bottom: 3px dashed rgba(248,243,227,.7); }
.fd-lane:last-child { border-bottom: 0; }
.fd-lane.you { background: rgba(255,201,60,.18); }
.fd-lane.won { background: rgba(255,201,60,.38); }
.fd-runner { position: absolute; bottom: 8px; width: 54px; height: 62px; transform-origin: 50% 100%; will-change: left, transform; }
.fd-runner .fd-av { width: 44px; height: 44px; margin: 0 auto; border: 2px solid #0A0604; position: relative; z-index: 1; }
.fd-sack { position: absolute; left: 4px; right: 4px; bottom: 0; height: 26px; border-radius: 6px 6px 12px 12px; background: repeating-linear-gradient(0deg, #C9A46A 0 4px, #B88F55 4px 8px); border: 2px solid #0A0604; z-index: 2; }
.fd-fx { position: absolute; top: -14px; right: -10px; font-size: 18px; z-index: 3; }
.fd-tag { position: absolute; left: 66px; top: 6px; font: 800 11px var(--f-mono); color: #FFF; text-shadow: 0 1px 0 #0A0604, 0 0 4px #0A0604; white-space: nowrap; pointer-events: none; }
.fd-tag small { opacity: .8; }
.fd-lane.you .fd-tag { color: #FFE38A; }
.fd-place { position: absolute; right: 9%; top: 22px; font: 800 15px var(--f-mono); color: #FFF; text-shadow: 0 1px 0 #0A0604, 0 0 6px #0A0604; }
.fd-countdown { position: absolute; inset: 0; display: grid; place-items: center; font: 400 64px var(--f-display); color: #FFF; text-shadow: 0 4px 0 #0A0604; opacity: 0; pointer-events: none; transition: opacity .15s; }
.fd-countdown.on { opacity: 1; }
.fd-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fd-plan { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 12px; border: 3px solid #0A0604; background: rgba(255,246,230,.9); color: var(--ink); cursor: pointer; font: inherit; }
.fd-plan b { font: 400 17px var(--f-display); }
.fd-plan small { font-size: 12px; color: #6B5446; }
.fd-plan[aria-checked="true"] { background: #FFE38A; box-shadow: 0 4px 0 #0A0604; transform: translateY(-2px); }
.fd-result { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 16px; background: var(--paper); border: 3px solid #0A0604; box-shadow: 0 5px 0 #0A0604; color: var(--ink); animation: fdPop .5s cubic-bezier(.2,1.6,.4,1); }
.fd-result .rib { font-size: 38px; }
.fd-result b { display: block; font: 400 22px var(--f-display); }
.fd-result small { color: #6B5446; }
.fd-result .tix { font: 800 20px var(--f-mono); color: #8A5B00; }
@keyframes fdPop { 0% { transform: scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* Mayor's Showdown */
.fd-felt { display: grid; gap: 10px; padding: 14px; border-radius: 120px / 40px; border: 6px solid #6B3E1F; box-shadow: 0 0 0 3px #0A0604, inset 0 0 40px rgba(0,0,0,.45); background: radial-gradient(ellipse at 50% 40%, #1F8A4C, #11663A 70%, #0C4F2C); }
.fd-dealer { display: flex; justify-content: center; gap: 10px; align-items: baseline; color: #F8F3E3; font: 400 18px var(--f-display); }
.fd-handname { font: 800 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #FFC93C; }
.fd-cards { display: flex; justify-content: center; gap: 8px; flex-wrap: nowrap; }
.fd-card { position: relative; width: 64px; height: 92px; border-radius: 10px; border: 2px solid #0A0604; background: #FFFDF6; color: var(--suit); display: grid; place-items: center; font: inherit; box-shadow: 0 4px 0 rgba(0,0,0,.4); cursor: pointer; padding: 0; transition: transform .18s ease; }
.fd-card:disabled { cursor: default; }
.fd-card b { position: absolute; left: 6px; top: 4px; font: 800 18px var(--f-mono); color: var(--suit); }
.fd-card em { position: absolute; right: 6px; bottom: 2px; font-style: normal; font-size: 16px; color: var(--suit); }
.fd-card i { font-style: normal; font-size: 34px; color: var(--suit); }
.fd-card.held { transform: translateY(-12px); box-shadow: 0 0 0 3px #FFC93C, 0 8px 0 rgba(0,0,0,.4); }
.fd-card .hold { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font: 800 10px var(--f-mono); letter-spacing: .12em; color: #FFC93C; }
.fd-card.back { cursor: default; background: repeating-linear-gradient(45deg, #E63946 0 6px, #C2272F 6px 12px); box-shadow: inset 0 0 0 5px #FFFDF6, 0 4px 0 rgba(0,0,0,.4); }
.fd-card.flip { animation: fdFlip .5s ease both; }
@keyframes fdFlip { 0% { transform: rotateY(90deg); } 100% { transform: none; } }
.fd-pot { display: grid; place-items: center; }
.fd-pot span { font: 800 10px var(--f-mono); letter-spacing: .18em; color: rgba(248,243,227,.7); padding: 4px 10px; border: 2px dashed rgba(248,243,227,.4); border-radius: 999px; }
.fd-stage .hint { color: var(--ink) !important; background: rgba(255,246,230,.85); border-radius: 10px; padding: 6px 10px; margin: 0; }
/* Tug-of-Bean */
.fd-rope { position: relative; display: flex; height: 44px; border-radius: 999px; overflow: hidden; border: 3px solid var(--edge); margin: 10px 0; }
.fd-rope .seg { display: grid; place-items: center; background: repeating-linear-gradient(115deg, var(--fam) 0 10px, color-mix(in srgb, var(--fam) 75%, #000) 10px 20px); min-width: 40px; transition: flex-grow .8s ease; }
.fd-rope .seg b { font: 800 11px var(--f-mono); color: #0A0604; background: rgba(255,255,255,.8); padding: 2px 8px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 95%; }
.fd-teams { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fd-teams li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); border-left: 6px solid var(--fam); }
.fd-teams li.hint { display: block; border: 0; background: none; }
.fd-teams .rk { font: 800 15px var(--f-mono); text-align: center; }
.fd-teams .n { font: 800 13px var(--f-mono); }
.fd-payouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 10px; }
.fd-pay h3 { margin: 0 0 6px; font-size: 16px; }
.fd-pay ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fd-pay li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 10px; border-radius: 8px; background: var(--surface-2); }
.fd-pay li.bonus { background: none; color: var(--muted); font-size: 13px; padding: 1px 10px; }
.fd-pay b { font-family: var(--f-mono); }
/* the Field Day sign in Town */
.fd-sign .arc-sign-roof { background: repeating-linear-gradient(90deg, #4C9A2A 0 10px, #FFF6E6 10px 20px); }
body.bm-page main.bm-wrap .fd-fair h3, body.bm-page main.bm-wrap .fd-picker h3, body.bm-page main.bm-wrap .fd-result b, body.bm-page main.bm-wrap .fd-says { color: var(--ink) !important; }
body.bm-page main.bm-wrap .fd-dealer b { color: #F8F3E3 !important; }
body.bm-page main.bm-wrap .fd-stage .hint, body.bm-page main.bm-wrap .fd-picker .hint, body.bm-page main.bm-wrap .fd-picker .hint a { color: #2B1B14 !important; }
@media (max-width: 560px) {
  .fd-head { grid-template-columns: auto minmax(0, 1fr); } .fd-left { grid-column: 1 / -1; grid-auto-flow: column; gap: 10px; justify-content: center; align-items: baseline; }
  .fd-plans { grid-template-columns: 1fr; } .fd-plan { grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; }
  .fd-card { width: 52px; height: 76px; } .fd-card i { font-size: 26px; } .fd-card b { font-size: 15px; } .fd-cards { gap: 5px; }
  .fd-lane { height: 64px; } .fd-runner { width: 46px; height: 54px; } .fd-runner .fd-av { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .fd-result, .fd-card.flip { animation: none; } .fd-rope .seg { transition: none; } }

/* ── Field Day Hour (1 Oct): the whole town on one stage — bingo, the big race, the dunk tank, the jar ── */
.fh-card { --ink: #2B1B14; --paper: #FFF6E6; position: relative; display: grid; gap: 12px; padding: 0 16px 16px; border-radius: 26px; border: 4px solid #0A0604; background: var(--paper); box-shadow: 0 8px 0 #0A0604; color: var(--ink); overflow: hidden; }
.fh-awning { height: 26px; margin: 0 -16px; background: repeating-linear-gradient(90deg, #E63946 0 34px, #FFF6E6 34px 68px); border-bottom: 4px solid #0A0604; }
.fh-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.fh-top h2 { margin: 0; font: 400 34px/1 var(--f-display); color: var(--ink); }
.fh-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fh-live { font: 800 12px var(--f-mono); letter-spacing: .14em; padding: 4px 10px 4px 22px; border-radius: 999px; background: #E63946; color: #FFF; border: 2px solid #0A0604; position: relative; }
.fh-live::before { content: ""; position: absolute; left: 8px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #FFF; animation: fhBlink 1.2s ease-in-out infinite; }
@keyframes fhBlink { 50% { opacity: .2; } }
.fh-crowd, .fh-clock { font: 800 12px var(--f-mono); padding: 4px 10px; border-radius: 999px; border: 2px solid #0A0604; background: #FFF; color: var(--ink); }
.fh-clock { background: #FFE38A; }
.fh-line { margin: 0; color: #4A372D; }
.fh-program { list-style: none; margin: 0; padding: 4px 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.fh-program li { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #0A0604; background: #FFF; font-size: 16px; }
.fh-program li.done { opacity: .35; }
.fh-program li.now { background: #FFC93C; transform: scale(1.18); box-shadow: 0 3px 0 #0A0604; }
.fh-body { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 14px; align-items: start; }
.fh-stage { display: grid; gap: 10px; min-width: 0; }
.fh-round { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: #2B1B14; color: #FFF6E6; }
.fh-round h3 { margin: 0; font: 400 24px/1.1 var(--f-display); color: #FFF6E6; }
.fh-round .lbl, .fh-last .lbl { display: block; font: 800 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #FFC93C; }
.fh-timer { text-align: right; }
.fh-timer b { font: 800 26px var(--f-mono); color: #FFF6E6; }
.fh-last { padding: 8px 12px; border-radius: 14px; border: 3px dashed #0A0604; background: #FFF; }
.fh-last .lbl { color: #8A5B00; }
.fh-last p { margin: 2px 0 0; }
.fh-last.splash { background: linear-gradient(#BFE6FF, #8FD0F5); animation: fhSplash .8s ease; }
@keyframes fhSplash { 0% { transform: scale(.9) rotate(-2deg); } 50% { transform: scale(1.04) rotate(1deg); } 100% { transform: none; } }
.fh-wait { display: grid; justify-items: center; gap: 4px; padding: 18px 10px; text-align: center; }
.fh-wait .big { font: 800 56px/1 var(--f-mono); color: var(--ink); }
.fh-wait p { margin: 0; }
.fh-games { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.fh-games li { padding: 4px 10px; border-radius: 999px; border: 2px solid #0A0604; background: #FFF; font-weight: 700; font-size: 13px; }
.fh-in { margin: 0; padding: 8px 12px; border-radius: 12px; background: #D9F2D0; border: 2px solid #0A0604; font-weight: 700; }
/* bingo */
.fh-bingo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.bg-caller { display: grid; gap: 8px; justify-items: center; }
.bg-ball { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; font: 800 26px var(--f-mono); color: #0A0604; border: 4px solid #0A0604; background: radial-gradient(circle at 34% 30%, #FFF 0 18%, #FFE38A 19% 60%, #FFC93C 61%); box-shadow: 0 6px 0 #0A0604; }
.bg-ball.pop { animation: bgPop .5s cubic-bezier(.2,1.7,.4,1); }
@keyframes bgPop { 0% { transform: scale(.4) rotate(-40deg); } 100% { transform: none; } }
.bg-recent { display: flex; gap: 4px; min-height: 24px; flex-wrap: wrap; justify-content: center; }
.bg-recent span { font: 800 11px var(--f-mono); padding: 2px 7px; border-radius: 999px; background: #EADBC4; border: 2px solid #0A0604; }
.bg-board { display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; width: 100%; }
.bg-board i { font: 800 11px var(--f-mono); font-style: normal; text-align: center; padding: 3px 0; border-radius: 6px; background: #EFE4D0; color: #8A7767; }
.bg-board i.on { background: #2B1B14; color: #FFC93C; }
.bg-mine { display: grid; gap: 8px; }
.bg-card { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 8px; border-radius: 14px; background: #FFF; border: 3px solid #0A0604; box-shadow: 0 5px 0 #0A0604; }
.bg-card .hd { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; }
.bg-card .hd b { font: 400 22px var(--f-display); color: #E63946; }
.bg-card span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; background: #FFF6E6; border: 2px solid #D9C7AE; font: 800 17px var(--f-mono); color: var(--ink); }
.bg-card span.on { background: #E63946; color: #FFF; border-color: #0A0604; transform: rotate(-4deg); }
.bg-card span.free { background: #FFC93C; color: #0A0604; }
.bg-card .hint { grid-column: 1 / -1; margin: 12px 0; text-align: center; }
.bg-shout.ready { animation: bgShout .6s ease-in-out infinite alternate; box-shadow: 0 0 0 4px #FFC93C, 0 6px 0 #0A0604; }
@keyframes bgShout { to { transform: scale(1.06); } }
/* the big race */
.fh-race { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 10px; }
.fh-track { position: relative; min-height: 250px; border-radius: 16px; border: 3px solid #0A0604; overflow: hidden; background: repeating-linear-gradient(90deg, #4C9A2A 0 44px, #3E8423 44px 88px); }
.rc-field { position: absolute; inset: 0; --rows: 6; }
.rc-runner { position: absolute; top: calc(6px + var(--row) * ((100% - 70px) / max(1, var(--rows) - 1))); left: 0; width: 46px; height: 56px; transform-origin: 50% 100%; will-change: left, transform; }
.rc-runner .fd-av { width: 38px; height: 38px; margin: 0 auto; border: 2px solid #0A0604; position: relative; z-index: 1; }
.rc-runner.small { width: 34px; height: 42px; } .rc-runner.small .fd-av { width: 28px; height: 28px; } .rc-runner.small .fd-sack { height: 18px; }
.rc-runner.you { z-index: 5; } .rc-runner.you .fd-av { box-shadow: 0 0 0 3px #FFC93C; }
.rc-wait { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #FFF; font: 400 20px var(--f-display); text-shadow: 0 2px 0 #0A0604; text-align: center; padding: 0 12px; }
.rc-side { display: grid; gap: 8px; align-content: start; }
.rc-standings { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rc-standings li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 6px; padding: 4px 8px; border-radius: 8px; background: #FFF; border: 2px solid #D9C7AE; font-size: 13px; }
.rc-standings li.you { border-color: #0A0604; background: #FFE38A; }
.rc-standings span { font: 800 13px var(--f-mono); grid-row: span 2; }
.rc-standings small { grid-column: 2; color: #6B5446; font: 600 10px var(--f-mono); }
.rc-plans { display: grid; gap: 6px; }
.rc-plans .fd-plan { padding: 5px 10px; }
/* dunk tank */
.fh-dunk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; }
.dk-tank { position: relative; height: 270px; border-radius: 16px; border: 3px solid #0A0604; background: linear-gradient(#BFE6FF 0 64%, #8FD0F5 64%); overflow: hidden; }
.dk-water { position: absolute; left: 0; right: 0; bottom: 0; height: 36%; background: repeating-radial-gradient(ellipse at 50% 0, rgba(255,255,255,.35) 0 6px, transparent 7px 26px), linear-gradient(#3FA7E0, #1C6FB0); border-top: 3px solid #0A0604; }
.dk-seat { position: absolute; left: 20%; top: 48%; width: 96px; height: 10px; background: #6B3E1F; border: 3px solid #0A0604; border-radius: 4px; transform-origin: 0 50%; transition: transform .5s ease; }
.dk-mayor { position: absolute; left: 22px; bottom: 10px; width: 46px; height: 58px; border-radius: 50% 50% 46% 46%; background: #D9B48A; border: 3px solid #0A0604; }
.dk-mayor::before { content: ""; position: absolute; left: -2px; right: -2px; top: -16px; height: 18px; background: #2B1B14; border-radius: 4px 4px 0 0; box-shadow: inset 0 -5px 0 #E63946; }
.dk-mayor::after { content: ""; position: absolute; left: 11px; top: 20px; width: 5px; height: 5px; border-radius: 50%; background: #2B1B14; box-shadow: 14px 0 0 #2B1B14; }
.dk-tank.tipping .dk-seat { transform: rotate(8deg); }
.dk-target { position: absolute; right: 10%; top: 16%; width: 78px; height: 78px; border-radius: 50%; border: 3px solid #0A0604; background: radial-gradient(circle, #E63946 0 22%, #FFF 23% 45%, #E63946 46% 68%, #FFF 69%); }
.dk-target.hit { animation: dkHit .45s ease; }
@keyframes dkHit { 30% { transform: scale(1.25) rotate(12deg); } }
.dk-bag { position: absolute; left: 58%; bottom: 5%; width: 22px; height: 18px; border-radius: 6px; background: #C98B4A; border: 2px solid #0A0604; opacity: 0; }
.dk-pop { position: absolute; right: 6%; top: 50%; font: 400 22px var(--f-display); color: #0A0604; opacity: 0; text-shadow: 0 0 6px #FFF, 0 0 2px #FFF; }
.dk-pop.show { animation: dkPop 1s ease both; }
.dk-pop[data-hit="true"] { color: #C2272F; }
@keyframes dkPop { 0% { opacity: 0; transform: scale(.5); } 20% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: translateY(-16px); } }
.dk-side { display: grid; gap: 8px; }
.dk-meter { position: relative; height: 34px; border-radius: 999px; border: 3px solid #0A0604; background: #EADBC4; overflow: hidden; }
.dk-meter i { position: absolute; inset: 0 auto 0 0; width: 0; background: repeating-linear-gradient(115deg, #3FA7E0 0 12px, #63BDEB 12px 24px); transition: width .5s ease; }
.dk-meter span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 14px var(--f-mono); color: #0A0604; }
.dk-bags { display: flex; gap: 6px; }
.dk-bags i { width: 26px; height: 20px; border-radius: 7px; background: #C98B4A; border: 2px solid #0A0604; }
.dk-bags i.used { opacity: .25; }
/* the jar */
.fh-jar { display: grid; gap: 6px; padding: 10px; border-radius: 16px; border: 3px solid #0A0604; background: #FFF; text-align: center; }
.fh-jar h3 { margin: 0; font: 400 20px var(--f-display); }
.jar-img { width: 100%; max-width: 200px; margin: 0 auto; border-radius: 12px; }
.jar-form { display: grid; gap: 6px; }
.jar-form input { min-height: 42px; border-radius: 10px; border: 3px solid #0A0604; padding: 0 10px; font: 800 16px var(--f-mono); text-align: center; background: #FFF6E6; color: var(--ink); width: 100%; }
.jar-locked, .jar-reveal { margin: 0; font-size: 17px; }
.jar-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px; text-align: left; }
.jar-count { margin: 0; font: 800 11px var(--f-mono); color: #6B5446; }
body.bm-page main.bm-wrap .fh-card h2, body.bm-page main.bm-wrap .fh-jar h3, body.bm-page main.bm-wrap .fh-card p, body.bm-page main.bm-wrap .fh-card .hint { color: #2B1B14 !important; }
body.bm-page main.bm-wrap .fh-round h3 { color: #FFF6E6 !important; }
body.bm-page main.bm-wrap .rc-wait { color: #FFF !important; }
body.bm-page main.bm-wrap .dk-pop { color: #0A0604 !important; } body.bm-page main.bm-wrap .dk-pop[data-hit="true"] { color: #C2272F !important; }
@media (max-width: 760px) { .fh-body, .fh-bingo, .fh-race, .fh-dunk { grid-template-columns: 1fr; } .fh-jar { grid-template-columns: 110px 1fr; text-align: left; align-items: center; } .fh-jar h3 { grid-column: 1 / -1; } .jar-img { grid-row: span 4; } .fh-top h2 { font-size: 28px; } .bg-ball { width: 84px; height: 84px; font-size: 21px; } .dk-tank { height: 230px; } .dk-pinto { height: 100px; } }
@media (prefers-reduced-motion: reduce) { .fh-live::before, .bg-ball.pop, .bg-shout.ready, .dk-target.hit, .fh-last.splash { animation: none; } .dk-pop.show { animation: none; opacity: 1; } .dk-meter i, .dk-seat { transition: none; } }

/* ── Field Day, round 3 (1 Oct): the characters themselves (cut-outs, no background), Mayor Pinto from trait art, trait sheets ── */
.fd-cut { display: block; height: 64px; width: auto; max-width: none; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.fd-cut.gone { display: none; }
.fd-mayor { width: 66px; height: 88px; }
.fd-mayor img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; transform: translateX(-50%); filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); }
.fd-mayor:has(img:not([hidden])) .hat, .fd-mayor:has(img:not([hidden])) .face { display: none; }
.fd-bean .fd-cut { height: 58px; }
.fd-sheet { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: start; }
.fd-hero { display: grid; justify-items: center; gap: 4px; padding: 10px 6px 8px; border-radius: 14px; border: 3px solid #0A0604; background: radial-gradient(90% 60% at 50% 100%, #7BC66A 0 60%, transparent 61%), linear-gradient(#BFE6FF, #EAF6FF); }
.fd-hero .fd-cut, .fd-hero .fd-av { height: 150px; width: auto; }
.fd-hero b { font: 800 13px var(--f-mono); color: #2B1B14; background: #FFF; border: 2px solid #0A0604; border-radius: 999px; padding: 1px 10px; }
.fd-sheetmain { display: grid; gap: 8px; align-content: start; min-width: 0; }
.fd-traits { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fd-traits li { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 4px 8px; border-radius: 8px; background: #FFF; border: 2px solid #D9C7AE; }
.fd-traits small { font: 800 9px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #6B5446; }
.fd-traits b { font-size: 14px; color: #2B1B14; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-pill.mini { font-size: 9px; padding: 1px 6px; grid-column: 2 / -1; justify-self: start; background: #E9DDFB; }
.fd-statlist { display: grid; gap: 6px; align-content: start; }
.fd-statlist h4 { margin: 0; font: 800 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #6B5446; }
.fd-statrow { display: grid; gap: 2px; }
.fd-why { margin: 0 0 0 62px; display: flex; flex-wrap: wrap; gap: 3px 5px; font-size: 11px; color: #4A372D; }
.fd-why small { flex-basis: 100%; font: 700 10px var(--f-mono); color: #6B5446; }
.fd-why span { padding: 1px 7px; border-radius: 999px; background: #FFF; border: 1px solid #D9C7AE; }
.fd-why b { color: #3E8423; font-family: var(--f-mono); }
.fd-note { margin: 2px 0 0; font-size: 12px; color: #6B5446; }
.fd-runner.cut { width: auto; height: auto; }
.fd-runner.cut .fd-cut { height: 70px; filter: none; }
.fd-runner.cut .fd-sack { left: 8%; right: 8%; height: 30px; }
.fd-castrow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.fd-castrow li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 14px; background: var(--paper); border: 3px solid #0A0604; color: var(--ink); }
.fd-castrow li.you { background: #FFE38A; }
.fd-castrow .fd-cut, .fd-castrow .fd-av { height: 84px; width: auto; }
.fd-castrow .pl { position: absolute; top: -8px; left: -6px; font-size: 22px; }
.fd-castrow b { display: block; font-size: 15px; }
.fd-castrow small { display: block; font: 600 11px var(--f-mono); color: #6B5446; }
.fd-castrow .tr { display: block; font-size: 11px; color: #4A372D; margin-top: 2px; }
.fd-dealer-img { height: 58px; width: auto; filter: drop-shadow(0 3px 0 rgba(0,0,0,.4)); align-self: flex-end; }
.fd-dealer { align-items: center; }
body.bm-page main.bm-wrap .fd-castrow b, body.bm-page main.bm-wrap .fd-traits b { color: #2B1B14 !important; }
/* Field Day Hour */
.rc-runner.cut { width: auto; height: auto; }
.rc-runner.cut .fd-cut { height: 56px; filter: none; } .rc-runner.cut.small .fd-cut { height: 42px; }
.rc-runner.cut .fd-sack { left: 8%; right: 8%; height: 24px; } .rc-runner.cut.small .fd-sack { height: 18px; }
.rc-runner.you .fd-cut { filter: drop-shadow(0 0 0 #FFC93C) drop-shadow(0 0 5px #FFC93C); }
.rc-me { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 8px; border-radius: 12px; background: #FFF; border: 2px solid #0A0604; }
.rc-me .fd-cut, .rc-me .fd-av { height: 70px; width: auto; }
.rc-me small { display: block; font: 700 11px var(--f-mono); color: #6B5446; }
.fh-last { display: flex; gap: 10px; align-items: center; }
.fh-lastpic { height: 70px; width: auto; flex: 0 0 auto; }
.fh-podium { list-style: none; margin: 4px 0 0; padding: 0; display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.fh-podium li { display: grid; justify-items: center; gap: 0; padding: 4px 8px 6px; border-radius: 12px; background: #FFF6E6; border: 2px solid #0A0604; font-size: 12px; }
.fh-podium li.p1 { background: #FFE38A; } .fh-podium .fd-cut, .fh-podium .fd-av { height: 60px; width: auto; } .fh-podium li.p1 .fd-cut { height: 78px; }
.fh-podium small { font: 600 10px var(--f-mono); color: #6B5446; }
.fh-last:has(.fh-podium) { display: block; }
.bg-call { display: flex; align-items: flex-end; gap: 8px; justify-content: center; }
.bg-mayor { height: 120px; width: auto; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.dk-pinto { position: absolute; left: 22%; bottom: 52%; height: 120px; width: auto; z-index: 1; transform-origin: 50% 90%; }
.dk-pinto.gone { display: none; }
.dk-seat { z-index: 2; }
.dk-water { z-index: 3; opacity: .86; }
.dk-target, .dk-bag, .dk-pop { z-index: 4; }
.dk-tank.tipping .dk-pinto { animation: dkWobble .5s ease-in-out infinite alternate; }
@keyframes dkWobble { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
.dk-tank.dunking .dk-seat, .dk-tank.dunked .dk-seat { transform: rotate(78deg); }
.dk-tank.dunking .dk-pinto { animation: dkFall .9s cubic-bezier(.5,0,.9,.6) forwards; }
@keyframes dkFall { 0% { transform: none; } 25% { transform: translateY(-14px) rotate(-12deg); } 100% { transform: translateY(135px) rotate(38deg); } }
.dk-tank.dunked .dk-pinto { bottom: 15%; animation: dkBob 2.2s ease-in-out infinite; }
@keyframes dkBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-9px) rotate(4deg); } }
.dk-splash { position: absolute; left: 23%; bottom: 32%; width: 90px; height: 10px; z-index: 5; pointer-events: none; }
.dk-splash i { position: absolute; left: 50%; bottom: 0; width: 12px; height: 16px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #63BDEB; border: 2px solid #0A0604; opacity: 0; }
.dk-tank.dunked .dk-splash i { animation: dkDrop .9s ease-out both; }
.dk-splash i:nth-child(1) { --dx: -62px; --dy: -70px; } .dk-splash i:nth-child(2) { --dx: -34px; --dy: -104px; animation-delay: .04s; } .dk-splash i:nth-child(3) { --dx: -8px; --dy: -124px; animation-delay: .02s; }
.dk-splash i:nth-child(4) { --dx: 20px; --dy: -116px; animation-delay: .06s; } .dk-splash i:nth-child(5) { --dx: 46px; --dy: -92px; } .dk-splash i:nth-child(6) { --dx: 70px; --dy: -60px; animation-delay: .05s; }
@keyframes dkDrop { 0% { opacity: 1; transform: translate(-50%, 0) scale(.6); } 60% { opacity: 1; transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(1.1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx) * 1.25), calc(var(--dy) * .35)) scale(.8); } }
@media (max-width: 760px) { .fd-sheet { grid-template-columns: 110px minmax(0, 1fr); } .fd-statlist { grid-column: 1 / -1; } .fd-hero .fd-cut, .fd-hero .fd-av { height: 112px; } .fd-sheetmain { display: contents; } .fd-sheet .fd-pills { align-content: start; } .fd-traits { grid-column: 1 / -1; } .fd-traits li { grid-template-columns: 84px minmax(0, 1fr) auto; } .fd-traits b { white-space: normal; line-height: 1.15; } .fd-why { margin-left: 0; } .bg-mayor { height: 92px; } .fd-runner.cut .fd-cut { height: 58px; } }
@media (prefers-reduced-motion: reduce) { .dk-tank.tipping .dk-pinto, .dk-tank.dunking .dk-pinto, .dk-tank.dunked .dk-pinto, .dk-tank.dunked .dk-splash i { animation: none; } }
/* every BEAN on the field is a real community BEAN (no stand-ins) */
.fd-lane.empty { height: auto; padding: 26px 14px; text-align: center; }
.fd-lane.empty p { margin: 0; color: #FFF; font: 400 19px var(--f-display); text-shadow: 0 2px 0 #0A0604; }
body.bm-page main.bm-wrap .fd-lane.empty p { color: #FFF !important; }
.fd-bean .fd-av, .fd-bean .fd-cut { height: 58px; width: auto; }
/* Field Day: three event tabs; the Twenty-One table */
.fd-events { flex-wrap: wrap; }
.fd-events button { flex: 1 1 150px; }
.fd-felt.bj .fd-cards { min-height: 96px; flex-wrap: wrap; justify-content: center; }
#stageBj .bm-row { gap: 10px; flex-wrap: wrap; }
/* Arcade: "No prize" row in the odds; Double or Nothing */
.arc-odd.none b { opacity: .8; }
.bet-table { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; margin: 10px 0; }
.bet-side { display: grid; gap: 10px; }
.bet-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bet-chip { min-height: 44px; min-width: 58px; padding: 0 14px; border-radius: 999px; border: 3px solid #0A0604; background: #FFF6E6; color: #0A0604; font: 800 15px var(--f-mono); cursor: pointer; }
.bet-chip[aria-pressed="true"] { background: #FFC93C; box-shadow: 0 3px 0 #0A0604; transform: translateY(-2px); }
.bet-chip.all { background: #E63946; color: #FFF; }
.bet-chip.all[aria-pressed="true"] { background: #C2272F; }
.bet-coin { position: relative; width: 120px; height: 120px; margin: 0 auto; border-radius: 50%; border: 4px solid #0A0604; background: radial-gradient(circle at 35% 30%, #FFE28A, #FFC93C 60%, #D99A12); box-shadow: 0 6px 0 #0A0604; display: grid; place-items: center; font-size: 54px; }
.bet-coin .t { display: none; }
.bet-coin.flip { animation: betFlip 1.1s cubic-bezier(.3,.1,.3,1); }
.bet-coin.won { animation: betWon .5s ease; }
.bet-coin.lost { filter: grayscale(.85); transform: rotate(-8deg); }
.bet-coin.lost .h { display: none; } .bet-coin.lost .t { display: inline; }
@keyframes betFlip { 0% { transform: translateY(0) rotateX(0); } 50% { transform: translateY(-46px) rotateX(900deg); } 100% { transform: translateY(0) rotateX(1800deg); } }
@keyframes betWon { 40% { transform: scale(1.18); } }
@media (max-width: 560px) { .bet-table { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .bet-coin.flip, .bet-coin.won { animation: none; } }
/* Field Day: the Showcase Parade and BEAN of the Week */
.pr-crown { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 3px solid #0A0604; background: linear-gradient(120deg, #FFE38A, #FFC93C); color: #0A0604; margin: 8px 0 12px; }
.pr-crown.empty { display: block; background: var(--paper); }
.pr-crown h3 { margin: 2px 0; font: 400 26px var(--f-display); color: #0A0604; }
.pr-crown .lbl { font: 800 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.pr-crown .hint { color: #3B2A1A !important; }
.pr-crown-pic { position: relative; padding-top: 18px; }
.pr-crown-hat { position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 30px; }
.pr-crown .pr-big { height: 112px; width: auto; }
.pr-podium { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 700 14px var(--f-mono); }
.pr-podium small { opacity: .7; }
.pr-bar { gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.pr-votes { font: 700 14px var(--f-mono); }
.pr-count { margin: 6px 0; font: 800 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.pr-row { list-style: none; margin: 0 0 10px; padding: 12px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; border-radius: 16px; border: 3px solid #0A0604; background: repeating-linear-gradient(90deg, #6B4A8A 0 40px, #5C3F78 40px 80px); }
.pr-entry { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 10px 8px; border-radius: 14px; border: 3px solid #0A0604; background: #FFF6E6; color: #0A0604; }
.pr-entry.mine { background: #FFE38A; }
.pr-entry.voted { background: #D8F3DC; }
.pr-entry b { font: 400 17px var(--f-display); }
.pr-entry small { font: 600 11px var(--f-mono); opacity: .7; }
.pr-pic { height: 96px; display: grid; place-items: end center; }
.pr-pic .pr-av { height: 92px; width: auto; max-width: 100%; }
.pr-traits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.pr-traits li { font: 600 11px var(--f-mono); padding: 2px 7px; border-radius: 999px; background: rgba(10,6,4,.08); }
.pr-entry .btn { min-height: 40px; width: 100%; margin-top: 4px; }
.pr-none { grid-column: 1 / -1; padding: 14px; border-radius: 12px; background: #FFF6E6; }
body.bm-page main.bm-wrap .pr-entry, body.bm-page main.bm-wrap .pr-entry b, body.bm-page main.bm-wrap .pr-crown h3 { color: #0A0604 !important; }
@media (max-width: 620px) { .pr-crown { grid-template-columns: auto minmax(0, 1fr); } .pr-podium { grid-column: 1 / -1; } .pr-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Claw: pit junk the claw fumbles on a miss */
.claw-junk { display: grid; place-items: center; width: 54px; height: 54px; font-size: 40px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.claw-junk img { width: 54px; height: 54px; object-fit: contain; }
.claw-junk.falling { animation: arcCapFall .52s cubic-bezier(.5,0,1,1) forwards; }
/* Pantry Pop: Beanville's match-three */
.pp-daily { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; margin: 10px 0; border-radius: 16px; border: 3px solid #0A0604; background: linear-gradient(120deg, #FFE38A, #FFC93C); color: #0A0604; cursor: pointer; box-shadow: 0 4px 0 #0A0604; }
.pp-daily:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.pp-daily b { display: block; font: 400 20px var(--f-display); } .pp-daily small { font: 600 12px var(--f-mono); }
.pp-daily-ic { font-size: 30px; } .pp-daily-pay { font: 800 15px var(--f-mono); }
.pp-levels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.pp-level { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; width: 100%; text-align: left; padding: 10px 12px; border-radius: 14px; border: 3px solid #0A0604; background: #FFF6E6; color: #0A0604; cursor: pointer; }
.pp-level .n { grid-row: span 3; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #2B1B14; color: #FFC93C; font: 400 18px var(--f-display); }
.pp-level b { font: 400 16px var(--f-display); } .pp-level small { font: 600 11px var(--f-mono); opacity: .75; }
.pp-level .st { color: #D99A12; letter-spacing: 2px; font-size: 15px; } .pp-level .pay { position: absolute; right: 10px; bottom: 8px; font: 800 12px var(--f-mono); }
.pp-level.done { background: #D8F3DC; } .pp-level.next { background: #FFE38A; box-shadow: 0 4px 0 #0A0604; }
.pp-level:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.pp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.pp-stat { min-width: 76px; text-align: center; padding: 6px 10px; border-radius: 12px; border: 3px solid #0A0604; background: #FFF6E6; color: #0A0604; }
.pp-stat .lbl { display: block; font: 800 10px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; } .pp-stat b { font: 400 24px var(--f-display); }
.pp-goal { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 10px 0 6px; font: 700 14px var(--f-mono); }
.pp-bar { position: relative; height: 18px; border-radius: 999px; border: 3px solid #0A0604; background: #EADBC4; overflow: hidden; }
.pp-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: repeating-linear-gradient(115deg, #5BBF6A 0 10px, #7ED08A 10px 20px); transition: width .35s ease; }
.pp-perk { margin: 0 0 8px; }
.pp-boardwrap { position: relative; max-width: 520px; margin: 0 auto; }
.pp-board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 8px; border-radius: 18px; border: 3px solid #0A0604; background: repeating-linear-gradient(45deg, #8A5A2B 0 14px, #7A4E24 14px 28px); touch-action: none; user-select: none; }
.pp-cell { aspect-ratio: 1; padding: 3px; border-radius: 12px; border: 2px solid rgba(10,6,4,.35); background: rgba(255,246,230,.9); cursor: pointer; display: grid; place-items: center; transition: transform .12s ease, background .12s ease; }
.pp-cell svg { width: 100%; height: 100%; pointer-events: none; }
.pp-cell:hover { background: #FFF; } .pp-cell.picked { background: #FFE38A; border-color: #0A0604; transform: scale(1.08); }
.pp-cell:focus-visible { outline: 3px solid #E63946; outline-offset: 1px; }
.pp-cell.pop { animation: ppPop .23s ease forwards; } .pp-cell.drop { animation: ppDrop .24s cubic-bezier(.3,.8,.4,1.2); } .pp-cell.nope { animation: ppNope .36s ease; }
@keyframes ppPop { to { transform: scale(.2) rotate(40deg); opacity: 0; } }
@keyframes ppDrop { from { transform: translateY(-70%); opacity: .2; } }
@keyframes ppNope { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.pp-combo { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font: 400 34px var(--f-display); color: #FFF; text-shadow: 0 3px 0 #0A0604, 0 0 10px #0A0604; opacity: 0; pointer-events: none; white-space: nowrap; }
.pp-combo.show { animation: ppCombo .8s ease both; }
@keyframes ppCombo { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -80%); } }
.pp-actions { gap: 10px; flex-wrap: wrap; margin-top: 10px; }
body.bm-page main.bm-wrap .pp-level, body.bm-page main.bm-wrap .pp-level b, body.bm-page main.bm-wrap .pp-daily, body.bm-page main.bm-wrap .pp-daily b, body.bm-page main.bm-wrap .pp-stat b { color: #0A0604 !important; }
@media (max-width: 560px) { .pp-head { grid-template-columns: 1fr 1fr; } .pp-head > div:first-child { grid-column: 1 / -1; } .pp-board { gap: 2px; padding: 5px; } .pp-cell { border-radius: 8px; padding: 1px; } .pp-goal { grid-template-columns: 1fr auto; } .pp-goal #ppGoalText { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .pp-cell.pop, .pp-cell.drop, .pp-cell.nope, .pp-combo.show { animation: none; } .pp-combo.show { opacity: 0; } }
.pp-powers { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.pp-powers .lbl { font: 800 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.pp-power { display: grid; grid-template-columns: auto auto; gap: 0 8px; align-items: center; text-align: left; padding: 6px 12px; border-radius: 12px; border: 3px solid #0A0604; background: #FFF6E6; color: #0A0604; cursor: pointer; }
.pp-power span { grid-row: span 2; font-size: 24px; } .pp-power b { font: 400 16px var(--f-display); } .pp-power small { font: 600 11px var(--f-mono); opacity: .75; }
.pp-power.armed { background: #FFC93C; box-shadow: 0 3px 0 #0A0604; transform: translateY(-2px); }
.pp-power:disabled { opacity: .45; cursor: not-allowed; }
body.bm-page main.bm-wrap .pp-power, body.bm-page main.bm-wrap .pp-power b { color: #0A0604 !important; }
/* Field Day: Bean Bag Toss and Flick the Bean */
.aim-top { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.aim-cond { padding: 6px 12px; border-radius: 999px; border: 3px solid #0A0604; background: #FFE38A; color: #0A0604; font: 800 13px var(--f-mono); }
.aim-cond:empty { display: none; }
.aim-score { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 8px 0; padding: 8px 12px; border-radius: 14px; border: 3px solid #0A0604; background: #FFF6E6; color: #0A0604; font: 700 14px var(--f-mono); }
.aim-score:empty { display: none; }
.aim-score b { font: 400 22px var(--f-display); margin-left: 4px; } .aim-score .vs { opacity: .7; } .aim-score .opp { display: inline-flex; align-items: center; gap: 6px; }
.aim-score .aim-av { height: 40px; width: auto; }
.aim-wrap { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 14px; align-items: start; }
.aim-scene { width: 100%; height: auto; border-radius: 16px; border: 3px solid #0A0604; touch-action: none; cursor: crosshair; background: #6DB86B; }
.aim-dot.fresh { animation: aimLand .5s cubic-bezier(.3,.9,.4,1.3); transform-origin: center; transform-box: fill-box; }
@keyframes aimLand { from { transform: scale(2.6); opacity: 0; } }
.aim-side { display: grid; gap: 10px; }
.aim-ctl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; font: 800 12px var(--f-mono); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; }
.aim-ctl b { justify-self: end; font: 700 13px var(--f-mono); text-transform: none; letter-spacing: 0; }
.aim-ctl input { grid-column: 1 / -1; width: 100%; min-height: 34px; accent-color: #E63946; }
body.bm-page main.bm-wrap .aim-score, body.bm-page main.bm-wrap .aim-score b, body.bm-page main.bm-wrap .aim-cond { color: #0A0604 !important; }
@media (max-width: 640px) { .aim-wrap { grid-template-columns: 1fr; } .aim-scene { max-width: 300px; margin: 0 auto; display: block; } }
@media (prefers-reduced-motion: reduce) { .aim-dot.fresh { animation: none; } }
/* Field Day Hour: Mayor's Quiz */
.fh-quiz { display: grid; gap: 10px; }
.qz-host { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.qz-mayor { height: 96px; width: auto; }
.qz-host .lbl { font: 800 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.qz-q { margin: 2px 0 0; font: 400 24px/1.2 var(--f-display); }
.qz-bar { height: 12px; border-radius: 999px; border: 3px solid #0A0604; background: #EADBC4; overflow: hidden; }
.qz-bar i { display: block; height: 100%; width: 0; background: #E63946; transition: width .25s linear; }
.qz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qz-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; min-height: 56px; padding: 8px 12px; border-radius: 14px; border: 3px solid #0A0604; background: #FFF6E6; color: #0A0604; font: 700 16px var(--f-body, system-ui); cursor: pointer; }
.qz-opt span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #2B1B14; color: #FFC93C; font: 800 14px var(--f-mono); }
.qz-opt.picked { background: #FFE38A; box-shadow: 0 3px 0 #0A0604; }
.qz-opt.right { background: #B7E4C7; } .qz-opt.wrong { background: #F6B8B3; }
.qz-opt:disabled { cursor: default; } .qz-opt:disabled:not(.picked):not(.right):not(.wrong) { opacity: .7; }
body.bm-page main.bm-wrap .qz-opt { color: #0A0604 !important; }
.aim-side { min-width: 0; padding-right: 4px; }
@media (max-width: 560px) { .qz-opts { grid-template-columns: 1fr; } .qz-q { font-size: 20px; } .qz-mayor { height: 70px; } }
@media (prefers-reduced-motion: reduce) { .qz-bar i { transition: none; } }
.aim-sock path:last-child { transform-origin: 26px 26px; animation: aimSock 1.4s ease-in-out infinite alternate; }
@keyframes aimSock { from { transform: skewY(-4deg); } to { transform: skewY(5deg); } }
@media (prefers-reduced-motion: reduce) { .aim-sock path:last-child { animation: none; } }
/* Pantry Pop: a livelier board */
.pp-host { margin: 8px 0; } .pp-host img { height: 72px; width: auto; }
.pp-float { position: absolute; transform: translate(-50%, -50%); font: 400 22px var(--f-display); color: #FFF; text-shadow: 0 2px 0 #0A0604, 0 0 6px #0A0604; pointer-events: none; animation: ppFloat .9s ease-out forwards; z-index: 3; }
.pp-float.big { font-size: 32px; color: #FFE38A; }
@keyframes ppFloat { from { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } to { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
.pp-cell.pop { position: relative; }
.pp-cell.pop::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; color: #FFE38A; text-shadow: 0 0 6px #FFF; animation: ppSpark .23s ease-out forwards; pointer-events: none; }
@keyframes ppSpark { from { transform: scale(.3) rotate(0); opacity: 1; } to { transform: scale(1.9) rotate(70deg); opacity: 0; } }
.pp-board.shake { animation: ppShake .32s ease; }
@keyframes ppShake { 20% { transform: translate(-4px, 2px) rotate(-.6deg); } 50% { transform: translate(4px, -2px) rotate(.6deg); } 80% { transform: translate(-2px, 1px); } }
.pp-stars i { display: inline-block; font-style: normal; color: #B9A98C; }
.pp-stars i.on { color: #D99A12; animation: ppStar .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes ppStar { from { transform: scale(0) rotate(-140deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pp-float, .pp-cell.pop::after, .pp-board.shake, .pp-stars i.on { animation: none; } .pp-float { display: none; } }