:root{--ink:#eef8ff;--muted:#91a8b6;--cyan:#4cecff;--pink:#ff4fac;--red:#ff4545;--gold:#ffd06a;--panel:rgba(4,11,17,.78)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;min-height:100%;overflow:hidden;background:#03070b;color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;touch-action:none}button,a{font:inherit}button{cursor:pointer}#shell{position:fixed;inset:0;width:100%;height:100%;overflow:hidden}#game{position:absolute;inset:0;display:block;width:100%;height:100%;background:#020508;image-rendering:pixelated;touch-action:none}.hidden{opacity:0;pointer-events:none}
#hud{position:absolute;inset:0;z-index:8;pointer-events:none;transition:opacity .2s}.hudPanel{position:absolute;top:14px;padding:10px 12px;border:1px solid rgba(121,224,255,.28);background:var(--panel);backdrop-filter:blur(8px);text-shadow:2px 2px 0 #000;font-size:11px}.leftHud{left:14px;min-width:250px}.rightHud{right:14px;text-align:right;line-height:1.55}.logo{font:900 22px/1 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;letter-spacing:.06em}.logo b{color:var(--cyan)}.logo small{display:block;margin-top:4px;font:700 8px/1.2 ui-monospace;letter-spacing:.2em;color:#8aefff}.bar{display:grid;grid-template-columns:34px 130px 34px;gap:7px;align-items:center;margin-top:8px;font-size:9px}.bar>i{height:8px;border:1px solid #59717b;background:#0b151a}.bar>i>b{display:block;height:100%;width:100%;background:linear-gradient(90deg,#b92525,#ff7359)}.bar.armor>i>b{background:linear-gradient(90deg,#24779c,#59e2ff)}.mini{display:flex;gap:10px;margin-top:8px;color:#9ab3be}.mini b,.rightHud b{color:#fff}.mission{margin-top:5px;color:var(--gold)}#gadgetText{color:#70eaff}
#reticle{position:absolute;left:50%;top:50%;width:32px;height:32px;transform:translate(-50%,-50%)}#reticle span{position:absolute;background:#e8f8ff;box-shadow:0 0 6px #000}#reticle span:first-child{width:32px;height:2px;left:0;top:15px}#reticle span:nth-child(2){height:32px;width:2px;left:15px;top:0}#reticle em{position:absolute;width:5px;height:5px;border:1px solid #fff;left:50%;top:50%;transform:translate(-50%,-50%)}#reticle.lock span,#reticle.lock em{background:#ff5151;border-color:#ff5151;box-shadow:0 0 8px #ff3131}#targetInfo{position:absolute;left:50%;top:calc(50% + 26px);transform:translateX(-50%);font-size:9px;font-weight:900;color:#ff7777;text-shadow:1px 1px #000}#hitMarker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:bold 36px/1 sans-serif;color:#fff;opacity:0;text-shadow:0 0 8px #ff5252}#hitMarker.show{animation:hit .18s ease}#message{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);padding:7px 11px;background:rgba(3,9,13,.9);border:1px solid rgba(108,230,255,.35);font-size:10px;opacity:0;transition:.12s;white-space:nowrap}#message.show{opacity:1}#damageFlash{position:absolute;inset:0;background:rgba(255,20,20,.23);opacity:0;transition:.08s}#scope{position:absolute;inset:0;display:none;background:radial-gradient(circle at center,transparent 0 32%,rgba(0,0,0,.12) 32.5% 36%,rgba(0,0,0,.94) 36.5%)}#scope.show{display:block}.scopeH,.scopeV{position:absolute;background:rgba(255,255,255,.42)}.scopeH{left:31%;right:31%;top:50%;height:1px}.scopeV{top:31%;bottom:31%;left:50%;width:1px}#hoverStatus{position:absolute;left:50%;bottom:54px;transform:translateX(-50%);padding:6px 10px;border:1px solid #53e6ff;background:rgba(3,16,22,.75);color:#61ebff;font-size:9px;letter-spacing:.14em;opacity:0}#hoverStatus.show{opacity:1}
.screen{position:absolute;inset:0;z-index:20;display:none;place-items:center;overflow:auto;padding:28px;background:linear-gradient(135deg,rgba(2,7,11,.92),rgba(13,6,28,.94)),url('island-art-reference.png') center/cover}.screen.active{display:grid}.introInner{width:min(820px,100%);padding:clamp(20px,4vw,42px);border:1px solid rgba(130,226,255,.26);background:rgba(3,9,15,.84);box-shadow:0 24px 90px rgba(0,0,0,.5);text-align:center}.badge{display:inline-block;padding:7px 10px;border:1px solid rgba(95,231,255,.4);color:#82efff;font-size:9px;letter-spacing:.16em}.badge.danger{color:#ff7a7a;border-color:#ff5a5a}.screen h1{margin:16px 0 0;font:900 clamp(54px,9vw,110px)/.82 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;letter-spacing:.03em}.screen h1 span{color:var(--cyan)}.screen h2{margin:14px 0;color:#ff5cb8;letter-spacing:.22em;font-size:clamp(12px,2vw,20px)}.screen p{color:#c0d0d8;line-height:1.55;font-size:12px}.featureGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:18px 0}.featureGrid div{padding:12px;text-align:left;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.035)}.featureGrid b{display:block;color:#fff;font-size:11px}.featureGrid span{display:block;color:#93aab4;font-size:9px;margin-top:4px}.screen button{padding:13px 28px;border:1px solid #80eaff;background:linear-gradient(135deg,#122938,#5a1a59);color:#fff;font-weight:900;letter-spacing:.12em}.screen a{display:block;margin-top:14px;color:#b8ced8;text-decoration:none;font-size:10px}.controls{font-size:9px!important;color:#91a8b2!important}
#hubBtn{position:absolute;left:12px;bottom:12px;z-index:12;padding:6px 9px;border:1px solid rgba(255,255,255,.2);background:rgba(3,8,12,.72);color:#dce8ee;text-decoration:none;font-size:9px}
#touchControls{display:none;position:absolute;inset:0;z-index:11;pointer-events:none}#moveZone{position:absolute;left:0;bottom:0;width:48%;height:46%;pointer-events:auto}#lookZone{position:absolute;right:0;top:18%;width:58%;height:62%;pointer-events:auto}#stick{position:absolute;left:24px;bottom:28px;width:116px;height:116px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.2)}#stick i{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px;border-radius:50%;background:rgba(86,226,255,.28);border:1px solid #62e9ff}.touchButtons{position:absolute;right:18px;bottom:22px;display:grid;grid-template-columns:repeat(2,74px);gap:9px;pointer-events:auto}.touchButtons button{min-height:52px;border:1px solid rgba(255,255,255,.28);background:rgba(4,13,20,.8);color:#fff;font-weight:900;font-size:9px}.touchButtons #fireBtn{grid-column:2;grid-row:1/3;min-height:113px;border-color:#ff5a66;background:rgba(102,18,31,.72)}
@keyframes hit{0%{opacity:1;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
@media(max-width:900px),(pointer:coarse){#touchControls{display:block}.rightHud{top:auto;bottom:150px;right:10px;font-size:9px}.leftHud{left:8px;top:8px;transform:scale(.88);transform-origin:top left}.featureGrid{grid-template-columns:1fr}.introInner{padding:18px}.screen h1{font-size:56px}#hubBtn{top:8px;bottom:auto;left:auto;right:8px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

#cameraStatus{position:absolute;right:18px;bottom:18px;padding:6px 10px;border:1px solid rgba(116,226,255,.45);background:rgba(3,12,18,.78);color:#aeefff;font-size:9px;letter-spacing:.12em;opacity:.9}#cameraStatus.scopeForced{color:#ffe9a6;border-color:rgba(255,224,145,.55)}

/* V4 mobile stability + clear touch combat */
@media(max-width:900px),(pointer:coarse){
  .hudPanel{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(4,11,17,.88)}
  #lookZone{z-index:1;top:14%;height:58%;right:0;width:58%}
  .touchButtons{z-index:4;grid-template-columns:repeat(2,82px);right:12px;bottom:16px;gap:8px}
  .touchButtons button{position:relative;z-index:5;touch-action:none;user-select:none;-webkit-user-select:none;min-height:50px;background:rgba(3,12,19,.94)}
  .touchButtons #fireBtn{grid-column:2;grid-row:1/4;min-height:166px;font-size:13px;border:2px solid #ff5968;background:linear-gradient(180deg,rgba(145,18,42,.96),rgba(63,7,23,.96));box-shadow:inset 0 0 18px rgba(255,77,103,.18)}
  .touchButtons #boardBtn{color:#77f5ff;border-color:#42deef}
  .touchButtons #actionBtn{color:#ffe08a;border-color:#dcb85a}
  #cameraStatus{bottom:8px;right:8px;font-size:8px}
  #hoverStatus{bottom:8px;left:50%;font-size:8px}
  #message{bottom:26%;font-size:9px;max-width:70%;white-space:normal;text-align:center}
}

/* V5 paradise + precision aim cleanup */
#reticle{
  width:10px;height:10px;
}
#reticle span{display:none}
#reticle em{
  width:5px;height:5px;border-radius:50%;
  background:#eafcff;border:0;
  box-shadow:0 0 5px rgba(76,236,255,.75);
}
#reticle.zoomed{width:34px;height:34px}
#reticle.zoomed span{display:block;background:#e8f8ff}
#reticle.zoomed span:first-child{width:34px;height:1px;left:0;top:16px}
#reticle.zoomed span:nth-child(2){height:34px;width:1px;left:16px;top:0}
#reticle.zoomed em{width:6px;height:6px;background:transparent;border:1px solid #fff}
#reticle.zoomed.lock span,#reticle.zoomed.lock em{background:#ff5151;border-color:#ff5151;box-shadow:0 0 9px #ff3131}
#targetInfo{opacity:0}
#reticle.zoomed + #targetInfo{opacity:1}
#scope{
  background:radial-gradient(circle at center,transparent 0 30%,rgba(29,239,255,.05) 30.2% 31%,rgba(0,0,0,.86) 31.5% 33%,rgba(0,0,0,.93) 33.5%);
}
#scope::before{
  content:"";position:absolute;left:50%;top:50%;width:min(62vw,62vh);height:min(62vw,62vh);transform:translate(-50%,-50%);border:1px solid rgba(100,238,255,.55);border-radius:50%;box-shadow:0 0 18px rgba(44,225,255,.18),inset 0 0 18px rgba(255,74,204,.08)
}
.touchButtons{grid-template-columns:repeat(2,82px)}
.touchButtons #aimBtn{color:#8af7ff;border-color:#4ee7ff;background:rgba(10,49,67,.9)}
.touchButtons #fireBtn{grid-column:2;grid-row:1/4}


/* V7 twin-stick mobile layout */
@media(max-width:900px),(pointer:coarse){
  #moveZone{left:0;bottom:58px;width:42%;height:42%;z-index:3}
  #lookZone{right:0;left:auto;bottom:58px;top:auto;width:42%;height:42%;z-index:3;pointer-events:auto}
  #stick,#lookStick{position:absolute;bottom:14px;width:122px;height:122px;border-radius:50%;border:2px solid rgba(155,241,255,.46);background:radial-gradient(circle,rgba(42,196,221,.12),rgba(2,8,14,.36));box-shadow:0 0 18px rgba(41,221,255,.10);touch-action:none}
  #stick{left:18px}
  #lookStick{right:18px}
  #stick::before,#lookStick::before{content:"";position:absolute;left:50%;top:10px;bottom:10px;width:1px;background:rgba(255,255,255,.09)}
  #stick::after,#lookStick::after{content:"";position:absolute;top:50%;left:10px;right:10px;height:1px;background:rgba(255,255,255,.09)}
  #stick i,#lookStick i{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px;border-radius:50%;background:rgba(89,235,255,.28);border:1px solid #72efff;box-shadow:0 0 10px rgba(92,238,255,.18)}
  #lookStick span{position:absolute;left:50%;top:50%;transform:translate(-50%,40px);font-size:7px;letter-spacing:.12em;color:rgba(216,249,255,.7);pointer-events:none}
  .touchButtons{left:50%;right:auto;bottom:max(6px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;grid-template-columns:none;gap:5px;width:auto;max-width:60vw;z-index:6;pointer-events:auto}
  .touchButtons button{min-height:42px!important;height:42px;min-width:54px;padding:4px 7px;font-size:7px!important;border-radius:5px;white-space:nowrap}
  .touchButtons #fireBtn{grid-column:auto;grid-row:auto;min-height:42px!important;height:42px;min-width:68px;font-size:9px!important;border-width:1px}
  #cameraStatus{bottom:54px;right:8px}
  #hoverStatus{bottom:54px}
  #message{bottom:22%}
}
@media(max-width:620px),(pointer:coarse){
  #stick,#lookStick{width:106px;height:106px}
  #stick{left:10px}#lookStick{right:10px}
  #stick i,#lookStick i{width:44px;height:44px;margin:-22px}
  .touchButtons{max-width:66vw;gap:3px}
  .touchButtons button{min-width:44px;padding:3px 4px;font-size:6.5px!important}
  .touchButtons #fireBtn{min-width:58px;font-size:8px!important}
}


/* V8 precision-reticle + mobile control verification */
#reticle{display:none!important}
#reticle.zoomed{display:block!important}
#targetInfo{display:none!important}
#reticle.zoomed + #targetInfo{display:block!important}
@media(max-width:900px),(pointer:coarse){
  #reticle{display:none!important}
  #reticle.zoomed{display:block!important}
}

/* V10 touch + presentation tuning */
@media (pointer:coarse){
  #moveZone{left:0!important;bottom:52px!important;width:48%!important;height:58%!important;}
  #lookZone{right:0!important;left:auto!important;bottom:52px!important;width:48%!important;height:58%!important;}
  #moveZone::after{content:"DRAG TO MOVE";position:absolute;left:18px;bottom:8px;color:rgba(255,255,255,.38);font:800 8px/1 system-ui;letter-spacing:.11em;pointer-events:none}
  #lookZone::after{content:"DRAG TO LOOK";position:absolute;right:18px;bottom:8px;color:rgba(255,255,255,.38);font:800 8px/1 system-ui;letter-spacing:.11em;pointer-events:none}
}


/* V11 NATURAL TOUCH CONTROLS — dynamic move pad + swipe look */
@media(max-width:1100px),(pointer:coarse){
  #moveZone{left:0!important;top:12%!important;bottom:50px!important;width:50%!important;height:auto!important;z-index:3!important;touch-action:none}
  #lookZone{right:0!important;left:auto!important;top:12%!important;bottom:50px!important;width:50%!important;height:auto!important;z-index:3!important;touch-action:none}
  #stick{left:50%!important;top:50%!important;bottom:auto!important;width:96px!important;height:96px!important;margin:-48px 0 0 -48px!important;opacity:0;transform:scale(.82);transition:opacity .08s linear,transform .08s linear;border:1px solid rgba(117,239,255,.35)!important;background:rgba(2,12,18,.16)!important;pointer-events:none}
  #stick.active{opacity:.72;transform:scale(1)}
  #stick i{width:42px!important;height:42px!important;margin:-21px!important;background:rgba(94,235,255,.35)!important}
  #lookStick{left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;width:54px!important;height:54px!important;margin:-27px 0 0 -27px!important;opacity:0;transform:scale(.75);transition:opacity .08s linear;pointer-events:none;border:1px solid rgba(255,255,255,.18)!important;background:rgba(4,10,16,.08)!important}
  #lookStick.active{opacity:.38}
  #lookStick i{width:18px!important;height:18px!important;margin:-9px!important;transform:none!important;background:rgba(255,255,255,.25)!important;border-color:rgba(130,240,255,.45)!important}
  #lookStick span{display:none!important}
  #moveZone::after{content:"LEFT: MOVE"!important;left:14px!important;bottom:10px!important;opacity:.65}
  #lookZone::after{content:"RIGHT: SWIPE TO LOOK"!important;right:14px!important;bottom:10px!important;opacity:.65}
}

/* V12 CONSOLE CONTROLS — fixed PS-style twin sticks */
@media(max-width:1100px),(pointer:coarse){
  #moveZone{left:max(10px,env(safe-area-inset-left))!important;bottom:max(58px,env(safe-area-inset-bottom))!important;top:auto!important;width:154px!important;height:154px!important;z-index:5!important;touch-action:none!important;pointer-events:auto!important}
  #lookZone{right:max(10px,env(safe-area-inset-right))!important;left:auto!important;bottom:max(58px,env(safe-area-inset-bottom))!important;top:auto!important;width:154px!important;height:154px!important;z-index:5!important;touch-action:none!important;pointer-events:auto!important}
  #stick,#lookStick{left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;width:132px!important;height:132px!important;margin:-66px 0 0 -66px!important;opacity:1!important;transform:none!important;transition:none!important;border:2px solid rgba(190,244,255,.60)!important;background:radial-gradient(circle,rgba(79,214,235,.13) 0 42%,rgba(1,8,14,.48) 43% 100%)!important;box-shadow:0 0 18px rgba(39,213,255,.13),inset 0 0 18px rgba(255,255,255,.04)!important;pointer-events:none!important}
  #stick::before,#lookStick::before{content:"";position:absolute;left:50%;top:9px;bottom:9px;width:1px;background:rgba(255,255,255,.13)}
  #stick::after,#lookStick::after{content:"";position:absolute;top:50%;left:9px;right:9px;height:1px;background:rgba(255,255,255,.13)}
  #stick i,#lookStick i{left:50%!important;top:50%!important;width:54px!important;height:54px!important;margin:-27px!important;border-radius:50%!important;transform:translate(0,0);background:rgba(87,226,255,.34)!important;border:2px solid #7ef2ff!important;box-shadow:0 0 12px rgba(76,236,255,.24)!important}
  #lookStick span{display:block!important;position:absolute;left:50%;top:50%;transform:translate(-50%,47px)!important;font:800 7px/1 system-ui;letter-spacing:.14em;color:rgba(220,250,255,.62);pointer-events:none}
  #moveZone::after{content:"MOVE"!important;left:50%!important;bottom:2px!important;transform:translateX(-50%);font:900 7px/1 system-ui!important;letter-spacing:.16em!important;color:rgba(220,250,255,.62)!important}
  #lookZone::after{content:"LOOK"!important;right:auto!important;left:50%!important;bottom:2px!important;transform:translateX(-50%);font:900 7px/1 system-ui!important;letter-spacing:.16em!important;color:rgba(220,250,255,.62)!important}
  .touchButtons{left:50%!important;right:auto!important;bottom:max(7px,env(safe-area-inset-bottom))!important;transform:translateX(-50%)!important;display:flex!important;gap:4px!important;max-width:calc(100vw - 330px)!important;flex-wrap:nowrap!important;z-index:7!important}
  .touchButtons button{min-width:48px!important;height:42px!important;min-height:42px!important;padding:4px 6px!important;font-size:6.5px!important;border-radius:9px!important}
  .touchButtons #fireBtn{min-width:66px!important;height:42px!important;min-height:42px!important;font-size:8px!important}
  #cameraStatus{bottom:56px!important;right:166px!important}
  #hoverStatus{bottom:56px!important}
}
@media(max-width:760px),(pointer:coarse){
  #moveZone,#lookZone{width:132px!important;height:132px!important;bottom:max(54px,env(safe-area-inset-bottom))!important}
  #stick,#lookStick{width:112px!important;height:112px!important;margin:-56px 0 0 -56px!important}
  #stick i,#lookStick i{width:46px!important;height:46px!important;margin:-23px!important}
  .touchButtons{max-width:calc(100vw - 275px)!important;gap:2px!important}
  .touchButtons button{min-width:38px!important;padding:3px!important;font-size:5.8px!important}
  .touchButtons #fireBtn{min-width:50px!important;font-size:7px!important}
}