/* 10-E §4u/§6e。寸法は仮。320px/390pxとも食数を先に読む。 */
:root{--meal-header-height:142px}
body{padding-top:var(--meal-header-height)}
body .topbar,body:has(#earth.active) .topbar,body:has(#book.active) .topbar,body:has(#town.area-scene.active) .topbar{
 position:fixed;inset:0 0 auto;z-index:11001;box-sizing:border-box;width:100%;max-width:none;margin:0;
 display:flex;flex-direction:column;gap:4px;padding:max(8px,env(safe-area-inset-top)) 12px 8px;background:transparent;color:#443C35;border:0;border-radius:0;box-shadow:none;
}
body .topbar #mealChildOpen,.dialog-meal-summary{
 display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-width:0;min-height:84px;
 margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;color:#443C35;opacity:1;
 font-family:'Kiwi Maru',serif;line-height:1.2;text-align:left;backdrop-filter:none;
}
#mealChildOpen img,.dialog-meal-summary img{width:40px;height:48px;object-fit:contain;flex:none}
.meal-summary-copy{display:flex;flex-direction:column;min-width:0;max-width:100%;align-items:center;gap:4px}
.meal-summary-count{display:flex;align-items:baseline;justify-content:center;flex-wrap:nowrap;gap:4px;min-width:0;max-width:100%;font-size:14px}
body .topbar #mealChildOpen #plateCount,body:has(#earth.active) .topbar #mealChildOpen #plateCount,.dialog-meal-summary b{font-size:calc(min(33vw,130px) / var(--meal-count-scale,1));font-weight:500;line-height:1.1;color:inherit;max-width:100%;overflow-wrap:anywhere}
.meal-summary-count img{align-self:center}
.meal-summary-count>span{flex:none}
.meal-summary-label{text-align:center;font-size:12px;color:#443C35}
body .topbar .counters{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 14px;width:100%;min-width:0}
body .topbar .counters .pill,body:has(#earth.active) .topbar .counters .pill{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:10px;line-height:1.6;color:#655f56}
body .topbar .counters .pill b,body:has(#earth.active) .topbar .counters .pill b{font-size:12px;color:#655f56}
body .topbar .ticket span{display:inline}
body .dock{width:min(360px,calc(100% - 24px));box-sizing:border-box}
body .dock .nav{flex:1;min-width:0;font-size:12px}
.ticket-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.ticket-option>span{display:grid;gap:6px;font-size:12px}.ticket-option strong{font-size:18px}
body.entry-active #entryScreen{height:calc(100svh - var(--meal-header-height));overflow:auto;justify-content:flex-start}
#openingScreen{top:var(--meal-header-height)}
#addressResult{top:var(--meal-header-height);height:calc(100svh - var(--meal-header-height))}
/* 10-E4: 最初の一枚は絵と言葉だけ。入力以降の帯は従来どおり。 */
body:has(#thanksScreen:not([hidden])){padding-top:0}
body:has(#thanksScreen:not([hidden])) .topbar{display:none}
body #thanksScreen{top:0;height:100svh;height:100dvh;box-sizing:border-box;margin:0}
.dialog-meal-summary{position:fixed;inset:0 0 auto;z-index:100;flex:none;width:100vw;padding-top:env(safe-area-inset-top);background:transparent;cursor:default}
body dialog{overflow:auto;padding-top:var(--meal-header-height)}
body #resultDialog .result{min-height:calc(100dvh - var(--meal-header-height))}
@media(max-width:340px){.ticket-options{grid-template-columns:1fr}}

/* 10-E2: 帯・台紙を置かず場面の布へ。数字の寸法と長桁縮小は仮。 */
body.entry-active,body.entry-active:has(#earth.active){background:#F6F0E6 url('assets/felt/cloth.webp') center/240px}
body:has(#earth.active) .topbar #mealChildOpen{background:transparent}
body:not(.entry-active):has(#earth.active) .topbar :is(#mealChildOpen,#plateCount,.meal-summary-label,.counters .pill,.counters .pill b){color:#F6F0E6}
body:has(#addressResult:not([hidden])){padding-top:0}
body:has(#addressResult:not([hidden])) .topbar{display:none}
body #addressResult{top:0;height:100svh}

/* 10-E3: 入力中も食数を濃色で表示。既存の夜空用 .pill b より優先。 */
body.entry-active:has(#earth.active) .topbar #mealChildOpen,
body.entry-active:has(#earth.active) .topbar #mealChildOpen #plateCount,
body.entry-active:has(#earth.active) .topbar .meal-summary-label,
body.entry-active:has(#earth.active) .topbar .counters .pill,
body.entry-active:has(#earth.active) .topbar .counters .pill b{color:#443C35}
/* 仮: 音の操作をガチャボタンの直下に置き、画面と一緒にスクロール。 */
#earth .sound-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;width:100%;margin:12px 0}
#earth .sound-controls .global-sound{position:static;inset:auto;display:block;margin:0;min-width:72px;min-height:44px;box-sizing:border-box}

/* 10-I: 照合成功はこのページ内だけで保持。未照合の端末値を出さない。 */
html:not(.meal-verified) body .topbar,html:not(.meal-verified) .dialog-meal-summary{display:none!important}
html:not(.meal-verified) body,html:not(.meal-verified) body dialog{padding-top:0}

/* 11-T: 図鑑・交換は帯を隠す。数値と棚の上部操作の配置は保持。 */
body:has(#book.active) .topbar,body:has(#trade.active) .topbar{display:none}
body:has(#book.active),body:has(#trade.active){padding-top:0}