.encounter-card{overflow:hidden;border-radius:20px;background:#faf8ef;color:#203f36}.encounter-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:230px;flex-direction:column;gap:12px;background:linear-gradient(#183d2877,#163e32ab),url('/assets/bushland.webp') center 55%/cover;isolation:isolate}.encounter-water{background:linear-gradient(#19535066,#12575ec9),url('/assets/bushland.webp') center/cover}.encounter-coast{background:linear-gradient(#72bbc5,#2e687c)}.encounter-kicker{font:700 9px/1.4 system-ui;letter-spacing:2px;color:#fcf4d9;text-align:center;padding:12px 25px 0}.encounter-halo{width:154px;height:154px;border:1px solid #e7ce8e99;border-radius:50%;padding:9px;background:#f5f0de22;box-shadow:0 0 0 9px #e9d79d16,0 15px 40px #102a3a55}.encounter-halo .racer-art{display:flex;width:100%;height:100%;border-radius:50%;overflow:hidden;align-items:center;justify-content:center;background-color:#f1eddc;background-repeat:no-repeat;font-size:76px;line-height:1;background-image:none}.encounter-rank{padding:5px 15px;border:1px solid #dacb9d66;border-radius:30px;color:#fff3d3;font:600 11px system-ui;margin-bottom:15px;background:#173e3288}.encounter-body{padding:24px 28px 20px;text-align:center}.encounter-body h2{font:32px/1.1 Georgia,serif;margin:0 0 12px}.encounter-instruction{font:14px/1.5 system-ui;margin:6px 0 12px}.encounter-body .capture-hearts{color:#9c7837;font-size:25px;margin:8px 0}.encounter-body .capture-track{height:32px;position:relative;border:1px solid #b7c3a7;background:#e2e8d7;border-radius:18px;overflow:hidden;margin:12px 0}.encounter-body .capture-track span{position:absolute;top:0;bottom:0;background:linear-gradient(#e6cd89,#c49b4d)}.encounter-body .capture-track i{position:absolute;top:3px;bottom:3px;width:9px;margin-left:-4px;border-radius:9px;background:#173f34;box-shadow:0 0 0 2px #fff9df}.encounter-body #capture-status{font:12px/1.5 system-ui;min-height:36px;margin:8px 0}.encounter-body button,.encounter-body a{display:block;width:100%;min-height:46px;box-sizing:border-box;margin:9px 0;text-decoration:none;border-radius:10px;padding:13px;font:650 14px system-ui;cursor:pointer}.encounter-body .primary{background:#244e39;border:1px solid #173e32;color:#fff9e7}.encounter-body .secondary{background:#ecefdf;border:1px solid #c8d1b7;color:#244e39}.encounter-body [hidden]{display:none!important}.encounter-safety{font:11px/1.6 system-ui;color:#69715e;margin:14px 0 0}.encounter-earned .encounter-halo{box-shadow:0 0 0 12px #dfc87922,0 0 60px #dfbd6c66}.encounter-preview{max-width:470px;margin:25px auto;padding:12px}.preview-head{font:14px/1.6 system-ui;color:#274b39;margin:15px 0}.preview-head a{color:inherit}.preview-head label{display:block}.preview-head select{width:100%;min-height:44px;margin:8px 0;border:1px solid #bcc9af;padding:10px;background:#fbf8ed;border-radius:10px}.preview-body{background:#f0f0e6;margin:0}#encounter:has(.encounter-card){padding:0;max-width:470px}#encounter:has(.encounter-card)>.close-dialog{z-index:4}@media(max-width:600px){.encounter-art{min-height:180px;gap:8px}.encounter-halo{height:115px;width:115px}.encounter-body{padding:18px}.encounter-body h2{font-size:27px}.encounter-body .capture-hearts{font-size:22px}.encounter-halo .racer-art{font-size:58px}.encounter-body button{min-height:48px}}@media(prefers-reduced-motion:reduce){.encounter-card *{animation:none!important;transition:none!important}}

#encounter:has(.encounter-card)>.dialog-close{z-index:4;background:#f8f4e8;color:#244b3b}.preview-head{margin:5px 0 16px}.preview-head h1{font-size:25px;margin:12px 0 7px}.preview-head details{font-size:12px;margin:8px 0}.encounter-preview{margin:10px auto}.encounter-preview .encounter-art{min-height:174px}.encounter-preview .encounter-halo{width:108px;height:108px}.encounter-preview .encounter-halo .racer-art{font-size:55px}.encounter-preview .encounter-body{padding:18px}.encounter-preview .encounter-body h2{font-size:27px}

.encounter-body .capture-misses{letter-spacing:.5px}.encounter-body button:focus-visible{outline:3px solid #b3822f;outline-offset:3px}

/* Catching control surface: the visible marker is the source of truth. */
.encounter-card[data-capture-phase] .capture-track{contain:layout paint}
.encounter-card[data-capture-phase] #capture-light{transition:none;will-change:left}
.encounter-card[data-capture-phase] #observe-focus{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.encounter-card[data-capture-phase] .capture-controls #capture-mode{min-height:44px!important;padding:10px;font-size:12px}
.encounter-card[data-capture-phase] .capture-controls #capture-mode[aria-pressed="true"]{background:#e4edda;border:1px solid #a7b88b;color:#244e39}
.encounter-card[data-capture-phase="ready"] #capture-light,.encounter-card[data-capture-phase="paused"] #capture-light{opacity:.65}
.encounter-card[data-capture-phase="ready"] .capture-presence,.encounter-card[data-capture-phase="paused"] .capture-presence{background:#f4e6bb;color:#5e491f}
.encounter-card[data-capture-phase="running"][data-in-zone="true"] #capture-light{background:#42683c;box-shadow:0 0 0 3px #fff8da,0 0 18px #e2ba60}
.encounter-card[data-capture-phase] .capture-last-tap{position:absolute;z-index:2;top:0;bottom:0;width:3px;transform:translateX(-50%);background:#8f493d;border:1px solid #fff7e6;opacity:.8;pointer-events:none}
.encounter-card[data-capture-phase] .capture-last-tap[data-hit="true"]{background:#376744}
.encounter-card[data-capture-phase] .capture-controls button:focus-visible{outline:3px solid #b3822f;outline-offset:3px}
.encounter-card[data-capture-phase] .capture-controls #observe-focus:active{transform:translateY(2px)}
@media(prefers-reduced-motion:reduce){.encounter-card[data-capture-phase] .capture-controls #observe-focus:active{transform:none}.encounter-card[data-capture-phase] #capture-light{will-change:auto}}
/* A short screen or enlarged text must scroll, never clip the action behind
   the fixed-height premium shell. Keep the art compact, not the touch targets. */
@media(max-width:700px){
 body.preview-body:has(#observe-focus:not([hidden])) .encounter-preview{height:auto!important;min-height:calc(100dvh - 76px - env(safe-area-inset-bottom));padding-bottom:calc(84px + env(safe-area-inset-bottom))!important}
 body.preview-body:has(#observe-focus:not([hidden])) #practice-stage{display:block!important;flex:none!important;min-height:auto!important}
 body.preview-body:has(#observe-focus:not([hidden])) .encounter-card[data-capture-phase] .encounter-body{display:block!important;flex:none!important;min-height:auto!important}
 #encounter:has(.encounter-card[data-capture-phase]){overflow-y:auto;overscroll-behavior:contain}
 #encounter:has(#observe-focus:not([hidden])) .encounter-card[data-capture-phase]{height:auto;min-height:100%;flex-shrink:0}
 #encounter:has(#observe-focus:not([hidden])) .encounter-card[data-capture-phase] .encounter-body{display:block;flex:none;min-height:auto}
}

/* Readable phones: use space and scrolling, never 7px instructions. */
@media(max-width:700px){
 .encounter-card[data-capture-phase] .capture-controls button,.encounter-card[data-capture-phase] #capture-help{scroll-margin-top:16px;scroll-margin-bottom:calc(84px + env(safe-area-inset-bottom))}
 .encounter-card[data-capture-phase] .capture-presence{display:none!important}
 .encounter-card[data-capture-phase] .encounter-body h2{font-size:24px!important;line-height:1.2!important;margin:5px 0!important}
 .encounter-card[data-capture-phase] .encounter-instruction{font-size:14px!important;line-height:1.45!important;margin:6px 0!important}
 .encounter-card[data-capture-phase] .capture-rules{font-size:11px!important;line-height:1.4!important;gap:5px!important;margin:6px 0!important}
 .encounter-card[data-capture-phase] .capture-rules>span{padding:4px 7px!important}
 .encounter-card[data-capture-phase] .capture-round{font-size:12px!important;line-height:1.4!important;padding:5px 9px!important;margin:4px 0!important}
 .encounter-card[data-capture-phase] .capture-progress-row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 12px;min-height:32px;margin:4px 0}
 .encounter-card[data-capture-phase] .capture-hearts{font-size:24px!important;line-height:1.2!important;letter-spacing:2px!important;margin:0!important}
 .encounter-card[data-capture-phase] .capture-misses{font-size:12px!important;line-height:1.4!important;letter-spacing:0!important;margin:0!important}
 .encounter-card[data-capture-phase] .capture-legend{font-size:11px!important;line-height:1.4!important;margin:5px 0 0!important}
 .encounter-card[data-capture-phase] .capture-track{height:46px!important;min-height:46px!important;margin:7px 0!important}
 .encounter-card[data-capture-phase] #capture-status{font-size:12px!important;line-height:1.5!important;min-height:36px!important;margin:6px 0!important}
 .encounter-card[data-capture-phase] .capture-controls #observe-focus{font-size:16px!important;min-height:52px!important;padding:12px!important;margin:5px 0!important}
 .encounter-card[data-capture-phase] .capture-controls #capture-mode{font-size:14px!important;line-height:1.4!important;margin:5px 0!important}
 .encounter-card[data-capture-phase] #capture-help:not([hidden]){display:block!important;font-size:12px!important;line-height:1.5!important;min-height:44px!important;padding:10px!important;margin:4px 0!important}
 .encounter-card[data-capture-phase] .encounter-safety{font-size:11px!important;line-height:1.5!important;margin:8px 0!important}
}
/* premium.css loads later and uses an ID-heavy :is() branch with !important.
   Match that scope explicitly for the four verified collisions, rather than
   escalating every selector or shrinking the interactive surface. */
@media(max-width:700px){
 :is(body.preview-body,#encounter):has(#observe-focus:not([hidden])) .encounter-preview:has(.encounter-card[data-capture-phase]){padding:6px 10px calc(84px + env(safe-area-inset-bottom))!important}
 :is(body.preview-body,#encounter):has(#observe-focus:not([hidden])) .encounter-card[data-capture-phase] #capture-instruction{font-size:14px!important;line-height:1.45!important;margin:6px 0!important}
 :is(body.preview-body,#encounter):has(#observe-focus:not([hidden])) .encounter-card[data-capture-phase] #observe-focus{font-size:16px!important;min-height:52px!important;padding:12px!important;margin:5px 0!important}
 :is(body.preview-body,#encounter):has(#observe-focus:not([hidden])) .encounter-card[data-capture-phase] #capture-misses{font-size:12px!important;line-height:1.4!important;margin:0!important}
}

/* Escape feedback is visual only. The result and next action stay visible. */
.encounter-card[data-result="escaped"][data-escape-motion] .encounter-halo{position:absolute;top:10px;width:90px;height:90px;pointer-events:none;animation:companion-slip 650ms ease-in forwards}
.encounter-card[data-result="escaped"][data-escape-motion="bolt"] .encounter-halo{animation-name:companion-bolt}
.encounter-card[data-result="escaped"][data-escape-motion="fly"] .encounter-halo{animation-name:companion-fly}
@keyframes companion-bolt{to{transform:translateX(140px) scale(.8);opacity:0}}
@keyframes companion-fly{to{transform:translate(90px,-90px) scale(.55);opacity:0}}
@keyframes companion-slip{to{transform:translateY(25px) scale(.8);opacity:0}}
@media(prefers-reduced-motion:reduce){.encounter-card[data-result="escaped"][data-escape-motion] .encounter-halo{animation:none;opacity:0}}

/* Results retain the same phone-sized dialog after the timing button is hidden. */
#encounter:has(.encounter-card){width:calc(100vw - 20px);max-width:470px;box-sizing:border-box;margin:auto;max-height:calc(100dvh - 20px);overflow-x:hidden;overflow-y:auto}
#encounter .encounter-card,#encounter .encounter-body{box-sizing:border-box;min-width:0;max-width:100%}
#encounter .encounter-body{overflow-wrap:anywhere}
#encounter .encounter-body :is(button,a){max-width:100%;white-space:normal}