/* SahaX Match HQ — blank-slate landscape ranked experience. */
:root {
  --hq-ink: #05080d;
  --hq-panel: #0d1218;
  --hq-line: #28303a;
  --hq-paper: #f4efe3;
  --hq-muted: #8f98a3;
  --hq-orange: #ff6b35;
  --hq-cyan: #35d4e6;
  --hq-green: #62d96b;
  --hq-pink: #ff4f87;
}

@media (orientation: landscape) {
  body.sx-unified-ui #screenRankedSoloHub.match-hq-screen:not(.hidden),
  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen:not(.hidden) {
    display: grid !important;
    padding: clamp(4px, 1.1vh, 9px) !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    overscroll-behavior: none !important;
  }

  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen.team-season-embedded:not(.hidden) {
    grid-template: clamp(29px, 8vh, 46px) minmax(0, 1fr) / minmax(0, 1fr) !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub).match-hq-screen:not(.hidden) {
    position: relative !important;
    display: grid !important;
    grid-template: clamp(29px, 8vh, 46px) clamp(40px, 10.5vh, 58px) minmax(0, 1fr) / minmax(0, 1fr) !important;
    gap: clamp(4px, 1vh, 8px) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: clamp(4px, 1.1vh, 9px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    font-family: Inter, Arial, Helvetica, sans-serif !important;
    color: var(--hq-paper) !important;
    background:
      linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
      radial-gradient(circle at 66% 48%, rgba(53,212,230,.08), transparent 28%),
      #05080d !important;
    background-size: 26px 26px, 26px 26px, auto, auto !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub).match-hq-screen::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(118deg, transparent 0 47%, rgba(255,255,255,.025) 47% 47.2%, transparent 47.2% 100%);
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub).match-hq-screen > * {
    position: relative;
    z-index: 1;
    min-width: 0;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub).match-hq-screen > h2 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(7px, 1.3vw, 16px) !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 clamp(54px, 7vw, 84px) 0 clamp(9px, 1.6vw, 24px) !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-bottom: 1px solid #343b44 !important;
    background: transparent !important;
    color: var(--hq-paper) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    font: 900 clamp(14px, 4.8vh, 28px)/1 Arial Narrow, Inter, Arial, sans-serif !important;
    font-stretch: condensed !important;
    letter-spacing: clamp(.5px, .14vw, 2px) !important;
    text-align: left !important;
  }

  body.sx-unified-ui #screenRankedSoloHub.match-hq-screen:not(.hidden) > h2,
  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen:not(.hidden) > h2 {
    min-height: clamp(29px, 8vh, 46px) !important;
    height: clamp(29px, 8vh, 46px) !important;
    max-height: none !important;
    padding-top: 2px !important;
    font-family: "Arial Narrow", Inter, Arial, sans-serif !important;
  }

  .match-hq-screen > h2 > span {
    color: var(--hq-orange);
    font-size: .63em;
    letter-spacing: 0;
  }

  .match-hq-team > h2 > span { color: var(--hq-green); }

  .match-hq-screen > h2 > small {
    margin-left: auto;
    color: #69727c;
    font: 800 clamp(7px, 1.7vh, 11px)/1 Inter, Arial, sans-serif;
    letter-spacing: .22em;
  }

  body.sx-unified-ui .match-hq-screen > .ranked-season-info-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px clamp(58px, 7vw, 86px) 4px clamp(9px, 1.6vw, 24px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-left: 4px solid var(--hq-orange) !important;
    background: #11161c !important;
    box-shadow: none !important;
    font-family: Inter, Arial, sans-serif !important;
  }

  body.sx-unified-ui .match-hq-team > .ranked-season-info-bar { border-left-color: var(--hq-green) !important; }

  body.sx-unified-ui .match-hq-screen > .ranked-season-info-bar > span,
  body.sx-unified-ui .match-hq-screen > .ranked-season-info-bar > div:first-child {
    min-width: 0;
    color: #d6d9dc !important;
    font: 800 clamp(9px, 2.25vh, 13px)/1.12 Inter, Arial, sans-serif !important;
  }

  body.sx-unified-ui .match-hq-team > .ranked-season-info-bar > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(7px, 1.4vw, 20px) !important;
  }

  body.sx-unified-ui .match-hq-team > .ranked-season-info-bar > div:first-child > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
  }

  body.sx-unified-ui .match-hq-screen > .ranked-season-info-bar [id*="Countdown"] {
    color: var(--hq-paper) !important;
    font-family: Inter, Arial, sans-serif !important;
    font-weight: 900 !important;
  }

  body.sx-unified-ui .match-hq-screen > .ranked-season-info-bar [id*="SeasonCode"] {
    font-family: Inter, Arial, sans-serif !important;
    color: var(--hq-cyan) !important;
  }

  body.sx-unified-ui .match-hq-screen > .ranked-season-info-bar .ranked-play-btn {
    min-width: clamp(86px, 11vw, 150px) !important;
    min-height: clamp(34px, 8.5vh, 46px) !important;
    height: clamp(34px, 8.5vh, 46px) !important;
    margin: 0 !important;
    padding: 3px 8px !important;
    border: 1px solid #4b535d !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--hq-paper) !important;
    box-shadow: none !important;
    font: 900 clamp(7px, 1.75vh, 11px)/1 Inter, Arial, sans-serif !important;
    letter-spacing: .04em !important;
  }

  body.sx-unified-ui .match-hq-team > .ranked-season-info-bar > div:last-child {
    display: flex !important;
    gap: 5px !important;
    flex: 0 0 auto !important;
  }

  body.sx-unified-ui .match-hq-team > .ranked-season-info-bar .ranked-play-btn:first-child { border-bottom: 3px solid var(--hq-green) !important; }
  body.sx-unified-ui .match-hq-team > .ranked-season-info-bar .ranked-play-btn:last-child { border-bottom: 3px solid var(--hq-pink) !important; }

  body.sx-unified-ui #screenRankedSoloHub.match-hq-screen .ranked-season-info-bar .ranked-play-btn,
  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen .ranked-season-info-bar .ranked-play-btn {
    border: 1px solid #4b535d !important;
    border-radius: 0 !important;
    background: #151b22 !important;
    color: var(--hq-paper) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.sx-unified-ui #screenRankedSoloHub.match-hq-screen .ranked-season-info-bar .ranked-play-btn { border-bottom: 3px solid var(--hq-orange) !important; }
  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen .ranked-season-info-bar .ranked-play-btn:first-child { border-bottom: 3px solid var(--hq-green) !important; }
  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen .ranked-season-info-bar .ranked-play-btn:last-child { border-bottom: 3px solid var(--hq-pink) !important; }

  body.sx-unified-ui .match-hq-screen > .ranked-hub-container {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.sx-unified-ui #screenRankedSoloHub.match-hq-screen:not(.hidden) > .ranked-hub-container,
  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen:not(.hidden) > .ranked-hub-container {
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.sx-unified-ui .match-hq-screen > .quick-play-actions { display: none !important; }

  .match-hq-layout {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) clamp(43px, 11vh, 58px) !important;
    gap: clamp(4px, 1vh, 8px) !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .solo-match-hq {
    grid-template-columns: minmax(0, 56%) minmax(0, 44%) !important;
  }

  .hq-kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #a8afb6;
    font: 900 clamp(6px, 1.45vh, 9px)/1 Inter, Arial, sans-serif;
    letter-spacing: .15em;
    white-space: nowrap;
  }

  .hq-kicker::before {
    content: "";
    width: 18px;
    height: 3px;
    background: var(--hq-kicker);
  }

  .hq-rank-route,
  .hq-rank-core,
  .hq-match-gate {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .hq-rank-route {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: clamp(3px, .8vh, 6px);
    padding: clamp(7px, 1.7vh, 14px);
    border: 1px solid #2d343c;
    border-left: 5px solid var(--hq-orange);
    background: #0d1218;
  }

  .hq-route-list {
    display: grid;
    grid-template-rows: repeat(7, minmax(0, 1fr));
    min-height: 0;
  }

  .hq-route-stop {
    display: grid;
    grid-template-columns: clamp(18px, 2.2vw, 28px) minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    min-height: 0;
    border-bottom: 1px solid #242b33;
    color: #616b75;
    text-transform: uppercase;
  }

  .hq-route-stop > span {
    font: 800 clamp(6px, 1.35vh, 9px)/1 Inter, Arial, sans-serif;
  }

  .hq-route-stop > b {
    overflow: hidden;
    text-overflow: ellipsis;
    font: 900 clamp(7px, 1.65vh, 11px)/1 Arial Narrow, Inter, Arial, sans-serif;
    letter-spacing: .07em;
    white-space: nowrap;
  }

  .hq-route-stop.current {
    position: relative;
    padding-left: 6px;
    background: var(--hq-orange);
    color: #0a0b0d;
  }

  .hq-route-stop.current::after {
    content: "";
    position: absolute;
    right: -1px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid #0d1218;
  }

  .hq-route-current {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
  }

  .hq-route-current > small { color: #707984; font: 800 clamp(6px, 1.3vh, 8px)/1 Inter, Arial, sans-serif; }
  .hq-route-current .ranked-tier-title {
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--hq-paper) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font: 900 clamp(9px, 2vh, 14px)/1 Arial Narrow, Inter, Arial, sans-serif !important;
  }

  .hq-rank-route .ranked-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2px !important;
    margin: 0 !important;
  }

  .hq-rank-route .ranked-stat-box {
    min-width: 0 !important;
    padding: clamp(2px, .7vh, 5px) 1px !important;
    border: 0 !important;
    border-top: 2px solid #3d454e !important;
    border-radius: 0 !important;
    background: #161c23 !important;
  }

  .hq-rank-route .ranked-stat-num { color: var(--hq-paper) !important; font: 900 clamp(7px, 1.7vh, 11px)/1 Inter, Arial, sans-serif !important; }
  .hq-rank-route .ranked-stat-lbl { margin-top: 2px !important; overflow: hidden !important; color: #78828c !important; text-overflow: ellipsis !important; white-space: nowrap !important; font: 700 clamp(4px, 1vh, 7px)/1 Inter, Arial, sans-serif !important; }

  .hq-rank-core {
    display: block;
    padding: clamp(7px, 1.7vh, 14px) clamp(9px, 2vw, 24px);
    border-top: 1px solid #343b44;
    border-bottom: 1px solid #343b44;
    border-left: 5px solid var(--hq-orange);
    background:
      radial-gradient(circle at 38% 50%, transparent 0 25%, rgba(255,107,53,.12) 25.3% 25.8%, transparent 26.1% 100%),
      linear-gradient(135deg, #12171d 0 50%, #0a0e13 50% 100%);
  }

  .hq-rank-core::after {
    content: none;
  }

  .hq-core-identity {
    display: grid;
    grid-template-columns: minmax(92px, .9fr) minmax(136px, 1.1fr);
    align-items: center;
    gap: clamp(4px, 1vw, 14px);
    height: 100%;
    min-height: 0;
  }

  .hq-badge-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
  }

  .hq-core-identity .ranked-badge-container {
    width: min(29vh, 172px) !important;
    height: min(29vh, 172px) !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 auto !important;
  }

  .hq-badge-column .ranked-tier-title {
    max-width: 100% !important;
    margin: clamp(2px, .6vh, 5px) 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--hq-paper) !important;
    box-shadow: none !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .65) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font: 950 clamp(10px, 2.6vh, 17px)/1 "Arial Narrow", Inter, Arial, sans-serif !important;
    letter-spacing: .08em !important;
  }

  .hq-badge-column .hq-star-source { display: none !important; }

  body.sx-unified-ui #screenRankedSoloHub .hq-badge-column .hq-visible-stars {
    position: relative;
    z-index: 5;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(3px, .6vw, 6px) !important;
    min-height: clamp(18px, 3.8vh, 28px) !important;
    margin: clamp(5px, 1vh, 8px) 0 0 !important;
  }

  body.sx-unified-ui #screenRankedSoloHub .hq-badge-column .hq-visible-stars.hidden { display: none !important; }
  .hq-visible-stars > span { display: block; color: #343b44; font-size: clamp(18px, 4.2vh, 28px); line-height: 1; text-shadow: 0 1px 2px #000; }
  .hq-visible-stars > span.active { color: #fbbf24; text-shadow: 0 0 10px rgba(251, 191, 36, .8); transform: scale(1.05); }

  .hq-core-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    min-height: 0;
  }

  .hq-core-copy > strong { margin: 0 0 clamp(5px, 1vh, 9px); color: var(--hq-paper); font: 900 clamp(12px, 3vh, 20px)/1 Arial Narrow, Inter, Arial, sans-serif; letter-spacing: .04em; }

  .hq-core-copy .hq-season-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
    width: 100% !important;
    margin: clamp(4px, 1vh, 8px) 0 !important;
  }

  .hq-core-copy .hq-season-stats .ranked-stat-box {
    min-width: 0 !important;
    padding: clamp(3px, .7vh, 6px) 2px !important;
    border: 0 !important;
    border-top: 2px solid #3d454e !important;
    border-radius: 0 !important;
    background: #151b22 !important;
  }

  .hq-core-copy .hq-season-stats .ranked-stat-num { color: var(--hq-paper) !important; font: 900 clamp(8px, 1.8vh, 12px)/1 Inter, Arial, sans-serif !important; }
  .hq-core-copy .hq-season-stats .ranked-stat-lbl { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 2.2em !important; margin-top: 3px !important; overflow: visible !important; color: #aab3bd !important; text-align: center !important; text-overflow: clip !important; white-space: normal !important; font: 750 clamp(6px, 1.25vh, 8px)/1.1 Inter, Arial, sans-serif !important; }

  .hq-ring-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(9px, 2vw, 24px);
    width: 100%;
  }

  .hq-ring {
    --hq-progress: 0;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: clamp(49px, 13vh, 76px);
    aspect-ratio: 1;
    border-radius: 50%;
  }

  .hq-ring::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--hq-ring-color) calc(var(--hq-progress) * 1%), #2b323a 0);
  }

  .hq-ring::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 6px;
    border-radius: 50%;
    background: #0c1116;
  }

  .hq-ring-value { color: var(--hq-paper); font: 900 clamp(7px, 1.8vh, 12px)/1 Inter, Arial, sans-serif; }
  .hq-ring small { margin-top: 3px; color: #78818b; font: 800 clamp(5px, 1.15vh, 7px)/1 Inter, Arial, sans-serif; letter-spacing: .08em; }

  .hq-match-gate {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(8px, 2vh, 18px) clamp(10px, 2.2vw, 28px);
    color: #090b0e;
    background: var(--hq-paper);
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%, 0 14%);
  }

  .hq-gate-index {
    position: absolute;
    right: clamp(6px, 1vw, 14px);
    top: clamp(2px, .8vh, 7px);
    color: rgba(9,11,14,.08);
    font: 900 clamp(42px, 15vh, 96px)/1 Arial Narrow, Arial, sans-serif;
  }

  .hq-gate-kicker { z-index: 1; color: #696a67; font: 900 clamp(6px, 1.35vh, 9px)/1 Inter, Arial, sans-serif; letter-spacing: .18em; }
  .hq-match-gate h3 { z-index: 1; margin: clamp(3px, .8vh, 7px) 0 !important; color: #080a0d !important; font: 950 clamp(21px, 7.4vh, 50px)/.82 Arial Narrow, Inter, Arial, sans-serif !important; letter-spacing: -.045em !important; }
  .hq-match-gate p { z-index: 1; max-width: 30ch; margin: 0 0 clamp(4px, 1.2vh, 10px) !important; color: #4c4d49 !important; font: 650 clamp(7px, 1.65vh, 11px)/1.2 Inter, Arial, sans-serif !important; }
  .hq-gate-status { z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(4px, 1vh, 8px); padding-top: clamp(3px, .8vh, 7px); border-top: 1px solid #c7c1b5; }
  .hq-gate-status span { font: 900 clamp(6px, 1.45vh, 9px)/1 Inter, Arial, sans-serif; }
  .hq-gate-status i { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: #22b64d; }
  .hq-gate-status b { font: 900 clamp(11px, 2.8vh, 18px)/1 Inter, Arial, sans-serif; }

  body.sx-unified-ui .hq-queue-button {
    z-index: 2;
    width: 100% !important;
    min-height: clamp(42px, 10.5vh, 56px) !important;
    height: clamp(42px, 10.5vh, 56px) !important;
    margin: 0 !important;
    padding: 3px 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--hq-orange) !important;
    color: #080a0d !important;
    box-shadow: 6px 6px 0 #161a1f !important;
    transform: translate(-3px, -3px) !important;
    font: 950 clamp(10px, 2.45vh, 16px)/1 Inter, Arial, sans-serif !important;
    letter-spacing: .08em !important;
  }

  body.sx-unified-ui #screenRankedSoloHub.match-hq-screen .hq-queue-button {
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--hq-orange) !important;
    color: #080a0d !important;
    box-shadow: 6px 6px 0 #161a1f !important;
    transform: translate(-3px, -3px) !important;
  }

  .hq-bottom-dock {
    grid-column: 1 / -1;
    display: grid;
    align-items: stretch;
    gap: clamp(3px, .6vw, 7px);
    min-width: 0;
    min-height: 0;
    padding: 0;
  }

  .hq-solo-dock { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hq-team-dock { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  body.sx-unified-ui .hq-dock-button,
  body.sx-unified-ui .hq-mode-toggle {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 3px 5px !important;
    overflow: hidden !important;
    border: 1px solid #3a424b !important;
    border-radius: 0 !important;
    background: #11171d !important;
    color: #c8cdd2 !important;
    box-shadow: none !important;
    transform: none !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font: 900 clamp(9px, 2.2vh, 13px)/1 Inter, Arial, sans-serif !important;
    letter-spacing: .035em !important;
  }

  body.sx-unified-ui .hq-dock-button { border-top: 3px solid #5d6670 !important; }
  body.sx-unified-ui .hq-solo-dock .hq-dock-button:last-child { border-top-color: var(--hq-orange) !important; }
  body.sx-unified-ui .hq-mode-toggle { color: #69727b !important; }
  body.sx-unified-ui .hq-mode-toggle.active { color: #080b0e !important; border-color: var(--hq-green) !important; background: var(--hq-green) !important; }
  body.sx-unified-ui .hq-mode-toggle[data-hq-toggle="11v11"].active { border-color: var(--hq-pink) !important; background: var(--hq-pink) !important; }
  body.sx-unified-ui .hq-team-primary { border-color: var(--hq-paper) !important; border-top-color: var(--hq-paper) !important; background: var(--hq-paper) !important; color: #080a0d !important; }

  body.sx-unified-ui #screenRankedSoloHub.match-hq-screen .hq-dock-button,
  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen .hq-dock-button,
  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen .hq-mode-toggle {
    border-radius: 0 !important;
    background: #11171d !important;
    color: #c8cdd2 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.sx-unified-ui #screenRankedSoloHub.match-hq-screen .hq-dock-button,
  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen .hq-dock-button { border-top: 3px solid #5d6670 !important; }
  body.sx-unified-ui #screenRankedSoloHub.match-hq-screen .hq-solo-dock .hq-dock-button:last-child { border-top-color: var(--hq-orange) !important; }
  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen .hq-mode-toggle.active { border-color: var(--hq-green) !important; background: var(--hq-green) !important; color: #080a0d !important; }
  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen .hq-mode-toggle[data-hq-toggle="11v11"].active { border-color: var(--hq-pink) !important; background: var(--hq-pink) !important; color: #080a0d !important; }
  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen .hq-team-primary { border-color: var(--hq-paper) !important; border-top-color: var(--hq-paper) !important; background: var(--hq-paper) !important; color: #080a0d !important; }

  .team-match-hq { grid-template-columns: minmax(0, 1fr) !important; }
  .hq-team-pitch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(94px, 17vw, 210px) minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #353d46;
    background: #0c1116;
  }

  .hq-field-half {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-content: stretch;
    gap: clamp(3px, .8vh, 7px);
    min-width: 0;
    min-height: 0;
    padding: clamp(7px, 1.8vh, 15px) clamp(7px, 1.4vw, 19px);
    overflow: clip;
    cursor: pointer;
    color: var(--hq-paper);
    background: #11171d;
    transition: background .18s ease, filter .18s ease;
  }

  .hq-field-half:not(.active) { filter: saturate(.25) brightness(.7); }
  .hq-field-6v6 { --field-accent: var(--hq-green); border-right: 1px solid #353d46; }
  .hq-field-11v11 { --field-accent: var(--hq-pink); border-left: 1px solid #353d46; }
  .hq-field-half.active { background: #151d22; }
  .hq-field-half.active::after { content: "SEÇİLİ"; position: absolute; right: 8px; top: 7px; padding: 4px 7px; color: #071008; background: var(--field-accent); font: 950 clamp(8px, 1.65vh, 10px)/1 Inter, Arial, sans-serif; letter-spacing: .08em; }

  .hq-field-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .16;
    background: repeating-linear-gradient(90deg, transparent 0 16.5%, rgba(255,255,255,.08) 16.5% 16.8%, transparent 16.8% 33%);
  }

  .hq-field-lines::before {
    content: "";
    position: absolute;
    width: min(24vh, 130px);
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    border: 1px solid var(--field-accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .hq-field-lines::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--field-accent);
  }

  .hq-field-number {
    position: absolute;
    z-index: 0;
    right: 4%;
    bottom: -9%;
    color: var(--field-accent);
    opacity: .07;
    font: 950 clamp(78px, 31vh, 190px)/.8 Arial Narrow, Arial, sans-serif;
  }

  .hq-field-season {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(3px, .6vw, 7px);
    min-width: 0;
    min-height: 52px;
    padding-bottom: clamp(4px, .8vh, 7px);
    border-bottom: 2px solid var(--field-accent);
  }

  .hq-season-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 3px !important;
    min-width: 0;
    overflow: hidden;
    color: #c8cdd2;
    font: 800 clamp(7px, 1.75vh, 11px)/1.12 Inter, Arial, sans-serif;
  }

  .hq-season-copy > span {
    display: block !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hq-season-copy [id*="SeasonCode"] {
    color: var(--field-accent) !important;
    font: 900 inherit !important;
  }

  .hq-season-copy [id*="Countdown"] {
    color: var(--hq-paper) !important;
    font: 800 clamp(7px, 1.6vh, 10px)/1 Inter, Arial, sans-serif !important;
  }

  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen .hq-season-reward {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 3px 4px !important;
    border: 1px solid var(--field-accent) !important;
    border-radius: 0 !important;
    background: #0d1218 !important;
    color: var(--hq-paper) !important;
    box-shadow: none !important;
    transform: none !important;
    font: 900 clamp(7px, 1.65vh, 11px)/1 Inter, Arial, sans-serif !important;
    white-space: nowrap !important;
  }

  .hq-field-copy,
  .hq-field-points,
  .hq-field-facts,
  .hq-field-info { position: relative; z-index: 1; }
  .hq-field-copy { align-self: center; }
  .hq-field-copy small { color: var(--field-accent); font: 900 clamp(8px, 1.9vh, 13px)/1 Inter, Arial, sans-serif; letter-spacing: .12em; }
  .hq-field-copy h3 { max-width: 9ch; margin: clamp(4px, 1vh, 9px) 0 0 !important; color: var(--hq-paper) !important; font: 950 clamp(21px, 6.5vh, 46px)/.85 Arial Narrow, Inter, Arial, sans-serif !important; letter-spacing: -.035em !important; }

  .hq-field-points {
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  .hq-field-points small { color: #9ba3ab; font: 800 clamp(8px, 1.65vh, 11px)/1 Inter, Arial, sans-serif; letter-spacing: .09em; }
  .hq-field-points strong { color: var(--field-accent) !important; font: 950 clamp(17px, 4.1vh, 30px)/1 Inter, Arial, sans-serif !important; }

  .hq-field-facts { display: flex; gap: 3px; min-width: 0; }
  .hq-field-facts span { min-width: 0; padding: 4px 7px; overflow: hidden; border: 1px solid #505963; color: #c4cad0; text-overflow: ellipsis; white-space: nowrap; font: 800 clamp(7px, 1.55vh, 10px)/1 Inter, Arial, sans-serif; }

  body.sx-unified-ui .hq-field-info {
    position: absolute !important;
    right: clamp(7px, 1vw, 12px) !important;
    bottom: clamp(7px, 1.4vh, 12px) !important;
    width: auto !important;
    min-width: 48px !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 3px 8px !important;
    border: 1px solid var(--field-accent) !important;
    border-radius: 0 !important;
    background: #0d1218 !important;
    color: var(--hq-paper) !important;
    box-shadow: none !important;
    font: 900 clamp(8px, 1.75vh, 11px)/1 Inter, Arial, sans-serif !important;
  }

  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen .hq-field-info {
    border: 1px solid var(--field-accent) !important;
    border-radius: 0 !important;
    background: #0d1218 !important;
    color: var(--hq-paper) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .hq-club-core {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(3px, .8vh, 7px);
    min-width: 0;
    min-height: 0;
    padding: clamp(6px, 1.4vh, 12px) 6px;
    overflow: hidden;
    text-align: center;
    background: var(--hq-paper);
    color: #080a0d;
  }

  .hq-club-label { color: #565852; font: 900 clamp(8px, 1.7vh, 11px)/1 Inter, Arial, sans-serif; letter-spacing: .1em; white-space: nowrap; }
  .hq-club-logo {
    display: grid;
    place-items: center;
    width: clamp(48px, 11vh, 78px);
    aspect-ratio: 1;
    overflow: hidden;
    border: 2px solid #0a0d11;
    border-radius: 50%;
    background: #0a0d11;
  }

  .hq-club-logo-placeholder { color: var(--hq-green); font: 950 clamp(12px, 3.2vh, 22px)/1 "Arial Narrow", Arial, sans-serif; letter-spacing: -.06em; }
  .hq-club-logo .team-jersey-swatch,
  .hq-club-logo .team-scoreboard-badge {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
  }

  .hq-club-logo canvas.team-badge-canvas {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
  }
  .hq-club-core > small { color: #77776f; font: 800 clamp(7px, 1.5vh, 10px)/1 Inter, Arial, sans-serif; letter-spacing: .09em; }
  .hq-club-core #rankedTeamClubName { max-width: 100% !important; margin: 0 !important; overflow: hidden !important; color: #080a0d !important; text-overflow: ellipsis !important; white-space: nowrap !important; font: 950 clamp(13px, 3.1vh, 22px)/1 Arial Narrow, Inter, Arial, sans-serif !important; }

  body.sx-unified-ui .hq-museum-button {
    width: calc(100% - 6px) !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 3px !important;
    border: 1px solid #13171b !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #101419 !important;
    box-shadow: none !important;
    font: 950 clamp(8px, 1.9vh, 12px)/1 Inter, Arial, sans-serif !important;
  }

  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen .hq-museum-button {
    border: 1px solid #13171b !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #101419 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .hq-data-vault { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
}

.match-hq-modal {
  position: fixed;
  z-index: 100100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  box-sizing: border-box;
  background: rgba(1, 3, 6, .84);
  backdrop-filter: blur(7px);
}

.match-hq-modal.hidden { display: none !important; }

.match-hq-modal-card {
  position: relative;
  width: min(780px, 90vw);
  max-height: min(78vh, 520px);
  overflow: auto;
  box-sizing: border-box;
  padding: clamp(18px, 4vh, 34px);
  padding-right: clamp(56px, 8vw, 76px);
  border: 1px solid #394553;
  border-left: 6px solid var(--hq-orange);
  border-radius: 0;
  background: #0b1016;
  color: #f7fafc;
  box-shadow: 14px 14px 0 rgba(255,107,53,.2);
  font-family: Inter, Arial, sans-serif;
}

.match-hq-modal-close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid #171b20;
  border-radius: 0;
  background: transparent;
  color: #0b0d10;
  font: 400 30px/1 Arial, sans-serif;
}

body.sx-unified-ui .match-hq-modal .match-hq-modal-close {
  border: 1px solid #536170 !important;
  border-radius: 0 !important;
  background: #151d27 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

.match-hq-modal-card h3 { margin: 0 0 14px !important; color: #ffffff !important; font: 950 clamp(22px, 5vw, 42px)/.95 "Arial Narrow", Inter, Arial, sans-serif !important; letter-spacing: -.04em !important; }
.match-hq-modal-body { color: #dbe3ea; font: 600 clamp(11px, 2.3vw, 15px)/1.45 Inter, Arial, sans-serif; }
.match-hq-modal-body p { margin: 0 0 14px; }
.hq-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hq-info-grid span { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-top: 4px solid var(--hq-modal-accent); background: #161f29; }
.hq-info-grid b { color: #aeb9c4; font-size: .72em; letter-spacing: .08em; }

.match-hq-modal-card.museum-dialog {
  width: min(1180px, 94vw);
  max-height: min(86vh, 720px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 3vh, 28px);
  padding-right: clamp(58px, 7vw, 78px);
  border-left-color: #62d96b;
  box-shadow: 14px 14px 0 rgba(98, 217, 107, .18);
}

.museum-dialog .match-hq-modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: #738292 #111820;
}

.museum-dialog .match-hq-modal-body::-webkit-scrollbar { width: 8px; }
.museum-dialog .match-hq-modal-body::-webkit-scrollbar-track { background: #111820; }
.museum-dialog .match-hq-modal-body::-webkit-scrollbar-thumb { background: #738292; }
.hq-museum-modal { width: 100%; }
.ranked-museum-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 18px); align-items: start; width: 100%; }

.ranked-museum-card {
  --museum-accent: #62d96b;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #354250;
  border-top: 4px solid var(--museum-accent);
  background: #121923;
}

.ranked-museum-card.museum-11v11 { --museum-accent: #ff5d91; }
.ranked-museum-card-head { display: flex; align-items: center; gap: 12px; padding: clamp(12px, 2.4vh, 20px); background: #18222e; }
.ranked-museum-cup-icon { flex: 0 0 auto; font-size: clamp(26px, 5vh, 40px); line-height: 1; }
.ranked-museum-card-head > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.ranked-museum-card-head strong { color: #ffffff; font: 900 clamp(14px, 2.6vh, 21px)/1.15 Inter, Arial, sans-serif; }
.ranked-museum-card-head span:last-child { color: var(--museum-accent); font: 900 clamp(12px, 2vh, 16px)/1 Inter, Arial, sans-serif; }
.ranked-museum-dates { display: flex; flex-direction: column; }
.ranked-museum-date-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 42px; padding: 8px 14px; box-sizing: border-box; border-top: 1px solid #27323e; color: #e9eef3; background: #0d141c; font: 750 clamp(11px, 1.9vh, 14px)/1.2 Inter, Arial, sans-serif; }
.ranked-museum-date-row:nth-child(even) { background: #111a23; }
.ranked-museum-date-row time { color: #ffd166; font-weight: 900; white-space: nowrap; }
.ranked-museum-empty { padding: 24px 14px; color: #aeb9c4; text-align: center; font-weight: 750; }

@media (orientation: landscape) and (max-height: 380px) {
  .hq-field-facts { display: none; }
  .hq-field-copy h3 { font-size: clamp(17px, 5.8vh, 25px) !important; }
  .hq-field-info { bottom: 5px !important; }
  .hq-core-copy > strong { font-size: clamp(12px, 3.4vh, 16px); }
  .hq-field-season { min-height: 40px; }
  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen .hq-season-reward { min-height: 40px !important; height: 40px !important; }
  .match-hq-modal-card.museum-dialog { max-height: 91vh; padding: 12px 54px 12px 14px; }
  .match-hq-modal-card.museum-dialog h3 { font-size: 21px !important; }
  .ranked-museum-card-head { padding: 8px 10px; gap: 8px; }
  .ranked-museum-cup-icon { font-size: 24px; }
  .ranked-museum-card-head strong { font-size: 12px; }
  .ranked-museum-card-head span:last-child { font-size: 11px; }
  .ranked-museum-date-row { min-height: 34px; padding: 6px 9px; font-size: 10px; }
}

@media (orientation: landscape) and (max-width: 620px) {
  .solo-match-hq { grid-template-columns: minmax(0, 55%) minmax(0, 45%) !important; }
  .hq-rank-core { padding-inline: 7px; }
  .hq-core-identity { grid-template-columns: minmax(82px, .88fr) minmax(116px, 1.12fr); gap: 4px; }
  .hq-match-gate { padding-inline: 9px; }
  .hq-team-pitch { grid-template-columns: minmax(0, 1fr) 94px minmax(0, 1fr); }
  .hq-field-half { padding-inline: 7px; }
}

@media (orientation: landscape) and (min-height: 400px) {
  .hq-season-copy { font-size: clamp(10px, 1.8vh, 14px); }
  .hq-season-copy [id*="Countdown"] { font-size: clamp(9px, 1.65vh, 12px) !important; }
  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen .hq-season-reward { font-size: clamp(10px, 1.7vh, 13px) !important; }
  .hq-field-copy small { font-size: clamp(11px, 2vh, 15px); }
  .hq-field-points small { font-size: clamp(10px, 1.75vh, 13px); }
  .hq-field-facts span { font-size: clamp(9px, 1.55vh, 12px); }
  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen .hq-field-info { font-size: clamp(10px, 1.7vh, 13px) !important; }
  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen .hq-dock-button { font-size: clamp(11px, 2.15vh, 15px) !important; }
  .hq-club-label { font-size: clamp(10px, 1.7vh, 13px); }
  .hq-club-core > small { font-size: clamp(9px, 1.5vh, 11px); }
  .hq-club-core #rankedTeamClubName { font-size: clamp(16px, 3.1vh, 24px) !important; }
  body.sx-unified-ui #screenRankedTeamHub.match-hq-screen .hq-museum-button { font-size: clamp(10px, 1.8vh, 13px) !important; }
}

@media (orientation: landscape) and (min-height: 700px) {
  .hq-core-identity .ranked-badge-container {
    width: clamp(150px, 23vh, 230px) !important;
    height: clamp(150px, 23vh, 230px) !important;
  }

  .hq-ring { width: clamp(82px, 10vh, 108px); }
  .hq-core-copy > strong { font-size: clamp(24px, 3.4vh, 36px); }
  .hq-match-gate h3 { font-size: clamp(46px, 6vh, 68px) !important; }
}

@media (hover: hover) and (pointer: fine) {
  .hq-dock-button:hover,
  .hq-mode-toggle:hover,
  .hq-field-info:hover,
  .hq-museum-button:hover { filter: brightness(1.2); }
  .hq-queue-button:hover { transform: translate(0, 0) !important; box-shadow: 2px 2px 0 #161a1f !important; }
}