/* ToyCity in-game Menu: grouped sections, header-matched pills, sticky heading and Resume.
   Loaded after style.css/mobile.css and the inline page styles, so it wins the cascade. */
#game-menu{--menu-bg:#f3f7fc;--menu-pill:#ffffffee;--menu-shadow:0 4px 14px #24427019;--menu-ink:#24466d;box-sizing:border-box;width:min(460px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:26px;background:var(--menu-bg);color:#20345a;font-family:ui-rounded,"Arial Rounded MT Bold",Nunito,system-ui,sans-serif;overflow:hidden;touch-action:pan-y;box-shadow:0 20px 80px #15345966}
/* The dialog is a fixed frame; only the inner page scrolls, so the thin bar sits inside the rounded corners. */
#game-menu[open]{display:flex;flex-direction:column}
#game-menu>#menu-main,#game-menu>#customize-page{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#game-menu>#menu-main[hidden],#game-menu>#customize-page[hidden]{display:none}
#game-menu ::-webkit-scrollbar{width:8px;height:8px}
#game-menu ::-webkit-scrollbar-track{background:transparent;margin:2px 0 24px}
#game-menu ::-webkit-scrollbar-thumb{background:#b9cbe3;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
#game-menu ::-webkit-scrollbar-thumb:hover{background-color:#9fb6d4}
@supports not selector(::-webkit-scrollbar){#game-menu>#menu-main,#game-menu>#customize-page{scrollbar-width:thin;scrollbar-color:#b9cbe3 transparent}}
#game-menu :focus:not(:focus-visible){outline:none}
#game-menu :focus-visible{outline:3px solid #efb23e;outline-offset:2px}
/* Heading: title + version pill stay together; close button is a 40px pill. */
#game-menu .menu-heading{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 10px;background:var(--menu-bg)}
#game-menu .menu-heading h1{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-width:0;margin:0;font-size:22px;line-height:1.2}
#game-menu .menu-version{display:inline-block;margin:0;padding:4px 9px;border-radius:99px;background:#e3ecf7;color:#526384;font-size:11px;line-height:1.3;font-weight:800;letter-spacing:.02em;white-space:nowrap}
#game-menu #menu-close{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;padding:0;border:0;border-radius:99px;background:var(--menu-pill);color:#20345a;font-size:24px;line-height:1;box-shadow:var(--menu-shadow);cursor:pointer}
#game-menu #menu-main{padding:0 16px}
#game-menu #menu-main>.menu-lead{margin:0 4px 14px;font-size:14px;line-height:1.45;color:#536780}
#game-menu #menu-main>nav{display:block}
/* Groups */
#game-menu .menu-group{margin:0 0 16px}
#game-menu .menu-group>h2{margin:0 4px 8px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#687b96}
#game-menu .menu-rows{display:grid;gap:8px}
#game-menu .menu-rows-2{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
#game-menu .menu-group>.menu-note{margin:8px 4px 0;font-size:13px;line-height:1.4;color:#687b96}
/* Row pills: links, buttons and controls moved into the menu on mobile. */
#game-menu .menu-rows>a,#game-menu .menu-rows>button,#game-menu .menu-rows>.mobile-shortcuts>button,#game-menu .menu-footer>#menu-resume{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:none;height:40px;min-height:40px;margin:0;padding:0 16px;border:0;border-radius:99px;background:var(--menu-pill);color:var(--menu-ink);box-shadow:var(--menu-shadow);font:inherit;font-size:15px;font-weight:800;line-height:1.2;text-align:left;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transform:none;position:static}
#game-menu .menu-rows>[hidden],#game-menu .menu-rows>.mobile-shortcuts>[hidden]{display:none}
#game-menu .menu-rows>a .ext-icon{width:10px;height:10px;flex:0 0 auto;opacity:.7}
#game-menu .menu-ext{opacity:.6;font-weight:700}
#game-menu .menu-rows>button:disabled{opacity:.6;cursor:default}
#game-menu #menu-group-controls>#view span{margin-right:auto}
#game-menu #menu-group-controls>#view svg{flex:0 0 auto}
#game-menu #menu-group-controls>.mobile-shortcuts{position:static;display:grid;grid-template-columns:1fr 1fr;gap:8px;width:auto;margin:0;padding:0;pointer-events:auto}
#game-menu #menu-group-controls>.mobile-shortcuts>button{justify-content:center;flex:none}
#game-menu #menu-group-controls>.game-notifications{position:static;max-width:none;width:100%;margin:0;transform:none}
/* Mode picker moved into the menu on mobile. */
#game-menu #menu-group-play>.modes{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:auto;max-width:none;margin:0;padding:0;transform:none;background:none;box-shadow:none;border-radius:0;white-space:nowrap}
#game-menu #menu-group-play>.modes>button,#game-menu #menu-group-play>.modes .ride-toggle{box-sizing:border-box;width:100%;height:40px;min-height:40px;padding:0 6px;border:0;border-radius:99px;background:var(--menu-pill);color:#364b70;box-shadow:var(--menu-shadow);font:inherit;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:6px}
#game-menu #menu-group-play>.modes>button.active{background:#2e84ef;color:#fff;box-shadow:0 4px 12px #2e84ef55}
#game-menu #menu-group-play>.modes>.ride-picker{display:block;width:100%}
#game-menu #menu-group-play>.modes>[data-mode="build"]{grid-column:1/-1}
@media (max-width:359px){#game-menu #menu-group-play>.modes{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Guides and key assignment as expandable pills. */
#game-menu .menu-rows>details{margin:0;padding:0 16px;border:0;border-radius:20px;background:var(--menu-pill);box-shadow:var(--menu-shadow);text-align:left;font-size:14px}
#game-menu .menu-rows>details>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;font-size:15px;font-weight:800;color:var(--menu-ink);cursor:pointer;list-style:none}
#game-menu .menu-rows>details>summary::-webkit-details-marker{display:none}
#game-menu .menu-rows>details>summary::after{content:"";width:7px;height:7px;margin-right:3px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);opacity:.65;transition:transform .15s}
#game-menu .menu-rows>details[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
#game-menu .menu-rows>details p{margin:0 0 12px;font-size:14px;line-height:1.55;color:#536780}
#game-menu .menu-rows>details .key-bindings{margin:0 0 12px}
#game-menu .menu-rows>details #keys-reset{display:flex;width:100%;height:40px;min-height:40px;margin:0 0 14px;border:1px solid #cddcec;border-radius:99px;background:#f4f8fc;color:var(--menu-ink);font:inherit;font-size:14px;font-weight:800}
/* Sticky Resume: always visible, in the thumb zone on phones. */
#game-menu .menu-footer{position:sticky;bottom:0;z-index:3;margin:0 -16px;padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px));background:linear-gradient(#f3f7fc00,var(--menu-bg) 14px)}
#game-menu .menu-footer>#menu-resume{justify-content:center;background:#2e84ef;color:#fff;box-shadow:0 4px 14px #2e84ef4d;font-size:16px}
/* Customize page: keep Save / Reset / Back reachable at the bottom. */
#game-menu.customizing{width:min(780px,calc(100vw - 24px));padding:0}
#game-menu #customize-page{padding:0 16px}
#game-menu #customize-page .customize-buttons{position:sticky;bottom:0;z-index:3;margin:0 -16px;padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px));background:linear-gradient(#f3f7fc00,var(--menu-bg) 14px);display:flex;flex-wrap:wrap;gap:8px}
#game-menu #customize-page .customize-buttons>button{flex:1 1 140px;height:40px;min-height:40px;padding:0 14px;border:0;border-radius:99px;background:var(--menu-pill);color:var(--menu-ink);box-shadow:var(--menu-shadow);font:inherit;font-size:15px;font-weight:800}
#game-menu #customize-page .customize-buttons>#customize-save{background:#2e84ef;color:#fff}
@media (prefers-reduced-motion:no-preference){#game-menu[open]{animation:toycity-menu-in .18s ease-out}}
@keyframes toycity-menu-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* Phones and touch screens: one-handed bottom sheet. */
@media (max-width:600px),(pointer:coarse){
 #game-menu,#game-menu.customizing{width:min(560px,100vw);max-height:calc(100dvh - env(safe-area-inset-top,0px) - 8px);margin:auto auto 0;border-radius:24px 24px 0 0;padding:0 env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px)}
 #game-menu .menu-heading{padding-top:8px}
 #game-menu .menu-heading::before{content:"";position:absolute;top:6px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:#c9d6e6}
 #game-menu .menu-heading h1{padding-top:8px;font-size:20px}
 #game-menu #menu-close{margin-top:8px}
 #game-menu .menu-rows:not(.menu-rows-2)>a,#game-menu .menu-rows>button{font-size:16px}
}
@media (max-width:600px) and (prefers-reduced-motion:no-preference),(pointer:coarse) and (prefers-reduced-motion:no-preference){#game-menu[open]{animation:toycity-sheet-in .22s ease-out}}
@keyframes toycity-sheet-in{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
/* Landscape phones: short sheet, tighter heading so more rows fit. */
@media (max-height:500px) and (orientation:landscape){
 #game-menu,#game-menu.customizing{max-height:calc(100dvh - env(safe-area-inset-top,0px) - 4px)}
 #game-menu .menu-heading{padding-bottom:6px}
 #game-menu .menu-heading h1{font-size:18px}
 #game-menu #menu-main>.menu-lead{display:none}
 #game-menu .menu-rows:not(.menu-rows-2){grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
 #game-menu .menu-rows>details,#game-menu #menu-group-play>.modes{grid-column:1/-1}
 #game-menu .menu-footer{padding-top:8px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:400px){#game-menu .menu-heading h1{font-size:18px}#game-menu .menu-version{padding:4px 7px}}
/* Header Menu toggle: flex collapsed the space between the ☰ glyph and its label, so they touched. */
.topbar .menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;height:40px;min-height:40px;line-height:1;white-space:nowrap}
.topbar .menu-toggle>span{line-height:1}
/* On/off switch rows (e.g. Stop at red lights): the pill keeps the 40px row, the knob shows state. */
#game-menu .menu-rows>button.menu-switch-row{justify-content:space-between}
#game-menu .menu-switch{position:relative;flex:0 0 auto;width:40px;height:24px;border-radius:99px;background:#c9d3e2;transition:background .15s}
#game-menu .menu-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .15s}
#game-menu .menu-switch-row[aria-checked="true"] .menu-switch{background:#2e84ef}
#game-menu .menu-switch-row[aria-checked="true"] .menu-switch::after{transform:translateX(16px)}
@media (prefers-reduced-motion:reduce){#game-menu .menu-switch,#game-menu .menu-switch::after{transition:none}}