/* 1BB: CALL OF BUSINESS — UI skin. Palette: deep indigo night, amber "hours", alert red. */
:root {
  --ink: #0b0e1a;
  --amber: #ffc24b;
  --amber-hot: #ffe08a;
  --red: #ff3b5c;
  --green: #7dff9a;
  --paper: #e8ecf8;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: var(--ink); }
body {
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  color: var(--paper);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#app { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }

/* ---------- screens ---------- */
.screen {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255,194,75,.12), transparent 60%),
    radial-gradient(ellipse at 50% -20%, rgba(80,120,255,.15), transparent 55%),
    rgba(8,10,20,.92);
  backdrop-filter: blur(3px);
}
.title-stack { max-width: 640px; padding: 24px; animation: rise .5s ease-out; }
@keyframes rise { from { transform: translateY(18px); opacity: 0; } }
.presents {
  letter-spacing: .35em; font-size: 13px; color: var(--amber);
  text-transform: uppercase; margin-bottom: 10px;
}
h1 {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(56px, 11vw, 110px); line-height: .9; letter-spacing: .02em;
  color: var(--paper);
  text-shadow: 0 0 24px rgba(255,194,75,.25), 0 4px 0 rgba(0,0,0,.6);
}
.subtitle {
  margin-top: 12px; letter-spacing: .3em; font-size: 14px; color: var(--amber-hot);
}
.brief { margin: 22px auto 26px; font-size: 17px; line-height: 1.55; color: #c6cde4; }
.brief b { color: var(--amber); }
button {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 22px; letter-spacing: .08em;
  padding: 16px 38px; margin: 6px;
  color: var(--ink); background: linear-gradient(180deg, var(--amber-hot), var(--amber));
  border: none; border-radius: 4px; cursor: pointer;
  box-shadow: 0 0 22px rgba(255,194,75,.35), 0 4px 0 #a8761a;
  transition: transform .08s;
}
button:active { transform: translateY(3px); box-shadow: 0 0 22px rgba(255,194,75,.35), 0 1px 0 #a8761a; }
button.ghost {
  background: transparent; color: var(--amber);
  border: 2px solid var(--amber); box-shadow: none;
}
.foot { margin-top: 26px; font-size: 12px; letter-spacing: .18em; color: #7a83a3; text-transform: uppercase; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
#hud-hours {
  position: absolute; top: 14px; left: 18px;
  font-family: Impact, sans-serif; font-size: 44px; color: var(--amber);
  text-shadow: 0 0 18px rgba(255,194,75,.5), 0 2px 0 #000;
}
#hud-hours .hud-label { display: block; font-size: 12px; letter-spacing: .3em; color: #9aa3c2; font-family: "Arial Narrow", sans-serif; }
#hud-hours.bump #hours-num { animation: bump .25s ease-out; display: inline-block; }
@keyframes bump { 40% { transform: scale(1.35); } }
#hud-timer {
  position: absolute; top: 14px; right: 18px;
  font-family: Impact, sans-serif; font-size: 44px; color: var(--paper);
  text-shadow: 0 2px 0 #000;
}
#hud-timer.urgent { color: var(--red); animation: pulse .5s infinite alternate; }
@keyframes pulse { to { transform: scale(1.12); } }
#hud-day {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  font-size: 14px; letter-spacing: .4em; color: var(--amber-hot);
  text-transform: uppercase; text-shadow: 0 0 12px rgba(255,194,75,.6);
  transition: opacity .4s;
}
#hud-focus { position: absolute; bottom: 18px; left: 18px; width: 210px; }
#hud-focus .hud-label { font-size: 11px; letter-spacing: .3em; color: #9aa3c2; }
#focus-bar { height: 10px; margin-top: 4px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
#focus-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--green), #baffd0); transition: width .2s, background .2s; }
#focus-fill.low { background: linear-gradient(90deg, var(--red), #ff8ba0); }
#hud-onebtn {
  position: absolute; bottom: 18px; right: 18px;
  font-size: 12px; letter-spacing: .25em; color: var(--amber);
  border: 1px solid rgba(255,194,75,.5); padding: 6px 12px; border-radius: 3px;
  background: rgba(11,14,26,.55);
}
#hud-chain {
  position: absolute; top: 84px; left: 18px;
  font-family: Impact, sans-serif; font-size: 30px; color: var(--green);
  text-shadow: 0 0 14px rgba(125,255,154,.7), 0 2px 0 #000;
  letter-spacing: .06em;
  animation: chainpulse .3s ease-out;
}
@keyframes chainpulse { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
.announcer {
  position: absolute; left: 50%; top: 30%;
  transform: translateX(-50%);
  font-family: Impact, sans-serif; font-size: 52px; letter-spacing: .08em;
  color: var(--green); text-shadow: 0 0 22px rgba(125,255,154,.9), 0 3px 0 #000;
  animation: announcepop 1.2s ease-out forwards; white-space: nowrap;
}
@keyframes announcepop {
  0% { opacity: 0; transform: translateX(-50%) scale(.5); }
  18% { opacity: 1; transform: translateX(-50%) scale(1.12); }
  75% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.05) translateY(-14px); }
}
a#btn-cta-win {
  display: inline-block; margin: 14px 6px 0;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 20px; letter-spacing: .08em; text-decoration: none;
  padding: 14px 30px; border-radius: 4px;
  color: var(--amber-hot); border: 2px solid var(--amber);
  box-shadow: 0 0 18px rgba(255,194,75,.25);
}
a#btn-cta-win:active { transform: translateY(2px); }

