/* Match overlays share one centered hierarchy and stable, full-width actions. */
html.painted .match-pause {
  width: min(420px, 100%);
  padding: 28px;
  text-align: center;
  border: 1px solid #5c87b9;
  border-radius: 24px;
  background: #102544;
  box-shadow: 0 12px 40px #0007;
  overflow: auto;
}
.match-pause h2 {
  margin: 5px 0 24px;
  font-size: 30px;
  line-height: 1.1;
  color: #fff;
}
.pause-eyebrow {
  margin: 10px 0 0;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ffda4b;
}
.pause-art {
  display: block;
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin: 0 auto;
}
.pause-mark {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.pause-mark i {
  width: 9px;
  height: 30px;
  border-radius: 3px;
  background: #ffda4b;
}
.match-pause .actions,
.match-pause .menu-list {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}
html.painted .match-pause .btn {
  width: 100%;
  min-height: 50px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  white-space: normal;
  line-height: 1.2;
  padding: 12px 16px;
}
.match-pause .btn svg {
  width: 21px;
  height: 21px;
  flex: none;
}
html.painted .match-pause .btn:not(.primary):not(.danger):not(.ghost) {
  --button-fill: linear-gradient(#1b3c64, #1b3c64);
  border-color: #53759c;
  box-shadow: 0 3px 0 #07172d;
  color: #edf5ff;
}
html.painted .match-pause .btn.ghost {
  --button-fill: linear-gradient(#102544, #102544);
  border-color: transparent;
  box-shadow: none;
  color: #bed2ed;
}
html.painted .match-pause .btn.danger {
  --button-fill: linear-gradient(#432d41, #432d41);
  color: #ffc2b6;
  border-color: #7d5363;
  box-shadow: 0 3px 0 #07172d;
}
.challenge-result .actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.challenge-result .actions .btn {
  width: 100%;
  margin: 0;
}
/* Keep assistance secondary to the board and the selected piece. */
html.painted .hud-bottom.street-controls .btn:nth-child(2) {
  --button-fill: linear-gradient(#1c3a60, #1c3a60);
  color: #e4efff;
  border-color: #54779f;
}
.street-duel > .street-player {
  border: 0;
  box-shadow: none;
  outline: none;
  background: linear-gradient(#0c234300 45%, #0c2343bd 95%);
  border-radius: 16px;
}
.street-duel > .street-player.is-active {
  outline: none;
  background: linear-gradient(#0c234300 40%, #123562d9 95%);
}
.street-duel > .street-player.is-active .street-player-info {
  border-bottom: 3px solid #ffda4b;
  padding-bottom: 10px;
}
.street-duel > .street-player .street-player-info {
  border-bottom: 3px solid transparent;
  padding-bottom: 10px;
}
@media (max-height: 560px) {
  html.painted .match-pause {
    padding: 16px 22px;
    width: min(460px, 100%);
  }
  .pause-art {
    width: 58px;
    height: 58px;
  }
  .pause-mark {
    height: 26px;
  }
  .pause-mark i {
    height: 22px;
  }
  .match-pause h2 {
    font-size: 25px;
    margin: 5px 0 15px;
  }
  .pause-eyebrow {
    margin-top: 4px;
    font-size: 10px;
  }
  .match-pause .menu-list {
    grid-template-columns: 1fr 1fr;
  }
  .match-pause .menu-list > .primary {
    grid-column: 1/-1;
  }
  html.painted .match-pause .btn {
    min-height: 42px;
    font-size: 13px;
    padding: 9px 12px;
  }
  .practice-pause .actions {
    grid-template-columns: 1fr 1fr;
  }
  .practice-pause .actions > .primary {
    grid-column: 1/-1;
  }
}
@media (max-height: 400px) {
  html.painted .match-pause {
    padding: 12px 20px;
  }
  .match-pause .menu-list,
  .match-pause .actions {
    gap: 8px;
  }
  .match-pause h2 {
    font-size: 23px;
    margin: 4px 0 12px;
  }
  .pause-mark {
    height: 18px;
  }
  .pause-mark i {
    height: 18px;
  }
  .pause-art {
    width: 48px;
    height: 48px;
  }
  html.painted .match-pause .btn {
    min-height: 44px !important;
    padding: 8px 10px !important;
  }
}
.settings-screen.screen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}
html.painted .settings-shell {
  width: min(700px, 100%) !important;
  height: min(620px, calc(100dvh - 40px));
  max-height: calc(100dvh - 40px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 24px;
  overflow: hidden;
  border-radius: 22px;
  background: #102544;
}
.settings-shell .card-head {
  margin: 0 0 16px;
  padding-bottom: 12px;
}
.settings-shell .card-head h2 {
  margin: 0;
}
.settings-shell .actions {
  margin: 16px 0 0;
  flex-wrap: nowrap;
}
.settings-shell .actions .btn {
  min-height: 44px;
}
.settings-shell .settings {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}
.settings-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  background: #071a33;
  border-radius: 12px;
}
.settings-tab {
  min-height: 44px;
  padding: 8px 5px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #b9cce6;
  font: 800 14px var(--font-ui);
  cursor: pointer;
  transition:
    background-color 160ms,
    color 160ms;
}
.settings-tab[aria-selected='true'] {
  background: #ffda4b;
  color: #0b2346;
}
.settings-tab:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}
.settings-section {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 10px 4px 0;
  scrollbar-width: thin;
  scrollbar-color: #42658b transparent;
}
.settings-section[hidden] {
  display: none !important;
}
.settings-shell .set-row {
  padding: 14px 0;
  min-height: 52px;
  border-bottom: 1px solid #345371;
  gap: 16px;
}
.settings-shell .set-row label {
  font-size: 15px;
  line-height: 1.3;
}
.settings-shell .audio-preview {
  margin: 16px 0;
}
.settings-shell .shortcuts {
  font-size: 12px;
  gap: 8px;
}
.settings-shell h3 {
  font-size: 16px;
  margin: 20px 0 12px;
}
.settings-shell .note {
  font-size: 12px;
  line-height: 1.5;
}
html.painted .rules-overlay {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: min(680px, 100%) !important;
  max-height: calc(100dvh - 40px);
  padding: 24px;
  background: #102544;
  overflow: hidden;
}
.rules-overlay .rules-list {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  margin: 8px 0;
  padding: 0 12px 0 30px;
  scrollbar-width: thin;
  scrollbar-color: #42658b transparent;
}
.rules-overlay .rules-list li {
  padding: 10px 0 10px 7px;
  line-height: 1.5;
  font-size: 14px;
  border-bottom: 1px solid #345371;
}
.rules-overlay li::marker {
  color: #ffda4b;
  font-weight: 900;
}
.rules-overlay .actions {
  margin-top: 12px;
}
.rules-overlay .note {
  font-size: 12px;
  line-height: 1.4;
  margin: 8px 0;
}
.rules-overlay .actions .btn {
  width: 100%;
  min-height: 44px;
}
@media (max-width: 600px) {
  .settings-screen.screen {
    padding: 12px;
  }
  html.painted .settings-shell {
    padding: 16px;
    height: min(620px, calc(100dvh - 24px));
    max-height: calc(100dvh - 24px);
  }
  .settings-tab {
    font-size: 11px;
  }
  .settings-shell .set-row {
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 0;
  }
  .settings-shell .set-row:not(.tg) > :last-child {
    max-width: 100%;
  }
  .settings-shell .set-row label {
    font-size: 13px;
  }
  .settings-shell .volume-control {
    width: 100%;
  }
  .settings-shell .set-row.tg {
    flex-wrap: nowrap;
  }
  .settings-shell .seg {
    font-size: 12px;
  }
  .settings-shell .seg button {
    padding: 8px 10px;
  }
  .settings-shell .actions .btn {
    font-size: 12px;
    padding: 9px 10px;
  }
  html.painted .rules-overlay {
    padding: 18px;
  }
  .rules-overlay .rules-list li {
    font-size: 13px;
  }
}
@media (max-height: 440px) {
  html.painted .settings-shell {
    height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
    padding: 12px 18px;
  }
  .settings-shell .card-head {
    margin-bottom: 8px;
    padding-bottom: 6px;
  }
  .settings-shell .card-head h2 {
    font-size: 22px;
  }
  .settings-shell .settings {
    gap: 8px;
  }
  .settings-tabs {
    padding: 2px;
  }
  .settings-tab {
    min-height: 36px;
    font-size: 12px;
  }
  .settings-shell .actions {
    margin-top: 8px;
  }
  .settings-shell .actions .btn {
    min-height: 40px;
  }
  .settings-shell .set-row {
    padding: 9px 0;
    min-height: 42px;
  }
  html.painted .rules-overlay {
    max-height: calc(100dvh - 20px);
    padding: 14px 18px;
  }
  .rules-overlay h2 {
    font-size: 22px;
  }
  .rules-overlay .note {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-tab {
    transition: none;
  }
}
html.reduced .settings-tab {
  transition: none;
}
html.painted .modal-card.result {
  width: min(540px, 100%);
  padding: 26px;
  text-align: center;
  background: #102544;
  border-radius: 24px;
}
html.painted .result .result-portrait canvas {
  width: 120px !important;
  height: 120px !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain;
}
html.painted .result .big {
  font-size: 34px;
  line-height: 1.15;
  color: #ffda4b;
}
.result .quote {
  font-size: 15px;
  line-height: 1.5;
  color: #d6e5f7;
  margin: 16px 0;
}
.result .result-detail {
  font-size: 12px;
  color: #a9c6e7;
}
.result > .actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.result > .actions > .btn {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin: 0;
  padding: 10px;
  font-size: 13px;
  white-space: normal;
}
.result > .actions > .btn.primary {
  grid-column: 1/-1;
}
@media (max-height: 440px) {
  html.painted .modal-card.result {
    padding: 16px;
    max-height: calc(100dvh - 24px);
  }
  html.painted .result .result-portrait canvas {
    width: 68px !important;
    height: 68px !important;
  }
  html.painted .result .big {
    font-size: 25px;
  }
  .result .quote {
    font-size: 12px;
    margin: 8px 0;
  }
  .result > .actions {
    gap: 6px;
    margin-top: 10px;
  }
  .result > .actions > .btn {
    min-height: 40px;
    font-size: 12px;
  }
}
.collection-screen.screen,
.records-screen.screen {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
}
html.painted .collection-shell,
html.painted .records-shell {
  width: min(1060px, 100%);
  height: min(760px, calc(100dvh - 40px));
  max-height: calc(100dvh - 40px);
  padding: 24px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  background: #102544;
}
.collection-shell .card-head,
.records-shell .card-head {
  margin: 0 0 14px;
}
.collection-shell .sets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-height: 0;
}
html.painted .collection-shell .set {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  text-align: center;
  border-radius: 17px;
  background: #17375b;
  box-shadow: 0 4px 0 #07172d;
  border: 2px solid #426a98;
}
html.painted .collection-shell .set[aria-pressed='true'] {
  border-color: #ffda4b;
  background: #1b416e;
}
.collection-shell .swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
  background: none !important;
  min-height: 0;
  overflow: hidden;
}
.collection-shell .swatches img {
  width: 100%;
  height: 100%;
  max-height: 135px;
  object-fit: contain;
  min-height: 0;
}
.collection-shell .set .ttl {
  font-size: 16px;
  line-height: 1.1;
  justify-content: center;
  margin: 0;
}
.collection-shell .set .sub {
  font-size: 11px;
  line-height: 1.2;
}
.record-panel {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px 8px 8px 0;
  scrollbar-width: thin;
  scrollbar-color: #42658b transparent;
}
.record-panel[hidden] {
  display: none !important;
}
.records-shell .stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.records-shell .stat {
  background: #17375b;
  padding: 16px;
  border-radius: 12px;
}
.records-shell .stat .v {
  font-size: 30px;
  color: #ffda4b;
}
.records-shell .stat .k {
  font-size: 12px;
  color: #d2e3f7;
}
.records-shell .mini {
  font-size: 12px;
}
.records-shell .settings-tabs {
  margin-bottom: 6px;
}
@media (max-width: 700px) {
  .collection-screen.screen,
  .records-screen.screen {
    padding: 12px;
  }
  html.painted .collection-shell,
  html.painted .records-shell {
    padding: 16px;
    height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
  }
  .collection-shell .sets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  html.painted .collection-shell .set {
    padding: 8px;
    gap: 4px;
  }
  .collection-shell .swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .collection-shell .swatches img {
    max-height: 64px;
  }
  .collection-shell .swatches img:nth-child(n + 3) {
    display: none;
  }
  .collection-shell .set .ttl {
    font-size: 12px;
  }
  .collection-shell .set .sub {
    font-size: 10px;
  }
  .collection-shell > .muted {
    font-size: 12px;
  }
  .records-shell .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .records-shell .stat {
    padding: 12px;
  }
  .records-shell .stat .v {
    font-size: 25px;
  }
}
@media (max-height: 440px) {
  .collection-screen.screen,
  .records-screen.screen {
    padding: 10px;
  }
  html.painted .collection-shell,
  html.painted .records-shell {
    height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
    padding: 12px 18px;
  }
  .collection-shell .card-head,
  .records-shell .card-head {
    margin-bottom: 8px;
  }
  .collection-shell .sets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .collection-shell > .muted {
    display: none;
  }
  .collection-shell {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }
  .collection-shell .swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .collection-shell .swatches img {
    max-height: 40px;
  }
  .collection-shell .swatches img:nth-child(n + 3) {
    display: none;
  }
  .collection-shell .set .ttl {
    font-size: 11px;
  }
  .collection-shell .set .sub {
    display: none;
  }
  html.painted .collection-shell .set {
    padding: 4px;
  }
  .records-shell .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
html.painted .collection-preview {
  height: min(660px, calc(100dvh - 40px));
  max-height: calc(100dvh - 40px);
  display: grid;
  grid-template-rows: auto minmax(70px, 1fr) minmax(100px, 1fr) auto;
  gap: 16px;
  padding: 22px;
  overflow: hidden;
  background: #102544;
}
.collection-preview .card-head {
  margin: 0;
}
.collection-preview .large-pieces {
  margin: 0;
  background: #17375b;
  min-height: 0;
  padding: 8px;
  align-items: center;
}
.collection-preview .large-pieces img {
  height: 100%;
  max-height: 180px;
  min-height: 0;
  object-fit: contain;
}
.collection-preview .preview-boards {
  min-height: 0;
  gap: 10px;
}
.collection-preview .preview-boards figure {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 5px;
}
.collection-preview .preview-boards canvas {
  height: 100%;
  width: 100%;
  min-height: 0;
  object-fit: contain;
}
.collection-preview .preview-boards figcaption {
  color: #d5e5f7;
  font-size: 11px;
  margin: 0;
}
.collection-preview .actions {
  margin: 0;
}
.collection-preview .actions .btn {
  width: 100%;
  min-height: 44px;
}
@media (max-width: 600px) {
  html.painted .collection-preview {
    padding: 16px;
    gap: 12px;
  }
  .collection-preview .card-head h2 {
    font-size: 20px;
  }
  .collection-preview .preview-boards figcaption {
    font-size: 9px;
  }
}
@media (max-height: 440px) {
  html.painted .collection-preview {
    height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px 18px;
  }
  .collection-preview .card-head {
    grid-column: 1/-1;
  }
  .collection-preview .large-pieces {
    grid-column: 1;
    grid-row: 2;
  }
  .collection-preview .preview-boards {
    grid-column: 2;
    grid-row: 2;
  }
  .collection-preview .actions {
    grid-column: 1/-1;
  }
  .collection-preview .card-head h2 {
    font-size: 20px;
  }
  .collection-preview .card-head .btn {
    min-height: 36px;
  }
  .collection-preview .large-pieces img {
    width: 24%;
  }
}
html.painted .street-compact .hud-top.street-scoreboard {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 8px 4px;
  background: #102544dc;
  border-radius: 14px;
}
.street-compact .street-scoreboard .street-player,
.street-compact .street-scoreboard .street-self {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: auto;
  padding: 5px 0;
}
.street-compact .street-player-info {
  justify-items: center;
  gap: 3px;
}
html.painted .street-compact .street-scoreboard .name {
  text-align: center;
  font-size: 13px;
}
.street-compact .street-scoreboard .count-row,
.street-compact .street-scoreboard .street-self .count-row {
  justify-content: center;
  font-size: 14px;
}
.street-compact .street-scoreboard .count-row img {
  width: 16px;
  height: 18px;
}
.street-compact .street-scoreboard .count-row .men {
  font-size: 16px;
}
.street-compact .street-match-status {
  border-inline: 0;
  border-block: 1px solid #355371;
  padding: 8px 0;
  width: 100%;
}
html.painted .street-compact .street-match-status .status {
  font-size: 11px;
}
html.painted .street-compact .hud-bottom.street-controls {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 44px);
  gap: 10px;
}
html.painted .street-compact .street-controls .btn {
  width: 100%;
  min-height: 44px;
  font-size: 12px;
  padding: 8px;
  gap: 5px;
}
html.painted .street-compact .street-controls .btn svg {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}
.street-compact .street-brand {
  display: none !important;
}
.street-compact .banner {
  overflow: auto;
  scrollbar-width: thin;
}
.street-compact .banner .pill {
  font-size: 10px;
  line-height: 1.25;
  max-width: 100%;
  padding: 7px;
  display: block;
}
.street-compact .banner .pill button {
  margin-top: 5px;
  width: 100%;
}
.street-compact .board-guide {
  display: none !important;
}
.challenge-strip.compact-challenge {
  transform: none;
  height: 70px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  padding: 6px;
  line-height: 1.2;
  overflow: hidden;
}
.compact-challenge strong {
  font-size: 11px;
}
.compact-challenge span {
  font-size: 9px;
}
.settings-section,
.rules-overlay .rules-list {
  scrollbar-width: auto;
  scrollbar-color: #7098c4 #0c1e36;
}
@media (max-width: 700px), (max-height: 440px) {
  .collection-shell .swatches img:nth-child(2),
  .collection-shell .swatches img:nth-child(4) {
    display: none;
  }
  .collection-shell .swatches img:nth-child(3) {
    display: block;
  }
}
.compact-tutorial .tut {
  max-height: calc(100dvh - 16px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 9px !important;
  scrollbar-width: thin;
}
.compact-tutorial .tut .row {
  display: block;
}
.compact-tutorial .tut .ttl {
  font-size: 12px;
  line-height: 1.3;
}
.compact-tutorial .dots {
  margin-top: 7px;
  gap: 3px;
}
.compact-tutorial .tut .txt {
  font-size: 12px;
  line-height: 1.4;
  margin-top: 10px;
}
.compact-tutorial .tutorial-progress {
  font-size: 9px;
  line-height: 1.3;
  margin: 9px 0;
}
.compact-tutorial .tutorial-select {
  font-size: 11px;
  max-width: 100%;
  width: 100%;
  padding: 7px 3px;
}
.compact-tutorial .tut-btns {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.compact-tutorial .tut-btns .btn {
  width: 100%;
  min-height: 44px !important;
  font-size: 12px;
  padding: 8px 6px !important;
  gap: 5px;
}
.compact-tutorial .tut-btns .btn svg {
  width: 17px;
  height: 17px;
  flex-basis: 17px;
}
html.painted .tut-btns .btn:nth-child(2) {
  --button-fill: linear-gradient(#1c3a60, #1c3a60);
  background: var(--button-fill);
  color: #e4efff;
  border-color: #54779f;
}
html.painted .settings-shell .actions .coral {
  --button-fill: linear-gradient(#102544, #102544);
  background: var(--button-fill);
  color: #ffb8ac;
  border-color: #7a5361;
  box-shadow: none;
}

/* End of src/match-polish.css */

/* End of assets/match-polish-CznCvos7.css */