*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#073f4d;color:#f7fbf7}button{font:inherit;touch-action:manipulation}.screen{position:fixed;top:0;right:0;bottom:0;left:0;height:100vh;height:100dvh;min-width:100vw;overflow:hidden;padding:clamp(14px,2.4vh,28px) clamp(30px,4vw,56px);background:linear-gradient(90deg,rgba(255,213,107,.08) 1px,transparent 1px),linear-gradient(rgba(255,213,107,.08) 1px,transparent 1px),#073f4d;background-size:84px 84px}.screen:focus{outline:0}.quiz{height:100%;width:min(1180px,100%);margin:0 auto;text-align:center}.intro-page,.answer-page{display:grid;align-content:center}.intro-page{row-gap:10px}.answer-page{align-content:stretch;grid-template-rows:auto auto auto auto auto;row-gap:clamp(6px,1.2vh,10px);overflow:hidden}.eyebrow{margin:0 0 12px;font-size:24px;color:#bde7ee;font-weight:700}h1{margin:0;color:#ffd367;font-size:54px;line-height:1.1}.status{min-height:36px;margin:8px 0 10px;color:#d9f5f6;font-size:26px;font-weight:800}.animal-panel{width:min(1040px,78vw);aspect-ratio:16 / 8;margin:0 auto 20px;overflow:hidden;border:12px solid #f8fff4;background:#d6eef2}.animal-panel img{width:100%;height:100%;object-fit:cover;display:block}.rule-panel{width:min(860px,78vw);margin:12px auto 0;padding:30px 42px;background:#f8fff4f5;color:#073f4d;border:8px solid #ffd367}.rule-panel p,.rule-panel strong{display:block;margin:0}.rule-panel p{font-size:40px;line-height:1.25;font-weight:900}.rule-panel strong{margin:8px 0;color:#e87f00;font-size:58px;line-height:1.15;font-weight:900}.answer-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,250px);align-items:center;gap:16px;width:min(900px,100%);margin:0 auto}.answer-header h1{font-size:clamp(34px,5vh,44px)}.mini-animal{aspect-ratio:16 / 9;overflow:hidden;border:6px solid #f8fff4;background:#d6eef2}.mini-animal img{width:100%;height:100%;object-fit:cover;display:block}.image-fallback{width:100%;height:100%;display:grid;place-items:center;padding:10px;color:#073f4d;background:#fff3c0;font-size:clamp(26px,4.4vh,42px);font-weight:900}.answer-slots{display:grid;justify-content:center;gap:clamp(7px,1.1vh,10px);margin:0 auto}.answer-slots span{aspect-ratio:1;display:grid;place-items:center;background:linear-gradient(90deg,transparent calc(50% - 1px),rgba(232,127,0,.28) 50%,transparent calc(50% + 1px)),linear-gradient(0deg,transparent calc(50% - 1px),rgba(232,127,0,.28) 50%,transparent calc(50% + 1px)),linear-gradient(45deg,transparent calc(50% - 1px),rgba(7,63,77,.12) 50%,transparent calc(50% + 1px)),linear-gradient(-45deg,transparent calc(50% - 1px),rgba(7,63,77,.12) 50%,transparent calc(50% + 1px)),#f8fff4;color:#073f4d;border:4px solid rgba(7,63,77,.28);border-radius:0;font-size:clamp(28px,5.4vh,38px);font-weight:900;box-shadow:inset 0 0 0 2px #ffffffc7}.answer-slots span.filled{background:linear-gradient(90deg,transparent calc(50% - 1px),rgba(232,127,0,.28) 50%,transparent calc(50% + 1px)),linear-gradient(0deg,transparent calc(50% - 1px),rgba(232,127,0,.28) 50%,transparent calc(50% + 1px)),linear-gradient(45deg,transparent calc(50% - 1px),rgba(7,63,77,.12) 50%,transparent calc(50% + 1px)),linear-gradient(-45deg,transparent calc(50% - 1px),rgba(7,63,77,.12) 50%,transparent calc(50% + 1px)),#fff3c0;border-color:#e87f00;box-shadow:inset 0 0 0 2px #ffffffd1}.choices{display:grid;grid-template-columns:repeat(5,minmax(78px,1fr));gap:clamp(8px,1.2vh,12px);margin:0 auto;width:min(760px,84vw)}.choices button,.actions button{min-height:clamp(46px,8.2vh,58px);border:0;color:#073f4d;font-size:clamp(24px,4.8vh,32px);font-weight:900;cursor:pointer}.choices button{background:#f8fff4}.choices button:focus-visible,.actions button:focus-visible{outline:0;box-shadow:inset 0 0 0 8px #ff9f1c}.choices button.selected{background:#ffd367}.actions{display:flex;justify-content:center;gap:clamp(8px,1.2vh,12px);margin-top:0}.pager-actions{margin-top:8px}.actions button{min-width:clamp(130px,18vw,180px);padding:0 28px;font-size:clamp(20px,3.8vh,26px)}.actions .ghost{background:#d9f5f6}.actions .primary{background:#ffd367}.actions button:disabled{opacity:.55}.feedback-mark{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;z-index:10;background:#073f4d2e;font-size:min(42vh,320px);line-height:1;font-weight:900;pointer-events:none;text-shadow:0 16px 42px rgba(0,0,0,.24)}.feedback-mark.correct{color:#52d273}.feedback-mark.wrong{color:#ff5a5f}@media (max-height: 760px){.screen{padding:10px 32px}h1{font-size:42px}.status{min-height:28px;margin:4px 0;font-size:20px}.answer-header{grid-template-columns:minmax(0,1fr) minmax(150px,200px);gap:12px;width:min(800px,100%)}.answer-header h1{font-size:34px}.mini-animal{border-width:4px}.animal-panel{width:min(880px,76vw);border-width:8px}.rule-panel{margin-top:8px;padding:22px 34px;border-width:6px}.rule-panel p{font-size:32px}.rule-panel strong{font-size:48px}.answer-slots{gap:7px}.choices{width:min(700px,82vw);gap:8px}.answer-slots span,.choices button,.actions button{min-height:46px}.actions button{min-width:138px}}