/* ============================================================================
   The Sommelier Game · shared skin
   The visual language is unchanged from the single-player version: paper,
   ink, brush strokes, vermillion seals. Everything new (polls, leaderboard,
   podium) is drawn in the same hand.
   ========================================================================== */
:root{
  --paper:#F4F1E7;
  --paper-deep:#E9E4D4;
  --card:#FBF9F2;
  --ink:#2A2721;
  --ink-soft:#4A443A;
  --dim:#8B8271;
  --faint:#B6AD9A;
  --line:rgba(42,39,33,.10);
  --hair:rgba(42,39,33,.07);
  --jade:#6B9080;
  --gold:#C2913F;
  --seal:#B0402C;
  --serif:"Noto Serif TC",serif;
  --sans:"Karla",-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.19,.75,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{height:100%;overscroll-behavior:none;}
body{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;
  background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;
  -webkit-font-smoothing:antialiased;}

/* paper grain — sits above everything, purely optical */
.grain{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.28;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");}

/* ---- one stage, many scenes ---------------------------------------------
   Only one screen exists at a time now: the host decides what it is, so the
   player app has nothing to navigate between.                              */
.stage{height:100dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;}
.scene{display:flex;flex-direction:column;min-height:100dvh;max-width:520px;margin:0 auto;
  position:relative;
  padding:calc(34px + env(safe-area-inset-top,0px)) 28px calc(30px + env(safe-area-inset-bottom,0px));
  animation:sceneIn 1.1s var(--ease) both;}
@keyframes sceneIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.scene > *{position:relative;z-index:1;flex-shrink:0;}
.spacer{flex:1;min-height:12px;}

/* full-bleed scenes (the colour call) opt out of the padding */
.scene.bleed{padding:0;max-width:none;}

/* ---- type ---- */
.eyebrow{font-size:10px;letter-spacing:.32em;color:var(--faint);text-transform:uppercase;
  font-weight:400;margin-bottom:14px;}
h1{font-family:var(--serif);font-weight:300;font-size:34px;line-height:1.35;letter-spacing:.01em;}
h2{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.4;margin-bottom:8px;letter-spacing:.01em;}
.sub{color:var(--dim);font-size:15px;line-height:1.85;font-weight:300;}
.tiny{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}

/* ---- buttons ---- */
.btn{display:block;width:100%;padding:17px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--ink-soft);font-size:14px;font-family:var(--sans);font-weight:400;
  letter-spacing:.12em;cursor:pointer;transition:transform .3s var(--ease), opacity .5s ease, background .4s ease;}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn.quiet{border:none;font-size:12px;color:var(--dim);}
.btn:active{transform:scale(.975);}
.btn[disabled]{opacity:.28;pointer-events:none;}

input[type=text]{width:100%;background:rgba(251,249,242,.7);border:none;border-radius:4px;
  border-bottom:1px solid var(--line);color:var(--ink);font-family:var(--serif);font-weight:300;
  font-size:19px;padding:14px 4px;letter-spacing:.02em;}
input[type=text]:focus{outline:none;border-bottom-color:rgba(194,145,63,.55);}
input[type=text]::placeholder{color:var(--faint);}
textarea{width:100%;background:rgba(251,249,242,.7);border:none;border-radius:4px;
  border-bottom:1px solid var(--line);
  color:var(--ink);font-family:var(--serif);font-weight:300;font-size:16px;line-height:1.9;
  padding:16px 4px;min-height:118px;resize:none;transition:border-color .5s ease;}
textarea::placeholder{color:var(--faint);}
textarea:focus{outline:none;border-bottom-color:rgba(194,145,63,.55);}

/* ---- floating tea dust ---- */
.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.mote{position:absolute;border-radius:50%;background:var(--gold);opacity:0;filter:blur(.5px);}
.mote:nth-child(1){width:4px;height:4px;left:12%;top:70%;animation:drift1 22s ease-in-out infinite;}
.mote:nth-child(2){width:3px;height:3px;left:78%;top:20%;animation:drift2 26s ease-in-out 4s infinite;}
.mote:nth-child(3){width:5px;height:5px;left:50%;top:85%;animation:drift1 30s ease-in-out 8s infinite;}
.mote:nth-child(4){width:3px;height:3px;left:30%;top:35%;animation:drift2 24s ease-in-out 12s infinite;}
@keyframes drift1{0%{transform:translate(0,0);opacity:0;}12%{opacity:.26;}
  50%{transform:translate(18px,-70px);opacity:.15;}88%{opacity:0;}100%{transform:translate(-10px,-140px);opacity:0;}}
@keyframes drift2{0%{transform:translate(0,0);opacity:0;}15%{opacity:.2;}
  50%{transform:translate(-24px,-60px);opacity:.13;}85%{opacity:0;}100%{transform:translate(14px,-120px);opacity:0;}}

/* ---- enso ring ---- */
.enso{width:126px;height:126px;margin:0 auto;position:relative;}
.enso svg{width:100%;height:100%;transform:rotate(-105deg);}
.enso circle{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:339;stroke-dashoffset:339;opacity:.7;
  animation:drawEnso 3.4s cubic-bezier(.4,0,.2,1) .3s forwards;}
@keyframes drawEnso{to{stroke-dashoffset:34;}}
.enso .tea-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:300;font-size:40px;opacity:0;animation:fadeSoft 1.6s ease 1.9s forwards;}
@keyframes fadeSoft{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* ---- the quartered screen: colour, and the nose ---------------------------
   The screen IS the answer sheet. Four fields divided by a hairline, each one
   a button a quarter of a phone in size, so the gesture is "put your thumb on
   the one that fits" — there is nothing small to aim at and no corner to find.
   The ink washes still bloom from the four corners of the glass beneath, so
   whichever field a thumb lands in is standing on its own colour.          */
.ink-bg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;}
.ink-blob{opacity:0;transform-origin:center;transform-box:fill-box;will-change:opacity;
  transition:opacity 1.2s ease, transform .9s var(--ease);}
