[data-external-player] {
  --external-coral: #ff7a68;
  --external-teal: #58d5c9;
  --external-ink: #18152a;
  --external-panel: #24203a;
  --external-muted: #bbb7cf;
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border-radius: 1rem;
  background: var(--external-ink);
  color: #f7f4ff;
}

[data-external-player] [hidden] {
  display: none !important;
}

.external-player__consent {
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--external-teal) 38%, transparent);
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--external-panel) 92%, transparent);
  color: var(--external-muted);
  line-height: 1.5;
}

.external-player__consent strong {
  color: #fff;
}

.external-player__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

[data-external-player] button,
[data-external-provider-link],
[data-external-privacy-link] {
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  border: 1px solid color-mix(in srgb, var(--external-teal) 58%, transparent);
  border-radius: 999px;
  background: var(--external-panel);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

[data-external-load] {
  border-color: transparent;
  background: var(--external-coral);
  color: var(--external-ink);
}

[data-external-player] button:focus-visible,
[data-external-provider-link]:focus-visible,
[data-external-privacy-link]:focus-visible {
  outline: 3px solid var(--external-teal);
  outline-offset: 3px;
}

[data-external-player] button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

[data-external-provider-link]:not([href]),
[data-external-privacy-link]:not([href]) {
  display: none;
}

[data-external-stage] {
  display: grid;
  width: 100%;
  aspect-ratio: var(--external-aspect, 16 / 9);
  min-height: 14rem;
  overflow: hidden;
  border-radius: 1rem;
  background: #100e1c;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}

[data-external-stage]:empty::before {
  place-self: center;
  max-width: 30rem;
  padding: 1.5rem;
  color: var(--external-muted);
  text-align: center;
  content: "The external game stays unloaded until you choose Load game.";
}

[data-external-stage] iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #100e1c;
}

[data-external-status] {
  min-height: 1.5em;
  margin: 0;
  color: var(--external-muted);
  line-height: 1.5;
}

[data-external-player]:fullscreen {
  box-sizing: border-box;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100vw;
  height: 100vh;
  padding: 1rem;
  background: var(--external-ink);
}

[data-external-player]:fullscreen [data-external-stage] {
  aspect-ratio: auto;
  min-height: 0;
}

@media (max-width: 42rem) {
  [data-external-stage] {
    min-height: 11rem;
  }

  [data-external-player] button,
  [data-external-provider-link],
  [data-external-privacy-link] {
    flex: 1 1 9.5rem;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-external-player] *,
  [data-external-player] *::before,
  [data-external-player] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.external-game-room .external-player{padding:20px;border:1px solid #584966;border-radius:20px;background:#211b2b;box-shadow:0 14px 38px #30203922}
.external-preplay{display:grid;grid-template-columns:minmax(220px,.85fr) minmax(0,1.15fr);gap:26px;align-items:center;padding:24px 8px}
.external-preplay__art{min-width:0;overflow:hidden;border-radius:14px;background:#16111f}
.external-preplay__art img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.external-preplay__copy h2{margin:6px 0 12px;font-size:clamp(1.5rem,2.5vw,2.25rem);line-height:1.08;color:#fff8f1}
.external-preplay__copy>.eyebrow{font-size:.75rem;color:#ffc784}
.external-preplay__copy>p{color:#ddd0e6;line-height:1.5}
.external-player__consent{font-size:.875rem;margin:18px 0}
.external-player__consent p{margin:0 0 12px}
.external-player__consent p:last-child{margin:12px 0 0}
.external-player__consent label{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:8px 0;color:#fff8ef;font-weight:700;cursor:pointer}
.external-player__consent input{width:20px;height:20px;min-width:20px;margin:3px 0 0;accent-color:#f2a348}
.external-player__consent a,.external-original-link{color:#ffcf96;text-underline-offset:3px}
.external-original-link{min-height:44px;display:inline-flex;align-items:center;padding:8px 12px;font-weight:700}
.external-game-room [data-external-load]{background:#ffd077;color:#27182d;border-color:#ffd077;min-width:150px}
.external-player__footnote{margin:0;color:#c9bdd4;font-size:.8125rem;line-height:1.45}
.external-game-details{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:32px 0;padding:26px 0;border-top:1px solid #ddd0df;border-bottom:1px solid #ddd0df}
.external-game-details section{min-width:0}
.external-game-details h2{font-size:1.25rem;margin:0 0 12px}
.external-game-details p,.external-game-details li{font-size:.9375rem;line-height:1.6;color:#655b6b}
.external-game-details li{margin-bottom:6px}
.external-player:fullscreen .external-player__footnote{display:none}
.external-player:fullscreen{max-width:none!important;overflow:auto}
@media(max-width:760px){.external-preplay{grid-template-columns:1fr;gap:18px;padding:10px 0}.external-preplay__art{max-width:480px}.external-preplay__art img{aspect-ratio:16/7}.external-game-room .external-player{padding:14px}.external-game-details{grid-template-columns:1fr;gap:20px}.external-player__actions{gap:8px}}
