/* ===========================================================
   Page de jeu — refonte design V2 (« Jeux & Cadeaux »).
   Habillage de SCÈNE autour des jeux maison existants (la
   mécanique n'est PAS touchée — corner-game.js + games/*.js).
   header · bandeau cadeau · scène thématisée (t-*) · CTA ·
   grille de dates (Puzzle/Quiz) · footer (powered-by = embed).
   Couleurs communes mappées sur les tokens marchand --corner-* ;
   les univers de scène (t-*) sont des identités FIXES.
   =========================================================== */
.cg-page { position: relative; max-width: 960px; margin: 0 auto;
    font-family: var(--corner-font, system-ui), sans-serif; }
.cg-page h1, .cg-page h2, .cg-page h3, .cg-page .num, .cg-page .big { font-family: var(--corner-font, system-ui), sans-serif; letter-spacing: -0.02em; }

/* confettis très discrets (ambiance, derrière le contenu) */
.cg-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--corner-accent, #FFB23C) 18%, transparent) 0 5px, transparent 6px) -20px 40px/180px 180px,
        radial-gradient(circle, color-mix(in srgb, var(--corner-action, #FB6B4B) 16%, transparent) 0 4px, transparent 5px) 80px 120px/220px 220px,
        radial-gradient(circle, color-mix(in srgb, var(--corner-accent, #FFB23C) 12%, transparent) 0 4px, transparent 5px) 160px 30px/260px 260px; }
.cg-page > * { position: relative; z-index: 1; }

/* ---------------- header ---------------- */
.cgh { background: var(--corner-surface-light, #FAF4EF); color: var(--corner-text-on-light, #260C2C);
    border-radius: 16px; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cgh-brand { font-weight: 800; font-size: 19px; }
.cgh-logo { max-height: 34px; width: auto; display: block; }
.cgh-back { color: var(--corner-action, #FB6B4B); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.cgh-back:hover { color: var(--corner-text-on-light, #260C2C); }
.cgh-back:focus-visible { outline: 3px solid var(--corner-accent, #FFB23C); outline-offset: 2px; }

/* ---------------- bandeau cadeau (toujours visible) ---------------- */
.prize-bar { margin-top: 12px; border-radius: 18px; overflow: hidden; position: relative;
    background: linear-gradient(112deg, var(--corner-action, #FB6B4B), var(--corner-accent, #FFB23C));
    box-shadow: 0 18px 44px -26px color-mix(in srgb, var(--corner-action, #FB6B4B) 80%, transparent);
    display: flex; align-items: center; gap: 18px; padding: 13px 20px; }
.prize-bar::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 160% at 92% 0%, rgba(255,255,255,.30), transparent 50%); }
.prize-coin { position: relative; z-index: 1; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #fff7e6, #ffd879 70%, #f2b440); color: #b06410; font-weight: 800; font-size: 22px;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(120,60,0,.3), inset 0 0 0 4px rgba(255,255,255,.4); }
.prize-text { position: relative; z-index: 1; color: #fff; }
.prize-text strong { display: block; font-weight: 800; font-size: 26px; line-height: 1; }
.prize-text strong b { font-size: 1.18em; }
.prize-text span { font-weight: 600; font-size: 14px; opacity: .95; }
.prize-cta { position: relative; z-index: 1; margin-left: auto; background: #fff; color: var(--corner-action, #e0481f); font-weight: 800; font-size: 15px;
    padding: 12px 22px; border-radius: 12px; box-shadow: 0 8px 20px rgba(120,30,0,.25); white-space: nowrap;
    animation: cg-pulse 2.6s ease-in-out infinite; }
.prize-cta:hover { transform: translateY(-2px); }
.prize-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------------- titre du jeu ---------------- */
.game-head { text-align: center; margin: 30px 0 4px; }
.game-eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--corner-accent, #FFB23C); font-weight: 700; }
.game-head h1 { color: var(--corner-text-on-dark, #FAF4EF); font-size: 44px; font-weight: 800; margin-top: 8px; }
.game-head p { color: color-mix(in srgb, var(--corner-text-on-dark, #FAF4EF) 70%, transparent); font-size: 16px; font-weight: 600; margin-top: 10px; }

/* ---------------- scène / plateau (univers t-* fixe) ---------------- */
.stage { --stage-bg: var(--corner-surface-light, #FAF4EF); --on-stage: var(--corner-text-on-light, #260C2C);
    --stage-note: color-mix(in srgb, var(--corner-text-on-light, #260C2C) 55%, transparent);
    --chip-bg: #efe6d6; --chip-fg: var(--corner-text-on-light, #260C2C); --stage-accent: var(--corner-action, #FB6B4B);
    background: var(--stage-bg); color: var(--on-stage); border-radius: 24px; padding: 14px 26px 20px; margin-top: 12px;
    box-shadow: 0 30px 60px -34px rgba(0,0,0,.8); display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* Univers t-* : les couleurs SUIVENT le Design publié de la boutique
   (--corner-stage-top/deep émis par CornerTheme, dérivés de surface.dark ;
   demande client 2026-08-14). Les hex historiques restent les FALLBACKS
   default-first : sans design publié, l'identité de chaque jeu est inchangée. */
.stage.t-puzzle { --stage-bg: linear-gradient(165deg,var(--corner-stage-top,#1d2548),var(--corner-stage-deep,#141a36)); --on-stage: var(--corner-text-on-dark,#eaf0ff); --stage-note: color-mix(in srgb, var(--corner-text-on-dark,#eaf0ff) 62%, transparent); --chip-bg: rgba(255,255,255,.12); --chip-fg: var(--corner-text-on-dark,#eaf0ff); --stage-accent: var(--corner-action,#42d8b2); }
.stage.t-roue { --stage-bg: radial-gradient(125% 120% at 50% 0%,var(--corner-stage-top,#48184f),var(--corner-stage-deep,#290e33)); --on-stage: var(--corner-text-on-dark,#ffe9f6); --stage-note: color-mix(in srgb, var(--corner-text-on-dark,#ffe9f6) 68%, transparent); --chip-bg: rgba(255,255,255,.13); --chip-fg: var(--corner-text-on-dark,#ffe9f6); --stage-accent: var(--corner-action,#ff86c8); }
.stage.t-memory { --stage-bg: linear-gradient(165deg,var(--corner-stage-top,#0f1d46),var(--corner-stage-deep,#0b1430)); --on-stage: var(--corner-text-on-dark,#e6f1ff); --stage-note: color-mix(in srgb, var(--corner-text-on-dark,#e6f1ff) 65%, transparent); --chip-bg: rgba(255,255,255,.12); --chip-fg: var(--corner-text-on-dark,#e6f1ff); --stage-accent: var(--corner-action,#5fccff); }
.stage.t-quiz { --stage-bg: linear-gradient(165deg,var(--corner-stage-top,#281663),var(--corner-stage-deep,#190f47)); --on-stage: var(--corner-text-on-dark,#fdeede); --stage-note: color-mix(in srgb, var(--corner-text-on-dark,#fdeede) 66%, transparent); --chip-bg: rgba(255,255,255,.12); --chip-fg: var(--corner-text-on-dark,#fdeede); --stage-accent: var(--corner-action,#ffd23f); }
.stage.t-mot { --stage-bg: linear-gradient(165deg,var(--corner-stage-top,#27231b),var(--corner-stage-deep,#1b1812)); --on-stage: var(--corner-text-on-dark,#f1ede1); --stage-note: color-mix(in srgb, var(--corner-text-on-dark,#f1ede1) 60%, transparent); --chip-bg: rgba(255,255,255,.10); --chip-fg: var(--corner-text-on-dark,#f1ede1); --stage-accent: var(--corner-action,#69c97e); }
.stage.t-soli { --stage-bg: radial-gradient(125% 120% at 50% 0%,var(--corner-stage-top,#14563e),var(--corner-stage-deep,#0c3527)); --on-stage: var(--corner-text-on-dark,#eafaf0); --stage-note: color-mix(in srgb, var(--corner-text-on-dark,#eafaf0) 66%, transparent); --chip-bg: rgba(255,255,255,.12); --chip-fg: var(--corner-text-on-dark,#eafaf0); --stage-accent: var(--corner-action,#f3c95f); }
.stage #corner-game { width: 100%; }
/* Memory : dos de cartes en bleu nuit sur la scène dédiée (cf. réf.). */
.stage.t-memory .cg-mem-card:not(.up):not(.done) { background: linear-gradient(135deg,#22346a,#13204a); }
.stage-head { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; }
.stage-title { color: var(--on-stage); font-size: 22px; font-weight: 800; }
.stage-sub { color: var(--stage-note); font-weight: 700; font-size: 14px; }
.stage-sub::before { content: "·"; margin: 0 10px; color: var(--stage-note); }
/* HUD de scène (chrono / score / lot) — façon maquette Quiz. */
.hud { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.chip { background: var(--chip-bg); color: var(--chip-fg); font-weight: 800; font-size: 13px; padding: 8px 14px;
    border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.chip b { color: var(--stage-accent); }

/* ---------------- note sous le jeu ---------------- */
.play-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
.cta-note { color: color-mix(in srgb, var(--corner-text-on-dark, #FAF4EF) 72%, transparent); font-weight: 700; font-size: 14.5px; }
.cta-note b { color: var(--corner-accent, #FFB23C); }

/* ---------------- grille de dates (Puzzle / Quiz) ----------------
   Bande HORIZONTALE (une seule ligne, défilement latéral) pour que la page
   tienne dans la hauteur de la fenêtre : on joue sans barre verticale. */
.dates { margin-top: 10px; }
.dates-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 2px 8px; }
.dates-head h2 { color: var(--corner-text-on-dark, #FAF4EF); font-size: 17px; font-weight: 800; }
.dates-head span { color: color-mix(in srgb, var(--corner-text-on-dark, #FAF4EF) 70%, transparent); font-weight: 700; font-size: 12px; }
.date-grid { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; scrollbar-width: thin;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.date-card { flex: 0 0 auto; width: 108px; scroll-snap-align: start;
    background: var(--corner-surface-light, #FAF4EF); color: var(--corner-text-on-light, #260C2C); border-radius: 12px;
    padding: 9px 10px; display: flex; flex-direction: column; gap: 7px; border: 1.5px solid transparent; cursor: pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s; }
.date-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(0,0,0,.5); border-color: color-mix(in srgb, var(--corner-accent, #FFB23C) 70%, transparent); }
.date-card:focus-visible { outline: 3px solid var(--corner-accent, #FFB23C); outline-offset: 2px; }
.date-card.today { border-color: var(--corner-accent, #FFB23C); }
.date-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.date-card h3 { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check { width: 18px; height: 18px; border-radius: 6px; border: 2px solid #d9c9b3; background: #fff; flex: 0 0 auto; position: relative; }
.date-card.done .check { background: linear-gradient(135deg, var(--corner-action, #FB6B4B), var(--corner-accent, #FFB23C)); border-color: transparent; }
.date-card.done .check::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.picto { flex: 0 0 auto; width: 28px; height: 28px; display: grid; gap: 3px; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); }
.picto i { border-radius: 6px; background: linear-gradient(135deg, var(--corner-action, #FB6B4B), var(--corner-accent, #FFB23C)); box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--corner-action, #FB6B4B) 50%, transparent); }
.picto i.o { background: transparent; box-shadow: none; border: 2px solid color-mix(in srgb, var(--corner-accent, #FFB23C) 55%, transparent); }

@media (max-width: 720px) {
    .game-head h1 { font-size: 34px; }
    .prize-cta { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
    @keyframes cg-pulse { 0%,100% { box-shadow: 0 8px 20px rgba(120,30,0,.25); } 50% { box-shadow: 0 8px 20px rgba(120,30,0,.25), 0 0 0 7px rgba(255,255,255,.18); } }
}
@media (prefers-reduced-motion: reduce) { .prize-cta { animation: none !important; } }

/* ===========================================================
   Styles de PLATEAU conservés (les jeux maison s'appuient dessus,
   anciennement inline dans jeu.blade.php — ne pas supprimer).
   =========================================================== */
.cg-card { background: var(--corner-surface-light, #FAF4EF); color: var(--corner-text-on-light, #260C2C);
    border-radius: 16px; padding: 22px 20px; text-align: center; }
.cg-title { font-weight: 700; font-size: 18px; margin: 0 0 18px; }
.cg-btn, .cg-replay { border: 0; border-radius: 100px; padding: 13px 28px; cursor: pointer; font: 700 15px var(--corner-font, system-ui), sans-serif;
    background: var(--corner-action, #FB6B4B); color: var(--corner-text-on-action, #fff); }
.cg-btn[disabled] { opacity: .6; cursor: default; }
.cg-btn:focus-visible, .cg-replay:focus-visible { outline: 3px solid var(--corner-accent, #FFB23C); outline-offset: 2px; }
/* Jeu « La Roue » */
.cg-roue-pts { margin: 0 0 18px; font-size: 14px; }
.cg-wheel-wrap { position: relative; width: 260px; max-width: 80vw; aspect-ratio: 1; margin: 0 auto 22px; }
.cg-wheel { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 12px 30px -12px rgba(0,0,0,.55); }
.cg-wheel svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
.cg-wheel svg text { font-family: var(--corner-font, system-ui), sans-serif; }
.cg-wheel-ptr { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); z-index: 2;
    width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent;
    border-top: 20px solid #E9B53A; filter: drop-shadow(0 2px 1px rgba(0,0,0,.45)); }