/* =============================================================================
   BUKIT KEPONG — presentation layer.
   Palette: muted earth, khaki, oil-lamp amber. Typewriter + slab type to suit
   a 1950s police-report aesthetic. No external fonts or images are loaded.
   ========================================================================== */
:root {
  --ink:        #e8dcc0;
  --ink-dim:    #a99a78;
  --paper:      #17170f;
  --khaki:      #b39a5f;
  --amber:      #dda43f;
  --blood:      #a8412f;
  --green:      #7bab6a;
  --panel:      rgba(24, 22, 15, 0.94);
  --edge:       rgba(190, 165, 106, 0.32);
  --mono: "Courier New", "Nimbus Mono", monospace;
  --slab: "Georgia", "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #0b0d07; color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}
body { cursor: default; }
body.in-game { cursor: none; }

/* A long press on iOS runs the system text-selection gesture: the word under
   the thumb highlights and a Copy / Look Up / Share callout slides in over the
   game. Holding a direction on the thumbstick or leaning on the fire button is
   exactly that gesture, so the menu appears mid-firefight. Nothing here is
   text a player would want to copy — there are no inputs or prose to quote —
   so selection and the callout are switched off document-wide. The tap
   highlight is the same story: a grey flash over every button on touch. */
html, body {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* 100vh on iOS is the LARGE viewport — the height the page would have if the
   browser toolbars were hidden — so a canvas sized that way hangs below the
   glass by however much the toolbar covers. The camera keeps centring the
   player in the canvas, but the canvas centre is no longer the screen centre:
   the view rides high and the ground below the player is cut off. 100dvh is
   the height that is actually visible, and it follows the toolbar as it
   collapses. 100vh stays as the fallback for browsers without dvh, and
   --vph — written from visualViewport on every resize — overrides both on
   the browsers whose dvh lags the toolbar animation. */
#game { position: fixed; inset: 0; width: 100vw;
        height: 100vh; height: 100dvh; height: var(--vph, 100dvh); display: block; }

/* Every full-screen layer has the same problem: inset:0 resolves against the
   large viewport, so the bottom row of the HUD and the thumb controls sit
   under the toolbar. Pin them all to the visible height. */
#hud, #touch, .screen, #rotate { height: 100vh; height: 100dvh; height: var(--vph, 100dvh); }

/* Custom crosshair drawn with CSS so it stays crisp */
body.in-game #game { cursor: none; }
/* Overlays always get a real pointer back */
.screen.active, .ghost-btn { cursor: default; }
.screen.active .btn { cursor: pointer; }

/* ============================== HUD ==================================== */
#hud {
  position: fixed; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
  text-shadow: 0 2px 4px rgba(0,0,0,.9);
}
body.in-game #hud { opacity: 1; }

.hud-corner { position: absolute; }
.tl { top: 16px; left: 18px; }
.tc { top: 12px; left: 50%; transform: translateX(-50%); text-align: center; }
.tr { top: 14px; right: 18px; text-align: right; }
.bl { bottom: 18px; left: 18px; }
.br { bottom: 18px; right: 18px; text-align: right; }

.hud-title {
  font-family: var(--slab); font-size: 13px; letter-spacing: .16em;
  color: var(--khaki); margin-bottom: 10px; opacity: .85;
}
.hud-label {
  font-size: 10px; letter-spacing: .28em; color: var(--ink-dim);
}
.hud-label.right { text-align: right; }
.hud-objective {
  font-size: 14px; letter-spacing: .06em; color: var(--ink);
  margin-top: 2px; max-width: 340px;
}
.hud-time {
  font-family: var(--slab); font-size: 34px; letter-spacing: .06em;
  color: var(--ink); line-height: 1;
}
.hud-sub { font-size: 11px; letter-spacing: .2em; color: var(--khaki); margin-top: 4px; }