.ink-blob.in{opacity:1;}
.ink-blob.hushed{opacity:.18;}
.ink-blob.lit{transform:scale(1.06);}

.scene.bleed > .quad-frame{position:relative;z-index:2;display:flex;flex-direction:column;
  flex:1;min-height:100dvh;max-width:520px;margin:0 auto;width:100%;
  padding:calc(22px + env(safe-area-inset-top,0px)) 16px calc(18px + env(safe-area-inset-bottom,0px));}
/* The washes are strongest exactly where the reading matters — the question at
   the top, the count at the bottom — so paper is laid back over both ends and
   fades out into the ink. It sits behind the type and in front of the wash. */
.scene.bleed > .quad-frame::before,
.scene.bleed > .quad-frame::after{content:'';position:absolute;left:0;right:0;
  height:200px;z-index:-1;pointer-events:none;}
.scene.bleed > .quad-frame::before{top:0;
  background:linear-gradient(180deg,rgba(244,241,231,.95),rgba(244,241,231,.78) 55%,rgba(244,241,231,0));}
.scene.bleed > .quad-frame::after{bottom:0;
  background:linear-gradient(0deg,rgba(244,241,231,.95),rgba(244,241,231,.78) 55%,rgba(244,241,231,0));}

.quad-head{flex:none;text-align:center;}
.quad-head .eyebrow{margin-bottom:6px;color:var(--dim);}
.quad-title{font-family:var(--serif);font-weight:300;font-size:26px;letter-spacing:.02em;}
.quad-ask{font-size:13px;line-height:1.7;color:var(--ink-soft);font-weight:300;
  max-width:300px;margin:7px auto 0;}

.quad-grid{position:relative;flex:1;display:grid;
  grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:4px;margin:15px 0 10px;min-height:330px;}
/* the two dividing strokes. Each SVG is thin in the direction that carries the
   stroke's thickness and stretched only along its length, so the brush keeps
   its weight whatever shape the grid ends up. */
.brush-v,.brush-h{position:absolute;pointer-events:none;z-index:0;
  opacity:0;transition:opacity 1.8s ease;}
.brush-v.in,.brush-h.in{opacity:.14;}
.brush-v{left:50%;top:4%;height:92%;width:14px;transform:translateX(-50%);}
.brush-h{top:50%;left:3%;width:94%;height:14px;transform:translateY(-50%);}
.brush-v path,.brush-h path{fill:var(--ink);}

/* A field, not a card: no border, no panel, no shadow. The wash underneath is
   the only ground, and the whole quadrant is the button. */
.quad{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;padding:16px 12px;cursor:pointer;
  border:none;border-radius:0;background:transparent;
  -webkit-tap-highlight-color:transparent;
  opacity:0;transition:opacity 1.1s ease, transform .45s var(--ease);}
.quad.in{opacity:1;}
.quad:active{transform:scale(.965);}
/* The three you did not call step back — but never by fading the swatch, since
   on the colour call the swatch IS the answer and you may still want to hold
   it against the cup. Only the words retreat. */
.quad.off .quad-nm,.quad.off .quad-en,.quad.off .quad-note{opacity:.4;}
.quad.off .quad-ic{opacity:.3;}

.quad-mark{position:relative;display:flex;align-items:center;justify-content:center;
  width:66px;height:66px;flex:none;}
.quad-blob,.quad-ic{display:block;width:100%;height:100%;overflow:visible;}
.quad-ic{fill:none;stroke:var(--ink);stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.66;transition:opacity .5s ease;}
.quad.on .quad-ic{opacity:1;}
/* the icons are written on, one stroke at a time, the way the leaf is */
.quad-ic path{stroke-dasharray:100;stroke-dashoffset:100;}
.quad.in .quad-ic path{animation:writeIcon 2.4s cubic-bezier(.32,0,.24,1) forwards;}
.quad.tl .quad-ic path{animation-delay:.15s;} .quad.tr .quad-ic path{animation-delay:.45s;}
.quad.bl .quad-ic path{animation-delay:.75s;} .quad.br .quad-ic path{animation-delay:1.05s;}
@keyframes writeIcon{to{stroke-dashoffset:0;}}
/* and once written they never sit quite still — a slow drift, off the beat
   from each other, so the page breathes rather than blinks */
.quad.in .quad-mark{animation:inkDrift 7.5s ease-in-out infinite;}
.quad.tl .quad-mark{animation-delay:0s;}    .quad.tr .quad-mark{animation-delay:1.9s;}
.quad.bl .quad-mark{animation-delay:3.8s;}  .quad.br .quad-mark{animation-delay:5.6s;}
@keyframes inkDrift{0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-3.5px) rotate(-.7deg);}}

/* the call is marked the way a scroll is: a ring brushed round it, then the
   seal pressed beside it */
.quad-enso{position:absolute;inset:-7px;width:auto;height:auto;overflow:visible;
  pointer-events:none;}
.quad-enso path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;
  opacity:.66;stroke-dasharray:100;stroke-dashoffset:100;}
.quad.on .quad-enso path{animation:brushEnso 1.05s cubic-bezier(.3,0,.2,1) forwards;}
@keyframes brushEnso{to{stroke-dashoffset:7;}}

.quad-nm{font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:.07em;
  color:var(--ink);text-align:center;line-height:1.3;transition:opacity .5s ease;}
.quad-en{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);
  text-align:center;line-height:1.4;transition:opacity .5s ease;}
.quad-note{font-size:10.5px;line-height:1.55;color:var(--faint);text-align:center;
  font-weight:300;max-width:160px;transition:opacity .5s ease;}
.quad-seal{position:absolute;top:10px;right:12px;width:14px;height:14px;
  opacity:0;transform:scale(.4) rotate(-12deg);
  transition:opacity .5s ease .35s, transform .5s var(--ease) .35s;}
.quad-seal svg{display:block;width:100%;height:100%;}
.quad.on .quad-seal{opacity:.9;transform:none;}

