:root {
  color-scheme: dark;
  --cyan: #55f1ff;
  --red: #ff3048;
  --aim-x: 0px;
  --aim-y: 0px;
  --camera-x: 0px;
  --camera-y: 0px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #020305; }
body { color: #eefcff; font-family: Inter, "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif; }
button { font: inherit; }
#app, #game-frame, #viewport { width: 100%; height: 100%; }

#viewport {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #020509;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}

#ray-view { position:absolute; z-index:1; inset:0; width:100%; height:100%; display:block; }
body.ray-mode #corridor,body.ray-mode #world-haze,body.ray-mode #enemy-layer,body.ray-mode #weapon,body.ray-mode #muzzle-flash,body.ray-mode #hit-spark,body.ray-mode #enemy-shot{display:none}

#corridor {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  transform: translate3d(calc(var(--camera-x) * -0.28), calc(var(--camera-y) * -0.14), 0) scale(1.035);
  transition: filter 180ms ease;
  will-change: transform;
}

#world-haze {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 43%, rgba(70, 235, 255, .09), transparent 28%),
    radial-gradient(circle at 18% 53%, rgba(255, 36, 58, .08), transparent 34%),
    linear-gradient(to bottom, transparent 58%, rgba(0, 0, 0, .27));
  mix-blend-mode: screen;
  pointer-events: none;
}

#mini-map {
  position:absolute; z-index:48; top:88px; left:max(20px,env(safe-area-inset-left));
  width:180px; height:180px; border:1px solid rgba(74,239,255,.58);
  background:rgba(0,8,13,.82); box-shadow:0 10px 30px rgba(0,0,0,.42),inset 0 0 22px rgba(42,229,255,.08);
  image-rendering:pixelated; pointer-events:none;
}

.enemy {
  --enemy-x: 50%;
  --enemy-y: 47%;
  --enemy-scale: .55;
  position: absolute;
  left: var(--enemy-x);
  top: var(--enemy-y);
  width: min(31vw, 47vh);
  aspect-ratio: 1;
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--camera-x) * -.55), calc(var(--camera-y) * -.22), 0)
    scale(var(--enemy-scale));
  transform-origin: center bottom;
  filter: drop-shadow(0 34px 32px rgba(0, 0, 0, .72)) drop-shadow(0 0 15px rgba(255, 39, 58, .15));
  will-change: transform, filter, opacity;
}

.enemy img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.enemy-health {
  position: absolute;
  left: 25%; right: 25%; top: 7%; height: 7px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.7);
  box-shadow: 0 0 9px rgba(255, 32, 56, .45);
}
.enemy-health i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#ff263f,#ff8048); transition: width 150ms ease; }
.enemy.hit { filter: brightness(1.95) saturate(.15) drop-shadow(0 0 28px rgba(255,245,200,.96)); }
.enemy.dead { animation: enemy-death 920ms cubic-bezier(.3,.08,.24,1) forwards; pointer-events: none; }

@keyframes enemy-death {
  0% { opacity:1; transform:translate(-50%,-50%) translate3d(calc(var(--camera-x)*-.55),calc(var(--camera-y)*-.22),0) scale(var(--enemy-scale)); filter:brightness(2.3) saturate(.1); }
  45% { opacity:1; transform:translate(-50%,-38%) translate3d(calc(var(--camera-x)*-.55),calc(var(--camera-y)*-.22),0) scale(calc(var(--enemy-scale)*1.04)) rotate(7deg); }
  100% { opacity:0; transform:translate(-50%,8%) translate3d(calc(var(--camera-x)*-.55),calc(var(--camera-y)*-.22),0) scale(calc(var(--enemy-scale)*.84)) rotate(24deg); filter:blur(7px) brightness(1.4); }
}

#weapon {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: -5.5%;
  width: min(86vw, 137vh);
  height: auto;
  transform: translateX(-50%) translate3d(calc(var(--aim-x)*-.1),calc(var(--aim-y)*-.08),0);
  transform-origin: 50% 88%;
  pointer-events: none;
  filter: drop-shadow(0 -10px 28px rgba(0,0,0,.76));
  will-change: transform;
}
#weapon.firing { animation: recoil 150ms cubic-bezier(.16,.72,.24,1); }
#weapon.reloading { animation: reload 1.15s cubic-bezier(.33,0,.2,1); }
@keyframes recoil { 0%{transform:translateX(-50%) translateY(0) scale(1)} 32%{transform:translateX(-50%) translateY(28px) scale(1.035) rotate(.5deg)} 100%{transform:translateX(-50%) translateY(0) scale(1)} }
@keyframes reload { 0%,100%{transform:translateX(-50%) rotate(0) translateY(0)} 38%{transform:translateX(-50%) rotate(-13deg) translateY(66px)} 72%{transform:translateX(-50%) rotate(5deg) translateY(30px)} }

