/* "Think you know Medicare?": Codex's Parts A to D matching game (assets/games/cquiz.js), from prototypes/quiz-codex/quiz.css,
   adapted for the site (v18). Every rule sits under .cq with classes of its own (cq-...), so the site's section rules (.cta,
   .intro, .eyebrow, h2, section) cannot restyle the game, and the game cannot restyle the page. Codex's look is kept (paper
   card, letter tiles, dashed descriptions, navy selection, gold matches); 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. */
.cq{--cq-navy:var(--navy,#10203A);--cq-ink:var(--ink,#1B2A41);--cq-gold:var(--gold,#B8892E);--cq-gold2:var(--gold-2,#D9B45F);
--cq-gi:var(--gold-ink,#8F671C);--cq-gb:var(--gold-big,#AE822B);--cq-gd:#765718;--cq-paper:#FFFDF8;--cq-muted:#526074;--cq-green:#23644C;
--cq-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(--cq-ink);text-align:left}
.cq *{box-sizing:border-box}
.cq [hidden]{display:none!important}
.cq .cq-nw{white-space:nowrap}
.cq .cq-card{position:relative;max-width:1000px;margin:0 auto;padding:28px 32px 20px;background:var(--cq-paper);border:1px solid #E3DBCC;
border-radius:22px;box-shadow:0 18px 60px -30px rgba(101,81,53,.25)}
.cq .cq-kick{margin:0 0 6px;font-size:15px;line-height:1.4;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cq-gi)}
.cq .cq-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(--cq-navy);text-wrap:balance}
.cq .cq-h em{font-weight:600;color:var(--cq-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, a bigger title in Lora bold (the letters in the tiles stay Fraunces), 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. */
.cq .cq-card:not(.cq-static){text-align:center}
.cq .cq-card:not(.cq-static) .cq-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 */
.cq .cq-card:not(.cq-static) .cq-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 */
.cq .cq-card:not(.cq-static) .cq-top .cq-textbtn{margin-left:-4px;margin-right:-4px}
.cq .cq-card:not(.cq-static) .cq-h{font-size:44px}
.cq .cq-card:not(.cq-static) .cq-lede{margin-left:auto;margin-right:auto}
.cq .cq-play{margin:0 0 14px}
.cq .cq-pill{display:inline-flex;align-items:center;gap:9px;padding:5px 18px 5px 5px;border-radius:999px;background:#E8A317;color:var(--cq-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)}
.cq .cq-pill b{margin-right:-.12em;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.cq .cq-sep{font-weight:900}
.cq .cq-pi{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--cq-navy)}
.cq .cq-pi::after{content:"";position:absolute;left:12px;top:9px;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.cq .cq-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(--cq-navy);text-align:center;background:#FFF1BF;border:2px solid var(--cq-gold);border-radius:16px;
box-shadow:0 0 22px rgba(217,180,95,.35)}
.cq .cq-gi{display:flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--cq-gold);color:var(--cq-navy);
animation:cqpoint 1.4s ease-in-out .6s 3}
.cq .cq-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) */
.cq .cq-go>span:last-child{text-wrap:balance;text-align:center}
@keyframes cqpoint{50%{transform:translateY(4px)}}
.cq .cq-lede{max-width:62ch;margin:0;font-size:18px;line-height:1.5;color:var(--cq-muted)}
.cq .cq-calm{margin:6px 0 0;font-size:16px;line-height:1.45;color:var(--cq-muted)}
.cq .cq-calm span{margin-right:4px;color:var(--cq-green);font-weight:800}
.cq .cq-top,.cq .cq-prog{display:flex;justify-content:space-between;align-items:center;gap:20px}
.cq .cq-top{margin-top:18px;padding-top:12px;border-top:1px solid #ECE7DD}
.cq .cq-chapter{font-weight:800;font-size:16px;color:var(--cq-navy)}
.cq .cq-textbtn{min-height:44px;margin:0;padding:10px 4px;font:inherit;font-size:15px;font-weight:800;color:var(--cq-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}
.cq .cq-textbtn:focus-visible{outline:3px solid var(--cq-gi);outline-offset:3px;color:var(--cq-gd);text-shadow:0 0 12px rgba(217,180,95,.6)}
.cq .cq-prog{margin-top:10px;gap:15px}
.cq .cq-track{flex:1;height:6px;border-radius:10px;background:#EDE8DF;overflow:hidden}
.cq .cq-fill{width:0;height:100%;border-radius:10px;background:var(--cq-gold);transition:width .3s}
.cq .cq-count{font-size:14px;font-weight:800;white-space:nowrap;color:var(--cq-gd)}
.cq .cq-instr{max-width:none;margin:15px 0 22px;font-size:16px;line-height:1.5;color:var(--cq-muted)}
.cq .cq-board{display:grid;grid-template-columns:260px minmax(0,1fr);gap:36px;transform-origin:50% 20%;transition:opacity .3s,transform .4s}
.cq .cq-board.is-completing{opacity:0;transform:translateY(12px) scale(.96);pointer-events:none}
.cq .cq-label{margin:0 0 12px;font:800 13px/1.5 "Nunito",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--cq-muted)}
.cq .cq-pieces{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* a swipe that starts on a part still scrolls (and pinch zoom still works); a resting finger lifts it (cquiz.js) */
.cq .cq-piece,.cq-ghost{position:relative;min-width:0;min-height:114px;margin:0;padding:11px 7px;font:inherit;text-align:center;color:var(--cq-ink);
background:#fff;border:1px solid #BEC6D0;border-bottom:4px solid #AAB4C3;border-radius:13px;box-shadow:0 4px 8px rgba(16,32,58,.03);cursor:grab;
touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
transition:transform .18s,box-shadow .18s,border-color .18s,background .18s}
.cq .cq-letter,.cq-ghost .cq-letter{display:block;font-family:"Fraunces",Georgia,serif;font-variation-settings:'opsz' 36;font-size:38px;line-height:1.12;
font-weight:600;color:var(--cq-navy)}
.cq .cq-name,.cq-ghost .cq-name{display:block;margin-top:6px;font-size:14px;line-height:1.3;color:var(--cq-muted);overflow-wrap:anywhere}
.cq .cq-piece.is-selected{border-color:var(--cq-navy);background:#EDF3F9;box-shadow:0 0 0 3px rgba(16,32,58,.09),0 0 22px rgba(217,180,95,.45);transform:translateY(-3px)}
.cq .cq-piece.is-selected::after{content:"";position:absolute;top:9px;right:9px;width:7px;height:7px;background:var(--cq-navy);border-radius:50%}
.cq .cq-piece.is-matched{border:1px dashed #CFC8B9;background:#F7F4ED;box-shadow:none;opacity:.62;transform:none;cursor:default}
.cq .cq-piece.is-matched .cq-letter{color:var(--cq-green)}
.cq .cq-piece.is-dragging{opacity:.35}
.cq .cq-piece:focus-visible{outline:3px solid var(--cq-gi);outline-offset:3px;transform:translateY(-3px);border-color:var(--cq-gold);box-shadow:var(--cq-glow)}
.cq-ghost{opacity:.95;box-shadow:0 18px 35px rgba(16,32,58,.21);transform:rotate(-4deg);cursor:grabbing;
font:600 18px/1.5 "Nunito",system-ui,sans-serif;box-sizing:border-box}
.cq .cq-targets{display:grid;gap:10px}
.cq .cq-target{position:relative;display:flex;align-items:center;gap:15px;width:100%;min-height:89px;margin:0;padding:14px 16px;font:inherit;text-align:left;
color:var(--cq-ink);background:#fff;border:1.5px dashed #BAC1CA;border-radius:13px;cursor:pointer;-webkit-tap-highlight-color:transparent;
transition:border-color .18s,background .18s,box-shadow .18s}
.cq .cq-target.is-over{border-color:var(--cq-gd);background:#FFFAEE;box-shadow:var(--cq-glow)}
.cq .cq-target:focus-visible{outline:3px solid var(--cq-gi);outline-offset:3px;border-color:var(--cq-gd);background:#FFFAEE;box-shadow:var(--cq-glow)}
.cq .cq-ticon{flex:0 0 32px;display:grid;place-items:center;color:#778397}
.cq .cq-ticon svg{width:29px;height:29px}
.cq .cq-tbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.cq .cq-tcopy{font-size:17px;line-height:1.4;color:var(--cq-ink)}
/* a wrong or too-early tap is answered inside the tapped description (it stays until the next tap) */
.cq .cq-thint{padding-top:7px;font-size:16px;line-height:1.45;color:#853E32;border-top:1px solid #D8C7BC}
.cq .cq-thint:empty{display:none}
.cq .cq-target.is-wrong{border-style:solid;border-color:#9B4438;background:#FDF1EE}
.cq .cq-target.is-hint{border-style:solid;border-color:var(--cq-gold);background:#FFF8E8}
.cq .cq-target.is-hint .cq-thint{color:var(--cq-navy);border-top-color:#E6D3A6}
.cq .cq-pieces.is-nudge .cq-piece:not(:disabled){border-color:var(--cq-gold);box-shadow:var(--cq-glow)}
.cq .cq-slot{flex:0 0 44px;display:grid;place-items:center;width:44px;height:44px;font:600 23px/1 "Fraunces",Georgia,serif;color:#8C826E;background:var(--cq-paper);
border:1px solid #DDD7CA;border-radius:9px}
.cq .cq-target.is-matched{border:1.5px solid var(--cq-gold);background:#FFF8E8;box-shadow:0 0 18px rgba(184,137,46,.1);cursor:default}
.cq .cq-target.is-matched .cq-slot{color:#fff;background:var(--cq-navy);border-color:var(--cq-navy)}
.cq .cq-target.is-matched .cq-ticon{color:var(--cq-gd)}
.cq .cq-target.is-shake{animation:cqnudge .3s ease}
.cq .cq-feedback{display:flex;align-items:center;min-height:44px;margin:17px 0 0;padding-top:14px;font-size:16px;line-height:1.45;color:var(--cq-muted);border-top:1px solid #ECE7DD}
.cq .cq-feedback:empty{min-height:20px}
/* v18.4: the progress (bar and "0 of 4 matched"), the how-to line and the answer line sit on the card's center line */
.cq .cq-prog{justify-content:center}
.cq .cq-track{flex:0 1 300px}
.cq .cq-instr,.cq .cq-feedback{text-align:center}
.cq .cq-feedback{justify-content:center}
/* hover only where there is a real pointer (a tap must not leave a part lit) */
@media (hover:hover){
.cq .cq-piece:not(:disabled):hover{transform:translateY(-3px);border-color:var(--cq-gold);box-shadow:var(--cq-glow)}
.cq .cq-piece.is-selected:hover{border-color:var(--cq-navy)}
.cq .cq-target:not(:disabled):hover{border-color:var(--cq-gd);background:#FFFAEE;box-shadow:var(--cq-glow)}
.cq .cq-textbtn:hover{color:var(--cq-gd);text-shadow:0 0 12px rgba(217,180,95,.6)}
}
/* the finish */
.cq .cq-done{padding:18px 30px 12px;text-align:center;animation:cqreveal .45s ease-out}
.cq .cq-seal{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 19px;color:var(--cq-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)}
.cq .cq-seal svg{width:52px;height:52px}
.cq .cq-eyebrow{margin:7px 0 0;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cq-gd)}
.cq .cq-wint{margin:13px 0;font-family:"Lora",Georgia,serif;font-weight:700;font-size:clamp(30px,4vw,40px);line-height:1.1;
letter-spacing:-.01em;color:var(--cq-navy);text-wrap:balance}
.cq .cq-wint:focus{outline:none}
.cq .cq-wincopy{max-width:570px;margin:0 auto;font-size:20px;line-height:1.45;color:var(--cq-ink);text-wrap:balance}
.cq .cq-winnext{max-width:490px;margin:14px auto 24px;font-size:17px;line-height:1.5;color:var(--cq-muted);text-wrap:balance}
.cq .cq-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:8px}
.cq .cq-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(--cq-navy);border-radius:11px;white-space:nowrap;transition:transform .18s,box-shadow .18s,background .18s,color .18s}
.cq .cq-primary{color:#fff;background:var(--cq-navy)}
.cq .cq-secondary{color:var(--cq-navy);background:transparent}
.cq .cq-cta:focus-visible{outline:3px solid var(--cq-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)}
.cq .cq-secondary:focus-visible{background:#fff}
@media (hover:hover){
.cq .cq-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)}
.cq .cq-secondary:hover{background:#fff}
}
.cq .cq-again{margin-top:4px}
/* every part with its job: what a reader sees when the script does not run */
.cq .cq-static{padding:28px 32px 26px}
.cq .cq-list{max-width:64ch;margin:10px 0 0;padding:0 0 0 22px;font-size:17px;line-height:1.5;list-style:disc;color:var(--cq-ink)}
.cq .cq-list li{margin:0 0 8px}
.cq .cq-list b{color:var(--cq-navy)}
@keyframes cqnudge{25%{transform:translateX(-5px)}60%{transform:translateX(4px)}85%{transform:translateX(-2px)}}
@keyframes cqreveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* phones: the four parts stay in reach just under the site's header while the descriptions scroll by */
@media (max-width:700px){
.cq .cq-card{padding:19px 16px 14px;border-radius:18px}
.cq .cq-h{font-size:28px}
.cq .cq-card:not(.cq-static) .cq-h{font-size:clamp(28px,7.7vw,32px)}
.cq .cq-pill{font-size:15.5px;gap:8px;padding-right:15px}
.cq .cq-pi{width:28px;height:28px}
.cq .cq-pi::after{left:11px;top:8px}
.cq .cq-go{gap:10px;padding:9px 14px 9px 10px;font-size:18.5px}
.cq .cq-gi{width:30px;height:30px}
.cq .cq-gi svg{width:20px;height:20px}
.cq .cq-lede{font-size:17px}
.cq .cq-calm{font-size:15px}
.cq .cq-chapter{font-size:15px}
.cq .cq-count{font-size:14px}
.cq .cq-instr{margin:12px 0 14px;font-size:16px}
.cq .cq-board{grid-template-columns:minmax(0,1fr);gap:19px}
.cq .cq-bank{position:sticky;top:var(--cq-top,0px);z-index:2;margin-top:-8px;padding:8px 0 10px;background:var(--cq-paper);box-shadow:0 6px 10px -10px rgba(16,32,58,.25)}
.cq .cq-label{margin-bottom:8px;font-size:13px;letter-spacing:.1em}
.cq .cq-pieces{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cq .cq-piece{min-height:85px;padding:8px 4px;border-radius:10px;border-bottom-width:3px}
.cq .cq-letter{font-size:29px}
.cq .cq-name{margin-top:5px;font-size:14px;line-height:1.2}
.cq .cq-piece.is-selected::after{top:5px;right:5px;width:5px;height:5px}
.cq .cq-target{min-height:86px;gap:10px;padding:13px 11px;scroll-margin-top:calc(var(--cq-top,0px) + 130px)}
.cq .cq-tcopy{font-size:16px}
.cq .cq-thint{font-size:15px}
.cq .cq-ticon{flex-basis:25px}
.cq .cq-ticon svg{width:25px;height:25px}
.cq .cq-slot{flex-basis:36px;width:36px;height:40px;font-size:22px}
.cq .cq-feedback{font-size:15px}
.cq .cq-done{padding:22px 2px 14px}
.cq .cq-wint{font-size:30px}
.cq .cq-wincopy{font-size:18px}
.cq .cq-winnext{font-size:16px}
.cq .cq-ctas{flex-direction:column;gap:9px}
.cq .cq-cta{white-space:normal}
.cq .cq-static{padding:20px 16px}
.cq .cq-list{padding-left:18px}
.cq-ghost .cq-letter{font-size:29px}
.cq-ghost .cq-name{font-size:14px}
}
@media (max-width:700px) and (max-height:600px){.cq .cq-bank{position:static}}
@media (max-width:359px){
.cq .cq-card{padding-left:12px;padding-right:12px}
.cq .cq-ticon{display:none}
.cq .cq-pieces{gap:6px}
.cq .cq-name{font-size:12px}
}
/* less motion: nothing slides, lifts or shakes; the glow and gold stay */
@media (prefers-reduced-motion:reduce){
.cq *,.cq *::before,.cq *::after,.cq-ghost{animation:none!important;transition:none!important}
.cq .cq-board.is-completing,.cq .cq-piece.is-selected,.cq .cq-piece:focus-visible,.cq .cq-piece:not(:disabled):hover,.cq .cq-cta:focus-visible,
.cq .cq-cta:hover,.cq-ghost{transform:none}
}
