:root {
  color-scheme: dark;
  --ff-accent: #f1b52e;
  --ff-green: #59d787;
  --ff-red: #ff6666;
  --ff-panel: rgba(18, 23, 28, .88);
  --ff-line: rgba(255,255,255,.13);
  --ff-text: #f6f7f8;
  --ff-muted: #aab2b9;
  --ff-font-text: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --ff-font-display: "Bahnschrift", "DIN Alternate", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  background: #2c3338;
  color: var(--ff-text);
  font-family: var(--ff-font-text);
  font-variant-numeric: tabular-nums;
}
button, input { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: 0; }

#hud {
  position: fixed;
  z-index: 30;
  top: 84px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;
}

.order-card {
  width: min(390px, calc(100vw - 36px));
  overflow: hidden;
  border: 1px solid var(--ff-line);
  border-radius: 18px;
  background: rgba(17, 22, 27, .78);
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
  backdrop-filter: blur(16px) saturate(135%);
}
.order-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 13px 9px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.order-head div { display: flex; align-items: baseline; gap: 7px; }
.order-head small { color: var(--ff-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; }
.order-head strong { font-size: .96rem; }
#warehouseName {
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #d5d8db;
  font-size: .75rem;
}
#missionList { list-style: none; margin: 0; padding: 6px; display: grid; gap: 3px; }
#missionList li {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 5px 7px;
  border-radius: 11px;
  transition: background 160ms ease, opacity 160ms ease;
}
#missionList li[data-state="carried"] { background: rgba(241,181,46,.12); }
#missionList li[data-state="loaded"] { opacity: .48; }
.mission-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  color: #d9dde0;
  font-size: .74rem;
  font-weight: 800;
}
#missionList li[data-state="carried"] .mission-mark { background: rgba(241,181,46,.18); color: #ffd56e; }
#missionList li[data-state="loaded"] .mission-mark { background: rgba(89,215,135,.18); color: #7cf0a6; }
#missionList li > span:last-child { min-width: 0; display: grid; gap: 1px; }
#missionList strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
#missionList small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ff-muted); font-size: .66rem; }
#scannerHint {
  margin: 0 8px 8px;
  padding: 8px 9px;
  border: 1px solid rgba(78,171,255,.22);
  border-radius: 10px;
  background: rgba(43,126,197,.11);
  color: #b9dcfa;
  font-size: .71rem;
  line-height: 1.35;
}

.hud-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(82px, auto));
  gap: 6px;
}
.hud-stats > div {
  min-width: 88px;
  padding: 8px 11px;
  border: 1px solid var(--ff-line);
  border-radius: 13px;
  background: rgba(17,22,27,.76);
  box-shadow: 0 12px 34px rgba(0,0,0,.12);
  backdrop-filter: blur(15px);
}
.hud-stats small, .hud-stats b { display: block; }
.hud-stats small { color: var(--ff-muted); font-size: .63rem; text-transform: uppercase; letter-spacing: .08em; }
.hud-stats b { margin-top: 2px; font-size: .92rem; }

#vehicleHud {
  position: fixed;
  z-index: 32;
  left: 18px;
  bottom: 20px;
  width: min(350px, calc(100vw - 36px));
  display: grid;
  gap: 7px;
  pointer-events: none;
}
.fork-meter, .stability {
  display: grid;
  grid-template-columns: 92px 1fr 50px;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--ff-line);
  border-radius: 12px;
  background: rgba(17,22,27,.76);
  backdrop-filter: blur(14px);
  font-size: .69rem;
}
.fork-meter > div, .stability > div { height: 6px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.10); }
.fork-meter i, .stability i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ff-accent); transition: width 90ms linear, background 160ms ease; }
.stability[data-state="good"] i { background: var(--ff-green); }
.stability[data-state="warn"] i { background: var(--ff-accent); }
.stability[data-state="danger"] i { background: var(--ff-red); }
.fork-meter > b, .stability > b { text-align: right; font-size: .7rem; }

#contextPrompt {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(520px, calc(100vw - 40px));
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 14px;
  background: rgba(14,18,22,.88);
  box-shadow: 0 14px 50px rgba(0,0,0,.24);
  backdrop-filter: blur(16px);
  pointer-events: none;
  font-size: .82rem;
}
kbd {
  display: inline-grid;
  place-items: center;
  min-width: 29px;
  min-height: 27px;
  padding: 2px 7px;
  border: 1px solid rgba(255,255,255,.18);
  border-bottom-width: 2px;
  border-radius: 7px;
  background: rgba(255,255,255,.08);
  font: 750 .7rem/1 system-ui, sans-serif;
}

