/* A안 결과창. 경기 종료 때만 전신 캐릭터를 펼치고, 작은 화면은 무대 안을 스크롤한다. */
.msg {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  text-align: center;
  background: #0b1420;
  touch-action: pan-y;
}
.msg.show { display: grid; }
.msg:focus { outline: none; }
.result-panel {
  position: relative;
  display: grid;
  grid-template-rows: 62px minmax(0, 1fr) auto;
  width: min(1480px, 100%);
  height: 100%;
  min-height: 0;
  margin: auto;
  padding: 0 max(32px, env(safe-area-inset-left)) 0 max(32px, env(safe-area-inset-right));
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 18%, #b58b3833, transparent 55%),
    linear-gradient(125deg, #192b39, #101b29 45%, #0a111a);
}
.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #ffffff18;
  color: #a9b8c9;
  font-size: 12px;
}
.result-brand { font-weight: 800; letter-spacing: 4px; color: #eef3f7; font-size: 16px; }
.result-brand small { margin-left: 10px; font-size: 10px; color: #edc779; letter-spacing: 2px; }
.result-mode { flex-shrink: 0; padding: 6px 12px; border: 1px solid #ffffff25; border-radius: 20px; }
.result-content {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px 0 16px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #526579 transparent;
}
.result-heading { flex-shrink: 0; }
.result-eyebrow { color: #edc779; font-size: 11px; letter-spacing: 4px; font-weight: 800; }
.result-heading h2 { margin: 6px 0 5px; color: #f3f5f7; font-size: clamp(24px, 3vw, 36px); line-height: 1.25; overflow-wrap: anywhere; }
.result-heading p { margin: 0; color: #cfb782; font-size: 14px; font-variant-numeric: tabular-nums; }
.result-winners {
  position: relative;
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: repeat(var(--winner-groups), minmax(0, 1fr));
  align-items: end;
  justify-content: center;
  min-height: 220px;
  padding: 8px 5% 7px;
  gap: 25px;
}
.result-winners::before {
  content: "";
  position: absolute;
  bottom: 18px;
  left: 10%;
  right: 10%;
  height: 62px;
  border: 1px solid #edc77940;
  border-radius: 50%;
  background: radial-gradient(ellipse, #dca94528, transparent 70%);
  pointer-events: none;
}
.result-winner-group { position: relative; min-width: 0; }
.result-winner-label { font-size: 13px; margin: 0 0 25px; color: #e2c995; font-weight: 600; overflow-wrap: anywhere; }
.result-lineup { display: flex; align-items: flex-end; justify-content: center; gap: 16px; }
.result-winner {
  position: relative;
  width: min(235px, calc(100% / var(--winner-count)));
  min-width: 0;
  flex: 0 1 235px;
}
.result-portrait { display: block; object-fit: contain; object-position: bottom; max-width: 100%; }
.result-winner > .result-portrait {
  width: 100%;
  height: clamp(140px, calc(100dvh - 540px), 310px);
  filter: drop-shadow(0 12px 13px #0007);
}
.result-name, .result-member-name, .result-record-name { display: flex; justify-content: center; align-items: center; gap: 4px; min-width: 0; }
.result-name { margin-top: 9px; font-size: 16px; }
.result-player-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.result-me-tag { flex-shrink: 0; border-radius: 3px; padding: 1px 4px; background: #80dedf; color: #12282e; font-size: 9px; font-weight: 800; }
.result-winner-stats { margin-top: 4px; color: #aabbd0; font-size: 11px; }
.result-highlight {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 4px 9px;
  border: 1px solid #edc77966;
  border-radius: 20px;
  background: #182534;
  color: #edc779;
  font-size: 10px;
}
.result-tied .result-winner { flex: 1 1 0; width: auto; max-width: 220px; }
.result-tied .result-winner-group + .result-winner-group { border-left: 1px solid #edc77930; padding-left: 25px; }
.result-many-winners .result-winners { flex-grow: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.result-many-winners.result-solo .result-winners { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.result-many-winners .result-winner > .result-portrait { height: 155px; }
.result-many-winners .result-winner-group + .result-winner-group { border: 0; padding-left: 0; }
.result-others { flex-shrink: 0; }
.result-others[hidden], .result-records[hidden] { display: none; }
.result-others-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; margin-bottom: 8px; border-top: 1px solid #ffffff18; }
.result-others-heading h3 { margin: 0; font-size: 13px; color: #c5d3e2; }
.result-others-heading > span { color: #8fa5bd; font-size: 11px; }
.result-participants { display: grid; grid-template-columns: repeat(var(--entry-count), minmax(0, 1fr)); gap: 8px; }
.result-card { min-width: 0; padding: 7px 6px 8px; background: #152332b8; border: 1px solid #304257; border-radius: 7px; }
.result-card.result-mine { border-color: #80dedf; background: #173b4180; }
.result-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 11px; }
.result-card-heading strong { flex-shrink: 0; }
.result-team-label { font-size: 11px; overflow-wrap: anywhere; }
.result-card-lineup { display: flex; justify-content: center; gap: 4px; margin: 3px 0; }
.result-member { flex: 1; min-width: 0; }
.result-member > .result-portrait { height: 66px; width: 100%; margin: auto; filter: drop-shadow(0 4px 5px #0006); }
.result-member-name { margin-top: 4px; font-size: 11px; align-items: start; }
.result-card-score { margin-top: 5px; font-size: 12px; font-variant-numeric: tabular-nums; }
.result-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 80px; padding: 14px 0 max(14px, env(safe-area-inset-bottom)); border-top: 1px solid #ffffff18; }
.result-footer > p { margin: 0; font-size: 13px; color: #b6c7d9; font-variant-numeric: tabular-nums; text-align: left; }
.result-my-rank { color: #80dedf; font-size: 18px; margin: 0 3px; }
.result-actions { display: flex; gap: 8px; flex-shrink: 0; }
.result-panel button { padding: 11px 18px; background: #ffffff08; color: #e9eff7; border: 1px solid #ffffff28; border-radius: 5px; font-size: 13px; cursor: pointer; }
.result-panel button:hover:not(:disabled) { background: #ffffff15; }
.result-panel button:focus-visible { outline: 2px solid #80dedf; outline-offset: 3px; }
.result-panel .result-primary { background: #edc779; border-color: #edc779; color: #172536; font-weight: 800; }
.result-panel .result-primary:hover:not(:disabled) { background: #f8d994; }
.result-panel button:disabled { opacity: .55; cursor: default; }
.result-records { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: 18px; min-height: 0; padding: 30px max(32px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(32px, env(safe-area-inset-left)); background: #101e2c; }
.result-records-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; }
.result-records-heading h2 { margin: 8px 0 0; font-size: 27px; }
.result-records-heading button { flex-shrink: 0; }
.result-records > p { margin: 0; text-align: left; color: #a6bad0; font-size: 13px; }
.result-table-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; border: 1px solid #314358; border-radius: 7px; }
.result-table { width: 100%; border-collapse: collapse; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.result-table th { position: sticky; top: 0; z-index: 1; background: #182b3e; color: #9cb3cc; font-size: 12px; }
.result-table td, .result-table th { padding: 10px 14px; border-bottom: 1px solid #ffffff14; white-space: nowrap; }
.result-table th:first-child { text-align: left; }
.result-table td:first-child { text-align: left; color: #c2d2e2; }
.result-table td:nth-child(2), .result-table th:nth-child(2) { text-align: left; }
.result-table tr.result-mine { background: #22484d; }
.result-record-player > .result-portrait { width: 40px; height: 38px; display: inline-block; vertical-align: middle; }
.result-record-name { display: inline-flex; justify-content: start; vertical-align: middle; max-width: 230px; white-space: normal; margin-left: 10px; }
.msg.show .result-heading { animation: result-title-enter .35s ease-out both; }
.msg.show .result-winners { animation: result-characters-enter .6s ease-out both; }
@keyframes result-title-enter { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes result-characters-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 1050px) {
  .result-panel { padding-left: 18px; padding-right: 18px; }
  .result-brand { font-size: 13px; letter-spacing: 2px; }
  .result-brand small { display: none; }
  .result-match-info { font-size: 11px; }
  .result-name { font-size: 14px; }
  .result-solo .result-participants { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .result-solo .result-member > .result-portrait { height: 56px; }
  .result-solo .result-card { padding-top: 6px; padding-bottom: 6px; }
  .result-solo .result-card-score { margin-top: 3px; }
  .result-card-lineup { gap: 2px; }
  .result-member-name { font-size: 10px; gap: 2px; }
}
@media (max-height: 540px) and (min-width: 601px) {
  .result-panel { grid-template-rows: 34px minmax(0, 1fr) auto; }
  .result-header { font-size: 10px; }
  .result-mode { padding: 3px 9px; }
  .result-content { gap: 8px; padding: 5px 0; }
  .result-eyebrow { font-size: 9px; }
  .result-heading h2 { font-size: 20px; margin: 2px 0; }
  .result-heading p { font-size: 11px; }
  .result-winners { min-height: 96px; padding-top: 3px; padding-bottom: 0; }
  .result-winner > .result-portrait { height: 72px; }
  .result-name { font-size: 11px; margin-top: 3px; }
  .result-winner-stats { display: none; }
  .result-highlight { top: -8px; font-size: 8px; padding: 2px 5px; }
  .result-winners::before { height: 26px; bottom: 5px; }
  .result-winner-label { font-size: 10px; margin-bottom: 13px; }
  .result-others-heading { padding-top: 5px; margin-bottom: 5px; }
  .result-others-heading h3 { font-size: 11px; }
  .result-others-heading > span { font-size: 9px; }
  .result-card { padding: 5px; }
  .result-card-heading, .result-team-label { font-size: 9px; }
  .result-member > .result-portrait, .result-solo .result-member > .result-portrait { height: 30px; }
  .result-member-name { font-size: 9px; margin-top: 3px; }
  .result-card-score { font-size: 10px; margin-top: 3px; }
  .result-card-lineup { margin: 2px 0; }
  .result-solo .result-participants { grid-template-columns: repeat(var(--entry-count), minmax(0, 1fr)); }
  .result-footer { min-height: 50px; padding-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .result-footer > p { font-size: 10px; }
  .result-my-rank { font-size: 14px; }
  .result-panel button { font-size: 11px; padding: 8px 12px; }
  .result-records { padding: 16px 20px; gap: 10px; }
  .result-records-heading h2 { font-size: 21px; }
  .result-table td, .result-table th { padding: 6px 10px; font-size: 12px; }
  .result-record-player > .result-portrait { height: 28px; width: 29px; }
}
@media (max-width: 600px) {
  .result-panel { grid-template-rows: 48px minmax(0, 1fr) auto; padding-left: 14px; padding-right: 14px; }
  .result-match-info { display: none; }
  .result-header { font-size: 11px; }
  .result-heading h2 { font-size: 26px; }
  .result-heading p { font-size: 12px; }
  .result-content { gap: 18px; padding-top: 22px; }
  .result-winners { flex-grow: 0; min-height: 235px; padding: 8px 0 0; }
  .result-lineup { gap: 10px; flex-wrap: wrap; }
  .result-winner { width: auto; flex: 0 1 calc(50% - 5px); max-width: 230px; }
  .result-winner > .result-portrait { height: 164px; }
  .result-solo:not(.result-tied) .result-winner { flex-basis: 230px; }
  .result-solo:not(.result-tied) .result-winner > .result-portrait { height: 225px; }
  .result-name { font-size: 14px; }
  .result-winner-stats { font-size: 10px; }
  .result-tied .result-winners { grid-template-columns: 1fr; gap: 27px; }
  .result-tied .result-winner-group + .result-winner-group { padding-left: 0; border-left: 0; padding-top: 15px; border-top: 1px solid #edc77930; }
  .result-tied .result-winner { flex: 0 1 calc(50% - 5px); }
  .result-solo.result-tied .result-winners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-solo.result-tied .result-winner { flex-basis: 100%; }
  .result-solo.result-tied .result-winner-group + .result-winner-group { border: 0; padding: 0; }
  .result-many-winners .result-winner > .result-portrait { height: 120px; }
  .result-others-heading { align-items: start; }
  .result-others-heading h3 { font-size: 12px; }
  .result-others-heading > span { font-size: 10px; }
  .result-participants { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .msg[data-team-size="4"] .result-participants { grid-template-columns: 1fr; }
  .result-solo .result-participants { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .result-member > .result-portrait { height: 66px; }
  .result-member-name { font-size: 11px; }
  .result-card-heading, .result-team-label { font-size: 11px; }
  .result-footer { flex-direction: column; justify-content: center; gap: 10px; padding-top: 12px; }
  .result-footer > p { font-size: 12px; }
  .result-my-rank { font-size: 16px; }
  .result-actions { width: 100%; justify-content: center; gap: 6px; }
  .result-panel button { font-size: 12px; padding: 9px 12px; }
  .result-records { padding: 20px 14px; gap: 15px; }
  .result-records-heading h2 { font-size: 23px; }
  .result-records-heading button { font-size: 11px; padding: 8px; }
  .result-records > p { font-size: 11px; }
  .result-table { min-width: 560px; font-size: 12px; }
  .result-table td, .result-table th { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .msg.show .result-heading, .msg.show .result-winners { animation: none; }
}