.quad-foot{flex:none;text-align:center;}
.quad-chosen{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  transition:color .5s ease;}
.quad-chosen b{font-family:var(--serif);font-weight:400;font-size:16px;letter-spacing:.04em;
  text-transform:none;color:var(--ink);margin-left:6px;}
.quad-chosen.in{color:var(--dim);}
.quad-foot .bloom-note{color:var(--dim);}
.quad-foot .bloom{margin-top:13px;padding-top:12px;}

/* a short phone would rather scroll than squeeze the four fields flat */
@media (max-height:620px){
  .quad-ask{display:none;}
  .quad-note{display:none;}
  .quad-mark{width:52px;height:52px;}
  .quad-grid{min-height:300px;}}

/* ---- the brushed scale ---- */
.q-hint{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-top:8px;}
.ink-choice{position:relative;display:flex;align-items:center;height:54px;}
.slider-brush{position:absolute;left:0;top:50%;width:100%;height:auto;
  transform:translateY(-50%);pointer-events:none;}
.pip{position:absolute;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;
  background:none;border:none;padding:0;cursor:pointer;z-index:2;}
.pip i{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  opacity:.3;background-size:contain;background-repeat:no-repeat;background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13.2,2.9 C17.5,2.4 21.7,6.0 22.6,10.3 C23.5,14.6 20.8,19.6 16.5,21.5 C12.5,23.3 7.6,21.8 5.0,18.2 C2.5,14.6 3.1,9.0 6.2,5.8 C8.0,3.9 10.6,3.0 13.2,2.9 Z' fill='%232A2721'/%3E%3C/svg%3E");
  transition:width .55s var(--ease), height .55s var(--ease), margin .55s var(--ease), opacity .45s ease;}
.pip:active i{opacity:.6;}
.pip.on i{width:25px;height:25px;margin:-12.5px 0 0 -12.5px;opacity:1;}
/* the personal rating is the one thing still dragged rather than tapped */
.ink-slider{position:relative;display:flex;align-items:center;height:54px;}
input[type=range]{-webkit-appearance:none;appearance:none;position:relative;
  width:100%;height:54px;background:transparent;outline:none;border:none;}
input[type=range]::-webkit-slider-runnable-track{background:transparent;border:none;height:54px;}
input[type=range]::-moz-range-track{background:transparent;border:none;height:54px;}
/* the handle is a dab of ink, not a knob — irregular, no gloss, no ring */
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:26px;height:26px;border:none;background:transparent;cursor:grab;box-shadow:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='12.4' fill='%23F4F1E7' opacity='.26'/%3E%3Cpath d='M13.2,2.9 C17.5,2.4 21.7,6.0 22.6,10.3 C23.5,14.6 20.8,19.6 16.5,21.5 C12.5,23.3 7.6,21.8 5.0,18.2 C2.5,14.6 3.1,9.0 6.2,5.8 C8.0,3.9 10.6,3.0 13.2,2.9 Z' fill='%232A2721'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;background-position:center;}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border:none;background:transparent;
  cursor:grab;box-shadow:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='12.4' fill='%23F4F1E7' opacity='.26'/%3E%3Cpath d='M13.2,2.9 C17.5,2.4 21.7,6.0 22.6,10.3 C23.5,14.6 20.8,19.6 16.5,21.5 C12.5,23.3 7.6,21.8 5.0,18.2 C2.5,14.6 3.1,9.0 6.2,5.8 C8.0,3.9 10.6,3.0 13.2,2.9 Z' fill='%232A2721'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;background-position:center;}

.choice{font-family:var(--serif);font-weight:300;font-size:31px;line-height:1.35;
  text-align:center;position:relative;z-index:1;min-height:1.35em;color:var(--ink);
  transition:opacity .4s ease;}
.choice.blank{color:var(--faint);}
.choice.swap{opacity:0;}
.readout-wrap{position:relative;display:flex;justify-content:center;align-items:center;margin:30px 0 12px;}
.readout-glow{position:absolute;width:210px;height:210px;border-radius:50%;filter:blur(46px);
  opacity:0;z-index:0;background:radial-gradient(circle,var(--c,transparent),transparent 70%);
  transition:opacity 1.2s ease, background 1.2s ease;}
.readout-glow.on{opacity:.34;}

/* ---- the pick list (nose) ---- */
.figure{display:block;width:min(200px,54vw);height:auto;margin:18px auto 2px;opacity:.85;}
.figure path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;animation:drawFig 3s cubic-bezier(.32,0,.24,1) .2s forwards;}
@keyframes drawFig{to{stroke-dashoffset:0;}}
.pick-list{display:flex;flex-direction:column;gap:11px;margin-top:24px;}
.pick{display:flex;align-items:center;gap:15px;width:100%;text-align:left;
  padding:16px 18px;border:1px solid var(--line);border-radius:3px;
  background:rgba(251,249,242,.55);cursor:pointer;font-family:var(--sans);
  transition:background .6s ease, border-color .6s ease, transform .3s var(--ease);}
.pick:active{transform:scale(.985);}
.pick .dot{width:22px;height:22px;flex-shrink:0;opacity:.22;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13.2,2.9 C17.5,2.4 21.7,6.0 22.6,10.3 C23.5,14.6 20.8,19.6 16.5,21.5 C12.5,23.3 7.6,21.8 5.0,18.2 C2.5,14.6 3.1,9.0 6.2,5.8 C8.0,3.9 10.6,3.0 13.2,2.9 Z' fill='%232A2721'/%3E%3C/svg%3E");
  transition:opacity .45s ease, transform .45s var(--ease);}
.pick.on .dot{opacity:1;transform:scale(1.08);}
.pick b{display:block;font-family:var(--serif);font-weight:400;font-size:17px;color:var(--ink);}
.pick i{display:block;font-style:normal;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);margin-top:5px;}
.pick.on{border-color:transparent;background:var(--pickbg,rgba(42,39,33,.07));}
.pick.on i{color:var(--ink-soft);}

