* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #cad9cb; color: #293e35; font: 14px Arial, Helvetica, sans-serif; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, .toolbar a { border: 1px solid #d3d5bc; background: #f4f0df; color: #2c4539; padding: 12px 15px; border-radius: 7px; cursor: pointer; min-height: 44px; }
button:hover, .toolbar a:hover { background: #fffbed; }
button:focus, a:focus, input:focus, select:focus { outline: 2px solid #bb8645; outline-offset: 3px; }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: #304c3e; color: #fff8e7; border-color: #304c3e; }
button.primary:hover { background: #42634e; }
[hidden] { display: none !important; }
a { color: inherit; }
#stage { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
#scene { display: block; width: 100%; height: 100%; touch-action: none; }
#labels { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; overflow: hidden; }
.world-label { position: absolute; -webkit-transform: translate(-50%,-100%); transform: translate(-50%,-100%); background: #f4eedb; border-bottom: 3px solid #bba57a; border-radius: 3px; padding: 4px 7px; font-size: 10px; font-weight: bold; letter-spacing: .06em; white-space: nowrap; }
.masthead { position: absolute; top: 25px; left: 28px; pointer-events: none; }
.brand { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; text-decoration: none; font-size: 29px; font-weight: bold; letter-spacing: -.08em; pointer-events: auto; }
.brand img { width: 44px; height: 44px; margin-right: 12px; }
.brand-light { font-weight: normal; letter-spacing: -.045em; }
.brand small { display: block; font-size: 8px; letter-spacing: .22em; margin-top: 2px; }
#connection { display: block; margin-top: 12px; font-size: 11px; letter-spacing: .025em; }
.toolbar { position: absolute; right: 26px; top: 26px; display: -webkit-flex; display: flex; }
.toolbar button, .toolbar a { margin-left: 7px; font-size: 12px; text-decoration: none; display: inline-block; }
.welcome { position: absolute; left: 30px; top: 155px; width: 285px; }
.eyebrow { font-size: 9px; font-weight: bold; letter-spacing: .17em; }
h1 { font-size: 34px; line-height: 1.14; letter-spacing: -.035em; margin: 17px 0; }
.welcome p { line-height: 1.65; font-size: 13px; }
.welcome .primary { margin-top: 12px; padding: 15px 21px; font-weight: bold; }
.welcome .primary span { margin-left: 22px; }
.small, .welcome .small { font-size: 10px; line-height: 1.55; }
.invitation { position: absolute; right: 26px; bottom: 66px; width: 237px; border: 1px solid #ece7d4; border-radius: 12px; padding: 18px 15px 14px; background: #f2efdf; text-align: center; }
.invite-heading { position: relative; padding-right: 12px; text-align: left; }
.invite-heading .eyebrow { font-size: 8px; }
#closeInvite { position: absolute; top: -15px; right: -10px; border: 0; background: none; padding: 0; min-height: 32px; width: 30px; font-size: 23px; }
.invitation h2 { font-size: 19px; letter-spacing: -.025em; margin: 13px 0 17px; }
.invitation p { font-size: 10px; margin: 14px 0 9px; }
#joinLink { width: 100%; font-size: 10px; border: 0; background: #e5e5d5; border-radius: 3px; padding: 7px; color: #566c5c; }
.rcRoomQrCodeLink, .rcRoomQrCodeLink * { box-sizing: content-box; }
.rcRoomQrCodeLink { display: block; width: 150px; margin-left: auto; margin-right: auto; border: solid 8px #fff; border-radius: 8px; color: #fff; background-color: #fff; text-align: center; text-decoration: none; -webkit-transform-origin: center; transform-origin: center; -webkit-transform: scale(1); transform: scale(1); }
.rcTechLabel { background-color: #000; color: #fff; font-family: monospace; font-size: 13px; font-weight: bold; margin: 0 0 8px 0; padding: 4px; letter-spacing: .2em; border-radius: 8px 8px 0 0; }
.rcRoomQrCode { width: 150px; height: 150px; }
.rcRoomId { background-color: #000; color: #fff; font-family: monospace; font-size: 16px; padding: 4px; margin: 8px 0 0 0; letter-spacing: .25em; border-radius: 0 0 8px 8px; }
.park-legend { position: absolute; bottom: 25px; left: 30px; font-size: 11px; }
.park-legend span { margin-right: 24px; }
.park-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; }
.car-dot { background: #d19742; }.boat-dot { background: #4d9fad; }.drone-dot { background: #a18abd; }
.play-hud { position: absolute; top: 108px; left: 28px; background: #f1eedc; border-radius: 8px; padding: 14px 16px; max-width: 300px; }
.play-hud strong { display: block; font-size: 18px; margin: 5px 0; }
.play-hud > span:last-of-type { display: block; font-size: 11px; line-height: 1.5; }
.play-hud button { margin-top: 10px; min-height: 32px; font-size: 11px; padding: 6px 10px; }
#map { position: absolute; top: 88px; right: 26px; width: 168px; height: 120px; background: #eeedda; border: 5px solid #eeedda; border-radius: 8px; }
#crosshair { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); color: #f7f1da; font-size: 22px; display: none; pointer-events: none; }
.playing #crosshair { display: block; }
.controls { position: absolute; bottom: 25px; left: 28px; right: 28px; height: 118px; pointer-events: none; }
.controls > div { pointer-events: auto; }
.pad { position: absolute; bottom: 0; width: 108px; height: 108px; border: 2px solid #f1eedc; border-radius: 54px; background: #e1e3ca; text-align: center; touch-action: none; user-select: none; -webkit-user-select: none; }
#movePad { left: 0; }#lookPad { right: 0; }
.pad i { position: absolute; width: 35px; height: 35px; left: 34px; top: 31px; border-radius: 50%; background: #849983; border: 2px solid #617a64; }
.pad b { position: absolute; bottom: 10px; left: 0; right: 0; font-size: 9px; letter-spacing: .12em; }
.pad-arrows { display: block; color: #99aa91; font-size: 55px; line-height: 87px; }
.actions { position: absolute; left: 128px; bottom: 0; max-width: 180px; }
.actions button { display: block; min-width: 106px; margin-top: 7px; }
.vertical { position: absolute; right: 125px; bottom: 0; }
.vertical button { display: block; width: 58px; margin-top: 7px; padding: 6px; font-size: 20px; touch-action: none; user-select: none; -webkit-user-select: none; }
.vertical small { display: block; font-size: 8px; }
#notice { position: absolute; left: 50%; bottom: 170px; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #304c3e; color: #fff7df; border-radius: 6px; padding: 10px 17px; max-width: 80%; font-size: 12px; text-align: center; pointer-events: none; }
#notice:empty { display: none; }
body:not(.playing) #notice { top: 83px; bottom: auto; }
#fatal, .fatal { position: absolute; left: 10%; right: 10%; top: 42%; padding: 25px; background: #fbefda; color: #7d4836; text-align: center; border: 1px solid #ba8a68; }
.overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(24,44,36,.45); z-index: 5; overflow: auto; padding: 30px 14px; }
.options-card { position: relative; width: 380px; max-width: 100%; margin: 0 auto; padding: 28px; border-radius: 12px; background: #f3efdf; }
.options-card h2 { margin-top: 10px; font-size: 28px; letter-spacing: -.03em; }.options-card h3 { margin-top: 23px; font-size: 15px; }.options-card p { font-size: 12px; line-height: 1.7; }.options-card label { display: block; font-size: 12px; font-weight: bold; margin-bottom: 8px; }
.options-card select, .options-card input { border: 1px solid #c6ccbb; border-radius: 5px; background: #fffbed; padding: 12px; width: 100%; color: #304c3e; }
.name-row { display: -webkit-flex; display: flex; }.name-row input { width: 75%; }.name-row button { margin-left: 8px; }
.close { position: absolute; right: 8px; top: 7px; border: 0; background: none; font-size: 24px; }
#done { display: block; width: 100%; margin-top: 25px; }#fullscreen { margin-top: 10px; }
@media (max-width: 1000px) and (min-width: 701px) { .welcome { top: 125px; width: 230px; }h1 { font-size: 28px; }.invitation { bottom: 45px; -webkit-transform: scale(.85); transform: scale(.85); -webkit-transform-origin: right bottom; transform-origin: right bottom; }.park-legend span { margin-right: 14px; } }
@media (max-width: 700px) {
    .masthead { top: 17px; left: 17px; }.brand { font-size: 23px; }.brand img { width: 34px; height: 34px; margin-right: 8px; }.brand small { font-size: 6px; }#connection { margin-top: 8px; font-size: 10px; }
    .toolbar { top: 15px; right: 12px; }.toolbar button,.toolbar a { padding: 10px 8px; min-height: 38px; margin-left: 4px; font-size: 10px; }.toolbar #back { max-width: 53px; padding: 5px 7px; text-align: center; }
    .welcome { top: 110px; left: 20px; width: 265px; }h1 { font-size: 29px; }.welcome p { font-size: 12px; }.welcome .primary { margin-top: 3px; }
    .invitation { bottom: 57px; right: 17px; -webkit-transform: scale(.83); transform: scale(.83); -webkit-transform-origin: right bottom; transform-origin: right bottom; }.park-legend { left: 20px; bottom: 18px; font-size: 9px; }.park-legend span { display: block; margin-top: 6px; }
    .playing #stage { bottom: 159px; }.controls { bottom: 14px; left: 13px; right: 13px; height: 132px; }.pad { width: 91px; height: 91px; }.pad i { left: 26px; top: 23px; }.pad-arrows { line-height: 68px; }.pad b { bottom: 8px; }
    .actions { left: 105px; bottom: 3px; max-width: 105px; }.actions button { min-width: 88px; padding: 9px 10px; font-size: 11px; min-height: 43px; }
    .vertical { right: 100px; bottom: 3px; }.vertical button { width: 44px; min-height: 43px; padding: 3px; }
    .play-hud { top: 91px; left: 16px; max-width: 222px; padding: 10px 12px; }.play-hud strong { font-size: 16px; }.play-hud > span:last-of-type { font-size: 10px; }#map { width: 110px; height: 79px; top: 93px; right: 14px; }
    #notice { bottom: 178px; width: 86%; max-width: none; font-size: 11px; }.playing .invitation { bottom: 176px; }
}
@media (max-width: 370px) { .brand small { display: none; }.brand img { display: none; }.pad { width: 82px; height: 82px; }.pad i { left: 21px; top: 19px; }.actions { left: 88px; }.actions button { min-width: 74px; padding: 8px; }.vertical { right: 88px; }.vertical button { width: 36px; }.play-hud { max-width: 188px; }#map { width: 91px; height: 65px; } }
@media (max-height: 540px) and (min-width: 600px) {
    .masthead { top: 14px; left: 18px; }.brand { font-size: 22px; }.brand img { width: 31px; height: 31px; }.toolbar { top: 12px; right: 16px; }.welcome { top: 100px; left: 20px; width: 240px; }h1 { font-size: 27px; }.welcome .eyebrow { font-size: 8px; }.welcome .small { display: none; }.welcome p { font-size: 11px; }
    .invitation { bottom: 14px; -webkit-transform: scale(.75); transform: scale(.75); -webkit-transform-origin: right bottom; transform-origin: right bottom; }.park-legend { bottom: 13px; }.playing #stage { bottom: 0; }.play-hud { top: 88px; left: 18px; padding: 10px 13px; }.play-hud strong { font-size: 15px; }.play-hud #hint { display: none; }.play-hud button { margin-top: 6px; }
    #map { top: 74px; right: 16px; width: 117px; height: 84px; }.controls { left: 20px; right: 20px; bottom: 15px; }.pad { width: 90px; height: 90px; }.pad i { left: 26px; top: 23px; }.pad-arrows { line-height: 68px; }.actions { left: 109px; }.vertical { right: 106px; }#notice { bottom: 25px; max-width: 40%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none; animation: none; } }

.zoom-controls { position:absolute;right:0;bottom:0;width:91px;text-align:center;pointer-events:auto; }
.zoom-controls button { display:block;width:100%;min-height:44px;font-size:24px;padding:2px; }
.zoom-controls span { display:block;font-size:10px;padding:5px 0;background:#f0ecd9;color:#304b3d; }