:root{--navy:#081d46;--blue:#0b63d1;--gold:#ffd24d;--good:#1f8f4a;--bad:#b42318;--slate:#334155} /* Jeopardy-theme palette. Used by body.jeopardyTest rules — the dark-purple */ /* arcade look. Names describe color, not role, since several tokens (e.g., */ /* --jp-yellow) serve as both background fills and accent text depending on */ /* context. */ :root{ --jp-yellow:#fff200; /* primary bright accent (text, fills, glow) */ --jp-gold:#ffcf35; /* warmer yellow companion */ --jp-black:#050015; /* deep shadow / drop-shadow ink */ --jp-purple-deep:#180035; /* dark purple text on light, base of gradients*/ --jp-mint:#7dffba; /* "correct" green accent */ --jp-mint-ink:#05351f; /* dark green text used on mint backgrounds */ --jp-pink:#ff8db1; /* "wrong" pink accent */ --jp-violet:#ef84ff; /* panel border / accent magenta */ --jp-magenta:#ef4fd4; /* header underline / glow accent */ --jp-cyan:#12f3ff; /* chromatic-aberration cyan accent */ --jp-cream:#fff1e7; /* off-white text on dark purple */ --jp-lavender:#d9ccff; /* muted secondary text on dark purple */ --jp-brown:#7d4100; /* warm brown drop-shadow under gold buttons */ } *{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#f8fbff,#dcebff);color:#10213b} header{background:var(--navy);color:#fff;padding:18px 20px;text-align:center} header h1{margin:0;font-size:clamp(28px,5vw,52px)}header p{margin:8px 0 0;opacity:.9} main{max-width:1240px;margin:22px auto 40px;padding:0 16px} .panel{background:rgba(255,255,255,.97);border:1px solid #d1dfef;border-radius:12px;box-shadow:0 8px 24px rgba(8,29,70,.10);padding:22px;margin-bottom:18px} .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center} button{border:none;border-radius:10px;padding:14px 18px;font-size:16px;font-weight:800;cursor:pointer;background:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(11,99,209,.22)} button.secondary{background:var(--slate)}button:disabled{opacity:.5;cursor:not-allowed} .hidden{display:none !important} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .stat{background:#fff;border:1px solid #dbe6f2;border-radius:10px;padding:14px;text-align:center} .stat span{display:block;font-size:13px;color:#64748b;text-transform:uppercase;letter-spacing:.05em} .stat strong{display:block;font-size:28px;color:var(--navy);margin-top:4px} .category{display:inline-block;background:var(--gold);color:var(--navy);font-weight:900;padding:8px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em} .clue{font-size:clamp(24px,4vw,42px);line-height:1.15;font-weight:900;color:var(--navy);margin:14px 0 8px} .subclue{font-size:17px;color:#475569;min-height:24px} .timerWrap{margin:16px 0 18px;width:100%;height:18px;background:#dbeafe;border-radius:999px;overflow:hidden;border:1px solid #bfdbfe} .timerBar{width:100%;height:100%;transform-origin:left center;background:linear-gradient(90deg,#22c55e,#facc15,#ef4444)} .options{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:14px;margin-top:16px} .optionBtn{width:100%;min-height:88px;padding:16px;text-align:center;font-size:21px;line-height:1.2;background:#fff;color:#0f172a;border:2px solid #cfe0f3;border-radius:10px;box-shadow:none} .optionBtn.correct{background:#dcfce7;border-color:#16a34a;color:#14532d}.optionBtn.wrong{background:#fee2e2;border-color:#dc2626;color:#7f1d1d} .optionBtn img.flagChoice{width:auto;max-width:min(360px,82%);height:clamp(126px,18vh,190px);object-fit:contain;border:0;border-radius:0;display:block;margin:0 auto;background:transparent;padding:0;box-shadow:none} .bigFlag{display:block;width:min(560px,92%);height:clamp(180px,28vh,310px);object-fit:contain;border-radius:0;border:0;background:transparent;margin:12px auto 8px;padding:0;box-shadow:none} .mapWrap{width:100%;background:#fff;border:2px solid #dbeafe;border-radius:4px;overflow:hidden;margin-top:16px;padding:14px} .mapWrap svg{border-radius:0;max-height:680px} .studyVisualWrap{grid-column:1/-1;margin-top:10px} .studyVisualTitle{font-size:15px;color:#475569;font-weight:800;margin:0 0 8px} svg{display:block;width:100%;height:auto;background:#d7edf6} .feedback{margin-top:16px;border-radius:10px;padding:14px 16px;font-size:24px;font-weight:900} .feedback.good{background:#dcfce7;color:#14532d}.feedback.bad{background:#fee2e2;color:#7f1d1d}.feedback.neutral{background:#eff6ff;color:#1e3a8a} .answerLine{font-size:19px;margin-top:10px}.note{color:#475569;font-size:15px}.loading{color:#334155;font-size:18px} .messageBox{margin:0 22px 12px;padding:12px 14px;border:1px solid #bfdbfe;background:#eff6ff;color:#1e3a8a;border-radius:8px;font-weight:800} .messageBox.good{border-color:#bbf7d0;background:#f0fdf4;color:#166534}.messageBox.warn{border-color:#fed7aa;background:#fff7ed;color:#9a3412}.messageBox.bad{border-color:#fecaca;background:#fef2f2;color:#991b1b} .teachingNote{margin-top:10px;padding:10px 12px;border:1px solid #dbeafe;background:#f8fafc;border-radius:8px;color:#334155;font-size:15px;line-height:1.35} /* President answer-reveal visual: official portrait centered on a soft gradient background. The visual fills the entire available column on the left (flex:1 + width:100% + height:100%); the portrait centers within that frame both horizontally and vertically. max-width / max-height keep the image from overflowing wide screens or pushing the right facts panel off the bottom on tall portraits. */ .presidentVisual{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#1f2a4d,#0f1733);padding:clamp(14px,2vh,28px);position:relative;width:100%;height:100%;min-height:0;flex:1 1 auto} .presidentPortrait{display:block;max-width:min(78%,520px);max-height:min(78%,clamp(220px,60vh,560px));object-fit:contain;border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,.55);background:#0f1733;margin:auto} .presidentPortrait[src=""],.presidentPortrait:not([src]){background:linear-gradient(180deg,#1f2a4d,#0f1733);min-height:160px;min-width:120px} /* Clean fallback when no portrait is available (offline, no manifest entry, Wikipedia returned nothing). Replaces the broken-image icon + alt text with a centered initials card that matches the dark Jeopardy palette. */ .presidentPortraitFallback{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; margin:auto; width:min(60%,320px);aspect-ratio:3/4; max-height:min(78%,clamp(220px,60vh,560px)); background:radial-gradient(circle at 50% 38%,#1f2a4d 0%,#0f1733 65%,#070d22 100%); border:1px solid rgba(250,204,21,.25);border-radius:14px; box-shadow:0 12px 36px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04); padding:18px; } .presidentPortraitInitials{ font-size:clamp(48px,9vh,96px);font-weight:950;letter-spacing:.02em;line-height:1; color:#facc15; text-shadow:0 0 24px rgba(250,204,21,.18),3px 3px 0 rgba(0,0,0,.55); font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; } .presidentPortraitName{ font-size:clamp(11px,1.6vh,14px);font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:#cbd5e1;opacity:.85;text-align:center; } body.jeopardyTest .presidentVisual{background:radial-gradient(circle at center,rgba(255,255,255,.10),transparent 55%),linear-gradient(180deg,#270858,#100038)} body.jeopardyTest .presidentPortrait{box-shadow:0 14px 42px rgba(0,0,0,.65)} /* "Forget Everything" — the one button on the page that nukes localStorage. */ /* Visually loud (red + warning glyph) but dimmed by default (opacity .55) so it */ /* doesn't compete with the play surface; brightens to full on hover so a */ /* deliberate user can find it but a stray click won't pop the modal. */ /* Cross-computer sync controls. Sit above the danger zone — frequently used enough to be discoverable, but visually muted so they don't compete with the board itself. Save downloads a progress.js, Import picks one to load. */ .syncZone{margin-top:18px;padding:10px 6px 0;display:flex;justify-content:center;gap:10px;flex-wrap:wrap} .syncBtn{ background:rgba(255,255,255,.06);color:#cbd5e1; font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.10em; padding:8px 14px;border-radius:999px; border:1px solid rgba(56,189,248,.45); cursor:pointer; transition:background .15s, color .15s, border-color .15s, transform .1s; } .syncBtn:hover{background:rgba(56,189,248,.18);color:#fff;border-color:rgba(56,189,248,.75)} .syncBtn:focus-visible{outline:2px solid #38bdf8;outline-offset:3px} .syncBtn:active{transform:translateY(1px)} body.jeopardyTest .syncBtn{color:var(--jp-lavender);background:rgba(5,0,43,.4);border-color:rgba(255,242,0,.45)} body.jeopardyTest .syncBtn:hover{background:rgba(255,242,0,.16);color:#fff;border-color:var(--jp-yellow)} /* Toast for save/import feedback. Slides up from the bottom, fades out. */ .syncToast{ position:fixed;left:50%;bottom:30px;transform:translateX(-50%); background:#0f172a;color:#f1f5f9; padding:12px 18px;border-radius:10px;font-weight:700;font-size:14px; box-shadow:0 14px 36px rgba(0,0,0,.45); border:1px solid rgba(56,189,248,.45); z-index:10000;max-width:min(560px,90vw);text-align:center; animation:syncToastIn 240ms ease-out; opacity:1;transition:opacity 600ms ease; } .syncToastError{border-color:rgba(239,68,68,.65);background:#7f1d1d;color:#fee2e2} .syncToastFade{opacity:0} @keyframes syncToastIn{ from{ transform:translate(-50%, 30px); opacity:0 } to { transform:translate(-50%, 0); opacity:1 } } /* Top banner that surfaces an available import when auto-import is off. */ .syncBanner{ position:fixed;top:14px;left:50%;transform:translateX(-50%); background:#0c4a6e;color:#e0f2fe; padding:10px 16px;border-radius:999px;font-weight:700;font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,.4); border:1px solid rgba(56,189,248,.55); z-index:9999;display:flex;align-items:center;gap:10px; } .syncBanner button{ background:rgba(255,255,255,.12);color:#fff;border:0; padding:6px 12px;border-radius:999px;font-weight:800;font-size:12px; text-transform:uppercase;letter-spacing:.06em;cursor:pointer; } .syncBanner button:hover{background:rgba(255,255,255,.22)} /* Tiny live-sync indicator (HTTP mode only). Top-right corner, hover for "last sync N seconds ago." Color encodes state: gray=idle, green=just- synced, amber=busy, red=last save failed. pointer-events:none so it never blocks clicks; aria-hidden because the title attr carries the useful info already. */ .syncIndicator{ position:fixed;top:12px;right:14px; width:10px;height:10px;border-radius:50%; background:#64748b; box-shadow:0 0 0 2px rgba(15,23,42,.45); pointer-events:none;z-index:9998; transition:background .25s ease, box-shadow .25s ease; } .syncIndicator_idle{ background:#64748b } .syncIndicator_ok { background:#22c55e; box-shadow:0 0 0 2px rgba(34,197,94,.25), 0 0 12px rgba(34,197,94,.6) } .syncIndicator_busy{ background:#facc15; animation:syncBusyPulse 1s ease-in-out infinite } .syncIndicator_err { background:#ef4444; box-shadow:0 0 0 2px rgba(239,68,68,.3), 0 0 12px rgba(239,68,68,.6) } @keyframes syncBusyPulse{ 0%, 100% { opacity:1; transform:scale(1) } 50% { opacity:.45; transform:scale(0.7) } } .dangerZone{margin-top:22px;padding:14px 6px 4px;display:flex;justify-content:center} .forgetEverythingBtn{background:linear-gradient(180deg,#dc2626,#7f1d1d);color:#fff5f5;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.14em;padding:9px 18px;border-radius:8px;border:2px solid rgba(252,165,165,.5);box-shadow:0 4px 0 #450a0a,0 0 0 3px rgba(220,38,38,.15);cursor:pointer;opacity:.55;transition:opacity .15s,transform .1s,box-shadow .1s;text-shadow:1px 1px 0 rgba(0,0,0,.4)} .forgetEverythingBtn:hover{opacity:1;border-color:#fca5a5} .forgetEverythingBtn:focus-visible{opacity:1;outline:2px solid #fca5a5;outline-offset:3px} .forgetEverythingBtn:active{transform:translateY(2px);box-shadow:0 2px 0 #450a0a,0 0 0 3px rgba(220,38,38,.15)} /* Confirmation modal. Stays deliberately red/warning-styled regardless of the */ /* Jeopardy theme — the user is about to destroy their data, no cute colors. */ .forgetModal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:24px} .forgetBackdrop{position:absolute;inset:0;background:rgba(2,6,23,.84);backdrop-filter:blur(4px);cursor:pointer} .forgetBox{position:relative;background:linear-gradient(180deg,#450a0a,#1c1917);border:4px solid #ef4444;border-radius:18px;max-width:600px;width:100%;padding:30px 32px;color:#fef2f2;box-shadow:0 32px 80px rgba(0,0,0,.7),0 0 70px rgba(220,38,38,.35)} .forgetHeader{font-size:clamp(28px,4vw,38px);font-weight:950;letter-spacing:.04em;color:#fef08a;text-align:center;margin:0 0 18px;text-shadow:2px 2px 0 rgba(0,0,0,.55)} .forgetCopy{font-size:16px;line-height:1.5;color:#fef2f2;margin:0 0 24px;text-align:center} .forgetActions{display:flex;gap:12px;justify-content:stretch} .forgetCancelBtn,.forgetConfirmBtn{flex:1;padding:14px 18px;font-size:16px;font-weight:900;border-radius:12px;border:0;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;transition:transform .1s,box-shadow .1s,filter .15s} .forgetCancelBtn{background:linear-gradient(180deg,#22c55e,#15803d);color:#fff;box-shadow:0 4px 0 #14532d} .forgetConfirmBtn{background:linear-gradient(180deg,#ef4444,#991b1b);color:#fff;box-shadow:0 4px 0 #450a0a} .forgetCancelBtn:hover,.forgetConfirmBtn:hover{filter:brightness(1.08)} .forgetCancelBtn:active{transform:translateY(2px);box-shadow:0 2px 0 #14532d} .forgetConfirmBtn:active{transform:translateY(2px);box-shadow:0 2px 0 #450a0a} .lockInModal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px} .lockInBackdrop{position:absolute;inset:0;background:rgba(2,6,23,.78);backdrop-filter:blur(4px)} .lockInBox{position:relative;background:linear-gradient(180deg,#fffbeb,#fef3c7);border:4px solid #f59e0b;border-radius:18px;max-width:680px;width:100%;max-height:90vh;overflow-y:auto;padding:28px 30px;box-shadow:0 28px 80px rgba(15,23,42,.55);color:#1f2937} .lockInHeader{font-size:clamp(28px,4vw,40px);font-weight:950;letter-spacing:.04em;color:#b45309;text-align:center;margin-bottom:14px;text-shadow:2px 2px 0 rgba(180,83,9,.18)} .lockInOpener{font-size:17px;line-height:1.45;color:#7c2d12;margin:0 0 18px;font-weight:600} .lockInQABox{background:#fff;border:2px solid #fcd34d;border-radius:12px;padding:16px 18px;margin-bottom:18px;display:flex;flex-direction:column;gap:8px} .lockInQALabel{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.10em;color:#92400e;margin-top:4px} .lockInQAClue{font-size:18px;font-weight:700;color:#1f2937;line-height:1.35} .lockInQAAnswer{font-size:clamp(24px,3.5vw,32px);font-weight:950;color:#15803d;line-height:1.1;letter-spacing:.01em} .lockInQAMnemonic{margin-top:6px;padding:10px 12px;background:#fffbeb;border:1px dashed #f59e0b;border-radius:8px;font-size:15px;line-height:1.4;color:#7c2d12;font-weight:600} .lockInGoBtn{display:block;margin:0 auto;padding:14px 28px;font-size:18px;font-weight:900;border-radius:12px;border:0;background:linear-gradient(180deg,#16a34a,#15803d);color:#fff;cursor:pointer;box-shadow:0 6px 0 #14532d;text-transform:uppercase;letter-spacing:.04em} .lockInGoBtn:hover{filter:brightness(1.06)} .lockInGoBtn:active{transform:translateY(2px);box-shadow:0 4px 0 #14532d} .lockInProgress{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.10em;color:#b45309;text-align:center;margin-bottom:10px} /* Visual supplement slot for the mini-game (flag image, etc.). Empty by default (collapsed); the .hasVisual class is added when content is present so the layout reserves space only when there's something to show. No border, no background, no padding — the flag image speaks for itself. */ .lockInPromptVisual{display:none;align-items:center;justify-content:center;margin:0 auto 14px} .lockInPromptVisual.hasVisual{display:flex} .lockInFlag{display:block;max-width:min(340px,80%);max-height:min(200px,28vh);object-fit:contain;border:0;background:transparent;box-shadow:none;border-radius:0} .lockInPromptClue{font-size:clamp(20px,2.6vw,26px);font-weight:800;color:#1f2937;text-align:center;margin-bottom:16px;line-height:1.3} .lockInPromptInputRow{display:flex;gap:10px;margin-bottom:12px} .lockInPromptInput{flex:1 1 auto;padding:14px 16px;font-size:20px;font-weight:700;border:2px solid #fcd34d;border-radius:10px;background:#fff;color:#1f2937;outline:none} .lockInPromptInput:focus{border-color:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.22)} .lockInPromptInput.correct{background:#dcfce7;border-color:#16a34a;color:#14532d} .lockInPromptInput.wrong{background:#fee2e2;border-color:#dc2626;color:#7f1d1d} .lockInPromptSubmit{flex:0 0 auto;padding:14px 20px;font-size:16px;font-weight:900;border-radius:10px;border:0;background:#0b63d1;color:#fff;cursor:pointer;box-shadow:0 4px 0 #074aa0} .lockInPromptSubmit:disabled{opacity:.55;cursor:default} .lockInFeedback{min-height:24px;text-align:center;font-size:16px;font-weight:800;line-height:1.4} .lockInFeedback.good{color:#15803d} .lockInFeedback.bad{color:#b91c1c} .lockInFeedback.neutral{color:#92400e} .lockInOutroLine{font-size:clamp(20px,2.6vw,28px);font-weight:900;color:#15803d;text-align:center;margin-bottom:18px;line-height:1.3} body.jeopardyTest .lockInBox{background:linear-gradient(180deg,#1a0540,#3d0e7a);border:4px solid var(--jp-gold);color:#fff;box-shadow:0 28px 80px rgba(0,0,0,.6)} body.jeopardyTest .lockInHeader{color:var(--jp-yellow);text-shadow:3px 3px 0 var(--jp-black)} body.jeopardyTest .lockInOpener{color:#fff} body.jeopardyTest .lockInQABox{background:rgba(255,255,255,.10);border-color:rgba(255,207,53,.45)} body.jeopardyTest .lockInQALabel{color:var(--jp-yellow)} body.jeopardyTest .lockInQAClue{color:#fff} body.jeopardyTest .lockInQAAnswer{color:var(--jp-mint)} body.jeopardyTest .lockInQAMnemonic{background:rgba(255,207,53,.16);border:1px dashed var(--jp-gold);color:#fff} body.jeopardyTest .lockInGoBtn{background:linear-gradient(180deg,var(--jp-yellow),var(--jp-gold));color:var(--jp-purple-deep);box-shadow:0 6px 0 var(--jp-brown)} body.jeopardyTest .lockInProgress{color:var(--jp-yellow)} body.jeopardyTest .lockInPromptClue{color:#fff} body.jeopardyTest .lockInPromptInput{background:rgba(255,255,255,.94);color:var(--jp-purple-deep);border-color:rgba(255,207,53,.55)} body.jeopardyTest .lockInPromptSubmit{background:linear-gradient(180deg,var(--jp-yellow),var(--jp-gold));color:var(--jp-purple-deep);box-shadow:0 4px 0 var(--jp-brown)} body.jeopardyTest .lockInFeedback.good{color:var(--jp-mint)} body.jeopardyTest .lockInFeedback.bad{color:var(--jp-pink)} body.jeopardyTest .lockInFeedback.neutral{color:var(--jp-yellow)} body.jeopardyTest .lockInOutroLine{color:var(--jp-mint);text-shadow:2px 2px 0 var(--jp-black)} /* (Confidence row CSS removed — the row is gone from the answer-review layout; SRS adjustment is still inferred silently from response time.) */ .reviewMnemonic{margin-top:6px;padding:10px 14px;border-radius:10px;background:#fff7ed;border:1px solid #fdba74;display:flex;flex-direction:column;gap:4px} .reviewMnemonicLabel{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.10em;color:#9a3412} .reviewMnemonicValue{font-size:17px;line-height:1.4;font-weight:700;color:#7c2d12} body.jeopardyTest .reviewMnemonic{background:rgba(255,207,53,.18);border:1px solid var(--jp-gold)} body.jeopardyTest .reviewMnemonicLabel{color:var(--jp-yellow)} body.jeopardyTest .reviewMnemonicValue{color:#fff} .answerVisual{margin-top:12px;border:1px solid #dbeafe;background:#f8fafc;border-radius:8px;overflow:hidden} .answerVisualTitle{padding:10px 12px;font-size:14px;font-weight:900;color:#1e3a8a;border-bottom:1px solid #dbeafe;background:#eff6ff} .answerVisualMap{padding:10px;background:#fff} .answerVisualCaption{padding:8px 12px;border-top:1px solid #e2e8f0;color:#64748b;font-size:13px;line-height:1.35;background:#f8fafc} @media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}.options{grid-template-columns:1fr}} .modeGrid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:14px;margin:14px 0} .settingBox{background:#f8fafc;border:1px solid #dbe6f2;border-radius:10px;padding:14px} /* Cram Mode toggle + progress strip on the BOARD screen. The setup screen is skipped under JEOPARDY_TEST_MODE so this is the only surface where the user sees / controls Cram Mode. */ .cramModePill{ display:inline-flex;align-items:center;gap:8px; padding:10px 16px;border-radius:999px; font-family:inherit;font-weight:800;letter-spacing:1.4px;text-transform:uppercase; font-size:13px; color:#94a3b8;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.18); cursor:pointer;transition:all .15s ease; white-space:nowrap; } .cramModePill:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.30)} .cramModePillOn{ color:#0f172a;background:linear-gradient(180deg,#fde047,#facc15); border-color:#ca8a04;box-shadow:0 4px 0 rgba(202,138,4,.55),0 0 24px rgba(250,204,21,.45) } .cramModePillDot{ width:10px;height:10px;border-radius:50%; background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.30); } .cramModePillOn .cramModePillDot{background:#16a34a;box-shadow:0 0 10px rgba(22,163,74,.85)} /* Compact one-line progress strip: label · bar · counts · deadline. */ .cramProgressStrip{ display:flex;align-items:center;gap:12px; margin:0 auto 14px auto;padding:8px 14px; background:rgba(15,23,42,.45); border:1px solid rgba(250,204,21,.32);border-radius:999px; color:#e2e8f0;font-size:12px; max-width:1280px; } .cramStripLabel{ font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:#facc15; flex-shrink:0 } .cramStripBar{ position:relative;flex:1 1 auto; height:8px;background:rgba(255,255,255,.10);border-radius:999px;overflow:hidden; display:flex;min-width:200px } .cramStripCount{ font-weight:700;color:#22c55e;flex-shrink:0;white-space:nowrap;font-size:12px } .cramStripDeadline{ font-size:11px;color:#94a3b8;font-style:italic;flex-shrink:0;white-space:nowrap } .cramBarMastered{background:linear-gradient(90deg,#16a34a,#22c55e);height:100%;display:inline-block;transition:width .3s ease} .cramBarInProgress{background:linear-gradient(90deg,#f59e0b,#fbbf24);height:100%;display:inline-block;transition:width .3s ease} .settingBox label{display:block;font-weight:800;margin:6px 0;color:#10213b} .settingBox select,.settingBox input[type="checkbox"]{font-size:16px} .checkGrid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:8px;margin-top:10px} .checkGrid label{font-weight:700;background:white;border:1px solid #dbe6f2;padding:10px;border-radius:12px} .pill{display:inline-block;border-radius:999px;background:#e0f2fe;color:#075985;padding:5px 9px;font-weight:800;font-size:12px;margin:3px} .studyReveal{margin-top:14px;background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;padding:12px;border-radius:14px} .soundToggle{display:flex;align-items:center;gap:8px;margin-top:10px} .helpLine{font-size:14px;color:#64748b;margin-top:8px} @media (max-width:760px){ main{padding:0 10px;margin:12px auto 30px} .panel{padding:14px;border-radius:10px} .messageBox{margin:0 14px 10px} .modeGrid{grid-template-columns:1fr} .checkGrid{grid-template-columns:1fr} .clue{font-size:24px} .optionBtn{min-height:76px;font-size:19px} .bigFlag{height:170px} .stats{gap:8px} .stat{padding:10px} .stat strong{font-size:23px} header{padding:14px 12px} } .mapTools{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0} .mapCaption{font-size:13px;color:#64748b;padding:8px 12px;background:#f8fafc;border-top:1px solid #e2e8f0} .hotZoneLabel{font-size:13px;font-weight:900;fill:#78350f;paint-order:stroke;stroke:white;stroke-width:4px} .reviewBoosted .studyCountryLabel{font-size:15px;font-weight:900} .reviewBoosted .studyWaterLabel{font-size:15px;font-weight:850} .reviewCountryLabels .studyCountryLabel{font-size:15px;font-weight:900} /* Capital-city marker (★) and label on review maps */ .capitalLabel{font-size:14px;font-weight:900;fill:#78350f;paint-order:stroke;stroke:white;stroke-width:4px;stroke-linejoin:round;pointer-events:none} /* Answer card: big lit-up headline + supplemental facts, used in the review teaching panel. */ .reviewAnswerCard{display:flex;flex-direction:column;gap:10px;min-width:0} .reviewAnswerKicker{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.10em;color:#92400e;opacity:.95} .reviewAnswerHeadline{font-size:clamp(22px,4.0vh,44px);font-weight:950;line-height:1.05;letter-spacing:-0.01em;overflow-wrap:break-word;word-break:break-word;hyphens:auto;text-wrap:balance;color:#15803d;text-shadow:none} .reviewFactList{display:flex;flex-direction:column;gap:8px} .reviewFact{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:10px;background:rgba(15,23,42,.04);border-left:3px solid rgba(15,23,42,.18);min-width:0} .reviewFact.accent{background:rgba(34,197,94,.10);border-left-color:#16a34a} .reviewFactLabel{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#64748b} .reviewFact.accent .reviewFactLabel{color:#15803d} .reviewFactValue{font-size:18px;font-weight:850;color:#0f172a;line-height:1.22;word-break:break-word} .reviewFact.multiline .reviewFactValue{font-size:14px;font-weight:600;line-height:1.4;color:#334155} /* Jeopardy-themed (dark purple) variant matches the rest of the review screen. */ body.jeopardyTest .reviewAnswerKicker{color:var(--jp-yellow);opacity:.92} body.jeopardyTest .reviewAnswerHeadline{color:var(--jp-mint);text-shadow:3px 3px 0 var(--jp-black),0 0 22px rgba(125,255,186,.42)} body.jeopardyTest .reviewFact{background:rgba(255,255,255,.05);border-left-color:rgba(255,255,255,.16)} body.jeopardyTest .reviewFact.accent{background:rgba(125,255,186,.10);border-left-color:var(--jp-mint)} body.jeopardyTest .reviewFactLabel{color:rgba(255,242,0,.78)} body.jeopardyTest .reviewFact.accent .reviewFactLabel{color:var(--jp-mint)} body.jeopardyTest .reviewFactValue{color:#fff;font-weight:900;text-shadow:1px 1px 0 rgba(5,0,21,.55)} body.jeopardyTest .reviewFact.multiline .reviewFactValue{color:#e8e2ff;font-weight:600;text-shadow:none} .reviewFlagCard{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:10px;background:rgba(15,23,42,.04);border-left:3px solid rgba(15,23,42,.18)} .reviewFlagThumb{width:100%;max-width:240px;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:4px;background:transparent;align-self:center;display:block} body.jeopardyTest .reviewFlagCard{background:rgba(255,255,255,.05);border-left-color:rgba(255,242,0,.55)} body.jeopardyTest .reviewFlagThumb{background:transparent} /* "You chose vs. correct" flag comparison panel — shown on the answer-review */ /* card when the user got a flag-relevant question wrong and their pick maps */ /* to a real country with a known flag. Two cells side-by-side; red border on */ /* the wrong cell, green on the correct one, so the user immediately reads */ /* which is which without having to parse the label. */ .reviewFlagCompare{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:10px;background:rgba(15,23,42,.05);border-left:3px solid rgba(15,23,42,.25)} .reviewFlagCompareRow{display:grid;grid-template-columns:1fr 1fr;gap:10px} .reviewFlagCompareCell{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 8px 6px;border-radius:8px;background:rgba(255,255,255,.03);border:2px solid transparent} .reviewFlagCompareCell.wrong{border-color:#dc2626;background:rgba(220,38,38,.07)} .reviewFlagCompareCell.right{border-color:#16a34a;background:rgba(34,197,94,.08)} .reviewFlagCompareName{font-size:13px;font-weight:900;text-align:center;color:#0f172a;line-height:1.15;letter-spacing:.01em} .reviewFlagCompareImg{width:100%;max-width:140px;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:3px;display:block;box-shadow:0 2px 6px rgba(0,0,0,.18)} .reviewFlagCompareTag{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em} .reviewFlagCompareCell.wrong .reviewFlagCompareTag{color:#b91c1c} .reviewFlagCompareCell.right .reviewFlagCompareTag{color:#15803d} /* Jeopardy theme — match the dark purple aesthetic; keep red/green semantic */ /* meaning but adjust contrast so they read against the dark background. */ body.jeopardyTest .reviewFlagCompare{background:rgba(255,255,255,.05);border-left-color:rgba(255,242,0,.45)} body.jeopardyTest .reviewFlagCompareCell{background:rgba(255,255,255,.04)} body.jeopardyTest .reviewFlagCompareCell.wrong{border-color:var(--jp-pink);background:rgba(255,141,177,.12)} body.jeopardyTest .reviewFlagCompareCell.right{border-color:var(--jp-mint);background:rgba(125,255,186,.12)} body.jeopardyTest .reviewFlagCompareName{color:#fff;text-shadow:1px 1px 0 rgba(5,0,21,.55)} body.jeopardyTest .reviewFlagCompareCell.wrong .reviewFlagCompareTag{color:var(--jp-pink)} body.jeopardyTest .reviewFlagCompareCell.right .reviewFlagCompareTag{color:var(--jp-mint)} @media (max-width:760px){ .reviewFlagCompareRow{grid-template-columns:1fr} .reviewFlagCompareImg{max-width:180px} } /* "Don't confuse with…" similar-flag card. Shown after a CORRECT flag answer when the country has a famous look-alike (FLAG_SIMILARITIES). Styled to read as teaching rather than judgment — neutral blue/amber outlines, not green/red. The tip text below carries the actual visual-difference rule. */ .reviewFlagSimilar{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:10px;background:rgba(56,189,248,.05);border-left:3px solid rgba(56,189,248,.45)} .reviewFlagSimilarRow{display:grid;grid-template-columns:1fr 1fr;gap:10px} .reviewFlagSimilarCell{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 8px 6px;border-radius:8px;background:rgba(255,255,255,.03);border:2px solid transparent} .reviewFlagSimilarCell.yours{border-color:#16a34a;background:rgba(34,197,94,.08)} .reviewFlagSimilarCell.similar{border-color:#f59e0b;background:rgba(245,158,11,.08)} .reviewFlagSimilarName{font-size:13px;font-weight:900;text-align:center;color:#0f172a;line-height:1.15;letter-spacing:.01em} .reviewFlagSimilarImg{width:100%;max-width:140px;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:3px;display:block;box-shadow:0 2px 6px rgba(0,0,0,.18)} .reviewFlagSimilarTag{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em} .reviewFlagSimilarCell.yours .reviewFlagSimilarTag{color:#15803d} .reviewFlagSimilarCell.similar .reviewFlagSimilarTag{color:#b45309} .reviewFlagSimilarTip{ font-size:13px;font-weight:600;line-height:1.35; color:#0c4a6e;background:rgba(56,189,248,.08); padding:8px 10px;border-radius:8px; border:1px solid rgba(56,189,248,.25); } /* Jeopardy dark-theme variant */ body.jeopardyTest .reviewFlagSimilar{background:rgba(255,255,255,.04);border-left-color:rgba(56,189,248,.55)} body.jeopardyTest .reviewFlagSimilarCell{background:rgba(255,255,255,.04)} body.jeopardyTest .reviewFlagSimilarCell.yours{border-color:var(--jp-mint);background:rgba(125,255,186,.12)} body.jeopardyTest .reviewFlagSimilarCell.similar{border-color:#facc15;background:rgba(250,204,21,.12)} body.jeopardyTest .reviewFlagSimilarName{color:#fff;text-shadow:1px 1px 0 rgba(5,0,21,.55)} body.jeopardyTest .reviewFlagSimilarCell.yours .reviewFlagSimilarTag{color:var(--jp-mint)} body.jeopardyTest .reviewFlagSimilarCell.similar .reviewFlagSimilarTag{color:#fde68a} body.jeopardyTest .reviewFlagSimilarTip{ color:#e0f2fe;background:rgba(56,189,248,.12);border-color:rgba(56,189,248,.45); } @media (max-width:760px){ .reviewFlagSimilarRow{grid-template-columns:1fr 1fr;gap:8px} .reviewFlagSimilarImg{max-width:none} } /* Free-text "type-in" answer box */ .typeInBox{grid-column:1/-1;background:#fff;border:2px solid #cfe0f3;border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px} .typeInLabel{font-size:13px;font-weight:900;color:#0b63d1;text-transform:uppercase;letter-spacing:.06em} .typeInRow{display:flex;gap:10px;align-items:stretch} .typeInField{flex:1 1 auto;min-width:0;padding:14px 16px;font-size:20px;font-weight:700;color:#0f172a;border:2px solid #cbd5e1;border-radius:10px;background:#f8fbff;outline:none;transition:border-color .12s ease,box-shadow .12s ease} .typeInField:focus{border-color:#0b63d1;box-shadow:0 0 0 3px rgba(11,99,209,.18);background:#fff} .typeInField.correct{background:#dcfce7;border-color:#16a34a;color:#14532d} .typeInField.wrong{background:#fee2e2;border-color:#dc2626;color:#7f1d1d} .typeInSubmit{flex:0 0 auto;padding:14px 22px;font-size:16px;font-weight:900;border-radius:10px;background:var(--blue);color:#fff;border:none;cursor:pointer} .typeInSubmit:disabled{opacity:.6;cursor:not-allowed} .typeInHint{font-size:13px;color:#475569;line-height:1.35} .typeInHintBtn{flex:0 0 auto;padding:14px 18px;font-size:14px;font-weight:900;border-radius:10px;background:#f59e0b;color:#fff7ed;border:none;cursor:pointer} .typeInHintBtn:hover:not(:disabled){background:#d97706} .typeInHintBtn:disabled{opacity:.5;cursor:not-allowed} .typeInHintReveal{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;padding:8px 10px;background:#fef3c7;border:1px solid #fcd34d;border-radius:8px;font-size:14px;font-weight:700;color:#78350f} .typeInHintReveal .hintBadge{background:#f59e0b;color:#fff;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em} .typeInHintReveal .hintText{flex:1 1 auto;color:#7c2d12} .typeInHintReveal .hintCost{color:#9a3412;font-size:12px;font-weight:600} body.jeopardyTest .typeInHintBtn{background:linear-gradient(180deg,var(--jp-gold),#f59e0b);color:var(--jp-purple-deep);box-shadow:0 5px 0 var(--jp-brown);border-radius:14px} body.jeopardyTest .typeInHintReveal{background:rgba(255,207,53,.20);border-color:rgba(255,207,53,.55);color:#fff} body.jeopardyTest .typeInHintReveal .hintText{color:#fff} body.jeopardyTest .typeInHintReveal .hintCost{color:var(--jp-yellow)} body.jeopardyTest .typeInBox{background:rgba(5,0,43,.72);border:2px solid var(--jp-violet);color:#fff;box-shadow:inset 0 0 18px rgba(255,255,255,.05)} body.jeopardyTest .typeInLabel{color:var(--jp-yellow)} body.jeopardyTest .typeInField{background:rgba(255,255,255,.94);color:var(--jp-purple-deep);border-color:var(--jp-violet)} body.jeopardyTest .typeInField:focus{border-color:var(--jp-yellow);box-shadow:0 0 0 3px rgba(255,242,0,.32);background:#fff} body.jeopardyTest .typeInField.correct{background:linear-gradient(180deg,#bcf7d4,var(--jp-mint));color:var(--jp-mint-ink);border-color:var(--jp-mint)} body.jeopardyTest .typeInField.wrong{background:linear-gradient(180deg,#ffc8d4,var(--jp-pink));color:#4d0017;border-color:var(--jp-pink)} body.jeopardyTest .typeInSubmit{background:linear-gradient(180deg,var(--jp-yellow),var(--jp-gold));color:var(--jp-purple-deep);box-shadow:0 5px 0 var(--jp-brown);border-radius:14px} body.jeopardyTest .typeInHint{color:var(--jp-lavender)} body.jeopardyTest.gameFitting #game .typeInBox{padding:9px 12px;gap:6px} body.jeopardyTest.gameFitting #game .typeInLabel{font-size:11px} body.jeopardyTest.gameFitting #game .typeInField{padding:10px 12px;font-size:clamp(15px,2.1vh,19px)} body.jeopardyTest.gameFitting #game .typeInSubmit{padding:10px 16px;font-size:13px} body.jeopardyTest.gameFitting #game .typeInHint{font-size:11px;line-height:1.2} .regionFocus{stroke:#0b63d1;stroke-width:2.5;fill:#dbeafe} .regionNormal{fill:#efe9dd;stroke:#90a0b0;stroke-width:.95} .regionNormalUS{fill:#efe9dd;stroke:#8fa2b4;stroke-width:1.05} .subnationalOutline{fill:none;stroke:rgba(71,85,105,.42);stroke-width:1.1;vector-effect:non-scaling-stroke;pointer-events:none} .subnationalOutline.provinceOutline{stroke:rgba(100,116,139,.38);stroke-dasharray:2,2} /* For Canadian Province questions: solid outline, more contrast, so each province's shape is clearly readable on the answer-reveal map. */ .subnationalOutline.provinceOutlineEmphasis{stroke:rgba(71,85,105,.7);stroke-width:1.1;stroke-dasharray:none;fill:none} .clickGhost{pointer-events:none} .performanceBox{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px} .performanceBox div{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px;text-align:center} .performanceBox strong{display:block;color:var(--navy);font-size:22px} @media (max-width:760px){.performanceBox{grid-template-columns:1fr}.mapTools button{padding:12px 14px;font-size:14px}} .studyCardBox{background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;border-radius:10px;padding:18px;margin-top:16px;font-size:22px;line-height:1.35;text-align:center}.studyCardBox b{color:#7c2d12;font-size:1.15em}.studyKicker{font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:#92400e;margin-bottom:8px}.studyArrow{display:inline-block;margin:0 16px;color:#92400e;font-weight:900}.studyHint{font-size:15px;color:#7c2d12;margin-top:12px;font-weight:700}.rustyBox{background:#fef2f2;border:1px solid #fecaca;color:#7f1d1d;border-radius:10px;padding:10px;margin-top:10px;font-size:14px} .correctNote{font-size:14px;color:#166534;margin-top:6px;font-weight:700} .reviewButtons{margin-top:14px} .sessionTag{display:inline-block;background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:900;margin-left:8px} .stat small{display:block;color:#64748b;margin-top:4px} .correctNote{font-size:14px;color:#166534;margin-top:6px;font-weight:700} .hearts{font-size:22px; letter-spacing:2px} .hearts.dead{opacity:.35} .dailyDoubleBanner{display:inline-block;background:#fef3c7;color:#92400e;border:1px solid #fcd34d;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;margin-left:8px} .finalBanner{display:inline-block;background:#ede9fe;color:#5b21b6;border:1px solid #c4b5fd;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;margin-left:8px} .srsBadge{display:inline-block;background:#ecfccb;color:#365314;border:1px solid #bef264;border-radius:999px;padding:3px 8px;font-size:12px;font-weight:900;margin-left:8px} .stat .tinyline{display:block;color:#64748b;font-size:12px;margin-top:4px} .noteStrong{font-weight:800;color:#0f172a} .zoomBadge{display:inline-block;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:900;margin-left:8px} .regionTag{display:inline-block;background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:900;margin-left:8px} .islandMarker{fill:#334155;stroke:white;stroke-width:2.2;paint-order:stroke;filter:drop-shadow(0 1px 1px rgba(15,23,42,.25))} .islandMarker.targetStudy{fill:#16a34a;stroke:white;stroke-width:2.6} .islandMarker.targetReveal{fill:#eab308;stroke:#78350f;stroke-width:2.2} /* Halo behind the target island marker. Bumped opacity + stroke so the dashed */ /* yellow ring is unmissable against the pale-blue review-map ocean. */ .islandMarkerHalo{fill:rgba(250,204,21,.38);stroke:#b45309;stroke-width:2.4;stroke-dasharray:6,4;filter:drop-shadow(0 0 10px rgba(234,179,8,.55))} .anchorLabel{font-size:12px;font-weight:900;fill:#475569;paint-order:stroke;stroke:white;stroke-width:4px;pointer-events:none} .studyCountryLabel{font-size:11.5px;font-weight:850;fill:#475569;paint-order:stroke;stroke:white;stroke-width:4px;pointer-events:none} .studyWaterLabel{font-size:12px;font-style:italic;font-weight:800;fill:#4e8ea7;paint-order:stroke;stroke:white;stroke-width:4px;pointer-events:none} .reliefContour{fill:rgba(180,83,9,.06);stroke:rgba(146,64,14,.42);stroke-width:1.5;stroke-dasharray:6,4;pointer-events:none} .reliefRidge{fill:none;stroke:rgba(120,53,15,.60);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4,3;pointer-events:none} .islandContextNote{font-size:12px;fill:#64748b;font-weight:800;pointer-events:none} .featureTrace{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none} .featureTrace.river{stroke:#2f92c4;stroke-width:3.2;opacity:.68} .featureTrace.range{stroke:#8b5a2b;stroke-width:4.2;stroke-dasharray:7,5;opacity:.62} .featureTrace.targetStudy{stroke:#16a34a;stroke-width:6;stroke-dasharray:none;opacity:.92} .featureTrace.targetReveal{stroke:#eab308;stroke-width:6.5;stroke-dasharray:none;opacity:.96} .featureTraceLabel{font-size:13px;font-weight:900;paint-order:stroke;stroke:white;stroke-width:4px;pointer-events:none} .featureTraceLabel.river{fill:#075985}.featureTraceLabel.range{fill:#78350f} .traceEndpoint{fill:#fff;stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:none} .traceEndpoint.river{stroke:#2f92c4}.traceEndpoint.range{stroke:#8b5a2b} .atlasPolygon{vector-effect:non-scaling-stroke;pointer-events:none} .atlasPolygon.lake{fill:rgba(56,189,248,.30);stroke:#0e7490;stroke-width:1.8} .atlasPolygon.countryContour{fill:rgba(255,255,255,.16);stroke:#475569;stroke-width:1.7;stroke-dasharray:2,2} .atlasPolygon.targetStudy{fill:rgba(34,197,94,.28);stroke:#16a34a;stroke-width:3.2;stroke-dasharray:none} .atlasPolygon.targetReveal{fill:rgba(250,204,21,.35);stroke:#eab308;stroke-width:3.4;stroke-dasharray:none} /* Lake targets need a high-contrast ring against the blue water of the lake itself — blue-on-blue disappears. Gold/amber outlines pop against the basemap. */ .atlasPolygon.lake.targetStudy{fill:rgba(250,204,21,.30);stroke:#b45309;stroke-width:3.8;stroke-dasharray:none} .atlasPolygon.lake.targetReveal{fill:rgba(251,191,36,.42);stroke:#92400e;stroke-width:4.2;stroke-dasharray:none} .summitMarker{fill:#334155;stroke:white;stroke-width:2;paint-order:stroke;pointer-events:none} .summitMarker.targetStudy{fill:#16a34a;stroke:white;stroke-width:2.5} .summitMarker.targetReveal{fill:#eab308;stroke:#78350f;stroke-width:2.2} .summitLabel{font-size:12.5px;font-weight:900;fill:#78350f;paint-order:stroke;stroke:white;stroke-width:4px;pointer-events:none} .startPanel{overflow:hidden;padding:0;background:#fff;} .startHero{display:block;padding:24px 26px 18px;border-bottom:1px solid #dbeafe;background:linear-gradient(180deg,#ffffff,#f5f9ff)} .startHero h2{font-size:clamp(30px,5vw,50px);line-height:1;margin:7px 0 10px;color:var(--navy);letter-spacing:0}.startHero p{font-size:18px;line-height:1.45;max-width:860px;margin:0;color:#334155}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:900;color:#075985;background:#e0f2fe;border:1px solid #bae6fd;border-radius:999px;display:inline-block;padding:6px 10px}.heroCard,.modeCards,.rulesBox{display:none}.setupGrid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;padding:18px 22px 8px}.prettyBox{box-shadow:none;background:#fff;border-color:#dbeafe}.prettyBox select{width:100%;margin-top:8px;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#0f172a;font-weight:800}.prettySound{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:10px;margin-top:12px}.categoryPanel{margin:12px 22px 8px;background:#fff;box-shadow:none}.categoryHeader{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.categoryActions button{padding:11px 14px}.prettyChecks{grid-template-columns:repeat(3,minmax(190px,1fr));gap:10px}.prettyChecks label{display:flex;align-items:center;gap:8px;border:1px solid #dbe6f2;background:#f8fafc;border-radius:8px;padding:13px 12px;transition:transform .12s ease,border-color .12s ease,background .12s ease}.prettyChecks label:hover{transform:translateY(-1px);border-color:#93c5fd;background:#eff6ff}.prettyChecks input{width:16px;height:16px;accent-color:#0b63d1} .playStrip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 22px 22px}.playStrip #startBtn{font-size:20px;padding:16px 28px;border-radius:10px;background:linear-gradient(135deg,#0b63d1,#074aa0)}.playStrip .loading{margin:0;color:#475569;font-size:15px}.rulesBox{display:none} .heroCard{display:block;margin-top:14px;background:#eff6ff;color:#1e3a8a;border:1px solid #bfdbfe;border-radius:8px;padding:12px 14px;box-shadow:none}.heroCard strong{display:none}.heroCard span{display:block;font-size:15px;line-height:1.35;font-weight:800;margin:0} @media (max-width:760px){.startHero,.setupGrid{grid-template-columns:1fr;padding:18px}.categoryPanel{margin:10px 14px}.categoryHeader{display:block}.prettyChecks{grid-template-columns:1fr}.modeCards{grid-template-columns:1fr}.playStrip{padding:12px 14px 18px}.heroCard span{font-size:18px}} .sessionToolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 14px 0} .sessionToolbar .sessionTitle{font-weight:900;color:var(--navy);font-size:18px} .sessionToolbar .sessionActions{display:flex;gap:10px;flex-wrap:wrap} button.ghost{background:#fff;color:var(--navy);border:2px solid #cbd5e1;box-shadow:none} button.danger{background:#7f1d1d;color:#fff} @media (max-width:760px){.sessionToolbar{align-items:flex-start;flex-direction:column}.sessionToolbar .sessionActions{width:100%}.sessionToolbar button{flex:1}} .mapZoomControls{position:absolute;right:14px;top:14px;display:flex;gap:6px;z-index:5;background:rgba(255,255,255,.88);border:1px solid #dbe6f2;border-radius:999px;padding:6px;box-shadow:0 3px 12px rgba(15,23,42,.10)} .mapZoomControls button{padding:7px 10px;border-radius:999px;font-size:13px;line-height:1;min-width:34px;background:#0f172a;color:white;box-shadow:none} .mapWrap{position:relative} .zoomHint{font-size:12px;color:#64748b;margin-left:6px} .customMapLabel{font-size:15px;font-weight:900;fill:#0f172a;paint-order:stroke;stroke:white;stroke-width:5px;stroke-linejoin:round} .customMapSmallLabel{font-size:12px;font-weight:800;fill:#334155;paint-order:stroke;stroke:white;stroke-width:4px;stroke-linejoin:round} .customIceShelf{fill:#dff4ff;stroke:#76a9c7;stroke-width:1.5;stroke-dasharray:5,4} .customMountainBand{fill:none;stroke:#8b5a2b;stroke-width:4;stroke-linecap:round;stroke-dasharray:6,5;opacity:.75} .customTargetZone{fill:rgba(250,204,21,.22);stroke:#eab308;stroke-width:3;stroke-dasharray:8,5} .customTargetDot{fill:#eab308;stroke:#78350f;stroke-width:2} .customWrongDot{fill:#dc2626;stroke:white;stroke-width:2} .customRightDot{fill:#16a34a;stroke:white;stroke-width:2} /* Earth Master 2.0 arcade polish */ :root{--navy:#101936;--blue:#1167e8;--gold:#ffd447;--good:#1f9f68;--bad:#be2f2f;--slate:#344054;--teal:#0f766e;--coral:#f9735b;--surface:#fffdf8} body{position:relative;background:linear-gradient(180deg,#edf8ff 0%,#f7fbff 44%,#eef6ed 100%);color:#14213d} body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(17,103,232,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(15,118,110,.05) 1px,transparent 1px),repeating-linear-gradient(0deg,rgba(255,255,255,.28) 0 2px,transparent 2px 7px);background-size:34px 34px,34px 34px,100% 100%} header{position:relative;z-index:1;overflow:hidden;background:linear-gradient(135deg,#101936 0%,#12356e 54%,#0f766e 100%);border-bottom:4px solid var(--gold);box-shadow:0 12px 28px rgba(16,25,54,.22)} header::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 6px);opacity:.42;pointer-events:none} header h1{position:relative;z-index:1;font-size:46px;letter-spacing:0;text-shadow:0 3px 0 rgba(0,0,0,.22),0 0 18px rgba(255,212,71,.24)} header p{position:relative;z-index:1;font-weight:800;color:#eaf6ff} main{max-width:1260px;position:relative;z-index:1} .panel{border-radius:8px;border:2px solid #c7d9f2;background:rgba(255,255,255,.96);box-shadow:0 10px 0 rgba(16,25,54,.06),0 22px 40px rgba(16,25,54,.12)} .startPanel{border-color:#b7d2f2} .startHero{background:linear-gradient(135deg,#ffffff 0%,#f7fbff 58%,#ecfeff 100%);border-bottom:2px solid #cfe1f8} .startHero h2{font-size:42px;letter-spacing:0;color:#101936;text-shadow:0 2px 0 rgba(255,212,71,.28)} .eyebrow{border-radius:6px;letter-spacing:0;background:#101936;color:#fff;border:2px solid #ffd447;box-shadow:0 2px 0 rgba(16,25,54,.28)} .heroCard{border-left:5px solid var(--gold);background:#f8fbff;border-radius:8px} .stats{grid-template-columns:repeat(6,minmax(120px,1fr));gap:10px} .stat{position:relative;overflow:hidden;text-align:left;border-radius:8px;border:2px solid #d6e4f5;background:linear-gradient(180deg,#ffffff,#f7fbff);box-shadow:0 4px 0 rgba(17,103,232,.08)} .stat::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--gold),var(--coral))} .stat span{letter-spacing:0;color:#475569;font-weight:900} .stat strong{color:#101936;text-shadow:0 1px 0 rgba(255,212,71,.35)} .category{border-radius:6px;letter-spacing:0;border:2px solid #f59e0b;box-shadow:0 3px 0 rgba(120,53,15,.25);background:linear-gradient(180deg,#ffe680,#ffd447)} .clue{font-size:40px;letter-spacing:0} .timerWrap{height:16px;border-radius:6px;background:#172033;border:2px solid #263d67;box-shadow:inset 0 2px 4px rgba(0,0,0,.24)} .timerBar{background:linear-gradient(90deg,#22c55e 0%,#ffd447 58%,#f9735b 100%);box-shadow:0 0 14px rgba(255,212,71,.32)} button{border-radius:8px;box-shadow:0 4px 0 rgba(8,29,70,.22),0 10px 18px rgba(11,99,209,.18);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease} button:hover:not(:disabled){transform:translateY(-1px);filter:saturate(1.08)} button:active:not(:disabled){transform:translateY(1px);box-shadow:0 2px 0 rgba(8,29,70,.22)} button.ghost{box-shadow:0 3px 0 rgba(15,23,42,.14)} .optionBtn{position:relative;overflow:hidden;border-radius:8px;border:2px solid #bfd5ef;background:linear-gradient(180deg,#ffffff,#f8fbff);box-shadow:0 4px 0 rgba(15,23,42,.08);transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease,background .12s ease} /* Multi-select MCQ — each option is a toggle, and a Submit button at the bottom grades the whole set. Selected toggles show an accent color so the user can see at a glance which they've picked before committing. */ .multiSelectBox{display:flex;flex-direction:column;gap:14px;width:100%;grid-column:1 / -1} .multiSelectOptions{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px} /* In the fitted board-mode layout, mirror the regular .options grid so a select-ALL question fills the panel the same way a 4-option MCQ does. */ body.jeopardyTest.gameFitting #game .multiSelectBox{flex:1 1 auto;display:flex;flex-direction:column;gap:10px;min-height:0} body.jeopardyTest.gameFitting #game .multiSelectOptions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:1 1 auto;grid-auto-rows:1fr;align-content:stretch} body.jeopardyTest.gameFitting #game .multiSelectSubmitRow{flex:0 0 auto;margin-top:4px} .multiSelectBtn{position:relative} .multiSelectBtn[data-selected="true"],.multiSelectBtn.multiSelectActive{background:linear-gradient(180deg,#dceaff,#bcd6ff);border-color:#1167e8;color:#0b3d91;box-shadow:0 6px 0 rgba(17,103,232,.22),inset 0 0 0 2px rgba(17,103,232,.45)} .multiSelectBtn[data-selected="true"]::after,.multiSelectBtn.multiSelectActive::after{content:"✓";position:absolute;top:8px;right:10px;font-weight:800;color:#1167e8;font-size:18px;line-height:1} .multiSelectSubmitRow{display:flex;justify-content:center} .multiSelectSubmit{padding:14px 38px;font-size:18px;font-weight:800;color:#fff;background:linear-gradient(180deg,#1167e8,#0a4ec0);border:0;border-radius:10px;box-shadow:0 6px 0 rgba(10,78,192,.35),0 10px 24px rgba(10,78,192,.25);cursor:pointer;letter-spacing:.5px} .multiSelectSubmit:hover{transform:translateY(-1px);box-shadow:0 7px 0 rgba(10,78,192,.4),0 14px 30px rgba(10,78,192,.3)} .multiSelectSubmit:active{transform:translateY(2px);box-shadow:0 3px 0 rgba(10,78,192,.35)} .multiSelectHelp{font-size:13px;color:#475569;text-align:center} .optionBtn.optionBtnAnswer{background:linear-gradient(180deg,#e8fff2,#d8fbe7);border-color:#1f9f68;color:#14532d} .optionBtn.optionBtnWrong{background:linear-gradient(180deg,#fff0f0,#fee2e2);border-color:#be2f2f;color:#7f1d1d} .optionBtn:hover:not(:disabled){transform:translateY(-2px);border-color:#1167e8;box-shadow:0 6px 0 rgba(17,103,232,.13),0 12px 24px rgba(17,103,232,.12)} .optionBtn.correct{background:linear-gradient(180deg,#e8fff2,#d8fbe7);border-color:#1f9f68;color:#14532d} .optionBtn.wrong{background:linear-gradient(180deg,#fff0f0,#fee2e2);border-color:#be2f2f;color:#7f1d1d} .mapWrap{border-radius:8px;border:2px solid #b7d2f2;background:#f8fcff;box-shadow:inset 0 0 0 4px rgba(255,255,255,.82)} .mapCaption{border-top:2px solid #d7e7f8} .feedback{border-radius:8px;border:2px solid transparent;box-shadow:0 4px 0 rgba(15,23,42,.08)} .feedback.good{border-color:#86efac}.feedback.bad{border-color:#fecaca;animation:badBump .16s ease-in-out 2}.feedback.neutral{border-color:#bfdbfe} @keyframes badBump{0%,100%{transform:translateX(0)}35%{transform:translateX(-5px)}70%{transform:translateX(5px)}} @media (max-width:900px){.stats{grid-template-columns:repeat(3,1fr)}} @media (max-width:760px){header h1{font-size:32px}.startHero h2{font-size:30px}.clue{font-size:25px}.stats{grid-template-columns:repeat(2,1fr)}} /* Jeopardy Test board layer */ .boardPanel{background:#071a58;border:4px solid #f8d84a;padding:18px;color:white;box-shadow:0 12px 0 #07113a,0 24px 44px rgba(7,26,88,.28)} .boardTop{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px} .boardTop h2{margin:4px 0 0;font-size:clamp(28px,4vw,48px);line-height:1;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.45)} .boardTitleBlock{display:flex;flex-direction:column;gap:6px;min-width:0} .boardHint{margin:0;font-size:13px;font-weight:600;color:rgba(255,255,255,.78);line-height:1.3} .boardHint kbd{display:inline-block;padding:1px 7px;border-radius:5px;background:rgba(255,255,255,.94);color:var(--jp-purple-deep);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:800;box-shadow:0 2px 0 rgba(0,0,0,.35);margin:0 1px} .boardTop .eyebrow{background:#f8d84a;color:#071a58;border-color:white} .boardHud{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end} /* Mix-ups ticker — a compact horizontal strip below the board. Pair chips scroll right-to-left like a newscast crawl; pinned "Drill it" button on the right starts the focused drill session. The old stacked-list panel took ~280px of vertical space and crowded the board buttons; this trims to ~52px. Hover or focus pauses the scroll for reading. */ .confusionPanel{ margin-top:14px; display:flex;align-items:center;gap:10px; background:rgba(255,255,255,.97);border:2px solid #fed7aa;border-radius:999px; padding:6px 8px 6px 16px;color:#7c2d12; min-height:48px; overflow:hidden; } .confusionLabel{ flex:0 0 auto; font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.12em; color:#9a3412; padding-right:4px;border-right:1px solid rgba(154,52,18,.28); } .confusionTicker{ flex:1 1 auto;min-width:0; overflow:hidden; position:relative; /* Soft fade at both edges so chips appear to slide IN/OUT instead of pop. */ mask-image:linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); -webkit-mask-image:linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); } .confusionTickerInner{ display:inline-flex;align-items:center;gap:14px; white-space:nowrap; animation:confusionTickerScroll 32s linear infinite; padding-left:20px; } .confusionTicker:hover .confusionTickerInner, .confusionTicker:focus-within .confusionTickerInner{ animation-play-state:paused } .confusionTickerDupe{display:inline-flex;align-items:center;gap:14px;margin-left:14px} @keyframes confusionTickerScroll{ 0% { transform:translateX(0) } 100% { transform:translateX(-50%) } } @media (prefers-reduced-motion: reduce){ .confusionTickerInner{ animation:none } .confusionTicker{ overflow-x:auto; mask-image:none; -webkit-mask-image:none } } .confusionChip{ display:inline-flex;align-items:center;gap:8px; padding:6px 12px; background:#fff7ed;border:1px solid #fed7aa;border-radius:999px; font-size:13px;font-weight:800;color:#7c2d12;line-height:1.1; } .confusionChipPair{ white-space:nowrap } .confusionChipCount{ color:#c2410c;background:#ffedd5; padding:2px 8px;border-radius:999px;font-size:11px; } /* CTA — pinned to the right, never scrolls with the ticker. */ .confusionDrillBtn{ margin:0;padding:9px 14px;font-size:12px;font-weight:900; text-transform:uppercase;letter-spacing:.06em; border-radius:999px;border:0; background:linear-gradient(180deg,#f59e0b,#c2410c);color:#fff; cursor:pointer; box-shadow:0 3px 0 rgba(120,53,15,.4); flex:0 0 auto; display:inline-flex;align-items:center;gap:8px; } .confusionDrillBtn:hover{filter:brightness(1.06)} .confusionDrillBtn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(120,53,15,.4)} .confusionDrillBtnCount{ font-size:10px;font-weight:900; background:rgba(0,0,0,.18); padding:2px 7px;border-radius:999px; } /* Jeopardy dark theme */ body.jeopardyTest .confusionPanel{background:rgba(5,0,43,.72);border:2px solid var(--jp-gold);color:#fff} body.jeopardyTest .confusionLabel{color:var(--jp-yellow);border-right-color:rgba(255,207,53,.45)} body.jeopardyTest .confusionChip{background:rgba(255,255,255,.06);border-color:rgba(255,207,53,.45);color:#fff} body.jeopardyTest .confusionChipCount{background:rgba(255,207,53,.18);color:var(--jp-yellow);border:1px solid rgba(255,207,53,.45)} body.jeopardyTest .confusionDrillBtn{background:linear-gradient(180deg,var(--jp-yellow),var(--jp-gold));color:var(--jp-purple-deep);box-shadow:0 4px 0 var(--jp-brown);text-shadow:none} body.jeopardyTest .confusionDrillBtn:active{box-shadow:0 1px 0 var(--jp-brown)} body.jeopardyTest .confusionDrillBtnCount{background:rgba(5,0,43,.32);color:var(--jp-purple-deep)} .boardToggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-weight:800;color:var(--navy);font-size:14px;padding:8px 14px;border-radius:10px;border:2px solid #cbd5e1;background:#fff} .boardToggle input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .boardToggleTrack{position:relative;display:inline-block;width:38px;height:20px;background:#cbd5e1;border-radius:999px;transition:background .15s ease;flex-shrink:0} .boardToggleThumb{position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s ease} .boardToggle input:checked + .boardToggleTrack{background:#16a34a} .boardToggle input:checked + .boardToggleTrack .boardToggleThumb{transform:translateX(18px)} .boardToggle input:focus-visible + .boardToggleTrack{box-shadow:0 0 0 3px rgba(11,99,209,.35)} .boardToggleLabel{line-height:1} body.jeopardyTest .boardToggle{background:#fff;color:var(--jp-purple-deep);border:0;border-radius:14px;box-shadow:0 5px 0 var(--jp-brown);text-transform:uppercase;letter-spacing:.04em;padding:10px 16px} body.jeopardyTest .boardToggle .boardToggleTrack{background:#7a89a8} body.jeopardyTest .boardToggle input:checked + .boardToggleTrack{background:var(--jp-gold)} body.jeopardyTest .boardToggle input:checked + .boardToggleTrack .boardToggleThumb{background:var(--jp-purple-deep)} /* Board-mode controls: a themed styling is heavily */ /* customized for the closed state; the OS-painted dropdown options stay */ /* unstyled (browser limitation — using a custom menu component would lose */ /* keyboard accessibility and screen-reader support). */ .boardModeControls{display:inline-flex;align-items:stretch;gap:8px} .boardModeSelect{ appearance:none;-webkit-appearance:none;-moz-appearance:none; background:linear-gradient(180deg,var(--jp-yellow),var(--jp-gold)); color:var(--jp-purple-deep); border:0;border-radius:14px; padding:11px 38px 11px 18px; font-family:inherit;font-weight:900;font-size:13px; text-transform:uppercase;letter-spacing:.06em; cursor:pointer; box-shadow:0 5px 0 var(--jp-brown); background-image:linear-gradient(180deg,var(--jp-yellow),var(--jp-gold)),url("data:image/svg+xml;utf8,"); background-repeat:no-repeat,no-repeat; background-position:0 0,right 14px center; background-size:auto,11px 7px; transition:filter .15s,transform .08s,box-shadow .08s; } .boardModeSelect:hover{filter:brightness(1.06)} .boardModeSelect:focus-visible{outline:3px solid var(--jp-yellow);outline-offset:2px} .boardModeSelect:active{transform:translateY(2px);box-shadow:0 3px 0 var(--jp-brown)} .boardGoBtn{ background:linear-gradient(180deg,var(--jp-yellow),var(--jp-gold)); color:var(--jp-purple-deep); border:0;border-radius:14px; padding:11px 22px; font-family:inherit;font-weight:900;font-size:13px; text-transform:uppercase;letter-spacing:.06em; cursor:pointer; box-shadow:0 5px 0 var(--jp-brown); transition:filter .15s,transform .08s,box-shadow .08s; } .boardGoBtn:hover{filter:brightness(1.06)} .boardGoBtn:focus-visible{outline:3px solid var(--jp-yellow);outline-offset:2px} .boardGoBtn:active{transform:translateY(2px);box-shadow:0 3px 0 var(--jp-brown)} /* Globe Mode — the d3.geoOrthographic canvas inside #mapWrap. */ /* Layers: ocean sphere → graticule → country fills → reveal overlay. */ .globeSphere{fill:#b9d8e8;stroke:#4a5568;stroke-width:1.4} .globeGraticule{fill:none;stroke:rgba(74,85,104,.16);stroke-width:.5} /* Country fill is set inline per-country in renderGlobe so we can vary it by name; hover indicates interactivity through stroke instead, since inline fill would beat a CSS hover rule. */ .globeCountry{stroke:rgba(40,50,65,.55);stroke-width:.5;cursor:pointer;transition:stroke-width .08s,stroke .08s} .globeCountry:hover{stroke:rgba(20,28,40,.95);stroke-width:1.7} .globeCountryReveal{fill:rgba(250,204,21,.6) !important;stroke:#b45309;stroke-width:2.4} body.jeopardyTest .globeSphere{fill:#1b3050;stroke:var(--jp-violet);stroke-width:2} body.jeopardyTest .globeGraticule{stroke:rgba(255,255,255,.13)} body.jeopardyTest .globeCountry{stroke:rgba(20,28,40,.7);stroke-width:.5} body.jeopardyTest .globeCountry:hover{stroke:rgba(0,0,0,.95);stroke-width:1.9} body.jeopardyTest .globeCountryReveal{fill:rgba(125,255,186,.65) !important;stroke:var(--jp-mint);stroke-width:2.8} /* Sub-pixel-target reveal ring: when the answer was a microstate whose */ /* polygon is too small to be visible at the current zoom, the polygon-fill */ /* reveal is invisible. This screen-space ring marks the target location so */ /* the user can SEE where the answer was even if they need to zoom further */ /* in to see the shape itself. Pointer-events off — purely decorative. */ .globeTinyReveal{ fill:none; stroke:#16a34a; stroke-width:3; stroke-dasharray:6,4; pointer-events:none; filter:drop-shadow(0 0 10px rgba(34,197,94,.55)); } body.jeopardyTest .globeTinyReveal{ stroke:var(--jp-mint); stroke-width:3.2; filter:drop-shadow(0 0 12px rgba(125,255,186,.7)); } /* Globe-mode flag cue: a compact overlay pinned to the top-right corner of */ /* the globe canvas. Replaces the giant #bigFlag image for flag questions in */ /* globe mode, leaving the entire map panel free for the globe playspace. */ /* pointer-events:none so the user can drag-rotate the globe through it. */ .globeFlagCue{ position:absolute; top:14px; right:14px; width:clamp(120px,16vw,180px); height:auto; max-height:clamp(80px,11vh,120px); object-fit:contain; border:2px solid rgba(15,23,42,.45); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.35); background:rgba(255,255,255,.92); padding:4px; z-index:5; pointer-events:none; } body.jeopardyTest .globeFlagCue{ border-color:var(--jp-yellow); background:rgba(255,255,255,.96); box-shadow:0 6px 22px rgba(0,0,0,.55),0 0 14px rgba(255,242,0,.28); } @media (max-width:760px){ .globeFlagCue{top:8px;right:8px;width:clamp(96px,22vw,130px);max-height:clamp(60px,9vh,86px)} } .boardScore{min-width:150px;text-align:center;background:#030b2c;border:2px solid #f8d84a;border-radius:8px;padding:10px 14px;box-shadow:inset 0 0 18px rgba(248,216,74,.13)} .boardScore span{display:block;font-size:12px;text-transform:uppercase;font-weight:900;color:#f8d84a} .boardScore strong{display:block;font-size:30px;line-height:1.05;color:white} .jeopardyGrid{display:grid;grid-template-columns:repeat(6,minmax(100px,1fr));gap:8px;background:#030b2c;border:4px solid #030b2c;padding:8px} .boardCategory,.boardTile{min-height:86px;display:flex;align-items:center;justify-content:center;text-align:center;border:3px solid #050f3d;background:#1029a4;color:white} .boardCategory{padding:10px;font-size:clamp(14px,1.4vw,20px);font-weight:900;text-transform:uppercase;line-height:1.1;letter-spacing:0;text-shadow:0 2px 0 rgba(0,0,0,.45)} .boardTile{min-height:92px;font-size:clamp(28px,4vw,48px);font-weight:900;font-family:Georgia,"Times New Roman",serif;color:#f8d84a;text-shadow:0 3px 0 #231600;background:linear-gradient(180deg,#1736c3,#0d2494);box-shadow:inset 0 0 18px rgba(255,255,255,.08);cursor:pointer} .boardTile:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.16);box-shadow:inset 0 0 22px rgba(248,216,74,.18),0 8px 18px rgba(0,0,0,.25)} .boardTile:disabled{cursor:default;transform:none;box-shadow:inset 0 0 18px rgba(255,255,255,.04)} .boardTile.cleared{background:#071a58;color:rgba(255,255,255,.18);text-shadow:none} .boardTile.cleared.correct{box-shadow:inset 0 0 0 3px rgba(34,197,94,.45)} .boardTile.cleared.wrong{box-shadow:inset 0 0 0 3px rgba(248,113,113,.45)} .boardStatus{margin-top:12px;color:#dbeafe;font-size:15px;font-weight:800} .boardLoading{background:#fff;color:#071a58;border:2px solid #bfdbfe;border-radius:8px;padding:14px;font-weight:900} /* The old startup gate has been retired. The setup section now ships as an on-demand .settingsOverlay (see below) reached via the SETTINGS pill on the board top bar. Any leftover .startPanel reference stays hidden so a half-migrated render doesn't accidentally show it. */ body.jeopardyTest .startPanel{display:none} /* ── SETTINGS pill — sits next to CRAM MODE in the board hud ─────────── */ .settingsPill{ /* extends .cramModePill */ color:#cbd5e1; } .settingsPill:hover{ color:#fff } .settingsPill[aria-pressed="true"]{ background:rgba(56,189,248,.18); border-color:rgba(56,189,248,.65); color:#fff; } .settingsPillIcon{ display:inline-block;font-size:15px;line-height:1; /* The gear glyph isn't exactly centered in its em-box; nudge so it lines up with the all-caps label next to it. */ transform:translateY(-1px); } /* ── SETTINGS overlay — repurposed setup section ────────────────────── */ .settingsBackdrop{ position:fixed;inset:0;background:rgba(5,0,43,.55); z-index:9990;backdrop-filter:blur(2px); } .settingsBackdrop.hidden{ display:none } /* When .settingsOverlay is shown (the .hidden class is toggled off by toggleSettingsOverlay), reposition it as a centered modal-ish panel instead of inline document flow. */ .settingsOverlay{ /* Inherits .panel padding/background from the base rule. We override the positioning so it floats over the board. */ } .settingsOverlay:not(.hidden){ position:fixed;top:50%;left:50%;transform:translate(-50%,-50%); z-index:9991; width:min(960px, calc(100vw - 40px)); max-height:calc(100vh - 40px); overflow-y:auto; box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); animation:settingsOverlayIn 200ms ease-out; } @keyframes settingsOverlayIn{ from{ opacity:0; transform:translate(-50%, calc(-50% + 16px)) } to { opacity:1; transform:translate(-50%, -50%) } } .settingsOverlayHeader{ display:flex;align-items:center;justify-content:space-between; padding:16px 22px;border-bottom:1px solid rgba(15,23,42,.08); background:linear-gradient(180deg, #f8fafc, #eef2f7); margin:-18px -22px 16px; /* push to the panel's edges */ position:sticky;top:0;z-index:1; } .settingsOverlayHeader h2{ margin:0;font-size:20px;color:#0f172a;letter-spacing:.01em } .settingsOverlayClose{ background:transparent;border:0; font-size:28px;line-height:1;color:#475569; width:36px;height:36px;border-radius:50%; cursor:pointer; } .settingsOverlayClose:hover{ background:rgba(15,23,42,.06);color:#0f172a } /* Actions box matches the rest of the prettyBox grid cells. */ .settingsActionsBox{ display:flex;flex-direction:column;gap:10px } .settingsActionsBox button{ margin-top:6px } /* Jeopardy dark-theme overrides */ body.jeopardyTest .settingsOverlay:not(.hidden){ background:linear-gradient(180deg, #1a0a45 0%, #0a0028 100%); border:2px solid var(--jp-yellow); } body.jeopardyTest .settingsOverlayHeader{ background:rgba(5,0,43,.6); border-bottom:1px solid rgba(255,242,0,.35); color:#fff; } body.jeopardyTest .settingsOverlayHeader h2{ color:var(--jp-yellow);text-shadow:2px 2px 0 var(--jp-black) } body.jeopardyTest .settingsOverlayClose{ color:#cbd5e1 } body.jeopardyTest .settingsOverlayClose:hover{ background:rgba(255,255,255,.08);color:#fff } body.jeopardyTest #game .panel{border-color:#f8d84a} body.jeopardyTest .sessionTitle{font-size:22px;color:#071a58} body.jeopardyTest .category{background:#1029a4;color:#f8d84a;border-color:#071a58;text-shadow:0 2px 0 rgba(0,0,0,.35)} @media (max-width:860px){.boardTop{align-items:flex-start;flex-direction:column}.boardHud{justify-content:flex-start}.jeopardyGrid{gap:5px;padding:5px}.boardCategory{min-height:72px;font-size:12px}.boardTile{min-height:78px;font-size:28px}.boardScore strong{font-size:24px}} @media (max-width:620px){.jeopardyGrid{grid-template-columns:repeat(6,minmax(44px,1fr))}.boardCategory{font-size:9px;padding:4px}.boardTile{min-height:62px;font-size:20px}.boardPanel{padding:10px}} /* Borrowed from the presentation assets: purple stage, neon grid, magenta frame, yellow value pop. */ body.jeopardyTest{background:#13012f url("assets/jeopardy-stage.svg") center/cover fixed no-repeat;color:#fff;font-family:Inter,"Segoe UI",Arial,sans-serif} body.jeopardyTest::before{z-index:0;background:radial-gradient(circle at 50% 24%,rgba(255,255,255,.08),transparent 35%),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px)} body.jeopardyTest header{background:linear-gradient(180deg,rgba(18,0,74,.92),rgba(8,5,49,.96));border-bottom:3px solid var(--jp-magenta);box-shadow:0 0 22px rgba(239,79,212,.45),0 14px 42px rgba(0,0,0,.35)} body.jeopardyTest header h1{font-size:clamp(34px,5vw,62px);font-weight:900;color:#fff;text-shadow:5px 5px 0 var(--jp-black),-2px 0 0 var(--jp-cyan),2px 0 0 var(--jp-magenta);letter-spacing:0} body.jeopardyTest header p{color:var(--jp-cream);text-transform:uppercase;font-size:13px;letter-spacing:.12em} body.jeopardyTest main{max-width:1360px} body.jeopardyTest .boardPanel{position:relative;overflow:hidden;background:rgba(26,0,82,.80);border:4px solid var(--jp-violet);border-radius:18px;box-shadow:0 0 0 5px rgba(255,255,255,.08),0 0 34px rgba(239,79,212,.72),0 18px 48px rgba(0,0,0,.45);backdrop-filter:blur(3px)} body.jeopardyTest .boardPanel::before{content:"";position:absolute;inset:14px;border:2px solid rgba(255,255,255,.18);border-radius:14px;box-shadow:inset 0 0 26px rgba(255,255,255,.14);pointer-events:none} body.jeopardyTest .boardPanel>*{position:relative;z-index:1} body.jeopardyTest .boardTop h2{font-size:clamp(36px,5vw,68px);text-shadow:5px 5px 0 var(--jp-black),-2px 0 0 var(--jp-cyan),2px 0 0 var(--jp-magenta)} body.jeopardyTest .boardTop .eyebrow{background:linear-gradient(180deg,var(--jp-yellow),var(--jp-gold));color:var(--jp-purple-deep);border:0;border-radius:16px;box-shadow:0 5px 0 var(--jp-brown);text-transform:uppercase} body.jeopardyTest .boardScore{background:linear-gradient(180deg,#2d0b83,#6908d5 58%,#cb16c9);border:2px solid var(--jp-violet);box-shadow:inset 0 0 18px rgba(255,255,255,.18),0 0 18px rgba(203,22,201,.34)} body.jeopardyTest .boardScore span{color:var(--jp-yellow)} body.jeopardyTest .boardScore strong{color:#fff;text-shadow:3px 3px 0 var(--jp-black)} body.jeopardyTest .jeopardyGrid{background:rgba(5,0,43,.88);border:3px solid rgba(239,132,255,.88);border-radius:12px;gap:9px;padding:10px;box-shadow:inset 0 0 36px rgba(18,243,255,.10)} body.jeopardyTest .boardCategory{background:linear-gradient(180deg,#3b19a3,#2a0b83);border:2px solid var(--jp-violet);border-radius:8px;box-shadow:inset 0 0 18px rgba(255,255,255,.10);color:#fff;font-weight:950;text-shadow:3px 3px 0 var(--jp-black);font-size:clamp(13px,1.2vw,18px)} body.jeopardyTest .boardTile{border-radius:8px;border:2px solid var(--jp-violet);background:linear-gradient(180deg,#3314d3 0%,#1d098e 55%,#11005f 100%);color:var(--jp-yellow);text-shadow:3px 3px 0 #3c2100,0 0 14px rgba(255,242,0,.34);box-shadow:inset 0 0 18px rgba(18,243,255,.14),0 5px 0 var(--jp-black);font-family:inherit;font-weight:950} body.jeopardyTest .boardTile:hover:not(:disabled){border-color:var(--jp-yellow);background:linear-gradient(180deg,#512bff,#2c0ec2 58%,#18006f);box-shadow:inset 0 0 26px rgba(255,242,0,.22),0 7px 0 var(--jp-black),0 0 22px rgba(239,79,212,.55)} body.jeopardyTest .boardTile.cleared{background:rgba(8,0,58,.72);color:transparent;text-shadow:none;box-shadow:inset 0 0 18px rgba(255,255,255,.05)} body.jeopardyTest .boardTile.cleared.correct{box-shadow:inset 0 0 0 3px rgba(34,197,94,.75),inset 0 0 18px rgba(34,197,94,.12)} body.jeopardyTest .boardTile.cleared.wrong{box-shadow:inset 0 0 0 3px rgba(248,113,113,.78),inset 0 0 18px rgba(248,113,113,.12)} body.jeopardyTest .boardStatus{color:var(--jp-cream);text-align:center;text-shadow:2px 2px 0 var(--jp-black)} body.jeopardyTest #game .panel,body.jeopardyTest #results,body.jeopardyTest #answerReview{background:rgba(39,8,88,.92);border:3px solid var(--jp-violet);border-radius:18px;color:#fff;box-shadow:0 0 30px rgba(239,79,212,.46),0 16px 40px rgba(0,0,0,.42)} body.jeopardyTest .sessionToolbar{background:rgba(5,0,43,.72);border:2px solid rgba(239,132,255,.55);border-radius:14px;padding:12px 14px;color:#fff;box-shadow:0 0 18px rgba(18,243,255,.12)} body.jeopardyTest .sessionTitle{color:#fff;text-shadow:3px 3px 0 var(--jp-black)} body.jeopardyTest .stats .stat{background:linear-gradient(180deg,#2d0b83,#1a0759);border:2px solid #7b5cff;box-shadow:inset 0 0 14px rgba(255,255,255,.08),0 4px 0 var(--jp-black);color:#fff} body.jeopardyTest .stat span,body.jeopardyTest .stat small{color:var(--jp-lavender)} body.jeopardyTest .stat strong{color:var(--jp-yellow);text-shadow:3px 3px 0 #3c2100} body.jeopardyTest .category{background:linear-gradient(180deg,var(--jp-yellow),var(--jp-gold));border:0;border-radius:16px;color:var(--jp-purple-deep);box-shadow:0 5px 0 var(--jp-brown);text-shadow:none} body.jeopardyTest .clue{color:#fff;font-weight:950;text-shadow:4px 4px 0 var(--jp-black);line-height:1.08} body.jeopardyTest .subclue{color:var(--jp-cream);font-weight:800} body.jeopardyTest .timerWrap{background:var(--jp-black);border-color:#7b5cff;box-shadow:inset 0 0 14px rgba(0,0,0,.6),0 0 12px rgba(239,79,212,.3)} body.jeopardyTest .timerBar{background:linear-gradient(90deg,var(--jp-cyan),var(--jp-yellow),var(--jp-magenta))} body.jeopardyTest .optionBtn{background:linear-gradient(180deg,#3b19a3,#1f096e);border:2px solid var(--jp-violet);color:#fff;box-shadow:0 5px 0 var(--jp-black),inset 0 0 18px rgba(255,255,255,.08);text-shadow:2px 2px 0 var(--jp-black)} body.jeopardyTest .optionBtn:hover:not(:disabled){border-color:var(--jp-yellow);box-shadow:0 7px 0 var(--jp-black),0 0 20px rgba(239,79,212,.45)} body.jeopardyTest .optionBtn.correct{background:linear-gradient(180deg,#20b46b,#09643f);border-color:var(--jp-mint);color:#fff} body.jeopardyTest .optionBtn.wrong{background:linear-gradient(180deg,#e14c76,#8c1139);border-color:#ffc2d2;color:#fff} body.jeopardyTest .feedback{border-width:2px;text-shadow:2px 2px 0 rgba(0,0,0,.25)} body.jeopardyTest .answerLine,body.jeopardyTest .teachingNote,body.jeopardyTest .answerVisual{background:rgba(255,255,255,.96);color:#14213d;border-radius:10px} body.jeopardyTest .mapWrap{background:#f8fcff;border-color:var(--jp-violet);box-shadow:0 0 22px rgba(239,79,212,.24),inset 0 0 0 4px rgba(255,255,255,.82)} body.jeopardyTest .mapCaption{background:#160446;color:var(--jp-cream);border-color:var(--jp-violet)} body.jeopardyTest header{padding:8px 16px} body.jeopardyTest header h1{font-size:clamp(24px,4vh,42px)} body.jeopardyTest header p{display:none} body.jeopardyTest main{max-width:min(1480px,100vw);margin:8px auto 0;padding:0 12px} body.jeopardyTest #jeopardyBoard:not(.hidden){height:calc(100vh - 64px);display:flex;flex-direction:column;min-height:0;margin-bottom:0;padding:clamp(10px,1.7vh,18px);overflow:hidden} body.jeopardyTest .boardTop{margin-bottom:clamp(8px,1.4vh,14px);flex:0 0 auto} body.jeopardyTest .boardTop h2{font-size:clamp(30px,4vh,48px)} body.jeopardyTest .boardHud{gap:8px} body.jeopardyTest .boardScore{min-width:128px;padding:8px 12px} body.jeopardyTest .boardScore strong{font-size:clamp(22px,3vh,30px)} body.jeopardyTest .jeopardyGrid{grid-template-columns:repeat(6,minmax(72px,1fr));grid-template-rows:auto repeat(5,minmax(0,1fr));flex:1 1 auto;min-height:0;gap:clamp(5px,.8vh,9px);padding:clamp(6px,1vh,10px)} body.jeopardyTest .boardCategory,body.jeopardyTest .boardTile{min-height:0} body.jeopardyTest .boardCategory{padding:6px;font-size:clamp(10px,1.05vw,16px)} body.jeopardyTest .boardTile{font-size:clamp(24px,4.5vh,46px)} body.jeopardyTest .boardStatus{flex:0 0 auto;margin-top:8px} body.jeopardyTest .boardStatus:empty{display:none} /* Celebratory round-complete screen */ body.jeopardyTest.jeopardyRoundComplete #results{max-width:780px;text-align:center} body.jeopardyTest.jeopardyRoundComplete #resultsTitle{font-size:clamp(36px,5.5vw,60px);margin:6px 0 4px;line-height:1.05;color:#fff;text-shadow:4px 4px 0 var(--jp-black),0 0 26px rgba(255,242,0,.35)} body.jeopardyTest.jeopardyRoundComplete #resultsTitle[data-tier="perfect"]{color:var(--jp-yellow);text-shadow:4px 4px 0 var(--jp-black),0 0 36px rgba(255,242,0,.7)} body.jeopardyTest.jeopardyRoundComplete #resultsTitle[data-tier="outstanding"]{color:var(--jp-mint);text-shadow:4px 4px 0 var(--jp-black),0 0 30px rgba(125,255,186,.55)} body.jeopardyTest.jeopardyRoundComplete #resultsTitle[data-tier="strong"]{color:var(--jp-cyan);text-shadow:4px 4px 0 var(--jp-black),0 0 26px rgba(18,243,255,.5)} .resultsCelebrate{display:flex;flex-direction:column;align-items:center;gap:18px;margin:14px 0 18px} .resultsBlurb{font-size:clamp(15px,1.7vw,18px);font-weight:800;color:var(--jp-cream);max-width:560px;line-height:1.35;margin:0} .resultsBigPct{display:inline-flex;align-items:baseline;justify-content:center;position:relative;padding:18px 36px 22px;border-radius:24px;background:linear-gradient(180deg,#2d0b83,#1a0759);border:3px solid var(--jp-violet);box-shadow:0 0 28px rgba(239,79,212,.42),inset 0 0 22px rgba(255,255,255,.10)} .resultsBigPctNum{font-size:clamp(72px,12vw,140px);font-weight:950;color:var(--jp-yellow);line-height:.9;text-shadow:5px 5px 0 var(--jp-black),0 0 28px rgba(255,242,0,.45);letter-spacing:-.02em} .resultsBigPctSign{font-size:clamp(36px,6vw,64px);font-weight:950;color:var(--jp-yellow);margin-left:6px;text-shadow:4px 4px 0 var(--jp-black)} .resultsBigPctLabel{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--jp-cream)} .resultsStatGrid{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:12px;width:100%;max-width:560px} .resultsStatTile{background:rgba(255,255,255,.05);border:2px solid rgba(239,132,255,.55);border-radius:14px;padding:12px 10px;display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;text-align:center} .resultsStatTile.good{background:rgba(125,255,186,.10);border-color:rgba(125,255,186,.55)} .resultsStatTile.bad{background:rgba(255,141,177,.10);border-color:rgba(255,141,177,.55)} .resultsStatLabel{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.10em;color:rgba(255,242,0,.85)} .resultsStatTile.good .resultsStatLabel{color:var(--jp-mint)} .resultsStatTile.bad .resultsStatLabel{color:var(--jp-pink)} .resultsStatTile strong{font-size:clamp(22px,3vw,30px);font-weight:950;color:#fff;line-height:1.05;text-shadow:2px 2px 0 var(--jp-black)} .resultsStatSub{font-size:11px;font-weight:800;color:var(--jp-lavender);letter-spacing:.04em} body.jeopardyTest.jeopardyRoundComplete .reviewButtons{justify-content:center;gap:14px;flex-wrap:wrap;margin-top:6px} body.jeopardyTest.jeopardyRoundComplete #reviewMissedBtn:not(.secondary):not(:disabled){background:linear-gradient(180deg,var(--jp-mint),#22b475);color:var(--jp-mint-ink);border:2px solid #ffffff;font-size:18px;padding:16px 26px;box-shadow:0 6px 0 var(--jp-mint-ink),0 0 22px rgba(125,255,186,.45);text-shadow:1px 1px 0 rgba(255,255,255,.35)} body.jeopardyTest.jeopardyRoundComplete #reviewMissedBtn:not(.secondary):not(:disabled):hover{filter:brightness(1.08)} body.jeopardyTest.jeopardyRoundComplete #reviewMissedBtn:disabled{opacity:.55} .godModeBtn:not(:disabled){background:linear-gradient(180deg,#a855f7,#6d28d9);color:#fff;border:2px solid #ffffff;box-shadow:0 5px 0 rgba(76,29,149,.55),0 0 18px rgba(168,85,247,.35)} .godModeBtn:not(:disabled):hover{filter:brightness(1.08)} .godModeBtn:disabled{opacity:.5;cursor:not-allowed} body.jeopardyTest.jeopardyRoundComplete .godModeBtn:not(:disabled){font-size:17px;padding:15px 24px} @media (max-width:640px){ .resultsStatGrid{grid-template-columns:1fr} } @keyframes resultsPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}} body.jeopardyTest.jeopardyRoundComplete #resultsTitle[data-tier="perfect"], body.jeopardyTest.jeopardyRoundComplete #resultsTitle[data-tier="outstanding"]{animation:resultsPulse 1.6s ease-in-out 2} /* Per-category breakdown on the round-complete screen — the default light-theme tiles came out white-on-white inside the Jeopardy purple panel. */ body.jeopardyTest.jeopardyRoundComplete #performanceBox{grid-template-columns:repeat(3,minmax(150px,1fr));gap:10px;margin:8px auto 14px;max-width:780px} body.jeopardyTest.jeopardyRoundComplete #performanceBox div{ background:linear-gradient(180deg,rgba(45,11,131,.85),rgba(26,7,89,.85)); border:2px solid rgba(239,132,255,.55); border-radius:12px; padding:10px 8px; color:#fff; display:flex; flex-direction:column; gap:3px; align-items:center; justify-content:center; box-shadow:inset 0 0 14px rgba(255,255,255,.06),0 4px 0 rgba(5,0,21,.5) } body.jeopardyTest.jeopardyRoundComplete #performanceBox div > span:first-child{ font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--jp-yellow);line-height:1.1 } body.jeopardyTest.jeopardyRoundComplete #performanceBox div > strong{ color:#fff;font-size:clamp(22px,3vh,28px);font-weight:950;line-height:1;text-shadow:2px 2px 0 rgba(5,0,21,.55);margin:2px 0 } body.jeopardyTest.jeopardyRoundComplete #performanceBox div > span:last-child{ font-size:12px;font-weight:800;color:var(--jp-lavender);letter-spacing:.04em } @media (max-width:760px){ body.jeopardyTest.jeopardyRoundComplete #performanceBox{grid-template-columns:repeat(2,1fr)} } body.jeopardyTest.jeopardyRoundComplete #results{max-width:920px;margin:8px auto 0} body.jeopardyTest .roundStat{display:none} body.jeopardyTest .optionBtn,body.jeopardyTest button,body.jeopardyTest .stat,body.jeopardyTest .category,body.jeopardyTest .clue,body.jeopardyTest .subclue{font-family:inherit} body.jeopardyTest .clue,body.jeopardyTest header h1,body.jeopardyTest .boardTop h2{letter-spacing:0} body.jeopardyTest.reviewScreen{overflow:hidden} body.jeopardyTest.reviewScreen main{height:calc(100vh - 66px);margin:8px auto 0;padding:0 12px;display:flex;flex-direction:column;min-height:0} body.jeopardyTest #answerReview:not(.hidden){height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;min-height:0;margin:0;padding:clamp(8px,1.2vh,14px);overflow:hidden} body.jeopardyTest .answerReviewTop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:4px 6px 0} body.jeopardyTest .reviewResult{display:inline-flex;align-items:center;width:max-content;padding:5px 10px;border-radius:999px;font-weight:950;text-transform:uppercase;letter-spacing:.03em;background:#0dfff3;color:#120034;box-shadow:0 4px 0 var(--jp-black);font-size:clamp(12px,1.4vh,15px)} /* Specificity bump (body.jeopardyTest …) so these state colors actually override the base .reviewResult cyan instead of losing the cascade. */ body.jeopardyTest .reviewResult.good{background:var(--jp-mint);color:var(--jp-mint-ink)} body.jeopardyTest .reviewResult.bad{background:#ef4444;color:#fff;box-shadow:0 4px 0 #7f1d1d} body.jeopardyTest .reviewResult.neutral{background:var(--jp-yellow);color:var(--jp-purple-deep)} /* Full-viewport red flash on a missed answer — fades in fast, lingers briefly, then fades into the review screen. Pointer-events:none so it doesn't intercept clicks during the fade (the Back button stays clickable). Sits above everything via z-index. */ .missFlashOverlay{ position:fixed;inset:0; background:radial-gradient(circle at 50% 40%, rgba(239,68,68,0.62) 0%, rgba(127,29,29,0.55) 55%, rgba(60,10,10,0.40) 100%); pointer-events:none; z-index:9999; animation:missFlashAnim 700ms ease-out forwards; mix-blend-mode:multiply; } @keyframes missFlashAnim{ 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce){ .missFlashOverlay{ animation-duration: 250ms; } } /* Generic "You chose vs. correct" text-comparison panel — used on the answer-review screen for every MCQ / typed-in miss that isn't already covered by the flag-specific comparison or the multi-select visual. */ .reviewTextCompare{ display:flex;flex-direction:column;gap:8px; margin-top:4px; } .reviewTextCompareRow{ display:grid;grid-template-columns:1fr 1fr;gap:10px; } .reviewTextCompareCell{ display:flex;flex-direction:column;gap:6px; padding:10px 12px; border:1px solid transparent;border-radius:10px; background:rgba(15,23,42,.04); } .reviewTextCompareTag{ font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:#64748b; } .reviewTextCompareValue{ font-size:clamp(15px,1.9vh,20px);font-weight:900;line-height:1.15; overflow-wrap:break-word; } .reviewTextCompareCell.wrong{ background:rgba(239,68,68,.12);border-color:rgba(220,38,38,.45); } .reviewTextCompareCell.wrong .reviewTextCompareTag{color:#991b1b} .reviewTextCompareCell.wrong .reviewTextCompareValue{color:#7f1d1d} .reviewTextCompareCell.right{ background:rgba(34,197,94,.14);border-color:rgba(22,163,74,.45); } .reviewTextCompareCell.right .reviewTextCompareTag{color:#166534} .reviewTextCompareCell.right .reviewTextCompareValue{color:#14532d} /* Dark Jeopardy variant — the teaching panel sits on a dark navy bg in test mode, so muted slate tags would disappear. Brighten them slightly. */ body.jeopardyTest .reviewTextCompareCell{background:rgba(255,255,255,.06)} body.jeopardyTest .reviewTextCompareTag{color:#cbd5e1} body.jeopardyTest .reviewTextCompareValue{color:#f8fafc} body.jeopardyTest .reviewTextCompareCell.wrong{background:rgba(239,68,68,.18);border-color:rgba(248,113,113,.55)} body.jeopardyTest .reviewTextCompareCell.wrong .reviewTextCompareTag{color:#fca5a5} body.jeopardyTest .reviewTextCompareCell.wrong .reviewTextCompareValue{color:#fecaca} body.jeopardyTest .reviewTextCompareCell.right{background:rgba(34,197,94,.18);border-color:rgba(74,222,128,.55)} body.jeopardyTest .reviewTextCompareCell.right .reviewTextCompareTag{color:#86efac} body.jeopardyTest .reviewTextCompareCell.right .reviewTextCompareValue{color:#bbf7d0} @media (max-width:760px){ .reviewTextCompareRow{grid-template-columns:1fr} } body.jeopardyTest .reviewAnswer{margin:4px 0 2px;font-size:clamp(28px,4.6vh,52px);line-height:1;color:#fff;text-shadow:4px 4px 0 var(--jp-black)} body.jeopardyTest .reviewPrompt{margin:0;color:var(--jp-cream);font-size:clamp(14px,1.8vh,19px);font-weight:800;line-height:1.25} body.jeopardyTest .reviewMeta{margin-top:4px;color:var(--jp-lavender);font-size:clamp(11px,1.3vh,13px);font-weight:800;text-transform:uppercase;letter-spacing:.06em} body.jeopardyTest .reviewDelta{min-width:110px;text-align:center;padding:8px 14px;border:2px solid var(--jp-violet);border-radius:14px;background:linear-gradient(180deg,#2d0b83,#1a0759);box-shadow:inset 0 0 14px rgba(255,255,255,.08),0 4px 0 var(--jp-black);color:var(--jp-yellow);font-size:clamp(20px,3.4vh,34px);font-weight:950;text-shadow:3px 3px 0 #3c2100} body.jeopardyTest .reviewBody{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px;min-height:0} body.jeopardyTest .reviewTeaching{border:2px solid rgba(239,132,255,.68);border-radius:14px;background:rgba(5,0,43,.72);padding:8px 12px;font-size:clamp(13px,1.55vh,16px);line-height:1.28;color:#fff;overflow:visible;max-height:none} body.jeopardyTest .reviewTeaching b{color:var(--jp-yellow)} body.jeopardyTest .reviewVisual{min-height:0;overflow:hidden;border:2px solid rgba(239,132,255,.68);border-radius:14px;background:#d9f1fb;color:#14213d;display:flex;flex-direction:column} body.jeopardyTest .reviewVisual .answerVisualTitle{flex:0 0 auto;background:var(--jp-yellow);color:var(--jp-purple-deep);border-bottom:0;font-size:13px;text-transform:uppercase;letter-spacing:.04em;padding:6px 12px;font-weight:900} body.jeopardyTest .reviewVisual .answerVisualMap{flex:1 1 auto;min-height:0;background:#d9f1fb;padding:0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;position:relative;overflow:hidden} body.jeopardyTest .reviewVisual .answerVisualMap.reviewMapCanvas{padding:0} body.jeopardyTest .reviewVisual .answerVisualMap svg{flex:1 1 auto;width:100%;height:100%;max-height:100%;min-height:0;display:block} body.jeopardyTest .reviewVisual .answerVisualMap>.answerVisualCaption{align-self:stretch;flex:0 0 auto;margin-top:0} body.jeopardyTest .reviewVisual .answerVisualCaption{flex:0 0 auto;color:#1e3a8a;background:rgba(248,250,252,.96);padding:7px 12px;border-top:1px solid #bfdbfe;font-size:13px;font-weight:700} body.jeopardyTest .reviewVisual.mapReview .answerVisualMap{position:relative;overflow:hidden} body.jeopardyTest .reviewVisual.mapReview .answerVisualMap svg{position:absolute;inset:0;width:100%;height:100%} body.jeopardyTest .reviewVisual.mapReview .answerVisualMap>.answerVisualCaption{position:absolute;left:10px;right:10px;bottom:10px;margin:0;border:1px solid rgba(191,219,254,.9);border-radius:10px;background:rgba(248,250,252,.94);box-shadow:0 6px 18px rgba(15,23,42,.18);font-size:13px;padding:7px 12px} @media (min-width:1100px){ body.jeopardyTest .reviewBody{grid-template-columns:minmax(0,1fr) minmax(260px,22%);grid-template-rows:minmax(0,1fr);gap:10px} body.jeopardyTest #reviewVisual{grid-column:1;grid-row:1} body.jeopardyTest #reviewTeaching{grid-column:2;grid-row:1;overflow:auto} } body.jeopardyTest .reviewVisual.flagReview{background:linear-gradient(180deg,#2d0b83,#150342)} body.jeopardyTest .reviewVisual.flagReview .answerVisualMap{background:radial-gradient(circle at center,rgba(255,255,255,.11),transparent 54%),linear-gradient(180deg,#270858,#100038);padding:clamp(18px,3vh,32px)} body.jeopardyTest .reviewFlagImage{display:block;width:min(78%,860px);max-width:860px;height:min(100%,48vh);max-height:480px;object-fit:contain;border:0;border-radius:0;background:transparent;box-shadow:none;margin:auto;align-self:center} body.jeopardyTest .reviewVisual.flagReview .answerVisualCaption{background:rgba(255,255,255,.94);border-top:1px solid rgba(239,132,255,.32)} body.jeopardyTest .reviewSvgFitted .answerVisualMapLayer,body.jeopardyTest .reviewSvgFitted .mapLayer{transform-box:view-box;transform-origin:center} body.jeopardyTest.reviewScreen .mapZoomControls{display:none !important} body.jeopardyTest .reviewNav{margin:0;justify-content:flex-end} body.jeopardyTest .reviewNav button{min-width:190px} /* During unanswered clues, compress the game into the visible browser height. */ body.jeopardyTest.gameFitting{overflow:hidden} body.jeopardyTest.gameFitting header{padding:8px 16px} body.jeopardyTest.gameFitting header h1{font-size:clamp(24px,4vh,42px)} body.jeopardyTest.gameFitting header p{display:none} body.jeopardyTest.gameFitting main{height:calc(100vh - 66px);margin:8px auto 0;padding:0 12px;display:flex;flex-direction:column;min-height:0} body.jeopardyTest.gameFitting #game{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:8px;min-height:0;width:100%} body.jeopardyTest.gameFitting #game .sessionToolbar{margin:0;padding:7px 10px;border-radius:10px} body.jeopardyTest.gameFitting #game .sessionTitle{display:none} body.jeopardyTest.gameFitting #game .sessionActions{gap:6px} body.jeopardyTest.gameFitting #game .sessionActions button{padding:7px 10px;font-size:12px;border-radius:8px} body.jeopardyTest.gameFitting #game .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} body.jeopardyTest.gameFitting #game .stat{padding:5px 6px;border-radius:8px} body.jeopardyTest.gameFitting #game .stat span,body.jeopardyTest.gameFitting #game .stat small{font-size:10px;line-height:1.05} body.jeopardyTest.gameFitting #game .stat strong{font-size:clamp(15px,2.3vh,22px);margin-top:1px} body.jeopardyTest.gameFitting #game .panel{height:100%;margin:0;padding:clamp(8px,1.4vh,13px);display:flex;flex-direction:column;min-height:0;overflow:hidden} body.jeopardyTest.gameFitting #game .category{font-size:11px;padding:5px 9px;border-radius:12px} body.jeopardyTest.gameFitting #game .clue{font-size:clamp(20px,3.2vh,32px);line-height:1.04;margin:7px 0 3px} body.jeopardyTest.gameFitting #game .subclue{font-size:clamp(12px,1.7vh,15px);line-height:1.2;min-height:0} body.jeopardyTest.gameFitting #game .timerWrap{height:10px;margin:7px 0 8px;flex:0 0 auto} body.jeopardyTest.gameFitting #game .bigFlag{height:clamp(150px,26vh,280px);width:min(620px,86%);margin:4px auto 8px} body.jeopardyTest.gameFitting #game .mapWrap{margin-top:6px;padding:6px;min-height:130px;display:flex;align-items:center;justify-content:center;flex:1 1 0;overflow:hidden} body.jeopardyTest.gameFitting #game .mapWrap svg{width:100%;height:100%;max-height:100%} body.jeopardyTest.gameFitting.mapQuestion #game .mapWrap{max-height:calc(100vh - 265px)} body.jeopardyTest.gameFitting.mapQuestion.optionsQuestion #game .mapWrap{max-height:calc(100vh - 410px)} body.jeopardyTest.gameFitting #game .mapCaption{padding:5px 8px;font-size:11px;line-height:1.2;max-height:34px;overflow:hidden;flex:0 0 auto} body.jeopardyTest.gameFitting #game .options{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px;flex:0 0 auto;align-content:stretch} body.jeopardyTest.gameFitting.optionsQuestion:not(.mapQuestion) #game .options{flex:1 1 auto;grid-auto-rows:1fr} body.jeopardyTest.gameFitting.optionsQuestion:not(.mapQuestion) #game .optionBtn{height:100%;min-height:0} body.jeopardyTest.gameFitting #game .optionBtn{min-height:clamp(58px,10vh,88px);padding:10px 14px;font-size:clamp(17px,2.4vh,22px);line-height:1.14;border-radius:9px} body.jeopardyTest.gameFitting.flagQuestion #game .optionBtn{min-height:clamp(132px,21vh,240px);display:flex;align-items:center;justify-content:center;padding:clamp(12px,2vh,20px)} body.jeopardyTest.gameFitting.flagQuestion #game .optionBtn img.flagChoice{height:clamp(104px,16vh,190px);max-width:min(460px,82%);width:auto} body.jeopardyTest.gameFitting #game .row{margin-top:8px !important;flex:0 0 auto} body.jeopardyTest.gameFitting #game #skipBtn,body.jeopardyTest.gameFitting #game #revealBtn,body.jeopardyTest.gameFitting #game #nextBtn{padding:8px 12px;font-size:13px;border-radius:8px} body.jeopardyTest.answeredQuestion #game .feedback{font-size:clamp(17px,2.4vh,22px);padding:8px 12px;margin-top:7px;flex:0 0 auto} body.jeopardyTest.answeredQuestion #game .answerLine{font-size:clamp(13px,1.8vh,16px);line-height:1.22;margin-top:6px;padding:8px 10px;max-height:clamp(70px,14vh,120px);overflow:auto;flex:0 0 auto} body.jeopardyTest.answeredQuestion #game .correctNote{font-size:12px;margin-top:3px} body.jeopardyTest.answeredQuestion #game .teachingNote{font-size:12px;line-height:1.2;margin-top:5px;padding:6px 8px} body.jeopardyTest.answeredQuestion #game .answerVisual{margin-top:6px;max-height:clamp(120px,21vh,220px);overflow:hidden;flex:0 1 auto} body.jeopardyTest.answeredQuestion.mapQuestion #game .answerVisual{display:none !important} body.jeopardyTest.answeredQuestion #game .answerVisualTitle{padding:6px 9px;font-size:12px} body.jeopardyTest.answeredQuestion #game .answerVisualMap{height:clamp(88px,16vh,170px);padding:4px} body.jeopardyTest.answeredQuestion #game .answerVisualMap svg{width:100%;height:100%} body.jeopardyTest.answeredQuestion #game .answerVisualCaption{display:none} body.jeopardyTest.answeredQuestion.mapQuestion #game .mapWrap{max-height:calc(100vh - 430px)} body.jeopardyTest.answeredQuestion.optionsQuestion #game .optionBtn{min-height:clamp(46px,7vh,64px);font-size:clamp(14px,1.9vh,18px)} @media (max-width:760px){ body.jeopardyTest.gameFitting main{height:calc(100vh - 56px);padding:0 8px} body.jeopardyTest.gameFitting #game{grid-template-rows:auto auto minmax(0,1fr);gap:6px} body.jeopardyTest.gameFitting #game .stats{grid-template-columns:repeat(2,minmax(0,1fr))} body.jeopardyTest.gameFitting.mapQuestion #game .mapWrap{max-height:calc(100vh - 330px)} body.jeopardyTest.gameFitting.mapQuestion.optionsQuestion #game .mapWrap{max-height:calc(100vh - 470px)} body.jeopardyTest .jeopardyGrid{grid-template-columns:repeat(6,minmax(44px,1fr))} body.jeopardyTest .boardCategory{font-size:8px;padding:3px} body.jeopardyTest .boardTile{font-size:20px} body.jeopardyTest #answerReview:not(.hidden){height:auto;min-height:calc(100vh - 60px);overflow:auto} body.jeopardyTest .answerReviewTop,body.jeopardyTest .reviewBody{grid-template-columns:1fr} body.jeopardyTest .reviewDelta{width:max-content} } /* Progress strip — soft cool palette in default (mastery) mode; yellow cram palette only when .cramOn is set. Keeps the strip from implying cram is active just because it's now always visible. */ .cramProgressStrip:not(.cramOn){border-color:rgba(56,189,248,.30)} .cramProgressStrip:not(.cramOn) .cramStripLabel{color:#38bdf8} /* Per-category coverage badge on the setup screen: M · L · U / Total */ .prettyChecks label{justify-content:space-between} .catLabelText{flex:1 1 auto;min-width:0} .catCoverage{ display:inline-flex;align-items:center;gap:3px; font-size:11px;font-weight:700;letter-spacing:.02em; background:#0f172a;color:#cbd5e1; padding:3px 7px;border-radius:999px; flex-shrink:0;white-space:nowrap; } .catCovMastered{color:#22c55e} .catCovLearning{color:#fbbf24} .catCovUnseen{color:#94a3b8} .catCovTotal{color:#64748b;font-weight:600;margin-left:2px} /* Multi-select answer-review: portrait on the left, side-by-side "You chose" vs "Correct" comparison on the right. Fills the previously-empty visual area on the review screen with a clear teaching moment — green ticks for hits, red x for wrong picks, amber slash for correct answers missed. Horizontal layout fits inside the constrained reviewVisual container (which has overflow:hidden and limited height) — a vertical stack would clip the comparison below the visible area. */ /* Higher specificity than the body.jeopardyTest .reviewVisual .answerVisualMap rule at the top of this file, which would otherwise force a vertical column layout. */ body.jeopardyTest .reviewVisual .answerVisualMap.multiReview, .answerVisualMap.multiReview{ display:flex;flex-direction:row;gap:14px; height:100%;padding:12px 14px;align-items:stretch;justify-content:flex-start; background:transparent;min-height:0; } .multiReviewPortrait{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto;min-width:0} .multiReviewPortrait .presidentPortrait{max-width:min(140px,20vw);max-height:100%;height:auto;width:auto;margin:0} .multiReviewPortrait .presidentPortraitFallback{width:120px;aspect-ratio:3/4} .multiReviewSubjectName{ font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:#14213d;text-align:center; } .multiReviewCompare{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1 1 auto;min-width:0;min-height:0;overflow:auto} .multiReviewCol{ display:flex;flex-direction:column;gap:6px; background:rgba(15,23,42,.06);border:1px solid rgba(15,33,61,.18); border-radius:10px;padding:8px 10px;min-height:0; } .multiReviewColLabel{ font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:#475569; } .multiReviewList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;overflow:auto;min-height:0} .multiReviewItem{ display:flex;align-items:center;gap:8px; padding:6px 8px;border-radius:7px; font-weight:700;font-size:13px;line-height:1.15; border:1px solid transparent; } .multiReviewIcon{ display:inline-flex;align-items:center;justify-content:center; width:18px;height:18px;border-radius:50%; font-weight:900;font-size:11px;flex-shrink:0; } .multiReviewName{flex:1 1 auto;min-width:0} /* Status variants — tuned for the light-blue review-panel background so they read as correct/wrong/missed at a glance without losing contrast. */ .multiReviewItem.hit{ background:rgba(34,197,94,.16);border-color:rgba(22,163,74,.45);color:#14532d; } .multiReviewItem.hit .multiReviewIcon{background:#16a34a;color:#fff} .multiReviewItem.wrong{ background:rgba(239,68,68,.14);border-color:rgba(220,38,38,.45);color:#7f1d1d; } .multiReviewItem.wrong .multiReviewIcon{background:#dc2626;color:#fff} .multiReviewItem.missed{ background:rgba(245,158,11,.16);border-color:rgba(180,83,9,.40);color:#7c2d12; } .multiReviewItem.missed .multiReviewIcon{background:#f59e0b;color:#422006} .multiReviewItem.none{ background:rgba(100,116,139,.10);border-color:rgba(100,116,139,.30);color:#475569;font-style:italic; } .multiReviewItem.none .multiReviewIcon{background:#64748b;color:#fff} @media (max-width:760px){ .multiReviewCompare{grid-template-columns:1fr} .multiReviewPortrait .presidentPortrait{max-width:120px;max-height:120px} }