/* STAGE VICTORY_WINNER_RACK_FINAL_START
   Victory-only composition.  The live match rack, assistant strip, tile
   assets, table, lobby, treats, and admin surfaces are intentionally out of
   scope for this sheet. */
.match-panel.normal-okey #roundOverlay.winner-celebration,
.match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  justify-items: center;
  width: min(760px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  height: min(700px, calc(100dvh - 24px));
  min-height: 0;
  max-height: calc(100dvh - 24px);
  padding: 252px 20px 16px;
  gap: 6px;
  overflow: hidden;
  isolation: isolate;
}

.match-panel.normal-okey #roundOverlay.winner-celebration .round-overlay-victory-decoration {
  opacity: .96;
}

.match-panel.normal-okey #roundOverlay.winner-celebration #roundOverlayWinnerNickname,
.match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) #roundOverlayWinnerNickname {
  order: 2;
  display: block;
  width: min(100%, 640px);
  min-width: 0;
  margin: 0;
  color: #fff8dc;
  font-size: clamp(1.05rem, 2.5vw, 1.55rem);
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: .035em;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 2px 10px rgba(15, 3, 30, .95), 0 0 18px rgba(255, 213, 83, .62);
  white-space: nowrap;
}

.match-panel.normal-okey #roundOverlay.winner-celebration #roundOverlayWinnerNickname[hidden],
.match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) #roundOverlayWinnerNickname[hidden] {
  display: none !important;
}

.match-panel.normal-okey #roundOverlay.winner-celebration #roundOverlayText,
.match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) #roundOverlayText {
  order: 3;
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

.match-panel.normal-okey #roundOverlay.winner-celebration .round-overlay-okey-label,
.match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) .round-overlay-okey-label {
  order: 4;
  margin: 0;
}

.match-panel.normal-okey #roundOverlay.winner-celebration .round-overlay-finished-hand,
.match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) .round-overlay-finished-hand {
  order: 5;
  width: min(100%, 500px);
  min-width: 0;
  margin: 0;
  gap: 6px;
}

.match-panel.normal-okey #roundOverlay.winner-celebration .round-overlay-finished-hand > strong,
.match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) .round-overlay-finished-hand > strong {
  color: #ffe9a6;
  font-size: .68rem;
  letter-spacing: .14em;
}

.match-panel.normal-okey #roundOverlay.winner-celebration .terminal-result-rack,
.match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) .terminal-result-rack {
  width: min(100%, 480px);
  height: 166px;
  min-height: 166px;
}

.match-panel.normal-okey #roundOverlay.winner-celebration .round-overlay-last-tile,
.match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) .round-overlay-last-tile {
  order: 6;
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 6px 10px;
}

.match-panel.normal-okey #roundOverlay.winner-celebration .round-overlay-last-tile > strong,
.match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) .round-overlay-last-tile > strong {
  white-space: nowrap;
}

.match-panel.normal-okey #roundOverlay.winner-celebration .round-overlay-last-tile-value .board-tile,
.match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) .round-overlay-last-tile-value .board-tile {
  width: 36px;
  height: 50px;
}

.match-panel.normal-okey #roundOverlay.winner-celebration .round-overlay-ack,
.match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) .round-overlay-ack {
  order: 7;
  margin: 0;
}

@media (max-width: 700px) {
  .match-panel.normal-okey #roundOverlay.winner-celebration,
  .match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    height: min(590px, calc(100dvh - 12px));
    max-height: calc(100dvh - 12px);
    padding: 196px 10px 12px;
    gap: 5px;
  }

  .match-panel.normal-okey #roundOverlay.winner-celebration #roundOverlayWinnerNickname,
  .match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) #roundOverlayWinnerNickname {
    font-size: clamp(.92rem, 4.8vw, 1.18rem);
  }

  .match-panel.normal-okey #roundOverlay.winner-celebration .round-overlay-finished-hand,
  .match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) .round-overlay-finished-hand {
    width: min(100%, 380px);
  }

  .match-panel.normal-okey #roundOverlay.winner-celebration .terminal-result-rack,
  .match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) .terminal-result-rack {
    width: min(100%, 380px);
    height: 132px;
    min-height: 132px;
  }

  .match-panel.normal-okey #roundOverlay.winner-celebration .terminal-result-rack .terminal-result-row,
  .match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) .terminal-result-rack .terminal-result-row {
    left: 24px;
    right: 24px;
    height: 39px;
    gap: 2px;
  }

  .match-panel.normal-okey #roundOverlay.winner-celebration .terminal-result-rack .terminal-result-row:first-child,
  .match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) .terminal-result-rack .terminal-result-row:first-child {
    top: 22px;
  }

  .match-panel.normal-okey #roundOverlay.winner-celebration .terminal-result-rack .terminal-result-row:nth-child(2),
  .match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) .terminal-result-rack .terminal-result-row:nth-child(2) {
    top: 75px;
  }

  .match-panel.normal-okey #roundOverlay.winner-celebration .terminal-result-rack .board-tile,
  .match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) .terminal-result-rack .board-tile {
    width: 28px;
    height: 39px;
    font-size: 1rem;
  }

  .match-panel.normal-okey #roundOverlay.winner-celebration .round-overlay-last-tile-value .board-tile,
  .match-panel.normal-okey #roundOverlay:has(#roundOverlayFinishedHand:not(.hidden)) .round-overlay-last-tile-value .board-tile {
    width: 30px;
    height: 42px;
  }
}
/* STAGE VICTORY_WINNER_RACK_FINAL_END */

