.cg-overlay { position: fixed; inset: 0; z-index: 10800; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgb(6 14 26 / 82%); overscroll-behavior: contain; }
.cg-dialog { width: min(1440px, 100%, calc((100dvh - 24px) * 1.6)); border-radius: 18px; overflow: hidden; background: #0b1f33; box-shadow: 0 18px 48px rgb(0 0 0 / 45%), 0 0 0 1px rgb(126 222 255 / 22%); font-family: Inter, 'Open Sans', Arial, sans-serif; }
/* The whole interface is drawn over the scene: the canvas fills the stage and every panel floats above it. */
.cg-stage { position: relative; width: 100%; aspect-ratio: 8 / 5; overflow: hidden; background: #102b42; container-type: inline-size; color: #eef8ff; -webkit-user-select: none; user-select: none; }
.cg-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.cg-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 1.2cqw; padding: 1.4cqw 1.6cqw; pointer-events: none; font-size: clamp(11px, 1.7cqw, 17px); }
.cg-topbar > * { pointer-events: auto; }
.cg-chip { display: inline-flex; align-items: center; gap: .4em; min-height: 2.2em; padding: .25em .9em; border-radius: 999px; background: rgb(6 20 36 / 72%); border: 1px solid rgb(126 222 255 / 28%); color: #f4fbff; font-weight: 800; line-height: 1.1; white-space: nowrap; box-shadow: 0 2px 10px rgb(0 0 0 / 25%); backdrop-filter: blur(4px); }
.cg-hud[hidden], .cg-panel[hidden], .cg-chip[hidden] { display: none !important; }
.cg-hud { display: flex; align-items: center; gap: .8cqw; min-width: 0; flex-wrap: wrap; }
.cg-chip { font-variant-numeric: tabular-nums; }
/* Bigger hearts in a chip of the same size as the others. The paddings, measured in pixels, give the hearts
   the same side spacing as the other chips: the right one absorbs the letter spacing after the last heart,
   and the top one lowers the glyphs, which the font draws high. */
.cg-lives { color: #ff6f91; letter-spacing: .12em; font-size: 1.15em; min-height: 1.913em; padding: .297em .55em .137em .67em; }
.cg-power { position: relative; overflow: hidden; }
.cg-power-fill { position: absolute; inset: 0; background: linear-gradient(90deg, #27b8e6, #8ff4ff); opacity: .45; transform: scaleX(0); transform-origin: left center; }
.cg-power-text { position: relative; }
.cg-power.is-super { border-color: #8ff4ff; color: #ffffff; box-shadow: 0 0 14px rgb(98 232 255 / 65%); }
.cg-tools { display: flex; gap: .6cqw; margin-left: auto; }
.cg-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.4em; height: 2.4em; padding: 0; border: 1px solid rgb(126 222 255 / 30%); border-radius: 50%; background: rgb(6 20 36 / 72%); color: #f4fbff; font-size: 1em; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgb(0 0 0 / 25%); backdrop-filter: blur(4px); }
.cg-icon:hover { background: rgb(14 52 82 / 85%); }
.cg-panel { position: absolute; z-index: 2; left: 50%; bottom: 3.5%; transform: translateX(-50%); width: min(94%, 900px); max-height: 58%; overflow: hidden; display: flex; flex-direction: column; gap: 1cqw; padding: 1.6cqw 2.2cqw; border-radius: 18px; background: rgb(7 22 40 / 84%); border: 1px solid rgb(126 222 255 / 35%); box-shadow: 0 10px 34px rgb(0 0 0 / 40%); backdrop-filter: blur(8px); font-size: clamp(11px, 1.5cqw, 16px); line-height: 1.35; }
.cg-panel.is-result { top: 50%; bottom: auto; transform: translate(-50%, -50%); text-align: center; width: min(80%, 640px); }
.cg-panel.is-board { max-height: 92%; }
.cg-panel.is-won { border-color: rgb(255 215 106 / 70%); box-shadow: 0 0 32px rgb(255 205 80 / 30%), 0 10px 34px rgb(0 0 0 / 40%); }
.cg-panel.is-lost { border-color: rgb(160 180 205 / 50%); }
.cg-copy { flex: 1 1 auto; min-height: 0; overflow: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgb(126 222 255 / 45%) transparent; }
.cg-copy::-webkit-scrollbar { width: 6px; }
.cg-copy::-webkit-scrollbar-track { background: transparent; }
.cg-copy::-webkit-scrollbar-thumb { border-radius: 6px; background: rgb(126 222 255 / 45%); }
.cg-copy::-webkit-scrollbar-thumb:hover { background: rgb(126 222 255 / 70%); }
.cg-copy p { margin: 0 0 .55em; color: inherit; }
.cg-copy p:last-child { margin-bottom: 0; }
.cg-copy p[hidden] { display: none; }
.cg-panel-title { margin: 0 0 .4em; font-size: 1.35em; font-weight: 800; line-height: 1.2; color: #8fe8ff; }
/* The title line stays outside the scrolling text, so the game name and the leaderboard link never move. */
.cg-title-row { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2em .9em; margin: 0; }
.cg-title-row .cg-panel-title { margin: 0; }
.cg-title-row .cg-link { margin: 0; white-space: nowrap; }
.cg-panel.is-result .cg-title-row { justify-content: center; }
.cg-panel.is-won .cg-panel-title { color: #ffd76a; }
.cg-controls { padding: .45em .8em; border-left: 3px solid #27b8e6; border-radius: 6px; background: rgb(39 184 230 / 16%); font-weight: 700; }
.cg-reward-hint { color: #ffd76a; font-weight: 600; }
.cg-reward-hint::before { content: '★ '; }
.cg-reward-hint.is-loss { color: #ff9aa9; }
.cg-reward-hint.is-loss::before { content: '✖ '; }
/* Result shown from the local run while the server has not recorded it. */
.cg-copy .cg-result-warning { color: #ffd27a; }
.cg-options { flex: 0 0 auto; padding: .6em 0 .85em; border-top: 1px solid rgb(126 222 255 / 22%); }
.cg-level-row { display: flex; align-items: center; gap: .7em; }
.cg-options[hidden], .cg-bet[hidden], .cg-bet-note[hidden] { display: none !important; }
.cg-options-title { margin: 0; font-weight: 700; color: #8fe8ff; white-space: nowrap; }
.cg-levels { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.cg-level { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 .25em;padding: .35em .4em; border: 1px solid rgb(126 222 255 / 35%); border-radius: 12px; background: rgb(6 20 36 / 60%); color: #eef8ff; font: inherit; font-weight: 700; cursor: pointer; }
.cg-level:hover { background: rgb(14 52 82 / 80%); }
.cg-level[aria-pressed="true"] { border-color: #3fd0ff; background: rgb(39 184 230 / 28%); box-shadow: 0 0 12px rgb(63 208 255 / 35%); }
.cg-level-reward { color: #ffd76a; font-size: .9em; }
/* Reward coins flying from the scene to the Choupy widget, raised above the overlay while they land. */
.cg-coin.cg-fly-coin { position: fixed; left: 0; top: 0; z-index: 10900; width: 28px; height: 28px; font-size: 28px; pointer-events: none; box-shadow: 0 0 12px rgb(252 211 77 / 75%); }
.btp-public-chatbot-launcher.cg-reward-target { z-index: 10850 !important; }
.cg-level-time { margin-left: .2em; font-size: .85em; font-weight: 600; opacity: .8; }
.cg-coin { display: inline-flex; flex: 0 0 auto; width: 1.15em; height: 1.15em; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%); color: #7c4a03; }
.cg-coin svg { width: 78%; height: 78%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.cg-bet { display: flex; align-items: center; gap: .55em; margin: .85em 0 0; font-weight: 700; cursor: pointer; }
.cg-bet input { width: 1.15em; height: 1.15em; margin: 0; accent-color: #ffd76a; flex: 0 0 auto; }
.cg-bet span { position: relative; top: .1em; line-height: 1.2; }
.cg-bet .cg-bet-x2 { top: 0; flex: 0 0 auto; padding: .27em .5em .05em; border-radius: 999px; background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%); color: #5b3502; font-size: .85em; font-weight: 900; line-height: 1; }
.cg-bet:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.cg-bet-note { margin: 0; font-size: .85em; opacity: .85; }
.cg-level:focus-visible, .cg-bet input:focus-visible { outline: 3px solid #27b8e6; outline-offset: 2px; }
.cg-score { font-size: 2em; font-weight: 900; color: #ffffff; font-variant-numeric: tabular-nums; }
/* Leaderboard inside the panel: introduction toggle, period tabs and the top 10 with the player's own line. */
.cg-link { align-self: flex-start; margin: .3em 0 0; padding: .22em 0 .12em; border: 0; border-bottom: 1px dashed rgb(126 222 255 / 55%); background: none; color: #8fe8ff; font: inherit; font-weight: 700; cursor: pointer; }
.cg-link:hover { color: #ffffff; border-bottom-color: #ffffff; }
.cg-link:focus-visible, .cg-tab:focus-visible { outline: 3px solid #27b8e6; outline-offset: 2px; }
.cg-board { display: flex; flex-direction: column; gap: .5em; padding: 6px 0 .25em; text-align: left; }
.cg-board-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .8em; }
.cg-board-head .cg-link { margin: 0; }
.cg-board-title { flex: 1 1 auto; margin: 0; font-size: 1.05em; color: #ffffff; }
.cg-tabs { display: flex; gap: .3em; }
.cg-tab { padding: .24em .85em .3em; border: 1px solid rgb(126 222 255 / 35%); border-radius: 999px; background: rgb(6 20 36 / 60%); color: #eef8ff; font: inherit; font-size: .9em; font-weight: 700; cursor: pointer; }
.cg-tab:hover { background: rgb(14 52 82 / 80%); }
.cg-tab[aria-pressed="true"] { border-color: #3fd0ff; background: rgb(39 184 230 / 28%); }
.cg-board-mine { margin: 0; font-weight: 800; color: #ffd76a; text-align: center; }
.cg-board-note { margin: 0; opacity: .85; }
.cg-board-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .2em; }
.cg-board-row { display: grid; grid-template-columns: 3em 1fr auto; align-items: center; gap: .6em; padding: .28em .7em .22em; border-radius: 10px; background: rgb(6 20 36 / 55%); }
.cg-board-row:nth-child(-n+3) .cg-board-rank { color: #ffd76a; }
.cg-board-row.is-me { background: rgb(39 184 230 / 26%); box-shadow: inset 0 0 0 1px #3fd0ff; }
.cg-board-rank { font-weight: 900; color: #8fe8ff; font-variant-numeric: tabular-nums; }
.cg-board-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-board-score { font-weight: 800; font-variant-numeric: tabular-nums; }
.cg-board-gap { text-align: center; opacity: .6; line-height: 1; }
.cg-board-anon { display: flex; align-items: center; gap: .55em; margin: .2em 0 0; font-size: .9em; cursor: pointer; }
.cg-board-anon input { width: 1.05em; height: 1.05em; margin: 0; accent-color: #3fd0ff; flex: 0 0 auto; }
.cg-board-anon span { line-height: 1.2; }
.cg-board[hidden], .cg-board-mine[hidden], .cg-board-note[hidden], .cg-link[hidden] { display: none !important; }
.cg-status { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; max-width: 80%; padding: .6em 1.2em; border-radius: 999px; background: rgb(6 20 36 / 82%); border: 1px solid rgb(126 222 255 / 30%); color: #f4fbff; font-weight: 700; font-size: clamp(12px, 1.7cqw, 17px); text-align: center; pointer-events: none; }
.cg-status:empty { display: none; }
.cg-actions { flex: 0 0 auto; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cg-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 18px; border: 1px solid currentColor; border-radius: 12px; background: transparent; color: inherit; font-weight: 600; cursor: pointer; }
.cg-panel .cg-button { min-height: 2.6em; padding: .58em 1.2em .42em;border-color: rgb(238 248 255 / 60%); font-size: 1em; }
.cg-button:disabled { opacity: .55; cursor: wait; }
.cg-primary { background: var(--cg-primary, #0e749e); color: var(--cg-on-primary, #fff); border-color: transparent; }
.cg-panel .cg-primary { background: linear-gradient(180deg, #3fd0ff, #0e86b8) border-box; border-color: transparent; color: #fff; font-weight: 800; box-shadow: 0 0 16px rgb(63 208 255 / 45%); }
.cg-button:focus-visible, .cg-icon:focus-visible, .cg-stage canvas:focus-visible { outline: 3px solid #27b8e6; outline-offset: 3px; }
.cg-stage canvas:focus-visible { outline-offset: -3px; }
.cg-fullscreen svg, .cg-close svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cg-fullscreen[hidden] { display: none !important; }
/* In full screen the dialog fills the screen and the scene is as large as its 16:10 ratio allows. */
.cg-dialog:fullscreen { width: 100vw; height: 100vh; max-width: none; border-radius: 0; display: flex; align-items: center; justify-content: center; background: #000; box-shadow: none; }
.cg-dialog:fullscreen .cg-stage { width: min(100vw, calc(100vh * 1.6)); }
.cg-dialog:-webkit-full-screen { width: 100vw; height: 100vh; max-width: none; border-radius: 0; display: flex; align-items: center; justify-content: center; background: #000; box-shadow: none; }
.cg-dialog:-webkit-full-screen .cg-stage { width: min(100vw, calc(100vh * 1.6)); }
/* Choupy's glove is the cursor of the whole scene; its fingertip (5,5) is the click point. Disabled controls keep their own cursor. */
.cg-stage, .cg-stage canvas, .cg-stage button, .cg-stage label, .cg-stage input { cursor: url("/assets/shared/img/choupy-games/choupy/cursor-point-32.webp?v=202610270249") 5 5, pointer; cursor: image-set(url("/assets/shared/img/choupy-games/choupy/cursor-point-32.webp?v=202610270249") 1x, url("/assets/shared/img/choupy-games/choupy/cursor-point-64.webp?v=202610270249") 2x) 5 5, pointer; }
.cg-stage:active, .cg-stage :active { cursor: url("/assets/shared/img/choupy-games/choupy/cursor-press-32.webp?v=202610270249") 5 5, pointer; cursor: image-set(url("/assets/shared/img/choupy-games/choupy/cursor-press-32.webp?v=202610270249") 1x, url("/assets/shared/img/choupy-games/choupy/cursor-press-64.webp?v=202610270249") 2x) 5 5, pointer; }
[data-choupy-games-gallery] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.cg-card { border: 1px solid var(--cg-border, #dce6ef); border-radius: 16px; padding: 20px; color: inherit; display: flex; flex-direction: column; align-items: flex-start; }
.cg-card h3 { margin-top: 0; color: inherit; }
.cg-card .cg-button { margin-top: auto; }
.cg-actions[hidden], .cg-button[hidden] { display: none !important; }
.cg-preview { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cg-border, #dce6ef); }
.cg-preview[hidden] { display: none !important; }
/* Settings of the Choupy games page: flex centring already aligns the checkbox with the text, measured in pixels. */
.cg-setting { display: flex; align-items: center; gap: .55em; margin: 0; font-weight: 600; cursor: pointer; }
.cg-setting input { width: 1.05em; height: 1.05em; margin: 0; flex: 0 0 auto; }
.cg-setting + [role="status"] { margin: .2em 0 .8em; }
.seasonal-theme-preview-control .cg-preview { margin: 0 0 10px; padding: 0 0 10px; border-top: 0; border-bottom: 1px solid var(--cg-border, #dce6ef); }
.cg-preview label { display: block; margin: 0 0 4px; font-weight: 600; }
.cg-preview select, .cg-preview button { box-sizing: border-box; display: block; width: 100%; min-width: 0; min-height: 30px; padding: 5px 8px; border: 1px solid var(--cg-border, #dce6ef); border-radius: 6px; color: inherit; background: inherit; font: inherit; }
.cg-preview button { margin-top: 8px; cursor: pointer; }
.cg-preview button:disabled { opacity: .55; cursor: default; }
.cg-preview select:focus-visible, .cg-preview button:focus-visible { outline: 3px solid #27b8e6; outline-offset: 3px; }
.cg-preview-standalone { box-sizing: border-box; position: fixed; right: 86px; bottom: 14px; z-index: 990; width: 250px; max-width: calc(100vw - 100px); max-height: calc(100dvh - 28px); overflow: auto; margin: 0; padding: 8px 12px; border: 1px solid var(--cg-border, #dce6ef); border-radius: 12px; color: var(--cg-text, #233a52); background: var(--cg-surface, #fff); box-shadow: 0 3px 12px rgb(0 0 0 / 12%); font-family: Inter, 'Open Sans', Arial, sans-serif; font-size: 12px; }
@media (max-width: 767px) { .cg-preview-standalone { bottom: 10px; right: 82px; max-width: calc(100vw - 92px); padding: 6px 10px; font-size: 11px; } }
@media print { .cg-preview { display: none !important; } }
/* Everyday animation of a game at the bottom of the page: only Choupy, its button, takes the clicks. */
.cg-teaser { position: fixed; left: 0; right: 0; bottom: max(4px, env(safe-area-inset-bottom)); z-index: 90; height: 130px; pointer-events: none; }
.cg-teaser[hidden] { display: none; }
.cg-teaser-canvas { display: block; width: 100%; height: 100%; }
.cg-teaser-actor { position: absolute; left: 0; top: 0; margin: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; pointer-events: auto; }
.cg-teaser-actor[hidden] { display: none; }
.cg-teaser-actor:focus-visible { outline: 3px solid #27b8e6; outline-offset: 3px; }
.cg-teaser-actor::after { content: '!'; position: absolute; right: -14px; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: #ff8a1f; color: #fff; font: 700 15px/22px Inter, Arial, sans-serif; text-align: center; box-shadow: 0 2px 6px rgb(0 0 0 / 35%); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.cg-teaser-actor:hover::after, .cg-teaser-actor:focus-visible::after { opacity: 1; transform: scale(1); }
/* Choupy's call for help, as in the seasonal scenes. */
.cg-teaser-bubble { position: absolute; left: 50%; bottom: calc(100% + 12px); width: max-content; max-width: 200px; padding: 6px 11px; border: 2px solid #1d2a44; border-radius: 14px; background: #fff; color: #1d2a44; font: 700 13px/1.25 Inter, Arial, sans-serif; text-align: center; transform: translateX(-30%); transform-origin: 30% 100%; box-shadow: 0 3px 8px rgb(0 0 0 / 30%); transition: transform .15s; }
.cg-teaser-bubble::before, .cg-teaser-bubble::after { content: ''; position: absolute; top: 100%; left: 30%; border-style: solid; border-color: transparent; }
.cg-teaser-bubble::before { margin-left: -9px; border-width: 9px 9px 0 0; border-top-color: #1d2a44; }
.cg-teaser-bubble::after { margin: -3px 0 0 -6px; border-width: 6px 6px 0 0; border-top-color: #fff; }
.cg-teaser-actor:hover .cg-teaser-bubble { transform: translateX(-30%) scale(1.06); }
@media (max-width: 767px) { .cg-teaser { height: 92px; } .cg-teaser-bubble { max-width: 150px; padding: 4px 8px; font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .cg-teaser { display: none; } }
@media print { .cg-teaser { display: none !important; } }
@media (max-width: 600px) { .cg-overlay { padding: 6px; } .cg-dialog { border-radius: 14px; } }
@container (max-width: 560px) { .cg-panel { left: 8px; right: 8px; bottom: 8px; top: 3.4em; width: auto; max-height: none; transform: none; padding: 10px 12px; font-size: 12px; } .cg-panel.is-result { top: 50%; bottom: auto; left: 50%; right: auto; width: 86%; transform: translate(-50%, -50%); } .cg-panel .cg-button { min-height: 36px; padding: 6px 12px; } .cg-hud .cg-power { display: none; } }