.ao-feature { color:#000c3c; }.ao-feature-hero { position:relative; overflow:hidden; background:#000c3c; color:#fff; text-align:center; padding:80px 24px; }.ao-feature-hero:before,.ao-feature-hero:after { content:''; position:absolute; width:110px; height:130%; background:#0091d2; transform:skew(-28deg); top:-15%; left:-65px; }.ao-feature-hero:after { left:auto; right:-65px; background:#2460c2; }.ao-feature-hero img { width:280px; max-width:65%; height:auto; margin:0 auto 36px; }.ao-feature-hero h1 { font-size:clamp(26px,3vw,42px); line-height:1.5; margin:0 auto 18px; max-width:1100px; }.ao-feature-hero p { font-size:24px; letter-spacing:3px; }.ao-article { max-width:880px; margin:64px auto; padding:0 24px; font-size:18px; line-height:2.2; }.ao-article p+p { margin-top:26px; }.ao-play { max-width:1048px; padding:0 24px; margin:80px auto; }.ao-play-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }.ao-play-heading p { color:#0091d2; margin-bottom:8px; }.ao-play h2 { font-size:30px; }.ao-instructions { color:#666; margin:20px 0; line-height:1.8; }.ao-score { display:flex; justify-content:center; gap:60px; margin:24px 0; }.ao-score b { font-size:32px; margin-left:18px; }#ao-court { display:block; width:100%; height:auto; background:#0091d2; touch-action:auto; cursor:none !important; }#ao-game-status { text-align:center; margin:16px 0; color:#666; }#ao-game-result { margin:auto; border:0; padding:56px 32px 36px; border-radius:12px; width:min(420px,calc(100vw - 32px)); text-align:center; color:#000c3c; }#ao-game-result::backdrop { background:#0009; }#ao-game-result p { margin:20px 0 28px; }.ao-result-close { position:absolute; right:4px; top:4px; width:40px; height:40px; background:#000; color:white; border:0; font-size:26px; }.ao-confetti { position:fixed; top:-40px; z-index:2147483647; pointer-events:none; animation:ao-fall 3s linear forwards; }@keyframes ao-fall { to { transform:translate(var(--drift),105vh) rotate(500deg); } }@media(max-width:600px){.ao-feature-hero{padding:56px 20px}.ao-article{font-size:16px;margin:40px auto}.ao-play{margin:48px auto}.ao-play h2{font-size:22px}.ao-play-heading{align-items:flex-start}.ao-instructions{font-size:14px}}
body:has(#ao-court:hover) .tennis-flight-trail { display:none; }
.ao-feature { background:#061333; color:#fff; position:relative; overflow:hidden; background-image:linear-gradient(120deg,transparent 88%,#102955 88%,#102955 91%,transparent 91%),linear-gradient(120deg,#0b214a 5%,transparent 5%); }
.ao-feature-hero { background:transparent; }.ao-feature-hero:before { background:#123766; }.ao-feature-hero:after { background:#102955; }
.ao-article { color:#e0e6f0; }.ao-instructions,#ao-game-status { color:#bac7dc; }.ao-play-heading p { color:#54b9ed; }
#ao-court { width:min(100%,480px); height:auto; margin:0 auto; cursor:none !important; border:1px solid #3e608c; }
.ao-score { color:#fff; }.ao-play .cta { border:1px solid #fff; }
/* Flat tournament identity and courtside scoreboard. */
.ao-feature { background-color:#030f2c; background-image:linear-gradient(120deg,transparent 85%,#0a2044 85%,#0a2044 88%,transparent 88%),linear-gradient(120deg,#0c254c 7%,transparent 7%); }
.ao-feature-hero { padding-top:96px; padding-bottom:96px; border-bottom:1px solid #274164; }.ao-feature-hero:before { width:150px; background:repeating-linear-gradient(90deg,#1f65a9 0 3px,transparent 3px 14px); opacity:.65; }.ao-feature-hero:after { width:160px; background:repeating-linear-gradient(90deg,#164881 0 30px,transparent 30px 44px); }
.ao-partner-ribbon { display:flex; justify-content:space-around; gap:20px; padding:18px 24px; background:#0b2850; color:#62c8f0; font-size:12px; font-weight:600; letter-spacing:3px; }.ao-partner-ribbon span { color:#fff; }.ao-article { border-left:2px solid #1b7ead; padding-left:32px; }.ao-play { border-top:1px solid #294263; padding-top:48px; }
.ao-arena { display:grid; grid-template-columns:minmax(230px,1fr) minmax(0,480px); gap:40px; align-items:start; margin-top:36px; }.ao-match-board { background:#050b1e; border:1px solid #254973; box-shadow:8px 8px 0 #102549; }.ao-board-top { display:flex; align-items:center; justify-content:space-between; padding:20px; background:#008ace; font-weight:600; }.ao-board-top img { width:54px; height:32px; object-fit:contain; }.ao-board-meta { display:flex; justify-content:space-between; gap:12px; padding:16px 20px; color:#aebbd0; font-size:12px; }.ao-score { display:block; margin:0; }.ao-score-row { display:grid; grid-template-columns:1fr 22px 74px; align-items:stretch; min-height:78px; border-top:1px solid #273348; }.ao-player-name { padding:16px 20px; font-size:20px; font-weight:600; }.ao-player-name small { display:block; color:#899bb8; font-size:11px; margin-top:4px; letter-spacing:2px; }.ao-score-row b { display:grid; place-items:center; background:#122441; color:#d3ef49; margin:0; font-size:44px; font-variant-numeric:tabular-nums; font-weight:500; }.ao-serve-mark { align-self:center; color:#d3ef49; font-size:11px; }.ao-score-row.ao-leading b { background:#d3ef49; color:#07112a; }#ao-point-call { padding:22px 20px; color:#d3ef49; border-top:1px solid #273348; min-height:72px; line-height:1.7; }.ao-board-brand { border-top:1px solid #273348; padding:26px 20px; }.ao-board-brand img { display:block; width:180px; height:auto; margin:auto; }.ao-court-stage { padding:14px; background:#0b1f41; border:1px solid #264569; }.ao-court-banner { display:flex; justify-content:space-between; padding:6px 0 18px; font-size:12px; letter-spacing:1px; color:#fff; font-weight:600; }.ao-court-banner span { color:#82b0d7; font-size:10px; }.ao-court-bottom { padding:18px 0 6px; }#ao-court { border-color:#34688d; }.ao-play .cta { background:#0091d2; border-color:#0091d2; }
@media(max-width:767px){.ao-arena{grid-template-columns:1fr;gap:28px}.ao-match-board{width:100%;max-width:480px;margin:auto}.ao-board-brand{display:none}.ao-score-row{min-height:60px}.ao-player-name{font-size:16px;padding:10px 16px}.ao-player-name small{display:none}.ao-score-row b{font-size:32px}.ao-partner-ribbon{font-size:10px;letter-spacing:1px}.ao-partner-ribbon span{display:none}.ao-feature-hero{padding:64px 24px}.ao-article{margin-inline:24px;padding:0 0 0 20px}.ao-court-stage{max-width:480px;width:100%;margin:auto;box-sizing:border-box}}
.ao-court-banner { display:flex; justify-content:center; align-items:center; padding:14px 0; }
.ao-court-banner img { display:block; width:58%; max-width:270px; height:auto; }
.ao-court-top img { transform:rotate(180deg); }
.ao-match-board #ao-start { display:block; width:100%; max-width:none; margin:0; height:54px; border:0; border-top:1px solid #254973; border-radius:0; background:#0091d2; color:#fff; font-size:16px; } .ao-match-board #ao-start:hover { background:#087cb5; }
.ao-match-board #ao-start { background:#d3ef49; color:#07112a; } .ao-match-board #ao-start:hover { background:#c4e332; }
.ao-board-top { gap:16px; padding:20px; }.ao-board-top img { width:42px; flex-shrink:0; }.ao-board-top>span { font-size:18px; line-height:1.6; text-align:right; }
.ao-score-row { grid-template-columns:minmax(0,1fr) 18px 110px; min-height:108px; }.ao-score-row b { font-size:72px; line-height:1.2; font-weight:600; }.ao-player-name { align-self:center; font-size:21px; padding:20px; }
#ao-point-call:empty { display:none; }#ao-point-call { min-height:0; padding:12px 20px; font-weight:600; }.ao-board-brand { padding:20px; }.ao-board-brand img { width:150px; }
@media(max-width:767px){.ao-score-row { min-height:90px; grid-template-columns:minmax(0,1fr) 18px 96px; }.ao-score-row b { font-size:60px; }.ao-player-name { font-size:18px; padding:16px; }.ao-board-top>span { font-size:16px; }}
.ao-board-brand img { width:240px; max-width:85%; }
/* Light navigation variant for the navy AO feature page only. */
body:has(.ao-feature) .ao-floating-sidebar { background:linear-gradient(122deg,transparent 0 18px,#0091d2 18px 21px,transparent 21px) top left / 100% 32px no-repeat,#eef0f3; color:#000c3c; }
body:has(.ao-feature) .ao-floating-sidebar .ao-sidebar-heading img { filter:brightness(0); }
body:has(.ao-feature) .ao-floating-sidebar .ao-sidebar-heading,
body:has(.ao-feature) .ao-floating-sidebar .ao-sidebar-group { border-bottom-color:#000c3c22; }
body:has(.ao-feature) .ao-floating-sidebar .ao-sidebar-group h2,
body:has(.ao-feature) .ao-floating-sidebar .ao-sidebar-group .ao-sidebar-primary { color:#000c3c; }
body:has(.ao-feature) .ao-floating-sidebar .ao-sidebar-group a { color:#566174; }
body:has(.ao-feature) .ao-floating-sidebar .ao-sidebar-actions a,
body:has(.ao-feature) .ao-floating-sidebar .ao-sidebar-actions button { color:#000c3c; }
body:has(.ao-feature) .ao-floating-sidebar a:hover,
body:has(.ao-feature) .ao-floating-sidebar button:hover { color:#007eb8; }
body:has(.ao-feature) .ao-floating-sidebar a:focus-visible,
body:has(.ao-feature) .ao-floating-sidebar button:focus-visible { outline-color:#007eb8; }
body:has(.ao-feature) .ao-floating-sidebar::after { background:linear-gradient(115deg,transparent 0 22%,#ccd5e3 23% 55%,transparent 56% 65%,#0091d2 66% 71%,transparent 72%); }
.ao-board-top { justify-content:center; padding:24px 16px; } .ao-board-top>span { display:block; width:100%; text-align:center; font-size:24px; line-height:1.5; font-weight:700; } @media(max-width:767px) { .ao-board-top>span { font-size:22px; } }
/* Event energy: bold flat accents, clear dark reading surfaces. */
.ao-feature-hero { background:radial-gradient(ellipse at 50% 0,#103969 0,transparent 68%),#061333; }
.ao-feature-hero:before { width:180px; left:-80px; opacity:1; background:repeating-linear-gradient(90deg,#0091d2 0 18px,transparent 18px 30px); }
.ao-feature-hero:after { width:150px; right:-85px; background:repeating-linear-gradient(90deg,#d3ef49 0 5px,transparent 5px 16px); opacity:.8; }
.ao-feature-hero h1 { text-shadow:0 3px 0 #0008; }.ao-feature-hero>p { color:#d3ef49; }
.ao-partner-ribbon { border-top:2px solid #0091d2; border-bottom:2px solid #0091d2; background:#092247; }
.ao-play { position:relative; border-top:4px solid #0091d2; }.ao-play-heading h2 { color:#fff; }.ao-play-heading p { color:#d3ef49; }
.ao-court-stage { border-top:1px solid #264569; box-shadow:8px 8px 0 #123662; }.ao-match-board { border-top:1px solid #254973; box-shadow:8px 8px 0 #123662; }
#ao-game-result { background:#050505; color:#fff; border:1px solid #465329; border-top:6px solid #d3ef49; padding:62px 32px 36px; overflow:hidden; }
#ao-game-result:before { content:''; position:absolute; top:0; left:0; width:80px; height:36px; background:repeating-linear-gradient(120deg,#d3ef49 0 5px,transparent 5px 14px); opacity:.8; pointer-events:none; }
#ao-game-result h2 { color:#d3ef49; font-size:30px; line-height:1.4; }
#ao-game-result #ao-result-copy { color:#fff; font-size:23px; font-variant-numeric:tabular-nums; margin:24px 0 30px; }
#ao-game-result #ao-replay { background:#d3ef49; color:#07112a; border:0; min-width:190px; font-weight:600; }
#ao-game-result #ao-replay:hover { background:#c4e332; }
#ao-game-result .ao-result-close { background:#111; color:#fff; }
@media(max-width:600px){#ao-game-result h2{font-size:25px}.ao-feature-hero:before{width:110px;left:-75px}.ao-feature-hero:after{width:100px;right:-75px}}
.ao-feature-hero img { width:400px; max-width:72%; } .ao-feature-hero { border-bottom:1px solid #294d78; }
#ao-game-status:empty { display:none; }
/* Balanced AO-inspired edge textures, kept clear of the content. */
.ao-feature { background-image:repeating-linear-gradient(120deg,transparent 0 11px,#174473 11px 13px,transparent 13px 23px),repeating-linear-gradient(120deg,transparent 0 13px,#12365e 13px 16px,transparent 16px 28px),repeating-linear-gradient(120deg,transparent 0 11px,#174473 11px 13px,transparent 13px 23px),linear-gradient(120deg,transparent 85%,#0a2044 85%,#0a2044 88%,transparent 88%); background-size:140px 380px,110px 440px,140px 380px,100% 100%; background-position:left 520px,right 42%,left bottom 100px,center; background-repeat:no-repeat; }
@media(max-width:767px) { .ao-feature { background-size:24px 300px,20px 340px,24px 300px,100% 100%; background-position:left 450px,right 48%,left bottom 70px,center; } }
/* Spacious, offset geometric clusters inspired by the supplied background. */
.ao-feature { background:#05122d; isolation:isolate; }
.ao-feature:before,.ao-feature:after { content:''; position:absolute; z-index:-1; pointer-events:none; width:clamp(100px,17vw,320px); height:1000px; background:url('ao-edge-motif.svg') left top/100% 100% no-repeat; }
.ao-feature:before { left:0; top:0; }
.ao-feature:after { right:0; bottom:0; transform:rotate(180deg); }
.ao-feature-hero { background:transparent; }
.ao-feature-hero:before,.ao-feature-hero:after { display:none; }
@media(max-width:767px){.ao-feature:before,.ao-feature:after { width:70px; height:620px; opacity:.65; }}
#ao-game-result::before { display:none; }

/* Keep sidebar controls above the decorative falling balls. */
body:has(.ao-feature) .ao-floating-sidebar,
body:has(.ao-feature) .ao-sidebar-collapse { z-index:40; }

.ao-feature-hero { border-bottom:0; }

/* Tighten the gap between the feature headline and article. */
.ao-feature-hero { padding-bottom:28px; }
.ao-article { margin-top:24px; }
@media(max-width:767px) { .ao-feature-hero { padding-bottom:20px; }.ao-article { margin-top:20px; } }
/* Match corner accents to the exact 22:30 diagonal of the panel edge. */
.ao-floating-sidebar,
body:has(.ao-feature) .ao-floating-sidebar {
 clip-path:polygon(22px 0,100% 0,100% calc(100% - 30px),calc(100% - 22px) 100%,0 100%,0 30px);
 background:linear-gradient(125deg,#000c3c 50%,#182478);
}
body:has(.ao-feature) .ao-floating-sidebar { background:#eef0f3; }
.ao-floating-sidebar::before,
body:has(.ao-feature) .ao-floating-sidebar::before {
 content:''; display:block; position:absolute; left:0; top:0; right:auto; width:26px; height:36px; opacity:1;
 background:#0091d2; clip-path:polygon(22px 0,26px 0,0 35.45px,0 30px); pointer-events:none;
}
.ao-floating-sidebar::after,
body:has(.ao-feature) .ao-floating-sidebar::after {
 width:22px; height:100px;
 background:linear-gradient(transparent,transparent);
 background-color:#303c9c;
 clip-path:polygon(100% 0,0 30%,0 70%,100% 40%,100% 64%,0 94%,0 100%,100% 70%);
}
body:has(.ao-feature) .ao-floating-sidebar::after { background-color:#ccd5e3; }


.ao-instructions-mobile { display:none; }
@media(max-width:1023.98px), (pointer:coarse) { .ao-instructions-desktop { display:none; }.ao-instructions-mobile { display:inline; } }