/* A sunny fish-market game: bright labels, soft paper, and a little UV purple. */
:root{color-scheme:light;--bg:#fff8ed;--surface:#fffdfa;--line:#d9e8df;--text:#27485b;--muted:#68818a;--lime:#ef6075;--purple:#8060d7}
body{background:#fff8ed;background-image:radial-gradient(circle at 5% 12%,#ffe5d8 0 5px,transparent 6px),radial-gradient(circle at 93% 18%,#d9f4ec 0 7px,transparent 8px),radial-gradient(circle at 7% 75%,#dff3f1 0 5px,transparent 6px);color:#27485b}
.app{max-width:1490px}.masthead{height:88px;border-bottom:2px dashed #e7ddcb}.brand{font-size:12px;color:#294a5c;gap:10px;letter-spacing:1px}.brand svg{width:44px;height:44px;background:#ffdece;border-radius:15px;padding:8px;stroke:#e75e75;stroke-width:3.4}.brand-dot{color:#f08475}.edition{color:#69a09b;font-weight:700;letter-spacing:1.3px}.edition span{color:#829795;border-color:#d7e8df}.icon-button{width:40px;height:40px;background:#fff;border:2px solid #cfe4dc;color:#537f82}.icon-button:hover,.icon-button.on{background:#e3f6ed;border-color:#68bfb5;color:#238d86}
.headline{padding:30px 0 27px}.headline .eyebrow{font-family:var(--sans);font-size:10px;letter-spacing:1px;font-weight:700;color:#b96c6c}.tiny-dot{background:#f27673;width:7px;height:7px}.headline h1{color:#284b5f;font-weight:900;letter-spacing:-2px;margin:7px 0 8px}.headline h1>span:not(.title-spark){color:#e75c73}.headline h1 .title-spark{color:#ffc35d;font-size:.7em;vertical-align:top;letter-spacing:0}.headline p{color:#68858c;font-weight:600;letter-spacing:1.3px}.best{text-align:center;min-width:145px;border:2px solid #f4c9a3;border-radius:18px;background:#fff0d4;padding:11px 17px 10px;box-shadow:0 4px 0 #f6dcb9;gap:2px}.best>span{font-weight:700;font-size:8px;color:#ba805e}.best strong{color:#d96d57;font-weight:700;font-size:27px}.best small{font-weight:700;color:#a7826b}
.workspace{gap:22px}.inspection{border:3px solid #9ed9d0;border-radius:24px;background:#f9fffa;box-shadow:0 6px 0 #abd9ce66}.tray-header{height:59px;background:#e0f7f0;border-bottom:2px solid #bbe8dc;padding:0 22px}.sample-number{border-color:#a6dacf;color:#479d94;font-weight:700}.sample>#fishLabel{font-size:15px;color:#286b72;font-weight:800}.latin{color:#74a39e;font-weight:700}.live-status{color:#6b9691;font-weight:700}.live-status i{background:#4bc3a5;box-shadow:0 0 0 3px #c2eedc}.chain-strip{background:#fff5df;border-bottom:2px solid #f5e8ca;color:#b08067}.chain-label{color:#d57b68;font-weight:700}.chain-label strong{color:#e45c72;font-weight:700}.chain-meter{background:#f2dacb;border-radius:99px}.chain-meter i{background:#f47377;border-radius:99px}.error-counter{color:#9b8174}.error-counter b{color:#dc755e;font-weight:700}.canvas-wrap{background:#cce9e8}.field-label>span{color:#337c7f;font-weight:700}.field-label small{color:#4b8080;font-weight:700;line-height:1.5}.scale-label{color:#538887}.scale-label i{border-color:#6ca6a2}.mobile-hud{background:#fffff6ed;border:2px solid #b7e2d7;border-radius:13px;box-shadow:0 3px 0 #71b6ae33}.mobile-hud strong{color:#df5b70;font-weight:700}.mobile-hud span,.mobile-hud #mobileScore{color:#426d70}.mobile-hud #mobileScore{border-color:#d9e9dc;font-weight:700}
.intro-banner{background:#fffdf7ee;border:2px solid #f3dbb9;border-radius:17px;padding:15px 17px;gap:13px;box-shadow:0 5px 0 #709d932e;backdrop-filter:blur(8px)}.intro-banner .eyebrow{color:#dd7c64;font-weight:700}.intro-banner strong{font-size:15px;font-weight:800;color:#345b67;margin-top:4px}.intro-banner>div{flex:1}.intro-icon{width:42px;height:42px;border-radius:15px;background:#ffdfd2;display:grid;place-items:center;flex-shrink:0}.intro-icon svg{width:31px;height:31px;fill:none;stroke:#e36779;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.primary{background:#f46d79;color:#fff;border:2px solid #e75c6d;border-radius:12px;box-shadow:0 4px 0 #d94f60;font-weight:800}.primary:hover{background:#ff8290;color:#fff}.primary:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #d94f60}.primary>span{font-weight:700}.tool-deck{background:#f8fffb;border-color:#c4e9de;padding:12px 17px}.scan-button{border:2px solid #bda7ec;background:#efe7ff;color:#67459e;border-radius:13px;font-weight:800}.scan-button>svg{stroke:#8b69d1;stroke-width:1.7}.scan-button>span>small{color:#8e77ae;font-weight:600}.scan-button>b{color:#856aa5;font-weight:600}.scan-button>b>span{color:#7b55b9;font-weight:700}.scan-button:hover:not(:disabled){background:#e4d8fb}.scan-button.scanning{background:#e3d7fa;border-color:#8e73d0}.guide-button{border:2px solid #b8e3d8;border-radius:12px;background:#fff;color:#4d8984;font-weight:700}.guide-button:hover{background:#e9fbf5}.guide-button>span{color:#e65d75}.tray-footer{background:#f8fffb;border-color:#d0ece4;color:#63928c;font-weight:700}.uv-dot{background:#a27ade;box-shadow:0 0 0 3px #eaddff}.muted{color:#78a6a0}#gestureHint{font-family:var(--sans);font-size:9px;color:#7ca6a0}.text-button{color:#678f8a;font-weight:700}.text-button:hover{color:#e35f73}
.panel{border:2px solid #f3e0d1;border-radius:23px;background:#fffefa;padding:20px 20px 17px;box-shadow:0 5px 0 #ebdfcf99}.panel-heading .eyebrow{color:#e38279;font-weight:700}.number-tag{color:#db7771;border:0;background:#fff0df;border-radius:99px;font-weight:700;padding:6px 9px}.readouts,.catch-readout,.species-guide,.difficulty{border-color:#f1e6db}.readout-label,.setting-label{color:#688b8b;font-weight:700}.readout-label small,.setting-label>span{color:#a9b8a8;font-weight:700}.time-readout>strong,.score-readout>strong{color:#2f6874;font-weight:700}.time-readout>strong>span{color:#90a79d}.time-track{background:#e1f0e4;border-radius:20px;height:5px}.time-track i{background:#60c5a3}.time-readout.urgent>strong{color:#e65a62}.time-readout.urgent .time-track i{background:#ee7e78}.catch-readout strong{color:#e86173;font-weight:700}.fraction{color:#9eb6ae}.specimen{border:2px solid #e9ece0;background:#f6f7ee;border-radius:7px}.specimen svg{stroke:#c9d8c5;stroke-width:1.8}.specimen.caught{background:#ffe2df;border-color:#f2bdbb}.specimen.caught svg{stroke:#e96f7c}.species-guide>.setting-label{color:#416d72}.species-row svg{stroke:#9bb4ae}.species-row>svg .filled{fill:#dce9de;stroke:#8faea7}.species-row strong{color:#5d7d7c;font-weight:700}.species-row small{color:#91a6a0}.species-row>b{color:#dc8a68;font-weight:700}.species-row.target>b,.species-row.target strong{color:#e66375}.species-row.target>svg{stroke:#e96e7d}.species-guide>p,.difficulty p{color:#9a9d8c}.segmented{border:2px solid #dcece1;background:#f5faf3;border-radius:11px;gap:4px;padding:4px}.segmented button{border-radius:7px;color:#7d9990;font-weight:700}.segmented button.selected{background:#69c8b4;color:#fff;font-weight:800;box-shadow:0 2px 0 #4cb39d}.how-to .setting-label{color:#688b8b}.step>span{color:#ef8b79;font-weight:700}.step p{color:#77948b}.step em{color:#df6b78;font-weight:800}.secondary{border:2px solid #f1c8be;border-radius:12px;color:#d27770;font-weight:700;background:#fff7f0}.secondary:hover{background:#ffebe5;border-color:#edada7}.keyboard-hint{color:#a1b5aa}
.bottom-strip{border-color:#eadfce}.fish-lineup>.eyebrow{color:#bb9b89;font-weight:700}.fish-chip{background:#fff;border:2px solid #e9ece1;border-radius:99px;padding:7px 11px;color:#9cb1a3;font-weight:700}.fish-chip b{color:#bdc9bb;font-weight:700}.fish-chip.active{background:#fff0dd;border-color:#f4c6a8;color:#df766a}.fish-chip.active b{color:#e69d84}.fish-chip.done{color:#6a9d91;border-color:#cbe7d9}.bottom-strip .text-button{color:#9e9c8c}footer{color:#a2ab9c}footer>span{color:#b8b8a3}
.center-overlay{background:#fffaf3f2;backdrop-filter:blur(9px)}.center-overlay .eyebrow{color:#df7c75;font-weight:700}.center-overlay h2{color:#315b69;font-weight:900}.center-overlay p{color:#7c9991}.center-overlay .primary{color:#fff}.review-button{color:#d46e71;border-color:#e6b7a8;font-weight:700}.review-return{background:#f46d79;color:white;border:2px solid #e75c6d;border-radius:10px;font-weight:700}.toast{background:#fff8e7f5;border:2px solid #eec790;border-radius:11px;color:#c9705f;font-weight:800;box-shadow:0 3px 0 #8aa99b33}.toast.miss{color:#ca5c65;background:#fff0edee;border-color:#f2b6a9}dialog{background:#fffbf4;color:#315b69;border:3px solid #f1dbcb;border-radius:22px;box-shadow:0 20px 80px #284f5370}dialog::backdrop{background:#38585899}dialog .eyebrow{color:#e37a75;font-weight:700}dialog h2{color:#315b69}dialog p{color:#77928d}dialog .dialog-close{color:#c78d7d}dialog .dialog-species strong{color:#456e72;font-weight:800}dialog .dialog-species strong>span{color:#df7180}.source-note a{color:#569c91}.source-note{border-color:#f1e6db}
@media(max-width:1100px){.panel{padding:17px 15px}.workspace{gap:16px}.intro-banner{gap:10px}.intro-icon{width:37px;height:37px}.intro-icon svg{width:26px;height:26px}}
@media(max-width:760px){.app{padding:0 16px}.masthead{height:72px}.brand svg{width:36px;height:36px;border-radius:12px;padding:7px}.brand{font-size:9px}.edition{font-size:7px;letter-spacing:.8px;color:#83aaa0}.icon-button{width:33px;height:33px}.headline{padding:23px 0 20px;gap:8px}.headline .eyebrow{font-family:var(--sans);font-size:8px;letter-spacing:0}.headline h1{font-size:clamp(23px,6vw,33px);letter-spacing:-1.6px;white-space:nowrap}.headline h1 .title-spark{font-size:.55em}.headline p{font-size:9px;letter-spacing:.6px}.best{min-width:92px;padding:8px 8px 7px;border-radius:13px}.best>span{font-size:6px}.best strong{font-size:20px}.best small{font-size:7px}.inspection{border-width:2px;border-radius:19px}.tray-header{height:48px;padding:0 14px}.sample>#fishLabel{font-size:12px}.live-status{font-size:6px}.chain-strip{height:38px;padding:0 14px}.chain-label strong{font-size:15px}.error-counter b{font-size:12px}.canvas-wrap{height:460px}.intro-banner{left:11px;right:11px;bottom:14px;padding:11px;gap:9px;border-radius:14px}.intro-icon{width:33px;height:33px;border-radius:11px}.intro-icon svg{width:23px;height:23px}.intro-banner .eyebrow{font-size:6px;line-height:1.3}.intro-banner strong{font-size:10px;white-space:nowrap}.intro-banner .primary{padding:10px 11px;min-height:40px;font-size:9px;gap:6px;border-radius:10px}.intro-banner .primary>span{font-size:14px}.tool-deck{padding:9px 10px;gap:7px}.scan-button{border-radius:11px;padding:9px}.guide-button{border-radius:10px;padding:12px 9px}.tray-footer{height:40px;padding:0 13px}.mobile-hud{right:13px;top:14px;border-radius:11px}.mobile-hud strong{font-size:14px}.panel{padding:16px 15px;border-radius:18px;gap:0 17px}.panel-heading{margin-bottom:14px}.species-guide{gap:10px}.species-row strong{font-size:9px}.species-row small{font-size:8px}.species-row>b{font-size:9px}.segmented button{padding:9px 4px}.how-to{gap:14px}.how-to .step p{font-size:9px}.secondary{margin-top:2px}.fish-lineup{gap:7px}.fish-chip{padding:5px 8px;font-size:9px}.bottom-strip .text-button{margin-top:1px}footer{padding:15px 0 22px}.toast{font-size:10px;max-width:90%;white-space:normal;text-align:center}.center-overlay h2{font-size:25px}dialog{padding:27px 22px}}
@media(max-width:360px){.headline h1{font-size:21px}.best{min-width:82px}.intro-icon{display:none}.intro-banner strong{font-size:10px}.live-status{font-size:6px}}
.bottom-actions{display:flex;align-items:center;gap:20px}.share-game{display:inline-flex;align-items:center;gap:8px;padding:11px 15px;text-decoration:none;border:2px solid #e8c9be;border-radius:12px;background:#fff;color:#be6267;font-size:10px;font-weight:800;white-space:nowrap}.share-game:hover{background:#fff0eb;border-color:#efad9d}.share-game:focus-visible{outline:3px solid #ed6a7c;outline-offset:3px}.share-x{font-size:15px;color:#355a63}
@media(max-width:760px){.bottom-strip{gap:12px}.bottom-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.share-game{font-size:9px;padding:9px 10px}.share-x{font-size:13px}.bottom-strip .text-button{font-size:9px}}
.result-share{display:inline-flex;align-items:center;justify-content:center;min-width:210px;margin-top:12px;padding:11px 15px;border:2px solid #e8c9be;border-radius:11px;background:#fff;color:#bd6469;font-size:11px;font-weight:800;text-decoration:none}.result-share:hover{background:#fff0eb;border-color:#efad9d}.result-share:focus-visible{outline:3px solid #ed6a7c;outline-offset:3px}.center-overlay .review-button{margin-top:8px}
@media(max-width:760px){.center-overlay h2{margin:10px 0 4px}.center-overlay p{line-height:1.75;margin-bottom:13px}.result-share{padding:10px 12px;margin-top:9px}}