/* Final layout overrides, intentionally using CSS supported by Chrome 60. */
:root{--safe-top:0px;--safe-right:0px;--safe-bottom:0px;--safe-left:0px}
@supports(padding:constant(safe-area-inset-top)){:root{--safe-top:constant(safe-area-inset-top);--safe-right:constant(safe-area-inset-right);--safe-bottom:constant(safe-area-inset-bottom);--safe-left:constant(safe-area-inset-left)}}
@supports(padding:env(safe-area-inset-top)){:root{--safe-top:env(safe-area-inset-top);--safe-right:env(safe-area-inset-right);--safe-bottom:env(safe-area-inset-bottom);--safe-left:env(safe-area-inset-left)}}
html,body{height:100%;width:100%;overflow:hidden}
body{padding:0px 0px 0px 0px;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}
#app{width:100%;height:calc(100vh - 0px - 0px);height:calc(var(--screen-height,100vh) - var(--safe-top) - var(--safe-bottom));max-width:calc(100vh*.58);max-width:calc(var(--screen-height,100vh)*.58);min-width:0;margin:0 auto;box-shadow:none}
@media(max-width:650px){#app{max-width:none}}
#world{width:100%;height:100%}
button{touch-action:manipulation}
button:focus,select:focus,input:focus{outline:2px solid #2486a2;outline-offset:2px}
.wallet button{min-height:36px}.wallet button+button{margin-left:4px}
.difficulty-switch{min-height:34px}.difficulty-switch button{min-height:30px;min-width:0;font-size:12px}.difficulty-switch button+button{margin-left:4px}
.controls{bottom:8px;height:44px;left:12%;width:76%;justify-content:space-between}
.controls button{min-height:44px;max-height:none;height:44px;width:23%}
.bottom-left{bottom:64px}.bottom-nav{min-height:48px}.bottom-nav button{min-width:0}
.bottom-nav span{font-size:12px}.side-rail button{min-height:44px}
.side-rail button+button{margin-top:8px}.side-rail span{font-size:11px}
.wallet b{font-size:18px}.journey strong{font-size:12px}.journey small{font-size:10px}
.graffiti-title h1{font-size:calc(1vh*7.5);font-size:calc(var(--vh,1vh)*7.5)}.season-label{font-size:14px}
.start-button span{font-size:28px}.mode-ribbon span{font-size:16px}.mode-ribbon small{font-size:10px}
.start-dock{bottom:calc(8.1% + 16px)}.start-button{min-height:48px}.mode-ribbon{min-height:34px}
.wardrobe-pill{top:65%;max-width:55%}
.dialog{box-shadow:0 8px 0 rgba(94,88,113,.2);max-height:calc(100vh - 0px - 0px - 24px);max-height:calc(var(--screen-height,100vh) - var(--safe-top) - var(--safe-bottom) - 24px);max-width:540px}
.dialog:not(dialog){left:4%!important;top:12px!important;bottom:auto!important;right:auto!important;transform:none!important;width:92%!important}
#workshop[data-panel=maps]{left:4%!important}
.dialog-cap{position:relative;top:0}
dialog[open]{max-height:calc(100vh - 0px - 0px - 24px)!important;max-height:calc(var(--screen-height,100vh) - var(--safe-top) - var(--safe-bottom) - 24px)!important;max-width:460px!important}
dialog{padding:0;border:2px solid #fff5df;border-radius:18px;color:#5e4a60}
#joinDialog p{font-size:14px;line-height:1.7}
#joinDialog .join-content{padding:16px}
#devDialog{display:none!important}
.outfit-card{background:#f7e6d8;background:radial-gradient(ellipse at 50% 20%,#fffaf0,#f7e6d8)}
.map-illustration{height:110px}.map-grid{grid-gap:10px}.outfit-grid{grid-gap:8px;flex:1 1 auto}
.shop-drawer{min-height:0}.shop-filters button+button{margin-left:5px}.shop-search>*+*{margin-left:5px}
.shop-buy-row button+button{margin-left:6px}.outfit-card strong{white-space:normal}
#app[data-view=starting]>.top,#app[data-view=starting]>.controls,#app[data-view=starting]>.bottom-left,#app[data-view=starting]>.zone-hud{display:none}
#reloadGame{position:relative;top:auto;left:auto;width:auto;margin:12px;min-height:44px}
#loading{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px}
#loading>b{position:relative;top:auto;left:auto;width:auto;font-size:40px;margin:0 0 20px}
#loading .load-mascot{position:relative;top:auto;left:auto;width:110px;height:140px;margin:12px}
#loading .load-track{position:relative;top:auto;left:auto;width:80%;height:18px;margin:12px}
#loadStatus{position:relative;top:auto;left:auto;width:94%;min-height:32px;padding:6px;font-size:13px}
#loading small{position:relative;top:auto;left:auto;width:94%;margin-top:8px}
.low-end *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;filter:none!important}
.low-end .load-mascot{animation:none}
.low-end .graffiti-title h1{text-shadow:1px 2px #be962a}
.low-end .dialog,.low-end .shop-drawer,.low-end .wallet button,.low-end .bottom-nav,.low-end .side-rail span{box-shadow:none}
@media(max-width:330px){.graffiti-title{left:15%;width:70%}.graffiti-title h1{font-size:38px}.season-label{font-size:10px;padding:4px 6px}.difficulty-switch button{font-size:11px}.wardrobe-pill{display:none}.outfit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wallet b{font-size:15px}}
@media(max-height:550px){.wardrobe-pill{display:none}.side-rail{top:30%;width:17%}.side-rail i{height:38px}.side-rail button+button{margin-top:4px}.side-rail span{font-size:10px}.bottom-nav{height:48px;padding:2px}.bottom-nav i{height:24px}.bottom-nav span{font-size:10px}.bottom-nav .selected{margin-top:0;transform:none}.start-dock{bottom:58px}.start-button{height:48px}.mode-ribbon{height:34px}.difficulty-switch{margin-top:3px;padding:2px}.graffiti-title{top:15%}.graffiti-title h1{font-size:38px;margin:4px 0}.season-label{font-size:11px}.logo-sub{font-size:11px}.wallet{top:8px;height:36px}.journey{display:none}#idleMusicHint{font-size:10px;top:12%}.dialog h2{font-size:18px}.dialog-cap{font-size:16px}.shop-name p{display:none}.shop-drawer{top:40%;padding:6px}.shop-selection{margin-bottom:2px}.shop-filters{padding:4px 0}.shop-buy-row button{padding:6px;min-height:32px}.shop-search input,.shop-search select{padding:4px}.outfit-card img{height:70px}.outfit-card{min-height:106px}.shop-footnote{font-size:8px}.shop-name{top:15%}.shop-rotate,#shopMotion{top:31%}.shop-name h2{font-size:15px}}
@media(orientation:landscape){#app{max-width:none}.desktop-wordmark{display:none}.graffiti-title{left:24%;width:52%;top:20%}.graffiti-title h1{font-size:38px}.wallet{left:22%;width:56%;top:8px}.side-rail{width:15%;top:16%;height:auto}.left-rail{left:3%}.right-rail{right:3%}.side-rail i{height:40px}.side-rail button+button{margin-top:6px}.start-dock{left:27%;width:46%;bottom:58px}.bottom-nav{height:48px}.bottom-nav i{height:24px}.wardrobe-pill,.journey,.logo-sub,.logo-splash{display:none}.season-label{font-size:11px}.start-button{height:44px;min-height:44px}.start-button span{font-size:24px}.mode-ribbon{height:32px;min-height:32px}.mode-ribbon span{font-size:13px}.difficulty-switch{min-height:32px}.controls{width:45%;left:27.5%}.bottom-left{left:2%;bottom:12px}.chase{bottom:64px}.zone-hud{top:60px;max-width:28%}#powerHUD{top:100px}.shop-drawer{left:47%;width:53%;top:58px;border-radius:16px 0 0 0}.shop-header{top:8px;height:40px}.shop-name{left:0;width:47%;top:55px}.shop-rotate{left:5%;width:30%;top:auto;bottom:20px}#shopMotion{left:8%;right:auto;top:auto;bottom:42px}.outfit-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.outfit-card{min-height:102px}.outfit-card img{height:66px}#idleMusicHint{top:30%;font-size:10px}.top{top:8px}.coin-stat{top:0;right:0}.top-score{margin-right:105px}.dialog:not(dialog){max-width:600px!important;left:8%!important;width:84%!important}.map-illustration{height:80px}#loading .load-mascot{height:65px;width:70px;margin:4px}#loading>b{font-size:28px;margin:0 0 5px}#loading>b:after{display:none}}
@media(orientation:landscape) and (max-height:300px){.graffiti-title{top:18%;}.graffiti-title h1{font-size:28px}.season-label{display:none}.side-rail i{height:28px}.side-rail button+button{margin-top:2px}.side-rail span{font-size:10px}.start-dock{bottom:50px}.mode-ribbon{height:28px;min-height:28px}.mode-ribbon small{display:none}.start-button{height:40px;min-height:40px}.bottom-nav{height:42px}.difficulty-switch{min-height:28px}.difficulty-switch button{min-height:26px}.shop-selection,.shop-footnote{display:none}.shop-search input,.shop-search select{font-size:10px}.shop-drawer{top:48px}.outfit-card img{height:48px}.outfit-card{min-height:78px}}

/* Keep long map names and secondary controls within narrow/short displays. */
.mode-ribbon span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.mode-ribbon small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:330px){.start-dock{left:23%;width:54%}.start-button span{font-size:24px}.side-rail span{font-size:10px;padding:2px 0;white-space:normal;line-height:1.2}.side-rail{width:18%}.mode-ribbon span{font-size:12px}.mode-ribbon small{font-size:9px}}
@media(orientation:landscape){#idleMusicHint{display:none!important}}
@media(orientation:landscape) and (max-height:300px){.side-rail{top:52px}.side-rail button{min-height:40px}.side-rail i{height:24px}.side-rail span{padding:1px 2px;line-height:12px}.side-rail button+button{margin-top:2px}}

/* Safari before 10.1 uses the same cards in wrapped flex rows. */
@supports not (display:grid){
  .wallet em{display:inline-flex;align-items:center;justify-content:center}
  .outfit-grid{display:flex;flex-wrap:wrap;align-content:flex-start;flex:1 1 0px;height:0;min-height:0}
  .outfit-card{flex:0 0 calc(33.333% - 8px);width:calc(33.333% - 8px);min-width:0;margin:4px}
  .map-grid{display:flex;flex-wrap:wrap;margin:-5px}
  .map-card{flex:0 0 calc(50% - 10px);width:calc(50% - 10px);margin:5px}
  .map-selection{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}
  .map-selection strong{flex:1 1 50%;max-width:55%;overflow-wrap:break-word}
  .map-selection>span{flex:1 1 100%;width:100%;order:3;margin-top:6px}
  .map-selection button{flex:0 0 auto;max-width:43%;order:2}
  #obstacleList,.character-cards,.guide-grid{display:flex;flex-wrap:wrap;align-content:flex-start;margin:-4px}
  #obstacleList>.obstacle-card,.guide-grid>div{flex:0 0 calc(50% - 8px);width:calc(50% - 8px);margin:4px}
  .character-cards>button{flex:0 0 calc(33.333% - 8px);width:calc(33.333% - 8px);min-width:0;margin:4px}
  .contact-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .contact-card>.contact-value{flex:1 1 100%;width:100%}
  #leaderboardList li{display:flex;flex-wrap:wrap;align-items:center}
  #leaderboardList li>b{width:26px;flex:0 0 26px}
  #leaderboardList li>span{flex:1;min-width:0;margin-right:8px}
  #leaderboardList li>strong{flex:0 0 auto}
  #leaderboardList li>small{width:100%;padding-left:26px;margin-top:3px}
  @media(max-width:330px){.outfit-card{flex-basis:calc(50% - 8px);width:calc(50% - 8px)}}
  @media(orientation:landscape){.outfit-card{flex-basis:calc(33.333% - 8px);width:calc(33.333% - 8px)}}
}

/* Safe insets also reduce the space in very short landscape containers. */
@media(orientation:landscape) and (max-height:300px){
  .bottom-nav{height:42px;min-height:42px}
  .side-rail{top:48px}
  .side-rail button{display:flex;flex-direction:column;align-items:center;justify-content:center;height:40px;min-height:40px;padding:0}
  .side-rail i{width:100%;height:24px;flex:0 0 24px}
  .side-rail span{display:block;height:16px;line-height:12px;max-width:100%;margin:0;padding:0 2px}
}