/* Observer (admin spectate): the top bar, the list of players, the picker of the matches. */
.spec-bar { white-space: nowrap; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: rgba(20, 22, 30, 0.72); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; color: #eef1f6; font-size: 13px; pointer-events: auto; }
.spec-bar .spec-eye { font-size: 16px; }
.spec-bar b { letter-spacing: 0.03em; }
.spec-roster { position: absolute; left: var(--pad, 12px); top: 64px; width: 224px; max-height: calc(100vh - 140px); overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding: 8px; background: rgba(20, 22, 30, 0.62); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; color: #eef1f6; font-size: 12.5px; pointer-events: auto; }
.spec-list { display: flex; flex-direction: column; gap: 3px; }
.spec-row { position: relative; display: flex; justify-content: space-between; gap: 6px; padding: 3px 7px; border: 1px solid transparent; border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.spec-row.team0 { border-left: 3px solid #5aa0ff; }
.spec-row.team1 { border-left: 3px solid #ff7a6a; }
.spec-row.on { border-color: #f2d27a; background: rgba(242, 210, 122, 0.16); }
.spec-row.dead { opacity: 0.45; text-decoration: line-through; }
.spec-row em { font-style: normal; font-size: 11px; opacity: 0.7; }
.spec-row .spec-name, .spec-row em { position: relative; z-index: 1; }
.spec-row .spec-hp { position: absolute; left: 0; bottom: 0; height: 3px; background: #6fd08c; }
.spec-help { margin: 6px 0 0; font-size: 11px; line-height: 1.35; opacity: 0.75; }
.spec-picker { position: absolute; inset: 0; margin: auto; width: min(640px, calc(100vw - 24px)); height: fit-content; max-height: calc(100vh - 80px); display: flex; flex-direction: column; gap: 8px; padding: 12px; background: rgba(18, 20, 28, 0.94); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; color: #eef1f6; pointer-events: auto; }
.spec-picker-head { display: flex; justify-content: space-between; align-items: center; }
.spec-matches { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.spec-match { text-align: left; padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; background: rgba(255, 255, 255, 0.07); color: inherit; cursor: pointer; font-size: 13px; }
.spec-match:hover { background: rgba(255, 255, 255, 0.14); }
.spec-match.on { border-color: #f2d27a; }

/* Debug > Donjons: the live instances as compact cards (many on one screen). */
.dgd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 6px; align-items: start; }
.dgd-card { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border: 1px solid #b89a62; border-radius: 8px; background: linear-gradient(#f8efd6, #ead9b0); color: #3a2a12; font-size: 11.5px; line-height: 1.25; min-width: 0; position: relative; }
.dgd-card.bots { border-color: #6a9ac0; background: linear-gradient(#eef3f8, #d8e4ee); }
.dgd-card.fail { box-shadow: inset 3px 0 0 #c0503a; }
.dgd-head { display: flex; align-items: center; gap: 3px 4px; flex-wrap: wrap; padding-right: 34px; }
.dgd-head b { font-size: 12.5px; }
.dgd-inst { opacity: 0.6; font-size: 11px; }
.dgd-gap { flex: 1; }
.dgd-eye { position: absolute; top: 5px; right: 6px; min-height: 22px; padding: 0 7px; font-size: 12px; }
.dgd-chip { display: inline-block; padding: 0 6px; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.55); font-size: 10.5px; white-space: nowrap; }
.dgd-chip.bots { background: #cfe3f5; }
.dgd-chip.real { background: #d9eed5; }
.dgd-chip.fail { background: #f2c4b8; border-color: #c0503a; font-weight: 700; }
.dgd-meter { position: relative; display: flex; gap: 6px; padding: 1px 6px; height: 18px; align-items: center; border-radius: 4px; background: rgba(0, 0, 0, 0.12); overflow: hidden; font-size: 10.5px; }
.dgd-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(106, 143, 192, 0.55); }
.dgd-meter i.done { background: rgba(95, 176, 112, 0.6); }
.dgd-meter span, .dgd-meter em { position: relative; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgd-timeline { display: flex; align-items: center; gap: 6px; font-size: 10.5px; }
.dgd-timeline span { white-space: nowrap; }
.dgd-thin { flex: 1; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, 0.12); overflow: hidden; }
.dgd-thin i { display: block; height: 100%; background: #6a8fc0; }
.dgd-thin i.hot { background: #d6803a; }
.dgd-bar { height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.14); overflow: hidden; }
.dgd-bar i { display: block; height: 100%; background: #6a8fc0; }
.dgd-bar i.hot { background: #d6803a; }
.dgd-bar i.done { background: #5fb070; }
.dgd-bosses { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 4px; }
.dgd-pip { display: grid; grid-template-columns: 1fr auto; gap: 1px 4px; align-items: center; min-width: 0; font-size: 10.5px; }
.dgd-pip span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dgd-pip .dgd-bar { grid-column: 1 / 3; }
.dgd-pip em { font-style: normal; opacity: 0.8; }
.dgd-pip.dead span { text-decoration: line-through; opacity: 0.65; }
.dgd-pip.fight span { font-weight: 700; color: #a8501a; }
.dgd-members { display: flex; flex-wrap: wrap; gap: 3px; }
.dgd-mem { display: inline-flex; align-items: center; gap: 3px; padding: 0 5px 0 0; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 4px; background: rgba(255, 255, 255, 0.55); font-size: 10.5px; white-space: nowrap; }
.dgd-mem b { display: inline-block; min-width: 14px; padding: 0 2px; text-align: center; border-radius: 3px 0 0 3px; color: #fff; background: #8a7a60; }
.dgd-mem b.r-T { background: #4f7fb0; }
.dgd-mem b.r-S { background: #4f9a5a; }
.dgd-mem b.r-D { background: #b0584a; }
.dgd-mem u { text-decoration: none; color: #a03020; }
.dgd-mem.ok { background: #cdeed2; }
.dgd-mem.bar { background: #f2d0c6; }
.dgd-mem.out { opacity: 0.55; }
.dgd-foot { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 10.5px; opacity: 0.92; }

/* Observer on the phone (mobile/SpectateTouch.js): compact bar and list, the joysticks of the game HUD (no action bar under the camera stick). */
html.mobile .spec-bar { top: calc(var(--sat) + 4px); gap: 6px; padding: 3px 8px; font-size: 11px; max-width: calc(100vw - var(--sal) - var(--sar) - 16px); overflow: hidden; }
html.mobile .spec-bar .gf-btn { min-height: 30px; padding: 0 8px; font-size: 11px; }
html.mobile .spec-roster { left: calc(var(--sal) + 8px); top: calc(var(--sat) + 46px); width: 168px; max-height: calc(100% - var(--sat) - var(--mjoy) - 80px); font-size: 11px; padding: 5px; }
html.mobile .spec-help { font-size: 10px; }
html.mobile .mspec .mjoy-camera { bottom: calc(var(--sab) + 12px); }