/* Hubert's drink and his talk over it (src/hubert.js; the user with GPT, 2026-10-24; the user's mock-ups, 2026-10-25).
   His board opens over the room (.tv-over, as the cookbook does); a drink chosen brings the counter closer (.tv.counter:
   src/tavern.js zooms the room's painting toward him, styles/tavern.css hides Maple, the cloche and the book), the
   glass stands on the counter, and his talk sits at the bottom left: his latest line in a wide cream bubble, the
   green box you write in under it (.hb), his face swapping with each line (.faces: the user's layers). */

/* ---- the board: the eight drinks, their names and lines; no recipe ---- */
.tv-bar{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(var(--safe-t, 0px) + 56px) 16px calc(var(--safe-b, 0px) + 16px);box-sizing:border-box}
.bar-board{position:relative;width:min(1180px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;box-sizing:border-box;padding:30px 36px 34px;border-radius:18px;border:3px solid #c98a45;
  background:linear-gradient(180deg,#2a170b,#1c0f07);box-shadow:0 18px 40px rgba(0,0,0,.55),inset 0 0 0 2px rgba(255,220,170,.08);color:#f3e2c2}
.bar-board h2{margin:0 0 20px;text-align:center;font-weight:700;font-size:34px;line-height:1;color:#f1d4a2;letter-spacing:.02em}
.bar-list{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0;padding:0;list-style:none}
.bar-list button{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;box-sizing:border-box;padding:16px 12px 16px;border:2px solid rgba(201,138,69,.5);border-radius:14px;background:rgba(66,36,15,.55);color:#f6e8d2;font-family:inherit;text-align:center;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease}
.bar-list button:hover,.bar-list button:focus-visible{transform:translateY(-3px);border-color:#f0c27a;background:rgba(92,52,22,.7);outline:none}
.bar-list img{width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(0,0,0,.45))}
.bar-list b{font-size:21px;line-height:1.2;word-break:keep-all}
.bar-list span{font-size:15px;line-height:1.45;color:#dcc5a3;word-break:keep-all;text-wrap:balance}
.tv-x.bar-x,.tv-x.mem-x{right:20px;top:calc(var(--safe-t, 0px) + 20px);width:44px;height:44px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
@media (max-width:900px){.bar-list{grid-template-columns:repeat(2,1fr);gap:12px}.bar-board{padding:22px 18px 24px}.bar-board h2{font-size:28px;margin-bottom:14px}.bar-list img{width:110px;height:110px}.bar-list b{font-size:18px}.bar-list span{font-size:14px}}

/* ---- the counter closer: Maple, the cloche and the book out of the way (styles/tavern.css), the room zoomed toward
   him (src/tavern.js), the glass on the counter in front of him (the room's design px) ---- */
.tv-glass{position:absolute;left:950px;top:513px;width:170px;height:220px;object-fit:contain;object-position:50% 100%;pointer-events:none;user-select:none;-webkit-user-select:none;
  filter:drop-shadow(0 12px 10px rgba(0,0,0,.45)) drop-shadow(0 2px 3px rgba(0,0,0,.35));opacity:0;transform:translateY(14px);transition:opacity .5s ease .5s,transform .7s cubic-bezier(.2,.8,.3,1) .5s}
.tv-glass-shade{position:absolute;left:958px;top:717px;width:154px;height:30px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,8,2,.55),rgba(20,8,2,0));pointer-events:none;opacity:0;transition:opacity .5s ease .5s}
.tv.counter .tv-glass,.tv.counter .tv-glass-shade{opacity:1;transform:none}
/* (the way in and out: the painting glides) */
.tv.zoom .tv-stage{transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.tv.stack .tv-glass,.tv.stack .tv-glass-shade{display:none}
@media (prefers-reduced-motion:reduce){.tv.zoom .tv-stage,.tv-glass,.tv-glass-shade{transition:none}}
/* the room waits while his talk is up: nothing in it lights, the stage takes no clicks */
.tv.counter .tv-stage{pointer-events:none}

/* ---- his faces over a drink (src/hubert.js; the user's layers, scripts/tavern/build-hubert-faces.py): while the
   counter is close the room's Hubert gives way to the listening one, and each other face is a patch over it, the one
   he wears shown, each change a 0.2 s crossfade ---- */
.tv-npc.hubert img:first-child{transition:opacity .45s ease}
.tv-npc.hubert img.hb-lay,.tv-npc.hubert img.hb-face{opacity:0}
.tv-npc.hubert img.hb-lay{transition:opacity .45s ease}
.tv-npc.hubert img.hb-face{transition:opacity .2s linear}
.tv.counter.faces .tv-npc.hubert img:first-child{opacity:0}
.tv.counter.faces .tv-npc.hubert img.hb-lay{opacity:1}
.tv.counter.faces .tv-npc.hubert img.hb-face.on{opacity:1}
@media (prefers-reduced-motion:reduce){.tv-npc.hubert img{transition:none!important}}

/* ---- his talk, the user's mock-ups (2026-10-25, design/camp/tavern/sources/hubert-talk-mockup*.webp): at the bottom
   left, his latest line in one wide cream bubble with a tail toward him, the green box you write in under it and the
   round send button beside it; 대화 기록 opens the bubble upward into the talk so far. Sized from the mock-ups' 1653 x
   952 page (src/hubert.js sets --k: 1 there): the bubble 788 wide from 50 in, its foot 156 over the page's foot, the
   box 70 high 66 over it. ---- */
.hb{--k:1;position:absolute;z-index:5;display:flex;flex-direction:column;box-sizing:border-box;pointer-events:none;font-family:"Crimson Text","Gowun Batang",Georgia,serif;color:#3a2414;
  opacity:0;transform:translateY(calc(16px * var(--k)));transition:opacity .35s ease .3s,transform .5s cubic-bezier(.2,.8,.3,1) .3s}
.hb.on{opacity:1;transform:none}
.hb > *{pointer-events:auto}
.hb button{font-family:inherit;-webkit-tap-highlight-color:transparent}
.hb.wide{left:calc(50px * var(--k));bottom:calc(var(--safe-b, 0px) + 66px * var(--k));width:calc(788px * var(--k))}
.hb.narrow{left:10px;right:10px;bottom:calc(var(--safe-b, 0px) + 10px)}

/* the bubble: cream, a fine gold edge, its tail at the top right corner, toward him */
.hb-bub{position:relative;display:flex;flex-direction:column;box-sizing:border-box;border:calc(2.5px * var(--k)) solid #d4a978;border-radius:calc(22px * var(--k));background:#faeed6;
  box-shadow:0 calc(8px * var(--k)) calc(22px * var(--k)) rgba(20,6,0,.38);padding:calc(13px * var(--k)) calc(34px * var(--k)) calc(28px * var(--k));margin-bottom:calc(20px * var(--k))}
.hb-tail{position:absolute;right:calc(-3px * var(--k));top:calc(-18px * var(--k));width:calc(40px * var(--k));height:calc(36px * var(--k));overflow:visible}
.hb-tail .f{fill:#faeed6}
.hb-tail .s{fill:none;stroke:#d4a978;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
/* its head: the sprig and his name, the turns used (the user's "9/10"), a rule under them, the two buttons */
.hb-head{position:relative;display:flex;align-items:center;flex:none;height:calc(38px * var(--k));margin-right:calc(-10px * var(--k))}
.hb-sprig{display:block;flex:none;width:calc(22px * var(--k));height:calc(30px * var(--k));margin:calc(14px * var(--k)) calc(20px * var(--k)) 0 calc(-2px * var(--k));color:#c99a52}
.hb-sprig svg{display:block;width:100%;height:100%}
.hb-name{flex:none;font-weight:700;font-size:calc(23px * var(--k));line-height:1;color:#3a2414;letter-spacing:.01em;white-space:nowrap}
.hb-meta{display:flex;align-items:center;gap:calc(7px * var(--k));margin-left:calc(14px * var(--k));font:400 calc(14px * var(--k))/1 "Hind","Gowun Dodum",system-ui,sans-serif;color:#9a7b57;white-space:nowrap}
.hb-rule{position:absolute;left:calc(-2px * var(--k));top:calc(39px * var(--k));width:calc(440px * var(--k));max-width:56%;height:calc(1.5px * var(--k));background:linear-gradient(90deg,#d3b795 0,#d3b795 76%,rgba(211,183,149,0) 100%);pointer-events:none}
.hb-btn{display:flex;align-items:center;justify-content:center;gap:calc(9px * var(--k));flex:none;height:calc(38px * var(--k));box-sizing:border-box;padding:0 calc(20px * var(--k)) 0 calc(17px * var(--k));
  border:calc(1.5px * var(--k)) solid #d4ae80;border-radius:999px;background:#fbf1dd;color:#3d2516;font-size:calc(17px * var(--k));line-height:1;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s}
.hb-btn svg{width:calc(21px * var(--k));height:calc(21px * var(--k));flex:none;color:#4a2e1a}
.hb-btn:hover{background:#f6e6c8;border-color:#c79a62}
.hb-btn:focus-visible{outline:2px solid #c98a45;outline-offset:2px}
.hb-hist{margin-left:auto}
.hb-end{margin-left:calc(14px * var(--k))}
/* his line now: the mock-up's 27 on 41, typed out, scrolling inside the bubble once it is as tall as the record; a line
   that leads on has the arrow at the bubble's corner (outside the scrolling box: in it, it hung below the words and
   gave every line a scroll of half a line) */
.hb-now{position:relative;margin-top:calc(22px * var(--k));max-height:calc(var(--hist-h,514px) - 90px * var(--k));overflow-y:auto;overscroll-behavior:contain;cursor:default;scrollbar-width:thin;scrollbar-color:#d9a35c #efd9b6}
.hb-now::-webkit-scrollbar{width:calc(8px * var(--k))}
.hb-now::-webkit-scrollbar-track{background:#efd9b6;border-radius:99px}
.hb-now::-webkit-scrollbar-thumb{background:#d9a35c;border-radius:99px}
.hb-say{margin:0;font-size:calc(27px * var(--k));line-height:calc(41px * var(--k));min-height:calc(41px * var(--k));word-break:keep-all;text-wrap:pretty;white-space:pre-line}
.hb-next{position:absolute;right:calc(16px * var(--k));bottom:calc(11px * var(--k));width:calc(14px * var(--k));height:calc(9px * var(--k));background:#b0632b;clip-path:polygon(0 0,100% 0,50% 100%);opacity:0;pointer-events:none}
.hb.leads .hb-next{opacity:.9;animation:hbBob 1.1s ease-in-out infinite}
.hb.leads .hb-now{cursor:pointer}
@keyframes hbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(3px * var(--k)))}}
.hb-err{margin:calc(8px * var(--k)) 0 0;font:400 calc(15px * var(--k))/1.3 "Hind","Gowun Dodum",system-ui,sans-serif;color:#b4432e}
.hb-err[hidden]{display:none}
/* (his answer on its way) */
.hb-dots{display:inline-flex;gap:calc(8px * var(--k));align-items:center;height:calc(41px * var(--k))}
.hb-dots i{width:calc(8px * var(--k));height:calc(8px * var(--k));border-radius:50%;background:#b08a5a;animation:hbDot 1.1s ease-in-out infinite}
.hb-dots i:nth-child(2){animation-delay:.18s}.hb-dots i:nth-child(3){animation-delay:.36s}
@keyframes hbDot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(calc(-3px * var(--k)))}}
/* (nothing came back) */
.hb-retry{display:flex;flex-wrap:wrap;align-items:center;gap:calc(8px * var(--k)) calc(14px * var(--k));font:400 calc(16px * var(--k))/1.3 "Hind","Gowun Dodum",system-ui,sans-serif;color:#9a3b25}
.hb-pill,.hb-mem-btns button{display:inline-flex;align-items:center;justify-content:center;height:calc(40px * var(--k));padding:0 calc(20px * var(--k));border:calc(1.5px * var(--k)) solid #d4ae80;border-radius:999px;background:#fbf1dd;color:#3d2516;font-size:calc(18px * var(--k));line-height:1;cursor:pointer;transition:background .15s,border-color .15s}
.hb-pill:hover,.hb-mem-btns button:hover{background:#f6e6c8;border-color:#c79a62}
/* what he would keep: his note, to keep or not */
.hb-mem{margin-top:calc(14px * var(--k));padding:calc(14px * var(--k)) calc(18px * var(--k)) calc(16px * var(--k));border:calc(1.5px * var(--k)) dashed #cfae7f;border-radius:calc(16px * var(--k));background:#fff7e6}
.hb-mem-t{margin:0 0 calc(14px * var(--k));font-size:calc(22px * var(--k));line-height:1.5;word-break:keep-all}
.hb-mem-btns{display:flex;flex-wrap:wrap;gap:calc(12px * var(--k))}
.hb-mem-btns button.keep{background:#3e5b3b;border-color:#3e5b3b;color:#fbf4e4}
.hb-mem-btns button.keep:hover{background:#4a6b46;border-color:#4a6b46}
.hb-mem-btns button:disabled{opacity:.5;cursor:default}
.hb-mem-btns button:focus-visible,.hb-pill:focus-visible{outline:2px solid #c98a45;outline-offset:2px}
/* 대화 기록: the bubble opens upward into the talk so far, his lines cream and yours green, a gold scrollbar */
.hb.hist .hb-bub{height:var(--hist-h,514px);padding-bottom:calc(13px * var(--k))}
.hb.hist .hb-now{display:none}
.hb-log{display:flex;flex-direction:column;align-items:flex-start;gap:calc(14px * var(--k));flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  margin:calc(20px * var(--k)) calc(-27px * var(--k)) 0 calc(-7px * var(--k));padding:0 calc(15px * var(--k)) calc(6px * var(--k)) 0}
.hb-log[hidden]{display:none}
.hb-log::-webkit-scrollbar{width:calc(8px * var(--k))}
.hb-log::-webkit-scrollbar-track{background:#efd9b6;border-radius:99px}
.hb-log::-webkit-scrollbar-thumb{background:#d9a35c;border-radius:99px}
@supports not selector(::-webkit-scrollbar){.hb-log{scrollbar-width:thin;scrollbar-color:#d9a35c #efd9b6}}
.hb-b{flex:none;max-width:78%;box-sizing:border-box;padding:calc(11px * var(--k)) calc(22px * var(--k)) calc(12px * var(--k));border-radius:calc(20px * var(--k));font-size:calc(19.2px * var(--k));line-height:calc(29.6px * var(--k));word-break:keep-all;text-wrap:pretty}
.hb-b p{margin:0;white-space:pre-line}
.hb-b.h{background:#fff7e6;border:calc(1.5px * var(--k)) solid #e3cdaa;color:#3a2414}
.hb-b.u{align-self:flex-end;background:#415336;color:#fdf6e8;white-space:pre-wrap;text-wrap:wrap}
/* the box you write in: green, a gold edge, the count in its corner; it grows from one line to three */
.hb-in{display:flex;align-items:flex-end;gap:calc(16px * var(--k));flex:none;margin-right:calc(4px * var(--k));transition:opacity .25s}
.hb-in.off .hb-text{opacity:.7}
.hb.leads .hb-in{cursor:pointer}
.hb.ending .hb-in{visibility:hidden}
.hb-box{position:relative;flex:1;min-width:0;border:calc(3px * var(--k)) solid #ecb877;border-radius:calc(22px * var(--k));background:#3e5b3b;box-shadow:inset 0 0 0 1px rgba(30,20,0,.28),0 calc(6px * var(--k)) calc(16px * var(--k)) rgba(20,6,0,.38)}
.hb .hb-text{display:block;width:100%;box-sizing:border-box;min-height:calc(64px * var(--k));margin:0;padding:calc(17px * var(--k)) calc(118px * var(--k)) calc(17px * var(--k)) calc(20px * var(--k));border:0;border-radius:calc(19px * var(--k));
  background:transparent;box-shadow:none;color:#f6efdf;font:inherit;font-family:"Crimson Text","Gowun Batang",Georgia,serif;font-size:calc(22px * var(--k));line-height:calc(30px * var(--k));resize:none;outline:none;overflow-y:auto;word-break:keep-all}
.hb .hb-text:focus{box-shadow:none}
.hb .hb-text::placeholder{color:rgba(226,234,214,.8);letter-spacing:.32em}
.hb .hb-text:disabled{cursor:default;pointer-events:none}
.hb-send:disabled{pointer-events:none}
.hb-box:focus-within{border-color:#f3c98c}
.hb-count{position:absolute;right:calc(16px * var(--k));bottom:calc(16px * var(--k));font:400 calc(18px * var(--k))/1 "Hind","Gowun Dodum",system-ui,sans-serif;color:#bfccb3;pointer-events:none}
.hb-count.over{color:#ffb08f;font-weight:600}
.hb-send{flex:none;display:flex;align-items:center;justify-content:center;width:calc(56px * var(--k));height:calc(56px * var(--k));margin-bottom:calc(7px * var(--k));padding:0;border:calc(2px * var(--k)) solid #f2c387;border-radius:50%;
  background:#de9c48;color:#421200;box-shadow:0 calc(6px * var(--k)) calc(14px * var(--k)) rgba(20,6,0,.4);cursor:pointer;transition:background .15s,transform .1s,opacity .15s}
.hb-send svg{width:calc(26px * var(--k));height:calc(26px * var(--k))}
.hb-send:hover:not(:disabled){background:#e8a955}
.hb-send:active:not(:disabled){transform:scale(.94)}
.hb-send:disabled{opacity:.88;cursor:default}
.hb-send:focus-visible,.hb-end:focus-visible{outline:2px solid #f0c27a;outline-offset:3px}

/* ---- a phone (or a narrow window): the same, the width of the screen, sized for it; the two buttons as icons ---- */
.hb.narrow .hb-bub{border-width:2px;border-radius:18px;padding:10px 14px 16px;margin-bottom:10px}
.hb.narrow .hb-tail{width:32px;height:29px;right:-2px;top:-15px}
.hb.narrow .hb-head{height:34px;margin-right:-4px}
.hb.narrow .hb-sprig{width:16px;height:22px;margin:10px 10px 0 -2px}
.hb.narrow .hb-name{font-size:18px}
.hb.narrow .hb-meta{margin-left:9px;gap:5px;font-size:12px}
.hb.narrow .hb-rule{top:36px;width:55%}
.hb.narrow .hb-btn{width:36px;height:34px;padding:0;gap:0;border-width:1.5px}
.hb.narrow .hb-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hb.narrow .hb-btn svg{width:19px;height:19px}
.hb.narrow .hb-end{margin-left:8px}
.hb.narrow .hb-now{margin-top:16px}
.hb.narrow .hb-now{max-height:calc(var(--hist-h,400px) - 70px)}
.hb.narrow .hb-say{font-size:17px;line-height:26px;min-height:26px}
.hb.narrow .hb-next{right:10px;bottom:6px;width:12px;height:8px}
.hb.narrow .hb-dots{height:26px}
.hb.narrow .hb-err{font-size:13px}
.hb.narrow .hb-mem{margin-top:10px;padding:10px 12px 12px;border-radius:12px}
.hb.narrow .hb-mem-t{font-size:15.5px;margin-bottom:10px}
.hb.narrow .hb-pill,.hb.narrow .hb-mem-btns button{height:36px;padding:0 16px;font-size:15px}
.hb.narrow.hist .hb-bub{padding-bottom:10px}
.hb.narrow .hb-log{gap:9px;margin:14px -10px 0 -4px;padding:0 8px 4px 0}
.hb.narrow .hb-b{max-width:86%;padding:7px 12px 8px;border-radius:14px;font-size:12.8px;line-height:19.2px}
.hb.narrow .hb-in{gap:8px;margin-right:0}
.hb.narrow .hb-box{border-width:2.5px;border-radius:18px}
.hb.narrow .hb-text{min-height:48px;padding:12px 84px 12px 14px;font-size:16px;line-height:22px;border-radius:15px}
.hb.narrow .hb-count{right:12px;bottom:15px;font-size:13px}
.hb.narrow .hb-send{width:46px;height:46px;margin-bottom:3px;border-width:2px}
.hb.narrow .hb-send svg{width:22px;height:22px}
@media (prefers-reduced-motion:reduce){.hb{transition:none}.hb.leads .hb-next,.hb-dots i{animation:none}}

/* ---- what he remembers (from his menu): a sheet of notes, each with its day and a way to delete it ---- */
.tv-mem{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(var(--safe-t, 0px) + 56px) 16px calc(var(--safe-b, 0px) + 16px);box-sizing:border-box}
.mem-sheet{position:relative;width:min(680px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;box-sizing:border-box;padding:26px 30px 28px;border-radius:14px;background:#f3e6c8;color:#3b2412;box-shadow:0 18px 40px rgba(0,0,0,.55)}
.mem-sheet h2{margin:0 0 16px;font-weight:700;font-size:28px;line-height:1.1;color:#3a1f0c}
.mem-list{margin:0;padding:0;list-style:none}
.mem-list li{display:grid;grid-template-columns:1fr auto;grid-template-areas:"time act" "text act";column-gap:14px;row-gap:4px;align-items:center;padding:12px 0 14px;border-top:1px solid #d9c7a8}
.mem-list li:first-child{border-top:0}
.mem-list time{grid-area:time;font:400 14px/1 "Hind","Gowun Dodum",system-ui,sans-serif;color:#8a6a4a}
.mem-list p{grid-area:text;margin:0;font-size:18px;line-height:1.45;word-break:keep-all;white-space:pre-wrap}
.mem-act{grid-area:act;display:flex;align-items:center;gap:8px;font:400 14px/1 "Hind","Gowun Dodum",system-ui,sans-serif;color:#7a5a3a}
.mem-act button{padding:7px 12px 8px;border:1.5px solid #b08a5a;border-radius:999px;background:#fbf4e4;color:#5a3418;font:inherit;font-size:14px;line-height:1;cursor:pointer}
.mem-act button:hover{background:#efe1c6}
.mem-act button.yes{background:#b8432e;border-color:#8c2f1f;color:#fff6ea}
.mem-act button.yes:hover{background:#a3311d}
.mem-act button:disabled{opacity:.5;cursor:default}
.mem-wait,.mem-none{padding:20px 0;text-align:center;font-size:18px;color:#7a5a3a}
@media (max-width:600px){.mem-sheet{padding:20px 16px 22px}.mem-sheet h2{font-size:22px}.mem-list li{grid-template-columns:1fr;grid-template-areas:"time" "text" "act"}.mem-list p{font-size:16px}}