/* community.css — Wine Me Community: dashboard button, hub, mystère creation/list/guess */

/* Searchable country/region combobox over the mystère #mystereRegion <select> (type-to-filter). */
.region-combo{position:relative}
.region-combo-input{background-image:none}
.region-combo-list{position:absolute;left:0;right:0;top:100%;z-index:60;background:#fff;border:1px solid #c9a550;border-radius:8px;max-height:190px;overflow-y:auto;box-shadow:0 6px 18px rgba(0,0,0,0.2)}
.region-combo-item{padding:9px 12px;font-size:14px;color:#3d2b10;cursor:pointer;border-bottom:1px solid rgba(201,165,80,0.18)}
.region-combo-item:last-child{border-bottom:none}
.region-combo-item:active{background:#faf3e0}
@media (hover: hover){.region-combo-item:hover{background:#faf3e0}}
.region-combo-empty{padding:9px 12px;font-size:13px;color:#9a8c70}

/* === Dashboard entry button (under JOUER) === */
.dash-community-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  position:relative;
  width:calc(100% - 32px);min-height:68px;margin:0 16px 16px;padding:14px;
  background:linear-gradient(135deg,#c9a550,#8a6a20);
  color:#fdf8f0;
  border:2px solid #fdf8f0;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-community-btn:active{transform:scale(0.94);box-shadow:0 4px 12px rgba(0,0,0,0.35)}
.dash-community-label{font-size:18px;letter-spacing:2px}
.dash-community-sub{font-size:11.5px;letter-spacing:0.5px;opacity:0.92;font-family:'Helvetica Neue',Arial,sans-serif;font-weight:300;text-transform:none;font-style:italic}
.dash-community-badge{
  position:absolute;top:-10px;right:-10px;
  min-width:34px;height:34px;padding:0 9px;
  background:#5e0c23;color:#e8d5a0;
  border-radius:17px;border:3px solid #fdf8f0;
  font-size:16px;font-weight:700;line-height:28px;text-align:center;
  font-family:var(--font-display);
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
  animation:dashCommunityBadgePulse 2.4s ease-in-out infinite;
}
@keyframes dashCommunityBadgePulse{
  0%,100%{transform:scale(1);box-shadow:0 2px 8px rgba(0,0,0,0.4)}
  50%{transform:scale(1.08);box-shadow:0 2px 14px rgba(94,12,35,0.6)}
}

/* === Historique: distinguish community-mystery parties from real-wine parties === */
.dash-party-item-community{
  background:#faecc8 !important;
  border-left:3px solid #c9a550;
}
.dash-party-item-community .dash-party-num{color:#8a6a20}
.dash-party-item-community .dash-party-meta-community-tag{
  display:inline-block;font-size:9px;letter-spacing:1.5px;
  background:#c9a550;color:#fff;padding:2px 7px;border-radius:8px;
  margin-left:6px;font-weight:700;vertical-align:middle;
}

/* === Generic community overlay (used for list, identity, color, setup, desc, guess) === */
.community-overlay{
  position:fixed;inset:0;background:#5e0c23;z-index:308;
  display:none;flex-direction:column;align-items:center;
  overflow-y:auto;padding:24px 0 24px;
}
.community-overlay.open{display:flex}
/* The overlay is FIXED, so the status-bar strip lives inside it — body padding never reaches it.
   Count the notch in the top padding, otherwise the vertically centred card is pushed visually
   high by that empty strip (requested 2026-08-29; the hub keeps its own padding from screens.css,
   and on the web the inset is 0, so nothing moves there). */
.community-overlay{padding-top:calc(24px + env(safe-area-inset-top,0px))}
/* The guess screen (result banner + description card) reads top-down — pin it to the top
   instead of centring; spare space stays below (requested 2026-08-30). */
#mystereGuessScreen > :first-child{margin-top:0}
/* Center the card group vertically when it fits, but keep the TOP reachable when the content
   is taller than the viewport. A scrollable flex column with justify-content:center clips the
   top of overflowing content (scrollTop can't rise above the centered origin), which made tall
   description pages — full tasting note + attempts + comments — open mid-card with no way to
   scroll back up. Auto margins on the outer children center the same way without that clipping. */
.community-overlay > :first-child{margin-top:auto}
.community-overlay > :last-child{margin-bottom:auto}
/* Hub: logo sits above the card (same padding as the base overlay). */
.community-overlay.community-hub-overlay{
  padding:24px 0 24px;
}
.community-hub-logo{
  text-align:center;margin-bottom:0;   /* the img carries the 20px gap (img.wm-screen-logo) */
}
.community-hub-logo img{
  width:80px;height:80px;display:block;margin:0 auto 20px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.35));
}
.community-card{
  background:#fff;border-radius:24px;padding:24px 20px;
  max-width:420px;width:90%;margin:0 auto 16px;
  border:2px solid #c9a550;box-shadow:0 8px 32px rgba(0,0,0,0.3);
}
.community-title{
  font-family:var(--font-display);font-size:20px;color:#5e0c23;
  text-align:center;letter-spacing:2px;margin-bottom:4px;
}
.community-sub{
  font-size:11px;color:#888;text-align:center;
  letter-spacing:1.5px;margin-bottom:18px;
  white-space:pre-line;   /* a newline in a dictionary string becomes a second line */
}
/* Hub subtitle, 2nd line ("DES VINS VIRTUELS DANS LE MONDE ENTIER"): its own block so the gap
   below the DEVINEZ · CRÉEZ · PARTAGEZ line is set here, not by line-height — a wrapped 2nd line
   on a narrow screen then keeps its normal internal leading. */
.community-sub-l2{display:block;margin-top:5px}
/* Emphasis inside the grey subtitles: bold alone barely reads at 11px on #888, so it darkens too. */
.community-sub strong,.entry-sub strong{font-weight:700;color:#666}
.community-back-link{
  display:block;text-align:center;font-size:11px;color:#e8d5a0;
  text-decoration:none;letter-spacing:1.5px;margin-top:8px;padding:8px;
}
.community-back-link:active{opacity:0.6}

/* === Hub === */
/* Base: all 3 buttons share padding, min-height, font sizes and border thickness (2px,
   matching the dashboard JEUX/COMMUNITY buttons). Only background, border color, and
   the title/desc text colors differ between the variants below. */
.community-hub-btn{
  position:relative; /* for badge */
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:100%;min-height:85px;padding:14px;margin-bottom:12px;   /* 78→85: the tallest content (two-line subtitle) runs 84.6px, so the one-line MES VINS button now matches its siblings instead of sitting 13px shorter (2026-08-26) */
  background:linear-gradient(135deg,#5e0c23,#8a1538);
  color:#fff;
  border:2px solid #c9a550;border-radius:12px;
  font-family:var(--font-display);
  cursor:pointer;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);   /* floating (2026-08-27) */
}
.community-hub-btn-badge{
  position:absolute;top:-11px;right:-11px;
  min-width:26px;height:26px;padding:0 7px;
  background:#c9a550;color:#5e0c23;
  border-radius:13px;border:2.5px solid #fdf8f0;
  font-size:13px;font-family:'Helvetica Neue',Arial,sans-serif;font-weight:700;
  line-height:22px;text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
  pointer-events:none;white-space:nowrap;
}
/* MES VINS shows two separate indicators side by side: new players + new comments */
.community-hub-badges{
  position:absolute;top:-11px;right:-11px;
  display:flex;gap:5px;align-items:center;pointer-events:none;
}
.community-hub-badges .community-hub-btn-badge{position:static;top:auto;right:auto}
/* Playable (wines to discover) — gold with a glass icon. New players — gold.
   New comments — bordeaux on cream. */
.community-hub-badge-playable::before{content:'🍷 '}
.community-hub-badge-players::before{content:'👤 '}
.community-hub-badge-comments{background:#fdf8f0;color:#5e0c23;border-color:#c9a550}
.community-hub-badge-comments::before{content:'💬 '}
.community-hub-btn:active{transform:scale(0.96);box-shadow:0 4px 16px rgba(0,0,0,0.3)}
.community-hub-btn.alt{
  background:linear-gradient(135deg,#fdf8f0,#f5e6b8);
  color:#8a6a20;
  border-color:#c9a550;
}
/* Third "view mine" button — bordeaux outline on white card */
.community-hub-btn.mine{
  background:transparent;
  color:#5e0c23;
  border-color:#5e0c23;
  margin-bottom:0;
}
.community-hub-btn.mine:active{transform:scale(0.97);box-shadow:0 2px 8px rgba(94,12,35,0.2)}
.community-hub-btn-title{font-size:18px;letter-spacing:2px}
.community-hub-btn-desc{
  font-size:12.5px;letter-spacing:0.5px;
  font-family:'Helvetica Neue',Arial,sans-serif;font-weight:300;
  opacity:0.95;font-style:italic;text-transform:none;
  text-align:center;line-height:1.4;
  color:#e8d5a0;  /* default (DEVINER): cream on bordeaux */
}
.community-hub-btn.alt .community-hub-btn-desc{color:#5e0c23}      /* CRÉER: bordeaux on cream */
.community-hub-btn.mine .community-hub-btn-desc{color:#5e0c23}     /* MES: bordeaux on white */

/* === Identity card === */
.community-input{
  width:100%;padding:11px 18px;   /* side padding grew with the radius — a capsule must not crowd its text */
  border:1.5px solid #c9a550;border-radius:999px;   /* capsule, like the buttons (requested 2026-08-25) */
  font-size:14px;color:#5e0c23;background:#fdf8f0;
  font-family:inherit;box-sizing:border-box;margin-bottom:10px;
}
.community-input:focus{outline:none;border-color:#5e0c23}
.community-input::placeholder{color:#b8a880;font-style:italic}
.community-label{
  font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:#5e0c23;font-weight:700;margin-bottom:6px;margin-top:10px;
}
/* Read-only value box (the creator name — always the profile name, never editable). Dressed grey
   rather than in the editable gold-on-cream so it reads as a fact, not a field (requested). */
.community-input-static{
  cursor:default;display:flex;align-items:center;min-height:44px;font-weight:600;
  background:#f1f1f1;border-color:#d4d4d4;color:#6f6f6f;box-shadow:0 5px 14px rgba(0,0,0,0.15), 0 2px 5px rgba(0,0,0,0.08);   /* soft float (2026-08-27) */
}
.community-loc-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.community-loc-row>*{min-width:0}
.community-anon-toggle{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;background:#fdf8f0;
  border:1.5px solid #c9a550;border-radius:999px;   /* capsule, matching the fields it sits between */
  cursor:pointer;font-size:13px;color:#5e0c23;
  margin-bottom:12px;
  transition:background .15s;
  user-select:none;
}
.community-anon-toggle{box-shadow:0 5px 14px rgba(0,0,0,0.15), 0 2px 5px rgba(0,0,0,0.08)}   /* soft float (2026-08-27) */
.community-anon-toggle.on{background:#5e0c23;color:#e8d5a0;border-color:#e8d5a0}
.community-anon-toggle .chk{
  display:inline-block;width:18px;height:18px;border:2px solid currentColor;
  border-radius:4px;position:relative;flex-shrink:0;
}
.community-anon-toggle.on .chk::after{
  content:'';position:absolute;left:3px;top:0;width:6px;height:11px;
  border-right:2px solid #e8d5a0;border-bottom:2px solid #e8d5a0;
  transform:rotate(45deg);
}
.community-btn-primary{
  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:8px;text-align:center;
  transition:transform .15s,box-shadow .15s;
}
.community-btn-primary:active{transform:scale(0.96);box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.community-btn-primary[disabled]{opacity:0.45;cursor:not-allowed}
.community-btn-secondary{
  display:block;width:100%;padding:11px;background:transparent;
  color:#5e0c23;border:1.5px solid #c9a550;border-radius:10px;
  font-size:12px;letter-spacing:1.5px;font-family:var(--font-display);font-weight:600;
  cursor:pointer;margin-top:8px;text-align:center;
  transition:background .15s,transform .15s;
}
.community-btn-secondary:active{transform:scale(0.97);background:#fdf8f0}
/* Back-navigation buttons — sans-serif, uppercase, same visual weight as secondary */
.community-btn-back{
  display:block;width:100%;padding:11px;background:transparent;
  color:#5e0c23;border:1.5px solid #c9a550;border-radius:10px;
  font-size:11px;letter-spacing:1.5px;
  font-family:'Helvetica Neue',Arial,sans-serif;font-weight:400;
  text-transform:uppercase;
  cursor:pointer;margin-top:8px;text-align:center;
  transition:background .15s,transform .15s;
}
.community-btn-back:active{transform:scale(0.97);background:#fdf8f0}
/* Frameless variant (colour screen): a quiet grey exit, no fill, no frame, no bold, and out of the
   global button shadow — a shadow under a bare word reads as dirt. */
.community-btn-back.community-btn-plain{background:transparent;border-color:transparent;box-shadow:none;color:#999;font-weight:400}
.community-btn-back.community-btn-plain:active{background:transparent}
/* Round variant (identity screen): the label becomes an arrow in a circle, the same control the
   entry screen uses. Fixed square + flex centring, so the glyph sits dead centre whatever the row
   does around it; flex:0 0 auto keeps the row from stretching it into an oval. */
.community-btn-back.community-btn-round{
  flex:0 0 auto;width:52px;min-width:52px;height:52px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:linear-gradient(135deg,#fdf8f0,#f5e6b8);
}
/* "Write it myself" — cream button (same palette as the regen button) with the display font of the
   primary GENERATE button. */
.community-btn-write{
  font-family:var(--font-display);font-size:14px;letter-spacing:2px;padding:13px;
  background:linear-gradient(135deg,#fdf8f0,#f5e6b8);color:#b8860b;
  border:2px solid #c9a550;
}
/* Notice under "Write it myself": a self-written description requires a wine photo (authenticity). */
.community-write-note{
  margin:8px 4px 2px;text-align:center;font-size:11.5px;font-style:italic;
  line-height:1.5;letter-spacing:0.2px;color:#9a8a6a;
}
/* Peek-fee amount shown on the mystery Back button (−10 GB for leaving without playing) */
.mystere-back-cost{font-weight:700;color:#8a1538;opacity:0.9;margin-left:2px}
/* Peek-fee explanation caption under the Back button (replaces the old "?" tooltip chip). */
.mystere-back-note{margin:10px 10px 2px;text-align:center;font-size:11px;font-style:italic;line-height:1.75;letter-spacing:0.3px;color:#5e0c23}   /* bordeaux (requested 2026-08-26) */
/* Even 12px gaps between the four control boxes on the mystery detail card */
#mystereGuessCard .mystere-guess-play-btn{margin-top:12px}
/* «Proposer à un ami de jouer» — a quiet gold-framed share button above the back control on a
   mystery card (2026-08-30). */
.mystere-invite-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:14px 0 0;padding:11px 14px;
  background:#fdf8f0;border:1.5px solid #c9a550;color:#5e0c23;font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:12.5px;font-weight:700;letter-spacing:0.6px;cursor:pointer}
.mystere-invite-btn:active{background:#f3e6c5;transform:scale(0.98)}
#mystereGuessCard .mystere-back-btn{margin-top:12px !important}
/* Régénérer button — cream fill, thicker border, same font size as primary */
.community-btn-regen{
  display:block;width:100%;padding:14px;
  background:linear-gradient(135deg,#fdf8f0,#f5e6b8);
  color:#b8860b;border:2px solid #c9a550;border-radius:10px;
  font-size:14px;font-family:var(--font-display);letter-spacing:2px;
  cursor:pointer;margin-top:0;text-align:center;
  transition:transform .15s,box-shadow .15s;
}
.community-btn-regen:active{transform:scale(0.96);box-shadow:0 2px 8px rgba(0,0,0,0.2)}
/* Desc screen, standalone regen (the back+regen row is gone — back moved below PUBLIER as a text
   link): restore the stack gap the row used to provide. And PUBLIER keeps its CASE while showing
   the transient "Publication…" label (requested 2026-08-26) — a CSS transform self-heals for all
   six languages instead of re-uppercasing six dict strings. */
#mystereDescScreen .community-btn-regen{margin-top:10px}
#mysterePublishBtn{text-transform:uppercase}
.community-btn-regen[disabled]{opacity:0.45;cursor:not-allowed}
/* "Use my location" — a quiet text link under the city/country pair (identity screen); same
   voice as the other frameless links, small enough not to compete with SUIVANT. */
.mystere-geo-btn{
  display:block;margin:8px auto 0;padding:8px 12px;
  background:none;border:none;box-shadow:none;cursor:pointer;
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:500;
  color:#8a6a20;letter-spacing:0.4px;
}
.mystere-geo-btn:active{opacity:0.6}
.mystere-geo-btn[disabled]{opacity:0.45;cursor:default}
/* Empty error lines collapse — an idle one still cost a 22px band of air above the buttons on
   the identity screen (2026-08-26). It reappears with its margin the moment a message lands. */
.community-error:empty{display:none}
.mystere-gen-limit-note{margin-top:6px;font-size:11px;color:#ae182b;text-align:center;font-style:italic}
/* IDENTITY: the only community screen besides the hub that carries the brand mark, and it opens
   straight out of it — so it takes the hub geometry exactly (requested 2026-08-30): the mark
   pinned 16px under the status-bar strip and the card centred in what is left above the same
   180px nav-bar clearance (screens.css). Without this the logo kept the generic overlay auto
   margin (.community-overlay > :first-child), so the free space was split three ways and both
   the mark and the card sat visibly lower than on the hub. */
html #mystereIdentityScreen{padding-bottom:180px}
html #mystereIdentityScreen > .wm-screen-logo-wrap{margin-top:16px;margin-bottom:0}
#mystereIdentityScreen .community-btn-row{margin-top:14px}   /* with the empty error collapsed, the plain 10px read too tight under the place fields */
.community-error{
  color:#ae182b;font-size:11px;text-align:center;margin-top:8px;
  min-height:14px;
}

/* === Description card === */
.community-desc-textarea{
  width:100%;min-height:280px;
  padding:14px;border:1.5px solid #c9a550;border-radius:10px;
  font-size:13px;line-height:1.6;color:#3a0a15;background:#fdf8f0;
  font-family:inherit;box-sizing:border-box;
  resize:vertical;
}
.community-desc-textarea:focus{outline:none;border-color:#5e0c23}
/* Write-it-myself structured editor — one gold-framed "window" like the free textarea, but with
   fixed section headings (plain divs, undeletable) and an auto-growing field under each. */
.mystere-manual-editor{
  width:100%;box-sizing:border-box;
  padding:14px;border:1.5px solid #c9a550;border-radius:10px;
  background:#fdf8f0;text-align:left;
}
.mystere-manual-h{
  font-weight:700;color:#3a0a15;font-size:13px;line-height:1.6;
  margin-top:10px;
}
.mystere-manual-h:first-child{margin-top:0}
.mystere-manual-ta{
  width:100%;box-sizing:border-box;display:block;
  border:none;border-bottom:1px dashed rgba(201,165,80,0.5);border-radius:0;
  background:transparent;padding:2px 0 6px;
  font-size:13px;line-height:1.6;color:#3a0a15;font-family:inherit;
  resize:none;overflow:hidden;min-height:34px;
}
.mystere-manual-ta:focus{outline:none;border-bottom-color:#5e0c23}
.mystere-manual-ta::placeholder{color:#c0b295}
/* Encouragement note under the manual editor ("other players will rate your description"). */
.mystere-manual-hint{
  margin-top:8px;font-size:11.5px;line-height:1.5;
  color:#8a6e2a;font-style:italic;text-align:center;
}
.community-desc-loading{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:240px;color:#888;font-size:12px;letter-spacing:1px;text-align:center;
}
.community-desc-spinner{
  width:36px;height:36px;border:3px solid rgba(94,12,35,0.2);
  border-top-color:#5e0c23;border-radius:50%;
  animation:scanSpin 0.8s linear infinite;margin-bottom:12px;
}
/* Buttons sharing one line. The children are full-width blocks with their own top margin, so the
   row neutralises those and hands sizing to flex. align-items:stretch keeps buttons the same
   height despite differing padding, and a back button keeps to its own label rather than claiming
   an equal share — the forward action deserves the width (rows added 2026-08-25). */
.community-btn-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin-top:10px}
.community-btn-row>*{flex:1;margin-top:0!important;width:auto}
.community-btn-row .community-btn-back{flex:0 1 auto;min-width:0;padding-left:14px;padding-right:14px}
/* Long-label variant. "← Changer de couleur" next to "GÉNÉRER LA DESCRIPTION →" simply does not fit
   a phone at full size — the pair wrapped onto two lines, which is the thing the row exists to
   avoid. So: hold the line (nowrap), let each label wrap INSIDE its own button, and step the type
   down one notch, which turns a three-line-tall pair into a two-line one. Measured, not guessed.
   The short-label rows (identity) keep the full scale and stay single-line. */
.community-btn-row--compact{flex-wrap:nowrap}
.community-btn-row--compact>*{min-width:0;white-space:normal}
/* Widths as a 4:5 grow ratio rather than fixed shares, so the row also survives its partner
   disappearing: manual-description mode hides RÉGÉNÉRER, and a back button left with a fixed 44%
   would sit half-width against empty space — with grow it simply fills the line. */
.community-btn-row--compact .community-btn-back{flex:4 1 0;font-size:10.5px;letter-spacing:1px;padding-left:10px;padding-right:10px}
.community-btn-row--compact .community-btn-primary,
.community-btn-row--compact .community-btn-regen{flex:5 1 0;font-size:13px;letter-spacing:1px}

/* === List card === */
.mystere-list-card{
  display:flex;align-items:stretch;
  background:#fdf8f0;border:1.5px solid #c9a550;border-radius:12px;
  margin-bottom:10px;overflow:visible;   /* the status tag straddles the top border (2026-08-27) — the colour bar rounds its own corners now */
  cursor:pointer;transition:transform .15s,box-shadow .15s;
  text-align:left;
  position:relative;
  box-shadow:0 9px 22px rgba(0,0,0,0.234), 0 3px 7px rgba(0,0,0,0.117);   /* floating (2026-08-27) */
}
.mystere-list-card:active{transform:scale(0.98);box-shadow:0 4px 16px rgba(0,0,0,0.2)}
.mystere-list-color{
  width:8px;flex-shrink:0;border-radius:10.5px 0 0 10.5px;   /* card radius 12 − 1.5 border; used to rely on the card's overflow:hidden */
}
.mystere-list-color.rouge{background:#5e0c23}
.mystere-list-color.blanc{background:#f5e6b8}
.mystere-list-color.rose{background:#e89aa8}
.mystere-list-color.sparkling{background:linear-gradient(180deg,#e8d5a0,#c9a550)}
.mystere-list-body{
  flex:1;padding:12px 14px;min-width:0;
}
.mystere-list-row1{
  display:flex;align-items:flex-start;justify-content:space-between;gap:6px;   /* top-aligned: with a wrapping place the badge hugs the first line instead of floating mid-block (2026-08-26) */
  font-size:11px;color:#3a3a3a;letter-spacing:1px;text-transform:uppercase;   /* very dark grey (requested 2026-08-26), matching the job line below */
  margin-bottom:6px;
}
/* time + place share the left slot (the authored badge moved to the card corner, 2026-08-26) */
.mystere-list-r1l{display:inline-flex;align-items:baseline;gap:7px;min-width:0;white-space:nowrap}   /* baseline: the time reads on the place's FIRST line, not centred against the wrapped block (2026-08-26). The bare time text itself never wraps — the place span wraps instead */
/* Place, next to the time — one continuous line with it, so it inherits the strip's size, colour
   and weight and overrides nothing but the case and the tracking. (It briefly looked like a second
   line because this class collided with a dead legacy rule that made it italic and half a pixel
   bigger; that rule is gone.) Case is kept: the strip is uppercase, but city names — Paris, Ницца —
   are proper nouns and read wrong shouted, and 1px tracking is too airy for mixed case.
   Ellipsises rather than shoving the role badge off the right edge. */
.mystere-list-loc{text-transform:none;font-weight:700;letter-spacing:0.2px;white-space:normal;min-width:0}   /* tasting place in bold; NEVER truncated — wraps to a second line instead (requested 2026-08-26, replacing the earlier ellipsis) */
/* "How the description was authored" badge: ⭐ (AI kept) / hand-with-pen (creator-written) + a "?" help chip. */
.mystere-authored{display:inline-flex;align-items:center;gap:7px;vertical-align:middle}
.mystere-authored-ic{font-size:13px;line-height:1;display:inline-flex}
/* Creator-written mark: hand-with-pen icon, sized to match the ⭐ glyph. Red on light backgrounds
   (the default — every current badge spot is a light card); gold on dark, via a .wm-on-dark ancestor. */
.mystere-authored-ic .mystere-hand-ic{width:23.4px;height:23.4px;display:block;background:url('../assets/icons/handred.svg') center/contain no-repeat;transform:translateY(-2px)}
.wm-on-dark .mystere-authored-ic .mystere-hand-ic{background-image:url('../assets/icons/handgold.svg')}
/* font-family + letter-spacing are pinned so the "?" glyph looks identical everywhere — otherwise the
   description title (display serif font, letter-spacing:3px) would render a different-looking "?" than the list. */
.mystere-authored-help{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border:1px solid #b89b5a;border-radius:50%;font-size:9px;font-weight:700;line-height:1;color:#8a6e2a;cursor:pointer;font-family:'Helvetica Neue',Arial,sans-serif;letter-spacing:0;transform:translateY(-2px)}
@media (hover: hover){.mystere-authored-help:hover{background:#c9a550;color:#fff}}
/* The description-card title sits on a light card, so the "?" keeps the same gold-brown look as the
   list card (the old cream override was a leftover from when the title was on a dark background). */
/* Description star-rating (creator-written descriptions), shown under the desc card after playing.
   Mirrors the wine-rating stars (.star, results.css) with a smaller, card-friendly size. */
.mystere-rating{margin:2px 2px 14px;text-align:center}
.mystere-rating-title{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:#8a6e2a;margin-bottom:6px}
.mrate-stars{display:inline-flex;gap:7px}
.mrate-star{font-size:26px;line-height:1;color:#d9c9a3;cursor:pointer;user-select:none;transition:color .15s,transform .12s}
.mrate-star.active{color:#c9a550}
@media (hover: hover){.mrate-star:hover{transform:scale(1.15)}}
.mystere-rating-avg{margin-top:7px;font-size:13px;font-weight:600;color:#8a6e2a}
.mystere-rating-avg-star{color:#c9a550;font-size:20px;vertical-align:-1px}
.mystere-rating-none{font-weight:400;font-style:italic;color:#a08a5a}
.mystere-list-creator{
  font-size:13.5px;color:#5e0c23;font-weight:600;
  display:flex;align-items:center;gap:10px;
  margin-bottom:3px;
  letter-spacing:1.2px;
}
/* Bold wine-glass icon — matches mystery wine color. Width HUGS the art (31.18×56.4 → ~36px at
   h=64): the old 64px square centred the narrow glass with ~14px of dead air per side, wasting
   info-column width (same fix as the desc-card glass, 2026-08-26). */
.mystere-list-creator-glass{
  width:36px;height:64px;flex-shrink:0;display:inline-block;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.12));
}
/* Stacks name / level / loc vertically next to the glass */
.mystere-creator-info{
  display:flex;flex-direction:column;gap:3px;min-width:0;
}
/* Long names wrap onto a second line (clamped at 2); the ★ rating stays beside them, never pushed out. */
.mystere-list-creator-name{font-family:inherit;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word}
/* Name + lifetime author rating (★ 4.8) on one line; the rating never shrinks, long names wrap.
   The badge INHERITS the name's font metrics and both align at flex-start, so their first-line
   baselines coincide on every platform (center-aligning two different font boxes drifted on
   Windows); with a 2-line name the badge sits beside the first line. */
/* Explicit shared line-height: with "normal", Chrome and iOS Safari resolve the clamped name box
   and the badge box to different heights, drifting the baselines apart on one platform or the other.
   A fixed 1.4 on both makes the first-line baseline pure arithmetic — identical everywhere. */
.mystere-creator-nameline{display:flex;align-items:flex-start;gap:6px;min-width:0;line-height:1.4}
.mystere-creator-rating{flex-shrink:0;color:#c9a550;font-weight:700;white-space:nowrap;line-height:inherit}
.mystere-creator-rating:empty{display:none}
/* Level span is just a wrapper — children carry the actual style */
.mystere-list-creator-level,.mystere-desc-creator-level{line-height:1.4}
/* "Niv. X" — cream text on small burgundy pill */
.mystere-creator-lvl-num{
  display:inline-block;
  background:#5e0c23;color:#e8d5a0;
  font-weight:700;font-size:10px;
  padding:1px 5px;border-radius:3px;
  letter-spacing:0.5px;
  font-family:'Helvetica Neue',Arial,sans-serif;
  vertical-align:middle;line-height:1.5;
}
/* Level name in uppercase gold */
.mystere-creator-lvl-name{
  font-size:10px;font-weight:400;
  color:#8a6a20;letter-spacing:1px;
  text-transform:uppercase;
  font-family:'Helvetica Neue',Arial,sans-serif;
  vertical-align:middle;
}
/* Location line inside the info column — non-bold, small gap above */
/* Opt-in workplace (Profil → "Afficher dans le profil") — sits directly under the level badge. */
/* Job + workplace: quiet grey italic, matching the city line below it and the same line on the quiz
   leaderboard (requested 2026-08-25). :empty hides the backfill placeholder so a card whose author
   has no public workplace doesn't reserve a blank line in the info column. */
.mystere-creator-work{font-size:10.5px;color:#3a3a3a;letter-spacing:0.4px;font-weight:400;font-style:italic;margin-top:2px}   /* very dark grey (requested 2026-08-26) */
.mystere-creator-work:empty{display:none}
.mystere-creator-loc{font-size:11px;color:#777;font-style:italic;letter-spacing:0.3px;font-weight:400;margin-top:3px}
.mystere-guess-work{font-size:11px;color:#333;font-style:italic;letter-spacing:0.3px;margin:0 0 5px}   /* black italic under the level (requested 2026-08-26) */
.mystere-list-wineinfo{
  margin-top:8px;padding-top:8px;border-top:1px dashed rgba(94,12,35,0.2);
  font-size:12px;color:#5e0c23;letter-spacing:0.3px;line-height:1.4;
}
.mystere-list-wineinfo strong{font-weight:700}
/* Status tag (À DEVINER / VOTRE VIN / +N GB) rides the card's TOP-RIGHT edge, straddling the
   border (requested 2026-08-27) — one line, out of the strip's flow, so time+place own the full
   width. top:-11px keeps its lower edge above the body's 12px top padding: no collision with
   the strip text. The cream ring separates it from whatever it overlaps. */
.mystere-list-badge{
  position:absolute;top:-11px;right:12px;z-index:1;
  display:inline-block;font-size:10px;padding:3px 9px;text-align:center;
  white-space:nowrap;line-height:1.3;
  background:#3B6D11;color:#fff;border-radius:8px;
  letter-spacing:1px;font-weight:700;
  border:1.5px solid #fdf8f0;box-shadow:0 2px 6px rgba(0,0,0,0.18);
}
.mystere-list-badge.lost{background:#ae182b}
.mystere-list-badge.mine{background:#c9a550;color:#3a0a15}
/* Hand-written marker parked in the card's bottom-right corner (2026-08-26); the card is already
   position:relative. The «?» keeps its own tap (stopPropagation) — the rest falls through to the
   card like any other spot on it. */
.mystere-authored-corner{position:absolute;right:10px;bottom:7px}
/* Engagement stats (joueurs / commentaires) shown on followed wines */
.mystere-list-stats{
  display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;padding-top:8px;
  border-top:1px dashed rgba(94,12,35,0.2);
  font-size:11.5px;color:#8a6a20;font-family:'Helvetica Neue',Arial,sans-serif;
}
.mystere-list-stat{display:inline-flex;align-items:center;gap:3px}
.mystere-list-stat-new{
  background:#ae182b;color:#fff;border-radius:8px;padding:0 5px;
  font-size:10px;font-weight:700;margin-left:3px;letter-spacing:0;
}
.mystere-list-empty{
  text-align:center;color:#c9a550;font-size:14px;line-height:1.6;
  padding:40px 20px;font-style:italic;
}

/* Retention notice shown above the filter bar (mystery wines auto-expire after 24h). */
.mystere-list-note{
  text-align:center;font-size:11px;color:#5e0c23;font-style:italic;   /* bordeaux, was grey #999 (requested 2026-08-25) */
  margin:-6px 0 12px;line-height:1.5;letter-spacing:0.4px;   /* a touch airier than the body default (requested) */
  white-space:pre-line;   /* the dictionary string carries its own two-line break */
}

/* === List filter / sort bar (country · city · colour · publication time) ===
   Populated by renderMystereFilterBar(). Fixed 2×2 grid: two equal-width controls per row,
   the pair spanning the full card width (same as the wine cards below). */
.mystere-filter-bar{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  margin:0 0 14px;
}
.mystere-filter-sel{
  width:100%;box-sizing:border-box;
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;font-weight:400;
  color:#555;background-color:#f1f1f1;
  /* Capsule, like every button in the app (requested 2026-08-25). A pill needs its text off the
     curve, so the side padding grows with the radius — and the arrow moves in by the same step. */
  border:1.5px solid #c2c2c2;border-radius:999px;
  padding:7px 26px 7px 14px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath fill='%23555555' d='M0 0h8L4 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
/* Active = a real filter is applied (non-default value) → bold + darker text. */
.mystere-filter-sel--active{font-weight:700;color:#333}
.mystere-filter-sel:focus{outline:none;border-color:#8a8a8a}
.mystere-filter-sel:active{transform:scale(0.98)}

/* "To guess / Played" tabs on the guess list (hidden in MY WINES mode). Two equal pills;
   the active one flips to burgundy. Rendered by renderMystereListTabs(). */
.mystere-list-tabs{display:flex;gap:8px;margin:0 0 12px}
.mystere-list-tab{
  position:relative;                       /* anchor for the .mystere-tab-badge counter */
  flex:1 1 0;box-sizing:border-box;
  padding:9px 10px;text-align:center;cursor:pointer;   /* side padding grew with the radius, but capped at 10: at 12 the Italian labels ("Da indovinare") wrap to two lines */
  font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:#7a5c2a;background:transparent;
  border:1.5px solid #c9a550;border-radius:999px;   /* capsule, like every other control (requested) */
  -webkit-tap-highlight-color:transparent;transition:background .15s,color .15s;
}
.mystere-list-tab.active{background:#5e0c23;border-color:#5e0c23;color:#f3e9d2}
.mystere-list-tab .mystere-tab-count{font-weight:400;opacity:.8;margin-left:4px}
/* New-activity counter over the "Played" tab — white number in a red circle, same look as the
   bottom-nav bottle badge (.appnav-badge). Cream ring so it pops on both tab states. */
.mystere-tab-badge{
  position:absolute;top:-8px;right:-4px;
  min-width:18px;height:18px;box-sizing:border-box;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  background:#c62828;color:#fff;
  font-size:10px;font-weight:700;line-height:1;letter-spacing:0;text-transform:none;
  border-radius:9px;border:1.5px solid #f3e9d2;
  pointer-events:none;
}

/* === Floating mystery-info button (visible during mystery game-board play only) ===
   IN FLOW, STRADDLING the wheel's foot (final tune 2026-08-26 from a reference screenshot).
   History: absolute "corner void" parking overlapped the wheel's lower-right sectors (the
   46×86 box does not fit the void at 375px); a plain flow slot fixed that but opened a huge
   empty band between wheel and panel. The compromise: stay in flow (so the panel still makes
   honest room and can never be covered) but pull the button 32px UP into the wheel square's
   bottom-right corner — at right:8px the crop circle's arc is ≥56px above the square's bottom
   edge there, so the top of the button rides over burgundy void, never over the art. Net extra
   gap wheel→panel is just 86−32 ≈ 54px. Hidden (display:none) it takes no space; a finger drag
   (community.js) still switches it to position:fixed. JS shows it with inline display:flex. */
.mystere-info-btn{
  position:relative;   /* stays a stacking-context member for z-index; in flow otherwise */
  /* The bottle is IN FLOW (a fixed one breaks under the pinch-zoom transform), so its height
     minus this pull is what separates the wheel from the betting panel. Pulled from -32 to -69px
     (requested 2026-08-30): the air between the two was 66px on a mystery round against 12px on
     an ordinary one — the bottle now rides further over the wheel foot and the gap is halved. */
  margin:-69px 8px 4px auto;
  width:46px;height:86px;    /* narrower/shorter container, image stays same size */
  background:#fdf8f0;border:3px solid #66b32e;border-radius:12px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:2px 0;
  z-index:320;
  box-shadow:0 4px 20px rgba(0,0,0,0.45);
  animation:mystereBtnPulse 2.6s ease-in-out infinite;
}
.mystere-info-btn:active{transform:scale(0.92)}
/* SVG is ~85×181 (1:2.1 ratio) — image size unchanged */
.mystere-info-btn img{width:36px;height:76px;display:block;object-fit:contain}
@keyframes mystereBtnPulse{
  0%,100%{box-shadow:0 4px 16px rgba(0,0,0,0.35),0 0 0 0 rgba(102,179,46,0.45)}
  50%{box-shadow:0 4px 16px rgba(0,0,0,0.35),0 0 0 14px rgba(102,179,46,0)}
}

/* === Mystery description floating overlay (opened from the info button) === */
.mystere-info-overlay{
  position:fixed;inset:0;
  background:rgba(58,10,21,0.82);
  display:none;align-items:center;justify-content:center;
  z-index:340;padding:20px;
}
.mystere-info-overlay.open{display:flex}
.mystere-info-modal{
  position:relative;width:100%;max-width:480px;max-height:88vh;
  background:#fdf8f0;border:2px solid #c9a550;border-radius:14px;
  padding:20px 18px;overflow-y:auto;
  box-shadow:0 12px 48px rgba(0,0,0,0.5);
}
.mystere-info-close{
  position:absolute;top:8px;right:10px;
  width:32px;height:32px;
  background:transparent;border:none;
  color:#5e0c23;font-size:24px;font-family:inherit;
  cursor:pointer;line-height:1;
  border-radius:50%;
  transition:background .15s;
}
.mystere-info-close:active{background:rgba(94,12,35,0.1)}
.mystere-info-modal-body .mystere-desc-card{
  margin-top:4px;margin-bottom:0;
}

/* === Guess screen: description card + reveal === */
.mystere-desc-card{
  background:linear-gradient(135deg,#fdf8f0,#f5e6b8);
  border:2px solid #c9a550;border-radius:14px;
  padding:18px 18px 22px;margin-bottom:12px;
  color:#3a0a15;
  box-shadow:0 4px 16px rgba(0,0,0,0.18);
}
/* Header is now a column: title on line 1, creator block on line 2 */
.mystere-desc-header{
  margin-bottom:10px;
}
.mystere-desc-title{
  font-family:var(--font-display);font-size:20px;
  color:#5e0c23;letter-spacing:3px;
  margin-bottom:10px;
  text-align:center;
}
/* Creator row — glass vertically centered next to the three info lines */
.mystere-desc-creator-row{
  display:flex;align-items:center;gap:10px;
  color:#5e0c23;font-weight:600;font-size:13px;
  letter-spacing:1.2px;
}
/* Height 83 = the +30% size (requested 2026-08-26). The box width now HUGS the art: the glass
   SVG is 31.18x56.4, so at 83px tall it only needs ~46px — the old 83px square centred it with
   ~18px of dead air per side, pushing the info column right and wrapping names. Trimming the box
   is what "move the glass left" amounts to; the art itself renders pixel-identical. */
/* +10% again 2026-08-26 (83→91), and pulled 6px into the card's left padding so the size-up
   does not take the column width the slim box just freed — net the text keeps its gain. */
.mystere-desc-creator-glass{width:51px;height:91px;margin-left:-6px;display:inline-block;flex-shrink:0}
.mystere-desc-creator-name{min-width:0;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}   /* ONE line (requested 2026-08-26; was a 2-line clamp) — with the glass box slimmed a full name fits, an extreme one ellipsises */
.mystere-desc-text{
  font-size:13px;line-height:1.7;color:#3a0a15;
  white-space:pre-wrap;font-style:italic;
}
.mystere-desc-text strong{color:#5e0c23;font-style:normal;letter-spacing:0.5px}
/* Footnote shown when the note is an auto-translation: "Translated from … · View original". */
.mystere-desc-translnote{
  margin-top:12px;padding-top:10px;border-top:1px dashed #e0d5b8;
  font-size:11px;line-height:1.5;color:#9a8a6a;font-style:italic;
}
.mystere-desc-orig-link{
  color:#8a6a20;font-weight:700;font-style:normal;
  text-decoration:underline;cursor:pointer;white-space:nowrap;
}
.mystere-desc-orig-link:active{opacity:0.6}
/* Per-comment "Voir la traduction / Voir l'original" link — same gold link style as the
   description toggle, sized down to comment scale. */
.mystere-comment-translate{
  display:inline-block;margin-top:3px;
  font-size:10.5px;color:#8a6a20;font-weight:600;
  text-decoration:underline;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.mystere-comment-translate:active{opacity:0.6}

.mystere-guess-play-btn{
  display:block;width:100%;padding:14px;
  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:2px;
  cursor:pointer;margin-top:8px;text-align:center;
  transition:transform .15s;
}
.mystere-guess-play-btn:active{transform:scale(0.96)}
/* JOUER + arrow-back share one row on the unplayed card (requested 2026-08-26). The arrow
   button grew from a 56px circle into a pill (same 2026-08-26 review): the fee rides on ONE line
   beside the arrow instead of being squeezed underneath it, sized to its content. */
.mystere-play-row{display:flex;align-items:stretch;gap:8px;margin-top:12px}
#mystereGuessCard .mystere-play-row .mystere-guess-play-btn{flex:1;min-width:0;margin-top:0}   /* ID-qualified: the standalone #mystereGuessCard margin rule outranks a class chain */
.community-btn-back.mystere-back-round{
  flex:0 0 auto;width:auto;min-width:56px;padding:0 16px;margin:0;
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:7px;
  border-radius:999px;background:linear-gradient(135deg,#fdf8f0,#f5e6b8);
  white-space:nowrap;
}
.mystere-back-round-cost{font-size:12px;font-weight:700;color:#8a1538;letter-spacing:0.3px;line-height:1;margin-top:0}
/* WM token cost shown on the Play button, and the dimmed state when the player can't afford it. */
.mystere-guess-play-btn .wm-cost{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:0.5px;opacity:0.85}
.mystere-guess-play-btn.wm-cant-afford{opacity:0.5;filter:grayscale(0.4)}
.mystere-wm-hint{text-align:center;color:#ae182b;font-size:11px;font-style:italic;margin-top:6px}

.mystere-reveal-banner{
  background:linear-gradient(135deg,#3B6D11,#5a8c2a);
  color:#fff;border-radius:12px;padding:14px 16px;margin-bottom:10px;
  text-align:center;
}
.mystere-reveal-banner.lost{background:linear-gradient(135deg,#ae182b,#7a1320)}
.mystere-reveal-banner-title{
  font-family:var(--font-display);font-size:15px;letter-spacing:2px;margin-bottom:6px;
}
.mystere-reveal-banner-wine{
  font-size:14px;font-weight:400;letter-spacing:0.5px;
}
/* Producer + cuvée italicised on their own line so the wine's name stands out in the banner. */
.mystere-reveal-banner-prod{font-style:italic}
.mystere-reveal-banner-score{
  font-family:var(--font-display);font-size:24px;margin-top:8px;
}

/* === Guesses (creator view) === */
.mystere-guesses-section{
  background:#fdf8f0;border:1.5px solid #c9a550;border-radius:12px;
  padding:14px;margin-top:12px;
}
.mystere-guesses-title{
  font-family:var(--font-display);font-size:15px;color:#5e0c23;
  letter-spacing:2px;margin-bottom:10px;text-transform:uppercase;
}
.mystere-guesses-empty{
  font-size:12px;color:#888;text-align:center;padding:10px 0;font-style:italic;
}
.mystere-guess-item{
  background:#fff;border:1px solid #e8d5a0;border-radius:8px;
  padding:10px 12px;margin-bottom:8px;
}
.mystere-guess-item:last-child{margin-bottom:0}
/* Players 4+ fold behind «voir tous les joueurs (N)» (2026-08-27). The wrapper is a column so its
   revealed items keep the same 8px rhythm; the button is a quiet full-width outline. */
.mystere-guesses-more{display:none;flex-direction:column}
.mystere-see-all-btn{
  display:block;width:100%;margin:2px 0 8px;padding:9px;
  background:#fff;border:1.5px solid #c9a550;border-radius:999px;
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.5px;
  color:#8a6a20;cursor:pointer;transition:background .15s}
.mystere-see-all-btn:active{background:#f7eed9}
/* The viewer's own attempt — subtle gold tint + border so they find it among the others. */
.mystere-guess-item.me{background:#fdf8ec;border-color:#c9a550}
.mystere-guess-you{font-weight:700;font-size:11px;color:#c9a550;letter-spacing:0.5px;margin:-3px 0 4px}   /* bold, own line under the workplace; negative top eats most of the work-line's 5px bottom margin (air trimmed on request) */
.mystere-guess-head{
  display:flex;align-items:baseline;gap:4px;
  font-size:12px;color:#5e0c23;margin-bottom:0;   /* name hugs the level line — the pair now spaces like level→workplace (requested 2026-08-26) */
}
/* 2026-08-26 (user request): the name shows in FULL — it wraps rather than ellipsizing; the time
   and the GB score stay single-line. The level lives on its own line below the header now
   (.mystere-guess-lvl-line), dressed like the creator card: Niv. chip + spelled-out level name. */
.mystere-guess-name{font-weight:700;font-size:13.5px;min-width:0;overflow-wrap:break-word}   /* a step above the 12px strip (requested 2026-08-27) */
.mystere-guess-lvl-line{margin:0 0 2px;line-height:1.4}
.mystere-guess-time{color:#888;font-size:11px;white-space:nowrap;flex:0 0 auto}
.mystere-guess-score{margin-left:auto;font-weight:700;font-size:13px;color:#3B6D11;white-space:nowrap;flex:0 0 auto;padding-left:8px}
.mystere-guess-score.lost{color:#ae182b}
/* One column of verdict rows, each led by a filled green/red dot (was a 2-column ✓/✗ grid). */
.mystere-guess-rows{
  display:flex;flex-direction:column;gap:4px;
  margin-top:7px;padding-top:7px;border-top:1px solid #ecdcc0;   /* thin rule between the identity block and the bet verdicts (requested 2026-08-27) */
  font-size:11px;
}
.mystere-guess-row{display:flex;align-items:flex-start;gap:7px;line-height:1.35}
.mystere-guess-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:2px;background:currentColor}
.mystere-guess-row.win{color:#3B6D11}
.mystere-guess-row.lose{color:#ae182b}

/* === Comments === */
.mystere-comments-section{
  background:#fdf8f0;border:1.5px solid #c9a550;border-radius:12px;
  padding:14px;margin-top:12px;
}
/* The one-line "comments will appear after your attempt" note is a capsule (requested 2026-08-26).
   A dedicated class, NOT :has() on the shared section class — the reveal mode reuses that class
   for the full comments thread, and on engines without :has() the whole thread would have become
   a pill. */
.mystere-comments-section.mystere-comments-note{border-radius:999px;padding:14px 20px;box-shadow:0 5px 14px rgba(0,0,0,0.15), 0 2px 5px rgba(0,0,0,0.08)}   /* soft float (2026-08-27) */
.mystere-comments-title{
  font-family:var(--font-display);font-size:15px;color:#5e0c23;
  letter-spacing:2px;margin-bottom:10px;
}
/* Each comment is a single row: content on the left, the action (like/×) vertically centred right. */
.mystere-comment-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 0;border-bottom:1px solid rgba(201,165,80,0.3);
  font-size:12.5px;line-height:1.4;color:#3a0a15;
}
.mystere-comment-item:last-of-type{border-bottom:none}
.mystere-comment-main{flex:1;min-width:0}
.mystere-comment-head{
  display:flex;align-items:center;gap:6px;margin-bottom:2px;
  font-size:11px;color:#888;
}
.mystere-comment-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0}   /* +40%, then +30% more (requested 2026-08-26 ×2) */
/* Name+time on line 1, opt-in workplace on line 2 — a column beside the avatar. */
.mystere-comment-id{display:flex;flex-direction:column;gap:1px;min-width:0}
.mystere-comment-headline{display:flex;align-items:center;gap:6px;min-width:0}
.mystere-comment-work{font-size:10.5px;color:#333;font-style:italic;letter-spacing:0.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mystere-comment-work:empty{display:none}   /* backfill placeholder must not open a blank line */
.mystere-comment-name{color:#5e0c23;font-weight:600;font-size:13px}   /* 11.5→13 (requested 2026-08-27) */
.mystere-comment-text{margin:0}
/* Right column of a comment: the timestamp, then the like (others' comments) / delete (own).
   The time used to ride on the name line and wrapped onto a second line behind a long name, so
   it moved here — right-aligned above the action, on one line (requested 2026-08-30). */
.mystere-comment-actions{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px;align-self:flex-start}   /* top-aligned: the column no longer floats in the middle of the row (2026-08-30) */
/* The timestamp reads as part of the name line, so it is nudged onto it (requested 2026-08-30).
   How far depends on the name block: the head centres it against the 36px avatar, so a lone name
   sits low (13px) while a name with a workplace under it sits high (4px). :has() picks the right
   one — and re-picks it by itself when backfillCreatorWorkplace fills the span later. Browsers
   without :has() land on the lone-name value; the other case is then 9px off, never broken. */
.mystere-comment-time{margin-top:13px}
.mystere-comment-item:has(.mystere-comment-work:not(:empty)) .mystere-comment-time{margin-top:4px}
.mystere-comment-time{font-size:11px;color:#888;line-height:1.2;white-space:nowrap}
.mystere-comment-time:empty{display:none}   /* a comment with no timestamp must not open a blank line */
.mystere-comment-buttons{display:flex;align-items:center;gap:8px}
.mystere-comment-like{
  background:none;border:none;cursor:pointer;padding:0;
  font-family:'Helvetica Neue',Arial,sans-serif;color:#999;
  display:inline-flex;align-items:center;gap:4px;transition:color .15s;
}
/* Heart + count are sized identically everywhere (interactive like AND read-only count) */
.mystere-comment-like-icon{font-size:16px;line-height:1}
.mystere-comment-like-count{font-size:12px;font-weight:600;line-height:1}
.mystere-comment-like.liked{color:#ae182b}
.mystere-comment-like:active{transform:scale(0.9)}
/* Read-only ♥ count shown on the author's own comment (next to the delete ×) — reuses the
   icon/count classes so the heart matches the interactive like exactly. */
.mystere-comment-likes-ro{color:#ae182b;display:inline-flex;align-items:center;gap:4px;line-height:1}
/* Delete is a × icon */
.mystere-comment-delete{
  background:none;border:none;cursor:pointer;padding:0 2px;line-height:1;
  font-size:18px;color:#c9a0a8;transition:color .15s;
}
@media (hover: hover){.mystere-comment-delete:hover{color:#ae182b}}
.mystere-comment-delete:active{color:#ae182b;transform:scale(0.9)}
/* Report flag on other players' comments (offensive / spam). */
.mystere-comment-report{
  background:none;border:none;cursor:pointer;padding:0 2px;line-height:1;
  font-size:14px;color:#c9a0a8;transition:color .15s;
}
@media (hover: hover){.mystere-comment-report:hover{color:#ae182b}}
.mystere-comment-report:active{color:#ae182b;transform:scale(0.9)}
.mystere-comment-input{
  width:100%;padding:10px 12px;border:1.5px solid #c9a550;border-radius:8px;
  font-size:13px;color:#5e0c23;background:#fff;font-family:inherit;
  box-sizing:border-box;resize:none;margin-top:8px;
  min-height:60px;
}
.mystere-comment-input:focus{outline:none;border-color:#5e0c23}
/* Live character counter under the comment box; amber (.near) in the last 20 chars. */
.mystere-comment-counter{text-align:right;font-size:11px;color:#9a8a6a;margin-top:3px}
.mystere-comment-counter.near{color:#b26a00;font-weight:600}
.mystere-comments-empty{
  font-size:12px;color:#888;text-align:center;padding:14px 0;font-style:italic;
}

/* Back button inside the guess card */
.mystere-back-btn{margin-top:16px !important}

/* Static scan hint under the scanner buttons */
.mystere-scan-hint{
  font-size:11px;text-align:center;color:#8a6a20;
  font-style:italic;margin:2px 0 4px;padding:0 4px;line-height:1.4;
}
/* Toast (reused across community flow) */
.community-toast{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#5e0c23;color:#e8d5a0;
  padding:14px 24px;border-radius:12px;
  font-size:13px;letter-spacing:1px;
  border:2px solid #e8d5a0;
  z-index:500;
  box-shadow:0 4px 24px rgba(0,0,0,0.4);
  opacity:0;transition:opacity .2s;
  pointer-events:none;
  font-family:inherit;
  text-align:center;max-width:80%;
}
.community-toast.show{opacity:1}
.community-toast.community-toast-success{
  background:#2e6b10;color:#fff;
  border-color:#5a8c2a;font-size:15px;
}