/* The play host surface styles, ported verbatim from
   frontend/src/app/pages/play/play.component.scss (SPEC_PLAY section 6.3 /
   SPEC_CSS section 4A). The Angular component was ViewEncapsulated (emulated), so
   every selector here is wrapped under the page-root class .arcade-play to reproduce
   that isolation in vanilla (and the Angular :host becomes .arcade-play itself). The
   shared kit mf-* classes are NOT wrapped - they come from shell.css globally. These
   rules read the --app-* gorilla-dark tokens (tokens.css) plus --game-accent and the
   --play-safe-* insets (set inline per page, default 0). Values are byte-for-byte the
   original; only the .arcade-play prefix and the :host rewrite are added. Loads last
   in the order base -> tokens -> shell -> hub -> play. */

/* :host - the play page root. Pins the host out of the padded studio column so
   the game fills the viewport edge-to-edge. */
.arcade-play {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: block;
}

/* The full-bleed shell. Tracks the Telegram fullscreen viewport height. */
.arcade-play .play-shell {
  position: relative;
  width: 100%;
  height: var(--tg-viewport-height, 100dvh);
  min-height: 0;
  overflow: hidden;
  background: var(--app-bg);
  touch-action: none;
}

/* The canvas fills the shell (dead path). */
.arcade-play .play-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* The embedded kit bundle iframe fills the shell edge to edge, no chrome. */
.arcade-play .play-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* * Brand cover layer
   A plain full-bleed cover that masks the host shell for the brief moment before
   the iframe paints, then is removed on the iframe load event. It carries no
   spinner and no "loading" text: its only job is to avoid a blank/shell-bg flash
   and hand off seamlessly to the iframe's own "Mire Games" kit splash. The
   background therefore matches the kit splash gradient exactly (shell.css
   .mf-splash uses the same linear-gradient over --mf-bg / --mf-bg-2), so there is
   no color jump between this cover and the splash inside the iframe. */
.arcade-play .play-loading {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--mf-bg) 0%, var(--mf-bg-2) 100%);
}

.arcade-play .play-spinner-sm {
  width: 26px;
  height: 26px;
  border-width: 2px;
}

/* * Error states */
.arcade-play .play-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: calc(24px + var(--play-safe-top, 0px)) calc(24px + var(--play-safe-right, 0px))
    calc(24px + var(--play-safe-bottom, 0px)) calc(24px + var(--play-safe-left, 0px));
  text-align: center;
  background: var(--app-bg);
}

.arcade-play .play-error-title {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--game-accent);
}

.arcade-play .play-error-body {
  margin: 0;
  font-size: 1rem;
  color: var(--app-text-secondary);
}

.arcade-play .play-error-action {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* * Pause control */
.arcade-play .play-pause-btn {
  position: absolute;
  top: calc(12px + var(--play-safe-top, 0px));
  right: calc(12px + var(--play-safe-right, 0px));
  z-index: 4;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--app-border);
  border-radius: 50%;
  background: var(--app-surface);
  color: var(--app-text-primary);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: background 0.15s ease, transform 0.1s ease;
}

.arcade-play .play-pause-btn:active {
  transform: scale(0.94);
}

.arcade-play .play-pause-btn:hover {
  background: var(--app-hover);
}

/* * Overlay scaffold */
.arcade-play .play-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(20px + var(--play-safe-top, 0px)) calc(20px + var(--play-safe-right, 0px))
    calc(20px + var(--play-safe-bottom, 0px)) calc(20px + var(--play-safe-left, 0px));
}

.arcade-play .play-dim {
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.arcade-play .play-card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 22px 20px;
  border: 1px solid var(--app-border);
  border-top: 3px solid var(--game-accent);
  border-radius: var(--app-radius-lg);
  background: var(--app-card);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  animation: play-rise 0.22s ease;
}

.arcade-play .play-card-scroll {
  max-height: 88%;
  overflow-y: auto;
}

.arcade-play .play-card-title {
  margin: 0;
  text-align: center;
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--app-text-primary);
}

.arcade-play .play-card-subtitle {
  margin: 0;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--app-text-secondary);
}

/* * Game over content */
.arcade-play .play-newbest {
  align-self: center;
  padding: 5px 16px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-text-on-accent);
  background: var(--game-accent);
}

.arcade-play .play-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.arcade-play .play-score-label {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-text-muted);
}

.arcade-play .play-score-value {
  font-size: 2.875rem;
  font-weight: 800;
  line-height: 1;
  color: var(--game-accent);
}

.arcade-play .play-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--app-radius-md);
  background: var(--app-elevated);
}

.arcade-play .play-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9375rem;
}

.arcade-play .play-summary-label {
  color: var(--app-text-secondary);
}

.arcade-play .play-summary-value {
  font-weight: 700;
  color: var(--app-text-primary);
}

.arcade-play .play-submit {
  margin-top: 2px;
}

.arcade-play .play-double {
  margin-top: 2px;
  border-color: var(--game-accent);
  color: var(--game-accent);
}

/* * Mini leaderboard */
.arcade-play .play-board {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.arcade-play .play-board-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-text-secondary);
}

.arcade-play .play-board-loading {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

.arcade-play .play-board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.arcade-play .play-board-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--app-radius-sm);
  background: var(--app-elevated);
  font-size: 0.9375rem;
}

.arcade-play .play-board-me {
  background: var(--app-accent-subtle);
  border: 1px solid var(--game-accent);
}

.arcade-play .play-board-rank {
  width: 24px;
  font-weight: 700;
  color: var(--app-text-muted);
}

.arcade-play .play-board-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--app-text-primary);
}

.arcade-play .play-board-score {
  font-weight: 700;
  color: var(--app-text-primary);
}

.arcade-play .play-board-empty {
  margin: 0;
  padding: 8px 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--app-text-muted);
}

/* * Actions */
.arcade-play .play-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.arcade-play .play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 600;
}

.arcade-play .play-btn-primary {
  background: var(--game-accent);
  color: var(--app-text-on-accent);
}

/* * Keyframes */
@keyframes play-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes play-rise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}