/* Shared coin wallet + daily streak / variety bonus chrome (see static/js/pv-player.js). */

.pv-coin-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(91, 33, 182, 0.14);
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  background: transparent;
  color: var(--text);
  font-weight: 800;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

[data-theme="dark"] .pv-coin-chip {
  border-color: rgba(233, 224, 255, 0.14);
}

.pv-coin-chip__ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: #eab308;
}

.pv-streak-chip {
  border-color: color-mix(in srgb, #f97316 45%, var(--border));
}

.pv-streak-chip .pv-coin-chip__ico {
  fill: #f97316;
}

.pv-streak-chip.is-cold {
  border-color: var(--border);
  color: var(--text-muted);
}

.pv-streak-chip.is-cold .pv-coin-chip__ico {
  fill: var(--text-muted);
}

.pv-coin-chip--bump {
  animation: pv-coin-bump 420ms ease;
}

@keyframes pv-coin-bump {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.14);
  }
  100% {
    transform: scale(1);
  }
}

/* Hint button once the free per-puzzle hints are gone and coins pay instead. */
.is-paid-hint {
  border-color: color-mix(in srgb, #eab308 55%, var(--border)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #eab308 28%, transparent);
}

/* Flame states: lit once today's streak is saved, pulsing when it is at risk tonight. */
.pv-streak-chip.is-lit .pv-coin-chip__ico {
  animation: pv-flame-flicker 1.6s ease-in-out infinite;
  transform-origin: 50% 85%;
}

.pv-streak-chip.is-at-risk {
  border-color: #f97316;
  animation: pv-streak-pulse 1.4s ease-in-out infinite;
}

@keyframes pv-flame-flicker {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  30% {
    transform: scale(1.08, 0.95) rotate(-3deg);
  }
  60% {
    transform: scale(0.96, 1.06) rotate(2deg);
  }
}

@keyframes pv-streak-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.45);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(249, 115, 22, 0);
  }
}

/* —— Homepage strip —— */

.pv-daily-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "top top week"
    "msg msg msg"
    "set set set"
    "actions actions actions";
  align-items: center;
  gap: 0.7rem 1rem;
  margin-bottom: 1.15rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--surface-strong), var(--accent-soft));
}

