@charset "UTF-8"; :root{--ink:#2e4537;--muted:#7d8575;--green:#355b42;--green-dark:#254532;--paper:#f8f5eb;--line:#dedecb;--rust:#bd7459;--chapter:#627654;--serif:"STKaiti","KaiTi","Noto Serif SC","SimSun",serif;--sans:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color-scheme:light;font-family:var(--sans);color:var(--ink);font-synthesis:none;background:var(--paper)} *{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 3% 12%,#e8eddc70,transparent 38%),var(--paper);font-size:15px;line-height:1.6}button,input{font:inherit}button{color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button,a,input{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b48942}button{border:0;background:none}img{max-width:100%;object-fit:contain;user-select:none}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{font-weight:600}h1,h2,h3{letter-spacing:.03em}h1{font-family:var(--serif);font-size:44px;line-height:1.4}h2{font-size:24px}p{color:var(--muted)}svg{flex-shrink:0}.icon{width:20px;height:20px;vertical-align:middle;display:inline-block}button{transition:background .16s,box-shadow .16s,transform .16s}button:not(:disabled):active{transform:translateY(1px)}.page{width:min(1320px,calc(100% - 96px));margin:0 auto}.site-header{width:min(1400px,calc(100% - 80px));height:102px;margin:auto;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:30px}.brand{display:flex;align-items:center;gap:12px;text-align:left;padding:0}.brand-mark{background:var(--green);color:#f5f0d9;border-radius:13px 13px 10px 10px;padding:6px 12px;font-family:var(--serif);font-size:19px;line-height:1.1;position:relative;outline:1px solid #839679;outline-offset:3px}.brand b{display:block;font-family:var(--serif);font-size:26px;letter-spacing:.08em}.brand small{display:block;font-size:13px;color:var(--muted);letter-spacing:.2em}.site-header nav{display:flex;gap:12px;margin-left:auto;height:100%;align-items:center}.nav-link{display:flex;align-items:center;gap:8px;border-radius:30px;padding:11px 17px;font-size:15px;color:#818777;white-space:nowrap}.nav-link.active{background:#e8eddf;color:var(--green)}.nav-link:hover{background:#eeeee1}.nav-link .icon{width:18px;height:18px}.nav-link i{font-style:normal;background:#dce3d1;min-width:20px;padding:0 5px;text-align:center;border-radius:6px;font-size:13px}.icon-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fffdf480}.icon-button:hover{background:#e8eddf}.site-footer{max-width:1320px;margin:48px auto 0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 0 28px;border-top:1px solid var(--line);font-size:13px;letter-spacing:.05em;color:#939886}.site-footer button{color:#79836d;display:flex;align-items:center;gap:5px}.site-footer .icon{width:15px;height:15px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:50px;padding:12px 25px;border-radius:10px;font-weight:600;font-size:15px;white-space:nowrap}.btn.primary{background:var(--green);color:#fffcf0;box-shadow:0 5px 0 #29473415}.btn.primary:hover{background:var(--green-dark);box-shadow:0 7px 18px #33584325}.btn.secondary{border:1px solid #ced3bc;background:#fffdf6;color:#486246}.btn.secondary:hover{background:#ecf0e3}.btn.subtle{background:#eceee2}.btn.small{min-height:44px;padding:8px 17px}.btn:disabled{opacity:.5;box-shadow:none}.btn.wide{width:100%;margin-top:12px}.text-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;color:#667c59;font-size:14px;padding:10px 3px;min-height:44px}.text-button:hover{color:var(--green-dark)}.text-button:disabled{opacity:.4}.back-link{display:inline-flex;gap:6px;align-items:center;color:#7e8871;padding:0;margin:28px 0 25px;min-height:44px;font-size:14px}.eyebrow{display:block;color:#889078;font-size:13px;font-weight:600;letter-spacing:.18em;line-height:1.5}.eyebrow i{display:inline-block;width:6px;height:6px;background:#91a46b;border-radius:50%;margin-right:8px;vertical-align:middle}.hero{position:relative;min-height:465px;display:flex;align-items:center;margin:24px -5px 10px;isolation:isolate}.hero-copy{position:relative;width:49%;padding:22px 0;z-index:2}.hero h1{font-size:clamp(40px,4.1vw,60px);line-height:1.33;margin:20px 0 18px;letter-spacing:.055em}.hero h1 span{color:#718455}.hero-copy>p{font-size:14px;line-height:2.1;color:#7b8571}.hero-actions{display:flex;align-items:center;gap:26px;margin-top:25px}.hero-actions .primary{min-width:166px}.hero-art{position:absolute;right:-25px;top:-5px;width:83%;height:460px;z-index:0;pointer-events:none}.hero-art>img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.journey{margin-top:10px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:22px}.section-heading h2{font-size:25px;font-family:var(--serif);margin-top:7px}.journey-progress{display:flex;align-items:center;gap:16px;color:#899077;font-size:13px}.journey-progress b{color:var(--green);font-size:19px;font-weight:500}.tiny-progress{width:105px;height:4px;background:#e0e5d4;border-radius:5px;overflow:hidden}.tiny-progress i{display:block;height:100%;background:#87946d}.chapter-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.chapter-tab{display:flex;align-items:center;gap:12px;padding:14px;text-align:left;border:1px solid var(--line);background:#fffdf480;border-radius:10px;min-width:0}.chapter-tab.active{background:var(--green);border-color:var(--green);color:#faf5e5;box-shadow:0 4px 8px #3e4f3310}.chapter-tab .chapter-symbol{font-family:var(--serif);font-size:28px;border-right:1px solid #d5dbc660;padding-right:12px;color:#78885e;line-height:1.2}.chapter-tab.active .chapter-symbol{color:#ecedbc}.chapter-tab b{display:block;font-size:14px;letter-spacing:.03em}.chapter-tab small{display:block;font-size:13px;color:#969c86;margin-top:4px;white-space:nowrap}.chapter-tab.active small{color:#c0cbb2}.chapter-tab>.icon{width:12px;height:12px;margin-left:auto;color:#a3aa91}.chapter-tab:hover:not(.active){background:#eaf0df}.chapter-intro{display:flex;justify-content:space-between;align-items:center;margin:25px 0 18px;padding:0 3px}.chapter-label{font-size:13px;color:var(--chapter);letter-spacing:.1em}.chapter-intro h3{font-size:19px;font-family:var(--serif);display:inline-block;margin:0 12px}.chapter-intro p{font-size:13px;margin-top:5px}.chapter-reward{display:flex;align-items:center;gap:11px;font-size:13px;line-height:1.8;color:#8e967d}.chapter-reward img{width:47px;height:47px}.chapter-reward b{font-weight:500;font-size:13px;color:#6e7c5f}.level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,300px));justify-content:center;gap:15px}.level-card{background:#fffdf6;border:1px solid #dfdfcc;border-radius:14px;min-width:0;overflow:hidden;padding:15px 16px 16px;text-align:left;position:relative}.level-card.current{border:1.5px solid #8a9d6e;box-shadow:0 5px 19px #5c6f3b0d}.level-card:hover{transform:translateY(-3px);box-shadow:0 8px 18px #515c2510}.level-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#8b937b}.level-top .icon{width:14px;height:14px}.review-tag{background:#eeeada;color:#9b9272;border-radius:4px;padding:1px 5px;font-size:13px}.level-card>img{display:block;width:100%;height:137px;object-fit:contain;margin:5px auto;transition:transform .2s}.level-card:hover>img{transform:translateY(-3px)}.level-card>strong{font-size:14px;display:block;margin-top:6px;text-align:center;font-weight:600}.level-bottom{display:flex;align-items:center;justify-content:space-between;font-size:13px;border-top:1px solid #e5e4d5;margin-top:14px;padding-top:11px;color:#989c88;min-height:29px}.level-bottom b{color:#617f43;font-weight:500;font-size:13px}.level-card.locked{background:#f5f2e8}.level-card.locked>img{opacity:.72}.stars{display:inline-flex;gap:4px;color:#d9dac7;line-height:1;font-size:16px}.stars .earned{color:#c3a05d;text-shadow:0 2px 4px #b6873330}.home-bottom{display:flex;justify-content:space-between;gap:30px;border-top:1px solid #e0e1cd;margin-top:32px;padding-top:24px}.host-message{display:flex;align-items:center;gap:17px}.host-message img{width:68px;height:68px}.host-message h3{font-size:13px;margin-bottom:5px}.host-message p{font-size:13px;color:#969b85}.collection-teaser{display:flex;gap:15px;align-items:center;min-width:248px;background:#edefe0;border:1px solid #e0e4cf;padding:14px 21px;border-radius:11px;text-align:left}.book-emblem{background:#e1e7d0;border-radius:9px;width:37px;height:42px;display:grid;place-items:center;color:#718258}.collection-teaser small{font-size:13px;display:block;color:#8a9479}.collection-teaser b{display:block;font-size:19px;font-weight:500}.collection-teaser em{font-style:normal;font-size:13px;color:#919a80}.collection-teaser>.icon{margin-left:auto;width:17px;color:#7f8f6b}.panel{border:1px solid var(--line);background:#fffdf6;border-radius:19px;padding:28px}.panel-title{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:20px}.panel-title h2{font-size:20px;font-family:var(--serif)}.panel-title>span{font-size:13px;color:var(--muted)}.brief-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.brief-top h1{margin:6px 0 8px;font-size:38px}.brief-top p{font-size:14px}.brief-badge{width:91px;height:91px}.brief-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px}.brief-dishes{display:grid;grid-template-columns:repeat(8,1fr);gap:15px}.reference-dish{display:flex;align-items:center;flex-direction:column;border-radius:13px;padding:10px;background:#f6f4e9;border:1px solid transparent;min-height:147px}.reference-dish:hover{background:#edf1e3;border-color:#bccbaa}.reference-dish img{width:105px;height:99px}.reference-dish strong{font-size:14px;font-weight:500}.reference-dish small{font-size:13px;color:#969c85;margin-top:3px}.brief-guide{background:#ebefdf;border:1px solid #dce2ca;border-radius:18px;padding:24px}.brief-guide>h2{font-family:var(--serif);font-size:23px;text-align:center;margin:3px 0 23px}.brief-guide ol{counter-reset:guide;margin:0;padding:0;list-style:none}.brief-guide li{position:relative;padding-left:30px;margin-bottom:19px;counter-increment:guide}.brief-guide li:before{content:counter(guide);position:absolute;left:0;top:1px;width:20px;height:20px;background:#d7e0c5;border-radius:50%;font-size:13px;text-align:center;line-height:20px;color:#71845c}.brief-guide li b{display:block;font-size:13px;margin-bottom:4px}.brief-guide li span{display:block;font-size:13px;color:#7b866c;line-height:1.9}.goal-note{background:#eeeada;padding:13px 16px;border-radius:8px;font-size:13px;line-height:1.9;color:#827d60;margin:15px 0 5px}.brief-guide .goal-note{background:#dfe6cf;color:#6d7e56}.fine-print{font-size:13px;color:#929982;margin-top:16px;line-height:1.7}.brief-guide>.fine-print{text-align:center}.locked-note,.error-note{font-size:13px;margin:18px 0;line-height:1.8;color:#a27659}.game-page{max-width:1050px}.game-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:24px 0 18px}.game-top h1{font-size:25px;margin-top:4px}.lamps{display:flex;gap:18px}.lamp{display:flex;align-items:center;flex-direction:column;color:#c4c8b3;position:relative}.lamp .icon{width:28px;height:28px;fill:#eeeee0;stroke-width:1.25}.lamp small{font-size:13px;line-height:1.2;margin-top:2px}.lamp.lit{color:#b89749}.lamp.lit .icon{fill:#f0d18a;filter:drop-shadow(0 0 6px #efd18490)}.lamp.current:after{content:'';position:absolute;bottom:-8px;width:14px;height:2px;background:#8b9f73}.game-surface{background:#fffdf6;border:1px solid #dbdeca;border-radius:21px;overflow:hidden;box-shadow:0 15px 40px #58603405}.stage-heading{display:flex;align-items:center;gap:18px;padding:20px 28px;background:#f0f3e7;min-height:112px}.host-avatar{width:65px;height:65px;flex-shrink:0}.host-avatar img{height:100%;width:100%}.stage-heading h2{font-family:var(--serif);font-size:27px;margin:3px 0}.stage-heading p{font-size:13px;color:#869278}.timer{margin-left:auto;min-width:70px;display:flex;align-items:baseline;gap:4px;color:#486845;font-variant-numeric:tabular-nums}.timer b{font-size:32px;font-weight:500;line-height:1.2}.timer small{font-size:13px}.phase-bar{height:3px;background:#e5e9d9}.phase-bar i{display:block;height:100%;background:#95a775;transform-origin:left;will-change:transform}.play-content{padding:24px 30px}.phase-remember,.phase-change,.phase-wait{min-height:408px;display:flex;align-items:center;justify-content:center}.order-paper{width:100%;background:#f9f6e9;padding:23px 25px;border:1px solid #dddcc1;border-radius:12px;box-shadow:0 6px 0 -3px #eee9d4,0 7px 0 -3px #d6d6b7}.paper-title{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#899174;padding:0 2px 12px;gap:12px}.paper-title>span:first-child{font-weight:600;color:#62784d}.order-slots{display:grid;grid-template-columns:repeat(var(--slots,3),minmax(0,1fr));gap:12px;justify-content:center;max-width:100%;margin:auto}.count-3{--slots:3;max-width:570px}.count-4{--slots:4;max-width:760px}.count-5{--slots:5}.count-6{--slots:6}.order-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:132px;padding:18px 5px 10px;border:1px dashed #d1d7bb;border-radius:11px;background:#f1f1e2;color:#8d997b;min-width:0}.order-slot.filled{border:1px solid #dfe0ca;background:#fffdf4}.order-slot>img{width:100%;height:92px;max-width:150px}.order-slot>span:not(.slot-number):not(.empty-plate){font-size:13px;line-height:1.4;min-height:17px;text-align:center;overflow-wrap:anywhere;margin-top:4px}.slot-number{position:absolute;left:8px;top:7px;display:grid;place-items:center;font-size:13px;width:18px;height:18px;border-radius:50%;background:#dde5cb;color:#657b4e}.order-slot>small{font-size:13px;margin-top:10px;color:#9fa98a}.empty-plate{display:block;width:72px;height:54px;border-radius:50%;border:2px solid #dce0ca;box-shadow:inset 0 0 0 5px #eff0e1,inset 0 0 0 6px #dce0ca;background:#e8ead9;margin:8px auto}.change-message{text-align:center;width:100%}.change-badge{font-size:13px;color:#a88656;border-radius:20px;padding:5px 13px;background:#f2e8d3}.change-message h3{font-size:25px;font-family:var(--serif);margin:18px 0}.change-message .dish-tile{max-width:210px;margin:12px auto 16px;background:#f7f3e8;border:1px solid #e0dbbd;min-height:140px;display:flex;flex-direction:column}.change-message .dish-tile img{height:125px;width:135px}.quiet-moment{text-align:center}.closed-menu{font-family:var(--serif);font-size:29px;line-height:1.4;display:block;margin:auto auto 20px;width:92px;padding:17px;background:#597554;border:1px solid #405e3c;box-shadow:inset 8px 0 0 #42633f,5px 4px 0 #dddcc5;border-radius:3px 10px 10px 3px;color:#edebc6}.quiet-moment p{font-family:var(--serif);font-size:22px;color:#899776}.quiet-dots{display:block;font-size:30px;letter-spacing:14px;color:#b7bea1}.serve-slots .order-slot{min-height:110px}.serve-slots .order-slot>img{height:72px}.serve-slots .empty-plate{width:62px;height:46px}.shelf-heading{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;margin:9px 0 7px;padding:0 3px}.shelf-heading small{font-size:13px;font-weight:400;color:#9ba187;margin-left:6px}.shelf-heading .text-button{font-weight:400;font-size:13px;min-height:37px;padding:5px}.shelf-heading .icon{width:15px;height:15px}.dish-shelf{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;padding:15px;background:#eeebdc;border:1px solid #dedcca;border-radius:12px}.dish-tile{min-width:0;position:relative;border:1px solid #e4e1ce;border-radius:10px;background:#fffdf5;display:flex;align-items:center;justify-content:flex-start;gap:7px;padding:6px 13px;min-height:88px;transition:background .1s,box-shadow .1s}.dish-tile img{height:72px;width:90px;flex-shrink:0;object-fit:contain;filter:drop-shadow(0 2px 3px #56533809)}.dish-name{font-size:14px;font-weight:500;line-height:1.5;text-align:left;overflow-wrap:anywhere}.dish-tile:not(:disabled):hover{background:#f5f8eb;box-shadow:0 0 0 1px #9caa83}.dish-tile.selected{background:#e8eddc;border-color:#9bab82}.dish-tile.selected img{opacity:.4}.dish-tile.selected .dish-name{color:#98a284}.dish-tile:disabled:not(.selected){opacity:.65}.selected-mark{position:absolute;right:6px;top:5px;background:#93a377;color:white;border-radius:50%;width:16px;height:16px;display:grid;place-items:center}.selected-mark .icon{width:12px;height:12px}.dish-number{font-size:13px;color:#84916a}.in-game .site-header{height:76px}.in-game .site-footer{margin-top:20px;padding:13px 0}.in-game .site-footer>span{display:none}.in-game .site-footer>button{margin:auto}.practice-chip{background:#e7edda;color:#85916f;font-size:13px;padding:5px 12px;border-radius:20px}.practice-controls{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;padding:18px 22px;border-top:1px solid #e7e8d5;background:#f6f6eb}.practice-controls>span{font-size:13px;color:#8d977b}.practice-controls .btn{min-height:44px}.practice-explanation{font-size:13px;background:#f3f0df;padding:14px;border-radius:8px;margin-top:16px;line-height:1.9}.practice-explanation p{margin:8px 0}.practice-explanation summary{color:#827956;cursor:pointer}.feedback-banner{display:flex;align-items:center;gap:14px;padding:15px 20px;border-radius:10px;margin-bottom:15px}.feedback-banner.success{background:#eaf1dc;color:#627a40}.feedback-banner.try-again{background:#f5eadb;color:#a78352}.feedback-banner>.icon{width:29px;height:29px}.feedback-banner h3{font-size:18px;font-family:var(--serif)}.feedback-banner p{font-size:13px;color:inherit;margin-top:3px}.feedback-row{margin:12px 0}.feedback-row h4{font-size:13px;color:#8a9478;margin-bottom:7px}.feedback-row .order-slot{min-height:105px;padding-top:11px}.feedback-row .order-slot>img{height:70px}.feedback-row .order-slot.wrong{border:2px solid #b58d60;background:#fff7ea}.wrong-mark{position:absolute;top:4px;right:4px;background:#b58d60;color:white;font-size:13px;padding:1px 4px;border-radius:3px;font-weight:400}.paused-page{padding:80px 0}.centered{max-width:560px;margin:auto;text-align:center;padding:50px}.paused-symbol{display:grid;place-items:center;width:70px;height:70px;background:#e9eeda;border-radius:50%;margin:0 auto 18px;color:#7d9264}.paused-symbol .icon{width:30px;height:30px}.centered h1{font-size:30px}.centered p{font-size:14px;margin:16px 0 27px;line-height:1.9}.centered>.text-button{display:block;margin:12px auto 0}.result-page{max-width:880px}.result-heading{text-align:center;margin:42px 0 30px}.result-heading h1{font-size:39px;margin:12px 0 7px}.result-heading p{font-size:13px;margin-bottom:18px}.result-heading .stars{font-size:28px;gap:10px}.result-layout{display:grid;grid-template-columns:1fr 1fr;gap:22px}.result-score{text-align:center;display:flex;flex-direction:column;justify-content:center;background:#edf1e1}.result-score>span{font-size:14px;color:#7b8b62;letter-spacing:.1em}.big-score{font-size:106px;font-weight:300;line-height:1.5;color:#4c6a44;font-family:Georgia,serif}.big-score small{font-family:var(--sans);font-size:15px;margin-left:8px;color:#8c9976}.score-metrics{display:flex;justify-content:center;gap:44px;padding:20px 0;border-top:1px solid #d8e0c5}.score-metrics>div{display:flex;flex-direction:column}.score-metrics strong{font-size:26px;font-weight:400;color:#56774b}.score-metrics small{font-size:13px}.score-metrics span{font-size:13px;color:#8a9877;margin-top:5px}.reward-card{text-align:center;display:flex;align-items:center;flex-direction:column;justify-content:center;background:#fffcf2}.reward-card>img{height:165px;width:210px;margin:12px 0}.reward-card h2{font-family:var(--serif);font-size:28px}.reward-card p{font-size:13px;margin-top:7px}.reward-card.unearned>img{height:143px}.result-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;margin:27px 0}.result-review{margin:24px 0;font-size:13px;color:#80906e;border:1px solid #dfe3cf;border-radius:10px;padding:18px 22px}.result-review summary{cursor:pointer}.result-review section{padding:15px 0;border-bottom:1px solid #e1e4d2}.result-review h3{font-size:14px;margin-bottom:6px}.result-review p{font-size:13px;line-height:1.9}.chapter-page{max-width:990px}.chapter-celebration{text-align:center;position:relative}.badge-halo{width:170px;height:170px;background:radial-gradient(circle,#e9e9c8,transparent 68%);margin:0 auto 17px}.badge-halo>img{width:140px;height:140px;display:block;margin:auto}.chapter-celebration h1{font-size:38px;margin:12px 0}.chapter-celebration>p{max-width:680px;margin:0 auto;line-height:2;font-size:14px}.chapter-banquet-mini{display:flex;justify-content:center;gap:20px;margin:28px 0}.chapter-banquet-mini button{width:135px;padding:5px;font-size:13px;color:#808969}.chapter-banquet-mini img{height:95px;width:115px;display:block;margin:auto}.chapter-banquet-mini span{display:block;margin-top:7px}.knowledge-quiz{margin:20px 0;padding:27px 35px;background:#edf1e2}.knowledge-quiz h2{font-family:var(--serif);font-size:25px;margin:8px 0}.knowledge-quiz p{font-size:13px}.quiz-options{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 0}.quiz-options .btn{min-width:105px}.quiz-feedback{margin-top:12px;color:#ab8254;min-height:18px}.decor-reward{display:flex;align-items:center;gap:10px;justify-content:flex-end}.decor-reward img{width:80px;height:80px}.decor-reward b{font-size:15px;font-family:var(--serif)}.gallery-heading{display:flex;justify-content:space-between;align-items:center;gap:30px;margin:43px 0 27px}.gallery-heading h1{font-size:39px;margin:10px 0}.gallery-heading p{font-size:13px}.collection-count{color:#a2aa8e;font-size:17px;white-space:nowrap}.collection-count b{font-family:Georgia,serif;font-weight:400;font-size:52px;color:#6b8156}.collection-count small{display:block;font-size:13px;text-align:right}.badge-shelf{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;border:1px solid #e1e2cf;border-radius:14px;background:#efeede;padding:14px 12px}.badge-item{display:flex;flex-direction:column;align-items:center;border-radius:9px;padding:5px;min-width:0}.badge-item img{width:66px;height:66px;opacity:.45;filter:grayscale(.5)}.badge-item.unlocked img{opacity:1;filter:none}.badge-item>span{font-size:13px;margin:5px 0 3px}.badge-item>small{font-size:13px;color:#9ca287}.badge-item:hover{background:#e3e9d4}.gallery-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:32px 0 21px}.filter-tabs{display:flex;gap:7px;flex-wrap:wrap}.filter-tabs>button{font-size:13px;padding:8px 17px;border-radius:20px;color:#8d997a;min-height:39px}.filter-tabs>button.active{background:#3e6244;color:#f9f7e6}.filter-tabs>button:hover:not(.active){background:#e9eddb}.search-box{background:#fffdf5;border:1px solid #d9dec8;border-radius:24px;display:flex;gap:7px;align-items:center;padding:6px 17px}.search-box span{font-size:23px;line-height:1;color:#a1aa8a}.search-box input{width:140px;background:none;border:0;padding:4px 0;min-height:29px;color:var(--ink);font-size:13px}.search-box input::placeholder{color:#a2aa94}.gallery-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}.collectible{display:flex;flex-direction:column;text-align:left;border:1px solid #dfe0cd;border-radius:13px;padding:15px 16px;background:#f4f1e6;position:relative;overflow:hidden}.collectible.earned-card{background:#fffdf5;border-color:#cdd6b7}.collectible:hover{transform:translateY(-3px);box-shadow:0 8px 20px #54603615}.collectible-top{display:flex;justify-content:space-between;font-size:13px;color:#a1a68f}.earned-card .collectible-top>span:last-child{color:#839f65}.collectible>img{height:137px;width:100%;margin:8px auto 14px;opacity:.82}.earned-card>img{opacity:1}.collectible>small{font-size:13px;color:#9da48a}.collectible>h3{font-size:17px;font-family:var(--serif);margin:5px 0 17px}.collectible-bottom{font-size:13px;color:#929d7c;border-top:1px solid #e0e3cd;padding-top:11px;display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:5px}.collectible-bottom .icon{width:13px;height:13px}.empty-state{padding:30px 0;grid-column:1/-1}.modal-open{overflow:hidden}.modal-backdrop{position:fixed;inset:0;background:#253a2c70;backdrop-filter:blur(5px);z-index:100;display:flex;align-items:center;justify-content:center;padding:25px;overflow-y:auto}.modal{position:relative;border:1px solid #d9dec7;border-radius:20px;background:#faf8ee;padding:37px;max-width:510px;width:100%;max-height:calc(100dvh - 50px);overflow-y:auto;box-shadow:0 20px 70px #172d2630}.modal h1{font-size:30px;margin:12px 0 17px}.modal>p{font-size:14px;line-height:2;margin-bottom:20px}.modal-close{position:absolute;right:14px;top:14px;width:33px;height:33px;z-index:2;background:#f6f5e9}.modal-close .icon{width:17px;height:17px}.dish-detail{text-align:center}.detail-image{display:block;width:230px;height:215px;margin:18px auto 5px;filter:drop-shadow(0 9px 5px #6871470c)}.detail-tag{font-size:13px;background:#e8edda;color:#7d8e63;padding:5px 11px;border-radius:15px}.dish-detail h1{font-size:37px;margin:15px 0}.dish-detail p{font-size:14px;line-height:2}.detail-note{border-top:1px solid #dfdfc9;margin-top:22px;padding-top:17px;font-size:13px;color:#92a06f;display:flex;gap:6px;align-items:center;justify-content:center}.detail-note .icon{width:15px;height:15px}.modal-badge{width:100px;height:100px;margin:0 auto 15px;display:block}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 0;border-bottom:1px solid #e1e4d0}.setting-row b{font-size:15px;font-weight:500}.setting-row small{font-size:13px;color:#94a080;display:block;margin-top:4px}.setting-row input{accent-color:#587347;width:21px;height:21px}.danger{color:#ac6d53}.btn.danger{background:#a77057;color:white}.help-steps{margin:20px 0 23px}.help-steps>div{display:flex;gap:17px;margin:20px 0}.help-steps>div>b{width:35px;height:35px;border-radius:50%;background:#e4ebd5;display:grid;place-items:center;font-size:13px;color:#7b8e60;flex-shrink:0}.help-steps h3{font-size:16px;margin:3px 0 5px}.help-steps p{font-size:13px;line-height:1.9}#toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,15px);background:#35513eef;color:#f5f2df;padding:13px 23px;border-radius:12px;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:200;box-shadow:0 8px 24px #1b352924;max-width:90vw;text-align:center}#toast.visible{opacity:1;transform:translate(-50%,0)}.boot{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;background:radial-gradient(ellipse at 3% 12%,#e8eddc70,transparent 38%),var(--paper);-webkit-user-select:none;user-select:none;transition:opacity .45s,visibility .45s;animation:boot-off .45s 6s forwards}.boot.done{opacity:0;visibility:hidden;pointer-events:none}@keyframes boot-off{to{opacity:0;visibility:hidden;pointer-events:none}}@media(prefers-reduced-motion:reduce){.boot{transition:none}}.boot-mark{font-family:var(--serif);color:var(--green);font-size:44px;letter-spacing:.15em}.boot p{font-size:14px}.reduce-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} @media(min-width:1550px){.hero{min-height:500px}.hero-art{height:500px;width:85%;right:-25px}.hero-copy{padding-left:10px}.hero h1{font-size:64px}} @media(max-width:1150px){.page{width:calc(100% - 64px)}.site-header{width:calc(100% - 52px);height:88px}.site-footer{margin-left:32px;margin-right:32px}.brand b{font-size:23px}.chapter-tab{padding:12px 9px;gap:8px}.chapter-tab .chapter-symbol{font-size:25px;padding-right:8px}.chapter-tab b{font-size:13px}.chapter-tab small{font-size:13px}.chapter-tab>.icon{display:none}.hero{min-height:425px}.hero-art{height:425px;right:-19px}.hero h1{font-size:49px}.level-grid{gap:11px}.level-card{padding:13px}.level-card>img{height:120px}.level-card>strong{font-size:13px}.brief-layout{grid-template-columns:minmax(0,1fr) 295px;gap:18px}.brief-guide{padding:22px}.brief-dishes{gap:9px}.reference-dish{min-height:125px}.reference-dish img{width:95px;height:83px}.gallery-grid{gap:12px}.collectible{padding:13px}.collectible>img{height:115px}.collectible h3{font-size:16px}} @media(max-width:900px){.page{width:calc(100% - 42px)}.site-header{width:calc(100% - 40px);gap:17px}.site-header nav{gap:4px}.nav-link{padding:9px 12px;font-size:13px}.nav-link .icon{display:none}.hero{min-height:393px}.hero h1{font-size:40px}.hero-art{height:375px;width:86%;right:-13px;top:15px}.hero-copy{width:52%}.hero-copy>p{font-size:13px}.chapter-tabs{gap:6px}.chapter-tab .chapter-symbol{display:none}.chapter-tab{justify-content:center;padding:12px 7px}.chapter-tab b{font-size:13px}.chapter-tab small{font-size:13px}.chapter-intro h3{font-size:18px}.chapter-intro p{max-width:470px}.chapter-reward{display:none}.level-grid{gap:8px}.level-card{padding:12px 9px}.level-card>img{height:95px}.level-card>strong{font-size:13px;letter-spacing:0}.level-bottom{font-size:13px}.level-bottom b{display:none}.level-bottom .stars{font-size:14px}.home-bottom{gap:15px}.host-message img{width:55px;height:55px}.host-message h3{font-size:13px}.host-message p{max-width:340px;font-size:13px}.collection-teaser{min-width:205px;padding:12px}.brief-layout{grid-template-columns:1fr}.brief-guide{display:grid;grid-template-columns:1fr 1fr;gap:8px 23px;align-items:center}.brief-guide>h2{grid-column:1/-1;margin:0 0 12px}.brief-guide ol{grid-row:2/6;align-self:start}.brief-guide .goal-note{margin:0}.brief-guide>.fine-print{grid-column:1/-1;margin-top:6px}.reference-dish img{height:110px;width:125px}.brief-dishes{gap:15px}.order-slots{gap:8px}.order-slot{padding:19px 4px 9px}.order-slot>span:not(.slot-number):not(.empty-plate){font-size:13px}.dish-tile{padding:6px 9px;gap:3px;min-height:84px}.dish-tile img{width:72px;height:68px}.dish-name{font-size:13px}.play-content{padding:20px 22px}.stage-heading h2{font-size:24px}.gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.gallery-heading h1{font-size:32px}.filter-tabs{gap:3px}.filter-tabs>button{padding:7px 12px}.search-box{padding:5px 12px}.search-box input{width:110px}} @media(max-width:650px){body{font-size:14px}.page{width:calc(100% - 32px)}.site-header{width:calc(100% - 32px);height:78px;gap:12px}.brand{gap:9px}.brand-mark{font-size:16px;padding:4px 9px;border-radius:9px}.brand b{font-size:21px;letter-spacing:.03em}.brand small{font-size:13px}.site-header nav{gap:3px}.nav-link{padding:8px 9px;font-size:0;width:35px;height:35px;gap:0;justify-content:center}.nav-link span,.nav-link i{display:none}.nav-link .icon{display:block;width:18px;height:18px}.site-header>.icon-button{width:34px;height:34px;border-color:transparent}.site-header>.icon-button .icon{width:18px;height:18px}.hero{display:block;min-height:570px;margin-top:5px}.hero-copy{width:100%;padding:30px 6px 0}.hero h1{font-size:43px;line-height:1.3;margin:14px 0}.hero-copy>p{font-size:13px;max-width:90%;line-height:1.9}.hero-actions{margin-top:20px;gap:22px}.hero .btn{min-height:46px;font-size:14px;padding:10px 22px}.hero-art{top:245px;right:-10px;width:122%;height:300px;overflow:hidden}.hero-art>img{object-fit:contain}.journey{margin-top:-1px}.section-heading{margin-bottom:17px}.section-heading h2{font-size:23px}.section-heading .eyebrow{font-size:13px}.journey-progress{gap:8px;font-size:13px}.journey-progress b{font-size:17px}.tiny-progress{display:none}.chapter-tabs{gap:5px}.chapter-tab{padding:10px 3px;border-radius:8px;flex-direction:column;gap:3px}.chapter-tab .chapter-symbol{display:block;border:0;padding:0;font-size:23px}.chapter-tab b{font-size:13px}.chapter-tab small{font-size:13px;margin-top:4px}.chapter-intro{margin:20px 0 15px}.chapter-label{font-size:13px}.chapter-intro h3{font-size:17px;margin:0 8px}.chapter-intro p{font-size:13px;margin-top:9px;line-height:1.8}.level-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.level-card{padding:14px}.level-top{font-size:13px}.level-card>img{height:136px}.level-card>strong{font-size:14px}.level-bottom{font-size:13px}.level-bottom b{display:block;font-size:13px}.level-card:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:16px 20px}.level-card:last-child .level-top{grid-column:1;align-self:start}.level-card:last-child>img{grid-column:2;grid-row:1/4;height:110px;width:100%;margin:0}.level-card:last-child>strong{text-align:left;font-size:15px}.level-card:last-child .level-bottom{grid-column:1;border:0;margin:0;align-self:end}.home-bottom{display:block;margin-top:25px;padding-top:22px}.host-message{gap:12px}.host-message img{width:64px;height:64px}.host-message h3{font-size:13px}.host-message p{font-size:13px}.collection-teaser{width:100%;margin-top:19px;padding:13px 20px}.collection-teaser small{font-size:13px}.site-footer{margin:28px 16px 0;padding:20px 0;font-size:13px;gap:10px}.site-footer>span:first-child{display:none}.back-link{margin:15px 0;font-size:13px}.brief-top h1{font-size:31px}.brief-top p{font-size:13px;max-width:95%}.brief-badge{width:70px;height:70px}.brief-layout{gap:17px}.panel{padding:19px;border-radius:15px}.panel-title{margin-bottom:16px}.panel-title h2{font-size:19px}.panel-title>span{font-size:13px}.brief-dishes{gap:8px}.reference-dish{padding:6px 4px;min-height:111px}.reference-dish img{width:93px;height:77px}.reference-dish strong{font-size:13px}.reference-dish small{font-size:13px}.brief-guide{display:block;padding:24px}.brief-guide ol{margin-top:22px}.brief-guide li{margin-bottom:15px}.brief-guide .goal-note{margin-bottom:10px}.brief-guide .btn{margin-top:12px}.brief-guide .fine-print{margin-top:17px}.in-game .site-header{height:62px}.in-game .brand b{font-size:18px}.in-game .brand small{display:none}.in-game .brand-mark{font-size:13px}.game-top{margin:16px 0 13px;gap:9px}.game-top h1{font-size:20px}.game-top .eyebrow{font-size:13px;letter-spacing:.08em}.game-top .btn{font-size:13px;gap:5px;min-height:37px;padding:8px 10px}.game-top .btn .icon{width:14px;height:14px}.lamps{gap:9px}.lamp .icon{width:23px;height:23px}.lamp small{font-size:13px}.practice-chip{font-size:13px;padding:4px 8px}.game-surface{border-radius:14px}.stage-heading{padding:15px 13px;gap:8px;min-height:98px}.host-avatar{width:42px;height:48px}.stage-heading h2{font-size:20px;letter-spacing:0;margin:3px 0}.stage-heading p{font-size:13px;max-width:220px;line-height:1.6}.timer{min-width:44px;gap:2px;align-self:center}.timer b{font-size:23px}.timer small{font-size:13px}.play-content{padding:16px 12px}.phase-remember,.phase-change,.phase-wait{min-height:320px}.order-paper{padding:17px 10px}.paper-title{font-size:13px;padding-bottom:10px}.order-slots{gap:6px}.count-3,.count-4,.count-5,.count-6{--slots:3}.count-4{--slots:2;max-width:260px}.order-slot{min-height:115px;padding:19px 3px 8px;border-radius:8px}.order-slot>img{height:77px}.order-slot>span:not(.slot-number):not(.empty-plate){font-size:13px;margin-top:3px}.slot-number{width:16px;height:16px;left:5px;top:5px;font-size:13px}.order-slot>small{font-size:13px}.serve-slots .order-slot{min-height:96px;padding:16px 3px 6px}.serve-slots .order-slot>img{height:58px}.serve-slots .order-slot>span:not(.slot-number):not(.empty-plate){font-size:13px}.serve-slots .empty-plate{width:52px;height:39px;margin:5px auto}.serve-slots .order-slot>small{margin-top:7px}.shelf-heading{font-size:13px;margin:8px 0 5px}.shelf-heading small{display:none}.shelf-heading .text-button{font-size:13px;min-height:32px}.dish-shelf{padding:7px;gap:6px;border-radius:9px}.dish-tile{padding:6px 3px;gap:1px;min-height:93px;display:flex;flex-direction:column;justify-content:center;border-radius:7px}.dish-tile img{width:73px;height:60px}.dish-name{font-size:13px;line-height:1.3;text-align:center;min-height:13px}.dish-tile.selected .dish-name{font-size:13px}.selected-mark{width:14px;height:14px;top:4px;right:4px}.in-game .site-footer{margin-top:9px;padding:6px 0;border-top:0}.in-game .site-footer button{font-size:13px}.practice-controls{padding:14px 10px;gap:9px}.practice-controls>span{font-size:13px}.practice-controls .btn{font-size:13px;padding:9px 15px;min-height:42px}.practice-controls .text-button{font-size:13px}.change-message h3{font-size:22px;margin:18px 0;line-height:1.6}.change-message .dish-tile{width:170px;padding:12px}.change-message .dish-tile img{width:125px;height:115px}.change-message .dish-name{font-size:14px}.change-badge{font-size:13px}.feedback-banner{padding:12px;gap:10px}.feedback-banner h3{font-size:17px}.feedback-banner p{font-size:13px}.feedback-banner>.icon{width:23px;height:23px}.feedback-row .order-slot{min-height:93px}.feedback-row .order-slot>img{height:58px}.feedback-row .order-slot>span:not(.slot-number):not(.empty-plate){font-size:13px}.wrong-mark{top:4px;right:3px;font-size:13px}.practice-explanation{font-size:13px}.paused-page{padding:40px 0}.centered{padding:40px 22px}.centered h1{font-size:28px}.centered p{font-size:13px}.result-heading{margin:32px 0 23px}.result-heading h1{font-size:29px}.result-heading p{font-size:13px}.result-heading .stars{font-size:25px}.result-layout{gap:12px}.result-score{padding:20px 12px}.result-score>span{font-size:13px}.big-score{font-size:70px}.big-score small{font-size:13px;margin-left:3px}.score-metrics{gap:16px;padding:15px 0}.score-metrics strong{font-size:20px}.score-metrics small{font-size:13px}.score-metrics span{font-size:13px}.result-score .fine-print{font-size:13px;margin-top:9px}.reward-card{padding:19px 11px}.reward-card .eyebrow{font-size:13px;letter-spacing:.1em}.reward-card>img{height:120px;width:150px;margin:8px 0}.reward-card h2{font-size:23px}.reward-card p{font-size:13px}.reward-card .text-button{font-size:13px;gap:4px}.reward-card .text-button .icon{width:13px}.result-actions{gap:10px;margin:24px 0}.result-actions .btn{font-size:13px;padding:11px 21px}.chapter-celebration h1{font-size:29px}.chapter-celebration>p{font-size:13px;line-height:1.9}.badge-halo{width:150px;height:150px}.badge-halo>img{width:125px;height:125px}.chapter-banquet-mini{gap:3px;margin:20px 0}.chapter-banquet-mini button{width:20%;font-size:13px;padding:2px}.chapter-banquet-mini img{width:65px;height:63px}.knowledge-quiz{padding:23px}.knowledge-quiz h2{font-size:22px}.knowledge-quiz p{font-size:13px}.quiz-options{gap:8px;margin-top:15px}.quiz-options .btn{min-width:83px;font-size:13px;padding:10px 15px}.gallery-heading{margin:30px 0 22px;gap:12px}.gallery-heading h1{font-size:27px}.gallery-heading p{font-size:13px}.gallery-heading .eyebrow{font-size:13px}.collection-count{font-size:13px}.collection-count b{font-size:35px}.collection-count small{font-size:13px}.badge-shelf{gap:3px;padding:10px 3px}.badge-item{padding:3px 1px}.badge-item img{width:46px;height:46px}.badge-item span{font-size:13px;letter-spacing:0}.badge-item small{font-size:13px;line-height:1.5;text-align:center}.gallery-toolbar{display:block;margin:23px 0 16px}.filter-tabs{justify-content:space-between;gap:2px}.filter-tabs>button{padding:7px 12px;font-size:13px;min-height:36px}.search-box{margin-top:15px;width:100%;padding:5px 14px}.search-box input{width:100%;font-size:13px}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.collectible{padding:14px}.collectible>img{height:128px}.collectible>h3{font-size:17px}.collectible>small{font-size:13px}.collectible-bottom{font-size:13px}.modal-backdrop{padding:16px}.modal{padding:31px 24px;max-height:calc(100dvh - 32px);border-radius:17px}.modal h1{font-size:27px}.modal>p{font-size:13px}.dish-detail h1{font-size:33px}.detail-image{width:205px;height:190px}.dish-detail p{font-size:13px}.detail-note{font-size:13px}.setting-row small{font-size:13px}.help-steps p{font-size:13px}.help-steps h3{font-size:15px}.goal-note{font-size:13px}.decor-reward img{width:65px;height:65px}} @media(max-width:360px){.page{width:calc(100% - 22px)}.site-header{width:calc(100% - 22px);gap:7px}.brand b{font-size:19px}.site-header nav{gap:0}.nav-link{width:31px}.hero h1{font-size:39px}.chapter-tab b{font-size:13px}.chapter-tab small{font-size:13px}.level-card>img{height:115px}.stage-heading h2{font-size:17px}.host-avatar{width:33px}.timer b{font-size:21px}.dish-tile img{width:63px;height:53px}.dish-name{font-size:13px}.filter-tabs>button{padding:7px 9px}.collectible>img{height:106px}} /* Fit six serving positions and all nine choices on a portrait phone. */ @media(max-width:650px){ .in-game .site-header{height:54px} .game-top{margin:10px 0} .game-top h1{font-size:18px} .stage-heading{min-height:80px;padding:10px 12px} .stage-heading h2{font-size:19px} .stage-heading p{font-size:13px} .host-avatar{width:34px;height:40px} .play-content.phase-serve{padding:12px 10px} .serve-slots .order-slot{min-height:78px;padding:15px 3px 5px} .serve-slots .order-slot>img{height:43px} .serve-slots .empty-plate{width:45px;height:32px;margin:3px auto} .serve-slots .order-slot>small{margin-top:4px} .dish-shelf .dish-tile{min-height:79px;padding:4px 3px} .dish-shelf .dish-tile img{height:49px;width:66px} .shelf-heading{margin:5px 0 3px} .in-game .site-footer{margin-top:1px;padding:0} } /* Keep secondary gameplay controls comfortably tappable on narrow screens. */ @media(max-width:650px){.game-top .btn,.shelf-heading .text-button,.practice-controls .btn,.filter-tabs>button,.feast-label,.site-footer button{min-height:44px}.nav-link{min-width:44px;min-height:44px}} /* Give the title and illustration separate columns, including full punctuation. */ .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.28fr);gap:36px;min-height:440px;margin:24px 0 28px} .hero-copy{width:auto;padding:22px 0;min-width:0} .hero h1{font-size:clamp(31px,3.7vw,60px);line-height:1.4;letter-spacing:.035em;margin:0 0 22px} .hero h1 .hero-line{display:block;white-space:nowrap;color:inherit} .hero h1 em{font-style:normal;color:#718455} .hero-art{position:relative;inset:auto;width:100%;height:440px;border-radius:24px;overflow:hidden} .hero-art>img{object-fit:cover;object-position:right center} .hero-actions{margin-top:28px} .home-page .chapter-intro{margin:22px 0 16px} .submit-order{display:flex;margin:14px auto 0;min-width:170px;justify-content:center} .submit-order:disabled{background:#e1e5d6;color:#87927e;box-shadow:none} @media(max-width:900px){.hero{gap:20px;min-height:350px}.hero-art{height:350px}.hero-copy>p{max-width:240px}.hero-actions{gap:15px}.hero-actions .primary{min-width:140px}} @media(max-width:650px){.hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:22px;margin:5px 0 28px}.hero-copy{width:100%;padding:26px 6px 0}.hero h1{font-size:clamp(34px,9vw,43px);margin:0 0 16px}.hero-copy>p{max-width:none}.hero-art{height:255px;width:100%;border-radius:18px}.hero-actions{margin-top:20px;gap:24px}.submit-order{min-height:44px;margin-top:8px;padding:9px 20px;font-size:13px}.game-top .btn{padding:8px}} @media(max-width:650px){.site-header{gap:6px}.brand{gap:7px;flex-shrink:0}.brand b{font-size:18px;white-space:nowrap}.brand small{font-size:13px;letter-spacing:.12em}.site-header nav{gap:0}} /* Shared interaction polish: clear focus, quiet disabled states, and generous touch targets. */ .btn.primary:hover:disabled{background:var(--green);box-shadow:none} .btn.secondary:hover:disabled{background:#fffdf6;box-shadow:none} .text-button:hover:disabled{color:#667c59} .btn.primary.submit-order:hover:disabled{background:#e1e5d6;color:#87927e} button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #ad8137;outline-offset:4px} .chapter-tab:focus-visible,.level-card:focus-visible,.collectible:focus-visible,.dish-tile:focus-visible{outline-offset:2px} .modal{overscroll-behavior:contain;scrollbar-gutter:stable} .modal-close{width:44px;height:44px} .modal>.eyebrow,.character-introduction>.eyebrow{padding-right:40px} .setting-row{cursor:pointer} .setting-row input{flex-shrink:0} @media(max-width:650px){.knowledge-actions{flex-wrap:wrap}.site-header>.icon-button{width:44px;height:44px;flex-shrink:0}} @media(max-width:380px){.site-header{flex-wrap:wrap;height:auto;min-height:76px;padding:12px 0;row-gap:8px}.site-header .brand{flex:1 1 calc(100% - 54px)}.site-header nav{order:3;flex-basis:100%;justify-content:space-between;margin-left:0;height:auto;gap:4px}.site-header .nav-link{width:auto;flex:1;padding:8px 6px;gap:5px;font-size:13px}.site-header .nav-link span{display:inline}.in-game .site-header{min-height:62px;height:auto}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* A quieter home and a character-led knowledge card after every finished game. */ .site-footer{justify-content:center} .friend-portraits{display:flex;align-items:center;gap:2px} .friend-portraits button{width:49px;height:62px;padding:0;border-radius:50%;background:#e9eddc55} .friend-portraits button:hover{background:#e3e9d1} .friend-portraits img{width:46px;height:58px} .home-bottom .host-message{gap:18px} .home-bottom .host-message>.text-button{font-size:13px} .wide-modal{max-width:620px} .end-knowledge>.eyebrow{display:block;padding-right:30px} .knowledge-dish{display:flex;align-items:center;justify-content:center;gap:25px;margin:16px 0 20px} .knowledge-dish>img{width:180px;height:170px;filter:drop-shadow(0 8px 8px #73834f12)} .knowledge-dish h1{font-family:var(--serif);font-size:38px;margin:12px 0 7px} .knowledge-earned{font-size:13px;color:#8b9779} .knowledge-speaker{display:grid;grid-template-columns:93px 1fr;align-items:center;gap:15px;border-radius:16px;padding:16px;background:#edf0df} .knowledge-speaker>img{width:93px;height:117px;object-fit:contain} .knowledge-speaker>div>span{font-size:13px;color:#77905e;display:block;margin-bottom:9px} .knowledge-speaker p{color:#4f6247;font-size:15px;line-height:1.95} .knowledge-actions{display:flex;align-items:center;justify-content:center;gap:25px;margin-top:24px} .chapter-knowledge{border-top:1px solid var(--line);padding-top:17px;margin-top:19px} .chapter-knowledge b{font-size:14px;color:#6e8059;font-weight:500} .chapter-knowledge p{font-size:13px;line-height:1.9;margin-top:7px} .character-introduction{text-align:center} .character-introduction>.eyebrow{display:block;text-align:left} .character-portrait{width:176px;height:185px;background:radial-gradient(ellipse at 50% 63%,#e4ebcf 0%,#eef0df 53%,transparent 54%);margin:10px auto 14px} .character-portrait img{width:100%;height:100%;object-fit:contain} button.character-portrait{display:block;border:0;padding:0;cursor:pointer} .character-greeting{max-width:30em;margin:0 auto;color:#4f6247;font-size:15px;line-height:1.9} .character-introduction .voice-button{margin-top:8px} .character-introduction h1{font-family:var(--serif);font-size:35px;margin:13px 0 10px} .character-traits{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;list-style:none;padding:0;margin:0 0 22px} .character-traits li{padding:5px 13px;border-radius:20px;background:#e9eedb;color:#4f6647;font-size:14px;line-height:1.6} .character-switcher{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:23px 0 21px} .character-switcher button{border:1px solid transparent;border-radius:12px;background:#f0f1e5;padding:5px 2px 7px;min-height:85px} .character-switcher button.selected{border-color:#b7c5a0;background:#e9eedb} .character-switcher img{width:43px;height:54px;display:block;margin:auto} .character-switcher span{font-size:13px;color:#7b896b} @media(max-width:900px){.home-bottom .host-message{gap:10px}.friend-portraits button{width:39px}.friend-portraits img{width:37px}} @media(max-width:650px){.home-bottom .host-message{justify-content:space-between}.friend-portraits{gap:0}.friend-portraits button{width:39px;height:54px}.friend-portraits img{width:37px;height:52px}.home-bottom .host-message>.text-button{font-size:13px;gap:4px}.knowledge-dish{gap:12px;margin:10px 0 15px}.knowledge-dish>img{width:124px;height:120px}.knowledge-dish h1{font-size:29px;margin:10px 0 5px}.knowledge-speaker{grid-template-columns:68px 1fr;gap:10px;padding:12px}.knowledge-speaker>img{width:68px;height:92px}.knowledge-speaker p{font-size:13px;line-height:1.85}.knowledge-speaker>div>span{font-size:13px;margin-bottom:6px}.knowledge-actions{gap:15px;margin-top:20px}.knowledge-actions .btn{font-size:13px;padding:11px 17px;min-height:44px}.knowledge-actions .text-button{font-size:13px;min-height:44px}.character-portrait{width:150px;height:165px}.character-introduction h1{font-size:30px}.character-introduction .character-greeting{font-size:13px}.character-switcher{gap:4px;margin:17px 0}.character-switcher img{width:36px;height:48px}.character-switcher span{font-size:13px}.character-switcher button{min-height:78px}.modal-close{width:44px;height:44px}} /* Short visual steps keep reading outside the timed game. */ .brief-guide{display:block} .brief-guide .quick-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0} .brief-guide .quick-steps li{padding:0;margin:0;text-align:center} .brief-guide .quick-steps li:before{content:none} .quick-steps .icon{display:block;width:42px;height:42px;margin:0 auto 8px;padding:10px;border-radius:50%;background:#dce5cc;color:#617a4e} .brief-guide .quick-steps li b{font-size:15px;margin:0} .brief-meta{display:flex;justify-content:center;gap:16px;margin:0 0 15px;font-size:13px;color:#7b896a} .rules-details{margin-top:16px;border-top:1px solid #d6dec7;text-align:left;color:#7b896a;font-size:13px} .rules-details summary{min-height:44px;padding:13px 0;cursor:pointer;font-size:13px;color:#617a4e} .rules-details p{font-size:13px;line-height:1.9;margin:0 0 9px;color:#7b896a} .stage-heading{min-height:90px} .stage-heading h2{margin:0} @media(max-width:650px){.stage-heading{min-height:72px}.brief-guide .quick-steps{margin:0 0 18px}.brief-guide{padding:20px}.quick-steps .icon{width:40px;height:40px;padding:9px}} /* Continue playing is the main choice; optional reading stays below it. */ .end-knowledge .knowledge-actions{flex-direction:column;gap:6px} .end-knowledge .knowledge-actions>.primary{min-width:180px} .knowledge-secondary{display:flex;align-items:center;justify-content:center;gap:24px} .knowledge-secondary .text-button{font-size:13px;font-weight:400;min-height:44px;padding:6px 2px;color:var(--muted)} @media(max-width:650px){.knowledge-secondary .text-button{font-size:13px}} /* All dishes can be previewed; collection progress lives on the card. */ .level-card.locked>img,.collectible>img{opacity:1} .collectible.pending-card{border-style:dashed;background:#f6f3e9} .collectible .collection-status{display:inline-flex;align-items:center;gap:3px;padding:3px 7px;border-radius:999px;background:#e8efdc;color:#648246;line-height:1.4;white-space:nowrap} .collectible.pending-card .collection-status{background:#eae6d8;color:#7e816e} .collection-status .icon{width:10px;height:10px} /* Selected dishes stay interactive so a second click removes them. */ .dish-tile.selected img{opacity:.8} .dish-tile.selected .dish-name{color:#5b7249} .shelf-heading{gap:12px} .shelf-heading .selection-hint{display:block;margin:0;text-align:right;color:#78866c} .serve-slots button.order-slot:hover{border-color:#93a377;background:#f0f4e5} .serve-slots button.order-slot:focus-visible{outline-offset:2px} /* Portable progress controls follow the existing quiet home-page styling. */ /* Only the six selected characters carry pronunciation hints. */ ruby.reading-hint{ruby-position:over;ruby-align:center} ruby.reading-hint rt{font-family:system-ui,sans-serif;font-size:max(.45em,13px);font-weight:400;line-height:1;letter-spacing:0;user-select:none} .reset-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px} .reset-actions .btn{min-width:120px} @media(max-width:420px){.reset-actions{flex-direction:column;gap:12px}.reset-actions .btn{width:100%}} .companion-link:focus-visible{outline:none;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px} /* Keep each menu change at its resulting serving position. */ .change-order{display:grid;grid-template-columns:repeat(var(--change-slots),minmax(0,1fr));gap:12px;max-width:780px;margin:28px auto 12px;padding:0;list-style:none} .change-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:206px;padding:38px 8px 16px;border:1px dashed #cdd5bb;border-radius:12px;background:#f4f4e9;color:#94a180} .change-slot-number{position:absolute;top:10px;left:10px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#e6ebdb;color:#7b8c65;font-size:14px;line-height:1} .change-hidden-plate{width:65%;max-width:86px;aspect-ratio:1.2;border:2px solid #dfe5d1;border-radius:50%;box-shadow:inset 0 0 0 5px #edf0e2} .change-slot.is-active{border:2px solid #b49a5f;background:#f7f1df;box-shadow:0 4px 12px #88744310} .change-slot.is-active .change-slot-number{background:#a58a50;color:#fffdf4;font-weight:600} .change-slot>img{width:100%;height:112px;object-fit:contain} .change-dish-name{color:var(--ink);font-size:14px;line-height:1.5;text-align:center;overflow-wrap:anywhere;margin-top:4px} .change-slot-action{font-size:13px;line-height:1.5;color:#947844;margin-top:5px} .change-slot.is-removed{border-style:dashed;border-color:#bba186;background:#f5eee4} .change-slot.is-removed .change-slot-number{background:#b09174} .change-cancel-mark{display:grid;place-items:center;width:65%;max-width:86px;aspect-ratio:1.2;border:2px dashed #ccb89e;border-radius:50%;color:#ae8563} .change-cancel-mark .icon{width:28px;height:28px} .change-instructions{display:flex;flex-direction:column;gap:5px} .combined-changes .change-instructions{font-size:23px;line-height:1.5} .combined-changes .change-order{max-width:900px} @media(max-width:650px){ .change-order{gap:6px;margin-top:22px} .change-slot{min-height:145px;padding:32px 3px 10px;border-radius:8px} .change-slot-number{top:6px;left:6px;width:21px;height:21px;font-size:13px} .change-slot>img{height:65px} .change-dish-name{font-size:13px} .change-slot-action{font-size:13px} .change-cancel-mark .icon{width:20px;height:20px} .combined-changes .change-instructions{font-size:19px} } /* Motion. The 界面动效 switch (.reduce-motion) and prefers-reduced-motion turn every animation below off. Entrances only fill backwards, so a finished one holds no style over a hover. */ :root{--ease-out:cubic-bezier(.2,.8,.25,1);--ease-back:cubic-bezier(.3,1.45,.5,1)} @keyframes rise{from{opacity:0;transform:translateY(14px)}} @keyframes fade{from{opacity:0}} @keyframes pop{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.1)}100%{transform:none}} @keyframes settle{from{opacity:.45;transform:translateY(8px) scale(.96)}} @keyframes plate{from{opacity:0;transform:translateY(-14px) scale(.75)}} @keyframes bob{50%{transform:translateY(-3px)}} @keyframes hop{0%,100%{transform:none}30%{transform:translateY(-12px) scale(1.03,.97)}55%{transform:scale(1.04,.95)}75%{transform:translateY(-4px)}} @keyframes tilt{0%,100%{transform:none}30%{transform:rotate(-8deg)}65%{transform:rotate(5deg)}} @keyframes nudge{0%,100%{transform:none}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}} @keyframes spin{to{transform:rotate(1turn)}} @keyframes glow{50%{opacity:1}} @keyframes grow{from{transform:scaleX(0)}} @keyframes drop{from{opacity:0;transform:translateY(-30px)}} /* Screen entrances, in reading order; a redraw during one goes on from the same point (the negative --age set by render()). */ .screen-enter .page:not(.game-page,.home-page)>*{animation:rise .55s var(--ease-out) backwards;animation-delay:calc(var(--age,0ms) + var(--i,0)*80ms)} .page>:nth-child(2){--i:1}.page>:nth-child(3){--i:2}.page>:nth-child(4){--i:3}.page>:nth-child(n+5){--i:4} .screen-enter :is(.hero-line,.hero-actions,.section-heading,.chapter-tabs,.chapter-intro,.home-bottom){animation:rise .6s var(--ease-out) backwards;animation-delay:calc(var(--age,0ms) + var(--in,0ms))} .hero-line+.hero-line{--in:90ms}.hero-actions{--in:200ms}.section-heading{--in:240ms}.chapter-tabs{--in:300ms}.chapter-intro{--in:360ms}.home-bottom{--in:700ms} .screen-enter .hero-art{animation:artIn 1s var(--ease-out) backwards;animation-delay:var(--age,0ms)} @keyframes artIn{from{opacity:0;transform:scale(1.03)}} .screen-enter .level-card,#chapter-panel[data-fresh] .level-card{animation:rise .5s var(--ease-out) backwards;animation-delay:calc(var(--age,0ms) + var(--base,400ms) + var(--n,0)*55ms)} #chapter-panel[data-fresh]{--base:60ms} #chapter-panel[data-fresh] .chapter-intro{animation:fade .4s ease backwards;animation-delay:var(--age,0ms)} .screen-enter .chapter-tab::after{animation:grow .8s var(--ease-out) backwards;animation-delay:calc(var(--age,0ms) + 480ms)} .screen-enter .reference-dish{animation:rise .45s var(--ease-out) backwards;animation-delay:calc(var(--age,0ms) + 200ms + var(--n,0)*40ms)} .screen-enter .collectible,.gallery-grid[data-fresh] .collectible{animation:rise .45s var(--ease-out) backwards;animation-delay:calc(var(--age,0ms) + var(--base,280ms) + min(var(--n,0),12)*35ms)} .gallery-grid[data-fresh]{--base:0ms} .screen-enter .badge-item{animation:pop .5s var(--ease-back) backwards;animation-delay:calc(var(--age,0ms) + 160ms + var(--n,0)*60ms)} .screen-enter .badge-halo>img{animation:badgeIn .8s var(--ease-back) backwards;animation-delay:calc(var(--age,0ms) + 150ms)} @keyframes badgeIn{from{opacity:0;transform:scale(.4) rotate(-18deg)}} .screen-enter .chapter-banquet-mini button{animation:rise .5s var(--ease-out) backwards;animation-delay:calc(var(--age,0ms) + 380ms + var(--n,0)*70ms)} .screen-enter .game-top{animation:fade .35s ease backwards;animation-delay:var(--age,0ms)} .paused-page>.panel{animation:rise .45s var(--ease-out) backwards} .quiz-feedback:not(:empty){animation:rise .35s var(--ease-out)} /* Small, steady touches: characters breathe, arrows lead on, the next level glows softly. */ .host-avatar img,.guide-says>img,.knowledge-speaker>img,.character-portrait img,.reward-card>img{animation:bob 3.4s ease-in-out infinite} .friend-portraits button:hover img,.character-switcher button:hover img,.badge-item.unlocked:hover img{animation:hop .6s var(--ease-out)} button .icon-arrow{transition:transform .2s var(--ease-out)} button:not(:disabled):hover .icon-arrow{transform:translateX(3px)} .btn.primary:not(:disabled):hover{transform:translateY(-1px)} .btn:not(:disabled):active,.btn.primary:not(:disabled):active{transform:translateY(1px)} .level-card.current{animation:currentGlow 3s ease-in-out infinite} .screen-enter .level-card.current,#chapter-panel[data-fresh] .level-card.current{animation:rise .5s var(--ease-out) backwards,currentGlow 3s ease-in-out 1.2s infinite;animation-delay:calc(var(--age,0ms) + var(--base,400ms) + var(--n,0)*55ms),1.2s} @keyframes currentGlow{50%{box-shadow:0 0 0 4px #a3b6844d,0 10px 24px #5c6f3b14}} .collectible>img,.reference-dish img,.feast-dishes>button img{transition:transform .25s var(--ease-out)} .collectible:hover>img,.reference-dish:hover img{transform:translateY(-4px) scale(1.03)} .chapter-tab{position:relative;overflow:hidden} .chapter-tab::before,.chapter-tab::after{content:'';position:absolute;left:14px;right:14px;bottom:6px;height:3px;border-radius:3px;background:#e5e7d6;pointer-events:none} .chapter-tab::after{background:#a4b78a;transform-origin:left;transform:scaleX(var(--p,0))} .chapter-tab.active::before{background:#ffffff24}.chapter-tab.active::after{background:#dcc98e} .chapter-tab.locked:not(.active) .chapter-symbol{opacity:.5} /* Modals rise in when they open; swapping content inside an open modal stays calm. */ .modal-backdrop.opening{animation:fade .25s ease backwards} .modal-backdrop.opening>.modal{animation:modalIn .38s var(--ease-out) backwards} @keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.97)}} .modal-backdrop.opening :is(.detail-image,.knowledge-dish>img,.modal-badge){animation:dishIn .75s var(--ease-back) backwards;animation-delay:.12s} @keyframes dishIn{from{opacity:0;transform:translateY(12px) scale(.82) rotate(-6deg)}} .modal-backdrop.opening .knowledge-speaker{animation:rise .5s var(--ease-out) backwards;animation-delay:.22s} .modal-backdrop:not(.opening) .character-portrait{animation:portraitIn .4s var(--ease-out)} @keyframes portraitIn{from{opacity:0;transform:translateY(8px) scale(.94)}} /* Living scene: steam, lantern light, twinkles and a drifting leaf over the static illustration. */ .hero-art>img,.banquet-view>img{display:block} .scene-motion{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;will-change:transform} .scene-motion *{transform-box:fill-box;transform-origin:center} .scene-motion .wisp{opacity:0;transform-origin:50% 100%;animation:wisp 4.2s ease-out infinite;animation-delay:var(--d,0s)} @keyframes wisp{0%{opacity:0;transform:translateY(6px) scaleY(.7)}30%{opacity:.85}100%{opacity:0;transform:translateY(-34px) scaleY(1.2)}} .scene-motion .lantern-glow{opacity:.55;animation:flicker 4.6s ease-in-out infinite;animation-delay:var(--d,0s)} @keyframes flicker{0%,100%{opacity:.5}30%{opacity:.9}45%{opacity:.62}70%{opacity:.8}} .scene-motion .sun-glow{animation:sunGlow 7s ease-in-out infinite} @keyframes sunGlow{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}} .scene-motion .twinkle{opacity:0;animation:twinkle 4s ease-in-out infinite;animation-delay:var(--d,0s)} @keyframes twinkle{0%,62%,100%{opacity:0;transform:scale(.3)}78%{opacity:1;transform:scale(1) rotate(25deg)}} .scene-motion .leaf{opacity:0;animation:leafFall 15s linear -3s infinite} @keyframes leafFall{0%{opacity:0;transform:none}5%{opacity:.95}22%{transform:translate(-16px,70px) rotate(90deg)}40%{transform:translate(8px,150px) rotate(170deg)}58%{transform:translate(-12px,235px) rotate(250deg)}70%{opacity:.9;transform:translate(0,300px) rotate(300deg)}76%,100%{opacity:0;transform:translate(0,300px) rotate(300deg)}} /* Game phases arrive quickly: remembered dishes are legible from the first frames. */ .game-surface[data-fresh] .stage-heading h2{animation:titleIn .4s var(--ease-out) backwards;animation-delay:var(--age,0ms)} @keyframes titleIn{from{opacity:0;transform:translateX(-10px)}} .game-surface[data-fresh] .order-paper{animation:paperIn .35s var(--ease-out) backwards;animation-delay:var(--age,0ms)} @keyframes paperIn{from{transform:translateY(10px)}} .game-surface[data-fresh] :is(.order-paper,.serve-slots) .order-slot{animation:settle .22s var(--ease-out) backwards;animation-delay:calc(var(--age,0ms) + var(--n,0)*25ms)} .game-surface[data-fresh] .change-badge{display:inline-block;animation:pop .45s var(--ease-back) backwards;animation-delay:var(--age,0ms)} .game-surface[data-fresh] .change-instructions>span{animation:settle .3s var(--ease-out) backwards;animation-delay:var(--age,0ms)} .game-surface[data-fresh] .change-slot{animation:settle .3s var(--ease-out) backwards;animation-delay:calc(var(--age,0ms) + var(--n,0)*30ms)} .game-surface[data-fresh] .change-slot.is-active>img{animation:dropIn .45s var(--ease-back) backwards;animation-delay:var(--age,0ms)} @keyframes dropIn{from{transform:translateY(-12px) scale(.8)}} .game-surface[data-fresh] .change-cancel-mark{animation:stamp .4s var(--ease-back) backwards;animation-delay:var(--age,0ms)} @keyframes stamp{from{opacity:.4;transform:scale(1.4) rotate(-12deg)}} .change-slot.is-active::after{content:'';position:absolute;inset:-2px;border-radius:14px;box-shadow:0 0 0 5px #d5b56c55,0 8px 20px #8a723a1f;opacity:0;pointer-events:none;animation:glow 1.6s ease-in-out .35s infinite} .change-slot.is-removed::after{box-shadow:0 0 0 5px #c49a7a40} .game-surface[data-fresh] .closed-menu{transform-origin:0 50%;animation:bookClose .55s var(--ease-out) backwards;animation-delay:var(--age,0ms)} @keyframes bookClose{from{opacity:.4;transform:perspective(500px) rotateY(-80deg)}} .quiet-dots{display:flex;justify-content:center;align-items:center;gap:12px;height:26px} .quiet-dots i{width:8px;height:8px;border-radius:50%;background:#b7bea1;animation:dotWave 1.1s ease-in-out infinite} .quiet-dots i:nth-child(2){animation-delay:.15s}.quiet-dots i:nth-child(3){animation-delay:.3s} @keyframes dotWave{0%,60%,100%{transform:none;opacity:.55}30%{transform:translateY(-7px);opacity:1}} .game-surface[data-fresh] .shelf-heading{animation:fade .3s ease backwards;animation-delay:var(--age,0ms)} .game-surface[data-fresh] .dish-shelf .dish-tile{animation:settle .25s var(--ease-out) backwards;animation-delay:calc(var(--age,0ms) + var(--n,0)*15ms)} .order-slot.fx-fill>img{animation:plate .42s var(--ease-back) backwards;animation-delay:var(--fx,0ms)} .order-slot.fx-fill>span:not(.slot-number){animation:fade .3s ease backwards;animation-delay:calc(var(--fx,0ms) + 80ms)} .order-slot.fx-clear>.empty-plate{animation:plateOut .35s var(--ease-out) backwards;animation-delay:var(--fx,0ms)} @keyframes plateOut{from{opacity:0;transform:scale(1.15)}} .dish-tile.fx-pick .selected-mark{animation:pop .4s var(--ease-back) backwards} .dish-tile.fx-pick img{animation:pick .35s var(--ease-out)} @keyframes pick{40%{transform:scale(.88)}} .dish-tile:not(:disabled):active{transform:scale(.97)} .submit-order.ready{animation:ready 1.8s ease-out infinite} @keyframes ready{0%{box-shadow:0 0 0 0 #35593f2e}70%,100%{box-shadow:0 0 0 9px #35593f00}} .game-surface[data-fresh] .feedback-banner{animation:bannerIn .4s var(--ease-out) backwards;animation-delay:var(--age,0ms)} @keyframes bannerIn{from{opacity:.3;transform:translateY(-8px) scale(.98)}} .game-surface[data-fresh] .feedback-banner>.icon{animation:pop .5s var(--ease-back) backwards;animation-delay:calc(var(--age,0ms) + 120ms)} .game-surface[data-fresh] .feedback-row{animation:settle .3s var(--ease-out) backwards;animation-delay:calc(var(--age,0ms) + var(--r,0)*60ms)} .feedback-row~.feedback-row{--r:1} .game-surface[data-fresh] .feedback-row .order-slot.wrong{animation:nudge .5s ease-in-out backwards;animation-delay:calc(var(--age,0ms) + 420ms)} .game-surface[data-fresh] .wrong-mark{animation:pop .4s var(--ease-back) backwards;animation-delay:calc(var(--age,0ms) + 380ms)} .feedback-banner{position:relative} .sparks{position:absolute;left:34px;top:50%;width:0;height:0;pointer-events:none} .sparks i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;background:#d6b762;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0} .game-surface[data-fresh] .sparks i{animation:spark .8s var(--ease-out) backwards;animation-delay:calc(var(--age,0ms) + 180ms)} .sparks i:nth-child(1){--x:-26px;--y:-24px}.sparks i:nth-child(2){--x:26px;--y:-24px}.sparks i:nth-child(3){--x:36px;--y:8px}.sparks i:nth-child(4){--x:-32px;--y:14px}.sparks i:nth-child(5){--x:4px;--y:30px} @keyframes spark{0%{opacity:0;transform:scale(.3)}30%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.1) rotate(45deg)}} .lamp .icon{transform-origin:50% 8%} .lamp.current .icon{animation:sway 3s ease-in-out infinite} @keyframes sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}} .host-avatar{transform-origin:50% 100%} .game-surface[data-fresh].perfect .host-avatar{animation:hop .8s var(--ease-out) backwards;animation-delay:calc(var(--age,0ms) + 100ms)} .game-surface[data-fresh].miss .host-avatar{animation:tilt .8s ease-in-out backwards;animation-delay:calc(var(--age,0ms) + 100ms)} .timer b{display:inline-block;transition:color .3s} .timer{transition:color .3s} .game-surface.hurry .timer{color:#ad6f4d} .game-surface.hurry .timer b{animation:beat 1s ease-in-out infinite} @keyframes beat{0%,100%{transform:none}12%{transform:scale(1.14)}} .phase-bar i{transition:background-color .35s} .game-surface[data-phase=change] .phase-bar i{background:#c6a462} .game-surface[data-phase=wait] .phase-bar i{background:#b4bd99} .game-surface[data-phase=feedback] .phase-bar i{background:#c2cdab} .game-surface.hurry .phase-bar i{background:#cb8e62} /* Result and chapter celebrations start once the knowledge card is closed. */ .big-score{font-variant-numeric:tabular-nums} .stars>span{display:inline-block;position:relative} .celebrate.passed .result-heading h1{animation:pop .6s var(--ease-back) backwards} .celebrate.passed .result-heading .stars>span{animation:starPop .55s var(--ease-back) backwards;animation-delay:calc(260ms + var(--s,0)*170ms)} @keyframes starPop{0%{opacity:0;transform:scale(.2) rotate(-40deg)}70%{opacity:1;transform:scale(1.25) rotate(8deg)}100%{transform:none}} .celebrate.passed .result-heading .stars>.earned::after{content:'';position:absolute;left:50%;top:50%;width:1.5em;height:1.5em;margin:-.75em 0 0 -.75em;border-radius:50%;border:2px solid #dcbc6a;opacity:0;animation:ring .7s ease-out;animation-delay:calc(380ms + var(--s,0)*170ms)} @keyframes ring{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.5)}} .celebrate .score-metrics>div{animation:rise .5s var(--ease-out) backwards;animation-delay:calc(900ms + var(--m,0)*100ms)} .score-metrics>div+div{--m:1} .reward-card{position:relative;overflow:hidden} .reward-dish{position:relative;display:grid;place-items:center;isolation:isolate} .reward-dish>img{height:165px;width:210px;margin:12px 0;animation:bob 3.6s ease-in-out infinite} .reward-rays{position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -125px;z-index:-1;border-radius:50%;background:repeating-conic-gradient(#f0dca500 0deg 8deg,#f0dca5 8deg 16deg);-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent);opacity:.45;animation:spin 48s linear infinite} .celebrate.passed .reward-dish{animation:pop .7s var(--ease-back) backwards;animation-delay:.3s} .celebrate.failed .reward-card>img{animation:hop .8s var(--ease-out) .3s backwards,bob 3.4s ease-in-out 1.1s infinite} .badge-halo{position:relative} .badge-halo>img{position:relative} .halo-rays{position:absolute;inset:-22px;border-radius:50%;background:repeating-conic-gradient(#ead9a300 0deg 9deg,#ead9a3 9deg 18deg);-webkit-mask:radial-gradient(closest-side,#000 40%,transparent);mask:radial-gradient(closest-side,#000 40%,transparent);opacity:.5;animation:spin 60s linear infinite} /* Brief: the dish this level awards is marked; the guide column keeps to its content. */ .brief-guide{align-self:start} .reference-dish{position:relative} .reference-dish.featured{background:#f5eedb;border-color:#e4d3a4} .reference-dish.featured:hover{background:#f1ead3;border-color:#d4bf86} .feature-tag{position:absolute;top:8px;left:8px;padding:1px 9px;border-radius:999px;background:#ecdfb9;color:#7b6230;font-size:13px;font-weight:600;line-height:1.7;letter-spacing:.04em} /* Remembering is the heart of the game: the order paper shows each dish larger. */ .order-paper .order-slot{min-height:170px} .order-paper .order-slot>img{height:118px;max-width:172px} .order-paper .order-slot>span:not(.slot-number):not(.empty-plate){font-size:15px} /* Readability: the smallest labels and faintest text move up a step. */ .eyebrow{font-size:13px;letter-spacing:.12em;color:#7f886f} .nav-link i{font-size:13px} .chapter-tab small{font-size:13px;color:#8b927b} .chapter-tab.active small{color:#c9d3bb} .chapter-label{font-size:13px} .chapter-reward{font-size:13px}.chapter-reward b{font-size:13px} .level-top{font-size:13px;color:#7f8770} .review-tag{font-size:13px;padding:1px 7px} .level-bottom{font-size:13px;color:#858c75} .level-bottom b{font-size:13px} .level-card>strong{font-size:15px} .collection-teaser small,.collection-teaser em{font-size:13px} .brief-meta{font-size:13px} .paper-title{font-size:14px} .order-slot>span:not(.slot-number):not(.empty-plate){font-size:13px} .order-slot.filled>span:not(.slot-number){color:#56644b} .slot-number{width:20px;height:20px;font-size:13px} .order-slot>small{font-size:13px;color:#8f9a7c} .change-badge{font-size:13px} .shelf-heading small{font-size:13px} .lamp small{font-size:13px} .feedback-row h4{font-size:13px;color:#7a8568} .wrong-mark{top:6px;right:6px;padding:1px 6px;border-radius:4px;font-size:13px;font-weight:600;line-height:1.5} .score-metrics span{font-size:13px} .reward-card p,.result-review p,.knowledge-quiz p{font-size:13px} .collection-count small{font-size:13px} .badge-item>small{font-size:13px} .filter-tabs>button,.search-box input{font-size:14px} .collectible-top,.collectible>small{font-size:13px;color:#8b927b} .collectible-bottom{font-size:13px;color:#7f8c6b} .detail-tag{font-size:13px} .detail-note{font-size:13px} .knowledge-earned,.knowledge-speaker>div>span{font-size:13px} .character-switcher span{font-size:13px} .rules-details p{font-size:13px} #toast{font-size:14px} @media(max-width:900px){.chapter-tab small{font-size:13px}.order-paper .order-slot{min-height:150px}.order-paper .order-slot>img{height:100px}} @media(max-width:650px){ .chapter-tab{padding:10px 3px 14px} .chapter-tab small{display:none} .chapter-tab b{font-size:13px} .chapter-tab::before,.chapter-tab::after{left:10px;right:10px;bottom:6px} .game-top .eyebrow{font-size:13px;letter-spacing:.06em} .reward-card .eyebrow{font-size:13px;letter-spacing:.08em} .lamp small{font-size:13px} .paper-title{font-size:13px} .order-paper .order-slot{min-height:126px} .order-paper .order-slot>img{height:86px} .order-paper .order-slot>span:not(.slot-number):not(.empty-plate){font-size:13px} .serve-slots .order-slot>span:not(.slot-number):not(.empty-plate),.feedback-row .order-slot>span:not(.slot-number):not(.empty-plate){font-size:13px} .slot-number{width:17px;height:17px;font-size:13px} .wrong-mark{top:4px;right:4px;padding:0 4px;font-size:13px} .feature-tag{top:5px;left:5px;padding:0 6px;font-size:13px} .sparks{left:24px} .score-metrics span,.score-metrics small{font-size:13px} .reward-dish>img{height:120px;width:150px;margin:8px 0} .reward-rays{width:190px;height:190px;margin:-95px 0 0 -95px} .badge-item span{font-size:13px} .badge-item small{font-size:13px} .collectible-top,.collectible>small,.collectible-bottom{font-size:13px} .chapter-banquet-mini button{font-size:13px} } /* Reduced motion also covers pseudo-elements and removes the decorative scene layer. */ .reduce-motion *::before,.reduce-motion *::after{animation:none!important;transition:none!important} .reduce-motion .scene-motion{display:none} @media(prefers-reduced-motion:reduce){.scene-motion{display:none}} /* Progress repeated on the result and chapter pages */ .result-progress{justify-content:center;margin-top:14px} /* A dish card collected for the first time flips in under a tag and a passing light */ .reward-card.new-card{border-color:#d9bf7c;box-shadow:0 0 0 3px #ecd9a066} .reward-card.new-card .eyebrow{display:inline-block;padding:4px 14px;border-radius:999px;background:var(--rust);color:#fffcf0;letter-spacing:.14em} .reward-card.new-card::after{content:'';position:absolute;inset:0 auto 0 0;width:42%;background:linear-gradient(100deg,transparent,#fffbe5d9,transparent);transform:translateX(-130%);pointer-events:none} .celebrate .reward-card.new-card{animation:cardFlip .75s var(--ease-out) .25s backwards} .celebrate .reward-card.new-card .eyebrow{animation:pop .5s var(--ease-back) .85s backwards} .celebrate .reward-card.new-card::after{animation:cardSheen 1s ease-in-out 1s both} @keyframes cardFlip{from{opacity:0;transform:perspective(900px) rotateY(-70deg) translateX(30px) scale(.94)}60%{opacity:1}} @keyframes cardSheen{from{transform:translateX(-130%)}to{transform:translateX(340%)}} /* Keepsake pictures: a shelf in the gallery, a framed reveal on the chapter page, a large view in a dialog */ .keepsake-shelf{margin-top:14px;border:1px solid #e1e2cf;border-radius:14px;background:#f6f3e6;padding:16px 14px 14px} .keepsake-heading{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0 4px 12px} .keepsake-heading h2{font-family:var(--serif);font-size:21px} .keepsake-heading span{font-size:13px;color:#899077} .keepsake-heading b{color:var(--green);font-size:17px;font-weight:500} .keepsake-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px} .keepsake-item{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:6px;border-radius:11px;text-align:center} .keepsake-item:hover{background:#e9eedb} .keepsake-item>img,.keepsake-locked{display:block;width:100%;aspect-ratio:3/2;border-radius:9px} .keepsake-item>img{box-shadow:0 4px 10px #4a5b3a1f;transition:transform .25s var(--ease-out)} .keepsake-item:hover>img{transform:translateY(-3px) scale(1.02)} .keepsake-locked{position:relative;overflow:hidden;border:1.5px dashed #c9cdb6;background:#ece9d9} .keepsake-locked img{position:absolute;left:50%;top:12%;height:78%;width:auto;transform:translateX(-50%);opacity:.26;filter:grayscale(1)} .keepsake-locked .icon{position:absolute;right:8px;bottom:8px;width:16px;height:16px;color:#8d927c} .keepsake-item>span:not(.keepsake-locked){font-size:14px;font-family:var(--serif);margin-top:5px} .keepsake-item>small{font-size:13px;color:#8b927b} .keepsake-reveal{display:grid;justify-items:center;gap:10px;margin:8px 0 26px} .keepsake-frame{width:min(100%,520px);padding:8px;border:1px solid #d9dec7;border-radius:18px;background:#fffdf6;box-shadow:0 14px 34px #3c513622;cursor:zoom-in} .keepsake-frame img{display:block;width:100%;border-radius:12px} .keepsake-reveal b{font-family:var(--serif);font-size:20px} .keepsake-large{display:block;width:100%;border-radius:14px;margin:6px 0 16px;box-shadow:0 10px 26px #3c51361f} .keepsake-silhouette{opacity:.3;filter:grayscale(1)} .screen-enter .keepsake-item{animation:rise .45s var(--ease-out) backwards;animation-delay:calc(var(--age,0ms) + 240ms + var(--n,0)*60ms)} .screen-enter .keepsake-frame{animation:badgeIn .8s var(--ease-back) backwards;animation-delay:calc(var(--age,0ms) + 620ms)} @media(max-width:650px){.keepsake-heading{flex-direction:column;gap:2px}.keepsake-list{grid-template-columns:repeat(5,128px);overflow-x:auto;padding-bottom:6px}} /* Listen button beside a knowledge text: plays the recorded line, and stops it while it is playing. */ .voice-button{display:inline-flex;align-items:center;gap:6px;margin-top:10px;min-height:36px;padding:6px 14px 6px 11px;border:1px solid #cfd8bd;border-radius:999px;background:#fbfaf3;color:#4f6b45;font-size:13px;font-weight:600;line-height:1;transition:background .2s,border-color .2s,color .2s} .voice-button .icon{width:16px;height:16px;flex:none} .voice-button:hover{background:#eef2e2} .voice-button.playing{background:var(--green);border-color:var(--green);color:#fff} .voice-button.playing .icon{animation:voiceBeat 1s ease-in-out infinite} @keyframes voiceBeat{50%{transform:scale(1.2)}} .dish-detail .voice-button{margin:0 0 12px} @media(max-width:650px){.voice-button{min-height:44px;padding-right:16px}} /* Touch targets: nothing that can be tapped is smaller than 44px, and the keys used during a timed order are 48px. */ .brand,.nav-link,.btn.small,.site-footer button,.filter-tabs button,.feast-label,.voice-button,.search-box{min-height:44px} .friend-portraits button,.badge-item,.practice-controls .text-button{min-width:44px} .practice-explanation summary,.result-review summary{padding-block:12px} .game-top .btn,.submit-order,.practice-controls .btn{min-height:48px} /* Keepsake page (成长纪念页): opened from the banquet once every level is passed; one screen. */ .memento{text-align:center} .modal:has(.memento){padding-top:28px;padding-bottom:24px} .memento h1{margin:6px 0 12px} .memento-rows{display:grid;gap:5px;max-width:320px;margin:0 auto;padding:10px;border:1px solid #e2dcc3;border-radius:16px;background:#f3eedc} .memento-row{display:grid;grid-template-columns:36px repeat(3,minmax(0,1fr));align-items:center;gap:6px} .memento-badge{width:36px;height:36px} .memento-dish{display:block;width:100%;height:clamp(34px,5.6dvh,52px);object-fit:contain} .memento-stats{display:flex;justify-content:center;gap:18px;margin:10px 0 6px;color:#66705d;font-size:14px;font-weight:600} .memento-stats b{margin-right:4px;color:var(--green);font-family:var(--serif);font-size:22px} .memento-friends{display:flex;justify-content:center;align-items:flex-end;gap:10px} .memento-friends img{height:clamp(38px,6.4dvh,54px);width:auto} .memento-words{margin:8px 0 0;padding:10px 14px;border-radius:14px;background:#fffdf6;border:1px solid #e6e0c8;color:var(--ink);font-size:15px;line-height:1.7;text-align:left} .memento-words span{display:block;margin-top:2px;color:#889078;font-size:13px;text-align:right} .memento-save{gap:8px;min-width:190px;margin-top:12px} .memento-save .icon{width:18px;height:18px} .memento-save:disabled{opacity:.55} /* 山海宴 in one screen: on the left the shop picture to decorate and its shelf, on the right the table, five plates to a cuisine; an upright window puts the table under the picture. banquet.js places the decorations. */ body[data-screen=banquet] .site-footer{margin-top:10px;padding-top:4px;padding-bottom:4px} .page.banquet-page{--chrome:168px;--plate:clamp(54px,min(6.6vw,10.4vh),92px);display:flex;flex-direction:column;gap:12px;height:calc(100vh - var(--chrome));height:calc(100dvh - var(--chrome));min-height:440px;max-height:720px;padding-top:14px} .banquet-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex:none} .banquet-title{display:flex;align-items:baseline;gap:16px;min-width:0} .banquet-title h1{font-size:32px;line-height:1.3;white-space:nowrap} .banquet-title p{font-size:14px;color:#7f8a6c} .banquet-actions{display:flex;gap:12px;flex:none} .banquet-actions .btn{min-height:46px;padding:9px 20px;gap:10px} .banquet-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px} .banquet-stage{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0} /* The picture. It fills its box and keeps its bottom right corner, where the shop and the five friends are. */ .banquet-scene{position:relative;flex:1;min-height:0;border:1px solid #dce0c8;border-radius:20px;background:#edf0db;overflow:hidden;transition:border-color .2s,box-shadow .2s} .banquet-view{position:absolute;inset:0;overflow:hidden} .banquet-backdrop{width:100%;height:100%;object-fit:cover;object-position:right bottom;opacity:.86;mix-blend-mode:multiply} .banquet-view .scene-motion{opacity:.8} .banquet-scene.receiving{border-color:#8fa672;box-shadow:inset 0 0 0 3px #a9bb8a66} .scene-hint{position:absolute;left:8px;top:8px;max-width:calc(100% - 16px);margin:0;padding:4px 11px;border-radius:13px;background:#fffdf4e0;color:#5f6d4f;font-size:13px;line-height:1.5;pointer-events:none;transition:opacity .2s} .scene-hint:empty,.shelf-hint:empty{display:none} .decor-dragging .scene-hint{opacity:0} /* A decoration: a button on the shelf, a picture standing in the scene, and a copy that follows the pointer while it is carried. */ .decor-layer{position:absolute;inset:0;pointer-events:none} .decor-item{padding:0;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:grab} .decor-item img{display:block;pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none} .decor-item:focus-visible{outline:2px solid var(--green);outline-offset:2px} .decor-item.placed{position:absolute;pointer-events:auto;border-radius:16px;filter:drop-shadow(0 4px 5px #4a583226)} .decor-item.placed img{width:100%;height:100%} .decor-item.placed span{display:none} .decor-item.placed:hover{filter:drop-shadow(0 6px 8px #4a583242)} .decor-item.lifted{opacity:0} .decor-item.on-shelf.lifted{opacity:.25} .decor-item.settle img{animation:pop .35s var(--ease-back)} .screen-enter .decor-item.placed{animation:plate .5s var(--ease-back) backwards;animation-delay:calc(var(--age,0ms) + 320ms)} .decor-ghost{position:fixed;left:0;top:0;z-index:200;pointer-events:none;filter:drop-shadow(0 12px 12px #3a472a40);will-change:transform} .decor-ghost img{display:block;width:100%;height:100%;transform:scale(1.08) rotate(-3deg)} body.decor-dragging,body.decor-dragging *{-webkit-user-select:none;user-select:none;cursor:grabbing} /* The shelf: a place for each of the five decorations. */ .shelf-row{display:flex;align-items:center;gap:16px;flex:none;min-width:0} .decor-shelf{display:flex;flex:none;gap:8px;padding:6px;border:1px solid #dfe3cd;border-radius:16px;background:#f3f4e4;transition:border-color .2s,background .2s} .decor-shelf.receiving{border-color:#8fa672;background:#e9f0d6} .decor-slot{position:relative;display:grid;justify-items:center;align-content:center;gap:2px;width:76px;height:72px;border-radius:12px;color:#7b876a;font-size:13px;line-height:1.3} span.decor-slot{display:block} .decor-slot .decor-item{display:grid;justify-items:center;align-content:center;gap:2px;width:100%;height:100%;border-radius:12px;background:#fffdf4;box-shadow:0 2px 6px #5a673a14} .decor-slot .decor-item img{width:44px;height:44px} .decor-slot .decor-item span{color:#5f6d4f;font-size:13px;line-height:1.3;white-space:nowrap} .decor-slot .decor-item:hover{transform:translateY(-2px)} button.decor-slot{border:1px dashed #b9c4a3} button.decor-slot:hover{background:#fffdf480} .decor-slot.away img{display:block;width:40px;height:40px;opacity:.28;filter:grayscale(.4)} .decor-slot.away span{display:flex;align-items:center;gap:3px;color:#6d7a5c} .decor-slot.away i{font-style:normal} .decor-slot.away .icon{width:14px;height:14px} .decor-slot.locked{color:#a5ad94} .decor-slot.locked .icon{width:20px;height:20px} .shelf-hint{min-width:0;margin:0;color:#7f8a6c;font-size:14px;line-height:1.6} /* The table: a row for each cuisine, its name on a place card and five plates beside it. */ .feast-table{display:flex;flex-direction:column;gap:4px;min-height:0;margin-bottom:8px;padding:12px 16px 12px 12px;border:8px solid #c5a577;border-radius:26px;background:#e9d8b6;box-shadow:0 6px 0 #b59162,0 16px 22px #8c6e3220} .feast-row{display:flex;align-items:center;gap:10px;flex:1;min-height:0} .feast-label{display:grid;justify-items:center;align-content:center;flex:none;width:58px;min-height:44px;padding:3px 4px;border-radius:8px;background:#fff7dfb0;color:#8b764f;line-height:1.3} .feast-label b{color:var(--chapter);font-size:15px;font-weight:600} .feast-label small{font-size:13px} .feast-label:hover{background:#fffbea} .feast-dishes{display:grid;grid-template-columns:repeat(3,var(--plate));grid-auto-rows:var(--plate);gap:4px;align-items:center} .feast-dishes>button{width:var(--plate);height:var(--plate);padding:0} .feast-dishes>button img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 3px #88723720)} .feast-dishes>button:hover img{transform:translateY(-4px)} .feast-empty{justify-self:center;width:calc(var(--plate)*.76);height:calc(var(--plate)*.58);border:2px solid #d2bc8f;border-radius:50%;background:#e6d6b6;box-shadow:inset 0 0 0 4px #e9dabd,inset 0 0 0 5px #d4bf94} .screen-enter .feast-dishes>button{animation:plate .5s var(--ease-back) backwards;animation-delay:calc(var(--age,0ms) + 300ms + var(--col,0)*60ms + var(--n,0)*40ms)} @media(max-width:1150px){ .page.banquet-page{--chrome:154px} } @media(max-width:900px){ .banquet-title{flex-direction:column;align-items:flex-start;gap:0} .banquet-title h1{font-size:28px} .banquet-actions .btn{padding:9px 14px} .shelf-hint{font-size:13px} } /* An upright window: the picture on top, the table under it. The picture takes the height the rest (--rest) leaves, up to its own full height. */ @media(orientation:portrait){ .page.banquet-page{--plate:clamp(54px,13vw,104px);--rest:calc(3*var(--plate) + 310px);height:auto;min-height:0;max-height:none} .page.banquet-page .banquet-body{flex:none;grid-template-columns:minmax(0,1fr);gap:14px} .page.banquet-page .banquet-scene{flex:none;height:clamp(180px,calc(100vh - var(--chrome) - var(--rest)),57vw);height:clamp(180px,calc(100dvh - var(--chrome) - var(--rest)),57vw)} .page.banquet-page .feast-table{flex-direction:row;justify-content:space-around;gap:6px;padding:12px 10px} .page.banquet-page .feast-row{flex:none;flex-direction:column;gap:8px} .page.banquet-page .feast-dishes{grid-template-columns:var(--plate)} } /* The story (story.js). A line said on a page: the companion's picture and a bubble with its name, the words and a button to hear them. */ .speech{display:flex;align-items:center;gap:14px;text-align:left} .speech>img{flex:none;width:64px;height:76px;object-fit:contain} .speech-bubble{position:relative;flex:1;min-width:0;padding:10px 16px 12px;border:1px solid #dce2ca;border-radius:16px;background:#fffdf6} .speech-bubble::before{content:'';position:absolute;left:-7px;top:50%;width:12px;height:12px;margin-top:-6px;border:solid #dce2ca;border-width:0 0 1px 1px;background:inherit;transform:rotate(45deg)} .speech-bubble>b{display:block;margin-bottom:2px;color:#77905e;font-size:13px;font-weight:600} .speech-bubble>p{color:#3f5239;font-size:15px;line-height:1.8} .speech-bubble>.voice-button{margin-top:6px} /* The try-again line breaks after its comma when it needs two lines, not inside "一次". */ .retry-speech .speech-bubble>p{word-break:keep-all;overflow-wrap:anywhere} /* Before a level the companion stands above its bubble; in a narrow window, where the guide lies across the page, beside it. */ .guide-says{flex-direction:column;gap:12px;margin:-8px 0 0} .guide-says>img{width:104px;height:104px} .guide-says .speech-bubble{flex:none;width:100%;text-align:center} .guide-says .speech-bubble::before{left:50%;top:-7px;margin:0 0 0 -6px;border-width:1px 0 0 1px} @media(max-width:900px){ .guide-says{flex-direction:row;gap:14px;margin:0 0 4px} .guide-says>img{width:72px;height:84px} .guide-says .speech-bubble{flex:1;width:auto;text-align:left} .guide-says .speech-bubble::before{left:-7px;top:50%;margin:-6px 0 0;border-width:0 0 1px 1px} } /* On a chapter's page the closing line stands under the heading. */ .chapter-says{max-width:620px;margin:4px auto 16px} /* The story's stage (app.js, stageMarkup). It fills the window and a touch anywhere goes on, so only skip and the listen button look like buttons. The opening has the shop's picture behind it (on-scene); a chapter's first line lies over its page. */ .stage{position:fixed;inset:0;z-index:100;overflow:hidden;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation} .stage.on-page{background:#253a2c70;backdrop-filter:blur(5px);animation:fade .35s ease backwards} .stage.on-scene{background:var(--paper);animation:fade .6s ease backwards} /* The page behind the start page is not drawn while the start page is up (it would show through its fade-in). */ body.start-up #app{visibility:hidden} /* A player who has been here before: the start page fades and is gone. */ .stage.leaving{opacity:0;pointer-events:none;transition:opacity .38s ease} /* The shop stands to the right; to the left the picture pales into the paper, where the start page has its words. */ .stage-scene{position:absolute;inset:0;transition:opacity 1.1s ease} .stage-scene>img{display:block;width:100%;height:100%;object-fit:cover;object-position:right center;mix-blend-mode:multiply} .stage-scene::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f8f5ebf0 0%,#f8f5ebb0 28%,#f8f5eb00 56%)} .stage:not(.at-start) .stage-scene{opacity:.6} /* The start page: the game's name and one button. It fades away as the story begins. */ .stage-title{position:absolute;left:clamp(32px,9vw,150px);top:50%;width:min(440px,46vw);transform:translateY(-50%);transition:opacity .6s ease,transform .6s ease} .stage-title .brand-mark{display:inline-block;padding:8px 15px;font-size:24px} .stage-title h1{margin:24px 0 10px;font-family:var(--serif);font-size:clamp(42px,5.4vw,66px);font-weight:400;line-height:1.2;letter-spacing:.1em} .stage-title p{color:#5d6956;font-size:18px;letter-spacing:.14em} .stage-title .btn{min-width:200px;min-height:60px;margin-top:36px;font-size:19px;animation:ready 2s ease-out infinite} .stage:not(.at-start) .stage-title{opacity:0;transform:translateY(calc(-50% - 14px));pointer-events:none} .stage-skip{position:absolute;top:calc(16px + env(safe-area-inset-top));right:calc(18px + env(safe-area-inset-right));z-index:2;min-width:64px;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:#fffdf6d9;color:#5d6956;font-size:14px;transition:opacity .6s ease .5s} .stage.at-start .stage-skip{opacity:0;pointer-events:none} /* The speaker and the box of words along the bottom. After the start page they come in slowly, and the shopkeeper greets with a little hop. */ .stage-talk{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;gap:18px;width:min(940px,calc(100% - 48px));margin:0 auto;padding-bottom:max(30px,env(safe-area-inset-bottom));transition:opacity .9s ease .4s,transform .9s var(--ease-out) .4s} .stage.at-start .stage-talk{opacity:0;transform:translateY(26px);pointer-events:none} .stage-who{flex:none;display:block} .stage.greets .stage-who{transform-origin:50% 100%;animation:hop .9s ease 1.25s 1 backwards,tilt .8s ease 2.2s 1} .stage-speaker{display:block;width:176px;height:200px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 10px 10px #2e453726);animation:portraitIn .4s var(--ease-out)} .stage-box{position:relative;flex:1;min-width:0;min-height:150px;padding:20px 28px 36px;border:1px solid #d9dec7;border-radius:22px;background:#fffdf6f7;box-shadow:0 14px 44px #172d2624;outline:none} .stage-name{display:flex;align-items:baseline;gap:10px;padding-right:52px;color:var(--ink);font-family:var(--serif);font-size:25px;font-weight:400} .stage-name small{color:#7d8e63;font-family:var(--sans);font-size:13px;letter-spacing:.04em} .stage-line{margin-top:6px;color:#3f5239;font-size:19px;line-height:1.85;animation:rise .35s var(--ease-out) backwards} .stage-voice{position:absolute;top:14px;right:16px} .stage-voice .voice-button{justify-content:center;width:44px;min-height:44px;margin:0;padding:0} .stage-voice .voice-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .stage-hint{position:absolute;right:22px;bottom:10px;color:#8d997a;font-size:13px} .stage-hint:not(:empty)::after{content:'▾';display:inline-block;margin-left:6px;animation:bob 1.2s ease-in-out infinite} /* "How to play" ends in a row: the opening story to hear again, and the way back into the shop. */ .help-actions{display:flex;align-items:center;gap:14px} .help-actions .btn{flex:1;min-width:0} .story-again{flex:none;gap:6px} .story-again .icon{width:17px;height:17px} /* More to know about a card (more.js): tabs, one text at a time, one button to hear it. The text keeps room for its longest part, so the page does not jump between tabs. */ .more{display:grid;justify-items:center;gap:10px} .more-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px} .more-tabs button{min-height:44px;padding:0 15px;border:1px solid #d5d8c4;border-radius:999px;background:#fffdf6;color:#5d6956;font-size:13px;transition:background .2s,border-color .2s,color .2s} .more-tabs button:hover{background:#eef2e2} .more-tabs button[aria-pressed=true]{border-color:var(--green);background:var(--green);color:#fffcf0} .more-text{min-height:4em} .more-text.turn{animation:fade .35s ease} .more-voice{display:flex;justify-content:center} .more-voice:empty{display:none} .more .voice-button{margin:0} .dish-detail .more{margin-bottom:12px} .chapter-celebration .more{max-width:680px;margin:0 auto} .chapter-celebration .more-text{font-size:14px;line-height:2} /* The rays behind a reward and a badge are decoration: a touch goes through them (on a phone on its side they reach over the button under the dish). */ .reward-rays,.halo-rays{pointer-events:none} /* A chapter's seven dishes stand as a row of four and a row of three under its middle (engine.js, SHELF_ROW): each takes two of eight columns, and the fifth begins one column in. */ .dish-shelf>.dish-tile,.brief-dishes>.reference-dish{grid-column:span 2} .dish-shelf>.dish-tile:nth-child(5),.brief-dishes>.reference-dish:nth-child(5){grid-column:2/span 2} .dish-shelf .dish-tile img{max-width:100%} /* 双击不再放大页面（原来只有按钮这样）；两指缩放照旧 */ html,body,body *{touch-action:manipulation}