.game-nav{display:flex;gap:26px;align-items:center}.game-nav a{font-size:13px;text-decoration:none;color:var(--ink);border-bottom:2px solid transparent;padding:12px 0}.game-nav .current,.game-nav a:hover{border-color:var(--ink)}.game-main{max-width:960px;margin:0 auto;padding:70px 0 45px}.game-eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;color:#ae8746}.game-main h1{font:normal clamp(38px,5vw,64px)/1.13 Georgia,serif;letter-spacing:-.04em;margin:24px 0 18px}.game-main h1 em{color:var(--olive)}.game-intro{color:var(--muted);font-size:15px;margin-bottom:42px}.game-main h2{font:normal 30px Georgia,serif;margin:24px 0}.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.mode-card{background:var(--white);border:1.5px solid var(--stroke);border-radius:12px;min-height:150px;padding:22px;text-align:left;display:flex;flex-direction:column;gap:10px;cursor:pointer;color:var(--ink)}.mode-card.selected{border-color:#247a63;box-shadow:0 0 0 2px #247a6322;background:#f1f6ed}.mode-card strong{font-size:21px}.mode-card small{color:var(--muted);line-height:1.5}.mode-icon{font-size:25px;color:#3a7968}#game-setup{margin-top:35px;padding:24px;background:#fffefa;border:1px solid var(--stroke);border-radius:12px}.setup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.setup-grid label{display:block;font-size:12px;font-weight:700}.setup-grid select{margin-top:9px}.game-hint{font-size:12px;color:var(--muted);line-height:1.6;margin:19px 0}.primary-button{border:0;border-radius:7px;background:#1c5947;color:#fff;font-weight:700;padding:13px 24px;cursor:pointer}.primary-button:disabled{opacity:.45;cursor:not-allowed}.game-topline{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:10px}.game-topline strong{color:var(--ink)}.hearts{display:flex;justify-content:center;gap:9px;margin:16px 0;font-size:32px}.heart-live{color:#ef5b77}.heart-lost{color:#555963}.challenge{max-width:620px;margin:auto;text-align:center}.flag-stage{margin:25px auto 18px;padding:25px;background:#ecede4;border-radius:13px;min-height:250px;display:flex;align-items:center;justify-content:center}.flag-stage img{display:block;max-width:100%;width:auto;height:auto;max-height:260px;object-fit:contain;box-shadow:0 8px 24px #101b1a22}.challenge h2{margin:18px 0 22px}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 24px}.answer-choice{border:1px solid #cdd8cb;border-radius:8px;background:#fff;padding:15px;cursor:pointer;text-align:left;color:var(--ink)}.answer-choice.picked{border-color:#1673bd;background:#e9f2ff}.answer-choice:disabled{cursor:default}.answer-choice.correct{border-color:#2d8b55;background:#e2f4e9}.answer-choice.wrong{border-color:#bd3649;background:#ffe9ec}.dropdown-answer{position:relative;max-width:420px;margin:0 auto 22px;text-align:left}.dropdown-answer input{border:1px solid #c6d5c8;background:white;border-radius:7px;width:100%;padding:14px}.answer-list{position:relative;max-height:190px;overflow:auto;border:1px solid var(--stroke);border-radius:6px;background:#fff;margin:4px 0 0;padding:3px;list-style:none}.answer-list li button{display:block;width:100%;border:0;background:white;color:var(--ink);padding:10px;cursor:pointer;text-align:left}.answer-list li button:hover,.answer-list li button:focus{background:#eff3ea}.selected-answer{font-size:12px;color:var(--muted);margin:8px 0}#feedback{border-radius:8px;background:#eff1e9;padding:18px;margin:20px 0;line-height:1.7}#feedback.correct-feedback{background:#e5f3e8}#feedback.wrong-feedback{background:#fff0ef}#next-question{margin:5px 0 20px}#game-end{text-align:center;padding:55px 0}.end-symbol{font-size:48px;color:#597568}#end-result{font:normal 28px Georgia,serif}#end-meta{color:var(--muted)}.end-actions{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin:25px 0}.end-actions button:not(.primary-button),.secondary-link{border:1px solid #cbd7c8;background:#fffefa;border-radius:7px;padding:12px 20px;color:var(--ink);text-decoration:none;cursor:pointer;font-size:14px}@media(max-width:650px){.game-main{padding:35px 0}.mode-grid,.setup-grid,.answer-grid{grid-template-columns:1fr}.mode-card{min-height:110px}.flag-stage{min-height:190px}.game-nav{gap:12px}.game-nav a{font-size:11px}}
/* v0.20 animated flag gallery background and legible editorial panel */
body{overflow-x:hidden}.wrap{position:relative;isolation:isolate}.game-main{position:relative;z-index:2;background:#f8f7f1;box-shadow:0 0 0 20px #f8f7f1,0 0 48px 30px #f8f7f1;padding:42px 28px 60px;max-width:850px;min-height:620px;border-radius:8px;margin-top:34px}.flag-marquee{position:absolute;left:50%;transform:translateX(-50%);top:112px;width:100vw;overflow:hidden;z-index:0;pointer-events:none;display:flex;flex-direction:column;gap:19px;mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 91%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 91%,transparent)}.marquee-row{display:flex;width:max-content;gap:22px;will-change:transform;animation:flag-glide var(--marquee-duration,75s) linear infinite}.marquee-row.reverse{animation-name:flag-glide-reverse}.marquee-tile{flex:none;width:145px;height:96px;background:transparent;border:0;box-shadow:none;display:flex;align-items:center;justify-content:center;padding:0;transform:rotate(var(--tile-tilt,0deg));overflow:visible}.marquee-tile img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 5px 5px #16362b1d)}.marquee-tile .adam-flag{background:#0751b5;color:white;width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-weight:800;font-size:19px;letter-spacing:.04em;transform:skew(-2deg)}@keyframes flag-glide{from{transform:translateX(0)}to{transform:translateX(-50%)}}@keyframes flag-glide-reverse{from{transform:translateX(-50%)}to{transform:translateX(0)}}.mini-adam-flag{display:inline-flex;align-items:center;background:#0951b2;color:white;padding:7px 11px;transform:rotate(-5deg);font-weight:800;font-size:11px;letter-spacing:.06em;border-radius:3px;margin-right:10px;box-shadow:0 3px 7px #102e4b22}.game-eyebrow{display:flex;align-items:center}.game-main h1{margin-top:18px}#game-setup{box-shadow:0 10px 28px #203f3310}.mode-card:hover{transform:translateY(-2px);border-color:#75aa90;box-shadow:0 9px 22px #203f3312}.mode-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.primary-button:hover:not(:disabled){background:#124534;transform:translateY(-1px)}.primary-button{transition:background .2s,transform .2s}
@media(max-width:650px){.game-main{padding:28px 16px 42px;box-shadow:0 0 0 12px #f8f7f1,0 0 22px 24px #f8f7f1;margin-top:25px}.flag-marquee{top:90px;gap:13px}.marquee-tile{width:110px;height:73px;padding:8px}.mini-adam-flag{font-size:9px;padding:5px 7px}}
@media(prefers-reduced-motion:reduce){.marquee-row{animation:none!important}.mode-card,.primary-button{transition:none!important;transform:none!important}}

.marquee-segment{display:flex;gap:22px;flex:none;width:max-content}@media(max-width:650px){.marquee-segment{gap:14px}}

/* v0.20.2: relocate ADAM C branding away from the eyebrow sentence */
.adam-top{position:relative;z-index:3;display:flex;justify-content:center;margin:20px auto -24px}.adam-signature{display:inline-block;background:#0951b2;color:#fff;font-weight:800;font-size:12px;letter-spacing:.06em;padding:9px 14px;border-radius:3px;transform:rotate(-4deg);box-shadow:0 4px 12px #102e4b22}.game-footer{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:18px}.game-footer .adam-signature{transform:rotate(3deg)}.game-eyebrow{display:block}

/* Smooth quiz-image handoff: previous image is hidden until next SVG has decoded. */
.flag-stage.flag-loading{position:relative;min-height:250px}.flag-stage.flag-loading::after{content:"Preparing next flag…";font-size:13px;font-weight:600;letter-spacing:.04em;color:#718479;animation:flag-wait-pulse 1.3s ease-in-out infinite}@keyframes flag-wait-pulse{0%,100%{opacity:.55}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.flag-stage.flag-loading::after{animation:none}}

/* Author CSS must honor hidden during image transition. */
.flag-stage img[hidden]{display:none!important}

/* Custom pixel-art survival hearts (not font glyphs) */
.hearts{display:flex;justify-content:center;align-items:center;gap:10px;margin:16px 0 14px;font-size:initial}
.heart-live,.heart-lost{display:inline-flex;align-items:center;justify-content:center;flex:none;width:37px;height:35px}
.pixel-heart-svg{width:100%;height:100%;display:block;shape-rendering:crispEdges;image-rendering:pixelated}
@media(max-width:650px){.heart-live,.heart-lost{width:32px;height:31px}}

/* Distinct block-pixel heart and shared Survival menu emblem */
.pixel-heart-menu{display:inline-flex;width:27px;height:27px;align-items:center}.pixel-heart-menu svg{width:100%;height:100%}.quit-row{display:flex;justify-content:flex-end;margin:4px 0 8px}.quit-game{background:transparent;border:1px solid #d0d7cb;border-radius:7px;padding:8px 13px;color:#6c7d74;font-size:12px;cursor:pointer}.quit-game:hover{background:#fcebec;border-color:#cf8492;color:#a3344a}.quit-game:focus-visible{outline:3px solid #5084a4;outline-offset:2px}

/* Keep the Survival mode emblem proportionate to Classic's diamond icon. */
.mode-card .pixel-heart-menu{width:14px;height:14px;flex:0 0 14px}

/* Survival setup and score presentation */
#count-option[hidden]{display:none!important}.setup-grid:has(#count-option[hidden]){grid-template-columns:repeat(2,minmax(0,1fr))}.end-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:620px;margin:26px auto 32px}.end-stat{padding:15px 8px;border-top:1px solid var(--stroke);display:flex;align-items:center;flex-direction:column;gap:7px}.end-stat strong{font:normal 30px Georgia,serif;color:var(--ink)}.end-stat span{font-size:12px;color:var(--muted)}#end-congrats{font-size:16px;color:#337b64;line-height:1.6;max-width:570px;margin:12px auto}#end-result{font-size:clamp(29px,4vw,44px);margin:20px auto}@media(max-width:650px){.setup-grid:has(#count-option[hidden]){grid-template-columns:1fr}.end-details{gap:6px}.end-stat strong{font-size:25px}.end-stat span{font-size:11px}}

/* Action row aligns Quit to left and main answer action centrally. */
.game-action-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:20px 0}.game-action-row .quit-game{justify-self:start;background:#b72b3e;color:#fff;border:1px solid #b72b3e;font-weight:700;font-size:12px;padding:10px 14px}.game-action-row .quit-game:hover{background:#972135;color:#fff;border-color:#972135}.game-action-main{display:flex;justify-content:center}.game-action-spacer{min-width:0}.answer-list button.keyboard-active{background:#e4f2e9!important;outline:2px solid #2c7866;outline-offset:-2px}@media(max-width:650px){.game-action-row{grid-template-columns:1fr auto 1fr;gap:5px}.game-action-row .quit-game{font-size:11px;padding:9px 8px}.game-action-main .primary-button{padding:11px 12px;font-size:12px}}

/* Grayscale affects only the actual quiz flag, not the eight background ribbons. */
.flag-stage img.quiz-grayscale{filter:grayscale(1)!important;-webkit-filter:grayscale(1)!important}.grayscale-icon{filter:grayscale(1);font-size:22px}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Hold-to-cheat: only the quiz flag changes; colored marquee unaffected. */
.question-heading{display:flex;align-items:center;justify-content:center;position:relative;gap:18px}.question-heading h2{margin:18px 0 22px}.cheat-hold{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-58%);white-space:nowrap;background:#7344bd;color:#fff;border:0;border-radius:7px;padding:10px 13px;font-size:12px;font-weight:700;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}.cheat-hold.is-held{background:#513089}.cheat-hold[hidden]{display:none!important}.flag-stage img.quiz-grayscale.cheat-reveal{filter:grayscale(.9)!important;-webkit-filter:grayscale(.9)!important}@media(max-width:1050px){.cheat-hold{position:static;transform:none}.question-heading{flex-wrap:wrap}}@media(max-width:650px){.cheat-hold{font-size:11px;padding:8px 10px}}

/* Inverted Colors: only the decoded quiz flag receives the inverse filter. */
.flag-stage img.quiz-inverted{filter:invert(1)!important;-webkit-filter:invert(1)!important}.inverted-icon{font-size:22px;color:#576e63}

/* Color inversion explainer modal */
.color-chart-button{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-58%);background:#37706a;color:#fff;border:0;border-radius:7px;padding:10px 16px;white-space:nowrap;cursor:pointer;font-size:12px;font-weight:700}.color-chart-button[hidden],.color-chart-modal[hidden]{display:none!important}.color-chart-modal{position:fixed;inset:0;z-index:100;background:#101a18a8;display:flex;align-items:center;justify-content:center;padding:18px}.color-chart-panel{position:relative;background:#faf9f4;border-radius:16px;padding:26px 30px;max-width:510px;width:100%;max-height:90vh;overflow:auto;text-align:center;box-shadow:0 25px 80px #0005}.color-chart-panel h2{font:normal 30px Georgia,serif;margin:4px 0 10px;color:#204237}.color-chart-panel p{font-size:13px;line-height:1.6;color:#62766c}.chart-close{position:absolute;right:12px;top:8px;border:0;background:transparent;font-size:28px;cursor:pointer;color:#315247}.inverse-wheel{position:relative;width:310px;height:310px;max-width:100%;margin:18px auto 2px;display:flex;align-items:center;justify-content:center}.inverse-wheel:after{content:"RGB INVERT";display:flex;align-items:center;justify-content:center;background:#faf9f4;border:1px solid #d8ded4;border-radius:50%;width:105px;height:105px;font-size:11px;font-weight:800;color:#315247;z-index:2}.wheel-swatch{position:absolute;left:calc(50% - 21px);top:calc(50% - 34px);width:42px;height:68px;transform-origin:center 34px;border-radius:7px;border:2px solid #faf9f4}.bw-example{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.bw-example>div{border:1px solid #d5ded5;border-radius:9px;padding:12px;font-size:13px}.bw-example span{display:block;height:32px;border-radius:4px;margin-bottom:7px;border:1px solid #777}.bw-black{background:linear-gradient(90deg,#000 50%,#fff 50%)}.bw-white{background:linear-gradient(90deg,#fff 50%,#000 50%)}@media(max-width:1050px){.color-chart-button{position:static;transform:none}}@media(max-width:650px){.inverse-wheel{transform:scale(.82);margin:-10px auto -20px}.color-chart-panel{padding:20px}}

/* v0.24: per-question offscreen-downsampled canvas only. */
#pixel-strength-option[hidden]{display:none!important}.setup-grid:has(#pixel-strength-option:not([hidden])){grid-template-columns:repeat(2,minmax(0,1fr))}.flag-stage canvas.quiz-pixelated{display:block;image-rendering:pixelated;max-width:100%;max-height:260px;box-shadow:0 8px 24px #101b1a22}@media(max-width:650px){.setup-grid:has(#pixel-strength-option:not([hidden])){grid-template-columns:1fr}.flag-stage canvas.quiz-pixelated{max-width:100%;height:auto!important}}

/* Zoomed In mode */
#zoom-strength-option[hidden]{display:none!important}.setup-grid:has(#zoom-strength-option:not([hidden])){grid-template-columns:repeat(2,minmax(0,1fr))}.flag-stage canvas.quiz-zoomed{display:block;width:min(432px,100%);height:auto;aspect-ratio:1;object-fit:contain;box-shadow:0 8px 24px #101b1a22}@media(max-width:650px){.setup-grid:has(#zoom-strength-option:not([hidden])){grid-template-columns:1fr}}

/* Visible development warning for experimental Zoomed In mode */
.zoom-construction{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:#ba293b;font-size:11px;font-weight:800;letter-spacing:.075em}.zoom-construction span{font-size:17px;line-height:1}

/* Zoomed In only: understated editor grid and answer-reveal annotation. */
.flag-stage.zoom-grid{background-color:#ece9e0;background-image:linear-gradient(to right,rgba(82,91,81,.085) 1px,transparent 1px),linear-gradient(to bottom,rgba(82,91,81,.085) 1px,transparent 1px);background-size:19px 19px;background-position:center}
.zoom-reveal-frame{position:relative;display:inline-block;max-width:100%;line-height:0;filter:drop-shadow(0 8px 12px #13241d21)}
.zoom-reveal-frame img{display:block;max-width:100%;width:auto;height:auto;max-height:260px;object-fit:contain;box-shadow:none}
.zoom-crop-outline{position:absolute;border:3px dashed #fff;outline:1px solid #163c35;box-shadow:0 0 0 1px #163c3580 inset;pointer-events:none;box-sizing:border-box}
@media(max-width:650px){.zoom-crop-outline{border-width:2px}}

/* Reveal image and crop box share the same explicit, responsive coordinate frame. */
.flag-stage.zoom-grid .zoom-reveal-frame{display:block;position:relative;flex:0 1 auto;width:min(100%,432px);max-height:260px;max-width:100%;line-height:0}
.flag-stage.zoom-grid .zoom-reveal-frame img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:fill;opacity:1!important;visibility:visible!important}
.flag-stage.zoom-grid .zoom-crop-outline{z-index:1}

/* Coat of Arms artwork choices must not appear in other game modes. */
#arms-artwork-option[hidden]{display:none!important}

/* Match the Survival icon row height to Classic. */
#mode-survival .pixel-heart-menu{height:30px;justify-content:flex-start;align-items:center;flex:0 0 30px}
#mode-survival .pixel-heart-menu svg{width:14px;height:14px}

/* Saudi Arabia isolated flag sword: retain white SVG but give it legible green backing in emblem quizzes. */
.flag-stage.saudi-sword-contrast{background:#006c35}
.flag-stage.saudi-sword-contrast img{box-shadow:none}

.ratio-question{width:100%;display:flex;align-items:center;justify-content:center;gap:16px;flex-direction:column;padding:8px 0}
.ratio-pie{width:min(250px,80vw);aspect-ratio:1;border-radius:50%;box-shadow:0 8px 22px #15251c20;flex-shrink:0}
.ratio-legend{display:flex;justify-content:center;gap:8px 14px;flex-wrap:wrap;font-size:12px;font-weight:700}
.ratio-legend-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.ratio-legend-item i{display:inline-block;width:13px;height:13px;border:1px solid #0002;border-radius:3px}
.ratio-question.ratio-answered{flex-direction:row;flex-wrap:wrap;gap:18px}
.ratio-answered .ratio-pie{width:min(195px,38vw)}
.ratio-answered .ratio-legend{width:100%;order:3}
.ratio-reveal-side{display:flex;flex:1 1 190px;align-items:center;justify-content:center;min-width:0}
.ratio-reveal-flag{display:block;max-width:100%;max-height:180px;object-fit:contain;filter:drop-shadow(0 6px 12px #0002)}
@media(max-width:500px){.ratio-answered .ratio-pie{width:min(165px,39vw)}.ratio-reveal-side{flex-basis:135px}.ratio-reveal-flag{max-height:125px}}

/* Informational note shown only beneath Color Ratio question heading. */
.ratio-disclaimer{display:block;font-size:12px;color:var(--muted);line-height:1.5;margin:0 auto 10px;max-width:100%;text-align:center}.ratio-disclaimer[hidden]{display:none}.ratio-disclaimer span{display:block}

/* Muted companion text for the selected Zoomed In challenge. */
.zoom-strength-hint{display:block;margin-top:7px;font-size:11px;line-height:1.4;font-weight:400;color:var(--muted)}

/* Screenshot-friendly game session identity shown in place of the menu intro. */
.active-game-label{display:flex;align-items:center;justify-content:center;text-align:center;gap:10px;flex-wrap:wrap;margin:0 0 34px;color:var(--ink);font-size:19px;line-height:1.45;font-weight:700}
.active-game-label[hidden]{display:none}
.active-game-label .session-mode-icon{display:inline-flex;align-items:center;justify-content:center;font-size:24px;line-height:1;color:#367b66;flex:0 0 auto}
.active-game-label .pixel-heart-svg{width:24px;height:24px}
@media(max-width:650px){.active-game-label{font-size:16px;gap:8px}.active-game-label .session-mode-icon{font-size:21px}}

/* Mode cards are a two-column grid; setup takes the whole row immediately beneath selection. */
.mode-grid > #game-setup{grid-column:1/-1;margin:0 0 6px;min-width:0}
.mode-grid > #game-setup[hidden]{display:none!important}
/* Match home mode title typography, while keeping the centered session heading. */
.active-game-label{font-family:Arial,Helvetica,sans-serif;font-size:21px;font-weight:700}
@media(max-width:650px){.active-game-label{font-size:21px}}


/* Session label uses mode-card typography without the oversized bold weight. */
.active-game-label,.active-game-label strong{font-family:Arial,Helvetica,sans-serif;font-weight:600}
html[data-theme="dark"] .game-main{background:#252a2b;box-shadow:0 0 0 20px #252a2b,0 0 48px 30px #252a2b;color:#e8ece9}
html[data-theme="dark"] .game-main h1{color:#cbd3d0}
html[data-theme="dark"] .game-main h1 em{color:#fff}
html[data-theme="dark"] .game-eyebrow{color:#cba46b}
html[data-theme="dark"] .mode-card,html[data-theme="dark"] #game-setup{background:#353c3e;color:#edf1ed;border-color:#56615f}
html[data-theme="dark"] .mode-card.selected{background:#455750;border-color:#9ccab6;box-shadow:0 0 0 2px #8fc7ab30}
html[data-theme="dark"] .mode-card strong,html[data-theme="dark"] .active-game-label{color:#f4f6f3}
html[data-theme="dark"] .mode-card small,html[data-theme="dark"] .game-hint,html[data-theme="dark"] .game-intro,html[data-theme="dark"] .zoom-strength-hint{color:#b8c3bf}
html[data-theme="dark"] .mode-icon,html[data-theme="dark"] .session-mode-icon{color:#b1e2c9}
html[data-theme="dark"] .zoom-construction{color:#ff8794}
html[data-theme="dark"] .flag-stage{background:#434b4b}
html[data-theme="dark"] .flag-stage.zoom-grid{background-color:#424849}
html[data-theme="dark"] .answer-choice,html[data-theme="dark"] .answer-list,html[data-theme="dark"] .answer-list li button,html[data-theme="dark"] #feedback,html[data-theme="dark"] .color-chart-panel{background:#374040;color:#f3f5f3;border-color:#697370}
html[data-theme="dark"] .answer-choice.picked{background:#3e5967;border-color:#88b6d9}
html[data-theme="dark"] .answer-choice.correct,html[data-theme="dark"] #feedback.correct-feedback{background:#285942;color:#f2fff7}
html[data-theme="dark"] .answer-choice.wrong,html[data-theme="dark"] #feedback.wrong-feedback{background:#663a40;color:#fff1f3}
html[data-theme="dark"] .primary-button{background:#74b49b;color:#142922}
html[data-theme="dark"] .primary-button:disabled{background:#718a80;color:#dbe4df}
html[data-theme="dark"] .dropdown-answer input{color:#f8faf8;background:#303839}
html[data-theme="dark"] .ratio-disclaimer,html[data-theme="dark"] .game-topline{color:#b8c5be}
html[data-theme="dark"] .game-topline strong{color:#f4f5f4}
html[data-theme="dark"] .adam-flag,html[data-theme="dark"] .flag-marquee img{filter:none}


/* Secondary result actions must contrast with the gray page in dark mode. */
html[data-theme="dark"] .end-actions button:not(.primary-button),
html[data-theme="dark"] .end-actions .secondary-link{background:#394847;border:1px solid #80918c;color:#f5faf7}
html[data-theme="dark"] .end-actions button:not(.primary-button):hover,
html[data-theme="dark"] .end-actions .secondary-link:hover{background:#4b5e59;color:#fff}

/* Dark-mode-only refinements: inverted color guide and custom Survival heart. */
html[data-theme="dark"] .color-chart-panel h2{color:#f5f7f5}
html[data-theme="dark"] .color-chart-panel p,html[data-theme="dark"] .color-chart-panel .wheel-note,html[data-theme="dark"] .color-chart-panel .chart-note{color:#c6d1cc}
html[data-theme="dark"] #mode-survival .pixel-heart-menu svg path:first-child{fill:#ace1c8}

/* Mobile: reserve a dedicated animated-flag strip AFTER both navigation rows.
   Unlike the desktop absolute marquee, this participates in document flow. */
@media(max-width:650px){
 .flag-marquee{
  position:relative;
  top:auto;
  left:auto;
  transform:none;
  width:100vw;
  height:112px;
  margin:12px 0 0 calc(50% - 50vw);
  overflow:hidden;
  flex:none;
  gap:0;
  z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%);
 }
 .flag-marquee .marquee-row{height:112px;align-items:center}
 .flag-marquee .marquee-row:not(:first-child){display:none}
 .adam-top{margin:-25px auto 18px}
 .game-main{margin-top:0}
}

/* Compact two-column game-mode cards on phones only.
   Icon and title share the top row; description stays aligned under title. */
@media(max-width:650px){
 .mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .mode-card{
  display:grid;grid-template-columns:20px minmax(0,1fr);
  grid-template-rows:auto 1fr auto;align-content:start;align-items:start;
  column-gap:7px;row-gap:5px;min-height:112px;
  padding:12px 9px;border-radius:10px;
 }
 .mode-card>.mode-icon{grid-column:1;grid-row:1;font-size:19px;line-height:1.1;align-self:center}
 .mode-card>.mode-icon .pixel-heart-svg{width:19px;height:19px}
 .mode-card>strong{grid-column:2;grid-row:1;align-self:center;font-size:15px;line-height:1.2;overflow-wrap:normal}
 .mode-card>small{grid-column:2;grid-row:2;font-size:11px;line-height:1.35}
 .mode-card>.zoom-construction{grid-column:1/-1;grid-row:3;font-size:9px;line-height:1.25;margin-top:3px}
}

/* Mobile-only setup: compact heading and two settings per row. */
@media(max-width:650px){
 #game-setup{padding:14px 13px 17px;margin-top:0}
 #game-setup h2{font-size:23px;line-height:1.18;margin:0 0 15px}
 #game-setup .setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
 #game-setup .setup-grid label{min-width:0;font-size:11px;line-height:1.3}
 #game-setup .setup-grid select{display:block;width:100%;max-width:100%;min-width:0;margin-top:6px;font-size:12px;padding:9px 23px 9px 8px}
 #game-setup .game-hint{margin:12px 0;font-size:11px;line-height:1.4}
 #game-setup .primary-button{padding:11px 17px;font-size:13px}
}

/* All mobile game types, including Survival / Pixelated / Zoomed In,
   share the same two-column setup layout. Override legacy mode rules. */
@media(max-width:650px){
 #game-setup .setup-grid,
 #game-setup .setup-grid:has(#count-option[hidden]),
 #game-setup .setup-grid:has(#pixel-strength-option:not([hidden])),
 #game-setup .setup-grid:has(#zoom-strength-option:not([hidden])){
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
 }
 #game-setup .setup-grid > label[hidden]{display:none!important}
}

/* v0.3.5: keep grayscale reveal within the question heading; responsive theme-aware control. */
.question-heading{position:relative;max-width:100%;padding-inline:10px;flex-wrap:wrap}
.cheat-hold,.cheat-hold.is-held{position:static;left:auto;top:auto;transform:none;white-space:normal;max-width:100%;border:1px solid var(--stroke);background:var(--soft);color:var(--ink);font-weight:600;box-shadow:none}
.cheat-hold.is-held{background:#266d56;color:#fff}
html[data-theme="dark"] .cheat-hold{background:#364846;color:#ecf5f0;border-color:#6e857b}
html[data-theme="dark"] .cheat-hold.is-held{background:#28745b;color:white}
/* Keep animated rows centered on viewport, including at browser zoom levels. */
.flag-marquee{width:100vw;left:50%;right:auto;transform:translateX(-50%)}
.marquee-row{position:relative;left:50%;transform-origin:center center}

/* Keep first animated segment anchored at viewport left; two equal segments loop seamlessly. */
.marquee-row{left:0}