/* Playtsui refinement layer: protect the playfield, keep the interface quiet. */
[hidden] { display: none !important; }
.game-layout[data-experience] .board-region { width: 100%; margin-left: 0; }
.game-layout[data-experience="mahjong"] .board-viewport.is-mobile-mahjong { display: grid; place-items: center; background: #16120e; }
.game-layout[data-experience="mahjong"] .board-viewport.is-mobile-mahjong .game-board { flex-shrink: 0; }
.game-layout[data-experience="mahjong"] .board-help { min-height: 2.8em; }
.game-layout[data-experience] .board-viewport,
.game-layout[data-experience] .board-header {
  width: min(100%, var(--fitted-board-width, 100%));
  margin-inline: auto;
}
.game-layout[data-experience] .game-hud {
  width: min(100%, 920px);
  margin-inline: auto;
  grid-template-columns: auto auto auto auto;
}
.game-hud .stats dt, .hud-button { font-size: 11px; letter-spacing: .04em; }
.game-hud .stats dt { color: #a1a7b0; }
.record-time { display: block; color: #a1a7b0; font: 400 11px/1.35 var(--font-ui); letter-spacing: 0; }
.game-hud .hud-message { color: #a1a7b0; }
.game-layout .board-help { text-align: center; }
.zoom-controls button { min-width: 44px; min-height: 36px; }
.saved-play-entry {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid #ffffff14;
}
.saved-play-entry > span { color: #a1a7b0; font-size: 12px; line-height: 1.5; }
.saved-play-entry button, .collection-view-toggle {
  flex-shrink: 0; min-height: 44px; padding: 8px 12px;
  border: 1px solid #ffffff28; border-radius: 5px 10px 5px 10px;
  background: #20262d; color: var(--paper); font: 600 13px var(--font-ui); cursor: pointer;
  box-shadow: inset 0 1px #ffffff09, 0 2px #06080a;
}
.saved-play-entry button:hover, .collection-view-toggle:hover { background: #2b323b; }
.game-entry:has(.saved-play-entry) { height: auto; min-height: 0; }
.game-entry:has(.saved-play-entry) .game-entry-content { min-height: 0; }
.confirm-game-dialog {
  width: min(440px, calc(100% - 32px)); padding: 28px;
  border: 1px solid #ffffff28; border-radius: 8px 22px 8px 22px;
  background: #14191f; color: var(--paper); box-shadow: 0 24px 80px #0009;
}
.confirm-game-dialog::backdrop { background: #040608bb; }
.confirm-game-dialog h2 { font: 600 32px/1.05 var(--font-display); margin: 0 0 12px; }
.confirm-game-dialog p { color: #b2b6bd; line-height: 1.5; margin: 0 0 24px; }
.confirm-game-dialog > div { display: flex; gap: 12px; flex-wrap: wrap; }
.confirm-game-dialog button {
  min-height: 44px; padding: 10px 14px; border: 1px solid #ffffff30;
  border-radius: 6px; background: #232a32; color: var(--paper); font: 600 14px var(--font-ui); cursor: pointer;
}
.confirm-game-dialog .confirm-primary { background: #713b34; border-color: #d86e5b; }
.result-dialog { overflow-y: auto; max-height: calc(100dvh - 24px); }
@media (max-height: 740px) {
  .result-dialog { padding: 32px 36px 24px; }
  .result-dialog .result-art { height: 84px; margin-bottom: 18px; transform: scale(.8); }
  .result-dialog h2 { font-size: 40px; }
  .result-dialog .result-summary { margin: 14px auto 18px; font-size: 14px; }
  .result-dialog .result-stats { padding: 14px 0; margin-bottom: 18px; }
}
.confirm-game-dialog button:focus-visible, .collection-view-toggle:focus-visible,
.saved-play-entry button:focus-visible, .deal-style-choice button:focus-visible {
  outline: 2px solid var(--paper); outline-offset: 4px;
}
.setup-dialog[data-experience] { background: #11161b; }
.setup-dialog[data-experience] .mahjong-setup-progress button {
  min-height: 46px; padding: 6px 4px; font-size: 13px; color: #a2a9b2;
}
.setup-dialog[data-experience] .mahjong-setup-progress button[aria-current="step"] { color: #fff5e8; }
.setup-dialog[data-experience] .setup-header > p:last-child { color: #a3aab4; font-size: 13px; }
.setup-dialog[data-experience] .dialog-close { width: 44px; height: 44px; }
.setup-dialog[data-experience] .setup-carousel-arrow { width: 44px; height: 44px; }
.setup-dialog[data-experience] .art-preview-card,
.setup-dialog[data-experience] .layout-preview-card { opacity: 1; transform: none; }
.setup-dialog[data-experience] .art-preview-card:not([aria-pressed="true"]),
.setup-dialog[data-experience] .layout-preview-card:not([aria-pressed="true"]) {
  background: #151b21; border-color: #ffffff20;
}
.setup-dialog[data-experience] .art-preview-copy strong { color: #e8e5de; }
.setup-dialog[data-experience] .art-preview-copy small { color: #a5acb5; }
.setup-dialog[data-experience] .setup-actions {
  grid-template-rows: auto auto; row-gap: 8px; padding-top: 12px;
}
.setup-summary { grid-column: 1 / -1; grid-row: 1; margin: 0; font-size: 12px; color: #b8bcc3; text-align: right; }
.setup-dialog[data-experience] .setup-actions > button { grid-row: 2; }
.collection-view-toggle { display: block; margin: 0 0 2px auto; background: transparent; box-shadow: none; }
.setup-dialog[data-experience] .is-art:has(.collection-view-toggle) { display: block; min-height: 0; }
.setup-dialog[data-experience] .is-art .setup-carousel-shell { height: auto; }
.setup-dialog[data-experience] .setup-carousel-shell.is-overview .setup-carousel-track {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  overflow: visible; padding: 10px 2px; height: auto;
}
.setup-dialog[data-experience] .is-overview .setup-carousel-arrow { display: none; }
.setup-dialog[data-experience] .is-overview .art-preview-card {
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  min-width: 0; min-height: 180px; padding: 12px; transform: none; overflow: hidden;
}
.setup-dialog[data-experience] .is-overview .setup-theme-fan,
.setup-dialog[data-experience] .is-overview .memory-theme-fan { width: 100%; height: 100px; min-height: 100px; }
.setup-dialog[data-experience] .is-overview .art-preview-copy strong { font-size: 21px; }
.setup-dialog[data-experience] .is-overview .art-preview-copy small { display: none; }
.setup-dialog[data-experience] .is-overview .setup-theme-fan .memory-theme-card {
  width: 44%; max-width: 90px; transform: translateX(-55%) rotate(-8deg) translateY(4px);
}
.setup-dialog[data-experience] .is-overview .setup-theme-fan .memory-theme-card:nth-child(2) {
  transform: translateY(-4px) rotate(1deg);
}
.setup-dialog[data-experience] .is-overview .setup-theme-fan .memory-theme-card:nth-child(3) {
  transform: translateX(55%) rotate(8deg) translateY(4px);
}
.setup-dialog[data-experience] .is-overview .setup-theme-tile { width: 38%; max-width: 60px; }
.deal-style-choice { border: 0; padding: 0; margin: 18px 0 0; }
.deal-style-choice legend { color: #e8e5de; font-size: 14px; font-weight: 600; }
.deal-style-choice legend span { margin-left: 8px; color: #9ca4ae; font-size: 12px; font-weight: 400; }
.deal-style-choice > div { display: flex; gap: 6px; margin: 10px 0 8px; }
.deal-style-choice button {
  min-height: 44px; min-width: 82px; padding: 8px 14px; background: #1c232a;
  border: 1px solid #ffffff23; border-radius: 5px; color: #bec4cb;
  font: 600 13px var(--font-ui); cursor: pointer;
}
.deal-style-choice button[aria-pressed="true"] { color: #fff1e7; background: #2a2020; border-color: #d86653; }
.deal-style-choice p { max-width: 70ch; color: #9fa7b0; font-size: 12px; line-height: 1.5; margin: 0; }
.deal-style-choice summary { color: #aab2bc; font-size: 12px; padding: 4px 0; cursor: pointer; }
/* Let the challenge step grow with its explanation at every laptop height.
   Percentage-height stages inside a fixed-height grid clipped the extra copy. */
@media (min-width: 721px) {
  .setup-dialog[data-experience="mahjong"][data-setup-step="1"] {
    height: fit-content;
    max-height: calc(100dvh - 24px);
  }
  .setup-dialog[data-experience="mahjong"][data-setup-step="1"][open] {
    display: flex;
    flex-direction: column;
  }
  .setup-dialog[data-experience="mahjong"][data-setup-step="1"] .setup-header {
    min-height: 92px;
    padding-block: 12px 8px;
    flex-shrink: 0;
  }
  .setup-dialog[data-experience="mahjong"][data-setup-step="1"] .mahjong-setup-progress {
    padding-bottom: 5px;
    flex-shrink: 0;
  }
  .setup-dialog[data-experience="mahjong"][data-setup-step="1"] .setup-options {
    flex: 0 1 auto;
    max-height: none;
    overflow-y: auto;
  }
  .setup-dialog[data-experience="mahjong"][data-setup-step="1"] .mahjong-setup-flow {
    height: auto;
  }
  .setup-dialog[data-experience="mahjong"][data-setup-step="1"] .mahjong-setup-stage {
    height: auto;
    min-height: 0;
    padding-block: 8px 12px;
    align-content: start;
  }
  .setup-dialog[data-experience="mahjong"][data-setup-step="1"] .mahjong-pair-option {
    grid-template-rows: 102px auto auto;
    min-height: 188px;
  }
  .setup-dialog[data-experience="mahjong"][data-setup-step="1"] .complexity-scene {
    min-height: 102px;
  }
  .setup-dialog[data-experience="mahjong"][data-setup-step="1"] .deal-style-choice {
    margin-top: 9px;
  }
  .setup-dialog[data-experience="mahjong"][data-setup-step="1"] .deal-style-choice > div {
    margin-block: 7px 4px;
  }
  .setup-dialog[data-experience="mahjong"][data-setup-step="1"] .deal-style-choice button {
    min-height: 44px;
  }
  .setup-dialog[data-experience="mahjong"][data-setup-step="1"] .deal-style-choice summary {
    padding-block: 2px;
  }
  .setup-dialog[data-experience="mahjong"][data-setup-step="1"] .deal-style-choice p {
    max-width: none;
  }
  .setup-dialog[data-experience="mahjong"][data-setup-step="1"] .setup-actions {
    flex-shrink: 0;
    row-gap: 3px;
    padding-block: 7px 9px;
  }
  .setup-dialog[data-experience="mahjong"][data-setup-step="1"] .setup-actions:has(.setup-summary[hidden]) {
    grid-template-rows: auto;
  }
  .setup-dialog[data-experience="mahjong"][data-setup-step="1"] .setup-actions:has(.setup-summary[hidden]) > button {
    grid-row: 1;
  }
  .setup-dialog[data-experience="mahjong"][data-setup-step="1"] .setup-actions > button {
    min-height: 50px;
  }
}
.slide-line-control { border-color: transparent; background: transparent; box-shadow: none; color: #9fa5ae; }
.slide-line-control:hover, .slide-line-control:focus-visible { background: #353039; border-color: #e4524566; color: #fff1e6; }
.slide-control-rail:has(:focus-visible) .slide-line-control:not(:focus-visible) { opacity: .65; }
@media (max-width: 960px) {
  .game-layout[data-experience] .game-hud { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
  .game-layout[data-experience] .game-hud .stats { width: auto; flex: 1 1 200px; }
  .game-layout[data-experience] .hud-message { flex-basis: 100%; text-align: center; }
  .game-layout[data-experience] .hud-setup-button { width: auto; }
}
@media (max-width: 600px) {
  .topbar { gap: 8px; }
  .topbar-center { gap: 8px; }
  .topbar-center .current-game-label { display: flex; padding-left: 4px; border: 0; }
  .current-game-label img { width: 120px; }
  .library-button { min-width: 44px; min-height: 44px; }
  .game-layout[data-experience="mahjong"] .board-header { gap: 12px; }
  .game-layout[data-experience="mahjong"] .board-header .progress-track { display: none; }
  .game-layout[data-experience="mahjong"] .zoom-controls { flex-shrink: 0; }
  .setup-dialog[data-experience="memory"], .setup-dialog[data-experience="mahjong"], .setup-dialog[data-experience="slide"] {
    height: auto; max-height: calc(100dvh - 20px); width: calc(100% - 20px);
  }
  .setup-dialog[data-experience][open] { display: flex; flex-direction: column; height: fit-content; }
  .setup-dialog[data-experience] .setup-header { min-height: 90px; padding-bottom: 10px; flex-shrink: 0; }
  .setup-dialog[data-experience] .setup-options { flex: 0 1 auto; max-height: calc(100dvh - 270px); }
  .setup-dialog[data-experience] .mahjong-setup-progress,
  .setup-dialog[data-experience] .setup-actions { flex-shrink: 0; }
  .setup-dialog[data-experience] .memory-setup-flow,
  .setup-dialog[data-experience] .mahjong-setup-flow,
  .setup-dialog[data-experience] .slide-setup-flow { height: auto; }
  .setup-dialog[data-experience] .memory-setup-stage,
  .setup-dialog[data-experience] .mahjong-setup-stage,
  .setup-dialog[data-experience] .slide-setup-stage { min-height: 0; height: auto; }
  .setup-dialog[data-experience] .mahjong-setup-progress { gap: 3px; padding-inline: 14px; padding-bottom: 6px; }
  .setup-dialog[data-experience] .mahjong-setup-progress > span { flex-basis: 12px; }
  .setup-dialog[data-experience] .mahjong-setup-progress button { gap: 4px; font-size: 12px; }
  .setup-dialog[data-experience] .setup-carousel-track { min-height: 230px; }
  .setup-dialog[data-experience] .setup-carousel-shell.is-overview .setup-carousel-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-dialog[data-experience] .is-overview .art-preview-card { min-height: 150px; }
  .setup-dialog[data-experience] .setup-actions { padding-bottom: 16px; }
  .setup-summary { text-align: left; line-height: 1.4; }
  .deal-style-choice > div > button { flex: 1; min-width: 0; }
  .deal-style-choice legend span { display: block; margin: 4px 0 0; }
  .game-layout[data-experience] .game-hud { gap: 7px; padding: 8px; }
  .game-layout[data-experience] .game-hud .stats { flex-basis: 100%; padding-bottom: 6px; }
  .game-layout[data-experience] .hud-actions { flex: 1; }
  .game-layout[data-experience] .hud-theme-choice { order: 4; }
  .game-layout[data-experience] .hud-message { order: 5; }
  .game-layout[data-experience] .hud-group-label { display: none; }
  .saved-play-entry { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .slide-card, .slide-line-control, .setup-dialog[data-experience] *, .game-hud * {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}
body[data-input="keyboard"] .setup-dialog *,
body[data-input="keyboard"] .memory-card .card-inner,
body[data-input="keyboard"] .game-board.is-mahjong { transition-duration: .01ms !important; }