.token-symbols { position: absolute; pointer-events: none; }
.daily-token {
  display: none;
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 3px 6px;
  border: 1px solid #b57d35;
  background: #352311;
  color: #ffdd85;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  text-align: left;
}
.daily-token svg { width: 14px; height: 14px; }
.daily-token strong { display: block; color: #fff0b1; }
[data-screen="home"] .daily-token { display: flex; }
button.trucker-tag { pointer-events: auto; border: 0; background: none; padding: 0; cursor: pointer; }
button.trucker-tag span { overflow-wrap: anywhere; padding-inline: 12px; }
.account-preview-actions { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 430px) {
  .mast { flex-wrap: wrap; padding-block: 6px; }
}

.signup-dialog { width: min(390px, calc(100% - 32px)); }
.signup-dialog h2 { margin-top: 0; }
.signup-options { display: grid; gap: 8px; }
.signup-options .primary { width: 100%; min-height: 42px; }
.signup-dialog form { display: flex; justify-content: flex-end; }
.player-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
#player-balance { display: inline-flex; gap: 5px; align-items: center; color: #ffe394; }
#player-balance svg { width: 17px; height: 17px; }
#player-account label, #player-friends label { display: block; margin-bottom: 5px; }
.player-form { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 10px; }
.player-form input { min-height: 42px; min-width: 0; flex: 1 1 160px; padding: 5px 8px; font: inherit; color: inherit; background: #25191e; border: 1px solid #966271; }
.friend-rows { list-style: none; margin: 0; padding: 0; }
.friend-rows li { display: flex; gap: 6px; align-items: center; margin-block: 5px; flex-wrap: wrap; }
.friend-rows li span { flex: 1 1 auto; overflow-wrap: anywhere; }
#open-name-tag span { font-size: clamp(9px, 1.8vw, 13px); }
#open-name-tag { width: 118px; }
.wardrobe-halo { animation: wardrobe-float 2.4s ease-in-out infinite alternate; }
@keyframes wardrobe-float { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .wardrobe-halo { animation: none; } }

#reward-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.wardrobe-secret { color: #f5c8ff; font-weight: 700; }

.friend-rows .friend-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 3px;
  box-sizing: border-box;
  border: 1px solid #604047;
  border-radius: 8px;
  background: #261b1d;
}

.social-panel {
  position:fixed;
  width: min(420px, calc(100% - 20px));
  max-width: calc(100% - 10px);
  max-height: min(720px, calc(100dvh - 20px));
  box-sizing: border-box;
  overflow: auto;
  margin: auto 10px auto auto;
  padding: 0 14px 16px;
  background: #19191c;
  border: 1px solid #44444b;
  border-radius: 14px;
  color: #f7f7f8;
  box-shadow: 0 14px 48px #000a;
}
.friends-header { display:flex; align-items:center; justify-content:space-between; padding:14px 2px 10px; }
.social-panel h2 { margin:0; font-size:25px; overflow-wrap:anywhere; }
.friends-close { width:36px; height:36px; border:0; border-radius:7px; background:#2b2b30; color:inherit; font:24px/1 sans-serif; cursor:pointer; }
.friends-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; border-bottom:1px solid #393940; padding-bottom:8px; }
.friends-tabs button { display:flex; justify-content:center; align-items:center; gap:5px; min-height:43px; padding:4px; border:1px solid transparent; border-radius:7px; background:transparent; color:#d2d2d8; font:inherit; cursor:pointer; }
.friends-tabs button:hover,.friends-close:hover { background:#34343b; }
.friends-tabs button[aria-selected="true"] { background:#34343b; border-color:#595961; color:#fff; }
.friends-tabs svg { width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#friend-request-count { border-radius:10px; padding:1px 4px; background:#ee6368; color:#170a0a; font-weight:700; }
#player-friends h3 { margin:15px 0 8px; font-size:14px; color:#d4d4db; }
#friend-list-count { margin-left:6px; color:#b5b5bf; }
#friend-status { margin:8px 0; color:#ffb2b5; }
#friend-status:empty { display:none; }
#player-friends [role="tabpanel"] { padding-top:10px; }
.friends-input { width:100%; min-width:0; box-sizing:border-box; min-height:42px; padding:6px 9px; background:#25252a; color:inherit; border:1px solid #55555e; border-radius:7px; font:inherit; }
.friends-add-form { display:flex; gap:6px; align-items:stretch; }
.friends-add-form button { flex:none; padding:5px 8px; }
#player-friends .friend-rows li { padding:6px; min-height:48px; background:#232327; border:1px solid #333339; border-radius:8px; gap:7px; }
#player-friends .friend-avatar { width:36px; height:36px; flex-basis:36px; background:#18181b; border-color:#47474f; border-radius:50%; }
.social-score-list .friend-avatar { width:36px; height:36px; flex:0 0 36px; padding:3px; box-sizing:border-box; background:#18181b; border:1px solid #47474f; border-radius:50%; }
.friends-player-name { min-width:55px; }
.friends-pending { display:block; margin-top:2px; color:#bdbdc7; font-size:11px; }
.friends-action { border:1px solid #686875; border-radius:6px; min-height:34px; padding:3px 7px; background:#444450; color:#fff; font:inherit; cursor:pointer; }
.friends-action:hover { background:#555565; }
.friends-action-secondary { background:#27272c; }
#player-friends .friends-empty { color:#c1c1cb; }
@media(max-width:460px) { .social-panel { margin:auto; } .friends-tabs button { font-size:12px; } }

.social-panel.panel-positioned { position: fixed; right: auto; bottom: auto; margin: 0; }
.social-panel.panel-resized { max-height:calc(100dvh - 10px); }
.social-panel .friends-header form { display:flex; align-items:center; gap:5px; }
.social-panel .friends-header { gap:5px; }
.panel-resize-handle:not(:disabled) { cursor:nwse-resize; touch-action:none; font-size:19px; }
.panel-edge-tab {
  position:absolute;
  z-index:2;
  top:var(--panel-edge-y,50%);
  translate:0 -50%;
  display:grid;
  place-items:center;
  width:14px;
  height:46px;
  padding:0;
  border:1px solid #595961;
  background:#34343b;
  color:#bdbdc7;
  touch-action:none;
}
.panel-edge-tab:not(:disabled) { cursor:ew-resize; }
.panel-edge-tab:hover, .panel-edge-tab:active { color:#fff; background:#51515b; }
.panel-edge-tab-left { left:0; border-radius:0 6px 6px 0; }
.panel-edge-tab-right { right:0; border-radius:6px 0 0 6px; }
.panel-edge-tab::before { content:""; width:2px; height:17px; background:currentColor; box-shadow:3px 0 currentColor; translate:-1.5px 0; }
.panel-move-handle { cursor: grab; touch-action: none; user-select: none; }
.panel-move-handle:active { cursor: grabbing; }

#wardrobe[open] { display:flex; flex-direction:column; }
.wardrobe-header-tools, .wardrobe-balance { display:flex; align-items:center; gap:7px; }
.wardrobe-header-tools { margin-inline-start:8px; }
.wardrobe-balance { color:#ffe394; font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.wardrobe-balance svg, .wardrobe-item-action svg { width:15px; height:15px; flex:none; }
.wardrobe-preview {
  flex:none;
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
  align-items:center;
  gap:10px;
  padding:8px 10px;
  background:#232327;
  border:1px solid #333339;
  border-radius:8px;
}
#wardrobe-sprite { height:clamp(80px, 23dvh, 162px); }
#wardrobe-sprite > svg { display:block; width:100%; height:100%; }
.wardrobe-preview-details { min-width:0; }
#wardrobe-look { display:block; font-size:14px; overflow-wrap:anywhere; }
.wardrobe-preview-controls { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.wardrobe-preview-controls button { font-size:12px; }
#wardrobe-season-countdown { margin:0 0 6px; color:#ffd989; font-size:11px; font-variant-numeric:tabular-nums; }
.wardrobe-filters { flex:none; min-width:0; margin:8px 0 0; padding:0 0 8px; border:0; border-bottom:1px solid #393940; }
.wardrobe-filters legend, .wardrobe-filters input { position:absolute; width:1px; height:1px; clip-path:inset(50%); }
.wardrobe-filters label { cursor:pointer; }
.wardrobe-filters span { display:grid; place-items:center; min-height:39px; border:1px solid transparent; border-radius:7px; color:#d2d2d8; font-size:13px; }
.wardrobe-filters label:hover span { background:#34343b; }
.wardrobe-filters input:checked + span { background:#34343b; border-color:#595961; color:#fff; }
.wardrobe-filters input:focus-visible + span { outline:2px solid #ffc850; outline-offset:1px; }
#wardrobe-status { flex:none; margin:0; padding-top:7px; color:#ffd3d4; font-size:12px; overflow-wrap:anywhere; }
#wardrobe-status:empty { padding:0; }
.wardrobe-items { min-height:0; margin:0; padding:7px 0 0; list-style:none; overflow:auto; overscroll-behavior:contain; }
.wardrobe-item-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:5px; margin-bottom:5px; padding:3px 5px; background:#232327; border:1px solid #333339; border-radius:8px; }
.wardrobe-item-row:has(.wardrobe-item[aria-pressed="true"]) { border-color:#ac8952; }
.wardrobe-item { display:flex; align-items:center; gap:7px; min-width:0; min-height:44px; padding:2px; border:0; border-radius:5px; background:none; color:inherit; text-align:left; }
.wardrobe-item:hover { background:#34343b; }
.wardrobe-item > svg { width:36px; height:36px; flex:none; border:1px solid #47474f; border-radius:50%; background:#18181b; }
.wardrobe-item strong { display:block; font-size:13px; overflow-wrap:anywhere; }
.wardrobe-item-tags { display:flex; flex-wrap:wrap; align-items:center; gap:2px 5px; }
.wardrobe-tier { color:#bdbdc7; font-size:11px; }
.wardrobe-tier.wardrobe-secret { color:#f5c8ff; }
.wardrobe-season { padding:0 4px; border:1px solid currentColor; border-radius:4px; color:#ddd2e4; font-size:9px; font-weight:750; line-height:1.35; }
.wardrobe-season[data-season="ALPHA"] { color:#ffd36c; background:#342815; }
.wardrobe-season[data-season="BETA"] { color:#dfb6ff; background:#342242; }
.wardrobe-item-action { display:inline-flex; align-items:center; justify-content:center; gap:3px; min-height:42px; font-size:12px; white-space:nowrap; }
.wardrobe-item-cost:not([hidden]) { display:inline-flex; align-items:center; gap:2px; color:#ffe394; }
.wardrobe-item-action:disabled, .wardrobe-preview-controls button:disabled { opacity:.65; cursor:default; }
.wardrobe-empty { padding:7px 2px; color:#c1c1cb; font-size:13px; }
@media(max-height:460px) { #wardrobe-sprite { height:76px; } }
.social-score-list { margin:8px 0 0; padding-left:28px; }
.social-score-list li { margin:5px 0; padding:7px; border:1px solid #333339; border-radius:8px; background:#232327; }
.social-score-list li::marker { color:#bdbdc7; font-size:12px; }
.social-score-list li > div { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.social-score-list span { overflow-wrap:anywhere; }
.social-score-list strong { flex:none; color:#ffe394; font-size:12px; }
.score-player { min-width:0; }
.score-entry { display:flex; align-items:center; min-width:0; gap:7px; }
.score-record { display:block; color:#bdbdc7; font-size:11px; }

.friends-profile-link { border:0; padding:0; background:none; color:inherit; font:inherit; text-align:left; overflow-wrap:anywhere; cursor:pointer; }
.friends-profile-link:hover { text-decoration:underline; }
.friends-rank { margin-inline-start:auto; display:flex; align-items:center; justify-content:flex-end; gap:5px; color:#dedee7; font-size:11px; text-align:right; }
.friends-rank .ranked-crest-art { flex:none; width:25px; height:25px; }
.profile-card-rank p { margin:0; color:#c8c5d1; font-size:12px; }
#profile-card-status:empty,#profile-card-mmr:empty { display:none; }
#profile-card-content { display:grid; grid-template-columns:minmax(80px,115px) 1fr; align-items:center; gap:12px; }
#profile-card-avatar { display:grid; place-items:center; height:112px; background:#222028; border:1px solid #514756; border-radius:8px; }
#profile-card-avatar svg { width:85%; height:96%; }
.profile-card-rank { display:flex; align-items:center; gap:8px; min-width:0; }
#profile-card-crest { width:43px; height:43px; flex:none; }
.profile-card-rank strong { display:block; overflow-wrap:anywhere; }

#player-profile-settings { margin:12px 0; padding:9px; border:1px solid #654850; border-radius:8px; }
#player-profile-settings summary { cursor:pointer; font-weight:700; }
#profile-details-form { display:grid; gap:7px; padding-top:9px; }
#profile-details-form textarea { width:100%; box-sizing:border-box; background:#252229; color:inherit; border:1px solid #7e6269; border-radius:5px; padding:6px; font:inherit; }
#profile-details-form textarea { resize:vertical; }
#profile-details-message { margin:0; }
#profile-details-message:empty { display:none; }
#profile-card-description { grid-column:1 / -1; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
#profile-card-friend { grid-column:1 / -1; justify-self:start; }
.friend-remove-actions { display:flex; justify-content:flex-end; gap:7px; }

.account-tabs { grid-template-columns:1fr 1fr; }
#player-account [role="tabpanel"] { margin-block:12px; }

#profile-card-content {grid-template-columns:minmax(68px,100px) minmax(0,1fr)}
.profile-card-rank {align-items:flex-start;min-width:0}
.profile-card-rank > div:last-child {flex:1;min-width:0}
#profile-card-rank {white-space:nowrap;overflow-wrap:normal;font-size:clamp(10px,3.1vw,17px);line-height:1.25}
#profile-card-record,#profile-card-founded {line-height:1.5}

#sprite .wardrobe-pats-cap,
.ranked-player-art .wardrobe-pats-cap {
  transform-box: fill-box;
  transform-origin: center;
  animation: pats-cap-spin 3s ease-in-out infinite;
}
.ranked-player-art > svg:has(.wardrobe-pats-cap) { overflow: visible; }
@keyframes pats-cap-spin {
  0% { transform: translateY(0) rotate(0deg); }
  10% { transform: translateY(-9px) rotate(180deg); }
  22% { transform: translateY(0) rotate(360deg); }
  26% { transform: translateY(-1.5px) rotate(360deg); }
  30%,100% { transform: translateY(0) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  #sprite .wardrobe-pats-cap,
  .ranked-player-art .wardrobe-pats-cap { animation: none; }
}