*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:-apple-system,system-ui,Helvetica,Arial,sans-serif;color:#fff;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#app{position:fixed;inset:0}
#c{position:absolute;inset:0;width:100%;height:100%;display:block}
#hud{position:absolute;top:calc(env(safe-area-inset-top) + 8px);right:calc(env(safe-area-inset-right) + 8px);display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}
#street{background:#1b5e20;border:2px solid #fff;border-radius:6px;padding:3px 10px;font-weight:700;font-size:15px;letter-spacing:.3px;box-shadow:0 2px 6px rgba(0,0,0,.4);max-width:46vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mini{pointer-events:auto;cursor:pointer;width:118px;height:118px;border-radius:50%;border:3px solid rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.5);background:#5d8a47}
#btns{position:absolute;top:calc(env(safe-area-inset-top) + 8px);left:calc(env(safe-area-inset-left) + 8px);display:flex;gap:8px;flex-wrap:wrap;max-width:calc(100vw - 170px - env(safe-area-inset-left) - env(safe-area-inset-right))} /* v87d3d: wraps instead of running under the minimap */
button{font:inherit;color:#fff;background:rgba(20,30,40,.62);border:2px solid rgba(255,255,255,.75);border-radius:12px;min-width:46px;height:46px;font-size:20px;padding:0 8px;touch-action:none}
button:focus-visible{outline:3px solid #ffd54f;outline-offset:2px}
button:active,button.on{background:rgba(255,213,79,.55)}
#bSpeed{font-size:16px;font-weight:700}
#joy{position:absolute;left:calc(env(safe-area-inset-left) + 22px);bottom:calc(env(safe-area-inset-bottom) + 22px);width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.55);touch-action:none}
#knob{position:absolute;left:40px;top:40px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.8);box-shadow:0 2px 6px rgba(0,0,0,.4);pointer-events:none}
#updown{position:absolute;right:calc(env(safe-area-inset-right) + 14px);bottom:calc(env(safe-area-inset-bottom) + 20px);display:flex;flex-direction:column;gap:12px}
#updown button{width:62px;height:62px;font-size:24px;border-radius:50%}
#help{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 8px);transform:translateX(-50%);font-size:12px;background:rgba(0,0,0,.45);padding:3px 10px;border-radius:10px;white-space:nowrap;pointer-events:none;transition:opacity 1s}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;background:#223;transition:opacity .5s}
@media (orientation:portrait){#mini{width:96px;height:96px}#help{bottom:calc(env(safe-area-inset-bottom) + 170px);font-size:11px}#street{font-size:13px}}
@media (orientation:portrait){#dTop{top:calc(env(safe-area-inset-top) + 118px) !important}}

/* v76 MAIN MENU */
body.inmenu #app > :not(#c), body.inmenu > :not(#menu):not(#app):not(script) { visibility: hidden !important }
#menu { position: fixed; inset: 0; z-index: 9000; display: none; touch-action: none }
#menu.on { display: block; animation: mIn .5s ease both }
@keyframes mIn { from { opacity: 0 } to { opacity: 1 } }
#menu .mbg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.55) 100%), linear-gradient(180deg, rgba(8,14,24,.15) 0%, rgba(8,14,24,0) 30%, rgba(8,14,24,.55) 100%); pointer-events: none }
#menu .mwrap { position: absolute; inset: 0; padding: calc(env(safe-area-inset-top) + 16px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 16px) calc(env(safe-area-inset-left) + 16px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px }
#menu .msign { background: #1b5e20; border: 3px solid #fff; border-radius: 16px; box-shadow: 0 0 0 5px #1b5e20, 0 14px 34px rgba(0,0,0,.55); padding: 12px 30px 14px; text-align: center; min-width: min(300px, 78vw); animation: mDrop .7s cubic-bezier(.2,1.3,.4,1) both }
@keyframes mDrop { from { transform: translateY(-24px) scale(.94); opacity: 0 } to { transform: none; opacity: 1 } }
#menu .msign small { display: block; font-size: 16px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase }
#menu .msign b { display: block; font-size: clamp(46px, 14vw, 78px); font-weight: 900; letter-spacing: 3px; line-height: 1.02; text-shadow: 0 3px 0 rgba(0,0,0,.25) }
#menu .msign i { display: block; font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #ffd54f; margin-top: 2px }
#menu .mcol { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(320px, 84vw) }
#menu button { touch-action: manipulation }
#menu .mbtn { width: 100%; height: 58px; font-size: 20px; font-weight: 800; letter-spacing: 1px; border-radius: 16px; background: rgba(15,24,34,.72); border: 2px solid rgba(255,255,255,.85); box-shadow: 0 6px 18px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px) }
#menu .mbtn.pri { background: #ffd54f; color: #17202a; border-color: #fff }
#menu .mbtn.pri:active { background: #ffca28 }
#menu .mbtn.red { background: #c62828; border-color: #fff }
#menu .mbtn.sm { height: 48px; font-size: 16px; letter-spacing: .3px }
#menu .mbtn:active { transform: scale(.97) }
#menu .mfoot { font-size: 13px; color: rgba(255,255,255,.85); text-shadow: 0 1px 3px rgba(0,0,0,.8); text-align: center }
#menu .mfoot.big { font-size: 17px; font-weight: 700 }
#menu .mcard { width: min(400px, 92vw); max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; background: rgba(14,22,32,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 2px solid rgba(255,255,255,.55); border-radius: 20px; padding: 14px 16px 16px; box-shadow: 0 16px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 10px; animation: mUp .35s ease both }
#menu .mcard.narrow { width: min(300px, 86vw) }
#menu .mcard.wide { width: min(560px, 94vw) }
@keyframes mUp { from { transform: translateY(16px); opacity: 0 } to { transform: none; opacity: 1 } }
#menu .mhead { display: flex; align-items: center; gap: 10px }
#menu h2 { margin: 0; font-size: 22px; font-weight: 800 }
#menu h2.ctr { text-align: center; margin-bottom: 4px }
#menu .mback { min-width: 44px; width: 44px; height: 44px; border-radius: 50%; font-size: 30px; line-height: 1; padding: 0 0 4px }
#menu .mopt { display: flex; align-items: center; gap: 14px; width: 100%; height: auto; min-height: 76px; padding: 12px 14px; text-align: left; border-radius: 16px; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.7) }
#menu .mopt:active { background: rgba(255,213,79,.35) }
#menu .mopt .ic { font-size: 34px; width: 44px; text-align: center; flex: none }
#menu .mopt b { display: block; font-size: 20px; font-weight: 800 }
#menu .mopt em { display: block; font-style: normal; font-size: 14px; color: rgba(255,255,255,.8); margin-top: 2px }
#menu .mlink { background: none; border: none; height: 44px; font-size: 15px; color: #ffd54f; font-weight: 700; text-decoration: underline; text-underline-offset: 3px }
#menu .mlink:active { background: none; opacity: .7 }
#menu label { font-size: 13px; color: rgba(255,255,255,.8); margin-bottom: -6px }
#menu input:not([type=range]) { font: inherit; font-size: 17px; width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 2px solid rgba(255,255,255,.7); background: rgba(255,255,255,.95); color: #111; -webkit-user-select: text; user-select: text; touch-action: manipulation }
#menu .mrow { display: flex; gap: 10px }
#menu .mrow > * { flex: 1 }
#menu .mmsg:empty { display: none }
#menu .mmsg { min-height: 18px; font-size: 14px; color: #ffcc80; text-align: center }
#menu .mspin { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(255,255,255,.3); border-top-color: #ffd54f; animation: mSpin .9s linear infinite }
@keyframes mSpin { to { transform: rotate(360deg) } }
#menu .mgrid { display: grid; grid-template-columns: 1fr; gap: 8px }
#menu .mset { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px; border-radius: 14px; background: rgba(255,255,255,.07) }
#menu .mset > span:first-child { flex: none; width: 104px; font-weight: 700; font-size: 15px }
#menu .mset > span.warn { width: auto; flex: 1; color: #ffcc80; font-size: 14px }
#menu .mset input[type=range] { flex: 1; min-width: 0; height: 36px; accent-color: #ffd54f; touch-action: manipulation }
#menu .mset output { width: 46px; text-align: right; font-variant-numeric: tabular-nums; font-size: 14px }
#menu .mset input:not([type=range]) { flex: 1; min-width: 0; height: 42px }
#menu .mset .mbtn { width: auto; flex: 1 }
#menu .mset .mrow { flex: none }
#menu .mseg { flex: 1; display: flex; border: 2px solid rgba(255,255,255,.75); border-radius: 12px; overflow: hidden }
#menu .mseg button { flex: 1; min-width: 0; height: 40px; border: none; border-radius: 0; font-size: 15px; font-weight: 700; background: transparent; padding: 0 4px }
#menu .mseg button + button { border-left: 2px solid rgba(255,255,255,.5) }
#menu .mseg button.on { background: #ffd54f; color: #17202a }
#menu .mtog { position: relative; width: 62px; min-width: 62px; height: 36px; border-radius: 18px; padding: 0; background: rgba(255,255,255,.2); margin-left: auto }
#menu .mtog i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform .2s }
#menu .mtog.on { background: #43a047 }
#menu .mtog.on i { transform: translateX(26px) }
#menu .mnote { font-size: 12px; color: rgba(255,255,255,.65); text-align: center }
/* landscape phones: sign on the left, buttons on the right; settings in two columns */
@media (orientation: landscape) and (max-height: 520px) {
  #menu.s-title .mwrap, #menu.s-wait .mwrap { flex-direction: row; gap: 7vw }
  #menu .msign b { font-size: clamp(44px, 12vh, 64px) }
  #menu .mcol { width: min(300px, 40vw) }
  #menu .mbtn { height: 52px }
  #menu .mcard { padding: 10px 14px 12px; gap: 8px }
  #menu .mcard.wide { width: min(760px, 94vw) }
  #menu .mgrid { grid-template-columns: 1fr 1fr; gap: 6px 10px }
  #menu .mset { min-height: 48px }
  #menu .mset > span:first-child { width: 88px; font-size: 14px }
  #menu .mopt { min-height: 64px; padding: 8px 12px }
  #menu.s-play .mcard { width: min(520px, 80vw) }
}
@media (orientation: portrait) { #menu .mwrap { justify-content: center; gap: 34px } #menu.s-title .mwrap { justify-content: space-evenly } }

/* v87d3d: every scrollable game panel scrolls by finger both ways on iPhone */
#jobUI,#bizMenu,#devUI,#mpP,#mapsRes,#dtUI{touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}