.ranked-entry { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: -10px 0 30px; padding: 22px 24px; border: 1px solid #b8ddd6; background: var(--teal-soft); }
.ranked-entry h2 { margin: 0 0 7px; font-size: 20px; }
.ranked-entry p { margin: 0; }
.ranked-entry .button { flex: 0 0 auto; }
.feature-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: -10px 0 30px; }
.feature-entry { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 24px; border: 1px solid var(--line); background: var(--paper); }
.feature-entry h2 { margin: 0 0 8px; font-size: 19px; }
.feature-entry p { margin: 0; }
.feature-entry .eyebrow { margin-bottom: 8px; }
.ranked-mode-options, .ranked-unit-options { padding: 16px 0; margin: 12px 0; border: 0; min-width: 0; }
.ranked-policy { display: grid; gap: 8px; padding: 16px; margin: 18px 0; border-left: 3px solid var(--teal); background: var(--teal-soft); }
.ranked-policy > strong { font-size: 17px; }
.ranked-policy p { margin: 0; }
.ranked-mode-options legend, .ranked-unit-options legend { font-size: 14px; font-weight: 700; }
.ranked-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ranked-mode-options label, .ranked-unit-grid label { display: flex; align-items: start; gap: 10px; border: 1px solid var(--line); background: var(--soft); padding: 14px; cursor: pointer; min-width: 0; }
.ranked-mode-options label:has(:checked), .ranked-unit-grid label:has(:checked) { border-color: var(--teal); background: var(--teal-soft); }
.ranked-mode-options input, .ranked-unit-grid input { width: 17px; height: 17px; padding: 0; margin: 2px 0 0; flex: 0 0 17px; accent-color: var(--teal); }
.ranked-mode-options strong, .ranked-unit-grid strong { display: block; font-size: 14px; }
.ranked-mode-options small, .ranked-unit-grid small { display: block; font-size: 12px; line-height: 1.6; color: var(--muted); margin-top: 5px; overflow-wrap: anywhere; }
.ranked-unit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 340px; overflow-y: auto; padding: 4px; margin: 0 -4px; }
.ranked-unit-tools { margin: -12px 0 8px; }
.ranked-unit-tools .button { min-height: 36px; padding: 6px 10px; }
.ranked-unit-options [data-ranked-selection-info] { margin-bottom: 0; }
.ranked-selection-label { font-size: 13px; color: var(--teal-dark); padding: 10px 12px; background: var(--teal-soft); line-height: 1.7; overflow-wrap: anywhere; }
.ranked-scorebar .ranked-player-names strong { font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.ranked-player-names span { display: block; font-size: 11px; margin-top: 5px; }
.ranked-copy-word { font: 700 34px/1.4 "Segoe UI", Arial, sans-serif; color: var(--teal-dark); padding: 14px 18px; border-left: 3px solid var(--teal); background: var(--teal-soft); overflow-wrap: anywhere; margin: 0 0 24px; }
.ranked-result-players { display: flex; align-items: center; gap: 14px; font-size: 15px; margin-bottom: 20px; }
.ranked-result-players b { color: var(--muted); font-size: 12px; }
.ranked-reward { padding: 14px; border: 1px solid #ead4a3; background: #fff8e7; line-height: 1.8; }
.ranked-page .section-head { align-items: center; }
.ranked-page.is-battle {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: clamp(14px, 2.5vw, 34px);
  background: #101923;
  color: #edf7f7;
}
.ranked-page.is-battle > .section-head,
.ranked-page.is-battle > .ranked-profile,
.ranked-page.is-battle > [data-ranked-error],
.ranked-page.is-battle .ranked-sidebar { display: none; }
.ranked-page.is-battle .ranked-layout { display: block; }
.ranked-page.is-battle [data-ranked-content] { min-height: calc(100vh - 28px); }
.ranked-page.is-battle .ranked-arena { min-height: calc(100vh - 28px); box-sizing: border-box; }
.ranked-page.is-battle .ranked-rhythm-arena {
  min-height: calc(100vh - 28px);
  border-color: #2d4654;
  background: #172631;
  color: #edf7f7;
}
.ranked-page.is-battle .ranked-selection-label { color: #bce9e5; background: rgba(35, 111, 117, .35); }
.ranked-page:fullscreen { overflow: auto; }
.ranked-connection { font-size: 12px; color: var(--teal-dark); max-width: 290px; line-height: 1.6; }
.ranked-connection.warning { color: #97462f; }
.ranked-profile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--paper); }
.ranked-profile > div { padding: 20px; }
.ranked-profile > div + div { border-left: 1px solid var(--line); }
.ranked-profile span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.ranked-profile strong { display: block; font-size: 23px; }
.ranked-profile small { color: var(--muted); font-size: 12px; font-weight: 500; }
.ranked-profile .ranked-identity { font-size: 16px; padding-top: 5px; overflow-wrap: anywhere; }
.ranked-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 24px; align-items: start; }
.ranked-layout > *, .ranked-sidebar { min-width: 0; }
.ranked-card { border: 1px solid var(--line); background: var(--paper); padding: 28px; overflow-wrap: anywhere; }
.ranked-card h2 { margin: 0 0 14px; font-size: 23px; }
.ranked-card h3 { margin: 30px 0 16px; font-size: 17px; }
.ranked-sidebar .ranked-card { padding: 20px; }
.ranked-sidebar .ranked-card + .ranked-card { margin-top: 20px; }
.ranked-sidebar h2 { font-size: 17px; }
.ranked-rules { padding-left: 22px; margin: 24px 0; }
.ranked-rules li { padding-left: 4px; margin-bottom: 12px; color: #475467; line-height: 1.65; font-size: 14px; }
.ranked-waiting { text-align: center; padding: 50px 28px; }
.ranked-countdown { display: block; color: var(--teal-dark); font-size: 48px; margin: 28px 0; font-variant-numeric: tabular-nums; }
.ranked-scorebar { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); align-items: center; gap: 8px; padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid var(--line); text-align: center; }
.ranked-scorebar > div { min-width: 0; display: grid; gap: 8px; }
.ranked-scorebar span, .ranked-scorebar small { font-size: 12px; color: var(--muted); }
.ranked-scorebar strong { font-size: 36px; font-variant-numeric: tabular-nums; }
.ranked-scorebar > div:first-child strong { color: var(--teal-dark); }
.ranked-round-head { display: flex; justify-content: space-between; margin-bottom: 25px; font-size: 13px; color: var(--muted); }
.ranked-round-head strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.ranked-clue { min-height: 64px; line-height: 1.5; }
.ranked-pattern { font: 22px/1.8 Consolas, monospace; letter-spacing: .18em; color: var(--muted); overflow-wrap: anywhere; }
#ranked-answer { font-size: 22px; letter-spacing: .03em; }
#ranked-answer:disabled { background: var(--soft); color: var(--muted); }
#ranked-answer-status { min-height: 42px; }
.ranked-forfeit { display: flex; justify-content: end; margin-top: 20px; border-top: 1px solid var(--line); padding-top: 12px; }
.rhythm-dual-screen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 16px; }
.ranked-rhythm-pet-host { margin: 16px 0 18px; }
.rhythm-half { min-width: 0; padding: 10px; background: #f5f8fb; border: 1px solid var(--line); }
.rhythm-opponent-half { background: #fff8f1; }
.rhythm-half-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 8px; color: var(--ink); font-size: 13px; }
.rhythm-half-head span { color: var(--muted); font-size: 11px; }
.rhythm-field { position: relative; height: min(48vw, 460px); min-height: 320px; overflow: hidden; border: 1px solid #d7e0e8; background: linear-gradient(180deg, #edf7fb 0%, #f9fbfc 72%, #f4efe7 100%); }
.rhythm-opponent-half .rhythm-field { background: linear-gradient(180deg, #fff4e7 0%, #fffaf5 72%, #f5e9de 100%); }
.rhythm-notes { position: absolute; inset: 0; }
.rhythm-note { position: absolute; left: 0; top: 0; z-index: 2; width: min(150px, 42%); will-change: transform; backface-visibility: hidden; }
.rhythm-note-face { padding: 8px 9px; transform: translate3d(-50%, -50%, 0); border: 1px solid #8ac7d2; border-radius: 8px; background: rgba(255, 255, 255, .96); box-shadow: 0 5px 16px rgba(26, 63, 78, .16); transition: opacity .18s ease; }
.rhythm-note strong { display: block; color: #126b78; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.rhythm-note small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.rhythm-note.is-locked .rhythm-note-face { opacity: .18; }
.rhythm-note.is-correct .rhythm-note-face { border-color: #41a36b; background: #edf9f0; }
.rhythm-note.is-missed .rhythm-note-face { border-color: #d48a78; background: #fff0ec; opacity: .62; }
.rhythm-note.is-smashing { pointer-events: none; }
.rhythm-note.is-smashing .rhythm-note-face { animation: rhythm-note-smash .62s cubic-bezier(.2,.75,.3,1) forwards; will-change: transform, opacity; }
@keyframes rhythm-note-smash {
  0% { opacity: .95; transform: translate3d(-50%, -50%, 0) scale(1) rotate(0deg); }
  45% { opacity: .9; transform: translate3d(-50%, -50%, 0) scale(1.16) rotate(-5deg); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.2) rotate(18deg); }
}
.rhythm-bottom-line { position: absolute; left: 0; right: 0; bottom: 7%; border-top: 2px solid rgba(180, 91, 66, .42); }
.rhythm-combo-badge { position: absolute; left: 10px; bottom: 12px; z-index: 3; color: #8b5a13; font-size: 13px; font-weight: 700; }
.rhythm-input-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.rhythm-input-row label { color: var(--muted); font-size: 12px; }
.rhythm-input-row input { min-width: 0; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; font: 16px/1.3 Consolas, "Microsoft YaHei", monospace; }
.rhythm-input-row input:focus { border-color: var(--teal); outline: 3px solid var(--teal-soft); }
.rhythm-input-row #ranked-answer-status { grid-column: 2; min-height: 20px; }
.rhythm-progress { height: 5px; margin-top: 15px; overflow: hidden; background: #e9edf0; }
.rhythm-progress i { display: block; width: 100%; height: 100%; transform-origin: left; background: var(--teal); }
.ranked-word { color: var(--teal-dark); font-size: 34px !important; font-family: "Segoe UI", Arial, sans-serif; }
.ranked-feedback { margin: 20px 0; font-size: 20px; font-weight: 700; }
.ranked-correct { color: var(--teal-dark); }
.ranked-incorrect { color: #97462f; }
.ranked-result-score { display: flex; gap: 25px; align-items: center; font-variant-numeric: tabular-nums; margin: 24px 0; }
.ranked-result-score strong { font-size: 44px; }
.ranked-result-score span { font-size: 24px; color: var(--muted); }
.ranked-rating-change { margin-bottom: 26px; }
.ranked-rating-change strong { margin-left: 8px; color: var(--teal-dark); }
.ranked-review-wrap { overflow-x: auto; }
.ranked-review { width: 100%; table-layout: fixed; font-size: 13px; }
.ranked-review th:first-child { width: 52%; }
.ranked-review th:last-child { width: 15%; }
.ranked-review th, .ranked-review td { white-space: normal; padding: 12px 8px; overflow-wrap: anywhere; }
.ranked-review small, .ranked-review strong { display: block; line-height: 1.6; }
.ranked-review small { color: var(--muted); margin-bottom: 5px; }
.ranked-leaders { list-style: none; padding: 0; margin: 0; max-height: 440px; overflow-y: auto; }
.ranked-leaders li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; padding: 13px 2px; align-items: center; border-top: 1px solid var(--line); font-size: 12px; }
.ranked-leaders small { display: block; color: var(--muted); margin-top: 5px; }
.ranked-leaders .is-me { color: var(--teal-dark); background: var(--teal-soft); }
.ranked-position { color: var(--muted); text-align: center; }
.ranked-history-row { display: grid; gap: 7px; width: 100%; text-align: left; background: transparent; border: 0; border-top: 1px solid var(--line); padding: 14px 0; color: var(--ink); font-size: 13px; }
.ranked-history-row:hover { color: var(--teal-dark); }
.ranked-history-row span, .ranked-history-row small { color: var(--muted); font-size: 12px; }
.ranked-page button:focus-visible, .ranked-page input:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
@media (max-width: 1000px) {
  .topbar:has([data-ranked]) { height: auto; min-height: 72px; gap: 12px; padding: 14px 20px; flex-wrap: wrap; }
  .topbar:has([data-ranked]) .topbar-actions { flex-wrap: wrap; }
  .ranked-layout { grid-template-columns: minmax(0, 1fr); }
  .ranked-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .ranked-sidebar .ranked-card + .ranked-card { margin-top: 0; }
}
@media (max-width: 640px) {
  .feature-entry-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .feature-entry { padding: 20px; }
  .ranked-mode-options { grid-template-columns: minmax(0, 1fr); }
  .ranked-unit-grid label { padding: 10px 8px; gap: 7px; }
  .ranked-copy-word { font-size: 29px; }
  .ranked-scorebar .ranked-player-names strong { font-size: 15px; }
  .topbar:has([data-ranked]) { position: static; }
  .topbar:has([data-ranked]) .topbar-actions { width: 100%; gap: 12px; }
  .topbar:has([data-ranked]) .nav-links { display: flex; flex-wrap: wrap; }
  .topbar:has([data-ranked]) .user-chip { flex-wrap: wrap; gap: 6px; }
  .ranked-entry { flex-direction: column; align-items: stretch; padding: 20px; }
  .ranked-entry .button { align-self: start; }
  .ranked-page .section-head { flex-direction: column; align-items: start; gap: 10px; }
  .ranked-profile { grid-template-columns: 1fr; }
  .ranked-profile > div { padding: 14px 18px; }
  .ranked-profile > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .ranked-profile strong { font-size: 20px; }
  .ranked-card { padding: 20px 16px; }
  .ranked-scorebar { gap: 3px; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); }
  .ranked-scorebar span { font-size: 11px; }
  .ranked-scorebar strong { font-size: 30px; }
  .ranked-card h2 { font-size: 21px; }
  .ranked-sidebar { grid-template-columns: minmax(0, 1fr); }
  .ranked-review { font-size: 12px; }
  .ranked-result-score strong { font-size: 36px; }
  .rhythm-dual-screen { gap: 6px; margin-left: -8px; margin-right: -8px; }
  .rhythm-half { padding: 6px; }
  .rhythm-field { height: 58vw; min-height: 270px; }
  .rhythm-note { width: 44%; padding: 6px; }
  .rhythm-note strong { font-size: 11px; }
  .rhythm-note small { font-size: 9px; }
  .rhythm-input-row { grid-template-columns: minmax(0, 1fr); }
  .rhythm-input-row #ranked-answer-status { grid-column: auto; }
}

.ranked-stardust-choice { grid-column: 1 / -1; background: linear-gradient(110deg,#142c38,#101b2b) !important; color:#e6eee9; }
.ranked-stardust-choice small { color:#adc4ce; }
.ranked-stardust { background:#0c1626 !important; color:#e6eee9; border-color:#304858; font-family:"Segoe UI","Microsoft YaHei","Noto Sans CJK SC","DejaVu Sans",sans-serif; }
.stardust-duel-head,.stardust-duel-players { display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px; }
.ranked-stardust h2 { margin:6px 0;font-size:23px; }
.stardust-duel-head .eyebrow { color:#89edc7;font-size:10px; }
.stardust-duel-players { font-size:13px;padding:10px 0;border-top:1px solid #304858; }
.stardust-duel-players b { margin-left:12px;color:#89edc7;font-size:22px; }
.stardust-duel-field { position:relative;max-width:1000px;margin:auto;aspect-ratio:16/9;background:#0b1120;overflow:hidden;border:1px solid #304858;border-radius:8px; }
@media(min-width:641px){.stardust-duel-field{width:min(100%,max(320px,calc(177.778svh - 1013.334px)))}}
.stardust-duel-field canvas { width:100%;height:100%;display:block; }
.stardust-duel-distance { position:absolute;right:15px;top:12px;font-size:11px;color:#b6cad2;background:#091423cc;padding:6px 9px;border-radius:5px; }
.stardust-duel-distance strong { margin-left:8px;color:#89edc7; }
.stardust-duel-overlay { position:absolute;inset:0;display:flex;justify-content:center;align-items:center;text-align:center;background:#0c1626a0;font-size:20px; }
.stardust-duel-overlay[hidden] { display:none; }
.stardust-duel-stats { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:15px 0; }
.stardust-duel-stats span { font-size:11px;color:#8ba4b4; }.stardust-duel-stats b { display:block;font-size:15px;color:#e6eee9;margin-top:4px; }
.stardust-duel-prompt { background:#111e30;border:1px solid #304858;padding:12px;margin:0 0 14px;white-space:pre-wrap;font:16px/1.9 Consolas,"DejaVu Sans Mono",monospace;max-height:92px;overflow:hidden;overflow-wrap:anywhere;color:#a9becd; }
.stardust-duel-prompt mark { background:#89edc7;color:#102d26; }.stardust-typed { color:#627f76; }
.ranked-stardust label { display:block;font-size:11px;margin-bottom:7px;color:#b6cad2; }
.ranked-stardust #ranked-answer { width:100%;padding:10px 12px;border:1px solid #496175;border-radius:5px;background:#091321;color:#e6eee9;font-size:14px; }
.ranked-stardust #ranked-answer:disabled { background:#101c2b;color:#819aa9; }
.ranked-stardust #ranked-answer-status { min-height:20px;font-size:11px;color:#89edc7; }
.stardust-duel-help { color:#819aa9;font-size:11px;line-height:1.8; }
.stardust-error .stardust-duel-prompt mark { background:#ffbc7a; }
.stardust-round-reports article { border:1px solid var(--line);padding:14px;margin-top:12px; }.stardust-round-reports p { font-size:12px;color:var(--muted); }
@media(max-width:640px){.ranked-stardust{padding:14px}.stardust-duel-head{align-items:flex-start}.ranked-stardust h2{font-size:19px}.stardust-duel-players{font-size:11px}.stardust-duel-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stardust-duel-overlay{font-size:15px}.stardust-duel-prompt{font-size:14px}.stardust-duel-distance{font-size:9px;right:6px;top:6px}}