/*
 * Arrows: Puzzle Escape — styles. Project language English; UI text (in the
 * markup / JS) is Polish. Light is default; [data-theme="dark"] inverts.
 */
.ag-root {
  --ag-fg: #0a0a0a;
  --ag-muted: #6b7280;
  --ag-accent: #E8A317;
  --ag-card-bg: #fff8e7;
  --ag-card-border: rgba(10, 10, 10, 0.12);
  --ag-btn-bg: #0a0a0a;
  --ag-btn-fg: #FFD60A;
  --ag-overlay-bg: rgba(10, 10, 10, 0.55);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--ag-fg);
  -webkit-user-select: none;
  user-select: none;
}

.ag-root[data-theme="dark"] {
  --ag-fg: #fbf7ef;
  --ag-muted: #9aa0a6;
  --ag-accent: #FFD60A;
  --ag-card-bg: #161616;
  --ag-card-border: rgba(255, 255, 255, 0.14);
  --ag-overlay-bg: rgba(0, 0, 0, 0.6);
  /* Buttons stay branded (dark/gold) in both themes: the host page is light,
     so inverting them would make them blend into the background. */
}

.ag-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 12px;
  flex-wrap: wrap;
}

.ag-info {
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-weight: 700;
  /* HUD chrome sits on the light host page in BOTH themes (only the board
     inverts), so its text uses fixed colors — mirroring the buttons. Tying
     it to --ag-fg would turn the label near-white and invisible in dark. */
  color: #0a0a0a;
}

