.ranked-home-badge {display:none}
[data-screen="home"] .ranked-home-badge {display:flex;position:absolute;align-items:flex-start;gap:3px;z-index:4;inset:10px auto auto 9px}
.ranked-home-badge button {cursor:pointer;color:#f4e5e7;background:#23191b;border:1px solid #604047;border-radius:4px}
#rank-crest {width:clamp(56px,11vw,76px);height:clamp(56px,11vw,76px);padding:3px}
#rank-guide-button {width:24px;height:24px;padding:0}
.ranked-crest-art,.ranked-crest-art svg {display:block;width:100%;height:100%}
.crest-rebound {transition:translate 220ms ease-out}
[data-screen="ranked"] main > .deck,
[data-screen="ranked"] main > #intro {display:none}
#ranked-page {width:100%;padding:clamp(12px,3vw,24px);box-sizing:border-box;background:var(--paper);border:3px solid #53393d;box-shadow:4px 4px 0 #080707}
.ranked-player-art > svg:not(.ranked-pump) {transform:scale(var(--ranked-balloon-scale,.66));transform-origin:center bottom;transition:transform .14s linear}
@media(prefers-reduced-motion:reduce) {.ranked-player-art > svg:not(.ranked-pump) {transition:none}}
.ranked-header {display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.ranked-header h2,#rank-guide h2 {margin:0;font-size:clamp(22px,5vw,32px)}
#ranked-profile {margin:6px 0 12px;color:#e2b7ba}
.ranked-danger {background:#922e39;border:1px solid #e27680;color:#fff5f5;padding:6px 10px;border-radius:4px;min-height:36px}
#ranked-queue {text-align:center;padding:10px 0}
.ranked-gear {display:inline-block;font:36px/1 sans-serif;color:#ffd66b;animation:ranked-spin 1.4s linear infinite}
@keyframes ranked-spin {to {transform:rotate(360deg)}}
#ranked-contestants {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ranked-contestant {text-align:center;min-width:0;display:grid;justify-items:center;gap:4px;padding:7px;background:#251a1d;border:1px solid #604047}
.ranked-player-art {width:100%;height:clamp(65px,18vw,110px);display:flex;align-items:end;justify-content:center}
.ranked-player-art > svg:first-child {width:min(70%,100px);height:100%}
.ranked-player-art .ranked-pump {width:min(28%,48px);height:75%;overflow:visible}
.ranked-name {padding:2px 6px;color:#302025;background:#fff5e8;border:1px dashed #916970;border-radius:3px;max-width:100%;overflow-wrap:anywhere}
.ranked-contestant progress {width:95%;height:8px;accent-color:#e56c70}
.pumping .pump-handle {animation:ranked-pumping 580ms steps(4,end) infinite alternate}
@keyframes ranked-pumping {to {transform:translateY(-10px)}}
#ranked-round {margin:12px 0 4px}
#ranked-question {margin:0 0 10px;font-size:clamp(17px,4vw,25px)}
#ranked-answers {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#ranked-answers:empty {display:none}
#ranked-answers button {overflow-wrap:anywhere}
#ranked-status {min-height:1.25em;margin:8px 0}
#rank-list {list-style:none;padding:0;display:grid;gap:8px}
#rank-list li {position:relative;isolation:isolate;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 8px 0 0}
#rank-list li:not(:last-child)::after {content:"";position:absolute;z-index:-1;left:21px;top:50%;height:calc(100% + 8px);width:2px;background:#745963}
#rank-list .ranked-crest-art {width:44px;height:44px;flex:none;box-sizing:border-box;padding:4px;border:1px solid var(--rank-color);border-radius:50%;background:#22171b}
.rank-step-label {flex:1;display:grid;gap:2px;min-width:0;padding:6px 9px;border:1px solid #503a40;background:#251a1d;border-radius:6px}
.rank-step-label small {color:#d7b8bd}
#rank-list [aria-current="step"] .rank-step-label {border-color:var(--rank-color)}
#rank-list [aria-current="step"] .rank-step-label strong {color:var(--rank-color)}
#ranked-leave-dialog {text-align:center}
#ranked-leave-dialog form {justify-content:center}
@media(prefers-reduced-motion:reduce) {.pumping .pump-handle,.ranked-gear {animation:none}.crest-rebound {transition:none}}

#ranked-match {display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,250px);gap:12px}
.ranked-play,.ranked-chat {min-width:0}
.ranked-chat {display:grid;grid-template-rows:auto minmax(64px,1fr) auto auto;gap:8px;padding:10px;background:#251a1d;border:1px solid #604047}
.ranked-chat h3 {margin:0;font-size:16px}
#ranked-chat-log {height:clamp(80px,24vh,230px);overflow:auto;list-style:none;margin:0;padding:0;overflow-wrap:anywhere}
#ranked-chat-log li {padding:5px 0;border-bottom:1px solid #604047}
#ranked-chat-log strong {color:#ffc6cb}
#ranked-chat-form {display:flex;align-items:center;gap:6px}
#ranked-chat-input {flex:1;min-width:0;width:100%;min-height:44px;box-sizing:border-box;padding:6px 8px;background:#170f11;color:#fff5f5;border:1px solid #8a6269;border-radius:5px;font:inherit;font-size:16px}
#ranked-chat-input:focus-visible {outline:2px solid #ffd989;outline-offset:2px}
#ranked-chat-form button {min-height:44px;padding-inline:6px}
#ranked-chat-status {margin:0;color:#ffc6cb}
#ranked-chat-status:empty {display:none}
@media(max-width:640px) {#ranked-match {grid-template-columns:minmax(0,1fr)} #ranked-chat-log {height:clamp(50px,14dvh,90px)}}

.ranked-contestant [data-ranked-health] {accent-color:#80db9e}
.ranked-contestant [data-ranked-health-text] {font-size:11px;color:#bce8c8}
.ranked-popped .ranked-player-art > svg:not(.ranked-pump) {opacity:0;transform:scale(1.35);transition:transform .2s ease-out,opacity .2s ease-out}

#ranked-question-clock {height:8px;margin:0 0 10px;overflow:hidden;border:1px solid #72505a;background:#24191e;border-radius:5px}
#ranked-question-clock span {display:block;width:100%;height:100%;background:#ffc968;transform:scaleX(var(--question-time,1));transform-origin:left;transition:transform .1s linear}
@media(prefers-reduced-motion:reduce){#ranked-question-clock span {transition:none}}

#ranked-summary{min-width:0;align-self:center;margin:0}
#season-countdown{margin:.5rem 0 0;color:#ffd989;font-variant-numeric:tabular-nums}
.ranked-name {cursor:pointer;font:inherit;font-weight:700}

body:not([data-screen="home"]) #season-countdown {display:none}
.rank-step-label strong,.ranked-current-name {white-space:nowrap}
#ranked-starting{text-align:center;padding:26px 0}
#ranked-starting .ranked-gear{font-size:72px}

#ranked-power-shop {margin:10px 0 0;padding:12px;border:1px solid #84645a;border-radius:8px;background:#2a2023}
.ranked-power-header {display:flex;align-items:center;justify-content:space-between;gap:10px}
.ranked-power-header h3 {margin:0;font-size:20px}
#ranked-shop-time {color:#ffd989;font-variant-numeric:tabular-nums}
#ranked-shop-clock {display:block;width:100%;height:8px;margin:9px 0;accent-color:#ffc968}
#ranked-shop-points {margin:7px 0;font-size:13px}
.ranked-power-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ranked-power-grid button {display:grid;align-content:start;gap:4px;min-height:68px;padding:7px;border:1px solid #86646b;border-radius:6px;background:#38272c;color:inherit;text-align:left}
.ranked-power-grid button:not(:disabled):hover {background:#4a3339;border-color:#ffd989}
.ranked-power-grid button:disabled {opacity:.62}
.ranked-power-grid [data-power-cost] {color:#ffd989;font-size:12px}
.ranked-power-grid small {color:#e3c6cb;font-size:11px;line-height:1.35}
#ranked-power-actions {display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px}
#ranked-power-actions button {min-height:36px;font-size:12px}
#ranked-shield {color:#a9dbff;font-size:12px}
#ranked-answers .answer-eliminated {opacity:.55;text-decoration:line-through}
#ranked-answers .answer-revealed:not(.correct) {border-color:#ffd989;box-shadow:0 0 0 1px #ffd989}
#ranked-answers .ranked-revealed-mark {color:#ffd989;font-size:12px}
@media(max-width:480px) {
  .ranked-power-grid {grid-template-columns:1fr}
  .ranked-power-grid button {grid-template-columns:minmax(0,1fr) auto;min-height:45px;gap:2px 7px}
  .ranked-power-grid small {grid-column:1 / -1}
}