*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-page:oklch(96.5% .008 75);--bg-card:oklch(99.3% .004 75);--bg-elevated:oklch(100% .002 75);--text-primary:oklch(22% .02 55);--text-secondary:oklch(46% .015 55);--text-tertiary:oklch(60% .01 55);--accent:oklch(42% .09 172);--accent-soft:oklch(92% .025 172);--rarity-algemeen:oklch(52% .09 152);--rarity-vrij-algemeen:oklch(58% .11 85);--rarity-zeldzaam:oklch(55% .13 32);--rarity-zeer-zeldzaam:oklch(48% .14 315);--rarity-onbekend:oklch(46% .06 250);--rarity-algemeen-soft:oklch(94% .025 152);--rarity-vrij-algemeen-soft:oklch(94% .03 85);--rarity-zeldzaam-soft:oklch(94% .035 32);--rarity-zeer-zeldzaam-soft:oklch(93% .04 315);--rarity-onbekend-soft:oklch(94% .02 250);--rarity-algemeen-text:oklch(32% .07 152);--rarity-vrij-algemeen-text:oklch(38% .08 85);--rarity-zeldzaam-text:oklch(35% .1 32);--rarity-zeer-zeldzaam-text:oklch(30% .11 315);--rarity-onbekend-text:oklch(32% .05 250);--border:oklch(91% .006 75);--border-strong:oklch(84% .008 75);--shadow-sm:0 1px 3px oklch(20% .01 55/.06);--shadow-md:0 4px 16px oklch(20% .01 55/.08);--shadow-lg:0 12px 40px oklch(20% .01 55/.12);--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--ease-out:cubic-bezier(.16, 1, .3, 1);--duration-fast:.18s;--duration-normal:.3s;--font-display:"Brygada 1918", Georgia, serif;--font-body:"Albert Sans", system-ui, sans-serif}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-body);color:var(--text-primary);background:var(--bg-page);min-height:100dvh;font-weight:400;line-height:1.55}h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.2}img{max-width:100%;display:block}button{font:inherit;cursor:pointer;color:inherit;background:0 0;border:none}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}::selection{background:var(--accent-soft);color:var(--text-primary)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.bird-card{background:var(--bg-card);border-radius:var(--radius-lg);cursor:pointer;border:1px solid var(--border);transition:transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);animation:card-enter .5s var(--ease-out) both;animation-delay:var(--enter-delay,0s);overflow:hidden}.bird-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}.bird-card:active{transform:translateY(-2px)}.bird-card-photo{aspect-ratio:4/3;background:var(--border);position:relative;overflow:hidden}.bird-card-photo img{object-fit:cover;width:100%;height:100%;transition:transform .6s var(--ease-out)}.bird-card:hover .bird-card-photo img{transform:scale(1.05)}.bird-card-rarity-label{top:var(--space-sm);right:var(--space-sm);border-radius:50%;justify-content:center;align-items:center;width:26px;height:26px;display:flex;position:absolute;box-shadow:0 1px 4px oklch(20% .01 55/.1)}.bird-card-rarity-label[data-rarity=algemeen]{background:var(--rarity-algemeen-soft);color:var(--rarity-algemeen)}.bird-card-rarity-label[data-rarity=vrij\ algemeen]{background:var(--rarity-vrij-algemeen-soft);color:var(--rarity-vrij-algemeen)}.bird-card-rarity-label[data-rarity=zeldzaam]{background:var(--rarity-zeldzaam-soft);color:var(--rarity-zeldzaam)}.bird-card-rarity-label[data-rarity=zeer\ zeldzaam]{background:var(--rarity-zeer-zeldzaam-soft);color:var(--rarity-zeer-zeldzaam)}.bird-card-rarity-label[data-rarity=onbekend]{background:var(--rarity-onbekend-soft);color:var(--rarity-onbekend)}.bird-card-info{padding:12px var(--space-md) var(--space-md);text-align:left}.bird-card-name{font-family:var(--font-display);color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px;font-size:.95rem;font-weight:600;line-height:1.3;display:block;overflow:hidden}.bird-card-scientific{color:var(--text-tertiary);text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;font-style:italic;overflow:hidden}@keyframes card-enter{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media (width<=640px){.bird-card-info{padding:10px 12px 12px}.bird-card-name{font-size:.85rem}.bird-card-scientific{font-size:.72rem}}.detail-overlay{z-index:100;animation:overlay-fade-in .3s var(--ease-out);padding:var(--space-lg);background:oklch(20% .01 55/.4);justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}.detail-panel{background:var(--bg-elevated);border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;max-width:640px;max-height:92vh;animation:panel-slide-up .4s var(--ease-out);position:relative;overflow-y:auto}@keyframes panel-slide-up{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.detail-close{z-index:2;padding:var(--space-md) var(--space-md) 0;justify-content:flex-end;display:flex;position:sticky;top:0}.detail-close button{background:var(--bg-elevated);border:1px solid var(--border);width:36px;height:36px;color:var(--text-secondary);transition:all var(--duration-fast) var(--ease-out);box-shadow:var(--shadow-sm);border-radius:50%;justify-content:center;align-items:center;font-size:1.1rem;display:flex}.detail-close button:hover{background:var(--bg-page);color:var(--text-primary)}.detail-photo{aspect-ratio:16/10;background:var(--border);width:100%;margin-top:calc(-1 * var(--space-xl));overflow:hidden}.detail-photo img{object-fit:cover;width:100%;height:100%}.detail-content{padding:var(--space-lg) var(--space-lg) var(--space-2xl)}.detail-header{margin-bottom:var(--space-lg)}.detail-name{letter-spacing:-.01em;margin-bottom:2px;font-size:clamp(1.5rem,4vw,1.9rem)}.detail-scientific{color:var(--text-secondary);margin-bottom:2px;font-size:.95rem;font-style:italic}.detail-authority{color:var(--text-tertiary);font-size:.8rem}.detail-badges{gap:var(--space-sm);margin-top:var(--space-md);flex-wrap:wrap;display:flex}.rarity-badge{text-transform:capitalize;border-radius:100px;align-items:center;gap:7px;padding:6px 14px 6px 10px;font-size:.82rem;font-weight:600;display:inline-flex}.rarity-badge[data-rarity=algemeen]{background:var(--rarity-algemeen-soft);color:var(--rarity-algemeen)}.rarity-badge[data-rarity=vrij\ algemeen]{background:var(--rarity-vrij-algemeen-soft);color:var(--rarity-vrij-algemeen)}.rarity-badge[data-rarity=zeldzaam]{background:var(--rarity-zeldzaam-soft);color:var(--rarity-zeldzaam)}.rarity-badge[data-rarity=zeer\ zeldzaam]{background:var(--rarity-zeer-zeldzaam-soft);color:var(--rarity-zeer-zeldzaam)}.rarity-badge[data-rarity=onbekend]{background:var(--rarity-onbekend-soft);color:var(--rarity-onbekend)}.badge{background:var(--bg-page);color:var(--text-secondary);border:1px solid var(--border);border-radius:100px;align-items:center;gap:6px;padding:5px 12px;font-size:.78rem;font-weight:500;display:inline-flex}.badge-protected{color:oklch(40% .08 50);background:oklch(95% .04 50);border-color:oklch(85% .06 50)}.detail-stats{gap:var(--space-md);margin-bottom:var(--space-lg);padding:var(--space-lg);background:var(--bg-page);border-radius:var(--radius-md);grid-template-columns:repeat(2,1fr);display:grid}.stat-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);margin-bottom:2px;font-size:.72rem;font-weight:500}.stat-value{font-family:var(--font-display);color:var(--text-primary);font-size:1.1rem;font-weight:600}.detail-info{color:var(--text-secondary);margin-bottom:var(--space-lg);font-size:.9rem;line-height:1.65}.detail-info h3{color:var(--text-primary);margin:var(--space-lg) 0 var(--space-sm);font-size:1rem}.detail-info h4{color:var(--text-primary);margin:var(--space-md) 0 var(--space-xs);font-size:.9rem}.detail-info ul{padding-left:var(--space-lg);margin:var(--space-sm) 0}.detail-info li{margin-bottom:var(--space-xs)}.detail-info p{margin-bottom:var(--space-sm)}.detail-info a{color:var(--accent)}.detail-link{align-items:center;gap:var(--space-sm);color:var(--accent);border-radius:var(--radius-sm);border:1px solid var(--accent-soft);transition:all var(--duration-fast) var(--ease-out);padding:8px 16px;font-size:.85rem;font-weight:500;display:inline-flex}.detail-link:hover{background:var(--accent-soft);text-decoration:none}@media (width<=640px){.detail-overlay{padding:0}.detail-panel{border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:95vh}.detail-content{padding:var(--space-md) var(--space-md) var(--space-xl)}.detail-stats{padding:var(--space-md)}}.game-container{padding:0 var(--space-lg) var(--space-3xl);flex-direction:column;align-items:center;max-width:780px;margin:0 auto;display:flex}.game-score-bar{justify-content:center;gap:var(--space-2xl);margin-bottom:var(--space-xl);width:100%;display:flex}.game-score{flex-direction:column;align-items:center;gap:2px;display:flex}.game-score-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);font-size:.72rem;font-weight:500}.game-score-value{font-family:var(--font-display);color:var(--text-tertiary);transition:color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);font-size:1.6rem;font-weight:700;line-height:1}.game-score-value[data-highlight=true]{color:var(--accent)}.game-score-best{color:var(--text-secondary)}.game-card{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);width:100%;display:flex;overflow:hidden}.game-photo{background:var(--border);flex:55%;min-height:320px;position:relative;overflow:hidden}.game-photo img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .4s var(--ease-out)}.game-photo img.loaded{opacity:1}.game-body{padding:var(--space-lg);flex-direction:column;flex:45%;justify-content:center;display:flex}.game-question{color:var(--text-primary);margin-bottom:var(--space-lg);text-align:center;font-size:1.15rem;font-weight:600}.game-options{gap:var(--space-sm);flex-direction:column;display:flex}.game-option{width:100%;padding:12px var(--space-md);font:inherit;text-align:left;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-primary);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);font-size:.95rem;font-weight:500}.game-option:hover:not(:disabled){border-color:var(--border-strong);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.game-option:active:not(:disabled){transform:translateY(0)}.game-option:disabled{cursor:default}.game-option[data-state=correct]{color:oklch(28% .08 152);animation:option-correct .4s var(--ease-out);background:oklch(92% .06 152);border-color:oklch(78% .08 152)}.game-option[data-state=wrong]{color:oklch(35% .1 25);animation:option-wrong .4s var(--ease-out);background:oklch(93% .04 25);border-color:oklch(82% .06 25)}.game-option[data-state=dimmed]{opacity:.4}@keyframes option-correct{0%{transform:scale(1)}40%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes option-wrong{0%{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}to{transform:translate(0)}}.game-next{justify-content:center;align-items:center;gap:var(--space-sm);width:100%;margin-top:var(--space-lg);padding:12px var(--space-md);font:inherit;border-radius:var(--radius-md);background:var(--accent);color:#fff;cursor:pointer;transition:all var(--duration-fast) var(--ease-out);animation:fade-in .3s var(--ease-out);border:none;font-size:.95rem;font-weight:600;display:flex}.game-next:hover{filter:brightness(1.08);transform:translateY(-1px)}.game-next:active{transform:translateY(0)}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (width<=640px){.game-container{padding:0 var(--space-sm) var(--space-xl)}.game-card{flex-direction:column}.game-photo{aspect-ratio:4/3;flex:none;min-height:auto}.game-body{padding:var(--space-md);flex:none}.game-question{margin-bottom:var(--space-md);font-size:1.05rem}.game-option{padding:10px 12px;font-size:.88rem}.game-score-bar{margin-bottom:var(--space-sm)}.game-score-value{font-size:1.4rem}.game-next{padding:10px var(--space-md);font-size:.88rem}}.app-header{width:fit-content;max-width:calc(100% - var(--space-lg) * 2);padding:var(--space-2xl) 0 var(--space-xl);flex-direction:column;align-items:center;margin:0 auto;display:flex}.app-title{letter-spacing:-.02em;color:var(--text-primary);margin-bottom:var(--space-xs);text-align:center;font-size:clamp(2.4rem,5vw,3.2rem)}.app-subtitle{font-family:var(--font-body);color:var(--text-secondary);margin-bottom:var(--space-xl);text-align:center;font-size:1.05rem;font-weight:400}.view-toggle{background:var(--border);border-radius:var(--radius-md);margin-bottom:var(--space-xl);gap:2px;padding:2px;display:flex}.view-toggle-btn{font:inherit;border-radius:calc(var(--radius-md) - 2px);color:var(--text-tertiary);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);white-space:nowrap;background:0 0;border:none;padding:8px 20px;font-size:.88rem;font-weight:500}.view-toggle-btn:hover{color:var(--text-secondary)}.view-toggle-btn[data-active=true]{background:var(--bg-elevated);color:var(--text-primary);box-shadow:var(--shadow-sm);font-weight:600}.search-wrapper{width:100%;margin-bottom:var(--space-lg);position:relative}.search-icon{left:var(--space-md);width:18px;height:18px;color:var(--text-tertiary);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.search-input{width:100%;padding:12px var(--space-md) 12px 44px;font:inherit;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-elevated);color:var(--text-primary);transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);font-size:.95rem}.search-input::placeholder{color:var(--text-tertiary)}.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}.filter-row{gap:var(--space-sm);flex-wrap:nowrap;display:flex}.filter-pill{border:1px solid var(--pill-soft,var(--border));background:var(--pill-soft,var(--bg-elevated));color:var(--pill-color,var(--text-secondary));transition:all var(--duration-fast) var(--ease-out);white-space:nowrap;border-radius:100px;align-items:center;gap:5px;padding:6px 14px 6px 10px;font-size:.82rem;font-weight:500;display:inline-flex}.filter-pill:hover{border-color:var(--pill-color,var(--border-strong));filter:brightness(.97)}.filter-pill[data-active=true]{background:var(--pill-color,var(--bg-elevated));border-color:var(--pill-color,var(--border-strong));color:#fff}.filter-pill[data-active=true]:not([style]){color:var(--text-primary);font-weight:600}.bird-grid-section{padding:0 var(--space-lg) var(--space-3xl)}.bird-grid{gap:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));max-width:1200px;margin:0 auto;display:grid}.empty-state{text-align:center;padding:var(--space-3xl) var(--space-lg);max-width:400px;margin:0 auto}.empty-state-icon{margin-bottom:var(--space-md);opacity:.5;font-size:3rem}.empty-state h3{margin-bottom:var(--space-sm);color:var(--text-secondary);font-size:1.2rem}.empty-state p{color:var(--text-tertiary);font-size:.9rem}.loading{min-height:60vh;font-family:var(--font-display);color:var(--text-secondary);justify-content:center;align-items:center;font-size:1.1rem;display:flex}@media (width<=640px){.app-header{padding:var(--space-lg) 0 var(--space-sm);max-width:calc(100% - var(--space-md) * 2)}.app-subtitle,.view-toggle{margin-bottom:var(--space-sm)}.bird-grid-section{padding:0 var(--space-md) var(--space-2xl)}.bird-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(155px,1fr))}.filter-row{flex-wrap:wrap;gap:6px}.filter-pill{padding:5px 11px;font-size:.78rem}.view-toggle-btn{padding:7px 16px;font-size:.82rem}}