body.rd-page-rosterbuilder { --rd-page-art: url("/assets/news/world-of-warcraft-forever-campement-1200.webp"); }
.rb-app { width: min(1540px,100%); min-height: 78vh; margin: 0 auto; padding: 12px clamp(14px,2vw,28px) 30px; color: #e5e4dd; }
.rb-app .breadcrumbs { margin: 0 0 12px; }
.rb-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding: 12px 0 20px; border-bottom:1px solid rgba(217,173,87,.35); }
.rb-heading .eyebrow,.rb-section-title .eyebrow { margin:0 0 5px; color:#d7b45e; font-size:.67rem; font-weight:800; letter-spacing:.2em; }
.rb-heading h1 { margin:0; color:#f2d994; font:600 clamp(1.8rem,3vw,2.8rem)/1.05 var(--display,Georgia,serif); }
.rb-heading p:last-child { margin:7px 0 0; color:#b9c5c6; }
.rb-local-badge { display:flex; align-items:center; gap:10px; min-width:240px; padding:10px 13px; border:1px solid rgba(91,154,166,.38); border-radius:4px; background:rgba(5,17,22,.7); }
.rb-local-badge>span:first-child { color:#6bd0ac; font-size:1.15rem; }
.rb-local-badge strong,.rb-local-badge small { display:block; }
.rb-local-badge strong { color:#d4e2dc; font-size:.78rem; }
.rb-local-badge small { margin-top:3px; color:#99a9a8; font-size:.67rem; }
.rb-controls { display:grid; grid-template-columns:minmax(190px,1.3fr) minmax(150px,.9fr) minmax(120px,.7fr) minmax(190px,1fr) auto; gap:10px; align-items:start; padding:15px 0; border-bottom:1px solid rgba(217,173,87,.2); }
.rb-field,.rb-add-player label { display:grid; gap:5px; min-width:0; }
.rb-field small { color:#96a49f; font-size:.68rem; line-height:1.25; }
.rb-field>span,.rb-add-player label>span { color:#b7b5a8; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.rb-app input,.rb-app select,.rb-app button,.rb-button { font:inherit; }
.rb-app input:not([type=file]),.rb-app select { min-width:0; min-height:40px; border:1px solid rgba(168,143,82,.52); border-radius:3px; background:#071116; color:#ece9dc; padding:8px 10px; }
.rb-app input:focus-visible,.rb-app select:focus-visible,.rb-app button:focus-visible,.rb-button:focus-visible { outline:2px solid #f0ce78; outline-offset:2px; }
.rb-toolbar { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; padding-top:20px; }
.rb-cloud-panel { grid-column:1/-1; border-top:1px solid rgba(116,150,157,.2); color:#aab8b4; font-size:.76rem; }
.rb-cloud-panel summary { width:max-content; padding:8px 2px; color:#d5bf82; cursor:pointer; }
.rb-cloud-content { display:grid; gap:6px; padding:4px 0 7px; }
.rb-cloud-content form { display:flex; align-items:end; gap:8px; flex-wrap:wrap; }
.rb-cloud-content label { display:grid; gap:5px; min-width:min(100%,220px); }
.rb-cloud-content label span { color:#aeb8b5; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.rb-cloud-content small { color:#859591; }
.rb-cloud-content #rb-cloud-status { margin:0; color:#bdc8c1; font-size:.76rem; }
.rb-cloud-content #rb-cloud-status[data-state="pending"] { color:#edc66d; }
.rb-cloud-content #rb-cloud-status[data-state="offline"] { color:#e7a58d; }
.rb-button { display:inline-flex; justify-content:center; align-items:center; gap:7px; min-height:40px; padding:8px 12px; border:1px solid rgba(208,171,79,.65); border-radius:3px; background:linear-gradient(180deg,#443116,#201a12); color:#f2d994; font-weight:700; font-size:.78rem; text-decoration:none; cursor:pointer; }
.rb-button:hover { border-color:#ffe7a3; background:linear-gradient(180deg,#59411d,#2c2113); }
.rb-button-quiet { background:rgba(8,19,24,.84); color:#c7d2d1; border-color:rgba(94,147,159,.48); }
.rb-button-quiet:hover { background:rgba(24,44,48,.92); }
.rb-import-button { position:relative; }
.rb-overview { display:grid; grid-template-columns:auto minmax(170px,1fr) auto; gap:20px; align-items:center; padding:14px 0; border-bottom:1px solid rgba(217,173,87,.2); }
.rb-count { display:flex; align-items:baseline; gap:8px; }
.rb-count strong { color:#f2d994; font:600 1.8rem/1 var(--display,Georgia,serif); }
.rb-count span,.rb-capacity-copy span { color:#aeb8b5; font-size:.75rem; }
.rb-capacity-copy { display:flex; justify-content:space-between; gap:10px; margin-bottom:7px; }
.rb-capacity-copy strong { color:#e3d7b7; font-size:.78rem; }
.rb-capacity-track { height:8px; overflow:hidden; border:1px solid rgba(135,152,151,.32); border-radius:20px; background:#101b20; }
.rb-capacity-track span { display:block; width:0; height:100%; border-radius:20px; background:linear-gradient(90deg,#398ec3,#d5ac4c); transition:width .2s ease; }
.rb-role-summary { display:flex; gap:14px; align-items:center; flex-wrap:wrap; color:#b6c2be; font-size:.74rem; }
.rb-role-summary span { display:inline-flex; gap:5px; align-items:center; }
.rb-role-summary strong { color:#f1e7cb; }
.rb-role-dot { width:8px; height:8px; border-radius:50%; }
.rb-tank { background:#e7aa52; }.rb-healer { background:#6dcc9d; }.rb-dps { background:#79b8ea; }
.rb-composition { padding-top:18px; }
.rb-section-title { display:flex; justify-content:space-between; align-items:end; gap:14px; margin-bottom:12px; }
.rb-section-title h2 { margin:0; color:#ecd596; font:600 clamp(1.25rem,2vw,1.7rem)/1.05 var(--display,Georgia,serif); }
.rb-roster-actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:end; }
.rb-add-player { display:grid; grid-template-columns:minmax(150px,1.25fr) minmax(130px,.9fr) minmax(120px,.72fr) minmax(140px,.9fr) auto; gap:8px; align-items:end; padding:12px; border:1px solid rgba(114,153,163,.27); background:rgba(4,14,19,.72); }
.rb-button-add { min-height:40px; background:linear-gradient(180deg,#8b1e1d,#5c1113); color:#ffe7b2; border-color:#bd8c40; }
.rb-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
.rb-group { min-width:0; border:1px solid rgba(105,151,161,.34); background:rgba(4,13,18,.73); }
.rb-group header { display:flex; align-items:center; justify-content:space-between; min-height:38px; padding:7px 10px; border-bottom:1px solid rgba(208,171,79,.27); background:linear-gradient(90deg,rgba(31,49,53,.78),rgba(16,27,30,.62)); }
.rb-group h3 { margin:0; color:#ead49d; font:600 1rem/1.1 var(--display,Georgia,serif); }
.rb-group header span { color:#9eaaa6; font-size:.69rem; }
.rb-group-list { display:grid; gap:0; }
.rb-slot { display:grid; grid-template-columns:minmax(115px,1.2fr) minmax(100px,.9fr) minmax(85px,.8fr) minmax(80px,.72fr) minmax(118px,.92fr) minmax(105px,.84fr) auto; gap:6px; align-items:center; min-height:44px; padding:5px 8px; border-bottom:1px solid rgba(111,137,142,.15); }
.rb-slot:last-child { border-bottom:0; }
.rb-slot-name { display:flex; align-items:center; gap:7px; min-width:0; }
.rb-slot-name strong { overflow:hidden; color:#e6e3d8; font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
.rb-class-mark { display:grid; width:25px; height:25px; flex:0 0 25px; place-items:center; border:1px solid rgba(221,194,127,.48); border-radius:50%; color:#f0d99e; background:rgba(129,96,36,.2); font:700 .64rem var(--display,Georgia,serif); }
.rb-slot select { min-height:30px; height:30px; padding:4px 6px; border-color:rgba(100,139,148,.28); font-size:.68rem; }
.rb-slot .rb-status-select { color:#bac5bf; }
.rb-remove { min-width:28px; min-height:28px; padding:2px 7px; border:1px solid transparent; background:transparent; color:#aab3af; cursor:pointer; }
.rb-remove:hover { color:#ffbeb2; border-color:rgba(206,112,95,.44); }
.rb-open-slot { color:#62716f; font-size:.71rem; font-style:italic; padding:9px 10px; }
.rb-empty-state { margin-top:12px; padding:35px 16px; border:1px dashed rgba(186,151,72,.38); text-align:center; color:#aeb8b5; }
.rb-empty-state[hidden] { display:none; }
.rb-empty-state>span { color:#d0ac55; font-size:1.7rem; }
.rb-empty-state h3 { margin:8px 0 5px; color:#e6d29c; font:600 1.1rem var(--display,Georgia,serif); }
.rb-empty-state p { margin:0; font-size:.82rem; }
.rb-source-note { margin:10px 0 0; color:#9ba9a5; font-size:.72rem; }
.rb-source-note a { color:#ddc078; }
.rb-tools { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:22px; border-block:1px solid rgba(217,173,87,.24); background:rgba(217,173,87,.2); }
.rb-tools>div { padding:15px 16px; background:linear-gradient(120deg,rgba(7,17,21,.97),rgba(11,22,24,.93)); }
.rb-tool-icon { float:left; margin:0 10px 4px 0; color:#d8b45b; font-size:1.15rem; }
.rb-tools h2 { display:inline; margin:0; color:#ead69b; font:600 1rem var(--display,Georgia,serif); }
.rb-tools p { clear:both; margin:8px 0 0; color:#acb8b5; font-size:.77rem; line-height:1.48; }
.rb-status { min-height:1.4em; margin:9px 0; color:#b8d6c3; font-size:.8rem; }
.rb-footer { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid rgba(217,173,87,.18); color:#96a29e; font-size:.72rem; }
.rb-footer a { color:#e6ce8d; }
@media(max-width:1050px){.rb-controls{grid-template-columns:repeat(4,minmax(0,1fr))}.rb-name-field{grid-column:span 2}.rb-toolbar{grid-column:1/-1;justify-content:flex-start;padding-top:0}.rb-add-player{grid-template-columns:repeat(4,minmax(0,1fr))}.rb-button-add{grid-column:1/-1}.rb-group-list{overflow-x:auto}.rb-slot{min-width:790px;grid-template-columns:minmax(105px,1.1fr) minmax(95px,.9fr) minmax(78px,.8fr) minmax(74px,.72fr) minmax(108px,.95fr) minmax(92px,.82fr) auto}.rb-slot .rb-status-select{display:block}}
@media(max-width:700px){.rb-app{padding-inline:12px}.rb-heading{align-items:flex-start;flex-direction:column;gap:12px}.rb-local-badge{min-width:0}.rb-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.rb-name-field{grid-column:span 2}.rb-toolbar{grid-column:1/-1;justify-content:flex-start}.rb-toolbar .rb-button{flex:1}.rb-overview{grid-template-columns:auto 1fr;gap:12px}.rb-role-summary{grid-column:1/-1;justify-content:space-between}.rb-section-title{align-items:flex-start;flex-direction:column}.rb-roster-actions{justify-content:flex-start}.rb-roster-actions .rb-button{flex:1}.rb-add-player{grid-template-columns:repeat(2,minmax(0,1fr))}.rb-add-player label:first-child{grid-column:1/-1}.rb-button-add{grid-column:1/-1}.rb-groups{grid-template-columns:1fr}.rb-group-list{overflow-x:auto}.rb-slot{min-width:790px;grid-template-columns:minmax(110px,1.1fr) minmax(95px,.9fr) minmax(78px,.8fr) minmax(78px,.8fr) minmax(105px,.95fr) minmax(96px,.82fr) auto;gap:5px}.rb-slot .rb-spec-select,.rb-slot .rb-status-select{display:block}.rb-tools{grid-template-columns:1fr}.rb-footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.rb-capacity-track span{transition:none}}