/* ---- the ink wash behind a scale question ---- */
.wash-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0;
  opacity:0;transition:opacity 1.6s ease;}
.wash-bg.on{opacity:1;}
.wash-stop,.wash-tint{transition:stop-color 1.5s ease, fill 1.5s ease;}

/* ---- the bloom: one ink dot per guest who has called -----------------------
   With no shared screen and no clock, this is where the room lives. Dots land
   as people lock in, so waiting feels like watching a table fill up.        */
.bloom{margin-top:26px;padding-top:20px;
  background-image:linear-gradient(90deg,transparent,var(--hair) 6%,var(--hair) 94%,transparent);
  background-size:100% 1px;background-repeat:no-repeat;background-position:top;}
.bloom-dots{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:12px;}
.bloom-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:10px;font-weight:500;letter-spacing:.04em;
  color:var(--paper);background:var(--dim);opacity:.22;filter:grayscale(1);
  transition:opacity .9s var(--ease), filter .9s ease, transform .9s var(--ease);
  transform:scale(.82);}
.bloom-dot.in{opacity:1;filter:none;transform:scale(1);}
.bloom-dot.me{box-shadow:0 0 0 1.5px var(--paper), 0 0 0 3px rgba(176,64,44,.55);}
.bloom-count{font-size:11px;letter-spacing:.14em;color:var(--dim);}
.bloom-count b{font-family:var(--serif);font-weight:300;font-size:17px;color:var(--ink);}
.bloom-note{font-size:11px;color:var(--faint);margin-top:4px;letter-spacing:.04em;}
/* on the colour call the bloom lives mid-canvas, clear of all four corners */
.bloom.centred{margin-top:30px;}
.bloom.centred .bloom-dots{justify-content:center;}

/* ---- 一筆畫 · the leaf, written in one stroke ------------------------------ */
.leaf{display:block;width:min(230px,62vw);height:auto;margin:0 auto;overflow:visible;}
.leaf.small{width:min(120px,34vw);margin:18px auto 6px;opacity:.9;}
.leaf-line{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  opacity:.82;stroke-dasharray:100;stroke-dashoffset:100;
  animation:writeLeaf 3.6s cubic-bezier(.32,0,.24,1) .25s forwards;}
@keyframes writeLeaf{to{stroke-dashoffset:0;}}
/* the leafhopper is not part of the leaf's line, so it lands after it */
.leaf-mark{fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;animation:fadeSoft 1.4s ease 3.5s forwards;}
.leaf.small .leaf-line{stroke-width:4;}
.leaf.small .leaf-mark{stroke-width:3;}
.zh-line{font-family:var(--serif);font-weight:300;font-size:13px;line-height:1.95;
  color:var(--dim);letter-spacing:.06em;margin-top:5px;}
.leaf-note{margin-top:26px;padding-top:18px;
  background-image:linear-gradient(90deg,transparent,var(--hair) 6%,var(--hair) 94%,transparent);
  background-size:100% 1px;background-repeat:no-repeat;background-position:top;}
.tea-facts{margin-top:14px;padding:16px 18px;background:rgba(42,39,33,.035);border-radius:3px;}

/* ---- the reveal: who called what, and which one was right ----------------- */
.answer-line{font-family:var(--serif);font-weight:300;font-size:15px;color:var(--dim);
  letter-spacing:.04em;margin-top:2px;}
/* the word itself is held back until the room has had a moment to look */
.answer-line b{font-weight:400;font-size:22px;color:var(--ink);margin-left:6px;
  display:inline-block;opacity:0;transform:translateY(8px) scale(.94);
  transition:opacity .7s ease, transform .7s var(--ease);}
.answer-line b.in{opacity:1;transform:none;}
.poll{margin-top:22px;}
.poll-row{margin-bottom:14px;padding:6px 10px;margin-left:-10px;margin-right:-10px;
  border-radius:4px;
  transition:opacity .9s ease, filter .9s ease, background .9s ease, transform .7s var(--ease);}
.poll-lab{display:flex;align-items:baseline;gap:8px;margin-bottom:1px;}
.poll-lab b{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--ink);
  display:inline-flex;align-items:center;gap:7px;transition:color .9s ease;}
.poll-lab u{margin-left:auto;text-decoration:none;font-family:var(--serif);font-weight:300;
  font-size:15px;color:var(--dim);transition:color .9s ease;}
.poll-lab.mine u{color:var(--seal);}
.poll-lab b svg{width:9px;height:9px;flex-shrink:0;overflow:visible;}
/* the jade tag only exists once the answer is out */
.poll-lab em{font-style:normal;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--jade);opacity:0;transform:translateX(-6px);
  transition:opacity .6s ease .15s, transform .6s var(--ease) .15s;}
.poll-bar{display:block;width:100%;height:auto;overflow:visible;}
.poll-clip{transform-box:fill-box;transform-origin:left center;
  transition:transform 1.4s var(--ease);}
.poll-bar path{transition:opacity .9s ease;}

/* ---- judgement ----------------------------------------------------------
   Everything is equal until the answer lands; then one row keeps its colour
   and the rest step back. Nothing is hidden — the losing calls are still
   legible, just clearly no longer the point.                              */
