/* v1.1.2 landscape web composition */
:root{--web-stage-w:1280px;--web-stage-h:720px}
html,body{width:100%;min-width:960px;min-height:620px;overflow:auto}
body{background:radial-gradient(circle at 50% 0,#263c7b 0,#0d1433 42%,#040612 100%)}
.app-shell{min-width:960px;min-height:620px;padding:18px}
.game{width:min(calc(100vw - 36px),var(--web-stage-w))!important;height:min(calc(100vh - 36px),var(--web-stage-h))!important;min-width:924px;min-height:584px;max-width:var(--web-stage-w);max-height:var(--web-stage-h);margin:0!important;border:1px solid #4a62a5;border-radius:18px!important;background:#070d23 url("assets/art/landscape-game-background.png") center/cover no-repeat!important;box-shadow:0 24px 80px #02030c,0 0 0 1px #6de5ff33}
.game:before{content:"LANDSCAPE WEB EDITION";position:absolute;z-index:9;left:22px;top:17px;color:#8af4ff;font:700 11px/1 Consolas,monospace;letter-spacing:2px;text-shadow:0 0 8px #12cfff}
.topbar{top:0!important;height:76px!important;padding:12px 18px!important;grid-template-columns:minmax(360px,1fr) 164px 128px 72px 72px!important;gap:10px!important;background:linear-gradient(180deg,#06112ff2,#06112f99)!important;border-bottom:1px solid #4d74b966!important}
.brand-slot{display:block}.stat-chip,.timer-chip,.icon-btn{min-height:50px}.hud-copy small,.timer-chip span,.icon-btn small{font-size:11px!important}.timer-chip b{font-size:19px}.icon-btn span{font-size:18px}
.guest-stage{position:absolute!important;left:0;top:76px;width:43%;height:calc(100% - 76px)!important;padding:0!important;transform:none!important;border-right:2px solid #45d9ef55;background:linear-gradient(90deg,#07102e55,#09133222)}
.guest{left:4%!important;bottom:8%!important;width:43%!important;height:58%!important}.guest-art{width:100%!important;height:88%!important;background-position:center bottom}.guest-nameplate{left:10%!important;right:10%!important;bottom:0!important}
.order-card{left:42%!important;right:4%!important;top:8%!important;width:auto!important;min-height:244px;padding:20px 20px 18px 30px!important}.order-card h1{font-size:28px!important;margin:10px 0}.order-card .eyebrow{font-size:12px!important}.recipe{flex-wrap:wrap!important;gap:6px!important}.recipe span{font-size:13px!important;padding:4px 7px!important}.patience,.patience b{font-size:13px!important}.hunter-request{min-height:40px}
.star-counter{top:auto!important;right:auto!important;left:45%!important;bottom:8%!important;gap:10px}.star-counter span{font-size:14px!important;min-height:40px;padding:9px 14px!important}
.figma-mixing-scene{inset:76px 0 0 43%!important;background:linear-gradient(180deg,#10163822,#05081766)}
.figma-mixing-scene:before{content:"MIXING DECK · 0.8G";position:absolute;left:24px;top:18px;color:#8af4ff;font:700 11px Consolas;letter-spacing:3px}
.integrated-counter{inset:76px 0 0 43%!important;width:auto!important;height:auto!important}
.integrated-counter .ingredient{width:70px!important;height:70px!important;min-width:70px!important;min-height:70px!important}.integrated-counter .ingredient img{width:62px!important;height:62px!important}.integrated-counter .left-edge-hotspot img,.integrated-counter .right-edge-hotspot img{width:56px!important;height:66px!important}.integrated-counter .ingredient b,.integrated-counter .ingredient.selected b,.integrated-counter .ingredient:disabled b{font-size:12px!important}
.integrated-counter .ingredient-shelf:before{left:12%!important;right:12%!important;top:46%!important;height:28%!important}.integrated-counter .ingredient-shelf:after{left:9%!important;right:9%!important;top:76%!important}
.integrated-counter .action-row{left:9%!important;right:9%!important;bottom:24px!important;height:64px!important;grid-template-columns:90px 90px 1fr!important;gap:12px!important}.integrated-counter .minor-btn,.integrated-counter .primary-btn{font-size:14px!important}
.overlay{padding:28px}.panel{width:min(92vw,760px)!important;max-height:88vh;padding:26px}.menu-panel .menu-list{grid-template-columns:1fr 1fr}.hunter-panel{width:min(92vw,900px)!important}.hunter-track{grid-template-columns:repeat(4,minmax(0,1fr))!important}.hunter-card.hunter-1{grid-column:auto!important;display:block!important;min-height:128px!important}.hunter-card.hunter-1 .portrait{width:100%!important;height:76px!important}.hunter-card{min-height:128px!important}.hunter-card .portrait{height:76px!important}
.result-panel{width:min(92vw,760px)!important}.service-scene{height:320px}.summary-panel,.pause-panel{width:min(92vw,560px)!important}
.splash-screen{width:min(100vw,1280px)!important;height:100vh!important;max-height:none!important;aspect-ratio:auto!important;background:#080d23}.splash-bg{object-fit:cover;object-position:center 44%;filter:brightness(.82)}
.splash-screen:before{display:none}.splash-start{left:72%!important;top:68%!important;width:min(32vw,390px)!important}.splash-credit{left:64%!important;top:78%!important;width:31%!important;font-size:13px!important;text-align:center!important}
@media(max-height:680px){.app-shell{padding:10px}.game{height:calc(100vh - 20px)!important;min-height:584px}.topbar{height:68px!important}.guest-stage{top:68px!important;height:calc(100% - 68px)!important}.figma-mixing-scene,.integrated-counter{inset:68px 0 0 43%!important}.order-card{top:5%!important;min-height:218px;padding-block:14px!important}.order-card h1{font-size:24px!important}.integrated-counter .ingredient{width:60px!important;height:60px!important;min-width:60px!important;min-height:60px!important}.integrated-counter .ingredient img{width:54px!important;height:54px!important}.integrated-counter .action-row{height:56px!important;bottom:16px!important}}

/* Figma node 81:2 — full-stage 1920 × 1080 coordinate map. */
.figma-mixing-scene,.integrated-counter{inset:0!important;width:100%!important;height:100%!important}
.figma-mixing-scene{background:none}.figma-mixing-scene:before{display:none}
.integrated-counter .ingredient-shelf:before,.integrated-counter .ingredient-shelf:after{display:none!important}
.topbar{position:absolute!important;left:47%!important;right:2%!important;top:2.2%!important;width:auto!important;height:62px!important;padding:6px!important;grid-template-columns:minmax(0,1fr) 150px 120px 62px 62px!important;background:transparent!important;border:0!important}
.game:before{display:none}.stat-chip,.timer-chip,.icon-btn{min-height:50px;background:#07122ee8}
.guest-stage{left:1.5%!important;top:14%!important;width:42%!important;height:43%!important;border:0;background:none}
.guest{left:0!important;bottom:-3%!important;width:39%!important;height:72%!important}.guest-art{height:90%!important}
.order-card{left:37%!important;right:1%!important;top:3%!important;min-height:205px;padding:16px 16px 14px 25px!important}.order-card h1{font-size:24px!important;margin:7px 0}.recipe span{font-size:11px!important}.patience,.patience b{font-size:11px!important}
.star-counter{left:46%!important;bottom:auto!important;top:35%!important}.star-counter span{font-size:12px!important;min-height:34px;padding:6px 10px!important}
.drink-glass,.finished-drink{left:46.614583%!important;top:81.388889%!important;width:6.770833%!important;height:13.240741%!important}
.finished-drink{top:81.388889%!important}
.ingredient-display-slots{left:50%!important;top:72.222222%!important;width:28.177083%!important;height:9.814815%!important;transform:translateX(-50%)!important}
.ingredient-slot{top:13.207547%!important;width:14.787431%!important;height:75.471698%!important;aspect-ratio:auto!important}
.ingredient-slot:nth-child(1){left:2.402957%!important}.ingredient-slot:nth-child(2){left:29.020333%!important}.ingredient-slot:nth-child(3){left:55.452865%!important}.ingredient-slot:nth-child(4){left:82.070240%!important}
.integrated-counter .action-row{left:38%!important;right:38%!important;bottom:2.2%!important;height:58px!important;grid-template-columns:72px 72px 1fr!important;gap:8px!important}
.tutorial-focus-fruit{left:25.520833%!important;top:45.370370%!important;width:35.677083%!important;height:10.185185%!important}
.tutorial-focus-mixer{left:22.135417%!important;top:58.796296%!important;width:26.5625%!important;height:14.814815%!important}
.tutorial-focus-water{left:2.083333%!important;top:57.870370%!important;width:19.791667%!important;height:18.055556%!important}
.tutorial-focus-spirits{left:48.697917%!important;top:57.870370%!important;width:33.59375%!important;height:18.055556%!important}
.tutorial-tip{font-size:clamp(12px,1.45vw,28px)!important}
.tutorial-tip-fruit{left:26.666667%!important;top:51.851852%!important;width:46.666667%!important;height:3.703704%!important}
.tutorial-tip-mixer{left:33.072917%!important;top:67.962963%!important;width:34.010417%!important;height:3.703704%!important}
.tutorial-tip-water{left:21.5625%!important;top:70.833333%!important;width:6.25%!important;height:5.555556%!important}
.tutorial-tip-rum{left:72.135417%!important;top:71.574074%!important;width:6.25%!important;height:5.555556%!important}
.tutorial-tip-soda{left:4.895833%!important;top:83.611111%!important;width:6.25%!important;height:5.555556%!important}
.tutorial-tip-vodka{left:87.604167%!important;top:82.777778%!important;width:6.25%!important;height:5.555556%!important}
.tutorial-dismiss{left:42.1875%!important;top:76.388889%!important;width:15.625%!important;height:3.148148%!important;font-size:clamp(12px,1.45vw,28px)!important}
@media(max-height:680px){.figma-mixing-scene,.integrated-counter{inset:0!important}.topbar{top:1.5%!important;height:56px!important}.guest-stage{top:13%!important;height:44%!important}.order-card{top:2%!important;min-height:185px}.integrated-counter .action-row{bottom:1.5%!important;height:50px!important}}

/* Browser review 2026-09-03: presentation-only adjustments. */
.tutorial-focus{display:none!important}
.tutorial-dismiss{
 left:37%!important;top:77.5%!important;width:26%!important;height:7%!important;
 padding:clamp(8px,1.1vw,16px)!important;text-align:center!important;
 font-size:clamp(14px,1.35vw,22px)!important;line-height:1.25!important
}
.guest-stage{left:20%!important;top:10%!important;width:60%!important;height:38%!important}
.guest{left:0!important;bottom:0!important;width:30%!important;height:88%!important}
.guest-nameplate{left:7%!important;right:7%!important}
.order-card{
 left:55%!important;right:0!important;top:8%!important;min-height:164px!important;
 padding:9px 14px 9px 22px!important
}
.order-card h1{margin:3px 0 4px!important;font-size:22px!important;line-height:1.05!important}
.order-card .hunter-request{min-height:32px;padding-block:2px!important}
.order-card .recipe{margin:4px 0!important}.order-card .recipe span{padding:2px 5px!important}
.order-card .patience{margin-top:3px!important}
.star-counter{left:45%!important;top:36%!important}
.integrated-counter .action-row{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;padding:0!important;pointer-events:none!important}
.integrated-counter .action-row button{position:absolute!important;bottom:3%!important;height:7%!important;min-height:44px!important;pointer-events:auto!important}
#undoBtn{left:22%!important;width:6%!important}
#clearBtn{left:29%!important;width:6%!important}
#primaryBtn{left:69%!important;width:15%!important}
@media(max-height:680px){
 .guest-stage{top:9%!important;height:39%!important}
 .order-card{top:5%!important;min-height:150px!important;padding-top:7px!important}
 .integrated-counter .action-row{inset:0!important;height:100%!important}
 .integrated-counter .action-row button{bottom:2.5%!important;height:7.5%!important;min-height:42px!important}
}

/* Keep the complete stage at its authored 16:9 ratio on every desktop window. */
:root{--stage-gutter:36px}
.game{
 width:min(calc(100vw - var(--stage-gutter)),calc((100vh - var(--stage-gutter)) * 16 / 9),var(--web-stage-w))!important;
 height:auto!important;aspect-ratio:16/9!important;min-height:0!important;max-height:none!important
}
@media(max-height:680px){:root{--stage-gutter:20px}.game{height:auto!important;min-height:0!important}}

/* Browser review 2026-09-03: guest, records and modal refinements. */
.guest{
 left:4%!important;bottom:18%!important;width:28.5%!important;height:83.6%!important
}
.guest-nameplate{
 left:9.5%!important;right:9.5%!important;min-height:46px!important;padding-block:5px!important
}
.guest-nameplate strong{font-size:13px!important}
.guest-nameplate span{font-size:7.5px!important}
.star-counter{
 left:auto!important;right:20%!important;top:36.5%!important;bottom:auto!important
}
.result-panel,.pause-panel,.summary-panel,.levelup-panel{
 width:min(86vw,560px)!important;margin-inline:auto!important
}

/* The splash uses the same fixed 16:9 containment as the gameplay stage. */
.splash-screen{
 position:fixed!important;left:50%!important;top:50%!important;
 width:min(calc(100vw - var(--stage-gutter)),calc((100svh - var(--stage-gutter)) * 16 / 9),var(--web-stage-w))!important;
 height:auto!important;aspect-ratio:16/9!important;min-height:0!important;max-height:none!important;
 margin:0!important;transform:translate(-50%,-50%)!important;border:1px solid #4a62a5;
 border-radius:18px;box-shadow:0 24px 80px #02030c,0 0 0 1px #6de5ff33
}
.splash-bg{object-fit:cover!important;object-position:center!important}

/* Pull the two upper-stage subjects slightly toward the visual center. */
.guest{left:7%!important}
.order-card{left:53%!important;right:2%!important}
.star-counter{right:22%!important}