/* Shared game toolbar: the same three rows on every game.
   1. Title bar: game name (+ level picker) on the left; coins, small icon buttons and the
      fullscreen button on the right. Fullscreen always ends the row, so it never wraps alone.
   2. Status chips: timer, the 🥇 target capsule and the game's own count.
   3. Action buttons: tactile buttons (tactile-buttons.css), the main one in solid purple.
   Rows 2 and 3 are full-width grids of equal columns at every size, so chips and buttons
   line up edge to edge instead of wrapping into ragged lines. A game with a single button
   (Color Rush, Fill-Ins) keeps it beside the chips on wider screens.
   Only layout and look live here: every id and hook the game scripts use is unchanged. */

.pv-gamebar {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0 0 0.8rem;
  min-width: 0;
}

/* Inside a framed game shell (Word Search, Number Search, Fill-Ins): its own padding and a
   divider above the board. */
.pv-gamebar--inset {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.75rem 1rem 0.7rem;
  background: var(--ws-surface-2, transparent);
  border-bottom: 1px solid var(--ws-border, var(--border));
}

.pv-gamebar__top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.pv-gamebar__name {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-width: 0;
}

.pv-gamebar__title {
  margin: 0;
  min-width: 0;
  color: var(--text);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A small line under the title (Arrow Escape's level, Wordscapes' stage). */
.pv-gamebar__titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pv-gamebar__sub {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* A game's own mode / level <select> next to the title (Zip), drawn like the level pickers. */
.pv-gamebar__picker {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 13rem;
  min-height: 32px;
  padding: 0.25rem 1.9rem 0.25rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b21b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>") right 0.6rem center / 14px no-repeat,
    color-mix(in srgb, var(--accent-soft) 80%, transparent);
  color: var(--accent-strong);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.pv-gamebar__picker:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[data-theme="dark"] .pv-gamebar__picker {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e9e0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>") right 0.6rem center / 14px no-repeat,
    color-mix(in srgb, var(--accent-soft) 80%, transparent);
}

.pv-gamebar__tools {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}

/* Fullscreen (play focus): phones and tablets only, boxed like the other title-bar buttons.
   The icon swaps to "shrink" while focus is on. The app has no focus mode. */
.pv-gamebar__tools .word-search-game-shell__expand-btn {
  flex: 0 0 auto;
  margin: 0;
}

@media (max-width: 1024px), (max-width: 1199px) and (orientation: portrait) {
  .pv-gamebar__tools .word-search-game-shell__expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 2px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    border-radius: 12px;
    background: var(--surface-strong);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 42%, var(--border));
    color: var(--accent-strong);
    cursor: pointer;
    box-sizing: border-box;
  }
}

.pv-gamebar__tools .word-search-game-shell__expand-btn-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.pv-gamebar__tools .word-search-game-shell__expand-btn-icon--compress,
.pv-gamebar__tools .word-search-game-shell__expand-btn--active .word-search-game-shell__expand-btn-icon--expand {
  display: none;
}

.pv-gamebar__tools .word-search-game-shell__expand-btn--active .word-search-game-shell__expand-btn-icon--compress {
  display: block;
}

.site-shell--native-app .pv-gamebar__tools .word-search-game-shell__expand-btn {
  display: none;
}

.pv-gamebar__main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  min-width: 0;
}

/* Equal columns, however many chips and buttons a game has. Hidden ones (Best on phones,
   Arrow Escape's zoom-out before zooming) take no column. */
.pv-gamebar__status,
.pv-gamebar__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0.5rem;
  min-width: 0;
}

@media (min-width: 561px) {
  .pv-gamebar__main:has(> .pv-gamebar__actions > :only-child) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0.5rem;
  }

  .pv-gamebar__main:has(> .pv-gamebar__actions > :only-child) > .pv-gamebar__actions {
    grid-auto-columns: auto;
  }
}

/* A one-line message under the rows (status text such as "Loading puzzle…"). */
.pv-gamebar__note {
  margin: -0.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.pv-gamebar__note:empty {
  display: none;
}

/* ---- Status chips ---- */
.pv-stat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0 0.85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-sizing: border-box;
}

.pv-stat .pv-chip__icon,
.pv-stat__icon {
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--accent);
}

.pv-stat .pv-chip__label,
.pv-stat__label {
  color: var(--text-muted);
  font-weight: 600;
}

/* The target capsule matches the chips around it. */
.pv-gamebar__status .pv-target-chip {
  justify-content: center;
  min-width: 0;
  min-height: 38px;
  margin: 0;
  box-sizing: border-box;
}

/* Icons for chips whose whole text the game script rewrites ("Time: 00:12.3"). */
.pv-stat[data-pv-icon]::before {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  background: var(--accent);
  -webkit-mask: var(--pv-ico) center / contain no-repeat;
  mask: var(--pv-ico) center / contain no-repeat;
}

[data-theme="dark"] .pv-stat[data-pv-icon]::before {
  background: #c4b5fd;
}

.pv-stat[data-pv-icon="clock"] {
  --pv-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/><path d='M12 7v5l3 3'/></svg>");
}

.pv-stat[data-pv-icon="trophy"] {
  --pv-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 21l8 0'/><path d='M12 17l0 4'/><path d='M7 4l10 0'/><path d='M17 4v8a5 5 0 0 1 -10 0v-8'/><path d='M3 9a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/><path d='M17 9a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/></svg>");
}

.pv-stat[data-pv-icon="grid"] {
  --pv-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z'/><path d='M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z'/><path d='M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z'/><path d='M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z'/></svg>");
}

