/* results.css — results overlay, leaderboard, wine modal, star rating, bill/confetti rules */
/* Results Overlay */
/* touch-action:manipulation — kills iOS Safari's ~350ms delayed click (double-tap-zoom heuristic).
   With the delay, the click is hit-tested AFTER WebKit's async scroll-restore jump, so a tap aimed
   at NOUVEAU ROUND could land on the Noter/Favoris row that moved under the finger. */
.results-overlay{position:fixed;inset:0;background:rgba(94,12,35,0.95);z-index:250;display:none;align-items:center;justify-content:flex-start;flex-direction:column;overflow-y:auto;touch-action:manipulation;padding:24px 0 8px}
.results-overlay.open{display:flex}
/* Centre via auto margins on the first/last child, NOT justify-content:center: on an overflowing
   flex column the latter pushes the top half above the scrollport, so scrollTop 0 (which every
   wmResetResultsScroll open/close guard asserts) landed on the MIDDLE of the results and the
   logo + RÉSULTATS header were unreachable. Auto margins collapse to 0 once content overflows —
   tall results start at the very top; short results still centre. Same pattern as .setup-overlay. */
.results-overlay > :first-child{margin-top:auto}
.results-overlay > :last-child{margin-bottom:auto}
.results-card{background:#fff;border-radius:16px;padding:24px 20px;max-width:400px;width:90%;margin:20px auto;box-shadow:0 8px 32px rgba(0,0,0,0.3);border:2px solid #c9a550}
.results-title{font-family:var(--font-display);font-size:18px;color:#5e0c23;text-align:center;margin-bottom:4px}
/* The revealed wine reads as the "correct answer" of the whole round → same green as a winning
   row, in bold (2026-08-31). The millésime and the alcool are glued with NBSP in the builders
   (results.js / scoring.js) so that pair wraps to the second line together. */
.results-wine{font-size:13px;color:#3B6D11;font-weight:700;text-align:center;margin-bottom:16px;white-space:pre-line}
.res-actions-col{display:flex;flex-direction:row;gap:6px;margin-top:10px}
.res-wine-action{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 4px;background:#fdf8f0;color:#5e0c23;border:1.5px solid #c9a550;border-radius:10px;font-size:9.5px;font-family:'Helvetica Neue',Arial,sans-serif;font-weight:600;letter-spacing:1.2px;cursor:pointer;transition:transform .15s;text-align:center;line-height:1.3;text-transform:uppercase}
/* These three are picture-and-label tiles, not text buttons: they keep the soft rectangle they
   had before the app-wide capsule (requested 2026-08-26). !important because the global button
   pill rule in main.css is itself !important. */
.res-wine-action{border-radius:10px!important}

.res-wine-action:active{transform:scale(0.95)}
.res-wine-action svg{stroke:#c9a550;flex-shrink:0}
.res-wine-action.fav-active{background:#5e0c23;color:#fff;border-color:#5e0c23}
.res-wine-action.fav-active svg{stroke:#fff;fill:#fff}
.res-wine-action.rate-active{background:#5e0c23;color:#fff;border-color:#5e0c23}
.res-wine-action.rate-active svg{stroke:#c9a550;fill:#c9a550}
/* Wine modal */
.wine-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:400;display:none;align-items:center;justify-content:center;padding:20px}
.wine-modal-overlay.open{display:flex}
.wine-modal{background:#fff;border-radius:16px;max-width:400px;width:100%;max-height:80vh;overflow:hidden;border:2px solid #c9a550;display:flex;flex-direction:column}
/* 16 -> 18px (requested 2026-08-31). The four dialogs that share this header — party history,
   discover, rate, the Bordeaux AOC sheet — move together on purpose: raising one alone would
   leave sibling dialogs disagreeing about how loud a title is. The title can wrap to two lines
   in the longest languages, so the row aligns to the TOP and the close X keeps its own line. */
.wine-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid #eee;font-family:var(--font-display);font-size:18px;line-height:1.25;color:#5e0c23;letter-spacing:1px;text-transform:uppercase}
.wine-modal-header > .wine-modal-close{flex:0 0 auto;line-height:1}
.wine-modal-close{background:none;border:none;font-size:22px;color:#999;cursor:pointer;padding:0 4px}
.wine-modal-body{overflow-y:auto;padding:16px;font-size:13px;color:#333;line-height:1.6;font-family:'Helvetica Neue',Arial,sans-serif}
.discover-loading{display:flex;flex-direction:column;align-items:center;padding:40px 0}
.discover-spinner{width:32px;height:32px;border:3px solid #f0ebe3;border-top-color:#c9a550;border-radius:50%;animation:dspin 0.8s linear infinite}
.discover-section{margin-bottom:14px}
.discover-section h3{font-family:var(--font-display);font-size:14px;color:#5e0c23;margin:0 0 4px;letter-spacing:0.5px}
.discover-section p{margin:0;font-size:12px;color:#444;line-height:1.5}
/* Star rating */
.star-rating{display:flex;justify-content:center;gap:8px}
.star{font-size:36px;color:#ddd;cursor:pointer;transition:color .15s,transform .15s}
.star.active{color:#c9a550}
@media (hover: hover){.star:hover{transform:scale(1.15)}}
.rate-note-input{display:block;width:100%;margin:14px auto 0;padding:10px 12px;border:1.5px solid #c9a550;border-radius:8px;font-size:12.5px;color:#5e0c23;background:#fdf8f0;font-family:inherit;box-sizing:border-box;resize:vertical;min-height:60px;max-height:160px;line-height:1.45;outline:none;transition:border-color .15s}
.rate-note-input:focus{border-color:#5e0c23}
.rate-note-input::placeholder{color:#b8a880;font-style:italic}
.rate-confirm-btn{margin-top:14px;padding:10px 28px;background:#5e0c23;color:#e8d5a0;border:1.5px solid #e8d5a0;border-radius:10px;font-family:var(--font-display);font-size:13px;letter-spacing:1.5px;cursor:pointer;transition:transform .15s;text-transform:uppercase}
.rate-confirm-btn:active{transform:scale(0.95)}
.res-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #eee;gap:10px}
.res-row:last-child{border-bottom:none}
.res-cat{font-size:12px;color:#6B1E2E;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px}
.res-detail{font-size:12px;color:#333;font-weight:600}
.res-gb{font-size:14px;font-weight:700;white-space:nowrap;flex-shrink:0}   /* "+10 GB ✓" stays one line — long bet lists wrap on the left instead */
.res-gb.win{color:#3B6D11}
.res-gb.lose{color:#ae182b}
.res-player{font-style:italic}
.res-player.win{color:#3B6D11}
.res-player.lose{color:#ae182b}
.res-total{text-align:center;padding:16px 0;margin-top:8px}
/* line-height 1.1: the host view prints "Wine Croupier" here on two lines — the font's default
   leading left too much air between them. Numbers stay single-line, unaffected. */
.res-total-num{font-family:var(--font-display);font-size:48px;line-height:1.1;color:#5e0c23;cursor:pointer;transition:transform .15s}
/* Word states of the big total — the croupier's name plate and the round-void notice (all
   languages, set/cleared as classes in scoring.js). The GB number itself stays 48px.
   The plate was a fixed 34px, sized for the narrowest phone and therefore small everywhere else;
   it now scales with the screen (bigger plate, requested 2026-08-31) while staying on ONE line.
   It now sets on TWO lines (scoring.js breaks it at its single space, requested 2026-08-31), so
   the limit is the longest WORD, not the whole phrase — which is what lets it be this big.
   Measured, not taste: at 393px "CROUPIER" fills the 310px column at 68px and Cyrillic «ВИННЫЙ»
   at 61px; the vw values below sit ~13 % under those, leaving side air on every screen from
   320px up. On a 393px phone that is 59px (FR/EN/IT/ES/DE) — against 34px before this pass. */
.res-total-num.res-total-croupier{font-size:clamp(40px,15vw,68px);line-height:1.1}
html[lang=ru] .res-total-num.res-total-croupier{font-size:clamp(34px,13.2vw,60px)}
.res-total-num.res-total-void{font-size:20px;line-height:1.3}
.res-total-num:active{transform:scale(0.9)}
.res-total-label{font-size:11px;color:#c9a550;letter-spacing:3px;margin-top:2px}
.lb-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #eee}
.lb-row:last-child{border-bottom:none}
.lb-rank{font-family:var(--font-display);font-size:18px;color:#c9a550;width:30px}
.lb-name{flex:1;font-size:14px;color:#333}
/* inline-block + nowrap: with a long name the pill used to BREAK IN HALF ("WINE" on one line,
   "CROUPIER" on the next). Now it stays whole and, when it no longer fits beside the name, the
   whole badge drops to the next line (2026-08-31). */
.lb-host-tag{display:inline-block;white-space:nowrap;font-size:9px;color:#c9a550;background:#fdf8f0;border:1px solid #c9a550;border-radius:4px;padding:1px 6px;margin-left:6px;letter-spacing:1px;vertical-align:middle}
.lb-score{font-family:var(--font-display);font-size:16px;color:#5e0c23}
.lb-round-score{font-size:12px;color:#3B6D11;margin-left:6px}
/* Waiting animation */
.waiting-anim{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 0}
.waiting-logo{width:80px;height:80px;animation:waitSpin 3s linear infinite}
.waiting-text{font-size:13px;color:#e8d5a0;letter-spacing:1px;margin-top:16px;animation:waitPulse 1.5s ease-in-out infinite}
.waiting-dots::after{content:'';animation:waitDots 1.5s steps(4,end) infinite}
/* Gold frame (2026-08-31): the border was the pale cream of the label text, so the button read as
   one flat bordeaux block. #c9a550 is the app's gold — the same the card and the badges wear. */
.res-btn-next{display:block;width:100%;padding:14px;background:linear-gradient(135deg,#5e0c23,#8a1538);color:#e8d5a0;border:2px solid #c9a550;border-radius:10px;font-size:14px;font-family:var(--font-display);letter-spacing:2px;cursor:pointer;margin-top:12px;text-align:center;transition:transform 0.15s,box-shadow 0.15s}
.res-btn-next:active{transform:scale(0.94);box-shadow:0 2px 8px rgba(0,0,0,0.3)}
/* Lone survivor (everyone else left the party): New Round is unavailable (greyed, non-clickable),
   End-the-game is highlighted with golden waves so it's the obvious next action. */
.res-btn-disabled{opacity:0.4;filter:grayscale(1);pointer-events:none;cursor:not-allowed;box-shadow:none}
.res-end-btn.res-end-highlight{color:#e8d5a0;background:linear-gradient(135deg,#5e0c23,#8a1538);border-color:#c9a550;animation:btngoReadyPulse 1.4s ease-in-out infinite}
.res-btn-share{display:flex;align-items:center;justify-content:center;width:100%;padding:12px;background:linear-gradient(135deg,#833AB4,#C13584,#E1306C,#F77737,#FCAF45);color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;margin-top:16px;letter-spacing:0.5px;font-family:inherit;transition:transform 0.15s,box-shadow 0.15s}   /* 8→16px: air above the share button (requested 2026-08-26) */
.res-btn-share:active{transform:scale(0.94);box-shadow:0 2px 8px rgba(0,0,0,0.3)}
/* Alcohol warning below results card */
/* Hint under the results card: the total is tappable and replays the bills + fireworks. Same
   cream voice as the 18+ line below it, in italics (2026-08-30). */
/* margin-top 12→-6px (2026-08-31): the flex overlay does NOT collapse margins, so the card's own
   20px bottom margin stacked on top of this one and left a 32px hole under the card. The negative
   top margin eats part of the card's, landing the hint 14px under it without touching the card
   (whose 20px also sets the gap above it). */
.res-replay-hint{max-width:460px;margin:-6px auto 0;padding:0 16px;text-align:center;font-style:italic;font-size:11.5px;line-height:1.4;color:rgba(232,213,160,0.9);letter-spacing:0.2px}
.res-alcohol-warning{display:flex;align-items:center;justify-content:center;gap:10px;max-width:460px;margin:18px auto 8px;padding:0 16px}
.res-age-badge{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(232,213,160,0.9);background:transparent;color:rgba(232,213,160,0.9);font-family:inherit;font-weight:700;font-size:10.5px;letter-spacing:0;line-height:1}
.res-warning-text{font-size:10.5px;line-height:1.35;color:rgba(232,213,160,0.9);text-align:left;letter-spacing:0.2px}
/* Results Bill Rain Animation */
.gb-bill{position:fixed;width:200px;opacity:0;pointer-events:none;z-index:260;will-change:transform,opacity}
.gb-bill.fall{animation:billFall var(--fall-dur,2.5s) var(--fall-delay,0s) cubic-bezier(0.25,0.1,0.25,1) forwards}
/* Confetti / Fireworks */
.confetti-container{position:fixed;inset:0;pointer-events:none;z-index:260;overflow:hidden}
.confetti-piece{position:absolute;width:8px;height:8px;opacity:0;will-change:transform,opacity}
.confetti-piece.burst{animation-fill-mode:forwards}

/* ===== Leaderboard: tap an opponent to see their answers (2026-08-30) ===== */
.lb-row-open{cursor:pointer;-webkit-tap-highlight-color:transparent}
.lb-row-open:active{opacity:.6}
/* 11→15px (2026-08-31): the expand arrow was easy to miss and small to aim at. */
.lb-chev{display:inline-block;margin-left:7px;font-size:15px;line-height:1;color:#c9a550;transition:transform .2s}
.lb-row-open.open .lb-chev{transform:rotate(180deg)}
.lb-answers{margin:2px 0 8px 26px;padding-left:10px;border-left:2px solid #e3cf9c}
.lb-answers-none{font-size:12px;color:#8a7a5a;font-style:italic;padding:4px 0}