html.np-match-result-open,
html.np-match-result-open body { overflow: hidden !important; }
html.np-match-result-open .victory-backdrop { display: none !important; }

.np-match-result-backdrop {
  position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center;
  padding: clamp(10px, 2vw, 30px); color: #f2dfb6;
  background: #050302e8; font-family: Literata, Georgia, "Times New Roman", serif;
  overflow: auto;
}
.np-match-result {
  --np-result-accent: #d0a251; --np-result-panel: #1a100bdc;
  position: relative; isolation: isolate; width: min(1180px, 96vw); min-height: min(760px, 94vh);
  display: flex; flex-direction: column; border: 1px solid #a9783c; border-radius: 16px;
  padding: clamp(28px, 4vw, 58px); overflow: hidden;
  background: url("/theme-assets/match-results/classic-v1.png") center/cover no-repeat;
  box-shadow: 0 0 0 4px #120a06, 0 0 0 6px #9c6b32, 0 36px 100px #000, inset 0 0 70px #0008;
}
.np-match-result::before { content: ""; position: absolute; inset: 0; z-index: -2; background: #08050342; }
.np-result-deck-art { position: absolute; z-index: -1; inset: 8% 14%; opacity: .12; background: var(--np-result-deck-art, none) center/cover; filter: saturate(.75) contrast(1.1); -webkit-mask-image: radial-gradient(ellipse, #000 25%, transparent 72%); mask-image: radial-gradient(ellipse, #000 25%, transparent 72%); }
.np-match-result header { text-align: center; }
.np-match-result header > span, .np-match-result h2 { color: var(--np-result-accent); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 900; }
.np-match-result h1 { margin: .15rem 0; color: #ffe7ac; font-size: clamp(2.2rem, 6vw, 5.2rem); letter-spacing: .14em; line-height: 1; text-shadow: 0 3px 8px #000, 0 0 34px color-mix(in srgb, var(--np-result-accent) 60%, transparent); }
.np-match-result-backdrop.is-defeat .np-match-result h1 { color: #d8c4b1; }
.np-match-result header p { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .55rem; margin: .75rem 0 .25rem; }
.np-match-result header p span { border: 1px solid #74502d; border-radius: 999px; padding: .28rem .7rem; background: #100a07bc; font-weight: 800; }
.np-match-result header p span.winner { border-color: var(--np-result-accent); color: #ffe4a4; }
.np-match-result header p b { color: #aa8e66; font-size: .7rem; text-transform: uppercase; }
.np-match-result header > small { color: #c0aa82; }
.np-result-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr); gap: 1rem; margin: 1.4rem 0; }
.np-result-progress, .np-result-quests { border: 1px solid #76502c; border-radius: 10px; padding: 1rem; background: var(--np-result-panel); box-shadow: inset 0 0 28px #0008; }
.np-result-progress h2, .np-result-quests h2 { margin: 0 0 .8rem; }
.np-result-rewards { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.np-result-reward { border: 1px solid #8e6335; border-radius: 7px; padding: .7rem .8rem; background: linear-gradient(145deg, #4e321fe8, #1c110bd9); }
.np-result-reward span, .np-result-reward strong, .np-result-reward small { display: block; }
.np-result-reward span, .np-result-reward small { color: #bda47c; font-size: .72rem; }
.np-result-reward strong { margin: .18rem 0; color: #f6d78f; font-size: 1.25rem; }
.np-result-level { margin-top: .8rem; }
.np-result-level > div:first-child, .np-result-quest > div:first-child { display: flex; justify-content: space-between; gap: 1rem; font-size: .78rem; }
.np-result-level span, .np-result-quest span, .np-result-quest small { color: #bca47e; }
.np-result-track { height: 10px; margin-top: .35rem; border: 1px solid #72502f; border-radius: 999px; padding: 1px; overflow: hidden; background: #0c0806; }
.np-result-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8a5c20, var(--np-result-accent), #f8d983); box-shadow: 0 0 12px var(--np-result-accent); }
.np-result-quests > div { display: grid; gap: .55rem; max-height: 310px; overflow: auto; padding-right: .2rem; }
.np-result-quest { border-left: 3px solid #76502d; padding: .55rem .65rem; background: #100a07ad; }
.np-result-quest.completed { border-left-color: #6fac67; }
.np-result-quest small { display: block; margin-top: .25rem; font-size: .68rem; }
.np-result-empty { color: #aa9472; font-size: .78rem; }
.np-result-commend { margin: 0 auto 1rem; text-align: center; }
.np-result-commend > strong { display: block; margin-bottom: .45rem; color: #d5ba89; font-size: .78rem; }
.np-result-commend > div { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; }
.np-result-commend button { border: 1px solid #82603b; border-radius: 999px; padding: .38rem .7rem; color: #ddc28f; background: #120b08d9; font: 700 .72rem Literata, Georgia, serif; }
.np-result-commend button:disabled { opacity: .7; }
.np-result-actions { display: flex; justify-content: center; gap: .7rem; margin-top: auto; }
.np-result-actions button { min-width: 190px; min-height: 45px; border: 1px solid #b17d3e; border-radius: 6px; color: #f3dba8; background: linear-gradient(#604022, #24150d); text-transform: uppercase; letter-spacing: .06em; font: 900 .78rem Literata, Georgia, serif; box-shadow: 0 8px 18px #0008; cursor: pointer; }
.np-result-actions button:last-child { background: #170e09d9; }
.np-result-actions button:disabled { opacity: .55; cursor: wait; }

html[data-home-theme="mrak"] .np-match-result { --np-result-accent: #d05e42; --np-result-panel: #100c0de8; background-image: url("/theme-assets/match-results/mrak-v1.png"); border-color: #8d4c3b; }
html[data-home-theme="worlds"] .np-match-result { --np-result-accent: #56c9c4; --np-result-panel: #07191bdc; background-image: url("/theme-assets/match-results/worlds-v1.png"); border-color: #498f91; }
html[data-home-theme="kids"] .np-match-result { --np-result-accent: #f2bd65; --np-result-panel: #17132bdc; background-image: url("/theme-assets/match-results/kids-v1.png"); border-color: #a872ae; border-radius: 24px; }

@media (max-width: 760px) {
  .np-match-result-backdrop { display: block; padding: 7px; }
  .np-match-result { width: 100%; min-height: calc(100dvh - 14px); padding: 24px 14px; border-radius: 10px; }
  .np-result-content { grid-template-columns: 1fr; margin: 1rem 0; }
  .np-result-rewards { grid-template-columns: 1fr 1fr; }
  .np-result-quests > div { max-height: none; }
  .np-result-actions { position: sticky; bottom: 0; flex-direction: column; padding-top: .6rem; background: linear-gradient(transparent, #0b0705 25%); }
  .np-result-actions button { width: 100%; }
}