:root {
  --night: #081310;
  --walnut: #3B2316;
  --brass: #C9A15B;
  --amber: #E39B2D;
  --paper: #EEE4CF;
  --smoke: #93A298;
  --glass: rgba(8, 19, 16, .82); /* controls floating over the lit shelves: dark enough to read, blurred so the bar still shows */
  --text: rgba(238, 228, 207, .9);
  --serif: 'Hahmlet', 'Nanum Myeongjo', serif;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--night);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { cursor: progress; opacity: .7; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 3px; }
[hidden] { display: none !important; }
a { color: inherit; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.labels { position: fixed; inset: 0; pointer-events: none; }

.cta {
  background: var(--brass);
  color: #1D140C;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px rgba(0, 0, 0, .35);
  transition: background .2s;
}
.cta:hover:not(:disabled) { background: #DDB670; }
.ghost-btn { padding: 13px 18px; color: var(--smoke); }
.ghost-btn:hover { color: var(--paper); }

/* ---------- which overlay shows ---------- */
.cabinet-ui, .bar-ui, .pour-cap { display: none; }
body[data-view="cabinet"] .cabinet-ui,
body[data-view="bar"] .bar-ui,
body[data-view="pour"] .pour-cap { display: block; }
body:not([data-view="bar"]) .labels { visibility: hidden; }

/* ---------- header ---------- */
.top {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 14px;
  padding: max(16px, env(safe-area-inset-top)) 20px 0 24px;
  pointer-events: none;
}
.top > * { pointer-events: auto; }
/* a dark fade behind the header so its text never sits straight on bright bottles */
.top::before {
  content: ''; position: absolute; z-index: -1; inset: 0 0 -32px; pointer-events: none;
  background: linear-gradient(rgba(5, 11, 9, .85), rgba(5, 11, 9, .5) 60%, transparent);
}
.logo { margin-right: auto; color: var(--paper); text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -.02em; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.status { font-size: 14px; color: var(--text); text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
.where { color: var(--paper); text-shadow: inherit; }
.where::after { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 2px 3px 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.where:hover { color: #E8C57F; }
.invite { font-size: 14px; font-weight: 600; padding: 7px 14px; border: 1px solid rgba(201, 161, 91, .75); border-radius: 4px; color: #E8C57F; background: var(--glass); backdrop-filter: blur(8px); }
.invite:hover, .menu-btn:hover { background: rgba(201, 161, 91, .14); }
.menu-btn { font-size: 14px; font-weight: 600; padding: 7px 14px; border: 1px solid rgba(201, 161, 91, .75); border-radius: 4px; color: var(--paper); background: var(--glass); backdrop-filter: blur(8px); }
body:not([data-view="cabinet"]) .menu-btn { display: none; }
.sound { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--paper); background: var(--glass); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .45); }
.sound svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sound path:first-child { fill: currentColor; stroke: none; }
.sound[aria-pressed="true"] .off, .sound[aria-pressed="false"] .wave { display: none; }
body:not([data-view="bar"]) .status,
body:not([data-view="bar"]) .invite { display: none; }
body[data-view="door"] .top { visibility: hidden; }

/* ---------- door ---------- */
.door {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-content: center; justify-items: center; gap: 22px;
  padding: 24px; text-align: center;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(8, 19, 16, .25), rgba(8, 19, 16, .88) 80%);
  transition: opacity 1.1s, visibility 1.1s;
}
.door h1 {
  font-weight: 300; font-size: clamp(64px, 13vw, 148px); line-height: 1; letter-spacing: -.05em;
  color: #F6E7C8;
  text-shadow: 0 0 40px rgba(227, 155, 45, .35), 0 2px 0 rgba(0, 0, 0, .4);
}
.door-line { max-width: 24em; opacity: .85; font-size: 17px; line-height: 1.75; text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
.door .cta { margin-top: 10px; }
/* who is already inside: a glowing dot when people are at the bar, and today's clinks */
.door-piano { font-size: 14px; color: var(--text); text-shadow: 0 1px 8px rgba(0, 0, 0, .85); }
.door-piano:empty { display: none; }
.door-fine { max-width: 30em; margin-top: -10px; font-size: 11.5px; line-height: 1.5; color: var(--smoke); opacity: .75; }
:lang(ko) .door-fine { word-break: keep-all; }
.door-soft { margin-top: 0; opacity: 1; color: var(--text); }
.door-live { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; font-size: 14.5px; color: #e8c57f; text-shadow: 0 1px 8px rgba(0, 0, 0, .85); }
.live-now:not(:empty)::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: live 2.4s ease-in-out infinite; }
@keyframes live { 50% { opacity: .35; } }
/* which room: the cards side by side, the picked one edged in brass (the scene behind changes with it) */
.maps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(660px, 100%); border: 0; }
.maps legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* read out, not shown: the cards say it */
.maps label {
  position: relative; display: grid; align-content: start; gap: 4px; padding: 14px 16px; text-align: left; border-radius: 6px; cursor: pointer;
  background: var(--glass); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .25); transition: background .2s, box-shadow .2s;
}
.maps input { position: absolute; opacity: 0; pointer-events: none; }
.maps b { font-weight: 600; font-size: 16px; color: var(--paper); }
.maps span { font-size: 13px; line-height: 1.5; color: var(--smoke); }
:lang(ko) .maps span { word-break: keep-all; }
.maps label { grid-template-rows: auto 1fr auto; } /* the counts line up along the bottom of the cards */
.maps small { align-self: end; font-size: 12px; color: #E8C57F; }
.maps small:empty { display: none; } /* nobody in that room: nothing, rather than a zero */
.maps small::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #E8C57F; vertical-align: 1px; }
.maps label:hover { box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .55); }
.maps label:has(:checked) { background: rgba(201, 161, 91, .12); box-shadow: inset 0 0 0 1px var(--brass); }
.maps label:has(:checked) b { color: #E8C57F; }
.maps label:has(:focus-visible) { outline: 2px solid var(--brass); outline-offset: 3px; }
.credit {
  position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom));
  padding: 0 20px; font-size: 11.5px; line-height: 1.5; color: var(--smoke); opacity: .75;
}
.credit summary { cursor: pointer; list-style: none; }
/* 업데이트 노트: a quiet link under the way in (and at the foot of the bartender's window), a dot while there's news */
.door-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; }
.door-book { margin-top: 12px; padding: 4px 8px; font-size: 12.5px; color: var(--brass); text-decoration: underline; text-underline-offset: 2px; }
.door-book:hover { color: #E8C57F; }
.notes-open { position: relative; margin-top: 12px; padding: 4px 8px; font-size: 12.5px; color: var(--smoke); background: none; text-decoration: underline; text-underline-offset: 2px; }
.notes-open:hover { color: var(--paper); }
.notes-open .new-dot { position: absolute; top: 3px; right: -4px; width: 7px; height: 7px; border-radius: 50%; background: #E8C57F; }
.notes-open .new-dot[hidden] { display: none; }
.tipbox .notes-open { margin-top: 14px; }
.popup.notesbox { max-height: calc(100dvh - 32px); overflow-y: auto; text-align: left; }
.notesbox h2 { text-align: center; }
.notesbox section { margin-top: 18px; }
.notesbox h3 { font-weight: 600; font-size: 15px; color: #E8C57F; }
.notesbox h3 small { margin-left: 6px; font-weight: 400; font-size: 12px; color: var(--smoke); }
.notesbox ul { margin-top: 6px; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.notesbox li { font-size: 14px; line-height: 1.6; color: var(--text); }
:lang(ko) .notesbox li { word-break: keep-all; }
.credit summary::-webkit-details-marker { display: none; }
.tracks { text-decoration: underline; text-underline-offset: 2px; }
.credit p { margin-top: 4px; }
body:not([data-view="door"]) .door { opacity: 0; visibility: hidden; }

/* ---------- cabinet ---------- */
.regions {
  position: fixed; z-index: 10; left: 0; right: 0; top: max(58px, calc(env(safe-area-inset-top) + 44px));
  display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 6px; padding: 0 16px;
}
.regions button { font-size: 14px; padding: 5px 12px; border-radius: 4px; color: var(--text); background: var(--glass); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .3); }
.regions button:hover { color: var(--paper); box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .7); }
.regions button[aria-pressed="true"] { color: #1D140C; font-weight: 600; background: var(--brass); box-shadow: none; }
.nav {
  position: fixed; z-index: 10; top: 42%; width: 46px; height: 46px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--glass); color: var(--paper); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .5), 0 4px 14px rgba(0, 0, 0, .35);
}
.nav:hover:not(:disabled) { background: rgba(60, 46, 24, .9); }
.nav:disabled { opacity: .25; cursor: default; }
/* up and down sit above and below the pulled-out bottle */
.nav.up { top: max(112px, calc(env(safe-area-inset-top) + 98px)); left: calc(50% - 23px); }
.nav.down { position: absolute; top: 8px; left: calc(50% - 23px); }
.nav svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prev { left: 16px; }
.next { right: 16px; }
.info {
  position: fixed; z-index: 10; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; align-items: center; gap: 28px;
  padding: 64px 24px max(26px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(8, 19, 16, .82) 38%, rgba(8, 19, 16, .95));
}
.w-text { max-width: 40em; text-align: center; }
.w-text .w-meta, .w-text .actions { justify-content: center; }

/* studio shot of the bottle model; dark until it has rendered */
.ph {
  position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 3px;
  background: linear-gradient(#2f4d40, #0b1612); box-shadow: 0 8px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(201, 161, 91, .25);
}
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph img:not([src]) { visibility: hidden; }
.w-name { font-weight: 300; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; letter-spacing: -.02em; }
.w-ko { color: var(--smoke); font-size: 15px; margin-top: 4px; }
.w-meta { display: flex; gap: 28px; margin-top: 12px; }
.w-meta dt { font-size: 12px; color: var(--smoke); }
.w-meta dd { font-size: 15px; }
.w-note { margin-top: 10px; font-size: 16px; opacity: .88; }
.actions { margin-top: 16px; display: flex; gap: 8px; }
/* 오늘의 한 잔: how the day went, and the bartender's answer over the bottle he picked */
.moods { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 13px; color: var(--smoke); }
.moods span { margin-right: 4px; }
.moods button { font-size: 13px; padding: 5px 11px; border-radius: 14px; color: var(--text); box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .4); }
.moods button:hover { color: var(--paper); box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .8); }
.rec { min-height: 1.4em; margin-bottom: 6px; font-size: 14px; color: var(--brass); }
.rec:empty { display: none; }

/* ---------- 메뉴판 ---------- */
.menu {
  margin: auto; width: min(1080px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  padding: 28px; border: 0; border-radius: 8px;
  background: rgba(10, 22, 18, .97); color: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .35), 0 30px 80px rgba(0, 0, 0, .6);
}
.menu::backdrop { background: rgba(4, 10, 8, .6); backdrop-filter: blur(4px); }
.menu header { position: relative; padding-right: 48px; margin-bottom: 22px; }
.menu h2 { font-weight: 300; font-size: 30px; letter-spacing: -.02em; }
.menu header p { color: var(--smoke); font-size: 15px; }
.close { position: absolute; top: -6px; right: -6px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.close:hover { background: rgba(201, 161, 91, .16); }
.close svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.menu-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 18px; }
.menu-card { display: grid; gap: 3px; width: 100%; text-align: left; }
.menu-card .ph { margin-bottom: 8px; transition: box-shadow .2s; }
.menu-card:hover .ph { box-shadow: 0 8px 24px rgba(0, 0, 0, .5), inset 0 0 0 2px var(--brass); }
.menu-card strong { font-weight: 600; font-size: 15px; line-height: 1.3; }
.menu-ko, .menu-meta { font-size: 13px; color: var(--smoke); }
/* the menu's way into the 도감 */
.menu-book { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 6px 14px 6px 10px; border-radius: 4px; font-size: 14px; font-weight: 600; color: var(--brass); box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .45); }
.menu-book:hover { background: rgba(201, 161, 91, .14); }
.menu-book svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }

