/* Stable controls around a separately scrolling detail view. */
#modal{padding:0;overflow:hidden;max-height:90dvh}
.modal-chrome{height:54px;display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:#d7eafa;border-bottom:2px solid #9cbbd5}
#modal .close{position:static;margin-left:auto;width:40px;height:40px;line-height:1;cursor:pointer}
#modalContent{overflow-y:auto;max-height:calc(90dvh - 60px);padding:28px;overscroll-behavior:contain;scrollbar-width:thin}
#cardNavigation:not([hidden]){display:flex;align-items:center;gap:16px;font-size:13px}
#cardNavigation button{width:40px;height:36px;border:1px solid #7d9cbb;background:#f2faff;color:#33446b;font:inherit;cursor:pointer}
#cardNavigation button:disabled{opacity:.4;cursor:default}
.pixel-player{display:flex;align-items:center;gap:10px;padding:9px;background:#dceefa;border:2px solid #85a9c9;box-shadow:inset 2px 2px #fff}
.pixel-player button{height:36px;min-width:38px;background:#e977b0;border:2px solid #a84578;color:#512c4c;font:inherit;cursor:pointer;box-shadow:inset 2px 2px #ffd8ed}
.pixel-player input{min-width:40px;width:100%;accent-color:#567fa9;cursor:pointer}
.pixel-player input[type=range]{appearance:none;height:8px;background:#b8d5e9;border:1px solid #769bb9;border-radius:0}
.pixel-player input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:20px;background:#567fa9;border:2px solid #355678;border-radius:0}
.pixel-player input[type=range]::-moz-range-thumb{width:10px;height:18px;background:#567fa9;border:2px solid #355678;border-radius:0}
.pixel-player span{font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}
#audioStatus:empty{display:none}#audioStatus{font-size:12px;margin:8px 0}
.empty-collection-link{display:inline-flex;margin-top:18px;min-height:44px;align-items:center}
/* Put reward rules beside their switch, leaving more room for rankings. */
.competition .score-tabs{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:8px;padding:2px 0 12px;position:relative}
.competition .score-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:12px 14px;text-align:left;min-height:65px;background:#eef5fc;color:#436489;border:1px solid #a1bbd6;box-shadow:none}
.competition .score-tabs button strong{font-size:13px}
.competition .score-tabs button small{font-family:var(--font);font-size:13px;font-weight:400;letter-spacing:0;line-height:1.3;text-transform:none}
.competition .score-tabs button.active{background:#fff1b9;border-color:#c29b4c;color:#684c20;box-shadow:inset 0 -3px #dfbd6b}
.competition .score-tabs .score-season{display:none}
.competition .scoreboards{height:256px;max-height:256px}
.competition .rank-foot{font-size:11px;min-height:34px}
#findMyRank{font:inherit;color:#3e608a;background:transparent;border:0;padding:5px 0;min-height:28px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.competition .your-ticket{padding:14px 16px;gap:10px 18px}
.competition .personal-stats{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.competition .personal-stats strong{font-size:21px;margin-top:6px;white-space:nowrap}
.competition #rewardGap{font-size:12px;line-height:1.5}
[hidden]{display:none!important}
@media(min-width:1000px) and (max-height:850px){.competition .scoreboards{height:228px;max-height:228px}}
@media(max-width:760px){.competition .scoreboards{height:240px;max-height:240px}.competition .score-tabs button{padding:10px}.competition .score-tabs button small{font-size:12px}}
@media(max-width:540px){#modalContent{padding:18px}.modal-chrome{height:52px}.viewer-layout{gap:18px}.viewer-description{min-width:0;width:100%}.pixel-player{gap:8px}.competition .personal-stats{gap:12px}.competition .personal-stats strong{font-size:18px}.competition .your-ticket{padding:12px;gap:10px}.competition .quick-open{max-width:none;width:100%;justify-self:stretch}}

/* Compact paired tabs and a single personal-score group. */
.competition .score-tabs{gap:0;padding-bottom:10px}
.competition .score-tabs button{min-height:56px;padding:9px 14px;gap:5px}
.competition .score-tabs button+button{border-left:0}
.competition .scoreboards{height:267px;max-height:267px}
.competition .rank-foot{align-items:center;padding:5px 0;min-height:38px}
.competition .rank-foot>span:first-child{display:flex;align-items:center;gap:6px;color:#64758a}
.competition .rank-foot i{margin:0;width:8px;height:8px;background:#ffe59b;border:1px solid #bc9850}
.competition #findMyRank{min-height:30px;padding:5px 9px;border:1px solid #a6bdd4;background:#eef5fc;color:#315779;text-decoration:none;box-shadow:inset 0 -2px #cddfee}
.competition #findMyRank:hover{background:#dcecf9}
.competition .your-ticket{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:18px;row-gap:7px;padding:14px 16px}
.competition .personal-stats{grid-column:1;grid-row:1;grid-template-columns:auto auto;justify-content:start;gap:32px}
.competition #rewardGap{grid-column:1;grid-row:2;margin:0;max-width:100%;font-size:12px;line-height:1.45}
.competition .quick-open{grid-column:2;grid-row:1 / 3;align-self:center;max-width:170px}
@media(min-width:1000px) and (max-height:850px){.competition .scoreboards{height:239px;max-height:239px}}
@media(max-width:760px){.competition .scoreboards{height:251px;max-height:251px}.competition .score-tabs button{padding:9px 10px}}
@media(max-width:540px){.competition .your-ticket{grid-template-columns:1fr;gap:8px;padding:12px}.competition .personal-stats{grid-template-columns:1fr 1fr;justify-content:stretch;gap:16px}.competition #rewardGap{grid-column:1;grid-row:2}.competition .quick-open{grid-column:1;grid-row:3;max-width:none;width:100%;margin-top:3px}}