/* ---- Coins in the title bar ---- */
.pv-gamebar__tools .pv-coin-chip {
  min-height: 38px;
  padding: 0 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 999px;
  background: var(--surface-strong);
  font-size: 0.92rem;
  font-weight: 700;
  box-sizing: border-box;
}

/* ---- Small square icon button in the title bar (letter style, how to play) ---- */
.pv-gamebar__iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 12px;
  background: var(--surface-strong);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 42%, var(--border));
  color: var(--accent-strong);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  box-sizing: border-box;
}

.pv-gamebar__iconbtn svg {
  width: 20px;
  height: 20px;
}

/* Word Search letter style: the real <select> sits invisibly over an "Aa" face, so the
   phone's own picker still opens and the game reads the same value as before. */
.pv-gamebar__select {
  position: relative;
}

.pv-gamebar__select select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}

/* ---- Action buttons ---- */
.pv-gamebar__actions .pv-tactile {
  justify-content: center;
  min-width: 0;
  min-height: 42px;
  margin: 0;
  padding: 0 1rem;
  font-size: 0.92rem;
  white-space: nowrap;
}

/* A small count inside a button label (Arrow Escape's free hints left). */
.pv-tactile__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  height: 1.35em;
  margin-left: 0.15em;
  padding: 0 0.3em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-strong);
  font-size: 0.85em;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

[data-theme="dark"] .pv-tactile__count {
  background: rgba(196, 181, 253, 0.2);
  color: #f3e8ff;
}

/* Long and short labels: the short one only shows on phones. */
.pv-label-short {
  display: none;
}

/* Icons drawn by CSS, for buttons whose text the game script rewrites ("Hint (3)"). */
.pv-tactile[data-pv-icon]::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: var(--tac-icon);
  -webkit-mask: var(--pv-ico) center / contain no-repeat;
  mask: var(--pv-ico) center / contain no-repeat;
}

.pv-tactile[data-pv-icon="refresh"] {
  --pv-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4'/><path d='M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4'/></svg>");
}

.pv-tactile[data-pv-icon="eraser"] {
  --pv-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 20h-10.5l-4.21 -4.3a1 1 0 0 1 0 -1.41l10 -10a1 1 0 0 1 1.41 0l5 5a1 1 0 0 1 0 1.41l-9.2 9.3'/><path d='M18 13.3l-6.3 -6.3'/></svg>");
}

.pv-tactile[data-pv-icon="bulb"] {
  --pv-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7'/><path d='M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3'/><path d='M9.7 17l4.6 0'/></svg>");
}

.pv-tactile[data-pv-icon="undo"] {
  --pv-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 14l-4 -4l4 -4'/><path d='M5 10h11a4 4 0 1 1 0 8h-1'/></svg>");
}

.pv-tactile[data-pv-icon="zoom"] {
  --pv-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0'/><path d='M7 10l6 0'/><path d='M10 7l0 6'/><path d='M21 21l-6 -6'/></svg>");
}

/* ---- Phones ---- */
@media (max-width: 560px) {
  .pv-gamebar {
    gap: 0.6rem;
  }

  .pv-gamebar--inset {
    padding: 0.65rem 0.7rem 0.6rem;
  }

  .pv-gamebar__top {
    gap: 0.35rem;
  }

  .pv-gamebar__tools {
    gap: 0.35rem;
  }

  .pv-gamebar__tools .pv-coin-chip {
    min-height: 36px;
    padding: 0 0.55rem;
  }

  .pv-gamebar__iconbtn {
    width: 38px;
    height: 38px;
  }

  .pv-gamebar__picker {
    max-width: 9.5rem;
    font-size: 0.82rem;
  }

  .pv-gamebar__status,
  .pv-gamebar__actions {
    gap: 0.45rem;
  }

  .pv-stat,
  .pv-gamebar__status .pv-target-chip {
    min-width: 0;
    min-height: 36px;
    padding: 0 0.35rem;
    gap: 0.3rem;
    font-size: 0.84rem;
  }

  /* The icon says what a chip is; its word label is hidden but still read out.
     Extra chips (Best) step aside. */
  .pv-stat .pv-chip__label,
  .pv-stat__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
  }

  .pv-stat--wide {
    display: none;
  }

  /* Chips whose text already names them ("Time: 00:12.3") drop the icon to fit. */
  .pv-stat[data-pv-icon]::before {
    display: none;
  }

  .pv-stat {
    overflow: hidden;
  }

  .pv-gamebar__actions .pv-tactile {
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    min-height: 52px;
    padding: 0.35rem 0.15rem;
    border-radius: 12px;
    font-size: 0.78rem;
    letter-spacing: -0.01em;
  }

  .pv-gamebar__actions .pv-tactile__label {
    max-width: 100%;
  }

  .pv-label-long {
    display: none;
  }

  .pv-label-short {
    display: inline;
  }
}

/* The app: same rows, a little tighter. */
.site-shell--native-app .pv-gamebar {
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

[data-theme="dark"] .pv-stat,
[data-theme="dark"] .pv-gamebar__tools .pv-coin-chip {
  border-color: rgba(189, 166, 240, 0.3);
  background: rgba(22, 16, 40, 0.62);
  color: #f3e8ff;
}

[data-theme="dark"] .pv-stat .pv-chip__icon,
[data-theme="dark"] .pv-stat__icon {
  color: #c4b5fd;
}

[data-theme="dark"] .pv-gamebar__iconbtn,
[data-theme="dark"] .pv-gamebar__tools .word-search-game-shell__expand-btn {
  border-color: #4d3d7d;
  background: #2a2142;
  box-shadow: 0 3px 0 #171028;
  color: #f3e8ff;
}