.poll.judged .poll-row:not(.right){opacity:.4;filter:grayscale(1);}
.poll.judged .poll-row:not(.right) .poll-lab b,
.poll.judged .poll-row:not(.right) .poll-lab u{color:var(--faint);}
.poll.judged .poll-row.right{background:rgba(107,144,128,.13);transform:translateY(-2px);}
.poll.judged .poll-row.right .poll-lab em{opacity:1;transform:none;}
.poll.judged .poll-row.right .poll-lab b{color:#3D6A56;}
.poll.judged .poll-row.right .poll-bar{animation:barPulse .8s var(--ease);}
@keyframes barPulse{0%{transform:scaleY(1);}38%{transform:scaleY(1.22);}100%{transform:scaleY(1);}}

/* the people, not the percentage */
.voters{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px;min-height:1px;}
.voter{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:var(--paper);font-size:9px;font-weight:500;
  opacity:0;transform:scale(.4);animation:voterIn .7s var(--ease) forwards;}
@keyframes voterIn{60%{transform:scale(1.14);}100%{opacity:1;transform:scale(1);}}
.voter.me{box-shadow:0 0 0 1.5px var(--paper),0 0 0 3px rgba(176,64,44,.6);}

.verdict{display:flex;align-items:center;gap:10px;margin-top:20px;padding:13px 16px;
  border-radius:3px;background:rgba(176,64,44,.08);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--seal);
  opacity:0;transform:translateY(12px);
  transition:opacity .7s ease, transform .7s var(--ease);}
.verdict.in{opacity:1;transform:none;}
.verdict.ok{background:rgba(107,144,128,.16);color:#3D6A56;}
.verdict.none{background:rgba(42,39,33,.05);color:var(--faint);}
.verdict svg{width:11px;height:11px;flex-shrink:0;overflow:visible;}
.verdict.ok svg path{fill:#3D6A56;}
.verdict u{margin-left:auto;text-decoration:none;font-family:var(--serif);font-weight:300;
  font-size:22px;letter-spacing:0;text-transform:none;}

/* the tea's name, arriving on the intro screen */
.intro-name{font-size:30px;margin-top:16px;}
.intro-zh{font-family:var(--serif);font-weight:300;font-size:16px;color:var(--dim);
  letter-spacing:.16em;margin-top:3px;}

/* ---- reveal / scorecard ---- */
.card{background:var(--card);border:none;border-radius:3px;padding:30px 26px 26px;
  max-width:400px;margin:0 auto;width:100%;
  box-shadow:0 1px 2px rgba(42,39,33,.05), 0 22px 60px -18px rgba(42,39,33,.22);}
.ink-row{margin-bottom:14px;}
.ink-lab{display:flex;align-items:baseline;gap:8px;margin-bottom:1px;}
.ink-lab b{font-family:var(--serif);font-weight:400;font-size:14px;color:var(--ink);letter-spacing:.02em;}
.ink-lab u{margin-left:auto;text-decoration:none;font-family:var(--serif);font-weight:300;
  font-size:13px;color:var(--ink);letter-spacing:.04em;}
.ink-bar{display:block;width:100%;height:auto;overflow:visible;}
.ink-you{font-size:11px;letter-spacing:.06em;color:var(--seal);margin-top:-2px;}
.ink-you.ok{color:var(--jade);}
.ink-clip{transform-box:fill-box;transform-origin:left center;transition:transform 2.2s var(--ease);}
.ink-seal{transition:opacity 1.2s ease;}
.ink-legend{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-top:10px;}
.ink-legend span{display:inline-flex;align-items:center;gap:7px;}
.ink-legend svg{height:9px;width:auto;overflow:visible;flex-shrink:0;}
.calls{display:flex;align-items:baseline;gap:6px;margin-top:14px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}
.calls b{font-family:var(--serif);font-weight:300;font-size:20px;color:var(--ink);letter-spacing:0;}
.earned{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:12px;}
.stamp{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  border:1px solid rgba(176,64,44,.34);color:var(--seal);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;}
.stamp svg{width:11px;height:11px;flex-shrink:0;overflow:visible;}
.earned .plus{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent);
  margin:22px 0 16px;}
.score-row{display:flex;justify-content:space-between;}
.score-row p{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}
.score-row .num{font-family:var(--serif);font-weight:300;font-size:34px;color:var(--ink);
  letter-spacing:0;text-transform:none;margin-top:2px;}
.note-box{background:rgba(42,39,33,.035);border-radius:3px;padding:14px 16px;margin-top:18px;}
.note-box p{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:6px;}
.note-box .nt{font-family:var(--serif);font-weight:300;font-style:italic;font-size:14px;
  color:var(--ink-soft);line-height:1.85;}
.brandline{display:flex;justify-content:space-between;align-items:center;margin-top:22px;}
.brandline span{font-size:9px;letter-spacing:.26em;color:var(--faint);}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;
  background:rgba(42,39,33,.05);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);}
.chip.won{background:rgba(107,144,128,.17);color:#3D6A56;}
.chip u{text-decoration:none;font-size:11px;opacity:.75;}

/* ---- leaderboard ---------------------------------------------------------
   Rank is a brushed numeral, not a medal. Movement since the last cup shows
   as a small vermillion or jade tick.                                       */
.board-list{margin-top:18px;}
.board-row{display:flex;align-items:center;gap:14px;padding:13px 2px;
  background-image:linear-gradient(90deg,transparent,var(--hair) 6%,var(--hair) 94%,transparent);
  background-size:100% 1px;background-repeat:no-repeat;background-position:bottom;
  opacity:0;transform:translateY(10px);
  animation:rowIn .9s var(--ease) forwards;}
@keyframes rowIn{to{opacity:1;transform:none;}}
.board-row:last-child{background-image:none;}
.board-row.me{background-color:rgba(194,145,63,.10);border-radius:3px;
  padding-left:10px;padding-right:10px;margin:0 -10px;}
.board-rank{font-family:var(--serif);font-weight:300;font-size:22px;color:var(--dim);
  width:26px;text-align:center;flex-shrink:0;}
.board-row.top .board-rank{color:var(--ink);}
.board-av{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;color:var(--paper);font-size:11px;font-weight:500;}
.board-name{flex:1;min-width:0;}
.board-name b{display:block;font-family:var(--serif);font-weight:400;font-size:16px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.board-name span{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin-top:2px;}
.board-pts{text-align:right;flex-shrink:0;}
.board-pts b{font-family:var(--serif);font-weight:300;font-size:22px;color:var(--ink);}
.board-pts span{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}
.move{font-size:10px;letter-spacing:.1em;}
.move.up{color:var(--jade);} .move.down{color:var(--seal);} .move.flat{color:var(--faint);}

/* ---- podium ---- */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin:26px 0 8px;}
.pod{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;max-width:120px;}
.pod .av{border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--paper);font-weight:500;}
.pod.p1 .av{width:66px;height:66px;font-size:20px;}
.pod.p2 .av,.pod.p3 .av{width:48px;height:48px;font-size:15px;}
.pod .nm{font-family:var(--serif);font-weight:400;font-size:14px;text-align:center;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.pod .pt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
.pod .plinth{width:100%;background:rgba(42,39,33,.06);border-radius:3px 3px 0 0;
  display:flex;align-items:flex-start;justify-content:center;padding-top:8px;
  font-family:var(--serif);font-weight:300;font-size:20px;color:var(--dim);}
.pod.p1 .plinth{height:86px;background:rgba(194,145,63,.22);color:var(--ink);}
.pod.p2 .plinth{height:60px;} .pod.p3 .plinth{height:44px;}
.trophy{width:74px;height:74px;margin:0 auto 4px;display:block;}
.trophy path,.trophy circle{fill:none;stroke:var(--gold);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;pathLength:100;
  animation:drawFig 2.6s cubic-bezier(.32,0,.24,1) .4s forwards;}

/* ---- summary rows / recommendations ---- */
.sum-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;
  background-image:linear-gradient(90deg,transparent,var(--hair) 12%,var(--hair) 88%,transparent);
  background-size:100% 1px;background-repeat:no-repeat;background-position:bottom;}