#reticle {
  position: absolute;
  z-index: 24;
  left: 50%; top: 44%;
  width: clamp(58px,7vw,112px);
  transform: translate(-50%,-50%) translate3d(var(--aim-x),var(--aim-y),0);
  pointer-events: none;
  opacity: .87;
}

#muzzle-flash, #hit-spark, #enemy-shot {
  position: absolute;
  z-index: 25;
  width: clamp(170px,29vw,420px);
  opacity: 0;
  transform: translate(-50%,-50%) scale(.3);
  pointer-events: none;
}
#muzzle-flash { left: calc(50% + var(--aim-x)); top: calc(31% + var(--aim-y)); }
#hit-spark { z-index:18; }
#enemy-shot { z-index:17; }
#muzzle-flash.active, #enemy-shot.active { animation: flash 110ms ease-out; }
#hit-spark.active { animation: hit-flash 200ms ease-out; }
@keyframes flash { 0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-8deg)} 25%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(7deg)} 100%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(14deg)} }
@keyframes hit-flash { 0%{opacity:0;transform:translate(-50%,-50%) scale(.2)} 38%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)} }

#damage-vignette {
  position:absolute; z-index:35; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(circle,transparent 42%,rgba(183,0,15,.34) 82%,rgba(255,0,28,.78));
}
#damage-vignette.active { animation:damage 420ms ease-out; }
@keyframes damage { 0%{opacity:0} 22%{opacity:1} 100%{opacity:0} }

#scanlines {
  position:absolute; z-index:36; inset:0; pointer-events:none; opacity:.13;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.055) 0,rgba(255,255,255,.055) 1px,transparent 1px,transparent 5px);
  mix-blend-mode:overlay;
}

#top-hud, #bottom-hud { position:absolute; z-index:40; display:flex; align-items:center; gap:14px; pointer-events:none; }
#top-hud { top:max(18px,env(safe-area-inset-top)); left:max(20px,env(safe-area-inset-left)); right:max(20px,env(safe-area-inset-right)); justify-content:space-between; }
#bottom-hud { left:max(18px,env(safe-area-inset-left)); right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); justify-content:space-between; }

.mission-block, .status-chip, .meter-block, .score-block, .ammo-block {
  border:1px solid rgba(78,237,255,.44);
  background:linear-gradient(135deg,rgba(6,18,25,.88),rgba(2,6,10,.58));
  box-shadow:inset 0 0 20px rgba(40,211,235,.05),0 10px 30px rgba(0,0,0,.28);
  backdrop-filter:blur(8px);
}
.mission-block { display:flex; flex-direction:column; min-width:min(420px,56vw); padding:10px 16px 12px; clip-path:polygon(0 0,95% 0,100% 32%,100% 100%,0 100%); }
.tag, .status-chip, #bottom-hud span { color:var(--cyan); font-size:clamp(10px,1.1vw,14px); letter-spacing:.16em; }
.mission-block strong { margin-top:4px; font-size:clamp(14px,1.8vw,22px); }
.status-chip { padding:12px 16px; font-weight:800; }
.status-chip .dot { display:inline-block; width:9px; height:9px; margin-right:7px; border-radius:50%; background:var(--red); box-shadow:0 0 12px var(--red); animation:pulse 1.1s infinite; }
@keyframes pulse { 50%{opacity:.35} }

