/* Safari uses dynamic viewport units and safe-area insets around the notch/home bar. */
html{background:#101017;-webkit-text-size-adjust:100%}
#touch{touch-action:none;-webkit-user-select:none;user-select:none}
#joystick{position:relative;transform:translateY(-12px);width:134px;height:134px;border-radius:50%;border:2px solid #80729b;background:radial-gradient(circle,#302941 0 37%,#181625 38% 65%,#514465 66% 68%,#211c32 69%);touch-action:none;box-shadow:0 5px 0 #090912,inset 0 0 24px #0008}
#joystick:before{content:'✚';position:absolute;inset:0;display:grid;place-items:center;font:80px monospace;color:#5f507b}
#stick-knob{position:absolute;left:calc(50% - 24px);top:calc(50% - 24px);width:48px;height:48px;border:2px solid #d6c3ed;border-radius:50%;background:#70617f;box-shadow:0 5px 0 #0b0815;pointer-events:none;will-change:transform}
.touch-actions{display:flex;align-items:center;gap:12px}
#touch .action{width:76px;height:76px;border-radius:50%;border:3px solid #fcf4d4;background:#d5ff58;color:#1a1525;font-size:11px;font-weight:bold;box-shadow:0 5px 0 #5b7131;touch-action:none}
#touch .action-special{background:#ff82c1;box-shadow:0 5px 0 #854766}
#touch .action:active{transform:translateY(3px);box-shadow:0 2px 0 #30243b}
.touch-utilities{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}
#touch .utility{min-width:44px;min-height:44px;border:1px solid #776989;border-radius:8px;font-size:12px;padding:6px 10px}
.mobile-help{display:none;color:#bab3cd;font-size:10px;line-height:1.8;text-align:center;margin:12px auto;max-width:390px}
@media(pointer:coarse),(max-width:900px){
 #touch{display:flex;align-items:center;padding:14px max(8px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:8px}
 .mobile-help{display:block}
 .below,.badge,.edition,.online{display:none}
 .cabinet-bottom{padding:8px 4px}.cabinet-bottom button{min-height:36px;font-size:11px}
 .cabinet-bottom>span{max-width:55%;line-height:1.5}
 .screen{width:100%;height:auto!important;min-height:0;aspect-ratio:2/1}
 main{padding:18px 10px 0}.heading{margin:12px 0 18px}h1{font-size:clamp(28px,7vw,46px)}
 footer{padding:14px 0}.eyebrow{font-size:8px}
 .player-hud .name{min-height:0;font-size:8px}.special{font-size:7px}.hearts{font-size:19px}.health{height:13px}
 .player-hud{padding:3px 5px}.stage-hud{font-size:8px}.stage-hud small{font-size:7px}
 .menu .tiny{display:none}.menu .logo{font-size:42px}.menu p{font-size:8px}.menu-actions{margin:9px 0}
 .characters{margin:4px;gap:8px}.character{padding:5px 12px;min-width:0}.character canvas{height:40px;width:64px}.character h3{font-size:10px;margin:5px 0}.character p{font-size:7px;margin:2px 0}.menu h2{font-size:22px;margin:2px}.back{padding:4px;margin:0}
 #coop:after{content:' · teclado';font-size:8px}
}
@media(max-width:380px){#joystick{width:114px;height:114px}#touch .action{width:65px;height:65px}.touch-actions{gap:8px}.heading p{font-size:9px}}
@media(orientation:landscape) and (max-height:600px) and (max-width:1000px){
 body{overflow:hidden;overscroll-behavior:none;height:100dvh}
 header,.heading,.eyebrow,footer,.mobile-help,.cabinet-top,.cabinet-bottom{display:none}
 main{padding:0;margin:0;max-width:none;height:100dvh}
 .cabinet{border:0;padding:0;width:100%;height:100dvh;background:#101017;display:flex;align-items:center;justify-content:center;box-shadow:none}
 .screen{width:min(calc(100vw - 240px - env(safe-area-inset-left) - env(safe-area-inset-right)),calc(200dvh - 12px));height:auto!important;aspect-ratio:2/1}
 #touch{position:fixed;inset:0;pointer-events:none;padding:0;display:block}
 #joystick{pointer-events:auto;position:absolute;left:max(8px,env(safe-area-inset-left));top:calc(50% - 54px);bottom:auto;transform:none;width:108px;height:108px}
 .touch-right{pointer-events:auto;position:absolute;right:max(8px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));width:108px}
 .touch-actions{gap:8px;flex-direction:column}.touch-utilities{gap:3px;margin-bottom:7px}
 #touch .action{width:62px;height:62px;font-size:9px}#touch .utility{min-width:44px;min-height:44px;padding:4px}
 #hud{inset:5px;gap:6px}.player-hud{width:34%;padding:3px 5px;border-width:1px}.player-hud .name{font-size:8px}.hearts{font-size:18px}.health{height:13px;margin:3px 0}.special{font-size:7px}.stage-hud{font-size:8px;max-width:27%;padding:3px}.stage-hud small{font-size:7px}
 .logo{font-size:48px}.menu .subtitle{font-size:12px}.primary,.secondary{padding:10px;font-size:10px}.menu-actions{margin:12px 0}.blink{font-size:7px}
}
@media(pointer:coarse),(max-width:900px){.character p:first-of-type{display:none}.menu{max-height:100%;overflow-y:auto;overscroll-behavior:contain}.character canvas{height:36px;width:58px}.character{padding:4px 10px}}