/* 乐安爷爷的认真餐厅 · 触控大屏 1920x1080 */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #2b1d12; font-family: "YouYuan", "幼圆", "Microsoft YaHei", "PingFang SC", sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
button { font-family: inherit; cursor: pointer; border: none; }
#viewport { position: fixed; inset: 0; }
#stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: center; overflow: hidden; background: #fff8ea; }
#scene, #fx, .world { position: absolute; inset: 0; }
#fx { pointer-events: none; z-index: 50; }
.hidden { display: none !important; }
.abs { position: absolute; transform: translate(-50%, -50%); }
.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dim { position: absolute; inset: 0; background: rgba(255, 248, 234, .55); }
.fade-in { animation: fadeIn .6s ease; }
@keyframes fadeIn { from { opacity: 0; } }

/* 按钮 */
.big-btn { z-index: 20; padding: 22px 54px; font-size: 44px; font-weight: bold; color: #fff; border-radius: 60px;
  background: linear-gradient(#ffb347, #f07b1d); box-shadow: 0 10px 0 #b8540c, 0 16px 30px rgba(0,0,0,.25); white-space: nowrap; letter-spacing: 2px; }
.big-btn:active { transform: translate(-50%, -50%) translateY(8px); box-shadow: 0 2px 0 #b8540c; }
.big-btn.xl { font-size: 60px; padding: 28px 80px; }
.big-btn.serve { z-index: 9; background: linear-gradient(#7fd36b, #3f9f33); box-shadow: 0 10px 0 #2b7222, 0 16px 30px rgba(0,0,0,.25); font-size: 40px; padding: 16px 44px; }
.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: translate(-50%, -50%) scale(1.08); } }
.hint-hand { font-size: 110px; z-index: 30; pointer-events: none; animation: tapHand 1s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(0,0,0,.3)); }
@keyframes tapHand { 50% { transform: translate(-40%, -30%) scale(.9); } }
.scene-title { z-index: 5; padding: 14px 46px; font-size: 46px; font-weight: bold; color: #7a3f12; background: rgba(255, 250, 238, .92);
  border: 5px solid #f0c27a; border-radius: 50px; white-space: nowrap; box-shadow: 0 6px 16px rgba(120, 70, 20, .2); }

/* 封面 */
.float-food { animation: floaty 3s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(0,0,0,.2)); cursor: pointer; }
@keyframes floaty { 50% { transform: translate(-50%, -62%) rotate(6deg); } }
.cover-sub { font-size: 40px; color: #8a4b1f; background: rgba(255,255,255,.8); padding: 8px 36px; border-radius: 40px; white-space: nowrap; }

/* 乐安爷爷 */
.grandpa { position: absolute; transform: translate(-50%, -100%); z-index: 10; aspect-ratio: 9 / 16; }
.gp-body { position: absolute; inset: 0; transform-origin: 50% 100%; animation: breathe 2.6s ease-in-out infinite; }
.gp-img { position: absolute; bottom: 0; left: 50%; height: 100%; transform: translateX(-50%); filter: drop-shadow(0 12px 12px rgba(80, 40, 10, .25)); pointer-events: auto; cursor: pointer; }
@keyframes breathe { 50% { transform: scale(1.015, .985); } }
.grandpa.talking .gp-body { animation: talkBob .5s ease-in-out infinite; }
@keyframes talkBob { 50% { transform: translateY(-6px) rotate(.8deg); } }
.grandpa.walking .gp-body { animation: walkBob .35s ease-in-out infinite; }
@keyframes walkBob { 50% { transform: translateY(-22px) rotate(-3deg); } }
.bubble { position: absolute; bottom: 88%; width: 560px; padding: 24px 30px; font-size: 34px; line-height: 1.45; color: #5b3515;
  background: #fffdf6; border: 5px solid #f0c27a; border-radius: 34px; box-shadow: 0 10px 24px rgba(0,0,0,.18); animation: pop .3s ease; z-index: 12; }
.bubble.right { left: 62%; }
.bubble.right::after { content: ""; position: absolute; left: 36px; bottom: -30px; border: 16px solid transparent; border-top: 18px solid #f0c27a; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
#subtitle { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); max-width: 1500px; width: max-content; padding: 12px 40px; z-index: 60;
  font-size: 38px; line-height: 1.4; color: #fff; background: rgba(60, 35, 12, .78); border-radius: 26px; border: 3px solid rgba(255, 220, 150, .6); opacity: 0; transition: opacity .3s; pointer-events: none; text-align: center; }
#subtitle.on { opacity: 1; }
/* 爷爷有气泡时字幕只作兜底，隐藏 */
#stage:has(.bubble:not(.hidden)) #subtitle { opacity: 0; }

/* 情境导入 */
.door-hole { position: absolute; border-radius: 68px 68px 0 0; overflow: visible; perspective: 700px; cursor: pointer; z-index: 3;
  background: radial-gradient(ellipse at 50% 70%, #fff3b0, #ffb34a 55%, #7a3a10); }
.door-panel { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 0 50%; transition: transform 1s cubic-bezier(.5, 0, .3, 1); }
.door-hole.open .door-panel { transform: rotateY(-105deg); }
.door-hole.open { box-shadow: 0 0 80px 40px rgba(255, 220, 120, .9); transition: box-shadow 1s; }
.knock-tip { z-index: 5; font-size: 40px; font-weight: bold; color: #7a3f12; background: #fffaf0; padding: 12px 30px; border-radius: 40px; border: 4px solid #f0c27a; white-space: nowrap; animation: pulse 1.4s infinite; }
.dong { font-size: 70px; font-weight: 900; color: #d9573b; -webkit-text-stroke: 3px #fff; z-index: 6; pointer-events: none; }
.question-card { z-index: 15; width: 820px; padding: 34px 44px; font-size: 44px; line-height: 1.5; color: #5b3515; background: #fffdf6;
  border: 6px dashed #f0a94a; border-radius: 36px; box-shadow: 0 14px 30px rgba(0,0,0,.2); }
.question-card b { display: block; margin-bottom: 8px; color: #e0701c; }
/* 五个食物家族 */
.fam-box { width: 230px; z-index: 6; cursor: pointer; animation: boxIdle 2.4s ease-in-out infinite; }
.fam-box img { width: 100%; display: block; filter: drop-shadow(0 12px 10px rgba(80, 40, 10, .3)); pointer-events: none; }
@keyframes boxIdle { 50% { transform: translate(-50%, -53%); } }
.fam-box.opened, .fam-box.open { animation: none; }
.fam-label { margin-top: 6px; text-align: center; font-size: 32px; font-weight: bold; color: #fff; background: var(--c); border-radius: 30px; padding: 4px 0; box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.tick { position: absolute; right: -14px; top: -14px; width: 64px; height: 64px; line-height: 64px; text-align: center; font-size: 42px; color: #fff; background: #4caf50; border-radius: 50%; border: 5px solid #fff; animation: pop .4s; }
.food-shelf { position: absolute; left: 400px; right: 40px; top: 150px; padding: 18px 30px 26px; z-index: 8; background: rgba(255, 252, 244, .94);
  border: 6px solid var(--c); border-radius: 40px; box-shadow: 0 14px 30px rgba(0,0,0,.18); }
.shelf-title { font-size: 42px; font-weight: bold; color: var(--c); text-align: center; margin-bottom: 10px; filter: brightness(.8); }
.shelf-row { display: flex; justify-content: center; gap: 26px; }
.food-card { width: 200px; text-align: center; cursor: pointer; }
.food-card img { width: 180px; height: 180px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0,0,0,.2)); pointer-events: none; }
.food-card span { display: block; font-size: 36px; font-weight: bold; color: #5b3515; }

/* 膳食宝塔 */
.pyr-slot { border: 5px dashed rgba(160, 110, 50, .5); border-radius: 18px; background: rgba(255,255,255,.35); z-index: 4; display: flex; align-items: center; justify-content: center; }
.pyr-slot i { font-style: normal; font-size: 50px; color: rgba(160, 110, 50, .5); font-weight: bold; }
.pyr-slot.next { border-color: #f07b1d; background: rgba(255, 200, 120, .45); animation: slotGlow 1s infinite; }
@keyframes slotGlow { 50% { box-shadow: 0 0 30px 6px rgba(255, 170, 60, .8); } }
.pyr-layer { z-index: 5; display: flex; align-items: center; justify-content: center; gap: 16px; border-radius: 18px;
  background: linear-gradient(color-mix(in srgb, var(--c) 35%, #fff), color-mix(in srgb, var(--c) 60%, #fff)); border: 5px solid var(--c); box-shadow: 0 8px 0 rgba(0,0,0,.12); }
.pyr-name { font-size: 34px; color: #4a2c10; white-space: nowrap; text-align: center; line-height: 1.1; }
.pyr-name small { display: block; font-size: 24px; color: #7a4a20; }
.pyr-foods { display: flex; gap: 6px; }
.pyr-foods img { height: 96px; width: 96px; object-fit: contain; }
.pyr-pick { width: 330px; height: 128px; display: flex; align-items: center; gap: 14px; padding: 0 20px; background: #fffaf0; border: 6px solid var(--c); border-radius: 30px; z-index: 6; box-shadow: 0 8px 0 rgba(0,0,0,.12); }
.pyr-pick img { height: 100px; }
.pyr-pick span { font-size: 36px; font-weight: bold; color: #5b3515; }
.pyr-pick.used { opacity: .25; filter: grayscale(1); }
.pyr-pick.gone { display: none; }
.rhyme { z-index: 8; width: 440px; padding: 20px 26px; background: rgba(255, 252, 244, .95); border: 6px solid #f0c27a; border-radius: 30px; }
.rhyme-line { font-size: 44px; font-weight: bold; color: #8a4b1f; line-height: 1.6; opacity: 0; }

/* 食物找家 */
.star-bar { z-index: 6; font-size: 50px; color: #e0a020; background: rgba(255,255,255,.85); padding: 6px 24px; border-radius: 40px; white-space: nowrap; }
.star-bar span.got { animation: pop .4s; display: inline-block; }
.fam-box.hover { filter: brightness(1.15); transform: translate(-50%, -50%) scale(1.1); transition: transform .15s; }
.fam-box.glow img { filter: drop-shadow(0 0 30px #ffe066) drop-shadow(0 0 20px #ffb300); }
.food-token { width: 220px; text-align: center; z-index: 20; cursor: grab; animation: bob 2.2s ease-in-out infinite; touch-action: none; }
.food-token img { width: 190px; height: 190px; padding: 14px; object-fit: contain; pointer-events: none; border-radius: 50%;
  background: radial-gradient(rgba(255,255,255,.95) 55%, rgba(255,255,255,0) 71%); filter: drop-shadow(0 10px 10px rgba(0,0,0,.2)); }
.food-token span { display: inline-block; margin-top: -10px; font-size: 34px; font-weight: bold; color: #5b3515; background: #fffaf0; padding: 2px 20px; border-radius: 24px; pointer-events: none; }
@keyframes bob { 50% { translate: 0 -16px; } }
.food-token.dragging { animation: none; z-index: 40; transform: translate(-50%, -50%) scale(1.15); cursor: grabbing; }
.food-token.snapback { transition: left .4s cubic-bezier(.3, 1.6, .6, 1), top .4s cubic-bezier(.3, 1.6, .6, 1); }
.food-token.small { width: 120px; animation: none; }
.food-token.small img { width: 110px; height: 110px; padding: 8px; }
.food-token.small span { font-size: 24px; padding: 0 10px; }

/* 小动物点餐 */
.pet { width: 380px; z-index: 6; filter: drop-shadow(0 12px 10px rgba(0,0,0,.25)); }
.pet.small { width: 300px; }
.order-card { z-index: 7; width: 460px; padding: 18px 20px; text-align: center; background: #fffaf0; border: 6px solid #c98a4a; border-radius: 22px; box-shadow: 0 10px 20px rgba(0,0,0,.2); }
.order-card b { font-size: 38px; color: #8a4b1f; }
.order-card .dish { font-size: 30px; color: #b0602a; margin: 4px 0 10px; }
.need { display: flex; justify-content: center; gap: 10px; }
.need-item { width: 100px; position: relative; opacity: .55; }
.need-item img { width: 88px; height: 88px; object-fit: contain; }
.need-item span { display: block; font-size: 22px; color: #5b3515; }
.need-item.ok { opacity: 1; }
.need-item.ok::after { content: "✓"; position: absolute; right: 0; top: -6px; width: 40px; height: 40px; line-height: 40px; font-size: 28px; color: #fff; background: #4caf50; border-radius: 50%; animation: pop .3s; }
.plate { width: 640px; z-index: 5; }
.plate > img { width: 100%; display: block; filter: drop-shadow(0 16px 16px rgba(0,0,0,.25)); }
.zone { position: absolute; transform: translate(-50%, -50%); display: flex; gap: 2px; }
.zone .mini { width: 78px; height: 78px; object-fit: contain; cursor: pointer; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
.lights { z-index: 6; display: flex; gap: 12px; }
.light { padding: 6px 18px; font-size: 26px; font-weight: bold; color: #9b8b7a; background: #eee4d4; border-radius: 30px; border: 4px solid #d8cbb6; transition: all .3s; }
.light.on { color: #fff; background: var(--c); border-color: #fff; box-shadow: 0 0 20px var(--c); }
.tray { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: linear-gradient(transparent 80%, rgba(120, 70, 20, .4)); }
.tray .food-token { pointer-events: auto; }
.eat-anim { z-index: 5; filter: drop-shadow(0 16px 16px rgba(0,0,0,.25)); }

/* 奖章 */
.medal { width: 300px; z-index: 8; text-align: center; }
.medal img { width: 100%; filter: drop-shadow(0 0 40px rgba(255, 220, 80, .9)); animation: swing 2.5s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes swing { 50% { transform: rotate(5deg); } }
.medal-text { font-size: 54px; white-space: nowrap; font-weight: 900; color: #c0392b; -webkit-text-stroke: 2px #fff; margin-top: -30px; }
.result { z-index: 8; font-size: 38px; color: #5b3515; background: rgba(255,255,255,.9); padding: 10px 36px; border-radius: 40px; white-space: nowrap; }
.result b { color: #e0701c; font-size: 48px; }
.home-task { width: 820px; font-size: 36px; }
/* 全局按钮与导航 */
.float-btn { position: absolute; left: 24px; top: 24px; z-index: 70; width: 150px; height: 172px; border-radius: 36px; background: #fffaf0;
  border: 6px solid #f0a94a; box-shadow: 0 10px 20px rgba(0,0,0,.25); animation: askWiggle 3s ease-in-out infinite; }
.float-btn img { width: 116px; height: 116px; object-fit: cover; object-position: top; border-radius: 50%; display: block; margin: 4px auto 0; pointer-events: none; }
.float-btn span { font-size: 28px; font-weight: bold; color: #e0701c; }
@keyframes askWiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-6deg); } 90% { transform: rotate(6deg); } 95% { transform: rotate(-3deg); } }
#teacherNav { position: absolute; right: 0; bottom: 0; z-index: 80; display: flex; align-items: center; gap: 4px;
  padding: 4px 10px; background: rgba(40, 25, 10, .25); border-radius: 18px 0 0 0; opacity: .3; transition: opacity .3s; }
#teacherNav:hover, #teacherNav:focus-within { opacity: 1; }
#teacherNav button { width: 52px; height: 44px; font-size: 28px; color: #fff; background: rgba(255,255,255,.2); border-radius: 12px; }
#navTitle { color: #fff; font-size: 22px; padding: 0 12px; white-space: nowrap; }

/* 问问乐安爷爷 */
#askPanel, #teacherPanel { position: absolute; inset: 0; z-index: 90; background: rgba(40, 25, 10, .55); animation: fadeIn .25s; }
.ask-box { position: absolute; left: 90px; right: 90px; top: 60px; bottom: 60px; background: #fff8ea url("../assets/背景_厨房.webp") center/cover;
  border: 8px solid #f0c27a; border-radius: 50px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.ask-box::before { content: ""; position: absolute; inset: 0; background: rgba(255, 250, 238, .78); }
.ask-close { position: absolute; right: 26px; top: 22px; z-index: 5; width: 80px; height: 80px; font-size: 44px; color: #fff; background: #e0701c; border-radius: 50%; }
.ask-title { position: absolute; left: 36px; top: 22px; z-index: 2; font-size: 44px; font-weight: bold; color: #8a4b1f; }
.ask-left { position: absolute; left: 0; top: 110px; width: 420px; bottom: 10px; overflow: hidden; }
.ask-log { position: absolute; left: 430px; right: 28px; top: 112px; bottom: 328px; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 6px 18px 12px 8px; z-index: 2; }
.ask-log .msg { max-width: 86%; padding: 12px 22px; font-size: 30px; line-height: 1.4; border-radius: 24px; animation: pop .25s; user-select: text; flex-shrink: 0; }
.msg { max-width: 82%; padding: 18px 28px; font-size: 38px; line-height: 1.45; border-radius: 30px; animation: pop .25s; user-select: text; }
.msg.gp { align-self: flex-start; background: #fffdf6; border: 4px solid #f0c27a; color: #5b3515; border-top-left-radius: 6px; }
.msg.kid { align-self: flex-end; background: #7fc8f8; color: #fff; border-top-right-radius: 6px; }
.msg.tip { align-self: center; font-size: 28px; color: #9c8672; }
.msg.fam { align-self: flex-start; display: flex; align-items: center; gap: 14px; background: none; border: none; padding: 0; font-size: 32px; font-weight: bold; color: #8a4b1f; }
.msg.fam img { height: 84px; width: auto; animation: pop .5s; }
.ask-bottom { position: absolute; left: 430px; right: 24px; bottom: 16px; height: 300px; z-index: 2; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding-right: 186px; box-sizing: border-box; }
.chip-title { font-size: 20px; line-height: 1.2; color: #9c8672; margin-top: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 24px; padding: 5px 16px; color: #8a4b1f; background: #fff; border: 3px solid #f0c27a; border-radius: 24px; }
.chip-foods { display: flex; gap: 10px; }
.chip-food { width: 72px; height: 72px; padding: 4px; background: #fff; border: 3px solid #f0c27a; border-radius: 18px; flex-shrink: 0; }
.chip-food img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.mic { position: absolute; right: 0; bottom: 0; width: 168px; height: 168px; border-radius: 50%; background: radial-gradient(#fff, #ffe2b8); border: 7px solid #f07b1d; box-shadow: 0 8px 0 #b8540c; touch-action: none; }
.mic img { width: 78px; height: 78px; object-fit: contain; pointer-events: none; }
.mic span { display: block; font-size: 24px; font-weight: bold; color: #e0701c; pointer-events: none; }
.mic.rec { animation: rec 1s infinite; background: radial-gradient(#fff, #ffb3a0); }
@keyframes rec { 50% { box-shadow: 0 0 0 30px rgba(240, 123, 29, .25), 0 10px 0 #b8540c; } }
.ask-type { display: flex; gap: 8px; width: 100%; }
.ask-type input { flex: 1; min-width: 0; font-size: 24px; padding: 8px 16px; border: 3px solid #e6cfa6; border-radius: 18px; font-family: inherit; }
.ask-type button { font-size: 24px; padding: 0 20px; color: #fff; background: #f0a94a; border-radius: 18px; }

/* 教师工作台 */
.t-box { position: absolute; left: 260px; right: 260px; top: 60px; bottom: 60px; padding: 36px 50px; background: #fffdf6; border-radius: 30px; overflow-y: auto; font-family: "Microsoft YaHei", sans-serif; color: #4a3322; user-select: text; }
.t-box h2 { font-size: 40px; margin-bottom: 18px; }
.t-box h3 { font-size: 28px; margin: 22px 0 10px; }
.t-box p { font-size: 24px; line-height: 1.6; }
.t-tabs { display: flex; gap: 10px; border-bottom: 3px solid #f0e0c4; margin-bottom: 20px; }
.t-tabs button { font-size: 26px; padding: 12px 26px; background: none; color: #8a6a4a; border-bottom: 5px solid transparent; }
.t-tabs button.on { color: #e0701c; border-bottom-color: #e0701c; font-weight: bold; }
.t-body label { display: inline-flex; flex-direction: column; gap: 6px; font-size: 24px; margin: 0 20px 16px 0; }
.t-body label.wide { display: flex; }
.t-body input, .t-body textarea, .t-body select { font-size: 24px; padding: 10px 14px; border: 2px solid #e6cfa6; border-radius: 12px; font-family: inherit; }
.t-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0; }
.t-actions button, .t-scenes button, .t-lines button { font-size: 24px; padding: 12px 24px; background: #f5ead6; color: #6a4a2a; border-radius: 14px; }
.t-actions button.primary { background: #f07b1d; color: #fff; }
.t-scenes, .t-lines { display: flex; flex-wrap: wrap; gap: 10px; }
.t-scenes button.on { background: #f07b1d; color: #fff; }
.t-stats { display: flex; gap: 16px; }
.t-stats div { flex: 1; text-align: center; padding: 14px; background: #fff4e0; border-radius: 16px; font-size: 22px; }
.t-stats b { display: block; font-size: 44px; color: #e0701c; }
.t-out { white-space: pre-wrap; font-size: 24px; line-height: 1.7; padding: 16px 20px; background: #faf5ea; border-radius: 16px; min-height: 60px; }
.t-out:empty { display: none; }
.toast { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); z-index: 100; padding: 12px 36px; font-size: 28px; color: #fff; background: rgba(40,25,10,.8); border-radius: 30px; }

.particle { position: absolute; font-size: 56px; pointer-events: none; }

.credit { font-size: 20px; color: #9c8672; white-space: nowrap; }