/* Last Call: enamel, champagne brass and clear, unhurried typography. Theme, machine overlays and the Midnight bonus. */
body[data-game=last-call]{--ink:#0d2020;--surface:#16302d;--surface2:#213f38;--line:#355047;--accent:#dec48e;--accent-rgb:222,196,142;--on-accent:#1f3025;--text:#efe9d9;--muted:#a2b6a9;--scene-bg:#0c1b1c;--chrome:#0a1817e0}
body[data-game=last-call] .gw-title{color:#ead5b3}
body[data-game=last-call] .round-copy h2{font-family:var(--bz-serif)}
body[data-game=last-call] .draw-slot{background:#112722;border-color:#2b443b;border-radius:6px}
body[data-game=last-call] .draw-slot.pending{opacity:.6}

/* 3D machine */
.lc-machine{position:relative;width:100%;height:100%;overflow:hidden;background:#0c1b1c}
.lc-machine canvas{display:block;width:100%;height:100%;outline:none;cursor:pointer}
[data-pick=off] .lc-machine canvas{cursor:default}
.lc-loading{height:100%;display:grid;place-items:center;color:#b9c5b5;font:italic 20px var(--bz-serif);text-align:center;padding:30px;margin:0}
.lc-view-controls{position:absolute;left:calc(var(--inset-l,0px) + 12px);top:calc(var(--inset-t,0px) + 8px);display:flex;gap:4px;z-index:2;padding:3px;border-radius:999px;background:#08151499;border:1px solid #ffffff14}
.lc-view-controls button{min-height:36px;padding:0 12px;border-radius:999px;background:transparent;color:#a9bcb0;font:500 12px var(--sans)}
.lc-view-controls button.selected{background:#ffffff14;color:#f0dfb8}
.lc-view-controls button:hover{color:#f3e2be}
@media(pointer:coarse){.lc-view-controls button{min-height:40px}}
.lc-glass-labels{position:absolute;inset:0;pointer-events:none}
/* Each glass label is a button: tap it (or the glass) to change that glass's recipe. */
.lc-glass-label{position:absolute;transform:translateX(-50%);max-width:31%;min-width:44px;min-height:36px;display:flex;align-items:center;gap:6px;padding:4px 10px 4px 5px;border-radius:999px;border:1px solid #c5b17b55;background:#09201ccc;color:#e6d7b2;text-align:left;white-space:nowrap;pointer-events:auto;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lc-glass-label:hover{border-color:#e7cf95}
[data-pick=off] .lc-glass-label{pointer-events:none;cursor:default}
.lc-glass-number{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:12px var(--bz-serif);background:#d8c28e;color:#17382c}
.lc-glass-label strong{min-width:0;font:normal 14px/1.2 var(--bz-serif);overflow:hidden;text-overflow:ellipsis}
.lc-glass-status{display:none}
.lc-progress{flex:none;display:flex;gap:3px}
.lc-progress i{width:6px;height:6px;border-radius:50%;border:1px solid var(--pip);opacity:.55}
.lc-progress i.filled{background:var(--pip);opacity:1}
.lc-glass-label.complete{border-color:#ead492;background:#2a3a22e0}
@media(pointer:coarse){.lc-glass-label{min-height:42px}}
/* A label squeezed to its number badge still keeps a full-size tap area. */
.lc-glass-label:after{content:'';position:absolute;inset:-4px}
.lc-scene-caption{position:absolute;bottom:calc(var(--inset-b,0px) + 8px);left:calc(var(--inset-l,0px) + 14px);right:calc(var(--inset-r,0px) + 14px);display:flex;justify-content:space-between;pointer-events:none;font:11px var(--sans);letter-spacing:1.6px;color:#789388}
/* Flat machine (no WebGL): each glass on the machine is tappable. */
.last-call-scene .lc-drink{cursor:pointer;outline:none}
[data-pick=off] .last-call-scene .lc-drink{cursor:default}
.last-call-scene .lc-drink:focus-visible .lc-plinth-aura{opacity:.7}
.last-call-scene .lc-drink:focus-visible .lc-recipe-name{fill:#ffe7b0;text-decoration:underline}
@container lc-wrap (max-width:640px){
  .lc-glass-label{padding:3px 7px 3px 3px;gap:4px}
  .lc-glass-label strong{font-size:12px}
  .lc-progress{display:none}
  .lc-view-controls button{padding:0 9px;font-size:11px}
  .lc-scene-caption{display:none}
}
@container lc-wrap (max-width:420px){.lc-glass-label strong{display:none}.lc-glass-label{padding:3px}}

/* Midnight bonus. It fades in after the title card; on the 3D machine it is mounted on the machine's upper face (the
   header and reservoirs, --face-* from last-call-machine faceRect), over a dimmed scene otherwise (phones, flat). */
.lc-bonus{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:calc(var(--inset-t,0px) + 14px) calc(var(--inset-r,0px) + 20px) calc(var(--inset-b,0px) + 14px) calc(var(--inset-l,0px) + 20px);container:lc-bonus/size;background:radial-gradient(ellipse at 50% 65%,#1d3c2ee8,#091b18f2 70%);text-align:center;color:#eee2c7;overflow:hidden;animation:lc-bonus-in calc(.55s * max(var(--pace,1),.4)) ease-out both}
@keyframes lc-bonus-in{from{opacity:0;transform:scale(.97)}}
.bonus-active #game-scene{opacity:.3;transition:opacity .5s}
.lc-bonus[data-anchor=machine]{inset:auto;left:var(--face-l);top:var(--face-t);width:var(--face-w);height:var(--face-h);padding:12px 22px;gap:6px;border-radius:20px;background:radial-gradient(ellipse at 50% 28%,#21412ff4,#081816f8 78%);box-shadow:0 0 0 2px #c9a961,0 0 0 6px #0b1a19,0 0 0 7.5px #735b35,0 26px 70px #000c,inset 0 1px 0 #f3dca033}
.bonus-active:has(>.lc-bonus[data-anchor=machine]) #game-scene{opacity:.92}
/* On the machine the track scales with its plaque (container units), and keeps every odds line. */
.lc-bonus[data-anchor=machine] .lc-bonus-heading h2{font-size:clamp(18px,9cqh,34px);margin:4px 0}
.lc-bonus[data-anchor=machine] .lc-bonus-heading p{font-size:max(11px,min(14px,4.4cqh))}
.lc-bonus[data-anchor=machine] .lc-seals{max-width:min(660px,94cqw);gap:min(18px,3cqw)}
.lc-bonus[data-anchor=machine] .lc-seal{--m:clamp(40px,min(22cqh,13cqw),92px)}
.lc-bonus[data-anchor=machine] .lc-seal strong{font-size:clamp(14px,6.5cqh,26px)}
.lc-bonus[data-anchor=machine] .lc-bonus-award{max-width:min(520px,80cqw);padding-top:min(10px,2cqh)}
.lc-bonus[data-anchor=machine] .lc-bonus-award strong{font-size:clamp(24px,11cqh,50px);margin:2px 0}
.lc-bonus-heading>span{display:block;font:500 11px/1.2 var(--sans);letter-spacing:2.4px;text-transform:uppercase;color:#c8ae71}
.lc-bonus-heading h2{font:normal clamp(20px,3vw,32px)/1.15 var(--bz-serif);margin:6px 0}
.lc-bonus-heading p{font:12px/1.45 var(--sans);color:#a8b8a5;margin:0 auto;max-width:440px}
.lc-seals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;list-style:none;max-width:540px;width:100%;margin:0 auto;padding:0}
.lc-seal{position:relative;--m:clamp(40px,8vmin,72px)}
.lc-seal-number{display:block;font:500 11px/1.2 var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:#94a58c}
.lc-medallion{width:var(--m);aspect-ratio:1;margin:6px auto;border-radius:50%;border:2px solid #85734c;outline:1px solid #8b795b;outline-offset:3px;box-shadow:inset 0 0 0 4px #0e241c,inset 0 0 0 5px #756647,0 8px 16px #0004;display:grid;place-items:center;background:radial-gradient(circle at 35% 25%,#555239,#27362a 65%);color:#a3946c;transition:background .35s,color .35s,box-shadow .35s}
.lc-medallion span{font:italic calc(var(--m) * .44) var(--bz-serif)}
.lc-medallion .lc-crest{width:calc(var(--m) * .42)!important;height:calc(var(--m) * .42)!important}
.lc-seal.gold .lc-medallion{background:radial-gradient(circle at 30% 20%,#f9e0a1,#bc9550 65%,#816135);border-color:#e4c179;color:#273320;box-shadow:inset 0 0 0 4px #c5a66b,inset 0 0 0 5px #6d5935,0 0 30px #cba65028}
.lc-seal.silver .lc-medallion{background:radial-gradient(circle at 30% 20%,#d4d8cb,#859487 65%);color:#233a2e;border-color:#b7c5b5;outline-color:#819588}
.lc-seal.unused{opacity:.35}
.lc-seal.silver strong{text-decoration:line-through;color:#99aa98}
.lc-seal strong{display:block;font:normal clamp(14px,1.8vw,21px) var(--bz-serif);color:#d5c295}
.lc-seal small{display:block;margin-top:3px;font:11px var(--sans);letter-spacing:.6px;color:#99ae96}
/* Before each seal turns: it wobbles and warms under the riser (longer before the fourth). Index only, never the outcome. */
.lc-seal.tension .lc-medallion{border-color:#e3c27a;animation:lc-wobble .16s ease-in-out infinite alternate,lc-warm calc(.75s * max(var(--pace,1),.32)) ease-in both}
.lc-seal.tension.long .lc-medallion{animation:lc-wobble .11s ease-in-out infinite alternate,lc-warm calc(1.4s * max(var(--pace,1),.3)) ease-in both}
.lc-seal.tension small{color:#f2d58f}
@keyframes lc-wobble{from{transform:rotate(-6deg) scale(1.02)}to{transform:rotate(6deg) scale(1.07)}}
@keyframes lc-warm{from{box-shadow:inset 0 0 0 4px #0e241c,inset 0 0 0 5px #756647,0 0 0 #ffd27a00}to{box-shadow:inset 0 0 0 4px #0e241c,inset 0 0 0 5px #c9a961,0 0 38px #ffd27acc}}
.lc-seal.just-revealed .lc-medallion{animation:seal-reveal .5s ease-out both}
.lc-seal.gold.just-revealed .lc-medallion{animation:seal-reveal .45s ease-out both,lc-gold-flash 1s ease-out both}
.lc-seal.silver.just-revealed .lc-medallion{animation:lc-thunk .4s cubic-bezier(.3,1.6,.5,1) both}
@keyframes seal-reveal{from{transform:rotateY(90deg)}to{transform:rotateY(0)}}
@keyframes lc-gold-flash{0%{box-shadow:inset 0 0 0 4px #c5a66b,inset 0 0 0 5px #6d5935,0 0 70px 14px #ffe2a0}100%{box-shadow:inset 0 0 0 4px #c5a66b,inset 0 0 0 5px #6d5935,0 0 30px #cba65028}}
@keyframes lc-thunk{0%{transform:translateY(-7px)}60%{transform:translateY(2px)}100%{transform:none}}
/* A gold seal throws a ring of light and sparks. */
.lc-seal-burst{position:absolute;left:50%;top:calc(13px + 6px + var(--m) / 2);width:var(--m);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.lc-seal-burst:before{content:'';position:absolute;inset:0;border-radius:50%;border:3px solid #ffd98a;box-shadow:0 0 18px #ffd27a;animation:lc-ring .8s ease-out both}
.lc-seal-burst:after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;box-shadow:34px 0px 0 #f2c25e,29px 17px 0 #ffe7a8,17px 29px 0 #f2c25e,0px 34px 0 #ffe7a8,-17px 29px 0 #f2c25e,-29px 17px 0 #ffe7a8,-34px 0px 0 #f2c25e,-29px -17px 0 #ffe7a8,-17px -29px 0 #f2c25e,0px -34px 0 #ffe7a8,17px -29px 0 #f2c25e,29px -17px 0 #ffe7a8;animation:lc-sparks .9s ease-out both}
@keyframes lc-ring{from{transform:scale(.9);opacity:1}to{transform:scale(2.5);opacity:0}}
@keyframes lc-sparks{from{transform:scale(.5);opacity:1}to{transform:scale(2.1);opacity:0}}
.lc-bonus-award{border-top:1px solid #5d624340;max-width:410px;width:100%;margin:0 auto;padding-top:8px}
.lc-bonus-award>span{display:block;font:11px/1.2 var(--sans);letter-spacing:1px;color:#a7b89f}
.lc-bonus-award strong{display:block;font:normal clamp(28px,4.5vmin,44px)/1 var(--bz-serif);color:#edcc82;margin:4px 0}
.lc-bonus-award p{font:11px/1.3 var(--sans);color:#b2bda4;margin:0}
/* The Midnight title card: 1.2 s between the trigger and the seals (shorter in Quick play). */
.lc-title-card{position:absolute;z-index:6;left:50%;top:calc(var(--inset-t,0px) + (100% - var(--inset-t,0px) - var(--inset-b,0px)) * .42);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 24px);padding:22px 40px 20px;border-radius:22px;pointer-events:none;text-align:center;background:radial-gradient(ellipse at 50% 35%,#2d2711f4,#0b1514f7 75%);box-shadow:0 0 0 2px #e3c27a,0 0 0 6px #0b1514,0 0 0 7px #8a6d33,0 0 90px #e3b04b66,0 24px 60px #000c;color:#f6e7bf;opacity:0}
.lc-title-card span{font:600 12px/1 var(--bz-sans);letter-spacing:.24em;text-transform:uppercase;color:#d7b56c}
.lc-title-card strong{font:600 clamp(34px,7vw,66px)/1 var(--bz-serif);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:#ffe3a3;text-shadow:0 0 26px #ffcf6a99}
.lc-title-card small{font:500 13px/1.25 var(--bz-sans);color:#cdc4a6}
.lc-title-card.show{animation:lc-title calc(1.2s * max(var(--pace,1),.43)) cubic-bezier(.2,.8,.2,1) both}
@keyframes lc-title{0%{opacity:0;transform:translate(-50%,-50%) scale(.62)}16%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}28%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.06)}}
@media(prefers-reduced-motion:reduce){.lc-title-card.show{opacity:1}}
@media(max-width:420px){.lc-title-card{padding:18px 18px 16px}.lc-title-card small{font-size:12px}}
@container lc-bonus (max-height:330px){
  .lc-bonus:not([data-anchor=machine]){gap:6px}
  .lc-bonus:not([data-anchor=machine]) .lc-bonus-heading p{display:none}
  .lc-bonus:not([data-anchor=machine]) .lc-bonus-heading h2{font-size:19px;margin:3px 0 0}
  .lc-bonus:not([data-anchor=machine]) .lc-medallion{margin:4px auto}
  .lc-bonus:not([data-anchor=machine]) .lc-medallion span{font-size:20px}
  .lc-bonus:not([data-anchor=machine]) .lc-seal small{display:none}
  .lc-bonus:not([data-anchor=machine]) .lc-seal strong{font-size:14px}
  .lc-bonus:not([data-anchor=machine]) .lc-bonus-award{display:flex;align-items:baseline;justify-content:center;gap:10px;padding-top:6px}
  .lc-bonus:not([data-anchor=machine]) .lc-bonus-award strong{font-size:26px;margin:0}
  .lc-bonus:not([data-anchor=machine]) .lc-bonus-award p{display:none}
  .lc-bonus:not([data-anchor=machine]) .lc-seal{--m:38px}
}
/* Narrow (phone) bonus: captions stay at 11px or larger. */
@container lc-bonus (max-width:420px){.lc-seals{gap:6px}.lc-seal small{font-size:11px;letter-spacing:0}.lc-seal-number{font-size:11px;letter-spacing:.4px}.lc-bonus-heading>span,.lc-bonus-award>span,.lc-bonus-award p{font-size:11px}}
@media(prefers-reduced-motion:reduce){.lc-medallion{transition:none}.lc-seal .lc-medallion,.lc-seal-burst{animation:none!important}.lc-seal-burst{display:none}}
body[data-game=last-call] .game-scene[data-renderer=flat]{background:#110c12}
.lc-medallion .lc-crest{display:block;width:1em;height:1em}