/* STAGE MODERN_VIP_RESULT_OVERLAY_PREMIUM_START
   Modern VIP keeps the same live result DOM, canonical hand, last discard,
   acknowledgement button, and reconnect lifecycle. Only this theme's paint
   and layout are changed: the old green/purple result surface becomes a
   bounded black/gold panel with a dedicated last-tile column. */
#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.winner-celebration,
#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay:is(.round-overlay-result, :has(#roundOverlayFinishedHand:not(.hidden))) {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 118px !important;
  grid-template-areas:
    "title title"
    "winner last"
    "message last"
    "okey last"
    "hand hand"
    "ack ack" !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  justify-items: stretch !important;
  width: min(880px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 28px) !important;
  padding: 20px 18px 16px !important;
  gap: 9px 14px !important;
  overflow: auto !important;
  isolation: isolate !important;
  border: 1px solid #e2b85d !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #080b10 0%, #15120d 52%, #05070a 100%) !important;
  box-shadow: inset 0 0 0 2px #ffe6a11c, 0 0 0 1px #2a1c08, 0 18px 52px #000d, 0 0 28px #e2b85d33 !important;
  color: #fff6df !important;
  text-align: left !important;
}

#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.winner-celebration > :not(.round-overlay-victory-decoration),
#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay:is(.round-overlay-result, :has(#roundOverlayFinishedHand:not(.hidden))) > :not(.round-overlay-victory-decoration) {
  position: relative !important;
  z-index: 1 !important;
}

#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.winner-celebration .round-overlay-victory-decoration,
#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay:is(.round-overlay-result, :has(#roundOverlayFinishedHand:not(.hidden))) .round-overlay-victory-decoration {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  opacity: .14 !important;
  filter: saturate(.65) brightness(.62) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.winner-celebration #roundOverlayTitle,
#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay:is(.round-overlay-result, :has(#roundOverlayFinishedHand:not(.hidden))) #roundOverlayTitle {
  grid-area: title !important;
  position: relative !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  color: #f4db91 !important;
  font-size: clamp(1.12rem, 2.1vw, 1.55rem) !important;
  font-weight: 950 !important;
  letter-spacing: .16em !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-shadow: 0 2px 12px #000, 0 0 16px #e2b85d66 !important;
  white-space: nowrap !important;
}

#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.winner-celebration #roundOverlayWinnerNickname,
#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay:is(.round-overlay-result, :has(#roundOverlayFinishedHand:not(.hidden))) #roundOverlayWinnerNickname {
  grid-area: winner !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #fff4cf !important;
  font-size: clamp(1rem, 2vw, 1.4rem) !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  letter-spacing: .04em !important;
  overflow-wrap: anywhere !important;
  text-align: left !important;
  text-overflow: clip !important;
  text-shadow: 0 2px 9px #000 !important;
  white-space: normal !important;
}

#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.winner-celebration #roundOverlayText,
#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay:is(.round-overlay-result, :has(#roundOverlayFinishedHand:not(.hidden))) #roundOverlayText {
  grid-area: message !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: 5.4em !important;
  margin: 0 !important;
  overflow: auto !important;
  color: #fff9e9 !important;
  font-size: clamp(.9rem, 1.45vw, 1.08rem) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: .025em !important;
  overflow-wrap: anywhere !important;
  text-align: left !important;
  text-shadow: 0 2px 8px #000 !important;
  white-space: pre-line !important;
}

#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.winner-celebration .round-overlay-okey-label,
#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay:is(.round-overlay-result, :has(#roundOverlayFinishedHand:not(.hidden))) .round-overlay-okey-label {
  grid-area: okey !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #f4db91 !important;
  font-size: .78rem !important;
  letter-spacing: .12em !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-shadow: 0 2px 8px #000 !important;
}

