.prizes-main { padding: 0; color: #191819; background: #eeece7; }
.prizes-main > .wrap { max-width: none; padding: 0; }
.prz-page section[id] { scroll-margin-top: 68px; }
.prz-kicker, .prz-total span, .prz-jump, .prz-note > .wrap > span, .prz-group-head > span, .prz-index, .prz-name > span, .prz-bottom { font-family: var(--font-mono); font-weight: 700; letter-spacing: .045em; }

.prz-hero { position: relative; isolation: isolate; min-height: 520px; overflow: hidden; color: #fff; background: #0d0d11 url("img/stage/prizes-hero.jpg") center 44% / cover no-repeat fixed; }
.prz-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(8,8,11,.96) 0%,rgba(8,8,11,.83) 31%,rgba(8,8,11,.2) 72%),linear-gradient(0deg,rgba(0,0,0,.46),transparent 45%); }
.prz-hero-inner { display: flex; flex-direction: column; align-items: start; min-height: 520px; padding-block: 65px 49px; }
.prz-kicker { margin-bottom: 36px; color: #f24946; font-size: .75rem; }
.prz-hero h1 { margin: 0 0 21px; font-size: clamp(4rem,9vw,9rem); line-height: .83; letter-spacing: -.075em; font-weight: 900; }
.prz-hero h1 span { color: #d52225; }
.prz-hero p { max-width: 510px; color: #e6e2e0; font-size: clamp(1rem,1.55vw,1.25rem); line-height: 1.48; text-wrap: pretty; }
.prz-total { display: flex; flex-direction: column; gap: 3px; margin-top: auto; padding-top: 38px; }
.prz-total span { color: #f5d548; font-size: .75rem; }
.prz-total strong { color: #f5d548; font-size: clamp(3.25rem,7vw,6.8rem); line-height: .95; letter-spacing: -.075em; white-space: nowrap; }

.prz-jump { color: #fff; background: #171618; }
.prz-jump-inner { display: flex; padding-inline: 24px; }
.prz-jump a { display: flex; align-items: center; gap: 15px; flex: 1 1 0; min-width: 0; padding: 21px 16px; border-right: 1px solid rgba(255,255,255,.18); font-size: .73rem; line-height: 1.25; transition: background .18s ease; }
.prz-jump a:first-child { border-left: 1px solid rgba(255,255,255,.18); }
.prz-jump a:hover, .prz-jump a:focus-visible { color: #fff; background: #292427; }
.prz-jump a span:first-child { color: #f24946; }
.prz-jump a span:last-child { margin-left: auto; font-size: 1.1rem; }

.prz-note { padding-block: 25px; color: #452626; background: #f4e8df; border-bottom: 1px solid #d7c8c0; }
.prz-note > .wrap { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 20px; }
.prz-note > .wrap > span { color: #aa2425; font-size: .72rem; }
.prz-note p + p { margin-top: 9px; }
.prz-note a { text-decoration: underline; }

.prz-group { padding-block: clamp(70px,8vw,110px); background-color: #eeece7; background-image: linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px); background-size: 100% 118px; }
.prz-group-solo { background-color: #f8f7f3; }
.prz-group-battles { color: #fff; background: linear-gradient(90deg,rgba(9,11,20,.94),rgba(9,11,20,.8)),url("img/stage/prizes-battles.jpg") center / cover fixed; }
.prz-group-other { background-color: #f8f7f3; }
.prz-group-head { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 18px; align-items: start; padding-bottom: 26px; border-bottom: 2px solid currentColor; }
.prz-group-head > span { padding-top: 8px; color: #ac2528; font-size: .75rem; }
.prz-group-battles .prz-group-head > span { color: #f24946; }
.prz-group-head h2 { font-size: clamp(2.35rem,5.4vw,5.2rem); line-height: .98; letter-spacing: -.06em; text-wrap: balance; }
.prz-group-head p { margin-top: 10px; color: #66615f; font-size: .91rem; }
.prz-group-battles .prz-group-head p { color: #cfcbca; }
.prz-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 36px; margin-top: 14px; }
.prz-row { display: grid; grid-template-columns: 80px minmax(0,1fr) auto; align-items: center; gap: 16px; min-height: 76px; padding-block: 15px; border-bottom: 1px solid #c7c3bc; }
.prz-group-battles .prz-row { border-color: rgba(255,255,255,.28); }
.prz-index { align-self: center; color: #9c9390; font-size: .78rem; }
.prz-name { min-width: 0; }
.prz-name strong { display: block; font-size: clamp(1rem,1.6vw,1.38rem); font-weight: 800; line-height: 1.2; letter-spacing: -.035em; }
.prz-name > span { display: block; margin-top: 5px; color: #6b6663; font-size: .68rem; text-transform: uppercase; }
.prz-group-battles .prz-name > span { color: #cdc7c5; }
.prz-amount { padding-left: 15px; color: #a82427; font-family: var(--font-mono); font-size: clamp(1rem,2vw,1.48rem); font-weight: 700; white-space: nowrap; }
.prz-group-battles .prz-amount { color: #f5d548; }
.prz-battle-head { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; margin-top: 24px; color: #f5d548; font-family: var(--font-mono); font-size: .82rem; font-weight: 800; letter-spacing: .09em; }
.prz-battle-head span { padding-bottom: 12px; border-bottom: 1px solid rgba(245,213,72,.65); }
.prz-battle-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
.prz-battle-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 0; min-height: 110px; padding-block: 22px; border-bottom: 1px solid rgba(255,255,255,.28); }
.prz-battle-details { min-width: 0; }
.prz-battle-details > strong { display: block; font-size: clamp(1rem,1.5vw,1.32rem); line-height: 1.2; letter-spacing: -.035em; }
.prz-battle-place, .prz-battle-level { display: block; font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.prz-battle-place { margin-top: 7px; color: #d1cdce; }
.prz-battle-level { display: none; }
.prz-battle-item .prz-amount { flex: none; padding-left: 0; }
.prz-group-battles .prz-list { margin-top: 24px; }
.prz-empty { padding-block: 95px; }
.prz-empty h2 { font-size: 2rem; }
.prz-empty p { margin-top: 8px; color: #645f5d; }
.prz-bottom { padding-block: 37px; color: #fff; background: #171719; }
.prz-bottom > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.prz-bottom span { color: #f24946; font-size: .72rem; }
.prz-bottom a { padding-bottom: 5px; border-bottom: 1px solid #f5d548; color: #f5d548; font-size: .88rem; }
.prz-page a:focus-visible { outline: 2px solid #f5d548; outline-offset: 3px; }

@media (max-width: 760px) {
  .prz-list { grid-template-columns: 1fr; }
  .prz-hero, .prz-hero-inner { min-height: 475px; }
  .prz-hero { background-position: 59% center; }
  .prz-hero::before { background: linear-gradient(90deg,rgba(7,8,12,.87),rgba(7,8,12,.25)),linear-gradient(0deg,rgba(7,8,12,.83),transparent 60%); }
  .prz-hero-inner { padding-block: 51px 37px; }
  .prz-kicker { margin-bottom: 31px; }
  .prz-hero h1 { font-size: clamp(3.7rem,13vw,6rem); }
  .prz-hero p { max-width: 450px; }
  .prz-total strong { font-size: clamp(3.3rem,10vw,5.5rem); }
  .prz-jump-inner { overflow-x: auto; scroll-snap-type: x mandatory; }
  .prz-jump a { flex: 0 0 min(60vw,250px); scroll-snap-align: start; }
  .prz-note > .wrap { grid-template-columns: 1fr; gap: 10px; }
  .prz-group-head { grid-template-columns: 1fr; gap: 5px; }
  .prz-group-head > span { padding-top: 0; }
  .prz-group-battles { background-attachment: scroll; }
  .prz-row { grid-template-columns: 38px minmax(0,1fr) auto; gap: 9px; min-height: 82px; }
  .prz-amount { font-size: 1rem; padding-left: 4px; }
  .prz-battle-head, .prz-battle-pair { gap: 18px; }
  .prz-battle-item { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; }
}

@media (max-width: 460px) {
  .prz-hero, .prz-hero-inner { min-height: 445px; }
  .prz-hero h1 { font-size: 3.9rem; }
  .prz-total strong { font-size: 3.15rem; }
  .prz-group { padding-block: 60px; }
  .prz-row { grid-template-columns: 31px minmax(0,1fr); gap: 7px 9px; padding-block: 15px; }
  .prz-index { grid-row: 1 / span 2; align-self: start; padding-top: 2px; }
  .prz-name strong { font-size: 1.08rem; }
  .prz-amount { grid-column: 2; padding-left: 0; font-size: 1.05rem; }
  .prz-battle-head { display: none; }
  .prz-battle-pair { grid-template-columns: 1fr; gap: 0; }
  .prz-battle-item { flex-direction: row; align-items: center; justify-content: space-between; min-height: 90px; padding-block: 16px; }
  .prz-battle-level { display: block; margin-bottom: 6px; color: #f5d548; }
  .prz-battle-item .prz-amount { grid-column: auto; font-size: 1.15rem; }
  .prz-battle-item-empty { display: none; }
  .prz-bottom > .wrap { display: block; }
  .prz-bottom a { display: inline-block; margin-top: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .prz-page a { transition: none; }
}
