*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f0f4f0;--card:#fff;--text:#1a2e1a;--muted:#6b7f6b;--accent:#2d6a4f;--accent-light:#52b788;--correct:#40916c;--wrong:#d62828;--radius:12px;--choice-avatar-col:5.5rem}body{background:var(--bg);color:var(--text);justify-content:center;min-height:100dvh;padding:2rem 1rem;font-family:Segoe UI,system-ui,-apple-system,sans-serif;display:flex}#app{width:100%;max-width:480px}header{text-align:center;margin-bottom:2rem}header h1{color:var(--accent);letter-spacing:-.02em;font-size:2.5rem;font-weight:800}.tagline{color:var(--muted);margin-top:.25rem;font-size:1rem}.score-row{justify-content:center;gap:1.5rem;margin-top:1rem;display:flex}.score-item{border-radius:999px;align-items:center;gap:.35rem;padding:.4rem .75rem;font-size:.95rem;font-weight:700;display:flex}.score-streak{color:#c92a2a;background:#d22b2b26}.score-best{color:var(--accent);background:#2d6a4f26}.score-emoji{font-size:1.05rem;line-height:1}.score-label{color:color-mix(in srgb, currentColor 80%, black)}.score-value{min-width:1ch}.streak-msg{color:var(--correct);margin-top:.5rem;font-size:1rem;font-weight:600}.view-nav{justify-content:center;gap:.5rem;margin-top:.9rem;display:flex}.view-nav-btn{background:var(--card);color:var(--accent);font:inherit;cursor:pointer;border:1px solid #2d6a4f59;border-radius:999px;padding:.35rem .8rem;font-size:.88rem;font-weight:600}.view-nav-btn.is-active{background:var(--accent);color:#fff;border-color:var(--accent)}.hidden{display:none!important}.loading,.error{text-align:center;color:var(--muted);padding:3rem 1rem;font-size:1.1rem}.error{color:var(--wrong)}.game{flex-direction:column;gap:1.5rem;display:flex}.achievements{flex-direction:column;gap:1rem;display:flex}.achievements-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;display:grid}.achievements-stat-card{border-radius:var(--radius);background:var(--card);text-align:center;border:1px solid #2d6a4f33;padding:.75rem .6rem}.achievements-stat-label{color:var(--muted);margin-bottom:.3rem;font-size:.75rem}.achievements-stat-value{color:var(--accent);font-size:1rem;font-weight:700}.achievements-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;display:grid}.achievement-card{background:var(--card);border:1px solid #2d6a4f2e;border-radius:10px;overflow:hidden}.achievement-thumb-wrap{aspect-ratio:1;background:#2d6a4f14}.achievement-thumb{object-fit:cover;width:100%;height:100%;display:block}.achievement-name{text-align:center;color:var(--accent);min-height:1.6rem;padding:.35rem .25rem .45rem;font-size:.72rem;font-weight:600}.achievement-card-stats{text-align:center;color:var(--muted);min-height:2.1rem;padding:0 .25rem .45rem;font-size:.62rem;line-height:1.3}.achievement-card--locked .achievement-thumb{filter:grayscale()brightness(.55)}.achievement-card--locked .achievement-name,.achievement-card--locked .achievement-card-stats{color:var(--muted)}.challenge-banner{border-radius:var(--radius);color:var(--accent);text-align:center;background:#52b78826;border:1px solid #2d6a4f3d;padding:.75rem 1rem;font-weight:600}.player{flex-direction:column;align-items:stretch;width:100%;display:flex}.player-unified{cursor:pointer;text-align:left;width:100%;font:inherit;isolation:isolate;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:999px;padding:0;transition:box-shadow .15s,transform .1s;display:block;position:relative;overflow:hidden;box-shadow:inset 0 1px #fff9,0 2px 10px #2d6a4f1f}.player-unified:before{content:"";border-radius:inherit;z-index:0;pointer-events:none;background:#1a2e1a1f;position:absolute;inset:0}.player-unified:hover{box-shadow:inset 0 1px #ffffffb3,0 4px 16px #2d6a4f2e}.player-unified:active{transform:scale(.99)}.player-unified:focus-visible{box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--accent-light), 0 4px 16px #2d6a4f26;outline:none}.player-unified-fill{z-index:1;background:var(--accent);pointer-events:none;border-radius:999px 0 0 999px;width:0%;max-width:100%;position:absolute;top:0;bottom:0;left:0}.player-unified-fill.player-unified-fill--full{border-radius:999px}.player-unified-inner{z-index:2;background:0 0;align-items:center;gap:.75rem;min-height:52px;padding:.65rem 1rem .65rem .65rem;display:flex;position:relative}.player-unified-icon-wrap{width:40px;height:40px;color:var(--accent);background:#fffffff2;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex;box-shadow:0 1px 4px #0000001a}.player-unified-icon-wrap svg{display:block}.player-unified-time{font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--text);margin-left:auto;font-size:.8125rem;font-weight:700}.choices{flex-direction:column;gap:.75rem;display:flex}.choice-btn{grid-template-columns:var(--choice-avatar-col) minmax(0, 1fr);border:2px solid var(--accent);border-radius:var(--radius);background:var(--card);cursor:pointer;text-align:left;align-items:center;column-gap:.9rem;width:100%;padding:.85rem 1.1rem;font-size:1.05rem;transition:background .2s,border-color .2s,color .2s;display:grid}.choice-thumb-slot{width:var(--choice-avatar-col);min-width:var(--choice-avatar-col);justify-content:flex-start;align-items:center;display:flex}.choice-text{overflow-wrap:break-word;flex-direction:column;align-items:flex-start;gap:.2rem;min-width:0;display:flex}.choice-thumb{object-fit:cover;object-position:center;border-radius:50%;flex-shrink:0;width:5.25rem;height:5.25rem;display:block;box-shadow:0 0 0 1px #1a2e1a1a}.choice-thumb--missing{display:none}.choice-btn:hover:not(:disabled) .choice-thumb{filter:brightness(1.05)}.choice-common{color:var(--accent);font-weight:600;line-height:1.25}.choice-scientific{color:var(--muted);font-size:.86rem;font-style:italic;line-height:1.2}.choice-btn:hover:not(:disabled){background:var(--accent)}.choice-btn:hover:not(:disabled) .choice-common,.choice-btn:hover:not(:disabled) .choice-scientific{color:#fff}.choice-btn:disabled{cursor:default;opacity:.8}.choice-btn.correct{background:var(--correct);border-color:var(--correct);opacity:1}.choice-btn.wrong{background:var(--wrong);border-color:var(--wrong);opacity:1}.choice-btn.correct .choice-common,.choice-btn.correct .choice-scientific,.choice-btn.wrong .choice-common,.choice-btn.wrong .choice-scientific{color:#fff}.choice-btn.correct .choice-thumb,.choice-btn.wrong .choice-thumb{filter:brightness(1.08);box-shadow:0 0 0 2px #ffffff73}.species-image-wrap{border-radius:var(--radius);background:var(--card);width:100%;max-width:20rem;overflow:hidden;box-shadow:0 2px 8px #00000014}.species-image-wrap img{width:100%;height:auto;display:block}#species-more-photos:not(.hidden){margin-top:-.25rem}.feedback{text-align:center;flex-direction:column;align-items:center;gap:1rem;display:flex}.text-correct{color:var(--correct);font-size:1.15rem;font-weight:700}.text-wrong{color:var(--wrong);font-size:1.15rem;font-weight:700}.feedback .location{color:var(--muted);font-size:.9rem}.recording-meta{color:var(--muted);font-size:.88rem;line-height:1.35}.sono-container{border-radius:var(--radius);background:var(--card);width:100%;overflow:hidden;box-shadow:0 2px 8px #00000014}.sono-container img{width:100%;height:auto;display:block}.recording-meta a{color:var(--accent);font-weight:600}.next-btn{border-radius:var(--radius);background:var(--accent);color:#fff;cursor:pointer;border:none;padding:.75rem 2rem;font-size:1rem;font-weight:600;transition:background .2s}.next-btn:hover{background:var(--accent-light)}.modal-overlay{z-index:20;background:#00000073;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-card{background:var(--card);width:min(100%,460px);color:var(--text);border-radius:var(--radius);flex-direction:column;gap:.65rem;padding:1rem;display:flex;box-shadow:0 12px 28px #00000038}.modal-subtitle{color:var(--muted)}.field-label{color:var(--muted);font-size:.85rem;font-weight:600}.modal-input{font:inherit;color:var(--text);border:1px solid #1a2e1a33;border-radius:10px;padding:.65rem .75rem}.modal-input:focus-visible{border-color:var(--accent-light);outline:none;box-shadow:0 0 0 3px #52b78833}.share-preview{color:var(--accent);font-size:.9rem;font-weight:600}.modal-actions{flex-wrap:wrap;gap:.5rem;display:flex}.modal-actions .next-btn{flex:1;min-width:110px;padding-inline:.8rem}.modal-close{background:#5f6f65}.modal-close:hover{background:#4b5850}.share-status{color:var(--correct);font-size:.85rem}.share-status-error{color:var(--wrong)}.site-footer{text-align:center;border-top:1px solid #1a2e1a1f;margin-top:2.5rem;padding-top:1.25rem}.site-footer p{color:var(--muted);font-size:.8rem;line-height:1.45}.site-footer a{color:var(--accent);font-weight:600}.site-footer a:hover{text-decoration:underline}