@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
*{margin:0;padding:0;box-sizing:border-box;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
html,body{overflow:hidden;touch-action:none;height:100%}
body{background:#000;min-height:100vh;min-height:100dvh;min-height:-webkit-fill-available;display:flex;align-items:center;justify-content:center;font-family:'Press Start 2P',monospace;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.wrap{position:relative;max-width:100vw;max-height:100vh;max-height:100dvh}
.cab{background:linear-gradient(180deg,#4a4a6a,#1a1a2e,#0a0a1a);border:8px solid;border-color:#888 #444 #333 #666;border-radius:20px;padding:20px;box-shadow:0 0 80px rgba(255,0,128,0.5),0 0 160px rgba(0,255,255,0.3)}
h1{text-align:center;font-size:18px;color:#ff0080;text-shadow:3px 3px 0 #0ff,-2px -2px 0 #ff0,0 0 30px #ff0080;margin-bottom:10px}
.scr{background:#050508;border:5px solid #333;border-radius:12px;padding:10px}
.hud{display:flex;justify-content:space-between;color:#0ff;font-size:10px;padding:6px;text-shadow:0 0 10px #0ff}
canvas{display:block;image-rendering:pixelated;max-width:100%;height:auto}
.ctrl{text-align:center;color:#ff0;font-size:7px;margin-top:12px;line-height:2.2}
.coin{text-align:center;color:#ff0080;font-size:11px;margin-top:10px;animation:blink .5s infinite}
@keyframes blink{0%,45%{opacity:1}50%,100%{opacity:0}}
.scan{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,0.1),rgba(0,0,0,0.1) 1px,transparent 1px,transparent 2px);z-index:999}
.flash{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;border-radius:20px;transition:opacity 0.05s}

/* Mobile touch zones - clean layout */
.touch-zones{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:998;pointer-events:none}
/* D-pad styling - circular design */
.dpad{position:fixed;left:15px;bottom:15px;width:140px;height:140px;pointer-events:auto;display:none;border-radius:50%;background:rgba(20,20,40,0.9);border:3px solid rgba(255,255,255,0.3);box-shadow:0 0 20px rgba(255,0,128,0.3),inset 0 0 30px rgba(0,0,0,0.5)}
.dpad-zone{position:absolute;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.8);font-size:18px;pointer-events:auto}
.dpad-zone:active{color:#fff;text-shadow:0 0 10px #ff00ff}
/* Pie slice zones using clip-path */
.dpad-up{top:0;left:0;width:100%;height:50%;clip-path:polygon(50% 50%,10% 0%,90% 0%);padding-top:8px}
.dpad-down{bottom:0;left:0;width:100%;height:50%;clip-path:polygon(50% 50%,10% 100%,90% 100%);padding-bottom:8px}
.dpad-left{top:0;left:0;width:50%;height:100%;clip-path:polygon(50% 50%,0% 10%,0% 90%);padding-left:8px}
.dpad-right{top:0;right:0;width:50%;height:100%;clip-path:polygon(50% 50%,100% 10%,100% 90%);padding-right:8px}
.dpad-upleft{top:0;left:0;width:50%;height:50%;clip-path:polygon(100% 100%,0% 40%,0% 0%,40% 0%)}
.dpad-upright{top:0;right:0;width:50%;height:50%;clip-path:polygon(0% 100%,100% 40%,100% 0%,60% 0%)}
.dpad-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,rgba(60,60,80,1),rgba(30,30,50,1));border:2px solid rgba(255,255,255,0.4);pointer-events:none;box-shadow:0 0 10px rgba(0,0,0,0.5)}
/* Right side - action buttons in 2x2 grid */
.action-buttons{position:fixed;right:15px;bottom:23px;display:none;flex-wrap:wrap;width:124px;gap:8px;z-index:999}
.action-btn{width:58px;height:58px;border-radius:50%;background:rgba(20,20,40,0.9);border:3px solid rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;pointer-events:auto;box-shadow:0 0 15px rgba(255,0,128,0.2)}
.action-btn:active{background:rgba(255,100,200,0.4);transform:scale(0.95);box-shadow:0 0 20px rgba(255,0,128,0.5)}
.action-btn.punch{border-color:#ff6b6b;box-shadow:0 0 15px rgba(255,107,107,0.3)}
.action-btn.tweet{border-color:#1da1f2;box-shadow:0 0 15px rgba(29,161,242,0.3)}
.action-btn.golf{border-color:#4ade80;box-shadow:0 0 15px rgba(74,222,128,0.3)}
.action-btn.dash{border-color:#a855f7;box-shadow:0 0 15px rgba(168,85,247,0.3)}
.touch-hint{display:none}
@media (pointer:coarse){.dpad{display:flex}.action-buttons{display:flex}.ctrl{display:none}}
@media (max-width:800px){
.cab{padding:10px;border-width:4px;border-radius:10px}
h1{font-size:12px}
.hud{font-size:8px}
.coin{font-size:9px}
}
/* Small phones - scale down controls */
@media (max-height:600px) and (pointer:coarse){
.dpad{width:110px;height:110px;left:10px;bottom:10px}
.dpad-zone{font-size:14px}
.dpad-center{width:28px;height:28px}
.action-buttons{width:100px;gap:6px;right:10px;bottom:15px}
.action-btn{width:47px;height:47px;font-size:20px}
}
/* Very small phones */
@media (max-height:500px) and (pointer:coarse){
.dpad{width:90px;height:90px;left:8px;bottom:8px}
.dpad-zone{font-size:12px}
.dpad-center{width:24px;height:24px}
.action-buttons{width:84px;gap:4px;right:8px;bottom:12px}
.action-btn{width:40px;height:40px;font-size:16px}
}
/* Landscape mode on phones - controls outside game area */
@media (orientation:landscape) and (pointer:coarse){
.wrap{max-height:100dvh;max-height:-webkit-fill-available;margin-left:130px;margin-right:130px}
.cab{padding:6px;border-width:3px}
h1{font-size:9px;margin-bottom:4px}
.scr{padding:4px;border-width:2px}
.hud{font-size:6px;padding:2px}
canvas{max-height:calc(100dvh - 60px);width:auto}
.coin{display:none}
.dpad{width:120px;height:120px;left:5px;top:50%;bottom:auto;transform:translateY(-50%)}
.dpad-zone{font-size:14px}
.dpad-center{width:28px;height:28px}
.action-buttons{width:110px;gap:6px;right:5px;top:50%;bottom:auto;transform:translateY(-50%)}
.action-btn{width:52px;height:52px;font-size:20px}
}
/* Very short landscape (iPhone mini, SE, etc) */
@media (max-height:400px) and (orientation:landscape) and (pointer:coarse){
.wrap{margin-left:110px;margin-right:110px}
h1{display:none}
.cab{padding:4px;border-width:2px}
.scr{padding:3px;border-width:2px}
.hud{font-size:5px;padding:2px}
canvas{max-height:calc(100dvh - 40px)}
.dpad{width:100px;height:100px}
.dpad-zone{font-size:12px}
.dpad-center{width:24px;height:24px}
.action-buttons{width:95px;gap:5px}
.action-btn{width:45px;height:45px;font-size:18px}
}