@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Zen+Maru+Gothic:wght@400;700&display=swap');
:root { color-scheme: dark; --ink:#f5f1e8; --muted:#b0bed0; --gold:#ffd97a; --line:#465772; --panel:#29394f; }
* { box-sizing:border-box; }
body { margin:0; background:#1a2433; color:var(--ink); font-family:'Zen Maru Gothic',sans-serif; }
button,textarea { font:inherit; }
button { touch-action:manipulation; -webkit-tap-highlight-color:transparent; cursor:pointer; user-select:none; }
button:disabled { cursor:default; }
button:focus-visible,summary:focus-visible,textarea:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
button { color:inherit; }
.root { min-height:100svh; background:radial-gradient(ellipse at 25% 32%,#33465e 0%,#1a2433 65%); display:flex; flex-direction:column; }
.header { text-align:center; padding:22px 12px 12px; }
.title { font-family:'DotGothic16',monospace; font-size:clamp(22px,5.4vw,32px); letter-spacing:1px; color:var(--gold); margin:0; }
.title-emoji { background:none; border:none; padding:0; font-size:inherit; vertical-align:middle; min-width:44px; min-height:44px; }
.chapter { color:var(--muted); font-size:12px; letter-spacing:2px; margin-top:3px; }
.main { width:100%; max-width:1040px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:36px; flex:1; align-items:start; }
.play-side { min-width:0; padding-top:12px; }
.stats { text-align:center; }
.rice-count { font-family:'DotGothic16',monospace; font-size:clamp(30px,5vw,46px); font-variant-numeric:tabular-nums; }
.rice-count > span { font-size:.55em; }
.cps { font-size:13px; color:var(--muted); margin-top:6px; }
.cps b { color:var(--ink); }
.cps > span { display:inline-block; margin:0 5px; }
.click-result { min-height:27px; color:var(--gold); font:20px 'DotGothic16',monospace; font-variant-numeric:tabular-nums; }
.click-result small { font-size:12px; }
.left { position:relative; height:288px; display:grid; place-items:center; isolation:isolate; }
.rice-orbit { position:absolute; width:230px; height:230px; border:1px solid #ffd97a15; border-radius:50%; background:radial-gradient(circle,#ffd97a10,transparent 68%); z-index:-1; }
.rice-orbit:after { content:''; position:absolute; inset:14px; border:1px dashed #ffd97a18; border-radius:50%; }
.onigiri-btn { border:0; background:none; padding:0; width:260px; height:260px; filter:drop-shadow(0 16px 18px #0005); transition:transform .08s; }
.onigiri-btn svg { width:100%; height:100%; display:block; pointer-events:none; }
.onigiri-btn:active,.onigiri-btn.squish { transform:scale(.92) rotate(-2deg); }
.boosting .rice-orbit { box-shadow:0 0 50px #ffd97a25; border-color:#ffd97a99; }
.play-caption { min-height:28px; font-size:12px; color:var(--muted); text-align:center; }
.boost-label { color:var(--gold); font-weight:700; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.combo .rice-orbit { box-shadow:0 0 55px #ffcf6755; border-color:#ffebac; }
.goal-ready { color:var(--gold); }
.particle { position:absolute; pointer-events:none; color:var(--gold); font-family:'DotGothic16',monospace; font-size:20px; text-shadow:0 2px 2px #000; animation:floatUp .8s ease-out forwards; z-index:5; }
@keyframes floatUp { from { opacity:1; transform:translate(-50%,-25%); } to { opacity:0; transform:translate(-50%,-80px); } }
.news { display:flex; flex-direction:column; gap:7px; width:100%; background:#14203080; border:1px solid #7389a333; border-radius:12px; padding:14px 16px; text-align:left; min-height:100px; margin-top:10px; }
.news-label { font-family:'DotGothic16',monospace; color:var(--gold); font-size:12px; letter-spacing:1px; display:flex; justify-content:space-between; }
.news-text { font-size:14px; line-height:1.7; }
.news-box { position:relative; }
.news-popover { position:absolute; top:100%; left:0; right:0; z-index:20; background:#24374b; border:1px solid #b8a16b; border-radius:10px; padding:12px; box-shadow:0 8px 22px #0006; }
.news-popover p { margin:0 0 10px; font-size:14px; line-height:1.8; }
.news-popover > div { display:flex; justify-content:flex-end; gap:8px; }
.news-popover button { min-height:44px; padding:6px 12px; border:1px solid var(--line); border-radius:8px; background:#344b60; }
.right { min-width:0; }
.tabbar { display:flex; padding:5px; background:#101b2b77; border:1px solid #687e9833; border-radius:12px; gap:4px; margin:0 0 10px; }
.tabbtn { border:none; background:none; color:var(--muted); min-height:44px; flex:1; border-radius:6px; font-size:13px; font-weight:700; }
.tabbtn.active { background:var(--gold); color:#263044; }
.panel-content { max-height:calc(100svh - 180px); min-height:300px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#5e7290 transparent; padding:0 5px 12px 1px; }
.subnav { display:flex; gap:8px; padding:0 0 10px; position:sticky; top:0; z-index:6; background:#1a2433; }
.subnav button { min-height:44px; flex:1; border:1px solid var(--line); background:#26354a; border-radius:8px; font-size:13px; color:var(--muted); }
.subnav button.selected { border-color:var(--gold); color:var(--gold); background:#3a3d38; }
.count-badge { display:inline-flex; align-items:center; justify-content:center; background:var(--gold); color:#263044; border-radius:20px; min-width:20px; padding:1px 5px; font-size:11px; margin-left:4px; }
.shop-controls { display:flex; align-items:start; gap:8px; padding-bottom:10px; position:sticky; top:0; z-index:6; background:#1a2433; }
.shop-controls .subnav { flex:0 0 calc(100% - 186px); position:static; padding:0; }
.quantity { display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; flex-shrink:0; }
.quantity button { min-width:44px; min-height:44px; padding:4px 8px; border:0; background:#253448; color:var(--muted); font-size:12px; }
.quantity button[aria-pressed=true] { background:#4e6078; color:#fff; }
.shop-item { width:100%; display:flex; align-items:center; gap:10px; background:#27374c; border:1px solid var(--line); border-radius:12px; padding:13px 12px; margin:0 0 8px; text-align:left; transition:background .12s,border-color .12s; }
.shop-item.affordable { border-color:#93ab8c; background:#30423f; }
.featured-upgrade { width:100%; display:flex; align-items:center; gap:12px; min-height:68px; padding:10px 12px; margin-bottom:10px; border:1px solid var(--line); border-radius:10px; background:#27374c; text-align:left; }
.featured-upgrade.affordable { border-color:var(--gold); background:#3a3d38; }
.featured-upgrade:disabled .shop-cost { color:var(--muted); }
.upgrade-label { color:var(--muted); font-size:12px; font-weight:400; margin-right:4px; }
.building-item { flex-wrap:wrap; }
.building-milestone { flex-basis:100%; display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; border-top:1px solid #46577277; padding-top:8px; }
.milestone-track { flex:1; max-width:96px; height:4px; border-radius:4px; background:#172435; overflow:hidden; }
.milestone-track > span { display:block; height:100%; background:#b7dbb1; }
.finger-goal { margin:0 2px 12px; color:var(--gold); font-size:12px; line-height:1.6; }
.shop-item:not(:disabled):active { background:#475442; }
.shop-item:disabled { color:#c9d2df; }
.shop-item:disabled .shop-cost { color:#aab9cb; }
.shop-icon { font-size:29px; width:36px; flex-shrink:0; text-align:center; }
.shop-body { flex:1; min-width:0; }
.shop-name { display:block; font-size:14px; font-weight:700; line-height:1.45; }
.shop-desc { display:block; font-size:12px; color:var(--muted); line-height:1.6; margin-top:3px; }
.production { display:block; color:#b7dbb1; font-size:12px; margin-top:4px; line-height:1.5; }
.shop-meta { text-align:right; flex-shrink:0; }
.shop-cost { font-family:'DotGothic16',monospace; font-size:13px; color:var(--gold); white-space:nowrap; }
.shop-owned { display:block; font-size:12px; color:var(--muted); margin-top:5px; }
.next-building { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; padding:16px 12px; border:1px dashed var(--line); border-radius:10px; font-size:12px; color:var(--muted); }
.panel-help { margin:4px 2px 14px; font-size:13px; color:var(--muted); line-height:1.7; }
.empty-state { padding:20px 12px; color:var(--muted); font-size:14px; line-height:1.8; }
.owned-upgrades,.save-help { padding:12px; border-top:1px solid var(--line); font-size:13px; margin-top:16px; }
summary { cursor:pointer; padding:8px 0; min-height:44px; }
.owned-upgrades > div { display:flex; flex-direction:column; gap:3px; border-top:1px solid #46577277; padding:9px 0; }
.owned-upgrades > div span, .owned-upgrades > div small { color:var(--muted); font-size:12px; }
.ach-progress { height:4px; background:#3a4c64; border-radius:8px; margin:4px 0 10px; overflow:hidden; }
.ach-progress > span { display:block; height:100%; background:var(--gold); }
.filters { display:flex; gap:6px; margin-bottom:12px; }
.filters button { background:transparent; border:1px solid transparent; min-height:44px; border-radius:8px; padding:6px 12px; color:var(--muted); font-size:12px; }
.filters button[aria-pressed=true] { color:var(--gold); border-color:var(--line); background:#29394f; }
.ach-item { display:flex; align-items:center; gap:10px; padding:11px 12px; background:#27374c; border:1px solid var(--line); border-radius:10px; margin-bottom:7px; }
.ach-item > svg { flex-shrink:0; }
.ach-item.done { border-color:#b29659; background:#383c38; }
.ach-name { font-size:14px; font-weight:700; }
.ach-desc { font-size:12px; color:var(--muted); line-height:1.65; margin-top:3px; }
.ach-check { margin-left:auto; color:var(--gold); }
.building-row { padding:14px; background:#27374c; border:1px solid var(--line); border-radius:12px; margin-bottom:10px; }
.building-head { display:flex; justify-content:space-between; gap:8px; font-size:14px; }
.building-icons { font-size:24px; line-height:1.7; margin:10px 0; overflow-wrap:anywhere; }
.skin-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.skin-card { background:#27374c; border:1px solid var(--line); border-radius:12px; padding:8px 8px 14px; text-align:center; }
.skin-card.active { border-color:var(--gold); background:#3a3d38; }
.skin-card:disabled { background:#223145; }
.skin-preview { height:115px; display:grid; place-items:center; }
.skin-preview svg { width:120px; height:120px; }
.skin-name { font-size:14px; font-weight:700; }
.skin-ab { color:var(--muted); font-size:12px; margin:4px 0; min-height:36px; line-height:1.5; }
.skin-price { color:var(--gold); font-size:13px; }
.save-status { padding:16px; border:1px solid var(--line); border-radius:12px; background:#27374c; display:flex; flex-direction:column; gap:6px; margin-bottom:12px; font-size:14px; }
.save-status span { color:var(--muted); font-size:12px; }
.section-label { display:block; font-size:14px; margin:12px 0 8px; color:var(--gold); }
.save-area { width:100%; min-height:130px; resize:vertical; background:#141f30; border:1px solid var(--line); border-radius:10px; color:var(--ink); font-size:16px; padding:12px; }
.craft-row { display:flex; gap:10px; margin:12px 0; }
.craft-btn { flex:1; min-height:44px; border:1px solid var(--line); border-radius:8px; background:#3a4b63; font-size:14px; }
.craft-btn:disabled { color:#94a5bd; background:#27374c; }
.save-message { font-size:13px; line-height:1.7; color:var(--gold); min-height:24px; }
.save-help p { color:var(--muted); line-height:1.8; }
.save-help a { color:var(--gold); text-underline-offset:3px; }
.save-help summary { min-height:44px; align-content:center; cursor:pointer; }
.file-load { width:100%; }
.notice,.storage-warning { margin-top:10px; padding:12px; background:#253c39; border:1px solid #658e7c; border-radius:10px; font-size:13px; line-height:1.7; }
.notice { display:flex; align-items:center; gap:8px; }
.notice button { border:0; background:none; min-width:44px; min-height:44px; font-size:24px; }
.storage-warning { background:#4a342e; border-color:#bd8068; }
.golden { position:absolute; z-index:8; font-size:48px; border:2px solid var(--gold); border-radius:50%; width:74px; height:74px; background:#765b23; filter:drop-shadow(0 0 16px #ffc850); animation:goldPulse .8s infinite alternate; }
.golden > span { position:absolute; font-size:12px; bottom:0; left:0; width:100%; color:#fff9df; font-weight:bold; text-shadow:0 1px 2px #000; }
@keyframes goldPulse { from { transform:rotate(-8deg) scale(.96); } to { transform:rotate(8deg) scale(1.04); } }
.toast-area { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:6px; z-index:50; width:max-content; max-width:calc(100% - 24px); pointer-events:none; }
.toast { border:1px solid #ffebac; background:#ffd97a; color:#253044; padding:10px 16px; border-radius:12px; font-size:13px; font-weight:700; box-shadow:0 6px 24px #0005; line-height:1.5; }
.footer-stats { text-align:center; font-size:12px; color:var(--muted); padding:16px 12px; }
.footer-stats > span { margin:0 5px; opacity:.5; }
.new-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--gold); margin-left:5px; vertical-align:middle; }
.tabbtn.active .new-dot { background:#3c533f; }
.regular-summary { width:100%; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:5px 12px; padding:10px 12px; min-height:44px; margin-bottom:10px; border:1px solid #709a84; border-radius:10px; background:#2b413e; text-align:left; font-size:12px; }
.regular-summary b { color:var(--gold); margin-left:5px; }
.regular-total { display:flex; justify-content:space-between; gap:8px; margin:4px 0 12px; font-size:13px; }
.regular-total b { color:var(--gold); }
.regular-card { display:grid; grid-template-columns:76px minmax(0,1fr); gap:10px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#29394e; margin-bottom:10px; }
.regular-card.welcomed { border-color:#719c8b; background:#2b403f; }
.regular-portrait { width:76px; height:76px; }
.regular-portrait.unknown g { opacity:.08; }
.regular-body h2 { font-size:14px; line-height:1.5; margin:0 0 4px; color:var(--gold); }
.regular-body p { margin:4px 0 0; line-height:1.6; }
.regular-welcome { grid-column:1 / -1; min-height:44px; padding:8px; border:1px solid #a99863; border-radius:8px; background:#3d5147; font-size:13px; }
.regular-welcome:disabled { color:var(--muted); border-color:var(--line); background:#27374c; }
.regular-conversation { grid-column:1 / -1; display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); padding-top:8px; }
.regular-conversation p { flex:1; margin:0; font-size:13px; line-height:1.7; }
.regular-conversation button { min-height:44px; min-width:52px; border:1px solid #719c8b; border-radius:8px; background:#334d49; }
.pair-goal { border-bottom:1px solid var(--line); margin-bottom:8px; padding-bottom:6px; font-size:12px; }
.pair-goal summary { min-height:44px; align-content:center; color:var(--gold); cursor:pointer; }
.pair-goal p { margin:4px 0 8px; }
.pair-requirements { display:flex; gap:8px 16px; flex-wrap:wrap; color:var(--muted); }
.collection-stats { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 10px; margin:0 2px 10px; color:var(--muted); font-size:12px; }
.recipe-card { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:10px; margin-bottom:10px; padding:10px; border:1px solid var(--line); border-radius:12px; background:#29394e; }
.recipe-card.cooked { border-color:#719c8b; background:#2b403f; }
.recipe-card h2,.kitchen h2 { font-size:16px; margin:0; }
.meal-art { display:block; width:100%; height:auto; }
.recipe-card .meal-art { width:112px; }
.recipe-cost { font-size:12px; line-height:1.6; color:var(--muted); margin:6px 0; }
.recipe-card button,.meal-actions button,.kitchen-heading button { min-height:44px; padding:6px 12px; border:1px solid #719c8b; border-radius:8px; background:#334d49; font-size:13px; }
.recipe-card button:disabled { background:#27374c; border-color:var(--line); color:var(--muted); }
.kitchen { border:1px solid var(--line); border-radius:12px; padding:12px; background:#29394e; }
.kitchen-heading { display:flex; align-items:center; gap:10px; }
.kitchen-heading h2 { flex:1; }
.kitchen-heading > span { font-size:12px; color:var(--gold); }
.kitchen-heading button { background:transparent; border-color:var(--line); padding:6px 8px; }
.kitchen > .meal-art { max-height:210px; }
.kitchen > .recipe-cost { text-align:center; }
.cook-action { display:block; width:100%; min-height:48px; border:1px solid var(--gold); border-radius:10px; background:#ffd97a; color:#263044; font-weight:700; font-size:15px; }
.cook-action:disabled { background:#344257; border-color:var(--line); color:var(--muted); }
.recipe-complete { color:#b7dbb1; font-size:12px; text-align:center; }
.meal-reaction { margin-top:10px; padding:10px 12px; border-radius:10px; background:#192a3b; font-size:13px; }
.meal-reaction b { color:var(--gold); font-size:12px; }
.meal-reaction p { margin:4px 0 0; line-height:1.8; }
.meal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.outing-summary { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:48px; border:1px solid #8eae9e; border-radius:10px; background:#334d49; padding:8px 12px; margin:10px 0; }
.outing-summary span { font-size:13px; color:#d0e1d0; }
.outing-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.outing-heading button,.delivery-row button,.plate-use { min-height:44px; padding:6px 10px; border:1px solid #719c8b; border-radius:8px; background:#334d49; font-size:13px; }
.outing-heading button { background:transparent; border-color:var(--line); }
.outing-heading span { font-size:13px; color:var(--gold); }
.collection-reward { margin:8px 0 12px; color:var(--gold); font-size:13px; }
.rebirth-summary { border-color:#b7a46a; background:#3a3d38; }
.rebirth-panel .regular-total { margin-bottom:6px; }
.heirlooms { list-style:none; margin:4px 0 14px; padding:0; }
.heirlooms li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:8px 10px; margin-bottom:6px; border:1px solid var(--line); border-radius:8px; background:#26364b; font-size:13px; }
.heirlooms li span { grid-column:1; color:var(--muted); font-size:12px; }
.heirlooms li small { grid-column:2; grid-row:1 / span 2; align-self:center; color:var(--muted); font-size:12px; }
.heirlooms li.done { border-color:#8eae9e; background:#2b403f; }
.heirlooms li.done small { color:var(--gold); }
.rebirth-confirm { padding:12px; border:1px solid var(--gold); border-radius:10px; background:#2e3a3f; }
.rebirth-confirm h3 { margin:0 0 8px; font-size:15px; }
.rebirth-confirm dl { margin:0 0 8px; font-size:13px; line-height:1.7; }
.rebirth-confirm dt { color:var(--gold); font-weight:bold; }
.rebirth-confirm dd { margin:0 0 6px; }
.rebirth-go { border-color:var(--gold); color:var(--gold); }
.rebirth-backup { margin-top:12px; }
.postcard-art { display:block; width:100%; height:auto; }
.outing-card { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:8px; margin-bottom:8px; border:1px solid var(--line); border-radius:10px; background:#29394e; }
.outing-card > .postcard-art { width:90px; flex-shrink:0; }
.outing-card > span:first-of-type { flex:1; min-width:0; }
.outing-card b { display:block; font-size:14px; }
.outing-card small { display:block; font-size:12px; color:var(--muted); margin-top:5px; }
.outing-card:disabled .postcard-art { filter:saturate(.3); opacity:.6; }
.outing-card:disabled b { color:var(--muted); }
.outing-card.complete { border-color:#8eae9e; background:#2b403f; }
.outing-card.complete > span:last-child { color:var(--gold); }
.outing-title { margin:8px 0; font-size:17px; }
.outings > .postcard-art { max-height:140px; margin-bottom:6px; }
.delivery-row { display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:8px 0; }
.delivery-row > .meal-art { width:86px; flex-shrink:0; }
.delivery-row h3 { margin:0 0 6px; font-size:14px; }
.delivery-row button:disabled,.plate-picker button:disabled { color:var(--muted); border-color:var(--line); background:#26364b; }
.postcard { padding:8px; border-radius:12px; background:#f3e8cf; color:#374950; box-shadow:0 3px 0 #0003; }
.postcard-letter { padding:8px 8px 12px; }
.postcard-letter h2 { margin:0 0 4px; font-size:16px; }
.postcard-letter > span { font-size:12px; color:#63726b; }
.postcard-letter p { font-size:15px; line-height:1.9; margin:10px 0 0; }
.plate-use { color:var(--ink); margin:0 6px 8px; }
.plate-picker { margin:0 0 12px; font-size:13px; }
.plate-picker summary { cursor:pointer; min-height:44px; padding:12px 4px; }
.plate-picker > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.plate-picker button { display:flex; align-items:center; gap:8px; text-align:left; padding:8px; min-height:56px; border:1px solid var(--line); border-radius:8px; background:#29394e; }
.plate-picker button[aria-pressed="true"] { border-color:var(--gold); }
.plate-picker small { display:block; color:var(--muted); font-size:12px; margin-top:3px; }
.plate-swatch { display:block; width:32px; height:20px; border:3px solid; border-radius:50%; flex-shrink:0; }
.plate-swatch.paw { box-shadow:inset 0 0 0 4px #efbdab; }
.plate-swatch.moon { box-shadow:inset 5px 0 #e6d5a9; }
.plate-swatch.rainbow { background:linear-gradient(110deg,#eea5a3,#e9c770,#a3cbae,#9cbad9,#c6a4d8) !important; }
.meal-steam { animation:steam 2s ease-in-out infinite alternate; }
@keyframes steam { from { opacity:.35; transform:translateY(3px); } to { opacity:.8; transform:translateY(-3px); } }
@media (max-width:759px) {
 html,body,#root { height:100%; overflow:hidden; overscroll-behavior:none; }
 .root { min-height:0; height:var(--app-height,100dvh); padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); touch-action:pan-y; }
 .header { flex-shrink:0; padding:0 10px; }
 .title { font-size:20px; }
 .chapter { display:none; }
 .main { display:flex; flex-direction:column; min-height:0; padding:0 10px; gap:6px; }
 .play-side,.right { width:100%; padding:0; }
 .play-side { position:relative; flex-shrink:0; min-height:0; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
 .rice-count { white-space:nowrap; }
 .onigiri-btn { touch-action:none; }
 /* 握る: counters on top, the onigiri takes every remaining pixel above the menu. */
 .view-play .play-side { flex:1; display:flex; flex-direction:column; }
 .view-play .stats { flex-shrink:0; padding-top:2px; }
 .view-play .rice-count { font-size:clamp(32px,10vw,44px); }
 .view-play .cps { margin-top:2px; font-size:14px; line-height:1.6; }
 .view-play .click-result { min-height:28px; }
 .view-play .left { flex:1; min-height:150px; height:auto; container-type:size; }
 .view-play .onigiri-btn { width:min(72vw,40vh); height:min(72vw,40vh); width:min(100cqw,100cqh,360px); height:min(100cqw,100cqh,360px); }
 .view-play .rice-orbit { width:min(66vw,37vh); height:min(66vw,37vh); width:calc(min(100cqw,100cqh,360px) * .9); height:calc(min(100cqw,100cqh,360px) * .9); }
 .view-play .play-caption { flex-shrink:0; min-height:24px; padding:2px 0 6px; font-size:13px; line-height:1.5; }
 .view-play .news-popover { top:auto; bottom:100%; }
 .view-play .right { flex:0 0 auto; }
 /* Other tabs: a slim bar keeps rice, production and the golden onigiri in reach. */
 .root:not(.view-play) .header { display:none; }
 .root:not(.view-play) .play-side { display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:10px; align-items:center; padding-top:4px; }
 .root:not(.view-play) .stats { grid-column:2; grid-row:1; text-align:left; min-width:0; }
 .root:not(.view-play) .rice-count { font-size:26px; }
 .root:not(.view-play) .cps { display:flex; flex-wrap:wrap; gap:0 12px; margin-top:0; font-size:12px; line-height:1.5; }
 .root:not(.view-play) .cps > span { margin:0; }
 .root:not(.view-play) .click-result,.root:not(.view-play) .play-caption,.root:not(.view-play) .news-box,.root:not(.view-play) .rice-orbit { display:none; }
 .root:not(.view-play) .left { grid-column:1; grid-row:1; height:64px; }
 .root:not(.view-play) .onigiri-btn { width:64px; height:64px; }
 .root:not(.view-play) .golden { position:fixed; left:auto !important; top:calc(env(safe-area-inset-top) + 4px) !important; right:calc(env(safe-area-inset-right) + 10px); width:58px; height:58px; font-size:34px; }
 .root:not(.view-play) .notice,.root:not(.view-play) .storage-warning { position:static; grid-column:1 / -1; margin:6px 0 0; box-shadow:none; max-height:none; }
 .news { flex-direction:row; align-items:center; margin:0; padding:6px 10px; min-height:44px; gap:8px; }
 .news-label { font-size:11px; flex-shrink:0; gap:4px; }
 .news-text { font-size:12px; line-height:1.6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .right { display:flex; flex-direction:column; flex:1; min-height:0; }
 .collection-nav { gap:4px; }
 .collection-nav button { padding:2px 0; line-height:1.35; }
 .collection-nav .sub-count { display:block; }
 .tabbar { order:2; flex-shrink:0; margin:4px 0; padding:3px; }
 .tabbtn { min-height:44px; font-size:12px; border-radius:8px; }
 .panel-content { flex:1; max-height:none; min-height:0; padding:0 3px 4px 1px; touch-action:pan-y; }
 .subnav { padding-bottom:6px; gap:5px; }
 .subnav button { font-size:12px; padding:2px; }
 .shop-controls { padding-bottom:6px; gap:6px; }
 .shop-controls .subnav { flex:1; }
 .shop-item { padding:8px 10px; gap:6px 8px; }
 .shop-icon { font-size:25px; width:30px; }
 .shop-name { font-size:13px; }
 .shop-desc { font-size:12px; }
 .building-item .shop-desc { display:none; }
 .building-milestone { padding-top:4px; }
 .shop-owned { margin-top:3px; }
 .shop-cost { font-size:12px; }
 .featured-upgrade { min-height:56px; padding:7px 10px; gap:8px; margin-bottom:7px; }
 .featured-upgrade .production { margin-top:2px; }
 .footer-stats { display:none; }
 .golden { width:62px; height:62px; font-size:38px; touch-action:none; }
 .particle { font-size:17px; }
 .toast-area { bottom:calc(66px + env(safe-area-inset-bottom)); }
 .notice,.storage-warning { position:absolute; z-index:25; left:0; right:0; top:0; margin:0; box-shadow:0 8px 22px #0006; }
 .storage-warning { top:auto; bottom:0; max-height:134px; overflow:auto; }
 .recipe-card { grid-template-columns:90px minmax(0,1fr); padding:8px; gap:8px; }
 .recipe-card .meal-art { width:90px; }
 .kitchen { padding:8px; }
 .kitchen > .meal-art { max-height:156px; }
 .kitchen-heading { gap:6px; }
 .kitchen-heading h2 { font-size:14px; }
 .meal-reaction { padding:8px 10px; margin-top:8px; }
}
@media (max-width:359px) {
 .title { font-size:20px; }
 .main { padding:0 8px; }
 .shop-controls { flex-wrap:wrap; }
 .shop-controls .subnav { flex-basis:100%; }
 .shop-item { flex-wrap:wrap; }
 .shop-meta { margin-left:auto; }
}
@media (hover:hover) and (pointer:fine) {
 .news:hover { border-color:#ffd97a66; }
 .shop-item:not(:disabled):hover,.featured-upgrade:not(:disabled):hover { border-color:var(--gold); background:#384943; }
 .skin-card:not(:disabled):hover { border-color:var(--gold); }
}
@media (prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation:none !important; transition:none !important; }
 .particle { display:none; }
}