/* ========================================
   COUPLE MINI-GAME DESIGN TOKENS
   These scoped values extend the FlirtyFlip dark burgundy system without changing legacy game pages.
   ======================================== */
.catalog-page[data-catalog-view="couple-games"] {
  --cg-bg: #090609;
  --cg-panel: #151014;
  --cg-panel-raised: #1d141a;
  --cg-ink: #fff8f7;
  --cg-muted: #bcaeb2;
  --cg-red: #ff2449;
  --cg-gold: #d9ae63;
  --cg-line: rgba(255,255,255,.12);
  width:100%;
  max-width:none;
  padding-left:clamp(18px,5vw,72px);
  padding-right:clamp(18px,5vw,72px);
}
.catalog-page[data-catalog-view="couple-games"] .catalog-content { width:min(100%,1240px); margin:0 auto; }
.catalog-page[data-catalog-view="couple-games"] > .back-btn { width:min(100%,1240px); display:block; margin-left:auto; margin-right:auto; }
.catalog-page[data-catalog-view="couple-games"] > .page-heading { width:min(100%,1240px); margin-left:auto; margin-right:auto; }
.cg-eyebrow { display:block; color:#ff7088; font-size:.69rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.cg-text-action { min-height:44px; padding:8px 12px; border:0; background:transparent; color:var(--cg-muted); font-weight:800; text-decoration:underline; text-underline-offset:4px; }
.cg-text-action:hover { color:var(--cg-ink); }
.cg-hub h2, .cg-player-setup h2, .cg-section-heading h2, .cg-mode-card h3, .cg-game-card h3,
.cg-game-copy h1, .cg-result-card p, .cg-online-state h2 { font-family:"Playfair Display",serif; }

/* ========================================
   MODE SELECTION AND LOCAL CATALOG
   Edit the two entry cards and eight-game grid here; routes and game data live in JavaScript.
   ======================================== */
.cg-hub { min-height:calc(100dvh - 230px); display:grid; align-content:center; gap:38px; }
.cg-hub__intro { max-width:760px; }
.cg-hub__intro h2 { margin:10px 0 15px; font-size:clamp(2.55rem,6.5vw,5.3rem); line-height:.96; letter-spacing:-.05em; }
.cg-hub__intro p, .cg-section-heading p { color:var(--cg-muted); line-height:1.7; }
.cg-mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.cg-mode-card { position:relative; min-height:340px; display:flex; flex-direction:column; align-items:flex-start; overflow:hidden; padding:clamp(26px,4vw,44px); border:1px solid var(--cg-line); border-radius:30px; color:var(--cg-ink); text-decoration:none; background:linear-gradient(145deg,#1b1117,#0e0a0d 75%); transition:transform .22s ease,border-color .22s ease,background-color .22s ease; }
.cg-mode-card::after { content:""; position:absolute; width:210px; height:210px; right:-70px; bottom:-90px; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 30px rgba(255,255,255,.025),0 0 0 60px rgba(255,255,255,.018); }
.cg-mode-card--together { background:radial-gradient(circle at 85% 18%,rgba(255,36,73,.21),transparent 34%),linear-gradient(145deg,#241017,#0e090c 76%); }
.cg-mode-card--online { background:radial-gradient(circle at 85% 18%,rgba(217,174,99,.13),transparent 34%),linear-gradient(145deg,#191316,#0d0a0c 76%); }
.cg-mode-card:hover { transform:translateY(-5px); border-color:rgba(255,77,103,.45); }
.cg-mode-card__icon { display:grid; place-items:center; width:58px; height:58px; margin-bottom:34px; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(255,255,255,.055); font-size:1.7rem; }
.cg-mode-card h3 { max-width:430px; margin:10px 0 13px; font-size:clamp(2rem,4vw,3.15rem); line-height:1; letter-spacing:-.04em; }
.cg-mode-card p { max-width:510px; margin:0 0 30px; color:var(--cg-muted); line-height:1.65; }
.cg-mode-card > strong { margin-top:auto; color:#fff; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }
.cg-player-setup { display:grid; grid-template-columns:1fr minmax(340px,.8fr); gap:36px; align-items:end; margin-bottom:clamp(48px,7vw,82px); padding:clamp(24px,4vw,38px); border:1px solid var(--cg-line); border-radius:26px; background:linear-gradient(145deg,rgba(255,36,73,.075),rgba(255,255,255,.025)); }
.cg-player-setup h2 { margin:8px 0 8px; font-size:clamp(2rem,4vw,3rem); }
.cg-player-setup p { max-width:540px; margin:0; color:var(--cg-muted); line-height:1.6; }
.cg-player-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.cg-player-fields label, .cg-outcome-fields label { display:grid; gap:8px; color:var(--cg-muted); font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.cg-player-fields input, .cg-outcome-fields input { width:100%; min-width:0; min-height:48px; padding:0 14px; border:1px solid var(--cg-line); border-radius:13px; outline:0; background:#0d0a0c; color:var(--cg-ink); font-size:16px; text-transform:none; }
.cg-player-fields input:focus, .cg-outcome-fields input:focus { border-color:rgba(255,36,73,.7); box-shadow:0 0 0 3px rgba(255,36,73,.14); }
.cg-section-heading { display:flex; justify-content:space-between; gap:32px; align-items:end; margin-bottom:26px; }
.cg-section-heading h2 { max-width:700px; margin:8px 0 0; font-size:clamp(2.3rem,5vw,4.25rem); line-height:.98; letter-spacing:-.045em; }
.cg-section-heading p { max-width:390px; margin:0; }
.cg-game-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.cg-game-card { position:relative; min-width:0; min-height:370px; display:flex; flex-direction:column; overflow:hidden; padding:23px; border:1px solid var(--cg-line); border-radius:24px; color:var(--cg-ink); text-decoration:none; background:radial-gradient(circle at 78% 10%,color-mix(in srgb,var(--cg-accent) 20%,transparent),transparent 33%),linear-gradient(150deg,#191216,#0d0a0c 78%); transition:transform .2s ease,border-color .2s ease; }
.cg-game-card::after { content:""; position:absolute; inset:auto -45px -80px auto; width:155px; height:155px; border:1px solid color-mix(in srgb,var(--cg-accent) 32%,transparent); border-radius:50%; }
.cg-game-card:hover { transform:translateY(-5px); border-color:color-mix(in srgb,var(--cg-accent) 55%,transparent); }
.cg-game-card__number { color:rgba(255,255,255,.38); font-size:.7rem; font-weight:800; letter-spacing:.16em; }
.cg-game-card__icon { min-height:91px; display:flex; align-items:center; margin:15px 0 18px; color:#fff; font-family:"Playfair Display",serif; font-size:2.5rem; }
.cg-game-card h3 { margin:8px 0 10px; font-size:1.8rem; line-height:1.05; letter-spacing:-.03em; }
.cg-game-card p { margin:0 0 22px; color:var(--cg-muted); font-size:.86rem; line-height:1.55; }
.cg-game-card__footer { z-index:1; display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:auto; padding-top:18px; border-top:1px solid rgba(255,255,255,.09); }
.cg-game-card__footer small { color:var(--cg-muted); }
.cg-game-card__footer strong { color:#fff; font-size:.76rem; text-transform:uppercase; }

/* ========================================
   SHARED GAME SHELL AND STAGED RESULT CARD
   Results stay inline and hidden until the shared anticipation/animation/settling lifecycle completes.
   ======================================== */
.catalog-page[data-catalog-view="couple-game-active"] { width:100%; max-width:none; padding:0; }
.catalog-page[data-catalog-view="couple-game-active"] > .back-btn,
.catalog-page[data-catalog-view="couple-game-active"] > .page-heading { display:none; }
.catalog-page[data-catalog-view="couple-game-active"] .catalog-content { width:100%; }
.cg-play-page { --cg-bg:#090609; --cg-panel:#151014; --cg-ink:#fff8f7; --cg-muted:#bcaeb2; --cg-line:rgba(255,255,255,.12); position:relative; min-height:calc(100dvh - 82px); display:flex; flex-direction:column; overflow:hidden; background:radial-gradient(circle at 50% -5%,color-mix(in srgb,var(--cg-accent) 17%,transparent),transparent 37%),#090609; }
.cg-game-topbar { min-height:72px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; padding:12px clamp(18px,4vw,54px); border-bottom:1px solid var(--cg-line); background:rgba(9,6,9,.9); }
.cg-game-topbar > div { display:grid; justify-items:center; gap:4px; }
.cg-game-topbar > div strong { font-family:"Playfair Display",serif; font-size:1.08rem; }
.cg-back,.cg-sound { min-height:44px; padding:8px 0; border:0; background:transparent; color:var(--cg-muted); font-size:.78rem; font-weight:800; }
.cg-back { min-width:64px; justify-self:start; text-align:left; }
.cg-sound { justify-self:end; }
.cg-back:hover,.cg-sound:hover { color:var(--cg-ink); }
.cg-game-stage { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(28px,5vw,52px); width:min(100%,1160px); margin:0 auto; padding:clamp(34px,5vw,66px) clamp(18px,5vw,56px) 32px; }
.cg-consent-note { width:min(100% - 36px,760px); margin:0 auto; padding:17px 0 max(24px,env(safe-area-inset-bottom)); color:#8f8287; font-size:.72rem; line-height:1.5; text-align:center; }
.cg-play-page [data-cg-live] { position:absolute !important; width:1px; height:1px; overflow:hidden; padding:0; border:0; margin:-1px; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.cg-game-copy { max-width:620px; text-align:center; }
.cg-game-copy h1 { margin:9px 0 12px; font-size:clamp(2.5rem,6vw,5.2rem); line-height:.96; letter-spacing:-.05em; }
.cg-game-copy p { margin:0 auto; color:var(--cg-muted); line-height:1.65; }
.cg-turn-pill { display:inline-flex; min-height:32px; align-items:center; padding:6px 12px; border:1px solid color-mix(in srgb,var(--cg-accent) 45%,transparent); border-radius:999px; background:color-mix(in srgb,var(--cg-accent) 12%,transparent); color:#fff; font-size:.7rem; font-weight:800; letter-spacing:.07em; }
.cg-control-row { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; }
.cg-stage-status { min-height:44px; display:grid; place-items:center; color:#f1c77f; font-size:.72rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; animation:cg-status-pulse .8s ease-in-out infinite alternate; }
.cg-result-card { position:relative; isolation:isolate; width:min(100%,760px); overflow:hidden; padding:clamp(26px,5vw,48px); border:1px solid rgba(217,174,99,.4); border-radius:28px; outline:0; background:radial-gradient(circle at 82% 0,rgba(255,36,73,.24),transparent 38%),linear-gradient(145deg,#28111a,#120c10 72%); box-shadow:0 24px 70px rgba(0,0,0,.42),0 0 36px rgba(255,36,73,.1); animation:cg-result-reveal .5s cubic-bezier(.2,.7,.2,1) both; }
.cg-result-card::after { content:""; position:absolute; z-index:-1; right:-95px; bottom:-115px; width:240px; height:240px; border:1px solid rgba(217,174,99,.23); border-radius:50%; box-shadow:0 0 0 34px rgba(217,174,99,.025),0 0 0 68px rgba(217,174,99,.016); }
.cg-result-card__top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 20px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.1); }
.cg-result-category { color:#ff7c92; font-size:.7rem; font-weight:900; letter-spacing:.16em; }
.cg-result-owner { display:inline-flex; min-height:32px; align-items:center; padding:6px 11px; border:1px solid rgba(217,174,99,.42); border-radius:999px; background:rgba(217,174,99,.08); color:#f2cd87; font-size:.69rem; font-weight:900; letter-spacing:.1em; }
.cg-result-card > p { max-width:680px; margin:clamp(25px,4vw,38px) 0 18px; color:#fff9f7; font-size:clamp(1.75rem,4vw,3.25rem); line-height:1.12; letter-spacing:-.025em; overflow-wrap:anywhere; }
.cg-result-detail { display:block; color:#cdbfc3; font-size:.88rem; line-height:1.6; }
.cg-result-consent { margin-top:22px; color:#d8cbd0; font-size:.78rem; }
.cg-result-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:26px; }
.cg-result-actions .cg-text-action { min-width:0; }

/* ========================================
   TIC-TAC-TOE AND LOVE TOSS
   Lightweight transforms give both physical feedback without expensive visual filters.
   ======================================== */
.cg-ttt { position:relative; width:100%; display:grid; justify-items:center; gap:28px; }
.cg-ttt.is-celebrating::after { content:"✦  ♡  ✦"; position:absolute; z-index:4; left:50%; top:47%; color:#f0cd8c; font-size:clamp(1.5rem,5vw,2.5rem); pointer-events:none; animation:cg-celebrate .8s ease both; }
.cg-ttt-board { position:relative; width:min(100%,460px); aspect-ratio:1; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:9px; border:1px solid var(--cg-line); border-radius:28px; background:#100b0e; }
.cg-ttt-cell { position:relative; z-index:1; min-width:0; border:1px solid rgba(255,255,255,.1); border-radius:17px; background:#191116; color:#fff; font-size:clamp(2.5rem,8vw,4.8rem); transition:transform .16s ease,background-color .16s ease,border-color .16s ease; }
.cg-ttt-cell:not(:disabled):hover { transform:scale(.96); background:#21151b; }
.cg-ttt-cell.is-heart { color:#ff5270; }
.cg-ttt-cell.is-flame { color:#ffb25c; }
.cg-ttt-cell.is-winning { border-color:var(--cg-accent); background:color-mix(in srgb,var(--cg-accent) 15%,#191116); animation:cg-win-pulse .55s ease both; }
.cg-winning-line { position:absolute; z-index:3; left:10%; width:80%; height:5px; border-radius:999px; background:#f0cd8c; box-shadow:0 0 16px rgba(217,174,99,.48); transform:scaleX(1); animation:cg-line-horizontal .42s ease both; }
.cg-winning-line--0 { top:16.67%; }
.cg-winning-line--1 { top:50%; }
.cg-winning-line--2 { top:83.33%; }
.cg-winning-line--3,.cg-winning-line--4,.cg-winning-line--5 { top:10%; width:5px; height:80%; transform:scaleY(1); animation-name:cg-line-vertical; }
.cg-winning-line--3 { left:16.67%; }
.cg-winning-line--4 { left:50%; }
.cg-winning-line--5 { left:83.33%; }
.cg-winning-line--6,.cg-winning-line--7 { left:-4%; top:50%; width:108%; transform:rotate(45deg) scaleX(1); }
.cg-winning-line--6 { animation-name:cg-line-diagonal-positive; }
.cg-winning-line--7 { transform:rotate(-45deg) scaleX(1); animation-name:cg-line-diagonal-negative; }
.cg-player-key { display:flex; flex-wrap:wrap; justify-content:center; gap:16px 28px; color:var(--cg-muted); }
.cg-player-key span { display:flex; align-items:center; gap:8px; }
.cg-player-key b { color:#fff; font-size:1.45rem; }
.cg-toss { width:100%; display:grid; justify-items:center; gap:34px; }
.cg-toss-layout { width:min(100%,850px); display:grid; grid-template-columns:minmax(220px,.75fr) 1fr; gap:clamp(30px,7vw,80px); align-items:center; }
.cg-coin-scene { width:min(62vw,270px); aspect-ratio:1; margin:auto; perspective:900px; }
.cg-coin { position:relative; width:100%; height:100%; transform-style:preserve-3d; transform:rotateY(var(--coin-final)); transition:transform .28s ease-out; }
.cg-coin-face { position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:8px; border:5px solid #d8ad62; border-radius:50%; backface-visibility:hidden; background:radial-gradient(circle at 35% 25%,#fff2cb,#d8ad62 40%,#704128 100%); color:#511528; box-shadow:inset 0 0 0 10px rgba(81,21,40,.17),0 20px 50px rgba(0,0,0,.35); }
.cg-coin-face b { font-family:"Playfair Display",serif; font-size:5.5rem; line-height:1; text-shadow:0 2px 0 rgba(255,255,255,.3); }
.cg-coin-face small { font-size:.65rem; font-weight:900; letter-spacing:.16em; }
.cg-coin-face--back { transform:rotateY(180deg); }
.cg-coin.is-flipping { animation:cg-coin-flip 1.75s cubic-bezier(.16,.72,.2,1) both; }
.cg-outcome-fields { display:grid; gap:18px; }

/* ========================================
   WHEEL AND RAPID FIRE
   The pointer and segment labels share one geometry so the selected result always matches the display.
   ======================================== */
.cg-wheel-game,.cg-rapid,.cg-mystery,.cg-reaction,.cg-dice-game,.cg-doors { width:100%; display:grid; justify-items:center; gap:30px; }
.cg-wheel-wrap { position:relative; display:grid; justify-items:center; gap:24px; }
.cg-wheel-pointer { position:absolute; z-index:3; top:-13px; left:50%; width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-top:28px solid #fff; transform:translateX(-50%); }
.cg-wheel-pointer::after { content:""; position:absolute; left:-4px; top:-28px; width:8px; height:8px; border-radius:50%; background:#d9ae63; }
.cg-wheel { position:relative; width:min(78vw,430px); aspect-ratio:1; overflow:hidden; border:8px solid #2b2025; border-radius:50%; background:conic-gradient(var(--wheel)); box-shadow:0 22px 60px rgba(0,0,0,.4); transition:transform 4.2s cubic-bezier(.1,.68,.12,1); will-change:transform; }
.cg-wheel::after { content:"♡"; position:absolute; inset:39%; display:grid; place-items:center; border:5px solid rgba(255,255,255,.16); border-radius:50%; background:#171015; font-size:1.6rem; }
.cg-wheel span { position:absolute; z-index:1; left:50%; top:50%; width:45%; height:24px; display:flex; align-items:center; justify-content:flex-end; color:#fff; transform-origin:0 50%; transform:translateY(-50%) rotate(calc(var(--i) * 60deg + 30deg)); }
.cg-wheel span b { width:78%; overflow:visible; font-size:clamp(.52rem,1.45vw,.72rem); font-weight:900; letter-spacing:.025em; line-height:1; text-align:center; text-transform:uppercase; white-space:nowrap; transform:translateX(8%); }
.cg-prompt-card { position:relative; width:min(100%,760px); min-height:250px; display:grid; place-items:center; padding:64px clamp(25px,6vw,64px) 36px; border:1px solid rgba(255,36,73,.28); border-radius:28px; background:radial-gradient(circle at 50% 0,rgba(255,36,73,.13),transparent 50%),#151014; text-align:center; }
.cg-prompt-card .cg-eyebrow { position:absolute; top:24px; }
.cg-prompt-card p { margin:0; font-family:"Playfair Display",serif; font-size:clamp(1.7rem,5vw,3.4rem); line-height:1.14; }
.cg-prompt-card.is-hidden p { color:#a6979c; font-size:clamp(1.2rem,3vw,1.65rem); }
.cg-timer-ring { width:150px; aspect-ratio:1; display:grid; place-items:center; align-content:center; border-radius:50%; background:radial-gradient(circle,#110c0f 61%,transparent 62%),conic-gradient(#ff3154 var(--timer-progress),rgba(255,255,255,.09) 0); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.cg-timer-ring strong { font-family:"Playfair Display",serif; font-size:2.7rem; line-height:.9; }
.cg-timer-ring span { margin-top:6px; color:var(--cg-muted); font-size:.65rem; text-transform:uppercase; }

/* ========================================
   MYSTERY BOX, REACTION, DICE AND DOORS
   Each control remains at least 44px and exposes the same state visually and through accessible labels.
   ======================================== */
.cg-box-grid { width:min(100%,760px); display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.cg-mystery-box { position:relative; aspect-ratio:1; display:grid; place-items:center; align-content:center; gap:8px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:20px; background:linear-gradient(145deg,#21141a,#100b0e); color:#fff; transition:transform .18s ease,border-color .18s ease,opacity .18s ease; }
.cg-mystery-box:not(:disabled):hover { transform:translateY(-3px); border-color:#d54863; }
.cg-box-visual { position:relative; width:72%; aspect-ratio:1; display:block; }
.cg-box-base,.cg-box-lid { position:absolute; left:8%; right:8%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.17); background:linear-gradient(145deg,#7e1830,#2d101c); }
.cg-box-base { bottom:5%; height:62%; border-radius:6px 6px 13px 13px; }
.cg-box-base b { font-family:"Playfair Display",serif; font-size:1.8rem; }
.cg-box-lid { z-index:2; top:20%; height:20%; border-radius:8px 8px 4px 4px; transform-origin:left bottom; }
.cg-box-glow { position:absolute; inset:22%; border-radius:50%; background:#f0b55b; opacity:0; transform:scale(.5); }
.cg-mystery-box small { color:var(--cg-muted); font-size:.65rem; font-weight:800; text-transform:uppercase; }
.cg-mystery-box.is-open { border-color:rgba(217,174,99,.35); background:rgba(217,174,99,.06); color:#e9c77f; }
.cg-mystery-box.is-open .cg-box-lid { transform:rotate(-24deg) translate(-8px,-13px); }
.cg-mystery-box.is-open .cg-box-glow { opacity:.32; transform:scale(1.2); }
.cg-mystery-box.is-animating { animation:cg-box-sequence 1.25s cubic-bezier(.2,.75,.2,1) both; }
.cg-mystery-box.is-animating .cg-box-lid { animation:cg-box-lid-open 1.25s ease both; }
.cg-mystery-box.is-animating .cg-box-glow { animation:cg-box-glow 1.25s ease both; }
.cg-mystery-box.is-dimmed { opacity:.38; }
.cg-reaction-status { min-height:64px; display:grid; place-items:center; color:var(--cg-muted); font-family:"Playfair Display",serif; font-size:clamp(1.6rem,4vw,2.8rem); }
.cg-reaction.is-countdown .cg-reaction-status { color:#f0cd8c; animation:cg-countdown-pop .6s ease both; }
.cg-reaction.is-go .cg-reaction-status { color:#fff; }
.cg-reaction-zones { width:min(100%,900px); display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cg-reaction-zones button { min-height:190px; display:grid; place-items:center; align-content:center; gap:10px; border:1px solid var(--cg-line); border-radius:24px; background:#171015; color:#fff; }
.cg-reaction-zones button:not(:disabled):active { transform:scale(.98); }
.cg-reaction-zones span { color:var(--cg-muted); font-weight:800; }
.cg-reaction-zones strong { font-family:"Playfair Display",serif; font-size:2.7rem; }
.cg-reaction.is-go .cg-reaction-zones button { border-color:#ff3f5e; background:#5c1023; }
.cg-dice-scene { --die-half:105px; width:210px; max-width:55vw; aspect-ratio:1; perspective:850px; }
.cg-dice-cube { position:relative; width:100%; height:100%; transform-style:preserve-3d; transform:rotateX(var(--die-x)) rotateY(var(--die-y)); transition:transform .3s ease-out; }
.cg-dice-face { position:absolute; inset:0; display:grid; place-items:center; border:3px solid rgba(91,23,48,.28); border-radius:28px; backface-visibility:hidden; background:linear-gradient(145deg,#fff8f4,#d8cbc7); color:#5b1730; box-shadow:inset 0 0 0 8px rgba(91,23,48,.05); }
.cg-dice-face b { font-family:"Playfair Display",serif; font-size:5.2rem; }
.cg-dice-face--1 { transform:translateZ(var(--die-half)); }
.cg-dice-face--2 { transform:rotateY(90deg) translateZ(var(--die-half)); }
.cg-dice-face--3 { transform:rotateX(90deg) translateZ(var(--die-half)); }
.cg-dice-face--4 { transform:rotateX(-90deg) translateZ(var(--die-half)); }
.cg-dice-face--5 { transform:rotateY(-90deg) translateZ(var(--die-half)); }
.cg-dice-face--6 { transform:rotateY(180deg) translateZ(var(--die-half)); }
.cg-dice-cube.is-rolling { animation:cg-dice-tumble 1.85s cubic-bezier(.16,.68,.18,1) both; }
.cg-roll-hint { min-height:28px; color:var(--cg-muted); font-size:.72rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.cg-door-grid { width:min(100%,880px); display:grid; grid-template-columns:repeat(3,1fr); gap:18px; perspective:1100px; }
.cg-door { position:relative; aspect-ratio:.7; overflow:hidden; padding:14px; border:1px solid rgba(255,255,255,.12); border-radius:24px 24px 10px 10px; background:#090609; color:#fff; transform-style:preserve-3d; transition:transform .35s ease,opacity .25s ease,border-color .25s ease; }
.cg-door__number { position:absolute; z-index:2; top:24px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.55); font-weight:800; letter-spacing:.12em; }
.cg-door__glow { position:absolute; inset:18%; border-radius:40%; background:radial-gradient(circle,#ff3b5d,rgba(217,174,99,.28) 35%,transparent 70%); opacity:0; transform:scale(.65); transition:opacity .5s ease,transform .7s ease; }
.cg-door__panel { position:relative; z-index:1; width:100%; height:100%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.14); border-radius:15px 15px 5px 5px; background:linear-gradient(135deg,#461226,#1a0e14); transform-origin:left center; transition:transform 1.05s cubic-bezier(.18,.7,.18,1); backface-visibility:hidden; }
.cg-door__panel i { position:absolute; right:15%; width:9px; height:9px; border-radius:50%; background:#e2b96e; }
.cg-door__panel strong { color:#dfcfd2; text-transform:uppercase; letter-spacing:.11em; }
.cg-door:not(:disabled):hover .cg-door__panel { transform:perspective(700px) rotateY(-8deg); }
.cg-door.is-selected { z-index:2; transform:translateZ(24px) translateY(-8px) scale(1.025); border-color:rgba(217,174,99,.36); }
.cg-door.is-opening .cg-door__panel,.cg-door.is-open .cg-door__panel { transform:rotateY(-82deg); }
.cg-door.is-opening .cg-door__glow,.cg-door.is-open .cg-door__glow { opacity:.75; transform:scale(1.25); }
.cg-door.is-dimmed { opacity:.28; transform:scale(.96); }
.cg-door-category { min-height:44px; display:grid; place-items:center; padding:8px 16px; border:1px solid rgba(217,174,99,.36); border-radius:999px; background:rgba(217,174,99,.08); color:#efcc88; font-size:.7rem; font-weight:900; letter-spacing:.14em; animation:cg-category-rise .32s ease both; }

/* ========================================
   SECURE ONLINE SETUP STATE
   This is intentionally informational until a dedicated verified Realtime adapter reports ready.
   ======================================== */
.cg-online-state { min-height:calc(100dvh - 260px); display:flex; flex-direction:column; align-items:center; justify-content:center; max-width:760px; margin:auto; text-align:center; }
.cg-online-state__signal { position:relative; width:140px; height:82px; margin-bottom:25px; }
.cg-online-state__signal span { position:absolute; top:0; width:78px; height:78px; border:1px solid rgba(255,255,255,.15); border-radius:50%; background:#181116; }
.cg-online-state__signal span:first-child { left:0; }
.cg-online-state__signal span:last-child { right:0; border-color:rgba(217,174,99,.28); }
.cg-status-badge { display:inline-flex; min-height:30px; align-items:center; padding:6px 11px; border:1px solid rgba(217,174,99,.35); border-radius:999px; color:#eacb8c; font-size:.68rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.cg-online-state h2 { margin:15px 0; font-size:clamp(2.5rem,6vw,4.9rem); line-height:.98; }
.cg-online-state > p { max-width:650px; margin:0; color:var(--cg-muted); line-height:1.7; }
.cg-online-safety { width:min(100%,580px); margin:28px 0; padding:22px; border:1px solid var(--cg-line); border-radius:18px; background:rgba(255,255,255,.035); text-align:left; }
.cg-online-safety strong { color:#fff; }
.cg-online-safety ul { display:grid; gap:9px; margin:14px 0 0; padding-left:20px; color:var(--cg-muted); line-height:1.5; }

/* ========================================
   ISOLATED PLAY ONLINE LOBBY
   These styles prepare the test-only room, ready, synchronized-game and reconnect states.
   ======================================== */
.cg-online-auth,.cg-online-room { width:min(100%,1080px); min-height:calc(100dvh - 280px); display:grid; align-content:center; gap:24px; margin:0 auto; }
.cg-online-auth { max-width:760px; }
.cg-online-auth h2,.cg-online-room h2,.cg-online-game h2 { margin:7px 0 8px; font-family:"Playfair Display",serif; font-size:clamp(2.25rem,5vw,4.3rem); line-height:1; }
.cg-online-auth > p,.cg-online-room p { color:var(--cg-muted); line-height:1.65; }
.cg-online-auth label,.cg-online-entry-actions label,.cg-online-test-login label { display:grid; gap:8px; color:var(--cg-muted); font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.cg-online-auth input { width:100%; min-height:48px; padding:0 14px; border:1px solid var(--cg-line); border-radius:13px; outline:0; background:#0d0a0c; color:var(--cg-ink); font-size:16px; text-transform:none; }
.cg-online-auth input:focus { border-color:rgba(255,36,73,.7); box-shadow:0 0 0 3px rgba(255,36,73,.14); }
.cg-online-entry-actions { display:grid; grid-template-columns:1fr minmax(190px,.7fr) 1fr; align-items:end; gap:12px; }
.cg-online-auth__note { padding:14px 16px; border:1px solid rgba(217,174,99,.25); border-radius:14px; background:rgba(217,174,99,.055); font-size:.78rem; }
.cg-online-test-login { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:12px; padding:20px; border:1px solid var(--cg-line); border-radius:18px; background:rgba(255,255,255,.025); }
.cg-online-test-login .cg-eyebrow { grid-column:1/-1; }
.cg-online-room__header { display:flex; justify-content:space-between; align-items:end; gap:26px; padding-bottom:22px; border-bottom:1px solid var(--cg-line); }
.cg-online-room__header h2 strong { color:#efc77e; letter-spacing:.08em; }
.cg-online-players { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cg-online-player { display:grid; gap:8px; min-height:150px; padding:24px; border:1px solid var(--cg-line); border-radius:22px; background:#151014; }
.cg-online-player.is-ready { border-color:rgba(217,174,99,.4); background:linear-gradient(145deg,rgba(217,174,99,.08),#151014); }
.cg-online-player > span { color:#ff7c92; font-size:.67rem; font-weight:900; letter-spacing:.13em; }
.cg-online-player strong { font-family:"Playfair Display",serif; font-size:clamp(1.45rem,3vw,2.3rem); }
.cg-online-player small { color:var(--cg-muted); text-transform:capitalize; }
.cg-online-game-picker { display:grid; gap:16px; padding:22px; border:1px solid rgba(217,174,99,.3); border-radius:20px; background:rgba(217,174,99,.045); }
.cg-online-game-picker > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.cg-online-game-picker button { min-height:48px; padding:10px; border:1px solid var(--cg-line); border-radius:12px; background:#181116; color:#fff; font-weight:800; }
.cg-online-game-picker button:hover { border-color:#ff4565; }
.cg-online-game { display:grid; justify-items:center; gap:26px; padding:clamp(24px,5vw,48px); border:1px solid var(--cg-line); border-radius:28px; background:radial-gradient(circle at 50% 0,rgba(255,36,73,.1),transparent 42%),#0e0a0d; }
.cg-online-game .cg-game-copy { display:grid; justify-items:center; }
.cg-online-game__control { width:100%; display:grid; justify-items:center; gap:24px; }
.cg-online-game .cg-result-card { margin-top:12px; }
.cg-online-room__status { min-height:24px; margin:0; text-align:center; }
.cg-online-room [data-online-live] { position:absolute !important; width:1px; height:1px; overflow:hidden; padding:0; border:0; margin:-1px; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* ========================================
   COUPLE GAME RESPONSIVE LAYOUTS
   Validate these scoped breakpoints at 320, 390, 768, 1024 and 1440px.
   ======================================== */
@media (max-width:1024px) {
  .cg-game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cg-game-card { min-height:330px; }
}
@media (max-width:768px) {
  .cg-mode-grid,.cg-player-setup { grid-template-columns:1fr; }
  .cg-player-setup { align-items:start; }
  .cg-section-heading { display:block; }
  .cg-section-heading p { margin-top:14px; }
  .cg-game-topbar { grid-template-columns:1fr 1fr; }
  .cg-game-topbar > div { grid-column:1/-1; grid-row:1; }
  .cg-game-topbar .cg-back { grid-column:1; grid-row:2; }
  .cg-game-topbar .cg-sound { grid-column:2; grid-row:2; }
  .cg-toss-layout { grid-template-columns:1fr; }
  .cg-coin-scene { width:min(58vw,230px); }
  .cg-box-grid { grid-template-columns:repeat(4,1fr); }
  .cg-online-entry-actions,.cg-online-test-login { grid-template-columns:1fr; }
  .cg-online-test-login .cg-eyebrow { grid-column:auto; }
  .cg-online-room__header { display:grid; align-items:start; }
  .cg-online-game-picker > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px) {
  .catalog-page[data-catalog-view="couple-games"] { padding-left:16px; padding-right:16px; }
  .cg-hub { min-height:auto; padding:20px 0; }
  .cg-mode-grid,.cg-game-grid,.cg-player-fields { grid-template-columns:1fr; }
  .cg-mode-card { min-height:310px; }
  .cg-player-setup { padding:21px; }
  .cg-game-stage { align-items:start; padding:28px 16px 22px; }
  .cg-game-copy h1 { font-size:clamp(2.35rem,12vw,3.45rem); }
  .cg-result-actions { grid-template-columns:1fr; }

  .cg-ttt-board { border-radius:22px; gap:6px; }
  .cg-ttt-cell { border-radius:13px; }
  .cg-wheel { width:min(88vw,350px); }
  .cg-box-grid { grid-template-columns:repeat(2,1fr); }
  .cg-mystery-box { min-height:105px; aspect-ratio:auto; }
  .cg-reaction-zones { gap:9px; }
  .cg-reaction-zones button { min-height:170px; padding:8px; }
  .cg-reaction-zones strong { font-size:2rem; }
  .cg-dice-scene { --die-half:85px; width:170px; max-width:none; }
  .cg-dice-face { border-radius:23px; }
  .cg-dice-face b { font-size:4.4rem; }
  .cg-door-grid { gap:8px; }
  .cg-door { padding:6px; border-radius:16px 16px 7px 7px; }
  .cg-door__panel { border-radius:11px 11px 4px 4px; }
  .cg-door__panel strong { font-size:.62rem; }
  .cg-door__number { top:14px; font-size:.66rem; }
  .cg-door__panel i { width:6px; height:6px; }
  .cg-online-players { grid-template-columns:1fr; }
  .cg-online-player { min-height:128px; padding:20px; }
  .cg-online-game { padding:22px 14px; border-radius:21px; }
  .cg-online-game-picker > div { grid-template-columns:1fr; }
  .cg-wyr-grid { grid-template-columns:1fr; gap:16px; }
  .cg-wyr-vs { padding:4px 0; }
}

/* ========================================
   WOULD YOU RATHER GAME STYLES
   Cinematic two-choice interactive comparison for couples.
   ======================================== */
.cg-wyr { width:min(100%, 820px); margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.cg-wyr-grid { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:20px; width:100%; margin:24px 0; }
.cg-wyr-vs { display:grid; place-items:center; color:rgba(255,255,255,.3); font-size:.82rem; font-weight:900; letter-spacing:.18em; }
.cg-wyr-vs span { display:grid; place-items:center; width:40px; height:40px; border:1px solid rgba(255,255,255,.12); border-radius:50%; background:rgba(255,255,255,.04); }
.cg-wyr-card { position:relative; min-height:220px; display:flex; flex-direction:column; justify-content:space-between; padding:28px 24px; border:1px solid rgba(255,255,255,.14); border-radius:22px; background:linear-gradient(155deg,#1c1218,#0f0b0e 82%); color:var(--cg-ink); text-align:left; cursor:pointer; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; outline:0; }
.cg-wyr-card:hover { transform:translateY(-4px); border-color:rgba(255,107,139,.55); box-shadow:0 16px 40px rgba(0,0,0,.35); }
.cg-wyr-card:focus-visible { border-color:#ff6b8b; box-shadow:0 0 0 3px rgba(255,107,139,.25); }
.cg-wyr-card.is-selected { border-color:#ff6b8b; background:radial-gradient(circle at 50% 0,rgba(255,107,139,.25),transparent 65%),linear-gradient(155deg,#26141e,#120b10); transform:scale(1.02); }
.cg-wyr-badge { color:#ff7a96; font-size:.68rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.cg-wyr-card p { margin:16px 0; font-family:"Playfair Display",serif; font-size:clamp(1.18rem,2.5vw,1.48rem); line-height:1.35; color:#fff9f7; }
.cg-wyr-cta { font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); transition:color .2s ease; }
.cg-wyr-card:hover .cg-wyr-cta { color:#fff; }

.cg-wyr-pass-card {
  width:min(100%, 540px);
  margin:24px auto;
  padding:38px 28px;
  border:1.5px dashed rgba(255,107,139,.45);
  border-radius:26px;
  background:radial-gradient(circle at 50% 0,rgba(255,107,139,.14),transparent 75%),rgba(255,255,255,.025);
  text-align:center;
  box-shadow:0 14px 40px rgba(0,0,0,.35), 0 0 28px rgba(255,107,139,.12);
}
.cg-wyr-pass-icon { font-size:2.5rem; margin-bottom:14px; letter-spacing:.1em; animation:passPulse 2.4s ease-in-out infinite; }
@keyframes passPulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
.cg-wyr-pass-instruction { color:rgba(255,255,255,.82); font-size:1rem; line-height:1.55; margin-bottom:24px; }
.cg-wyr-ready-btn { font-size:1.02rem; padding:14px 34px; background:linear-gradient(135deg,#ff6b8b,#e83e8c); color:#fff; border:0; border-radius:999px; cursor:pointer; font-weight:700; transition:transform .2s ease, box-shadow .2s ease; box-shadow:0 8px 24px rgba(232,62,140,.35); }
.cg-wyr-ready-btn:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(232,62,140,.5); }
.cg-wyr-ready-btn:active { transform:scale(0.97); }

.cg-wyr-reveal-banner { width:100%; border-radius:20px; padding:20px 26px; text-align:center; margin-bottom:20px; animation:cg-reveal-pop .4s cubic-bezier(.16, 1, 0.3, 1); }
@keyframes cg-reveal-pop { 0%{ opacity:0; transform:scale(0.92); } 100%{ opacity:1; transform:scale(1); } }
.cg-wyr-reveal-banner--match { background:radial-gradient(circle at 50% 0,rgba(102,187,106,.28),transparent 70%),rgba(25,48,30,.82); border:1.5px solid rgba(102,187,106,.55); color:#c8e6c9; box-shadow:0 12px 36px rgba(46,125,50,.25); }
.cg-wyr-reveal-banner--different { background:radial-gradient(circle at 50% 0,rgba(255,107,139,.25),transparent 70%),rgba(46,20,28,.82); border:1.5px solid rgba(255,107,139,.55); color:#ffcdd2; box-shadow:0 12px 36px rgba(230,57,86,.25); }
.cg-wyr-reveal-status { font-size:1.24rem; font-weight:900; letter-spacing:.08em; margin-bottom:6px; display:flex; align-items:center; justify-content:center; gap:10px; }
.cg-wyr-reveal-status strong { color:#fff; }
.cg-wyr-reveal-banner p { font-size:.96rem; margin:0; opacity:.95; }

.cg-wyr-grid--revealed .cg-wyr-card { cursor:default; min-height:190px; }
.cg-wyr-grid--revealed .cg-wyr-card:hover { transform:none; box-shadow:none; }
.cg-wyr-card.is-picked { border-color:rgba(255,107,139,.75); background:radial-gradient(circle at 50% 0,rgba(255,107,139,.25),transparent 65%),linear-gradient(155deg,#26141e,#120b10); box-shadow:0 0 28px rgba(255,107,139,.25); }
.cg-wyr-card.is-unpicked { opacity:.42; border-color:rgba(255,255,255,.08); }
.cg-wyr-selections { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.cg-wyr-partner-tag { display:inline-flex; align-items:center; background:rgba(255,107,139,.25); border:1px solid rgba(255,107,139,.55); border-radius:999px; padding:4px 12px; font-size:.76rem; font-weight:800; color:#fff; }
.cg-wyr-unpicked-label { font-size:.78rem; color:rgba(255,255,255,.45); font-style:italic; }

.cg-wyr-discussion-box { width:100%; border-radius:18px; padding:20px 24px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); text-align:left; margin-top:8px; }
.cg-wyr-discussion-title { font-size:.86rem; font-weight:800; letter-spacing:.06em; color:#ff80ab; text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.cg-wyr-discussion-box p { color:rgba(255,255,255,.88); font-size:.95rem; line-height:1.55; margin:0; }

@media (max-width:680px) {
  .cg-wyr-grid { grid-template-columns:1fr; gap:14px; }
  .cg-wyr-vs { display:none; }
  .cg-wyr-card { min-height:160px; padding:20px 18px; }
}

/* ========================================
   LIGHTWEIGHT ANIMATIONS AND REDUCED MOTION
   Only opacity and transforms animate; reduced-motion users receive immediate state changes.
   ======================================== */
@keyframes cg-result-reveal { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes cg-status-pulse { from { opacity:.48; transform:translateY(2px); } to { opacity:1; transform:none; } }
@keyframes cg-win-pulse { 50% { transform:scale(.94); } }
@keyframes cg-line-horizontal { from { transform:scaleX(0); } }
@keyframes cg-line-vertical { from { transform:scaleY(0); } }
@keyframes cg-line-diagonal-positive { from { transform:rotate(45deg) scaleX(0); } }
@keyframes cg-line-diagonal-negative { from { transform:rotate(-45deg) scaleX(0); } }
@keyframes cg-celebrate { 0% { opacity:0; transform:translate(-50%,20px) scale(.8); } 45% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-50px) scale(1.15); } }
@keyframes cg-coin-flip {
  0% { transform:rotateY(0); }
  45% { transform:rotateY(calc(var(--coin-final) + 900deg)); }
  78% { transform:rotateY(calc(var(--coin-final) + 1515deg)); }
  100% { transform:rotateY(calc(var(--coin-final) + 1800deg)); }
}
@keyframes cg-dice-tumble {
  0% { transform:rotateX(0) rotateY(0) scale(1); }
  46% { transform:rotateX(calc(var(--die-x) + 405deg)) rotateY(calc(var(--die-y) + 630deg)) scale(.91); }
  78% { transform:rotateX(calc(var(--die-x) + 630deg)) rotateY(calc(var(--die-y) + 930deg)) scale(1.035); }
  100% { transform:rotateX(calc(var(--die-x) + 720deg)) rotateY(calc(var(--die-y) + 1080deg)) scale(1); }
}
@keyframes cg-box-sequence {
  0%,18% { transform:translateY(0) rotate(0); }
  28% { transform:translateY(-4px) rotate(-2deg); }
  38% { transform:translateY(2px) rotate(2deg); }
  48% { transform:translateY(-3px) rotate(-1deg); }
  62% { transform:translateY(0) rotate(0); }
  100% { transform:translateY(-6px); }
}
@keyframes cg-box-lid-open {
  0%,55% { transform:none; }
  100% { transform:rotate(-24deg) translate(-8px,-13px); }
}
@keyframes cg-box-glow {
  0%,54% { opacity:0; transform:scale(.5); }
  76% { opacity:.55; }
  100% { opacity:.32; transform:scale(1.2); }
}
@keyframes cg-countdown-pop {
  0% { opacity:.45; transform:scale(.82); }
  45% { opacity:1; transform:scale(1.1); }
  100% { opacity:1; transform:none; }
}
@keyframes cg-category-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) {
  .cg-mode-card,.cg-game-card,.cg-ttt-cell,.cg-door,.cg-door__panel,.cg-door__glow,.cg-wheel,.cg-coin,.cg-dice-cube,.cg-mystery-box,.cg-wyr-card { transition-duration:0.01ms !important; }
  .cg-result-card,.cg-stage-status,.cg-ttt-cell.is-winning,.cg-ttt.is-celebrating::after,.cg-winning-line,.cg-coin.is-flipping,.cg-dice-cube.is-rolling,.cg-mystery-box.is-animating,.cg-mystery-box.is-animating .cg-box-lid,.cg-mystery-box.is-animating .cg-box-glow,.cg-reaction.is-countdown .cg-reaction-status,.cg-door-category { animation-duration:0.01ms !important; animation-iteration-count:1 !important; }
}