/* The approved Case File art supplies both portraits, including their paw badges.
   CSS clips that single unchanged image; all dossier copy and progress stay live. */
#loading {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  align-items: safe center;
  overflow: auto;
  padding: max(14px, var(--tg-safe-top)) max(10px, var(--tg-safe-right))
    max(14px, var(--tg-safe-bottom)) max(10px, var(--tg-safe-left));
  background: #051222;
  color: #f5f5ed;
  font-family: "Courier New", Courier, monospace;
  -webkit-text-size-adjust: 100%;
  touch-action: pan-y;
}
#loading[hidden], #loading [hidden] { display: none !important; }
.mission-dossier {
  width: 100%;
  max-width: 500px;
  margin: auto;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.9vh, 30px);
  opacity: 1;
  transition: opacity 420ms ease;
}
.mission-dossier.is-fading { opacity: 0; pointer-events: none; }
.mission-brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(32px, 12vw, 52px);
  gap: 6px 8px;
  align-items: center;
  padding: 0 4px 3px;
}
.mission-brand h1 {
  margin: 0;
  color: #ffd779;
  font: 900 clamp(21px, 6.8vw, 43px)/1.08 Georgia, "Times New Roman", serif;
  letter-spacing: .05em;
  text-shadow: 0 1px 0 #6e5126;
  white-space: nowrap;
}
.mission-brand .protocol-word {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 7px;
  color: #a2effc;
  font: 700 clamp(14px, 4.3vw, 22px)/1.15 "Courier New", monospace;
  letter-spacing: .3em;
}
.protocol-word::before, .protocol-word::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #47d6f8;
}
.paw-emblem { width: 100%; height: auto; display: block; fill: currentColor; }
.brand-paw { color: #49dffe; filter: drop-shadow(0 0 5px #22c8fa88); }
.agent-file {
  position: relative;
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: stretch;
  min-width: 0;
  border: 1px solid #968367;
  border-radius: 7px 10px 13px 5px;
  background:
    repeating-linear-gradient(127deg, transparent 0 17px, #d2bc9020 18px, transparent 19px 59px),
    repeating-linear-gradient(35deg, #a6e6ee06 0 1px, transparent 1px 4px),
    linear-gradient(135deg, #233745, #102437 52%, #172c3c);
  box-shadow: 0 4px 0 -2px #071629, 0 5px 0 -2px #46cfe0, 0 12px 24px #0005;
}
.agent-file::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed #e2c68b35;
  border-radius: 3px 6px 9px 2px;
  pointer-events: none;
}
.agent-file::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -8px;
  height: 3px;
  border-bottom: 1px solid #52e7f680;
  transform: skewX(-28deg);
}
.agent-tab {
  position: absolute;
  top: -16px;
  right: 14px;
  padding: 4px 12px 3px;
  border: 1px solid #dfc987;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(100deg, #a98542, #f2d993 46%, #bea063);
  color: #211d17;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.agent--truffle { grid-template-columns: 54% 46%; }
.agent--truffle .agent-tab { right: auto; left: 14px; }
.photo-frame {
  position: relative;
  align-self: center;
  min-width: 0;
  margin: 13px 5px 13px 12px;
  border: 6px solid #bcaf8c;
  border-top-color: #d3c8a8;
  border-right-color: #d3c8a8;
  background: #b6a886;
  box-shadow: 2px 5px 7px #0008;
  transform: rotate(-3deg);
}
.photo-frame::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -17px;
  left: 10px;
  width: 7px;
  height: 32px;
  border: 2px solid #d5aa5d;
  border-radius: 8px;
  transform: rotate(-6deg);
  box-shadow: inset 1px 0 0 #ffefb7, 2px 1px 2px #0009;
}
.agent--truffle .photo-frame { margin: 13px 12px 13px 5px; transform: rotate(4deg); }
.agent--truffle .photo-frame::after { left: auto; right: 9px; transform: rotate(7deg); }
.agent-portrait { position: relative; overflow: hidden; aspect-ratio: 210 / 249; }
.agent-portrait img { position: absolute; max-width: none; display: block; }
.portrait-peanut img {
  width: 731.428572%; height: 411.24498%; left: -121.428572%; top: -95.983936%;
}
.portrait-truffle { aspect-ratio: 181 / 238; }
.portrait-truffle img {
  width: 848.618785%; height: 430.252101%; left: -274.585636%; top: -241.596639%;
}
.agent-copy { min-width: 0; padding: 16px 12px 10px 6px; display: flex; flex-direction: column; }
.agent--truffle .agent-copy { padding: 16px 6px 10px 14px; }
.agent-copy h2 {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #76e9f2;
  color: #f7d581;
  font: 800 clamp(21px, 6.1vw, 30px)/1.05 Arial, sans-serif;
  letter-spacing: .01em;
}
.agent-role { margin: 7px 0 8px; padding-bottom: 7px; border-bottom: 1px solid #5bd6e085; color: #9cecf5; font-size: clamp(11px, 3.2vw, 15px); line-height: 1.22; letter-spacing: .025em; }
.agent-motto { margin: 0 0 9px; font-size: clamp(11px, 3vw, 14px); line-height: 1.4; font-family: Arial, sans-serif; }
.ability-label { color: #36e6f9; font-size: clamp(10px, 2.95vw, 13px); line-height: 1.2; letter-spacing: .03em; }
.agent-ability { display: block; margin: 4px 0 0; font-size: clamp(12px, 3.3vw, 16px); line-height: 1.3; }
.ability-detail { margin: 4px 0 0; font-size: clamp(11px, 3.05vw, 14px); line-height: 1.25; }
.verified { display: flex; gap: 6px; align-items: center; margin-top: auto; padding-top: 15px; color: #58afd2; }
.verified .paw-emblem { width: 25px; opacity: .65; }
.verified span { display: inline-block; border: 2px solid currentColor; border-radius: 3px; padding: 4px 5px; font-size: clamp(9px, 2.7vw, 12px); font-weight: 700; white-space: nowrap; transform: rotate(-10deg); }
.mission-loading-status { padding: 3px 9px 0; }
.progress-heading { display: flex; gap: 8px; align-items: center; justify-content: space-between; color: #a4eff6; }
#mission-status { font-size: clamp(10px, 2.9vw, 14px); line-height: 1.3; letter-spacing: .055em; }
#mission-percent { color: #57e7ff; font: 700 clamp(25px, 7vw, 35px)/1 Arial, sans-serif; }
.track { position: relative; height: 28px; margin-top: 9px; padding: 4px; border: 1px solid #59d2ec; border-radius: 2px; background: #031323; box-shadow: 0 0 11px #11bbdd1c; }
.track-inner { height: 100%; overflow: hidden; background: repeating-linear-gradient(90deg, #29455955 0 14px, transparent 14px 18px); }
#bar { position: relative; width: 0%; height: 100%; background: repeating-linear-gradient(90deg, #5be8fc 0 14px, transparent 14px 18px); transition: width 100ms linear; }
#bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, #edffffa8 50%, transparent 75%); animation: packet-scan 2.6s linear infinite; transform: translateX(-100%); }
@keyframes packet-scan { to { transform: translateX(100%); } }
.connection-caption { margin: 13px 0 0; color: #55d6e5; font-size: 10px; letter-spacing: .14em; text-align: center; }
.mission-ready { width: 100%; max-width: 470px; display: grid; place-items: center; padding: 20px 7px; }
.accept-mission {
  position: relative;
  width: 100%;
  min-height: 118px;
  padding: 5px;
  border: 0;
  background: linear-gradient(145deg, #fff1a7, #d59b30 40%, #ffdc74 68%, #91601d);
  color: #ffdc73;
  clip-path: polygon(6% 0, 94% 0, 100% 18%, 100% 82%, 94% 100%, 6% 100%, 0 82%, 0 18%);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.accept-inner {
  min-height: 110px;
  display: grid;
  grid-template-columns: 28% 1fr;
  align-items: center;
  gap: 14px;
  padding: 17px 24px;
  background: radial-gradient(ellipse at 50% 0, #66472485, transparent 70%), linear-gradient(120deg, #151b22, #111b27);
  clip-path: polygon(5% 0, 95% 0, 100% 16%, 100% 84%, 95% 100%, 5% 100%, 0 84%, 0 16%);
  box-shadow: inset 0 0 12px #e9b74c88;
}
.accept-inner > .paw-emblem { width: 100%; max-width: 75px; filter: drop-shadow(0 0 5px #efb42db0); }
.accept-label { display: block; padding-left: 15px; border-left: 1px solid #d6ae55; font: 800 clamp(25px, 7.3vw, 38px)/1.05 Arial, sans-serif; letter-spacing: .025em; text-align: left; text-shadow: 0 0 12px #e6aa3c88; }
.accept-mission:hover { background: #ffea99; }
.accept-mission:focus-visible { outline: none; background: #fff7d0; }
.accept-mission:focus-visible .accept-inner { outline: 3px solid #fff2b8; outline-offset: -9px; }
.accept-mission:active { transform: scale(.985); }
.accept-mission:disabled { cursor: default; }
.mission-error { max-width: 430px; padding: 24px; border: 1px solid #59d2ec; border-radius: 4px; line-height: 1.5; overflow-wrap: anywhere; }
.mission-error h2 { color: #ffd779; font-size: 21px; }
.mission-error p { font: 16px/1.5 Arial, sans-serif; }
.reduce-motion #bar::after { animation: none; display: none; }
.reduce-motion .mission-dossier, .reduce-motion #bar { transition: none; }
.reduce-motion .accept-mission:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  #bar::after { animation: none; display: none; }
  .mission-dossier, #bar { transition: none; }
  .accept-mission:active { transform: none; }
}
@media (max-height: 680px) {
  .mission-dossier { gap: 20px; padding-top: 7px; padding-bottom: 7px; }
  .agent-copy { padding-top: 12px; }
  .agent--truffle .agent-copy { padding-top: 12px; }
  .agent-role { margin-top: 5px; margin-bottom: 6px; padding-bottom: 5px; }
  .verified { padding-top: 9px; }
  .connection-caption { margin-top: 8px; }
}