/* screens.css — auth, onboarding, dashboard, entry, lobby, setup, emoji picker */
/* Wine-color picker (Rouge / Blanc / Rosé) — glass icons as buttons */
.wine-color-row{display:flex;gap:10px;margin-top:24px;justify-content:center;align-items:flex-end}
/* Every colour button is at most a THIRD of the row — the width the three France buttons take
   (requested 2026-08-30). The old flat 120px cap only bit when fewer than three were shown, so
   Espagne (rouge + blanc) drew visibly wider buttons than France. The calc keeps them identical
   at any card width; the two régional buttons override it with their own inline max-width. */
.wine-color-btn{flex:1;min-width:0;max-width:calc((100% - 20px) / 3);display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px 12px;background:#fdf8f0;border:1.5px solid #e8d5a0;border-radius:14px;cursor:pointer;font-family:inherit;transition:transform .15s,box-shadow .15s,border-color .15s,background .15s}
/* The glass tiles keep a soft rectangle, not the app-wide capsule (requested 2026-08-26): they are
   picture buttons, and a pill radius on a tall tile turns the artwork into a stadium. !important
   because the global button-pill rule in main.css is itself !important. */
.wine-color-btn{border-radius:14px!important}

@media (hover: hover){.wine-color-btn:hover{border-color:#c9a550;background:#fff}}
.wine-color-btn:active{transform:scale(0.95);box-shadow:0 2px 8px rgba(94,12,35,0.18)}
.wine-color-btn img{width:auto;height:84px;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.15))}
.wine-color-btn-label{font-family:var(--font-display);font-size:14px;letter-spacing:1.5px;color:#5e0c23;text-transform:uppercase}
/* RU colour words (КРАСНОЕ / БЕЛОЕ / ИГРИСТОЕ) run longer than the FR/EN ones — a touch smaller
   so ИГРИСТОЕ sits comfortably inside its card. */
html[lang="ru"] .wine-color-btn-label{font-size:13px;letter-spacing:1.2px}
/* Premium edition (rosé / sparkling / régional) shown to a FREE player: dimmed with a CLUB chip.
   Cosmetic only — the tap still lands and the gate in selectWineColor / selectRegion explains
   itself with a toast; enforcement never depends on this class. "CLUB" is the brand word,
   identical in all six languages, hence CSS content rather than an i18n key. */
.wm-club-locked{position:relative;opacity:.55}
.wm-club-locked::after{content:'CLUB';position:absolute;top:6px;right:6px;background:#5e0c23;color:#e8d5a0;font-size:8px;letter-spacing:1.2px;font-weight:700;padding:2px 6px;border-radius:6px;border:1px solid #c9a550;pointer-events:none}
/* Entry & Lobby */
.entry-overlay{position:fixed;inset:0;background:#5e0c23;z-index:310;display:flex;align-items:center;justify-content:center;flex-direction:column;padding-bottom:100px}
.entry-card{background:#fff;border-radius:24px;padding:28px 24px;max-width:380px;width:88%;border:2px solid #c9a550;box-shadow:0 9px 22px rgba(0,0,0,0.234), 0 3px 7px rgba(0,0,0,0.117)}   /* floating + soft convex (2026-08-27) */
.entry-title{font-family:var(--font-display);font-size:22px;color:#5e0c23;text-align:center;margin-bottom:6px;letter-spacing:2px}
#entryHost .entry-title{margin-bottom:16px}   /* VOTRE NOM breathes before the name field (requested 2026-08-26); other entry titles keep the tight 6px — they have a sub-line under them */
.entry-sub{font-size:11px;color:#888;text-align:center;margin-bottom:20px;letter-spacing:1px;text-transform:uppercase}
/* Role/code hints on the entry, join and lobby screens */
.entry-hint{font-size:13px;line-height:1.55;color:#888;text-align:center;margin:0 0 16px}
.entry-hint strong{color:#555;font-weight:700;letter-spacing:.5px}
/* text-wrap:balance — even line lengths instead of a dangling last word (the strings carry no
   manual <br> anymore); older browsers simply ignore it and wrap normally. */
.lobby-hint{margin:14px 0 10px;text-wrap:balance}
/* The invite label is a PHRASE where the neighbouring pills carry one or two words, so it drops
   the display serif for the body sans (2026-08-31): that face is cut for short uppercase words
   like COMMENCER, and a lowercase sentence set in it read as a title, not an action. Semibold and
   a notch smaller keeps it clearly secondary to COMMENCER and on one line at 375px in all six
   languages (widest, DE, measured 175px of 270 available).
   TWO classes deep on purpose: `html .entry-btn` further down this file sets font-size:16px at
   (0,1,1) and was silently outranking a bare .lobby-invite-btn — verified with getComputedStyle,
   the size below simply never applied. */
html .lobby-card .lobby-invite-btn{font-family:'Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:14px;letter-spacing:0.6px;padding:14px 10px}
.entry-btn{position:relative;display:block;width:100%;padding:16px;border-radius:10px;font-size:15px;font-family:var(--font-display);letter-spacing:2px;cursor:pointer;text-align:center;margin-bottom:10px;transition:transform .15s,box-shadow .15s;border:2px solid #c9a550;box-shadow:0 9px 22px rgba(0,0,0,0.234), 0 3px 7px rgba(0,0,0,0.117)}
.entry-btn:active{transform:scale(0.94);box-shadow:0 2px 8px rgba(0,0,0,0.3)}
/* No border-color override any more (2026-08-31): it repainted .entry-btn's gold frame in the
   cream of the label, which read as one flat bordeaux block. The whole family — the entry
   screen's host button, CRÉER, REJOINDRE and the lobby's COMMENCER — now keeps the base gold,
   like LANCER LA PARTIE and NOUVEAU ROUND. */
.entry-btn-host{background:linear-gradient(135deg,#5e0c23,#8a1538);color:#e8d5a0}
.entry-btn-join{background:linear-gradient(135deg,#fdf8f0,#f5e6b8);color:#5e0c23}
.entry-btn-row{display:flex;gap:10px;align-items:stretch;margin-bottom:10px}
.entry-btn-row .entry-btn{margin-bottom:0}
.entry-btn-row .entry-btn-host{flex:1}
.entry-btn-back{flex:0 0 auto;width:56px;padding:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fdf8f0,#f5e6b8);color:#5e0c23;border:2px solid #c9a550;border-radius:10px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.entry-optional{margin-top:18px;padding-top:14px;border-top:1px solid #f0e8d8}
.entry-optional-label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#999;margin-bottom:10px;text-align:center;font-weight:600}
.entry-optional-input{width:100%;padding:11px 18px;border:1.5px solid #e8d5a0;border-radius:999px;font-size:13px;color:#5e0c23;background:#fdf8f0;font-family:inherit;box-sizing:border-box;margin-bottom:8px}
.entry-optional-input:last-child{margin-bottom:0}
.entry-optional-input:focus{outline:none;border-color:#c9a550}
.entry-optional-input::placeholder{color:#b8a880;font-style:italic}
.entry-btn-back:active{transform:scale(0.94);box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.entry-btn-back svg{display:block}
.entry-divider{text-align:center;color:#c9a550;font-size:11px;margin:12px 0;letter-spacing:3px}
.join-input{width:100%;padding:14px;border:1.5px solid #c9a550;border-radius:999px;font-size:24px;text-align:center;letter-spacing:12px;color:#5e0c23;background:#fdf8f0;font-family:var(--font-display);margin-bottom:8px}   /* capsule like every other field (requested 2026-08-26) */
.join-name{width:100%;padding:10px 18px;border:1.5px solid #c9a550;border-radius:999px;font-size:14px;color:#333;background:#fdf8f0;margin-bottom:8px;font-family:inherit}
.lobby-overlay{position:fixed;inset:0;background:#5e0c23;z-index:305;display:none;align-items:center;justify-content:center;flex-direction:column;padding-bottom:100px}
.lobby-overlay.open{display:flex}
.lobby-card{background:#fff;border-radius:24px;padding:24px 20px;max-width:400px;width:90%;border:2px solid #c9a550;box-shadow:0 8px 32px rgba(0,0,0,0.3)}
.lobby-code{font-family:var(--font-display);font-size:48px;color:#5e0c23;text-align:center;letter-spacing:12px}
.lobby-code-label{font-size:11px;color:#c9a550;text-align:center;letter-spacing:3px;margin-bottom:12px}
.lobby-player{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid #eee;font-size:14px;color:#333}
.lobby-player:last-child{border-bottom:none}
.lobby-dot{width:8px;height:8px;border-radius:50%;background:#3B6D11;margin-right:10px}
.lobby-host-tag{font-size:9px;color:#c9a550;background:#fdf8f0;border:1px solid #c9a550;border-radius:4px;padding:1px 6px;margin-left:8px}
/* The JOUEUR plate is the croupier plate in green (requested 2026-08-31) — same box, same metrics,
   so the two roles read as one pair rather than a plate beside a loose word. It carries the
   uppercase itself: role.player is capitalised in the FR/EN data but not in RU, and the plate must
   look the same in every language. #3B6D11 on the app's pale green measures 5.89:1. */
.lobby-player-tag{font-size:9px;color:#3B6D11;background:#f4fbf0;border:1px solid #3B6D11;border-radius:4px;padding:1px 6px;margin-left:8px;text-transform:uppercase;letter-spacing:0.5px}
/* Player whose app is disconnected — same chip shape as the croupier tag, muted grey so it reads
   as "absent" rather than as a role. Shown in the lobby and on the next-round role roster. */
.lobby-offline-tag{font-size:9px;color:#8a8a8a;background:#f0efec;border:1px solid #b9b5ad;border-radius:4px;padding:1px 6px;margin-left:8px;text-transform:uppercase;letter-spacing:0.5px}
.lobby-count{font-size:12px;color:#888;text-align:center;margin:12px 0}
/* Setup Screen */
/* Card taller than the viewport: align-items:center would push its top half ABOVE the scroll
   origin where it can never be scrolled to. margin:auto on the card gives the same centring for
   short cards but collapses to 0 when the card overflows, keeping the whole card scrollable;
   the overlay's vertical padding keeps a breathing gap in that case. */
.setup-overlay{position:fixed;inset:0;background:#5e0c23;z-index:300;display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:20px 0;box-sizing:border-box}
.setup-card{background:#fff;border-radius:24px;padding:24px 20px;max-width:400px;width:90%;margin:auto;box-shadow:0 8px 32px rgba(0,0,0,0.3);border:2px solid #c9a550}
.setup-title{font-family:var(--font-display);font-size:20px;color:#5e0c23;text-align:center;margin-bottom:4px;letter-spacing:2px}
.setup-sub{font-size:11px;color:#888;text-align:center;margin-bottom:18px;letter-spacing:1px}
/* Wine Me Scan block — the AI label-scan lives in its own framed card so it reads as a distinct
   feature ("fill the form automatically") rather than two loose buttons floating above the manual
   form. Gold family like the rest of the card, but on its own tinted field. */
.scan-card{background:linear-gradient(160deg,rgba(245,230,184,0.35),rgba(253,248,240,0.6));border:1.5px solid #c9a550;border-radius:12px;padding:12px 12px 8px;margin-bottom:16px}
.scan-card-title{display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--font-display);font-size:14px;letter-spacing:2px;color:#5e0c23;text-align:center}
.scan-card-title svg{flex-shrink:0}
.scan-card-intro{font-size:12px;text-align:center;color:#8a6a20;line-height:1.45;margin:4px 0 10px}
.setup-btn-scan{display:flex;align-items:center;justify-content:center;width:100%;padding:12px;background:linear-gradient(135deg,#fdf8f0,#f5e6b8);color:#5e0c23;border:1.5px solid #c9a550;border-radius:10px;font-size:14px;font-weight:600;letter-spacing:1.5px;cursor:pointer;margin-bottom:4px;font-family:inherit;transition:transform 0.15s,box-shadow 0.15s}
/* Inside the card the buttons sit on the tinted field — solid cream keeps them legible. */
.scan-card .setup-btn-scan{background:#fdf8f0}
.setup-btn-scan:active{transform:scale(0.94);box-shadow:0 2px 8px rgba(0,0,0,0.2)}
/* Wine-photo attach: a "Photo du vin" button + a small preview thumbnail with a remove ✕. */
.wm-photo-attach-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.wm-photo-btn{flex:1;font-size:12px;padding:10px 8px;margin-bottom:0;text-transform:uppercase}
.wm-photo-preview{position:relative;flex-shrink:0}
.wm-photo-preview img{width:46px;height:46px;object-fit:cover;border-radius:8px;border:1.5px solid #c9a550;display:block}
.wm-photo-remove{position:absolute;top:-7px;right:-7px;width:20px;height:20px;line-height:1;border-radius:50%;border:none;background:#5e0c23;color:#f5e6b8;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.35)}
/* Saved-wine thumbnail in list cards (History) — replaces the glass icon when a photo exists. */
.wm-wine-thumb{height:26px;width:26px;object-fit:cover;border-radius:6px;flex-shrink:0;cursor:pointer;border:1px solid #c9a550;filter:drop-shadow(0 1px 2px rgba(0,0,0,.12))}
.dash-party-round .wm-wine-thumb{height:22px;width:22px}
/* Mystery reveal photo (shown only after the wine is revealed — never before playing). */
.mystere-reveal-photo{margin-top:10px;text-align:center}
.mystere-reveal-photo .wm-wine-thumb{width:118px;height:118px;border-radius:12px;border:2px solid #c9a550}
/* Full-screen photo viewer (tap a thumbnail to open). */
#wmPhotoViewer{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;background:rgba(10,2,6,.9)}
#wmPhotoViewer.open{display:flex}
#wmPhotoViewer img{max-width:92vw;max-height:86vh;border-radius:10px;box-shadow:0 8px 40px rgba(0,0,0,.6)}
.wm-photo-viewer-close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:16px;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(244,233,200,.6);background:rgba(0,0,0,.4);color:#f4e9c8;font-size:18px;cursor:pointer}
/* Report a mystery photo — a subtle button on the reveal card + a two-reason picker overlay. */
.mystere-report-btn{display:block;width:100%;margin-top:10px;padding:9px;background:none;border:1px solid rgba(180,40,40,.4);color:#b42828;border-radius:10px;font-size:12.5px;cursor:pointer}
.mystere-report-btn:active{background:rgba(180,40,40,.06)}
.wm-report-overlay{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;background:rgba(10,2,6,.55);padding:20px}
.wm-report-overlay.open{display:flex}
.wm-report-sheet{background:#fff;border-radius:16px;padding:18px;width:340px;max-width:90vw;box-shadow:0 12px 40px rgba(0,0,0,.4);text-align:center}
.wm-report-title{font-weight:700;color:#5e0c23;font-size:15px;margin-bottom:14px}
.wm-report-reason{display:block;width:100%;margin-bottom:8px;padding:12px;border:1.5px solid #c9a550;border-radius:10px;background:#fdf8f0;color:#5e0c23;font-size:13.5px;cursor:pointer;text-align:center}
.wm-report-reason-danger{border-color:#e05a5a;color:#c0392b;background:#fff5f5}
.wm-report-cancel{display:block;width:100%;margin-top:4px;padding:10px;border:none;background:none;color:#888;font-size:13px;cursor:pointer}
.setup-btn-scan.scanning{background:linear-gradient(135deg,#5e0c23,#8a1538);color:#e8d5a0;border-color:#e8d5a0;pointer-events:none}
.setup-btn-scan.scanning::after{content:'';display:inline-block;width:14px;height:14px;border:2px solid rgba(232,213,160,0.3);border-top-color:#e8d5a0;border-radius:50%;margin-left:8px;animation:scanSpin 0.8s linear infinite;vertical-align:middle}
.scan-progress{height:3px;background:rgba(201,165,80,0.2);border-radius:2px;margin-top:6px;overflow:hidden;display:none}
.scan-progress.active{display:block}
.scan-progress-bar{height:100%;background:linear-gradient(90deg,#c9a550,#e8d5a0,#c9a550);background-size:200% 100%;border-radius:2px;animation:scanProgress 2s ease-in-out infinite}
.scan-done-flash{animation:scanFlash 0.4s ease-out}
.setup-label{font-size:11px;font-weight:700;color:#5e0c23;margin-bottom:6px;margin-top:14px;text-transform:uppercase;letter-spacing:1px}
/* "Vin de France category" checkbox row (under the region field) + its "?" help chip. */
.vdf-row{display:flex;align-items:center;gap:8px;margin:8px 0 2px}
.vdf-toggle{flex:1;display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:12px;font-weight:600;color:#5e0c23;border:1.5px solid #c9a550;border-radius:999px;padding:9px 16px;background:#fdf8f0;transition:background .15s,color .15s}   /* capsule like the fields around it (requested 2026-08-26); side padding grew so the checkbox clears the curve */
.vdf-toggle .chk{width:16px;height:16px;flex-shrink:0;border:2px solid #5e0c23;border-radius:4px;position:relative}
.vdf-toggle.on{background:#5e0c23;color:#e8d5a0;border-color:#5e0c23}
.vdf-toggle.on .chk{background:#e8d5a0;border-color:#e8d5a0}
.vdf-toggle.on .chk::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #5e0c23;border-width:0 2px 2px 0;transform:rotate(45deg)}
.vdf-help{width:20px;height:20px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid #b89b5a;border-radius:50%;font-size:11px;font-weight:700;color:#8a6e2a;cursor:pointer;font-family:'Helvetica Neue',Arial,sans-serif}
.setup-select,.setup-input{width:100%;padding:10px 18px;border:1.5px solid #c9a550;border-radius:999px;font-size:14px;color:#333;background:#fdf8f0;margin-bottom:4px;font-family:inherit;appearance:none;-webkit-appearance:none}   /* capsule like the buttons and community inputs (requested 2026-08-26); side padding grew with the radius so text clears the curve */
.setup-select{background:#fdf8f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a550' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 16px center}
.setup-row{display:flex;gap:8px}
.setup-row>*{flex:1}
.setup-toggle{display:flex;gap:0;border:1.5px solid #c9a550;border-radius:999px;overflow:hidden;margin-bottom:4px}   /* pill container — the joined segments inside stay flat, overflow:hidden shapes them */
.setup-toggle-btn{flex:1;padding:10px;text-align:center;font-size:12px;letter-spacing:0.5px;font-weight:400;cursor:pointer;background:#fdf8f0;color:#5e0c23;border:none;font-family:inherit;transition:all .15s}
.setup-toggle-btn.on{background:#5e0c23;color:#fff}
/* Sub-row under the version tabs naming the concrete country / region (France / Bourgogne —
   single options today). Slimmer than the main tabs; its lone option renders as active. */
/* Sub-row (FRANCE/ESPAGNE) matches the category row's height exactly (requested 2026-08-26):
   same 10px padding, and a fixed line-height across BOTH version rows so their different font
   sizes cannot leave a 1-2px step between the pills. */
.setup-toggle-sub .setup-toggle-btn{padding:10px;font-size:11px;letter-spacing:1px}
#gameVersionToggle .setup-toggle-btn,#gameVersionSubCountry .setup-toggle-btn,
#mystereVersionToggle .setup-toggle-btn,#mystereVersionSubCountry .setup-toggle-btn{line-height:16px}
/* Version tabs read in caps (СТРАНА / МИР / РЕГИОН) and a touch larger than the base toggle,
   matching the sub-row. Scoped to the two version toggles so the mono/blend type toggle keeps
   its sentence case and size. */
#gameVersionToggle .setup-toggle-btn,
#mystereVersionToggle .setup-toggle-btn,
.setup-toggle-sub .setup-toggle-btn{text-transform:uppercase}
#gameVersionToggle .setup-toggle-btn,
#mystereVersionToggle .setup-toggle-btn{font-size:13.5px}
.setup-toggle-sub .setup-toggle-btn{font-size:12.5px}
.setup-toggle-btn:active{transform:scale(0.95)}
/* FRANCE/Spain country sub-tabs: a SEPARATE rounded pill under the version tabs (small gap between
   the two levels). The selected country gets a golden gradient fill with bold burgundy text. */
.setup-toggle-sub .setup-toggle-btn.on{background:linear-gradient(135deg,#e8d5a0,#c9a550);color:#5e0c23;font-weight:700}
/* Bordeaux bank/zone legend (setup screen): compact, borderless "zone name + (?)" rows. Tapping the
   (?) opens a popup listing that zone's flagship AOCs (closed with OK). Burgundy/gold palette. */
.bdx-zone-legend{margin:2px 0 6px}
.bdx-zone-hint{font-size:11px;color:#9a7b52;font-style:italic;margin:0 0 6px;line-height:1.35}
.bdx-zone-items{display:flex;flex-wrap:wrap;align-items:center;gap:7px 14px}
.bdx-zone-item{display:inline-flex;align-items:center;gap:6px}
.bdx-zone-item .bdx-zone-name{font-size:13px;color:#c9a550;font-weight:600}
.bdx-zone-q{flex:none;display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:#c9a550;color:#fff;font-size:11px;font-weight:700;line-height:1;border:none;cursor:pointer;font-family:inherit;padding:0}
.bdx-zone-q:active{transform:scale(0.9)}
/* AOC popup: flagship appellations of a zone, shown as chips, dismissed with OK. */
.bdx-aoc-chips{display:flex;flex-wrap:wrap;gap:7px}
.bdx-aoc{display:inline-block;background:#f3e7cf;color:#5e0c23;border-radius:6px;padding:4px 10px;font-size:12.5px}
.bdx-hint-text{flex-basis:100%;font-size:13.5px;line-height:1.55;color:#5e0c23}
/* A field label followed by a (?) help button (Bordeaux Classification). */
.setup-label-row{display:flex;align-items:center;gap:8px;margin-top:14px;margin-bottom:6px}
.setup-label-row .setup-label{margin:0}
.bdx-aoc-modal-foot{padding:12px 16px;border-top:1px solid #eee;text-align:center}
.bdx-aoc-ok{background:#5e0c23;color:#fff;border:none;border-radius:8px;padding:9px 30px;font-family:var(--font-display);font-size:14px;letter-spacing:1px;cursor:pointer}
.bdx-aoc-ok:active{transform:scale(0.96)}
.setup-btn-clear{display:block;width:100%;padding:10px;background:transparent;color:#7a2030;border:1.5px solid #ddd;border-radius:10px;font-size:11px;font-family:inherit;font-weight:400;letter-spacing:1px;text-transform:uppercase;cursor:pointer;margin-top:10px;text-align:center;transition:all 0.2s}
.setup-btn-clear:active{background:#fdf0f0;transform:scale(0.96)}
.setup-timer-label{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:#5e0c23;font-weight:700;margin-top:14px;margin-bottom:6px}
.setup-timer-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:6px}
.setup-timer-btn{padding:10px 4px;background:#fdf8f0;border:1.5px solid #c9a550;border-radius:8px;font-size:12px;font-family:inherit;font-weight:400;letter-spacing:0.5px;color:#5e0c23;cursor:pointer;text-align:center;transition:transform .15s,background .15s,color .15s}
@media (hover: hover){.setup-timer-btn:hover{background:#f5e6b8}}
.setup-timer-btn:active{transform:scale(0.94)}
.setup-timer-btn.selected{background:#5e0c23;color:#fff;border-color:#5e0c23}
/* Gold frame + more air above it (requested 2026-08-31): the border was the cream of its own
   label, and the button sat 8px under the timer row — too close for the screen's last action.
   margin-top 8→18px; it collapses with the row's 6px bottom margin, so 18 is what shows. */
.setup-btn-start{display:block;width:100%;padding:14px;background:linear-gradient(135deg,#5e0c23,#8a1538);color:#e8d5a0;border:2px solid #c9a550;border-radius:10px;font-size:15px;font-family:var(--font-display);letter-spacing:2px;cursor:pointer;margin-top:18px;text-align:center;transition:transform 0.15s,box-shadow 0.15s}
.setup-btn-start:active{transform:scale(0.94);box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.setup-cepage-tag{display:inline-flex;align-items:center;gap:4px;background:#fdf8f0;border:1px solid #c9a550;border-radius:12px;padding:3px 10px;font-size:12px;color:#5e0c23;margin:2px}
.setup-cepage-tag .tag-x{cursor:pointer;color:#ae182b;font-weight:700;margin-left:2px}
/* Auth Screen */
.auth-overlay{position:fixed;inset:0;background:#5e0c23;z-index:320;display:flex;align-items:center;justify-content:center;flex-direction:column;padding-bottom:60px}
.auth-card{background:#fff;border-radius:24px;padding:28px 24px;max-width:380px;width:88%;border:2px solid #c9a550;box-shadow:0 8px 32px rgba(0,0,0,0.3);text-align:center}
.auth-title{font-family:var(--font-display);font-size:22px;color:#5e0c23;letter-spacing:2px;margin-bottom:4px}
.auth-sub{font-size:11px;color:#888;letter-spacing:1px;margin-bottom:22px}
.auth-google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;background:#fff;border:2px solid #c9a550;border-radius:10px;font-size:13px;font-weight:600;color:#5e0c23;cursor:pointer;transition:transform .15s,box-shadow .15s;font-family:inherit}
.auth-google-btn:active{transform:scale(0.94);box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.auth-google-btn svg{flex-shrink:0}
.auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:#c9a550;font-size:10px;letter-spacing:2px}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:#e0d5c0}
.auth-anon-btn{display:block;width:100%;padding:12px 16px;background:linear-gradient(135deg,#fdf8f0,#f5e6b8);color:#5e0c23;border:2px solid #c9a550;border-radius:10px;font-size:13px;font-weight:400;cursor:pointer;font-family:inherit;transition:transform .15s}
.auth-anon-btn:active{transform:scale(0.94)}
/* Guest "save my progress" card in Settings. Gold dashed edge marks it as an unfinished state
   rather than a normal settings block. */
.set-guest-card{border:1.5px dashed #c9a550}
.set-guest-title{font-family:var(--font-display);font-size:15px;color:#5e0c23;margin-bottom:6px}
.set-guest-warn{font-size:12px;line-height:1.5;color:#6a4a52;margin-bottom:12px}
.set-guest-btn{margin-bottom:8px;padding:11px 14px;font-size:13px}
.set-guest-email{display:flex;gap:8px;align-items:center;margin-top:2px}
.set-guest-email .set-input{flex:1;min-width:0}

/* Sign in with Apple — black fill + white mark is Apple's required treatment; the gold border
   keeps it in the card's family without touching the button's own colours. */
.auth-apple-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;background:#000;border:2px solid #c9a550;border-radius:10px;font-size:13px;font-weight:600;color:#fff;cursor:pointer;transition:transform .15s,box-shadow .15s;font-family:inherit}
.auth-apple-btn:active{transform:scale(0.94);box-shadow:0 2px 8px rgba(0,0,0,0.3)}
/* Match the Google button's line box exactly. Apple's guidelines require their option to be no
   less prominent than the other providers, and the mark's tall 384×512 viewBox otherwise renders
   a button a few px shorter than its neighbour. */
.auth-apple-btn svg{flex-shrink:0;height:20px;width:auto}
.auth-email-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;background:#fff;border:2px solid #c9a550;border-radius:10px;font-size:13px;font-weight:600;color:#5e0c23;cursor:pointer;transition:transform .15s;font-family:inherit}
.auth-email-btn:active{transform:scale(0.94)}
.auth-email-form{display:none;margin-top:12px}
.auth-email-input{width:100%;padding:12px;border:1.5px solid #c9a550;border-radius:8px;font-size:14px;color:#5e0c23;background:#fdf8f0;font-family:inherit;text-align:center;box-sizing:border-box;margin-bottom:8px}
.auth-email-send{display:block;width:100%;padding:12px;background:linear-gradient(135deg,#5e0c23,#8a1538);color:#e8d5a0;border:2px solid #e8d5a0;border-radius:10px;font-size:13px;font-family:var(--font-display);letter-spacing:1.5px;cursor:pointer;text-align:center;transition:transform .15s}
.auth-email-send:active{transform:scale(0.94)}
.auth-email-back{display:block;width:100%;padding:8px;background:transparent;border:none;color:#888;font-size:11px;cursor:pointer;margin-top:6px;font-family:inherit}
.auth-email-sent{display:none;text-align:center;padding:16px 0}
.auth-email-sent-icon{font-size:36px;margin-bottom:8px}
.auth-email-sent-text{font-size:13px;color:#333;line-height:1.5}
.auth-email-sent-addr{font-weight:700;color:#5e0c23}
.auth-loading{display:none;flex-direction:column;align-items:center;gap:10px;padding:20px 0}
.auth-spinner{width:28px;height:28px;border:3px solid #f0ebe3;border-top-color:#c9a550;border-radius:50%;animation:dspin 0.8s linear infinite}
/* Auth footer (legal disclaimer) */
.auth-footer{position:absolute;left:0;right:0;bottom:18px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 24px;pointer-events:none}
.auth-warning{display:flex;align-items:center;justify-content:center;gap:10px;max-width:420px}
.auth-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}
.auth-warning-text{font-size:10.5px;line-height:1.35;color:rgba(232,213,160,0.9);text-align:left;letter-spacing:0.2px}
.auth-copyright{font-size:12px;letter-spacing:3px;color:rgba(232,213,160,0.7);font-family:var(--font-display)}
/* Legal links must opt back IN to clicks: .auth-footer sets pointer-events:none so the decorative
   footer never intercepts taps aimed at the sign-in card above it. */
.auth-legal{display:flex;align-items:center;gap:8px;pointer-events:auto;font-size:11px;text-align:center;flex-wrap:wrap;justify-content:center}
.auth-legal a{color:rgba(232,213,160,0.75);text-decoration:underline;text-underline-offset:2px}
.auth-legal a:active{color:#e8d5a0}
.auth-legal-sep{color:rgba(232,213,160,0.4)}
/* Age verification modal */
.age-gate-overlay{position:fixed;inset:0;background:rgba(40,5,15,0.78);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:330;display:none;align-items:center;justify-content:center;padding:20px}
.age-gate-overlay.open{display:flex}
.age-gate-card{background:#fff;border-radius:24px;padding:24px 22px 20px;max-width:360px;width:100%;border:2px solid #c9a550;box-shadow:0 12px 40px rgba(0,0,0,0.45);text-align:center}
.age-gate-badge{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;border:2px solid #5e0c23;background:transparent;color:#5e0c23;font-family:inherit;font-weight:700;font-size:16px;letter-spacing:0;line-height:1;margin-bottom:14px}
.age-gate-title{font-family:var(--font-display);font-size:18px;color:#5e0c23;letter-spacing:1.5px;margin-bottom:6px}
.age-gate-sub{font-size:11.5px;color:#666;line-height:1.45;margin-bottom:16px}
.age-gate-label{display:block;font-size:10px;font-weight:600;color:#5e0c23;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:6px;text-align:left}
.age-gate-input{width:100%;padding:0 12px;border:1.5px solid #c9a550;border-radius:8px;font-size:14px;color:#5e0c23;background:#fdf8f0;font-family:inherit;box-sizing:border-box;height:44px;line-height:42px;-webkit-appearance:none;appearance:none;text-align:center}
.age-gate-error{min-height:16px;font-size:11px;color:#ae182b;margin:6px 0 8px;text-align:left}
.age-gate-confirm{display:block;width:100%;padding:13px;background:linear-gradient(135deg,#5e0c23,#8a1538);color:#e8d5a0;border:2px solid #e8d5a0;border-radius:10px;font-size:14px;font-family:var(--font-display);letter-spacing:1.5px;cursor:pointer;text-align:center;transition:transform .15s}
.age-gate-confirm:active{transform:scale(0.94)}
.age-gate-cancel{display:block;width:100%;padding:8px;background:transparent;border:none;color:#888;font-size:11px;cursor:pointer;margin-top:6px;font-family:inherit}
.age-gate-disclaimer{margin-top:14px;padding-top:12px;border-top:1px solid #f0e8d8;font-size:9.5px;color:#999;line-height:1.4}
/* Onboarding */
.onb-overlay{position:fixed;inset:0;background:#5e0c23;z-index:318;display:none;align-items:center;justify-content:center;flex-direction:column;padding:20px;overflow-y:auto}
.onb-overlay.open{display:flex}
.onb-card{background:#fff;border-radius:24px;padding:24px 20px;max-width:400px;width:90%;border:2px solid #c9a550;box-shadow:0 8px 32px rgba(0,0,0,0.3)}
.onb-progress{display:flex;gap:6px;justify-content:center;margin-bottom:18px}
.onb-dot{width:10px;height:10px;border-radius:50%;background:#e0d5c0;transition:background .3s}
.onb-dot.active{background:#c9a550}
.onb-dot.done{background:#5e0c23}
.onb-step-title{font-family:var(--font-display);font-size:18px;color:#5e0c23;text-align:center;margin-bottom:4px;letter-spacing:1px}
.onb-step-sub{font-size:11px;color:#888;text-align:center;margin-bottom:16px}
.onb-step{display:none}
.onb-step.active{display:block}
.onb-input{width:100%;padding:12px;border:1.5px solid #c9a550;border-radius:8px;font-size:15px;color:#5e0c23;background:#fdf8f0;font-family:inherit;text-align:center;margin-bottom:8px}
.onb-choices{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.onb-choice{padding:8px 12px;border-radius:8px;border:1.5px solid #c9a550;background:#fdf8f0;color:#5e0c23;font-size:12px;cursor:pointer;transition:all .2s;font-family:inherit;font-weight:500}
.onb-choice.selected{background:#5e0c23;color:#fff;border-color:#5e0c23}
.onb-choice:active{transform:scale(0.95)}
.onb-btn-row{display:flex;gap:8px;margin-top:16px}
.onb-btn{flex:1;padding:13px;border-radius:10px;font-size:14px;font-family:var(--font-display);letter-spacing:1.5px;cursor:pointer;text-align:center;transition:transform .15s;border:2px solid #c9a550}
.onb-btn:active{transform:scale(0.94)}
.onb-btn-next{background:linear-gradient(135deg,#5e0c23,#8a1538);color:#e8d5a0;border-color:#e8d5a0}
.onb-btn-skip{background:#fdf8f0;color:#5e0c23}
/* Dashboard */
/* Header shell — dark grey (the user tried cream/tan and came back): #565658 is the OLD header
   tone (rgba(0,0,0,.2) over the #6b6b6e panel), now solid because the overlay's own background
   also paints the status-bar strip on the native shell (top:0 + safe-area padding, main.css) —
   strip + pinned header read as one dark bar. The lighter grey belongs to .dash-scroll only. */
.dash-overlay{position:fixed;inset:0;background:#565658;z-index:315;display:none;flex-direction:column;overflow:hidden}
.dash-overlay.open{display:flex}
/* The scroll container for everything below the header. iOS WKWebView doesn't scroll the fixed
   overlay itself, so the overlay stays put and this inner div does the scrolling; it also carries
   the bottom clearance for the floating nav bar (content slides UNDER the pill, the end clears it). */
.dash-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:#6b6b6e;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.dash-header{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#565658;border-bottom:3px solid #fff;flex-shrink:0}
.dash-avatar{width:50px;height:50px;border-radius:50%;border:2px solid #c9a550;display:flex;align-items:center;justify-content:center;font-size:24px;background:#fdf8f0;flex-shrink:0;cursor:pointer}
/* Earned avatar image: the level art already has its own ring, so drop the gold border/padding. */
.dash-avatar.has-avatar{border:none;background:transparent;overflow:hidden;position:relative}
/* ===== Club gold ring — diamond glints (2026-08-27, user request) =====
   Two four-ray sparkles flare over the header avatar's gold ring, staggered on one loop. They
   live on the WRAPPER's pseudo-elements (the img can't carry any) — for the Club state the
   wrapper's crop is released (the img clips itself to a circle via its own border-radius, the
   overflow:hidden above was belt-and-braces), so the glints can ride the rim. */
html.wm-club .dash-avatar.has-avatar{overflow:visible}
html.wm-club .dash-avatar.has-avatar::before,
html.wm-club .dash-avatar.has-avatar::after{
  content:"";position:absolute;pointer-events:none;z-index:2;opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 L13.1 10.9 L24 12 L13.1 13.1 L12 24 L10.9 13.1 L0 12 L10.9 10.9 Z' fill='%23fffbe8'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 4px rgba(255,255,255,0.95)) drop-shadow(0 0 10px rgba(255,236,170,0.8));   /* doubled halo — a hot core plus a wide warm bloom (more intense, requested 2026-08-27) */
}
/* THREE glint spots on two pseudo-elements (2026-08-27): ::before plays spot 1 (top-right,
   full size) in the cycle's first third, ::after plays spot 2 (bottom-left) in the second,
   and ::before TELEPORTS while invisible (the 33.4% keyframe) to play spot 3 (top-left, a
   little smaller) in the last third. Flares last a full 1.8s each and hand straight over —
   the ring never goes dark. */
html.wm-club .dash-avatar.has-avatar::before{width:19px;height:19px;top:-6px;left:36px;animation:wmClubGlintA 5.4s ease-in-out infinite}
html.wm-club .dash-avatar.has-avatar::after{width:12px;height:12px;bottom:-1px;left:-5px;animation:wmClubGlintB 5.4s ease-in-out infinite}
@keyframes wmClubGlintA{
  0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0deg)}
  16.6%{opacity:1;transform:translate(0,0) scale(1.15) rotate(20deg)}
  33.3%{opacity:0;transform:translate(0,0) scale(.3) rotate(40deg)}
  33.4%,66.6%{opacity:0;transform:translate(-44px,9px) scale(.3) rotate(0deg)}
  83.3%{opacity:1;transform:translate(-44px,9px) scale(.95) rotate(20deg)}
  99.9%{opacity:0;transform:translate(-44px,9px) scale(.3) rotate(40deg)}
  100%{opacity:0;transform:translate(0,0) scale(.3) rotate(0deg)}
}
@keyframes wmClubGlintB{
  0%,33.3%{opacity:0;transform:scale(.3) rotate(0deg)}
  50%{opacity:1;transform:scale(1.15) rotate(20deg)}
  66.6%,100%{opacity:0;transform:scale(.3) rotate(40deg)}
}
@media (prefers-reduced-motion:reduce){html.wm-club .dash-avatar.has-avatar::before,html.wm-club .dash-avatar.has-avatar::after{animation:none}}
.earned-avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.onb-avatar-hint{font-size:12.5px;color:#8a6a20;margin:12px 2px 4px;text-align:center;line-height:1.35}   /* dark gold: the old cream #e8d5a0 was for a burgundy backdrop and vanished on the white card (2026-08-26) */
.dash-user-info{flex:1;min-width:0}
.dash-username{font-family:var(--font-display);font-size:20px;color:#fff;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* enlarged 17→20 (requested 2026-08-26); ellipsis still guards long names */
.dash-userlevel{font-size:11px;color:#e8d5a0;letter-spacing:0.8px;margin-top:2px;font-weight:500}
.dash-edit-btn{padding:10px 20px;border-radius:10px;font-size:13px;font-family:var(--font-display);letter-spacing:1px;cursor:pointer;border:none;background:rgba(255,255,255,0.88);color:#5e0c23;transition:all .15s;box-shadow:0 2px 6px rgba(0,0,0,0.15)}
.dash-edit-btn:active{transform:scale(0.94);background:#fff}
.dash-stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:0 16px;margin-top:12px}
/* Height locked to the same 68px as the JEUX/COMMUNITY buttons below, so the three tiles
   and the two big buttons read as one stack. Content is centred vertically inside. */
.dash-stat{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:68px;text-align:center;padding:10px 4px 9px;background:#fff;border-radius:999px;border:none;box-shadow:0 9px 22px rgba(0,0,0,0.234), 0 3px 7px rgba(0,0,0,0.117)}   /* floating candy pill (2026-08-27) */
.dash-stat-num{font-family:var(--font-display);font-size:24px;color:#5e0c23;line-height:1}
/* Lives stat card — bottle laid HORIZONTALLY (neck pointing LEFT). Count is embedded in
   the label below ("VIES 5/5"), so the bottle row only contains the bottle. Padding/flex
   inherited from .dash-stat so all three cards share the same outer geometry and their
   labels line up via margin-top:auto on .dash-stat-label. */
.dash-lives-row{display:flex;justify-content:center;align-items:center;min-height:0}
/* Bottle is rotated 90° CCW so the neck points LEFT. The wrap reserves the rotated visual
   footprint (wide-and-short). Its height is tuned to match the .dash-stat-num line height
   so the VIES label ends up at the same y as the labels in the Parties/Total cards. */
.dash-life-bottle-wrap{
  width:76px;height:24px;
  position:relative;flex-shrink:0;
}
.dash-life-bottle{
  position:absolute;
  height:66px;width:auto;     /* "natural" tall orientation BEFORE rotation */
  top:50%;left:50%;
  /* nudge the bottle up a few px so it sits a touch higher in the card */
  transform:translate(-50%,calc(-50% - 3px)) rotate(-90deg);
  transform-origin:center center;
  transition:opacity .3s;
  display:block;
}
/* When 0 lives left, redden the label so it stands out as an "out of vies" warning. */
.dash-stat-label.depleted{color:#ae182b;font-weight:600}
/* Legacy glass-row support — kept so the old index.legacy.html keeps working */
.dash-life{height:42px;width:auto;transition:filter .25s,opacity .25s;flex-shrink:1;min-width:0}
.dash-life.depleted{filter:grayscale(1);opacity:0.3}
.dash-stat-parties{color:#c9a550}
.dash-stat-sep{color:#bbb;margin:0 2px;font-weight:400}
.dash-stat-rounds{color:#5e0c23}
/* Middle box alternates ONE currency at a time (WM tokens gold / total GB bordeaux), swapping
   every 3s with a soft fade — see wm-tokens.js. */
#dashStatTotal,#dashStatGames{white-space:nowrap}
.dash-stat-tokens{color:#c9a550}
.dash-stat-gb{color:#5e0c23}
@keyframes wmFade{from{opacity:0}to{opacity:1}}
#dashStatTotal.wm-fade,#dashStatGames.wm-fade{animation:wmFade .4s ease}
/* The alternating captions are longer than the old "Parties / Vins" pair and must not wrap the
   tile taller than its neighbours (Russian "Продегустировано вин" is the long case). */
.dash-stat-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-stat-clickable{cursor:pointer;transition:transform .15s,box-shadow .15s}
@media (hover: hover){.dash-stat-clickable:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.18)}}
.dash-stat-clickable:active{transform:translateY(0);box-shadow:0 1px 4px rgba(0,0,0,0.2)}
.dash-stat-label{font-size:8px;color:#888;letter-spacing:1px;margin-top:3px;text-transform:uppercase}
/* The old margin-top:0 nudge here is gone: now that .dash-stat centres its content in a
   fixed 68px box, zeroing the gap pushed the VIES label ABOVE the Parties/GB labels instead
   of levelling it. The shared 3px gap lines all three up. */
/* Bold fraction inside the VIES label — slightly bordeaux and weighted so "5/5" reads as
   a distinct counter, not just trailing label text. */
/* Format name gold and bold, count below; the pair hugs the bottle a touch closer than the
   other cards' labels (requested 2026-08-30). */
.lives-cap{display:block;font-weight:700;color:#b0851c;letter-spacing:1px}
.dash-stat-lives .dash-stat-label{margin-top:0}
.lives-frac{display:block;font-weight:700;color:#5e0c23;letter-spacing:0.5px;margin-top:1px;font-size:10px}
.dash-stat-label.depleted .lives-frac{color:#ae182b}
.dash-tabs{display:flex;gap:0;margin:4px 16px 0;border-bottom:2px solid rgba(255,255,255,0.1)}
.dash-tab{flex:1;padding:10px 0;text-align:center;font-size:13px;font-family:'Helvetica Neue',Arial,sans-serif;font-weight:600;letter-spacing:0.5px;color:rgba(255,255,255,0.35);cursor:pointer;transition:all .2s;border-bottom:2px solid transparent;margin-bottom:-2px}
.dash-tab.active{color:#fff;border-bottom-color:#e8d5a0}
.dash-panel{display:none;padding:12px 16px 20px}
.dash-panel.active{display:block}
.dash-card{background:#fff;border-radius:24px;padding:16px;margin-bottom:10px;border:none}
/* Betting-chip colour picker (profile tab): a row of the 6 jeton SVGs, the active one ringed. */
.jeton-picker{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.jeton-swatch{flex:0 0 auto;width:52px;height:52px;padding:3px;border:2px solid transparent;border-radius:50%;background:none;cursor:pointer;box-sizing:border-box;transition:border-color .15s,transform .12s;-webkit-tap-highlight-color:transparent}
.jeton-swatch img{width:100%;height:100%;display:block;object-fit:contain}
.jeton-swatch:active{transform:scale(0.9)}
.jeton-swatch.selected{border-color:#c9a550;background:rgba(201,165,80,0.14)}
.dash-card-title{font-family:var(--font-display);font-size:16px;color:#5e0c23;letter-spacing:1px;margin-bottom:10px;text-transform:uppercase}
.dash-field{margin-bottom:12px}
.dash-field-label{font-size:10px;font-weight:600;color:#5e0c23;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
/* Opt-in checkbox under a field (workplace → "Afficher dans le profil"). */
.dash-field-check{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:#5e0c23;cursor:pointer}
.dash-field-check input{width:16px;height:16px;accent-color:#8a1538;margin:0}
.dash-field-opt{font-weight:400;text-transform:none;color:#b09a6a;font-size:9px;letter-spacing:0}
.dash-field-input{width:100%;padding:0 18px;border:1.5px solid #ddd;border-radius:999px;font-size:13px;color:#333;background:#fdf8f0;font-family:inherit;box-sizing:border-box;height:44px;line-height:42px;min-height:44px;max-height:44px}
.dash-field-input[type="date"]{-webkit-appearance:none;appearance:none;line-height:42px;min-height:44px;max-height:44px}
.dash-field-select{width:100%;padding:0 18px;border:1.5px solid #ddd;border-radius:999px;font-size:13px;color:#333;background:#fdf8f0;font-family:inherit;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;box-sizing:border-box;height:44px;line-height:42px;min-height:44px;max-height:44px}
.dash-field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dash-field-row .dash-field{min-width:0}   /* overflow:hidden dropped 2026-08-28 — it CLIPPED the float shadow of the Sexe/Date controls (min-width:0 alone already stops the grid track blowing out) */
.dash-save-btn{display:block;width:100%;padding:12px;background:linear-gradient(135deg,#5e0c23,#8a1538);color:#e8d5a0;border:2px solid #e8d5a0;border-radius:10px;font-size:13px;font-family:var(--font-display);letter-spacing:1.5px;cursor:pointer;text-align:center;transition:transform .15s;margin-top:8px}
.dash-save-btn:active{transform:scale(0.94)}
.dash-wine-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f0ebe3}
.dash-wine-item:last-child{border-bottom:none}
.dash-wine-info{flex:1;min-width:0}
.dash-wine-name{font-size:12px;color:#333;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-wine-date{font-size:9px;color:#999;margin-top:2px}
.dash-wine-stars{color:#c9a550;font-size:14px;flex-shrink:0}
.dash-wine-heart{color:#ae182b;font-size:14px;flex-shrink:0}
.dash-wine-glass{height:26px;width:auto;flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.12))}
.dash-wine-note{margin-top:8px;padding:8px 10px;background:#fdf8f0;border-left:2.5px solid #c9a550;border-radius:4px;font-size:11.5px;color:#5a5a5a;font-style:italic;line-height:1.45;word-wrap:break-word}
/* Expandable wine card (Favoris / Notés) — header is the always-visible row; details appear
   below when the card has the `.open` class. */
.dash-wine-card{padding:0;overflow:hidden}
/* Wines saved from a Wine Me Community game get a cream tint to set them apart. */
.dash-wine-card-community{background:#faecc8}
.dash-wine-header{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;user-select:none}
.dash-wine-chev{margin-left:auto;font-size:14px;color:#c9a550;flex-shrink:0;transition:transform .25s}
.dash-wine-card.open .dash-wine-chev{transform:rotate(180deg)}
.dash-wine-details{display:none;padding:6px 14px 12px;border-top:1px dotted #eadcb8;background:#fdf8f0}
/* Full-width detail block (the tasting note runs longer than a value cell, 2026-08-28). */
.dash-wine-detail-note{padding:7px 0;border-top:1px dotted #eadcb8;font-size:12px;color:#3a2a12;line-height:1.45}
.dash-wine-detail-note .dash-wine-detail-key{display:block;margin-bottom:3px}
.dash-wine-card.open .dash-wine-details{display:block}
.dash-wine-detail-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0;border-bottom:1px dotted #eadcb8;font-size:12px}
.dash-wine-detail-row:last-child{border-bottom:none}
.dash-wine-detail-key{text-transform:uppercase;letter-spacing:0.8px;font-size:9.5px;color:#999;font-weight:600;flex-shrink:0}
.dash-wine-detail-val{color:#5e0c23;font-weight:600;text-align:right;flex:1;word-break:break-word}
/* …except the rows that describe the TASTING rather than the wine — when it was played, who was
   at the table, how many stars it got. Gold sets them apart from the bordeaux wine facts
   (requested 2026-08-30); same tone the quiz captions use. */
.dash-wine-detail-val.gold{color:#b0851c}
/* Move the wine note ABOVE the details panel when the card is expanded so it reads naturally. */
.dash-wine-card .dash-wine-note{margin:0 14px 8px;display:none}
.dash-wine-card.open .dash-wine-note{display:block}
.dash-wine-remove{font-size:16px;color:#ccc;cursor:pointer;padding:4px;transition:color .15s}
@media (hover: hover){.dash-wine-remove:hover{color:#ae182b}}
.dash-empty{text-align:center;color:rgba(255,255,255,0.4);font-size:14px;padding:30px 0}
.dash-history-item{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;background:#fff;border-radius:999px;margin-bottom:6px;border:none}
.dash-history-wine{font-size:11px;color:#333;flex:1;min-width:0;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dash-history-score{font-family:var(--font-display);font-size:16px;margin-left:10px;flex-shrink:0}
.dash-history-score.win{color:#3B6D11}
.dash-history-score.lose{color:#ae182b}
.dash-history-score.host{color:#c9a550;font-size:13px;letter-spacing:1.5px}
/* Dashboard list search bar — used in Historique, Favoris, Notés */
.dash-history-search{position:relative;display:flex;align-items:center;gap:8px;background:#bcb9b4;border-radius:999px;padding:0 16px;margin:0 0 10px;border:1.5px solid transparent;transition:background .15s,border-color .15s}
.dash-history-search:focus-within{background:#fff;border-color:#c9a550}
.dash-history-search svg{color:#3a3a3a;flex-shrink:0;opacity:0.75;transition:color .15s,opacity .15s}
.dash-history-search:focus-within svg{color:#5e0c23;opacity:1}
.dash-history-search input{flex:1;border:none;outline:none;background:transparent;padding:7px 0;font-size:12.5px;color:#3a3a3a;font-family:inherit;min-width:0;transition:color .15s}
.dash-history-search input::placeholder{color:#3a3a3a;opacity:0.6;font-style:italic;transition:color .15s,opacity .15s}
.dash-history-search:focus-within input{color:#5e0c23}
.dash-history-search:focus-within input::placeholder{color:#5e0c23;opacity:0.5}
.dash-history-search-clear{font-size:17px;color:#3a3a3a;opacity:0.7;cursor:pointer;line-height:1;padding:2px 4px;flex-shrink:0;transition:color .15s}
.dash-history-search:focus-within .dash-history-search-clear{color:#5e0c23}
@media (hover: hover){.dash-history-search-clear:hover{opacity:1}}
/* History — grouped by partie */
.dash-party-item{background:#fff;border-radius:24px;margin-bottom:8px;overflow:hidden}   /* half the collapsed row: reads fully round shut, keeps its shape open */
/* Party number and the place/date line are centred on each other OPTICALLY: flex centers the
   line BOXES, then a tiny top-nudge on the number compensates the display face riding high in
   its box (Playfair/Britannic digits have no descender). Baseline alignment was tried and read
   as "the text sits too low" next to the big number. */
.dash-party-header{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none;transition:background .15s}
@media (hover: hover){.dash-party-header:hover{background:#fdf8f0}}
.dash-party-num{font-family:var(--font-display);font-size:18px;line-height:1;color:#5e0c23;letter-spacing:1px;flex-shrink:0;position:relative;top:0}
/* RU (Playfair) digits sit ~1px below the meta line ink-middle — measured on 4x renders; lift
   them to the axis. Britannic (FR/EN/IT/ES/DE) measures dead-on and gets no lift. */
html[lang="ru"] .dash-party-num{top:-1px}
.dash-party-meta{flex:1;font-size:11px;color:#666;line-height:1.35;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Close control: the cross is DRAWN, not typed. As a "×" glyph its centring depends on the font's
   metrics, and the native shell resolves a different face than the browser does — measured dead
   centre here, visibly low on the device. Two rotated bars centre themselves on every platform.
   currentColor keeps the hover tint working, and font-size:0 hides the &times; the markup still
   carries (it stays there for the title/aria value). */
.dash-party-delete{
  position:relative;font-size:0;line-height:0;color:#bbb;
  flex-shrink:0;cursor:pointer;width:22px;height:22px;border-radius:50%;   /* 22 keeps the row at its old 46px — a taller box grows the header */
  display:flex;align-items:center;justify-content:center;
  transition:color .15s,background .15s;
}
.dash-party-delete::before,.dash-party-delete::after{
  content:'';position:absolute;width:12px;height:1.6px;background:currentColor;border-radius:1px;
}
.dash-party-delete::before{transform:rotate(45deg)}
.dash-party-delete::after{transform:rotate(-45deg)}
@media (hover: hover){.dash-party-delete:hover{color:#ae182b;background:rgba(174,24,43,0.08)}}
/* Collapsed extras (items beyond the first 7) — hidden until the list is expanded OR the user
   types a search query (which auto-expands so they can find anything). */
.dash-collapsed-extra{display:none}

/* ===== Typical-region hints (region <select>) + atypical-origin warning modal ===== */
.geo-opt-typical{color:#3a2228}
.geo-opt-atypical{color:#b7a386}
.geo-warn-overlay{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(20,0,8,0.6)}
.geo-warn-overlay.open{display:flex}
.geo-warn-box{background:#fdf8f0;border:2px solid #c9a550;border-radius:14px;max-width:340px;width:100%;padding:22px 20px;text-align:center;box-shadow:0 12px 44px rgba(0,0,0,0.45)}
.geo-warn-title{font-family:var(--font-display);font-size:18px;color:#5e0c23;margin-bottom:10px;letter-spacing:0.5px}
.geo-warn-text{font-size:14px;color:#3a2228;line-height:1.55;margin-bottom:18px}
.geo-warn-text strong{color:#5e0c23}
.geo-warn-actions{display:flex;gap:10px}
.geo-warn-actions button{flex:1;padding:11px 8px;border-radius:8px;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0.5px;cursor:pointer;border:1.5px solid #c9a550}
.geo-warn-actions button:active{transform:scale(0.98)}
.geo-warn-cancel{background:#fff;color:#5e0c23}
.geo-warn-keep{background:#5e0c23;color:#fff;border-color:#5e0c23}
.dash-list-expanded .dash-collapsed-extra,
.dash-search-active .dash-collapsed-extra{display:block}
/* Voir tout / Voir moins toggle — matches the search bar's height & spacing so the list
   reads as a single visual block. Cream dashed border on the dim panel background, white
   uppercase text. */
/* Sits at the foot of the history / favourites / rated lists, so it carries a list row's height
   rather than the smaller one its own padding gave it (requested 2026-08-25). */
.dash-show-all{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin:10px 0 4px;padding:4px 11px;background:transparent;border:1.5px dashed #e8d5a0;border-radius:8px;color:#fff;font-size:11px;font-family:inherit;font-weight:400;letter-spacing:1px;text-transform:uppercase;cursor:pointer;text-align:center;transition:background .15s,border-color .15s;line-height:1.6}
@media (hover: hover){.dash-show-all:hover{background:rgba(232,213,160,0.1);border-color:#fff}}
.dash-show-all:active{transform:scale(0.98)}
.dash-search-active .dash-show-all{display:none}
.dash-party-chev{font-size:14px;color:#c9a550;flex-shrink:0;transition:transform .25s}
.dash-party-item.open .dash-party-chev{transform:rotate(180deg)}
.dash-party-rounds{max-height:0;overflow:hidden;transition:max-height .3s ease-out;background:#fdf8f0}
.dash-party-item.open .dash-party-rounds{max-height:4000px;border-top:1px solid #f0e8d8}   /* rounds expand into detail blocks now (2026-08-28) — 600px clipped them */
.dash-party-round{display:flex;align-items:center;gap:8px;padding:9px 14px;cursor:pointer}
.dash-party-round:last-child{border-bottom:none}
/* A round is its own expander inside the party (2026-08-28): the row stays as it was, the
   Favourites-style detail block sits under it and opens on tap. */
.dash-party-round-wrap{border-bottom:1px dotted #eadcb8}
.dash-party-round-wrap:last-child{border-bottom:none}
.dash-party-round-wrap.no-details .dash-party-round{cursor:default}
.dash-party-round-chev{font-size:15px;color:#c9a550;flex-shrink:0;transition:transform .25s;padding-left:2px}   /* 12→15: easier to spot beside the score (requested 2026-08-28) */
.dash-party-round-wrap.open .dash-party-round-chev{transform:rotate(180deg)}
.dash-party-round-wrap > .dash-wine-details{display:none}
.dash-party-round-wrap.open > .dash-wine-details{display:block;border-top:1px dotted #eadcb8}
.dash-party-round .dash-wine-glass{height:22px}
.dash-party-round-wine{font-size:11.5px;color:#333;flex:1;min-width:0;line-height:1.35}
.dash-party-wine-prod{font-weight:700;color:#5e0c23}
.dash-party-round-score{font-family:var(--font-display);font-size:14px;flex-shrink:0}
.dash-party-round-score.win{color:#3B6D11}
.dash-party-round-score.lose{color:#ae182b}
.dash-party-round-score.host{color:#c9a550;font-size:11px;letter-spacing:1.5px}
.dash-play-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:calc(100% - 32px);min-height:68px;margin:16px 16px;padding:14px;background:linear-gradient(135deg,#5e0c23,#8a1538);color:#e8d5a0;border:2px solid #e8d5a0;border-radius:12px;font-family:var(--font-display);cursor:pointer;text-align:center;transition:transform .15s,box-shadow .15s;box-shadow:0 9px 22px rgba(0,0,0,0.234), 0 3px 7px rgba(0,0,0,0.117)}   /* candy (2026-08-27) */
.dash-play-btn:active{transform:scale(0.94);box-shadow:0 4px 16px rgba(0,0,0,0.4)}
.dash-play-label{font-size:18px;letter-spacing:2px}
.dash-play-sub{font-size:11.5px;letter-spacing:0.5px;opacity:0.88;font-family:'Helvetica Neue',Arial,sans-serif;font-weight:300;text-transform:none;font-style:italic}
/* The bolded wine words in the subs: the sub weight is 300, and the default strong{font-weight:bolder} only reaches 400 from there (CSS bolder mapping) — invisible. Force real bold. */
.dash-play-sub strong,.dash-community-sub strong{font-weight:700}
.dash-logout-btn{display:block;width:calc(100% - 32px);margin:0 16px 24px;padding:12px;background:transparent;color:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.2);border-radius:10px;font-size:13px;cursor:pointer;text-align:center;font-family:inherit;transition:all .15s}
.dash-logout-btn:active{transform:scale(0.94)}

/* ===== Unified "logo above a white card" screens =====
   auth · onboarding · entry · lobby · community hub · setup flow (colour / setup / role / version /
   region). ONE logo (80px, 20px below it, soft shadow — the brand mark lives once as a data-URI on
   #wmBrandLogo, the others receive its src at load) and ONE vertical rhythm: the logo+card group
   is centred in the area above the 100px nav-pill zone, so the card lands at the same height on
   every screen instead of each overlay picking its own offset. Overrides the per-screen values. */
img.wm-screen-logo{display:block;width:80px;height:80px;margin:0 auto 20px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.35))}
/* === Boot splash — the logo wheels in from the left (2026-08-26) === */
/* Sits above every screen (nav bar 324, quiz 322, results 250); the page behind stays hidden
   until the roll ends and the overlay fades. Background matches the native launch PNGs
   (#5e0c23) so native splash → this layer is seamless. */
#wmBootSplash{
  position:fixed;inset:0;z-index:600;background:#5e0c23;
  display:flex;align-items:center;justify-content:center;
  opacity:1;transition:opacity .38s ease;pointer-events:none;
}
#wmBootSplash.out{opacity:0}
/* 43vw ≈ 80% of the old static splash logo (it filled ~54% of the width) — the requested −20%. */
#wmBootSplash img{
  width:min(43vw,240px);height:auto;display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));
  animation:wmBootRoll .95s cubic-bezier(.22,.7,.3,1) both;
}
/* A wheel rolling rightwards spins clockwise: 1.5 turns over the travel reads as a true roll,
   not a slide. -90vw starts it fully off-screen on any phone. */
@keyframes wmBootRoll{
  from{transform:translateX(-90vw) rotate(-540deg)}
  to  {transform:translateX(0) rotate(0deg)}
}
/* …then the mark swells and dissolves (requested 2026-08-28). Runs as a SECOND animation with a
   delay, so the roll keeps its own easing; the wrapper still fades right behind it, which carries
   the burgundy away once the logo has gone. */
#wmBootSplash img{animation:wmBootRoll .95s cubic-bezier(.22,.7,.3,1) both, wmBootBloom .55s ease-in 1.05s both}
@keyframes wmBootBloom{
  from{transform:scale(1);opacity:1}
  to  {transform:scale(1.9);opacity:0}
}
@media (prefers-reduced-motion:reduce){ #wmBootSplash img{animation:none} }
.wm-screen-logo-wrap{text-align:center;margin:0}
.entry-overlay,.lobby-overlay,.auth-overlay{padding:20px 0 100px}
.onb-overlay{padding:20px 20px 100px}
.community-overlay.community-hub-overlay{padding:20px 0 100px}
/* Setup flow: column layout so the logo sits above the card; the group centres via auto margins on
   the first/last child (not justify-content) so a tall card — the full setup form — keeps its top
   reachable when it overflows. */
.setup-overlay{flex-direction:column;justify-content:flex-start;padding:20px 0 100px}
.setup-overlay > .setup-card{margin:0 auto}
.setup-overlay > :first-child{margin-top:auto}
.setup-overlay > :last-child{margin-bottom:auto}

/* ===== SCREEN HARMONY (2026-08-21) =====
   The five nav sections and every card screen share ONE system: one card width, one title and
   subtitle style, one button scale, and a logo pinned at the same spot on every screen with the
   card centred in the space below it (so cards of different heights no longer move the logo).
   Selectors are html-prefixed to outrank same-class rules in community.css / quiz.css
   regardless of stylesheet order. */
/* 1. One card */
html .entry-card,html .auth-card,html .onb-card,html .lobby-card,html .setup-card,html .community-card,html .quiz-modal,html .quiz-grapes{width:90%;max-width:400px}   /* .quiz-grapes rides along so the progress row above the quiz card always spans exactly the card */
html .entry-card,html .auth-card{padding:24px 20px}
/* 2. One title + subtitle */
html .entry-title,html .community-title,html .setup-title,html .onb-step-title,html .quiz-intro-title,html .quiz-done-title{font-family:var(--font-display);font-size:22px;line-height:1.2;letter-spacing:2px;color:#5e0c23;text-align:center;text-transform:uppercase;margin:0 0 6px}
html .entry-sub,html .community-sub,html .setup-sub,html .onb-step-sub{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#888;text-align:center;margin:0 0 18px}
/* 3. One button scale — the entry screen is the reference (16px pad / 15px / 2px tracking / r10) */
html .entry-btn,html .quiz-intro-actions .quiz-cta{padding:16px;font-size:16px;letter-spacing:2px;border-radius:10px}   /* the quiz intro's secondary button opted back out of this scale — it carries its own, smaller one */
/* Role explainer inside the two entry buttons (2026-08-25): a small sentence-case line under the
   big label. Sub-card submit buttons carry no desc span and are untouched. */
html .entry-btn .entry-btn-desc{display:block;margin-top:4px;font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:300;font-style:italic;letter-spacing:0.5px;text-transform:none;line-height:1.4;opacity:0.95}   /* same dress as the community-hub button descs (user-matched) */
html .quiz-intro-actions{width:100%;max-width:none}
html .community-hub-btn{min-height:85px;padding:12px 14px;border-radius:10px;margin-bottom:10px}   /* 72→85 = the two-line buttons' real height, so the one-line MES VINS matches (2026-08-26); this html-prefixed rule is the live one — it outranks the community.css base */
html .community-hub-btn-title{font-size:16px;letter-spacing:2px}
html .community-hub-btn-desc{font-size:12px}
html .setup-card button[onclick^="select"]:not(.setup-timer-btn):not(.wine-color-btn){padding:16px!important;font-size:16px!important;letter-spacing:2px!important;border-radius:999px!important}   /* pill — must repeat the global button radius (main.css): this rule is !important and outranks it */   /* the timer row (selectSetupTimer) keeps its own compact scale */
/* 4. Static logo: pinned at the top of every card screen; the card centres in the space below.
   Replaces the earlier "centre the whole logo+card group" rhythm. */
html .entry-overlay,html .lobby-overlay,html .auth-overlay,html .onb-overlay,html .setup-overlay,html .community-overlay.community-hub-overlay,html .quiz-overlay{justify-content:flex-start;padding-top:24px;padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}   /* nav-bar clearance + home-indicator inset */
html .entry-overlay > .wm-screen-logo-wrap,html .lobby-overlay > .wm-screen-logo-wrap,html .auth-overlay > .wm-screen-logo-wrap,html .onb-overlay > .wm-screen-logo-wrap,html .setup-overlay > .wm-screen-logo-wrap,html .community-hub-overlay > .wm-screen-logo-wrap,html .quiz-overlay > .wm-screen-logo-wrap{margin-top:16px;margin-bottom:0}   /* the logo breathes a little below the status-bar strip (requested) */
/* Short-card screens: their cards leave a tall empty band under the pinned logo, so the logo can
   step down into it. The AUTH screen still does (44px, requested 2026-08-26). The LOBBY dropped
   its deeper 72px on 2026-08-31 — the croupier walks straight from CRÉER UNE PARTIE into it, and
   the mark jumping down the screen between the two read as a different layout; its card also
   carries the invite button now, so the band it was filling is gone. It shares the 16px above. */
html .auth-overlay > .wm-screen-logo-wrap{margin-top:44px}
html .wm-screen-logo-wrap + *{margin-top:auto}
html .wm-screen-logo-wrap ~ :last-child{margin-bottom:auto}
html .entry-overlay > .entry-card{margin-top:auto;margin-bottom:auto}   /* three alternative cards, one visible */
/* harmony follow-ups (measured at 375x812) */
html .onb-overlay{padding-left:0;padding-right:0}                                   /* card width 90% of the viewport like the others */
html .setup-overlay > .setup-card{margin-top:auto;margin-bottom:auto}
html .setup-overlay > .room-code-dock + .setup-card{margin-top:0}   /* code dock sits right on top of the card */                /* beats .setup-overlay > .setup-card{margin:0 auto} */
/* Round-role screen: the two role choices are CARDS, not pills — they carry a title and a
   subtitle, and the app-wide capsule (main.css `button{border-radius:999px!important}`) rounded
   them into lozenges. !important is the only way past that rule; the 14px matches their inline
   radius, which the capsule had been overriding all along (requested 2026-08-31). */
#btnRoleHost,#btnRolePlayer{border-radius:14px!important}
/* Wine-setup screen only (requested 2026-08-31): no logo, and the card starts at the top of the
   screen instead of floating in the middle — the form is long, and the logo was pushing its first
   fields below the fold. The id out-ranks the shared `.setup-overlay > .setup-card{margin:auto}`
   centring above; the round-role screen keeps its logo and its centring. */
#setupScreen > .wm-screen-logo-wrap{display:none}
html #setupScreen{padding-top:8px}
html #setupScreen > .setup-card{margin-top:0;margin-bottom:auto}
/* Centred between logo and bottom padding, then nudged 22px up (requested 2026-08-26 ×2 — an
   earlier fixed margin-bottom lift was silently dead, overridden by this very rule). transform
   moves only the paint, so the flex centring maths stays untouched. */
html .auth-overlay > .auth-card{margin-top:auto;margin-bottom:auto;transform:translateY(-22px)}
html .auth-btn,html .onb-btn,html .onb-card button{padding:16px;font-size:16px;letter-spacing:2px;border-radius:10px}   /* #authBtns dropped from the big scale — the sign-in stack keeps its own compact size (requested) */
/* cards a little higher on the two hub screens + the lobby waiting room (requested): more room
   reserved below shifts the centred card up */
html .entry-overlay,html .community-overlay.community-hub-overlay,html .lobby-overlay{padding-bottom:180px}
html .entry-overlay{padding-bottom:250px}   /* the games-entry cards a notch higher still (requested 2026-08-25) */
html .entry-overlay > #entryHost{transform:translateY(24px)}   /* the CRÉER card is taller than its landing sibling and rode too high under the shared 250px lift — nudged back down (requested 2026-08-26); paint-only, the centring maths stays */

/* The dash inside «WINE ME – CASINO OF WINES» (dash.playLabel, rendered via data-i18n-html on
   the dashboard button and the six screen titles): the display faces draw even an en dash as a
   heavy bar, so the dash itself steps down to a thin grotesque — smaller, light, slightly raised. */
.wm-title-dash{font-family:'Helvetica Neue',Arial,sans-serif;font-weight:300;font-size:.72em;letter-spacing:0;position:relative;top:-0.08em}

/* ===== Lives shop (2026-08-29): balance + one-time bottle refills ===== */
/* «VOS VIES 12/12» — both figures the SAME size: current count bordeaux, capacity gold. */
.lshop-title{font-family:var(--font-display);font-size:20px;letter-spacing:1.5px;text-transform:uppercase;color:#5e0c23;text-align:center;margin:2px 0 0}
.lshop-cur{color:#5e0c23}
.lshop-total{color:#b0851c}
.lshop-hero{display:flex;justify-content:center;margin:6px 0 0}
/* The hero bottle lies on its side — rotated counter-clockwise (requested 2026-08-30). The
   wrap gives the rotated image a horizontal layout box so the flex row stays tidy. */
.lshop-bottle-wrap{width:118px;height:52px;flex:none;display:flex;align-items:center;justify-content:center}
.lshop-bottle{width:43px;height:auto;flex:none;transform:rotate(-90deg);filter:drop-shadow(-4px 1px 5px rgba(94,12,35,0.28))}   /* pre-rotation offset (-4,1) lands visually below-right AFTER rotate(-90deg) — the transform rotates the shadow too (2026-08-30) */
/* One wobble when the screen opens (requested 2026-08-31) — the bottle rocks and settles, like a
   flask just set down. Every keyframe carries the base rotate(-90deg): the animation replaces the
   transform outright, so leaving it out would snap the bottle upright mid-shake. openLivesShop
   adds the class on the freshly rendered node, and the 30s countdown re-render drops it — which
   is exactly right: it must play on entry, not every half minute. */
.lshop-bottle.lshop-shake{animation:lshopShake .75s cubic-bezier(.36,.07,.19,.97) both}
@keyframes lshopShake{
  0%  {transform:rotate(-90deg)}
  10% {transform:rotate(-98deg)}
  25% {transform:rotate(-82deg)}
  40% {transform:rotate(-94.5deg)}
  55% {transform:rotate(-86.5deg)}
  70% {transform:rotate(-91.8deg)}
  85% {transform:rotate(-88.7deg)}
  100%{transform:rotate(-90deg)}
}
.lshop-cap{text-align:center;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#8a6a20;font-weight:700;margin-top:2px}
/* One grey-caps status line: RÉGÉNÉRATION : <strong>state</strong> (2026-08-30). */
.lshop-regen{text-align:center;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#8d867c;margin-top:6px}
.lshop-regen strong{font-weight:700;color:#6f6a63}
.lshop-line{text-align:center;font-size:12.5px;color:#6b4e1a;margin-top:4px}
.lshop-upsell{margin:12px 0 2px;padding:10px 12px;border-radius:12px;background:#fdf8f0;border:1.5px solid #e3cf9c;font-size:12.5px;line-height:1.5;color:#8a6a20;text-align:center}
/* One flex row per format: the pre-sliced bottle strip, the lives, the price — all on one
   vertical centreline (2026-08-30). The strips keep the chart's full width, so the bottles'
   relative sizes survive; the empty right side of the small strips is the alignment air. */
.lshop-prow{display:flex;align-items:center;gap:4px;margin:7px 0}
.lshop-prow-img{width:63.8%;flex:none;height:auto;display:block}   /* +10% (requested 2026-08-30); the lead pull-back constant in dashboard.js matches */
/* Barely-there leader from the bottle's midline over to the price. */
.lshop-lead{flex:1;min-width:6px;height:1px;background:#eee3cf}
.lshop-plus{flex:none;font-weight:700;font-size:11px;color:#2e7d32;white-space:nowrap}
.lshop-buy{flex:none;min-width:56px;box-sizing:border-box;text-align:center;padding:5px 6px;border-radius:999px;border:1.5px solid #c9a550;background:#fdf8f0;color:#5e0c23;font-weight:700;font-size:12px;font-family:'Helvetica Neue',Arial,sans-serif;cursor:pointer;white-space:nowrap}
.lshop-buy:active{background:#f3e6c5;border-color:#8a6a20}
/* FERMER — a bare grey word under the list, like the quiz done-screen one: no fill, no frame,
   and opted out of the global button shadow (a shadow under a bare word reads as dirt). */
.lshop-close{
  display:block;margin:10px auto 0;padding:5px 18px;
  background:none;border:none;box-shadow:none;cursor:pointer;
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:12.5px;font-weight:400;   /* not bold — same weight as the quiz FERMER (requested 2026-08-30) */
  letter-spacing:2px;text-transform:uppercase;color:#6f6a62;line-height:1.2;
  transition:transform .15s,color .15s;
}
.lshop-close:active{transform:scale(0.96);color:#3a0a15}
/* FREE variant only (.lshop-free, set in dashboard.js): it carries the Club upsell box on top of
   the same ten refill rows, which pushed the last bottles out of the card. The block below buys
   back ~60px — a tighter upsell box and 4px less air between rows — so the free card ends inside
   the card like the Club one, with no inner scroll (2026-08-30). The Club card is untouched. */
.lshop-free .lshop-title{margin-top:0}
.lshop-free .lshop-hero{margin-top:2px}
.lshop-free .lshop-upsell{margin:8px 0 0;padding:8px 12px;line-height:1.4}   /* 1.4 pays off on the narrow screens where the sentence takes a third line */
.lshop-free .know-section-title{margin-top:8px}
.lshop-free .lshop-prow{margin:3px 0}
/* The shop card breathes a little taller than the quiz default (requested 2026-08-30), and the
   overlay gives it nearly the whole screen: a slim top clearance so all ten bottles fit without
   inner scroll. The BOTTOM one is the shared one (requested 2026-08-30): 84 here plus the card
   own 6px margin = the 90px that the Academy and the quiz result cards clear, so the three white
   cards end at one height above the nav pill. */
html #livesShopOverlay{padding-top:calc(8px + env(safe-area-inset-top,0px));padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
/* Pinned to the top and stretched to the whole available height (requested 2026-08-30). */
#livesShopOverlay::before{margin-top:0}
#livesShopOverlay .quiz-modal{margin-bottom:6px;height:100%}
#livesShopOverlay .quiz-modal-inner{padding-top:20px;padding-bottom:14px}   /* the FERMER button now fills what the 28px of padding held (2026-08-30) */
#dashStatLives{cursor:pointer}

/* Lobby: COMMENCER greyed until a player joins (2026-08-29). !important outguns the global
   button shadow/capsule rules and the bordeaux .entry-btn-host gradient. */
#lobbyStartBtn:disabled{background:#d8d3cc!important;border-color:#c9c3ba!important;color:#8d867c!important;box-shadow:none!important;transform:none!important;cursor:default}