.ag-level { font-size: 1.05rem; }
.ag-score { font-size: 1.05rem; font-weight: 800; color: #B22834; }
.ag-moves { color: #6b7280; font-weight: 600; }

/* Floating "+N" / "-N" that flashes next to the score on each point change. */
.ag-score-pop {
  font-size: 0.9rem;
  font-weight: 800;
  opacity: 0;
  margin-left: -8px;
  pointer-events: none;
  white-space: nowrap; /* keep "+750 ×3 seria" on one line */
}
.ag-score-pop.ag-pop-up { color: #2e7d32; }
.ag-score-pop.ag-pop-down { color: #B22834; }
.ag-score-pop.ag-pop-go { animation: ag-score-pop 0.9s ease-out; }
@keyframes ag-score-pop {
  0%   { opacity: 1; transform: translateY(2px); }
  100% { opacity: 0; transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .ag-score-pop.ag-pop-go { animation: none; }
}

/* Persistent streak badge in the HUD — "×3 seria" while on a roll. Fixed
   colors (like the rest of the HUD chrome, which sits on the light host page in
   both themes). A gentle pulse draws the eye when the multiplier climbs. */
.ag-combo {
  font-size: 0.92rem;
  font-weight: 800;
  color: #2e7d32;
  white-space: nowrap;
}
.ag-combo[hidden] { display: none; }
.ag-combo.ag-combo-go { animation: ag-combo-pulse 0.45s ease-out; }
@keyframes ag-combo-pulse {
  0%   { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ag-combo.ag-combo-go { animation: none; }
}

.ag-actions { display: flex; gap: 8px; }

.ag-btn {
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  padding: 8px 14px;
  background: var(--ag-btn-bg);
  color: var(--ag-btn-fg);
  transition: transform 0.08s ease, opacity 0.15s ease;
}
.ag-btn:hover { opacity: 0.9; }
.ag-btn:active { transform: translateY(1px); }
/* Restart locked during the opening clock (anti-cheat): dimmed, no pointer. */
.ag-btn.ag-disabled,
.ag-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* "Grasz jako: <name>" — always-visible identity chip under the HUD. Fixed
   colors like the rest of the HUD chrome (sits on the light host page in both
   themes). It's a button: tapping it re-opens the name gate to change name. */
.ag-playas {
  align-self: flex-start;
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  color: #6b7280;
  background: transparent;
  border: 0;
  padding: 0;
  margin: -6px 0 -2px;
  cursor: pointer;
  text-align: left;
}
.ag-playas[hidden] { display: none; }
.ag-playas-name { color: #B22834; font-weight: 800; }
.ag-playas-act {
  color: #6b7280;
  font-weight: 600;
  font-size: 0.82rem;
  margin-left: 6px;
  text-decoration: underline;
}
.ag-playas:hover .ag-playas-act,
.ag-playas:focus-visible .ag-playas-act { color: #0a0a0a; }

/* ---- Opening-move timer (high levels) ------------------------------------
   Full-width chip above the board: "Znajdź pierwszą strzałkę" + seconds left,
   with a draining progress bar. Turns red in the last 3s. */
.ag-timer {
  width: 100%;
  margin: -2px 0 2px;
}
.ag-timer[hidden] { display: none; }
.ag-timer-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--ag-fg);
  margin-bottom: 5px;
}
.ag-timer-num { font-variant-numeric: tabular-nums; color: #2e7d32; }
.ag-timer-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.12);
  overflow: hidden;
}
.ag-timer-bar {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: #2e7d32;
  transition: width 0.12s linear, background-color 0.2s ease;
}
.ag-timer.ag-timer-urgent .ag-timer-num { color: #B22834; }
.ag-timer.ag-timer-urgent .ag-timer-bar {
  background: #B22834;
  animation: ag-timer-pulse 0.7s ease-in-out infinite;
}
@keyframes ag-timer-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-timer-bar { transition: width 0.12s linear; }
  .ag-timer.ag-timer-urgent .ag-timer-bar { animation: none; }
}

.ag-board-wrap {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.ag-canvas {
  display: block;
  touch-action: manipulation; /* avoid double-tap zoom / scroll on taps */
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.ag-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ag-overlay-bg);
  border-radius: 12px;
}
.ag-overlay[hidden] { display: none; }

.ag-overlay-card {
  background: var(--ag-card-bg);
  border: 1px solid var(--ag-card-border);
  border-radius: 14px;
  padding: 22px 26px;
  text-align: center;
  max-width: 80%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.ag-win-text {
  margin: 0 0 16px;
  font-size: 1.15rem;
  font-weight: 800;
}

/* ---- Shared leaderboard (top players) ------------------------------------ */
.ag-leaderboard {
  width: 100%;
  max-width: 360px;
  margin: 2px auto 0;
  background: var(--ag-card-bg);
  border: 1px solid var(--ag-card-border);
  border-radius: 12px;
  padding: 12px 16px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.ag-lb-title {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #B22834;
  text-align: center;
}
.ag-lb-list {
  list-style: none;
  counter-reset: ag-rank;
  margin: 0;
  padding: 0;
}
.ag-lb-row {
  counter-increment: ag-rank;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  font-weight: 700;
  color: var(--ag-fg);
  border-top: 1px solid var(--ag-card-border);
}
.ag-lb-row:first-child { border-top: 0; }
.ag-lb-row::before {
  content: counter(ag-rank) ".";
  width: 1.4em;
  flex: 0 0 auto;
  color: var(--ag-accent);
  font-weight: 800;
}
.ag-lb-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ag-lb-score { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.ag-lb-me { color: #B22834; }
.ag-lb-me .ag-lb-score { color: #B22834; }

/* The player's own standing, appended when they're outside the visible top 3.
   It does NOT use the CSS rank counter (its rank is arbitrary), so the rank is
   rendered explicitly. A dashed divider sets it apart from the podium. */
.ag-lb-self {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0 2px;
  margin-top: 4px;
  font-weight: 800;
  border-top: 2px dashed var(--ag-card-border);
}
.ag-lb-self .ag-lb-self-rank {
  flex: 0 0 auto;
  min-width: 1.4em;
  color: #B22834;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ag-lb-empty {
  text-align: center;
  color: var(--ag-muted);
  font-weight: 600;
  padding: 6px 0;
}

/* ---- Player name gate (asked once at the start) -------------------------- */
.ag-namegate {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.ag-namegate[hidden] { display: none; }
.ag-namegate-card {
  background: #fff8e7;
  color: #0a0a0a;
  border: 3px solid #0a0a0a;
  border-radius: 16px;
  box-shadow: 8px 8px 0 #0a0a0a;
  padding: 22px 22px 24px;
  width: 100%;
  max-width: 340px;
  text-align: center;
}
.ag-namegate-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 8px;
}
.ag-namegate-desc {
  font-size: 0.92rem;
  color: #333;
  margin: 0 0 16px;
}
.ag-name-input {
  font: inherit;
  font-weight: 700;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  margin-bottom: 12px;
  border: 2.5px solid #0a0a0a;
  border-radius: 10px;
  background: #fff;
  color: #0a0a0a;
}
.ag-name-input:focus { outline: none; border-color: #E63946; }
.ag-name-go { display: block; width: 100%; }

/* ---- Between-levels promo (interstitial ad) ------------------------------
 * Full-screen modal shown every few cleared levels. Branded (paper card on a
 * dimmed backdrop) with FIXED colors in both themes — it sits above the whole
 * page, so tying it to the theme vars would make it disappear on the light host.
 */
.ag-ad {
  position: fixed;
  inset: 0;
  z-index: 2147483000; /* above everything in the host page */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.ag-ad[hidden] { display: none; }

.ag-ad-card {
  background: #fff8e7;
  color: #0a0a0a;
  border: 3px solid #0a0a0a;
  border-radius: 16px;
  box-shadow: 8px 8px 0 #0a0a0a;
  padding: 20px 22px 22px;
  width: 100%;
  max-width: 360px;
  max-height: 92vh;
  overflow-y: auto;
  text-align: center;
}

.ag-ad-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 12px;
}
/* Timeout-ad label: the penalty notice reads as a warning, not a "reklama" tag. */
.ag-ad-label.ag-ad-label-warn { color: #B22834; }

.ag-ad-media { display: block; margin: 0 auto 16px; max-width: 220px; }
.ag-ad-media img {
  display: block;
  width: 100%;
  height: auto;
  border: 2.5px solid #0a0a0a;
  border-radius: 4px;
  box-shadow: 5px 5px 0 #0a0a0a;
}
/* Wide banner art (foundation) fills the card width instead of the narrow
   portrait-cover column. */
.ag-ad-media-wide { max-width: 100%; }

.ag-ad-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #B22834;
  margin: 0 0 6px;
}
.ag-ad-title {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 10px;
}
.ag-ad-desc {
  font-size: 0.92rem;
  color: #333;
  margin: 0 0 18px;
}

.ag-ad-cta {
  display: block;
  text-decoration: none;
  background: #E63946;
  color: #fff;
  margin-bottom: 10px;
}
.ag-ad-cta:hover { opacity: 0.92; }

.ag-ad-continue { display: block; width: 100%; }
.ag-ad-continue:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 420px) {
  .ag-btn { padding: 7px 11px; }
  .ag-level { font-size: 0.98rem; }
}