/* Comic-Grafikebene: dieselben Zustände, Farben, Bedienelemente und Zeitabläufe. */
[data-comic] {
  --art-x: 0%; --art-y: 0%;
  display: inline-block;
  width: 1.4rem; height: 1.4rem;
  flex: 0 0 auto;
  background: url('../img/comic/icons.png') var(--art-x) var(--art-y) / 400% 400% no-repeat;
  font-size: 0 !important;
  vertical-align: middle;
}
[data-comic="tech"] { --art-x: 33.333333%; }
[data-comic="sales"] { --art-x: 66.666667%; }
[data-comic="training"] { --art-x: 100%; }
[data-comic="callback"] { --art-y: 33.333333%; }
[data-comic="repeat"] { --art-x: 33.333333%; --art-y: 33.333333%; }
[data-comic="vip"] { --art-x: 66.666667%; --art-y: 33.333333%; }
[data-comic="unknown"] { --art-x: 100%; --art-y: 33.333333%; }
[data-comic="happy"] { --art-y: 66.666667%; }
[data-comic="neutral"] { --art-x: 33.333333%; --art-y: 66.666667%; }
[data-comic="angry"] { --art-x: 66.666667%; --art-y: 66.666667%; }
[data-comic="pause"] { --art-x: 100%; --art-y: 66.666667%; }
[data-comic="info"] { --art-y: 100%; }
[data-comic="acd"] { --art-x: 33.333333%; --art-y: 100%; }
[data-comic="coffee"] { --art-x: 66.666667%; --art-y: 100%; }
[data-comic="sick"] { --art-x: 100%; --art-y: 100%; }

.agent-avatar .av-icon.primary[data-comic] { width: 26px; height: 26px; }
.agent-avatar.size-sm .av-icon.primary[data-comic] { width: 24px; height: 24px; }
.av-second .av-icon.secondary[data-comic] { width: 16px; height: 16px; }
.agent-avatar { box-shadow: inset 0 1px 0 #ffffff40, 0 2px 0 #080d18; }
.call-chip .icon[data-comic] { width: 29px; height: 29px; }
.call-chip .mood[data-comic] { width: 17px; height: 17px; }
.call-chip .chip-badge[data-comic] { width: 15px; height: 15px; }
.call-chip { background-image: linear-gradient(150deg, #ffffff09, transparent 65%); }
.call-chip.selected { background-image: linear-gradient(150deg, #ffffff12, transparent 65%); }

/* Nur das bisherige Zustandsgesicht wird zur Figur. Die Skill-Avatare bleiben eigenständig. */
.agent-state[data-portrait] {
  position: relative; display: inline-block;
  width: 26px; height: 26px;
  margin: -3px 0;
  font-size: 0;
  background: url('../img/comic/team.png') var(--portrait-x, 0%) var(--portrait-y, 0%) / 800% 300% no-repeat;
  flex: 0 0 auto;
}
.agent-state[data-portrait="busy"] {
  --portrait-y: 50%;
  /* Die Sprechblasenreihe ist im Atlas um 16 Quellpixel nach rechts versetzt. */
  background-position-x: calc(var(--portrait-x, 0%) - 1.625px);
}
.agent-state[data-portrait="stressed"] { --portrait-y: 100%; }
.agent-state[data-portrait="break"] { filter: saturate(.65); }
.agent-state[data-portrait="training"]::after,
.agent-state[data-portrait="break"]::after,
.agent-state[data-portrait="sick"]::after {
  content: ''; position: absolute; right: -2px; bottom: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: #17202d url('../img/comic/icons.png') 100% 0% / 400% 400% no-repeat;
}
.agent-state[data-portrait="break"]::after { background-position: 66.666667% 100%; }
.agent-state[data-portrait="sick"]::after { background-position: 100% 100%; }
/* Bei Stress im Gespräch bleiben beide Signale sichtbar: Rauch im Bild und Sprechblase darüber. */
.agent-card.busy .agent-state[data-portrait="stressed"]::before {
  content: '•••'; position: absolute; right: -3px; top: 8px;
  width: 13px; height: 9px; border: 1px solid #101a2b; border-radius: 6px;
  background: #fff5df; color: #101a2b; font: 700 7px/8px sans-serif; text-align: center;
}
.agent-card.busy .agent-state[data-portrait="stressed"]::after {
  content: ''; position: absolute; right: 1px; top: 17px;
  border-top: 3px solid #fff5df; border-right: 3px solid transparent;
}
.agent-card {
  background-image: radial-gradient(ellipse at top left, #ffffff08, transparent 70%);
}
.agent-name { color: #f4f1eb; }
.stress-track { box-shadow: inset 0 1px 2px #0009; }
.tier-tag.in-agent-card { box-shadow: inset 0 1px 0 #ffffff10; }

.game-toolbar { background-image: linear-gradient(#ffffff04, transparent); }
.tool-btn { background-image: linear-gradient(160deg, #ffffff06, transparent 65%); }
.tool-icon[data-comic] { width: 22px; height: 22px; }
.octopus-icon { width: 26px; height: 26px; max-width: 26px; }
.info-btn, .header-info-btn { font-size: 0; }
.info-btn { position: relative; display: inline-flex; align-self: center; width: 13px; height: 13px; }
.info-btn::before, .header-info-btn::before {
  content: ''; display: inline-block; width: 18px; height: 18px;
  background: url('../img/comic/icons.png') 0% 100% / 400% 400% no-repeat;
}
.info-btn::before { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* Ruhige Papier-/Comicakzente, ohne neue Animation oder verdeckte Spielfläche. */
.milestone-banner { border: 1px solid #eab35a80; border-radius: 4px 9px 4px 9px; }
.milestone-banner > div:first-child { color: #ffe4ae; }
.card-points { -webkit-text-stroke: .4px #0a1420; text-shadow: 1px 2px 0 #080d18; }
#screen-game { background-image: radial-gradient(ellipse at 100% 100%, #1a294122, transparent 60%); }

@media (max-width: 374px), (max-height: 640px) {
  .agent-state[data-portrait] { width: 22px; height: 22px; margin: -2px 0; }
  .agent-state[data-portrait="busy"] { background-position-x: calc(var(--portrait-x, 0%) - 1.375px); }
}