.crew-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0}.crew-toolbar h2{margin-right:auto}.crew-section{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:22px;margin:24px 0}.castle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.castle-card{padding:18px;background:var(--bg);border:1px solid var(--border);border-radius:9px;text-align:left;min-height:110px}.castle-card strong{display:block;font-size:17px;color:var(--green);margin-bottom:8px}.castle-card.selected{border-color:var(--green)}.crew-table{overflow-x:auto}.crew-table table{width:100%;border-collapse:collapse}.crew-table th,.crew-table td{padding:13px 11px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}.crew-table th{font-size:11px;text-transform:uppercase;color:var(--muted)}.crew-table td small{display:block;color:var(--muted)}.crew-gain{color:var(--green)}#clock{font-size:20px;color:var(--green)}.crew-section input{max-width:210px}#castleDetail{margin-top:24px}button{cursor:pointer}@media(max-width:700px){.crew-section{padding:12px}.castle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}nav{gap:14px}.heading h1{font-size:32px}}

.castle-card>span,.castle-card>small{display:block}.castle-card>span{color:inherit;overflow-wrap:anywhere}.castle-card>small{margin-top:6px}.castle-card.selected{background:var(--panel);border-color:var(--green)}

/* Four castles above three centered castles, with equal card widths. */
.castle-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:14px;margin-top:14px}
.castle-grid>.castle-card{grid-column:span 2;width:100%;height:100%}
.castle-grid>.castle-card:nth-child(5){grid-column:2 / span 2}
@media(max-width:700px){
 .castle-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
 .castle-grid>.castle-card:nth-child(5){grid-column:span 2}
 .castle-grid>.castle-card:last-child:nth-child(odd){grid-column:2 / span 2}
}
@media(max-width:380px){
 .castle-grid{grid-template-columns:1fr}
 .castle-grid>.castle-card,.castle-grid>.castle-card:nth-child(5),.castle-grid>.castle-card:last-child:nth-child(odd){grid-column:1}
}

.crew-table td .rank-gap{display:block;color:var(--green);font-size:10px;font-weight:600;line-height:1.5;margin-top:5px}