:root{--bg: #1a1a2e;--bg-card: rgba(30, 30, 52, .96);--bg-modal: rgba(22, 22, 40, .98);--border: rgba(58, 58, 90, .5);--border-hi: rgba(232, 160, 64, .3);--warm: #e8a040;--warm-dim: rgba(208, 128, 48, .5);--warm-faint: rgba(208, 128, 48, .12);--text: #d0d4de;--text-dim: #7a8098;--green: #5cb870;--red: #d05848;--font-zh: "Noto Serif TC", serif;--font-en: "DM Sans", sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{background:var(--bg);font-family:var(--font-en);color:var(--text);-webkit-font-smoothing:antialiased}body{min-height:100vh}#app{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}#hero{padding:clamp(48px,10vw,100px) 0 clamp(32px,6vw,60px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}.hero-zh{font-family:var(--font-zh);font-weight:900;font-size:clamp(64px,14vw,140px);color:var(--text);line-height:1;letter-spacing:-.02em}.hero-en{font-size:clamp(12px,1.4vw,16px);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--warm);margin-top:8px}.hero-sub{font-size:clamp(14px,1.6vw,18px);font-weight:300;color:var(--text-dim);margin-top:12px;line-height:1.5}.hero-stats{display:flex;align-items:center;gap:12px;flex-shrink:0}.mode-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text-dim);font-family:var(--font-en);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,color .3s}.mode-btn:hover{border-color:var(--warm-dim);color:var(--text)}.mode-icon{font-size:14px}#progress-hud{padding:8px 16px;border:1px solid var(--border);border-radius:6px;font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--warm)}#food-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,20px);padding-bottom:clamp(48px,8vw,100px)}.food-card{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg-card);cursor:pointer;transition:border-color .35s,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}.food-card:hover{border-color:var(--border-hi);transform:translateY(-4px);box-shadow:0 8px 30px #0000004d,0 0 0 1px var(--border-hi)}.food-card.studied{border-color:#5cb87040}.food-card.studied:after{content:"✓";position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:2}.card-photo{position:relative;aspect-ratio:1;overflow:hidden;background:#2a2a4a4d}.card-img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-select:none;user-select:none;transition:transform .5s cubic-bezier(.22,1,.36,1)}.food-card:hover .card-img{transform:scale(1.05)}.card-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-zh);font-size:48px;font-weight:900;color:var(--warm-faint)}.card-number{position:absolute;top:10px;left:10px;width:26px;height:26px;border-radius:50%;background:#0a0a16a6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.08);color:var(--text-dim);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:2}.overlay{position:fixed;inset:0;z-index:200;background:#0a0a16eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:clamp(20px,4vw,60px) clamp(12px,3vw,24px);animation:overlayIn .3s ease}.modal-panel{width:min(96vw,600px);border:1px solid var(--border);border-radius:10px;background:var(--bg-modal);position:relative;overflow:hidden;animation:modalIn .35s cubic-bezier(.22,1,.36,1)}.modal-close{position:absolute;top:12px;right:12px;z-index:10;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:#1a1a2ecc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--text-dim);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s,color .3s;font-family:var(--font-en);line-height:1}.modal-close:hover{border-color:var(--warm-dim);color:var(--text)}.photo-row{display:block}.photo-slot{aspect-ratio:16 / 9;overflow:hidden;background:#2a2a4a4d}.photo-slot img{width:100%;height:100%;object-fit:cover;display:block}.photo-placeholder{aspect-ratio:16 / 9;display:flex;align-items:center;justify-content:center;background:#2a2a4a33;font-family:var(--font-zh);font-size:48px;font-weight:900;color:var(--warm-faint)}.modal-body{padding:clamp(20px,4vw,32px)}.modal-zh{font-family:var(--font-zh);font-weight:900;font-size:clamp(36px,7vw,52px);color:var(--text);line-height:1.1;margin-bottom:4px}.modal-en{font-size:13px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--warm-dim);margin-bottom:clamp(20px,3vw,32px)}.detail-section{margin-bottom:clamp(20px,3vw,28px)}.label{display:block;font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--warm);margin-bottom:10px}.pill-row{display:flex;flex-wrap:wrap;gap:6px}.ingredient-pill{padding:4px 12px;border:1px solid var(--border);border-radius:100px;font-size:12px;color:var(--text-dim);transition:border-color .3s,color .3s}.ingredient-pill:hover{border-color:var(--warm-dim);color:var(--text)}.body-text{font-size:14px;line-height:1.75;color:var(--text-dim)}.trivia-q{font-style:italic;color:var(--text)}.trivia-a{margin-top:10px;color:var(--green);font-weight:500}.reveal-btn{margin-top:10px;padding:6px 16px;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--text-dim);font-family:var(--font-en);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,color .3s}.reveal-btn:hover{border-color:var(--warm);color:var(--warm)}.quiz-cta{width:100%;padding:14px;margin-top:8px;border:1px solid var(--warm-dim);border-radius:6px;background:var(--warm-faint);color:var(--warm);font-family:var(--font-en);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .3s,border-color .3s}.quiz-cta:hover{background:#d0803033;border-color:var(--warm)}.quiz-modal .modal-body{text-align:center}.quiz-prompt{font-size:16px;font-weight:500;color:var(--text);margin-bottom:18px;line-height:1.5}.quiz-choices{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.quiz-choice{padding:12px 18px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text-dim);font-family:var(--font-en);font-size:14px;cursor:pointer;text-align:left;transition:border-color .3s,color .3s,background .3s}.quiz-choice:hover{border-color:var(--warm-dim);color:var(--text)}.quiz-choice.correct{border-color:var(--green);color:var(--green);background:#5cb87014}.quiz-choice.wrong{border-color:var(--red);color:var(--red);background:#d0584814}.quiz-choice.disabled{pointer-events:none;opacity:.4}.quiz-choice.reveal{border-color:var(--green);opacity:1!important;color:var(--green)}.quiz-feedback{font-size:14px;font-weight:500;margin-bottom:14px;padding:10px 14px;border-radius:6px;text-align:center}.quiz-feedback.correct-fb{color:var(--green);border:1px solid rgba(92,184,112,.3);background:#5cb8700f}.quiz-feedback.wrong-fb{color:var(--red);border:1px solid rgba(208,88,72,.3);background:#d058480f}.quiz-next{padding:10px 28px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--warm-dim);font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,color .3s}.quiz-next:hover{border-color:var(--warm);color:var(--warm)}.hidden{display:none!important}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}@keyframes modalIn{0%{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:900px){#food-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:640px){#food-grid{grid-template-columns:repeat(2,1fr)}#hero{flex-direction:column;align-items:flex-start}.hero-stats{width:100%}.modal-panel{border-radius:8px}.photo-slot{aspect-ratio:4 / 3}}@media(max-width:400px){#food-grid{grid-template-columns:1fr}.card-number{width:22px;height:22px;font-size:10px}}