.bento-page{max-width:1280px;margin:24px auto;padding:0 16px;color:#503724}.bento-page h1{font-size:clamp(26px,4vw,42px)}.bento{position:relative;aspect-ratio:16/9;background:#c8dfcf url('./assets/cloth.webp') center/cover;border:3px solid #d4d4bb;border-radius:22px;overflow:hidden;container-type:inline-size;color:#503724;font-family:'Zen Maru Gothic',sans-serif}.bento *{box-sizing:border-box}.bento button{font:inherit;color:inherit;font-weight:900;background:#fff8e9;border:2px solid #c7b89e;border-radius:12px;cursor:pointer;box-shadow:0 3px 0 #76604333;padding:8px 12px;touch-action:manipulation;line-height:1.25}.bento button:hover{border-color:#397854}.bento button:focus-visible{outline:4px solid #267bcb;outline-offset:2px}.bento button[aria-pressed="true"]{background:#ffe8a2;border-color:#b58436}.bento button:disabled{cursor:default}.bento [hidden]{display:none!important}.game-tools{position:absolute;right:1.7%;top:2%;height:8%;display:flex;gap:5px;z-index:3}.game-tools button{padding:6px 9px;font-size:clamp(11px,1.3cqw,18px)}#scene{position:absolute;inset:0;display:grid;grid-template-columns:48% 48%;grid-template-rows:10% 72% 12%;gap:2% 3%;padding:2% 2%}.menu-lid{grid-column:1;grid-row:2/4;width:100%;height:100%;object-fit:contain}.recipe{background:#fff8eafa;border:2px solid #d5c6ab;border-radius:22px;box-shadow:0 5px 10px #59422a15;padding:4%;min-height:0}.menu-card{grid-column:2;grid-row:2/4;display:flex;flex-direction:column;justify-content:center;gap:5%;align-items:stretch}.menu-card h2{font-size:clamp(22px,3.7cqw,48px);line-height:1.25;margin:0;color:#bc4e38}.menu-card p{font-size:clamp(14px,1.7cqw,24px);margin:0}.levels{display:flex;gap:6px}.levels button{flex:1;font-size:clamp(20px,3cqw,40px)}.bento .primary{background:#da614c;color:white;border-color:#ba4834}.start{font-size:clamp(23px,3.4cqw,44px)!important}.status{grid-column:1;grid-row:1;display:flex;align-items:center;gap:7px;white-space:nowrap}.status span{background:#fff8ef;border:1px solid #cdbba1;padding:6px 9px;border-radius:10px;font-weight:900;font-size:clamp(11px,1.4cqw,20px)}.box-wrap{grid-column:1;grid-row:2;position:relative;height:100%;aspect-ratio:1;max-width:100%;justify-self:center}.box-art{position:absolute;width:100%;height:100%;inset:0;pointer-events:none}.board{position:absolute;inset:12% 14% 16% 14%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:2px}.bento .cell{min-width:0;min-height:0;padding:0;position:relative;border:1px solid #b79c73;border-radius:6px;background:#fff9e970;box-shadow:none}.cell img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.bento .cell.filled{background:#fff9e9}.bento .cell.preview-good{background:#9ee4a2!important;outline:2px solid #28743c}.bento .cell.preview-bad{background:#ffc0b4!important;outline:2px solid #a43222}.ingredients{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:3%}.ingredients h2{font-size:clamp(18px,2.5cqw,32px);margin:0}.parts{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:7px;flex:1;min-height:0}.bento .part{position:relative;display:flex;align-items:center;justify-content:center;padding:3px;min-height:0;min-width:0;background:#fffaf1}.bento .part.used{background:#dfefda}.part .check{position:absolute;right:3px;top:2px;background:#397c49;color:white;border-radius:50%;z-index:1;padding:0 4px}.shape{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);width:100%;height:100%;max-width:200px;max-height:140px}.shape img{width:100%;height:100%;object-fit:contain;min-height:0;min-width:0}.bento .part[aria-pressed="true"]{outline:4px solid #dfac32;outline-offset:0}.actions{display:flex;gap:8px}.actions button{flex:1;font-size:clamp(12px,1.7cqw,23px)}.bottom{grid-column:1/3;grid-row:3;display:flex;align-items:center;gap:10px;background:#fff8edeb;padding:7px 12px;border-radius:15px}.message{margin:0;flex:1;font-size:clamp(12px,1.7cqw,24px);font-weight:900}.bottom button{font-size:clamp(12px,1.6cqw,22px)}.result-card{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}.result-card h2{color:#347645;font-size:clamp(23px,3.6cqw,46px)}.result-card strong{font-size:clamp(20px,3cqw,36px);background:#ecf2d9;padding:12px;border-radius:14px}.result-card p{font-size:clamp(14px,2cqw,25px);margin:0}.shade{position:absolute;inset:0;background:#193b2dcc;display:grid;place-items:center;z-index:9;padding:3%}.shade>div{max-width:600px;max-height:100%;overflow:auto;background:#fff8e9;padding:24px;border-radius:22px;border:3px solid #d9c399;font-size:clamp(14px,1.8cqw,23px)}.shade h2{margin-top:0}.shade li{margin:8px 0}.parent-note{font-size:14px}.bento:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0}.bento:fullscreen .box-wrap{max-width:45vw}.bento .actions button:disabled{color:#837568;background:#e9e2d6;box-shadow:none}
@media(max-width:620px) and (orientation:portrait){.bento-page{padding:0 8px}.bento{aspect-ratio:auto;min-height:960px;overflow:visible}.bento[data-scene="menu"]{min-height:700px}.game-tools{top:12px;right:10px;left:10px;height:42px;justify-content:flex-end}.game-tools button{font-size:11px;padding:4px 7px}#scene{position:relative;inset:auto;display:flex;flex-direction:column;padding:68px 10px 12px;gap:12px}.menu-lid{height:275px;flex:none}.menu-card{gap:14px;padding:18px}.menu-card h2{font-size:28px}.menu-card p{font-size:15px}.levels button{font-size:25px}.start{font-size:26px!important}.status{justify-content:center;gap:4px;flex-wrap:wrap}.status span{font-size:12px;padding:5px 8px}.box-wrap,.bento:fullscreen .box-wrap{height:auto;width:100%;aspect-ratio:1;max-width:440px;align-self:center;flex:none}.ingredients{height:365px;padding:14px;flex:none}.ingredients h2{font-size:23px}.shape{max-height:none}.parts{gap:6px}.actions button{font-size:15px}.bottom{flex-wrap:wrap;padding:10px;gap:7px}.message{flex-basis:100%;font-size:16px;min-height:48px}.bottom button{font-size:14px;flex:1}.shade{position:fixed;padding:14px}.shade>div{font-size:16px;max-height:90dvh}.result-card h2{font-size:29px}.result-card strong{font-size:24px}.result-card p{font-size:18px}.bento:fullscreen{overflow:auto;min-height:0}.bento:fullscreen #scene{min-height:940px}}
@media(max-width:900px) and (orientation:landscape){.game-tools{gap:3px}.game-tools button{padding:4px;font-size:10px}.status{gap:3px}.status span{padding:3px 4px;font-size:10px}.recipe{padding:3%}.bottom{padding:4px 6px;gap:5px}.bottom button{padding:5px}.actions button{padding:5px}.bento .cell{border-radius:3px}}

.bento .shape{max-width:none;max-height:none;flex-shrink:0}