@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --ink: #10253b;
  --muted: #64768a;
  --line: #dce6e9;
  --paper: #f5f8f6;
  --teal: #087d78;
  --deep-teal: #075d5d;
  --mint: #d9f2e9;
  --orange: #ff7849;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 4%, rgba(96, 205, 182, 0.16), transparent 24rem),
    linear-gradient(180deg, #fbfdfc 0%, var(--paper) 100%);
  font-family: "DM Sans", sans-serif;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.lab-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 78px;
  padding: 12px clamp(20px, 4vw, 64px);
  border-bottom: 1px solid rgba(16, 37, 59, 0.08);
  background: rgba(251, 253, 252, 0.88);
  backdrop-filter: blur(18px);
}
.lab-brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.lab-brand > span:last-child { display: grid; }
.lab-brand strong { font-family: "Space Grotesk", sans-serif; font-size: 0.98rem; line-height: 1; }
.lab-brand small { margin-top: 4px; color: var(--muted); font-size: 0.69rem; letter-spacing: 0.1em; text-transform: uppercase; }
.brand-mark { display: flex; align-items: end; gap: 3px; width: 34px; height: 38px; padding: 6px; border-radius: 10px; background: var(--deep-teal); }
.brand-mark i { width: 6px; height: 22px; border: 2px solid white; border-radius: 3px 3px 5px 5px; background: rgba(255,255,255,.2); }
.brand-mark i:nth-child(2) { height: 27px; background: #ffbd52; }
.brand-mark i:nth-child(3) { height: 19px; background: #b4d6ff; }
.lab-tabs { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: #edf3f1; }
.lab-tab { min-height: 39px; padding: 0 20px; border: 0; border-radius: 999px; color: #657589; background: transparent; font-size: 0.79rem; font-weight: 700; cursor: pointer; }
.lab-tab.active { color: white; background: var(--deep-teal); box-shadow: 0 5px 14px rgba(7, 93, 93, 0.22); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 14px; }
.back-link { color: var(--deep-teal); font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.theme-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.72); font-size: .72rem; font-weight: 700; cursor: pointer; }
.theme-toggle [data-theme-icon] { color: var(--teal); font-size: 1rem; line-height: 1; }
.theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--teal); outline: none; }

main { width: min(1440px, 100%); margin: auto; }
.tab-panel { padding: clamp(40px, 6vw, 88px) clamp(20px, 4vw, 64px) 70px; }
.lab-intro, .game-heading { display: grid; grid-template-columns: 1.4fr minmax(310px, 0.7fr); gap: clamp(28px, 6vw, 90px); align-items: end; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 15px; color: var(--teal); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.eyebrow span { width: 24px; height: 2px; background: var(--orange); }
h1 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: clamp(2.8rem, 6vw, 6.4rem); letter-spacing: -0.07em; line-height: 0.9; }
h1 em { color: var(--teal); font-style: normal; }
.lab-intro > div:first-child > p:last-child, .game-heading > div:first-child > p:last-child { max-width: 650px; margin: 25px 0 0; color: var(--muted); font-size: clamp(0.94rem, 1.2vw, 1.06rem); line-height: 1.7; }
.quick-quiz { padding: 24px; border: 1px solid #cfe0dd; border-radius: 18px; background: rgba(255,255,255,.72); box-shadow: 0 18px 45px rgba(29, 75, 75, .07); }
.quiz-label { color: var(--orange); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.quick-quiz p { margin: 9px 0 20px; font-size: 1rem; line-height: 1.5; }
.quick-quiz p strong { color: var(--deep-teal); }
.quiz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 13px; }
.quiz-actions button, .score-card button { padding: 8px 12px; border: 1px solid #c8d9d6; border-radius: 8px; color: var(--deep-teal); background: white; font-size: .72rem; font-weight: 700; cursor: pointer; }
.quiz-actions span { flex: 1 1 210px; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.quiz-actions span.correct { color: #16815d; font-weight: 700; }
.quiz-actions span.wrong { color: #c64b39; font-weight: 700; }

.tube-toolbar { display: flex; justify-content: space-between; align-items: center; margin: clamp(42px, 6vw, 80px) 0 20px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.tube-toolbar label { display: flex; align-items: center; gap: 8px; width: min(380px, 70%); }
.tube-toolbar label > span { color: var(--teal); font-size: 1.35rem; }
.tube-toolbar input { width: 100%; padding: 8px 2px; border: 0; outline: 0; color: var(--ink); background: transparent; }
.tube-toolbar p { margin: 0; color: var(--muted); font-size: .75rem; }

.tube-wall { display: grid; grid-template-columns: repeat(12, minmax(100px, 1fr)); gap: 10px; overflow-x: auto; padding: 12px 3px 35px; scrollbar-color: #afc7c1 transparent; }
.tube-card { position: relative; display: grid; grid-template-rows: 25px 48px 215px auto; min-width: 100px; min-height: 425px; overflow: hidden; border: 1px solid #d7e1df; border-radius: 12px; background: rgba(255,255,255,.82); cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.tube-card:hover, .tube-card.selected { z-index: 2; border-color: var(--tube); box-shadow: 0 16px 38px rgba(24, 61, 64, .13); transform: translateY(-7px); }
.tube-card.accepted-answer { border-color: var(--tube); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tube) 42%, transparent), 0 16px 38px rgba(24, 61, 64, .13); }
.tube-card.hidden { display: none; }
.tube-department { display: grid; place-items: center; padding: 0 7px; color: white; background: var(--tube); font-size: .57rem; font-weight: 800; letter-spacing: .07em; text-align: center; text-transform: uppercase; }
.tube-title { display: grid; place-items: center; padding: 5px; color: #34485b; font-size: .65rem; font-weight: 700; line-height: 1.08; text-align: center; }
.tube-illustration { position: relative; width: 78px; height: 210px; margin: 2px auto 3px; filter: drop-shadow(0 10px 8px rgba(30, 55, 66, .13)); }
.tube-cap { position: absolute; top: var(--cap-top); left: 4px; z-index: 4; width: 70px; height: 37px; overflow: hidden; border: 2px solid color-mix(in srgb, var(--tube) 78%, #0b2030); border-radius: 10px 10px 7px 7px; background: linear-gradient(90deg, color-mix(in srgb, var(--tube) 78%, #fff), var(--tube) 38%, color-mix(in srgb, var(--tube) 76%, #07131d)); box-shadow: inset 0 5px rgba(255,255,255,.22), inset 0 -4px rgba(0,0,0,.09), 0 3px 5px rgba(25,40,50,.18); }
.tube-cap::before { content: ""; position: absolute; inset: 7px 5px 3px; border-radius: 5px; background: repeating-linear-gradient(90deg, transparent 0 4px, rgba(0,0,0,.14) 4px 6px); }
.tube-cap span { position: absolute; inset: 1px 7px auto; height: 3px; border-radius: 3px; background: rgba(255,255,255,.33); }
.tube-glass { position: absolute; top: calc(var(--cap-top) + 30px); left: 10px; width: 58px; height: var(--glass-height); overflow: hidden; border: 1.5px solid #aebfc3; border-top: 0; border-radius: 4px 4px 28px 28px; background: linear-gradient(90deg, rgba(255,255,255,.9) 0 13%, rgba(209,226,228,.34) 26%, rgba(244,250,250,.72) 62%, rgba(183,205,208,.4) 86%, rgba(255,255,255,.8)); box-shadow: inset 5px 0 6px rgba(255,255,255,.75), inset -4px 0 5px rgba(106,139,145,.13); }
.tube-glass::before { content: ""; position: absolute; top: 4px; right: 7px; z-index: 3; width: 4px; height: 139px; border-radius: 4px; background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.2)); }
.tube-glass::after { content: ""; position: absolute; right: 16px; bottom: 5px; left: 16px; height: 8px; border-bottom: 2px solid rgba(92,119,125,.26); border-radius: 50%; }
.tube-blood { position: absolute; top: var(--fill-position); right: 1px; bottom: 1px; left: 1px; z-index: 1; overflow: hidden; border-radius: 0 0 26px 26px; background: linear-gradient(90deg, #6e111c 0%, #a9232d 23%, #86131f 67%, #5b0c17 100%); box-shadow: inset 7px 0 8px rgba(255,104,104,.12), inset -5px 0 7px rgba(54,0,8,.25); opacity: .9; }
.tube-blood::before { content: ""; position: absolute; top: -4px; right: 0; left: 0; height: 8px; border-radius: 50%; background: #a32630; box-shadow: inset 0 2px rgba(255,128,128,.18), 0 1px rgba(62,0,7,.36); }
.tube-label { position: absolute; top: 28px; left: 5px; z-index: 2; display: grid; grid-template-columns: 13px 1fr; grid-template-rows: 18px 1fr 15px; width: 47px; height: min(102px, calc(var(--glass-height) - 40px)); overflow: hidden; border: 1px solid #c5ccca; border-radius: 3px 7px 7px 3px; color: #253942; background: linear-gradient(100deg, rgba(249,250,245,.97), rgba(232,236,232,.95)); box-shadow: 0 2px 3px rgba(40,60,65,.12); text-align: left; }
.tube-label b { grid-column: 1 / -1; padding: 3px 4px 2px; color: white; background: var(--tube); font-family: "Space Grotesk", sans-serif; font-size: 8px; letter-spacing: .06em; }
.tube-label i { grid-row: 2 / 4; width: 9px; margin: 4px 0 4px 3px; border: 1px solid color-mix(in srgb, var(--tube) 55%, #fff); border-radius: 2px; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--tube) 78%, white) 0 5px, transparent 5px 8px); }
.tube-label > span { align-self: center; padding: 3px 2px 2px 0; font-size: 6.5px; font-weight: 750; line-height: 1.08; }
.tube-label small { align-self: end; padding: 0 2px 3px 0; font-size: 5.5px; font-weight: 700; white-space: nowrap; }
.tube-nominal-line { position: absolute; top: var(--fill-position); right: 2px; left: 2px; z-index: 3; height: 2px; border-top: 2px solid #202d32; filter: drop-shadow(0 1px rgba(255,255,255,.8)); }
.tube-nominal-line::after { content: ""; position: absolute; top: -6px; right: -1px; border-top: 5px solid transparent; border-right: 7px solid #202d32; border-bottom: 5px solid transparent; }
.tube-nominal-line span { position: absolute; top: -14px; left: 2px; padding: 1px 3px; color: white; background: #202d32; font-size: 5px; font-weight: 900; letter-spacing: .08em; line-height: 1.2; }
.tube-gel { display: none; position: absolute; right: 3px; bottom: 2px; left: 3px; z-index: 2; height: 13px; border-radius: 0 0 23px 23px; background: linear-gradient(180deg, rgba(239,219,113,.78), rgba(205,176,42,.94)); }
.tube-illustration.has-gel .tube-gel { display: block; }
.tube-illustration.photo-real { display: flex; align-items: flex-end; justify-content: center; width: 78px; height: 210px; filter: drop-shadow(4px 10px 7px rgba(21, 38, 47, .24)); }
.tube-photo-shell { position: relative; width: calc(var(--photo-height) * .1798); height: var(--photo-height); transform: rotate(-.35deg); transform-origin: center bottom; }
.tube-illustration.short-model .tube-photo-shell { width: calc(var(--photo-height) * .2524); }
.tube-photo-shell img { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; object-fit: fill; }
.tube-photo-liquid { position: absolute; top: var(--fill-position); right: 13.5%; bottom: 3.1%; left: 13.5%; z-index: 1; overflow: hidden; border-radius: 50% 50% 48% 48% / 3px 3px 14px 14px; background: linear-gradient(90deg, #31040b 0%, #70101b 16%, #a5212c 43%, #79111d 72%, #2d0309 100%); box-shadow: inset 3px 0 3px rgba(255,122,122,.18), inset -3px 0 4px rgba(20,0,4,.42), inset 0 -7px 7px rgba(29,0,5,.28); }
.tube-photo-liquid::before { content: ""; position: absolute; top: -2px; right: 0; left: 0; height: 6px; border-radius: 50%; background: radial-gradient(ellipse at 42% 35%, #b72b35 0 22%, #76101b 61%, #2f040a 100%); box-shadow: 0 1px 1px rgba(39,0,5,.5); }
.tube-photo-liquid::after { content: ""; position: absolute; top: 0; bottom: 0; left: 20%; width: 13%; background: linear-gradient(90deg, transparent, rgba(255,128,128,.18), transparent); }
.tube-photo-gel { position: absolute; right: 13.5%; bottom: 3.2%; left: 13.5%; z-index: 1; height: 8.5%; border-radius: 12% 12% 48% 48% / 4px 4px 13px 13px; background: linear-gradient(90deg, #9f7710, #e4c447 35%, #c49a1d 72%, #896209); box-shadow: inset 2px 0 rgba(255,255,255,.25), inset -2px 0 rgba(82,55,4,.24), 0 -1px rgba(115,82,12,.45); }
.tube-photo-cap { position: absolute; inset: 0; z-index: 4; background: var(--tube); clip-path: inset(0 0 82% 0); -webkit-mask: url("./assets/images/phlebotomy/work-long-tube-3d-crop.png") center / 100% 100% no-repeat; mask: url("./assets/images/phlebotomy/work-long-tube-3d-crop.png") center / 100% 100% no-repeat; mix-blend-mode: color; opacity: 1; }
.tube-illustration.short-model .tube-photo-cap { clip-path: inset(0 0 77% 0); -webkit-mask-image: url("./assets/images/phlebotomy/work-short-tube-3d-crop.png"); mask-image: url("./assets/images/phlebotomy/work-short-tube-3d-crop.png"); }
.tube-card[data-tube="royal"] .tube-photo-cap,
.tube-card[data-tube="navy"] .tube-photo-cap { background: #064fb8; mix-blend-mode: multiply; }
.tube-photo-fill-line { position: absolute; top: var(--fill-position); right: 5%; left: 5%; z-index: 5; height: 2px; border-top: 2px solid #101719; filter: drop-shadow(0 -1px rgba(255,255,255,.95)) drop-shadow(0 1px rgba(255,255,255,.95)); }
.tube-photo-fill-line::after { content: ""; position: absolute; top: -7px; right: -8px; width: 0; height: 0; border-top: 6px solid transparent; border-right: 10px solid #101719; border-bottom: 6px solid transparent; filter: drop-shadow(1px 0 rgba(255,255,255,.9)); }
.culture-collection { display: flex; align-items: flex-end; justify-content: center; width: 98px; height: 210px; filter: drop-shadow(0 7px 6px rgba(28,48,57,.16)); }
.culture-collection img { display: block; width: 96px; height: 202px; object-fit: contain; object-position: center bottom; }
.tube-tests { display: flex; flex-direction: column; align-items: center; align-content: start; justify-content: flex-start; gap: 5px; padding: 10px 8px 13px; border-top: 1px solid #e5eceb; }
.tube-tests span { width: fit-content; max-width: 100%; padding: 4px 6px; border-radius: 5px; color: color-mix(in srgb, var(--tube) 70%, #172b3c); background: color-mix(in srgb, var(--tube) 11%, white); font-size: .56rem; font-weight: 700; line-height: 1.1; text-align: center; }
.tube-tests .ice-required { display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(53, 142, 190, .22); color: #17628a; background: #e8f7ff; }
.tube-tests .ice-required::after { content: "❄"; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; color: white; background: #55aee0; font-size: .58rem; line-height: 1; }
.training-note { display: flex; gap: 13px; max-width: 900px; margin-top: 18px; padding: 15px 18px; border-left: 3px solid var(--orange); color: var(--muted); background: #fff; font-size: .75rem; line-height: 1.55; }
.training-note span { display: grid; place-items: center; flex: 0 0 22px; height: 22px; border-radius: 50%; color: white; background: var(--orange); font-weight: 800; }
.training-note p { margin: 0; }

.jeopardy-panel { min-height: calc(100vh - 78px); background: radial-gradient(circle at 20% 0%, rgba(16, 133, 125, .14), transparent 35rem); }
.game-heading { align-items: center; }
.score-card { justify-self: end; display: grid; min-width: 190px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.score-card small { color: var(--muted); font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.score-card strong { margin: 3px 0 12px; color: var(--teal); font-family: "Space Grotesk", sans-serif; font-size: 2.25rem; }
.score-card strong em { color: var(--muted); font-size: .78rem; font-style: normal; letter-spacing: .08em; }
.jeopardy-board { display: grid; grid-template-columns: repeat(6, minmax(125px, 1fr)); gap: 8px; margin-top: 52px; }
.jeopardy-category { display: grid; place-items: center; min-height: 76px; padding: 12px; border-radius: 9px; color: white; background: var(--deep-teal); font-family: "Space Grotesk", sans-serif; font-size: clamp(.7rem, 1.1vw, .95rem); text-align: center; text-transform: uppercase; }
.jeopardy-clue { display: grid; place-items: center; align-content: center; gap: 3px; min-height: 92px; border: 1px solid #d4e2df; border-radius: 9px; color: var(--teal); background: white; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.15rem, 2vw, 1.75rem); font-weight: 700; cursor: pointer; transition: .18s ease; }
.jeopardy-clue small { color: var(--muted); font-family: "DM Sans", sans-serif; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }
.jeopardy-clue small:empty { display: none; }
.jeopardy-clue:hover small { color: rgba(255,255,255,.76); }
.jeopardy-clue:hover { color: white; border-color: var(--teal); background: var(--teal); transform: translateY(-2px); }
.jeopardy-clue.used { color: #aab8b5; background: #e8efed; cursor: default; transform: none; }
.clue-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(4, 26, 33, .72); backdrop-filter: blur(8px); }
.clue-modal[hidden] { display: none; }
.clue-dialog { position: relative; width: min(680px, 100%); padding: clamp(28px, 5vw, 58px); border-radius: 22px; background: #fbfdfc; box-shadow: 0 30px 100px rgba(0,0,0,.28); text-align: center; }
.modal-close { position: absolute; top: 15px; right: 18px; border: 0; color: #789; background: transparent; font-size: 1.8rem; cursor: pointer; }
.clue-dialog > p:first-of-type { margin: 0; color: var(--teal); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.clue-value { display: block; margin-top: 8px; color: var(--orange); font-family: "Space Grotesk", sans-serif; font-size: 1.15rem; }
.jeopardy-surprise { position: relative; width: min(470px, 100%); margin: 16px auto 2px; padding: 14px 24px 12px; overflow: hidden; border: 2px solid #ffd17b; border-radius: 13px; color: white; background: linear-gradient(135deg, #ff6847, #e94670 58%, #823ed1); box-shadow: 0 10px 28px rgba(221, 70, 91, .3), inset 0 1px rgba(255,255,255,.35); text-align: center; transform: rotate(-1deg); animation: surprise-pop .42s cubic-bezier(.2,.8,.2,1); }
.jeopardy-surprise::before, .jeopardy-surprise::after { content: "✦"; position: absolute; top: 50%; color: #ffe99f; font-size: 1.35rem; transform: translateY(-50%); }
.jeopardy-surprise::before { left: 14px; }
.jeopardy-surprise::after { right: 14px; }
.jeopardy-surprise strong { display: block; padding-inline: 12px; font-family: "Space Grotesk", sans-serif; font-size: clamp(1rem, 2.7vw, 1.45rem); letter-spacing: .035em; line-height: 1.05; text-transform: uppercase; text-shadow: 0 2px 5px rgba(73,15,54,.28); }
.jeopardy-surprise span { display: block; margin-top: 6px; color: #fff4c7; font-size: .7rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.jeopardy-surprise[hidden] { display: none; }
@keyframes surprise-pop { 0% { opacity: 0; transform: scale(.76) rotate(-3deg); } 70% { transform: scale(1.04) rotate(1deg); } 100% { opacity: 1; transform: scale(1) rotate(-1deg); } }
.clue-dialog h2 { margin: 28px auto; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.4rem, 3vw, 2.25rem); line-height: 1.3; }
.answer-box { margin: 0 0 24px; padding: 17px; border-radius: 12px; background: var(--mint); }
.answer-box small { color: var(--teal); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.answer-box p { margin: 6px 0 0; font-size: 1.1rem; font-weight: 700; }
.clue-actions { display: flex; justify-content: center; gap: 8px; }
.clue-actions button { min-height: 42px; padding: 0 18px; border: 1px solid var(--teal); border-radius: 9px; color: white; background: var(--teal); font-weight: 700; cursor: pointer; }
.clue-actions [data-mark-missed] { color: #b44a37; border-color: #e4b7ae; background: white; }

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e5eeec;
  --muted: #9cafb3;
  --line: #294047;
  --paper: #081116;
  --teal: #69d1c6;
  --deep-teal: #3db5ab;
  --mint: #15332f;
  --orange: #ff956e;
}
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 88% 4%, rgba(48, 158, 145, .12), transparent 28rem),
    linear-gradient(180deg, #081116 0%, #0b151a 100%);
}
html[data-theme="dark"] .lab-header { border-bottom-color: rgba(178, 216, 211, .1); background: rgba(8, 17, 22, .9); }
html[data-theme="dark"] .lab-tabs { background: #111f24; }
html[data-theme="dark"] .lab-tab { color: #a5b5b8; }
html[data-theme="dark"] .lab-tab.active { color: #061311; background: var(--teal); box-shadow: 0 5px 18px rgba(39, 181, 170, .16); }
html[data-theme="dark"] .theme-toggle { background: #111f24; }
html[data-theme="dark"] .back-link { color: var(--teal); }
html[data-theme="dark"] .quick-quiz { border-color: #294249; background: rgba(14, 27, 33, .88); box-shadow: 0 18px 45px rgba(0, 0, 0, .2); }
html[data-theme="dark"] .quick-quiz p strong { color: var(--teal); }
html[data-theme="dark"] .quiz-actions button,
html[data-theme="dark"] .score-card button { border-color: #355158; color: var(--teal); background: #132329; }
html[data-theme="dark"] .quiz-actions span.correct { color: #78d7a9; }
html[data-theme="dark"] .quiz-actions span.wrong { color: #ff9b88; }
html[data-theme="dark"] .tube-wall { scrollbar-color: #3d5b61 transparent; }
html[data-theme="dark"] .tube-card { border-color: #293d43; background: rgba(14, 26, 32, .94); }
html[data-theme="dark"] .tube-card:hover,
html[data-theme="dark"] .tube-card.selected { box-shadow: 0 16px 38px rgba(0, 0, 0, .34); }
html[data-theme="dark"] .tube-title { color: #c9d7d7; }
html[data-theme="dark"] .tube-illustration { filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .35)); }
html[data-theme="dark"] .tube-illustration.photo-real { filter: drop-shadow(4px 10px 7px rgba(0, 0, 0, .48)); }
html[data-theme="dark"] .tube-tests { border-top-color: #263a40; }
html[data-theme="dark"] .tube-tests span { color: color-mix(in srgb, var(--tube) 52%, #e2efed); background: color-mix(in srgb, var(--tube) 20%, #111e24); }
html[data-theme="dark"] .tube-tests .ice-required { border-color: rgba(96, 184, 227, .34); color: #a8dcf5; background: #102b38; }
html[data-theme="dark"] .training-note,
html[data-theme="dark"] .score-card { background: #0f1d23; }
html[data-theme="dark"] .jeopardy-panel { background: radial-gradient(circle at 20% 0%, rgba(34, 163, 151, .1), transparent 35rem); }
html[data-theme="dark"] .jeopardy-clue { border-color: #2a4248; color: var(--teal); background: #101e24; }
html[data-theme="dark"] .jeopardy-clue.used { color: #6f8083; background: #17252a; }
html[data-theme="dark"] .clue-dialog { background: #0e1b21; box-shadow: 0 30px 100px rgba(0, 0, 0, .58); }
html[data-theme="dark"] .modal-close { color: #a7b7ba; }
html[data-theme="dark"] .answer-box { background: #15332f; }
html[data-theme="dark"] .clue-actions [data-mark-missed] { color: #ffab98; border-color: #71443c; background: #1c2528; }

@media (max-width: 800px) {
  .lab-header { grid-template-columns: 1fr auto; padding-inline: 16px; }
  .lab-tabs { position: fixed; right: 14px; bottom: 14px; left: 14px; z-index: 30; justify-content: center; box-shadow: 0 12px 35px rgba(10,50,52,.2); }
  .lab-tab { flex: 1; }
  .header-actions { grid-column: 2; gap: 9px; }
  .theme-toggle { width: 40px; padding: 0; justify-content: center; }
  .theme-toggle [data-theme-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .back-link { font-size: .72rem; }
  .lab-intro, .game-heading { grid-template-columns: 1fr; align-items: start; }
  .quick-quiz, .score-card { justify-self: stretch; }
  .tube-wall { grid-template-columns: repeat(12, 112px); }
  .jeopardy-board { grid-template-columns: repeat(6, 118px); overflow-x: auto; padding-bottom: 18px; }
  .tab-panel { padding-top: 44px; padding-bottom: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
  .jeopardy-surprise { animation: none; }
}