:root{color-scheme:dark;--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#05080d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;touch-action:none;user-select:none}
#game-shell{position:relative;width:100%;height:100%;min-height:320px;overflow:hidden;background:radial-gradient(circle at 50% 15%,#172337,#05080d 65%)}
#game{display:block;width:100%;height:100%;outline:0;image-rendering:auto;touch-action:none}
#rotate-hint{display:none;position:absolute;inset:0;z-index:30;align-items:center;justify-content:center;background:rgba(4,8,14,.94);padding:24px;text-align:center}
.rotate-card{display:grid;gap:8px;justify-items:center;max-width:360px}.rotate-icon{font-size:64px;line-height:1;color:#ffd43b}.rotate-card strong{font-size:24px}.rotate-card small{opacity:.72;font-size:14px;line-height:1.45}
#touch-ui{position:absolute;inset:0;display:none;pointer-events:none;z-index:20}
#touch-ui button{pointer-events:auto;border:1px solid rgba(255,255,255,.18);background:rgba(7,12,20,.68);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.04);backdrop-filter:blur(8px);font-weight:900}
.dpad{position:absolute;left:calc(22px + var(--safe-l));bottom:calc(22px + var(--safe-b));width:170px;height:170px}.dpad button{position:absolute;width:62px;height:62px;border-radius:18px;font-size:24px}.dpad .up{left:54px;top:0}.dpad .down{left:54px;bottom:0}.dpad .left{left:0;top:54px}.dpad .right{right:0;top:54px}
.actions{position:absolute;right:calc(22px + var(--safe-r));bottom:calc(24px + var(--safe-b));display:flex;gap:14px;align-items:flex-end}.actions button{border-radius:50%;width:84px;height:84px;font-size:12px;letter-spacing:.08em}.actions .boost{width:96px;height:96px;border-color:rgba(255,212,59,.5);box-shadow:0 0 30px rgba(255,212,59,.14),inset 0 0 0 1px rgba(255,255,255,.04)}.actions .scan{width:72px;height:72px;border-color:rgba(64,196,255,.45)}
@media (hover:none),(pointer:coarse){#touch-ui{display:block}}
@media (orientation:portrait) and (max-width:900px){#rotate-hint{display:flex}#touch-ui{display:none}}
@media (max-height:520px){.dpad{transform:scale(.78);transform-origin:left bottom}.actions{transform:scale(.78);transform-origin:right bottom}}