/* The play area uses the visible viewport, including mobile browser bars. */
html{height:100%}body{min-height:100%;margin:0}.app{min-width:0}
body.playing{height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none}
.playing .hero,.playing main>footer{display:none}
.playing .app{height:100dvh;max-width:1200px;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:flex;min-height:0}
.playing #play{height:100%;width:100%;min-height:0;min-width:0;margin:0;padding:8px;display:flex;flex-direction:column;gap:6px;box-shadow:none;border-radius:20px;overflow:hidden}
.playing .toolbar{flex:none;min-height:44px;flex-wrap:nowrap;gap:6px}.playing .toolbar .btn{min-height:44px;padding:8px 10px;font-size:13px;white-space:nowrap;box-shadow:0 2px 0 #b9cdcd;border-radius:12px}.playing #back{font-size:0}.playing #back:before{content:'← Trang chủ';font-size:13px}.playing #gameTitle{font-size:clamp(12px,2vw,19px);line-height:1.15;min-width:0;text-align:center}.playing .progress{flex:none;height:4px;margin:0}.playing #openLevels{font-size:12px}
.playing #bakery{flex:1;min-height:0;min-width:0;display:grid;grid-template-rows:minmax(90px,1fr) clamp(106px,24dvh,176px) 60px 46px;gap:6px}
.playing .bakery-scene{height:100%;width:100%;min-height:0;max-height:none;aspect-ratio:auto;border-radius:16px;box-shadow:none}.playing .bakery-art{object-position:center 45%}.playing .scene-label,.playing .bakery-hint,.playing .bear-speech{display:none}.playing .bakery-scene .order{left:31%;top:10%;width:38%;min-height:0;max-height:85%;padding:7px;gap:3px;font-size:clamp(14px,2.2vw,23px);border-radius:13px;line-height:1.2}.playing .order-label{font-size:10px;letter-spacing:.3px}.playing .shelf{height:100%;min-height:0;margin:0;padding:5px;gap:5px;border-width:2px;border-radius:14px;box-shadow:none;grid-template-rows:repeat(2,minmax(0,1fr))}.playing .cake{height:100%;min-height:44px;min-width:0;padding:2px;gap:0;justify-content:center;font-size:11px;line-height:1.1;border-width:2px;border-radius:11px;box-shadow:0 2px 0 #b39360}.playing .cake>.pastry{width:clamp(30px,7dvh,62px);height:clamp(30px,7dvh,62px)}
.playing .tray{min-height:0;height:60px;margin:0;padding:4px 8px;border-width:2px;border-radius:12px;box-shadow:none;display:flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap}.playing .tray-icons{min-width:0;min-height:0;flex:1;padding:0;gap:0;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));grid-auto-rows:22px;justify-items:center;align-content:center;white-space:normal}.playing .tray-item .pastry{width:22px;height:22px}.playing .empty-tray{grid-column:1/-1;font-size:12px;text-align:center;line-height:1.2}.playing .controls{margin:0;gap:6px;flex-wrap:nowrap}.playing .controls .btn{min-height:44px;padding:7px;font-size:13px;border-radius:12px;box-shadow:0 2px 0 #b9cdcd}.playing .bakery-controls .btn{flex:1}.playing .bakery-controls #serve{flex:1.4;background:#ffcd59;box-shadow:0 2px 0 #bf8c32}
.playing .feedback{flex:none;min-height:28px;height:28px;overflow:hidden;font-size:clamp(12px,2.2vw,17px);padding:3px;line-height:22px;white-space:nowrap;text-overflow:ellipsis}.playing .play-controls{flex:none;min-height:44px;justify-content:center}.playing .play-controls .btn{min-width:120px}.playing #next{flex:1;max-width:300px}.playing #quiz{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}.playing #quiz .stage{flex:1;min-height:65px;padding:8px;display:flex;flex-direction:column;justify-content:center}.playing .emoji-big{font-size:clamp(35px,12dvh,100px);line-height:1.15}.playing #question{font-size:clamp(16px,2.5dvh,25px);line-height:1.25;margin:4px}.playing .choices{flex:none;margin:0;gap:7px;grid-auto-rows:minmax(52px,auto)}.playing .choice{font-size:clamp(13px,2dvh,18px);padding:8px;line-height:1.25;min-height:48px}
dialog{border:3px solid white;border-radius:22px;background:#fffaf0;color:#36565e;width:min(94vw,650px);max-height:88dvh;padding:16px;box-shadow:0 18px 70px #173d4240}dialog::backdrop{background:#123c4988}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.dialog-heading h2{font-size:20px;margin:0}.levels{grid-template-columns:repeat(6,1fr);margin-top:16px}.level{min-height:44px}
/* Home also shows all six choices without a long feature card. */
body:not(.playing) .app{height:100dvh;min-height:0;display:flex;flex-direction:column;padding:10px;gap:10px}body:not(.playing) .hero{flex:none;padding:12px;box-shadow:0 3px 0 #c6dedb;border-radius:22px}.hero .world-label{display:none}.hero h1{font-size:clamp(22px,3.4vw,34px);margin:0}.hero p{font-size:12px;margin:5px}.hero .stats{margin-top:7px}.hero .stat{padding:6px 10px;font-size:12px}#home{flex:1;min-height:0;display:flex;flex-direction:column}#home>.caption,main>footer{display:none}.cards{height:100%;min-height:0;margin:0;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px}.tile{min-height:0!important;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:20px}.tile .icon{font-size:clamp(35px,8dvh,65px)}.tile strong{font-size:clamp(15px,2vw,20px)}.tile.bakery-feature{grid-column:auto;grid-row:auto;min-height:0;padding:0}.tile .feature-copy{width:100%;height:100%;justify-content:flex-end;gap:4px;padding:10px}.tile .feature-copy strong{font-size:clamp(16px,2vw,22px)}.feature-copy>span{font-size:11px!important}.feature-copy .feature-play{font-size:12px!important;padding:7px 10px}.feature-badge{top:8px;left:8px;padding:5px 8px;font-size:8px}
@media(max-width:660px) and (orientation:portrait){.cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:10px}.tile span:last-child{font-size:11px}.feature-copy>span:not(.feature-play){display:none}.tile .feature-copy strong{font-size:16px}.feature-badge{font-size:7px}.playing .toolbar .btn{padding:7px}.playing #gameTitle{font-size:12px}.playing .bakery-scene .order{left:29%;width:42%;top:9%;font-size:14px;padding:5px}.playing .bakery-art{object-fit:cover}.playing .tray{font-size:11px;gap:3px;padding:4px}.playing .tray-icons{grid-auto-rows:20px}.playing .tray-item .pastry{width:20px;height:20px}}
@media(min-width:800px),(orientation:landscape){.playing #bakery{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) 60px 46px;gap:8px}.playing .bakery-scene{grid-column:1;grid-row:1/4}.playing .shelf{grid-column:2;grid-row:1}.playing .tray{grid-column:2;grid-row:2}.playing .bakery-controls{grid-column:2;grid-row:3}.playing .cake>.pastry{width:clamp(30px,10dvh,100px);height:clamp(30px,10dvh,100px)}.playing .bakery-scene .order{left:24%;width:52%;top:9%}.playing .bakery-art{object-fit:cover}.playing .choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(orientation:landscape) and (max-height:500px){.playing #play{padding:5px;gap:3px}.playing .toolbar,.playing .toolbar .btn{min-height:36px}.playing .toolbar .btn{padding:5px}.playing .feedback{height:24px;min-height:24px;line-height:20px}.playing .play-controls,.playing .play-controls .btn{min-height:36px}.playing .play-controls .btn{padding:4px}.playing #bakery{grid-template-rows:minmax(0,1fr) 48px 44px;gap:5px}.playing .tray{height:48px}.playing .cake{font-size:10px}.playing .cake>.pastry{width:30px;height:30px}.playing .bakery-scene .order{font-size:13px}.playing #quiz{flex-direction:row}.playing #quiz .stage{flex:1}.playing .choices{flex:1;grid-auto-rows:minmax(44px,1fr)}.playing .choice{padding:5px;font-size:12px}.playing .emoji-big{font-size:45px}.playing #question{font-size:16px}body:not(.playing) .app{min-height:0}.hero p,.hero .stats{display:none}.hero h1{font-size:22px}.tile .icon{font-size:30px}.tile strong{font-size:14px}.tile span:last-child{font-size:10px}.feature-copy .feature-play,.feature-badge{display:none}.tile .feature-copy{padding:7px}.tile .feature-copy strong{font-size:14px}}

.playing .feedback{height:auto;max-height:42px;line-height:18px;white-space:normal;display:flex;align-items:center;justify-content:center}.playing .tray-item{width:min(22px,100%);aspect-ratio:1}.playing .tray-item .pastry{width:100%;height:auto;aspect-ratio:1}