/* "What do you want to train?" picker — shared by home, /play, area pages and /profile. Area colours default to the light
   journal palette; /profile (profile.css, loaded after this file) redefines them for dark mode. */
:root { --a-logical: #2F5BC9; --a-verbal: #2E7D32; --a-spatial: #0B7C80; --a-numerical: #B35F00; --a-memory: #7240D9; --a-retrieval: #C0275F; --a-speed: #8A6500; }
.a-logical { --a: var(--a-logical); } .a-verbal { --a: var(--a-verbal); } .a-spatial { --a: var(--a-spatial); } .a-numerical { --a: var(--a-numerical); }
.a-memory { --a: var(--a-memory); } .a-retrieval { --a: var(--a-retrieval); } .a-speed { --a: var(--a-speed); }
.pick-areas { display: flex; flex-wrap: wrap; gap: 6px; }
.area-b { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--leaf, #fff); color: var(--ink, #21243B); font: 800 13.5px "Nunito", "Nunito Fallback", sans-serif; box-shadow: inset 0 0 0 1.5px var(--rule-2, #D9D6E4); }
.area-b .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--a, currentColor); display: inline-block; }
.area-b[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--a, var(--ink, #21243B)); background: color-mix(in srgb, var(--a, #6B5CE7) 10%, var(--leaf, #fff)); }
.area-b:focus-visible { outline: 3px solid var(--iris, #5546D6); outline-offset: 2px; }
.pick-detail { margin-top: 10px; min-height: 52px; }
.pick-desc { margin: 0 0 10px; font-size: 14.5px; }
.pick-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-acts .btn { min-height: 44px; display: inline-flex; align-items: center; }
.pick-games { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.pick-games a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border-radius: 12px; text-decoration: none; color: var(--ink, #21243B); box-shadow: inset 0 0 0 1px var(--rule, #E8E7F0); font-weight: 800; font-size: 14px; flex-wrap: wrap; }
.pick-games small { font-weight: 600; font-size: 11.5px; flex-basis: 100%; margin-left: 30px; margin-top: -4px; }
.pick-games .pg-e { width: 22px; text-align: center; }
/* the chosen area leads the game list; the others stay listed below it */
.area-focus { padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--brand, #6B5CE7) 7%, transparent); }
.pick-games-h { margin: 14px 0 0; font-size: 14.5px; }