.dex-device{container-type:inline-size;width:100%;max-width:520px;margin:auto;color:#173747;font-family:Arial,Helvetica,sans-serif;filter:drop-shadow(0 15px 13px #123b4b28)}
.dex-upper-shell{position:relative;z-index:2;border:2px solid #0d3038;border-radius:7cqw;background:linear-gradient(135deg,#246a80,#175c75 62%,#123b4b);padding:0 2.5cqw;box-shadow:inset 0 3px 0 #ffffff25}
.dex-hardware-header{height:17cqw;min-height:67px;display:flex;align-items:center;justify-content:space-between;padding:0 1cqw;gap:12px}.dex-scanner{display:flex;align-items:center;gap:1.4cqw}.dex-lens{width:13cqw;height:13cqw;min-width:49px;min-height:49px;border:2px solid #fff6e8;border-radius:50%;padding:3px;background:#12333e;box-shadow:0 0 0 1px #c4d9d560}.dex-lens i{display:block;position:relative;width:100%;height:100%;border:1px solid #78909466;border-radius:50%;background:radial-gradient(circle at 40% 36%,#274c57,#122f39 75%)}.dex-lens i:before{content:"";position:absolute;left:15%;top:19%;width:50%;height:19%;border-radius:50%;background:radial-gradient(ellipse closest-side,rgba(255,255,255,.62) 0%,rgba(255,255,255,.36) 28%,rgba(255,255,255,.12) 60%,rgba(255,255,255,0) 100%);transform:rotate(-40deg)}.dex-lens i:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 70% 76%,rgba(222,250,243,.14) 0%,rgba(222,250,243,.06) 12%,rgba(222,250,243,0) 28%)}.dex-status-light{width:7px;height:7px;border:1px solid #0d3038;border-radius:50%;background:#3ba0b7}.dex-status-light.amber{background:#f1b56b}.dex-badges{display:flex;gap:1.6cqw}.dex-badge{display:grid;place-items:center;width:9.5cqw;height:9.5cqw;min-width:38px;min-height:38px;border:2px solid;border-radius:50%;padding:7px;cursor:pointer;box-shadow:inset 0 2px 2px #ffffff40,0 2px 4px #07161c55;color:#101a1d;transition:box-shadow .15s,transform .15s}.dex-badge svg,.dex-badge img{display:block;width:100%;height:100%;object-fit:contain}.dex-badge.freshwater{background:#67c7e3;border-color:#187b9a}.dex-badge.predator{background:#b63a32;border-color:#7a211d}.dex-badge.vegetation{background:#76b86b;border-color:#32633b}.dex-badge:hover{transform:translateY(-2px)}.dex-badge[aria-pressed=true]{box-shadow:0 0 0 3px #fff6e8,0 0 14px #fff6e870}.dex-badge:focus-visible{outline:3px solid #f1b56b;outline-offset:4px}
.dex-reference-screen{position:relative;height:52cqw;min-height:180px;border:2px solid #d1e0de;border-radius:4cqw;background:linear-gradient(135deg,#fffbf3,#fff6e8 65%,#fff1df);overflow:hidden;box-shadow:inset 0 0 0 2px #0d303808}.dex-fish-halo{position:absolute;left:7%;right:7%;top:17%;height:59%;border:1px solid #3ba0b71a;border-radius:999px;background:#3ba0b710}.dex-reference-fish,.dex-fish-silhouette{position:absolute;width:94%;height:80%;left:3%;top:6.5%;object-fit:contain;transform:translateY(.48828125%)}.dex-species-meta{position:absolute;bottom:0;left:4%;right:4%;border-top:1px solid #cbdad7;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:17%;padding:8px 0;font-size:clamp(.75rem,3.2cqw,1rem)}.dex-species-meta strong{letter-spacing:.06em;color:#2f7487}.dex-species-meta em{color:#52676b;text-align:right}.dex-hardware-rail{height:9cqw;min-height:34px;display:flex;align-items:center;gap:5%;padding:0 2%}.dex-hardware-rail>span{display:block;flex:1;height:4px;border-radius:4px;background:#3ba0b7}.dex-hardware-rail svg{width:26px;height:26px;color:#789094}
.dex-lower-shell{margin:-14px 2% 0;padding:22px 2.5% 11px;background:#123b4b;border:2px solid #0d3038;border-radius:0 0 6cqw 6cqw}.dex-readout-screen{position:relative;min-height:245px;padding:18px 18px 56px;border:2px solid #d1e0de;border-radius:4cqw;background:#fff6e8}.dex-readout-screen h3{font-size:1.25rem;line-height:1.3;font-weight:800;letter-spacing:-.02em;margin:0 0 18px}.dex-readout-screen p{font-size:1rem;line-height:1.5;color:#465b60;margin:0}.dex-drawer-grip{display:block;width:17%;height:4px;border-radius:3px;background:#78909499;margin:10px auto 0}.dex-preview-note{font-size:.875rem;text-align:center;margin:22px auto 0;max-width:440px;line-height:1.6;opacity:.8}.reeldex-intro .reeldex-anchor{top:auto;bottom:55px;left:35%}

/* One reserved device footprint prevents the drawer reveal moving the page. */
.dex-fish-silhouette,.dex-scan-line{display:none}.dex-reveal-status{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;margin-top:20px;text-align:center;font-size:1rem;font-weight:700;color:#2f7487}.dex-status-symbol{display:none}.dex-reveal-status.is-complete .dex-status-symbol{display:inline-grid;place-items:center;width:25px;height:25px;flex-shrink:0;border:1px solid #2f7487;border-radius:50%}.dex-animated .dex-reference-fish{opacity:var(--reveal-color)}.dex-animated .dex-fish-silhouette{display:block;filter:brightness(0) saturate(100%);opacity:calc(.8 * (1 - var(--reveal-color)) * var(--entry-fishOpacity))}.dex-animated .dex-scan-line{display:block;position:absolute;z-index:3;top:15.5%;bottom:16.5%;left:calc(6% + 88% * var(--reveal-scan));width:2px;background:#fff8d9;box-shadow:0 0 5px 2px #f1b56b,0 0 18px 5px #3ba0b788;opacity:0}.dex-animated[data-reveal=scanning] .dex-scan-line{opacity:1}.dex-animated .dex-lower-shell{transform:translateY(calc(-92% * (1 - var(--reveal-drawer))));opacity:var(--reveal-drawer);will-change:transform}.dex-animated .dex-readout-screen{opacity:var(--reveal-detail)}.dex-animated .dex-species-meta{opacity:var(--reveal-color)}.dex-animated .dex-badge:disabled{cursor:default;transform:none}.dex-animated .dex-hardware-rail>span{background:linear-gradient(to right,#3ba0b7 calc(100% * var(--reveal-progress)),#46747b calc(100% * var(--reveal-progress)))}.dex-animated[data-reveal=scanning] .dex-lens i{background:radial-gradient(circle at 40% 36%,#9ee6e4,#3ba0b7 40%,#12333e 85%);box-shadow:0 0 14px #3ba0b780}.dex-animated[data-reveal=identified] .dex-fish-halo{background:#f1b56b22;border-color:#f1b56b60}.dex-animated[data-reveal=complete] .dex-lower-shell{will-change:auto}.dex-animated[data-reveal=waiting] .dex-hardware-rail svg,.dex-animated[data-reveal=scanning] .dex-hardware-rail svg{opacity:.35}

/* FirstSpeciesDiscoveryScreen's 1600 ms entry announcement, on the reveal clock. */
.dex-entry-announcement{display:none}.dex-animated .dex-entry-announcement{display:grid;place-items:center;position:absolute;inset:0;z-index:5;pointer-events:none;opacity:var(--entry-opacity);transform:translateY(calc(var(--entry-y) * 1px))}.dex-entry-frame{position:relative;width:74%;height:clamp(65px,20.5cqw,106px);display:grid;place-items:center;opacity:var(--entry-frameOpacity);transform:scale(var(--entry-frameX),var(--entry-frameY))}.dex-entry-corner{position:absolute;width:10.45%;height:26.83%;border:0 solid #175c75d1}.dex-entry-corner.top-left{top:0;left:0;border-top-width:2px;border-left-width:2px;border-top-left-radius:5px}.dex-entry-corner.top-right{top:0;right:0;border-top-width:2px;border-right-width:2px;border-top-right-radius:5px}.dex-entry-corner.bottom-left{bottom:0;left:0;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:5px}.dex-entry-corner.bottom-right{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:5px}.dex-entry-ring{position:absolute;width:80.6%;height:70.73%;border:2px solid #e98e34b8;border-radius:999px;background:#e98e340e;opacity:var(--entry-ringOpacity);transform:scale(var(--entry-ringScale))}.dex-entry-title{position:relative;z-index:2;font-size:clamp(14px,4.5cqw,23px);font-weight:900;letter-spacing:.1167em;line-height:1.34;color:#2f7487;white-space:nowrap;opacity:var(--entry-textOpacity);transform:scale(var(--entry-textScale))}.dex-entry-title>span{color:#eb7729}.dex-entry-line{position:absolute;z-index:3;width:61.2%;height:2px;border-radius:999px;background:#3ba0b7;box-shadow:0 0 5px #3ba0b76b;opacity:var(--entry-lineOpacity);transform:scaleX(var(--entry-lineScale))}

/* Collection layout and reveal treatment from FishdexCollectionReveal.tsx. */
.dex-collection{position:absolute;inset:0;padding:12px;background:#fff7e9;border-radius:inherit;opacity:var(--collection-opacity,1);transform:scale(var(--collection-scale,1));display:flex;flex-direction:column;gap:12px}.dex-collection[hidden],.dex-entry-notes[hidden]{display:none}.dex-collection-header{display:flex;justify-content:space-between;align-items:baseline;gap:8px;color:#2f7487}.dex-collection-header>strong{font-size:.875rem;font-weight:900;letter-spacing:.04em}.dex-collection-header>span{font-size:.75rem;font-weight:700;color:#567077}.dex-collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;flex:1;min-height:0}.dex-collection-slot{position:relative;min-width:0;overflow:hidden;border:1px solid #175c7529;border-radius:10px;background:#e3eee970;padding:0}.dex-collection-slot.is-current{border-color:#3ba0b7;background:#67c7e31a;cursor:pointer}.dex-collection-slot:disabled{cursor:default}.dex-slot-number{position:absolute;z-index:3;top:5px;left:6px;font-size:.75rem;font-weight:800;color:#567077;letter-spacing:.03em}.dex-slot-fish{position:absolute;left:4%;right:4%;top:23px;bottom:5px}.dex-slot-fish>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}.dex-slot-silhouette{filter:brightness(0) saturate(100%) invert(19%) sepia(20%) saturate(1480%) hue-rotate(151deg) brightness(90%) contrast(94%)}.dex-slot-color{clip-path:inset(calc(100% * (1 - var(--collection-fill,1))) 0 0)}.dex-slot-glow{position:absolute;inset:0;border:3px solid #f1b56b;border-radius:inherit;background:#ffb24d29;opacity:var(--collection-glow,.2)}.dex-slot-check{position:absolute;z-index:4;right:5px;top:5px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#f1b56b;color:#175c75;font-weight:900;font-size:16px;opacity:var(--collection-markOpacity,1);transform:scale(var(--collection-markScale,1))}.reeldex-intro{padding-bottom:75px}@media(max-width:700px){.dex-collection{padding:10px;gap:10px}.dex-collection-grid{gap:6px}}