.flash-engine-player {
  --flash-stage-ratio: 4 / 3;
  --flash-stage-width: 550px;
  --flash-stage-height: 400px;
  display: block;
  width: min(100%, var(--flash-stage-width));
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: #070b14;
  box-shadow: 0 22px 70px rgba(2, 6, 23, 0.35);
}

.flash-engine-player__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: var(--flash-stage-ratio);
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -20%, rgba(99, 102, 241, 0.16), transparent 48%),
    #050914;
}

.flash-engine-player__canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.flash-engine-player__input-surface {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  outline: none;
  background: transparent;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

.flash-engine-player__input-surface:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(129, 140, 248, 0.72);
}

.flash-engine-player[data-flash-fit="contain"] .flash-engine-player__canvas { object-fit: contain; }
.flash-engine-player[data-flash-fit="cover"] .flash-engine-player__canvas { object-fit: cover; }
.flash-engine-player[data-flash-fit="fill"] .flash-engine-player__canvas { object-fit: fill; }
.flash-engine-player[data-flash-fit="none"] .flash-engine-player__canvas { width: auto; height: auto; max-width: none; max-height: none; }


.flash-engine-player__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.9);
}

.flash-engine-player__controls button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.9);
  color: #f8fafc;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.flash-engine-player__controls button:hover:not(:disabled) {
  border-color: rgba(129, 140, 248, 0.74);
  background: rgba(51, 65, 85, 0.94);
}

.flash-engine-player__controls button:disabled {
  opacity: 0.45;
  cursor: default;
}

.flash-engine-player[data-flash-state="loading"] .flash-engine-player__viewport::after {
  content: "SWF wird geladen …";
  position: absolute;
  inset: auto 16px 16px;
  width: fit-content;
  padding: 8px 11px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.76);
  color: #cbd5e1;
  font: 600 12px/1 system-ui, sans-serif;
  backdrop-filter: blur(12px);
  pointer-events: none;
  z-index: 8;
}


.flash-engine-player:fullscreen {
  width: 100vw !important;
  max-width: none !important;
  height: 100vh;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

.flash-engine-player:fullscreen .flash-engine-player__viewport {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
}

.flash-engine-player:fullscreen .flash-engine-player__canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Acarde Flash Runtime diagnostics */
.acarde-flash-runtime {
  --acarde-surface: #08101f;
  --acarde-surface-2: #0d1728;
  --acarde-surface-3: #121f34;
  --acarde-border: rgba(148, 163, 184, 0.16);
  --acarde-text: #e8eef8;
  --acarde-muted: #8fa0b8;
  --acarde-accent: #8b7cf6;
  --acarde-good: #46d9a1;
  --acarde-warn: #f4bd64;
  --acarde-bad: #ff7189;
  display: block;
  width: 100%;
  color: var(--acarde-text);
  font: 14px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.acarde-runtime-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
  gap: 18px;
  align-items: start;
}

.acarde-runtime-play,
.acarde-runtime-diagnostics {
  border: 1px solid var(--acarde-border);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(16, 27, 47, .96), rgba(7, 14, 27, .98));
  box-shadow: 0 24px 70px rgba(1, 5, 15, .28);
  overflow: hidden;
}

.acarde-runtime-brand,
.acarde-diagnostics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--acarde-border);
  background: rgba(255, 255, 255, .018);
}

.acarde-runtime-brand > div,
.acarde-diagnostics-head > div:first-child {
  display: grid;
  gap: 2px;
}

.acarde-runtime-kicker {
  color: #a99cff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.acarde-runtime-brand strong,
.acarde-diagnostics-head h2 {
  margin: 0;
  color: #f8fbff;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.acarde-runtime-brand small {
  color: var(--acarde-muted);
  font-size: 12px;
}

.acarde-runtime-status,
.acarde-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--acarde-border);
  color: var(--acarde-muted);
  background: rgba(148, 163, 184, .08);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.acarde-runtime-status[data-state="ready"],