#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.winner-celebration .round-overlay-last-tile,
#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay:is(.round-overlay-result, :has(#roundOverlayFinishedHand:not(.hidden))) .round-overlay-last-tile {
  grid-area: last !important;
  position: relative !important;
  inset: auto !important;
  align-self: start !important;
  justify-self: stretch !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 9px 7px !important;
  border: 1px solid #b98632 !important;
  border-radius: 7px !important;
  background: linear-gradient(145deg, #151b20, #05070a 78%) !important;
  box-shadow: inset 0 0 0 1px #ffe6a11c, 0 8px 18px #000b !important;
}

#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.winner-celebration .round-overlay-last-tile > strong,
#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay:is(.round-overlay-result, :has(#roundOverlayFinishedHand:not(.hidden))) .round-overlay-last-tile > strong {
  color: #f4db91 !important;
  font-size: .58rem !important;
  letter-spacing: .08em !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: normal !important;
}

#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.winner-celebration .round-overlay-last-tile-value,
#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay:is(.round-overlay-result, :has(#roundOverlayFinishedHand:not(.hidden))) .round-overlay-last-tile-value {
  display: grid !important;
  place-items: center !important;
}

#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.winner-celebration .round-overlay-last-tile-value .board-tile,
#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay:is(.round-overlay-result, :has(#roundOverlayFinishedHand:not(.hidden))) .round-overlay-last-tile-value .board-tile {
  width: 42px !important;
  height: 58px !important;
}

#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.winner-celebration .round-overlay-finished-hand,
#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay:is(.round-overlay-result, :has(#roundOverlayFinishedHand:not(.hidden))) .round-overlay-finished-hand {
  grid-area: hand !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px 12px 12px !important;
  gap: 7px !important;
  border: 1px solid #9c7636 !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #11171b, #05070a 78%) !important;
  box-shadow: inset 0 0 0 1px #ffe6a11c, 0 8px 18px #000a !important;
}

#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.winner-celebration .round-overlay-finished-hand > strong,
#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay:is(.round-overlay-result, :has(#roundOverlayFinishedHand:not(.hidden))) .round-overlay-finished-hand > strong {
  color: #f4db91 !important;
  font-size: .66rem !important;
  letter-spacing: .14em !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.winner-celebration .terminal-result-rack,
#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay:is(.round-overlay-result, :has(#roundOverlayFinishedHand:not(.hidden))) .terminal-result-rack {
  width: min(100%, 540px) !important;
  height: 176px !important;
  min-height: 176px !important;
}

#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.winner-celebration .round-overlay-ack,
#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay:is(.round-overlay-result, :has(#roundOverlayFinishedHand:not(.hidden))) .round-overlay-ack {
  grid-area: ack !important;
  justify-self: center !important;
  min-width: 132px !important;
  margin: 0 !important;
  border: 1px solid #d6a548 !important;
  background: linear-gradient(180deg, #f0c965, #9e6c1f) !important;
  color: #171008 !important;
  box-shadow: inset 0 1px #fff4b0, 0 0 12px #e2b85d44 !important;
}

@media (max-width: 700px) {
  #matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.winner-celebration,
  #matchPanel.normal-okey.table-theme-modern-vip #roundOverlay:is(.round-overlay-result, :has(#roundOverlayFinishedHand:not(.hidden))) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "title" "winner" "message" "okey" "hand" "last" "ack" !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 12px) !important;
    padding: 16px 12px 12px !important;
    gap: 7px !important;
  }

  #matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.winner-celebration .round-overlay-last-tile,
  #matchPanel.normal-okey.table-theme-modern-vip #roundOverlay:is(.round-overlay-result, :has(#roundOverlayFinishedHand:not(.hidden))) .round-overlay-last-tile {
    justify-self: center !important;
    width: max-content !important;
    min-width: 124px !important;
    grid-template-columns: auto auto !important;
    padding: 6px 9px !important;
  }

  #matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.winner-celebration .terminal-result-rack,
  #matchPanel.normal-okey.table-theme-modern-vip #roundOverlay:is(.round-overlay-result, :has(#roundOverlayFinishedHand:not(.hidden))) .terminal-result-rack {
    width: min(100%, 390px) !important;
    height: 136px !important;
    min-height: 136px !important;
  }
}

#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.round-overlay-result {
  pointer-events: auto !important;
}

#matchPanel.normal-okey.table-theme-modern-vip #roundOverlay.round-overlay-result .round-overlay-ack {
  position: relative !important;
  z-index: 3 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* STAGE MODERN_VIP_RESULT_OVERLAY_PREMIUM_END */
