/* Alaus pylimas. A glass is a clipped box: levels are shares of its height, so the line and the beer always agree. */
.pour-panel{--brass:#e6b95c;--beer-a:#ffcf5a;--beer-b:#d9860f;--foam:#fff6e0;display:grid;gap:10px;background:radial-gradient(ellipse at 50% 0,#2d1b0e,#150e08 70%)}
.pour-head{display:flex;align-items:center;gap:12px}
.pour-head>div:first-child{flex:1;min-width:0}
.pour-head h1{margin:2px 0 0;font:700 clamp(26px,5vw,40px)/1.05 Georgia,"Times New Roman",serif}
.pour-head h1 em{color:var(--brass);font-style:italic}
.pour-track{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.pour-track li{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid #ffffff2e;background:#ffffff10;color:#d8c39c;font:800 12px/1 system-ui;transition:background .25s,transform .25s,border-color .25s}
.pour-track li.golden{border-color:#f5d36c88;color:#ffe08a;background:radial-gradient(circle at 35% 30%,#ffe9a066,#a6761a33)}
.pour-track li.current{transform:scale(1.15);border-color:var(--brass);box-shadow:0 0 12px #e6b95c88;color:#fff}
.pour-track li.ok{background:#7cc77066;border-color:#9ad08a}
.pour-track li.perfect{background:#ffd34fcc;border-color:#fff1a8;color:#3a2400}
.pour-track li.spill,.pour-track li.miss{background:#e8604c99;border-color:#ff9a87}
.pour-clock{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;border:2px solid #b7894a;background:#1b110a;color:#ffe9bd;font:800 21px/1 Georgia,serif;font-variant-numeric:tabular-nums}
.pour-clock.urgent{border-color:#ff7b5e;color:#ffb199;animation:pour-urgent .45s ease-in-out infinite alternate}

/* The bar: a tap, the viewer's glass and the line. */
.pour-stage{position:relative;height:clamp(250px,46dvh,420px);border-radius:16px;overflow:hidden;border:1px solid #7a5530;background:
  linear-gradient(180deg,transparent 0 86%,#5a3519 86%,#7b4c25 89%,#3c220f 100%),
  radial-gradient(ellipse at 50% 30%,#3b2512,#120b06 75%);box-shadow:inset 0 0 50px #000a,0 10px 30px #0007;user-select:none;-webkit-user-select:none}
.pour-wrap{--surface:0;--flow:0;--line:.8;position:absolute;left:50%;bottom:13%;height:60%;aspect-ratio:.62;transform:translateX(-50%)}
.pour-wrap[data-kind=mug]{aspect-ratio:.7}
.pour-wrap[data-kind=pilsner]{aspect-ratio:.5}
.pour-wrap[data-kind=weizen]{aspect-ratio:.44}
.pour-wrap[data-kind=tulip]{aspect-ratio:.6}
.pour-glass{--liquid:0;--head:0;position:absolute;inset:0;filter:drop-shadow(0 0 .6px #fffd) drop-shadow(0 0 1.5px #ffffff90) drop-shadow(0 8px 10px #000a)}
.pour-glass.is-golden{filter:drop-shadow(0 0 1px #ffe9a0) drop-shadow(0 0 6px #f5c84cbb) drop-shadow(0 8px 10px #000a)}
.pour-inner{position:absolute;inset:0;overflow:hidden;clip-path:var(--clip);background:linear-gradient(90deg,#ffffff3a,#ffffff10 16%,#ffffff06 70%,#ffffff2a)}
.pour-glass.is-golden .pour-inner{background:linear-gradient(90deg,#ffe39255,#ffe39218 16%,#ffe3920c 70%,#ffe39244)}
.pour-beer{position:absolute;left:0;right:0;bottom:0;height:calc(var(--liquid) * 100%);background:
  radial-gradient(circle,#fff7 0 1.2px,transparent 1.6px) 0 0/14px 22px,
  radial-gradient(circle,#fff5 0 1px,transparent 1.4px) 7px 9px/18px 26px,
  linear-gradient(90deg,#ffffff30,transparent 22%,transparent 70%,#ffffff22),
  linear-gradient(var(--beer-a),var(--beer-b));animation:pour-bubbles 1.6s linear infinite}
.pour-foam{position:absolute;left:0;right:0;bottom:calc(var(--liquid) * 100%);height:calc(var(--head) * 100%);background:
  radial-gradient(circle at 20% 0,var(--foam) 0 30%,transparent 31%) 0 -4px/16px 10px repeat-x,
  linear-gradient(#fffdf6,var(--foam) 60%,#f3dcae)}
.pour-foam::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(transparent,#e7b75566)}
.pour-glass[data-mode=pouring] .pour-foam{animation:pour-churn .22s ease-in-out infinite alternate}
.pour-glass::before{content:"";position:absolute;z-index:1;left:calc(var(--rim,0%) - 4%);right:calc(var(--rim,0%) - 4%);top:-8%;height:10%;border-radius:50% 50% 35% 35%/80% 80% 30% 30%;background:radial-gradient(circle at 30% 40%,#fff 0 18%,transparent 19%) 0 0/22% 70%,linear-gradient(#fffdf6,var(--foam));transform:scaleY(0);transform-origin:50% 100%;opacity:0;transition:transform .3s cubic-bezier(.2,1.5,.4,1),opacity .15s;pointer-events:none}
.pour-glass.is-spilled::before{transform:scaleY(1);opacity:1}
.pour-drip{position:absolute;top:-1%;left:3%;width:11%;height:0;border-radius:0 0 99px 99px;background:linear-gradient(var(--foam),#f3dcae);opacity:0;pointer-events:none}
.pour-drip.right{left:auto;right:3%}
.pour-glass.is-spilled .pour-drip{opacity:1;animation:pour-drip 1.4s cubic-bezier(.3,.6,.4,1) forwards}
.pour-glass.is-spilled .pour-drip.right{animation-delay:.15s}

.pour-tap{position:absolute;left:50%;bottom:calc(100% + 4%);width:46%;height:24%;transform:translateX(-50%)}
.pour-tap::before{content:"";position:absolute;left:-60%;right:-60%;top:0;height:22%;border-radius:6px;background:linear-gradient(#f7dc9a,#b98a3a 60%,#7a5520);box-shadow:0 3px 6px #000a}
.pour-spout{position:absolute;left:38%;width:24%;top:18%;bottom:0;border-radius:0 0 6px 6px;background:linear-gradient(90deg,#8f6526,#f3d58f 40%,#b88a3c 80%,#6e4a17)}
.pour-handle{position:absolute;left:40%;width:20%;bottom:82%;height:120%;border-radius:8px 8px 3px 3px;background:linear-gradient(90deg,#3a1f0b,#7a4a20 45%,#3a1f0b);transform-origin:50% 100%;transition:transform .18s}
.pour-wrap[data-mode=pouring] .pour-handle{transform:rotate(-28deg)}
.pour-jet{position:absolute;left:50%;top:-4%;bottom:calc(var(--surface) * 100%);width:calc(4px + var(--flow) * 6px);transform:translateX(-50%);border-radius:3px;background:linear-gradient(90deg,#c27a10,#ffd77a 45%,#f0a72b);opacity:0;transition:opacity .12s}
.pour-wrap[data-mode=pouring] .pour-jet{opacity:.95}
.pour-line{position:absolute;left:-16%;right:-16%;bottom:calc(var(--line) * 100%);height:0;border-top:2px dashed #fffbe6;box-shadow:0 0 6px #fff6;pointer-events:none}
.pour-line::before{content:"";position:absolute;left:16%;right:16%;top:-5px;height:7px;background:#ffe08a33;border-radius:2px}
.pour-line span{position:absolute;right:0;bottom:3px;transform:translateX(100%);padding:0 0 0 4px;font:800 10px/1 system-ui;letter-spacing:.12em;color:#fff3c7}
.pour-wrap.is-near .pour-line{border-top-color:#ffd34f;box-shadow:0 0 10px #ffd34fcc}
.pour-wrap::after{content:"";position:absolute;left:-30%;right:-30%;bottom:-6%;height:9%;border-radius:50%;background:radial-gradient(ellipse,#fff6e0ee,#f3dcae99 45%,transparent 70%);opacity:0;transform:scale(.3);transition:opacity .5s .5s,transform .8s .5s}
.pour-wrap:has(.is-spilled)::after{opacity:1;transform:scale(1)}
.pour-glass-name{position:absolute;left:12px;bottom:4px;margin:0;color:#f0d9ad;font:700 12px/1.4 system-ui;letter-spacing:.06em;text-transform:uppercase;opacity:.85}

.pour-banner{position:absolute;left:50%;top:8%;display:grid;gap:2px;justify-items:center;padding:8px 18px;border-radius:14px;background:#140c06e0;border:1px solid #c79f5488;transform:translate(-50%,-20px) scale(.9);opacity:0;pointer-events:none;transition:opacity .2s,transform .25s}
.pour-banner.show{opacity:1;transform:translate(-50%,0)}
.pour-banner b{font:900 clamp(18px,3.4vw,26px)/1 Georgia,serif;color:#ffe9bd;letter-spacing:.04em}
.pour-banner span{font:600 12px/1.2 system-ui;color:#d9c093;text-transform:uppercase;letter-spacing:.1em}
.pour-banner.golden{border-color:#ffe08a;background:linear-gradient(135deg,#3a2606f0,#6b4a10f0);box-shadow:0 0 30px #f5c84c88}
.pour-banner.golden b{color:#ffe08a;animation:pour-shine 1.1s ease-in-out infinite alternate}
.pour-banner.nervous{border-color:#ff9a7b;background:#3a160ef0;box-shadow:0 0 24px #ff7b5e77}
.pour-banner.nervous b{color:#ffc2ad}
.pour-banner.go{border-color:#8fe38a;background:#123d12ee;box-shadow:0 0 30px #6fe36aaa}
.pour-banner.go b{color:#d6ffcf;font-size:clamp(28px,6vw,44px)}
.pour-stamp{position:absolute;right:8%;top:22%;display:grid;justify-items:center;padding:6px 14px;border:3px solid currentColor;border-radius:12px;color:#ffe9bd;background:#140c06cc;transform:rotate(-8deg) scale(.4);opacity:0;pointer-events:none}
.pour-stamp.show{opacity:1;transform:rotate(-8deg) scale(1);transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .15s}
.pour-stamp b{font:900 clamp(18px,3.2vw,28px)/1 Georgia,serif;letter-spacing:.04em}
.pour-stamp span{font:800 clamp(16px,2.6vw,22px)/1.1 ui-monospace,monospace}
.pour-stamp.perfect{color:#ffd34f;box-shadow:0 0 30px #ffd34f99}
.pour-stamp.good{color:#a8e59a}
.pour-stamp.spill,.pour-stamp.miss{color:#ff8e7c}

/* Everybody's glass. */
.pour-board{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.pour-chip{display:flex;align-items:center;gap:6px;min-width:0;padding:4px 10px 4px 6px;border-radius:99px;border:2px solid transparent;background:#ffffff0c;transition:background .25s,border-color .25s}
.pour-place{font-style:normal;flex:0 0 auto;min-width:1.6em;text-align:right;font:800 13px/1 ui-monospace,monospace;color:#d8c39c;font-variant-numeric:tabular-nums}
.pour-chip.is-me .pour-place{color:#1b1204;background:var(--brass);border-radius:6px;padding:3px 4px}
.pour-chip .pour-mini{position:relative;inset:auto;flex:0 0 auto;width:17px;height:28px}
.pour-chip img,.pour-chip>span{flex:0 0 auto;width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid #c79f54aa;background:#2b1b0e}
.pour-chip b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#f1dcb4}
.pour-chip b em{color:var(--brass);font-style:normal;font-size:10px}
.pour-chip output{margin-left:auto;font:800 15px/1 ui-monospace,monospace;color:#ffe9bd;font-variant-numeric:tabular-nums}
.pour-chip-last{font:700 11px/1 system-ui;font-style:normal;color:#cdb68d;white-space:nowrap}
.pour-chip-last.perfect{color:#ffd34f}
.pour-chip-last.good{color:#a8e59a}
.pour-chip-last.spill,.pour-chip-last.miss{color:#ff8e7c}
.pour-chip-last.pouring{color:#ffe08a;animation:pour-urgent .4s ease-in-out infinite alternate}
.pour-chip.is-me{background:#e6b95c2e;border:2px solid var(--brass);box-shadow:0 0 14px #e6b95c55}
.pour-chip.is-leading b::after{content:" ★";color:var(--brass)}

/* The tap handle the viewer holds. */
.pour-controls{display:grid;gap:8px}
.pour-button{min-height:72px;padding:8px 14px;border:0;border-radius:16px;display:grid;gap:2px;place-items:center;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;color:#2a1403;background:linear-gradient(#ffd77a,#ee9d2f);box-shadow:0 6px 0 #9a5d12,0 12px 24px #0008;transition:transform .08s,box-shadow .08s,filter .2s}
.pour-button strong{font:900 22px/1 Georgia,serif;letter-spacing:.06em}
.pour-button small{font:600 12px/1.2 system-ui;color:#5b3a12}
.pour-button.is-ready{animation:pour-ready .7s ease-in-out infinite alternate}
.pour-button.is-held{transform:translateY(4px);box-shadow:0 2px 0 #9a5d12,0 0 30px #ffcf6acc;animation:none}
.pour-button.is-done,.pour-button[aria-disabled=true]:not(.is-held){filter:grayscale(.6) brightness(.7);cursor:default;box-shadow:0 3px 0 #5b3a12;animation:none}
.pour-button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.pour-feedback{margin:0;min-height:2.4em;color:#cdb68d;font-size:13px;line-height:1.35;text-align:center}

/* Wide screens: the bar on the left, everything you read and press on the right. */
@media(min-width:900px){
  .pour-panel{grid-template-columns:minmax(0,1.15fr) minmax(260px,1fr);grid-template-rows:auto auto auto 1fr;grid-template-areas:"pause pause" "stage head" "stage controls" "stage board";align-items:start;column-gap:18px}
  .pour-panel>.pour-pause{grid-area:pause}
  .pour-panel>.pour-head{grid-area:head}
  .pour-panel>.pour-stage{grid-area:stage;height:clamp(320px,60dvh,560px)}
  .pour-panel>.pour-controls{grid-area:controls}
  .pour-panel>.pour-board{grid-area:board;flex-direction:column;flex-wrap:nowrap}
  .pour-button{min-height:104px}
}
@keyframes pour-bubbles{from{background-position:0 0,7px 9px,0 0,0 0}to{background-position:0 -44px,7px -43px,0 0,0 0}}
@keyframes pour-churn{from{transform:translateY(0)}to{transform:translateY(-1.5px)}}
@keyframes pour-drip{0%{height:0}35%{height:28%}100%{height:62%}}
@keyframes pour-urgent{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes pour-ready{from{box-shadow:0 6px 0 #9a5d12,0 0 6px #ffcf6a55}to{box-shadow:0 6px 0 #9a5d12,0 0 26px #ffcf6acc}}
@keyframes pour-shine{from{text-shadow:0 0 4px #ffe08a66}to{text-shadow:0 0 16px #ffe08a}}
@media(max-width:560px){.pour-track li{width:24px;height:24px}.pour-clock{width:44px;height:44px;font-size:19px}}
@media(prefers-reduced-motion:reduce){.pour-beer,.pour-glass[data-mode=pouring] .pour-foam,.pour-clock.urgent,.pour-button.is-ready,.pour-chip-last.pouring,.pour-banner.golden b{animation:none}.pour-glass.is-spilled .pour-drip{animation:none;height:50%}.pour-stamp.show,.pour-banner,.pour-handle{transition:none}}

/* Practice page against bots (/?pour-preview). */
.pour-practice{display:grid;gap:14px;max-width:760px;margin:0 auto}
.pour-practice-setup{display:grid;gap:12px;padding:18px;border:1px solid #7a5530;border-radius:16px;background:#1b110acc}
.pour-practice-setup h1{margin:0;font:700 clamp(26px,5vw,40px)/1.05 Georgia,serif}
.pour-practice-setup h1 em{color:#e6b95c;font-style:italic}
.pour-practice-setup p{margin:0;color:#d9c093}
.pour-practice-setup .pour-options{display:flex;flex-wrap:wrap;gap:10px}
.pour-practice-setup label{display:grid;gap:4px;font:600 12px/1.2 system-ui;color:#e9d3a8}
.pour-practice-setup select{min-height:40px;padding:4px 8px;border-radius:10px;border:1px solid #7a5530;background:#120b06;color:#ffe9bd;font:600 14px system-ui}
.pour-practice-actions{display:flex;flex-wrap:wrap;gap:8px}
.pour-practice-note{margin:0;color:#a58a63;font-size:12px;text-align:center}
.pour-practice-results{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.pour-practice-results li{display:grid;grid-template-columns:28px 30px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:#ffffff0c;color:#f1dcb4}
.pour-practice-results li img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.pour-practice-results li.loser{background:#8c2b2038;border:1px solid #d8493a55}
.pour-practice-results li em{font-style:normal;font-weight:800;color:#a8e59a}
.pour-practice-results li.loser em{color:#ff8e7c}
.pour-practice-pause{display:flex;justify-content:flex-end}
.pour-practice.is-playing{max-width:1100px}
@media (orientation:landscape) and (max-height:650px) and (max-width:1400px){
  body.pour-practice-page.game-screen .pour-practice{gap:0}
  body.pour-practice-page.game-screen .pour-practice-note{display:none}
  body.pour-practice-page.game-screen .pour-panel{padding:6px 64px 4px max(14px,env(safe-area-inset-left));border:0;border-radius:0;margin:0}
  body.pour-practice-page.game-screen .pour-practice-pause{position:fixed;z-index:44;right:max(8px,env(safe-area-inset-right));top:8px}
  body.pour-practice-page.game-screen .pour-practice-pause .button{width:48px;min-width:0;min-height:44px;padding:0;font-size:0}
  body.pour-practice-page.game-screen .pour-practice-pause .button::before{content:"Ⅱ";font-size:18px}
  body.pour-practice-page.game-screen .pour-practice-pause .button.is-paused::before{content:"▶"}
}