/* Shared shell and interaction states for the five game sections. */
body {
  --game-nav-height: calc(clamp(45px, 4.55vw, 80px) + env(safe-area-inset-top));
  --ui-amber: #f2bd45;
  --ui-amber-light: #ffd76a;
  --ui-amber-line: #ffbe3d;
  --ui-neon: #f5ab3848;
  --ui-steel: #ffffff28;
  --ui-primary: linear-gradient(180deg, var(--ui-amber-light), var(--ui-amber) 45%, #df9a25);
  --ui-depth: inset 0 1px #ffffff0c, 0 3px 10px #0005;
  --ui-speed: 180ms;
  --ui-ease: cubic-bezier(.2,.75,.25,1);
}
@media (orientation: landscape) and (pointer: coarse) {
  html, body:has(> #game) { padding: 0; margin: 0; width:100%; overflow:hidden; overscroll-behavior:none; }
  #game.game { position:fixed; inset:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); margin:0; width:auto; height:auto; min-width:0; min-height:0; max-width:none; max-height:none; aspect-ratio:auto; border:0; border-radius:0; overflow:hidden; --game-nav-height:54px; }
}
#game > #world { top: var(--game-nav-height); }
#game.section-open > #world { bottom: 0; }
#game:not(.inspecting) > #header {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  height: var(--game-nav-height);
  padding: env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) 0 env(safe-area-inset-left);
  background: linear-gradient(#101416, #0b0e10);
  border-bottom: 1px solid var(--ui-steel);
  box-shadow: 0 4px 16px #0005;
}
#game > #header .brand {
  flex: none;
  width: clamp(135px,16%,275px);
  min-width: 0;
  height: 100%;
  padding: 0 clamp(9px,1.5vw,26px);
}
#game > #header .main-nav {
  display: flex;
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
}
#game > #header .nav-link {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .23em;
  padding: 0 .28em;
  border-inline-end: 1px solid #ffffff0e;
  color: #c2c4c5;
  background: transparent;
  box-shadow: none;
  font: 600 clamp(.66rem,1vw,1rem)/1.12 Arial,sans-serif;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transition: color var(--ui-speed), text-shadow var(--ui-speed);
}
#game > #header .nav-link .icon { display: block; width: 1.55em; height: 1.55em; flex: none; }
#game > #header .nav-link::before,
#game > #header .nav-link::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--ui-speed) var(--ui-ease);
}
#game > #header .nav-link::before { inset: 0; background: linear-gradient(0deg,#ffaa2727,transparent 92%); }
#game > #header .nav-link::after {
  inset: auto 4px 0;
  width: auto;
  height: 2px;
  background: var(--ui-amber-line);
  box-shadow: 0 0 9px #ffc047bd;
  transform: none;
}
#game > #header .nav-link.active { color: var(--ui-amber-light); text-shadow: 0 0 10px #ffc04755; }
#game > #header .nav-link.active::before,
#game > #header .nav-link.active::after { opacity: 1; }
.game-wallet {
  align-self: center;
  margin: 0 .5em;
  padding: .5em .62em;
  border: 1px solid #384045;
  border-radius: 8px;
  color: #7df180;
  background: #0a0e10;
  font: 800 clamp(.79rem,1.5vw,1.65rem)/1 Arial,sans-serif;
  white-space: nowrap;
}
#header .game-nav-action {
  display: grid;
  place-items: center;
  align-self: center;
  width: clamp(34px,3.5vw,56px);
  height: clamp(34px,3.5vw,48px);
  flex: none;
  transition: color var(--ui-speed);
}
#game > #display-controls { display: none; }
.cm-hero-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cm-hero-title .cm-notifications { display: grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0; }
@media (max-width: 1000px), (max-height: 550px) and (orientation: landscape) {
  #game { --game-nav-height: calc(42px + env(safe-area-inset-top)); }
  #game > #header .brand { width: auto; padding: 0 clamp(6px,1vw,12px); gap: 6px; }
  #game > #header .brand-emblem { width: clamp(22px,3.2vw,30px); height: 32px; }
  #game > #header .brand-type { display: flex; gap: 2px; white-space: nowrap; }
  #game > #header .brand-kicker { font-size: 7px; letter-spacing: 1.3px; }
  #game > #header .brand-type strong { font-size: clamp(18px,2.6vw,24px); letter-spacing: 1.5px; }
  #game > #header .brand-type small { margin: 0; font-size: 5px; letter-spacing: 1.35px; }
  #game > #header .nav-link { flex: 1 1 auto; flex-direction: row; font-size: clamp(.62rem,1.25vw,.8rem); }
  #game > #header .nav-link .icon { width: 1.05em; height: 1.05em; }
  .game-wallet { margin-inline: .26em; padding-inline: .42em; }
  #game { --ui-depth: inset 0 1px #ffffff0c, 0 2px 5px #0005; }
}
@media (max-width: 710px) {
  #game > #header .nav-link .icon { display: none; }
}

