/* 恐龍蛋快打（取代舊單字打地鼠，導演 2026-10-27 合併）（導演 2026-10-26）：題目＝一個分類（蔬菜、樂器、天氣…，每回合隨機），蛋孵出圖卡，只打屬於這個分類的；干擾題用差很多的分類（A）；圖卡只放圖；打對念英文、打錯念名稱；沒打到的自己縮回；打到 5 個過關並計時，打錯 +2 秒，每分類記自己最快 5 次。美術沿用 egg-art-sample */
:root{--ink:#17593f;--cream:#fffdf2;--gold:#e3bd70;font-family:"Naikai",ui-rounded,system-ui,sans-serif;color:var(--ink)}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{overflow:hidden;background:#164d39;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:4px solid #eaa52a;outline-offset:3px}
.shell{display:flex;flex-direction:column;height:100svh;padding:max(10px,env(safe-area-inset-top)) 14px max(10px,env(safe-area-inset-bottom));gap:10px}
.opts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;flex:none}
.seg{display:flex;border:3px solid #fffaf0;border-radius:16px;overflow:hidden;box-shadow:0 4px 0 #0d3b28}
.seg button{min-height:44px;padding:2px 14px;border:0;background:#2c6e52;color:#fffdf2;font-size:19px;font-weight:1000}
.seg button+button{border-left:2px solid #fffaf055}
.seg button[aria-pressed=true]{background:linear-gradient(#ffca58,#f6ac34);color:#573e1d}
/* 題目欄：伊奇＋1–2 個題目格＋進度點 */
.bar{position:relative;display:flex;align-items:center;gap:14px;flex:none;min-height:100px;padding:8px 18px 8px 8px;border:5px solid var(--cream);border-radius:26px;background:linear-gradient(#fff8e2,#f3e5c2);box-shadow:0 6px 0 #0a2a1c55}
.buddy{height:104px;margin:-22px 0 -12px;filter:drop-shadow(0 4px 3px #0004);transform-origin:50% 100%}
.slots{display:flex;gap:12px}
.slot{position:relative;display:grid;place-items:center;width:84px;height:84px;padding:0;border:4px dashed #c9ad78;border-radius:20px;background:#fffdf2;color:#d07a1a;box-shadow:inset 0 3px 0 #0001}
.slot svg{width:44px;height:44px}
.slot .abc{font-size:44px;font-weight:1000;line-height:1;letter-spacing:-.02em}
.slot.is-on{animation:breathe .45s ease-in-out infinite alternate}
.slot.found{border:4px solid #2f9d5a;background:#eafbef}
.slot.found img{width:86%;height:86%;object-fit:contain}
.slot.found::after{content:"";position:absolute;right:-10px;top:-10px;width:30px;height:30px;border-radius:50%;background:#2f9d5a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;box-shadow:0 3px 0 #1d6b3b}
.dots{display:flex;gap:8px;margin-left:auto}
.dots i{width:22px;height:22px;border-radius:50%;background:#e6d6b2;box-shadow:inset 0 3px 0 #0001}
.dots i.on{background:radial-gradient(circle at 35% 30%,#ffe28a,#f6ac34 70%);box-shadow:0 3px 0 #b9792b}
/* 2.5D 草地：天空、遠山、梯形草坪（近大遠小） */
.stage{position:relative;isolation:isolate;flex:1;min-height:0;overflow:hidden;border:5px solid var(--cream);border-radius:28px;box-shadow:0 10px 26px #0a2a1c66;background:#c5e59a url(assets/egg/meadow.webp) 50% 100%/cover no-repeat}
.spot{position:absolute;width:var(--s);height:calc(var(--s)*1.3);translate:-50% -100%;touch-action:manipulation;cursor:pointer}
.spot .nest{position:absolute;left:-28%;right:-28%;bottom:calc(var(--s)*-.25);height:calc(var(--s)*1.24);background:url(assets/egg/nest.webp) center/100% 100% no-repeat;filter:drop-shadow(0 calc(var(--s)*.04) calc(var(--s)*.03) #2a4a1a55)}
.spot .rim{position:absolute;left:-28%;right:-28%;bottom:calc(var(--s)*-.25);height:calc(var(--s)*1.24);z-index:4;pointer-events:none;background:url(assets/egg/nest_front.webp) center/100% 100% no-repeat}
.egg{position:absolute;left:8%;right:8%;bottom:8%;height:86%;z-index:2;transform-origin:50% 95%}
.egg svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.egg .top{z-index:3;transform-origin:20% 55%}
.egg .bot{z-index:2}
.card{display:grid;place-items:center;width:calc(var(--s)*.74);aspect-ratio:1;border:calc(var(--s)*.025) solid #ead9b2;border-radius:16%;background:linear-gradient(160deg,#fffef8,#f2e6c8);box-shadow:0 calc(var(--s)*.03) 0 #c9ad78,0 calc(var(--s)*.06) calc(var(--s)*.06) #0a2a1c40}
.card img{width:84%;height:84%;object-fit:contain;pointer-events:none}
.card .abc{font-size:calc(var(--s)*.4);font-weight:1000;line-height:1;color:#d0601a;letter-spacing:-.03em;font-family:"Naikai",ui-rounded,system-ui,sans-serif}
.slot img{width:86%;height:86%;object-fit:contain;pointer-events:none}
.slot .tag{position:absolute;left:-10px;bottom:-10px;padding:2px 8px;border-radius:12px;background:#d0601a;color:#fff;font-size:20px;font-weight:1000;font-family:"Naikai",ui-rounded,system-ui,sans-serif}
.egg .card{position:absolute;left:50%;top:34%;z-index:1;translate:-50% 0;transform:translateY(40%) scale(.5);opacity:0}
.fx{position:absolute;z-index:200;pointer-events:none}
.fly{position:fixed;z-index:300;pointer-events:none;margin:0}
.layer{position:fixed;inset:0;z-index:60;display:grid;place-items:center;align-content:center;gap:18px;background:#0e3a28cc;text-align:center}
.layer[hidden]{display:none}
.layer .big{padding:18px 34px;border:6px solid var(--gold);border-radius:999px;background:var(--cream);font-size:30px;font-weight:1000;box-shadow:0 7px 0 #c89c52}
.layer img.cheer{height:min(34vh,260px);filter:drop-shadow(0 8px 6px #0006)}
.layer .got{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:90vw}
.layer .got .card{--s:110px}
/* 出題動畫：Let's hit… ＋分類名＋示意圖，點一下才開始 */
.intro{gap:14px;cursor:pointer}
.intro .lets{font-size:clamp(30px,6vw,52px);font-weight:1000;color:#fffdf2;font-family:"Naikai",ui-rounded,system-ui,sans-serif;text-shadow:0 4px 0 #0a2a1c}
.intro .name{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 40px;border:6px solid var(--gold);border-radius:34px;background:var(--cream);box-shadow:0 8px 0 #c89c52}
.intro .name .e{font-size:clamp(34px,7vw,64px);font-weight:1000;color:#d0601a;font-family:"Naikai",ui-rounded,system-ui,sans-serif;line-height:1.05}
.intro .name .z{display:inline-flex;font-size:clamp(28px,5vw,44px);font-weight:1000;color:var(--ink)}
.intro .pics{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:94vw}
.intro .pics .card{--s:clamp(86px,17vw,150px)}
.intro .go{margin-top:6px;padding:12px 40px;border:6px solid var(--gold);border-radius:999px;background:linear-gradient(#ffca58,#f6ac34);color:#573e1d;font-size:30px;font-weight:1000;box-shadow:0 7px 0 #b9792b}
.card .sheet,.mini .sheet{display:block;width:84%;height:84%;border-radius:12%;background-size:500% 200%}
.mini{display:grid;place-items:center;width:54px;height:54px;padding:4px;border:3px solid #ead9b2;border-radius:14px;background:#fffdf2}
.mini img,.mini .sheet{width:100%;height:100%;object-fit:contain}
.clock{display:flex;align-items:baseline;gap:4px;margin-left:auto;padding:4px 14px;border-radius:16px;background:#17593f;color:#fffdf2;font:1000 34px "Naikai",ui-rounded,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.clock small{font-size:16px;font-family:"Naikai",system-ui}
.clock+.dots{margin-left:0}
.plus{z-index:250;color:#d32f2f;font:1000 44px "Naikai",ui-rounded,system-ui,sans-serif;text-shadow:0 3px 0 #fff}
.layer .time{font-size:40px}
.newrec{padding:6px 22px;border-radius:999px;background:#d32f2f;color:#fff;font-size:28px;font-weight:1000;animation:breathe .45s ease-in-out infinite alternate}
.rec{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.rec li{display:flex;align-items:center;gap:6px;padding:4px 12px;border-radius:14px;background:#fffdf2cc;font-size:20px;font-weight:1000;font-variant-numeric:tabular-nums}
.rec li b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#e3bd70;color:#573e1d;font-size:16px}
.rec li.me{background:#ffca58;outline:3px solid #fffdf2}
.layer .got .card{--s:84px}
.layer .got .word{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none}
.layer .got .word span{padding:2px 12px;border-radius:12px;background:#fffdf2;color:#d0601a;font:1000 22px "Naikai",ui-rounded,system-ui,sans-serif}
@keyframes breathe{to{transform:scale(1.07)}}
@media(prefers-reduced-motion:reduce){*{animation-duration:0s!important}}
.ask{display:flex;align-items:center;gap:12px;padding:4px 14px;border:0;border-radius:20px;background:transparent;font-size:40px;font-weight:1000;color:var(--ink)}
.ask .q,.ask .cat{display:inline-flex;flex-wrap:nowrap;white-space:nowrap}
.ask .q{font-size:.62em;color:#8a6a3a}
.ask .cat{color:#d0601a}
.ask.is-on{animation:breathe .45s ease-in-out infinite alternate}
.eg{display:flex;gap:6px}
.dots{flex-wrap:wrap;max-width:150px;justify-content:flex-end}
.dots i{width:20px;height:20px}
.bpm-word{display:inline-flex;align-items:center;justify-content:center;flex:none;padding-right:.26em;white-space:nowrap}
.bpm-main-char{display:inline-block;flex:none;font-size:1em;line-height:1.04}
.bpm-column{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;margin-left:.05em;font-size:.4em;font-weight:850;line-height:1;color:currentColor}
.bpm-onset,.bpm-rime{display:block;line-height:1.03}
.bpm-tone{position:absolute;right:-.55em;top:85%;transform:translateY(-50%) scale(1.5,1.8);font-size:1.2em;font-weight:900;color:#d32f2f;line-height:1}
.bpm-tone-dot{position:absolute;right:0;top:-.6em;font-size:1.4em;font-weight:900;color:#d32f2f;line-height:1}
@media(max-width:900px){.clock{font-size:26px;padding:2px 8px}.mini{width:38px;height:38px;padding:2px}.bar{gap:8px}.ask{font-size:30px;gap:6px;padding:4px 6px}.dots{max-width:90px;gap:5px}.dots i{width:14px;height:14px}.buddy{height:84px}}
/* 計分制（導演 2026-10-29）：倒數秒數、本輪分數、3 輪進度點 */
.score{display:flex;align-items:center;gap:4px;padding:4px 12px;border-radius:16px;background:#ffca58;color:#573e1d;box-shadow:0 3px 0 #c9902e;font:1000 34px "Naikai",ui-rounded,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.score span{font-size:.7em;color:#d0601a}
.score b{display:inline-block;min-width:1.2em;text-align:center}
.clock.hurry{background:#d32f2f;animation:breathe .45s ease-in-out infinite alternate}
.dots i.now{background:#fff;box-shadow:0 0 0 3px #f6ac34}
.layer .rounds{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none}
.layer .rounds li{display:flex;align-items:center;gap:10px;padding:6px 14px;border-radius:16px;background:#fffdf2;color:#573e1d;font:1000 24px "Naikai",ui-rounded,system-ui,sans-serif}
.layer .rounds li b{display:grid;place-items:center;min-width:38px;height:38px;border-radius:50%;background:#ffca58;color:#573e1d;font-size:22px}
@media(max-width:900px){.score{font-size:26px;padding:2px 8px}.layer .rounds li{font-size:18px;padding:4px 10px}}
/* 直式窄螢幕：計分制多了分數框，資訊列可換行、示意小圖收起（2026-10-29） */
@media(max-width:700px){.bar{flex-wrap:wrap;row-gap:4px;padding-right:10px}.eg{display:none}.ask{font-size:26px}.buddy{height:70px;margin:-14px 0 -8px}.clock,.score{font-size:22px}}
/* 結算畫面圖卡變多（3 輪）：內容超出時可捲動，上緣不被切掉 */
#done{align-content:safe center;overflow-y:auto;padding:24px 12px}
#done .cheer{flex:none}