:root{
  --ink:#f5e8cf;--red:#cf3b2e;--amber:#e8a43a;--green:#6ca86f;
  --panel:#12100ee8;--line:#ffffff20;--stage:#cf3b2e
}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  margin:0;background:#090807;color:var(--ink);
  font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;
  overscroll-behavior:none;touch-action:none
}
.game-shell{height:100%;display:grid;grid-template-rows:64px minmax(0,1fr) 42px}
.game-header,.game-footer{
  z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(12px,3vw,34px);background:#0e0c0b;border-color:#ffffff18
}
.game-header{border-bottom:1px solid var(--line)}
.game-footer{border-top:1px solid var(--line);color:#91887b;font-size:12px;letter-spacing:.05em}
.game-footer a{color:#cbbca6}
.game-brand{
  display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;
  font-size:14px;font-weight:900;letter-spacing:.13em;text-transform:uppercase
}
.brand-mark{
  display:grid;width:36px;height:36px;place-items:center;border-radius:7px;
  background:var(--stage);color:white;font-size:12px;
  box-shadow:inset 0 0 0 2px #ffb04b42;transition:background .3s
}
.header-actions{display:flex;gap:8px}
button{font:inherit}
.header-actions button,.game-footer button{
  border:1px solid var(--line);border-radius:5px;background:#ffffff08;color:var(--ink);
  padding:8px 11px;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer
}
.viewport-wrap{position:relative;min-height:0;overflow:hidden;background:#000}
#game{display:block;width:100%;height:100%;image-rendering:pixelated;background:#000;cursor:crosshair}
.hud{
  position:absolute;z-index:5;inset:14px 14px auto;display:grid;
  grid-template-columns:minmax(105px,160px) 1fr minmax(105px,160px);
  gap:12px;pointer-events:none;text-shadow:1px 2px 2px #000
}
.hud-card{
  padding:9px 12px;border:1px solid #ffffff21;border-radius:5px;
  background:#090807bf;box-shadow:0 7px 24px #0007
}
.hud-card>span{display:block;color:#b8aa94;font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.hud-card strong{display:block;font-size:23px;line-height:1}
.hud-card small{display:block;margin-top:5px;color:#c6b9a6;font-size:9px;text-transform:uppercase}
.hud-right{text-align:right}
.meter{height:4px;margin-top:7px;overflow:hidden;background:#2a211c}
.meter i{display:block;width:100%;height:100%;background:var(--green);transition:width .15s,background .15s}
.hud-center{text-align:center;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.hud-center span{display:block;color:#ddd0ba}
.hud-center strong{display:block;min-height:18px;margin-top:5px;color:#ffca65}
.crosshair{
  position:absolute;z-index:4;left:50%;top:50%;width:24px;height:24px;
  transform:translate(-50%,-50%);pointer-events:none
}
.crosshair span{position:absolute;background:#fff9;box-shadow:0 0 3px #000}
.crosshair span:first-child{left:4px;right:4px;top:11px;height:2px}
.crosshair span:last-child{top:4px;bottom:4px;left:11px;width:2px}
.overlay{
  position:absolute;z-index:15;inset:0;display:grid;place-items:center;padding:24px;
  background:#050403d9;backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.2s
}
.overlay.visible{opacity:1;visibility:visible}
.overlay-panel{
  position:relative;width:min(680px,100%);padding:clamp(28px,6vw,62px);
  border:1px solid color-mix(in srgb,var(--stage) 45%,transparent);
  border-radius:7px;background:linear-gradient(145deg,#1b1713f2,#0e0c0bf5);
  box-shadow:0 26px 90px #000,inset 0 0 70px color-mix(in srgb,var(--stage) 10%,transparent);
  text-align:center
}
.overlay-panel:before,.overlay-panel:after{content:"";position:absolute;width:46px;height:3px;background:var(--stage)}
.overlay-panel:before{left:-1px;top:-1px}.overlay-panel:after{right:-1px;bottom:-1px}
.kicker{margin:0 0 14px;color:var(--amber);font-size:11px;font-weight:900;letter-spacing:.2em;text-transform:uppercase}
.overlay-panel h1{
  margin:0;color:#eee0c5;font:900 clamp(54px,11vw,112px)/.75 Impact,"Arial Black",sans-serif;
  letter-spacing:-.04em;text-shadow:0 6px 0 #671d18,0 12px 22px #000
}
.overlay-panel h2{margin:0 0 18px;font:900 clamp(34px,6vw,62px)/.95 Impact,"Arial Black",sans-serif;text-transform:uppercase}
.overlay-panel p:not(.kicker){max-width:580px;margin:28px auto;color:#bdb1a0;line-height:1.6}
.overlay-panel small{display:block;margin-top:18px;color:#7e7569;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.primary-action{
  display:inline-flex;min-width:210px;min-height:50px;align-items:center;justify-content:center;
  margin-top:24px;border:1px solid #f27855;border-radius:4px;
  background:linear-gradient(color-mix(in srgb,var(--stage) 85%,#fff 10%),color-mix(in srgb,var(--stage) 70%,#000));
  color:#fff;font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 7px 0 #35120f;cursor:pointer
}
.primary-action:active{transform:translateY(4px);box-shadow:0 3px 0 #35120f}
.compact{max-width:560px}.compact a{display:block;margin-top:25px;color:#cdbda8}
.pause-actions {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 24px;
}

.compact .pause-actions a.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

.compact .pause-actions .primary-action {
  margin-top: 0;
  text-decoration: none;
}

.compact .pause-actions .secondary-action {
  border-color: #ffffff38;
  background: linear-gradient(#302b27, #181512);
  color: var(--ink);
  box-shadow: 0 5px 0 #050403;
}

.compact .pause-actions .secondary-action:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #050403;
}
.help-panel{text-align:left}.help-panel h2{margin-top:24px;margin-bottom:8px;font-size:24px}
.help-panel p:not(.kicker){margin:0;color:#c8bbaa}
.close-button{position:absolute;right:16px;top:12px;border:0;background:none;color:#fff;font-size:30px;cursor:pointer}
.tip{padding-top:20px;border-top:1px solid var(--line)}
.mobile-controls{display:none;position:absolute;z-index:8;inset:0;pointer-events:none}
.touch-pad{
  position:absolute;left:24px;bottom:24px;width:130px;height:130px;border:2px solid #ffffff26;
  border-radius:50%;background:#0004;pointer-events:auto
}
.touch-pad i{
  position:absolute;left:42px;top:42px;width:44px;height:44px;border:2px solid #ffffff51;
  border-radius:50%;background:#ffffff14
}
.look-pad{position:absolute;inset:0 0 0 48%;pointer-events:auto}
.touch-button{
  position:absolute;width:74px;height:74px;border:2px solid #ffffff46;border-radius:50%;
  color:white;font-size:11px;font-weight:900;letter-spacing:.08em;pointer-events:auto;user-select:none
}
.touch-button.fire{right:26px;bottom:32px;background:#b12c24b8}
.touch-button.use{right:112px;bottom:94px;width:58px;height:58px;background:#ba7b24a8}
.damage-flash{animation:damage .25s}@keyframes damage{50%{filter:sepia(1) saturate(5) hue-rotate(320deg)}}
@media(pointer:coarse),(max-width:820px){
  .mobile-controls{display:block}.game-footer{display:none}.game-shell{grid-template-rows:52px minmax(0,1fr)}
  .game-header{padding-inline:10px}.game-brand{font-size:11px}.brand-mark{width:31px;height:31px}
  .header-actions button{padding:7px;font-size:9px}
  .hud{inset:8px 8px auto;grid-template-columns:92px 1fr 92px;gap:5px}
  .hud-card{padding:7px 8px}.hud-card strong{font-size:18px}.hud-center{font-size:8px}
  .crosshair{opacity:.65}.overlay{padding:12px}.overlay-panel{padding:28px 20px}
  .overlay-panel h1{font-size:58px}.overlay-panel p:not(.kicker){margin-top:22px;font-size:14px}
  .primary-action{margin-top:12px}.game-header .game-brand span:last-child{display:none}
}
@media(max-width:480px){
  .touch-pad{left:14px;bottom:16px;width:112px;height:112px}
  .touch-pad i{left:36px;top:36px;width:38px;height:38px}
  .touch-button.fire{right:14px;bottom:17px;width:68px;height:68px}
  .touch-button.use{right:88px;bottom:83px}.hud-center span{display:none}
}
@media(orientation:portrait) and (pointer:coarse){
  .viewport-wrap:after{
    content:"Rotate your phone for the best experience";position:absolute;z-index:7;left:50%;bottom:8px;
    transform:translateX(-50%);color:#fff8;font-size:9px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap
  }
}