.water-stage { --hint-primary: #6faeb1; --hint-secondary: #d8e8e4; min-height: clamp(360px, 36vw, 430px); transition: background .45s var(--ease); }
.water-stage.has-color-hint { background: radial-gradient(circle at 52% 48%, color-mix(in srgb, var(--hint-primary) 25%, transparent), transparent 42%), radial-gradient(circle at 70% 20%, #fff7, transparent 10rem), linear-gradient(155deg, #dff5ef, #c3e7e2); }
[data-theme=dark] .water-stage.has-color-hint { background: radial-gradient(circle at 52% 48%, color-mix(in srgb, var(--hint-primary) 22%, transparent), transparent 42%), radial-gradient(circle at 70% 20%, #c8f4e71b, transparent 10rem), linear-gradient(155deg, #173e45, #1a5157); }
.water-stage::before, .water-stage::after { z-index: 0; pointer-events: none; }
.water-stage .bubble { z-index: 1; pointer-events: none; }
.water-stage .stage-label { z-index: 4; }
.habitat-scene { position: absolute; z-index: 0; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease), background .45s var(--ease); }
.water-stage.has-habitat-hint .habitat-scene { opacity: .9; }
.habitat-ground { position: absolute; left: -5%; right: -5%; bottom: -9%; height: 31%; border-radius: 50% 50% 0 0; background: #b9aa83; box-shadow: inset 0 12px 30px #fff4; }
.habitat-detail { position: absolute; display: block; transform-origin: bottom center; }
.scene-ocean .habitat-scene { background: linear-gradient(112deg, transparent 18%, #fff3 19%, transparent 29%, #fff2 38%, transparent 48%); }
.scene-ocean .habitat-ground { display: none; }
.scene-reef .habitat-ground { background: radial-gradient(circle at 18% 15%, #d77e6b 0 8%, transparent 9%), radial-gradient(circle at 67% 5%, #d9aa58 0 10%, transparent 11%), radial-gradient(circle at 85% 28%, #639a83 0 12%, transparent 13%), #bda879; }
.scene-reef .habitat-detail { bottom: 8%; width: 18px; height: 74px; border-radius: 55% 55% 10px 10px; background: #d67262; box-shadow: 13px 15px 0 -4px #d67262, -12px 25px 0 -5px #d67262; }
.scene-reef .detail-one { left: 8%; transform: rotate(-8deg); }
.scene-reef .detail-two { right: 12%; height: 58px; background: #5f9a7e; box-shadow: 12px 14px 0 -4px #5f9a7e, -10px 22px 0 -5px #5f9a7e; transform: rotate(9deg); }
.scene-reef .detail-three { left: 24%; height: 46px; background: #d7aa57; box-shadow: 10px 12px 0 -4px #d7aa57; }
.scene-river .habitat-scene, .scene-stream .habitat-scene { background: repeating-linear-gradient(0deg, transparent 0 42px, #fff2 43px 45px); }
.scene-river .habitat-ground, .scene-stream .habitat-ground { background: radial-gradient(ellipse at 18% 30%, #7e806d 0 7%, transparent 8%), radial-gradient(ellipse at 74% 18%, #888978 0 6%, transparent 7%), #b5a27a; }
.scene-river .habitat-detail, .scene-stream .habitat-detail, .scene-lake .habitat-detail, .scene-pond .habitat-detail, .scene-swamp .habitat-detail { bottom: 7%; width: 5px; height: 90px; border-radius: 90% 0 0; background: #668464; box-shadow: 12px 8px #668464, 24px -5px #668464; }
.scene-river .detail-one, .scene-stream .detail-one, .scene-lake .detail-one, .scene-pond .detail-one, .scene-swamp .detail-one { left: 5%; transform: rotate(-7deg); }
.scene-river .detail-two, .scene-stream .detail-two, .scene-lake .detail-two, .scene-pond .detail-two, .scene-swamp .detail-two { right: 8%; transform: rotate(8deg); }
.scene-river .detail-three, .scene-stream .detail-three, .scene-lake .detail-three, .scene-pond .detail-three, .scene-swamp .detail-three { display: none; }
.scene-lake .habitat-ground, .scene-pond .habitat-ground { background: radial-gradient(ellipse at 24% 5%, #6b8a62 0 10%, transparent 11%), radial-gradient(ellipse at 78% 12%, #779366 0 8%, transparent 9%), #a68e68; }
.scene-lake .habitat-scene, .scene-pond .habitat-scene { background: radial-gradient(ellipse at 20% 82%, #8bad7b55 0 8%, transparent 9%), radial-gradient(ellipse at 78% 76%, #8bad7b55 0 7%, transparent 8%); }
.scene-estuary .habitat-ground, .scene-coast .habitat-ground { background: radial-gradient(ellipse at 17% 25%, #807b70 0 7%, transparent 8%), radial-gradient(ellipse at 82% 15%, #8e8879 0 8%, transparent 9%), #c4b287; }
.scene-estuary .habitat-scene, .scene-coast .habitat-scene { background: linear-gradient(118deg, transparent 28%, #fff2 29%, transparent 38%); }
.scene-estuary .habitat-detail, .scene-coast .habitat-detail { bottom: 8%; width: 8px; height: 66px; border-radius: 70% 0 0; background: #728468; box-shadow: 16px 8px #728468; }
.scene-estuary .detail-one, .scene-coast .detail-one { left: 7%; transform: rotate(-8deg); }
.scene-estuary .detail-two, .scene-coast .detail-two { right: 8%; transform: rotate(8deg); }
.scene-estuary .detail-three, .scene-coast .detail-three { display: none; }
.scene-bottom .habitat-ground { height: 27%; background: radial-gradient(ellipse at 13% 22%, #73756d 0 8%, transparent 9%), radial-gradient(ellipse at 45% 10%, #8d8878 0 6%, transparent 7%), radial-gradient(ellipse at 83% 18%, #696d68 0 7%, transparent 8%), #b8a67e; }
.scene-bottom .habitat-detail { display: none; }
.scene-deep .habitat-scene { background: radial-gradient(circle at 12% 27%, #79d4ca88 0 2px, transparent 3px), radial-gradient(circle at 82% 34%, #88e0d488 0 2px, transparent 3px), radial-gradient(circle at 68% 76%, #7ac7c188 0 1px, transparent 2px), linear-gradient(#0a3c4cbb, #031f2ccc); }
.scene-deep .habitat-ground { background: #182f38; box-shadow: inset 0 12px 30px #0006; }
.scene-deep .habitat-detail { display: none; }
.scene-swamp .habitat-scene { background: linear-gradient(#506b5355, #294c4455); }
.scene-swamp .habitat-ground { background: #625d43; }
.scene-mangrove .habitat-scene { background: linear-gradient(110deg, transparent 55%, #4f654c44 56% 59%, transparent 60%), linear-gradient(70deg, transparent 25%, #4f654c44 26% 29%, transparent 30%); }
.scene-mangrove .habitat-ground { background: #756548; }
.scene-mangrove .habitat-detail { top: -8%; width: 10px; height: 72%; border-radius: 0 0 50% 50%; background: #4d654c; }
.scene-mangrove .detail-one { left: 8%; transform: rotate(-12deg); }
.scene-mangrove .detail-two { right: 9%; transform: rotate(13deg); }
.scene-mangrove .detail-three { display: none; }
.silhouette-frame { position: absolute; z-index: 3; inset: clamp(34px, 4vw, 52px) clamp(48px, 7vw, 92px) clamp(54px, 5vw, 72px); display: grid; box-sizing: border-box; width: auto; height: auto; min-width: 0; min-height: 0; padding: 0; overflow: hidden; place-items: center; pointer-events: none; filter: drop-shadow(0 16px 12px #17434828); }
.silhouette-frame img, .silhouette-frame svg { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; transition: opacity .35s var(--ease); }
.silhouette-frame.is-color-hint { position: absolute; }
.silhouette-frame.is-color-hint img { opacity: 0; }
.silhouette-frame.is-color-hint svg path { fill: var(--hint-primary); }
.silhouette-frame.is-color-hint::after, .silhouette-frame.is-appearance-hint::before { position: absolute; inset: 0; content: ""; mask: var(--silhouette-mask) center / contain no-repeat; -webkit-mask: var(--silhouette-mask) center / contain no-repeat; }
.silhouette-frame.is-color-hint::after { z-index: 1; background: linear-gradient(145deg, color-mix(in srgb, var(--hint-primary) 88%, white), var(--hint-primary) 56%, var(--hint-secondary)); filter: drop-shadow(0 16px 12px color-mix(in srgb, var(--hint-primary) 24%, transparent)); }
.silhouette-frame.is-appearance-hint::before { z-index: 2; background: var(--hint-pattern); opacity: .78; }
.pattern-spots { --hint-pattern: radial-gradient(circle, var(--hint-secondary) 0 4px, transparent 4.8px) 0 0 / 31px 26px; }
.pattern-speckles { --hint-pattern: radial-gradient(circle, var(--hint-secondary) 0 2px, transparent 2.8px) 0 0 / 18px 15px; }
.pattern-bands { --hint-pattern: repeating-linear-gradient(90deg, transparent 0 34px, var(--hint-secondary) 35px 57px, transparent 58px 78px); }
.pattern-stripes { --hint-pattern: repeating-linear-gradient(112deg, transparent 0 16px, var(--hint-secondary) 17px 27px, transparent 28px 42px); }
.pattern-horizontal { --hint-pattern: repeating-linear-gradient(0deg, transparent 0 17px, var(--hint-secondary) 18px 25px, transparent 26px 39px); }
.pattern-mottled { --hint-pattern: radial-gradient(ellipse at 18% 34%, var(--hint-secondary) 0 7%, transparent 8%), radial-gradient(ellipse at 62% 60%, var(--hint-secondary) 0 9%, transparent 10%), radial-gradient(ellipse at 85% 24%, var(--hint-secondary) 0 6%, transparent 7%); }
.pattern-countershade { --hint-pattern: linear-gradient(0deg, var(--hint-secondary) 0 42%, transparent 43% 100%); }
.pattern-gradient { --hint-pattern: linear-gradient(105deg, transparent 22%, color-mix(in srgb, var(--hint-secondary) 72%, transparent) 48%, transparent 72%); }
.size-cue, .feature-cue { position: absolute; z-index: 4; border: 1px solid #fff9; background: color-mix(in srgb, var(--white) 87%, transparent); color: var(--deep); box-shadow: 0 8px 24px #063c4b1c; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease); backdrop-filter: blur(10px); }
.water-stage.has-size-hint .size-cue, .water-stage.has-appearance-hint .feature-cue { opacity: 1; transform: translateY(0); }
.size-cue { right: 12px; bottom: 12px; display: grid; min-width: 118px; gap: 3px; padding: 7px 9px; border-radius: 12px; }
.cue-kicker, .feature-cue small { color: var(--ink-soft); font-size: .55rem; font-weight: 800; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.size-cue strong { font-size: .72rem; line-height: 1.1; }
.size-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.size-meter i { height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--deep) 15%, transparent); }
.scale-hand .size-meter i:nth-child(1), .scale-forearm .size-meter i:nth-child(-n+2), .scale-arm .size-meter i:nth-child(-n+3), .scale-giant .size-meter i { background: var(--hint-primary); }
.feature-cue { left: 12px; bottom: 12px; display: flex; max-width: min(245px, 52%); align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; }
.feature-cue > span:last-child { display: grid; gap: 2px; min-width: 0; }
.feature-cue strong { overflow: hidden; font-size: .7rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.feature-glyph { position: relative; display: block; width: 30px; height: 25px; flex: 0 0 30px; background: var(--hint-primary); }
.feature-cue[data-icon="disc"] .feature-glyph { border-radius: 50%; transform: scaleX(.72); }
.feature-cue[data-icon="streamlined"] .feature-glyph { height: 12px; border-radius: 70% 42%; }
.feature-cue[data-icon="flat"] .feature-glyph { height: 16px; border-radius: 50%; transform: scaleY(.45); }
.feature-cue[data-icon="wing"] .feature-glyph { clip-path: polygon(50% 0, 100% 50%, 54% 84%, 48% 100%, 45% 83%, 0 50%); }
.feature-cue[data-icon="spines"] .feature-glyph { clip-path: polygon(50% 0, 59% 35%, 78% 8%, 72% 42%, 100% 28%, 77% 54%, 100% 72%, 68% 66%, 61% 100%, 49% 70%, 30% 96%, 35% 63%, 0 70%, 27% 50%, 5% 27%, 39% 40%); }
.feature-cue[data-icon="fin"] .feature-glyph { clip-path: polygon(5% 80%, 58% 6%, 71% 64%, 100% 50%, 76% 94%); }
.feature-cue[data-icon="bill"] .feature-glyph { height: 13px; clip-path: polygon(0 17%, 70% 17%, 100% 50%, 70% 83%, 0 83%); }
.feature-cue[data-icon="tail"] .feature-glyph { clip-path: polygon(0 36%, 42% 36%, 100% 0, 79% 50%, 100% 100%, 42% 64%, 0 64%); }
.feature-cue[data-icon="barbels"] .feature-glyph { height: 4px; border-radius: 50%; box-shadow: 0 7px var(--hint-primary), 0 14px var(--hint-primary); transform: rotate(-8deg); }
.feature-cue[data-icon="eel"] .feature-glyph, .feature-cue[data-icon="upright"] .feature-glyph { border: 5px solid var(--hint-primary); border-top-color: transparent; border-left-color: transparent; border-radius: 50%; background: transparent; transform: rotate(-18deg); }
.feature-cue[data-icon="upright"] .feature-glyph { width: 19px; transform: rotate(20deg); }
.feature-cue[data-icon="head"] .feature-glyph { clip-path: polygon(0 12%, 100% 12%, 100% 45%, 63% 45%, 63% 100%, 37% 100%, 37% 45%, 0 45%); }
.feature-cue[data-icon="mouth"] .feature-glyph { clip-path: polygon(0 15%, 100% 50%, 0 85%, 24% 50%); }
.feature-cue[data-icon="armor"] .feature-glyph, .feature-cue[data-icon="spots"] .feature-glyph, .feature-cue[data-icon="bands"] .feature-glyph { border-radius: 45%; background: radial-gradient(circle, var(--hint-secondary) 0 3px, transparent 4px) 0 0 / 11px 10px, var(--hint-primary); }
.feature-cue[data-icon="bands"] .feature-glyph { background: repeating-linear-gradient(90deg, var(--hint-primary) 0 6px, var(--hint-secondary) 7px 11px); }
.clue-strip { margin-top: .6rem; }
.clue-strip > div { padding: .58rem .75rem; }
.clue-strip .clue-label { font-size: .61rem; }
.clue-strip strong { font-size: .82rem; }
.fish-facts { margin: 1.15rem 0; padding: .9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--foam); text-align: left; }
.fish-facts > .eyebrow { margin-bottom: .5rem; }
.answer-photo { display: grid; gap: .5rem; margin: 0 0 .8rem; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--deep) 8%, var(--paper)); }
.answer-photo[hidden] { display: none; }
.answer-photo img { display: block; width: 100%; max-height: 300px; aspect-ratio: 16 / 9; object-fit: contain; background: color-mix(in srgb, var(--deep) 92%, black); }
.answer-photo figcaption { display: grid; gap: .18rem; padding: 0 .7rem .65rem; color: var(--ink-soft); font-size: .7rem; line-height: 1.35; }
.answer-photo-links { display: flex; flex-wrap: wrap; gap: .35rem; }
.answer-photo a { color: var(--sea); font-weight: 800; }
.fish-facts ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.fish-facts li { display: grid; gap: .08rem; }
.fish-facts strong { color: var(--sea); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.fish-facts span { color: var(--ink-soft); font-size: .84rem; line-height: 1.35; }
.result-modal { max-height: calc(100dvh - 2rem); overflow-y: auto; }
.personal-stats { margin: .9rem 0; padding: .85rem; border: 1px solid var(--line); border-radius: 14px; background: var(--foam); text-align: left; }
.personal-stats > .eyebrow { margin-bottom: .55rem; }
.personal-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 10px; background: var(--line); }
.personal-stat-grid > div { display: grid; justify-items: center; gap: .05rem; padding: .55rem .25rem; background: var(--white); text-align: center; }
.personal-stat-grid strong { color: var(--deep); font-size: 1.05rem; line-height: 1.1; }
.personal-stat-grid span { color: var(--ink-soft); font-size: .59rem; font-weight: 750; text-transform: uppercase; }
.community-score { display: grid; justify-items: center; gap: .18rem; margin: .85rem 0; padding: .85rem; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.community-score .eyebrow { margin-bottom: .1rem; }
.community-score strong { color: var(--deep); font-size: 1.45rem; }
.community-score span { color: var(--ink-soft); font-size: .78rem; line-height: 1.35; }
.growth-share { margin: .9rem 0; padding: .9rem; border: 1px solid color-mix(in srgb, var(--aqua) 45%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--foam) 68%, var(--white)); text-align: left; }
.share-preview { position: relative; display: grid; gap: .7rem; overflow: hidden; margin-bottom: .85rem; padding: 1rem; border-radius: 14px; background: radial-gradient(circle at 84% 10%, #68d5d033, transparent 9rem), linear-gradient(145deg, #073b49, #0c5964); color: #fff; box-shadow: 0 15px 30px #073b4930; }
.share-preview::after { position: absolute; right: -12%; bottom: -46%; width: 68%; aspect-ratio: 1; border: 1px solid #fff2; border-radius: 50%; content: ""; }
.share-preview-head, .share-preview-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.share-preview-head { font-size: .82rem; }
.brand-mini { display: inline-flex; align-items: center; gap: .35rem; font-weight: 900; }
.brand-mini i { color: var(--gold); font-size: .7rem; }
.share-preview-head > strong { color: #d9f5f0; font-size: .76rem; }
.share-preview-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; width: min(250px, 80%); }
.share-preview-grid i { aspect-ratio: 1; border-radius: 4px; background: #49646a; box-shadow: inset 0 0 0 1px #fff2; }
.share-preview-grid i.exact { background: #3ab4aa; }
.share-preview-grid i.close { background: #d79a3e; }
.share-preview-grid i.different { background: #243d43; }
.share-preview-grid i.unknown { background: #819396; }
.share-preview-foot { color: #d7eeec; font-size: .65rem; font-weight: 750; }
.growth-share > .eyebrow { margin-bottom: .2rem; }
.growth-share-copy { color: var(--ink-soft); font-size: .78rem; line-height: 1.35; }
.share-channel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; margin-top: .7rem; }
.share-channel-grid .button { min-height: 40px; padding: .5rem .65rem; font-size: .74rem; }
.share-feedback { min-height: 1rem; margin-top: .4rem; color: var(--sea); font-size: .7rem; font-weight: 750; text-align: center; }
.archive-next { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .9rem; margin-top: .85rem; padding: 1rem; border-radius: 16px; background: linear-gradient(145deg, var(--deep), var(--deep-2)); color: #fff; text-align: left; }
.archive-next .eyebrow { color: var(--aqua); }
.archive-next h3 { margin: .2rem 0; color: #fff; font-size: 1rem; }
.archive-next p:last-child { color: #d7eeec; font-size: .78rem; line-height: 1.35; }
.archive-next .button { background: var(--gold); color: var(--deep); white-space: nowrap; }
.result-modal-actions { margin-top: .85rem; }
@media (max-width: 640px) { .water-stage { min-height: 250px; } .silhouette-frame { inset: 22px 26px 50px; width: auto; height: auto; padding: 0; } .silhouette-frame.is-color-hint::after, .silhouette-frame.is-appearance-hint::before { inset: 0; } .size-cue { right: 8px; bottom: 8px; min-width: 106px; padding: 6px 8px; } .feature-cue { left: 8px; bottom: 8px; max-width: calc(100% - 132px); padding: 6px 8px; } .feature-cue strong { max-width: 190px; font-size: .64rem; } .habitat-detail { transform: scale(.75); } .clue-strip > div { padding: .52rem .4rem; } .clue-strip strong { font-size: .72rem; } .archive-next { grid-template-columns: 1fr; } .archive-next .button { width: 100%; white-space: normal; } }