:is(#game :is(.primary,.garage-gold,.cm-gold,.trade-accent),.trade-dialog .trade-dialog-primary),
#game :is(.garage-tabs,.race-tabs,.cm-hero nav,.trade-hero nav) button:is(.active,[aria-pressed=true]) {
  background: var(--ui-primary);
  border-color: #ffd269;
  color: #1c160b;
  box-shadow: inset 0 1px #fff4c88c, inset 0 -1px #a9612d65, 0 0 13px var(--ui-neon), 0 3px 8px #0006;
  transition: box-shadow var(--ui-speed) var(--ui-ease), filter var(--ui-speed), transform 110ms var(--ui-ease);
}
:is(#game :is(.primary,.garage-gold,.cm-gold,.trade-accent),.trade-dialog .trade-dialog-primary):is(:disabled,[aria-disabled=true]) {
  filter: saturate(.38);
  opacity: .68;
  box-shadow: inset 0 1px #ffffff24;
}
@media (hover: hover) and (pointer: fine) {
  #game > #header :is(.nav-link,.game-nav-action):hover { color: var(--ui-amber-light); }
  :is(#game :is(.primary,.garage-gold,.cm-gold,.trade-accent),.trade-dialog .trade-dialog-primary):not(:disabled,[aria-disabled=true]):hover {
    filter: brightness(1.08);
    box-shadow: inset 0 1px #fff6d6ac, 0 0 19px #f5ab3866, 0 4px 10px #0007;
    transform: none;
  }
}
:is(#game :is(.primary,.garage-gold,.cm-gold,.trade-accent),.trade-dialog .trade-dialog-primary):not(:disabled,[aria-disabled=true]):active {
  filter: brightness(.93);
  transform: scale(.98);
}
#game :is(.main-nav,.game-nav-action,.primary,.garage-gold,.cm-gold,.trade-accent,.trade-dialog-primary):focus-visible,
#game > #header a:focus-visible { outline: 2px solid var(--ui-amber-light); outline-offset: -3px; }

#game :is(.cm-card,.trade-card,.race-tracks>button,.race-modes>button,.rm-modes>button,.garage-list>button,.garage-actions>button) {
  --ui-card-outline: var(--ui-steel);
  border-color: var(--ui-card-outline);
  box-shadow: var(--ui-depth);
  transition: border-color var(--ui-speed), box-shadow var(--ui-speed), background-color var(--ui-speed);
}
#game :is(.cm-card,.trade-card,.race-tracks>button,.race-modes>button,.rm-modes>button,.garage-list>button,.garage-actions>button):is(.active,.selected,[aria-pressed=true],[aria-selected=true]) {
  --ui-card-outline: var(--ui-amber-line);
  box-shadow: inset 0 0 12px #ffc04a1a, 0 0 11px var(--ui-neon);
}
@media (hover: hover) and (pointer: fine) {
  #game :is(.cm-card,.trade-card,.race-tracks>button,.race-modes>button,.rm-modes>button,.garage-list>button,.garage-actions>button):not(.active,.selected,[aria-pressed=true],[aria-selected=true]):hover {
    --ui-card-outline: #e4a94a91;
    box-shadow: inset 0 1px #ffffff17, 0 4px 11px #0009;
  }
}
#game :is(.cm-filters,.cm-detail,.trade-filters,.trade-detail,.garage-specs,.garage-work,.garage-dialog,.trade-dialog,.cm-modal) {
  box-shadow: var(--ui-depth);
}
#game :is(.garage-work-row,.cm-filters input,.trade-filters input,.trade-toolbar input) {
  transition: background-color var(--ui-speed), border-color var(--ui-speed);
}
#game .garage-work-row:focus-within { background: #ffbc4311; }

