/* Keep a durable best outside the collapsible sharing content. */
.mobile-scoreboard, .mobile-personal-best { display: none; }
.personal-best-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; color: var(--ui-muted); }
.personal-best-row > span:first-child { font: 400 10px/1.4 var(--ui-font); letter-spacing: .04em; }
.personal-best-row output { min-width: 3em; text-align: right; color: var(--ui-ink); font: 400 19px/1.3 var(--nokia-font); font-variant-numeric: tabular-nums; }
.record-badge { display: inline-flex; align-items: center; border-radius: 5px; padding: 3px 5px; color: var(--ui-ink); background: var(--ui-raised); font: 550 9px/1.2 var(--ui-font); letter-spacing: .03em; }
.round-summary { color: var(--ui-muted); font: 400 12px/1.5 var(--ui-font); margin: 12px 0 0; text-wrap: pretty; }
body.is-record-celebrating .record-badge { animation: record-arrival 450ms cubic-bezier(.2,0,0,1) both; }
@keyframes record-arrival { from { transform: translateY(5px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 700px) {
  html[data-theme] .site-header { height: calc(112px + env(safe-area-inset-top)); }
  html[data-theme] .header-actions { position: absolute; top: calc(22px + env(safe-area-inset-top)); left: 10px; width: calc(100% - 20px); }
  .mobile-scoreboard {
    /* Center the row between the visible artwork, accounting for its transparent margins. */
    --mobile-logo-center: 44px;
    --mobile-logo-bottom: calc(var(--mobile-logo-center) + clamp(100px, 30vw, 136px) * .230835);
    --mobile-phone-top: calc(var(--mobile-header-height) + max(0px, calc(var(--mobile-phone-crop) + var(--mobile-phone-width) * .04296875)));
    position: absolute; top: calc(env(safe-area-inset-top) + (var(--mobile-logo-bottom) + var(--mobile-phone-top) - 40px) / 2);
    bottom: auto; left: 50%; transform: translateX(-50%);
    display: grid; grid-template-columns: 1fr; width: min(300px, calc(100% - 32px));
    gap: 16px; height: 40px;
  }
  html[data-theme] .mobile-personal-best {
    position: static; display: flex; flex-direction: row; align-items: center;
    justify-content: center; gap: 10px; min-width: 0; margin: 0; color: var(--ui-muted); white-space: nowrap;
  }
  .mobile-personal-best > span:first-child {
    position: relative; display: inline-flex; align-items: center; gap: 4px; font: 500 12px/1.2 var(--ui-font); letter-spacing: .025em; white-space: nowrap;
  }
  .mobile-personal-best output {
    min-width: 0; text-align: center; color: var(--ui-ink);
    font: 400 22px/1.15 var(--nokia-font); font-variant-numeric: tabular-nums;
  }
  .mobile-personal-best .record-badge { position: static; font-size: 7px; padding: 2px 3px; }
  html[data-theme] body {
    --mobile-header-height: 112px;
    --mobile-game-height: calc(100svh - var(--mobile-header-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--challenge-banner-height, 0px));
    --mobile-phone-width: max(390px, min(calc(var(--mobile-game-height) * .73), calc(max(320px, min(150vw, calc(var(--mobile-game-height) * .666667))) * 1.07)));
    --mobile-phone-crop: min(0px, calc(var(--mobile-game-height) - 526px));
    height: 100svh; min-height: 100svh; overflow: hidden; overscroll-behavior: none;
  }
  html[data-theme] .page-shell { height: 100svh; overflow: clip; }
  html[data-theme] .experience {
    height: var(--mobile-game-height); min-height: 0; flex: 0 0 auto;
    overflow: clip; padding: 0; touch-action: none;
  }
  html[data-theme] .phone-area, html[data-theme] body[data-challenge="true"] .phone-area {
    /* 7% closer. Only the lower casing crops; cap size on short screens to keep 0 reachable. */
    width: var(--mobile-phone-width);
    /* A small top crop on compact displays keeps the LCD and 40px key targets reachable. */
    margin-top: var(--mobile-phone-crop);
    transform: none; translate: none; scale: 1; animation: none; transition: none;
  }
  html[data-theme] .phone { touch-action: none; transform: none; translate: none; scale: 1; }
  html[data-theme] .phone-key { touch-action: none; --key-angle: 0deg; }
  html[data-theme] .key-select { width: 18%; }
  html[data-theme] .mobile-score-dialog .personal-best-row { display: flex; margin-top: 14px; }
  html[data-theme] .mobile-score-dialog .round-summary { display: none; }
  @media (orientation: landscape) {
    html[data-theme] body { --mobile-header-height: 96px; --mobile-phone-width: 390px; --mobile-phone-crop: 0px; height: auto; overflow-y: auto; }
    .mobile-scoreboard { --mobile-logo-center: 36px; }
    html[data-theme] .page-shell { height: auto; overflow: visible; }
    html[data-theme] .experience { height: auto; overflow: visible; }
    html[data-theme] .phone-area, html[data-theme] body[data-challenge="true"] .phone-area { width: 390px; margin-top: 0; }
    html[data-theme] .site-header { height: calc(96px + env(safe-area-inset-top)); }
    html[data-theme] .header-actions { top: calc(14px + env(safe-area-inset-top)); }
  }
}
@media (prefers-reduced-motion: reduce) { body.is-record-celebrating .record-badge { animation: none; } }

/* Match the active score's stacked module, with a quieter best-score hierarchy. */
.best-label-mobile { display: none; }
@media (min-width: 701px) {
  .personal-best-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 28px; }
  .personal-best-row > span:first-child { grid-column: 1; grid-row: 1; font-size: 11px; letter-spacing: .05em; }
  .personal-best-row output { grid-column: 1 / -1; grid-row: 2; min-width: 0; text-align: left; font-size: 32px; line-height: 1.2; color: var(--ui-muted); }
  .personal-best-row > .record-badge { grid-column: 2; grid-row: 1; justify-self: end; }
}
@media (max-width: 700px) {
  .best-label-web { display: none; }
  .best-label-mobile { display: inline; }
}