/* Styles des jeux arcade maison du corner (LOT 5). Thémés via les tokens --corner-*. */

/* --- Memory --- */
.cg-mem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 360px; margin: 0 auto 18px; }
.cg-mem-card { aspect-ratio: 3/4; border: 0; border-radius: 12px; cursor: pointer; font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--corner-action, #FB6B4B); color: #fff; transition: transform .15s; }
.cg-mem-card:disabled { cursor: default; }
.cg-mem-card.up { background: var(--corner-surface-light, #FAF4EF); }
.cg-mem-card.done { background: var(--corner-accent, #FFB23C); opacity: .6; }
.cg-mem-card:focus-visible { outline: 3px solid var(--corner-accent, #FFB23C); outline-offset: 2px; }

/* --- Quiz --- */
.cg-quiz-q { font: 700 17px var(--corner-font, system-ui), sans-serif; margin: 0 0 16px; }
.cg-quiz-choices { display: flex; flex-direction: column; gap: 10px; max-width: 380px; margin: 0 auto; }
.cg-quiz-choice { border: 1px solid var(--corner-action, #FB6B4B); background: var(--corner-surface-light, #FAF4EF);
  color: var(--corner-text-on-light, #260C2C); border-radius: 12px; padding: 12px 16px; cursor: pointer;
  font: 600 15px var(--corner-font, system-ui), sans-serif; text-align: left; }
.cg-quiz-choice.ok { background: #1D8F6B; color: #fff; border-color: #1D8F6B; }
.cg-quiz-choice.ko { background: #B5392A; color: #fff; border-color: #B5392A; }
.cg-quiz-choice:focus-visible { outline: 3px solid var(--corner-accent, #FFB23C); outline-offset: 2px; }
.cg-quiz-prog { font-size: 13px; opacity: .7; margin-bottom: 10px; }

/* --- Wordle (Le Mot du jour) — grille 5×6 + clavier AZERTY, calé sur la maquette --- */
.cg-wdl { --wdl-blue: #3BA0DB; --wdl-key: #E8ECF0; --wdl-key-tx: #43545F;
  max-width: 460px; margin: 0 auto; }
.cg-wdl-timer { display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 6px 0 12px; font: 700 17px var(--corner-font, system-ui), sans-serif; color: #6B7785; }
.cg-wdl-timer svg { width: 18px; height: 18px; }
.cg-wdl-sep { height: 1px; background: #ECEFF2; margin-bottom: 18px; }
.cg-wdl-grid { display: grid; gap: 8px; justify-content: center; margin: 0 auto 20px; }
.cg-wdl-row { display: grid; gap: 8px; }
.cg-wdl-cell { width: 52px; height: 52px; max-width: 14vw; max-height: 14vw; aspect-ratio: 1;
  border: 2px solid #DCE4EA; border-radius: 10px; background: #F7F8FA;
  display: flex; align-items: center; justify-content: center;
  font: 800 24px var(--corner-font, system-ui), sans-serif; text-transform: uppercase; color: #2C3A45;
  transition: border-color .12s, box-shadow .12s; }
.cg-wdl-cell.active { border-color: var(--wdl-blue); box-shadow: inset 0 0 0 1px var(--wdl-blue); }
.cg-wdl-cell.bon { background: #1D8F6B; border-color: #1D8F6B; color: #fff; }
.cg-wdl-cell.present { background: #E6A817; border-color: #E6A817; color: #fff; }
.cg-wdl-cell.absent { background: #9AA7B0; border-color: #9AA7B0; color: #fff; }
.cg-wdl-kb { display: flex; flex-direction: column; gap: 8px; }
.cg-wdl-krow { display: flex; gap: 6px; justify-content: center; }
.cg-wdl-key { flex: 1 1 0; min-width: 0; height: 46px; border: 0; border-radius: 8px;
  background: var(--wdl-key); color: var(--wdl-key-tx);
  font: 700 15px var(--corner-font, system-ui), sans-serif; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.cg-wdl-key:hover { filter: brightness(.97); }
.cg-wdl-key:active { transform: translateY(1px); }
.cg-wdl-key.wide { flex: 1.3 1 0; }
.cg-wdl-key.valider { flex: 2.6 1 0; gap: 6px; background: var(--wdl-blue); color: #fff; white-space: nowrap; }
.cg-wdl-key svg { width: 20px; height: 20px; }
.cg-wdl-key.bon { background: #1D8F6B; color: #fff; }
.cg-wdl-key.present { background: #E6A817; color: #fff; }
.cg-wdl-key.absent { background: #9AA7B0; color: #fff; }
.cg-wdl-msg { text-align: center; margin-top: 16px; min-height: 1.2em;
  font: 600 14px var(--corner-font, system-ui), sans-serif; color: #43545F; }
.cg-wdl-replay { margin-left: 8px; border: 0; border-radius: 100px; padding: 8px 18px; cursor: pointer;
  background: var(--wdl-blue); color: #fff; font: 700 13px var(--corner-font, system-ui), sans-serif; }

/* --- Solitaire (export Construct 3 en iframe) --- */
.cg-solitaire { width: 100%; max-width: 720px; margin: 0 auto; }
.cg-frame { width: 100%; aspect-ratio: 4 / 3; min-height: 420px; border: 0; border-radius: 14px;
  background: #0b3d2e; display: block; box-shadow: 0 14px 30px -22px rgba(0,0,0,.6); }
.cg-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.cg-hint { font: 600 14px var(--corner-font, system-ui), sans-serif; opacity: .85; }