/* Shared by touch devices, including laptops when a finger is used. */
html,body{overscroll-behavior:none}
body.touch-ui #mobile-controls{display:block;position:absolute;inset:0;pointer-events:none}
body.touch-ui #mobile-controls #joystick{position:absolute;pointer-events:auto;touch-action:none;left:max(16px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));width:112px;height:112px;border:2px solid #dbcbea66;border-radius:50%;background:#2c203966;opacity:.65}
body.touch-ui #joystick.held{opacity:1;border-color:#ead8f4aa}
body.touch-ui #mobile-controls #joystick>i{display:block;position:absolute;top:calc(50% - 21px);left:calc(50% - 21px);width:42px;height:42px;border-radius:50%;background:#cbb2dfbb;pointer-events:none}
body.touch-ui .touch-actions{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));display:flex;gap:8px;pointer-events:auto}
body.touch-ui .touch-actions button{width:58px;height:58px;border-radius:50%;background:#2c2039dc;border:1px solid #dbcbea88;color:white;font-size:22px;touch-action:none}
body.touch-ui #match-controls{left:auto;right:max(14px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));transform:none;display:grid;grid-auto-flow:column;grid-auto-columns:68px;grid-template-columns:none;gap:7px;touch-action:none}
body.touch-ui #match-controls button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:68px;min-width:0;height:78px;padding:5px 3px 10px;touch-action:none}
body.touch-ui #match-controls .match-action-art,body.touch-ui #match-controls .match-action-art img{width:36px!important;height:37px!important;flex:none}
body.touch-ui #match-controls b{font-size:9px!important;text-align:center;max-width:62px}
body.touch-ui #match-controls kbd{display:none!important}
body.touch-ui #match-controls small{display:block!important;font-size:9px;text-align:center;line-height:11px}
body.touch-ui #match-controls button>i{left:5px;right:5px;bottom:4px;height:3px}
body.touch-ui.match-active .touch-actions,body.touch-ui .movement-tip{display:none!important}
body.touch-ui #joystick,body.touch-ui #match-controls{-webkit-touch-callout:none;user-select:none}
body.touch-ui #match-rescue{bottom:192px}
@media(max-width:600px){body.touch-ui #match-controls{grid-auto-flow:row;grid-template-columns:repeat(2,68px)}body.touch-ui #match-controls:has([data-match-action=ability][hidden]):has([data-match-action=attack][hidden]):has([data-match-action=item][hidden]){grid-template-columns:68px}body.touch-ui #mobile-controls #joystick{bottom:max(25px,env(safe-area-inset-bottom))}}
@media(max-height:480px){body.touch-ui #mobile-controls #joystick{width:96px;height:96px;bottom:max(14px,env(safe-area-inset-bottom))}body.touch-ui #match-controls{bottom:max(14px,env(safe-area-inset-bottom))}body.touch-ui #match-controls button{height:68px}body.touch-ui #match-rescue{bottom:102px}}

/* Browser bars and the on-screen keyboard leave a smaller visible viewport on iOS. */
body.touch-ui #main-menu,body.touch-ui #modal-backdrop{top:var(--cv-viewport-top,0px);bottom:auto;height:var(--cv-viewport-height,100dvh)}
body.touch-ui #main-menu{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));scroll-padding-block:20px}
body.touch-ui #main-menu:not([data-screen=main]){align-items:safe center;padding-block:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-bottom))}
body.touch-ui #main-menu:not([data-screen=main]) .mm-stack{margin-block:auto}
body.touch-ui #main-menu input,body.touch-ui #main-menu select,body.touch-ui #modal input:not([type=range]):not([type=checkbox]),body.touch-ui #modal select{font-size:16px}
body.touch-ui #main-menu input{min-height:44px}
body.touch-ui #knife-preview canvas{touch-action:pan-y}
body.touch-ui #main-menu .mm-back,body.touch-ui #modal #close-modal{min-width:44px;min-height:44px}
body.touch-ui #modal-backdrop{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overflow:hidden}
body.touch-ui[data-modal] #modal{max-height:calc(var(--cv-viewport-height,100dvh) - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)));max-width:100%;min-width:0}
body.touch-ui #modal #modal-content{min-width:0;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.touch-ui #modal .simple-knife-layout,body.touch-ui #modal .simple-knife-focus,body.touch-ui #modal .simple-knife-grid{min-width:0;max-width:100%}
body.touch-ui #modal .simple-knife-focus{position:static}
body.touch-ui #modal button,body.touch-ui #modal summary,body.touch-ui #main-menu summary{min-height:44px}
body.touch-ui #modal .simple-primary{white-space:normal;overflow-wrap:anywhere}
body.touch-ui #match-observe button,body.touch-ui #runner-picker button,body.touch-ui #choice button{min-height:44px}
body.touch-ui.match-active .reference-nav{display:flex;flex-direction:column;gap:2px;left:max(10px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));width:52px;zoom:1}
body.touch-ui.match-active .reference-nav button{width:44px;height:44px}
body.touch-ui #modal .simple-knife-focus h3,body.touch-ui #modal .simple-options h3{overflow-wrap:anywhere}
@media(max-width:600px){body.touch-ui #match-controls[data-actions="1"]{grid-template-columns:68px}body.touch-ui #modal .simple-knife-grid{height:auto;max-height:none;overflow:visible}body.touch-ui #modal .simple-knife-focus #knife-preview{height:160px}}
@media(max-width:600px) and (max-height:700px){
 body.touch-ui #main-menu[data-screen=main]{padding-top:max(76px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}
 body.touch-ui #main-menu[data-screen=main] .mm-stack{flex-shrink:0}
 body.touch-ui #main-menu[data-screen=main] .cv-logo{width:220px;max-width:72vw;margin:0 auto 12px}
 body.touch-ui #main-menu[data-screen=main] .mm-home{gap:12px}
 body.touch-ui .cv-play-grid{gap:8px}
 body.touch-ui .cv-play-grid .mm-item{min-height:48px;padding:9px 7px}
 body.touch-ui .cv-play-grid .mm-item.cv-quick{min-height:60px}
 body.touch-ui .cv-tools{margin-top:12px}
 body.touch-ui .cv-tools button{min-height:44px;padding:8px 5px}
}
@media(max-height:480px) and (min-width:500px){
 body.touch-ui #main-menu[data-screen=main]{padding-top:max(66px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
 body.touch-ui #main-menu[data-screen=main] .mm-stack{display:grid;grid-template-columns:150px minmax(0,310px);column-gap:18px;row-gap:12px;width:min(500px,100%);flex-shrink:0}
 body.touch-ui #main-menu[data-screen=main] .cv-logo{grid-column:1;grid-row:1;width:150px;margin:0;align-self:center}
 body.touch-ui #main-menu[data-screen=main] .mm-home{grid-column:2;grid-row:1;gap:8px}
 body.touch-ui #main-menu[data-screen=main] .cv-player{display:none}
 body.touch-ui #main-menu[data-screen=main] .cv-tools{grid-column:1/-1;grid-row:2;margin:0;width:100%}
 body.touch-ui #main-menu[data-screen=main] .cv-tools button{min-height:44px;padding:8px}
 body.touch-ui #main-menu[data-screen=main] .cv-play-grid .mm-item{min-height:44px;padding:8px}
 body.touch-ui #main-menu[data-screen=main] .cv-play-grid .mm-item.cv-quick{min-height:54px}
}

/* Nothing on the match screen sits on top of anything else.
   The title stays between the menu buttons (left) and the gold/diamonds (right). */
@media(min-width:751px){body.match-active #match-top{width:min(480px,calc(100vw - 392px))}}
/* The Alt mouse-look hint only appears where the title cannot reach it, never on touch screens,
   and steps aside for the match intro card. */
@media(max-width:999px){.look-hint{display:none!important}}
body.touch-ui .look-hint,body:has(#match-intro:not([hidden])) .look-hint{display:none!important}
/* Picking a Runner needs the centre: passing notices wait. */
body:has(#runner-picker:not([hidden])) #toast,body:has(#runner-picker:not([hidden])) #pace-event{visibility:hidden!important}
/* The rescue timer already explains being downed, so the matching notice does not stack on it. */
body:has(#match-rescue:not([hidden])) #toast{visibility:hidden!important}
/* Short phone screens: the action icons shrink so the name, the "ready" text and the recharge bar each keep their own line. */
body.touch-ui #match-controls .match-action-art svg{width:100%!important;height:100%!important}
@media(max-height:480px){body.touch-ui #match-controls .match-action-art,body.touch-ui #match-controls .match-action-art img{width:28px!important;height:28px!important}body.touch-ui #match-controls button{gap:1px;padding-bottom:9px}}
/* The centre crosshair hides for the second a big cue ("RUN!", "SAFE!") is passing over it. */
body:has(#pace-event.show) #reticle{visibility:hidden}
/* The six-second map vote fills the screen on small displays: the leave button and the music button wait until it closes. */
body:has(#map-vote:not([hidden])) #menu-open,body:has(#map-vote:not([hidden])) .music-toggle{visibility:hidden!important}
/* Portrait phones: the joystick and two rows of action buttons fill the bottom, so notices and cues sit above them. */
@media(max-width:600px){body.touch-ui.match-active #toast{bottom:max(200px,calc(env(safe-area-inset-bottom) + 200px))!important}body.touch-ui.match-active #pace-event{bottom:200px}}
/* CrazyGames login sits in the top-right corner, right under the gold and diamonds, as the account guidelines ask. */
#main-menu[data-screen=main] .cv-account{position:fixed;z-index:3;top:calc(max(22px,env(safe-area-inset-top)) + 56px);right:max(24px,env(safe-area-inset-right));margin:0;padding:7px 14px;border:1px solid #ffffff2b;border-radius:8px;background:#242829e8;color:#fff;font:600 13px var(--ui-font);text-decoration:none;box-shadow:0 2px 0 #0003}
#main-menu[data-screen=main] .cv-account:hover:not(:disabled){background:#3a4142}
@media(max-width:750px){#main-menu[data-screen=main] .cv-account{top:62px;right:14px;padding:6px 11px;font-size:12px}}
/* The first-play guide's Skip goes to the free bottom-left corner instead of covering the gold and diamonds. */
.cv-first-play-skip{top:auto!important;right:auto!important;left:max(20px,env(safe-area-inset-left))!important;bottom:max(20px,env(safe-area-inset-bottom))!important}
/* During the first-play guide its "Tap to play" line takes the spot of the event badge, which is dimmed anyway. */
#main-menu.cv-guide-active .cv-season{visibility:hidden}
/* Short desktop windows (the CrazyGames iframe is about 650 px tall): the main menu fits without scrolling.
   The corners hold the chest, gold and login, so the logo can start near the top. */
@media(min-width:751px) and (max-height:820px){
 #main-menu[data-screen=main]{padding-top:max(22px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}
 #main-menu[data-screen=main] .cv-logo{width:clamp(210px,44vh,320px);margin-bottom:14px}
 #main-menu[data-screen=main] .cv-tools{margin-top:12px}
}