:root{
  --bg:#050607;
  --ink:#f4f0e8;
  --muted:#a4aaa5;
  --line:rgba(244,240,232,.24);
  --violet:#bc2f80;
  --violet-soft:rgba(188,47,128,.25);
  --safe:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button{font:inherit}
#game{position:fixed;inset:0;background:#030405;overflow:hidden;touch-action:none;user-select:none}
#view{position:absolute;inset:0;width:100%;height:100%;display:block;background:#060708}
#grade{pointer-events:none;position:absolute;inset:0;background:
  radial-gradient(circle at 62% 42%,rgba(121,34,82,.07),transparent 33%),
  linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.20) 66%,rgba(0,0,0,.47));
  mix-blend-mode:screen;opacity:.72}
#vignette{pointer-events:none;position:absolute;inset:-2%;box-shadow:inset 0 0 12vw 5vw rgba(0,0,0,.82)}
#scanlines{pointer-events:none;position:absolute;inset:0;opacity:.09;background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(255,255,255,.08) 3px,transparent 4px)}
.hud{position:absolute;z-index:12;pointer-events:none}
.top{top:max(14px,env(safe-area-inset-top));left:18px;right:18px;display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:start;text-shadow:0 2px 8px #000}
.top section{border-top:1px solid var(--line);padding-top:7px}
.top span,.objective small,.network small,.secrets small,.ammo small{display:block;font-size:10px;letter-spacing:.15em;color:var(--muted)}
.brand b{display:block;font-size:18px;letter-spacing:.19em}
.brand span{margin-top:4px;color:#d7d4cc;font-weight:700}
.status,.squad{text-align:right;min-width:78px}
.status b,.squad b{font-size:20px;letter-spacing:.06em}
.objective{position:absolute;z-index:12;left:18px;top:92px;padding:9px 12px;border-left:2px solid var(--violet);background:linear-gradient(90deg,rgba(5,6,7,.75),rgba(5,6,7,.07));text-shadow:0 2px 7px #000;pointer-events:none}
.objective b{display:block;font-size:13px;letter-spacing:.1em;margin-top:2px}
.objective span{display:block;margin-top:5px;color:#c8c4bd;font-size:10px;letter-spacing:.12em}
.network{position:absolute;z-index:12;right:18px;top:88px;text-align:right;pointer-events:none}
.network .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#766371;box-shadow:0 0 10px rgba(188,47,128,.25);margin-right:5px}
.network b{font-size:11px;letter-spacing:.14em}
.secrets{position:absolute;z-index:12;left:18px;bottom:58px;padding:8px 10px;background:rgba(5,6,7,.47);border-bottom:1px solid var(--line);pointer-events:none}
.secrets b{font-size:17px;letter-spacing:.08em}
.ammo{position:absolute;z-index:20;right:22px;bottom:54px;text-align:right;text-shadow:0 2px 8px #000;pointer-events:none}
.ammo>div{display:flex;justify-content:flex-end;align-items:baseline;gap:7px}
.ammo b{font-size:36px;line-height:1}
.ammo i{font-style:normal;color:#7f817d}
.ammo span{font-size:19px;color:#cbc7c0}
.ammo em{font-style:normal;font-size:9px;letter-spacing:.18em;color:#bf7e9d}
#rifleRig{
  position:absolute;z-index:16;right:-2.2vw;bottom:-8.2vh;width:min(78vw,980px);height:auto;
  pointer-events:none;transform:translate3d(0,0,0);transform-origin:0 0;
  transition:transform 145ms cubic-bezier(.18,.75,.24,1);
  will-change:transform;
}
#rifleRig.aiming{
  transform:translate3d(var(--ads-x,0px),var(--ads-y,0px),0) scale(var(--ads-scale,1));
}
#rifleViewmodel{
  position:relative;display:block;width:100%;height:auto;pointer-events:none;
  filter:drop-shadow(0 9px 24px rgba(0,0,0,.75));
  transform-origin:74% 86%;will-change:transform;
}
#rifleViewmodel.firing{animation:rifleKick 95ms ease-out}
#rifleViewmodel.reloading{animation:rifleReload .72s ease-in-out}
@keyframes rifleKick{0%{transform:translate3d(0,0,0) rotate(0)}36%{transform:translate3d(-1.1vw,1.2vh,0) rotate(-1.4deg)}100%{transform:translate3d(0,0,0) rotate(0)}}
@keyframes rifleReload{0%{transform:translate3d(0,0,0) rotate(0)}45%{transform:translate3d(4vw,9vh,0) rotate(8deg)}100%{transform:translate3d(0,0,0) rotate(0)}}
#game.ads-active #crosshair{opacity:.08}
#crosshair{position:absolute;z-index:14;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);pointer-events:none;opacity:.82}
#crosshair i{position:absolute;background:rgba(245,239,230,.83);box-shadow:0 0 4px #000}
#crosshair i:nth-child(1){left:12px;top:0;width:1px;height:8px}
#crosshair i:nth-child(2){left:12px;bottom:0;width:1px;height:8px}
#crosshair i:nth-child(3){left:0;top:12px;width:8px;height:1px}
#crosshair i:nth-child(4){right:0;top:12px;width:8px;height:1px}
#muzzleFlash{position:absolute;z-index:17;right:34vw;bottom:44vh;width:130px;height:90px;border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(ellipse,rgba(255,238,176,.88),rgba(195,53,131,.52) 31%,rgba(130,28,91,.08) 66%,transparent 70%);filter:blur(1px);transform:rotate(-9deg)}
#muzzleFlash.on{animation:flash 68ms ease-out}
@keyframes flash{0%{opacity:1;transform:scale(.6) rotate(-9deg)}100%{opacity:0;transform:scale(1.35) rotate(-9deg)}}
.prompt{position:absolute;z-index:30;left:50%;top:61%;transform:translate(-50%,-50%);min-width:170px;padding:10px 13px;text-align:center;background:rgba(5,6,7,.82);border:1px solid rgba(225,214,214,.25);box-shadow:0 0 22px rgba(0,0,0,.5);pointer-events:none}
.prompt.hidden{display:none}
.prompt small{display:block;color:#b67798;font-size:9px;letter-spacing:.18em}
.prompt b{display:block;font-size:14px;letter-spacing:.12em;margin:2px 0}
.prompt span{font-size:9px;color:#aaa59f;letter-spacing:.1em}
#desktopHint{position:absolute;z-index:10;left:50%;bottom:17px;transform:translateX(-50%);font-size:9px;letter-spacing:.08em;color:rgba(230,226,218,.5);white-space:nowrap;pointer-events:none}
footer{position:absolute;z-index:10;left:18px;right:18px;bottom:14px;display:flex;justify-content:space-between;color:rgba(215,211,204,.38);font-size:8px;letter-spacing:.08em;pointer-events:none}
#movePad,#lookZone,#fireButton,#aimButton,#weaponButton,#useButton{display:none}
.screen{position:absolute;z-index:60;inset:0;display:flex;align-items:center;justify-content:center;padding:28px;background:radial-gradient(circle at 50% 45%,rgba(103,25,68,.13),transparent 44%),rgba(2,3,4,.83);backdrop-filter:blur(5px)}
.screen.hidden{display:none}
.intro-card{width:min(620px,100%);padding:26px;border:1px solid rgba(240,233,224,.19);background:rgba(7,8,9,.88);box-shadow:0 24px 80px #000}
.intro-card>small{font-size:9px;letter-spacing:.17em;color:#a9a49e}
.intro-card h1{font-size:clamp(28px,7vw,52px);line-height:.94;letter-spacing:.06em;margin:10px 0 14px}
.intro-card p{max-width:520px;color:#c2beb6;line-height:1.55;font-size:13px}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:19px 0}
.intro-grid span{padding:10px;background:rgba(255,255,255,.035);font-size:10px;color:#c7c3bd;letter-spacing:.06em}
.intro-grid b{display:block;color:#9d627f;font-size:8px;letter-spacing:.15em;margin-bottom:3px}
#enterButton{width:100%;border:1px solid rgba(236,229,220,.36);background:#ebe5dc;color:#151313;font-weight:900;letter-spacing:.14em;padding:14px;cursor:pointer}
.intro-card em{display:block;margin-top:13px;font-style:normal;text-align:center;color:#8c8883;font-size:9px;letter-spacing:.15em}

@media (max-width:760px),(pointer:coarse){
  .top{left:12px;right:12px;gap:10px}
  .brand b{font-size:14px}.brand span{font-size:8px}
  .status,.squad{min-width:58px}.status b,.squad b{font-size:16px}
  .objective{left:12px;top:75px}.network{right:12px;top:73px}
  #desktopHint{display:none}
  #rifleRig{right:-20vw;bottom:-5.8vh;width:min(119vw,780px)}
  .ammo{right:12px;bottom:max(106px,calc(92px + var(--safe)))}
  .ammo small{font-size:8px}.ammo b{font-size:31px}.ammo span{font-size:16px}
  .secrets{bottom:max(102px,calc(88px + var(--safe)));left:12px}
  footer{bottom:max(8px,var(--safe));left:10px;right:10px}
  #movePad{display:block;position:absolute;z-index:35;left:17px;bottom:max(20px,calc(12px + var(--safe)));width:108px;height:108px;border-radius:50%;border:1px solid rgba(245,238,229,.20);background:rgba(5,6,7,.22);touch-action:none}
  #moveStick{position:absolute;left:50%;top:50%;width:43px;height:43px;margin:-21.5px;border-radius:50%;background:rgba(231,223,214,.17);border:1px solid rgba(245,238,229,.34);transform:translate(0,0)}
  #lookZone{display:block;position:absolute;z-index:13;left:43%;right:0;top:115px;bottom:115px;touch-action:none}
  #fireButton,#aimButton,#useButton{display:block;position:absolute;z-index:36;border-radius:50%;color:#eee7df;font-weight:900;letter-spacing:.08em;background:rgba(14,10,13,.46);border:1px solid rgba(237,224,231,.27);touch-action:none}
  #fireButton{right:18px;bottom:max(21px,calc(13px + var(--safe)));width:72px;height:72px}
  #aimButton{right:100px;bottom:max(28px,calc(20px + var(--safe)));width:58px;height:58px;font-size:10px;color:#9be9f6}
  #useButton{right:166px;bottom:max(35px,calc(27px + var(--safe)));width:50px;height:50px;font-size:9px;color:#d18aaa}
  #muzzleFlash{right:28vw;bottom:35vh}
  .intro-card{padding:20px}.intro-grid{grid-template-columns:1fr}
}


/* LRMP-0.1.2 COMBAT FOUNDATION */
.ammo strong{
  display:block;margin-top:4px;font-size:8px;letter-spacing:.15em;color:#a88999;font-weight:800
}
#adsDot{
  position:absolute;z-index:18;left:50%;top:50%;width:4px;height:4px;border-radius:50%;
  transform:translate(-50%,-50%);background:rgba(245,55,181,.92);
  box-shadow:0 0 8px rgba(245,55,181,.75);pointer-events:none
}
#racketRig{
  position:absolute;z-index:16;right:-2vw;bottom:-4vh;width:min(55vw,660px);height:auto;
  pointer-events:none;transform-origin:74% 92%;will-change:transform
}
#racketViewmodel{
  display:block;width:100%;height:auto;filter:drop-shadow(0 9px 24px rgba(0,0,0,.75));
  transform-origin:76% 92%
}
#racketViewmodel.striking{animation:racketStrikeMulti 360ms cubic-bezier(.16,.72,.22,1)}
#racketRig.equipped-pop{animation:racketEquipMulti 280ms ease-out}
@keyframes racketStrikeMulti{
  0%{transform:translate3d(0,0,0) rotate(0)}
  34%{transform:translate3d(-10vw,-3vh,0) rotate(-31deg)}
  68%{transform:translate3d(2vw,1vh,0) rotate(7deg)}
  100%{transform:translate3d(0,0,0) rotate(0)}
}
@keyframes racketEquipMulti{
  0%{transform:translate3d(7vw,8vh,0) rotate(14deg);opacity:.35}
  100%{transform:translate3d(0,0,0) rotate(0);opacity:1}
}
#game[data-weapon="racket"] .ammo div{display:none}
#game[data-weapon="racket"] .ammo em{display:none}
#game[data-weapon="racket"] .ammo strong{color:#d8ccd3}
#game[data-weapon="racket"] #aimButton{opacity:.35}
@media (max-width:760px),(pointer:coarse){
  #racketRig{right:-18vw;bottom:-1vh;width:min(87vw,620px)}
  #weaponButton{
    display:block;position:absolute;z-index:36;right:160px;
    bottom:max(82px,calc(74px + var(--safe)));width:54px;height:34px;
    border-radius:17px;color:#e6d9e2;font-size:8px;font-weight:900;letter-spacing:.08em;
    background:rgba(14,10,13,.46);border:1px solid rgba(237,224,231,.27);touch-action:none
  }
}


/* LRMP-0.1.2.1 SIGHT TRUTH HOTFIX1 */
#rifleRig{
  transition:transform 110ms cubic-bezier(.18,.75,.24,1);
}
#game.ads-active #rifleViewmodel.firing{
  animation:rifleKickAdsTruth 95ms ease-out;
}
@keyframes rifleKickAdsTruth{
  0%{transform:translate3d(0,0,0) rotate(0)}
  34%{transform:translate3d(0,.32vh,0) rotate(0)}
  100%{transform:translate3d(0,0,0) rotate(0)}
}
#muzzleFlash{
  left:var(--muzzle-x,50%);
  top:var(--muzzle-y,50%);
  right:auto;
  bottom:auto;
  transform:translate(-50%,-50%) rotate(-9deg);
}
@keyframes flash{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.6) rotate(-9deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.35) rotate(-9deg)}
}
#game.ads-active #crosshair{opacity:.16}
#game.ads-active #adsDot{
  width:3px;height:3px;background:rgba(255,255,255,.92);
  box-shadow:0 0 5px rgba(245,55,181,.95);
}


/* LRMP-0.1.2.2 VISIBLE IMPACT HOTFIX1
   Impact feedback is tied to the authoritative camera-center shot ray.
   It is intentionally independent from the muzzle flash and weapon artwork. */
#impactFeedback{
  position:absolute;
  z-index:19;
  left:50%;
  top:50%;
  width:42px;
  height:42px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:0;
}
#impactFeedback.on{
  animation:impactFade 420ms ease-out forwards;
}
#impactFeedback .impact-core{
  position:absolute;
  left:50%;top:50%;
  width:6px;height:6px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(255,247,228,.98);
  box-shadow:
    0 0 5px rgba(255,244,220,.95),
    0 0 11px rgba(245,55,181,.72);
}
#impactFeedback .impact-ring{
  position:absolute;
  left:50%;top:50%;
  width:10px;height:10px;
  border:1px solid rgba(255,238,216,.85);
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:impactRing 420ms ease-out forwards;
}
#impactFeedback .impact-spark{
  position:absolute;
  left:50%;top:50%;
  width:12px;height:1px;
  transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(255,245,224,.95),rgba(245,55,181,.1));
}
#impactFeedback .s1{transform:rotate(18deg)}
#impactFeedback .s2{transform:rotate(102deg)}
#impactFeedback .s3{transform:rotate(198deg)}
#impactFeedback .s4{transform:rotate(282deg)}

