/* Quiet magenta accents; motion is limited to entry and direct interaction. */
:root {
  --accent: #daa0c9;
  --pink-soft: #302432;
  --accent-line: #73516b;
  --accent-glow: rgb(211 139 187 / 8%);
  --ease-out: cubic-bezier(.2, .7, .25, 1);
}

.panel, .vehicle-card, .property-card, .character-choice { min-width: 0; }
.panel-heading, .character-title, .vehicle-sub, .property-heading { flex-wrap: wrap; }
.panel-heading h2, .vehicle-title h3, .character-title h3, .property-heading h3 { overflow-wrap: anywhere; }
.account-chip strong { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.welcome-meta .button { margin-top: 8px; }
.login { position: relative; border: 1px solid #343444; border-radius: 24px; background: radial-gradient(ellipse at top right, rgb(178 131 175 / 13%), transparent 65%), #151a22; padding: 44px; box-shadow: 0 24px 80px #0004; }
.login .primary { min-height: 50px; width: 100%; justify-content: center; margin: 14px 0; }
.player-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 50; max-width: calc(100vw - 32px); padding: 16px 22px; background: #29232f; border: 1px solid #916780; border-radius: 12px; box-shadow: 0 12px 35px #0006; }
@media (max-width: 760px) { .login { margin: 24px 16px; padding: 28px 22px; } .character-title .status { flex-shrink: 0; } }

.sidebar nav a[aria-current="page"] {
  background: linear-gradient(100deg, #322535, #251f2c);
  color: #f0dfea;
  box-shadow: inset 2px 0 #d7a0c8, inset 0 1px rgb(255 255 255 / 3%);
}
.sidebar nav a[aria-current="page"] svg {
  color: #dfb1d2;
  filter: drop-shadow(0 0 5px rgb(218 160 201 / 18%));
}
.sidebar nav a, .sidebar nav button, .button, .icon-button, .account-chip {
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease, box-shadow 180ms ease, transform 180ms var(--ease-out);
}
.pink { color: #e1acd0; background: #302532; }
.button.primary {
  color: #efc7e1;
  border-color: var(--accent-line);
  background: #2e2330;
  box-shadow: inset 0 1px rgb(255 255 255 / 4%);
}
.button.primary:hover {
  background: #392c3b;
  border-color: #ae7d9f;
  box-shadow: 0 3px 15px var(--accent-glow), inset 0 1px rgb(255 255 255 / 6%);
}
.button:active, .icon-button:active { transform: translateY(1px); }
.text-link { transition: color 160ms ease; }
.text-link:hover { color: #f0c9e2; }
.text-link svg { transition: transform 180ms var(--ease-out); }
.text-link:hover svg { transform: translateX(2px); }

.panel {
  border-color: #2b303a;
  box-shadow: inset 0 1px rgb(255 255 255 / 2%);
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.vehicle-card, .property-card, .character-choice {
  transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}
.vehicle-image {
  background: radial-gradient(ellipse at 50% 90%, rgb(204 139 184 / 5%), transparent 70%), #1b222c;
}
.vehicle-image img { transition: transform 300ms var(--ease-out); }
.timeline li::before { background: #c39ab8; box-shadow: 0 0 7px rgb(204 153 187 / 12%); }
.character-choice.selected { background: #29222f; border-color: #956d8c; }
.character-choice:focus-visible { box-shadow: 0 0 0 5px var(--accent-glow); }

@media (hover: hover) and (pointer: fine) {
  .panel:hover { border-color: #3e3744; box-shadow: inset 0 1px rgb(255 255 255 / 3%), 0 4px 20px rgb(0 0 0 / 8%); }
  .vehicle-card:hover, .property-card:hover { border-color: #70576b; box-shadow: 0 2px 18px var(--accent-glow); }
  .vehicle-card:hover .vehicle-image img { transform: translateY(-2px); }
  .account-chip:hover { color: #efc7e1; }
}

#page-content > :not(.skeleton-layout) { animation: content-appear 260ms var(--ease-out) both; }
dialog[open] { animation: dialog-appear 180ms var(--ease-out) both; }
@keyframes content-appear {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dialog-appear {
  from { opacity: 0; transform: translateY(5px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .text-link:hover svg, .vehicle-card:hover .vehicle-image img, .button:active, .icon-button:active { transform: none; }
}

/* Readability stays consistent across desktop and mobile. */
:root { font-size: 16px; --muted: #b7c1d0; }
body { line-height: 1.55; }
.sidebar nav a,.sidebar nav button { font-size: 15px; min-height: 48px; }
.page-heading h1 { font-size: clamp(30px,3vw,40px); }
.page-heading p:not(.eyebrow) { font-size: 15px; line-height: 1.65; }
.eyebrow { font-size: 12px; }
.panel { padding: 22px; }
.panel-heading h2 { font-size: 19px; line-height: 1.4; }
.panel-heading .text-link,.text-link,.button { font-size: 14px; }
.character-title h3 { font-size: 22px; line-height: 1.35; }
.character-info dl,.vehicle-details,dl { font-size: 14px; line-height: 1.65; }
.character-info dl>div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:12px; padding:4px 0; }
.character-info dt { min-width:0; }.character-info dd { text-align:right; overflow-wrap:anywhere; }
.finance-item>div>span { font-size:14px; }.finance-item strong { font-size:24px; }.finance-item .unavailable { font-size:16px; }
.vehicle-title h3,.property-heading h3 { font-size:17px; line-height:1.45; }
.vehicle-sub>span:first-child,.vehicle-details,.property-bottom { font-size:14px; }
.status { font-size:12px; line-height:1.5; padding:5px 10px; white-space:normal; }
.timeline p { font-size:15px; line-height:1.6; }.timeline time { font-size:12px; }
.timeline li { padding-bottom:22px; }
.playtime strong { font-size:25px; }.playtime span,.playtime-week,.support-body p,.muted { font-size:14px; }
.support-body h3,.empty h3 { font-size:18px; }.empty p,.security-note p,.faq-list p { font-size:15px; line-height:1.7; }
.character-choice strong { font-size:18px; }.character-choice span,.character-choice small { font-size:14px; }
.account-details,.transaction-list { font-size:15px; }.search-field input,select { font-size:15px; }
.vehicles-panel .vehicles-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.vehicles-panel .vehicle-card { display:block; }.vehicles-panel .vehicle-image { height:150px; min-height:0; }
.vehicles-panel .vehicle-details { display:block; }.vehicles-panel .vehicle-details>div { display:flex; flex-wrap:wrap; gap:4px 12px; padding:4px 0; }
.vehicle-details dt,.vehicle-details dd { overflow-wrap:anywhere; }.vehicle-details dd { margin-top:0!important; }
.site-footer { font-size:12px; min-height:52px; }
@media(max-width:760px){.panel{padding:18px}.character-title h3{font-size:20px}.character-info dl{font-size:14px}.brand strong{font-size:12px}.page-heading>.button{font-size:13px;max-width:180px}.overview-side{gap:18px}.finance-list{grid-template-columns:1fr}.expanded{grid-template-columns:1fr}.site-footer{flex-wrap:wrap;gap:10px;padding-top:14px;padding-bottom:14px}}
@media(max-width:430px){.character-body{display:block}.portrait{width:120px;height:155px;min-height:0;margin-bottom:16px}.character-info dl{font-size:14px}.character-info dl>div{grid-template-columns:1fr 1fr}.panel-heading .text-link{font-size:13px}.finance-item{padding:12px}.finance-item strong{font-size:24px}.character-choice{flex-wrap:wrap}.site-footer{font-size:12px}}