.commander-dock{width:420px;max-width:calc(100vw - 205px)}
.commander-card{align-items:stretch}
.commander-info{justify-content:center;gap:6px}
.commander-name-row{display:flex;align-items:center;gap:8px;min-width:0}
.commander-name,.commander-progress{padding:0;border:0;box-shadow:none;background:none;text-align:left;color:#edf8ff;text-shadow:none}
.commander-name{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:35px;max-width:55%;flex:0 1 auto}
.commander-progress{display:flex;flex-direction:column;gap:6px;width:100%;border-radius:2px}
.commander-title-button{display:flex;align-items:center;gap:5px;min-width:0;max-width:190px;padding:3px 6px;border:1px solid #8d793e;border-radius:4px;background:#162536;color:#e5c574;box-shadow:inset 0 1px #f9dc8c25;font-size:11px;text-shadow:none;line-height:1.2}
.commander-title-button.equipped{color:#ffdf8f;border-color:#d0ad54;background:linear-gradient(110deg,#494024,#172636)}
.commander-title-button>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.commander-title-medal{width:17px;height:20px;flex-shrink:0}.commander-title-medal svg{width:100%;height:100%}.title-chevron{font-size:12px;flex-shrink:0}
.commander-name:focus-visible,.commander-progress:focus-visible{outline:2px solid #7df5ed;outline-offset:2px}
.achievement-title-reward{display:flex;align-items:baseline;gap:6px;color:#f7d489;font-size:12px;line-height:1.25;flex-wrap:wrap}
.achievement-title-reward>span{font-size:8px;letter-spacing:.1em;color:#b59d73}
.title-dialog{width:min(920px,96vw);max-height:92dvh;display:flex;flex-direction:column}
.title-dialog .modal-body{overflow:hidden;padding:16px;min-height:0}
.player-title-screen{display:flex;flex-direction:column;gap:12px}
.title-intro{position:relative;padding-right:210px}.title-intro>span{font-size:11px;letter-spacing:.12em;color:#efd9a1}.title-intro p{margin:6px 0;color:#a7c3d4;font-size:12px}.title-intro>b{position:absolute;right:0;top:5px;font-size:11px;color:#e9ca77}
.title-tabs{display:flex;gap:8px}.title-tabs button{padding:8px 16px;border:1px solid #546c83;background:#16293f;border-radius:3px;font-size:11px}.title-tabs button.selected{border-color:#e6bf66;background:#493c25;color:#ffe4a0}
.player-title-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;height:min(46dvh,390px)}
.player-title-card{position:relative;min-width:0;min-height:0;padding:10px;display:flex;flex-direction:column;align-items:center;gap:7px;border:1px solid #56647b;border-radius:5px;background:radial-gradient(ellipse at 50% 5%,#44526f50,transparent 70%),#122239;text-shadow:none;box-shadow:inset 0 1px #a4c0cc20}
.player-title-card.selected{border-color:#e7c471;background:radial-gradient(ellipse at 50% 5%,#84623480,transparent 80%),#222b31;box-shadow:inset 0 0 0 1px #bf934655,0 0 12px #e2ab2920}
.player-title-card.locked{opacity:1;filter:none;color:#a8bed0;background:#142235}.player-title-card.locked b{color:#b8c8d6}.player-title-card.locked small{color:#a4b7c7}.player-title-card.locked .title-medal{filter:grayscale(1)}
.player-title-card .title-medal{height:clamp(25px,5dvh,48px);flex-shrink:0}.title-medal svg{height:100%;width:auto}
.player-title-card b{font-size:14px;line-height:1.2;color:#f4db9c;overflow-wrap:anywhere}.player-title-card small{font-size:10px;font-weight:400;line-height:1.35;color:#b6c9d6}.title-card-status{margin-top:auto;font-size:8px;letter-spacing:.06em;color:#8bbac9}.selected .title-card-status{color:#ffe4a0}
.title-footer{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;color:#cbd7de}.title-footer button{padding:8px 14px;font-size:12px}.title-footer .title-achievements{margin-left:auto;border:1px solid #d2b366;color:#ffe5a1;background:#403521;font-size:10px}
@media(max-width:900px){.commander-dock{width:370px;max-width:calc(100vw - 175px)}}
@media(max-width:650px){.commander-dock{width:290px;max-width:calc(100vw - 122px)}.commander-card{gap:6px}.hud .avatar-button{width:38px;height:44px;align-self:center}.commander-info{gap:4px}.commander-name-row{gap:4px}.commander-name{font-size:11px;max-width:52%}.commander-title-button{font-size:9px;padding:3px;gap:3px;max-width:115px}.commander-title-medal{width:12px;height:15px}.title-chevron{display:none}.commander-level{font-size:8px;gap:4px}.commander-level small{font-size:6px}.commander-progress{gap:4px}.title-dialog .modal-head h2{font-size:19px}.title-dialog .modal-brand{display:none}.title-dialog .modal-body{padding:12px}.title-intro{padding-right:0}.title-intro>span{font-size:9px}.title-intro p{font-size:10px}.title-intro>b{position:static;font-size:9px}.player-title-screen{gap:9px}.player-title-grid{grid-template-columns:repeat(2,minmax(0,1fr));height:min(48dvh,420px);gap:8px}.player-title-card{padding:8px;gap:5px}.player-title-card b{font-size:12px}.player-title-card small{font-size:9px}.title-tabs button{font-size:10px;padding:7px 10px}.title-footer{gap:7px}.title-footer button{padding:7px 10px}.title-footer .title-achievements{font-size:8px}.achievement-title-reward{font-size:11px}}
@media(max-height:600px) and (orientation:landscape){.commander-dock{width:340px}.commander-name{font-size:12px}.commander-title-button{font-size:10px}.title-dialog .modal-head{padding:5px 12px}.title-dialog .modal-head h2{font-size:20px}.title-dialog .modal-body{padding:9px 14px}.player-title-screen{gap:7px}.title-intro p{display:none}.title-intro>span,.title-intro>b{font-size:9px}.title-tabs button{padding:5px 10px;font-size:9px}.player-title-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr);height:43dvh}.player-title-card{padding:7px;gap:4px}.player-title-card b{font-size:12px}.player-title-card small{font-size:9px}.player-title-card .title-medal{height:28px}.title-footer button{padding:5px 10px;font-size:10px}.title-card-status{font-size:7px}.achievement-title-reward{font-size:10px}}

.player-title-grid.few-titles{grid-template-rows:minmax(0,1fr);height:min(26dvh,190px)}
@media(max-width:650px){.player-title-grid.few-titles{height:min(27dvh,230px)}}

/* Keep title rewards legible when achievement cards have limited height. */
.achievement-trophy{position:absolute;right:13px;bottom:43px;width:65px;height:65px;opacity:.13;pointer-events:none}.achievement-trophy svg{width:55px;height:62px}.achievement-trophy span{display:none}.achievement-meter{margin-top:auto}

@media(max-height:600px) and (orientation:landscape){.player-title-grid.few-titles{height:43dvh}}