/* ---------- crosshair / hitmarker / vignette ---------- */
#crosshair { position: absolute; left: 50%; top: 50%; z-index: 21; pointer-events: none; width: 32px; height: 32px; margin: -16px 0 0 -16px; }
.ch-dot { position: absolute; width: 5px; height: 5px; left: 13.5px; top: 13.5px; border-radius: 50%; background: var(--amber-hot); box-shadow: 0 0 6px rgba(255,194,75,.9); }
.ch-ring { position: absolute; width: 30px; height: 30px; left: 1px; top: 1px; border: 1.5px solid rgba(255,224,138,.55); border-radius: 50%; transition: transform .07s; }
#crosshair.fire .ch-ring { transform: scale(1.6); border-color: var(--amber); }
#hitmarker {
  position: absolute; left: 50%; top: 50%; z-index: 21; pointer-events: none;
  width: 26px; height: 26px; margin: -13px 0 0 -13px; opacity: 0;
  background:
    linear-gradient(45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%);
}
#hitmarker.show { animation: hm .18s ease-out; }
@keyframes hm { 0% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(.9); } }
#hitmarker.kill { filter: drop-shadow(0 0 4px var(--red)) sepia(1) saturate(5) hue-rotate(-45deg); }
#vignette {
  position: absolute; inset: 0; z-index: 19; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(255,59,92,.45) 100%);
  transition: opacity .25s;
}

/* ---------- floating score text ---------- */
#floaters { position: absolute; inset: 0; z-index: 22; pointer-events: none; overflow: hidden; }
.floater {
  position: absolute; font-family: Impact, sans-serif; font-size: 30px;
  color: var(--amber-hot); text-shadow: 0 0 10px rgba(255,194,75,.8), 0 2px 0 #000;
  animation: floatup 1s ease-out forwards; white-space: nowrap;
}
.floater.elite { font-size: 40px; color: var(--green); text-shadow: 0 0 12px rgba(125,255,154,.8), 0 2px 0 #000; }
.floater.boss { font-size: 54px; color: var(--red); text-shadow: 0 0 16px rgba(255,59,92,.9), 0 2px 0 #000; }
@keyframes floatup {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.6); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -110px) scale(1); }
}

/* ---------- misc ---------- */
#rotate-note {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  z-index: 21; font-size: 10px; letter-spacing: .15em; color: #5a6285;
  pointer-events: none; display: none;
}
@media (orientation: portrait) { #rotate-note { display: block; } }