/* Shared framing and controls from the existing five-game introduction. */
html[data-online-game] :is(#menu,#intro){position:fixed!important;inset:0!important;z-index:1000!important;display:flex;flex-direction:column;height:var(--web-height,100dvh)!important;padding:0!important;overflow:auto!important;background:radial-gradient(circle at 76% 34%,#123d76 0,transparent 33rem),linear-gradient(145deg,#07162e,#030916 82%);color:#f2f7ff;font-family:Manrope,Inter,ui-sans-serif,system-ui,sans-serif}
html[data-online-game] #menu[hidden]{display:none!important}
html[data-online-game] :is(#menu,#intro) *{box-sizing:border-box}
html[data-online-game] :is(#menu,#intro) .im-intro-header{position:static!important;inset:auto!important;display:flex!important;flex:none;align-items:center;justify-content:space-between;flex-wrap:nowrap;height:76px!important;min-height:76px!important;padding:4px clamp(22px,4vw,64px)!important;background:#061126e8;border:0;border-bottom:1px solid #ffffff20;gap:12px}
html[data-online-game] .im-intro-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:white;min-width:0}
html[data-online-game] .im-intro-brand img{width:76px!important;height:56px!important;object-fit:contain;flex:none}
html[data-online-game] .im-intro-brand b{font-size:20px!important;max-width:none!important;line-height:1.1;white-space:normal!important}
html[data-online-game] .im-intro-header-actions{display:flex;align-items:center;flex:none}
html[data-online-game] .im-intro-menu{padding:9px 14px!important;border:1px solid #44c9eb;border-radius:10px;background:#0a2850;color:white;font-size:14px!important;font-weight:850;text-decoration:none;white-space:nowrap}
html[data-online-game] :is(.menu-layout,.im-intro-body){width:min(1600px,calc(100% - 32px))!important;flex:1;min-height:0!important;height:auto!important;margin:0 auto!important;padding:16px 0!important;display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr)!important;grid-template-rows:minmax(0,1fr)!important;gap:16px!important}
html[data-online-game] :is(.menu-hero,.im-intro-story,.menu-settings,.im-intro-setup){min-width:0!important;min-height:0!important;width:auto!important;border:1px solid #ffffff22!important;border-radius:22px!important;background:linear-gradient(145deg,#0b2348e8,#06152ee8)!important;box-shadow:0 26px 75px #0007}
html[data-online-game] :is(.menu-hero,.im-intro-story){display:flex!important;flex-direction:row!important;align-items:center!important;padding:28px 32px!important;gap:18px!important;overflow:hidden}
html[data-online-game] :is(.hero-copy,.im-intro-story>div:first-child){flex:0 1 42%!important;width:42%!important;min-width:0}
html[data-online-game] :is(.pizza-hero,.im-intro-art){position:static!important;inset:auto!important;flex:1!important;width:55%!important;min-width:0;height:auto!important;max-height:100%!important;object-fit:contain;margin:0!important}
html[data-online-game] :is(#menu,#intro) h1{font-size:clamp(30px,3.4vw,52px)!important;line-height:1.06!important;margin:0!important;letter-spacing:-.035em}
html[data-online-game] :is(.intro,.im-intro-lead){font-size:18px!important;line-height:1.5!important;margin:14px 0 0!important}
html[data-online-game] :is(.menu-settings,.im-intro-setup){display:flex!important;flex-direction:column!important;justify-content:flex-start!important;padding:24px 28px!important;overflow:auto}
html[data-online-game] :is(#menu,#intro) h2{font-size:32px!important;line-height:1.1!important;margin:0 0 14px!important}
html[data-online-game] :is(.menu-fields,.im-intro-controls){display:flex!important;flex-direction:column!important;gap:9px!important;overflow:visible}
html[data-online-game] :is(#menu,#intro) label{font-size:13px!important;line-height:1.2!important;margin:0!important;color:#dce8f7;font-weight:850}
html[data-online-game] :is(#menu,#intro) select:not([hidden]){height:42px!important;min-height:42px!important;width:100%!important;padding:7px 12px!important;border:1px solid #ffffff42!important;border-radius:11px!important;background:#071a36!important;color:white!important;font-size:15px!important;margin:4px 0 0!important}
html[data-online-game] :is(.menu-choices,.im-intro-segment){display:flex!important;width:100%;gap:7px!important;margin:0!important}
html[data-online-game] :is(.menu-choices,.im-intro-segment) button{flex:1;min-width:0;height:39px!important;min-height:39px!important;padding:6px 10px!important;border:1px solid #42c3e8!important;border-radius:10px!important;background:#0a2850!important;color:#fff!important;font-size:15px!important;font-weight:850;box-shadow:none!important}
html[data-online-game] :is(.menu-choices,.im-intro-segment) button[aria-pressed=true]{background:#1689c5!important;box-shadow:inset 0 0 0 2px #8ceaff!important}
html[data-online-game] .start-area{margin-top:auto!important;padding-top:14px!important}
html[data-online-game] #start{width:100%!important;height:52px!important;min-height:52px!important;margin-top:auto!important;padding:10px 16px!important;border:0!important;border-radius:12px!important;background:linear-gradient(105deg,#118de0,#31c7ee)!important;color:#041126!important;font-size:19px!important;font-weight:900;box-shadow:0 14px 28px #0b7cad55}
html[data-online-game] #start:disabled{opacity:.55;cursor:wait}
#web-load-progress,#loadStatus{font-size:12px;text-align:center;margin:5px 0!important}#web-load-progress:empty,#loadStatus:empty{display:none}
#web-load-retry[hidden]{display:none}#web-load-retry{border:1px solid #44c9eb;background:#0a2850;color:white;border-radius:10px;padding:8px 18px;cursor:pointer}
html[data-online-game] body>header{background:#94d9f6!important;color:#153c49!important;border:0!important;height:68px;min-height:68px;box-sizing:border-box}
html[data-online-game] body>header #settings{border:1px solid #42c3e8!important;border-radius:999px!important;background:#08254a!important;color:white!important;min-height:40px;padding:8px 16px!important;font-size:16px!important;font-weight:800;box-shadow:none!important}
html[data-online-game] #settings:before{content:'⚙ ';font-size:1.1em}
html[data-online-game] body.web-menu-visible>header{visibility:hidden}
html[data-online-game] #gameTitle{color:#153c49!important;font-size:22px!important}
@media(max-width:1050px){
html[data-online-game] :is(#menu,#intro) .im-intro-header{height:56px!important;min-height:56px!important;padding:4px 10px!important}
html[data-online-game] .im-intro-brand img{width:42px!important;height:38px!important}html[data-online-game] .im-intro-brand b{font-size:13px!important}html[data-online-game] .im-intro-menu{font-size:12px!important;padding:8px!important}
html[data-online-game] :is(.menu-layout,.im-intro-body){flex:none!important;grid-template-columns:1fr!important;grid-template-rows:auto auto!important;padding:10px!important;width:100%!important;gap:12px!important}
html[data-online-game] :is(.menu-hero,.im-intro-story){padding:12px!important;justify-content:space-between!important}
html[data-online-game] :is(.hero-copy,.im-intro-story>div:first-child){flex:1!important;width:auto!important}
html[data-online-game] :is(.pizza-hero,.im-intro-art){flex:none!important;width:88px!important;height:88px!important;max-height:88px!important}
html[data-online-game] :is(#menu,#intro) h1{font-size:24px!important}html[data-online-game] :is(.intro,.im-intro-lead,.im-intro-category){display:none!important}
html[data-online-game] :is(.menu-settings,.im-intro-setup){padding:14px!important;gap:10px!important}html[data-online-game] :is(#menu,#intro) h2{font-size:20px!important;margin:0!important}
html[data-online-game] #start{height:44px!important;min-height:44px!important;margin-top:4px!important}
html[data-online-game] body>header #settings{min-height:32px!important;height:32px!important;font-size:12px!important;padding:0 10px!important}
}
@media(max-width:1050px) and (orientation:landscape){html[data-online-game] :is(.menu-layout,.im-intro-body){grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:auto!important}html[data-online-game] :is(.menu-hero,.im-intro-story){flex-direction:column!important;justify-content:center!important}html[data-online-game] :is(#menu,#intro) .im-intro-header{height:48px!important;min-height:48px!important}}

/* Safe areas belong outside both menu and game controls, including standalone iOS. */
html[data-online-game][data-touch-device=true]{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
@media(orientation:portrait){html[data-online-game][data-standalone=true]{--safe-top:max(env(safe-area-inset-top,0px),48px)}}
html[data-online-game][data-touch-device=true] :is(#menu,#intro){box-sizing:border-box;padding:var(--safe-top) env(safe-area-inset-right,0px) var(--safe-bottom) env(safe-area-inset-left,0px)!important;scroll-padding-top:var(--safe-top)}
html[data-online-game][data-touch-device=true] body>header{top:var(--safe-top)!important;height:56px!important;min-height:56px!important}
html[data-online-game=pizza][data-touch-device=true]{--header:calc(56px + var(--safe-top))}
html[data-online-game=safari][data-touch-device=true] #tourMap{top:calc(62px + var(--safe-top))}
html[data-online-game][data-touch-device=true] .im-intro-header{position:sticky!important;top:var(--safe-top)!important;z-index:2}
#web-touch .web-camera{order:0}#web-touch .web-actions{order:1;position:absolute;left:50%;transform:translateX(-50%);bottom:8px}#web-touch .web-motion{order:2;margin-left:auto}
html[data-online-game=safari] #web-touch .web-camera{display:grid;grid-template-columns:repeat(2,var(--control))}
html[data-online-game=safari] #web-touch button[data-code=KeyV]{grid-column:1/-1;justify-self:center;font-weight:700}