/* ---------- 도감: a leather-bound tasting notebook with cream pages ---------- */
.book {
  --ink: #2B2118; --ink-soft: #6E5E4A; --ox: #8E2F22; --page: #EFE6D1; --foil: #D9B46A;
  margin: auto; width: min(980px, calc(100vw - 32px)); height: min(920px, calc(100dvh - 48px)); max-width: none; max-height: none;
  padding: 0; border: 0; border-radius: 12px; overflow: hidden;
  color: var(--ink); background: #2A1A10;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .65);
  color-scheme: light;
}
.book[open] { display: grid; grid-template-rows: auto 1fr; }
.book::backdrop { background: rgba(4, 10, 8, .62); backdrop-filter: blur(4px); }
.book-cover { position: relative; padding: 22px 64px 18px 30px; color: var(--foil); background: radial-gradient(120% 160% at 0 0, #5B3922, #3A2416 55%, #2A1A10); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .5); }
.book-cover::after { content: ''; position: absolute; inset: 7px; border: 1px dashed rgba(217, 180, 106, .38); border-radius: 7px; pointer-events: none; } /* the stitching */
.book-kicker { font-size: 12px; letter-spacing: .16em; opacity: .8; }
.book-cover h2 { font-weight: 300; font-size: 34px; line-height: 1.15; color: #F0D9A4; text-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 0 18px rgba(217, 180, 106, .25); }
.book-cover .close { top: 14px; right: 14px; z-index: 1; }
.book-cover .close:hover { background: rgba(217, 180, 106, .16); }
.book-body { position: relative; min-height: 0; }
.book-page, .book-entry { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 clamp(18px, 4vw, 40px) 40px; background: radial-gradient(130% 90% at 50% 0, #F6EFDE, var(--page) 60%, #E6DBC2); }
.book-entry { z-index: 2; padding-top: 22px; }
.book :focus-visible { outline-color: var(--ox); }
.book h3 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; font-weight: 500; font-size: 19px; }
.book h3::after { content: ''; order: 1; flex: 1; border-bottom: 1px solid rgba(43, 33, 24, .18); }
.book h3 small { order: 2; font-size: 13px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the first page: how far the record has come */
.book-sum { display: grid; grid-template-columns: 132px 1fr; align-items: center; gap: 8px 26px; margin-top: 28px; padding-bottom: 26px; border-bottom: 1px solid rgba(43, 33, 24, .14); }
.book-ring { position: relative; width: 132px; aspect-ratio: 1; }
.book-ring svg { display: block; width: 100%; transform: rotate(-90deg); fill: none; stroke-width: 7; }
.book-ring circle { stroke: rgba(43, 33, 24, .12); }
.book-ring .fill { stroke: var(--ox); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.2, .7, .2, 1); }
.book-ring p { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.book-ring b { font-size: 40px; font-weight: 300; }
.book-ring small { font-size: 13px; color: var(--ink-soft); }
.book-sum-text .shelf-line { font-size: 17px; line-height: 1.5; }
.book-since, .book-stamp-count { font-size: 14px; color: var(--ink-soft); }
.book-since:empty { display: none; }
.book-kinds { grid-column: 1 / -1; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 9px 28px; margin-top: 16px; }
.book-kinds li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 10px; font-size: 13.5px; }
.book-kinds i { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ox) calc(var(--p) * 100%), rgba(43, 33, 24, .12) 0); }
.book-kinds small { grid-area: 1 / 2; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.book-fav, .book-stamps { margin-top: 28px; }
/* the bottles drunk most */
.book-fav ol { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.book-fav li button { display: grid; grid-template-columns: auto 60px 1fr; align-items: center; gap: 12px; width: 100%; padding: 10px 12px 10px 8px; border-radius: 8px; text-align: left; background: rgba(255, 252, 244, .55); box-shadow: inset 0 0 0 1px rgba(43, 33, 24, .1); transition: background .15s; }
.book-fav li button:hover { background: rgba(255, 252, 244, .95); }
.book-fav .rank { width: 26px; text-align: center; font-size: 28px; font-weight: 300; color: var(--ox); }
.book-fav .print { padding: 3px; }
.fav-text { display: grid; min-width: 0; }
.fav-text b { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.fav-text small { font-size: 13px; font-weight: 600; color: var(--ox); }
/* 도장: an inked seal once earned, a pencilled ring with how far there is still to go before */
.book-stamps ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 22px 14px; }
.stamp { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; }
.seal { display: grid; place-content: center; gap: 2px; width: 96px; aspect-ratio: 1; padding: 10px; border: 1.5px dashed rgba(43, 33, 24, .26); border-radius: 50%; line-height: 1.2; color: rgba(43, 33, 24, .42); }
.seal b { font-size: 14px; font-weight: 600; }
.seal small { font-size: 12px; font-variant-numeric: tabular-nums; }
.stamp p { max-width: 12em; font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
.stamp.got .seal { border: 4px double var(--ox); color: var(--ox); background: radial-gradient(circle, rgba(142, 47, 34, .08), rgba(142, 47, 34, 0) 70%); transform: rotate(var(--tilt)); }
.stamp.got .seal b { font-size: 15px; font-weight: 700; }
:lang(ko) .book { word-break: keep-all; }
/* the chapters: a print of every bottle tried, the outline of every one still to try */
.book-index { position: sticky; top: 0; z-index: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 30px calc(-1 * clamp(18px, 4vw, 40px)) 24px; padding: 10px clamp(18px, 4vw, 40px); background: rgba(239, 230, 209, .95); box-shadow: 0 1px 0 rgba(43, 33, 24, .12); }
.book-index::-webkit-scrollbar { display: none; }
.book-index button { flex: none; padding: 5px 12px; border-radius: 999px; font-size: 13px; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(43, 33, 24, .22); }
.book-index button:hover { background: rgba(43, 33, 24, .06); }
.book-index small { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.chapter { margin-bottom: 34px; scroll-margin-top: 64px; }
.slots { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 26px 18px; }
.slot:nth-child(3n + 1) { --tilt: -1.4deg; }
.slot:nth-child(3n + 2) { --tilt: .9deg; }
.slot:nth-child(4n) { --tilt: 1.8deg; }
.slot button { display: grid; gap: 2px; width: 100%; text-align: center; }
.slot button:disabled { cursor: default; opacity: 1; }
.slot b { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.slot small { font-size: 12.5px; font-weight: 600; color: var(--ox); }
.print { display: block; aspect-ratio: 2 / 3; padding: 5px; background: #FBF7EC; box-shadow: 0 1px 2px rgba(43, 33, 24, .25), 0 8px 18px rgba(60, 40, 20, .16); transform: rotate(var(--tilt, 0deg)); }
.print img { display: block; width: 100%; height: 100%; object-fit: cover; }
.print img:not([src]) { visibility: hidden; }
.slot .print { margin-bottom: 8px; transition: transform .2s, box-shadow .2s; }
.slot button:not(:disabled):hover .print { transform: translateY(-3px); box-shadow: 0 2px 3px rgba(43, 33, 24, .25), 0 14px 26px rgba(60, 40, 20, .22); }
.slot:not(.got) .print { background: none; box-shadow: inset 0 0 0 1.5px rgba(43, 33, 24, .16); border-radius: 3px; transform: none; }
.slot:not(.got) img { opacity: .17; }
.slot:not(.got) b { letter-spacing: .2em; color: rgba(43, 33, 24, .34); }
/* the last page: the picture to keep, and the code that carries the record to another device */
.book-end { display: grid; justify-items: start; gap: 6px; padding-top: 22px; border-top: 1px solid rgba(43, 33, 24, .14); }
.book-end .ghost-btn { padding: 6px 0; font-weight: 600; color: var(--ox); }
/* 도감 공유하기: by the top three it shares, and with the picture at the end */
.book-pics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.book-share { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px 8px 12px; border-radius: 6px; font-size: 14.5px; font-weight: 600; color: #FBF2DE; background: var(--ox); transition: background .15s; }
.book-share:hover:not(:disabled) { background: #A33A2B; }
.book-share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fav-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.fav-head h3 { flex: 1; margin-bottom: 0; }
.fav-share { padding: 5px 12px 5px 9px; font-size: 13px; }
.fav-share svg { width: 16px; height: 16px; }
.book-move { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.book-move summary { width: max-content; padding: 4px 0; color: var(--ox); cursor: pointer; }
.book-move p { margin-top: 6px; max-width: 34em; }
.book-code { font-size: 17px; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--ink); user-select: all; }
.book-use { display: flex; gap: 6px; max-width: 26em; margin-top: 8px; }
.book-use input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid rgba(43, 33, 24, .3); border-radius: 6px; font: inherit; font-size: 16px; text-transform: uppercase; color: var(--ink); background: rgba(255, 252, 244, .75); }
.book-use input::placeholder { text-transform: none; color: rgba(43, 33, 24, .45); }
.book-use button { padding: 8px 14px; border-radius: 6px; font-weight: 600; color: #FBF2DE; background: var(--ox); }
.book-note:empty { display: none; }
/* one bottle's page */
.book-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 18px -8px; padding: 6px 10px 6px 4px; border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--ox); }
.book-back:hover { background: rgba(142, 47, 34, .08); }
.book-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.entry { display: grid; grid-template-columns: minmax(180px, 270px) 1fr; align-items: start; gap: 36px; }
.entry .print { --tilt: -1.5deg; padding: 8px; }
.entry-kind { font-size: 13.5px; color: var(--ink-soft); }
.book .entry h3 { display: block; margin: 4px 0 0; font-weight: 400; font-size: 30px; line-height: 1.2; }
.book .entry h3::after { display: none; }
.entry-ko { font-size: 16px; color: var(--ink-soft); }
.entry-ko:empty { display: none; }
.entry-note { max-width: 30em; margin-top: 16px; font-size: 16px; line-height: 1.75; }
.entry-record { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(43, 33, 24, .16); }
.entry-record dt { font-size: 12.5px; color: var(--ink-soft); }
.entry-record dd { font-size: 20px; font-weight: 500; color: var(--ox); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .book { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; }
  .book-cover { padding: max(14px, calc(env(safe-area-inset-top) + 8px)) 60px 14px 20px; }
  .book-cover h2 { font-size: 26px; }
  .book-cover .close { top: max(8px, env(safe-area-inset-top)); right: 8px; }
  .book-page, .book-entry { padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 20px)); }
  .book-sum { grid-template-columns: 92px 1fr; gap: 6px 18px; margin-top: 22px; }
  .book-ring { width: 92px; }
  .book-ring b { font-size: 30px; }
  .book-sum-text .shelf-line { font-size: 15px; }
  .book-since, .book-stamp-count { font-size: 13px; }
  .book-kinds { grid-template-columns: 1fr 1fr; gap: 8px 18px; }
  .book-kinds li { font-size: 12.5px; }
  .book-fav ol { grid-template-columns: 1fr; gap: 8px; }
  .book-fav li button { grid-template-columns: auto 44px 1fr; padding: 8px 12px 8px 6px; }
  .book-stamps ul { grid-template-columns: repeat(3, 1fr); gap: 18px 8px; }
  .seal { width: 84px; padding: 8px; }
  .seal b { font-size: 13px; }
  .stamp p { font-size: 11.5px; }
  .slots { grid-template-columns: repeat(3, 1fr); gap: 20px 14px; }
  .slot b { font-size: 12.5px; }
  .entry { grid-template-columns: 1fr; gap: 20px; }
  .entry .print { justify-self: center; width: min(56%, 220px); }
  .book .entry h3 { font-size: 25px; }
}

#back { display: none; }
body.seated #back { display: inline-block; }

.pour-cap {
  position: fixed; z-index: 10; left: 0; right: 0; bottom: max(36px, env(safe-area-inset-bottom));
  text-align: center; color: var(--paper); opacity: .8; font-size: 15px; text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}

/* ---------- popups: the tip jar (a thank-you first, the payment page only from its button) and the invite ---------- */
.popup {
  margin: auto; width: min(380px, calc(100vw - 32px)); padding: 32px 26px 26px; border: 0; border-radius: 10px;
  text-align: center; background: rgba(10, 22, 18, .97); color: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .45), 0 30px 80px rgba(0, 0, 0, .6);
}
.popup[open] { animation: tipin .28s ease-out; }
@keyframes tipin { from { opacity: 0; translate: 0 8px; } }
.popup::backdrop { background: rgba(4, 10, 8, .6); backdrop-filter: blur(4px); }
.tipbox img { display: block; width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(201, 161, 91, .5), 0 10px 30px rgba(0, 0, 0, .5); }
.popup h2 { font-weight: 300; font-size: 26px; line-height: 1.25; letter-spacing: -.02em; }
.popup p { margin-top: 12px; font-size: 15px; line-height: 1.75; color: var(--text); text-wrap: balance; }
:lang(ko) .popup p { word-break: keep-all; } /* Korean wraps between words; Japanese has no spaces to wrap at */
.tipbox .cta { display: inline-block; margin-top: 22px; text-decoration: none; }
.tipbox { max-height: calc(100dvh - 32px); overflow-y: auto; }
.tipbox .ask { display: grid; gap: 10px; }
.tipbox .ask-kinds { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; border: 0; }
.tipbox .ask-kinds legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tipbox .ask-kinds label { padding: 6px 12px; border-radius: 14px; font-size: 13px; color: var(--text); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .4); }
.tipbox .ask-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.tipbox .ask-kinds label:has(:checked) { color: #E8C57F; background: rgba(201, 161, 91, .18); box-shadow: inset 0 0 0 1px var(--brass); }
.tipbox .ask-kinds label:has(:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; }
.tipbox textarea { width: 100%; min-height: 84px; padding: 10px 12px; border: 0; border-radius: 8px; font: inherit; font-size: 16px; line-height: 1.5; text-align: left; resize: vertical; color: var(--paper); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .3); }
.tipbox .ask .cta { justify-self: center; margin-top: 2px; }
.tipbox .ask-note { min-height: 1.4em; margin-top: 0; font-size: 13px; color: #E8C57F; }
.tipbox .socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 6px; }
.tipbox .threads-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); text-decoration: none; }
.tipbox .threads-link svg { width: 16px; height: 16px; fill: currentColor; }
.tipbox .threads-link b { font-weight: 600; color: #E8C57F; }
.tipbox .threads-link:hover b, .tipbox .threads-link:focus-visible b { text-decoration: underline; }
.tipbox .tip-part { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(201, 161, 91, .25); }
.tipbox .tip-part[hidden] { display: none; }
.tipbox h3 { font-weight: 400; font-size: 18px; }
.popup .close { top: 8px; right: 8px; }
.bragbox .brag-card { display: block; height: min(42vh, 400px); aspect-ratio: 9 / 16; margin: 16px auto 0; border-radius: 8px; object-fit: cover; box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(201, 161, 91, .35); }
.bragbox .brag-text { white-space: pre-line; text-align: left; text-wrap: pretty; font-size: 14px; line-height: 1.6; padding: 10px 14px; border-radius: 6px; background: rgba(0, 0, 0, .3); }
.brag-to button { cursor: pointer; }
.bragbox .brag-note { min-height: 1.6em; margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--brass); }
.share-link { display: flex; margin-top: 22px; border-radius: 6px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .45); text-align: left; }
#share-url { flex: 1; min-width: 0; padding: 11px 14px; font-size: 13px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; user-select: all; }
#share-copy { flex: none; padding: 0 18px; border-radius: 0 6px 6px 0; background: var(--brass); color: #1D140C; font-size: 14px; font-weight: 600; transition: background .2s; }
#share-copy:hover { background: #DDB670; }
.share-apps, .brag-to { display: flex; justify-content: center; gap: 20px; margin-top: 24px; }
.share-apps > *, .brag-to > * { display: grid; justify-items: center; gap: 8px; font-size: 13px; color: var(--text); text-decoration: none; }
.share-apps svg, .brag-to svg { width: 52px; height: 52px; padding: 15px; border-radius: 50%; fill: var(--paper); background: rgba(201, 161, 91, .08); box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .45); transition: background .2s, box-shadow .2s; }
.share-apps > :hover svg, .brag-to > :hover svg { background: rgba(201, 161, 91, .2); box-shadow: inset 0 0 0 1px var(--brass); }

