/* ============================================================
 * style.css — 车库（GARAGE）· 全园车辆中心
 * NFS 竞速风：暗色档案墙 + 斜切卡片 + 青柠主色
 * 基元（背景光效/幕布/按钮）来自 ../../css/nfs-base.css
 * ============================================================ */

:root {
  --g-acc: #84cc16;          /* 车库青柠主色（与公园地图一致） */
  --g-acc2: #ffb020;
  --g-ink: #eaf6ff;
  --g-line: #22384c;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  background: #04070c; color: var(--g-ink);
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
button, input { font-family: inherit; }

#gApp { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* ── 标题栏 ── */
#gTb {
  height: 54px; flex: 0 0 54px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; position: relative; z-index: 50;
  background: linear-gradient(180deg, #0e1a28, #0a1420);
  border-bottom: 1px solid var(--g-line);
}
.g-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.g-logo {
  width: 34px; height: 34px; display: grid; place-items: center; font-size: 18px;
  background: rgba(132, 204, 22, .12); border: 1px solid rgba(132, 204, 22, .5); border-radius: 8px;
  box-shadow: 0 0 14px rgba(132, 204, 22, .25);
}
.g-brand .l1 { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.g-brand .l1 b { font-size: 16.5px; color: #fff; }
.g-brand .l1 .cn { font-size: 13px; color: var(--g-acc); letter-spacing: 2px; }
.g-brand small { display: block; font-family: Consolas, monospace; font-size: 10px; letter-spacing: 2px; color: #527a93; }
.g-tb-right { display: flex; align-items: center; gap: 10px; }
.g-chip {
  font-family: Consolas, monospace; font-size: 12px; color: #cfe8b0;
  border: 1px solid rgba(132, 204, 22, .4); background: rgba(132, 204, 22, .07);
  padding: 5px 11px; border-radius: 3px; white-space: nowrap;
}
.g-btn {
  background: #182231; border: 1px solid #33445c; color: #b6cadf;
  padding: 6px 13px; border-radius: 3px; cursor: pointer; font-size: 13px; white-space: nowrap;
}
.g-btn:hover { border-color: var(--g-acc); color: #d9f99d; }
#gAddBtn { border-color: rgba(132, 204, 22, .55); color: #d9f99d; background: rgba(132, 204, 22, .1); }

/* ── 主体 ── */
#gMain { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.g-head { padding: 18px 22px 10px; }
.g-title { font-size: clamp(26px, 4vw, 40px); font-weight: 900; font-style: italic; letter-spacing: 3px;
  color: #fff; transform: skewX(-6deg); text-shadow: 0 0 26px rgba(132, 204, 22, .4); }
.g-title b { font-size: 14px; font-weight: 700; letter-spacing: 3px; color: var(--g-acc); margin-left: 14px; vertical-align: middle; }
.g-sub { margin-top: 6px; font-family: Consolas, monospace; font-size: 11.5px; letter-spacing: 2px; color: #527a93; }

/* ── 车辆墙 ── */
#gWall {
  flex: 1; overflow-y: auto; padding: 8px 22px 26px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px; align-content: start;
}
#gWall::-webkit-scrollbar { width: 8px; }
#gWall::-webkit-scrollbar-thumb { background: #1d2f42; border-radius: 4px; }

.g-car {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(165deg, rgba(13, 26, 40, .94), rgba(8, 14, 22, .96));
  border: 1.5px solid #24425a; border-radius: 10px; overflow: hidden;
  transform: skewX(-1.5deg);
  opacity: 0; animation: gIn .5s cubic-bezier(.2, .9, .3, 1.2) forwards;
  animation-delay: calc(var(--d) * 70ms);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
@keyframes gIn { from { opacity: 0; transform: skewX(-1.5deg) translateY(20px); } to { opacity: 1; transform: skewX(-1.5deg); } }
.g-car:hover { border-color: var(--g-acc); box-shadow: 0 8px 26px rgba(0, 0, 0, .5), 0 0 18px rgba(132, 204, 22, .18); transform: skewX(-1.5deg) translateY(-3px); }
.g-car.off { border-color: #3a4a5c; }
.g-car.off .g-cv, .g-car.off .g-info b { opacity: .35; filter: grayscale(.85); }
.g-car.builtin::before {
  content: 'FACTORY'; position: absolute; right: -26px; top: 12px; z-index: 2;
  font-family: Consolas, monospace; font-size: 9px; letter-spacing: 2px; color: #0a121c;
  background: rgba(132, 204, 22, .8); padding: 2px 30px; transform: rotate(35deg);
}
.g-cv { height: 118px; display: grid; place-items: center; background:
  linear-gradient(rgba(34, 211, 238, .04) 1px, transparent 1px),
  linear-gradient(90deg, rgba(34, 211, 238, .04) 1px, transparent 1px),
  radial-gradient(80% 100% at 50% 0%, rgba(132, 204, 22, .05), transparent);
  background-size: 22px 22px, 22px 22px, auto; }
.g-cv canvas { max-width: 92%; max-height: 96px; }
.g-cv .ph { font-family: Consolas, monospace; font-size: 11px; color: #3d5a72; letter-spacing: 2px; }

.g-info { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.g-nm { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.g-nm b { font-size: 17px; color: #fff; letter-spacing: 1px; }
.g-nm span { font-family: Consolas, monospace; font-size: 10px; letter-spacing: 2px; color: #6f9ab3; }
.g-dim { font-family: Consolas, monospace; font-size: 11.5px; color: #9dbccb; }
.g-dim b { color: var(--g-acc); font-size: 14px; margin-left: 2px; }   /* Cd 数值 */
.g-desc { font-size: 11.5px; line-height: 1.6; color: #62809a; min-height: 18px; }

.g-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; }
.g-brow { display: flex; align-items: center; gap: 6px; font-family: Consolas, monospace; font-size: 9.5px; color: #62809a; }
.g-brow label { width: 34px; letter-spacing: 1px; }
.g-bar { flex: 1; height: 6px; background: #0d1a28; border: 1px solid #1d3145; position: relative; }
.g-bar i { position: absolute; inset: 0; width: var(--w, 50%); background: linear-gradient(90deg, #3f6212, var(--g-acc)); box-shadow: 0 0 8px rgba(132, 204, 22, .35); }
.g-brow em { font-style: normal; width: 20px; text-align: right; color: #a3c47d; }

/* 车辆管理（新增/编辑/删除/排序）在统一后台 carpark/admin.html 完成，本页无操作按钮 */
.g-badge { display: none; }

.g-foot { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 12px; padding: 8px 22px 12px;
  font-size: 12px; color: #527a93; border-top: 1px solid #12202e; flex-wrap: wrap; }
.g-credit { font-family: Consolas, monospace; font-size: 11px; letter-spacing: 1px; }

/* 卡片可点击查看档案 */
.g-car { cursor: pointer; }
.g-more {
  margin-top: 2px; font-family: Consolas, monospace; font-size: 10.5px; letter-spacing: 1px;
  color: var(--g-acc); opacity: .75; transition: opacity .15s;
}
.g-car:hover .g-more { opacity: 1; }

/* ── 原型车档案弹层 ── */
.g-modal { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center;
  background: rgba(3, 7, 12, .78); backdrop-filter: blur(3px); }
.g-modal.on { display: flex; }
.g-dbox {
  position: relative; width: min(880px, 94vw); max-height: 90vh; overflow-y: auto;
  background: linear-gradient(165deg, #0e1a26 0%, #0a121c 55%, #070d15 100%);
  border: 1px solid var(--g-line); border-top: 3px solid var(--g-acc);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
.g-dtl { position: relative; padding: 24px 28px 26px; }
#gDtlClose { position: absolute; right: 14px; top: 12px; z-index: 5; cursor: pointer;
  background: none; border: 1px solid #24425a; color: #7fa3bd; border-radius: 4px;
  padding: 4px 11px; font-size: 13px; }
#gDtlClose:hover { border-color: var(--g-acc); color: #d9f99d; }
.g-dtag { font-family: Consolas, monospace; font-size: 11px; letter-spacing: 4px; color: var(--g-acc2);
  border: 1px solid rgba(255, 176, 32, .5); background: rgba(255, 176, 32, .08);
  display: inline-block; padding: 4px 14px; transform: skewX(-10deg); }
.g-dtitle { margin-top: 14px; font-size: clamp(26px, 4.2vw, 38px); font-weight: 900; font-style: italic;
  letter-spacing: 2px; color: #fff; transform: skewX(-6deg);
  text-shadow: 0 0 26px rgba(132, 204, 22, .45), 0 4px 0 rgba(6, 20, 32, .9); }
.g-den { margin-top: 4px; font-family: Consolas, monospace; font-size: 11.5px; letter-spacing: 3px; color: #6f9ab3; }
.g-dbody { display: grid; grid-template-columns: 340px 1fr; gap: 22px; margin-top: 18px; }
.g-dleft { display: flex; flex-direction: column; gap: 12px; }
/* 真车照片框（有档案照片显示真车；自定义车回退 mini 抠图） */
.g-dpv { background:
  linear-gradient(rgba(132, 204, 22, .05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(132, 204, 22, .05) 1px, transparent 1px), #0a141f;
  background-size: 24px 24px; border: 1px solid #1d3145; border-radius: 8px;
  display: grid; place-items: center; overflow: hidden; }
.g-dpv img { display: block; width: 100%; max-height: 200px; object-fit: contain; }
.g-dpv canvas { max-width: 96%; max-height: 150px; }
.g-dpcredit { margin-top: 7px; font-family: Consolas, monospace; font-size: 9.5px; letter-spacing: 1px;
  color: #527a93; border-left: 3px solid #2c4a63; padding-left: 8px; min-height: 12px; }
.g-dmtag { font-family: Consolas, monospace; font-size: 9.5px; letter-spacing: 2px; color: #527a93;
  border-left: 3px solid var(--g-acc); padding-left: 8px; margin-bottom: 8px; }
/* 弹层左栏：MINI 在档数据面板（青柠边），与右栏原型资料（琥珀标签）区分 */
.g-dmini { margin-top: 2px; padding: 12px 14px 13px; border-radius: 8px;
  background: linear-gradient(165deg, rgba(13, 26, 40, .92), rgba(8, 14, 22, .95));
  border: 1px solid rgba(132, 204, 22, .28); }
.g-drtag { font-family: Consolas, monospace; font-size: 9.5px; letter-spacing: 2px; color: var(--g-acc2);
  border-left: 3px solid var(--g-acc2); padding-left: 8px; margin-bottom: 10px; }
/* 弹层照片回退到 mini 抠图时，标签切成青柠「车库在档」身份 */
.g-drtag.mini { color: #a3c47d; border-left-color: var(--g-acc); }
.g-dnm { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.g-dnm b { font-size: 19px; color: #fff; }
.g-dnm span { font-family: Consolas, monospace; font-size: 10px; letter-spacing: 2px; color: #6f9ab3; }
.g-drow { margin-top: 8px; font-family: Consolas, monospace; font-size: 12.5px; color: #9dbccb; }
.g-drow b { color: var(--g-acc); font-size: 14px; }
.g-drow .sep { margin: 0 8px; color: #3d5a72; }
.g-dright { min-width: 0; }
.g-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.g-chip { font-family: Consolas, monospace; font-size: 11px; letter-spacing: 1px; color: #9fd8ea;
  border: 1px solid #2c4a63; background: rgba(34, 211, 238, .06); padding: 4px 12px; border-radius: 20px; }
.g-chip.hot { color: #ffe3ad; border-color: rgba(255, 176, 32, .5); background: rgba(255, 176, 32, .07); }
.g-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.g-spec { background: #0b1622; border: 1px solid #1d3145; border-radius: 6px; padding: 8px 12px; }
.g-spec label { display: block; font-family: Consolas, monospace; font-size: 9.5px; letter-spacing: 2px; color: #527a93; }
.g-spec span { display: block; margin-top: 3px; font-size: 13px; color: #d9ecf8; line-height: 1.45; }
.g-story { font-size: 13.5px; line-height: 1.85; color: #b9d4e4; text-align: justify; }
.g-facts { list-style: none; margin-top: 12px; border-top: 1px dashed #1d3145; padding-top: 12px; }
.g-facts li { font-size: 12.5px; line-height: 1.7; color: #8fb5cc; padding: 3px 0; }
.g-facts li:first-letter { color: var(--g-acc); }

@media (max-width: 760px) {
  .g-dbody { grid-template-columns: 1fr; }
  .g-specs { grid-template-columns: 1fr; }
  .g-dtl { padding: 18px 16px 20px; }
}

/* ── 轻提示 ── */
#gToast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(20px);
  z-index: 400; padding: 10px 22px;
  background: linear-gradient(165deg, #14212f, #0b141e); border: 1px solid rgba(132, 204, 22, .55);
  color: #d9f99d; font-size: 14px; letter-spacing: 1px; white-space: nowrap;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
#gToast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 640px) {
  .g-brand small { display: none; }
  #gWall { padding: 8px 12px 20px; }
  .g-head { padding: 14px 14px 6px; }
  /* 竖屏顶栏：品牌独占一行、chip 与管理/公园按钮居下右对齐，消除重叠 */
  #gTb { flex-wrap: wrap; height: auto; padding: 6px 10px; row-gap: 6px; }
  .g-brand { flex: 1 1 auto; min-width: 0; }
  .g-tb-right { flex: 1 1 100%; justify-content: flex-end; gap: 6px; }
}


/* ═══ 英雄车台（大圆台 · 滑动渐变） ═══ */
#gWall.g-hero { position: relative; flex: 1 1 auto; min-height: 0; display: block; overflow: hidden; }
.g-hero-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -56%);
  width: min(600px, 84%); display: none; text-align: center; cursor: pointer; z-index: 2; }
.g-hero-card.hero { display: block; }
.g-hero-card canvas { width: 100%; max-height: 24vh; object-fit: contain; display: block;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.55)); }
.g-hero-nm { margin-top: 2px; }
.g-hero-nm b { font-size: 26px; color: #fff; letter-spacing: 1px; }
.g-hero-nm span { font-family: Consolas, monospace; font-size: 12px; color: #6f9ab3; margin-left: 10px; letter-spacing: 2px; }
/* 一句话简介：最多两行，超出省略 */
.g-hero-desc { margin: 6px auto 0; max-width: 92%; font-size: 12.5px; line-height: 1.6; color: #8fb5cc;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── MINI 在档数据面板（青柠台面身份；区别于弹层的琥珀「原型车档案」） ── */
.g-hero-panel { margin: 12px auto 0; width: min(560px, 100%); text-align: left;
  padding: 12px 16px 13px; border-radius: 10px;
  background: linear-gradient(165deg, rgba(13, 26, 40, .92), rgba(8, 14, 22, .95));
  border: 1px solid rgba(34, 211, 238, .3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45), inset 0 0 24px rgba(34, 211, 238, .04); }
.g-hero-ptag { font-family: Consolas, monospace; font-size: 9.5px; letter-spacing: 2px; color: #52d8f8;
  border-left: 3px solid #22d3ee; padding-left: 8px; margin-bottom: 10px; }
.g-hero-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.g-hspec { min-width: 0; background: #0b1622; border: 1px solid #1d3145; border-radius: 6px; padding: 7px 10px; }
.g-hspec label { display: block; font-family: Consolas, monospace; font-size: 9px; letter-spacing: 1px; color: #527a93; white-space: nowrap; }
.g-hspec span { display: block; margin-top: 4px; font-family: Consolas, monospace; font-size: 12.5px; color: #d9ecf8; white-space: nowrap; }
.g-hspec span b { font-weight: 700; color: #52d8f8; font-size: 14px; }
.g-hero-bars { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 18px; }
.g-hero-more { display: inline-block; margin-top: 12px; padding: 6px 18px; cursor: pointer;
  font-family: Consolas, monospace; font-size: 11.5px; letter-spacing: 1px; color: #52d8f8;
  border: 1px solid rgba(34, 211, 238, .45); background: rgba(34, 211, 238, .07); border-radius: 3px;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  transition: border-color .15s, background .15s, box-shadow .15s; }
.g-hero-card:hover .g-hero-more { border-color: #22d3ee; background: rgba(34, 211, 238, .14); box-shadow: 0 0 14px rgba(34, 211, 238, .25); }
.g-hero-stage { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.g-hero-arrow { pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%) skewX(-10deg);
  width: 48px; height: 64px; font-size: 30px; line-height: 1; cursor: pointer;
  background: rgba(16,28,42,.88); color: #cfe4f2; border: 1px solid #2c4a63; border-radius: 6px;
  transition: border-color .15s, color .15s; }
.g-hero-arrow:hover { border-color: #22d3ee; color: #22d3ee; }
.g-hero-arrow-l { left: 14px; }
.g-hero-arrow-r { right: 14px; }
.g-hero-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 10px; z-index: 5; }
.g-hero-dots i { width: 11px; height: 11px; border-radius: 50%; background: #24425a; cursor: pointer; transition: all .2s; }
.g-hero-dots i.on { background: #22d3ee; box-shadow: 0 0 9px rgba(34,211,238,.65); transform: scale(1.2); }
.g-hero-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #527a93; letter-spacing: 2px; }
.g-hero-card.in-r { animation: gHeroInR .34s cubic-bezier(.2,.8,.3,1) both; }
.g-hero-card.in-l { animation: gHeroInL .34s cubic-bezier(.2,.8,.3,1) both; }
.g-hero-card.out-l { animation: gHeroOutL .2s ease both; }
.g-hero-card.out-r { animation: gHeroOutR .2s ease both; }
@keyframes gHeroInR { from { opacity: 0; transform: translate(-50%, -56%) translateX(90px); } to { opacity: 1; transform: translate(-50%, -56%) translateX(0); } }
@keyframes gHeroInL { from { opacity: 0; transform: translate(-50%, -56%) translateX(-90px); } to { opacity: 1; transform: translate(-50%, -56%) translateX(0); } }
@keyframes gHeroOutL { from { opacity: 1; transform: translate(-50%, -56%) translateX(0); } to { opacity: 0; transform: translate(-50%, -56%) translateX(-90px); } }
@keyframes gHeroOutR { from { opacity: 1; transform: translate(-50%, -56%) translateX(0); } to { opacity: 0; transform: translate(-50%, -56%) translateX(90px); } }

/* ── 英雄车台响应式：矮屏压缩 / 窄屏规格两列 ── */
@media (max-height: 800px) {
  .g-hero-card canvas { max-height: 19vh; }
  .g-hero-desc { -webkit-line-clamp: 1; }
  .g-hero-panel { margin-top: 9px; padding: 10px 14px 11px; }
  .g-hero-more { margin-top: 9px; }
}
@media (max-width: 560px) {
  .g-hero-card { width: 92%; }
  .g-hero-specs { grid-template-columns: repeat(2, 1fr); }
  .g-hero-nm b { font-size: 21px; }
  .g-hero-desc { max-width: 100%; }
}

/* ── 特别参照型号角标（歼-20 爱国主义教育） ── */
.g-hero-card { position: absolute; }
.g-hero-ref { position: absolute; right: 14px; top: 4px; z-index: 2; font-style: normal;
  font-size: 11px; letter-spacing: 1px; color: #ffd76a;
  border: 1px solid rgba(255, 176, 32, .5); background: rgba(255, 176, 32, .1);
  padding: 2px 9px; border-radius: 3px; transform: skewX(-6deg); }
.g-hero-note { margin-top: 9px; font-size: 10.5px; color: #527a93; letter-spacing: 1px; }
.rc-car { position: relative; }
.rc-car-ref { position: absolute; top: 8px; left: 12px; z-index: 2; font-style: normal;
  font-size: 10.5px; letter-spacing: 1px; color: #ffd76a;
  border: 1px solid rgba(255, 176, 32, .5); background: rgba(20, 16, 8, .72);
  padding: 2px 8px; border-radius: 3px; }

/* ═══ 车队车库主题（PIT GARAGE） ═══ */
.pit-strip { position: relative; flex: 0 0 9px; height: 9px; opacity: .5;
  background: conic-gradient(#e9edf2 25%, #101418 0 50%, #e9edf2 0 75%, #101418 0) 0 0 / 14px 14px; }
.pit-tag { display: inline-block; margin-left: 12px; padding: 2px 10px; vertical-align: middle;
  font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: 3px;
  color: #d9f99d; border: 1px solid rgba(132, 204, 22, .55); background: rgba(132, 204, 22, .1);
  transform: skewX(-8deg); }

/* ── 墙面装饰：工程师团队合影相框（挂在车库墙上，纯装饰不参与交互） ── */
.wall-crew { position: absolute; z-index: 1; left: 2.6%; top: 13.5%;
  width: clamp(150px, 17%, 240px); margin: 0; transform: rotate(-2.4deg);
  background: linear-gradient(170deg, #151d28, #0b111a);
  border: 3px solid #33465c; border-radius: 4px;
  padding: 7px 7px 9px; pointer-events: none;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .62), 0 0 0 1px rgba(34, 211, 238, .08); }
.wall-crew::before { content: ''; position: absolute; top: -7px; left: 50%; width: 8px; height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, #46607a, #1d2c3c); }
.wall-crew img { display: block; width: 100%; border-radius: 2px; }
.wall-crew figcaption { padding-top: 6px; text-align: center;
  font-family: Consolas, monospace; font-size: 9px; letter-spacing: 2px; color: #62809a; }
.wall-crew figcaption b { display: block; margin-bottom: 2px; font-size: 10.5px;
  letter-spacing: 1.5px; color: #d9f99d; }
@media (max-width: 1100px) { .wall-crew, .ps-clock { display: none; } }

/* ─── 车库场景装饰：卷帘门 / 桁架灯带 / 工具墙 / 轮胎堆 / 告示牌 / pit 位 ─── */
.pit-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ps-truss { position: absolute; top: 0; left: 0; right: 0; height: 3%;
  background: repeating-linear-gradient(78deg, #1a2532 0 12px, #243244 12px 24px);
  border-bottom: 2px solid #0c1420; }
.ps-light { position: absolute; top: 3.6%; height: 4px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(236, 244, 250, .8), rgba(236, 244, 250, .1));
  box-shadow: 0 0 20px 5px rgba(205, 235, 255, .1); }
.ps-light.l1 { left: 12%; width: 16%; }
.ps-light.l2 { left: 42%; width: 16%; }
.ps-light.l3 { left: 72%; width: 16%; }
/* 卷帘大门（居中放大） */
.ps-door { position: absolute; left: 50%; top: 7%; transform: translateX(-50%);
  width: min(600px, 54vw); height: 34%;
  background: repeating-linear-gradient(180deg, #17212d 0 16px, #121a24 16px 18px, #1d2836 18px 32px, #0f1721 32px 34px);
  border: 2px solid #0c1420; border-bottom: none; border-radius: 8px 8px 0 0;
  box-shadow: inset 0 -24px 44px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(34, 211, 238, .05); }
/* 队标：直接"印"在门板上——门板横向凹槽透过队标（mask 与门板槽位对齐），浑然一体 */
.ps-door-logo { position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  width: clamp(150px, 36%, 230px);
  mix-blend-mode: screen; opacity: .38;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 24px, rgba(0, 0, 0, .62) 24px 26px, #000 26px 58px, rgba(0, 0, 0, .68) 58px 60px);
  mask-image: repeating-linear-gradient(180deg, #000 0 24px, rgba(0, 0, 0, .62) 24px 26px, #000 26px 58px, rgba(0, 0, 0, .68) 58px 60px); }
/* 比赛钟：挂合影相框左上方，指针走真实时间 */
/* 指针变量 --hh/--mh/--ss 由主页脚本每秒刷新驱动 */
.ps-clock { position: absolute; right: 20%; top: 8%; width: clamp(44px, 4.6vw, 62px); aspect-ratio: 1;
  border-radius: 50%; border: 3px solid #e9edf2; background: #0e1620;
  box-shadow: 0 0 0 3px #0a111b, 0 10px 22px rgba(0, 0, 0, .5); }
.ps-clock i { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; border-radius: 2px; }
.ps-clock .hh { width: 3px; height: 26%; margin-left: -1.5px; background: #e9edf2;
  transform: rotate(var(--hh, 0deg)); }
.ps-clock .mh { width: 2px; height: 37%; margin-left: -1px; background: #d9f99d;
  transform: rotate(var(--mh, 0deg)); }
.ps-clock .ss { width: 1.5px; height: 43%; margin-left: -.75px; background: #ff5a4e;
  transform: rotate(var(--ss, 0deg)); }
.ps-clock::before { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  border-radius: 50%; background: #e9edf2; transform: translate(-50%, -50%); z-index: 2; }
.ps-tools { position: absolute; left: 2%; top: 20%; width: 17%; height: 20%;
  border: 2px solid #22303f; border-radius: 4px;
  background:
    radial-gradient(rgba(159, 216, 234, .16) 1.6px, transparent 2.2px) 3px 3px / 16px 16px,
    linear-gradient(160deg, #101a26, #0b121c); }
/* 墙脚警戒边条 */
.ps-skirt { position: absolute; top: 42%; left: 0; right: 0; height: 8px; opacity: .55;
  background: conic-gradient(#e9edf2 25%, #101418 0 50%, #e9edf2 0 75%, #101418 0) 0 0 / 12px 12px; }
/* 透视地面 */
.ps-floorwrap { position: absolute; left: -60%; right: -60%; top: 42.5%; height: 57.5%;
  transform: perspective(430px) rotateX(56deg); transform-origin: 50% 0;
  background:
    linear-gradient(rgba(34, 211, 238, .08) 1.5px, transparent 1.5px) 0 0 / 100% 36px,
    linear-gradient(90deg, rgba(34, 211, 238, .06) 1.5px, transparent 1.5px) 0 0 / 72px 100%,
    radial-gradient(120% 90% at 50% 0%, rgba(13, 22, 34, .5), rgba(4, 7, 12, .96) 80%); }
/* 地面件：工具柜 / 轮胎堆 / 灭火器 / 斜标牌 / pit 位（按透视地面画框） */
.ps-cab { position: absolute; left: 2.5%; top: 45%; width: 13.5%; height: 11.5%;
  background: linear-gradient(180deg, #93362f, #611d19); border-radius: 3px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .08), 0 12px 20px rgba(0, 0, 0, .5); }
.ps-cab::before { content: ''; position: absolute; inset: 14% 7%;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .45) 0 2px, transparent 2px 30%); }
.ps-tyres { position: absolute; left: 16.5%; top: 49%; width: clamp(52px, 6.5vw, 92px); }
.ps-tyres i { display: block; height: clamp(15px, 1.9vw, 25px); border-radius: 50%;
  background: radial-gradient(closest-side, #04070b 52%, #1c2530 58%, #2c3846 66%, #0d131b 74%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .55); }
.ps-tyres i + i { margin-top: -32%; }
.ps-board { position: absolute; right: 2.5%; top: 48%; width: clamp(92px, 9vw, 132px);
  height: clamp(56px, 6.5vw, 92px);
  background: linear-gradient(180deg, #101c2c, #0b141e); border: 2px solid #2c4256; border-radius: 4px;
  box-shadow: 0 12px 22px rgba(0, 0, 0, .55); transform: perspective(320px) rotateY(-8deg); }
.ps-board::before { content: 'MINI RACING'; position: absolute; inset: 10px 6px auto; text-align: center;
  font-family: Consolas, monospace; font-weight: 900; font-style: italic; font-size: 11px;
  letter-spacing: 1px; color: #d9f99d; }
.ps-board::after { content: ''; position: absolute; left: 50%; bottom: -13px; width: 6px; height: 15px;
  transform: translateX(-50%) skewX(-12deg); background: #33465c; }
.ps-hatch { position: absolute; right: 17%; top: 56%; width: 11%; height: 16%;
  border: 1px solid rgba(255, 214, 102, .22); transform: perspective(380px) rotateX(42deg);
  background: repeating-linear-gradient(45deg, rgba(255, 214, 102, .13) 0 9px, transparent 9px 18px); }
.ps-pad { position: absolute; left: 50%; top: 45.5%; width: min(500px, 50vw); height: 37%;
  transform: translateX(-50%); border: 2px solid rgba(255, 214, 102, .32); border-radius: 14px;
  background: radial-gradient(58% 46% at 50% 42%, rgba(34, 211, 238, .09), transparent 72%); }
.ps-pad::before, .ps-pad::after { content: ''; position: absolute; top: 8%; bottom: 8%; width: 3px;
  background: rgba(255, 214, 102, .16); border-radius: 2px; }
.ps-pad::before { left: 7%; }
.ps-pad::after { right: 7%; }
/* 工程师合影：挪至右墙高位（避让中央大门） */
.wall-crew { left: auto; right: 2.8%; top: 15%; transform: rotate(2.2deg); }