.pv-daily-strip.is-at-risk {
  border-color: color-mix(in srgb, #f97316 60%, var(--border));
}

.pv-daily-strip__top {
  grid-area: top;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  min-width: 0;
}

.pv-daily-strip__stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pv-daily-strip__best {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.pv-daily-week {
  grid-area: week;
  display: flex;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv-daily-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.pv-daily-day__name {
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
}

.pv-daily-day__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-strong);
  font-size: 0.85rem;
  line-height: 1;
}

.pv-daily-day.is-played .pv-daily-day__mark {
  border-color: color-mix(in srgb, #f97316 55%, var(--border));
  background: color-mix(in srgb, #f97316 14%, var(--surface-strong));
}

.pv-daily-day.is-frozen .pv-daily-day__mark {
  border-color: color-mix(in srgb, #38bdf8 60%, var(--border));
  background: color-mix(in srgb, #38bdf8 14%, var(--surface-strong));
  color: #0284c7;
}

.pv-daily-day.is-today .pv-daily-day__mark {
  border: 2px dashed color-mix(in srgb, var(--accent-strong) 60%, var(--border));
}

.pv-daily-day.is-missed .pv-daily-day__mark {
  opacity: 0.55;
}

.pv-daily-day.is-current .pv-daily-day__name {
  color: var(--accent-strong);
}

.pv-daily-strip__msg {
  grid-area: msg;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
}

.pv-daily-strip__msg-text {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
}

.pv-daily-strip.is-at-risk .pv-daily-strip__msg-text {
  color: #c2410c;
}

[data-theme="dark"] .pv-daily-strip.is-at-risk .pv-daily-strip__msg-text {
  color: #fb923c;
}

.pv-daily-strip__set {
  grid-area: set;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  min-width: 0;
}

.pv-daily-strip__label {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.pv-daily-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv-daily-tile {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 2.4rem;
  justify-content: center;
  padding: 0.36rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.pv-daily-tile.is-done {
  color: var(--text-muted);
  border-color: color-mix(in srgb, #16a34a 45%, var(--border));
}

.pv-daily-tile.is-next {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent-strong) 55%, var(--border));
  color: var(--accent-strong);
}

.pv-daily-tile.is-next:hover,
.pv-daily-tile.is-next:focus-visible {
  border-style: solid;
  background: var(--accent-soft);
}

.pv-daily-tile__check {
  color: #16a34a;
  font-weight: 900;
}

.pv-daily-strip__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.pv-daily-strip__actions[hidden] {
  display: none;
}

.pv-daily-btn {
  padding: 0.38rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.pv-daily-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent-strong) 55%, var(--border));
}

.pv-daily-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.pv-daily-btn--primary {
  border-color: transparent;
  background: var(--accent-strong);
  color: #fff;
}

.pv-daily-strip__reminder {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* —— Win panel streak line —— */

.pv-win-streak {
  margin: 0.7rem 0 0;
  text-align: center;
}

.pv-win-streak[hidden],
.pv-win-streak [hidden] {
  display: none !important;
}

.pv-win-streak__line {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
}

.pv-win-streak__next {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.9;
}

.pv-win-streak__link {
  font-weight: 800;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.pv-win-streak__share {
  margin-top: 0.5rem;
  padding: 0.32rem 0.9rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  opacity: 0.85;
}

.pv-win-streak__share:hover {
  opacity: 1;
}

/* —— Native app home toolbar —— */

.pv-native-home-toolbar__stats {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.zip-header .pv-coin-chip,
.qg-controls .pv-coin-chip,
.kk-head__bar .pv-coin-chip,
.fill-ins-header__controls .pv-coin-chip,
.word-search-game-shell__actions-row .pv-coin-chip,
.word-search-game-shell__timer-row .pv-coin-chip {
  flex-shrink: 0;
  align-self: center;
}

.site-shell--native-app .pv-daily-strip__stats:empty {
  display: none;
}

@media (max-width: 640px) {
  .pv-daily-strip {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "week"
      "msg"
      "set"
      "actions";
  }

  .pv-daily-week {
    justify-content: space-between;
  }
}

.site-shell--native-app .pv-daily-strip {
  grid-template-columns: 1fr;
  grid-template-areas:
    "top"
    "week"
    "msg"
    "set"
    "actions";
  justify-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  padding: 0.9rem 1rem;
  text-align: center;
}

.site-shell--native-app .pv-daily-strip__msg,
.site-shell--native-app .pv-daily-strip__set,
.site-shell--native-app .pv-daily-strip__actions {
  justify-content: center;
}

.site-shell--native-app .pv-daily-strip__set {
  flex-direction: column;
  gap: 0.55rem;
}

.site-shell--native-app .pv-daily-strip__label {
  width: 100%;
  text-align: center;
  line-height: 1.35;
}

.site-shell--native-app .pv-daily-strip__list {
  justify-content: center;
}

@media (min-width: 768px) {
  .site-shell--native-app .pv-daily-strip {
    padding: 1.05rem 1.35rem;
    gap: 0.7rem;
  }

  .site-shell--native-app .pv-daily-strip__label {
    font-size: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv-coin-chip--bump,
  .pv-streak-chip.is-lit .pv-coin-chip__ico,
  .pv-streak-chip.is-at-risk {
    animation: none;
  }
}

/* —— Target times (pv-targets.js) ——
   🥇 Gold / 🥈 Silver / 🥉 Bronze. Targets are set by PuzzleVuzzle, so every label
   says "target" and nothing here looks like another player's result. */

/* Live target while playing: one capsule in every game, styled like the timer and coin
   chips. "inline" sits beside the timer in the same row; "standalone" is centred on its
   own line under a timer row that has no room. */
.pv-target-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 32px;
  padding: 0.15rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.pv-target-chip[hidden] {
  display: none !important;
}

.pv-target-chip__label {
  color: var(--text-muted);
}

.pv-target-chip--standalone {
  display: flex;
  width: fit-content;
  margin: 0.35rem auto 0.45rem;
  justify-self: center;
}

.pv-target-chip[data-medal="gold"],
.pv-target-chip[data-medal="done"] {
  border-color: color-mix(in srgb, #eab308 55%, var(--border));
}

.pv-target-chip[data-medal="silver"] {
  border-color: color-mix(in srgb, #94a3b8 60%, var(--border));
}

.pv-target-chip[data-medal="bronze"] {
  border-color: color-mix(in srgb, #c2410c 45%, var(--border));
}

/* Past every time target: bronze stays visible, faded and struck through. */
.pv-target-chip[data-medal="passed"] {
  opacity: 0.6;
}

.pv-target-chip[data-medal="passed"] .pv-target-chip__value {
  text-decoration: line-through;
}

/* Phones: a capsule sharing a crowded row drops the word "Target" (🥇 2:00). */
@media (max-width: 560px) {
  .pv-target-chip--inline .pv-target-chip__label {
    display: none;
  }
}

/* Result line in the win box, above the streak line. */
.pv-win-target {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
}

.pv-win-target[hidden] {
  display: none;
}

.pv-win-target[data-medal="none"] {
  font-weight: 700;
  opacity: 0.9;
}

/* Where the capsule sits in layouts that use grids or reorder their header. */

/* Zip: the toolbar is a grid; the capsule spans it, centred under the timer. */
.zip-toolbar > .pv-target-chip {
  grid-column: 1 / -1;
}

/* Nonogram: the side column (and, on smaller screens, the play grid) is a grid;
   the capsule gets its own full row under the time / best / filled chips. */
.ng-side > .pv-target-chip,
.ng-play > .pv-target-chip {
  grid-column: 1 / -1;
  margin-block: 0;
}

@media (max-width: 1024px), (max-width: 1199px) and (orientation: portrait) {
  /* Word Search / Number Search: right after the timer in the reordered toolbar. */
  .word-search-game-shell__toolbar .pv-target-chip {
    order: 2;
  }

  /* The app moves the coins next to the timer and gives the timer order 3. */
  .site-shell--native-app .word-search-game-shell__toolbar .pv-target-chip {
    order: 3;
  }
}

@media (max-width: 560px) {
  /* Fill-Ins on phones: the controls row is full, so the capsule follows New Game and
     wraps onto its own centred line instead of pushing New Game down. */
  .fill-ins-header__controls > .pv-target-chip {
    order: 5;
  }
}

@media (max-width: 820px) {
  /* Nonogram: the stats move above the board; keep the capsule with them. */
  .ng-play .pv-target-chip {
    order: -1;
  }
}

/* —— Win boxes on phones ——
   Every game's win box holds the streak line, Share and (sometimes) the app prompt.
   On phones keep those compact and keep each box within its board: whatever still
   does not fit scrolls inside the box instead of spilling over the page. */
@media (max-width: 560px) {
  .pv-win-streak {
    margin-top: 0.4rem;
  }

  .pv-win-streak__line {
    font-size: 0.88rem;
  }

  .pv-win-streak__next {
    margin-top: 0.1rem;
    font-size: 0.78rem;
  }

  .pv-win-streak__share {
    margin-top: 0.3rem;
    padding: 0.18rem 0.75rem;
    font-size: 0.78rem;
  }

  /* Store badge and "Not now" share one row. */
  .pv-app-win-promo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 0.7rem;
    margin-top: 0.35rem;
    padding-top: 0.3rem;
  }

  .pv-app-win-promo__title,
  .pv-app-win-promo__text {
    flex-basis: 100%;
  }

  .pv-app-win-promo__title {
    font-size: 0.9rem;
  }

  .pv-app-win-promo__text {
    margin: 0.05rem 0 0.3rem;
    font-size: 0.78rem;
  }

  .pv-app-win-promo__badge img {
    height: 36px;
  }

  .pv-app-win-promo__dismiss {
    margin-top: 0;
    padding: 0.1rem 0.4rem;
    font-size: 0.78rem;
  }

  /* With the app prompt up, skip the next-game hint (the home strip and other wins show it). */
  [role="dialog"]:has(.pv-app-win-promo:not([hidden])) .pv-win-streak__next {
    display: none;
  }

  /* Boxes that are the card themselves. */
  [role="dialog"].qg-win,
  [role="dialog"].zip-solved-overlay {
    max-height: calc(100% - 4px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Boxes that wrap an inner card: the wrapper caps the height, the card scrolls. */
  [role="dialog"].word-search-win-panel:not([hidden]),
  [role="dialog"].fill-ins-win-panel:not([hidden]),
  [role="dialog"].color-rush-win-panel:not([hidden]),
  [role="dialog"].ae-win-panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    max-height: calc(100% - 4px);
  }

  /* Fill-Ins pads its wrapper; give that room back to the card on phones. */
  [role="dialog"].fill-ins-win-panel:not([hidden]) {
    padding-block: 4px;
    max-height: 100%;
  }

  [role="dialog"] > .word-search-win-panel__modal,
  [role="dialog"] > .fill-ins-win-panel__modal,
  [role="dialog"] > .color-rush-win-panel__modal,
  [role="dialog"] > .ae-win-panel__modal {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Cryptograms is left out of the height cap on purpose: its box reveals the whole
     solved quote, which is taller than the quote strip, and it already stays on screen. */
}

/* The win cards themselves get the same phone tightening as Kakuro and Nonogram. */
@media (max-width: 560px) {
  [role="dialog"].qg-win,
  [role="dialog"].zip-solved-overlay,
  [role="dialog"] > .word-search-win-panel__modal,
  [role="dialog"] > .fill-ins-win-panel__modal,
  [role="dialog"] > .color-rush-win-panel__modal,
  [role="dialog"] > .ae-win-panel__modal,
  [role="dialog"] > .cryptograms-win-panel__modal {
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.32;
  }

  [role="dialog"] :is(
      .qg-win__title,
      .zip-solved-overlay__title,
      .word-search-win-panel__title,
      .fill-ins-win-panel__title,
      .color-rush-win-panel__title,
      .ae-win-panel__title,
      .cryptograms-win-panel__title
    ) {
    font-size: 1rem;
  }

  [role="dialog"] :is(
      .qg-win__btn,
      .zip-solved-overlay__btn,
      .word-search-win-panel__btn,
      .fill-ins-win-panel__btn,
      .color-rush-win-panel__btn,
      .ae-win-panel__btn,
      .cryptograms-win-panel__btn
    ) {
    margin-top: 0.45rem;
    min-height: 34px;
  }
}

/* Phones: the target line stays compact so the boxes still fit their boards. */
@media (max-width: 560px) {
  .pv-win-target {
    margin-bottom: 0.1rem;
    font-size: 0.84rem;
    line-height: 1.25;
  }

  [role="dialog"]:has(.pv-win-target:not([hidden])) .pv-win-streak {
    margin-top: 0.25rem;
  }

  [role="dialog"]:has(.pv-win-target:not([hidden])):has(.pv-app-win-promo:not([hidden])) .pv-win-streak {
    margin-top: 0.15rem;
  }

  [role="dialog"]:has(.pv-win-target:not([hidden])) .pv-win-streak__line {
    font-size: 0.84rem;
    line-height: 1.25;
  }

  /* Kakuro caps its own box (kakuro.css); give it the same room as the others here. */
  [role="dialog"].kk-win {
    max-height: calc(100% - 4px);
  }
}

/* When the app prompt is also showing, trim a little more so small boards still fit. */
@media (max-width: 560px) {
  [role="dialog"].kk-win:has(.pv-app-win-promo:not([hidden])),
  [role="dialog"].qg-win:has(.pv-app-win-promo:not([hidden])),
  [role="dialog"].zip-solved-overlay:has(.pv-app-win-promo:not([hidden])),
  [role="dialog"]:has(.pv-app-win-promo:not([hidden])) > :is(
      .word-search-win-panel__modal,
      .fill-ins-win-panel__modal,
      .color-rush-win-panel__modal,
      .ae-win-panel__modal
    ) {
    padding: 0.5rem 0.7rem;
    line-height: 1.25;
  }

  [role="dialog"]:has(.pv-app-win-promo:not([hidden])) :is(
      .kk-win__btn,
      .qg-win__btn,
      .zip-solved-overlay__btn,
      .word-search-win-panel__btn,
      .fill-ins-win-panel__btn,
      .color-rush-win-panel__btn,
      .ae-win-panel__btn
    ) {
    margin-top: 0.35rem;
    min-height: 32px;
  }

  [role="dialog"]:has(.pv-app-win-promo:not([hidden])) .pv-win-streak {
    margin-top: 0.3rem;
  }

  [role="dialog"]:has(.pv-app-win-promo:not([hidden])) .pv-win-streak__share {
    margin-top: 0.2rem;
    padding: 0.12rem 0.75rem;
  }
}

/* —— Win boxes on phones held sideways ——
   Landscape phones are wide but only ~360–430px tall, and the board shrinks to fit that
   height, so a box sized to the board cannot hold the streak line and app prompt.
   Here the box is centred on the screen instead, made wider, and split into two
   columns: the result and Next button on the left, streak and app prompt on the right. */
@keyframes pv-win-land-pop {
  0% { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (orientation: landscape) and (max-height: 500px) {
  /* Boxes that are the card themselves. */
  [role="dialog"]:is(.kk-win, .ng-win, .qg-win, .zip-solved-overlay).is-visible {
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(680px, calc(100vw - 24px));
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1200;
    box-shadow: 0 0 0 100vmax rgba(14, 8, 34, 0.38), 0 12px 34px rgba(14, 8, 34, 0.3);
    animation: pv-win-land-pop 0.4s ease-out;
  }

  /* Boxes that wrap an inner card: the wrapper becomes a screen-sized layer that centres it. */
  [role="dialog"]:is(
      .word-search-win-panel,
      .fill-ins-win-panel,
      .color-rush-win-panel,
      .ae-win-panel,
      .cryptograms-win-panel,
      .ws-win-panel,
      .tg-win-panel
    ):not([hidden]) {
    position: fixed;
    inset: 0;
    transform: none;
    width: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background: rgba(14, 8, 34, 0.38);
    pointer-events: none;
    z-index: 1200;
  }

  [role="dialog"]:not([hidden]) > :is(
      .word-search-win-panel__modal,
      .fill-ins-win-panel__modal,
      .color-rush-win-panel__modal,
      .ae-win-panel__modal,
      .cryptograms-win-panel__modal,
      .ws-win-panel__modal,
      .tg-win-panel__modal
    ) {
    width: min(680px, 100%);
    max-height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
    box-shadow: 0 12px 34px rgba(14, 8, 34, 0.3);
  }

  /* Two columns; the streak line starts the right-hand one. */
  [role="dialog"]:is(.kk-win, .ng-win, .qg-win, .zip-solved-overlay).is-visible,
  [role="dialog"]:not([hidden]) > :is(
      .word-search-win-panel__modal,
      .fill-ins-win-panel__modal,
      .color-rush-win-panel__modal,
      .ae-win-panel__modal,
      .cryptograms-win-panel__modal,
      .ws-win-panel__modal,
      .tg-win-panel__modal
    ) {
    columns: 2;
    column-gap: 1.6rem;
    column-rule: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    padding: 0.75rem 1rem;
    line-height: 1.32;
  }

  [role="dialog"] .pv-win-streak {
    break-before: column;
    margin-top: 0;
  }

  [role="dialog"] :is(.pv-win-streak, .pv-app-win-promo) {
    break-inside: avoid;
  }

  .pv-win-streak__next {
    margin-top: 0.15rem;
    font-size: 0.8rem;
  }

  .pv-win-streak__share {
    margin-top: 0.35rem;
    padding: 0.2rem 0.8rem;
    font-size: 0.8rem;
  }

  /* Store badge and "Not now" share one row. */
  .pv-app-win-promo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 0.7rem;
    margin-top: 0.5rem;
    padding-top: 0.45rem;
  }

  .pv-app-win-promo__title,
  .pv-app-win-promo__text {
    flex-basis: 100%;
  }

  .pv-app-win-promo__title {
    font-size: 0.95rem;
  }

  .pv-app-win-promo__text {
    margin: 0.1rem 0 0.4rem;
    font-size: 0.82rem;
  }

  .pv-app-win-promo__badge img {
    height: 38px;
  }

  .pv-app-win-promo__dismiss {
    margin-top: 0;
  }

  /* Keep the right-hand column short: the target line stays compact and, with the app
     prompt up, the next-game hint steps aside (the home strip and other wins show it). */
  .pv-win-target {
    margin-bottom: 0.15rem;
    font-size: 0.86rem;
    line-height: 1.25;
  }

  [role="dialog"]:has(.pv-app-win-promo:not([hidden])) .pv-win-streak__next {
    display: none;
  }
}