html,body{overflow:hidden;width:100%;height:100%;overscroll-behavior:none}
#s2047-root{--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);position:relative;width:100%;height:100vh;height:100svh;height:100dvh;overflow:hidden;background:linear-gradient(#07101a,#0a1621);isolation:isolate}
#s2047-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
button{-webkit-tap-highlight-color:transparent;font:inherit}

.s2047-brand{position:absolute;top:calc(var(--safe-t) + 14px);left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;text-shadow:0 3px 12px #000;z-index:5;max-width:72vw}
.s2047-logo{font-size:clamp(22px,4vw,48px);font-weight:900;letter-spacing:.16em;color:#ffd447;white-space:nowrap}.s2047-sub{font-size:clamp(9px,1.3vw,15px);letter-spacing:.45em;margin-top:2px;white-space:nowrap}

.s2047-topbar{position:absolute;top:calc(var(--safe-t) + 14px);right:calc(var(--safe-r) + 14px);display:flex;gap:8px;z-index:8}
.s2047-topbar button{border:1px solid rgba(255,255,255,.26);background:rgba(5,20,20,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;border-radius:18px;padding:11px 14px;font-weight:800;box-shadow:0 6px 20px rgba(0,0,0,.28);white-space:nowrap}
.s2047-topbar button span{margin-right:5px;opacity:.9}

.s2047-toast{position:absolute;left:50%;bottom:calc(var(--safe-b) + 210px);transform:translateX(-50%) translateY(6px);background:rgba(0,0,0,.84);color:#fff!important;-webkit-text-fill-color:#fff!important;padding:10px 16px;border:1px solid rgba(255,255,255,.16);border-radius:12px;opacity:0;transition:opacity .18s ease,transform .18s ease;z-index:12;pointer-events:none;max-width:min(76vw,500px);text-align:center;font-weight:800;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.95);box-shadow:0 6px 20px rgba(0,0,0,.28)}.s2047-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.s2047-debugpanel{position:absolute;left:calc(var(--safe-l) + 12px);top:calc(var(--safe-t) + 12px);white-space:pre;font:12px/1.35 monospace;background:rgba(0,0,0,.72);padding:10px;border-radius:10px;z-index:13;pointer-events:none;max-width:calc(100vw - 24px - var(--safe-l) - var(--safe-r));max-height:45vh;overflow:hidden}

.s2047-mobile-controls{position:absolute;left:calc(var(--safe-l) + 14px);right:calc(var(--safe-r) + 14px);bottom:calc(var(--safe-b) + 14px);height:clamp(142px,22vh,178px);z-index:10;pointer-events:none}
.s2047-wheel{--wheel:clamp(142px,22vh,178px);position:absolute;left:0;bottom:0;width:var(--wheel);height:var(--wheel);border-radius:50%;pointer-events:auto;touch-action:none;background:rgba(7,20,18,.34);border:4px solid rgba(255,255,255,.55);box-shadow:0 9px 28px rgba(0,0,0,.32),inset 0 0 0 1px rgba(0,0,0,.25);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.s2047-wheel-ring{position:absolute;inset:23%;border-radius:50%;border:2px solid rgba(255,255,255,.18);pointer-events:none}
.s2047-wheel .dir{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;border:0;background:transparent;color:#fff;font-size:clamp(25px,4vh,34px);font-weight:900;line-height:1;text-shadow:0 2px 5px rgba(0,0,0,.55);padding:0;display:grid;place-items:center;touch-action:none;user-select:none;border-radius:50%}
.s2047-wheel .dir:active,.s2047-wheel .dir.active{background:rgba(255,212,71,.22);color:#ffd447;transform:scale(.94)}
.s2047-wheel .n{left:50%;top:16%}.s2047-wheel .ne{left:76%;top:25%}.s2047-wheel .e{left:84%;top:50%}.s2047-wheel .se{left:76%;top:75%}.s2047-wheel .s{left:50%;top:84%}.s2047-wheel .sw{left:24%;top:75%}.s2047-wheel .w{left:16%;top:50%}.s2047-wheel .nw{left:24%;top:25%}
.s2047-stick{position:absolute;left:50%;top:50%;width:42%;height:42%;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(145deg,rgba(210,216,211,.92),rgba(120,130,125,.9));border:3px solid rgba(235,240,236,.58);box-shadow:0 5px 13px rgba(0,0,0,.5),inset 0 0 0 2px rgba(0,0,0,.2);pointer-events:none;display:grid;place-items:center}.s2047-stick-inner{width:78%;height:78%;border-radius:50%;background:linear-gradient(145deg,rgba(196,204,199,.95),rgba(133,143,138,.95));box-shadow:inset 0 2px 5px rgba(255,255,255,.25)}

.s2047-interact{position:absolute;right:0;bottom:8px;width:clamp(100px,16vh,132px);height:clamp(100px,16vh,132px);border-radius:50%;pointer-events:auto;touch-action:manipulation;border:3px solid rgba(255,255,255,.38);background:rgba(6,20,17,.74);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-weight:900;font-size:clamp(12px,2vh,17px);box-shadow:0 8px 24px rgba(0,0,0,.38),inset 0 0 0 1px rgba(0,0,0,.28);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.s2047-interact:active{transform:scale(.96);background:rgba(73,94,75,.78)}.s2047-hand{font-size:clamp(31px,5vh,44px);line-height:1;font-family:Arial,sans-serif}

.s2047-hint{position:absolute;bottom:calc(var(--safe-b) + 8px);left:50%;transform:translateX(-50%);font-size:11px;opacity:.65;pointer-events:none;z-index:4;white-space:nowrap}

@media(max-width:720px){
  .s2047-brand{top:calc(var(--safe-t) + 12px);max-width:70vw}.s2047-logo{font-size:clamp(19px,6vw,31px)}.s2047-sub{font-size:9px;letter-spacing:.28em}
  .s2047-topbar{top:calc(var(--safe-t) + 94px);right:calc(var(--safe-r) + 12px);flex-direction:column;gap:7px}.s2047-topbar button{min-width:136px;padding:9px 12px;font-size:12px;border-radius:15px}
  .s2047-hint{display:none}
  .s2047-mobile-controls{left:calc(var(--safe-l) + 14px);right:calc(var(--safe-r) + 14px);bottom:calc(var(--safe-b) + 14px);height:clamp(138px,21vh,166px)}
  .s2047-wheel{--wheel:clamp(138px,21vh,166px)}
  .s2047-interact{width:clamp(94px,15vh,122px);height:clamp(94px,15vh,122px)}
  .s2047-toast{bottom:calc(var(--safe-b) + 182px);font-size:13px}
}

@media(max-width:380px){
  .s2047-mobile-controls{left:calc(var(--safe-l) + 8px);right:calc(var(--safe-r) + 8px);bottom:calc(var(--safe-b) + 8px)}
  .s2047-wheel{--wheel:136px}.s2047-interact{width:94px;height:94px;font-size:11px}.s2047-hand{font-size:30px}
  .s2047-topbar{right:calc(var(--safe-r) + 8px)}.s2047-topbar button{min-width:124px;font-size:11px}
}

@media(max-height:620px){
  .s2047-brand{top:calc(var(--safe-t) + 7px)}.s2047-logo{font-size:20px}.s2047-sub{font-size:7px}
  .s2047-mobile-controls{height:126px;bottom:calc(var(--safe-b) + 8px)}.s2047-wheel{--wheel:126px}.s2047-interact{width:88px;height:88px;font-size:10px}.s2047-hand{font-size:28px}
  .s2047-topbar{top:calc(var(--safe-t) + 52px)}.s2047-topbar button{padding:6px 9px;font-size:10px;min-width:110px}
  .s2047-toast{bottom:calc(var(--safe-b) + 142px)}
}

@media(max-height:500px) and (orientation:landscape){
  .s2047-brand{top:calc(var(--safe-t) + 4px)}.s2047-logo{font-size:17px}.s2047-sub{font-size:6px}
  .s2047-topbar{top:calc(var(--safe-t) + 8px);right:calc(var(--safe-r) + 8px);flex-direction:row}.s2047-topbar button{min-width:0}
  .s2047-mobile-controls{left:calc(var(--safe-l) + 8px);right:calc(var(--safe-r) + 8px);bottom:calc(var(--safe-b) + 6px);height:110px}.s2047-wheel{--wheel:110px;border-width:3px}.s2047-wheel .dir{font-size:21px}.s2047-interact{width:76px;height:76px;bottom:4px;font-size:9px}.s2047-hand{font-size:24px}
  .s2047-toast{bottom:calc(var(--safe-b) + 120px)}
}

/* v1.0.3 laser/fire controls */
.s2047-actions{position:absolute;right:0;bottom:0;height:100%;width:clamp(104px,17vh,140px);pointer-events:none}
.s2047-actions button{pointer-events:auto}
.s2047-interact{right:0;bottom:0}
.s2047-fire{position:absolute;right:8px;bottom:clamp(108px,17vh,142px);width:clamp(76px,11.5vh,96px);height:clamp(76px,11.5vh,96px);border-radius:50%;touch-action:manipulation;border:3px solid rgba(255,236,179,.58);background:radial-gradient(circle at 38% 30%,rgba(255,122,45,.95),rgba(162,24,16,.91) 70%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-weight:900;font-size:clamp(11px,1.7vh,14px);box-shadow:0 8px 24px rgba(0,0,0,.42),0 0 20px rgba(255,90,20,.22),inset 0 0 0 1px rgba(255,255,255,.15);text-shadow:0 1px 3px #4a0900}
.s2047-fire:active,.s2047-fire.active{transform:scale(.94);filter:brightness(1.35);box-shadow:0 4px 14px rgba(0,0,0,.38),0 0 28px rgba(255,109,32,.62)}
.s2047-fire-icon{font-size:clamp(29px,4.6vh,40px);line-height:.9;color:#fff5b0;text-shadow:0 0 8px #ffda53,0 0 14px #ff5e22}
@media(max-width:720px){.s2047-actions{width:clamp(98px,16vh,128px)}.s2047-fire{right:5px;bottom:clamp(101px,16vh,132px);width:clamp(70px,10.8vh,88px);height:clamp(70px,10.8vh,88px)}}
@media(max-width:380px){.s2047-actions{width:98px}.s2047-fire{right:4px;bottom:100px;width:68px;height:68px;font-size:10px}.s2047-fire-icon{font-size:27px}}
@media(max-height:620px){.s2047-actions{width:92px}.s2047-fire{right:3px;bottom:92px;width:62px;height:62px;font-size:9px}.s2047-fire-icon{font-size:25px}}
@media(max-height:500px) and (orientation:landscape){.s2047-actions{width:80px}.s2047-fire{right:2px;bottom:82px;width:54px;height:54px;font-size:8px}.s2047-fire-icon{font-size:21px}}

/* v1.0.5 damage / health HUD */
.s2047-status{position:absolute;left:50%;bottom:calc(var(--safe-b) + 16px);transform:translateX(-50%);z-index:9;width:min(360px,42vw);display:flex;gap:10px;padding:8px 10px;border:1px solid rgba(255,255,255,.2);border-radius:15px;background:rgba(4,15,18,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 20px rgba(0,0,0,.26);pointer-events:none}
.s2047-meter{flex:1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;font-size:9px;font-weight:900;letter-spacing:.06em}.s2047-meter>div{height:8px;border-radius:6px;background:rgba(255,255,255,.14);overflow:hidden;min-width:52px}.s2047-meter i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ff3c3c,#ffc34a);border-radius:inherit;transition:width .15s}.s2047-meter.energy i{background:linear-gradient(90deg,#36b7ff,#88efff)}.s2047-meter b{font-size:10px;min-width:24px;text-align:right}
@media(max-width:720px){.s2047-status{bottom:calc(var(--safe-b) + 8px);width:min(310px,54vw);padding:6px 8px;gap:7px}.s2047-meter{font-size:8px;gap:4px}.s2047-meter b{font-size:9px}.s2047-meter>div{min-width:36px}}
@media(max-width:520px){.s2047-status{width:150px;left:50%;bottom:calc(var(--safe-b) + 8px);display:block}.s2047-meter+.s2047-meter{margin-top:5px}.s2047-meter{grid-template-columns:42px 1fr 22px}}
@media(max-height:500px) and (orientation:landscape){.s2047-status{bottom:calc(var(--safe-b) + 5px);width:210px;padding:4px 6px}.s2047-meter{font-size:7px}.s2047-meter>div{height:6px}}


/* v1.0.7 mobile readability / safe-layout fix */
#s2047-root .s2047-toast,#s2047-root .s2047-status,#s2047-root .s2047-status *,#s2047-root .s2047-topbar button,#s2047-root .s2047-actions button,#s2047-root .s2047-wheel .dir{color:#fff!important;-webkit-text-fill-color:#fff!important}
#s2047-root .s2047-status{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.8)}
@media(max-width:720px){
  .s2047-status{bottom:calc(var(--safe-b) + 176px);width:min(260px,60vw);padding:7px 9px;background:rgba(2,12,16,.82)}
  .s2047-toast{bottom:calc(var(--safe-b) + 238px);font-size:13px;max-width:68vw;padding:9px 14px}
  .s2047-fire{right:8px;bottom:clamp(112px,17vh,140px)}
}
@media(max-width:520px){
  .s2047-status{left:50%;bottom:calc(var(--safe-b) + 174px);width:214px;display:flex;gap:7px}
  .s2047-meter+.s2047-meter{margin-top:0}
  .s2047-meter{grid-template-columns:auto 1fr auto;font-size:7px}
  .s2047-meter>div{min-width:28px;height:7px}
  .s2047-toast{bottom:calc(var(--safe-b) + 230px);max-width:72vw}
}
@media(max-width:380px){
  .s2047-status{bottom:calc(var(--safe-b) + 150px);width:190px}
  .s2047-toast{bottom:calc(var(--safe-b) + 204px);max-width:70vw;font-size:12px}
}
@media(max-height:620px){
  .s2047-status{bottom:calc(var(--safe-b) + 132px)}
  .s2047-toast{bottom:calc(var(--safe-b) + 184px)}
}
@media(max-height:500px) and (orientation:landscape){
  .s2047-status{bottom:calc(var(--safe-b) + 6px);left:50%;width:210px}
  .s2047-toast{bottom:calc(var(--safe-b) + 118px);max-width:48vw}
}


/* v1.1.1 first mission / credits */
.s2047-status{align-items:center}
.s2047-credits{display:flex;align-items:center;gap:5px;padding-left:8px;border-left:1px solid rgba(255,255,255,.18);font-size:9px;font-weight:900;white-space:nowrap;color:#fff!important;-webkit-text-fill-color:#fff!important}.s2047-credits span{color:#ffd447!important;-webkit-text-fill-color:#ffd447!important}.s2047-credits b{font-size:11px}
.s2047-mission{position:absolute;left:calc(var(--safe-l) + 14px);top:calc(var(--safe-t) + 88px);z-index:8;width:min(280px,36vw);display:flex;flex-direction:column;gap:3px;padding:9px 12px;border:1px solid rgba(255,255,255,.20);border-radius:13px;background:rgba(4,15,18,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(0,0,0,.25);pointer-events:none;color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.s2047-mission strong{font-size:10px;letter-spacing:.10em;color:#ffd447!important;-webkit-text-fill-color:#ffd447!important}.s2047-mission span{font-size:12px;font-weight:800;line-height:1.25}.s2047-mission small{font-size:9px;opacity:.78}
.s2047-mission.complete{border-color:rgba(117,230,194,.48)}.s2047-mission.complete strong{color:#75e6c2!important;-webkit-text-fill-color:#75e6c2!important}
@media(max-width:720px){.s2047-mission{top:calc(var(--safe-t) + 92px);left:calc(var(--safe-l) + 10px);width:min(210px,52vw);padding:7px 9px}.s2047-mission span{font-size:10px}.s2047-mission small{font-size:8px}.s2047-status{width:min(290px,68vw)}}
@media(max-width:520px){.s2047-mission{top:calc(var(--safe-t) + 86px);width:min(188px,50vw)}.s2047-status{width:236px}.s2047-credits{font-size:8px;padding-left:5px}.s2047-credits b{font-size:9px}}
@media(max-height:620px){.s2047-mission{top:calc(var(--safe-t) + 48px);width:180px}.s2047-mission span{font-size:9px}.s2047-mission small{display:none}}
@media(max-height:500px) and (orientation:landscape){.s2047-mission{top:calc(var(--safe-t) + 42px);left:calc(var(--safe-l) + 8px);width:180px}.s2047-status{width:240px}}

/* v1.1.3 reputation / witness consequences */
.s2047-reputation{display:flex;align-items:center;gap:5px;padding-left:8px;border-left:1px solid rgba(255,255,255,.18);font-size:9px;font-weight:900;white-space:nowrap;color:#fff!important;-webkit-text-fill-color:#fff!important}.s2047-reputation span{color:#75e6c2!important;-webkit-text-fill-color:#75e6c2!important}.s2047-reputation b{font-size:11px}
@media(max-width:520px){.s2047-reputation{font-size:8px;padding-left:5px}.s2047-reputation b{font-size:9px}.s2047-status{width:286px}}

/* v1.1.7 stable old-controller viewport anchoring.
   Keep the original controls INSIDE #s2047-root so the game JS/render loop remains intact.
   JS sets the visible top position on mobile; these rules only guarantee visibility/layering. */
@media (pointer:coarse), (max-width:900px){
  #s2047-root .s2047-mobile-controls{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    z-index:1000!important;
    pointer-events:none!important;
    left:calc(var(--safe-l) + 14px)!important;
    right:calc(var(--safe-r) + 14px)!important;
  }
  #s2047-root .s2047-wheel,
  #s2047-root .s2047-actions,
  #s2047-root .s2047-fire,
  #s2047-root .s2047-interact{
    visibility:visible!important;
    opacity:1!important;
  }
  #s2047-root .s2047-wheel{pointer-events:auto!important}
  #s2047-root .s2047-actions button{pointer-events:auto!important}
  #s2047-root .s2047-status{z-index:999!important}
  #s2047-root .s2047-toast{z-index:1001!important}
}