:root {
    --gold: #b7812b;
    --gold-deep: #865719;
    --ink: #2f2a24;
    --muted: #8c8479;
    --line: #e9e3da;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; color: var(--ink); font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
body { min-width: 1180px; }
.page-shell { overflow: hidden; }

.masthead { height: 154px; display: flex; align-items: center; justify-content: center; background: #fff; }
.masthead-title { text-align: center; color: #2f2922; }
.masthead-title > span { display: block; margin-bottom: 7px; color: #b99761; font-family: Georgia, serif; font-size: 10px; letter-spacing: 5px; }
.masthead-title h1 { margin: 0; font-family: "STKaiti", "KaiTi", serif; font-size: 42px; font-weight: 600; letter-spacing: 10px; }
.masthead-title p { display: flex; align-items: center; justify-content: center; gap: 13px; margin: 7px 0 0; color: #a06e27; font-size: 15px; letter-spacing: 7px; }
.masthead-title p i { display: block; width: 52px; height: 1px; background: linear-gradient(90deg, transparent, #c49a57); }
.masthead-title p i:last-child { transform: rotate(180deg); }

.hero { position: relative; width: calc(100% - 48px); max-width: 1600px; margin: 0 auto; aspect-ratio: 1333 / 750; overflow: hidden; background: #26170e url('../images/ranking-top.jpg') center / cover no-repeat; border-radius: 3px; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(30, 13, 4, .2), transparent 30%, rgba(20, 12, 8, .12)); pointer-events: none; }
.podium-player { position: absolute; z-index: 3; width: 180px; padding: 10px 15px 11px; transform: translateX(-50%); text-align: center; color: #fff; border: 1px solid rgba(238, 195, 103, .45); border-radius: 7px; background: linear-gradient(135deg, rgba(30, 21, 16, .73), rgba(51, 30, 12, .62)); box-shadow: 0 7px 20px rgba(0, 0, 0, .26); backdrop-filter: blur(2px); }
.podium-player .podium-rank { margin-bottom: 4px; color: #f4cb72; font-size: 17px; font-weight: 700; }
.podium-player strong { display: block; overflow: hidden; margin-bottom: 4px; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.podium-player span { display: block; color: #e7ded2; font-size: 12px; line-height: 20px; }
.podium-player em { font-style: normal; }
.podium-first { left: 50%; top: 61%; }
.podium-second { left: 22%; top: 70%; }
.podium-third { left: 78%; top: 70%; }

main { width: calc(100% - 48px); max-width: 1600px; margin: 0 auto; padding: 48px 40px 64px; background: #fff; }
.api-error { margin-bottom: 30px; padding: 13px 18px; color: #944b3d; background: #fff2ef; border: 1px solid #f1cbc3; border-radius: 5px; }
.content-section { position: relative; padding: 24px 0 52px; }
.section-title { margin-bottom: 30px; text-align: center; }
.section-title span { display: block; margin-bottom: 6px; color: #c39a56; font-size: 11px; letter-spacing: 4px; }
.section-title h2 { margin: 0; font-family: "STKaiti", "KaiTi", serif; font-size: 29px; letter-spacing: 4px; }
.section-title i { position: relative; display: block; width: 130px; height: 1px; margin: 13px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.section-title i::after { content: "◆"; position: absolute; left: 50%; top: 50%; padding: 0 8px; transform: translate(-50%, -50%); color: var(--gold); background: #fff; font-size: 9px; font-style: normal; }

.ranking-section { padding-top: 10px; }
.ranking-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; align-items: stretch; }
.ranking-list { display: flex; flex-direction: column; gap: 8px; }
.rank-row { display: grid; grid-template-columns: 78px 1fr 110px; align-items: center; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 3px 12px rgba(69, 53, 34, .045); transition: .2s; }
.rank-row:hover { transform: translateY(-1px); border-color: #dcc69f; box-shadow: 0 6px 18px rgba(77, 54, 22, .08); }
.ranking-list-primary .rank-row { height: 95px; }
.ranking-list-secondary .rank-row { height: 64px; }
.rank-number { height: 100%; display: grid; place-items: center; color: #a87324; background: linear-gradient(135deg, #fbf7ef, #f4ead8); border-right: 1px solid #eadcc4; font-family: Georgia, serif; font-size: 27px; font-weight: 700; }
.rank-player { min-width: 0; padding: 0 18px; }
.rank-player strong { display: block; overflow: hidden; margin-bottom: 5px; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.rank-player span { color: var(--muted); font-size: 12px; }
.rank-player em { font-style: normal; }
.rank-score { padding-right: 20px; text-align: right; color: var(--gold-deep); }
.rank-score strong { font-family: Georgia, serif; font-size: 20px; }
.rank-score span { margin-left: 3px; font-size: 12px; }

.rewards-section { margin-right: -40px; margin-left: -40px; padding: 48px 40px 52px; background: #faf9f6; }
.rewards-section .section-title i::after { background: #faf9f6; }
.rules-rewards-panel { display: grid; grid-template-columns: 310px minmax(0, 1fr); align-items: stretch; overflow: hidden; background: #fff; border: 1px solid #e9e3da; border-top: 2px solid #c4974d; }
.rule-strip { display: block; padding: 24px 26px; background: #fdfcf9; border-right: 1px solid #e8e0d5; }
.rule-strip .subsection-title { margin: 0 0 14px; padding: 0 0 11px; color: #4a4137; border-bottom: 1px solid #e7ded1; font-size: 16px; font-weight: 600; line-height: 1.5; }
.rule-panel { margin: 0; padding: 0; color: #655c51; background: none; border: 0; font-size: 13px; line-height: 1.85; white-space: pre-line; }
.reward-block { display: flex; align-items: center; padding: 24px 26px; }
.reward-grid { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 20px; }
.reward-card { min-width: 0; display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; align-items: start; }
.reward-heading { grid-column: 2; grid-row: 1; padding: 2px 0 5px; text-align: left; }
.reward-heading span { display: none; }
.reward-heading h3 { margin: 0; color: #9b8d7b; font-size: 12px; font-weight: 400; line-height: 1.4; }
.reward-image { grid-column: 1; grid-row: 1 / 3; width: 88px; height: 88px; display: grid; place-items: center; overflow: hidden; margin: 0; background: #f4f2ee; border: 1px solid #ebe5dc; border-radius: 3px; }
.reward-image img { width: 100%; height: 100%; object-fit: fill; }
.image-placeholder { display: flex; flex-direction: column; align-items: center; gap: 9px; color: #aaa196; }
.image-placeholder i { width: 48px; height: 48px; display: grid; place-items: center; color: #c1a674; border: 1px solid #d8c7a7; border-radius: 50%; font-style: normal; }
.image-placeholder span { font-size: 12px; }
.reward-card p { grid-column: 2; grid-row: 2; min-height: 0; margin: 0; padding: 0; color: #4f473f; font-size: 13px; line-height: 1.55; text-align: left; white-space: pre-line; }
.reward-notice-line { grid-column: 1 / -1; display: flex; align-items: flex-start; justify-content: center; gap: 10px; width: auto; margin: 0 26px; padding: 14px 0 16px; color: #9a9288; border-top: 1px solid #eee9e2; font-size: 12px; line-height: 1.7; white-space: pre-line; }
.reward-notice-line > span { flex: 0 0 auto; color: #b19a76; }

.highlight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.highlight-card { cursor: pointer; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 5px 18px rgba(67, 50, 29, .07); transition: .2s; }
.highlight-card:hover, .highlight-card:focus { outline: none; transform: translateY(-3px); border-color: #d5bd94; box-shadow: 0 10px 26px rgba(67, 50, 29, .13); }
.highlight-cover { position: relative; height: 225px; overflow: hidden; background: #eee; }
.highlight-cover::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .25)); }
.highlight-cover img, .highlight-cover video { display: block; width: 100%; height: 100%; object-fit: cover; transition: .4s; }
.highlight-cover video { pointer-events: none; }
.highlight-card:hover .highlight-cover img { transform: scale(1.035); }
.highlight-card:hover .highlight-cover video { filter: brightness(.96); }
.play-icon { position: absolute; z-index: 2; left: 50%; top: 50%; width: 58px; height: 58px; display: grid; place-items: center; padding-left: 4px; transform: translate(-50%, -50%); color: #fff; background: rgba(137, 91, 28, .84); border: 2px solid rgba(255, 255, 255, .75); border-radius: 50%; box-shadow: 0 4px 15px rgba(0, 0, 0, .25); font-size: 19px; }
.highlight-meta { display: flex; align-items: center; gap: 13px; padding: 18px; }
.highlight-meta span { flex: 0 0 auto; padding: 3px 8px; color: #9b6a22; background: #f7eddb; border-radius: 3px; font-size: 11px; }
.highlight-meta h3 { min-width: 0; overflow: hidden; margin: 0; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.highlight-empty { padding: 55px; text-align: center; color: #a39b91; background: #faf9f7; border: 1px dashed #ddd5ca; }

.media-modal { position: fixed; z-index: 9999; inset: 0; padding: 50px; place-items: center; background: rgba(12, 10, 8, .9); }
.media-modal:not([hidden]) { display: grid; }
.modal-body { display: grid; place-items: center; max-width: calc(100vw - 100px); max-height: calc(100vh - 100px); }
.modal-body img, .modal-body video { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 100px); object-fit: contain; }
.modal-body img[hidden], .modal-body video[hidden] { display: none !important; }
.modal-body video { width: min(1100px, calc(100vw - 100px)); background: #000; }
.modal-close { position: fixed; z-index: 2; right: 28px; top: 18px; width: 44px; height: 44px; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; cursor: pointer; font-size: 30px; line-height: 38px; }
.modal-close:hover { background: rgba(183, 129, 43, .8); }
.modal-open { overflow: hidden; }

@media (max-width: 1250px) {
    .masthead { height: 142px; }
    .hero { width: calc(100% - 36px); }
    .ranking-columns { gap: 18px; }
    .rank-row { grid-template-columns: 70px 1fr 95px; }
    .rules-rewards-panel { grid-template-columns: 280px minmax(0, 1fr); }
    .rule-strip { padding: 22px; }
    .reward-block { padding: 22px 18px; }
    .reward-grid { gap: 16px 12px; }
    .reward-card { grid-template-columns: 76px minmax(0, 1fr); column-gap: 9px; }
    .reward-image { width: 76px; height: 76px; }
    .highlight-cover { height: 210px; }
}