/* PLAY Game Gallery: shared by the arcade (originals/index.html) and the site's /play page.
   Cloud page, white cards, Charcoal labels, thin neutral borders, modest corners, no shadows.
   Color lives inside the previews. Breakpoints are in em so enlarged text drops to fewer columns. */
.gal { --g-violet:#8A5CF6; --g-yellow:#FFC247; --g-teal:#14C7A8; --g-charcoal:#1F2A37; --g-tan:#E6C88F; --g-cloud:#F6F8FC;
  --g-coral:#F2796B; --g-blue:#4A90E2; --g-line:#D5DAE3; --g-muted:#4B5563;
  color:var(--g-charcoal); font-family:"Atkinson Hyperlegible","Segoe UI",Arial,sans-serif; }
.gal-title { font-family:"Clash Display","Segoe UI",Arial,sans-serif; font-weight:700; font-size:clamp(2rem,5vw,3rem); line-height:1.05; margin:0; color:var(--g-charcoal); letter-spacing:0; }
.gal-intro { font-size:clamp(1.0625rem,1.6vw,1.1875rem); line-height:1.5; margin:.4rem 0 1rem; max-width:40em; color:var(--g-charcoal); }
.gal-pace { display:inline-flex; gap:4px; padding:3px; margin:0 0 1.25rem; border:1px solid var(--g-line); border-radius:10px; background:#fff; max-width:100%; }
.gal-pace button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; min-width:44px; padding:0 .9rem;
  border:2px solid transparent; border-radius:8px; background:transparent; color:var(--g-charcoal); font:700 1rem/1.2 "Atkinson Hyperlegible","Segoe UI",Arial,sans-serif; cursor:pointer; }
.gal-pace button:hover { background:var(--g-cloud); }
/* selected: violet tint with a violet border and a check, Charcoal text (white on violet is too faint at this size) */
.gal-pace { border-radius:999px; padding:4px; }
.gal-pace button { border-radius:999px; font-size:1.2rem; }
/* selected: filled Lavender Violet as in the color preview; 19px bold white text counts as large text (3:1) */
.gal-pace button[aria-pressed="true"] { background:var(--g-violet); border-color:var(--g-violet); color:#fff; }
.gal-pace button svg { display:none; }
.gal-pace button:focus-visible { outline:3px solid var(--g-charcoal); outline-offset:2px; }
.gal-grid { list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:20em) { .gal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:46em) { .gal-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } }
@media (min-width:72em) { .gal-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
.gal-grid > li { display:flex; min-width:0; }
.gal-card { display:flex; flex-direction:column; width:100%; background:#fff; border:1px solid var(--g-line); border-radius:14px; overflow:hidden; padding:8px; text-align:center;
  text-decoration:none; color:var(--g-charcoal); }
.gal-card:hover { border-color:var(--g-violet); box-shadow:inset 0 0 0 1px var(--g-violet); }
.gal-card:focus-visible { outline:3px solid var(--g-charcoal); outline-offset:2px; border-color:var(--g-violet); }
.gal-card:active { background:var(--g-cloud); }
.gal-prev { display:block; aspect-ratio:16/10; border-radius:10px; overflow:hidden; background:var(--g-cloud); }
.gal-prev svg { display:block; width:100%; height:100%; }
.gal-body { display:block; padding:.6rem .25rem .3rem; }
.gal-name { display:block; font-weight:700; font-size:1.0625rem; line-height:1.25; overflow-wrap:anywhere; hyphens:auto; }
.gal-desc { display:block; font-size:1rem; line-height:1.35; color:var(--g-muted); margin-top:.15rem; }
.gal-foot { font-size:1rem; color:var(--g-muted); margin:1.5rem 0 0; }
@media (max-width:22.5em) { .gal-pace button { padding:0 .55rem; } }
@media (prefers-reduced-motion:reduce) { .gal * { transition:none !important; animation:none !important; } }

/* header row: title and intro on the left, pace selector on the right on wide screens (as in the color preview) */
.gal-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.5rem 1.5rem; margin-bottom:1rem; }
.gal-head .gal-pace { margin:0; }
.gal-head .gal-intro { margin-bottom:0; }
@media (max-width:45.99em) { .gal-head .gal-pace { width:100%; } .gal-head .gal-pace button { flex:1; padding:0 .4rem; font-size:1.2rem; } }

/* "Play your way": quiet and hands-free help */
.gal-ways{margin:2rem 0 1rem;padding:1.25rem;border:1px solid var(--g-line);border-radius:14px;background:#fff}
.gal-ways h2{margin:0 0 .75rem;font-size:1.4rem}
.gal-ways h3{margin:0 0 .5rem;font-size:1.1rem}
.gal-ways ul{margin:0;padding-left:1.2rem;display:grid;gap:.45rem;font-size:1.05rem;line-height:1.5}
.gal-ways-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}

/* 2026-11-01: benefit first, more games per screen, black text (no grey) */
.gal { --g-muted:#1F2A37; }
.gal-benefit { font-family:"Clash Display","Segoe UI",Arial,sans-serif; font-weight:700; font-size:clamp(1.35rem,2.6vw,1.75rem); line-height:1.25; margin:.35rem 0 0; max-width:30em; color:#000; }
.gal-intro { color:#000; margin:.35rem 0 .5rem; }
.gal-points { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font-weight:700; font-size:1.0625rem; color:#000; }
.gal-points li { display:inline-flex; align-items:center; gap:.4rem; }
.gal-points svg { width:18px; height:18px; flex:none; background:#14C7A8; border-radius:50%; padding:2px; box-sizing:border-box; }
.gal-head { align-items:flex-end; margin-bottom:.75rem; }
/* compact cards: shorter picture, tighter text */
.gal-grid { gap:10px; }
.gal-card { padding:6px; border-radius:12px; }
.gal-prev { aspect-ratio:2/1; border-radius:8px; }
.gal-body { padding:.4rem .2rem .2rem; }
.gal-name { font-size:1.0625rem; }
.gal-desc { font-size:1rem; line-height:1.3; color:#000; }
@media (min-width:46em) { .gal-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:72em) { .gal-grid { grid-template-columns:repeat(6,minmax(0,1fr)); } }
.gal-foot { color:#000; }

.gal-benefit { font-family:"Atkinson Hyperlegible","Segoe UI",Arial,sans-serif; font-size:clamp(1.3rem,2.4vw,1.6rem); line-height:1.3; }
.gal-points { gap:.35rem .5rem; font-size:1rem; }
.gal-points li { background:#fff; border:1px solid var(--g-line); border-radius:999px; padding:.2rem .65rem .2rem .4rem; }
@media (max-width:45.99em) { .gal-title { font-size:1.9rem; } .gal-intro { font-size:1.0625rem; margin:.25rem 0 .45rem; } .gal-head { gap:.6rem; } }
.gal-lead { flex:1 1 26em; max-width:40em; min-width:0; }
.gal-head .gal-pace { flex:none; }
.gal-ways, .gal-ways ul, .gal-ways li { color:#000; }
/* approved games section copy (2026-11-02) */
.gal-eyebrow { font-weight:700; font-size:1rem; letter-spacing:.08em; color:#000; margin:0; }
.gal-headline { font-size:clamp(1.7rem,3.6vw,2.4rem); color:#000; margin:.1rem 0 0; text-wrap:balance; }
.gal-lead { max-width:44em; }