@font-face {
  font-family: "POR UI";
  src: url("../assets/fonts/PixelOperator.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-10FF, U+2000-2FFF, U+E000-F8FF;
}

@font-face {
  font-family: "POR UI";
  src: url("../assets/fonts/PixelOperator-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-10FF, U+2000-2FFF, U+E000-F8FF;
}

@font-face {
  font-family: "POR UI";
  src: url("../assets/fonts/DungGeunMo.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7AF;
}

@font-face {
  font-family: "POR UI";
  src: url("../assets/fonts/DungGeunMo.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7AF;
}

* {
  box-sizing: border-box;
  font-family: "POR UI", "Malgun Gothic", sans-serif;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background: #11141a;
  color: #000;
  font-family: "POR UI", "Malgun Gothic", sans-serif;
}

.game-shell {
  min-height: 100vh;
}

.game-area {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background-color: #050505;
  background-image: url("../assets/images/backgrounds/main_garage.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  image-rendering: pixelated;
}

.game-area button,
.game-area button:focus,
.game-area button:focus-visible {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.time-lighting {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transition: background var(--time-lighting-step-duration, 10s) linear, opacity 1.8s ease;
  contain: strict;
  isolation: isolate;
}

.time-lighting::before,
.time-lighting::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  transition: background 1.8s ease, opacity 1.8s ease;
}

.time-lighting[data-phase="dawn"] {
  background: linear-gradient(180deg, rgba(76, 94, 139, .32), rgba(220, 137, 102, .14) 43%, rgba(32, 40, 67, .2));
  box-shadow: inset 0 0 150px rgba(25, 32, 62, .42);
}
.time-lighting[data-phase="dawn"]::before {
  background: radial-gradient(ellipse at 30% 11%, rgba(255, 190, 139, .34), transparent 24%), radial-gradient(ellipse at 73% 12%, rgba(181, 196, 255, .22), transparent 25%);
}
.time-lighting[data-phase="dawn"]::after {
  background: linear-gradient(112deg, transparent 17%, rgba(255, 199, 147, .13) 27%, transparent 40%);
}

.time-lighting[data-phase="morning"] {
  background: linear-gradient(180deg, rgba(255, 222, 161, .12), transparent 50%, rgba(255, 196, 105, .07));
  box-shadow: inset 0 0 90px rgba(255, 211, 137, .13);
}
.time-lighting[data-phase="morning"]::before {
  background: radial-gradient(ellipse at 25% 8%, rgba(255, 247, 207, .42), transparent 28%), radial-gradient(ellipse at 75% 10%, rgba(255, 240, 195, .28), transparent 24%);
}
.time-lighting[data-phase="morning"]::after {
  background: linear-gradient(108deg, transparent 12%, rgba(255, 240, 184, .16) 26%, transparent 43%);
}

.time-lighting[data-phase="afternoon"] {
  background: linear-gradient(180deg, rgba(255, 244, 213, .035), transparent 60%, rgba(255, 210, 141, .035));
}
.time-lighting[data-phase="afternoon"]::before {
  background: radial-gradient(ellipse at 50% 5%, rgba(255, 252, 224, .18), transparent 38%);
}

.time-lighting[data-phase="evening"] {
  background: linear-gradient(180deg, rgba(181, 83, 81, .23), rgba(238, 139, 74, .15) 38%, rgba(63, 42, 69, .28));
  box-shadow: inset 0 0 135px rgba(54, 29, 55, .38);
}
.time-lighting[data-phase="evening"]::before {
  background: radial-gradient(ellipse at 76% 13%, rgba(255, 151, 73, .42), transparent 29%), radial-gradient(ellipse at 25% 12%, rgba(217, 113, 99, .25), transparent 25%);
}
.time-lighting[data-phase="evening"]::after {
  background: linear-gradient(250deg, transparent 15%, rgba(255, 139, 65, .16) 28%, transparent 43%);
}

.time-lighting[data-phase="night"] {
  background: linear-gradient(180deg, rgba(21, 39, 83, .46), rgba(16, 25, 53, .39) 58%, rgba(5, 11, 29, .52));
  box-shadow: inset 0 0 180px rgba(0, 7, 25, .58);
}
.time-lighting[data-phase="night"]::before {
  background: radial-gradient(circle at 8% 25%, rgba(255, 205, 112, .25), transparent 9%), radial-gradient(circle at 92% 25%, rgba(255, 205, 112, .25), transparent 9%), radial-gradient(ellipse at 50% 35%, rgba(255, 194, 94, .12), transparent 24%);
}
.time-lighting[data-phase="night"]::after {
  background: radial-gradient(circle at 74% 8%, rgba(177, 205, 255, .18), transparent 18%);
}

.time-lighting[data-phase="late-night"] {
  background: linear-gradient(180deg, rgba(8, 18, 48, .58), rgba(7, 13, 34, .54) 55%, rgba(2, 6, 18, .66));
  box-shadow: inset 0 0 220px rgba(0, 3, 16, .76);
}
.time-lighting[data-phase="late-night"]::before {
  background: radial-gradient(circle at 8% 25%, rgba(255, 187, 82, .2), transparent 8%), radial-gradient(circle at 92% 25%, rgba(255, 187, 82, .2), transparent 8%);
}
.time-lighting[data-phase="late-night"]::after {
  background: radial-gradient(ellipse at 70% 5%, rgba(126, 161, 226, .14), transparent 22%);
}

/* 큰 inset shadow는 전체 화면 재합성을 유발하므로 색상 그라데이션만 사용한다. */
.time-lighting[data-phase] {
  box-shadow: none;
}

.time-lighting.is-underground { opacity: 0; }

.game-clock {
  position: fixed;
  z-index: 30;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: clamp(220px, 19vw, 270px);
  height: calc(clamp(220px, 19vw, 270px) * .6656);
  aspect-ratio: 604 / 402;
  box-sizing: border-box;
  padding: 0;
  color: #f4ead2;
  background: url("../assets/images/ui/information.png") center / 100% 100% no-repeat;
  filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, .35));
  overflow: hidden;
}
.game-clock::before,
.game-clock::after {
  display: none;
}
.game-clock-row {
  display: grid;
  position: absolute;
  top: 30%;
  left: 15%;
  width: 67%;
  height: 30%;
  align-items: center;
  grid-template-columns: 70.5% 29.5%;
}
.game-period { display: none; }
.game-time { justify-self: center; transform: translateY(-6px); color: #283027; font-size: clamp(30px, 2.8vw, 39px); font-weight: 800; letter-spacing: .02em; line-height: 1; text-shadow: 1px 1px 0 rgba(227, 237, 204, .5); }

.fatigue-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: calc(62.7% - 9px);
  left: calc(15% + 3px);
  width: 66.4%;
  height: 9.7%;
  justify-content: center;
  gap: 1px;
  padding: 0 4px;
  box-sizing: border-box;
}
.fatigue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 0;
  font-size: clamp(6px, .5vw, 7px);
  line-height: 1;
  font-weight: 700;
}
.fatigue-label { color: #2f392d; letter-spacing: .05em; }
.fatigue-text {
  color: #2d5c3b;
  font-size: clamp(5px, .45vw, 6px);
  letter-spacing: .02em;
  transition: color .3s ease;
}
.fatigue-bar-track {
  width: 100%;
  height: clamp(3px, .3vw, 4px);
  box-sizing: border-box;
  background: #4f5a4c;
  border: 1px solid #2c352a;
  border-radius: 0;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6);
}
.fatigue-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 0;
  transition: width .3s ease, background-color .3s ease;
  background-color: #4ade80;
}
.fatigue-bar-fill[data-level="caution"] { background-color: #38bdf8; }
.fatigue-bar-fill[data-level="warning"] { background-color: #facc15; }
.fatigue-bar-fill[data-level="heavy"] { background-color: #f97316; }
.fatigue-bar-fill[data-level="critical"] {
  background-color: #ef4444;
  animation: fatigue-pulse 1s infinite alternate;
}
@keyframes fatigue-pulse {
  from { opacity: 0.8; box-shadow: 0 0 2px #ef4444; }
  to { opacity: 1; box-shadow: 0 0 8px #ef4444; }
}

.game-day {
  justify-self: center;
  transform: translate(9px, -2px);
  color: #283027;
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: .06em;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(227, 237, 204, .5);
  white-space: pre-line;
}
.dev-time-forward {
  display: none;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #f8e4b8;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  background: #4c5050;
  border: 2px solid #171a1b;
  border-radius: 0;
  box-shadow: inset -2px -2px 0 #202323, inset 2px 2px 0 #a3aaa7;
  cursor: pointer;
}
.dev-time-forward:hover,
.dev-time-forward:focus-visible { color: #fff; background: #8a7137; outline: 2px solid #f8dfa0; }
.dev-time-forward:active { transform: translate(1px, 1px); }

.bed-interaction {
  position: absolute;
  z-index: 1;
  padding: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.bed-interaction[hidden] { display: none; }
.bed-interaction > img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(7px 10px 5px rgba(0,0,0,.36)); pointer-events: none; }
.bed-interaction.is-active > img { filter: drop-shadow(0 0 5px rgba(255, 235, 175, .9)) drop-shadow(7px 10px 5px rgba(0,0,0,.36)); }
.bed-label { position: absolute; left: 50%; bottom: calc(100% + 8px); padding: 6px 10px; transform: translateX(-50%) translateY(4px); color: #fff; font-weight: 700; white-space: nowrap; background: rgba(8,10,14,.9); border: 1px solid rgba(255,255,255,.2); border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity 120ms ease, transform 120ms ease; }
.bed-interaction:hover .bed-label { opacity: 1; transform: translateX(-50%) translateY(0); }

.sleep-confirm {
  position: fixed;
  z-index: 250;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(4, 6, 12, .72);
  backdrop-filter: blur(3px);
}
.sleep-confirm[hidden] { display: none; }
.outside-menu {
  position: fixed;
  z-index: 240;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(6, 9, 12, .28);
  backdrop-filter: blur(5px);
}
.outside-menu[hidden] { display: none; }
.outside-menu-panel {
  position: relative;
  width: min(92vw, 1080px);
  aspect-ratio: 4 / 3;
  color: #fff;
}
.outside-menu-frame { display: block; width: 100%; height: 100%; object-fit: contain; clip-path: inset(8.5% 2.5% 12.5%); image-rendering: pixelated; }
.outside-choice {
  position: absolute;
  left: 13.5%;
  width: 12.5%;
  aspect-ratio: 1;
  height: auto;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  border: 3px solid transparent;
  border-radius: 3px;
  transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease;
}
.outside-choice-hardware { top: 21%; }
.outside-choice-gokart { top: 40%; }
.outside-choice-job { top: 59%; }
.outside-choice img { display: block; width: 100%; height: calc(100% - 22px); object-fit: cover; image-rendering: pixelated; }
.outside-choice span { display: block; height: 22px; color: #000; font-size: clamp(9px, 1.1vw, 14px); font-weight: 800; line-height: 22px; text-align: center; text-shadow: none; }
.outside-navigation-preview { position: absolute; top: 21%; right: 18%; width: 33%; aspect-ratio: 1; object-fit: cover; image-rendering: pixelated; border: 0; box-shadow: none; }
.outside-navigation-start { position: absolute; right: 18%; top: 70%; width: 33%; height: 6%; padding: 0; color: #93999c; font: inherit; font-size: clamp(9px, 1.1vw, 15px); font-weight: 800; letter-spacing: .14em; cursor: not-allowed; background: #353a3d; border: 3px solid #171a1d; box-shadow: inset 0 0 0 2px #62686b; }
.outside-navigation-start.is-active { color: #eff6df; cursor: pointer; background: #3d7a48; border-color: #173a20; box-shadow: inset 0 0 0 2px #8cc36c; }
.outside-navigation-start:hover,
.outside-navigation-start:focus-visible { color: #fff; background: #596169; outline: 2px solid #fff; }
.outside-navigation-start.is-active:hover,
.outside-navigation-start.is-active:focus-visible { background: #4f985b; }
.outside-choice:hover,
.outside-choice:focus-visible,
.outside-choice.is-selected { z-index: 1; border-color: transparent; filter: brightness(1.12); outline: none; transform: translateY(-4px); }
.outside-menu-status {
  position: absolute;
  right: 0;
  top: 22%;
  bottom: auto;
  left: 0;
  margin: 0;
  color: #000;
  font-size: clamp(12px, 1.4vw, 19px);
  font-weight: 800;
  text-align: center;
  text-shadow: none;
}
.outside-menu-status { display: none; }
.outside-menu-close-hint {
  position: absolute;
  right: 7%;
  bottom: 4%;
  margin: 0;
  padding: 4px 7px;
  color: #fff;
  font-size: clamp(11px, 1.1vw, 15px);
  font-weight: 800;
  background: #000;
}
.sleep-confirm-card { width: min(88vw, 430px); padding: 28px; color: #eee7d8; text-align: center; background: #28231e; border: 3px solid #bd915e; border-radius: 8px; box-shadow: 0 14px 40px rgba(0,0,0,.65), inset 0 0 0 2px #100d0a; }
.sleep-confirm-card h2 { margin: 0 0 12px; color: #fff0c9; font-size: 27px; }
.sleep-confirm-card p { margin: 0 0 22px; color: #cfc3ae; }
.sleep-confirm-card div { display: flex; justify-content: center; gap: 14px; }
.sleep-confirm-card button { min-width: 105px; padding: 10px 18px; color: #fff; font-size: 18px; font-weight: 700; background: #494139; border: 2px solid #9f8d77; border-radius: 4px; cursor: pointer; }
#sleep-yes { background: #665035; border-color: #deb77d; }
.sleep-confirm-card button:hover,
.sleep-confirm-card button:focus-visible { outline: 2px solid #fff1c5; }

.sleep-transition {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f4f0e8;
  background: #000;
  opacity: 0;
  pointer-events: all;
  transition: opacity 1.4s ease-in-out;
}
.sleep-transition[hidden] { display: none; }
.sleep-transition.is-dark { opacity: 1; }
.sleep-day-change {
  margin: 0;
  color: #eee8db;
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: .1em;
  text-shadow: 0 0 14px rgba(255,255,255,.22);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}
.sleep-day-change.is-visible { opacity: 1; transform: translateY(0); }

.main-character {
  position: absolute;
  z-index: 2;
  width: clamp(110px, 14vw, 180px);
  height: clamp(110px, 14vw, 180px);
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  image-rendering: pixelated;
  transform: none;
  transform-origin: center;
  filter: drop-shadow(0 15px 10px rgba(0, 0, 0, 0.35));
}

.main-character.facing-left {
  transform: scaleX(-1);
}

.james-npc {
  position: absolute;
  z-index: 2;
  width: calc(172px * var(--scene-scale, 1));
  height: calc(172px * var(--scene-scale, 1));
  padding: 0;
  transform: translate(-50%, -88%);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.james-npc[hidden] { display: none; }

.james-npc img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 12px 8px rgba(0, 0, 0, .38));
  transition: filter 120ms ease;
}

.james-npc:hover img,
.james-npc:focus-visible img,
.james-npc.is-near img {
  filter: drop-shadow(0 0 7px rgba(255, 175, 79, .72)) drop-shadow(0 12px 8px rgba(0, 0, 0, .38));
}

.james-npc.facing-left {
  transform: translate(-50%, -88%) scaleX(-1);
}

.dialogue-window {
  position: fixed;
  z-index: 95;
  left: 50%;
  bottom: 12px;
  width: min(88vw, 1080px);
  aspect-ratio: 866 / 288;
  transform: translate(-50%, 115%);
  color: #17191b;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .55));
  animation: dialogue-rise 220ms ease-out forwards;
}

.dialogue-window[hidden] { display: none; }
.dialogue-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dialogue-text {
  position: absolute;
  z-index: 2;
  left: 32%;
  top: 23%;
  width: 59%;
  height: 52%;
  margin: 0;
  overflow: hidden;
  font-size: clamp(18px, 2vw, 32px);
  font-weight: 700;
  line-height: 1.55;
  white-space: pre-wrap;
}
.dialogue-portrait { position: absolute; z-index: 2; left: 13%; top: 28.5%; width: 12%; height: 32%; overflow: hidden; }
.dialogue-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.dialogue-speaker { position: absolute; z-index: 2; left: 10.7%; top: 67.5%; width: 16.2%; color: #fff; text-align: center; font-size: clamp(17px, 1.7vw, 27px); font-weight: 800; letter-spacing: .08em; text-shadow: 0 2px 2px rgba(0, 0, 0, .85); }
.dialogue-next-indicator {
  position: absolute;
  z-index: 4;
  right: 8.5%;
  bottom: 24%;
  width: clamp(20px, 2.25vw, 32px);
  height: auto;
  image-rendering: pixelated;
  pointer-events: none;
  opacity: 0;
}
.dialogue-window.is-ready .dialogue-next-indicator {
  animation: dialogue-next-blink 760ms steps(1, end) infinite;
}
.dialogue-skip {
  position: absolute;
  z-index: 5;
  top: calc(81.6% - 1px);
  right: 5.43%;
  bottom: auto;
  box-sizing: border-box;
  width: 112px;
  min-width: 0;
  padding: 7px 11px 6px;
  color: #ead58f;
  font-size: clamp(13px, 1.45vw, 18px);
  font-weight: 700;
  letter-spacing: .08em;
  background: linear-gradient(180deg, #555d5d, #252c2d);
  border: 3px solid #111516;
  box-shadow: inset 0 0 0 2px #8c9691, inset 0 -3px 0 #151a1a, 3px 4px 0 rgba(0,0,0,.42);
  cursor: pointer;
}
.dialogue-skip:hover,
.dialogue-skip:focus-visible {
  color: #fff2c7;
  background: linear-gradient(180deg, #7d704e, #3d3827);
  outline: 2px solid #f1d98b;
}
.dialogue-skip:active { transform: translate(1px, 1px); box-shadow: inset 0 0 0 2px #474f4d; }
.dialogue-advance { position: absolute; z-index: 3; inset: 0; padding: 0; background: transparent; border: 0; cursor: pointer; }
.dialogue-choices { position: absolute; z-index: 5; left: 31.5%; top: 27%; width: 60%; display: grid; gap: 8px; }
.dialogue-choices[hidden] { display: none; }
.dialogue-choice { padding: 9px 14px; color: #f4eee2; font-size: clamp(13px, 1.35vw, 20px); font-weight: 700; text-align: left; background: rgba(25, 28, 29, .9); border: 2px solid #756d61; border-radius: 3px; cursor: pointer; }
.dialogue-choice:hover, .dialogue-choice:focus-visible { color: #fff; background: #3b4143; border-color: #d7c398; }

.story-fade { position: fixed; z-index: 400; inset: 0; pointer-events: none; background: #000; opacity: 0; transition: opacity 1.35s ease; }
.story-fade[hidden] { display: none; }
.story-fade.is-dark { opacity: 1; }

.pause-menu { position: fixed; z-index: 390; inset: 0; display: grid; place-items: center; background: rgba(3, 6, 8, .76); }
.pause-menu[hidden] { display: none; }
.pause-menu-panel { position: relative; width: min(390px, 86vw); box-sizing: border-box; padding: 25px 31px 23px; text-align: center; color: #f3ead8; background: linear-gradient(90deg, transparent 0 9px, rgba(255,255,255,.035) 9px 11px, transparent 11px), linear-gradient(180deg, #4c5555, #242a2b 38%, #121617); border: 4px solid #16191a; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); box-shadow: inset 0 0 0 2px #89918d, inset 0 0 0 5px #343a3a, inset 0 -9px 0 rgba(0,0,0,.28), 7px 8px 0 rgba(0,0,0,.52); }
.pause-menu-panel::before, .pause-menu-panel::after { content: ""; position: absolute; top: 9px; width: 6px; height: 6px; background: #b8a77d; border: 1px solid #302b22; box-shadow: inset 1px 1px 0 #efe2b8; }
.pause-menu-panel::before { left: 10px; }
.pause-menu-panel::after { right: 10px; }
.pause-menu-panel > * { position: relative; z-index: 1; }
.pause-menu-panel small { display: inline-block; padding: 3px 7px; color: #2a251c; letter-spacing: .18em; background: #c3a861; box-shadow: inset 2px 2px 0 #ecd897, inset -2px -2px 0 #806830; }
.pause-menu-panel h2 { margin: 12px 0 22px; color: #fff2d4; font-size: 30px; letter-spacing: .08em; text-shadow: 2px 2px 0 #080909; }
.pause-menu-actions { display: grid; gap: 8px; }
.pause-menu-actions button { padding: 12px 14px; color: #eee5d2; font: inherit; font-weight: 800; letter-spacing: .08em; text-align: left; background: linear-gradient(180deg, #4f5958, #29302f); border: 2px solid #111415; box-shadow: inset 2px 2px 0 #828b85, inset -2px -2px 0 #1a2020, 2px 2px 0 #090b0b; cursor: pointer; }
.pause-menu-actions button::before { content: "▶"; margin-right: 10px; color: #c5a75d; font-size: 11px; }
.pause-menu-actions button:hover, .pause-menu-actions button:focus-visible { color: #fff6dc; background: linear-gradient(180deg, #71817d, #3a4744); outline: 0; box-shadow: inset 2px 2px 0 #c0ccc2, inset -2px -2px 0 #273330, 2px 2px 0 #090b0b; }
#pause-exit { color: #f1d1c8; background: linear-gradient(180deg, #65484a, #3e282c); }
#pause-exit::before { color: #e28e78; }
#pause-menu-status { min-height: 20px; margin: 18px 0 0; color: #bfc9bd; font-size: 13px; letter-spacing: .04em; }

@keyframes dialogue-rise {
  to { transform: translate(-50%, 0); }
}

@keyframes dialogue-next-blink {
  0%, 55% { opacity: 1; transform: translateY(0); }
  56%, 100% { opacity: 0; transform: translateY(2px); }
}

.item-discovery {
  position: fixed;
  z-index: 340;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(3, 5, 7, .6);
  backdrop-filter: blur(2px) brightness(.8);
}
.item-discovery[hidden] { display: none; }
.item-discovery-advance {
  width: min(760px, 94vw);
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.item-discovery-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(155px, 31%) 1fr;
  gap: 24px;
  min-height: 300px;
  padding: 54px 38px 50px;
  overflow: hidden;
  color: #efe7d5;
  background:
    linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.035) 14px 16px, transparent 16px),
    linear-gradient(180deg, #535b5b 0, #303838 13%, #1a2021 55%, #101516 100%);
  border: 6px solid #101314;
  border-radius: 0;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  box-shadow: inset 0 0 0 3px #919998, inset 0 0 0 7px #252c2d, inset 0 -13px 0 rgba(0,0,0,.24), 10px 14px 0 rgba(0,0,0,.46);
  animation: item-discovery-arrive 230ms steps(5, end) both;
}
.item-discovery-panel::before {
  content: "";
  position: absolute;
  top: 20px;
  right: 28px;
  left: 28px;
  height: 2px;
  background: #ad9360;
  box-shadow: 0 2px 0 #111;
}
.item-discovery-kicker {
  position: absolute;
  top: 19px;
  left: 38px;
  z-index: 1;
  padding: 0 9px;
  color: #171913;
  font-size: clamp(12px, 1.6vw, 17px);
  font-weight: 700;
  letter-spacing: .12em;
  background: #c3a65e;
  box-shadow: inset 2px 2px 0 #ead59b, inset -2px -2px 0 #806a35;
}
.item-discovery-bolt {
  position: absolute;
  z-index: 2;
  top: 10px;
  width: 9px;
  height: 9px;
  background: #b7bcaf;
  border: 2px solid #252b2a;
  box-shadow: inset 2px 2px 0 #e8e6d8, inset -2px -2px 0 #4b5451;
}
.item-discovery-bolt-left { left: 11px; }
.item-discovery-bolt-right { right: 11px; }
.item-discovery-image-frame {
  display: grid;
  place-items: center;
  min-height: 182px;
  padding: 16px;
  align-self: center;
  background: linear-gradient(135deg, #101617, #293132);
  border: 4px solid #111516;
  box-shadow: inset 0 0 0 2px #7b8582, inset 0 0 0 6px #252c2c;
}
.item-discovery-image-frame img {
  width: min(100%, 178px);
  max-height: 176px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(5px 7px 0 rgba(0,0,0,.45));
}
.item-discovery-content { min-width: 0; padding-right: 84px; align-self: center; }
.item-discovery-content h2 {
  margin: 0;
  color: #fff2ca;
  font-size: clamp(24px, 3.2vw, 39px);
  line-height: 1.12;
  text-shadow: 3px 3px 0 #101312;
  overflow-wrap: anywhere;
}
.item-discovery-type {
  min-height: 20px;
  margin: 6px 0 12px;
  color: #c9ae75;
  font-size: clamp(13px, 1.7vw, 18px);
}
.item-discovery-evaluation {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 10px;
  color: #b7c3bd;
  font-size: clamp(13px, 1.6vw, 17px);
}
.item-discovery-evaluation span { color: #91aaa2; letter-spacing: .08em; }
.item-discovery-evaluation strong { color: #f2dfaa; font-size: clamp(17px, 2vw, 22px); text-shadow: 2px 2px 0 #111; }
.item-discovery-score-track {
  flex: 1;
  min-width: 70px;
  height: 12px;
  overflow: hidden;
  background: #0b0f10;
  border: 2px solid #121718;
  box-shadow: inset 0 0 0 1px #66716d;
}
.item-discovery-score-fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--rating-color-start, #69736d), var(--rating-color-end, #d6bd76));
  box-shadow: 0 0 8px var(--rating-glow, rgba(226, 197, 112, .55));
  transition: width 320ms steps(8, end);
}
.item-discovery-tier {
  position: absolute;
  top: 50%;
  right: 26px;
  min-width: 58px;
  padding: 3px 8px 4px;
  color: #d8d8d8;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  text-align: center;
  text-shadow: 3px 3px 0 #101312;
  border: 3px solid currentColor;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.56), 3px 4px 0 rgba(0,0,0,.38);
  transform: translateY(-50%);
}
.item-discovery-tier[data-tier="E"] { color: #565b5d; background: #252a2b; }
.item-discovery-tier[data-tier="D"] { color: #bfc5c6; background: #50585a; }
.item-discovery-tier[data-tier="C"] { color: #57c87a; background: #183b26; }
.item-discovery-tier[data-tier="B"] { color: #65a8ff; background: #1b315d; }
.item-discovery-tier[data-tier="A"] { color: #c58dff; background: #452568; }
.item-discovery-tier[data-tier="S"] { color: #f2c45d; background: #634716; }
.item-discovery-tier[data-tier="EX"] { color: #fff2d8; background: linear-gradient(135deg, #8a2323, #b78a2e 54%, #7b2424); }
.item-discovery-tier[data-tier="SSR"] { color: #fff5df; background: linear-gradient(135deg, #9b2929, #e0b85b 48%, #8e2525); }
.item-discovery-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
  padding: 9px;
  background: rgba(5,9,10,.56);
  border: 2px solid #101516;
  box-shadow: inset 0 0 0 1px #596361;
}
.item-discovery-stat { display: flex; justify-content: space-between; gap: 8px; color: #d7d7c9; font-size: clamp(12px, 1.5vw, 16px); }
.item-discovery-stat span { color: #8ca5a0; }
.item-discovery-stat strong { color: #f2dfaa; font-weight: 700; white-space: nowrap; }
.item-discovery-specification {
  margin: 12px 0 0;
  color: #bca777;
  font-size: clamp(12px, 1.45vw, 16px);
  line-height: 1.3;
  letter-spacing: .03em;
}
.item-discovery-specification:empty { display: none; }
.item-discovery-description {
  margin: 5px 0 0;
  color: #e2ddd0;
  font-size: clamp(14px, 1.8vw, 19px);
  line-height: 1.45;
}
.item-discovery-continue {
  position: absolute;
  right: 34px;
  bottom: 16px;
  color: #d9bd79;
  font-size: clamp(11px, 1.4vw, 15px);
  letter-spacing: .08em;
  animation: item-discovery-prompt 800ms steps(1, end) infinite;
}
@keyframes item-discovery-arrive { from { transform: scale(.93); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes item-discovery-prompt { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .25; } }
@media (max-width: 560px) {
  .item-discovery-panel { grid-template-columns: 1fr; gap: 10px; min-height: 0; padding: 52px 28px 48px; }
  .item-discovery-image-frame { min-height: 112px; }
  .item-discovery-image-frame img { max-height: 106px; }
  .item-discovery-kicker { left: 28px; }
  .item-discovery-content { padding-right: 60px; }
  .item-discovery-tier { top: 50%; right: 18px; min-width: 48px; }
  .item-discovery-stats { grid-template-columns: 1fr; }
  .item-discovery-continue { right: 26px; }
}

.scene-portal {
  position: absolute;
  z-index: 1;
  display: block;
  padding: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.scene-portal[hidden] {
  display: none;
}

.scene-portal:focus {
  outline: none;
}

.scene-portal-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

.scene-portal-image[hidden] { display: none; }

.portal-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  padding: 7px 11px;
  transform: translateX(-50%) translateY(4px);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(8, 10, 14, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.scene-portal:hover .portal-label {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.truck-interaction {
  position: absolute;
  z-index: 1;
  padding: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.truck-interaction[hidden] {
  display: none;
}

.truck-interaction:focus {
  outline: none;
}

.truck-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  padding: 7px 11px;
  transform: translateX(-50%) translateY(4px);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(8, 10, 14, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.truck-interaction:hover .truck-label {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.computer-interaction {
  position: absolute;
  z-index: 3;
  padding: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.computer-interaction[hidden] {
  display: none;
}

.computer-interaction:focus {
  outline: none;
}

.computer-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  padding: 7px 11px;
  transform: translateX(-50%) translateY(4px);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(8, 10, 14, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.computer-interaction:hover .computer-label {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.scene-portal:hover,
.scene-portal:focus-visible,
.truck-interaction:hover,
.truck-interaction:focus-visible,
.computer-interaction:hover,
.computer-interaction:focus-visible,
.workbench-interaction:hover,
.workbench-interaction:focus-visible,
.vehicle-frame:hover,
.vehicle-frame:focus-visible {
  z-index: 4;
}

.workbench-interaction {
  position: absolute;
  z-index: 1;
  padding: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.workbench-interaction[hidden] { display: none; }
.workbench-interaction:focus { outline: none; }

.workbench-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  padding: 7px 11px;
  transform: translateX(-50%) translateY(4px);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(8, 10, 14, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.workbench-interaction:hover .workbench-label {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.portal-label,
.truck-label,
.computer-label,
.workbench-label,
.bed-label,
.frame-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  justify-content: center;
  padding: 2px 8px;
  color: #f2f1ed;
  font-size: clamp(12px, .9vw, 15px);
  font-weight: 800;
  letter-spacing: .035em;
  text-shadow: 2px 2px 0 #111;
  background: linear-gradient(180deg, #292927 0%, #121211 49%, #1d1d1b 100%);
  border: 2px solid #0a0a09;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #242421, 0 3px 0 rgba(0, 0, 0, .45);
  image-rendering: pixelated;
}

.frame-label { bottom: calc(100% + 8px); }

.interaction-prompt-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 1px -2px;
  object-fit: contain;
  image-rendering: pixelated;
}

.interaction-prompt-icon--click {
  width: 16px;
  height: 16px;
  margin: 4px 0;
}

.interaction-prompt-separator {
  margin: 0 4px 0 1px;
  color: #77746e;
  font-size: 17px;
  font-weight: 500;
  text-shadow: 1px 1px 0 #000;
}

.shortcut-key-icon {
  width: 34px;
  height: 34px;
  margin: -4px -5px;
  object-fit: contain;
  vertical-align: middle;
  image-rendering: pixelated;
}

.ground-item {
  position: absolute;
  z-index: 1;
  left: 24%;
  top: 68%;
  display: grid;
  width: 70px;
  height: 54px;
  padding: 0;
  place-items: center;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}

.ground-item[hidden] {
  display: none;
}

.delivery-box {
  position: absolute;
  z-index: 2;
  width: calc(112px * var(--scene-scale, 1));
  height: calc(90px * var(--scene-scale, 1));
  padding: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.delivery-box[hidden] { display: none; }

.delivery-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.48));
  transition: transform 120ms ease, filter 120ms ease;
}

.delivery-box:hover img,
.delivery-box:focus-visible img {
  transform: scale(1.06);
  filter: drop-shadow(0 0 9px rgba(255, 221, 113, 0.78));
}

.delivery-box:hover .item-tooltip,
.delivery-box:focus-visible .item-tooltip {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.vehicle-frame {
  position: absolute;
  z-index: 6;
  padding: 0;
  background: transparent;
  border: 0;
  transform: translate(-50%, -72%);
  cursor: pointer;
}
.vehicle-frame[hidden] { display: none; }
.vehicle-frame > img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 9px 5px rgba(0, 0, 0, 0.42)); }
.vehicle-frame.is-rolling-chassis > img { filter: drop-shadow(0 9px 5px rgba(0,0,0,.42)) drop-shadow(0 0 6px rgba(122,198,220,.55)); }
.frame-label { position: absolute; left: 50%; bottom: -8px; padding: 5px 9px; transform: translateX(-50%); color: #fff; white-space: nowrap; background: rgba(10, 13, 14, 0.82); border-radius: 4px; opacity: 0; }
.vehicle-frame:hover .frame-label { opacity: 1; }

.frame-inventory { position: fixed; z-index: 130; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.66); }
.frame-inventory[hidden] { display: none; }
.frame-inventory-panel { position: relative; width: min(1040px, 94vw); height: min(760px, 88vh); box-sizing: border-box; padding: 25px 34px 22px; overflow: hidden; color: #cdeeff; background: linear-gradient(145deg, #414b4f 0%, #20282c 42%, #11171a 100%); border: 9px solid #151a1d; border-radius: 34px; box-shadow: inset 0 0 0 3px #69767a, inset 0 0 0 7px #252d31, inset 0 -14px 24px rgba(0,0,0,.6), 0 24px 70px #000; }
.frame-inventory-panel::before, .frame-inventory-panel::after { content: ""; position: absolute; z-index: 5; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9ba4a5 0 16%, #30383b 22% 55%, #080b0c 60%); box-shadow: 0 695px 0 #20272a; pointer-events: none; }
.frame-inventory-panel::before { left: 17px; }
.frame-inventory-panel::after { right: 17px; }
.frame-inventory-panel > header { display: flex; align-items: center; justify-content: space-between; height: 62px; border-bottom: 2px solid #557074; }
.frame-inventory-panel > header::after { content: "SYSTEM ONLINE"; margin-left: auto; margin-right: 18px; color: #78e6be; font-size: 10px; letter-spacing: .12em; text-shadow: 0 0 8px #38d89d; }
.frame-inventory-panel > header small { color: #65b9dc; letter-spacing: .16em; }
.frame-inventory-panel > header h2 { margin: 3px 0; }
.frame-inventory-panel h2, .frame-inventory-panel h3 { color: #bdeaff; }
.frame-stat-card { margin: 12px 0; padding: 11px 14px; color: #cceeff; background: rgba(4,31,56,.88); border: 1px solid #3980a7; box-shadow: inset 0 0 18px rgba(52,154,211,.12); }
.frame-stat-card strong { display: block; margin-bottom: 7px; color: #7ed8ff; }
.part-stat-list { display: grid; gap: 5px; margin-top: 7px; }
.part-stat-row { display: grid; grid-template-columns: minmax(72px, auto) 1fr auto; align-items: center; gap: 7px; color: #d8d4ca; font-size: 13px; }
.part-stat-track { height: 7px; overflow: hidden; background: #03111d; border: 1px solid #316783; }
.part-stat-fill { display: block; height: 100%; background: linear-gradient(90deg, #247fac, #80dcff); box-shadow: 0 0 7px #56bfe9; }
.part-stat-value { min-width: 45px; color: #fff; text-align: right; }
#frame-inventory-close { width: 40px; height: 40px; color: #9bdfff; font-size: 28px; background: #172429; border: 2px solid #4c7d91; border-radius: 7px; box-shadow: inset 0 0 8px #071014; cursor: pointer; }
.frame-pad-viewport { width: 100%; height: calc(100% - 130px); overflow: hidden; background: #06223c; border: 3px solid #05090b; border-radius: 7px; box-shadow: inset 0 0 0 1px #356b83, inset 0 0 35px rgba(0,9,22,.85), 0 0 12px rgba(58,159,204,.18); }
.frame-pad-pages { display: flex; width: 200%; height: 100%; transition: transform 330ms cubic-bezier(.22,.75,.25,1); }
.frame-pad-pages.is-overview { transform: translateX(-50%); }
.frame-pad-page { flex: 0 0 50%; box-sizing: border-box; padding: 4px 9px; overflow: auto; background-image: linear-gradient(rgba(91,181,224,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(91,181,224,.075) 1px, transparent 1px); background-size: 20px 20px; }
.frame-pad-footer { display: flex; align-items: center; justify-content: center; gap: 20px; height: 38px; color: #86c8c9; }
.frame-pad-footer button { width: 46px; height: 29px; color: #dff; background: #26363a; border: 1px solid #668b8e; cursor: pointer; }
.frame-pad-footer button:disabled { opacity: .3; cursor: default; }
.frame-inventory-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.frame-inventory-columns > section { min-width: 0; }
.frame-part-list { display: grid; align-content: start; gap: 8px; min-height: 220px; padding: 10px; background: rgba(2,20,36,.9); border: 1px solid #397b9c; }
.frame-part-entry { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px; color: #e4f7ff; text-align: left; background: rgba(18,59,83,.86); border: 1px solid #438eb3; }
.frame-part-info { min-width: 0; }
.frame-part-info > strong { display: block; overflow-wrap: anywhere; }
.frame-part-entry img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.frame-part-entry button { padding: 7px 9px; color: #d9f5ff; background: #174767; border: 1px solid #5bb0d5; cursor: pointer; }
.frame-part-empty { color: #aaa; text-align: center; }
#frame-inventory-status { color: #bde19d; text-align: center; }
.frame-overview-page { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; padding: 18px 24px; }
.vehicle-top-schematic { position: relative; min-height: 480px; overflow: hidden; border: 1px solid #4e9bc0; background: rgba(3,29,53,.78); box-shadow: inset 0 0 24px rgba(15,95,137,.25); }
.vehicle-top-schematic::after { content: "TOP VIEW · COMPONENT MAP / SCALE 1:10"; position: absolute; left: 12px; bottom: 8px; color: #4b9dc5; font-size: 11px; letter-spacing: .12em; }
.vehicle-blueprint { position: absolute; inset: 4% 12%; width: 76%; height: 92%; fill: none; stroke: #56b9e2; stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(64,185,235,.38)); opacity: .72; }
.vehicle-blueprint text { fill: #57a9cc; stroke: none; font-size: 13px; letter-spacing: 2px; }
.blueprint-body { fill: rgba(36,130,175,.08); stroke-width: 4; }
.vehicle-top-schematic { --assembly-progress: 0; }
.vehicle-top-schematic .blueprint-body { fill: rgba(36,130,175,calc(.06 + var(--assembly-progress) * .16)); }
.vehicle-top-schematic.is-rolling-chassis .blueprint-body { stroke: #a5e9ff; stroke-width: 5; filter: drop-shadow(0 0 7px #4ab9e5); }
.vehicle-top-schematic.is-rolling-chassis::before { content: "ROLLING CHASSIS COMPLETE"; position: absolute; z-index: 4; top: 10px; right: 12px; padding: 4px 7px; color: #a6ffda; font-size: 11px; letter-spacing: .1em; background: #07314a; border: 1px solid #63d8ba; }
.blueprint-hood, .blueprint-cabin { fill: rgba(33,111,154,.12); stroke-width: 2.5; }
.blueprint-glass { fill: rgba(69,170,212,.13); stroke-dasharray: 6 4; }
.blueprint-tunnel { fill: rgba(66,162,204,.07); stroke-dasharray: 4 5; }
.blueprint-wheels { fill: rgba(33,116,156,.2); stroke-width: 3; }
.blueprint-axles, .blueprint-centerline, .blueprint-dimensions { stroke-dasharray: 7 6; opacity: .7; }
.vehicle-schematic-parts { position: absolute; inset: 0; }
.schematic-part { position: absolute; z-index: 2; width: 70px; transform: translate(-50%, -50%); text-align: center; }
.schematic-part img { width: 54px; height: 54px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 6px #74c2c5); }
.schematic-part span { display: block; padding: 2px 3px; overflow: hidden; color: #d7ffff; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; background: rgba(10,25,27,.9); border: 1px solid #4d7779; }
.schematic-part.is-empty img { opacity: .12; filter: grayscale(1); }
.schematic-part.is-empty span { color: #627779; }
.vehicle-performance-panel { align-self: center; padding: 16px; background: rgba(3,31,53,.94); border: 1px solid #4a9cc2; box-shadow: inset 0 0 22px rgba(50,145,190,.15); }
.vehicle-score { display: grid; grid-template-columns: 1fr auto auto; align-items: end; padding-bottom: 12px; border-bottom: 1px solid #52787b; }
.vehicle-score strong { color: #8ee4c0; font-size: 48px; line-height: .9; }
.vehicle-score small { color: #78989a; }
.vehicle-performance-stats { display: grid; gap: 10px; margin-top: 14px; }
.vehicle-assembly-complete { width: 100%; margin-top: 18px; padding: 12px; color: #dff; font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: .12em; background: #15506b; border: 2px solid #63c9dd; box-shadow: inset 0 0 12px rgba(83,205,231,.22); cursor: pointer; }
.vehicle-assembly-complete:not(:disabled):hover, .vehicle-assembly-complete:not(:disabled):focus-visible { background: #1e7596; box-shadow: 0 0 13px rgba(100,226,246,.5); }
.vehicle-assembly-complete:disabled { color: #55727b; background: #102732; border-color: #36515a; box-shadow: none; cursor: not-allowed; }
.performance-row { display: grid; grid-template-columns: 70px 1fr 34px; gap: 7px; align-items: center; font-size: 13px; }
.performance-track { height: 9px; background: #0b1112; border: 1px solid #4d6567; }
.performance-fill { display: block; height: 100%; background: linear-gradient(90deg,#267ca8,#78d8ff); box-shadow: 0 0 6px #4bb8e8; }

@media (max-width: 700px) { .frame-inventory-columns { grid-template-columns: 1fr; } }

.ground-item img {
  width: 62px;
  height: 42px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 8px 7px rgba(0, 0, 0, 0.45));
  transition: transform 120ms ease, filter 120ms ease;
}

.ground-item:hover img,
.ground-item:focus-visible img {
  transform: scale(1.08);
  filter: drop-shadow(0 0 9px rgba(255, 221, 113, 0.75));
}

.item-tooltip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  padding: 6px 10px;
  transform: translateX(-50%) translateY(4px);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(8, 10, 14, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.ground-item:hover .item-tooltip,
.ground-item:focus-visible .item-tooltip {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.item-hotbar {
  position: fixed;
  z-index: 20;
  right: clamp(-48px, -3.5vw, -25px);
  bottom: -18px;
  width: clamp(310px, 32vw, 440px);
  aspect-ratio: 666 / 375;
  pointer-events: none;
  user-select: none;
}

.item-hotbar-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: saturate(.62) contrast(1.16) brightness(.86) drop-shadow(5px 6px 0 rgba(0,0,0,.42));
}

.money-display {
  position: absolute;
  z-index: 2;
  top: 41%;
  right: 17%;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 132px;
  padding: 7px 11px 7px 8px;
  transform: translateY(-100%);
  background: linear-gradient(180deg, rgba(64,70,70,.97), rgba(18,22,23,.98));
  border: 3px solid #151819;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px #747c79, 4px 4px 0 rgba(0,0,0,.38);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}

.money-icon {
  width: 38px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}

.money-balance {
  color: #d9c278;
  font-size: clamp(16px, 1.6vw, 21px);
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 2px 2px 0 #111;
}

.hotbar-slot {
  position: absolute;
  z-index: 1;
  top: 48%;
  width: 19%;
  height: 33%;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  pointer-events: auto;
}

.hotbar-slot:hover,
.hotbar-slot:focus-visible,
.hotbar-slot.is-selected {
  box-shadow: inset 0 0 0 2px #f5e3aa, inset 0 0 0 4px rgba(73, 82, 82, .92);
  outline: none;
}

.hotbar-slot.is-selected {
  background: rgba(218, 194, 120, .13);
}

.hotbar-slot-1 {
  left: 19.5%;
}

.hotbar-slot-2 {
  left: 40.5%;
}

.hotbar-slot-3 {
  left: 61.5%;
}

.hotbar-item {
  position: absolute;
  inset: 8%;
  display: block;
  width: 84%;
  height: 84%;
  object-fit: contain;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

.hotbar-item[hidden] {
  display: none;
}

.hotbar-quantity {
  position: absolute;
  z-index: 3;
  right: 7%;
  bottom: 6%;
  min-width: 25px;
  padding: 2px 5px;
  color: #fff;
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
  background: rgba(10, 12, 16, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  pointer-events: none;
}

.hotbar-quantity[hidden] { display: none; }

.hotbar-item.item-gearwrench {
  top: 4%;
  left: -35.5%;
  right: auto;
  bottom: auto;
  width: 170%;
  height: auto;
}

.hotbar-item.item-driver {
  top: -2%;
  left: -28%;
  right: auto;
  bottom: auto;
  width: 160%;
  height: auto;
}

body.inventory-open .game-shell {
  filter: blur(5px) brightness(0.62);
  pointer-events: none;
}

.car-inventory {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.16);
}

.car-inventory[hidden] {
  display: none;
}

.car-inventory-panel {
  position: relative;
  width: min(96vw, calc(92vh * 16 / 9), 1280px);
  aspect-ratio: 16 / 9;
  user-select: none;
}

.car-inventory-frame,
.car-inventory-slots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.car-inventory-frame {
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

.car-inventory-slot {
  position: absolute;
  width: 9.4%;
  height: 16.3%;
  padding: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.car-inventory-slot:hover,
.car-inventory-slot:focus-visible,
.car-inventory-slot.is-selected {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.96);
  outline: none;
}

.car-inventory-slot.is-selected {
  background: rgba(255, 255, 255, 0.08);
}

.car-part-item {
  position: absolute;
  inset: 8%;
  display: block;
  width: 84%;
  height: 84%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.55));
}

.inventory-close-hint {
  position: absolute;
  right: 5%;
  bottom: 1.5%;
  margin: 0;
  padding: 6px 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 700;
  background: rgba(8, 10, 14, 0.76);
  border-radius: 6px;
  transform: translateY(6px);
}

.shop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.16);
}

.shop[hidden] {
  display: none;
}

.shop-panel.is-trade-market {
  width: min(96vw, 90vh, 1000px);
  aspect-ratio: 4 / 3;
}
.shop-panel.is-trade-market > :not(.trade-market) { display: none !important; }

.trade-market {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 2.1% 3.3%;
  box-sizing: border-box;
  color: #e9ead2;
  font-family: "Courier New", monospace;
  background:
    linear-gradient(135deg, transparent 0 1.7%, #4b5050 1.8% 2.2%, transparent 2.3% 97.7%, #4b5050 97.8% 98.2%, transparent 98.3%),
    linear-gradient(145deg, #4a4e4d 0%, #151a1b 5%, #080c0d 51%, #24292a 95%, #4d5251 100%);
  border: clamp(5px, .8vw, 10px) solid #101415;
  box-shadow: inset 0 0 0 3px #777b76, inset 0 0 0 7px #242a2a, 0 24px 70px rgba(0, 0, 0, .75);
}
.trade-market[hidden] { display: none; }
.trade-market-header {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.45fr 1fr;
  align-items: center;
  min-height: 11%;
  padding: 0 5.5%;
  background: linear-gradient(#222829, #080c0d);
  border: 3px solid #080b0b;
  box-shadow: inset 0 0 0 2px #545c59;
}
.trade-market-header h2 { margin: 0; color: #f2ead6; font-size: clamp(19px, 3.15vw, 42px); letter-spacing: .09em; text-align: center; text-shadow: 2px 2px #111; }
.trade-market-lights { display: flex; align-items: center; gap: 7px; color: #f3ead8; font-size: clamp(9px, 1.25vw, 17px); font-weight: 700; white-space: nowrap; }
.trade-market-lights span { width: clamp(8px, 1.15vw, 14px); aspect-ratio: 1; border: 2px solid #071008; border-radius: 2px; box-shadow: inset 0 0 4px #000; }
.trade-market-lights .is-on { background: #80e636; box-shadow: 0 0 8px #76e736, inset 0 0 3px #e5ffba; }
.trade-market-lights .is-recording { margin-left: 7px; background: #e43d2e; box-shadow: 0 0 7px #e43d2e, inset 0 0 3px #ffd0c8; }
.trade-market-header time { justify-self: end; padding: 4% 7%; color: #a1ea58; font-size: clamp(13px, 2vw, 27px); font-weight: 700; white-space: nowrap; background: #060a09; border: 2px solid #3c4541; text-shadow: 0 0 6px #71dc3d; }
.trade-control { position: absolute; top: 50%; width: 5.5%; aspect-ratio: 1; padding: 0; color: #d7ddcf; font: inherit; font-size: clamp(14px, 1.8vw, 25px); font-weight: 700; cursor: pointer; background: #202728; border: 2px solid #65706c; transform: translateY(-50%); }
.trade-control:hover, .trade-control:focus-visible { color: #fff; background: #414b49; outline: 2px solid #b9dd8d; }
.trade-close { right: .9%; color: #ffb3a5; }
.trade-site-switch { left: .9%; color: #b7e878; }

.trade-market-screen { position: relative; display: grid; grid-template-columns: 29% 1fr; grid-template-rows: 1fr auto; gap: 0; height: 59%; margin-top: 1.5%; overflow: hidden; background: #07100e; border: 4px solid #050808; box-shadow: inset 0 0 0 2px #3d4a42, inset 0 0 36px rgba(58, 136, 84, .14); }
.trade-stock-summary { z-index: 2; padding: 8% 8%; border-right: 2px solid #324139; }
.trade-symbol { margin: 0 0 2%; color: #91e54b; font-size: clamp(16px, 2.7vw, 36px); font-weight: 700; letter-spacing: .08em; }
.trade-stock-summary h3 { margin: 0 0 10%; color: #e3e8d7; font-size: clamp(10px, 1.55vw, 20px); line-height: 1.15; }
.trade-stock-summary strong { display: block; color: #f2e6ce; font-size: clamp(21px, 4.1vw, 55px); line-height: 1; letter-spacing: -.06em; }
.trade-stock-change { display: block; margin-top: 8%; color: #ff6554; font-size: clamp(11px, 1.7vw, 23px); font-weight: 700; }
.trade-stock-change.is-negative { color: #5b9eff; }
.trade-chart-area { position: relative; min-width: 0; overflow: hidden; }
.trade-chart-grid { position: absolute; inset: 0 6% 12% 0; background-image: linear-gradient(#2c3e31 2px, transparent 2px), linear-gradient(90deg, #2c3e31 2px, transparent 2px); background-size: 25% 20%; opacity: .82; }
.trade-chart-candles { position: absolute; inset: 11% 7% 16% 2%; display: grid; grid-template-columns: repeat(28, 1fr); align-items: stretch; gap: clamp(1px, .28vw, 4px); }
.trade-candle { position: relative; min-width: 2px; }
.trade-candle::before { position: absolute; bottom: var(--low); left: calc(50% - 1px); width: 2px; height: calc(var(--high) - var(--low)); content: ""; background: currentColor; }
.trade-candle::after { position: absolute; left: 17%; width: 66%; content: ""; background: currentColor; }
.trade-candle.is-up::after { bottom: var(--open); height: max(3px, calc(var(--close) - var(--open))); }
.trade-candle.is-down::after { bottom: var(--close); height: max(3px, calc(var(--open) - var(--close))); }
.trade-candle.is-up { color: #ef6352; }
.trade-candle.is-down { color: #5598ef; }
.trade-chart-labels { position: absolute; right: 7%; bottom: 2%; left: 2%; display: flex; justify-content: space-between; color: #9bba7b; font-size: clamp(8px, 1.15vw, 15px); font-weight: 700; }
.trade-market-state { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-height: 31px; padding: 0 2%; color: #b5c0ad; font-size: clamp(9px, 1.25vw, 16px); background: #111817; border-top: 2px solid #354238; }
.trade-market-state span { width: 9px; height: 9px; background: #bc493d; border-radius: 50%; box-shadow: 0 0 6px #a42a25; }
.trade-market-state span.is-open { background: #ee6554; box-shadow: 0 0 8px #ee6554; }
.trade-market-state small { margin-left: auto; color: #7d9677; }

.trade-order-panel { display: grid; grid-template-columns: 1.2fr 1fr 1fr .82fr .82fr; align-items: center; gap: 1.4%; height: 21%; margin-top: 1.5%; padding: 1.5% 2%; box-sizing: border-box; background: linear-gradient(#202626, #0a0e0f); border: 3px solid #050808; box-shadow: inset 0 0 0 2px #455048; }
.trade-balance, .trade-holdings { display: grid; gap: 3px; }
.trade-balance span, .trade-holdings span, .trade-quantity { color: #b7bba9; font-size: clamp(8px, 1.1vw, 15px); font-weight: 700; }
.trade-balance strong, .trade-holdings strong { color: #f0e5cf; font-size: clamp(14px, 2.1vw, 28px); line-height: 1; }
.trade-holdings small { color: #8cae7d; font-size: clamp(8px, 1vw, 13px); }
.trade-quantity { display: grid; gap: 5px; }
.trade-quantity input { width: 100%; min-width: 0; padding: 7px 5px; box-sizing: border-box; color: #dce9d3; font: inherit; font-size: clamp(12px, 1.5vw, 20px); font-weight: 700; text-align: center; background: #07100e; border: 2px solid #455547; }
.trade-action { align-self: stretch; color: #f4eee0; font-family: inherit; font-size: clamp(13px, 2.1vw, 29px); font-weight: 700; letter-spacing: .04em; cursor: pointer; border: 3px solid #070a09; box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 2px 0 #536052; }
.trade-buy { background: linear-gradient(#ed6a5b, #9c2d2b); }
.trade-sell { background: linear-gradient(#5f9fe9, #28569c); }
.trade-action:hover:not(:disabled), .trade-action:focus-visible:not(:disabled) { filter: brightness(1.2); outline: 2px solid #fff; }
.trade-action:disabled { color: #7b837a; cursor: not-allowed; background: #303735; }
.trade-status { grid-column: 1 / -1; min-height: 1em; margin: -1% 0 0; color: #e6d9d0; font-size: clamp(8px, 1.15vw, 15px); font-weight: 700; text-align: center; }
.trade-status.is-error { color: #5b9eff; }

@media (max-width: 620px) {
  .shop-panel.is-trade-market { width: 98vw; }
  .trade-market { padding: 1.8% 2.2%; }
  .trade-market-screen { grid-template-columns: 31% 1fr; }
  .trade-order-panel { grid-template-columns: 1.2fr 1fr .75fr .7fr .7fr; gap: 1%; }
}

.shop-panel {
  position: relative;
  width: min(92vw, 92vh, 800px);
  aspect-ratio: 1;
  user-select: none;
}

.shop-frame {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  clip-path: inset(13.75% 4.75%);
  pointer-events: none;
}

.shop-close {
  position: absolute;
  left: 90.7%;
  top: 17.8%;
  width: 5.5%;
  height: 5%;
  padding: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.shop-close:hover,
.shop-close:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.92);
  outline: none;
}

.shop-browser-button {
  position: absolute;
  z-index: 3;
  top: 25.5%;
  height: 6.5%;
  padding: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.shop-browser-button:hover,
.shop-browser-button:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.92);
  outline: none;
}

.shop-browser-back {
  left: 10.4%;
  width: 7.2%;
}

.shop-browser-forward {
  left: 17.8%;
  width: 6.8%;
}

.shop-browser-refresh {
  left: 24.9%;
  width: 6.8%;
}

.shop-browser-home {
  left: 31.9%;
  width: 6.8%;
}

.shop-site-switch {
  position: absolute;
  z-index: 6;
  left: 89.8%;
  top: 25.5%;
  width: 6.2%;
  height: 6.5%;
  padding: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.shop-site-switch:hover,
.shop-site-switch:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.95); outline: none; }

.shop-orders-button {
  position: absolute;
  z-index: 7;
  left: 83.5%;
  top: 25.5%;
  width: 6.2%;
  height: 6.5%;
  padding: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.shop-orders-button:hover,
.shop-orders-button:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .95); outline: none; }

.shop-orders {
  position: absolute;
  z-index: 15;
  left: 6.2%;
  top: 29.2%;
  width: 87.6%;
  height: 55.2%;
  padding: 22px 28px;
  color: #29251f;
  background: #f2ecde;
  border-top: 4px solid #8e7855;
  border-bottom: 4px solid #8e7855;
  overflow: hidden;
}
.shop-orders[hidden] { display: none; }
.shop-orders header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 12px; border-bottom: 2px solid #b8a98d; }
.shop-orders h2 { margin: 0; font-size: clamp(19px, 3vw, 30px); }
.shop-orders header button { padding: 7px 12px; color: #fff; font-weight: 700; background: #554b3d; border: 2px solid #211d18; cursor: pointer; }
.shop-orders-list { height: calc(100% - 56px); padding: 12px 3px; overflow-y: auto; }
.shop-order-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 18px; padding: 11px 12px; margin-bottom: 9px; background: rgba(255,255,255,.62); border: 2px solid #c4b69c; }
.shop-order-entry strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-order-entry small { color: #6e6252; }
.shop-order-remaining { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: #9c5a20; font-size: clamp(14px, 2vw, 20px); font-weight: 700; white-space: nowrap; }
.shop-order-entry.is-ready .shop-order-remaining { color: #247437; }
.shop-order-entry.is-collected { opacity: .62; }
.shop-orders-empty { margin: 45px 0 0; color: #786e60; font-size: 19px; text-align: center; }

.shop-address-category {
  position: absolute;
  z-index: 3;
  left: 40%;
  top: 25.4%;
  max-width: 49%;
  overflow: hidden;
  transform: translateY(-50%);
  color: #171717;
  font-family: "Pixel Operator", "POR UI", monospace;
  font-size: clamp(13px, 2.3vw, 21px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.shop-panel.is-metal-site::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 6.2%;
  top: 29.2%;
  width: 87.6%;
  height: 55.2%;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    #17201f;
  background-size: 16px 16px;
  border-top: 4px solid #bd8d41;
  border-bottom: 4px solid #bd8d41;
}

.shop-panel.is-metal-site .shop-address-category {
  left: 40%;
  top: 25.4%;
  width: auto;
  max-width: 49%;
  padding: 0;
  transform: translateY(-50%);
  color: #20201b;
  background: transparent;
}

.metal-site-brand {
  position: absolute;
  z-index: 4;
  left: 10%;
  top: 31.3%;
  color: #e8b75f;
  pointer-events: none;
}
.metal-site-brand[hidden] { display: none; }
.metal-site-brand strong { display: block; font-size: clamp(18px, 3vw, 29px); letter-spacing: 0.05em; }
.metal-site-brand span { color: #94aaa3; font-size: clamp(8px, 1.2vw, 12px); }

.shop-panel.is-metal-site .shop-product-name { left: 42%; top: 39%; width: 48%; color: #f4ead6; }
.shop-panel.is-metal-site .shop-product-image { left: 25%; top: 45%; width: 23%; height: 22%; }
.shop-panel.is-metal-site .shop-product-details { left: 65%; top: 46%; width: 45%; color: #d8ddd9; text-align: left; }
.shop-panel.is-metal-site .shop-product-details p { margin: 5px 0; }
.shop-panel.is-metal-site .shop-product-price {
  left: 78%;
  top: 39.2%;
  color: #efc167;
}
.metal-quantity-selector {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 65.2%;
  display: flex;
  align-items: center;
  gap: 9px;
  transform: translate(-50%, -50%);
}
.metal-quantity-selector[hidden] { display: none; }
.metal-quantity-selector button,
.metal-quantity-selector span {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  color: #f5ead1;
  font: 800 20px/1 "POR UI", monospace;
  background: #293532;
  border: 2px solid #c99545;
  box-sizing: border-box;
}
.metal-quantity-selector button { cursor: pointer; }
.metal-quantity-selector button:hover,
.metal-quantity-selector button:focus-visible { background: #3b4c47; outline: 2px solid #f0cf8d; }
.metal-quantity-selector span { min-width: 48px; color: #171b18; background: #e4d9bd; }
.shop-panel.is-metal-site .shop-buy {
  top: 72%;
  color: #142213;
  font-family: "Pixel Operator", "POR UI", monospace;
  font-size: clamp(16px, 2.6vw, 27px);
  font-weight: 900;
  background: #68b65b;
  border: 3px solid #bce9a4;
  box-shadow: inset -3px -3px 0 #39743a, inset 3px 3px 0 #a8dd8f, 3px 3px 0 #0b100c;
}
.shop-panel.is-metal-site .shop-buy:not(.is-complete)::after {
  content: "BUY";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.shop-panel.is-metal-site .shop-previous,
.shop-panel.is-metal-site .shop-next {
  top: 79%;
  background: #d8cfb7;
  border: 2px solid #f7f0dc;
  box-shadow: inset -2px -2px 0 #706b5e, inset 2px 2px 0 #fff8e7, 2px 2px 0 #080b09;
}
.shop-panel.is-metal-site .shop-previous::after,
.shop-panel.is-metal-site .shop-next::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.shop-panel.is-metal-site .shop-previous::after { border-right: 11px solid #171b18; margin-left: -2px; }
.shop-panel.is-metal-site .shop-next::after { border-left: 11px solid #171b18; margin-left: 2px; }

.metal-consult {
  position: absolute;
  z-index: 5;
  right: 8.5%;
  bottom: 16.8%;
  padding: 8px 12px;
  color: #171b19;
  font-weight: 800;
  background: #e0a84f;
  border: 2px solid #fff0c3;
  box-shadow: 3px 3px 0 #56401f;
  cursor: pointer;
}
.metal-consult[hidden] { display: none; }

.james-chat { position: absolute; z-index: 20; right: 8%; bottom: 16%; width: 39%; color: #e7ece9; background: #1b2422; border: 3px solid #c99545; box-shadow: 7px 8px 0 rgba(0,0,0,.45); }
.james-chat[hidden] { display: none; }
.james-chat header { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; color: #f0bd65; background: #293532; border-bottom: 1px solid #63736d; }
.james-chat header button { color: #fff; background: transparent; border: 0; font-size: 20px; cursor: pointer; }
.james-chat-body { min-height: 95px; padding: 11px; }
.james-chat-body p { margin: 0 0 15px; font-weight: 700; }
.james-chat-body span { color: #aab5b1; }
.james-chat-input { display: flex; gap: 5px; padding: 8px; background: #111715; }
.james-chat-input input { min-width: 0; flex: 1; padding: 7px; }
.james-chat-input button { padding: 7px; }

.shop-close-hint {
  position: absolute;
  right: 7%;
  bottom: 9%;
  margin: 0;
  padding: 6px 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 700;
  background: rgba(8, 10, 14, 0.76);
  border-radius: 6px;
  transform: translateY(6px);
}

.shop-product-name,
.shop-product-price,
.shop-status {
  position: absolute;
  z-index: 2;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  color: #171717;
  text-align: center;
  white-space: nowrap;
}

.shop-product-name {
  top: 31.5%;
  width: 76%;
  font-size: clamp(15px, 2.5vw, 25px);
  font-weight: 700;
  line-height: 1.15;
  white-space: normal;
}

.shop-status.is-error {
  color: #a82020;
}

.shop-product-image {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 39.5%;
  width: 20%;
  height: 15%;
  transform: translateX(-50%);
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.34));
}

.shop-product-details {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 54.5%;
  width: 76%;
  transform: translateX(-50%);
  color: #171717;
  text-align: center;
}

.shop-product-details p {
  margin: 2px 0;
  font-size: clamp(11px, 1.55vw, 16px);
  font-weight: 700;
  line-height: 1.15;
}

.shop-product-price {
  top: 63.5%;
  color: #2f8f3a;
  font-size: clamp(16px, 2.7vw, 26px);
  font-weight: 700;
}

.shop-image-button {
  position: absolute;
  z-index: 3;
  padding: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.shop-image-button:hover,
.shop-image-button:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.95);
  outline: none;
}

.shop-buy {
  left: 50%;
  top: 71.6%;
  width: 20%;
  height: 7.8%;
  overflow: hidden;
}

.shop-complete-button {
  position: absolute;
  z-index: 1;
  top: -104%;
  left: -5.5%;
  width: 116%;
  height: auto;
  max-width: none;
  pointer-events: none;
}

.shop-buy.is-complete {
  background: #65ad50;
}

.shop-complete-button[hidden],
.shop-complete-text[hidden] {
  display: none;
}

.shop-complete-text {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  color: #102611;
  font-size: clamp(17px, 3.1vw, 30px);
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  pointer-events: none;
  padding-left: 1%;
}

.shop-previous,
.shop-next {
  top: 79.7%;
  width: 4.8%;
  height: 5%;
}

.shop-previous {
  left: 46.6%;
}

.shop-next {
  left: 53.4%;
}

.shop-status {
  position: fixed;
  z-index: 200;
  top: auto;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 24px;
  color: #eaffea;
  font-size: clamp(16px, 2.4vw, 23px);
  font-weight: 700;
  background: rgba(25, 92, 38, 0.96);
  border: 2px solid rgba(220, 255, 224, 0.95);
  border-radius: 8px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.shop-status.is-error {
  color: #fff2f2;
  background: rgba(139, 28, 28, 0.96);
  border-color: rgba(255, 222, 222, 0.95);
}

.shop-status:empty {
  display: none;
}

.workbench {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.16);
}

.workbench[hidden] { display: none; }

.workbench-panel {
  position: relative;
  width: min(92vw, calc(88vh * 512 / 341), 900px);
  aspect-ratio: 512 / 341;
  user-select: none;
}

.workbench-frame {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

.workbench-blueprint {
  position: absolute;
  z-index: 2;
  top: 38%;
  left: 38.5%;
  width: 28%;
  aspect-ratio: 3 / 2;
  box-sizing: border-box;
  padding: 1.2%;
  overflow: hidden;
  transform: rotate(-3deg);
  transform-origin: center;
  background:
    linear-gradient(rgba(53, 105, 142, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 105, 142, 0.1) 1px, transparent 1px),
    #eee8d4;
  background-size: 8px 8px;
  border: 1px solid #b6aa89;
  box-shadow: 3px 5px 0 rgba(42, 28, 17, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
  pointer-events: none;
}

.workbench-blueprint[hidden] { display: none; }

.workbench-blueprint::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, rgba(133, 119, 88, 0.35) 49%, #faf5e5 51%);
  box-shadow: -1px -1px 0 rgba(76, 66, 48, 0.18);
}

.workbench-blueprint img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: sepia(0.12) contrast(0.94);
}

.workbench-close {
  position: absolute;
  top: 4%;
  right: 3%;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #fff;
  font-size: 30px;
  line-height: 38px;
  background: rgba(8, 10, 14, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  cursor: pointer;
}

.workbench-close:hover,
.workbench-close:focus-visible {
  background: rgba(94, 41, 25, 0.95);
  outline: 2px solid #fff;
}

.workbench-close-hint {
  position: absolute;
  right: 5%;
  bottom: -9%;
  margin: 0;
  padding: 6px 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 700;
  background: rgba(8, 10, 14, 0.76);
  border-radius: 6px;
  transform: translateY(6px);
}

.design-open {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -7%;
  min-width: 170px;
  padding: 12px 24px;
  transform: translateX(-50%);
  color: #f7ead2;
  font-size: clamp(17px, 2vw, 23px);
  font-weight: 700;
  background: linear-gradient(#744a2d, #49301f);
  border: 3px solid #c99b65;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px #2b1a10, 0 5px 0 #1b120c;
  cursor: pointer;
}
.design-open[hidden] { display: none; }

.production-start {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 9%;
  min-width: 170px;
  padding: 11px 24px;
  transform: translateX(-50%);
  color: #efffe3;
  font-size: clamp(16px, 1.8vw, 21px);
  font-weight: 800;
  background: linear-gradient(#537b35, #304b24);
  border: 3px solid #add37c;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px #1d2d16, 0 4px 0 #14200f;
  cursor: pointer;
}

.production-start[hidden] { display: none; }
.production-start:hover,
.production-start:focus-visible { background: linear-gradient(#689b43, #3e612d); outline: 2px solid #fff; }
.production-start:disabled { color: #d2dacb; background: #465044; border-color: #7e8b77; box-shadow: none; cursor: default; }

.production-confirm {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border-radius: 8px;
}

.production-confirm[hidden] { display: none; }
.production-confirm-card {
  width: min(78%, 470px);
  box-sizing: border-box;
  padding: 24px;
  color: #eee7d8;
  text-align: center;
  background: #24211c;
  border: 3px solid #b98a59;
  border-radius: 7px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), inset 0 0 0 2px #100d0a;
}
.production-confirm-card h2 { margin: 0 0 12px; color: #fff0c9; }
.production-confirm-card p { margin: 0 0 10px; }
.production-confirm-card strong { display: block; color: #ffb38d; }
.production-confirm-actions { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.production-confirm-actions button {
  padding: 10px 17px;
  color: #fff;
  font-weight: 700;
  background: #4a4239;
  border: 2px solid #9d8d78;
  border-radius: 4px;
  cursor: pointer;
}
#production-ok { background: #6b452a; border-color: #d1a16b; }

.skeleton-build { position: absolute; z-index: 18; inset: 0; display: grid; place-items: center; background: transparent; }
.skeleton-build[hidden] { display: none; }
.skeleton-build-card { width: min(82%, 610px); box-sizing: border-box; padding: 18px 22px; color: #e9e5dc; background: #202426; border: 3px solid #94704f; border-radius: 7px; box-shadow: 0 12px 35px #000; }
.skeleton-build-card > header { display: flex; align-items: center; justify-content: space-between; }
.skeleton-build-card h2 { margin: 0; color: #f0c98f; }
#skeleton-build-close { width: 36px; height: 36px; color: #fff; font-size: 25px; background: #3f332a; border: 1px solid #aa8564; cursor: pointer; }
.skeleton-build-card > img { display: block; width: min(72%, 430px); max-height: 190px; margin: 4px auto; object-fit: contain; image-rendering: pixelated; }
.skeleton-build-card > p { text-align: center; }
.steel-grade-select { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 12px; color: #efc584; font-weight: 700; }
.steel-grade-select select { padding: 8px 12px; color: #fff; background: #2a3032; border: 2px solid #8b704f; }
.skeleton-rigidity { width: min(390px, 90%); margin: 0 auto 12px; padding: 9px 12px; color: #efe6d7; background: #202527; border: 2px solid #735b40; }
.skeleton-materials { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skeleton-materials label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; padding: 10px; background: #151719; border: 2px solid #65503c; }
.skeleton-materials small { grid-column: 2; color: #cbb089; }
.skeleton-materials em { grid-column: 1 / -1; color: #9fc7a1; font-style: normal; text-align: center; }
.skeleton-materials input { grid-column: 1 / -1; width: 100%; box-sizing: border-box; padding: 8px; color: #fff; font-size: 18px; text-align: center; background: #292d30; border: 1px solid #777; }
.material-icon { font-size: 24px; color: #b8c0c5; }
.material-bolt { color: #d2bd8b; }
.material-controls { grid-column: 1 / -1; display: flex; gap: 7px; }
.material-controls button { flex: 1; padding: 6px; color: #fff; font-size: 18px; background: #41484c; border: 1px solid #8e979b; cursor: pointer; }
.skeleton-build-status { min-height: 22px; margin: 9px 0; color: #ffb48e; }
.skeleton-build-complete { display: block; width: 100%; padding: 11px; color: #fff; font-size: 18px; font-weight: 800; background: #557b36; border: 2px solid #acd17c; cursor: pointer; }
.skeleton-build-complete:disabled { opacity: 0.42; cursor: default; }

.design-open:hover,
.design-open:focus-visible {
  color: #fff;
  background: linear-gradient(#93603a, #5b3924);
  outline: 2px solid #fff;
}

.design-window {
  position: fixed;
  z-index: 110;
  left: 50%;
  top: 50%;
  width: min(94vw, 1120px);
  height: min(88vh, 780px);
  padding: 18px;
  transform: translate(-50%, -50%);
  color: #eee4cf;
  background: #24272a;
  border: 5px solid #93663f;
  border-radius: 8px;
  box-shadow: inset 0 0 0 3px #141516, 0 18px 50px rgba(0, 0, 0, 0.7);
}

.design-window[hidden] { display: none; }

.design-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 0 8px 12px 14px;
  border-bottom: 2px solid #765234;
}

.design-window-header h2 {
  margin: 0;
  font-size: clamp(22px, 3vw, 32px);
}

.design-close {
  width: 42px;
  height: 42px;
  padding: 0;
  color: #fff;
  font-size: 30px;
  line-height: 36px;
  background: #4d3023;
  border: 2px solid #bd8a60;
  border-radius: 4px;
  cursor: pointer;
}

.design-close:hover,
.design-close:focus-visible {
  background: #793d2c;
  outline: 2px solid #fff;
}

.design-canvas {
  display: grid;
  height: calc(100% - 94px);
  margin-top: 16px;
  place-items: center;
  background-color: #315f4f;
  background-image:
    linear-gradient(rgba(213, 238, 220, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(213, 238, 220, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 3px solid #b58b58;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.42);
}

.design-canvas p {
  margin: 0;
  padding: 10px 14px;
  font-size: clamp(17px, 2vw, 23px);
  background: rgba(14, 24, 21, 0.72);
  border-radius: 5px;
}

.design-close-hint {
  position: absolute;
  right: 22px;
  bottom: 21px;
  margin: 0;
  padding: 5px 8px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  background: rgba(8, 10, 12, 0.72);
  transform: translateY(6px);
  border-radius: 4px;
}

.vehicle-design-form {
  height: calc(100% - 62px);
  overflow: auto;
  scrollbar-color: #9c704b #17191b;
}

.design-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.75fr);
  gap: 14px;
  padding: 16px 6px 60px;
}

.design-editor[hidden],
.design-loading[hidden],
.design-result[hidden] { display: none; }

.design-fieldset {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 2px solid #765234;
  border-radius: 5px;
}

.design-fieldset legend {
  padding: 0 7px;
  color: #f3d7aa;
  font-size: 16px;
  font-weight: 700;
}

.design-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.design-choice-grid label { cursor: pointer; }
.design-choice-grid input { position: absolute; opacity: 0; }
.design-choice-grid span {
  display: block;
  padding: 9px 4px;
  color: #ddd4c4;
  text-align: center;
  background: #363a3d;
  border: 2px solid #585c5f;
  border-radius: 4px;
}
.design-choice-grid input:checked + span {
  color: #fff3d4;
  background: #69472f;
  border-color: #d0a06a;
}
.design-choice-grid input:focus-visible + span { outline: 2px solid #fff; }

.design-color-fieldset {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.design-color-fieldset input[type="color"] {
  width: 64px;
  height: 42px;
  padding: 2px;
  background: #111;
  border: 2px solid #b8895f;
}
.design-color-fieldset label { display: flex; align-items: center; gap: 4px; }
.design-color-fieldset input[type="number"] {
  width: 58px;
  padding: 7px 4px;
  color: #fff;
  background: #17191b;
  border: 1px solid #777;
}
.design-color-fieldset output { color: #f3d7aa; font-weight: 700; }

.design-sliders {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: #1b1d1f;
  border: 2px solid #765234;
  border-radius: 5px;
}
.design-sliders label {
  display: grid;
  grid-template-columns: 88px 34px 1fr;
  align-items: center;
  gap: 7px;
}
.design-sliders output { color: #f0c986; text-align: right; }
.design-sliders input { width: 100%; accent-color: #b47849; }

.design-reference {
  grid-column: 2;
  grid-row: 1 / span 4;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  background: #17191b;
  border: 2px solid #765234;
  border-radius: 5px;
}
.design-reference img {
  width: 100%;
  max-height: 390px;
  object-fit: contain;
  image-rendering: auto;
  background: #e9e7df;
  border: 1px solid #777;
}

.design-error {
  min-height: 22px;
  margin: 0;
  color: #ff9b8b;
}
.design-generate {
  padding: 12px 22px;
  color: #fff5df;
  font-size: 19px;
  font-weight: 700;
  background: #6d452b;
  border: 3px solid #c79964;
  border-radius: 5px;
  cursor: pointer;
}
.design-generate:disabled { opacity: 0.55; cursor: wait; }

.design-loading {
  display: grid;
  height: 100%;
  place-content: center;
  justify-items: center;
  gap: 18px;
}
.design-spinner {
  width: 54px;
  height: 54px;
  border: 6px solid #594431;
  border-top-color: #e5b67b;
  border-radius: 50%;
  animation: design-spin 900ms linear infinite;
}
@keyframes design-spin { to { transform: rotate(360deg); } }

.design-result {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 0.8fr);
  gap: 16px;
  padding: 16px 6px 60px;
}
.vehicle-design-result {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
  border: 3px solid #9d744f;
}

.vehicle-design-result img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.design-result dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 4px 10px;
  margin: 0;
  padding: 12px;
  background: #181a1c;
  border: 2px solid #765234;
}
.design-result dt { color: #c9a77b; }
.design-result dd { margin: 0; color: #fff; }
.design-result-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 7px;
  vertical-align: middle;
  border: 1px solid #fff;
}
.design-result-actions {
  grid-column: 2;
  display: flex;
  align-self: start;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.design-result-actions button {
  padding: 10px 16px;
  color: #fff;
  font-weight: 700;
  background: #60402b;
  border: 2px solid #c79964;
  border-radius: 4px;
  cursor: pointer;
}
#design-confirm-status { grid-column: 2; margin: 0; color: #9ee29e; text-align: center; }

@media (max-width: 760px) {
  .design-editor, .design-result { grid-template-columns: 1fr; }
  .design-reference { grid-column: 1; grid-row: auto; }
  .design-result-actions, #design-confirm-status { grid-column: 1; }
  .design-choice-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Trade Market: render inside the existing shop browser content area. */
.shop-panel.is-trade-market {
  width: min(92vw, 92vh, 800px);
  aspect-ratio: 1;
}
.shop-panel.is-trade-market > .shop-frame,
.shop-panel.is-trade-market > .shop-close,
.shop-panel.is-trade-market > .shop-browser-button,
.shop-panel.is-trade-market > .shop-site-switch,
.shop-panel.is-trade-market > .shop-orders-button,
.shop-panel.is-trade-market > .shop-address-category { display: block !important; }
.shop-panel.is-trade-market > .shop-frame { position: relative; z-index: 1; }
.shop-panel.is-trade-market > .shop-close,
.shop-panel.is-trade-market > .shop-browser-button,
.shop-panel.is-trade-market > .shop-site-switch,
.shop-panel.is-trade-market > .shop-orders-button { z-index: 5; }
.shop-panel.is-trade-market > .shop-address-category {
  z-index: 6;
  left: 40%;
  top: 25.4%;
  width: 49%;
  max-width: 49%;
  color: #171717;
  font-size: clamp(13px, 2.3vw, 21px);
  white-space: nowrap;
}

.shop-panel.is-trade-market .trade-market {
  z-index: 2;
  top: 30.9%;
  right: auto;
  bottom: auto;
  left: 6.6%;
  width: 86.8%;
  height: 53.2%;
  padding: 1.3%;
  color: #e6ebd8;
  background: #09100d;
  border: 2px solid #1b2720;
  box-shadow: inset 0 0 0 2px #58705a, inset 0 0 22px rgba(90, 159, 80, .2);
}
.shop-panel.is-trade-market .trade-market-header {
  grid-template-columns: 1fr 1.25fr 1fr;
  min-height: 13%;
  padding: 0 2%;
  border-width: 2px;
}
.shop-panel.is-trade-market .trade-market-header h2 { font-size: clamp(11px, 2.1vw, 24px); }
.shop-panel.is-trade-market .trade-market-lights { gap: 4px; font-size: clamp(6px, .9vw, 11px); }
.shop-panel.is-trade-market .trade-market-lights span { width: clamp(5px, .7vw, 9px); border-width: 1px; }
.shop-panel.is-trade-market .trade-market-lights .is-recording { margin-left: 3px; }
.shop-panel.is-trade-market .trade-market-header time { padding: 3% 5%; font-size: clamp(8px, 1.3vw, 15px); border-width: 1px; }
.shop-panel.is-trade-market .trade-control { display: none; }
.shop-panel.is-trade-market .trade-market-screen { height: 55%; margin-top: 1.2%; border-width: 2px; }
.shop-panel.is-trade-market .trade-stock-summary { padding: 6% 7%; }
.shop-panel.is-trade-market .trade-symbol { font-size: clamp(10px, 1.8vw, 21px); }
.shop-panel.is-trade-market .trade-stock-summary h3 { font-size: clamp(7px, 1.05vw, 13px); }
.shop-panel.is-trade-market .trade-stock-summary strong { font-size: clamp(15px, 2.7vw, 31px); }
.shop-panel.is-trade-market .trade-stock-change { font-size: clamp(8px, 1.2vw, 14px); }
.shop-panel.is-trade-market .trade-chart-candles { gap: 2px; }
.shop-panel.is-trade-market .trade-market-state { min-height: 21px; font-size: clamp(6px, .9vw, 11px); }
.shop-panel.is-trade-market .trade-market-state span { width: 6px; height: 6px; }
.shop-panel.is-trade-market .trade-order-panel {
  grid-template-columns: 1.16fr .95fr .75fr .68fr .68fr;
  height: 27%;
  margin-top: 1.2%;
  padding: 1.3% 1.6%;
  border-width: 2px;
}
.shop-panel.is-trade-market .trade-balance span,
.shop-panel.is-trade-market .trade-holdings span,
.shop-panel.is-trade-market .trade-quantity { font-size: clamp(6px, .82vw, 10px); }
.shop-panel.is-trade-market .trade-balance strong,
.shop-panel.is-trade-market .trade-holdings strong { font-size: clamp(10px, 1.55vw, 18px); }
.shop-panel.is-trade-market .trade-holdings small { font-size: clamp(6px, .72vw, 9px); }
.shop-panel.is-trade-market .trade-quantity { gap: 2px; }
.shop-panel.is-trade-market .trade-quantity input { padding: 3px; font-size: clamp(9px, 1.1vw, 13px); border-width: 1px; }
.shop-panel.is-trade-market .trade-action { border-width: 2px; font-size: clamp(10px, 1.45vw, 17px); }
.shop-panel.is-trade-market .trade-status { font-size: clamp(6px, .85vw, 10px); }

.shop-panel.is-trade-market .trade-market-screen { height: 43%; }
.shop-panel.is-trade-market .trade-chart-candles { right: 15%; }
.shop-panel.is-trade-market .trade-chart-axis { position: absolute; top: 10%; right: 1%; bottom: 16%; display: grid; align-content: space-between; color: #9ab681; font-size: clamp(6px, .75vw, 9px); text-align: right; }
.shop-panel.is-trade-market .trade-chart-tooltip { position: absolute; z-index: 4; right: 15%; bottom: 17%; left: 2%; margin: 0; padding: 2px 3px; color: #e5efd4; font-size: clamp(6px, .8vw, 10px); background: rgba(4, 10, 7, .94); border: 1px solid #5d815c; }
.shop-panel.is-trade-market .trade-previous-close { display: block; margin-top: 8%; color: #aab9a0; font-size: clamp(6px, .82vw, 10px); }
.shop-panel.is-trade-market .trade-order-panel { grid-template-columns: 1.05fr 1.15fr 1fr .55fr .55fr .75fr .75fr; grid-template-rows: 1fr auto; height: 32%; }
.shop-panel.is-trade-market .trade-holdings { gap: 1px; }
.shop-panel.is-trade-market .trade-holdings small { line-height: 1.05; }
.shop-panel.is-trade-market .trade-holdings small.is-negative { color: #ff927f; }
.shop-panel.is-trade-market .trade-quantity > div { display: grid; grid-template-columns: 20% 1fr 20%; }
.shop-panel.is-trade-market .trade-quantity button { min-width: 0; padding: 0; color: #dce9d3; font: inherit; font-weight: 700; background: #293a2e; border: 1px solid #627a63; cursor: pointer; }
.shop-panel.is-trade-market .trade-quantity input { border-right: 0; border-left: 0; }
.shop-panel.is-trade-market .trade-quantity small { display: block; overflow: hidden; font-size: clamp(8px, 1.15vw, 15px); font-weight: 700; line-height: 1.15; text-align: center; white-space: nowrap; }
.shop-panel.is-trade-market .trade-quantity .trade-estimated-buy { color: #ef6352; }
.shop-panel.is-trade-market .trade-quantity .trade-estimated-sell { color: #5598ef; }
.shop-panel.is-trade-market .trade-utility { align-self: stretch; padding: 0; color: #dce9d3; font-family: inherit; font-size: clamp(7px, .95vw, 12px); font-weight: 700; cursor: pointer; background: #314036; border: 2px solid #0a0e0b; }
.shop-panel.is-trade-market .trade-utility:hover:not(:disabled), .shop-panel.is-trade-market .trade-utility:focus-visible:not(:disabled) { color: #fff; background: #62514e; outline: 1px solid #fff; }
.shop-panel.is-trade-market .trade-utility:disabled { color: #718071; cursor: not-allowed; background: #252a26; }
.shop-panel.is-trade-market .trade-status { grid-column: 1 / -1; margin: 0; }
.shop-panel.is-trade-market .trade-news { display: grid; grid-template-columns: 15% 1fr; gap: 5px; height: 9%; margin-top: 1.1%; padding: 1% 1.6%; overflow: hidden; box-sizing: border-box; color: #c8d5be; background: #101813; border: 2px solid #334735; }
.shop-panel.is-trade-market .trade-news > strong { align-self: center; color: #a1e461; font-size: clamp(7px, .9vw, 11px); }
.shop-panel.is-trade-market .trade-news-list { min-width: 0; overflow: hidden; }
.shop-panel.is-trade-market .trade-news-list p { margin: 0; color: #8da58b; font-size: clamp(6px, .75vw, 9px); }
.shop-panel.is-trade-market .trade-news-entry { display: grid; gap: 1px; overflow: hidden; }
.shop-panel.is-trade-market .trade-news-entry strong, .shop-panel.is-trade-market .trade-news-entry span { overflow: hidden; font-size: clamp(6px, .74vw, 9px); text-overflow: ellipsis; white-space: nowrap; }
.shop-panel.is-trade-market .trade-news-entry.is-good strong { color: #ff7664; }
.shop-panel.is-trade-market .trade-news-entry.is-bad strong { color: #77b7ff; }
.shop-panel.is-trade-market .trade-news-entry.is-tier-3 strong { text-shadow: 0 0 3px currentColor; }
.shop-panel.is-trade-market .trade-candle { padding: 0; background: transparent; border: 0; cursor: crosshair; }
.shop-panel.is-trade-market .trade-candle:focus-visible { outline: 1px solid #fff; }
.shop-panel.is-trade-market .trade-candle.is-live::after { box-shadow: 0 0 4px currentColor; }
.shop-panel.is-trade-market .trade-company-list { position: absolute; z-index: 8; top: 10%; right: 4%; left: 4%; padding: 2%; color: #dfe5d6; background: #101713; border: 3px solid #050807; box-shadow: inset 0 0 0 2px #5d735e, 0 5px 0 rgba(0,0,0,.45); }
.shop-panel.is-trade-market .trade-company-list[hidden] { display: none; }
.shop-panel.is-trade-market .trade-company-list header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 2%; margin-bottom: 3%; color: #ef6352; font-size: clamp(9px, 1.2vw, 15px); border-bottom: 1px solid #536b56; }
.shop-panel.is-trade-market .trade-company-list header button { width: 24px; height: 22px; padding: 0; color: #e9e9df; font: inherit; cursor: pointer; background: #27332c; border: 1px solid #6a7c6b; }
.shop-panel.is-trade-market .trade-company-entry { display: grid; grid-template-columns: 16% 1fr auto; gap: 1px 8px; width: 100%; padding: 3%; color: #e6ede0; font: inherit; text-align: left; cursor: pointer; background: #1b2920; border: 2px solid #516c55; }
.shop-panel.is-trade-market .trade-company-entry:hover, .shop-panel.is-trade-market .trade-company-entry:focus-visible { background: #2d4936; outline: 1px solid #fff; }
.shop-panel.is-trade-market .trade-company-entry.is-selected { background: #314b3a; border-color: #ef6352; }
.shop-panel.is-trade-market .trade-company-entry span { grid-row: 1 / span 2; align-self: center; color: #ef6352; font-size: clamp(13px, 2vw, 24px); font-weight: 800; }
.shop-panel.is-trade-market .trade-company-entry strong { font-size: clamp(9px, 1.15vw, 14px); }
.shop-panel.is-trade-market .trade-company-entry.is-cmr > span:first-child,
.shop-panel.is-trade-market .trade-company-entry.is-cmr strong,
.shop-panel.is-trade-market #trade-stock-name.is-cmr,
.shop-panel.is-trade-market #trade-symbol.is-cmr { color: #91e54b; }
.shop-panel.is-trade-market .trade-company-entry.is-vlk > span:first-child,
.shop-panel.is-trade-market .trade-company-entry.is-vlk strong,
.shop-panel.is-trade-market #trade-stock-name.is-vlk,
.shop-panel.is-trade-market #trade-symbol.is-vlk { color: #c58bff; }
.shop-panel.is-trade-market .trade-company-entry.is-hnm > span:first-child,
.shop-panel.is-trade-market .trade-company-entry.is-hnm strong,
.shop-panel.is-trade-market #trade-stock-name.is-hnm,
.shop-panel.is-trade-market #trade-symbol.is-hnm { color: #f1d85d; }
.pixel-flag { position: relative; display: inline-block; width: 26px; height: 13px; margin-left: 5px; vertical-align: -.13em; image-rendering: pixelated; overflow: hidden; border: 1px solid #070908; box-shadow: 2px 2px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.2); }
.pixel-flag.flag-us { background: repeating-linear-gradient(to bottom, #b22234 0 1px, #f5f2df 1px 2px); }
.pixel-flag.flag-us::before { position: absolute; inset: 0 auto auto 0; width: 11px; height: 7px; content: ""; background: #3c3b6e; }
.pixel-flag.flag-us::after { position: absolute; top: 1px; left: 1px; width: 1px; height: 1px; content: ""; background: #fff; box-shadow: 3px 0 #fff, 6px 0 #fff, 1px 2px #fff, 4px 2px #fff, 7px 2px #fff, 0 4px #fff, 3px 4px #fff, 6px 4px #fff; }
.pixel-flag.flag-de { background: linear-gradient(to bottom, #151515 0 33.333%, #dd3138 33.333% 66.666%, #ffce00 66.666% 100%); }
.pixel-flag.flag-jp { background: #f5f2e5; }
.pixel-flag.flag-jp::after { position: absolute; top: 2px; left: 9px; width: 8px; height: 8px; content: ""; background: #bc002d; clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%); }
.shop-panel.is-trade-market .trade-company-entry small { color: #ffffff; font-size: clamp(7px, .85vw, 10px); }
.shop-panel.is-trade-market .trade-company-stats { grid-row: 1 / span 2; grid-column: 3; display: grid; align-self: center; justify-items: end; gap: 1px; font-style: normal; }
.shop-panel.is-trade-market .trade-company-stats b { color: #e8ece3; font-size: clamp(9px, 1.2vw, 15px); }
.shop-panel.is-trade-market .trade-company-stats i { color: #ef6352; font-size: clamp(7px, .9vw, 11px); font-style: normal; font-weight: 700; }
.shop-panel.is-trade-market .trade-company-stats i.is-negative { color: #5598ef; }
.shop-panel.is-trade-market .trade-company-stats em { color: #aebba8; font-size: clamp(6px, .72vw, 9px); font-style: normal; }
.shop-panel.is-trade-market .trade-holdings strong { color: #f3eee4; font-size: clamp(19px, 3.2vw, 38px); line-height: .9; }
.shop-panel.is-trade-market .trade-holdings #trade-unrealized-profit { margin-top: 4px; color: #ef6352; font-size: clamp(10px, 1.5vw, 18px); font-weight: 800; line-height: 1; }
.shop-panel.is-trade-market .trade-holdings #trade-unrealized-profit.is-negative { color: #5598ef; }
.shop-panel.is-trade-market .trade-quantity > div { min-height: 22px; }
.shop-panel.is-trade-market .trade-quantity input { font-size: clamp(12px, 1.45vw, 17px); }