.acarde-badge[data-state="ready"] { color: #9bf3d1; border-color: rgba(70, 217, 161, .28); background: rgba(70, 217, 161, .09); }
.acarde-runtime-status[data-state="loading"],
.acarde-badge[data-state="partial"] { color: #ffd89a; border-color: rgba(244, 189, 100, .28); background: rgba(244, 189, 100, .09); }
.acarde-runtime-status[data-state="error"],
.acarde-badge[data-state="missing"] { color: #ffadbb; border-color: rgba(255, 113, 137, .28); background: rgba(255, 113, 137, .09); }
.acarde-badge[data-state="unused"],
.acarde-badge[data-state="info"] { color: #b9c6d8; background: rgba(148, 163, 184, .07); }

.acarde-runtime-player {
  padding: 20px;
  background:
    radial-gradient(circle at 18% -10%, rgba(139, 124, 246, .12), transparent 35%),
    #060b15;
}

.acarde-runtime-player > .flash-engine-player {
  margin-inline: auto;
}

.acarde-runtime-diagnostics {
  position: sticky;
  top: 14px;
  max-height: calc(100vh - 28px);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .28) transparent;
}

.acarde-diagnostics-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.acarde-diagnostics-actions button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--acarde-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: var(--acarde-text);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.acarde-diagnostics-actions button:hover {
  border-color: rgba(139, 124, 246, .52);
  background: rgba(139, 124, 246, .10);
}

.acarde-live-card,
.acarde-problems,
.acarde-diagnostic-section {
  margin: 14px;
  border: 1px solid var(--acarde-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, .025);
  overflow: hidden;
}

.acarde-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--acarde-border);
}

.acarde-section-title h3 {
  margin: 0;
  font-size: 13px;
  letter-spacing: -.01em;
}

.acarde-section-title span {
  color: var(--acarde-muted);
  font-size: 11px;
  text-align: right;
}

.acarde-live-grid,
.acarde-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--acarde-border);
}

.acarde-live-metric,
.acarde-metric {
  min-width: 0;
  padding: 11px 12px;
  background: var(--acarde-surface-2);
}

.acarde-live-metric span,
.acarde-metric span {
  display: block;
  margin-bottom: 3px;
  color: var(--acarde-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.acarde-live-metric strong,
.acarde-metric strong {
  display: block;
  min-width: 0;
  color: #f5f8fc;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acarde-live-metric[data-state="ready"] strong { color: #9bf3d1; }
.acarde-live-metric[data-state="partial"] strong { color: #ffd89a; }
.acarde-live-metric[data-state="missing"] strong { color: #ffadbb; }

.acarde-problem-list,
.acarde-diagnostic-list {
  display: grid;
}

.acarde-diagnostic-item {
  padding: 12px 14px;
  border-top: 1px solid rgba(148, 163, 184, .10);
}

.acarde-diagnostic-item:first-child { border-top: 0; }
.acarde-diagnostic-item.is-problem[data-state="missing"] { background: rgba(255, 113, 137, .045); }
.acarde-diagnostic-item.is-problem[data-state="partial"] { background: rgba(244, 189, 100, .035); }

.acarde-diagnostic-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.acarde-diagnostic-item strong {
  min-width: 0;
  color: #edf3fb;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.acarde-diagnostic-item p {
  margin: 5px 0 0;
  color: #9cacbf;
  font-size: 11px;
}

.acarde-diagnostic-item code {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 7px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .22);
  color: #bdc9da;
  font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.acarde-diagnostic-details > summary {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
}

.acarde-diagnostic-details > summary::-webkit-details-marker { display: none; }
.acarde-diagnostic-details > summary strong { font-size: 13px; }
.acarde-diagnostic-details > summary small { color: var(--acarde-muted); font-size: 10px; }

.acarde-state-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #768398;
  box-shadow: 0 0 0 4px rgba(118, 131, 152, .08);
}
.acarde-state-dot[data-state="ready"] { background: var(--acarde-good); box-shadow: 0 0 0 4px rgba(70, 217, 161, .08); }
.acarde-state-dot[data-state="partial"] { background: var(--acarde-warn); box-shadow: 0 0 0 4px rgba(244, 189, 100, .08); }
.acarde-state-dot[data-state="missing"] { background: var(--acarde-bad); box-shadow: 0 0 0 4px rgba(255, 113, 137, .08); }

.acarde-diagnostic-details[open] > summary { border-bottom: 1px solid var(--acarde-border); }
.acarde-empty { margin: 0; padding: 14px; color: var(--acarde-muted); font-size: 12px; }

@media (max-width: 1040px) {
  .acarde-runtime-shell { grid-template-columns: 1fr; }
  .acarde-runtime-diagnostics { position: static; max-height: none; }
}

@media (max-width: 620px) {
  .acarde-runtime-brand,
  .acarde-diagnostics-head { align-items: flex-start; flex-direction: column; }
  .acarde-diagnostics-actions { width: 100%; justify-content: stretch; }
  .acarde-diagnostics-actions button { flex: 1 1 auto; }
  .acarde-runtime-player { padding: 10px; }
  .acarde-live-grid,
  .acarde-overview-grid { grid-template-columns: 1fr; }
  .acarde-diagnostic-details > summary { grid-template-columns: 9px minmax(0, 1fr); }
  .acarde-diagnostic-details > summary small { grid-column: 2; }
}

/* Self-hosted player element and legacy object/embed polyfill */
acarde-player {
  display: block;
  min-width: 0;
}

acarde-player[data-acarde-fixed-size] {
  max-width: none;
}

acarde-player[data-acarde-fixed-size] .flash-engine-player__viewport {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}