/* ------------------------------------------------------------------
   Prison Boss: Mamba Strike — web shell.
   Palette is taken from FpsHudController so the page and the HUD read
   as one product:
     TeaYellow  #FFD133   TeaOrange #FF8C1F
     TeaRed     #EB4720   ink       #0F0E0D
   ------------------------------------------------------------------ */

:root {
  --tea-yellow: #ffd133;
  --tea-orange: #ff8c1f;
  --tea-red:    #eb4720;
  --ink:        #0f0e0d;
  --ink-soft:   #171614;
  --smoke:      #cfc7b8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--smoke);
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* ---------------- Stage / canvas ---------------- */

#pb-stage {
  position: fixed;
  inset: 0;
  background: var(--ink);
}

#unity-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
  opacity: 0;
  transition: opacity 520ms ease;
  /* Unity owns the backing store size; never let the browser smear it. */
  image-rendering: auto;
  touch-action: none;
}

#pb-stage.ready #unity-canvas { opacity: 1; }

/* ---------------- Loading screen ---------------- */

#pb-loading {
  position: absolute;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  background: var(--ink);
  opacity: 1;
  transition: opacity 620ms ease;
}

/* A soft cover layer fills non-16:9 browser windows, while the sharp art
   above uses contain so the complete key visual is always visible. */
#pb-loading::before {
  content: "";
  position: absolute;
  inset: -28px;
  background: url("loading-bg.jpg?v=20260727-shell4") center center / cover no-repeat;
  filter: blur(18px) brightness(0.48);
  transform: scale(1.05);
}

#pb-loading.hidden {
  opacity: 0;
  pointer-events: none;
}

#pb-loading-art {
  position: absolute;
  inset: 0;
  background: transparent url("loading-bg.jpg?v=20260727-shell4") center center / contain no-repeat;
  /* Slow push-in keeps the cover alive during a long download. */
  animation: pb-drift 24s ease-in-out infinite alternate;
}

@keyframes pb-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.025); }
}

/* Darken toward the bottom so the progress panel always reads,
   and vignette the edges to match the in-game look. */
#pb-loading-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 38%, rgba(0,0,0,0.72) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,0.60) 74%, rgba(0,0,0,0.92) 100%);
}

#pb-loading-panel {
  position: absolute;
  left: 50%;
  bottom: 10.5vh;
  transform: translateX(-50%);
  width: min(620px, 82vw);
  text-align: center;
}

#pb-status {
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--tea-yellow);
  text-shadow: 0 2px 10px rgba(0,0,0,0.9);
  margin-bottom: 14px;
  min-height: 1.4em;
}

#pb-bar {
  position: relative;
  height: 14px;
  padding: 3px;
  background: rgba(0,0,0,0.70);
  border: 1px solid rgba(255,140,31,0.65);
  box-shadow: 0 2px 14px rgba(0,0,0,0.75);
  overflow: hidden;
}

#pb-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--tea-orange), var(--tea-yellow) 78%, #fff3c4);
  box-shadow: 0 0 18px rgba(255,190,50,0.85);
  transition: width 220ms ease-out;
}

#pb-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 10px;
  font-size: clamp(11px, 1.05vw, 13px);
  color: rgba(207,199,184,0.78);
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}

#pb-pct {
  font-variant-numeric: tabular-nums;
  color: var(--tea-yellow);
  font-weight: 600;
}

/* ---------------- Warnings / errors ---------------- */

#pb-warning {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.pb-warn {
  padding: 9px 16px;
  font-size: 13px;
  background: rgba(12,12,11,0.92);
  border-left: 3px solid var(--tea-yellow);
  color: var(--smoke);
}

.pb-warn.warn { border-left-color: var(--tea-orange); }

#pb-error {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6,6,5,0.94);
}

#pb-error.visible { display: flex; }

.pb-error-card {
  width: min(560px, 88vw);
  padding: 30px 34px;
  background: var(--ink-soft);
  border: 1px solid rgba(235,71,32,0.55);
  text-align: center;
}

.pb-error-card h2 {
  margin: 0 0 14px;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--tea-red);
}

#pb-error-msg {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(207,199,184,0.9);
  word-break: break-word;
  max-height: 30vh;
  overflow: auto;
}

.pb-error-tip {
  margin: 0 0 22px;
  font-size: 12.5px;
  line-height: 1.75;
  color: rgba(207,199,184,0.62);
}

#pb-error-reload {
  padding: 11px 30px;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: var(--tea-yellow);
  border: none;
  cursor: pointer;
  transition: background 160ms ease;
}

#pb-error-reload:hover { background: #fff; }

/* ---------------- Viewport controls ---------------- */

#pb-hud {
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 70;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 240ms ease;
}

#pb-hud.hidden { opacity: 0; pointer-events: none; }
#pb-stage.fullscreen #pb-hud { opacity: 0; pointer-events: none; }

#pb-fullscreen-exit {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  top: max(14px, env(safe-area-inset-top));
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  color: rgba(207,199,184,0.78);
  background: rgba(8,8,7,0.28);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

#pb-fullscreen-exit kbd {
  color: rgba(255,209,51,0.82);
  font: 700 10px/1 "Segoe UI", sans-serif;
}

#pb-stage.fullscreen #pb-fullscreen-exit { opacity: 0.38; }

#pb-fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 190px;
  height: 46px;
  padding: 0 16px;
  color: var(--tea-yellow);
  background: rgba(10,10,9,0.88);
  border: 1px solid rgba(255,140,31,0.9);
  box-shadow: 0 4px 18px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,209,51,0.08);
  font: 700 14px/1 "Noto Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
  cursor: pointer;
  opacity: 1;
  transition: transform 160ms ease, color 160ms ease, background 160ms ease, border-color 160ms ease;
}

#pb-fullscreen:hover {
  transform: translateY(-2px);
  color: #fff4c0;
  background: rgba(27,23,16,0.96);
  border-color: var(--tea-yellow);
}

#pb-fullscreen.active { color: var(--tea-orange); }

#pb-fullscreen kbd {
  padding: 4px 6px;
  color: rgba(207,199,184,0.78);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 2px;
  font: 600 10px/1 "Segoe UI", sans-serif;
  letter-spacing: 0;
}

@media (max-width: 620px), (max-height: 520px) {
  #pb-loading-panel { bottom: 8vh; width: min(560px, 86vw); }
  #pb-note { display: none; }
  #pb-hud { right: 10px; bottom: 10px; }
  #pb-fullscreen-exit { left: 8px; top: 8px; }
  #pb-fullscreen { min-width: 46px; width: 46px; padding: 0; }
  #pb-fullscreen-label, #pb-fullscreen kbd { display: none; }
}

/* ---------------- Misc ---------------- */

#pb-noscript {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 2;
  font-size: 15px;
  background: var(--ink);
  color: var(--tea-yellow);
}

body.pb-mobile #pb-bar,
body.pb-mobile #pb-pct { display: none; }
body.pb-mobile #pb-loading-panel { bottom: 12vh; }