.sum-row:last-of-type{background-image:none;}
.sum-row .dotc{width:22px;height:22px;border-radius:50%;flex-shrink:0;opacity:.85;}
.sum-name{flex:1;margin-left:13px;min-width:0;}
.sum-name b{font-family:var(--serif);font-weight:400;font-size:15px;display:block;}
.sum-name span{font-size:10px;color:var(--faint);letter-spacing:.06em;}
.sum-nums{text-align:right;font-size:11px;color:var(--dim);line-height:1.7;letter-spacing:.04em;flex-shrink:0;}
.sum-nums b{font-family:var(--serif);font-weight:300;font-size:17px;color:var(--ink);}
.rec-why{font-family:var(--serif);font-weight:300;font-style:italic;font-size:15px;line-height:1.9;
  color:var(--ink-soft);background:rgba(194,145,63,.10);border-radius:3px;
  padding:16px 18px;margin:20px 0 4px;}
.rec-body{font-size:13px;line-height:1.9;color:var(--dim);font-weight:300;margin-top:12px;}
.alt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
  padding:15px 2px;background:none;border:none;font-family:var(--sans);
  background-image:linear-gradient(90deg,transparent,var(--hair) 6%,var(--hair) 94%,transparent);
  background-size:100% 1px;background-repeat:no-repeat;background-position:bottom;}
.alt:last-child{background-image:none;}
.alt:active{opacity:.6;}
.alt .dotc{width:20px;height:20px;border-radius:50%;flex-shrink:0;opacity:.88;}
.alt .body{flex:1;min-width:0;}
.alt .body b{display:block;font-family:var(--serif);font-weight:400;font-size:15px;color:var(--ink);}
.alt .body span{display:block;font-size:11px;color:var(--dim);line-height:1.65;margin-top:3px;font-weight:300;}
.alt .go{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);flex-shrink:0;}

/* ---- choosing what the recommendation reads from -------------------------
   Sits outside the card on purpose: it is a control, and the card is a thing
   that gets photographed and walks out of the building.                    */
.rec-pick{max-width:400px;margin:22px auto 0;width:100%;}
.rec-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.rec-chip{display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 14px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--ink-soft);
  font-family:var(--sans);font-size:12px;font-weight:400;letter-spacing:.04em;
  transition:background .35s ease, color .35s ease, border-color .35s ease;}
.rec-chip .dotc{width:11px;height:11px;border-radius:50%;flex:none;opacity:.9;}
.rec-chip:active{opacity:.65;}
.rec-chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.rec-chip.on .dotc{box-shadow:inset 0 0 0 1px rgba(244,241,231,.5);}

/* ---- avatar picker (join) ---- */
.av-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.av-opt{width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;padding:0;
  opacity:.34;transform:scale(.88);transition:opacity .35s ease, transform .35s var(--ease);}
.av-opt.on{opacity:1;transform:scale(1);box-shadow:0 0 0 1.5px var(--paper),0 0 0 3px rgba(42,39,33,.28);}

/* ---- host ---------------------------------------------------------------
   Denser and plainer than the guest app. It is a control surface, not an
   experience: everything the host needs must be readable at a glance while
   they are talking to a table of people.                                   */
.host-wrap{max-width:560px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;
  padding:calc(20px + env(safe-area-inset-top,0px)) 20px calc(16px + env(safe-area-inset-bottom,0px));}
.host-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:12px;}
.host-head{display:flex;align-items:baseline;gap:10px;padding-bottom:12px;
  background-image:linear-gradient(90deg,var(--hair),var(--hair));
  background-size:100% 1px;background-repeat:no-repeat;background-position:bottom;}
.host-head b{font-family:var(--serif);font-weight:400;font-size:17px;}
.host-head .code{font-family:var(--serif);font-weight:300;font-size:22px;
  letter-spacing:.22em;color:var(--seal);}
/* ---- a guest's phone, live, at the top of the host's ----------------------
   The most reliable answer to "where are they right now" is their screen. So
   the host gets one, mirrored and scaled — the same app, watching the same
   room, taking no seat and writing nothing. --s is set from JS to whatever
   height this particular phone can spare.                                  */
.phone-wrap{--s:.5;position:relative;margin:0 auto;flex:none;
  width:calc(390px * var(--s));height:calc(800px * var(--s));
  border:1px solid var(--line);border-radius:calc(30px * var(--s));overflow:hidden;
  background:var(--paper);box-shadow:0 4px 26px rgba(42,39,33,.10);}
