/* Po kuriuo bokalu?. The host stands behind the table; mugs are placed by slot, a passing mug moves in front or behind. */
.cups-panel{--brass:#e6b95c;--right:#5fd36b;--wrong:#ff6a55;display:grid;gap:10px;background:radial-gradient(ellipse at 50% 0,#2d1b0e,#150e08 70%)}
.cups-head{display:flex;align-items:center;gap:12px}
.cups-head>div:first-child{flex:1;min-width:0}
.cups-head h1{margin:2px 0 0;font:700 clamp(26px,5vw,40px)/1.05 Georgia,"Times New Roman",serif}
.cups-head h1 em{color:var(--brass);font-style:italic}
.cups-track{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.cups-track li{display:grid;place-items:center;width:26px;height:26px;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}
.cups-track li.current{transform:scale(1.15);border-color:var(--brass);box-shadow:0 0 12px #e6b95c88;color:#fff}
.cups-track li.overtime{border-color:#ff9a6a99;color:#ffb38a}
.cups-track li.done{background:#e6b95c55;border-color:#e6b95c99;color:#1b1204}

.cups-stage{position:relative;height:clamp(250px,46dvh,440px);border-radius:16px;overflow:hidden;border:1px solid #7a5530;background:radial-gradient(ellipse at 50% 15%,#3b2512,#120b06 75%);box-shadow:inset 0 0 50px #000a,0 10px 30px #0007;user-select:none;-webkit-user-select:none}
.cups-host{position:absolute;z-index:0;left:50%;bottom:27%;height:71%;aspect-ratio:2/3;transform:translateX(-50%);background:no-repeat 0 0/400% 400%;filter:drop-shadow(0 8px 12px #000a);pointer-events:none}
.cups-bubble{position:absolute;z-index:3;right:3%;top:5%;max-width:34%;padding:8px 12px;border-radius:14px 14px 14px 4px;background:#fff6e3;color:#2a1708;box-shadow:0 8px 24px #0009;pointer-events:none}
.cups-bubble p{margin:0;font:700 clamp(13px,2vw,17px)/1.25 Georgia,serif;text-wrap:balance}
.cups-bubble.pop{animation:cups-pop .3s cubic-bezier(.2,1.5,.4,1)}
.cups-clock{position:absolute;z-index:3;left:3%;top:5%;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}
.cups-clock[hidden]{display:none}
.cups-clock.urgent{border-color:#ff7b5e;color:#ffb199;animation:cups-urgent .45s ease-in-out infinite alternate}

/* The table and the mugs. */
.cups-table{position:absolute;z-index:1;left:0;right:0;bottom:0;height:42%;background:linear-gradient(#8a5a2c,#6b4220 18%,#4a2b13 70%,#2e1a0b);box-shadow:0 -3px 0 #a4723f inset,0 -10px 30px #0008}
.cups-row{position:absolute;left:6%;right:6%;top:-34%;bottom:0}
.cups-cup{--lift:0;--depth:0;position:absolute;bottom:28%;width:min(22%,calc(70% / var(--n,3)) + 6%);aspect-ratio:100/120;padding:0;border:0;background:none;cursor:default;touch-action:none;transform:translateX(-50%) translateY(calc(var(--depth) * 9%)) scale(calc(1 + var(--depth) * .08));-webkit-tap-highlight-color:transparent}
.cups-cup svg{display:block;width:100%;height:100%;filter:drop-shadow(0 6px 6px #000a);transform:translateY(calc(var(--lift) * -62%)) rotate(calc(var(--lift) * -6deg));transition:transform .35s cubic-bezier(.2,.9,.3,1.2),filter .2s}
.cups-cup i{position:absolute;z-index:1;left:50%;top:48%;transform:translate(-50%,-50%);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#140c06cc;border:1px solid #e6b95c99;color:#ffe9bd;font:800 13px/1 system-ui;font-style:normal;pointer-events:none}
.cups-cup i[hidden]{display:none}
.cups-cup.is-pickable{cursor:pointer}
.cups-cup.is-pickable svg{animation:cups-wiggle 1s ease-in-out infinite alternate}
.cups-cup.is-pickable:hover svg,.cups-cup.is-pickable:focus-visible svg{filter:drop-shadow(0 0 12px #ffd77a) drop-shadow(0 6px 6px #000a)}
.cups-cup.is-mine svg{filter:drop-shadow(0 0 10px var(--brass)) drop-shadow(0 6px 6px #000a)}
.cups-cup.is-mine i{background:var(--brass);color:#1b1204}
.cups-cup.is-cork svg{filter:drop-shadow(0 0 16px #ffd34f) drop-shadow(0 6px 6px #000a)}
.cups-cup:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:10px}
.cups-cork{position:absolute;z-index:4;bottom:28%;width:min(7%,calc(22% / var(--n,3)));aspect-ratio:1/1.15;transform:translateX(-50%);border-radius:30% 30% 22% 22%/20% 20% 14% 14%;background:
  radial-gradient(circle at 30% 30%,#7a4c22 0 6%,transparent 7%),radial-gradient(circle at 65% 55%,#7a4c22 0 5%,transparent 6%),radial-gradient(circle at 40% 75%,#7a4c22 0 4%,transparent 5%),
  linear-gradient(90deg,#a87440,#d9a66b 45%,#b98450);box-shadow:0 3px 4px #0009,inset 0 4px 0 #e8c08c;pointer-events:none}
.cups-cork[hidden]{display:none}
.cups-faces{position:absolute;z-index:20;bottom:3%;display:flex;flex-wrap:wrap;justify-content:center;gap:2px;width:min(24%,calc(90% / var(--n,3)));transform:translateX(-50%);pointer-events:none}
.cups-faces img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid #e9d5ab;background:#2b1b0e;box-shadow:0 2px 6px #000a;animation:cups-face-in .35s cubic-bezier(.2,1.6,.4,1)}
.cups-faces img.is-me{border-color:var(--brass);box-shadow:0 0 10px var(--brass)}
.cups-faces img.is-right{border-color:var(--right);box-shadow:0 0 12px var(--right)}
.cups-faces img.is-wrong{border-color:var(--wrong);filter:grayscale(.7) brightness(.75)}

/* Everybody's card. */
.cups-players{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:0;padding:0;list-style:none}
.cups-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"pic name total" "pic status status";align-items:center;column-gap:7px;padding:4px 10px 4px 4px;border-radius:12px;border:2px solid transparent;background:#ffffff0c;transition:background .25s,border-color .25s}
.cups-card img{grid-area:pic;width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid #c79f54aa;background:#2b1b0e}
.cups-card b{grid-area:name;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#f1dcb4}
.cups-card b em{color:var(--brass);font-style:normal;font-size:10px}
.cups-card output{grid-area:total;font:800 14px/1 ui-monospace,monospace;color:#ffe9bd}
.cups-status{grid-area:status;font:700 10px/1.2 system-ui;color:#a58a63;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cups-card[data-state=picked] .cups-status{color:#ffd77a}
.cups-card[data-state=right]{background:#5fd36b22}
.cups-card[data-state=right] .cups-status{color:var(--right)}
.cups-card[data-state=wrong]{background:#8c2b2038}
.cups-card[data-state=wrong] .cups-status{color:var(--wrong)}
.cups-card[data-state=out]{opacity:.55}
.cups-card[data-state=out] img{filter:grayscale(1)}
.cups-card.is-me{border-color:var(--brass);background:#e6b95c26}
.cups-feedback{margin:0;min-height:2.4em;color:#cdb68d;font-size:13px;line-height:1.35;text-align:center}

@keyframes cups-pop{from{transform:scale(.85)}to{transform:none}}
@keyframes cups-urgent{to{transform:scale(1.08)}}
@keyframes cups-wiggle{from{transform:translateY(0)}to{transform:translateY(-4%)}}
@keyframes cups-face-in{from{transform:scale(0)}to{transform:none}}
@media(min-width:900px){
  .cups-panel{grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);grid-template-areas:"pause pause" "head head" "stage players" "feedback players";align-items:start;column-gap:18px}
  .cups-panel>.cups-pause{grid-area:pause}
  .cups-panel>.cups-head{grid-area:head}
  .cups-panel>.cups-stage{grid-area:stage;height:clamp(320px,56dvh,480px)}
  .cups-panel>.cups-players{grid-area:players;grid-template-columns:1fr}
  .cups-panel>.cups-feedback{grid-area:feedback}
}
@media(max-width:560px){.cups-track li{width:22px;height:22px}.cups-bubble{max-width:44%}.cups-players{grid-template-columns:1fr 1fr}.cups-faces img{width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){.cups-cup.is-pickable svg,.cups-clock.urgent{animation:none}.cups-cup svg{transition:none}}

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