* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #1a1a2e;
  color: #eaeaea;
  font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05050c;
  overflow: hidden;
  cursor: pointer;
}

.intro-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.045) 0,
    rgba(255, 255, 255, 0.045) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: introScan 6s linear infinite;
  z-index: 3;
}

.intro-glow {
  position: absolute;
  width: 70vmin;
  height: 70vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(164, 220, 48, 0.28), transparent 68%);
  filter: blur(12px);
  animation: introPulse 1.4s ease-in-out infinite alternate;
  z-index: 1;
}

.intro-logo {
  position: relative;
  z-index: 2;
  width: min(86vw, 520px);
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  animation: introPixelIn 1.1s steps(8) forwards, introGlitch 2.4s steps(2) 0.9s 3;
  filter: drop-shadow(0 0 12px rgba(180, 255, 80, 0.55));
}

.intro-skip {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  font-family: inherit;
  font-size: 12px;
  color: #c8d4f0;
  background: #0f3460;
  border: 3px solid #ffffff33;
  box-shadow: 3px 3px 0 #000;
  padding: 8px 12px;
  cursor: pointer;
}

.intro-skip:hover {
  background: #e94560;
  color: #fff;
}

.intro.is-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

@keyframes introPixelIn {
  0% {
    transform: scale(0.2);
    filter: contrast(2.4) saturate(0.2) blur(4px);
    opacity: 0;
  }
  45% {
    transform: scale(1.08);
    filter: contrast(1.6) saturate(1.4);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 12px rgba(180, 255, 80, 0.55));
    opacity: 1;
  }
}

@keyframes introGlitch {
  0%,
  80%,
  100% {
    transform: translate(0, 0);
    filter: drop-shadow(0 0 12px rgba(180, 255, 80, 0.55));
  }
  85% {
    transform: translate(-6px, 2px);
    filter: drop-shadow(6px 0 #ff2a6d) drop-shadow(-6px 0 #2af0ff);
  }
  90% {
    transform: translate(5px, -2px);
    filter: drop-shadow(-5px 0 #ff2a6d) drop-shadow(5px 0 #2af0ff);
  }
}

@keyframes introPulse {
  from {
    transform: scale(0.86);
    opacity: 0.55;
  }
  to {
    transform: scale(1.12);
    opacity: 1;
  }
}

@keyframes introScan {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 12px;
  }
}

.hud {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.hud > * {
  pointer-events: auto;
}

#refreshBtn,
#pushBtn {
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  width: 40px;
  height: 40px;
  padding: 0;
  background: #e94560;
  color: white;
  border: 3px solid #ffffff33;
  border-radius: 0;
  cursor: pointer;
  box-shadow: 3px 3px 0 #000;
}

#pushBtn {
  background: #0f3460;
  font-size: 18px;
}

#pushBtn.is-on {
  background: #2ecc71;
}

#pushBtn:hover {
  background: #1a4f8f;
}

#pushBtn.is-on:hover {
  background: #3ddc84;
}

#refreshBtn:hover {
  background: #ff6b81;
}

#refreshBtn:disabled {
  background: #555;
  cursor: wait;
}

.zoom-group {
  display: flex;
  border: 3px solid #ffffff33;
  box-shadow: 3px 3px 0 #000;
}

.zoom-group button {
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  background: #0f3460;
  color: #c8d4f0;
  border: 0;
  cursor: pointer;
}

.zoom-group button.active,
.zoom-group button:hover {
  background: #e94560;
  color: #fff;
}

.office-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #0d0d1a;
}

#phaserContainer {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  line-height: 0;
  overflow: hidden;
  cursor: grab;
}

#phaserContainer:active {
  cursor: grabbing;
}

#phaserContainer canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.speech-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.speech-bubble {
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  min-width: 96px;
  max-width: min(360px, calc(100vw - 24px));
  padding: 9px 12px 8px;
  background: #fff8e8;
  border: 2px solid #1a1a2e;
  box-shadow: 2px 2px 0 #000;
  font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.35;
  color: #1a1a2e;
  text-align: center;
  white-space: pre-line;
  word-break: break-word;
  overflow-wrap: anywhere;
  z-index: 1;
}

.speech-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 8px;
  height: 6px;
  margin-left: -4px;
  background: #fff8e8;
  border-left: 2px solid #1a1a2e;
  border-right: 2px solid #1a1a2e;
  border-bottom: 2px solid #1a1a2e;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.speech-bubble.is-cafe {
  background: #fff4d6;
  border-color: #3d2b1f;
  max-width: min(420px, calc(100vw - 16px));
  font-size: 13px;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-height: none;
}

.speech-bubble.is-cafe::after {
  background: #fff4d6;
  border-color: #3d2b1f;
}

.speech-bubble.is-llm {
  background: #eef6ff;
  border-color: #1a3a5c;
  max-width: 220px;
}

.speech-bubble.is-llm::after {
  background: #eef6ff;
  border-color: #1a3a5c;
}

.speech-bubble.is-err {
  background: #ffe4e8;
  border-color: #e94560;
  color: #8b1e3f;
}

.speech-bubble.is-err::after {
  background: #ffe4e8;
  border-color: #e94560;
}

.speech-bubble[hidden] {
  display: none;
}

.tool-overlay {
  position: fixed;
  pointer-events: none;
  z-index: 40;
  min-width: 140px;
  max-width: min(420px, calc(100vw - 24px));
  padding: 8px 10px 6px;
  background: #0d0d1a;
  border: 3px solid #f1f1f1;
  box-shadow: 3px 3px 0 #000;
  image-rendering: pixelated;
}

.tool-overlay-title {
  font-size: 14px;
  color: #ffd166;
  margin-bottom: 6px;
}

.tool-overlay-status {
  font-size: 13px;
  margin-bottom: 0;
  line-height: 1.35;
}

.tool-overlay-status.ok {
  color: #1a936f;
}

.tool-overlay-status.err {
  color: #e94560;
}

.tool-overlay-body {
  margin: 0;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.45;
  color: #c8d4f0;
  white-space: pre-wrap;
  word-break: break-word;
}

.tool-overlay-body:not(:empty) {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #2a2a44;
}

.tool-overlay-body[hidden] {
  display: none;
}

.tool-overlay.is-funnel .tool-overlay-body {
  max-height: min(320px, 42vh);
  overflow-y: auto;
  padding-right: 4px;
}

footer {
  text-align: center;
  font-size: 12px;
  color: #6b7093;
  padding: 10px 16px;
}

@media (max-width: 800px) {
  .hud {
    top: 8px;
    right: 8px;
  }

  #refreshBtn,
  #pushBtn,
  .zoom-group button {
    min-height: 40px;
  }

  footer {
    display: none;
  }

  .tool-overlay {
    max-width: calc(100vw - 24px);
  }

  #phaserContainer {
    touch-action: none;
  }
}