.frog-active{position:relative;cursor:crosshair;}
.frog-layout{position:relative;isolation:isolate}
.frog-dock{position:relative;height:150px;flex-shrink:0;width:100%}
.frog-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.frog-console{position:absolute;right:0;bottom:0;width:67px;height:auto;pointer-events:none;z-index:2;color:#ff454a;font:10px/1.4 "Departure Mono",monospace;text-align:center;text-shadow:0 1px 3px #000}
.frog-readout{display:block;background:#101413;border:1px solid #96383d;padding:3px 0;letter-spacing:.5px}
.frog-meter{display:flex;flex-direction:column-reverse;gap:3px;margin:6px 0 0;padding:5px;background:#0c1113;border:1px solid #687371;box-shadow:3px 3px 0 #0008}
.frog-meter i{display:block;height:5px;background:#392326;border:1px solid #533035}
.frog-meter i.lit{background:#ff474a;border-color:#ff9d8d;box-shadow:0 0 6px #f33a}

/* Retain both grid columns so the image never shifts or changes width. */
.frog-transitions{overflow-x:clip;overflow-anchor:none}
.frog-transitions .live-forecast{max-height:var(--frog-timeline-height);overflow:hidden;transition:max-height .42s ease,padding .42s ease,opacity .3s ease,visibility 0s}
.frog-transitions .image-sidebar,.frog-transitions .pass-details{transition:transform .42s ease,opacity .3s ease,visibility 0s}
.frog-focus .live-forecast{max-height:0;padding-top:0;padding-bottom:0;opacity:0;visibility:hidden;transition:max-height .42s ease,padding .42s ease,opacity .3s ease,visibility 0s .42s}
.frog-focus .image-sidebar{transform:translateX(-100vw)}
.frog-focus .pass-details{transform:translateX(100vw)}
.frog-focus .image-sidebar,.frog-focus .pass-details{opacity:0;visibility:hidden;pointer-events:none;transition:transform .42s ease,opacity .3s ease,visibility 0s .42s}
.frog-layout > .frog-dock{position:absolute;right:0;width:170px}
@media(prefers-reduced-motion:reduce){
 .frog-transitions .live-forecast,.frog-transitions .image-sidebar,.frog-transitions .pass-details{transition:none}
}

.frog-intro{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none;background:#0009;animation:frog-cover-in .42s ease both}
.frog-intro-words{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:"Departure Mono",monospace;font-weight:400;font-size:clamp(28px,5vw,76px);line-height:1.05;letter-spacing:.035em;color:#ff454a;text-shadow:3px 3px #000}
.frog-intro-words span{visibility:hidden}
.frog-intro-words span.visible{visibility:visible}
.frog-intro-words span:nth-child(2){font-size:.65em;color:#e5e2d6;line-height:1.3}
.frog-counter{position:absolute;right:0;width:170px;z-index:2;text-align:center;color:#ff454a;font:14px/1.4 "Departure Mono",monospace;pointer-events:none}
.frog-counter:not([hidden]){display:flex;flex-direction:column;align-items:center}
.frog-counter strong{font:64px/1.1 "Departure Mono",monospace;margin-bottom:8px}
@keyframes frog-cover-in{from{background:#0000}to{background:#0009}}
@media(prefers-reduced-motion:reduce){.frog-intro{animation:none}}

.frog-victory{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:#000b;color:#ff454a;text-align:center;font:clamp(24px,4vw,60px)/1.25 "Departure Mono",monospace;cursor:pointer}

.frog-wave{left:0;right:auto}

.frog-status-dock{position:absolute;left:0;width:170px;height:150px;overflow:hidden;z-index:2;pointer-events:none}

.frog-counter-dock{position:absolute;height:200px;overflow:hidden;z-index:2;pointer-events:none}
.frog-counter-left{left:0}
.frog-counter-right{right:0}
.frog-counter-dock .frog-counter{top:0}

.frog-active [data-pass-image]{filter:brightness(.85)}

.frog-counter-dock .frog-counter{width:96px;right:auto}

.frog-victory-copy{display:flex;flex-direction:column;align-items:center}
.frog-leave{position:relative;margin-top:1.25em}
/* Hang the punctuation so LEAVE's letters share the heading's visual center. */
.frog-period{position:absolute;left:100%;top:0}