/* bar list: one row per bar, a dot per stool */
.barsbox { width: min(600px, calc(100vw - 32px)); }
.map-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 18px; }
.map-tabs button { display: grid; gap: 2px; padding: 10px 14px; text-align: left; font-size: 15px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .2); transition: background .2s, box-shadow .2s; }
.map-tabs button:hover { background: rgba(201, 161, 91, .1); }
.map-tabs button[aria-pressed="true"] { color: #E8C57F; background: rgba(201, 161, 91, .12); box-shadow: inset 0 0 0 1px var(--brass); }
.map-tabs span { font-size: 12px; color: var(--smoke); }
.map-tabs:not(:empty) + .bar-list { margin-top: 10px; }
.bar-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; margin-top: 18px; max-height: min(56vh, 480px); overflow-y: auto; text-align: left; }
.bar-list button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 14px; text-align: left; border-radius: 6px; background: rgba(201, 161, 91, .06); box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .2); transition: background .2s, box-shadow .2s; }
.bar-list button:hover:not(:disabled) { background: rgba(201, 161, 91, .16); box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .6); }
.bar-list button:disabled { cursor: default; opacity: .5; }
.bar-list button[aria-current] { opacity: 1; box-shadow: inset 0 0 0 1px var(--brass); }
.bar-name { flex: 1; font-size: 15px; }
.stools { display: flex; gap: 4px; }
.stools i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .5); }
.stools i.on { background: var(--amber); box-shadow: none; }
.bar-note { min-width: 4.5em; text-align: right; font-size: 12px; color: var(--brass); }
.bar-fail { font-size: 14px; color: var(--text); text-align: center; }

