:root {
/* layout: foam sign → led launch ticker → [chalkboard tab | the bar | napkin chat] → drinks-menu house rules. colors poured straight from the beer mug logo. */
--bg: #e0ab22;        /* logo mustard */
--bg-deep: #c99417;
--beer: #fdbc00;      /* the beer */
--amber: #e88a06;
--foam: #fff8e7;      /* the head */
--cream: #f6ecd2;
--glass: #e9f2f6;
--line: #3a2410;      /* pixel outline, dark ale */
--wood: #6b3a14;
--ink: #2a1a0a;
--muted: #7a5a2e;
--gold: #ffd84a;
--cyan: #6ff3ff;
--chalk: #1f2a24;
--chalk-ink: #eef3ea;
--danger: #c4321a;
--f-pixel: "Silkscreen", "Pixelify Sans", ui-monospace, monospace;
--f-pixel-2: "Pixelify Sans", "Silkscreen", ui-monospace, monospace;
--f-led: "VT323", ui-monospace, monospace;
--f-text: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body {
background-color: var(--bg);
background-image:
radial-gradient(circle at 20% 30%, rgba(255,248,231,.35) 0 3px, transparent 4px),
radial-gradient(circle at 70% 80%, rgba(255,248,231,.25) 0 2px, transparent 3px),
radial-gradient(circle at 45% 60%, rgba(255,248,231,.2) 0 4px, transparent 5px);
background-size: 120px 120px, 90px 90px, 160px 160px;
color: var(--ink); font-family: var(--f-text); font-size: 15px; line-height: 1.45;
padding-inline: 16px; padding-block: 0 28px; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--line); outline-offset: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--f-pixel); font-size: 12px; text-transform: lowercase; padding: 8px 14px; min-height: 38px; border: 3px solid var(--line); background: var(--foam); color: var(--ink); box-shadow: 0 4px 0 var(--line); text-decoration: none; cursor: pointer; border-radius: 6px; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.amber, .btn-send, .btn.primary { background: var(--beer); color: var(--ink); }
.btn.dark { background: var(--line); color: var(--foam); }
/* ---------- foam sign ---------- */
.marquee { max-width: 1380px; margin: 0 auto; padding-block: 18px 14px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.mq-left, .mq-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mq-right { justify-content: flex-end; }
.sign { justify-self: center; display: flex; align-items: center; gap: 14px; text-decoration: none; padding: 8px 22px 8px 8px; border: 3px solid var(--line); border-radius: 999px; background: var(--foam); box-shadow: 0 6px 0 var(--line); }
.sign img { width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--line); image-rendering: pixelated; display: block; }
.sign-name { font-family: var(--f-pixel-2); font-weight: 700; font-size: 34px; line-height: 1; color: var(--ink); letter-spacing: .01em; }
.sign-name i { font-style: normal; color: var(--amber); }
.hours { font-family: var(--f-led); font-size: 21px; line-height: 1; color: var(--ink); background: rgba(255,248,231,.55); border: 2px solid var(--line); border-radius: 6px; padding: 4px 10px; }
.hours b { font-weight: normal; color: #9a4a04; }
.ca code { font-family: var(--f-led); }
.cacopy { font-family: var(--f-pixel); font-size: 10px; background: var(--line); color: var(--foam); border: 0; border-radius: 4px; padding: 3px 6px; cursor: pointer; margin-left: 6px; vertical-align: 2px; }
.ca { font-family: var(--f-led); font-size: 19px; color: var(--ink); border: 2px dashed var(--line); padding: 3px 8px; border-radius: 6px; background: rgba(255,248,231,.4); }
/* ---------- led ticker ---------- */
.ticker { max-width: 1380px; margin: 0 auto 20px; display: flex; align-items: stretch; border: 3px solid var(--line); background: #24160a; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 0 var(--line); }
.ticker-label { flex: none; display: flex; align-items: center; gap: 8px; font-family: var(--f-pixel); font-size: 11px; background: var(--beer); color: var(--ink); padding: 6px 12px; border-right: 3px solid var(--line); }
.ticker-label i { width: 8px; height: 8px; background: var(--line); animation: blink 1s steps(2) infinite; }
.ticker-view { flex: 1; min-width: 0; overflow: hidden; }
.ticker-track { display: inline-flex; gap: 36px; white-space: nowrap; padding: 6px 18px; font-family: var(--f-led); font-size: 22px; line-height: 1.1; color: var(--beer); text-shadow: 0 0 6px rgba(253,188,0,.55); animation: scroll 40s linear infinite; }
.ticker-track span b { color: var(--foam); font-weight: normal; }
.ticker-track .smp, .ticker-empty { color: #9a7a4a; text-shadow: none; }
@keyframes scroll { from { transform: translateX(0) } to { transform: translateX(-50%) } }
/* ---------- beer fund ---------- */
.fund { max-width: 1380px; margin: 0 auto 20px; display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); gap: 14px 26px; align-items: center; background: var(--foam); border: 3px solid var(--line); border-radius: 10px; box-shadow: 0 6px 0 var(--line); padding: 12px 18px; }
#fundMug { width: 60px; height: 68px; image-rendering: pixelated; }
.fund-stat { display: grid; gap: 1px; min-width: 0; }
.fl { font-family: var(--f-pixel); font-size: 10px; color: #9a4a04; text-transform: lowercase; }
.fund-stat b { font-family: var(--f-pixel-2); font-weight: 700; font-size: 28px; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fs { font-family: var(--f-led); font-size: 18px; color: var(--muted); line-height: 1.1; }
.fund-goal { display: grid; gap: 6px; min-width: 0; }
.fg-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fg-mc { font-family: var(--f-pixel-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.fg-bar { height: 18px; border: 3px solid var(--line); border-radius: 6px; background: #f1e3c0; overflow: hidden; }
.fg-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--beer) 0 10px, #f5c21a 10px 20px); border-right: 3px solid var(--line); transition: width .6s; }
.fg-bar i.full { border-right: 0; background: repeating-linear-gradient(90deg, #6bdc7a 0 10px, #8aeb98 10px 20px); }
/* ---------- main grid ---------- */
.floor { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: 250px minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.chalk { background: var(--chalk); color: var(--chalk-ink); border: 10px solid var(--wood); border-radius: 6px; outline: 3px solid var(--line); box-shadow: 0 7px 0 var(--line), inset 0 0 30px rgba(0,0,0,.45); padding: 14px 14px 12px; display: grid; gap: 10px; min-width: 0; font-family: var(--f-led); font-size: 21px; line-height: 1.15; }
.chalk h2 { margin: 0; font-family: var(--f-pixel-2); font-weight: 600; font-size: 20px; text-align: center; }
.chalk .sub { margin: 0; text-align: center; color: #b9c8bc; font-size: 18px; }
.vipbox { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border: 2px dashed rgba(238,243,234,.35); }
.vipbox canvas { width: 39px; height: 27px; image-rendering: pixelated; }
.vipbox .vn { font-family: var(--f-pixel-2); font-weight: 600; font-size: 19px; color: var(--gold); overflow-wrap: anywhere; text-align: center; }
.vipbox .vs { color: #b9c8bc; font-size: 19px; }
.tablist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }
.tablist li { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 6px; align-items: baseline; }
.tablist .r { color: #8fa596; }
.tablist .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tablist .sol { font-variant-numeric: tabular-nums; }
.tablist .when { color: #8fa596; }
.chalk .empty { margin: 0; color: #b9c8bc; text-align: center; }
.chalk .total { display: flex; justify-content: space-between; border-top: 2px dashed rgba(238,243,234,.35); padding-top: 8px; }
.chalk .total b { font-weight: normal; color: var(--beer); }
.pay { display: grid; gap: 4px; justify-items: start; border: 2px solid rgba(238,243,234,.35); padding: 8px; }
.pay span { color: #b9c8bc; font-size: 18px; }
.pay code { font-family: var(--f-led); font-size: 17px; color: var(--beer); overflow-wrap: anywhere; line-height: 1.05; }
.pay .cacopy { margin-left: 0; background: var(--beer); color: var(--line); }
.howvip { margin: 0; font-size: 17px; color: #b9c8bc; line-height: 1.1; }
.owner-form { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; }
.owner-form #ownerKey { grid-column: 1 / -1; }
.owner-form input { min-width: 0; font-family: var(--f-text); font-size: 14px; background: rgba(0,0,0,.35); border: 2px solid rgba(238,243,234,.3); color: var(--chalk-ink); padding: 5px 7px; }
.owner-form .btn { grid-column: 1 / -1; min-height: 32px; font-size: 11px; }
.bar { min-width: 0; }
.bar-frame { position: relative; line-height: 0; border: 10px solid var(--foam); border-radius: 10px; outline: 3px solid var(--line); box-shadow: 0 7px 0 var(--line), inset 0 0 0 3px var(--line); background: var(--line); }
#roomCanvas { width: 100%; aspect-ratio: 3 / 2; display: block; image-rendering: pixelated; cursor: pointer; touch-action: manipulation; border-radius: 2px; }
.room-hud { position: absolute; left: 10px; top: 10px; line-height: 1.1; display: flex; align-items: center; gap: 8px; font-family: var(--f-led); font-size: 19px; color: var(--foam); background: rgba(36,22,10,.85); border: 2px solid var(--line); padding: 2px 8px; border-radius: 4px; }
.hud-count { color: #e6cfa0; }
.live-dot { width: 8px; height: 8px; background: #9a7a4a; }
.live-dot.on { background: #6bdc7a; animation: blink 1.4s steps(2) infinite; }
.live-dot.off { background: var(--danger); }
@keyframes blink { 50% { opacity: .3 } }
.bar-under { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.room-tip { margin: 0; font-family: var(--f-led); font-size: 20px; color: var(--ink); line-height: 1.15; flex: 1 1 260px; }
#enterBtn { font-size: 13px; padding: 10px 18px; background: var(--line); color: var(--foam); }
.napkin { border: 3px solid var(--line); background: var(--foam); border-radius: 8px; box-shadow: 0 7px 0 var(--line); display: flex; flex-direction: column; height: min(620px, calc(100vh - 200px)); min-height: 440px; min-width: 0; }
.napkin-head { display: flex; align-items: center; gap: 4px; padding: 8px; border-bottom: 3px solid var(--line); background: var(--beer); border-radius: 5px 5px 0 0; }
.tab { font-family: var(--f-pixel); font-size: 11px; background: transparent; border: 2px solid transparent; padding: 6px 10px; cursor: pointer; color: var(--ink); border-radius: 5px; }
.tab.is-on { background: var(--foam); border-color: var(--line); }
.tab-count { color: #9a4a04; }
.sound { margin-left: auto; font-family: var(--f-pixel); font-size: 10px; background: transparent; border: 0; padding: 6px; color: var(--ink); cursor: pointer; opacity: .65; }
.sound[aria-pressed="true"] { opacity: 1; }
.pane { flex: 1; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.log, .online { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.log li { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 3px 8px; align-items: baseline; padding: 7px 10px; background: var(--cream); border: 2px solid #e2d2ac; border-radius: 2px 10px 10px 10px; max-width: 94%; }
.log li.me { align-self: flex-end; background: #ffe7a3; border-color: #f0c860; border-radius: 10px 2px 10px 10px; }
.log li.bot { background: #e2fbfd; border-color: #9fe3ea; max-width: 100%; }
.log li.vip { background: #fff2b8; border-color: var(--gold); max-width: 100%; }
.who { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-pixel); font-size: 11px; white-space: nowrap; }
.who .dot { width: 8px; height: 8px; border: 2px solid var(--line); flex: none; }
.txt { grid-column: 1 / -1; font-size: 14.5px; overflow-wrap: anywhere; color: var(--ink); }
.txt .tk { font-family: var(--f-pixel-2); font-weight: 600; color: #9a4a04; }
.txt .ca { font-family: var(--f-led); font-size: 17px; color: var(--muted); }
.txt .smp { font-family: var(--f-pixel); font-size: 9px; color: var(--foam); background: var(--muted); padding: 0 4px; margin-left: 4px; }
.time { font-family: var(--f-led); font-size: 16px; color: var(--muted); }
.log li.me .nm { color: #9a4a04; }
.tag { font-style: normal; font-family: var(--f-pixel); font-size: 9px; padding: 1px 4px; border: 1px solid var(--line); line-height: 1.2; }
.tag-bot { background: var(--cyan); color: var(--line); }
.tag-vip { background: var(--gold); color: var(--line); }
.online li { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 2px dashed #e2d2ac; }
.log-empty { padding: 28px 18px; margin: 0; color: var(--muted); font-family: var(--f-led); font-size: 19px; text-align: center; }
.composer { border-top: 3px solid var(--line); padding: 10px; background: var(--cream); border-radius: 0 0 5px 5px; }
.composer-note { margin: 0 0 6px; font-family: var(--f-led); font-size: 17px; color: var(--muted); line-height: 1.1; }
.composer-note.err { color: var(--danger); }
.composer-row { display: flex; gap: 8px; }
.composer input { flex: 1; min-width: 0; font-size: 16px; background: #fff; border: 3px solid var(--line); border-radius: 6px; padding: 7px 10px; }
.composer input::placeholder { color: #a8916a; }
.composer input:disabled { opacity: .55; }
.menu { max-width: 760px; margin: 56px auto 0; background: var(--foam); color: var(--ink); border: 3px solid var(--line); border-radius: 10px; box-shadow: 0 8px 0 var(--line); padding: 24px 28px; }
.menu h2 { margin: 0 0 4px; text-align: center; font-family: var(--f-pixel-2); font-weight: 700; font-size: 28px; }
.menu .menu-sub { margin: 0 0 18px; text-align: center; font-family: var(--f-led); font-size: 20px; color: #9a4a04; }
.menu dl { margin: 0; display: grid; gap: 14px; }
.menu dt { display: flex; align-items: baseline; gap: 8px; font-family: var(--f-pixel); font-size: 14px; }
.menu dt::after { content: ""; flex: 1; border-bottom: 3px dotted #c9a86a; order: 1; }
.menu dt span { order: 2; font-family: var(--f-led); font-size: 21px; color: #9a4a04; }
.menu dd { margin: 4px 0 0; font-size: 15px; max-width: 60ch; color: #4a3418; }
.foot { max-width: 1380px; margin: 36px auto 0; display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; font-family: var(--f-led); font-size: 19px; color: var(--ink); }
.modal { padding: 0; border: 0; background: transparent; color: var(--ink); max-width: calc(100vw - 24px); width: 420px; }
.modal::backdrop { background: rgba(58,36,16,.6); }
.modal-card { background: var(--foam); border: 3px solid var(--line); border-radius: 10px; box-shadow: 0 8px 0 var(--line); padding: 18px; display: grid; gap: 14px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head h2 { margin: 0; font-family: var(--f-pixel); font-size: 16px; }
.x { background: transparent; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); }
.field { display: grid; gap: 6px; }
.field > span { font-family: var(--f-pixel); font-size: 11px; color: #9a4a04; }
.field em { font-style: normal; color: var(--muted); margin-left: 6px; }
.field input { font-size: 16px; background: #fff; border: 3px solid var(--line); padding: 8px 10px; min-width: 0; border-radius: 6px; }
.field input.bad { border-color: var(--danger); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { width: 30px; height: 30px; border: 3px solid var(--line); cursor: pointer; padding: 0; border-radius: 6px; }
.sw[aria-checked="true"] { outline: 3px solid var(--amber); outline-offset: 2px; }
.preview-row { display: flex; gap: 14px; align-items: center; }
#previewCanvas { width: 60px; height: 76px; image-rendering: pixelated; background: var(--bg); border: 3px solid var(--line); border-radius: 6px; flex: none; }
.safe { margin: 0; font-size: 13px; color: #4a3418; }
.vipbuy { width: 100%; font-size: 12px; }
.buy-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.buy-steps li { display: grid; gap: 8px; border: 2px dashed #d9c393; border-radius: 8px; padding: 10px; }
.step-h { font-family: var(--f-pixel); font-size: 12px; display: flex; align-items: center; gap: 8px; }
.step-h b { display: inline-grid; place-items: center; width: 22px; height: 22px; background: var(--line); color: var(--foam); border-radius: 4px; font-weight: normal; }
.wallets { display: grid; gap: 6px; }
.wallets .btn { width: 100%; justify-content: flex-start; }
.wallets .conn { font-family: var(--f-led); font-size: 19px; color: #2f7a3a; }
.wallets p { margin: 0; font-size: 13.5px; color: #4a3418; }
.buy-links { display: flex; gap: 8px; flex-wrap: wrap; }
.form-msg.ok { color: #2f7a3a; }
.form-msg { margin: 0; min-height: 1em; font-family: var(--f-led); font-size: 17px; color: var(--danger); }
@media (max-width: 1180px) {
.floor { grid-template-columns: minmax(0,1fr) 330px; }
.bar { grid-column: 1 / -1; order: -1; }
.napkin { height: 480px; }
}
@media (max-width: 760px) {
.fund { grid-template-columns: auto minmax(0,1fr) minmax(0,1fr); }
.fund-goal { grid-column: 1 / -1; }
.fund-stat b { font-size: 22px; }
.marquee { grid-template-columns: minmax(0,1fr); justify-items: center; }
.mq-left, .mq-right { justify-content: center; }
.sign-name { font-size: 24px; }
.sign img { width: 44px; height: 44px; }
.floor { grid-template-columns: minmax(0,1fr); }
.chalk { order: 2; }
.napkin { height: auto; min-height: 0; }
.pane { max-height: 46vh; min-height: 220px; }
body { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
.composer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; border-radius: 0; padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
.menu { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.ticker-label i, .live-dot.on, .ticker-track { animation: none; }
.ticker-view { overflow-x: auto; }
}