:root{--yellow:#ffd000;--black:#050505;--safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;margin:0;background:#050505;overflow:hidden}body{font-family:Impact,Haettenschweiler,"Arial Narrow Bold",Arial,sans-serif;touch-action:none;overscroll-behavior:none}button{font:inherit}#app{position:fixed;inset:0;background:#050505;overflow:hidden;display:grid;place-items:center}#game{display:block;width:min(100vw,calc(100dvh * 16 / 9));height:min(100dvh,calc(100vw * 9 / 16));background:#050505}.overlay{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:calc(18px + var(--safe-t)) calc(18px + var(--safe-r)) calc(18px + var(--safe-b)) calc(18px + var(--safe-l));background:radial-gradient(circle at 50% 42%,#262626 0,#0c0c0c 50%,#000 100%);color:#fff;text-align:center}.overlay:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,transparent 0 27px,rgba(255,208,0,.035) 27px 31px)}.overlay>*{position:relative;z-index:1}.overlay img{width:min(68vw,620px);max-height:44vh;object-fit:contain;filter:drop-shadow(0 12px 25px rgba(0,0,0,.55))}.overlay p{margin:0;font-family:Arial,sans-serif;font-weight:800}.overlay small{font-family:Arial,sans-serif;opacity:.78;font-weight:700}.start-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}.menu-button{border:4px solid #050505;outline:3px solid var(--yellow);background:linear-gradient(#ffe56d,#ffc400);color:#050505;padding:14px 28px;min-width:220px;border-radius:8px;box-shadow:0 8px 0 #866000,0 12px 25px rgba(0,0,0,.5);font-size:clamp(22px,3.5vw,38px);letter-spacing:.06em;cursor:pointer}.menu-button:active{transform:translateY(4px);box-shadow:0 4px 0 #866000,0 8px 18px rgba(0,0,0,.5)}#continue-button{background:linear-gradient(#fff9b4,#ffd000)}.hidden{display:none!important}.rotate{color:var(--yellow);font-size:80px;line-height:.8}.overlay h1{margin:0;color:var(--yellow);letter-spacing:.06em}.save-toast{position:fixed;left:50%;top:calc(18px + var(--safe-t));transform:translate(-50%,-16px);z-index:70;padding:10px 18px;border:3px solid var(--yellow);border-radius:8px;background:rgba(5,5,5,.94);color:var(--yellow);font-family:Arial,sans-serif;font-weight:900;letter-spacing:.08em;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}.save-toast.show{opacity:1;transform:translate(-50%,0)}
#controls{display:none;position:fixed;inset:0;z-index:30;pointer-events:none}body.playing #controls{display:block}.dpad{position:absolute;left:calc(14px + var(--safe-l));bottom:calc(14px + var(--safe-b));width:clamp(150px,22vw,245px);height:clamp(150px,22vw,245px);opacity:.82}.key,.bomb,.utility{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}.key{position:absolute;width:34%;height:34%;border:3px solid var(--yellow);border-radius:14px;background:rgba(6,6,6,.66);color:white;font-size:clamp(22px,5vw,42px)}.key.active{background:rgba(255,208,0,.9);color:#050505;transform:scale(.96)}.up{left:33%;top:0}.left{left:0;top:33%}.right{right:0;top:33%}.down{left:33%;bottom:0}.bomb{position:absolute;right:calc(18px + var(--safe-r));bottom:calc(22px + var(--safe-b));width:clamp(92px,14vw,150px);height:clamp(92px,14vw,150px);border-radius:50%;border:5px solid #050505;outline:4px solid var(--yellow);background:radial-gradient(circle at 38% 30%,#fff37b 0 10%,#ffd400 27%,#ef9d00 78%);color:#050505;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:.82;box-shadow:0 8px 0 #765300}.bomb span{font-family:Arial,sans-serif;font-size:clamp(34px,6vw,64px)}.bomb b{font-size:clamp(15px,2.4vw,25px)}.bomb.active{transform:translateY(4px) scale(.97)}.utility{position:absolute;top:calc(12px + var(--safe-t));width:clamp(42px,6vw,60px);height:clamp(42px,6vw,60px);border-radius:11px;border:2px solid var(--yellow);background:rgba(0,0,0,.66);color:#fff;font-size:clamp(19px,3.2vw,30px)}.utility:active{background:rgba(255,208,0,.85);color:#050505}.fullscreen{right:calc(12px + var(--safe-r))}.pause{right:calc(76px + var(--safe-r))}.save{right:calc(140px + var(--safe-r));font-family:Arial,sans-serif;font-size:clamp(18px,2.8vw,27px)}
@media(pointer:fine) and (min-width:900px){body{touch-action:auto}.dpad,.bomb{display:none!important}}
@media(orientation:portrait) and (max-width:900px){body.playing #rotate-overlay{display:flex!important}body.playing #controls{display:none!important}}
@media(max-height:520px){.overlay{gap:10px}.overlay img{max-height:35vh}.menu-button{padding:9px 20px}.overlay small{font-size:12px}}