/* ---------- bar: name tags and speech bubbles float over the 3D people ---------- */
.tag {
  white-space: nowrap; font-size: 12.5px; line-height: 1; padding: 6px 10px; border-radius: 12px;
  background: rgba(8, 19, 16, .72); color: var(--paper);
}
.tag.is-me { background: var(--brass); color: #1D140C; font-weight: 600; }
.tag.keeper { color: #E8C57F; box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .55); } /* the bartender's: tap them */
.tag .nth { margin-left: 7px; padding: 2px 7px; border-radius: 8px; font-size: 11.5px; font-weight: 600; color: #F3C67A; background: rgba(201, 161, 91, .22); }
.tag.is-me .nth { color: #1D140C; background: rgba(29, 20, 12, .16); }
.tag .ordering { margin-left: 7px; padding: 2px 7px; border-radius: 8px; font-size: 11.5px; font-weight: 600; color: #1D140C; background: #E8C57F; animation: ordering 1.6s ease-in-out infinite; }
@keyframes ordering { 50% { opacity: .55; } } /* at the cabinet, choosing */
.tag.regular::before { content: '★ '; color: var(--brass); } /* 단골: came back on three nights or more */
.tag.is-me.regular::before { color: #1D140C; }
/* three.js positions these with `transform`, so the animation moves them with `translate` */
.bubble {
  white-space: nowrap; font-size: 15px; line-height: 1; padding: 9px 13px; border-radius: 14px 14px 14px 3px;
  background: var(--paper); color: #1D140C; opacity: 0;
}
.bubble.show { animation: bubble var(--life, 1.6s) ease-out; }
.bubble.talk { white-space: normal; max-width: 220px; line-height: 1.35; overflow-wrap: anywhere; }
/* a word the server took out, as a mosaic */
.mosaic { color: transparent; border-radius: 3px; background: repeating-conic-gradient(#8a7966 0 25%, #c8b8a2 0 50%) 0 0 / 6px 6px; }
@keyframes bubble {
  0% { opacity: 0; translate: 0 6px; }
  12%, 80% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 -6px; }
}

.hint {
  position: fixed; z-index: 10; left: 50%; top: max(64px, calc(env(safe-area-inset-top) + 50px)); transform: translateX(-50%);
  padding: 5px 12px; border-radius: 14px; white-space: nowrap; font-size: 13px; color: var(--text); background: var(--glass); backdrop-filter: blur(8px);
  animation: hint 6s ease-out forwards;
}
@keyframes hint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* the dock: the five things you do at the counter, the sip raised in the middle like a tab bar's main button */
.dock {
  position: fixed; z-index: 10; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; width: min(440px, calc(100vw - 24px)); padding: 4px;
  border-radius: 20px; background: rgba(8, 19, 16, .86); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .32), 0 12px 32px rgba(0, 0, 0, .5);
}
.dock button { display: grid; justify-items: center; gap: 3px; min-height: 58px; padding: 8px 2px 7px; border-radius: 16px; font-size: 12px; line-height: 1.2; white-space: nowrap; color: var(--text); }
.dock button:hover { color: var(--paper); background: rgba(201, 161, 91, .1); }
.dock button[aria-pressed="true"], .dock button[aria-expanded="true"] { color: #F3C67A; background: rgba(201, 161, 91, .16); }
.dock svg, .rail svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dock svg { width: 24px; height: 24px; }
.dock .primary { color: #F3C67A; font-weight: 600; }
.dock .primary:hover { background: none; }
.dock .primary svg {
  width: 52px; height: 52px; margin-top: -26px; padding: 13px; border-radius: 50%; color: #1D140C; background: var(--brass);
  box-shadow: 0 0 0 4px rgba(8, 19, 16, .9), 0 8px 20px rgba(0, 0, 0, .45); transition: transform .15s, background .15s;
}
.dock .primary:hover svg { background: #DDB670; }
.dock .primary:active svg { transform: scale(.94); }
/* the bar's own controls stand apart on the right: show it off, change the drink, see through your own eyes */
.rail { position: fixed; z-index: 10; right: max(10px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); display: grid; gap: 14px; }
.rail button { display: grid; justify-items: center; gap: 4px; width: 64px; font-size: 12px; line-height: 1.25; text-align: center; color: var(--paper); text-shadow: 0 1px 6px rgba(0, 0, 0, .95); }
.rail svg { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: rgba(8, 19, 16, .72); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .4); transition: background .15s; }
.rail button:hover svg { background: rgba(201, 161, 91, .22); }
#brag svg, #fp[aria-pressed="true"] svg { color: #1D140C; background: var(--brass); box-shadow: none; }
#brag:hover svg { background: #DDB670; }

/* the live set, said big across the top for a few seconds: a quaver, the line, and how long it goes on */
.live-banner {
  position: fixed; z-index: 11; left: 50%; top: max(112px, calc(env(safe-area-inset-top) + 98px)); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 6px; width: max-content; max-width: calc(100vw - 32px); padding: 18px 30px 16px;
  border-radius: 14px; text-align: center; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(201, 161, 91, .22), rgba(8, 19, 16, .8) 70%); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .5), 0 18px 50px rgba(0, 0, 0, .5);
}
.live-banner[hidden] { display: none; }
.live-banner.show { animation: live-banner 5.6s ease-in-out forwards; }
.live-banner svg { width: 30px; height: 30px; fill: #F3C67A; }
.live-title { font-size: clamp(22px, 5.5vw, 32px); font-weight: 400; letter-spacing: -.01em; line-height: 1.25; color: var(--paper); text-wrap: balance; }
.live-sub { font-size: 14px; color: #e8c57f; }
@keyframes live-banner {
  0% { opacity: 0; translate: 0 -10px; scale: .97; }
  10%, 82% { opacity: 1; translate: 0 0; scale: 1; }
  100% { opacity: 0; translate: 0 -6px; }
}

/* 한마디: the set lines, just over the dock */
.lines, .guests {
  position: fixed; z-index: 10; left: 50%; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 84px); transform: translateX(-50%);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: max-content; max-width: min(560px, calc(100vw - 24px));
}
.lines[hidden], .guests[hidden] { display: none; }
.lines button, .guests button { padding: 9px 14px; border-radius: 16px 16px 16px 4px; font-size: 14px; color: #1D140C; background: var(--paper); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.lines button:hover, .guests button:hover { background: #fff6e2; }
.guests button { border-radius: 16px; }
/* 채팅: a line to type over the set ones; 16px so a phone doesn't zoom in on it */
.lines .talk { display: flex; gap: 6px; flex-basis: 100%; }
.lines .talk input { flex: 1; min-width: 0; padding: 10px 14px; border: 0; border-radius: 18px; font: inherit; font-size: 16px; color: #1D140C; background: var(--paper); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.lines .talk button { font-weight: 600; background: #E8C57F; border-radius: 18px; }
.lines .talk-note { flex-basis: 100%; margin: -2px 0 2px; text-align: center; font-size: 12.5px; color: #E8C57F; }
.lines .talk-note[hidden] { display: none; }
.lines .talk-tools { flex-basis: 100%; display: flex; justify-content: center; gap: 16px; }
.lines .talk-tools button { padding: 4px; font-size: 12.5px; color: var(--smoke); background: none; box-shadow: none; text-decoration: underline; }
.lines .talk-tools button:hover { background: none; color: var(--paper); }
.lines .talk-tools [hidden] { display: none; }
/* The set lines run in one row that scrolls sideways, so the panel keeps one height instead of stacking rows over the bar
   (a mouse wheel rolls it too, see app.js). The padding leaves their shadows room inside the scrolling row. On a phone
   they are a size smaller and step aside while you type, so only the box sits over the keyboard. */
.lines .says { display: flex; flex-basis: 100%; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 12px; margin-bottom: -12px; mask-image: linear-gradient(90deg, #000 88%, transparent); }
.lines .says::-webkit-scrollbar { display: none; }
.lines .says::after { content: ''; flex: 0 0 24px; } /* the last line can scroll clear of the fade */
.lines .says button { flex: none; white-space: nowrap; }
@media (max-width: 640px) {
  .lines .says button { padding: 7px 12px; font-size: 13.5px; }
  .lines:has(.talk input:not(:placeholder-shown)) .says { display: none; }
  .lines .talk-tools button { padding: 0 4px; }
}
.talk-log li[hidden] { display: none; }
body.chat-off .lines .talk, body.chat-off .talk-log, body.chat-off .lines .unmute, body.solo .lines .talk, body.solo .lines .talk-tools, body.solo .talk-log { display: none; }
.talk-log { position: fixed; z-index: 9; left: 16px; bottom: var(--log-bottom, calc(max(12px, env(safe-area-inset-bottom)) + 92px)); list-style: none; display: grid; gap: 4px; max-width: min(72vw, 360px); pointer-events: none; }
.talk-log li { justify-self: start; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; padding: 5px 10px; border-radius: 12px; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; color: var(--text); background: rgba(8, 19, 16, .72); backdrop-filter: blur(6px); pointer-events: auto; animation: talk-log 40s ease-out forwards; }
.talk-log .who { font-weight: 600; color: #E8C57F; }
.talk-log .mine .who { color: var(--paper); }
.talk-log .mute { padding: 0 2px; font-size: 11px; color: var(--smoke); background: none; text-decoration: underline; }
@keyframes talk-log { 0% { opacity: 0; translate: 0 6px; } 3%, 85% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
.bar-list .solo-row button { grid-template-columns: 1fr; }
/* a drink sent to you waits above the clink invitation, its bar running down ten seconds */
.toast.gift-toast { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 148px); }
.toast.gift-toast.run::after { animation-duration: 10s; }

/* what the others are doing, said quietly under the header: no chat, but the bar is alive */
.feed { position: fixed; z-index: 9; left: 20px; top: max(72px, calc(env(safe-area-inset-top) + 58px)); list-style: none; display: grid; gap: 6px; pointer-events: none; }
.feed li { justify-self: start; max-width: min(78vw, 360px); padding: 6px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; color: var(--text); background: rgba(8, 19, 16, .72); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .25); animation: feed 6s ease-out forwards; }
@keyframes feed { 0% { opacity: 0; translate: 0 -4px; } 8%, 80% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
/* 에어링 멍: the turns counted quietly, the way prayer beads are */
.turns { position: fixed; z-index: 9; left: 50%; top: max(84px, calc(env(safe-area-inset-top) + 70px)); transform: translateX(-50%); font-size: 16px; letter-spacing: .06em; color: #e8c57f; text-shadow: 0 1px 10px rgba(0, 0, 0, .9); pointer-events: none; }

/* an invitation to clink someone's raised glass, with a bar running down its six seconds */
.toast {
  position: fixed; z-index: 11; left: 50%; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 84px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 24px); overflow: hidden;
  padding: 9px 9px 9px 18px; border-radius: 10px;
  background: rgba(8, 19, 16, .88); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(201, 161, 91, .45), 0 10px 30px rgba(0, 0, 0, .45);
}
.toast p { font-size: 15px; }
.toast b { color: var(--brass); font-weight: 600; }
.toast .cta { padding: 9px 16px; white-space: nowrap; }
.toast:not(.lonely) .alone, .toast.lonely .ask { display: none; }
.toast::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brass); transform-origin: left; }
.toast.run::after { animation: countdown 6s linear forwards; }
@keyframes countdown { to { transform: scaleX(0); } }

.bar-msg {
  position: fixed; z-index: 12; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px;
  background: rgba(8, 19, 16, .8); text-align: center;
}

@media (max-width: 640px) {
  .feed { left: 12px; }
  .nav { display: grid; width: 38px; height: 38px; }
  .prev, .next { top: 38%; }
  .prev { left: 8px; }
  .next { right: 8px; }
  .nav.up { top: max(132px, calc(env(safe-area-inset-top) + 118px)); left: calc(50% - 19px); }
  .nav.down { top: 6px; left: calc(50% - 19px); }
  .info { padding: 52px 16px max(18px, env(safe-area-inset-bottom)); }
  .w-name { font-size: 24px; }
  .w-meta { gap: 16px; margin-top: 8px; }
  .w-note { font-size: 14px; margin-top: 6px; }
  .moods { gap: 5px; margin-bottom: 10px; }
  .moods span { flex-basis: 100%; margin: 0; }
  .moods button { font-size: 12.5px; padding: 4px 9px; }
  .actions { margin-top: 12px; }
  .menu { padding: 18px; }
  .menu-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 18px 12px; }
  .top { gap: 10px; padding-left: 16px; padding-right: 12px; }
  .top > * { white-space: nowrap; }
  body[data-view="bar"] .logo { display: none; }
  .status { font-size: 13px; margin-right: auto; white-space: normal; line-height: 1.35; } /* the bar's name over the head count */
  .status .count { display: block; white-space: nowrap; }
  .where { white-space: nowrap; }
  .maps { gap: 8px; }
  .maps label { padding: 12px 10px; }
  .maps b { font-size: 14.5px; }
  .maps span { display: none; } /* three across a phone: just the names, the scene behind shows the rest */
  .maps small { font-size: 0; } /* and just the number of people (the sentence is still read out) */
  .maps small::after { content: attr(data-short); font-size: 12px; }
  .invite, .menu-btn { padding: 6px 10px; font-size: 13px; }
  .tip-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* just the glass on phones; still read out */
  .hint { top: max(100px, calc(env(safe-area-inset-top) + 86px)); }
  .live-banner { top: max(144px, calc(env(safe-area-inset-top) + 130px)); padding: 14px 22px 12px; } /* under the hint */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
  .bubble.show { opacity: 1; }
}