#toast {
  position: fixed;
  z-index: 80;
  left: 50%;
  top: 82px;
  transform: translate(-50%, -9px);
  max-width: min(520px, calc(100vw - 30px));
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(18,23,28,.92);
  box-shadow: 0 14px 50px rgba(0,0,0,.24);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  font-size: .78rem;
}
#toast[data-visible="1"] { opacity: 1; transform: translate(-50%, 0); }
#toast[data-tone="good"] { border-color: rgba(89,215,135,.42); color: #a9f2c2; }
#toast[data-tone="bad"] { border-color: rgba(255,102,102,.42); color: #ffc0c0; }

#cinematicBanner {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.17), transparent 70%);
}
#cinematicBanner small, #cinematicBanner strong { display: block; text-shadow: 0 5px 25px #000; }
#cinematicBanner small { color: #d7dce0; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; }
#cinematicBanner strong { margin-top: 3px; color: #ffe084; font-size: clamp(2rem, 8vw, 5rem); letter-spacing: -.045em; }

#tutorialCard {
  position: fixed;
  z-index: 75;
  left: 50%;
  bottom: 88px;
  width: min(460px, calc(100vw - 28px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(241,181,46,.42);
  border-radius: 16px;
  background: rgba(18,23,28,.94);
  box-shadow: 0 22px 70px rgba(0,0,0,.3);
  backdrop-filter: blur(18px);
}
#tutorialCard div { display: grid; gap: 2px; }
#tutorialCard b { font-size: .84rem; }
#tutorialCard span { color: #adb4bb; font-size: .73rem; line-height: 1.35; }
#tutorialSkip { width: 31px; height: 31px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #c9ced2; cursor: pointer; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(5,8,11,.64);
  backdrop-filter: blur(13px) saturate(125%);
}
.panel {
  width: min(560px, 100%);
  max-height: min(850px, calc(100vh - 44px));
  overflow: auto;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background: rgba(22,27,32,.97);
  box-shadow: 0 30px 100px rgba(0,0,0,.42);
}
.panel.wide { width: min(920px, 100%); }
.panel h1, .panel h2, .panel h3, .panel p { margin-top: 0; }
.panel h1 { margin-bottom: 9px; font-size: clamp(2rem, 6vw, 3.6rem); line-height: .98; letter-spacing: -.055em; }
.panel h2 { margin-bottom: 10px; font-size: clamp(1.55rem, 4vw, 2.2rem); letter-spacing: -.035em; }
.eyebrow { margin: 0 0 6px !important; color: var(--ff-accent); font-size: .7rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.lead { color: #c1c6cb; line-height: 1.55; }
.fineprint { margin: 14px 0 0 !important; color: #7f8890; font-size: .75rem; line-height: 1.45; }
.hero-panel { overflow: hidden; }
.start-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 20px 0; color: #858e96; font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.start-flow span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #d9dde0; background: rgba(255,255,255,.04); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.actions button, .shop-item button {
  min-height: 43px;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  cursor: pointer;
  font-weight: 720;
  transition: transform 130ms ease, background 130ms ease, border-color 130ms ease;
}
.actions button:hover:not(:disabled), .shop-item button:hover:not(:disabled) { transform: translateY(-1px); background: rgba(255,255,255,.1); }
.actions .primary, .shop-item button:not(:disabled) { border-color: rgba(241,181,46,.5); background: #d99419; color: #151718; }
.actions .ghost { color: #d8dde1; }
.actions .danger { color: #d39292; }
button:disabled { cursor: not-allowed; opacity: .42; }
button:focus-visible { outline: 3px solid #6db5ff; outline-offset: 2px; }

.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.wallet { flex: 0 0 auto; padding: 8px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; color: #9fa7ae; font-size: .75rem; }
.wallet b { color: #fff; }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 12px; }
.shop-category { display: grid; gap: 7px; align-content: start; }
.shop-category h3 { margin: 4px 2px 2px; color: #9fa6ad; font-size: .7rem; letter-spacing: .11em; text-transform: uppercase; }
.shop-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 12px; padding: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(255,255,255,.035); }
.shop-item.locked { opacity: .52; }
.shop-name { display: flex; justify-content: space-between; gap: 8px; }
.shop-name strong { font-size: .9rem; }
.shop-name span { color: #89929a; font-size: .68rem; }
.shop-item p { grid-column: 1; margin: 0; color: #8f979e; font-size: .72rem; line-height: 1.35; }
.shop-item button { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-width: 92px; min-height: 37px; padding-inline: 10px; font-size: .72rem; }

.result-panel { width: min(620px, 100%); }
.result-medal { display: grid; justify-items: center; margin: 14px 0; padding: 14px; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; background: rgba(255,255,255,.04); }
.result-medal small { color: #8f979e; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.result-medal strong { margin: 2px 0; font-size: 1.75rem; }
.result-medal span { color: #9ca4ab; font-size: .72rem; }
.result-medal[data-medal="platinum"] { border-color: rgba(174,225,255,.5); background: rgba(174,225,255,.07); }
.result-medal[data-medal="gold"] { border-color: rgba(255,209,75,.48); background: rgba(255,209,75,.06); }
.result-medal[data-medal="silver"] { border-color: rgba(207,215,222,.4); }
.result-medal[data-medal="bronze"] { border-color: rgba(202,136,78,.42); }
.result-stats { display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; margin: 0; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.035); }
.result-stats dt { color: #929aa1; font-size: .77rem; }
.result-stats dd { margin: 0; font-weight: 700; font-size: .78rem; }
.payout { list-style: none; margin: 10px 0 0; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; }
.payout li { display: flex; justify-content: space-between; gap: 15px; padding: 7px 11px; border-bottom: 1px solid rgba(255,255,255,.06); color: #969ea5; font-size: .74rem; }
.payout li:last-child { border-bottom: 0; }
.payout b { color: #e5e8ea; }
.payout .total { padding-block: 10px; background: rgba(89,215,135,.06); color: #b8dfc5; font-weight: 800; }
.payout .total b { color: #7ee9a5; }

.noscript { position: fixed; z-index: 2000; inset: 20px; padding: 20px; background: #111; }

@media (max-width: 720px) {
  #hud { top: 12px; left: 10px; right: 10px; gap: 8px; }
  .order-card { width: min(330px, calc(100vw - 20px)); }
  .hud-stats { display: none; }
  #vehicleHud { left: 10px; bottom: 82px; width: min(320px, calc(100vw - 20px)); }
  #contextPrompt { bottom: 88px; }
  #tutorialCard { bottom: 144px; }
  #toast { top: 14px; }
  .overlay { padding: 10px; align-items: end; }
  .panel { max-height: calc(100vh - 20px); padding: 19px 16px; border-radius: 20px 20px 12px 12px; }
  .shop-grid { grid-template-columns: 1fr; }
  .actions { flex-direction: column; }
  .actions button { width: 100%; }
}

@media (max-width: 430px) {
  .order-card { width: calc(100vw - 20px); }
  #missionList li { min-height: 37px; }
  #missionList small { display: none; }
  .fork-meter, .stability { grid-template-columns: 78px 1fr 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* Schrift: Hallenbeschilderung (Bahnschrift/DIN) fuer Zahlen, Titel, Labels; Fliesstext bleibt Systemschrift */
.order-head strong, .order-head small, .hud-stats b, .hud-stats small, #missionList strong,
.fork-meter > span, .stability > span, .fork-meter > b, .stability > b,
#cinematicBanner, .panel h1, .panel h2, .eyebrow, .result-medal strong, .start-flow,
#contextPrompt kbd, #tutorialKey, .wallet b { font-family: var(--ff-font-display); }
.hud-stats b { font-size: 1.12rem; letter-spacing: .01em; }
.hud-stats small, .order-head small { font-size: .72rem; }
.order-head strong { font-size: 1.05rem; }
#missionList strong { font-size: .9rem; }
#missionList small { font-size: .76rem; }
#warehouseName { font-size: .82rem; }
.fork-meter > span, .stability > span, .fork-meter > b, .stability > b { font-size: .8rem; }
.order-card { width: min(330px, calc(100vw - 36px)); }
.mission-chip { display: inline-block; width: .62em; height: .62em; margin-right: .45em; border-radius: 2px; vertical-align: baseline; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
#missionList li[data-state="rack"] { background: rgba(255,255,255,.04); }
.panel h1, .panel h2, #cinematicBanner strong { letter-spacing: -.01em; }
.ff-meta-head h2 { font-family: var(--ff-font-display); letter-spacing: -.01em; }

/* Zielkarte, Gabel-Assistent, Sollzeit, Kombo */
#objective {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "step side" "title side" "detail detail";
  gap: 1px 10px;
  margin: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(241,181,46,.35);
  border-radius: 12px;
  background: rgba(241,181,46,.10);
}
#objective[data-tone="dock"] { border-color: rgba(89,215,135,.40); background: rgba(89,215,135,.10); }
#objective[data-tone="home"] { border-color: rgba(255,102,102,.40); background: rgba(255,102,102,.10); }
#objStep { grid-area: step; color: var(--ff-accent); font: 700 .7rem var(--ff-font-display); letter-spacing: .12em; text-transform: uppercase; }
#objective[data-tone="dock"] #objStep { color: var(--ff-green); }
#objective[data-tone="home"] #objStep { color: var(--ff-red); }
#objTitle { grid-area: title; font: 700 1.02rem var(--ff-font-display); }
#objDetail { grid-area: detail; color: var(--ff-muted); font-size: .76rem; line-height: 1.35; }
#objSide { grid-area: side; display: grid; justify-items: center; align-self: center; gap: 1px; }
#objArrow { width: 38px; height: 38px; fill: var(--ff-accent); stroke: rgba(0,0,0,.45); stroke-width: 1; transition: transform 90ms linear; }
#objective[data-tone="dock"] #objArrow { fill: var(--ff-green); }
#objective[data-tone="home"] #objArrow { fill: var(--ff-red); }
#objDistance { font: 700 1.05rem var(--ff-font-display); }

.fork-assist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fork-assist > div {
  padding: 6px 9px;
  border: 1px solid var(--ff-line);
  border-radius: 11px;
  background: rgba(17,22,27,.80);
  backdrop-filter: blur(14px);
}
.fork-assist small { display: block; color: var(--ff-muted); font: 600 .68rem var(--ff-font-display); letter-spacing: .08em; text-transform: uppercase; }
.fork-assist b { display: block; margin-top: 1px; font: 700 .95rem var(--ff-font-display); color: #ffd56e; white-space: nowrap; }
.fork-assist > div[data-ok="true"] { border-color: rgba(89,215,135,.55); }
.fork-assist > div[data-ok="true"] b { color: var(--ff-green); }

#hudPar { color: var(--ff-muted); font-style: normal; font-weight: 600; font-size: .8em; }
#hudTimeBox[data-state="warn"] #hudTime { color: #ffd56e; }
#hudTimeBox[data-state="over"] #hudTime { color: var(--ff-red); }
.hud-stats .combo { grid-column: 1 / -1; border-color: rgba(241,181,46,.5); }
.hud-stats .combo b { color: var(--ff-accent); }

.how-to { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px; counter-reset: step; }
.how-to li { display: grid; grid-template-columns: 2.1rem 1fr; grid-template-rows: auto auto; column-gap: 12px; counter-increment: step; }
.how-to li::before { content: counter(step); grid-row: 1 / span 2; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--ff-accent); color: #1c1a12; font: 800 1rem var(--ff-font-display); }
.how-to b { font: 700 1.02rem var(--ff-font-display); letter-spacing: .02em; }
.how-to span { color: #b9c0c6; font-size: .86rem; line-height: 1.4; }
.how-to kbd { min-height: 0; padding: 0 5px; font-size: .75rem; }

.rush-tag {
  margin-left: .5em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--ff-red);
  color: #1c0d0d;
  font: 800 .7rem var(--ff-font-display);
  font-style: normal;
  letter-spacing: .06em;
  vertical-align: 1px;
}
.rush-tag[data-state="urgent"] { animation: rushPulse 0.7s ease-in-out infinite alternate; }
.rush-tag[data-state="missed"] { background: #4a3f3f; color: #c9bcbc; }
@keyframes rushPulse { to { filter: brightness(1.45); } }
@media (prefers-reduced-motion: reduce) { .rush-tag[data-state="urgent"] { animation: none; } }