@import "https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Nunito+Sans:wght@400;600&display=swap";body{background-color:var(--tan-light)}@font-face{font-family:RodinBokutohPro;src:url(/assets/RodinBokutohPro-EB-AlphaNum-ZMfE5n5b.woff2)format("woff2");font-weight:100 900;font-style:normal}:root{--brown-wood:#a0713a;--green-deep:#3d8b37;--green-leaf:#6dbf67;--green-pale:#c8e6c4;--green-shadow:#256020;--yellow-sun:#ffd966;--white-cloud:#fffef8;--tan-dark:#e8d5a3;--tan-light:#fdf6e3;--tan-mid:#f5e6c8;--green-mint:#a8d5a2;--blue-sky:#87ceeb;--blue-sea:#4a9cc7;--blue-deep:#2e6e9e;--blue-pale:#d6eff8;--yellow-pale:#fff3cc;--coral:#ff8b6a;--coral-pale:#ffd4c7;--radius-md:12px;--radius-pill:999px;--radius-lg:18px;--font-display:"RodinBokutohPro";--text-dark:#3d2b1f;--text-mid:#7a5c40;--text-light:#a8896a;--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-bounce:.3s cubic-bezier(.68, -.55, .27, 1.55);--shadow-card:0 3px 0 #e8d5a3, 0 5px 16px #7a5c4026}.page-status{font-family:var(--font-display);color:var(--text-light);text-align:center;padding:48px 0;font-weight:700}.page-status.error{color:#8c3020}@media (width<=580px){body{padding:0 12px}}.navbar{background-color:var(--green-deep);border-radius:var(--radius-lg);height:58px;box-shadow:0 4px 0 var(--green-shadow), 0 6px 20px #0000001a;justify-content:space-between;align-items:center;gap:12px;padding:0 20px;display:flex}.links{gap:3px;display:flex}.link{font-family:var(--font-display);color:#ffffffb3;border-radius:var(--radius-pill);transition:background var(--transition-fast), color var(--transition-fast);padding:6px 12px;font-size:1.2rem;font-weight:700;text-decoration:none}.link:hover{color:#fff;background-color:#ffffff1a;text-decoration:none}.active{color:#fff;background-color:#fff3}.logo{font-family:var(--font-display);color:#fff;pointer-events:none;flex-shrink:0;align-items:center;gap:8px;font-size:1.5rem;font-weight:900;text-decoration:none;display:flex}.logo-image{width:auto;height:1.4rem}.logoDot{background:var(--yellow-sun);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;padding:5px;font-size:15px;display:flex;box-shadow:0 2px #c9a020}.nav-auth{align-items:center;gap:8px;display:flex}.nav-user{font-family:var(--font-display);color:#ffffffd9;font-size:.78rem;font-weight:700}.nav-auth-btn{font-family:var(--font-display);background:var(--yellow-sun);color:#7b5230;border-radius:var(--radius-pill);cursor:pointer;transition:filter var(--transition-fast);border:none;padding:6px 14px;font-size:.78rem;font-weight:700;text-decoration:none;box-shadow:0 2px #c9a020}.nav-auth-btn:hover{filter:brightness(1.05)}@media (width<=580px){.navbar{flex-wrap:wrap;gap:6px;height:auto;padding:10px 14px 6px}.links{order:3;justify-content:center;width:100%;padding-bottom:4px}.link{padding:4px 10px;font-size:1rem}.logo{font-size:1.2rem}}.critter-grid{flex:7;grid-template-columns:repeat(3,1fr);gap:16px;display:grid}@media (width<=580px){.critter-grid{grid-template-columns:repeat(2,1fr);gap:10px}}.critter-card{background:var(--white-cloud);border:2.5px solid var(--tan-dark);border-radius:var(--radius-lg);cursor:pointer;transition:transform var(--transition-bounce), box-shadow var(--transition-normal), border-color var(--transition-fast);box-shadow:var(--shadow-card);text-align:center;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:8px;padding:14px 10px;display:flex;position:relative}.selected{border-color:var(--green-leaf);background:var(--green-leaf)}.critter-card:hover{box-shadow:0 6px 0 var(--tan-dark), 0 10px 26px #7a5c4033;border-color:var(--green-leaf);transform:translateY(-4px)}.caught{border-color:var(--green-leaf);background:var(--green-pale)}.unavailable{opacity:.45;filter:grayscale(50%)}.available-dot{background-color:var(--green-leaf);border-radius:50%;width:10px;height:10px;position:absolute;top:8px;right:8px}.critter-name{font-size:1rem;font-weight:700}.critter-image{object-fit:contain;width:80px;height:80px}.filter-bar{border-radius:var(--radius-pill);box-shadow:var(--shadow-card);background:var(--white-cloud);border:2.5px solid var(--tan-dark);align-items:center;gap:8px;margin-top:14px;margin-bottom:14px;padding:8px 16px;display:flex}.filter-label-text{font-size:.74rem;font-weight:700;font-family:var(--font-display);color:var(--text-light);text-transform:uppercase;letter-spacing:.06rem;white-space:nowrap}.filter-pill{font-family:var(--font-display);border-radius:var(--radius-pill);border:2px solid var(--tan-dark);color:var(--text-mid);cursor:pointer;transition:all var(--transition-fast);background:0 0;padding:4px 12px;font-size:.74rem;font-weight:700}.filter-pill:hover{border-color:var(--green-leaf);color:var(--green-deep)}.filter-pill.on-green{background:var(--green-leaf);border-color:var(--green-deep);color:#fff;box-shadow:0 2px 0 var(--green-deep)}@media (width<=580px){.filter-bar{border-radius:var(--radius-md);flex-wrap:wrap}}.fish-content{flex-direction:row;align-items:flex-start;gap:16px;width:100%;display:flex}.critter-info{background:var(--white-cloud);border:2.5px solid var(--tan-dark);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);flex-direction:column;flex:3;gap:8px;height:550px;padding:14px;display:flex;position:sticky;top:16px}.critter-info-image{object-fit:contain;width:100%;height:120px}.critter-info-name{font-family:var(--font-display);color:var(--text-dark);text-align:center;font-size:1rem;font-weight:800}.info-row{border-radius:var(--radius-pill);border:2px solid var(--tan-dark);justify-content:space-between;align-items:center;padding:6px 12px;display:flex}.info-label{font-family:var(--font-display);color:var(--text-light);text-transform:uppercase;letter-spacing:.06rem;font-size:.74rem;font-weight:700}.info-value{color:var(--text-dark);font-size:.82rem;font-weight:600}.catch-button{font-family:var(--font-display);border-radius:var(--radius-pill);border:2px solid var(--tan-dark);color:var(--text-mid);cursor:pointer;transition:all var(--transition-fast);background:0 0;width:100%;margin-top:auto;padding:6px 12px;font-size:.74rem;font-weight:700}.catch-button:hover{border-color:var(--green-leaf);color:var(--green-deep)}.catch-button.caught{background:var(--green-leaf);border-color:var(--green-deep);color:#fff;box-shadow:0 2px 0 var(--green-deep)}.critter-info-empty{color:var(--text-light);text-align:center;margin:auto;font-size:.85rem}@media (width<=580px){.fish-content{flex-direction:column}.critter-info{box-sizing:border-box;flex:none;order:-1;width:100%;height:auto;position:sticky;top:10px}.critter-grid{order:1}}.home{flex-direction:column;gap:24px;max-width:760px;margin:0 auto;padding:24px 0;display:flex}.hero{background:var(--white-cloud);border:2.5px solid var(--tan-dark);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);text-align:center;padding:36px 28px}.hero-title{font-family:var(--font-display);color:var(--text-dark);margin:0 0 10px;font-size:1.8rem;font-weight:900}.hero-sub{color:var(--text-mid);max-width:480px;margin:0 auto 22px;font-size:.95rem;line-height:1.5}.hero-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.hero-btn{font-family:var(--font-display);color:#fff;border-radius:var(--radius-pill);transition:filter var(--transition-fast), transform var(--transition-fast);padding:10px 22px;font-size:.88rem;font-weight:700;text-decoration:none}.hero-btn:hover{filter:brightness(1.06)}.hero-btn:active{transform:translateY(1px)}.hero-btn.green{background:var(--green-leaf);box-shadow:0 3px 0 var(--green-deep)}.hero-btn.blue{background:var(--blue-sea);box-shadow:0 3px 0 var(--blue-deep)}.stat-row{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.stat-card{background:var(--white-cloud);border:2.5px solid var(--tan-dark);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);flex-direction:column;align-items:center;gap:4px;padding:18px 14px;display:flex}.stat-number{font-family:var(--font-display);color:var(--green-deep);font-size:1.6rem;font-weight:900}.stat-label{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);text-align:center;font-size:.72rem;font-weight:700}.callout-col{flex-direction:column;gap:12px;display:flex}.callout{border-radius:var(--radius-md);border-left:4px solid;padding:14px 16px;font-size:.88rem}.callout-title{font-family:var(--font-display);margin-bottom:3px;font-weight:700}.callout-blue{background:var(--blue-pale);border-color:var(--blue-sea);color:var(--blue-deep)}.callout-coral{background:var(--coral-pale);border-color:var(--coral);color:#8c3020}@media (width<=580px){.stat-row{grid-template-columns:1fr}}.login-wrap{justify-content:center;padding:48px 16px;display:flex}.login-card{background:var(--white-cloud);border:2.5px solid var(--tan-dark);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);flex-direction:column;gap:8px;width:100%;max-width:360px;padding:28px 26px;display:flex}.login-title{font-family:var(--font-display);color:var(--text-dark);text-align:center;margin:0 0 12px;font-size:1.3rem;font-weight:900}.login-label{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);font-size:.72rem;font-weight:700}.login-input{color:var(--text-dark);background:var(--tan-light);border:2px solid var(--tan-dark);border-radius:var(--radius-pill);transition:border-color var(--transition-fast);outline:none;margin-bottom:6px;padding:8px 14px;font-family:inherit;font-size:.9rem}.login-input:focus{border-color:var(--green-leaf)}.login-submit{font-family:var(--font-display);background:var(--green-leaf);color:#fff;border-radius:var(--radius-pill);cursor:pointer;box-shadow:0 3px 0 var(--green-deep);transition:filter var(--transition-fast);border:none;margin-top:10px;padding:10px;font-size:.88rem;font-weight:700}.login-submit:hover{filter:brightness(1.05)}.login-submit:active{transform:translateY(1px)}.login-switch{font-family:var(--font-display);color:var(--text-mid);cursor:pointer;background:0 0;border:none;margin-top:6px;font-size:.74rem;font-weight:700}.login-switch:hover{color:var(--green-deep)}.login-error{color:#8c3020;background:var(--coral-pale);border-radius:var(--radius-md);margin:4px 0 0;padding:8px 12px;font-size:.8rem}.login-hint{color:var(--text-mid);margin:0 0 6px;font-size:.82rem}
