/* Illustrated worlds, real different controls. No scenery covers a target. */
.sr-only { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0; }
.rule-example > svg { width:100%;height:100%;padding:3px; }
.campaign-location { display:grid;gap:5px;margin:10px 0 7px;padding:11px 12px;border-radius:12px;border-left:3px solid #c7a2ed;background:#181021;background-size:cover;background-position:50% 40%; }
.campaign-location span { font-size:12px;font-weight:900;color:#eee3fa; }
.campaign-location small { font-size:10px;line-height:1.4;color:#cebadf; }
.campaign-chapter { padding:16px 3px 4px;display:grid;gap:4px; }
.campaign-chapter:first-child { padding-top:2px; }
.campaign-chapter strong { font:600 19px var(--font-display);color:#e4caff; }
.campaign-chapter small { color:#baa7cb;font-size:11px; }
.levels-list .level-option { min-height:72px;grid-template-columns:28px minmax(0,1fr) 52px;gap:7px;padding:10px 8px; }
.levels-list .level-option > div { min-width:0; }
.levels-list .level-option strong { overflow-wrap:anywhere; }
.levels-list .level-option b { min-width:0; }
#levelsDialog[open] { display:flex;flex-direction:column;height:min(92dvh,850px);overflow:hidden; }
#levelsDialog > .modal-kicker,#levelsDialog > h2,#levelsDialog > .modal-note { flex-shrink:0; }
#levelsDialog > .modal-kicker { padding-right:36px; }
#levelsDialog > h2 { margin-bottom:12px;padding-right:32px; }
#levelsDialog > .modal-note { margin-bottom:10px;font-size:12px; }
#levelsDialog .levels-list { flex:1;min-height:0;grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;align-content:start;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;padding:2px 3px 7px; }
.level-option[data-selected="true"] { border-color:#caf477;background:#a2d74015; }
.level-option[data-mode="chase"] > span { color:#f0c18a; }
.level-option[data-mode="sweep"] > span { color:#d5b0fb; }
.level-option[data-mode="wagon"] > span { color:#b7ea62; }
.level-option[data-mode="switch"] > span { color:#afc9ff; }
.level-option[data-mode="memory"] > span,.level-option[data-mode="search"] > span { color:#e7addc; }
.level-option:disabled > span { color:#9d8cab; }
.scene-image { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;z-index:0; }
.scene-caption { position:absolute;inset:7px 8px auto;z-index:8;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none; }
.scene-caption > span { padding:8px 10px;background:#180c29d9;border:1px solid #cbadf03b;border-radius:11px;color:#e1cdef;font-size:11px;font-weight:800;box-shadow:0 3px 12px #05010955; }
.scene-caption button { width:44px;height:44px;color:#dac9e8;background:#180c29d9;border:1px solid #957aa4;border-radius:13px;font-weight:900;pointer-events:auto; }
.arena:not([data-mode="burrow"]) { display:block;padding:0;background:#191027; }
.arena:not([data-mode="burrow"]) .fog { opacity:.09;pointer-events:none; }
.arena:not([data-mode="burrow"]) .hole { position:absolute;left:50%;top:60%;width:clamp(88px,27vw,145px);height:auto;aspect-ratio:1;transform:translate(-50%,-50%);border:0;border-radius:0;background:none;box-shadow:none;z-index:4; }
.arena:not([data-mode="burrow"]) .hole:not(.active):not(.caught):not(.escaping) { visibility:hidden;pointer-events:none; }
.arena:not([data-mode="burrow"]) .hole::before,.arena:not([data-mode="burrow"]) .hole::after,.arena:not([data-mode="burrow"]) .hole-rim { display:none; }
.arena:not([data-mode="burrow"]) .critter-slot { overflow:visible;display:grid;place-items:center;transform:scaleX(var(--facing,1)); }
.arena:not([data-mode="burrow"]) .critter { width:100%; }
.arena:not([data-mode="burrow"]) .hole.active .critter { animation:scene-arrive 220ms ease-out both; }
.arena:not([data-mode="burrow"]) .hole.active .critter .rig-shadow { opacity:.7; }
.arena:not([data-mode="burrow"]) .hole.active::after { content:"";display:block;position:absolute;bottom:-5%;left:18%;width:64%;height:3px;border-radius:3px;background:#f5d9a6;box-shadow:0 1px 3px #110a18;transform-origin:left;animation:target-clock var(--target-duration) linear forwards; }
.arena:not([data-mode="burrow"]) .hole.caught .critter { animation:scene-caught 390ms ease-out both; }
.arena:not([data-mode="burrow"]) .hole.caught.bad-hit .critter { animation:scene-taunt 650ms ease-out both; }
.arena:not([data-mode="burrow"]) .hole.escaping .critter { animation:scene-exit 210ms ease-in both; }
.arena[data-mode="wagon"] .hole { width:clamp(126px,41vw,220px); }
.arena[data-mode="wagon"] .hole.active .critter { animation:wagon-arrive 260ms cubic-bezier(.2,.7,.4,1) both; }
.arena[data-mode="search"] .hole,.arena[data-mode="memory"] .hole { width:clamp(82px,24vw,140px); }
.arena[data-mode="change"] .hole,.change-cue-mouse { width:clamp(82px,24vw,140px); }
.memory-cue[data-mode="change"] { inset:0;display:block;padding:0;border:0;border-radius:0;background:#181020a6;box-shadow:none; }
.memory-cue[data-mode="change"]>strong,.memory-cue[data-mode="change"]>small { position:absolute;top:14%;left:5%;right:5%;font-size:13px; }.memory-cue[data-mode="change"]>small { top:auto;bottom:3%;max-width:none; }
.memory-cue[data-mode="change"]>#memoryCueArt { position:absolute;inset:0;width:100%;height:100%; }.change-cue-mouse { position:absolute;transform:translate(-50%,-50%);aspect-ratio:1; }
.memory-cue { position:absolute;inset:22% 16% auto;z-index:10;display:grid;justify-items:center;gap:4px;padding:17px;background:#241432ed;border:1px solid #b392cd;border-radius:23px;box-shadow:0 10px 25px #0a061d88;text-align:center;pointer-events:none; }
.memory-cue strong { color:#e3c4ff;font:600 18px var(--font-display); }
.memory-cue > span { width:clamp(100px,30vw,150px);height:clamp(100px,30vw,150px); }
.memory-cue small { max-width:200px;color:#d5bfdc;font-size:10px;line-height:1.4; }
.wagon-actions { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 4px;flex-shrink:0; }
.wagon-actions button { min-height:49px;min-width:0;padding-inline:8px;font-size:13px; }
.wagon-actions button:disabled { opacity:.5;cursor:default;transform:none; }
.broom-cursor { position:absolute;z-index:15;width:58px;height:88px;pointer-events:none;transform:translate(-35%,-75%) rotate(var(--sweep-turn,-15deg));filter:drop-shadow(0 4px 4px #09031288); }
.broom-cursor svg { width:100%;height:100%; }
.rule-changed { position:absolute;z-index:12;left:12%;right:12%;top:36%;text-align:center;background:#211331f2;border:1px solid #d6b776;border-radius:17px;box-shadow:0 6px 25px #0b061980;padding:18px 12px;color:#f2ddb2;font-weight:900;font-size:15px;line-height:1.4;pointer-events:none; }
.hunt-learning { width:min(92vw,420px);padding-top:22px; }
.hunt-learning h2 { margin:7px 0 12px;font-size:29px; }
.hunt-learning .modal-note { margin-bottom:12px;font-size:13px; }
.learn-scene { position:relative;height:176px;background:#20122b;background-size:cover;background-position:50% 58%;border-radius:18px;border:1px solid #73518b;overflow:hidden; }
.learn-scene button { position:absolute;left:calc(50% - 60px);bottom:8px;width:120px;height:120px;padding:0;border:0;background:none;touch-action:none; }
.learn-scene button:disabled { opacity:1; }
.learn-scene .rig-character { width:100%;height:100%; }
.learn-scene .practice-caught { filter:drop-shadow(0 0 9px #c8ef59); }
.learn-choices { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;position:absolute;inset:0 5px 8px;gap:3px; }
.learn-choices button { position:relative;left:auto;bottom:auto;width:100%;height:auto;aspect-ratio:1;min-width:44px;min-height:44px; }
.learn-status { min-height:38px;margin:12px 0;color:#d5e9b6;font-size:12px;line-height:1.5; }
.hunt-learning > .primary-button { width:100%; }
.hunt-learning > .text-button { width:100%;min-height:44px;margin-top:12px; }
.hunt-learning .wagon-actions { margin-bottom:8px; }
@keyframes scene-arrive { from {opacity:0;transform:translateY(12px) scale(.86);filter:brightness(.55)} to {opacity:1;transform:none;filter:none} }
@keyframes wagon-arrive { from {opacity:0;transform:translateX(-60%) scale(.92)} to {opacity:1;transform:none} }
@keyframes scene-caught { 0% {transform:none} 35% {transform:translateY(-18%) rotate(-8deg)} 100% {opacity:0;transform:translateY(-35%) scale(.45) rotate(12deg)} }
@keyframes scene-taunt { 0%,70% {transform:none;opacity:1} 100% {transform:translateX(30%) scale(.85);opacity:0} }
@keyframes scene-exit { to {opacity:0;transform:translateX(30%) scale(.8)} }
@media(max-height:670px) { .scene-caption > span { font-size:9px;padding:6px 8px; }.wagon-actions { margin-top:6px;gap:8px; }.wagon-actions button { min-height:44px;font-size:12px; }.hunt-learning h2 { font-size:25px; }.learn-scene { height:132px; }.learn-scene button { width:98px;height:98px;left:calc(50% - 49px);bottom:3px; } }
@media(max-height:480px) { .scene-caption > span { display:none; }.scene-caption { inset:3px 3px auto auto; }.scene-caption button { width:44px;height:44px; }.wagon-actions { position:absolute;bottom:9px;left:9px;right:9px;z-index:8; }.game-panel[data-mode="wagon"] .arena-wrap { margin-bottom:47px; }.memory-cue { inset:7% 15% auto;padding:8px;grid-template-columns:72px 1fr;grid-template-areas:'art title' 'art note';text-align:left;gap:4px 8px; }.memory-cue strong { grid-area:title;font-size:14px;align-self:end; }.memory-cue > span { grid-area:art;width:72px;height:72px; }.memory-cue small { grid-area:note;font-size:9px;align-self:start; } }
@media(prefers-reduced-motion:reduce) { .arena:not([data-mode="burrow"]) .hole.active .critter { animation:none; }.rule-changed { animation:none; } }

/* Read the actual task before the clock starts. Only unusually short viewports need inner scrolling. */
.hunt-learning[open] { display:flex;flex-direction:column;width:min(94vw,480px);max-height:calc(100dvh - 20px);padding:20px;overflow:hidden; }
.hunt-learning>.modal-kicker { font-size:12px;line-height:1.4;color:#d1b1e9;flex:none; }
.hunt-learning h2 { font-size:24px;line-height:1.2;margin:8px 0 12px;flex:none; }
.learn-body { min-height:0;overflow-y:auto;overscroll-behavior:contain; }
.learn-target { display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #9dc84e70;border-radius:18px;background:#b6f2320a; }
#learnArt { flex:0 0 90px;width:90px;aspect-ratio:1; }
.learn-target small { display:block;font-size:12px;color:#c4e89b;line-height:1.4;margin-bottom:5px; }
#learnRule { display:block;font-size:21px;line-height:1.35;color:#fff5ff; }
#learnText { font-size:16px;line-height:1.5;margin:16px 0 12px;color:#e1d5e9; }
#learnGoal { font-size:13px;line-height:1.45;color:#c8e7a0;margin:0 0 12px; }
.learn-footer { flex:none;display:grid;gap:8px;padding-top:4px; }.learn-footer .primary-button { min-height:54px; }.learn-footer .text-button { min-height:44px;margin:0; }
.play-rule strong { font-size:16px;line-height:1.35; }.play-rule small { font-size:10px; }
@media(max-width:350px) { .hunt-learning[open] { padding:16px; }.hunt-learning h2 { font-size:22px;margin-bottom:10px; }#learnArt { flex-basis:64px;width:64px; }#learnRule { font-size:19px; }#learnText { margin-top:12px; } }
@media(orientation:landscape) and (max-height:500px) { .hunt-learning[open] { width:min(94vw,700px);display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:0 18px; }.hunt-learning>.modal-kicker,.hunt-learning>h2,.learn-body { grid-column:1; }.learn-footer { grid-column:2;grid-row:1/4;align-self:center; }#learnArt { width:64px;flex-basis:64px; }#learnText { margin:10px 0;font-size:16px; }#learnRule { font-size:20px; }.play-rule strong { font-size:14px; } }