/* ODD Bounce channel and match interface. */
body.bounce-active, body.bounce-active.custom-pointer { cursor: default; }
body.bounce-active.custom-pointer .wii-pointer { display: none !important; }
body.bounce-active.custom-pointer button, body.bounce-active.custom-pointer a { cursor: pointer; }
#bounce-view {
  --ob-ink: #272333;
  --ob-muted: #807b8e;
  --ob-violet: #7651e8;
  --ob-line: #e5e1ec;
  --ob-paper: #f7f5f8;
  --ob-orange: #ff954f;
  --ob-lime: #d1f271;
  position: absolute;
  inset: 0;
  z-index: 15;
  isolation: isolate;
  overflow: hidden;
  background: var(--ob-paper);
  color: var(--ob-ink);
  font: 14px/1.5 "Trebuchet MS", Arial, sans-serif;
  text-align: left;
}
#bounce-view *, #bounce-view *::before, #bounce-view *::after { box-sizing: border-box; }
#bounce-view [hidden] { display: none !important; }
#bounce-view h1, #bounce-view h2, #bounce-view h3, #bounce-view p { margin: 0; }
#bounce-view button, #bounce-view input, #bounce-view a { font: inherit; }
#bounce-view button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#bounce-view button:disabled { cursor: default; opacity: .38; }
#bounce-view button:focus-visible, #bounce-view a:focus-visible, #bounce-view [tabindex="0"]:focus-visible { outline: 3px solid var(--ob-violet); outline-offset: 4px; }
#bounce-view [tabindex="-1"]:focus { outline: none; }
#bounce-view [inert] { pointer-events: none; }
#bounce-view kbd { display: inline-flex; justify-content: center; align-items: center; padding: 4px 7px; min-width: 23px; border: 1px solid #dad4e6; border-bottom-width: 2px; border-radius: 5px; background: #fff; color: #655f77; font: 10px/1.2 Arial, sans-serif; white-space: nowrap; }
.ob-shell { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.ob-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; flex: 0 0 73px; padding: 13px 3.4vw; background: #fff; border-bottom: 1px solid var(--ob-line); position: relative; z-index: 4; }
.ob-icon { width: 20px; height: 20px; vertical-align: middle; flex: 0 0 auto; }
.ob-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding: 10px 17px; border: 1px solid var(--ob-line); border-radius: 12px; background: #fff; color: #655e77; font-size: 11px !important; font-weight: 700 !important; text-decoration: none; transition: background .16s, border-color .16s, transform .16s, box-shadow .16s; }
.ob-button:hover:not(:disabled) { border-color: #b6a8db; background: #f8f5ff; transform: translateY(-1px); }
.ob-button:active:not(:disabled) { transform: translateY(1px); }
.ob-button > .ob-icon { width: 16px; height: 16px; }
.ob-button.ob-primary { background: var(--ob-violet); border-color: var(--ob-violet); color: #fff; box-shadow: 0 5px 12px #7651e829; }
.ob-button.ob-primary:hover:not(:disabled) { background: #6842db; border-color: #6842db; box-shadow: 0 6px 17px #7651e838; }
.ob-back { justify-self: start; border-color: transparent; padding: 8px 12px; }
.ob-brand { display: flex; align-items: center; gap: 10px; }
.ob-brand > .ob-icon { width: 33px; height: 33px; color: var(--ob-orange); stroke-width: 1.6; transform: rotate(-13deg); }
.ob-brand > span { display: flex; align-items: center; gap: 9px; }
.ob-brand b { color: var(--ob-ink); font: 900 26px/1 Arial, sans-serif; letter-spacing: -2px; }
.ob-brand strong { padding: 6px 9px 5px; border-radius: 5px; background: var(--ob-ink); color: #fff; font: italic 900 13px/1 Arial, sans-serif; letter-spacing: 1.2px; transform: skew(-5deg); }
.ob-header-tools { display: flex; align-items: center; gap: 7px; justify-self: end; }
.ob-icon-button { display: inline-grid; place-items: center; padding: 8px; width: 36px; height: 36px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #8a809d; }
.ob-icon-button:hover { background: #f2eef9; color: var(--ob-violet); }
.ob-icon-button > .ob-icon { width: 17px; height: 17px; }
.ob-guide { min-height: 36px; padding: 8px 12px; font-size: 10px !important; }
.ob-scroll { overflow-y: auto; min-height: 0; flex: 1; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c7bbdf transparent; background: radial-gradient(ellipse at 70% 0, #eee9f8, transparent 48%), var(--ob-paper); }
.ob-home { width: min(1260px, 100%); margin: auto; padding: 27px 32px 21px; }
.ob-hero { min-height: 223px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 25px; padding: 4px 34px 21px 12px; margin-bottom: 15px; }
.ob-eyebrow { display: inline-block; color: #95899e; font-size: 8px; line-height: 1.5; letter-spacing: 2px; font-weight: 700; }
.ob-hero h1 { margin: 10px 0 13px !important; font: 900 clamp(38px, 4.3vw, 58px)/.99 Arial, sans-serif; letter-spacing: -2.5px; }
.ob-hero h1 > em { color: var(--ob-violet); font-style: normal; }
.ob-hero-copy > p { color: #796985; font-size: 12px; line-height: 1.65; }
.ob-hero-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 17px; margin-top: 18px; color: #817388; font-size: 9px; }
.ob-hero-tags > span { display: inline-flex; align-items: center; gap: 6px; }
.ob-hero-tags .ob-icon { width: 13px; height: 13px; color: #ac9db9; }
.ob-hero-tags .ob-tag-lime { background: var(--ob-lime); color: #5d702c; padding: 4px 7px; border-radius: 4px; font-size: 7px; font-weight: 700; letter-spacing: .8px; }
.ob-hero-art { position: relative; height: 222px; width: 100%; max-width: 460px; justify-self: center; isolation: isolate; }
.ob-art-ring { position: absolute; left: 5%; top: 16%; width: 86%; height: 64%; border-radius: 50%; border: 1px solid #e0d6ef; transform: rotate(-18deg); z-index: -1; }
.ob-ring-two { left: 17%; top: 23%; width: 65%; height: 51%; border-style: dashed; border-color: #d3c4e7; }
.ob-art-label { position: absolute; left: 0; bottom: 20px; color: #b1a3bd; font: 700 7px/1 Arial, sans-serif; letter-spacing: 2.5px; transform: rotate(-7deg); }
.ob-art-dot { position: absolute; width: 11px; height: 11px; border: 2px solid #d5c4f0; border-radius: 50%; }
.ob-dot-one { left: 17%; top: 12%; }
.ob-dot-two { right: 7%; bottom: 27%; width: 6px; height: 6px; background: var(--ob-lime); border-color: var(--ob-lime); }
.ob-big-ball { position: absolute; width: 172px; height: 172px; left: 8%; top: 21px; border-radius: 50%; background: radial-gradient(circle at 25% 20%, #ffb86b, #ff964e 65%, #ec7838); box-shadow: inset -12px -8px 0 #c9552517, 10px 17px 25px #df844729; transform: rotate(-18deg); animation: ob-ball-bob 4.8s ease-in-out infinite; }
.ob-big-ball > .ob-icon { width: 100%; height: 100%; color: #994e2a; stroke-width: .6; opacity: .7; }
.ob-big-ball > .ob-icon > circle { stroke: transparent; }
.ob-hero-player { position: absolute; width: 146px; height: 192px; left: 54%; top: 10px; transform: rotate(7deg); animation: ob-player-bob 4.8s ease-in-out infinite; }
.ob-hero-face { position: absolute; left: 11px; top: -9px; width: 124px; height: 132px; filter: drop-shadow(0 6px 3px #3423370a); }
.ob-hero-face > svg { width: 100%; height: 100%; }
.ob-hero-jersey { position: absolute; left: 21px; bottom: 13px; width: 107px; height: 89px; background: var(--team-color); border-radius: 26px 26px 18px 18px; clip-path: polygon(19% 0, 40% 10%, 60% 10%, 81% 0, 100% 28%, 89% 43%, 89% 100%, 11% 100%, 11% 43%, 0 28%); box-shadow: inset 0 -5px 0 #0001; }
.ob-hero-jersey > b { display: block; color: #fff; text-align: center; padding-top: 29px; font: 900 36px/1 Arial, sans-serif; letter-spacing: -1.5px; text-shadow: 2px 2px #0001; }
.ob-art-sticker { position: absolute; right: 0; top: 5px; display: grid; place-items: center; width: 60px; height: 60px; padding: 8px; background: var(--ob-lime); color: #61732f; border-radius: 50%; font: italic 900 14px/1.05 Arial, sans-serif; text-align: center; transform: rotate(12deg); }
.ob-setup { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 22px; align-items: start; }
.ob-player-card, .ob-team-panel { border: 1px solid var(--ob-line); border-radius: 19px; background: #fff; padding: 22px; box-shadow: 0 5px 15px #36234804; }
.ob-player-card { padding: 22px 18px 19px; }
.ob-section-label { display: flex; align-items: center; gap: 9px; }
.ob-section-label > h2 { font-size: 13px; font-weight: 700; letter-spacing: -.2px; }
.ob-step { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #b29bcf; background: #f4eff9; font: 700 9px/1 Arial, sans-serif; }
.ob-team-count { margin-left: auto; font-size: 8px; color: #a69caf; }
.ob-player-preview { padding: 17px 0 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ob-player-preview > span { display: block; width: 121px; height: 126px; padding: 3px; position: relative; isolation: isolate; }
.ob-player-preview > span::before { content: ''; position: absolute; inset: 17px 4px 0; border-radius: 34px; background: #f1ebf9; transform: rotate(-7deg); z-index: -1; }
.ob-player-preview > span > svg { width: 100%; height: 100%; }
.ob-player-preview > strong { font-size: 21px; line-height: 1.2; letter-spacing: -.6px; margin-top: 12px; max-width: 100%; overflow-wrap: anywhere; }
.ob-player-preview > small { color: #85728f; font-size: 9px; margin-top: 8px; line-height: 1.5; }
.ob-character-list { display: grid; gap: 5px; max-height: 173px; overflow-y: auto; padding: 3px; margin: 0 -3px; scrollbar-width: thin; scrollbar-color: #d5c9e4 transparent; }
.ob-character-choice { display: flex; align-items: center; gap: 9px; min-height: 43px; border: 1px solid #eee9f3; background: #fff; color: #776486; border-radius: 10px; padding: 5px 9px 5px 5px; font-size: 11px !important; text-align: left; }
.ob-character-choice > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.ob-character-choice[aria-checked="true"] { border-color: #c9b7eb; background: #f5f0fc; color: #7354a7; }
.ob-character-choice:hover { background: #f9f6fc; }
.ob-character-choice > .ob-icon { margin-left: auto; width: 14px; height: 14px; color: var(--ob-violet); }
.ob-character-mini { display: block; width: 32px; height: 33px; flex: 0 0 auto; }
.ob-character-mini > svg { width: 100%; height: 100%; }
.ob-player-note { color: #877391; font-size: 9px; line-height: 1.75; text-align: center; padding-top: 15px; }
.ob-text-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 0; border: 0; background: transparent; color: #9a85af; font-size: 9px !important; font-weight: 700 !important; text-decoration: none; }
.ob-text-button:hover { color: var(--ob-violet); }
.ob-text-button > .ob-icon { width: 13px; height: 13px; }
.ob-player-card > .ob-text-button { margin-top: 14px; width: 100%; border-top: 1px solid #eee8f2; padding-top: 17px; }
.ob-player-card > .ob-text-button > .ob-icon:last-child { margin-left: auto; }
.ob-team-panel { padding: 22px 24px 23px; }
.ob-matchup { display: grid; grid-template-columns: minmax(0, 1fr) 33px minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 19px; }
.ob-matchup-team { display: flex; align-items: center; gap: 10px; min-height: 65px; padding: 10px 12px; background: #faf8fc; border: 1px solid #ede8f2; border-radius: 12px; color: var(--ob-ink); text-align: left; }
.ob-matchup-team.ob-current-side { border-color: #c7b6e8; background: #f5efff; box-shadow: inset 0 0 0 1px #d9cbf2; }
.ob-matchup-team > span:not(.ob-team-badge) { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ob-matchup-team small { font: 700 7px/1 Arial, sans-serif; letter-spacing: 1px; color: #b09bc7; }
.ob-matchup-team strong { font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.ob-matchup-team > .ob-icon { margin-left: auto; width: 12px; height: 12px; color: #a394b4; }
.ob-team-badge { display: flex; align-items: center; flex-direction: column; justify-content: center; width: 39px; height: 42px; gap: 2px; border-radius: 12px 12px 15px 15px; background: var(--team-color); color: var(--team-accent); box-shadow: inset 0 -3px 0 #0001; flex: 0 0 auto; transform: rotate(-3deg); }
.ob-team-badge > i { font: normal 700 19px/1 Arial, sans-serif; }
.ob-team-badge > b { font: 900 6px/1 Arial, sans-serif; letter-spacing: .8px; }
.ob-swap { display: grid; place-items: center; width: 31px; height: 31px; padding: 5px; border: 1px solid #e9e3ef; background: #fff; color: #b19ac5; border-radius: 50%; }
.ob-swap:hover { border-color: #c2addb; color: var(--ob-violet); background: #f6f0ff; }
.ob-swap > .ob-icon { width: 13px; height: 13px; }
.ob-team-prompt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 19px 1px 11px; }
.ob-team-prompt > span { color: #8e7d9b; font-size: 9px; font-weight: 700; }
.ob-team-prompt > small { color: #b2a8bb; font-size: 8px; }
.ob-team-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.ob-team-choice { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 11px 4px 8px; border: 1px solid #eae5ef; border-radius: 11px; background: #fff; color: #756080; transition: background .15s, border-color .15s, transform .15s; }
.ob-team-choice:hover:not(:disabled) { border-color: #c9b9df; background: #faf7ff; transform: translateY(-2px); }
.ob-team-choice[aria-checked="true"] { border-color: var(--ob-violet); background: #f3edff; box-shadow: inset 0 0 0 1px var(--ob-violet); color: #7751ad; }
.ob-team-choice > .ob-team-badge { width: 35px; height: 37px; border-radius: 10px 10px 12px 12px; }
.ob-team-choice > .ob-team-badge > i { font-size: 16px; }
.ob-team-choice > span:not(.ob-team-badge) { min-height: 25px; display: flex; align-items: center; justify-content: center; width: 100%; font-size: 9px; line-height: 1.3; text-align: center; font-weight: 700; overflow-wrap: anywhere; }
.ob-team-choice > small { padding: 2px 5px; background: #eee7f7; color: #8b6dac; font: 700 6px/1.2 Arial, sans-serif; letter-spacing: .7px; border-radius: 3px; }
.ob-team-choice > .ob-empty-team-tag { visibility: hidden; }
.ob-match-options { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 20px; }
.ob-match-options h3 { color: #80678d; font-size: 10px; font-weight: 700; margin-bottom: 8px !important; }
.ob-segmented { display: flex; gap: 3px; padding: 3px; border: 1px solid #ece5f1; border-radius: 9px; background: #f6f2fa; }
.ob-segmented > button { flex: 1; min-width: 0; min-height: 32px; padding: 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #866999; font-size: 10px !important; }
.ob-segmented > button[aria-checked="true"] { background: #fff; border-color: #e5d9ee; color: #7655a2; box-shadow: 0 1px 3px #5d3a7c08; font-weight: 700; }
.ob-segmented > button:hover { background: #fdfaff; }
.ob-start-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 20px; padding-top: 19px; border-top: 1px solid #eee8f2; }
.ob-start-row > p { color: #998ba5; font-size: 10px; line-height: 1.8; }
.ob-start-row > p > .ob-icon { height: 13px; width: 13px; margin-right: 5px; color: var(--ob-orange); }
.ob-start-row > p > span { color: #b1a5ba; font-size: 8px; padding-left: 22px; }
.ob-start { min-width: 178px; min-height: 45px; padding: 12px 18px; justify-content: space-between; font-size: 12px !important; }
.ob-home-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 0 4px; }
.ob-home-footer > span { font: 700 7px/1.5 Arial, sans-serif; letter-spacing: 1px; color: #b3a7bf; }
.ob-home-footer .ob-text-button { font-size: 8px !important; color: #ab9bb9; }
.ob-storage-note { margin-top: 14px !important; padding: 11px 14px; border: 1px solid #ecdbcb; border-radius: 9px; color: #a58a70; background: #fffaf1; font-size: 9px; }
.ob-unavailable { max-width: 500px; margin: auto; padding: 70px 30px; text-align: center; }
.ob-unavailable h1 { font-size: 32px; line-height: 1.2; }
.ob-unavailable p { color: var(--ob-muted); margin: 20px 0 25px !important; }

/* Match display. */
.ob-match-shell .ob-header { flex-basis: 61px; padding-top: 9px; padding-bottom: 9px; }
.ob-play-area { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #efebf5; overflow-y: auto; }
.ob-scoreboard { display: grid; grid-template-columns: 1fr 100px 1fr; align-items: center; flex: 0 0 83px; max-width: 990px; width: 100%; margin: 0 auto; padding: 11px 25px; gap: 24px; }
.ob-score-team { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ob-score-team > span:not(.ob-team-badge) { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ob-score-team small { color: #a491b6; font: 700 7px/1 Arial, sans-serif; letter-spacing: 1px; }
.ob-score-team strong { color: #554561; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.ob-score-team > b { font: 900 36px/1 Arial, sans-serif; color: var(--ob-ink); letter-spacing: -1px; }
.ob-home-score > b { margin-left: auto; }
.ob-away-score > b { margin-right: auto; }
.ob-away-score { text-align: right; }
.ob-score-team .ob-team-badge { width: 40px; height: 43px; }
.ob-clock-box { text-align: center; display: flex; flex-direction: column; gap: 4px; padding: 0 13px; border-left: 1px solid #dfd4e8; border-right: 1px solid #dfd4e8; }
.ob-clock-box > span { font: 700 6px/1 Arial, sans-serif; color: #ad98bf; letter-spacing: 1.5px; }
.ob-clock-box > strong { font: 900 26px/1 Arial, sans-serif; color: var(--ob-ink); font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.ob-clock-box > small { font: 700 6px/1 Arial, sans-serif; color: var(--ob-violet); letter-spacing: 1px; }
.ob-match-meta { flex: 0 0 29px; display: flex; justify-content: space-between; align-items: center; padding: 5px 27px; border-top: 1px solid #e4dbe9; border-bottom: 1px solid #e3d9eb; color: #9b86af; font-size: 8px; background: #f6f2fa; }
.ob-possession { display: inline-flex; align-items: center; gap: 6px; }
.ob-possession > i { width: 6px; height: 6px; border-radius: 50%; background: var(--ob-violet); }
.ob-possession > b { font-weight: 600; }
.ob-shot-clock { font-size: 7px; letter-spacing: .7px; }
.ob-shot-clock > strong { display: inline-block; width: 18px; text-align: right; color: #765d8b; font: 900 10px/1 Arial, sans-serif; font-variant-numeric: tabular-nums; }
.ob-attack-direction { display: flex; align-items: center; gap: 5px; }
.ob-attack-direction .ob-icon { width: 13px; height: 13px; }
.ob-court { flex: 1; min-height: 265px; position: relative; overflow: hidden; isolation: isolate; background: #dcd2e6; touch-action: none; }
#bounce-view .ob-court:focus { outline: none; }
#bounce-view .ob-court:focus-visible { outline: 2px solid #7651e870; outline-offset: -2px; }
.ob-court > canvas { display: block; width: 100%; height: 100%; }
.ob-court-footer { display: grid; grid-template-columns: 1fr minmax(130px, 210px) 1fr; gap: 25px; align-items: center; padding: 10px 27px; min-height: 62px; flex: 0 0 auto; background: #fff; border-top: 1px solid #e6dfed; }
.ob-controlled { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ob-controlled > span { display: inline-block; width: 33px; height: 36px; flex: 0 0 auto; }
.ob-controlled > span > svg { width: 100%; height: 100%; }
.ob-controlled > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ob-controlled small { color: #baaaca; font: 700 6px/1 Arial, sans-serif; letter-spacing: 1px; }
.ob-controlled strong { color: #856d97; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.ob-charge > span { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 7px; }
.ob-charge b { font: 700 6px/1 Arial, sans-serif; letter-spacing: .8px; color: #b8a7c7; }
.ob-charge small { color: #bdafca; font-size: 7px; }
.ob-charge-rail { height: 7px; border-radius: 6px; background: #f0eaf6; position: relative; overflow: hidden; }
.ob-charge-rail > i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 6px; background: var(--ob-orange); z-index: 2; }
.ob-charge-rail > b { position: absolute; top: 0; bottom: 0; left: 62%; width: 20%; background: #c7e990; z-index: 1; }
.ob-charge-active b { color: #99729d; }
.ob-charge-active .ob-charge-rail { box-shadow: 0 0 0 2px #f1e5fb; }
.ob-play-call { text-align: right; color: #9478ac; font-size: 10px; line-height: 1.4; }
.ob-key-strip { flex: 0 0 35px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; background: #faf7fc; border-top: 1px solid #eee7f4; padding: 7px 14px; color: #b39bc4; font-size: 7px; }
.ob-key-strip > span { display: inline-flex; align-items: center; gap: 5px; }
.ob-key-strip kbd { font-size: 7px !important; min-width: 15px !important; padding: 2px 4px !important; border-color: #e1d7eb !important; color: #ab94be !important; }

/* Pause, help and end of match. */
.ob-modal-shade { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 22px; background: #25163879; backdrop-filter: blur(7px); }
.ob-dialog { width: min(440px, 100%); max-height: 100%; overflow-y: auto; padding: 25px 29px 29px; border: 1px solid #e9dff4; border-radius: 23px; background: #fcfaff; box-shadow: 0 20px 80px #20133336; animation: ob-pop-in .2s ease-out; }
.ob-dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: -5px; margin-bottom: 12px; min-height: 29px; }
.ob-dialog h2 { font: 900 30px/1.1 Arial, sans-serif; letter-spacing: -1px; }
.ob-dialog-copy { color: #a18bae; font-size: 11px; line-height: 1.7; margin-top: 14px !important; }
.ob-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 21px; }
.ob-dialog-actions > .ob-primary { grid-column: 1 / -1; }
.ob-dialog-actions > .ob-text-button { grid-column: 1 / -1; padding-top: 10px; }
.ob-dialog-actions .ob-button { min-height: 43px; font-size: 10px !important; }
.ob-pause-score { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 19px 0 0; margin-top: 18px; border-top: 1px solid #e9deef; }
.ob-pause-score > span { font-size: 9px; color: #a08aaa; }
.ob-pause-score b { padding: 0 5px; color: #796084; font: 900 19px/1 Arial, sans-serif; }
.ob-pause-score > i { color: #b19abf; font: normal 700 13px/1 Arial, sans-serif; }
.ob-controls-dialog { width: min(570px, 100%); }
.ob-controls-intro { color: #7c628c; font-size: 12px; line-height: 1.65; margin-top: 16px; }
.ob-controls-list { margin: 19px 0 0; }
.ob-controls-list > div { display: grid; grid-template-columns: 155px 1fr; align-items: center; gap: 17px; padding: 10px 0; border-bottom: 1px solid #ece3f2; }
.ob-controls-list dt { font-size: 9px; color: #c0aacd; }
.ob-controls-list dd { margin: 0; color: #81648f; font-size: 11px; line-height: 1.6; }
.ob-touch-help { display: flex; align-items: start; gap: 12px; padding: 14px 15px; margin-top: 17px; background: #f2eafa; border-radius: 12px; color: #a08bb3; }
.ob-touch-help > .ob-icon { width: 19px; height: 19px; }
.ob-touch-help > p { display: flex; flex-direction: column; gap: 5px; font-size: 9px; line-height: 1.65; }
.ob-touch-help b { color: #9374ac; font-size: 10px; }
.ob-scoring-help { color: #b3a0c0; font-size: 9px; line-height: 1.8; margin-top: 16px !important; }
.ob-dialog-primary { margin-top: 21px; width: 100%; justify-content: space-between; }
.ob-toast { position: absolute; left: 50%; bottom: 22px; max-width: min(480px, calc(100% - 35px)); padding: 13px 20px; transform: translateX(-50%); z-index: 60; border: 1px solid #ddcdee; border-radius: 12px; background: #fff; color: #8d70a5; font-size: 11px; box-shadow: 0 8px 28px #42245621; text-align: center; }
.ob-toast.ob-error { color: #ad7a67; background: #fff9f3; border-color: #efd9ce; }
.ob-results { width: min(770px, 100%); margin: 0 auto; padding: 36px 35px 25px; text-align: center; }
.ob-result-icon { width: 78px; height: 78px; display: grid; place-items: center; margin: 0 auto 20px; border: 1px solid #e4d7f1; border-radius: 23px; background: #efe6f9; color: #a187bd; transform: rotate(-7deg); }
.ob-result-icon > .ob-icon { width: 39px; height: 39px; stroke-width: 1.3; transform: rotate(7deg); }
.ob-result-icon.ob-won { color: #909d47; background: #e9f6bf; border-color: #d6e6a2; }
.ob-results h1 { margin: 12px 0 13px !important; font: 900 clamp(28px, 4vw, 45px)/1.1 Arial, sans-serif; letter-spacing: -1.6px; }
.ob-results > p { color: #a28db1; font-size: 11px; line-height: 1.7; }
.ob-result-score { display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: center; gap: 15px; padding: 26px 25px; margin-top: 26px; background: #fff; border: 1px solid #e8deef; border-radius: 20px; }
.ob-result-score > div { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.ob-result-badge { width: 57px; height: 60px; border-radius: 16px 16px 20px 20px; }
.ob-result-badge > i { font-size: 26px; }
.ob-result-badge > b { font-size: 8px; }
.ob-result-score > div > strong { color: #846494; font-size: 12px; overflow-wrap: anywhere; line-height: 1.4; }
.ob-result-score small { color: #b5a0c2; font: 700 6px/1 Arial, sans-serif; letter-spacing: 1px; }
.ob-result-score > p { display: flex; justify-content: center; align-items: center; gap: 19px; }
.ob-result-score > p > b { font: 900 49px/1 Arial, sans-serif; letter-spacing: -2px; }
.ob-result-score > p > span { color: #d6c7e2; font-size: 20px; }
.ob-result-stats { display: flex; justify-content: center; gap: 35px; margin: 23px 0 0; }
.ob-result-stats > div { display: flex; flex-direction: column; gap: 5px; }
.ob-result-stats strong { color: #9a7cac; font: 700 20px/1 Arial, sans-serif; }
.ob-result-stats span { color: #baa5c6; font-size: 8px; }
.ob-result-actions { display: flex; justify-content: center; gap: 12px; margin: 27px 0 12px; }
.ob-result-actions > .ob-button { min-width: 158px; min-height: 44px; }
.ob-result-player { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 26px; color: #b09abc; font-size: 9px; }
.ob-result-player > svg { width: 31px; height: 32px; }
.ob-result-player b { color: #9f81af; }

@keyframes ob-ball-bob { 0%, 100% { transform: translateY(0) rotate(-18deg); } 50% { transform: translateY(-9px) rotate(-11deg); } }
@keyframes ob-player-bob { 0%, 100% { transform: translateY(0) rotate(7deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes ob-pop-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
#bounce-view.ob-reduced-motion *, #bounce-view.ob-reduced-motion *::before, #bounce-view.ob-reduced-motion *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { #bounce-view *, #bounce-view *::before, #bounce-view *::after { animation: none !important; transition: none !important; } }
@media (max-width: 1080px) {
  .ob-home { padding: 22px 26px 18px; }
  .ob-hero { padding-left: 8px; padding-right: 15px; min-height: 205px; }
  .ob-hero-art { height: 206px; transform: scale(.94); }
  .ob-setup { grid-template-columns: 209px minmax(0, 1fr); gap: 16px; }
  .ob-team-panel { padding: 20px 18px; }
  .ob-team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .ob-team-choice { display: grid; grid-template-columns: 30px 1fr; gap: 4px 6px; align-items: center; padding: 7px; min-height: 59px; }
  .ob-team-choice > .ob-team-badge { width: 28px; height: 31px; grid-row: 1 / 3; border-radius: 8px; }
  .ob-team-choice > .ob-team-badge > i { font-size: 14px; }
  .ob-team-choice > .ob-team-badge > b { font-size: 5px; }
  .ob-team-choice > span:not(.ob-team-badge) { text-align: left; justify-content: start; min-height: 0; font-size: 9px; }
  .ob-team-choice > small { justify-self: start; padding: 2px 4px; font-size: 5px; }
  .ob-team-prompt > small { font-size: 7px; }
  .ob-matchup { gap: 5px; grid-template-columns: minmax(0, 1fr) 25px minmax(0, 1fr); }
  .ob-matchup-team { gap: 7px; padding: 9px; }
  .ob-matchup-team strong { font-size: 10px; }
  .ob-matchup-team small { font-size: 6px; }
  .ob-matchup-team > .ob-icon { display: none; }
  .ob-matchup-team .ob-team-badge { width: 30px; height: 35px; border-radius: 9px; }
  .ob-swap { width: 25px; height: 25px; }
  .ob-team-count { font-size: 7px; }
}
@media (max-width: 720px) {
  .ob-header { padding: 12px 15px; gap: 10px; flex-basis: 65px; }
  .ob-guide > span { display: none; }
  .ob-guide { padding: 8px; }
  .ob-back { padding: 8px 4px; font-size: 10px !important; gap: 6px; }
  .ob-brand { gap: 7px; }
  .ob-brand > .ob-icon { width: 27px; height: 27px; }
  .ob-brand > span { gap: 6px; }
  .ob-brand b { font-size: 24px; }
  .ob-brand strong { font-size: 10px; padding: 5px 6px; }
  .ob-header-tools { gap: 1px; }
  .ob-icon-button { width: 30px; padding: 5px; }
  .ob-home { padding: 20px 18px 17px; }
  .ob-hero { gap: 2px; padding: 0 0 17px; min-height: 204px; margin-bottom: 10px; }
  .ob-hero h1 { font-size: 38px; letter-spacing: -1.9px; }
  .ob-eyebrow { font-size: 6px; letter-spacing: 1.5px; }
  .ob-hero-copy > p { font-size: 9px; }
  .ob-hero-tags { gap: 7px 11px; font-size: 7px; margin-top: 13px; }
  .ob-hero-tags .ob-icon { width: 10px; height: 10px; }
  .ob-hero-tags .ob-tag-lime { font-size: 5px; }
  .ob-hero-art { height: 205px; transform: scale(.77); transform-origin: right center; margin-left: -25px; width: 280px; max-width: none; justify-self: end; }
  .ob-setup { grid-template-columns: minmax(0, 1fr); }
  .ob-player-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 9px 18px; padding: 17px 19px; }
  .ob-player-card .ob-section-label { grid-column: 1 / -1; }
  .ob-player-preview { grid-column: 1; grid-row: 2 / 5; padding: 0; }
  .ob-player-preview > span { width: 85px; height: 91px; }
  .ob-player-preview > strong { font-size: 17px; margin-top: 7px; }
  .ob-player-preview > small { font-size: 7px; margin-top: 5px; }
  .ob-character-list { max-height: 129px; grid-column: 2; }
  .ob-character-choice { min-height: 36px; font-size: 9px !important; }
  .ob-character-mini { width: 25px; height: 28px; }
  .ob-player-note { grid-column: 2; font-size: 7px; text-align: left; padding-top: 0; }
  .ob-player-card > .ob-text-button { grid-column: 2; margin-top: 0; padding-top: 8px; font-size: 8px !important; }
  .ob-team-panel { padding: 19px; }
  .ob-team-choice { grid-template-columns: 34px 1fr; min-height: 61px; }
  .ob-team-choice > .ob-team-badge { width: 30px; height: 34px; }
  .ob-team-choice > span:not(.ob-team-badge) { font-size: 9px; }
  .ob-home-footer > span { max-width: 160px; font-size: 6px; line-height: 1.7; }
  .ob-home-footer .ob-text-button { font-size: 7px !important; }
  .ob-scoreboard { grid-template-columns: 1fr 75px 1fr; gap: 10px; padding: 10px 16px; flex-basis: 73px; }
  .ob-score-team { gap: 8px; }
  .ob-score-team .ob-team-badge { width: 29px; height: 34px; border-radius: 9px; }
  .ob-score-team strong { font-size: 9px; }
  .ob-score-team small { font-size: 6px; }
  .ob-score-team > b { font-size: 27px; }
  .ob-clock-box { padding: 0 6px; }
  .ob-clock-box > strong { font-size: 23px; }
  .ob-match-meta { padding-left: 17px; padding-right: 17px; }
  .ob-court-footer { grid-template-columns: 1fr 145px; padding: 9px 16px; gap: 7px 13px; }
  .ob-play-call { grid-column: 1 / -1; text-align: center; font-size: 9px; }
  .ob-key-strip { gap: 5px 10px; font-size: 6px; padding: 6px 10px; }
  .ob-key-strip kbd { font-size: 6px !important; }
}
@media (max-width: 440px) {
  .ob-home { padding-left: 13px; padding-right: 13px; }
  .ob-header { padding-left: 10px; padding-right: 10px; }
  .ob-back > span { font-size: 9px; }
  .ob-brand > .ob-icon { width: 23px; height: 23px; }
  .ob-brand b { font-size: 22px; }
  .ob-brand strong { font-size: 9px; }
  .ob-hero-art { transform: scale(.6); margin-left: -70px; margin-right: -10px; width: 255px; }
  .ob-hero h1 { font-size: 33px; }
  .ob-hero { min-height: 184px; }
  .ob-hero-copy { position: relative; z-index: 2; }
  .ob-hero-tags { gap: 6px 9px; max-width: 160px; }
  .ob-hero-tags > span { font-size: 6px; }
  .ob-player-card { grid-template-columns: 117px minmax(0, 1fr); gap: 8px 13px; padding: 15px; }
  .ob-section-label > h2 { font-size: 12px; }
  .ob-team-panel { padding: 17px 14px; }
  .ob-team-grid { gap: 5px; }
  .ob-team-choice { display: flex; padding: 9px 3px 6px; gap: 5px; min-height: 92px; }
  .ob-team-choice > span:not(.ob-team-badge) { text-align: center; justify-content: center; font-size: 8px; min-height: 22px; }
  .ob-team-choice > small { font-size: 5px; }
  .ob-team-count { font-size: 6px; }
  .ob-team-prompt > small { max-width: 160px; text-align: right; line-height: 1.5; }
  .ob-matchup-team { padding: 8px; gap: 6px; }
  .ob-matchup-team strong { font-size: 9px; }
  .ob-matchup-team .ob-team-badge { width: 27px; height: 32px; }
  .ob-matchup-team small { font-size: 5px; }
  .ob-start-row { gap: 10px; }
  .ob-start-row > p { font-size: 8px; }
  .ob-start-row > p > span { font-size: 6px; padding-left: 0; }
  .ob-start { min-width: 135px; font-size: 10px !important; }
  .ob-match-options { gap: 12px; }
  .ob-segmented > button { font-size: 8px !important; padding-left: 4px; padding-right: 4px; }
  .ob-scoreboard { grid-template-columns: 1fr 61px 1fr; gap: 7px; padding: 9px 12px; }
  .ob-score-team > .ob-team-badge { display: none; }
  .ob-score-team strong { font-size: 9px; }
  .ob-score-team > b { font-size: 25px; }
  .ob-clock-box > strong { font-size: 20px; }
  .ob-match-meta { padding-left: 12px; padding-right: 12px; font-size: 7px; }
  .ob-attack-direction { font-size: 6px; }
  .ob-dialog { padding: 21px; border-radius: 18px; }
  .ob-modal-shade { padding: 15px; }
  .ob-dialog h2 { font-size: 27px; }
  .ob-controls-list > div { grid-template-columns: 123px 1fr; gap: 10px; }
  .ob-controls-list dd { font-size: 9px; }
  .ob-controls-list kbd { font-size: 8px !important; padding: 4px 5px !important; }
  .ob-results { padding: 29px 18px 20px; }
  .ob-result-score { gap: 7px; padding: 19px 13px; grid-template-columns: 1fr 1fr 1fr; }
  .ob-result-score > p { gap: 9px; }
  .ob-result-score > p > b { font-size: 37px; }
  .ob-result-score > div > strong { font-size: 10px; }
  .ob-result-actions { gap: 9px; }
  .ob-result-actions > .ob-button { min-width: 0; flex: 1; }
}
@media (pointer: coarse) { .ob-key-strip { display: none; } .ob-court { min-height: 300px; } }

/* Live basketball rooms. */
.ob-mode-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 17px; padding: 0 12px; }
.ob-mode-row > p { color: #8c789c; font-size: 10px; text-align: right; }
.ob-mode-switch { display: inline-flex; flex: 0 0 auto; gap: 4px; padding: 4px; border: 1px solid #e5dced; border-radius: 13px; background: #eee8f6; }
.ob-mode-switch > button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 37px; padding: 9px 20px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #9a84ad; font-size: 11px !important; font-weight: 700 !important; }
.ob-mode-switch > button > .ob-icon { width: 16px; height: 16px; }
.ob-mode-switch > button[aria-checked="true"] { color: #fff; background: var(--ob-violet); box-shadow: 0 3px 9px #7551e82b; }
.ob-online-versus { text-align: center; color: #b49ccb; font: italic 900 10px/1 Arial, sans-serif; }
.ob-online-opponent { border-style: dashed; color: #9b86b0; }
.ob-online-opponent > .ob-icon { display: block !important; margin: 0; width: 28px; height: 28px; flex: 0 0 auto; color: #9f87c0; }
.ob-online-opponent strong { color: #9c87ad; }
.ob-online-home { width: min(1030px, 100%); margin: auto; padding: 35px 35px 25px; }
.ob-online-heading { position: relative; padding: 0 6px 25px; }
.ob-online-heading h1 { margin: 11px 0 13px !important; font: 900 clamp(34px, 4vw, 53px)/1.02 Arial, sans-serif; letter-spacing: -2px; }
.ob-online-heading h1 em { font-style: normal; color: var(--ob-violet); }
.ob-online-heading > p { color: #8e779f; font-size: 12px; line-height: 1.75; }
.ob-online-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 17px; padding: 7px 10px; border: 1px solid #d6e8aa; border-radius: 7px; background: #e8f6c7; color: #7b8e44; font: 700 8px/1.3 Arial, sans-serif; letter-spacing: .6px; }
.ob-online-pill > .ob-icon { width: 14px; height: 14px; }
.ob-online-player-strip { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; padding: 13px 18px; border: 1px solid #e7deed; border-radius: 15px; background: #fff; }
.ob-online-avatar { width: 49px; height: 53px; flex: 0 0 auto; }
.ob-online-avatar > svg { width: 100%; height: 100%; }
.ob-online-player-strip > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ob-online-player-strip small { color: #baa3cb; font: 700 7px/1.2 Arial, sans-serif; letter-spacing: .8px; }
.ob-online-player-strip strong { font-size: 16px; color: #79648b; overflow-wrap: anywhere; }
.ob-online-player-strip > div > span { color: #9d86af; font-size: 10px; }
.ob-online-player-strip > .ob-team-badge { margin-left: 3px; }
.ob-online-player-strip > .ob-text-button { margin-left: auto; text-align: right; }
.ob-online-card { padding: 23px 26px; border: 1px solid #e6deed; border-radius: 20px; background: #fff; }
.ob-online-tabs { display: flex; gap: 6px; border-bottom: 1px solid #eee5f5; padding-bottom: 16px; margin-bottom: 19px; }
.ob-online-tabs > button { display: inline-flex; align-items: center; gap: 8px; min-height: 39px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #ab94ba; padding: 9px 15px; font-size: 11px !important; font-weight: 700 !important; }
.ob-online-tabs .ob-icon { width: 15px; height: 15px; }
.ob-online-tabs > button[aria-selected="true"] { background: #f0e8fc; border-color: #e2d3f7; color: #8560b4; }
.ob-online-tabs > button:hover:not(:disabled) { background: #f8f3fc; }
.ob-online-form { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(190px, 1.3fr) auto; align-items: end; gap: 17px; }
.ob-online-form > .ob-button { min-height: 43px; white-space: nowrap; }
.ob-online-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ob-online-field > span, .ob-online-visibility > legend { color: #967ba8; font-size: 10px; font-weight: 700; }
.ob-online-field > input, .ob-online-field > select { display: block; width: 100%; min-width: 0; min-height: 43px; padding: 11px 12px; border: 1px solid #e6dcee; border-radius: 9px; background: #fbf9fd; color: #806492; font: 12px/1.4 "Trebuchet MS", Arial, sans-serif; }
.ob-online-field > input::placeholder { color: #b9a6c7; }
.ob-online-field > input:focus-visible, .ob-online-field > select:focus-visible { outline: 3px solid #a382d9; outline-offset: 2px; }
#ob-room-code { font: 700 16px/1.2 Arial, sans-serif; letter-spacing: 4px; text-transform: uppercase; }
.ob-online-visibility { margin: 0; padding: 0; border: 0; min-width: 0; }
.ob-online-visibility > legend { padding: 0; margin-bottom: 8px; }
.ob-online-visibility .ob-segmented > button { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ob-online-visibility .ob-icon { width: 13px; height: 13px; }
.ob-online-visibility .ob-segmented > button[aria-pressed="true"] { background: #fff; border-color: #dfd0ee; color: #805daa; font-weight: 700; }
.ob-online-footnote { margin: 15px 0 0 !important; color: #ab94bb; font-size: 9px; line-height: 1.7; }
.ob-online-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 17px !important; padding: 12px 14px; border-radius: 11px; background: #f6f0fb; color: #9b7fae; font-size: 10px; line-height: 1.7; }
.ob-online-note > span { flex: 1; min-width: 160px; }
.ob-online-note > .ob-icon { width: 17px; height: 17px; }
.ob-online-error { margin: 16px 0 0 !important; color: #ac7b6c; background: #fff4ed; border: 1px solid #f1ded3; }
.ob-access-note { display: flex; justify-content: center; align-items: center; gap: 7px; padding: 15px 5px 0; color: #b39cbf; font-size: 9px; line-height: 1.6; }
.ob-access-note > .ob-icon { width: 13px; height: 13px; }
.ob-room-browser-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.ob-room-browser-head > p { color: #af98bd; font-size: 9px; }
.ob-room-list { display: grid; gap: 9px; }
.ob-open-room { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid #ede4f3; border-radius: 13px; background: #fdfbff; }
.ob-open-room > div { min-width: 0; flex: 1; }
.ob-open-room h3 { color: #87679b; font-size: 13px; overflow-wrap: anywhere; }
.ob-open-room p { color: #ac92bc; font-size: 9px; margin-top: 5px !important; line-height: 1.7; }
.ob-open-room .ob-button { min-height: 35px; padding: 8px 12px; }
.ob-room-empty { padding: 30px 18px; border: 1px dashed #e2d4ed; border-radius: 14px; background: #fbf8ff; text-align: center; color: #a287b4; font-size: 12px; }
.ob-room-empty > b { font-size: 16px; color: #9774ac; }
.ob-room-empty > p { font-size: 11px; margin: 7px 0 15px !important; }
.ob-room-empty .ob-spinner { margin-right: 9px; vertical-align: middle; }
.ob-join-preview { display: flex; align-items: center; gap: 13px; padding: 13px 15px; margin-bottom: 20px; background: #f5eefb; border-radius: 12px; }
.ob-join-preview > div { display: flex; flex-direction: column; gap: 5px; }
.ob-join-preview strong { color: #9370a6; font-size: 13px; }
.ob-join-preview span:not(.ob-team-badge) { color: #aa8bbc; font-size: 10px; }
.ob-lobby-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 6px 2px 28px; }
.ob-lobby-heading h1 { font: 900 clamp(27px, 3.3vw, 43px)/1.15 Arial, sans-serif; letter-spacing: -1.3px; margin: 9px 0 10px !important; overflow-wrap: anywhere; }
.ob-lobby-heading p { color: #a286b3; font-size: 11px; line-height: 1.7; }
.ob-lobby-count { display: inline-flex; align-items: center; gap: 8px; padding: 12px 15px; flex: 0 0 auto; border: 1px solid #dfd0f0; border-radius: 14px; background: #eee6fa; color: #b699cf; font-size: 15px; }
.ob-lobby-count b { color: #906ab3; font-size: 23px; }
.ob-lobby-count .ob-icon { width: 23px; height: 23px; }
.ob-lobby-grid { display: grid; grid-template-columns: 255px minmax(0, 1fr); gap: 21px; }
.ob-invite-card, .ob-roster-card { background: #fff; padding: 24px; border: 1px solid #e8ddf0; border-radius: 18px; }
.ob-invite-card { text-align: center; }
.ob-room-code { display: block; margin: 14px 0 20px; color: #8760b2; font: 900 31px/1 Arial, sans-serif; letter-spacing: 5px; }
.ob-invite-card > .ob-button { width: 100%; font-size: 10px !important; min-height: 43px; }
.ob-invite-card > .ob-text-button { margin: 9px 0 11px; }
.ob-invite-card > p { color: #b298c4; font-size: 10px; line-height: 1.75; }
.ob-room-rules { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 19px 0 0; color: #a385bb; font-size: 9px; }
.ob-room-rules > span { display: flex; align-items: center; gap: 5px; }
.ob-room-rules .ob-icon { width: 13px; height: 13px; }
.ob-invite-access { border-top: 1px solid #eee4f5; padding-top: 15px; margin-top: 18px !important; font-size: 8px !important; }
.ob-roster-card h2 { color: #896aa0; font-size: 16px; margin-bottom: 19px !important; }
.ob-online-roster { display: grid; gap: 13px; }
.ob-roster-player { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 15px 12px; border: 1px solid #eadff2; border-radius: 13px; background: #faf7fe; }
.ob-roster-avatar { width: 50px; height: 53px; flex: 0 0 auto; }
.ob-roster-avatar > svg { width: 100%; height: 100%; }
.ob-roster-player > div { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 5px; }
.ob-roster-player strong { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: #90709f; font-size: 14px; overflow-wrap: anywhere; }
.ob-roster-player strong > small { background: #e9dcf7; color: #a284bc; border-radius: 4px; font: 700 6px/1 Arial, sans-serif; padding: 4px; }
.ob-roster-player > div > span { color: #a98bbc; font-size: 10px; }
.ob-roster-player > div > small { color: #c0aacf; font-size: 8px; }
.ob-roster-player > .ob-team-badge { width: 31px; height: 35px; border-radius: 9px; }
.ob-ready { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #91a752; font-size: 7px; }
.ob-ready > .ob-icon { width: 17px; height: 17px; }
.ob-empty-player { background: #fff; border-style: dashed; }
.ob-empty-player .ob-roster-avatar { display: grid; place-items: center; border-radius: 15px; background: #f2ecf8; color: #c1acce; }
.ob-empty-player .ob-roster-avatar > .ob-icon { width: 27px; height: 27px; }
.ob-empty-player strong { font-size: 12px; color: #ab92be; }
.ob-online-start { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 25px; }
.ob-online-start > .ob-button { min-width: 190px; min-height: 45px; }
.ob-online-start > p { color: #b198c3; font-size: 10px; text-align: center; }
.ob-wait-for-host { display: flex; justify-content: center; align-items: center; gap: 9px; color: #a082b3; font-size: 11px; }
.ob-connection-footer { display: flex; justify-content: space-between; gap: 15px; padding: 17px 5px 0; color: #b8a0c7; font-size: 9px; }
.ob-match-connection { padding: 4px 15px; flex: 0 0 auto; min-height: 22px; background: #e9f0d6; border-bottom: 1px solid #d6e0bd; color: #81965f; font-size: 8px; text-align: center; }
.ob-live-note { padding: 13px; border: 1px solid #ddd3f0; border-radius: 12px; background: #f0e9fc; color: #9373af; }
.ob-live-note > .ob-icon { width: 15px; height: 15px; margin-right: 6px; }
.ob-copy-field { margin-top: 18px; }
.ob-result-online-note { color: #af93c1 !important; font-size: 9px !important; }
.ob-disconnected > .ob-icon { display: block; width: 49px; height: 49px; margin: 0 auto 23px; color: #ae8ac7; stroke-width: 1.3; }
.ob-disconnected > p + p { margin-top: -10px !important; font-size: 11px; }
.ob-spinner { display: inline-block; flex: 0 0 auto; width: 14px; height: 14px; border: 2px solid #dfcdec; border-top-color: #a77bc6; border-radius: 50%; animation: ob-spin 1s linear infinite; }
@keyframes ob-spin { to { transform: rotate(360deg); } }
@media (max-width: 850px) {
  .ob-online-form { grid-template-columns: 1fr 1fr; }
  .ob-online-form > .ob-button { grid-column: 1 / -1; justify-self: end; min-width: 175px; }
  .ob-lobby-grid { grid-template-columns: 225px minmax(0, 1fr); gap: 16px; }
  .ob-invite-card, .ob-roster-card { padding: 20px; }
  .ob-roster-player { flex-wrap: wrap; gap: 9px; }
  .ob-roster-player > .ob-ready { margin-left: auto; }
  .ob-roster-avatar { width: 40px; height: 45px; }
}
@media (max-width: 650px) {
  .ob-mode-row { padding: 0; flex-direction: column; align-items: stretch; gap: 9px; margin-bottom: 17px; }
  .ob-mode-switch > button { flex: 1; }
  .ob-mode-row > p { text-align: center; font-size: 9px; }
  .ob-online-home { padding: 27px 18px 20px; }
  .ob-online-heading h1 { font-size: 38px; letter-spacing: -1.6px; }
  .ob-online-heading > p { font-size: 10px; }
  .ob-online-card { padding: 18px 16px; }
  .ob-online-tabs { gap: 4px; }
  .ob-online-tabs > button { flex: 1; padding: 8px; font-size: 9px !important; gap: 5px; }
  .ob-online-tabs .ob-icon { width: 13px; height: 13px; }
  .ob-online-player-strip { gap: 10px; padding: 12px; flex-wrap: wrap; }
  .ob-online-player-strip > .ob-text-button { width: 100%; justify-content: flex-end; border-top: 1px solid #f1e9f7; padding-top: 8px; }
  .ob-online-player-strip > .ob-team-badge { margin-left: auto; }
  .ob-online-form { gap: 15px; }
  .ob-online-field > input, .ob-online-field > select { font-size: 11px; }
  .ob-online-visibility .ob-segmented > button { font-size: 9px !important; }
  .ob-online-visibility .ob-icon { display: none; }
  .ob-access-note { font-size: 8px; align-items: start; }
  .ob-lobby-heading { align-items: flex-start; padding-bottom: 20px; }
  .ob-lobby-heading h1 { font-size: 29px; }
  .ob-lobby-heading p { font-size: 10px; }
  .ob-lobby-count { padding: 9px 10px; gap: 5px; }
  .ob-lobby-count .ob-icon { width: 18px; height: 18px; }
  .ob-lobby-count b { font-size: 19px; }
  .ob-lobby-grid { grid-template-columns: 1fr; }
  .ob-invite-card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 9px 18px; text-align: left; }
  .ob-invite-card > .ob-eyebrow { grid-column: 1; }
  .ob-room-code { grid-column: 1; margin: 0; font-size: 29px; grid-row: 2; }
  .ob-invite-card > .ob-button { grid-column: 2; grid-row: 1 / 3; font-size: 9px !important; padding: 10px; }
  .ob-invite-card > .ob-text-button { grid-column: 2; grid-row: 3; margin: 0; }
  .ob-invite-card > p { grid-column: 1 / -1; font-size: 9px; }
  .ob-room-rules { grid-row: 3; padding: 0; justify-content: start; gap: 12px; }
  .ob-invite-access { margin-top: 3px !important; padding-top: 10px; }
  .ob-online-start { padding-top: 19px; }
  .ob-connection-footer { font-size: 8px; }
}
@media (max-width: 380px) {
  .ob-online-form { grid-template-columns: 1fr; }
  .ob-online-form > .ob-button { width: 100%; }
  .ob-online-tabs > button { font-size: 8px !important; gap: 4px; padding: 8px 5px; }
  .ob-online-tabs .ob-icon { display: none; }
  .ob-online-home { padding-left: 13px; padding-right: 13px; }
  .ob-room-code { font-size: 23px; letter-spacing: 3px; }
  .ob-invite-card { padding: 16px; gap: 10px; }
  .ob-open-room { padding: 11px; gap: 9px; }
  .ob-open-room > .ob-team-badge { display: none; }
}