.phone-wrap iframe{width:390px;height:800px;border:0;display:block;
  transform:scale(var(--s));transform-origin:top left;pointer-events:none;}

.host-now{margin-top:16px;text-align:center;}
.host-now .st{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);}
.host-now h2{font-size:25px;margin:2px 0 0;}
.host-now .of{font-size:12px;color:var(--dim);letter-spacing:.06em;margin-top:3px;}
.host-pulse{margin-top:10px;text-align:center;font-size:11.5px;line-height:1.8;
  color:var(--faint);letter-spacing:.03em;}
.host-pulse b{font-family:var(--serif);font-weight:300;font-size:16px;color:var(--ink);}
.host-pulse .faintline{color:var(--line);}

/* the crib is folded shut: the host asked for less on screen, and this is the
   one thing they can ask for again in a single tap */
.crib-fold{margin-top:16px;border-radius:3px;background:rgba(42,39,33,.04);}
.crib-fold > summary{list-style:none;cursor:pointer;padding:13px 16px;
  display:flex;align-items:baseline;gap:9px;}
.crib-fold > summary::-webkit-details-marker{display:none;}
.crib-fold > summary span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);}
.crib-fold > summary i{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:12px;color:var(--faint);}
.crib-fold > summary::after{content:'+';margin-left:auto;color:var(--faint);font-size:15px;}
.crib-fold[open] > summary::after{content:'−';}
.crib-fold > div{padding:0 16px 16px;}
.crib-fold .ttl{font-family:var(--serif);font-weight:400;font-size:18px;}
.crib-fold .zh{font-family:var(--serif);font-weight:300;font-size:13px;color:var(--dim);letter-spacing:.14em;}
.crib-fold .meta{font-size:11px;color:var(--dim);margin-top:4px;letter-spacing:.04em;}
.crib-fold .say{font-family:var(--serif);font-weight:300;font-style:italic;font-size:14px;
  line-height:1.85;color:var(--ink-soft);margin-top:12px;}

/* Auto: on by default, and one tap from off when a cup deserves a longer
   conversation than the room's own patience */
.auto-pill{margin-left:auto;padding:5px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--faint);
  font-family:var(--sans);font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;transition:background .3s ease,color .3s ease,border-color .3s ease;}
.auto-pill.on{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.auto-pill:active{transform:scale(.94);}

/* how far through the evening we are — the last thing on the screen, because
   it is the thing a host glances at rather than reads */
.host-prog{height:2px;margin-top:12px;background:var(--hair);border-radius:2px;overflow:hidden;}
.host-prog i{display:block;height:100%;width:0;background:var(--ink);opacity:.55;
  transition:width .7s var(--ease);}
.host-prog-lab{margin-top:7px;text-align:center;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);}
.host-prog-lab b{color:var(--jade);font-weight:500;}
/* the big button says so too, so the host does not have to look twice */
.host-bar .btn.primary.ready{box-shadow:0 0 0 4px rgba(107,144,128,.34);}

.crib-answers{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.crib-answers span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--card);border-radius:999px;padding:6px 11px;color:var(--ink-soft);}
.crib-answers span.now{background:var(--ink);color:var(--paper);}
.host-bar-wrap{padding-top:12px;
  background-image:linear-gradient(90deg,var(--hair),var(--hair));
  background-size:100% 1px;background-repeat:no-repeat;background-position:top;}
/* The bar is the whole of the navigation, and it is read at arm's length in a
   dim room by someone mid-sentence — so it is sized for a glance and a thumb,
   not for the layout. Back stays deliberately quiet: it is the rarer move. */
.host-bar{display:flex;gap:10px;align-items:stretch;}
.host-bar .btn{padding:22px 14px;font-size:17px;letter-spacing:.06em;border-radius:999px;}
.host-bar .btn.primary{font-weight:500;}
.host-bar .btn.back{flex:0 0 84px;font-size:13px;letter-spacing:.1em;color:var(--dim);}
.roster{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;}
.rp{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;
  background:rgba(42,39,33,.05);font-size:12px;
  animation:rowIn .6s var(--ease) both;}
.rp i{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--paper);font-size:10px;font-weight:500;font-style:normal;}
.join-url{font-family:var(--serif);font-weight:300;font-size:16px;letter-spacing:.04em;
  word-break:break-all;color:var(--dim);text-align:center;margin-top:12px;}
/* big enough to scan from the far side of a table, and vector, so it prints */
.qr-card{width:min(240px,62vw);margin:12px auto 0;padding:14px;border-radius:4px;
  background:var(--card);
  box-shadow:0 1px 2px rgba(42,39,33,.05), 0 16px 40px -18px rgba(42,39,33,.28);}
.qr-card svg{display:block;width:100%;height:auto;}
.big-code{font-family:var(--serif);font-weight:300;font-size:64px;letter-spacing:.28em;
  text-align:center;margin:10px 0 2px;color:var(--ink);}
/* the flight is an ordered list, edited in place */
/* how many at the table — asked before the flight, because the answer picks
   the flight's length. Two answers, not a number field: the host knows which
   side of six they are on long before they know the exact count. */
.size-pick{display:flex;gap:9px;}
.size-pick button{flex:1;padding:12px 13px;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:3px;background:transparent;
  font-family:var(--sans);font-size:11.5px;color:var(--dim);line-height:1.4;
  transition:background .3s ease, border-color .3s ease;}
.size-pick button b{display:block;font-family:var(--serif);font-size:15px;
  font-weight:300;color:var(--ink-soft);margin-bottom:3px;}
.size-pick button.on{background:rgba(42,39,33,.06);border-color:var(--ink-soft);}
.size-pick button.on b{color:var(--ink);}

/* the table turned out to be on the other side of six from what the flight
   was set for. Only ever shown in the lobby, where the fix is still free. */
