.matchup-picture{display:flex;position:relative;align-items:end;justify-content:center;isolation:isolate;width:100%;height:220px;padding:22px 8px 16px;background-size:cover;background-position:center;overflow:hidden}
.matchup-picture>.animal-cutout{width:48%;height:100%;filter:drop-shadow(0 5px 3px #172b3840)}
.matchup-picture>b{position:absolute;left:50%;top:14%;transform:translateX(-50%) rotate(-8deg);font:800 27px Fredoka,sans-serif;color:#fff4be;text-shadow:2px 3px #244337;z-index:1}
.animal-cutout{display:block;overflow:hidden}
.featured-matchup{display:flex;align-items:center;gap:24px;max-width:800px;margin:24px auto 0;padding:0 24px 0 0;border:3px solid #1f6749;border-radius:22px;background:#e1f0d1;color:#183e2d;overflow:hidden;font:600 clamp(24px,3vw,34px) Fredoka,sans-serif;text-align:left}
.featured-matchup .matchup-picture{width:260px;height:150px;flex-shrink:0}.featured-matchup>svg{width:38px;flex-shrink:0}.hero-buttons{flex-wrap:wrap}
.library-picker{margin:0 0 22px;min-height:62px}.library-card .matchup-picture{height:180px}.library-card h3{font-size:24px;line-height:1.25}.library-card{position:relative}.pick-again{display:flex;margin:22px auto 0}
.animal-selection{position:sticky;top:0;z-index:3;display:flex;gap:12px;align-items:center;justify-content:center;padding:12px;background:#fff9ecf5;border-bottom:2px solid #dccaa0;box-shadow:0 8px 14px #243e3410}
.empty-animal,.chosen-animal{width:190px;height:130px;border:3px dashed #a6bba2;border-radius:20px;display:flex;align-items:center;justify-content:center;background:#eaf0db;color:#42624c;font:600 48px Fredoka,sans-serif;position:relative}
.chosen-animal{border:3px solid #398758;background:#fff;flex-direction:column;gap:2px;font:600 19px Andika,sans-serif;padding:8px}.chosen-animal .animal-cutout{width:100%;height:75px}.chosen-animal>b{position:absolute;top:0;right:9px;font-size:24px}.versus{font:600 26px Fredoka,sans-serif}.matchup-go{height:82px;width:82px;justify-content:center;padding:18px;flex-shrink:0;background:#267f45}.matchup-go svg{width:40px;height:40px}.matchup-go:disabled{opacity:.35}.matchup-go:not(:disabled){box-shadow:0 0 0 5px #b9e28d}
.animal-picker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:22px 0 4px}.animal-pick-card{position:relative;min-width:0}.animal-pick{width:100%;min-height:210px;padding:12px 10px 54px;border:3px solid #d4d9b9;border-radius:22px;background:linear-gradient(#f4f7df,#e0ecd2);color:#183d2e;display:flex;align-items:center;flex-direction:column;gap:5px;font:400 20px Andika,sans-serif;line-height:1.2}.animal-pick .animal-cutout{height:120px;width:100%;pointer-events:none}.animal-pick[aria-pressed=true]{border:4px solid #247e45;background:#ceebaf}.animal-pick:disabled{opacity:.45}.animal-check{display:none;position:absolute;left:12px;top:8px;width:30px;height:30px;border-radius:50%;background:#247e45;color:white;font:600 23px Andika,sans-serif}.animal-pick[aria-pressed=true] .animal-check{display:block}.animal-hear{position:absolute;bottom:8px;left:calc(50% - 24px);width:48px;height:44px;border:0;border-radius:14px;background:#fff9e7;color:#235f42;display:grid;place-items:center}.animal-hear svg{width:24px;height:24px}.animal-pick:focus-visible,.animal-hear:focus-visible,.chosen-animal:focus-visible{outline:4px solid #dd9424;outline-offset:3px}
.attack-options{display:flex;gap:10px;justify-content:center;margin:14px 0;flex-wrap:wrap}.attack-choice{background:#eff3dd;border:3px solid #aac899;border-radius:18px;color:#234b32;min-width:104px;min-height:86px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:500 21px Andika,sans-serif}.attack-choice[aria-pressed=true]{background:#c8e99b;border-color:#39864a}.attack-choice svg{width:45px;height:33px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}.attack-choice:disabled{opacity:.45}.attack-chooser-title{text-align:center;font:600 26px Fredoka,sans-serif;margin:0}.attack-stage .arena-beat{top:83px}
@media(max-width:700px){.animal-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.animal-selection{gap:6px;padding:8px 0}.empty-animal,.chosen-animal{height:110px;width:calc((100% - 90px)/2);font-size:16px}.empty-animal{font-size:36px}.chosen-animal .animal-cutout{height:62px}.versus{font-size:16px}.matchup-go{width:54px;height:64px;padding:10px}.matchup-go svg{width:32px}.animal-pick{font-size:19px;min-height:210px}.featured-matchup{gap:12px;padding-right:12px;font-size:24px}.featured-matchup .matchup-picture{width:44%;height:145px}.featured-matchup>svg{width:26px}.path-card .matchup-picture{height:150px}.library-card .matchup-picture{height:145px}.library-card h3{font-size:21px}.hero-buttons .secondary{font-size:20px}.attack-choice{min-width:88px;min-height:78px;font-size:19px}}
@media(prefers-reduced-motion:reduce){.matchup-go{transition:none}}
.hero>.matchup-picture.hero-image{position:absolute;inset:0;width:100%;height:100%;padding:110px 20px 30px 48%;align-items:center}.hero>.matchup-picture>.animal-cutout{height:75%;width:50%}.hero>.matchup-picture>b{left:75%;top:24%}
@media(max-width:700px){.hero>.matchup-picture.hero-image{top:auto;bottom:0;height:50%;padding:20px 12px 25px}.hero>.matchup-picture>.animal-cutout{height:100%;width:50%}.hero>.matchup-picture>b{left:50%;top:12%}}

.attack-choice[disabled][aria-pressed=true]{opacity:1;cursor:default}.action-replay[hidden]{display:none!important}

/* A short picture shelf gives direct access to the full animal library. */
.story-shelf{max-width:1280px}.shelf-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:0 0 22px}.shelf-heading h1{font:600 clamp(36px,5vw,60px) Fredoka,sans-serif;margin:0;color:#234b35}.shelf-letter{display:flex;align-items:center;gap:10px;border:2px solid #ccdab9;border-radius:18px;background:#f0f5df;padding:8px 14px;min-height:64px;color:#244b35}.shelf-letter span{font:400 17px Andika,sans-serif}.shelf-letter b{font:400 40px Andika,sans-serif;line-height:1}.shelf-letter svg{width:24px;height:24px}.shelf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.shelf-grid .library-card{width:100%;padding:0;overflow:hidden;border:3px solid #b8cba8;border-radius:20px;background:#fffcf0;text-align:center}.shelf-grid .library-card>.matchup-picture,.shelf-grid .library-card>img{display:flex;width:100%;height:178px;object-fit:cover}.shelf-grid .library-card h3{font:400 clamp(20px,2.1vw,28px) Andika,sans-serif;margin:0;padding:12px 10px;line-height:1.2;min-height:78px;display:flex;align-items:center;justify-content:center}.shelf-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin:22px 0}.shelf-actions .secondary{min-height:56px;display:flex;align-items:center;justify-content:center;gap:9px}.shelf-actions svg{width:25px;height:25px}.shelf-actions .pick-again{margin:0}.shelf-actions button:disabled{opacity:.4}.story-groups{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:20px 0}.story-groups button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:100px;min-width:0;border:2px solid #ced9bd;border-radius:15px;background:#f1f5e2;color:#244b35;font:400 16px Andika,sans-serif;padding:8px}.story-groups .animal-cutout,.story-groups img{width:100%;height:58px;object-fit:cover;border-radius:9px}.story-groups button>svg:not(.animal-cutout){width:40px;height:58px}.story-groups button[aria-pressed=true]{background:#d2e9b4;border-color:#3a7c4a;box-shadow:0 0 0 2px #a1c985}.paths-intro .shelf-letter{margin:14px auto 0}.story-groups button:focus-visible,.shelf-letter:focus-visible,.shelf-grid .library-card:focus-visible{outline:4px solid #ca902c;outline-offset:3px}
@media(max-width:700px){.shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.shelf-grid .library-card>.matchup-picture,.shelf-grid .library-card>img{height:135px}.shelf-grid .library-card h3{font-size:21px;min-height:76px;padding:10px 6px}.shelf-heading{gap:8px}.shelf-letter{padding:8px;gap:7px;min-height:58px}.shelf-letter span{font-size:14px}.shelf-letter b{font-size:34px}.story-groups{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.story-groups button{font-size:14px;min-height:100px}.shelf-actions{gap:10px}.shelf-actions .secondary{font-size:18px}.shelf-heading h1{font-size:38px}}