/* Additive features only. Preserve the v1.3 layout and styles. */
.hero .hero-note{max-width:none;white-space:nowrap;font-size:clamp(8px,2.5vw,13px);letter-spacing:-.2px;margin:12px 0 0}
.match-search-tools{display:flex;align-items:end;gap:12px;margin:16px 0 12px}.match-search-tools label{display:grid;gap:7px;font-size:12px;color:#587160}.match-search-label{flex:1;min-width:0}
.match-search-tools input,.match-search-tools select{min-height:44px}
.match-count{font-size:12px;color:#718577}.match-status-pill{display:inline-block;padding:5px 9px;background:#e9f6de;color:#245239;font-size:11px;border-radius:20px;font-weight:750;margin-bottom:12px}.match-status-pill.closed{background:#eef0ee;color:#748075}
.notification-list{display:grid;gap:9px;margin:14px 0}.notification-item{width:100%;text-align:left;border:1px solid #e2e9e3;background:#f9fbf8;padding:13px;border-radius:12px;font:inherit;cursor:pointer}.notification-item.unread{background:#eef8e2;border-color:#cde5b6}.notification-item small{display:block;color:#7a8b7d;font-size:11px;margin-top:7px}.notification-message{font-size:13px;line-height:1.5}.notification-badge{background:#22372d;color:white;border-radius:20px;font-size:10px;padding:2px 6px}
.member-activities,.member-delete{margin-top:18px;padding-top:14px;border-top:1px solid #dce8d9}.member-activities summary,.member-delete summary{cursor:pointer;font-size:13px;font-weight:750;color:#587160}.member-delete p{font-size:12px;line-height:1.7;color:#815b4c}.member-delete label{font-size:12px}.member-delete button{margin-top:12px}.account-subnote{font-size:12px;color:#718577;line-height:1.7}
.report-details{margin-top:22px;padding-top:16px;border-top:1px solid #e2e9e3}.report-details summary{font-size:12px;color:#8a6355;cursor:pointer}.report-form{display:grid;gap:10px;padding-top:12px}.report-form label{display:grid;gap:6px;font-size:12px}.report-form select,.report-form textarea{width:100%;border:1px solid #d3ded3;border-radius:9px;padding:10px;background:white;font:inherit}.report-form button{padding:12px;border:0;border-radius:9px;background:#f2e7e1;color:#854d3a;font-weight:750}
.app-connectivity{margin:0;padding:12px 20px;background:#fff1d7;color:#705423;font-size:12px;line-height:1.6;text-align:center}.service-links{display:flex;flex-wrap:wrap;gap:15px;font-size:13px;margin-top:20px;color:#245239}#serviceInfoDialog p{font-size:14px;line-height:1.8;color:#587160}
@media(max-width:540px){.match-search-tools{flex-direction:column;align-items:stretch}.match-search-tools input,.match-search-tools select{font-size:16px}}

.match-roster [hidden],.notification-badge[hidden]{display:none!important}

/* v2.1.1: requested banner containment; other home layout stays unchanged. */
section.hero[class~="shell"]{width:100%;padding-left:28px;padding-right:28px;box-sizing:border-box}
section.hero[class~="shell"]>div{width:100%;max-width:100%;min-width:0;container-type:inline-size}
section.hero[class~="shell"]>div>div:first-child{min-width:0;max-width:100%}
section.hero[class~="shell"] h1{font-size:clamp(12px,6.5cqi,42px);white-space:nowrap}
section.hero[class~="shell"] .hero-note{font-size:clamp(7px,2.6cqi,13px)}
@media(max-width:790px){section.hero[class~="shell"]{padding-left:16px;padding-right:16px}}
@media(max-width:540px){section.hero[class~="shell"]{padding-left:14px;padding-right:14px}}

/* v2.1.2: browse first, compose only after selecting the small action. */
.match-heading .match-compose-button{flex:0 0 auto;font-size:12px;padding:9px 12px;min-height:40px}
.match-intro{margin:8px 0 14px}
.match-section details.match-browse-filters{background:transparent;border:1px solid #dce8d9;padding:10px 13px;margin:12px 0}
.match-browse-filters summary{font-size:12px;color:#587160}
.match-list-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.match-list-heading button{font-size:11px;background:white;padding:7px 10px;min-height:34px}
.match-compose-dialog{width:min(94vw,620px);max-width:620px;max-height:calc(100dvh - 32px);margin:auto;padding:0;overflow-y:auto}
.match-compose-dialog .match-panel{border:0;border-radius:0}
.match-compose-dialog .match-form [hidden]{display:none!important}
.match-compose-dialog .match-heading h2{font-size:20px}
.match-compose-dialog #matchComposeClose{background:#f2f6ef;font-size:22px;padding:3px 10px}
.match-compose-dialog .match-form{margin-top:14px}

/* v2.1.3: customer support, scoped to the new dialog. */
#supportDialog{max-height:calc(100dvh - 32px);overflow-y:auto}
#supportDialog h3{font-size:15px;margin:20px 0 12px;color:#245239}
.support-intro,#supportLoginHint{font-size:12px;line-height:1.7;color:#718577}
.support-faq details{border-bottom:1px solid #e1e9df;padding:12px 0;font-size:13px}
.support-faq summary{cursor:pointer;font-weight:700;line-height:1.6}
.support-faq p{font-size:12px;line-height:1.8;color:#587160}
.support-form{display:grid;gap:12px}.support-form label{display:grid;gap:6px;font-size:12px;font-weight:700;color:#587160}
.support-form input,.support-form select,.support-form textarea{width:100%;border:1px solid #dce8d9;border-radius:10px;background:#fff;color:#22382b;padding:12px;font:inherit}
.support-form [hidden],#supportDialog [hidden]{display:none!important}
.support-history-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.support-history-heading button{border:1px solid #dce8d9;border-radius:8px;background:white;padding:8px;color:#587160;font-size:11px}
.support-ticket{border:1px solid #dce8d9;background:#f8fbf5;border-radius:12px;padding:14px;margin:10px 0;overflow-wrap:anywhere;font-size:13px}
.support-ticket p{white-space:pre-wrap;line-height:1.7}.support-ticket small{display:block;margin:8px 0;color:#718577}.support-answer{border-top:1px solid #dce8d9;padding-top:10px;color:#245239}
@media(max-width:540px){.support-form input,.support-form select,.support-form textarea{font-size:16px}}

/* v2.1.4: notifications live in the header, outside My Page. */
.nav #topNotifications{position:relative;display:grid;place-items:center;padding:8px;width:38px;height:38px;flex:0 0 38px;border-radius:50%}
#topNotifications svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#topNotifications .notification-badge{position:absolute;right:-4px;top:-5px;min-width:18px;text-align:center;background:#e25a43;border:2px solid white;padding:2px 4px}
#notificationsDialog{max-height:calc(100dvh - 32px);overflow-y:auto}
#notificationsDialog [hidden]{display:none!important}
@media(max-width:400px){header .brand{font-size:18px;gap:6px}header .mark{width:26px;height:26px}header .topin{gap:8px}header .nav{gap:5px}header .nav #topSupport{padding:7px;font-size:10px}header .nav #topAccount{max-width:74px;padding:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}header .nav #topNotifications{width:34px;height:34px;flex-basis:34px}}

/* v2.1.5: upcoming games inside the existing My Page dialog. */
#memberDialog{max-height:calc(100dvh - 32px);overflow-y:auto}
.member-games{margin-top:20px;padding-top:16px;border-top:1px solid #dce8d9}
.member-games-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.member-games h3{margin:0;font-size:16px;color:#245239}.member-games h4{margin:18px 0 10px;font-size:13px;color:#587160}
.member-games h4 span{display:inline-block;margin-left:5px;background:#e8f7d5;border-radius:12px;padding:2px 7px}
.member-games-heading button{border:1px solid #dce8d9;background:white;border-radius:8px;color:#587160;padding:8px;font-size:11px;cursor:pointer}
.member-games-list{display:grid;gap:9px}
.member-game{width:100%;text-align:left;border:1px solid #dce8d9;background:#f8fbf5;border-radius:12px;padding:13px;color:#22382b;cursor:pointer}
.member-game strong,.member-game span,.member-game small{display:block;line-height:1.6}.member-game strong{font-size:13px}.member-game span{font-size:12px;margin-top:4px}.member-game small{font-size:11px;color:#718577;margin-top:4px}.member-game.cancelled{background:#f5f5f2;color:#7a857c}

/* v2.1.6: highlight the inquiry selected from the notification bell. */
#supportDialog .support-ticket-highlight{border-color:#86b24a;background:#eff9e2;box-shadow:0 0 0 2px #dff0c5}