.size-nudge{display:block;width:100%;margin:4px 0 20px;padding:13px 15px;text-align:left;
  border:1px solid rgba(176,64,44,.28);border-radius:3px;background:rgba(176,64,44,.05);
  font-family:var(--sans);font-size:12px;color:var(--ink-soft);line-height:1.5;
  cursor:pointer;transition:background .3s ease;}
.size-nudge:hover{background:rgba(176,64,44,.09);}
.size-nudge b{display:block;font-weight:500;color:var(--seal);margin-bottom:3px;}

.fp-row{display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:3px;
  background:rgba(42,39,33,.05);margin-bottom:7px;}
.fp-row.out{background:transparent;border:1px solid var(--line);}
.fp-row .sw{width:14px;height:14px;border-radius:50%;flex-shrink:0;margin-right:2px;}
.fp-row .nm{flex:1;font-family:var(--serif);font-size:14px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fp-cup{width:15px;flex-shrink:0;font-family:var(--serif);font-weight:300;font-size:16px;
  color:var(--dim);text-align:center;}
.fp-ic{width:28px;height:28px;flex-shrink:0;border:none;border-radius:50%;cursor:pointer;
  background:rgba(42,39,33,.06);color:var(--ink-soft);font-size:15px;line-height:1;
  font-family:var(--sans);transition:opacity .3s ease, transform .2s var(--ease);}
.fp-ic:active{transform:scale(.9);}
.fp-ic[disabled]{opacity:.22;pointer-events:none;}
.fp-ic.rm{background:transparent;color:var(--faint);font-size:19px;}
.fp-ic.add{width:auto;padding:0 15px;border-radius:999px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;background:var(--ink);color:var(--paper);}

/* ---- misc ---- */
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(-10px);
  top:calc(14px + env(safe-area-inset-top,0px));z-index:98;
  padding:9px 18px;border-radius:999px;background:rgba(42,39,33,.9);color:var(--paper);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .8s ease, transform .8s var(--ease);}
.toast.in{opacity:1;transform:translateX(-50%) translateY(0);}
.offline{position:fixed;left:0;right:0;bottom:0;z-index:97;text-align:center;
  padding:8px calc(8px + env(safe-area-inset-bottom,0px));background:var(--seal);color:var(--paper);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;display:none;}
.offline.on{display:block;}
.centered{text-align:center;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-delay:0s !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  .figure path,.trophy path,.trophy circle,.quad-ic path{stroke-dashoffset:0;}
  .quad-mark{animation:none;}
}

/* ---- the host's guide ------------------------------------------------------
   A host is usually reading this with one hand while pouring with the other,
   so it is short, ordered the way the night runs, and it can be shut with a
   thumb from anywhere on the sheet.                                          */
.guide-open{width:34px;height:34px;flex:none;margin-left:12px;padding:0;
  border:1px solid var(--line);border-radius:50%;background:transparent;
  color:var(--dim);font-family:var(--serif);font-weight:400;font-size:16px;line-height:1;
  cursor:pointer;transition:background .3s ease,color .3s ease,transform .3s var(--ease);}
.guide-open:hover{background:rgba(42,39,33,.05);color:var(--ink);}
.guide-open:active{transform:scale(.92);}
.guide-nudge{display:block;width:100%;margin-top:18px;padding:13px 16px;text-align:left;
  border:1px solid var(--line);border-radius:3px;background:rgba(42,39,33,.03);
  font-family:var(--sans);font-size:13px;color:var(--ink-soft);cursor:pointer;
  transition:background .3s ease;}
.guide-nudge:hover{background:rgba(42,39,33,.06);}
.guide-nudge b{font-weight:500;color:var(--ink);}
.guide-nudge span{color:var(--dim);}

.guide{position:fixed;inset:0;z-index:80;display:none;}
.guide.on{display:block;}
.guide-veil{position:absolute;inset:0;background:rgba(42,39,33,.42);
  opacity:0;transition:opacity .45s ease;}
.guide.on .guide-veil{opacity:1;}
.guide-card{position:absolute;left:0;right:0;bottom:0;max-height:92dvh;
  max-width:560px;margin:0 auto;display:flex;flex-direction:column;
  background:var(--card);border-radius:14px 14px 0 0;
  box-shadow:0 -8px 40px rgba(42,39,33,.22);
  transform:translateY(100%);transition:transform .5s var(--ease);}
.guide.on .guide-card{transform:none;}
.guide-head{display:flex;align-items:center;gap:12px;flex:none;
  padding:22px 24px 14px;border-bottom:1px solid var(--hair);}
.guide-head h2{margin:0;font-size:21px;}
.guide-close{margin-left:auto;width:34px;height:34px;flex:none;padding:0;
  border:1px solid var(--line);border-radius:50%;background:transparent;
  color:var(--dim);font-size:17px;line-height:1;cursor:pointer;}
.guide-close:active{transform:scale(.92);}
.guide-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:6px 24px calc(20px + env(safe-area-inset-bottom,0px));}
.guide-sec{padding:20px 0;border-bottom:1px solid var(--hair);}
.guide-sec:last-child{border-bottom:none;}
.guide-sec > .tiny{margin-bottom:10px;}
.guide-sec h3{font-family:var(--serif);font-weight:400;font-size:17px;margin-bottom:8px;}
.guide-sec p{font-size:14px;line-height:1.8;color:var(--ink-soft);font-weight:300;}
.guide-sec p + p{margin-top:10px;}
.guide-step{display:flex;gap:13px;margin-top:14px;}
.guide-step:first-of-type{margin-top:4px;}
.guide-step .n{flex:none;width:23px;height:23px;border-radius:50%;margin-top:2px;
  background:rgba(42,39,33,.07);color:var(--ink-soft);
  font-family:var(--serif);font-size:12px;display:flex;align-items:center;justify-content:center;}
.guide-step .tx{font-size:14px;line-height:1.75;color:var(--ink-soft);font-weight:300;}
.guide-step .tx b{color:var(--ink);font-weight:500;}
.guide-foot{flex:none;padding:14px 24px calc(20px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--hair);}