#jumble-stage { width: 100%; min-width: 0; }
#jumble-stage[hidden] { display: none; }
.jumble-picture { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: #eff1f7; }
.jumble-picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: filter .7s, opacity .7s; }
.jumble-picture img:not([src]) { visibility: hidden; }
.jumble-clouds { position: absolute; inset: -20%; background: radial-gradient(ellipse at 20% 70%,#b6cfebaa,transparent 50%), radial-gradient(ellipse at 80% 20%,#efd1aaaa,transparent 45%), repeating-conic-gradient(from 31deg,#d6d9f0 0deg 45deg,#afcbbd 45deg 90deg,#e2b9cf 90deg 150deg,#eef0f7 150deg 190deg); background-size: 100% 100%,100% 100%,80px 95px; filter: blur(11px); transition: opacity .7s; }
.jumble-progress { font-size: .9rem; text-align: center; padding: 6px 0; }
.jumble-progress progress { display: block; width: 100%; height: 14px; accent-color: #778245; }
.jumble-progress p { margin: 4px 0; }
body.picture-jumble-on .anchor-problem-stack { position: relative; }
body.picture-jumble-on #anchor-quiz .anchor-problem-stack #anchor-problem { position: absolute; top: var(--jumble-y,40%); left: var(--jumble-x,50%); width: max-content !important; max-width: 78%; height: auto !important; min-height: 0; margin: 0 !important; font-size: clamp(1.7rem,5vw,2.8rem) !important; color: var(--jumble-color,#29334a); transform: var(--jumble-transform,translate(-50%,-50%)); filter: blur(var(--jumble-blur,0px)); background: transparent; border: 0; box-shadow: none; padding: 4px 10px; z-index: 1; letter-spacing: 1px; line-height: 1.2; }
body.picture-jumble-on #anchor-targets-board, body.picture-jumble-on #anchor-targets-disclosure { display: none !important; }
#jumble-settings { padding: 12px; background: #f4f3fa; border: 1px solid #d9d5ea; border-radius: 10px; }
#jumble-settings label { display: inline-block; max-width: 100%; }
#jumble-settings details > label, #jumble-settings > label:last-of-type { display: block; margin: 10px 0; }
#jumble-settings textarea, #jumble-settings details input:not([type=radio]), #jumble-settings details select { display: block; width: 100%; box-sizing: border-box; }
#jumble-settings input[type=number] { width: 6rem; }
#jumble-settings select { max-width: 100%; }
#jumble-settings fieldset { display: flex; flex-wrap: wrap; gap: 12px; }
.jumble-table-wrap { max-width: 100%; overflow-x: auto; }
.jumble-table-wrap table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.jumble-table-wrap td, .jumble-table-wrap th { padding: 8px; text-align: left; }
.jumble-dialog { width: min(440px,calc(100vw - 48px)); border: 1px solid #d9d5ea; border-radius: 16px; box-sizing: border-box; }
.jumble-dialog::backdrop { background: #2229; }
.jumble-dialog label, .jumble-dialog textarea, .jumble-dialog input { display: block; width: 100%; box-sizing: border-box; }
.jumble-dialog textarea, .jumble-dialog input { margin: 10px 0; font: inherit; padding: 10px; }
.jumble-dialog button { margin: 6px; min-height: 44px; }
body.jumble-settings-open #anchor-worksheet, body.jumble-settings-open #anchor-target-streak, body.jumble-settings-open #anchor-target-fastms, body.jumble-settings-open #anchor-target-percent { display: none; }
body.jumble-settings-open #anchor-target-streak-label, body.jumble-settings-open #anchor-target-fastms-label, body.jumble-settings-open #anchor-target-percent-label { display: none; }
@media (pointer: coarse) { #jumble-settings button, #jumble-settings select, #jumble-settings input:not([type=radio]):not([type=checkbox]) { min-height: 44px; } #jumble-settings input[type=radio], #jumble-settings input[type=checkbox] { min-width: 22px; min-height: 22px; } }
@media (prefers-reduced-motion: reduce) { .jumble-picture img { transition: none; } }

.jumble-picture #anchor-problem { position: absolute; }
@media (pointer: coarse) { #jumble-settings input, #jumble-settings textarea, #jumble-settings select { font-size: 16px; } }

.jumble-picture #anchor-problem[hidden] { display: none !important; }
.jumble-next-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.jumble-next-actions button, #jumble-view { min-height: 44px; }
.jumble-art-dialog { width: min(92vw, 900px); max-height: 94vh; box-sizing: border-box; border: 0; border-radius: 16px; padding: 12px; }
.jumble-art-dialog::backdrop { background: #222b; }
.jumble-art-dialog img { display: block; width: 100%; max-height: 80vh; object-fit: contain; }
.jumble-art-dialog button { display: block; margin: 10px auto 0; min-height: 44px; }

.jumble-inputs { position: relative; text-align: center; }
#jumble-generation:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 0; }
#jumble-generation-time { max-width: 28em; font-size: .85rem; text-align: left; }
.jumble-generation-ring { --generation-angle: 0deg; flex: 0 0 32px; height: 32px; border-radius: 50%; background: conic-gradient(#778245 var(--generation-angle), #dde2ea 0); mask: radial-gradient(transparent 55%, #000 58%); animation: jumble-working 2s linear infinite; }
@keyframes jumble-working { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .jumble-generation-ring { animation: none; } }

body.picture-jumble-waiting .jumble-inputs,
body.picture-jumble-waiting .anchor-entry-row,
body.picture-jumble-waiting #anchor-normal-actions { display: none !important; }