.meter-block, .score-block, .ammo-block { min-height:68px; padding:10px 15px; }
.meter-block { display:grid; grid-template-columns:auto minmax(120px,18vw) 42px; align-items:center; gap:10px; }
.meter { height:12px; overflow:hidden; border:1px solid rgba(255,255,255,.24); background:rgba(0,0,0,.62); }
.meter i { display:block; width:100%; height:100%; background:linear-gradient(90deg,#2ef1ff,#17a7c5); box-shadow:0 0 15px #2ef1ff; transition:width 220ms ease,background 220ms ease; }
.meter i.warning { background:linear-gradient(90deg,#ff263f,#ff7a49); box-shadow:0 0 15px #ff263f; }
.score-block, .ammo-block { display:flex; flex-direction:column; justify-content:center; }
.score-block b, .ammo-block b { font-variant-numeric:tabular-nums; font-size:clamp(20px,3.2vw,40px); line-height:1; }
.score-block .credits { margin-top:5px; color:#ffd75d; font-size:13px; font-weight:800; letter-spacing:.1em; }
.score-block .credits i { font-style:normal; }
.score-block .credits b { font-size:inherit; }
.ammo-block b i { font-style:normal; color:#efffff; }
.ammo-block b small { margin-left:7px; color:#7f9da7; font-size:.45em; }

.stage-banner {
  position:absolute; z-index:45; left:50%; top:30%; display:flex; flex-direction:column; align-items:center;
  transform:translate(-50%,-50%); text-align:center; text-shadow:0 4px 20px #000; pointer-events:none;
  animation:stage-banner 4.2s forwards;
}
.stage-banner span { color:var(--cyan); font-size:clamp(15px,2vw,25px); letter-spacing:.38em; }
.stage-banner strong { font-size:clamp(36px,7vw,92px); letter-spacing:.06em; }
.stage-banner small { color:rgba(232,253,255,.72); font-size:clamp(11px,1.5vw,18px); letter-spacing:.28em; }
@keyframes stage-banner { 0%,11%{opacity:0;transform:translate(-50%,-43%) scale(.93)} 20%,62%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-57%) scale(1.04)} }

#message-log {
  position:absolute; z-index:42; left:50%; bottom:116px; max-width:min(700px,82vw); padding:9px 16px;
  transform:translateX(-50%); border-left:3px solid var(--cyan); background:rgba(0,8,12,.67);
  color:rgba(233,253,255,.9); font-size:clamp(12px,1.35vw,17px); pointer-events:none; transition:opacity 180ms ease;
}
#fullscreen-button { position:absolute; z-index:50; top:88px; right:max(20px,env(safe-area-inset-right)); width:42px; height:42px; border:1px solid rgba(79,239,255,.5); background:rgba(2,10,15,.72); color:#eaffff; cursor:pointer; }
.brand { position:absolute; z-index:41; right:24px; bottom:93px; color:rgba(217,251,255,.72); font-size:12px; letter-spacing:.18em; pointer-events:none; }

.overlay {
  position:fixed; z-index:100; inset:0; display:none; place-items:center; padding:22px;
  background:linear-gradient(rgba(0,6,10,.72),rgba(0,6,10,.9)),url("../assets/webp/concept-scene.webp") center/cover;
}
.overlay.visible { display:grid; }
.start-card { width:min(720px,94vw); padding:clamp(24px,5vw,52px); border:1px solid rgba(75,238,255,.48); background:rgba(3,11,16,.88); box-shadow:0 30px 100px rgba(0,0,0,.64),inset 0 0 50px rgba(44,221,244,.05); backdrop-filter:blur(15px); }
.start-card h1 { margin:8px 0 0; font-size:clamp(42px,8vw,88px); line-height:.92; }
.subtitle { margin:13px 0 0; color:#ff6575; font-weight:800; letter-spacing:.08em; }
.description { line-height:1.75; color:rgba(235,253,255,.82); }
.controls-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:22px 0; }
.controls-grid span { padding:9px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.035); font-size:13px; }
.controls-grid b { color:var(--cyan); }
#start-button { width:100%; border:0; padding:16px; background:linear-gradient(90deg,#10b8cf,#36efff); color:#001014; font-weight:900; letter-spacing:.18em; cursor:pointer; }
#mobile-controls { display:none; }
body.stage-clear #corridor { filter:saturate(1.3) brightness(1.16); }
body.stage-clear #objective { color:#8effb0; }

@media (max-width:760px), (pointer:coarse) {
  #mini-map { top:78px; left:12px; width:112px; height:112px; }
  #weapon { width:112vw; bottom:-1%; }
  #reticle { top:42%; }
  #top-hud { top:12px; left:12px; right:12px; }
  .mission-block { min-width:0; max-width:75vw; }
  .status-chip { padding:9px 10px; font-size:10px; }
  #bottom-hud { bottom:82px; left:10px; right:10px; }
  .meter-block, .score-block, .ammo-block { min-height:53px; padding:8px; }
  .meter-block { grid-template-columns:auto minmax(70px,18vw) 30px; }
  .score-block { min-height:53px; padding:8px 10px; }
  .score-block > span, .score-block > b { display:none; }
  .score-block .credits { margin-top:0; font-size:12px; }
  #message-log { bottom:148px; }
  .brand { bottom:145px; }
  #mobile-controls { position:absolute; z-index:60; left:10px; right:10px; bottom:max(10px,env(safe-area-inset-bottom)); display:flex; justify-content:space-between; align-items:end; }
  .mobile-pad { display:grid; grid-template-columns:repeat(3,54px); gap:5px; }
  .mobile-pad button, .fire-button { border:1px solid rgba(77,241,255,.45); background:rgba(3,13,18,.72); color:#eaffff; height:50px; }
  .fire-button { width:84px; height:84px; border-radius:50%; border-color:rgba(255,53,77,.68); box-shadow:inset 0 0 25px rgba(255,35,59,.15); font-weight:900; }
  .controls-grid { grid-template-columns:repeat(2,1fr); }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:1ms!important; animation-iteration-count:1!important; transition-duration:1ms!important; }
}