/* Blinkcade player v0.2 — works in any theme; the Blinkcade theme frames the "frame" layout itself. */
.blinkcade-player {
  --bcp-bg: #070a1f;
  --bcp-bar: #0c1030;
  --bcp-line: rgba(46, 230, 255, .32);
  --bcp-ink: #f3f1ff;
  --bcp-dim: #aeb4d9;
  --bcp-cyan: #2ee6ff;
  --bcp-pink: #ff2bd6;
  --bcp-gold: #ffc81a;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  color: var(--bcp-ink);
  background: var(--bcp-bg);
  border: 1px solid var(--bcp-line);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  font-family: inherit;
}
.blinkcade-player *, .blinkcade-player *::before, .blinkcade-player *::after { box-sizing: border-box; }

.blinkcade-player__topbar,
.blinkcade-player__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 10px 14px;
  background: var(--bcp-bar);
}
.blinkcade-player__title { font-size: 1rem; letter-spacing: .02em; }
.blinkcade-player__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.blinkcade-player button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid rgba(146, 120, 255, .45);
  border-radius: 10px;
  background: rgba(20, 16, 56, .9);
  color: var(--bcp-ink);
  font: inherit;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
}
.blinkcade-player button:hover { border-color: var(--bcp-cyan); }
.blinkcade-player button:focus-visible { outline: 2px solid var(--bcp-cyan); outline-offset: 2px; }
.blinkcade-player button.is-muted { color: var(--bcp-gold); }
.blinkcade-player__icon { flex: none; }

.blinkcade-player__stage { position: relative; aspect-ratio: 16 / 9; background: #000; }
.blinkcade-player__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.blinkcade-player__loading {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(ellipse at 50% 120%, #2a1450 0%, #0b0a26 55%, #05040f 100%);
  color: var(--bcp-dim); font-size: .95rem; letter-spacing: .04em;
}
.blinkcade-player__loading[hidden] { display: none; }
.blinkcade-player__spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .15); border-top-color: var(--bcp-cyan);
  animation: bcp-spin .8s linear infinite;
}
@keyframes bcp-spin { to { transform: rotate(360deg); } }

.blinkcade-player__footer { font-size: .88rem; color: var(--bcp-dim); }
.blinkcade-player__sync[data-state="ok"] { color: var(--bcp-cyan); }
.blinkcade-player__sync[data-state="error"], .blinkcade-player__sync[data-state="warn"] { color: var(--bcp-gold); }
.blinkcade-player__sync a, .blinkcade-player__preview a { color: var(--bcp-cyan); }

.blinkcade-player__preview {
  padding: 8px 14px;
  background: rgba(255, 200, 26, .14);
  border-bottom: 1px solid rgba(255, 200, 26, .4);
  color: var(--bcp-gold);
  font-size: .9rem;
}
.blinkcade-player__preview a { margin-left: 8px; }

/* Frame layout: the game fills its container, with overlay buttons. */
.blinkcade-player--frame { height: 100%; border: 0; border-radius: inherit; box-shadow: none; background: #000; display: flex; flex-direction: column; }
.blinkcade-player--frame .blinkcade-player__stage { flex: 1; aspect-ratio: auto; min-height: 0; }
.blinkcade-player__overlay {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; gap: 6px;
  opacity: .55; transition: opacity .2s ease;
}
.blinkcade-player__overlay:hover, .blinkcade-player__overlay:focus-within { opacity: 1; }
.blinkcade-player__overlay button { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; background: rgba(7, 6, 26, .7); }
.blinkcade-player__toast {
  position: absolute; left: 12px; bottom: 12px; z-index: 2; max-width: calc(100% - 24px);
  padding: 7px 12px; border-radius: 10px;
  background: rgba(7, 6, 26, .82); border: 1px solid var(--bcp-line);
  color: var(--bcp-ink); font-size: .85rem;
  pointer-events: none;
}
.blinkcade-player__toast[hidden] { display: none; }
.blinkcade-player__toast[data-state="ok"] { border-color: rgba(46, 230, 255, .6); }
.blinkcade-player__toast[data-state="error"], .blinkcade-player__toast[data-state="warn"] { border-color: rgba(255, 200, 26, .7); color: var(--bcp-gold); }

/* Preview banner over a framed game: solid enough to read, buttons moved below it. */
.blinkcade-player--frame .blinkcade-player__preview {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  background: rgba(24, 16, 0, .88);
}
.blinkcade-player--frame .blinkcade-player__preview ~ .blinkcade-player__stage .blinkcade-player__overlay { top: 48px; }

/* Fullscreen: the stage fills the screen. */
.blinkcade-player__stage:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; }
.blinkcade-player__stage:-webkit-full-screen { width: 100%; height: 100%; }

.blinkcade-player-notice,
.blinkcade-account { padding: 20px; border: 1px solid rgba(46, 230, 255, .3); border-radius: 14px; background: #0b0d2a; color: #f3f1ff; }

@media (max-width: 600px) {
  .blinkcade-player--full button span { display: none; }
  .blinkcade-player--full button { width: 38px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .blinkcade-player__spinner { animation: none; }
}