@keyframes game-card-in { from { opacity: .6; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
body:not(.no-motion) #game :is(.cm-cards>.cm-card,.trade-list>.trade-card,.race-tracks>button,.garage-list>button) {
  animation: game-card-in 210ms var(--ui-ease);
}
dialog.trade-dialog {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity var(--ui-speed) var(--ui-ease), transform var(--ui-speed) var(--ui-ease),
    display var(--ui-speed) allow-discrete, overlay var(--ui-speed) allow-discrete;
}
dialog.trade-dialog[open] { opacity: 1; transform: none; }
dialog.trade-dialog::backdrop {
  background: #080a0c00;
  transition: background-color var(--ui-speed), display var(--ui-speed) allow-discrete, overlay var(--ui-speed) allow-discrete;
}
dialog.trade-dialog[open]::backdrop { background: #080a0cc7; }
@starting-style {
  dialog.trade-dialog[open] { opacity: 0; transform: translateY(7px); }
  dialog.trade-dialog[open]::backdrop { background: #080a0c00; }
}
dialog.trade-dialog:not([open]) { pointer-events: none; }
body.no-motion :is(#game :is(.nav-link,button,.cm-card,.trade-card),dialog.trade-dialog),
body.no-motion #header .nav-link::before,
body.no-motion #header .nav-link::after,
body.no-motion dialog.trade-dialog::backdrop { transition-duration: 0s; }
@media (prefers-reduced-motion: reduce) {
  :is(#game :is(.nav-link,button,.cm-card,.trade-card),dialog.trade-dialog),
  #header .nav-link::before, #header .nav-link::after,
  dialog.trade-dialog::backdrop { transition-duration: 0s; }
  body:not(.no-motion) #game :is(.cm-cards>.cm-card,.trade-list>.trade-card,.race-tracks>button,.garage-list>button) { animation: none; }
}
/* These drawers are mounted in the game sections and revealed by their existing controls. */
@media (max-width: 1000px), (max-height: 550px) and (orientation: landscape) {
  body:not(.no-motion) :is(.cm-filters-open .cm-filters,.cm-detail-open .cm-detail,
    .trade-filter-open .trade-filters,.trade-detail-open .trade-detail,
    .garage-room[data-drawer=list] .garage-list,.garage-room[data-drawer=specs] .garage-specs) {
    animation: game-card-in 210ms var(--ui-ease);
  }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.no-motion) :is(.cm-filters-open .cm-filters,.cm-detail-open .cm-detail,
    .trade-filter-open .trade-filters,.trade-detail-open .trade-detail,
    .garage-room[data-drawer=list] .garage-list,.garage-room[data-drawer=specs] .garage-specs) {
    animation: none;
  }
}

@media(pointer:fine){#game.game{max-width:1440px}}
.panel-online{margin-inline-start:.55rem;color:#83e4a5;font-size:.8em;letter-spacing:0}

@media (orientation: landscape) and (pointer: coarse) {
  #game:not(.inspecting) > #header {
    container: game-header / inline-size;
    gap: 4px;
    padding: 0 4px;
  }
  #game > #header .brand {
    gap: 5px;
    padding: 0 8px 0 3px;
  }
  #game > #header .main-nav {
    gap: 3px;
  }
  #game > #header .nav-link {
    position: relative;
    flex: 1 1 0;
    flex-direction: column;
    gap: 3px;
    padding: 3px 4px;
    white-space: normal;
    text-align: center;
    font-size: clamp(10px, 1.35vw, 13px);
    line-height: 1.08;
  }
  #game > #header .nav-link .icon {
    display: block;
    width: 15px;
    height: 15px;
  }
  #game > #header .game-wallet {
    flex: none;
    margin: 0;
    padding: 6px;
  }
  #game > #header .game-nav-action {
    width: 40px;
    height: 44px;
  }
  @container game-header (max-width: 680px) {
    #game > #header .brand {
      padding-inline: 4px;
    }
    #game > #header .brand-type {
      display: none;
    }
    #game > #header .game-nav-action {
      width: 36px;
    }
  }
}