#wildlife-game[open]{position:fixed;inset:0;margin:0;padding:0;border:0;display:grid;place-items:center;transform:none;overflow:hidden;color:#fff0c9;user-select:none;-webkit-user-select:none;--activity-background:url('assets/steder/takeskogen/sylva-grove-v1.webp')}
.wildlife-scene{position:relative;width:min(100vw,177.777dvh);aspect-ratio:16/9;container-type:inline-size}
.wildlife-scene header{position:absolute;inset:2% 3% auto;display:flex;align-items:center;justify-content:space-between;height:auto;padding:0;background:none;border:0}
.wildlife-scene h2{font:bold clamp(17px,2.4cqw,34px) Georgia;margin:0;padding:.35em .7em;background:#173c35ee;border-radius:10px}
.wildlife-scene button{font:600 clamp(12px,1.35cqw,20px) system-ui;min-height:36px;padding:8px 14px;border:1px solid #c3a86c;border-radius:9px;background:#173c35ef;color:#fff0c9;cursor:pointer}
.wildlife-scene button:focus-visible{outline:3px solid #fff0ad;outline-offset:3px}.wildlife-scene button:disabled{cursor:default}.wildlife-scene .primary{background:#e1c582;color:#253b30}
#wildlife-progress{padding:10px;background:#173c35ee;border-radius:8px;font-weight:bold}
.wildlife-board{position:absolute;top:16%;left:12%;width:76%;height:65%;padding:1.5% 3%;box-sizing:border-box}
.wildlife-board h3{font:500 clamp(18px,2.3cqw,34px) system-ui;text-align:center;margin:0 0 1%;color:#493419}.wildlife-board h3 strong{font-weight:800}
#wildlife-rows{display:flex;flex-direction:column;height:85%;gap:4%}
.wildlife-scene .wildlife-row{position:relative;display:flex;align-items:center;gap:1%;height:48%;width:100%;padding:1%;background:#fff3d63b;border:2px solid #a17b4c77;color:#493419;text-align:left;box-sizing:border-box}
.wildlife-row:not(:disabled):hover{background:#fff4d999;border-color:#71562f}.wildlife-label{width:12%;font-size:clamp(12px,1.6cqw,24px)}
.wildlife-cells{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;width:84%;height:100%}.wildlife-cell{position:relative;display:grid;align-items:end;justify-items:center;min-width:0;height:100%;border-bottom:1px solid #8b693a55}.wildlife-cell canvas{width:100%;max-height:100%;aspect-ratio:1;object-fit:contain}.wildlife-cell b{position:absolute;bottom:0;background:#234f3a;color:#fff3cb;border-radius:50%;width:1.5em;height:1.5em;text-align:center}
.wildlife-scene .wildlife-row.is-correct{border-color:#327749;background:#d9edb78c}.wildlife-check{position:absolute;right:0;top:0;font-size:1.5em;color:#245d32}
.wildlife-scene footer{position:absolute;bottom:2%;left:10%;right:10%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;margin:0}
#wildlife-feedback{margin:0;min-height:1.4em;font-size:clamp(12px,1.5cqw,22px);color:#fff0c9;background:#163c35ed;border-radius:6px;padding:2px 10px}#wildlife-feedback:empty{visibility:hidden}
.wildlife-actions{display:flex;gap:12px;justify-content:center}.wildlife-actions [hidden]{display:none}
#wildlife-offer{width:min(850px,90vw);text-align:center;padding:24px 30px 26px 150px;box-sizing:border-box}.wildlife-portrait{position:absolute;left:20px;top:25px;width:110px;height:160px}#wildlife-offer h2{margin:5px 0 16px}#wildlife-offer .offer-actions{justify-content:center;gap:12px}
@media(max-width:700px){#wildlife-offer{padding:20px 20px 20px 100px}.wildlife-portrait{left:10px;width:75px;height:120px}.wildlife-board{left:6%;width:88%}.wildlife-scene button{padding:5px 9px;min-height:32px}.wildlife-scene header{inset:1% 2% auto}.wildlife-scene h2{font-size:17px}.wildlife-scene footer{bottom:1%}}

#wildlife-game.level-two .wildlife-board{top:14%;height:70%;left:10%;width:80%}
.level-two #wildlife-rows{height:88%;gap:2%}
.level-two .wildlife-row{height:24%;min-height:0;padding:.3%}
.level-two .wildlife-label{height:100%;display:flex;justify-content:center;border-right:2px solid #a17b4c77}
.level-two .wildlife-label canvas{height:100%;max-width:100%;object-fit:contain}
.level-two .wildlife-cells{grid-template-columns:repeat(5,1fr)}
.level-two .wildlife-cell canvas{height:100%;width:auto;max-width:100%}
.wildlife-tray{display:flex;justify-content:center;gap:.5%;height:24%;align-items:center}
.wildlife-scene .wildlife-token{height:100%;aspect-ratio:1;padding:2px;background:#fff3d688;min-height:0;touch-action:manipulation}
.wildlife-token canvas{width:100%;height:100%;pointer-events:none}
.wildlife-token[aria-pressed=true]{outline:3px solid #9a6422;background:#efd58d}

#wildlife-game.level-stats .wildlife-board{top:14%;left:9%;width:82%;height:70%;padding:1% 3%}
.level-stats #wildlife-rows{height:88%;gap:1%;color:#493419}
.level-stats .wildlife-board h3{font-size:clamp(14px,1.9cqw,28px)}
.stats-caption{margin:0;text-align:center;font-size:clamp(11px,1.4cqw,21px)}
.stats-chart{display:flex;gap:3%;height:68%;min-height:0;margin:1% 4% 0 5%;padding-bottom:9%;position:relative;box-sizing:border-box;flex:1}
.stats-scale{position:relative;width:3%;flex-shrink:0;font-size:clamp(9px,1cqw,15px)}
.stats-scale span{position:absolute;right:0;transform:translateY(50%)}
.stats-column{flex:1;min-width:0;position:relative}
.stats-plot{height:100%;display:flex;align-items:flex-end;gap:5%;justify-content:center;border-bottom:2px solid #71562f;background-image:linear-gradient(to top,#896d3820 0 1px,transparent 1px);background-repeat:repeat}
.stats-bar{width:65%;min-height:0;position:relative;transition:height .15s;background:linear-gradient(90deg,#315746,#7a9c62,#42674c);border-radius:4px 4px 0 0}
.stats-bar.second{background:linear-gradient(90deg,#a96822,#e7b858,#bd8433)}
.stats-bar b{position:absolute;top:0;left:50%;transform:translate(-50%,-100%);font-size:clamp(11px,1.3cqw,20px)}
.stats-label{height:3.8cqw;display:flex;align-items:center;justify-content:center;font-size:clamp(10px,1.2cqw,18px)}
.stats-label canvas{height:100%;width:auto;max-width:45%;object-fit:contain}
.stats-controls{display:flex;gap:5px;justify-content:center}.wildlife-scene .stats-controls button{min-height:24px;padding:0 12px}
.stats-answer{display:flex;justify-content:center;align-items:center;gap:10px;margin:1% 0 0;font-size:clamp(12px,1.4cqw,21px)}
.stats-answer input{width:5em;padding:5px;border:2px solid #71562f;border-radius:6px;background:#fff8e4;color:#493419;font:inherit;user-select:text}
.stats-key{display:inline-block;width:1em;height:1em;background:#567b52;margin-left:1em;vertical-align:middle}.stats-key.second{background:#cf9b42}
@media(prefers-reduced-motion:reduce){.stats-bar{transition:none}}


.level-stats .stats-caption{color:#493419}