/* Community usability release. Preserve the established violet-grey identity. */
:root{--ux-ink:#30344d;--ux-muted:#5f647e;--ux-accent:#4c527c;--ux-line:#d9dcec;--ux-surface:#fafaff;--ux-tint:#e2e6f3}
body:not(.page-home){--comic-ink:var(--ux-ink);--comic-green:var(--ux-ink);--comic-muted:var(--ux-muted);--comic-red:var(--ux-accent);--comic-red-dark:#393f65;--comic-line:var(--ux-line);--comic-hairline:var(--ux-line)}
.mobile-dock,.league-ranking-mobile{display:none}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #6978b3;outline-offset:3px}
body:not(.page-home) .btn{border-radius:8px}
body:not(.page-home) .badge,body:not(.page-home) .reply-count,body:not(.page-home) .tag,body:not(.page-home) .score-pills span{border-color:var(--ux-line);background:var(--ux-tint);color:var(--ux-ink);border-radius:6px}
body:not(.page-home) .form input:focus,body:not(.page-home) .form select:focus,body:not(.page-home) .form textarea:focus{box-shadow:0 0 0 3px #6978b329}
body:not(.page-home) .section-head{border-color:var(--ux-line)}
body:not(.page-home) table{background:var(--ux-surface);color:var(--ux-ink);border-color:var(--ux-line)}
body:not(.page-home) th{background:var(--ux-accent);color:#fff}
body:not(.page-home) th,body:not(.page-home) td{border-color:var(--ux-line)}
body:not(.page-home) tr:nth-child(even){background:#e9edf780}

/* League settings and match records use the same palette as the homepage. */
body.page-league main.wrap.league-page{max-width:1260px}
body.page-league main.wrap.league-page section{border-width:1px;border-radius:12px;color:var(--ux-ink)}
body.page-league main.wrap.league-page .league-hero{background:#e3e7f5!important}
.league-page .league-kicker{color:#535b88;font-size:13px}
.league-page .league-hero h1{color:var(--ux-ink);font-weight:600}
.league-page .league-facts{gap:20px 36px}
.league-page .league-facts span{color:var(--ux-muted)}
.league-page .league-facts b{color:var(--ux-ink);font-variant-numeric:tabular-nums}
body.page-league .league-page table{background:var(--ux-surface);color:var(--ux-ink)}
body.page-league .league-page th{background:var(--ux-accent);color:#fff}
body.page-league .league-page th,body.page-league .league-page td{border-color:var(--ux-line)}
.league-page a:not(.btn){color:#454f87}
.league-page details{border:1px solid var(--ux-line);background:var(--ux-surface);border-radius:8px;color:var(--ux-ink)}
.league-page summary{line-height:1.6}
body.page-league main.wrap.league-page .league-message{border:1px solid #a9b1d4;background:var(--ux-surface);border-radius:6px}
.league-page .empty{color:var(--ux-muted);border-color:var(--ux-line)}
.league-page .league-filter select{min-height:44px}
.league-page .league-schedule-row{gap:12px;grid-template-columns:minmax(90px,1fr) minmax(120px,1fr) minmax(160px,1.3fr)}
.league-page .league-schedule-row>*{min-width:0}
.league-page input,.league-page select,.league-page textarea{min-width:0}
.league-page .btn{margin-block:3px}

/* Search and category controls precede editorial forum rows. */
.forum-tools{display:grid;gap:8px;margin:22px 0 18px;max-width:700px}
.forum-tools label{font-size:14px;font-weight:700;color:var(--ux-ink)}
.forum-tools>div{display:flex;gap:10px}
.forum-tools input[type=search]{flex:1;width:100%;min-width:0;min-height:46px;border:1px solid #b9c1d9;border-radius:8px;padding:10px 12px;font:inherit}
.forum-tools .btn{flex:none;min-width:76px}
.forum-category-tabs{display:flex;flex-wrap:wrap;gap:8px;background:transparent;border:0;padding:0;margin:0 0 14px}
.forum-category-tabs a{min-height:42px;display:inline-flex;align-items:center;padding:8px 14px;color:var(--ux-muted);border:1px solid var(--ux-line);border-radius:7px;background:transparent;text-decoration:none}
.forum-category-tabs a:hover{background:var(--ux-tint);color:var(--ux-ink)}
.forum-category-tabs a[aria-current=page]{background:var(--ux-accent);border-color:var(--ux-accent);color:#fff}
.forum-results-info{font-size:13px;color:var(--ux-muted);margin:16px 0;overflow-wrap:anywhere}
body.page-forum .forum-list{gap:0;border-top:1px solid var(--ux-line)}
body.page-forum .forum-list .item.forum-post{display:flex;align-items:flex-start;gap:22px;padding:24px 4px;border:0;border-bottom:1px solid var(--ux-line);border-radius:0;background:transparent!important;box-shadow:none!important;transform:none}
body.page-forum .forum-list .item.forum-post:hover{background:#e4e8f566!important}
.forum-thumb{flex:0 0 144px;width:144px;height:100px;object-fit:cover;border-radius:8px;background:var(--ux-tint)}
.forum-post-copy{min-width:0;flex:1}
body.page-forum .forum-post-copy h3{font-size:22px;line-height:1.45;margin:0 0 10px;color:var(--ux-ink);overflow-wrap:anywhere}
body.page-forum .forum-post-copy .meta{align-items:center;gap:8px 14px;font-size:12px;color:var(--ux-muted)}
body.page-forum .forum-post-copy p{margin:10px 0 0;font-size:14px;line-height:1.7;color:var(--ux-muted);overflow-wrap:anywhere}
.forum-pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px;padding:26px 0 0;background:transparent;border:0;color:var(--ux-muted);font-size:14px}

/* Member shortcuts, account recovery, and recent community conversations. */
.auth-return-hint{color:#454f76;line-height:1.8;padding:14px 16px;background:var(--ux-tint);border:1px solid #bbc3df;border-radius:6px}
.account-help{margin-top:22px;padding-top:18px;border-top:1px solid var(--ux-line);color:var(--ux-muted)}
.account-help summary{width:fit-content;padding:8px 0;cursor:pointer;font-weight:700;color:#454f87;line-height:1.6}
.account-help p{font-size:14px;line-height:1.9;max-width:60ch}
body.page-account>main.wrap{min-height:0}
body.page-account main.wrap .member-hub{margin-top:16px;padding:24px 0;border-bottom:1px solid var(--ux-line)}
.member-hub h2{font-size:28px;margin:0 0 18px}
.member-hub p{margin:8px 0;color:var(--ux-muted);line-height:1.8}
.member-hub-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.member-hub-links .btn{min-height:44px}
.page-home .home-community.wrap{width:calc(100% - 88px);max-width:1260px;margin:0 auto;padding:44px 0 56px;background:transparent;color:var(--ux-ink)}
.home-community .section-head{border-bottom:1px solid #bbc2d7;padding-bottom:18px;gap:20px}
.home-community .section-head h2{color:var(--ux-ink);font-size:30px}
.home-community .section-head h2:before{background:#6978b3}
.home-community .section-head>a{font-size:14px;color:#454f87;white-space:nowrap;text-decoration:underline;text-underline-offset:4px}
.home-discussions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.home-discussions>a{display:block;padding:12px 0;border-bottom:1px solid #bcc3d7;min-width:0}
.home-discussions .meta{display:block;color:#59607b;font-size:12px;line-height:1.8}
.home-discussions h3{font-size:19px;line-height:1.6;overflow-wrap:anywhere;margin:12px 0 14px;color:var(--ux-ink)}
.home-discussions>a:hover h3{color:#505d97;text-decoration:underline;text-underline-offset:4px}

@media(min-width:761px){
 .mirror-home .character-name{right:4%;bottom:18%;z-index:12;padding:9px 12px;background:#eef0f8c7;border-radius:8px}
 .mirror-home .motion-toggle{right:4%;bottom:3.5%;min-height:40px}
 .mirror-home .bubble-dz{right:22%;bottom:9%}
 .mirror-home .home-footer{right:14%;font-size:10px}
}

@media(max-width:760px){
 :root{--mirror-rail:0px}
 html{scroll-padding-bottom:92px}
 body{padding-left:0!important;padding-bottom:calc(76px + env(safe-area-inset-bottom));min-width:280px}
 .mirror-rail{display:none}
 body .mirror-top{padding:16px;gap:12px;align-items:center;flex-wrap:wrap}
 .page-home .mirror-top{left:0;right:0;position:absolute}
 .mirror-brand{gap:10px;min-width:0}
 .mirror-brand img{width:60px;height:60px;flex:none}
 .mirror-brand strong{font-size:26px;letter-spacing:3px;white-space:nowrap}
 .mirror-brand small{font-size:10px;letter-spacing:0;line-height:1.5}
 .mirror-auth{gap:6px;justify-content:flex-end;margin-left:auto;font-size:12px}
 .mirror-auth>a{padding:9px 11px;min-height:38px;display:flex;align-items:center;overflow-wrap:anywhere}
 .mirror-auth .btn{min-height:38px;font-size:12px;padding:7px 10px}
 body>main.wrap,body:not(.page-home)>main.wrap{width:100%;max-width:100%;padding:0 16px 28px;margin:0;min-width:0}
 body:not(.page-home) main.wrap section{padding-block:28px}
 body:not(.page-home) .section-head{gap:16px;margin-bottom:22px;padding-bottom:16px}
 body:not(.page-home) .section-head h2{font-size:28px;line-height:1.35}
 body:not(.page-home) .section-head p{font-size:14px}
 body:not(.page-home) .card{padding:18px}
 input,select,textarea{font-size:16px!important;max-width:100%}
 body>footer{padding:24px 16px;font-size:12px;overflow-wrap:anywhere}

 /* Native details remains usable when JavaScript is unavailable. */
 body .mobile-dock{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;inset:auto 0 0;z-index:150;padding:7px 8px calc(7px + env(safe-area-inset-bottom));margin:0;background:#fafafff5;border:0;border-top:1px solid #c7cee1;box-shadow:0 -6px 22px #30344d12;backdrop-filter:blur(14px)}
 .mobile-dock .mobile-dock-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;min-height:54px;padding:5px 2px;margin:0;border:0;border-radius:8px;background:transparent;color:#626781;text-decoration:none;font-size:11px;font-weight:500;line-height:1.2;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
 .mobile-dock .mobile-dock-item::-webkit-details-marker{display:none}
 .mobile-dock svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
 .mobile-dock [aria-current=page],.mobile-more.is-current>summary,.mobile-more[open]>summary{background:#e2e6f3;color:#424c7c;font-weight:700}
 .mobile-dock .mobile-more{position:static;margin:0;padding:0;border:0;background:none;color:inherit}
 .mobile-more-panel{position:absolute;left:12px;right:12px;bottom:calc(100% + 10px);max-height:calc(100dvh - 120px);overflow-y:auto;padding:12px 18px 8px;background:#fafaff;border:1px solid #c8cfe3;border-radius:14px;box-shadow:0 -8px 40px #30344d26}
 .mobile-more-heading{display:flex;align-items:center;justify-content:space-between;padding-bottom:6px;color:var(--ux-ink);font-size:17px}
 .mobile-more-heading button{display:grid;place-items:center;width:44px;height:44px;padding:0;color:#555d80;border:0;border-radius:8px;background:var(--ux-tint)}
 .mobile-more-heading button[hidden]{display:none}
 .mobile-more-panel>a{display:grid;gap:4px;padding:15px 4px;color:var(--ux-ink);border-top:1px solid var(--ux-line);text-decoration:none;border-radius:0;line-height:1.5}
 .mobile-more-panel>a small{font-size:12px;color:var(--ux-muted);font-weight:400}
 .mobile-more-panel>a[aria-current=page]{background:#e8ebf7;padding-inline:10px;border-radius:6px}

 /* All nine roles remain in the scene; text and actions have their own space. */
 body.page-home .mirror-home{height:790px;min-height:790px!important;max-height:none}
 .mirror-home .character-stage{left:0;top:94px;width:100%;height:368px}
 .mirror-home .mirror-video{width:auto;height:100%;max-height:100%}
 .mirror-home .bubble-field{inset:0 0 auto;height:444px}
 .mirror-home .role-bubble span{font-size:10px;bottom:-17px;letter-spacing:0}
 .mirror-home .bubble-bear{left:12px;right:auto;top:128px;bottom:auto;width:78px}
 .mirror-home .bubble-cat{left:auto;right:12px;top:132px;bottom:auto;width:60px}
 .mirror-home .bubble-mss{left:10px;right:auto;top:267px;bottom:auto;width:92px}
 .mirror-home .bubble-awakened-knight{left:auto;right:10px;top:297px;bottom:auto;width:88px}
 .mirror-home .bubble-qbt{left:auto;right:16px;top:219px;bottom:auto;width:52px}
 .mirror-home .bubble-jz{left:88px;right:auto;top:380px;bottom:auto;width:44px}
 .mirror-home .bubble-dz{left:auto;right:100px;top:384px;bottom:auto;width:53px}
 .mirror-home .bubble-qs{display:grid;left:102px;right:auto;top:106px;bottom:auto;width:44px}
 .mirror-home .bubble-lw{display:grid;left:auto;right:95px;top:106px;bottom:auto;width:44px}
 .mirror-home .soap-satellite{width:16px;opacity:.6}
 .mirror-home .welcome{left:24px;right:24px;top:446px;bottom:auto;width:auto;max-width:none;z-index:12}
 .mirror-home .welcome h1{font-size:33px;line-height:1.3;letter-spacing:3px;margin:0 0 10px}
 .mirror-home .welcome p{font-size:12px;line-height:1.8;letter-spacing:0;margin:0 0 15px;color:#535d78}
 .mirror-home .primary{min-height:46px;padding:12px 19px;font-size:13px;gap:32px}
 .mirror-home .guild-id,.mirror-home .character-name{display:none}
 .mirror-home .motion-toggle{top:auto;bottom:0;right:12px;padding:8px 10px;min-height:36px;font-size:10px;z-index:14}
 .mirror-home .news{left:18px;right:18px;top:656px;bottom:auto;width:auto;min-height:88px;padding:13px;gap:10px;z-index:12;border-radius:12px}
 .mirror-home .news-label{font-size:11px;line-height:1.5;padding:7px;letter-spacing:0;max-width:52px;text-align:center}
 .mirror-home .news strong{font-size:12px;line-height:1.55;letter-spacing:0}
 .mirror-home .news small{font-size:10px;line-height:1.6;margin-top:5px}
 .mirror-home .news>svg{width:26px;height:26px}
 .mirror-home .home-footer{left:18px;right:18px;bottom:14px;font-size:9px;letter-spacing:0;justify-content:center;line-height:1.5}

 /* Mobile standings disclose details instead of forcing a wide table. */
 .league-ranking-desktop{display:none}
 .league-ranking-mobile{display:block}
 body.page-league main.wrap.league-page section{margin:18px 0;padding:22px 16px}
 body.page-league main.wrap.league-page .league-hero{padding:28px 20px;margin-top:10px}
 .league-page .league-hero h1{font-size:30px;line-height:1.35}
 .league-page .league-kicker{font-size:12px}
 .league-page .league-hero>p{font-size:13px;line-height:1.8}
 .league-page .league-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;margin:24px 0}
 .league-page .league-facts span{width:auto;font-size:13px}
 .league-page .league-facts b{font-size:24px}
 .league-page h2{font-size:24px;line-height:1.4}
 .league-page p{font-size:14px;overflow-wrap:anywhere}
 .league-page .league-filter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
 .league-filter label{min-width:0;font-size:13px}
 .league-filter select{width:100%;font-size:14px!important}
 .league-page .league-filter .btn{margin:0}
 .league-page details.league-rank-card{margin:0;padding:0;border:0;border-bottom:1px solid var(--ux-line);border-radius:0;background:transparent}
 .league-page .league-rank-summary{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:86px;padding:14px 2px;list-style:none;position:relative;font-weight:400}
 .league-rank-summary::-webkit-details-marker{display:none}
 .league-rank-position{font-size:17px;color:#77809e;font-variant-numeric:tabular-nums;text-align:center}
 .league-rank-identity{display:grid;gap:5px;min-width:0}
 .league-rank-identity strong{font-size:15px;line-height:1.5;color:var(--ux-ink);overflow-wrap:anywhere}
 .league-rank-identity small{font-size:11px;font-weight:400;color:var(--ux-muted);line-height:1.5}
 .league-rank-total{display:grid;gap:3px;min-width:44px;text-align:right;font-size:20px;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--ux-accent)}
 .league-rank-total small{font-size:10px;font-weight:400;color:var(--ux-muted)}
 .league-rank-total small:after{content:"⌄";display:inline-block;margin-left:5px;font-size:14px}
 .league-rank-card[open] .league-rank-total small:after{transform:rotate(180deg)}
 .league-rank-detail{padding:0 10px 18px 40px}
 .league-rank-detail dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:2px 0 14px;padding:16px 0;border-top:1px solid var(--ux-line)}
 .league-rank-detail dt{font-size:11px;color:var(--ux-muted);margin-bottom:4px}
 .league-rank-detail dd{font-size:14px;color:var(--ux-ink);margin:0;overflow-wrap:anywhere}
 .league-rank-detail>a{display:inline-flex;align-items:center;min-height:40px;font-size:13px}
 .league-page .league-schedule-row{grid-template-columns:1fr;padding:14px 0;border-bottom:1px solid var(--ux-line)}
 .league-page .league-schedule-row>label{font-size:14px}
 .league-page details:not(.league-rank-card){padding:14px}
 .league-page .form{min-width:0}
 .league-page .form .btn{white-space:normal}
 .league-page .league-scroll{overscroll-behavior-x:contain}

 .forum-tools{margin-top:16px}
 .forum-tools>div{gap:8px}
 .forum-tools .btn{min-width:64px;padding-inline:12px}
 .forum-category-tabs{gap:7px}
 .forum-category-tabs a{font-size:13px;padding:8px 11px;min-height:40px}
 body.page-forum .forum-list .item.forum-post{gap:12px;padding:20px 0}
 .forum-thumb{flex-basis:78px;width:78px;height:78px;border-radius:6px}
 body.page-forum .forum-post-copy h3{font-size:17px;line-height:1.5;margin-bottom:8px}
 body.page-forum .forum-post-copy .meta{font-size:11px;gap:6px 8px}
 body.page-forum .forum-post-copy .badge{font-size:10px;padding:3px 6px}
 body.page-forum .forum-post-copy p{font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .forum-pagination{gap:12px;font-size:12px}
 .forum-pagination .btn{padding-inline:12px;font-size:13px}
 .member-hub-links{display:grid;grid-template-columns:1fr 1fr}
 .member-hub-links .btn:first-child{grid-column:1/-1}
 .auth-return-hint{font-size:13px}
 .page-home .home-community.wrap{width:auto;margin:0 20px;padding:32px 0 42px}
 .home-community .section-head{display:block}
 .home-community .section-head h2{font-size:26px;margin-bottom:10px}
 .home-community .section-head p{font-size:13px}
 .home-community .section-head>a{display:inline-block;margin-top:16px;min-height:32px;font-size:13px}
 .home-discussions{grid-template-columns:1fr;gap:4px}
 .home-discussions>a{padding:12px 0}
 .home-discussions h3{font-size:17px;margin:8px 0 12px}
}

@media(max-width:360px){
 .mirror-brand img{width:52px;height:52px}
 .mirror-brand strong{font-size:23px;letter-spacing:2px}
 .mirror-brand small{font-size:9px}
 .mirror-auth>a{font-size:11px;padding-inline:8px}
 .mirror-home .bubble-qs{left:85px}.mirror-home .bubble-lw{right:80px}
 .mirror-home .bubble-jz{left:82px}.mirror-home .bubble-dz{right:82px}
 .mirror-home .welcome{left:20px;right:20px}
 .mirror-home .news{left:12px;right:12px;padding:11px}
 body.page-league main.wrap.league-page .league-hero{padding-inline:16px}
 .league-page .league-hero h1{font-size:27px}
}

@media(prefers-reduced-motion:reduce){
 .mobile-dock *,.forum-post,.home-discussions *{transition:none!important;scroll-behavior:auto!important}
}
@media(prefers-reduced-transparency:reduce){
 .mobile-dock,.mirror-home .news{background:#eef0f8!important;backdrop-filter:none}
}