@keyframes impactFade{
  0%{opacity:0;filter:blur(0)}
  8%{opacity:1}
  42%{opacity:.86}
  100%{opacity:0;filter:blur(.4px)}
}
@keyframes impactRing{
  0%{width:8px;height:8px;opacity:1}
  100%{width:34px;height:34px;opacity:0}
}

#game.ads-active #impactFeedback{
  left:50%;
  top:50%;
}


/* ============================================================
   LRMP-0.1.3 — INDEPENDENT INPUT / CONTROLS BLOCK
   ============================================================ */
.intro-card{
  width:min(760px,100%);
  max-height:min(92vh,920px);
  overflow:auto;
  scrollbar-width:thin;
}
.intro-actions{
  display:grid;
  grid-template-columns:minmax(150px,.42fr) 1fr;
  gap:9px;
}
.secondary-intro{
  border:1px solid rgba(236,229,220,.22);
  background:rgba(255,255,255,.035);
  color:#d7cfd3;
  font-weight:900;
  letter-spacing:.12em;
  padding:14px 12px;
  cursor:pointer;
}
.secondary-intro:hover{
  border-color:rgba(239,77,173,.55);
  background:rgba(239,77,173,.06);
}
.controls-panel{
  margin-top:14px;
  padding:15px;
  border:1px solid rgba(235,228,219,.17);
  background:rgba(3,4,5,.72);
  box-shadow:inset 0 0 38px rgba(0,0,0,.28);
}
.controls-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.controls-head small{
  display:block;
  font-size:8px;
  letter-spacing:.18em;
  color:#95667e;
}
.controls-head h2{
  margin:2px 0 0;
  font-size:20px;
  letter-spacing:.09em;
}
.controls-head button,
.controls-foot button,
.binding-conflict button{
  border:1px solid rgba(235,228,219,.22);
  background:rgba(255,255,255,.035);
  color:#d8d0d4;
  padding:8px 10px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.11em;
  cursor:pointer;
}
.mouse-settings{
  display:grid;
  grid-template-columns:1fr 180px;
  gap:12px;
  margin:13px 0 8px;
}
.mouse-settings label,
.invert-setting{
  min-height:52px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.075);
  background:rgba(255,255,255,.025);
}
.mouse-settings label{
  display:grid;
  grid-template-columns:145px 1fr 46px;
  align-items:center;
  gap:9px;
}
.mouse-settings span{
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
  color:#b7afb3;
}
.mouse-settings input[type="range"]{
  width:100%;
  accent-color:#d83f91;
}
.mouse-settings b{
  text-align:right;
  font-size:9px;
  letter-spacing:.08em;
  color:#e3dce0;
}
.invert-setting{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#invertYButton{
  min-width:52px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  color:#c7bec3;
  padding:8px;
  font-size:8px;
  font-weight:900;
  cursor:pointer;
}
#invertYButton[data-on="1"]{
  color:#fff0f8;
  border-color:rgba(236,61,157,.55);
  box-shadow:inset 0 0 14px rgba(236,61,157,.08);
}
.capture-hint{
  margin:9px 0;
  padding:9px 10px;
  border:1px solid rgba(235,72,162,.25);
  background:rgba(235,72,162,.055);
  color:#e3c5d5;
  font-size:8px;
  letter-spacing:.10em;
  text-align:center;
}
.binding-conflict{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:9px 0;
  padding:10px;
  border:1px solid rgba(234,161,82,.32);
  background:rgba(234,161,82,.055);
}
.binding-conflict span{
  color:#e3c9ae;
  font-size:8px;
  line-height:1.4;
  letter-spacing:.08em;
}
.binding-conflict>div{
  display:flex;
  gap:6px;
}
.controls-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:11px;
}
.control-category{
  border:1px solid rgba(255,255,255,.075);
  background:rgba(255,255,255,.018);
  padding:9px;
}
.control-category h3{
  margin:0 0 7px;
  color:#aa6388;
  font-size:8px;
  letter-spacing:.18em;
}
.control-bind-row{
  display:grid;
  grid-template-columns:minmax(96px,1fr) minmax(190px,1.35fr);
  align-items:center;
  gap:8px;
  min-height:35px;
  border-top:1px solid rgba(255,255,255,.045);
}
.control-bind-row:first-of-type{
  border-top:0;
}
.control-action-name{
  font-size:8px;
  color:#c3bbc0;
  letter-spacing:.055em;
}
.control-bind-slots{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}
.bind-slot{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(7,8,9,.75);
  color:#e4dce0;
  padding:7px 5px;
  font-size:8px;
  font-weight:800;
  letter-spacing:.045em;
  cursor:pointer;
}
.bind-slot:hover{
  border-color:rgba(231,71,158,.42);
}
.bind-slot.unbound{
  color:#716b6e;
}
.bind-slot.capturing{
  color:#fff;
  border-color:rgba(238,65,160,.82);
  box-shadow:0 0 16px rgba(238,65,160,.14);
}
.controls-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}
.controls-foot small{
  color:#746f71;
  font-size:7px;
  letter-spacing:.11em;
}
#controlsReset{
  color:#bd9aa9;
}

@media (max-width:760px),(pointer:coarse){
  .intro-actions{
    grid-template-columns:1fr;
  }
  #controlsButton,
  #controlsPanel{
    display:none!important;
  }
}

@media (max-width:680px){
  .controls-list{grid-template-columns:1fr}
  .mouse-settings{grid-template-columns:1fr}
  .mouse-settings label{grid-template-columns:120px 1fr 42px}
}


/* LRMP-0.1.4 WORLD IMPACT BLOCK
   Old screen-space shot marker is retired. Real impacts are drawn into the
   world canvas and projected from stored wall-space coordinates. */
#impactFeedback{display:none!important}

/* LRMP-0.1.5 keyboard-layout badge */
#keyboardLayoutValue{
  margin-left:auto;
  color:#eadde5;
  font-size:8px;
  letter-spacing:.12em;
}