.meter { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.meter .hud-label { width: 68px; }
.meter-num { font-size: 12px; color: var(--ink-dim); width: 42px; text-align: left; }
.bar-track {
  width: 210px; height: 13px; background: rgba(0,0,0,.6);
  border: 1px solid var(--edge); position: relative; overflow: hidden;
}
.bar-fill { height: 100%; width: 100%; transition: width .12s linear; }
.bar-fill.health  { background: linear-gradient(180deg, #9fce86, #5d8a4c); }
.bar-fill.station { background: linear-gradient(180deg, #d8b46a, #8d6f34); }
.bar-fill.crit    { background: linear-gradient(180deg, #d76a4a, #8b2f21); animation: pulse .7s infinite; }
@keyframes pulse { 50% { filter: brightness(1.5); } }
/* Segment ticks over the bars for a mechanical, period feel */
.bar-track::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 19px, rgba(0,0,0,.55) 19px 21px);
}

.pips { width: 210px; display: flex; gap: 5px; align-items: center; }
.pips i {
  width: 13px; height: 13px; border: 1px solid var(--edge);
  background: linear-gradient(180deg, #9fce86, #5d8a4c); display: block;
}
.pips i.down { background: rgba(0,0,0,.5); border-color: rgba(168,65,47,.45); }

.ammo-line { font-family: var(--slab); font-size: 32px; line-height: 1; letter-spacing: .04em; }
.ammo-line i { color: var(--ink-dim); font-style: normal; font-size: 20px; margin: 0 4px; }
.ammo-line span:last-child { font-size: 18px; color: var(--ink-dim); }
/* Reserve turns warm and breathes once you are down to your last magazines. */
.ammo-line.low span:last-child { color: #e0a45c; animation: ammoLow 1.1s ease-in-out infinite; }
@keyframes ammoLow { 50% { opacity: .45; } }
.reload { height: 16px; margin-top: 6px; opacity: 0; transition: opacity .12s; }
.reload.on { opacity: 1; }
.reload span { font-size: 10px; letter-spacing: .24em; color: var(--amber); }
.reload-track { width: 130px; height: 4px; background: rgba(0,0,0,.6); border: 1px solid var(--edge); margin-left: auto; margin-top: 3px; }
#reload-fill { height: 100%; width: 0; background: var(--amber); }

#minimap {
  width: 176px; height: 132px; border: 1px solid var(--edge);
  background: rgba(0,0,0,.5); image-rendering: pixelated; display: block;
}
.ghost-btn {
  pointer-events: auto; margin-top: 8px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .2em; padding: 5px 10px; color: var(--ink-dim);
  background: rgba(20,18,12,.8); border: 1px solid var(--edge); cursor: pointer;
}
.ghost-btn:hover { color: var(--ink); border-color: var(--khaki); }
.ghost-btn.off { color: var(--blood); }

#banner-wrap {
  position: absolute; top: 26%; left: 50%; transform: translateX(-50%);
  text-align: center; opacity: 0;
}
#banner-wrap.show { animation: bannerIn 2.6s ease forwards; }
@keyframes bannerIn {
  0%   { opacity: 0; letter-spacing: .5em; }
  12%  { opacity: 1; letter-spacing: .22em; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}
#banner {
  font-family: var(--slab); font-size: 40px; letter-spacing: .22em;
  color: var(--ink); text-shadow: 0 0 24px rgba(0,0,0,.9), 0 3px 0 rgba(0,0,0,.7);
}
#banner-sub { font-size: 12px; letter-spacing: .3em; color: var(--khaki); margin-top: 8px; }

#low-health {
  position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(150,20,14,.75) 100%);
}

/* ============================= SCREENS ================================= */
.screen {
  /* align-items:center would overflow the panel in BOTH directions once it is
     taller than the screen, and the part above the scroll origin can never be
     reached. An auto margin centres the same way but collapses to zero when
     there is no room, so the top stays scrollable. */
  position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(30,26,16,.55), rgba(6,7,4,.94)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
  z-index: 10; padding: 24px; overflow-y: auto;
}
.screen.active { display: flex; }

.panel {
  margin: auto;              /* centres while it fits, never clips the top */
  width: min(560px, 94vw); background: var(--panel);
  border: 1px solid var(--edge); padding: 34px 38px;
  box-shadow: 0 24px 70px rgba(0,0,0,.7), inset 0 0 90px rgba(0,0,0,.5);
  position: relative; text-align: center;
}
.panel.wide { width: min(760px, 94vw); }
.panel::before {
  content: ""; position: absolute; inset: 7px; border: 1px solid rgba(190,165,106,.14);
  pointer-events: none;
}

.stamp {
  display: inline-block; font-size: 10px; letter-spacing: .34em; color: var(--khaki);
  border: 1px solid var(--edge); padding: 5px 12px; margin-bottom: 22px;
}
.stamp.red { color: var(--blood); border-color: rgba(168,65,47,.5); }

.title {
  font-family: var(--slab); font-size: clamp(40px, 8vw, 74px); margin: 0;
  letter-spacing: .16em; color: var(--ink); line-height: 1;
  text-shadow: 0 4px 0 rgba(0,0,0,.6);
}
.subtitle {
  font-size: 13px; letter-spacing: .46em; color: var(--khaki); margin: 16px 0 0;
}
h2 {
  font-family: var(--slab); font-size: clamp(24px, 4vw, 34px); letter-spacing: .16em;
  margin: 0 0 6px; color: var(--ink); font-weight: 400;
}
h3 { font-size: 11px; letter-spacing: .3em; color: var(--khaki); margin: 0 0 8px; }
.tagline { color: var(--ink-dim); font-size: 13px; line-height: 1.8; margin: 20px 0 26px; }
.disclaimer { color: rgba(169,154,120,.6); font-size: 10px; line-height: 1.7; margin: 24px 0 0; }

.difficulty { margin: 6px 0 24px; }
.difficulty .hud-label { margin-bottom: 10px; }
.seg {
  display: inline-flex; border: 1px solid var(--edge); background: rgba(0,0,0,.35);
}
.seg-btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  padding: 11px 22px; color: var(--ink-dim); background: transparent;
  border: 0; border-right: 1px solid var(--edge); cursor: pointer; transition: all .15s;
}
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover { color: var(--ink); }
.seg-btn.active { background: var(--khaki); color: #16150d; }
.seg-note {
  font-size: 11px; line-height: 1.7; color: var(--ink-dim);
  margin: 14px auto 0; max-width: 420px; min-height: 34px;
}

.assist {
  display: none; font-size: 10px; letter-spacing: .22em; color: var(--amber);
  border: 1px solid rgba(221,164,63,.4); padding: 3px 8px; margin-top: 8px;
}
.assist.on { display: inline-block; }

.btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.btn {
  font-family: var(--mono); font-size: 12px; letter-spacing: .24em;
  padding: 13px 26px; color: var(--ink-dim); background: rgba(40,36,24,.6);
  border: 1px solid var(--edge); cursor: pointer; transition: all .15s;
}
.btn:hover { color: #16150d; background: var(--khaki); border-color: var(--khaki); }
.btn.primary { color: var(--ink); border-color: var(--khaki); }
.btn.primary:hover { background: var(--amber); border-color: var(--amber); }

.keys { list-style: none; padding: 0; margin: 4px 0 24px; text-align: left; }
.keys li {
  display: flex; align-items: center; gap: 14px; padding: 7px 0;
  border-bottom: 1px dashed rgba(190,165,106,.14); font-size: 12px;
}
.keys b {
  min-width: 130px; color: var(--amber); font-weight: 400; letter-spacing: .12em;
}
.keys span { color: var(--ink-dim); }

.brief { text-align: left; font-size: 12px; line-height: 1.85; color: var(--ink-dim); margin-bottom: 22px; }
.brief b { color: var(--khaki); font-weight: 400; }

.stats { list-style: none; padding: 0; margin: 18px 0 22px; text-align: left; }
.stats li {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 2px;
  border-bottom: 1px dashed rgba(190,165,106,.16); font-size: 12px; color: var(--ink-dim);
}
.stats li span { flex: 1; }
.stats b { color: var(--ink); font-weight: 400; text-align: right; }
/* Points column of the after-action breakdown. */
.stats em {
  font-style: normal; min-width: 68px; text-align: right;
  font-family: var(--slab); font-size: 13px; color: var(--ink-dim);
}
.stats em.up { color: var(--green); }
.stats em.down { color: var(--blood); }
.stats em.nil { color: rgba(169,154,120,.4); }
.stats li.sum { border-bottom: none; border-top: 1px solid var(--edge); color: var(--ink); }
.stats li.sum em { color: var(--ink); }

/* --- Final score ------------------------------------------------------- */
.score { text-align: center; margin: 20px 0 4px; }
.score-label { font-size: 10px; letter-spacing: .28em; color: var(--ink-dim); }
.score-total {
  font-family: var(--slab); font-size: 58px; line-height: 1.1; color: var(--amber);
  letter-spacing: .02em; text-shadow: 0 2px 18px rgba(221,164,63,.28);
}
.score .citation {
  font-size: 11px; letter-spacing: .3em; color: var(--khaki);
  border-top: 1px solid var(--edge); display: inline-block; padding-top: 8px; margin-top: 2px;
}
.score .best { font-size: 10px; letter-spacing: .2em; color: var(--ink-dim); margin-top: 10px; }
.score .best.new { color: var(--amber); animation: ammoLow 1.4s ease-in-out infinite; }

.note {
  text-align: left; border-top: 1px solid var(--edge); padding-top: 18px; margin-top: 8px;
}
.note p { font-size: 12px; line-height: 1.9; color: var(--ink-dim); margin: 0 0 12px; }
.note .fine { font-size: 10.5px; line-height: 1.8; color: rgba(169,154,120,.62); }

@media (max-width: 620px) {
  .bar-track { width: 130px; }
  .hud-time { font-size: 26px; }
  #minimap { width: 120px; height: 90px; }
  .panel { padding: 26px 20px; }
}

/* ========================== TOUCH CONTROLS =============================
   Present only on coarse-pointer devices. The sticks are floating: the base
   appears wherever the thumb lands, which is the only scheme that works when
   you cannot see your own hands.
   ====================================================================== */
#touch { position: fixed; inset: 0; z-index: 8; display: none; pointer-events: none; }
body.touch.playing #touch { display: block; }
body.touch.playing #game, body.touch.playing #touch { touch-action: none; }
body.touch { overscroll-behavior: none; }

/* Thumb zones. Transparent — they exist only to catch pointers. */
/* touch-action does not inherit, so every interactive part sets it itself —
   without this iOS treats a thumb drag as a page scroll. */
.tz, .stick, .tbtn { touch-action: none; }
.tz { position: absolute; top: 0; bottom: 0; pointer-events: auto; }
.tz-move { left: 0; width: 45%; }
.tz-aim  { right: 0; width: 55%; }

.stick {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  opacity: 0; transition: opacity .14s ease; will-change: transform;
}
.stick.on { opacity: 1; }
.stick::before {
  content: ""; position: absolute; left: -52px; top: -52px; width: 104px; height: 104px;
  border-radius: 50%; border: 1.5px solid rgba(190,165,106,.42);
  background: radial-gradient(circle, rgba(20,18,12,.5) 40%, rgba(20,18,12,.16) 100%);
}
.stick i {
  position: absolute; left: -23px; top: -23px; width: 46px; height: 46px;
  border-radius: 50%; background: rgba(190,165,106,.34);
  border: 1.5px solid rgba(232,220,192,.62); will-change: transform;
}
.stick.aim::before { border-color: rgba(224,110,80,.45); }
.stick.aim i { background: rgba(224,110,80,.3); border-color: rgba(240,170,140,.7); }

.tbtns {
  position: absolute; right: calc(18px + env(safe-area-inset-right));
  bottom: calc(84px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  pointer-events: none;
}
.tbtn {
  pointer-events: auto; -webkit-tap-highlight-color: transparent;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; line-height: 1.25;
  color: var(--ink-dim); background: rgba(20,18,12,.66);
  border: 1.5px solid var(--edge); border-radius: 50%;
  width: 74px; height: 74px; padding: 0; cursor: pointer;
}
.tbtn:active { background: rgba(60,52,32,.85); color: var(--ink); }
.tbtn.small { width: 58px; height: 58px; font-size: 9px; }
/* The fire-fighting button is dark until there are flames within reach. */
.tbtn.douse.live {
  color: var(--amber); border-color: rgba(221,164,63,.75);
  background: rgba(70,44,14,.7); animation: ammoLow 1s ease-in-out infinite;
}
.tbtn.pause {
  position: absolute; width: 44px; height: 44px; font-size: 13px; letter-spacing: 0;
  top: calc(12px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left));
}

/* Rotate prompt. Portrait leaves the compound too narrow to read. */
#rotate { position: fixed; inset: 0; z-index: 40; display: none; background: #0b0d07;
  align-items: center; justify-content: center; text-align: center; }
.rotate-inner { font-size: 12px; letter-spacing: .3em; color: var(--khaki); }
.rotate-inner p { font-size: 11px; letter-spacing: .1em; color: var(--ink-dim); margin-top: 12px; }
.rotate-icon {
  width: 74px; height: 46px; margin: 0 auto 26px; border: 2px solid var(--edge); border-radius: 6px;
  animation: rotateHint 2.4s ease-in-out infinite;
}
@keyframes rotateHint { 0%, 40% { transform: rotate(90deg); } 60%, 100% { transform: rotate(0); } }
@media (orientation: portrait) { body.touch #rotate { display: flex; } }

/* A phone in landscape has very little height. Give the mission back its room.
   Keyed off body.touch — the class the input layer sets — so the CSS and the
   JS agree on what a touch device is instead of testing two different things. */
@media (max-height: 520px) {

  body.touch .hud-title { font-size: 11px; margin-bottom: 6px; }
  body.touch .hud-objective { font-size: 11px; max-width: 230px; }
  body.touch .hud-time { font-size: 24px; }
  body.touch .hud-sub { font-size: 9px; }
  body.touch .bar-track, body.touch .pips { width: 132px; height: 10px; }
  body.touch .pips i { width: 10px; height: 10px; }
  body.touch .meter { gap: 7px; margin-top: 5px; }
  body.touch .meter .hud-label { width: 52px; }
  body.touch .hud-label { font-size: 8.5px; letter-spacing: .2em; }
  body.touch .meter-num { font-size: 10px; width: 34px; }
  body.touch .ammo-line { font-size: 24px; }
  body.touch .ammo-line span:last-child { font-size: 14px; }
  body.touch #minimap { width: 118px; height: 88px; }
  body.touch .ghost-btn { font-size: 8.5px; padding: 3px 7px; }
  body.touch .tl { top: 10px; left: calc(68px + env(safe-area-inset-left)); }  /* clear of the pause button */
  body.touch .bl { bottom: calc(10px + env(safe-area-inset-bottom)); left: calc(14px + env(safe-area-inset-left)); }
  body.touch .br { bottom: calc(10px + env(safe-area-inset-bottom)); right: calc(104px + env(safe-area-inset-right)); }
  body.touch .tr { right: calc(14px + env(safe-area-inset-right)); }
  body.touch #banner { font-size: 26px; }
  body.touch .tbtn { width: 62px; height: 62px; }
  body.touch .tbtn.small { width: 50px; height: 50px; }
  /* the compact .tbtn rule outranks .tbtn.pause, so restate the pause size */
  body.touch .tbtn.pause { width: 44px; height: 44px; }
  body.touch .tbtns { bottom: calc(14px + env(safe-area-inset-bottom)); gap: 9px; }
  body.touch .panel { padding: 20px 22px; }
  body.touch .screen { padding: 12px; }

}