/* Codex's two Medicare games (assets/games/cgames.js), from prototypes/quiz-codex-2/games.css, adapted for the site (v18).
   Every rule sits under .cg with classes of its own (cg-...), so the site's section rules (.cta, .intro, .eyebrow, h2,
   section) cannot restyle the games, and the games cannot restyle the page. Codex's look is kept (paper card, cream cards,
   navy selection, gold matches, hints inside the chosen answer); the site's rules are added: hover only where there is a
   real pointer, the same glow on keyboard focus, gold-ink focus outlines, and with less motion the glow stays but nothing
   moves. Small words are a notch larger than the prototype's for easier reading. "Get ready for your visit" sits on the
   home page, which stays tight: its cards share two columns beside the two groups, so the game is about as tall as its
   groups. */
.cg{--cg-navy:var(--navy,#10203A);--cg-ink:var(--ink,#1B2A41);--cg-gold:var(--gold,#B8892E);--cg-gold2:var(--gold-2,#D9B45F);
--cg-gi:var(--gold-ink,#8F671C);--cg-gb:var(--gold-big,#AE822B);--cg-gd:#765718;--cg-gl:#E6C477;--cg-paper:#FFFDF8;--cg-muted:#526074;--cg-green:#23644C;
--cg-glow:0 0 0 3px rgba(217,180,95,.5),0 16px 30px -14px rgba(184,137,46,.75);
font:600 18px/1.5 "Nunito",system-ui,sans-serif;color:var(--cg-ink);text-align:left}
.cg *{box-sizing:border-box}
.cg [hidden]{display:none!important}
.cg .cg-nw{white-space:nowrap}
.cg .cg-card{position:relative;max-width:1000px;margin:0 auto;padding:26px 30px 20px;background:var(--cg-paper);border:1px solid #E3DBCC;
border-radius:22px;box-shadow:0 18px 60px -30px rgba(101,81,53,.25)}
.cg .cg-kick{margin:0 0 6px;font-size:15px;line-height:1.4;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cg-gi)}
.cg .cg-h{margin:0 0 8px;font-family:"Lora",Georgia,serif;font-weight:700;font-size:36px;line-height:1.14;
letter-spacing:-.01em;color:var(--cg-navy);text-wrap:balance}
.cg .cg-h em{font-weight:600;color:var(--cg-gb)}
/* v18.4 (Erick: his mother did not see that it was a game). A game looks like a game: a bold gold "GAME · Tap to play" badge
   on top (in place of the small "Quick game" line), a bigger title in Lora bold, and a first line that says what to tap,
   with an arrow down to the board. The top of the card, the progress bar with its count, the how-to line and the answer
   line under the board are centered; the board is not touched. */
.cg .cg-card:not(.cg-static){text-align:center}
.cg .cg-card:not(.cg-static) .cg-board{text-align:left}
/* v18.5: the "How to play" / "Start over" row is centered as one, like the progress and the lines under it; where
   the two do not fit side by side, Start over takes a centered line of its own */
.cg .cg-card:not(.cg-static) .cg-top{justify-content:center;flex-wrap:wrap;column-gap:24px;row-gap:0;text-align:center}
/* v18.5 fix: Start over's 4px side padding set the pair's words 2px left of the card's center; the padding reaches out
   past its place instead, so the words center and the tap area stays */
.cg .cg-card:not(.cg-static) .cg-top .cg-textbtn{margin-left:-4px;margin-right:-4px}
.cg .cg-card:not(.cg-static) .cg-h{font-size:44px}
.cg .cg-card:not(.cg-static) .cg-lede{margin-left:auto;margin-right:auto}
.cg .cg-play{margin:0 0 14px}
.cg .cg-pill{display:inline-flex;align-items:center;gap:9px;padding:5px 18px 5px 5px;border-radius:999px;background:#E8A317;color:var(--cg-navy);
font-weight:800;font-size:17px;line-height:1.2;box-shadow:0 0 0 3px rgba(232,163,23,.3),0 10px 20px -10px rgba(184,137,46,.95)}
.cg .cg-pill b{margin-right:-.12em;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.cg .cg-sep{font-weight:900}
.cg .cg-pi{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--cg-navy)}
.cg .cg-pi::after{content:"";position:absolute;left:12px;top:9px;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.cg .cg-go{display:flex;align-items:center;justify-content:center;gap:12px;width:fit-content;max-width:100%;margin:10px auto 14px;padding:10px 20px 10px 12px;
font-weight:800;font-size:21px;line-height:1.3;color:var(--cg-navy);text-align:center;background:#FFF1BF;border:2px solid var(--cg-gold);border-radius:16px;
box-shadow:0 0 22px rgba(217,180,95,.35)}
.cg .cg-gi{display:flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--cg-gold);color:var(--cg-navy);
animation:cgpoint 1.4s ease-in-out .6s 3}
.cg .cg-gi svg{width:22px;height:22px}
/* v18.5: when the words wrap, the lines are centered and the box hugs them (gamekit.js measures the longest line) */
.cg .cg-go>span:last-child{text-wrap:balance;text-align:center}
@keyframes cgpoint{50%{transform:translateY(4px)}}
.cg .cg-lede{max-width:66ch;margin:0;font-size:18px;line-height:1.5;color:var(--cg-muted)}
.cg .cg-calm{margin:6px 0 0;font-size:16px;line-height:1.45;color:var(--cg-muted)}
.cg .cg-calm span{margin-right:4px;color:var(--cg-green);font-weight:800}
.cg .cg-top,.cg .cg-prog{display:flex;justify-content:space-between;align-items:center;gap:20px}
.cg .cg-top{margin-top:16px;padding-top:10px;border-top:1px solid #ECE7DD}
.cg .cg-chapter{font-weight:800;font-size:16px;color:var(--cg-navy)}
.cg .cg-textbtn{min-height:44px;margin:0;padding:10px 4px;font:inherit;font-size:15px;font-weight:800;color:var(--cg-ink);background:none;border:0;border-radius:8px;
text-decoration:underline;text-decoration-color:#B8A88A;text-underline-offset:4px;cursor:pointer;transition:color .18s,text-shadow .18s}
.cg .cg-textbtn:focus-visible{outline:3px solid var(--cg-gi);outline-offset:3px;color:var(--cg-gd);text-shadow:0 0 12px rgba(217,180,95,.6)}
.cg .cg-prog{margin-top:8px;gap:15px}
.cg .cg-track{flex:1;height:6px;border-radius:10px;background:#EDE8DF;overflow:hidden}
.cg .cg-fill{width:0;height:100%;border-radius:10px;background:var(--cg-gold);transition:width .25s}
.cg .cg-count{font-size:14px;font-weight:800;white-space:nowrap;color:var(--cg-gd)}
.cg .cg-instr{max-width:none;margin:14px 0 20px;font-size:16px;line-height:1.5;color:var(--cg-muted)}
.cg .cg-board{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr);gap:30px;align-items:start;transition:opacity .25s,transform .3s}
.cg .cg-board.is-completing{opacity:0;transform:translateY(10px);pointer-events:none}
.cg .cg-label{margin:0 0 11px;font:800 13px/1.5 "Nunito",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--cg-muted)}
.cg .cg-pieces{display:grid;grid-template-columns:1fr;gap:9px}
/* a swipe that starts on a card still scrolls (and pinch zoom still works); a resting finger lifts it (cgames.js) */
.cg .cg-piece,.cg-ghost{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:64px;margin:0;padding:13px 15px;font:inherit;text-align:left;
color:var(--cg-ink);background:linear-gradient(125deg,#FFFDF8,#F7EDD9);border:1px solid #CFC4AE;border-bottom:3px solid #C3B28C;border-radius:12px;cursor:grab;
touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
transition:transform .16s,box-shadow .16s,background .16s,border-color .16s}
.cg .cg-plabel,.cg-ghost .cg-plabel{font-size:18px;font-weight:800;line-height:1.3}
.cg .cg-pstate{max-width:90px;font-size:13px;line-height:1.25;text-align:right;color:var(--cg-muted)}
.cg .cg-pstate:empty{display:none}
.cg .cg-piece.is-selected{color:#fff;background:var(--cg-navy);border-color:var(--cg-navy);box-shadow:0 0 0 3px var(--cg-gl),0 0 22px rgba(217,180,95,.55);transform:translateY(-2px)}
.cg .cg-piece.is-selected .cg-pstate{color:#EEE3C9}
.cg .cg-piece.is-matched{color:var(--cg-navy);background:#F5E6BF;border-color:#B99B59;cursor:default}
.cg .cg-piece.is-matched .cg-pstate{color:var(--cg-green)}
.cg .cg-piece.is-dragging{opacity:.4}
.cg .cg-piece:focus-visible{outline:3px solid var(--cg-gi);outline-offset:3px;transform:translateY(-2px);border-color:var(--cg-gold);box-shadow:var(--cg-glow)}
.cg .cg-piece.is-selected:focus-visible{border-color:var(--cg-navy);box-shadow:0 0 0 3px var(--cg-gl),0 0 22px rgba(217,180,95,.55)}
.cg-ghost{max-width:230px;min-width:150px;padding:15px;color:#fff;background:var(--cg-navy,#10203A);border:2px solid #E6C477;border-radius:12px;
box-shadow:0 10px 28px rgba(16,32,58,.22);transform:rotate(-3deg);opacity:.97;font:600 17px/1.4 "Nunito",system-ui,sans-serif;box-sizing:border-box;cursor:grabbing}
.cg-ghost .cg-pstate{display:none}
.cg .cg-targets{display:grid;gap:12px}
.cg .cg-target{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:100%;min-height:110px;margin:0;padding:17px 19px;font:inherit;
text-align:left;color:var(--cg-ink);background:#fff;border:1.5px solid #D1C9B9;border-radius:13px;cursor:pointer;-webkit-tap-highlight-color:transparent;
transition:border-color .16s,box-shadow .16s}
.cg .cg-tlabel{font-size:18px;font-weight:800;line-height:1.4}
.cg .cg-tdesc{font-size:16px;line-height:1.45;color:var(--cg-muted)}
.cg .cg-tdesc:empty,.cg .cg-tstatus:empty{display:none}
.cg .cg-tstatus{font-size:14px;font-weight:800;line-height:1.4;color:var(--cg-gd)}
.cg .cg-target.is-over{border-color:var(--cg-gd);box-shadow:var(--cg-glow)}
.cg .cg-target:focus-visible{outline:3px solid var(--cg-gi);outline-offset:3px;border-color:var(--cg-gd);box-shadow:var(--cg-glow)}
.cg .cg-target.is-matched{background:#FBF2DD;border-color:#B99B59}
.cg .cg-target.is-matched .cg-tstatus{color:var(--cg-green)}
.cg .cg-target:disabled{opacity:1;cursor:default}
.cg .cg-target.is-wrong{border-color:#9B4438;background:#FDF1EE}
.cg .cg-target.is-shake{animation:cgnudge .3s}
.cg .cg-target.is-hint{border-color:var(--cg-gold);background:#FFF8E8}
.cg .cg-target.is-hint .cg-thint{color:var(--cg-navy);border-top-color:#E6D3A6}
.cg .cg-pieces.is-nudge .cg-piece:not(:disabled){border-color:var(--cg-gold);box-shadow:var(--cg-glow)}
.cg .cg-thint{margin-top:5px;padding-top:9px;font-size:16px;line-height:1.45;color:#853E32;border-top:1px solid #D8C7BC}
.cg .cg-thint:empty{display:none}
.cg .cg-feedback{min-height:48px;margin:19px 0 0;padding:13px 0 0;font-size:16px;line-height:1.5;color:var(--cg-green);border-top:1px solid #E8E1D3}
.cg .cg-feedback:empty{border-color:transparent}
.cg .cg-feedback.is-error{color:#853E32}
/* v18.4: the progress (bar and "0 of 7 sorted"), the how-to line and the answer line sit on the card's center line */
.cg .cg-prog{justify-content:center}
.cg .cg-track{flex:0 1 300px}
.cg .cg-instr,.cg .cg-feedback{text-align:center}
/* hover only where there is a real pointer (a tap must not leave a card lit) */
@media (hover:hover){
.cg .cg-piece:not(:disabled):hover{transform:translateY(-2px);border-color:var(--cg-gold);box-shadow:var(--cg-glow)}
.cg .cg-piece.is-selected:not(:disabled):hover{border-color:var(--cg-navy);box-shadow:0 0 0 3px var(--cg-gl),0 0 22px rgba(217,180,95,.55)}
.cg .cg-target:not(:disabled):hover{border-color:var(--cg-gd);box-shadow:var(--cg-glow)}
.cg .cg-textbtn:hover{color:var(--cg-gd);text-shadow:0 0 12px rgba(217,180,95,.6)}
}
/* the finish */
.cg .cg-done{padding:22px 25px 14px;text-align:center;animation:cgreveal .35s ease-out}
.cg .cg-seal{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 20px;color:var(--cg-gd);background:#F5E8C9;border:1px solid #DEC896;border-radius:50%;
box-shadow:0 0 0 8px #FAF3E5,0 0 30px rgba(217,180,95,.55)}
.cg .cg-seal svg{width:52px;height:52px}
.cg .cg-eyebrow{margin:0;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cg-gd)}
.cg .cg-wint{margin:12px 0 16px;font-family:"Lora",Georgia,serif;font-weight:700;font-size:clamp(30px,4vw,40px);line-height:1.15;
letter-spacing:-.01em;color:var(--cg-navy);text-wrap:balance}
.cg .cg-wint:focus{outline:none}
.cg .cg-wincopy{max-width:580px;margin:0 auto;font-size:20px;line-height:1.45;color:var(--cg-ink);text-wrap:balance}
.cg .cg-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:24px 0 8px}
.cg .cg-cta{display:flex;align-items:center;justify-content:center;min-height:54px;padding:14px 22px;font-size:17px;font-weight:800;text-decoration:none;
border:1.5px solid var(--cg-navy);border-radius:11px;white-space:nowrap;transition:transform .18s,box-shadow .18s,background .18s,color .18s}
.cg .cg-primary{color:#fff;background:var(--cg-navy)}
.cg .cg-secondary{color:var(--cg-navy);background:transparent}
.cg .cg-cta:focus-visible{outline:3px solid var(--cg-gi);outline-offset:3px;transform:translateY(-2px);box-shadow:0 0 0 4px rgba(217,180,95,.35),0 14px 30px -10px rgba(184,137,46,.85)}
.cg .cg-secondary:focus-visible{background:#fff}
.cg .cg-other{display:block;width:fit-content;min-height:44px;margin:4px auto 0;padding:10px;font-size:16px;font-weight:800;color:var(--cg-navy);
text-decoration:underline;text-decoration-color:var(--cg-gold);text-underline-offset:4px;border-radius:8px;transition:color .18s,text-shadow .18s}
.cg .cg-other:focus-visible{outline:3px solid var(--cg-gi);outline-offset:3px;color:var(--cg-gi);text-shadow:0 0 12px rgba(217,180,95,.6)}
@media (hover:hover){
.cg .cg-cta:hover{transform:translateY(-2px);box-shadow:0 0 0 4px rgba(217,180,95,.35),0 14px 30px -10px rgba(184,137,46,.85)}
.cg .cg-secondary:hover{background:#fff}
.cg .cg-other:hover{color:var(--cg-gi);text-shadow:0 0 12px rgba(217,180,95,.6)}
}
/* "Get ready for your visit": the groups are big and plain, and the seven cards share two columns beside them */
.cg.cg-visit .cg-tlabel{font:700 28px/1.2 "Lora",Georgia,serif}
.cg.cg-visit .cg-tstatus{margin-top:8px}
@media (min-width:701px){
.cg.cg-visit .cg-board{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px}
.cg.cg-visit .cg-pieces{grid-template-columns:1fr 1fr}
.cg.cg-visit .cg-target{min-height:128px}
/* "Medicare words": six meanings make a tall column, so the six words stay in reach beside it (under the site's header) */
.cg.cg-words .cg-bank{position:sticky;top:calc(var(--cg-top,0px) + 16px)}
}
/* every card in its right place: what a reader sees when the script does not run */
.cg .cg-static{padding:26px 30px 24px}
.cg .cg-static .cg-lede{margin-bottom:6px}
.cg .cg-list{max-width:66ch;margin:10px 0 0;padding:0 0 0 22px;font-size:17px;line-height:1.5;list-style:disc;color:var(--cg-ink)}
.cg .cg-list li{margin:0 0 8px}
.cg .cg-list ul{margin:6px 0 0;padding:0 0 0 20px;list-style:circle}
.cg .cg-list b{color:var(--cg-navy)}
.cg .cg-list .cg-w{color:var(--cg-muted)}
@keyframes cgnudge{25%{transform:translateX(-4px)}70%{transform:translateX(4px)}}
@keyframes cgreveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* phones: what you pick from (words) or where it goes (visit) stays in reach just under the site's header */
@media (max-width:700px){
.cg .cg-card{padding:17px 16px 14px;border-radius:18px}
.cg .cg-h{font-size:28px}
.cg .cg-card:not(.cg-static) .cg-h{font-size:clamp(28px,7.7vw,32px)}
.cg .cg-pill{font-size:15.5px;gap:8px;padding-right:15px}
.cg .cg-pi{width:28px;height:28px}
.cg .cg-pi::after{left:11px;top:8px}
.cg .cg-go{gap:10px;padding:9px 14px 9px 10px;font-size:18.5px}
.cg .cg-gi{width:30px;height:30px}
.cg .cg-gi svg{width:20px;height:20px}
.cg .cg-lede{font-size:17px}
.cg .cg-calm{font-size:15px}
.cg .cg-top{gap:10px}
.cg .cg-chapter{font-size:15px}
.cg .cg-count{font-size:14px}
.cg .cg-instr{margin:12px 0 16px;font-size:16px}
.cg .cg-board{grid-template-columns:minmax(0,1fr);gap:20px}
.cg .cg-label{margin-bottom:8px;font-size:13px;letter-spacing:.1em}
.cg .cg-pieces{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cg .cg-piece{flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-height:73px;padding:10px;border-radius:10px}
.cg .cg-plabel{font-size:16px}
.cg .cg-pstate{max-width:none;font-size:13px;text-align:left}
.cg .cg-target{min-height:100px;padding:15px}
.cg .cg-tlabel{font-size:17px}
.cg .cg-tdesc{font-size:15px}
.cg .cg-thint{font-size:15px}
.cg .cg-feedback{font-size:15px}
.cg .cg-done{padding:22px 0 12px}
.cg .cg-wint{font-size:30px}
.cg .cg-wincopy{font-size:18px}
.cg .cg-ctas{flex-direction:column;gap:10px}
.cg .cg-cta{white-space:normal}
.cg .cg-static{padding:20px 16px}
.cg .cg-list{padding-left:18px}
.cg.cg-visit .cg-tbank{order:-1;position:sticky;top:var(--cg-top,0px);z-index:3;padding:9px 0;background:var(--cg-paper);box-shadow:0 7px 10px -10px rgba(16,32,58,.25)}
.cg.cg-visit .cg-targets{grid-template-columns:1fr 1fr;gap:8px}
.cg.cg-visit .cg-target{min-height:132px;padding:12px 10px;gap:6px}
.cg.cg-visit .cg-tlabel{font-size:24px}
.cg.cg-visit .cg-tdesc{font-size:14px}
.cg.cg-visit .cg-tstatus{margin-top:auto;font-size:14px}
.cg.cg-visit .cg-thint{font-size:14px}
.cg.cg-visit .cg-piece{scroll-margin-top:calc(var(--cg-top,0px) + 230px)}
.cg.cg-words .cg-bank{position:sticky;top:var(--cg-top,0px);z-index:3;padding:9px 0;background:var(--cg-paper);box-shadow:0 7px 10px -10px rgba(16,32,58,.25)}
.cg.cg-words .cg-target{scroll-margin-top:calc(var(--cg-top,0px) + 300px)}
}
@media (max-width:359px){
.cg .cg-card{padding-left:12px;padding-right:12px}
.cg .cg-plabel{font-size:15px}
.cg .cg-target{padding:13px}
}
/* a short phone screen: the words scroll with the page instead of covering it */
@media (max-width:700px) and (max-height:700px){.cg.cg-words .cg-bank{position:static}}
/* v18.5 fix: so do the visit game's two groups on a sideways phone (440px tall or less): held under the header they
   covered all but a sliver above the call bar, so no item could be seen whole (nor the one the GAME badge lights) */
@media (max-width:700px) and (max-height:440px){.cg.cg-visit .cg-tbank{position:static}}
/* less motion: nothing slides, lifts or shakes; the glow and gold stay */
@media (prefers-reduced-motion:reduce){
.cg *,.cg *::before,.cg *::after,.cg-ghost{animation:none!important;transition:none!important}
.cg .cg-board.is-completing,.cg .cg-piece.is-selected,.cg .cg-piece:focus-visible,.cg .cg-piece:not(:disabled):hover,.cg .cg-cta:focus-visible,
.cg .cg-cta:hover,.cg-ghost{transform:none}
}