/* 钢铁前线 II — 战时参谋部 / 战术地图重制版 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --bg: #0b0f0c;
  --bg-2: #121812;
  --panel: rgba(22, 30, 22, 0.92);
  --panel-edge: rgba(210, 195, 140, 0.22);
  --ink: #e8e4d4;
  --muted: #8f967c;
  --brass: #d4b56a;
  --brass-deep: #8a6e32;
  --olive: #6d7f4a;
  --olive-hi: #a3b878;
  --danger: #c45a45;
  --stamp: rgba(180, 50, 40, 0.85);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  --font-ui: "IBM Plex Sans", "PingFang SC", "Noto Sans SC", sans-serif;
  --font-display: "Noto Serif SC", "Songti SC", serif;
  --font-latin: "Bebas Neue", "Arial Narrow", sans-serif;
  --r: 0px;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  user-select: none;
}
#app { position: fixed; inset: 0; background: var(--bg); }
:fullscreen, :-webkit-full-screen { width: 100% !important; height: 100% !important; background: var(--bg); }
:fullscreen #app, :-webkit-full-screen #app { width: 100%; height: 100%; }

.screen {
  position: absolute; inset: 0;
  display: none; flex-direction: column;
  overflow: hidden;
}
.screen.active { display: flex; }

/* —— 金属冲压按钮 —— */
.btn {
  font-family: var(--font-ui);
  cursor: pointer;
  border: 1px solid rgba(210, 195, 140, 0.35);
  background:
    linear-gradient(180deg, rgba(55, 62, 48, 0.95), rgba(28, 34, 26, 0.98));
  color: var(--ink);
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -2px 0 rgba(0,0,0,0.35),
    0 2px 0 rgba(0,0,0,0.4);
  transition: filter .12s, border-color .12s, transform .08s;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.btn:hover {
  filter: brightness(1.08);
  border-color: rgba(212, 181, 106, 0.65);
}
.btn:active { transform: translateY(1px); filter: brightness(0.96); }
.btn-accent {
  background: linear-gradient(180deg, #e0c57a, #b8923e 55%, #8a6a28);
  border-color: #5a4418;
  color: #1a1408;
  text-shadow: 0 1px 0 rgba(255,230,160,0.35);
}
.btn-accent:hover { filter: brightness(1.06); }
.btn-ghost {
  background: linear-gradient(180deg, rgba(40,48,38,0.5), rgba(16,20,16,0.7));
  color: var(--muted);
}
.btn-block { width: 100%; margin-top: 12px; padding: 13px; }
.btn-sm { padding: 7px 12px; font-size: 12px; letter-spacing: 0.12em; }
.btn.hidden { display: none; }
.btn:disabled { opacity: .38; cursor: not-allowed; filter: none; }

.icon-btn {
  width: 42px; height: 42px;
  border: 1px solid rgba(210, 195, 140, 0.28);
  background: rgba(8, 12, 8, 0.55);
  color: var(--ink);
  cursor: pointer;
  font-size: 16px;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.icon-btn:hover { border-color: var(--brass); color: var(--brass); }
.icon-btn.active { color: var(--brass); border-color: var(--brass); }

.gold-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(212, 181, 106, 0.35);
  color: var(--brass);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.coin {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffe9a8, var(--brass) 55%, #6a4e18);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}

.bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(210, 195, 140, 0.18);
  background:
    linear-gradient(180deg, rgba(28, 36, 26, 0.98), rgba(12, 16, 12, 0.94)),
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(255,255,255,0.015) 40px 41px);
  z-index: 5;
}
.bar-left { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }
.bar-right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.bar-title {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: var(--ink);
  position: relative;
}
.bar-title::after {
  content: "";
  display: block;
  width: 42px; height: 2px;
  margin: 6px auto 0;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}

/* —— HOME：战术地图全屏 —— */
.home-stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: #0a0e0a;
}
.home-atmosphere {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 15%, rgba(90, 100, 55, 0.28), transparent 55%),
    radial-gradient(ellipse 100% 60% at 50% 110%, rgba(30, 40, 20, 0.7), transparent 50%),
    linear-gradient(180deg, #151c12 0%, #0c100c 45%, #070a07 100%);
}
.home-atmosphere::before {
  content: "";
  position: absolute; inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(180, 190, 140, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 190, 140, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
}
.home-atmosphere::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 30%, rgba(196, 90, 70, 0.08), transparent 25%),
    radial-gradient(circle at 82% 28%, rgba(106, 138, 186, 0.07), transparent 22%);
}
.home-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.home-hero-canvas {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(720px, 92vw);
  height: min(380px, 42vh);
  z-index: 2;
  pointer-events: none;
  opacity: 0.95;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.55));
}
.home-bar {
  position: relative; z-index: 4;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
}
.home-year {
  font-family: var(--font-latin);
  letter-spacing: 0.4em;
  color: var(--muted);
  font-size: 15px;
}
.home-bar-actions { display: flex; gap: 8px; }
.home-brand {
  position: relative; z-index: 4;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 0 20px 12px;
  pointer-events: none;
  animation: brandIn 0.85s ease both;
}
@keyframes brandIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.brand-mark {
  font-family: var(--font-latin);
  font-size: clamp(16px, 2.8vw, 26px);
  letter-spacing: 0.58em;
  text-indent: 0.58em;
  color: var(--brass);
  margin-bottom: 6px;
}
.brand-cn {
  font-family: var(--font-display);
  font-size: clamp(48px, 9.5vw, 92px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  line-height: 1;
  color: #f4f1e4;
  text-shadow: 0 3px 0 rgba(0,0,0,0.65), 0 24px 60px rgba(0,0,0,0.5);
}
.brand-ii {
  margin-top: 10px;
  font-family: var(--font-latin);
  font-size: clamp(18px, 3.2vw, 30px);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--olive-hi);
}
.brand-tag {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: rgba(200, 190, 150, 0.55);
  border: 1px solid rgba(196, 90, 70, 0.45);
  color: rgba(220, 120, 100, 0.9);
  padding: 4px 10px;
  display: inline-block;
  transform: rotate(-2deg);
}
.home-nations-wrap {
  position: relative; z-index: 4;
  padding: 8px 0 26px;
  background: linear-gradient(180deg, transparent, rgba(6,8,6,0.88) 28%);
}
.home-version {
  position: absolute;
  right: 16px;
  bottom: 12px;
  z-index: 6;
  font-family: var(--font-latin);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(200, 190, 150, 0.42);
  pointer-events: none;
}
.nations-label {
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.4em;
  margin-bottom: 12px;
}
.nation-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 22px 12px;
  scroll-snap-type: x proximity;
  justify-content: safe center;
}
.nation-rail::-webkit-scrollbar { height: 0; }
.nation-pill {
  flex: 0 0 auto;
  scroll-snap-align: center;
  min-width: 152px;
  padding: 14px 16px 12px;
  border: 1px solid rgba(210, 195, 140, 0.22);
  background:
    linear-gradient(160deg, rgba(48, 56, 40, 0.9), rgba(16, 20, 14, 0.95));
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: border-color .15s, transform .15s, box-shadow .15s;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}
.nation-pill:hover {
  border-color: rgba(212, 181, 106, 0.6);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(212,181,106,0.15);
}
.nation-pill .code {
  font-family: var(--font-latin);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--brass);
  margin-bottom: 4px;
}
.nation-pill h3 {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.16em;
  font-weight: 700;
}
.nation-pill small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.35;
}
.nation-pill .stripe {
  height: 3px; width: 40px; margin-bottom: 10px;
}

/* —— 机库 / 商店 / 战役 —— */
#screen-hangar, #screen-shop, #screen-campaign, #screen-lobby {
  background:
    radial-gradient(ellipse at 20% -10%, rgba(110, 120, 70, 0.14), transparent 40%),
    radial-gradient(ellipse at 90% 0%, rgba(90, 70, 40, 0.1), transparent 35%),
    linear-gradient(180deg, #121812, #0b0f0c);
}
.hangar-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(250px, 310px) 1fr;
  gap: 14px;
  padding: 14px 16px 16px;
  min-height: 0;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  box-shadow: var(--shadow);
  min-height: 0;
  position: relative;
}
.panel::before {
  content: "";
  position: absolute; left: 10px; right: 10px; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212,181,106,0.45), transparent);
}
.side-panel {
  display: flex; flex-direction: column;
  padding: 16px;
  overflow: hidden;
}
.main-panel {
  display: flex; flex-direction: column;
  padding: 16px;
  overflow: auto;
}
.panel-kicker {
  font-size: 11px;
  letter-spacing: 0.34em;
  color: var(--muted);
  margin-bottom: 12px;
}
.tank-list {
  flex: 1; overflow: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.tank-row {
  text-align: left;
  width: 100%;
  cursor: pointer;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.02);
  color: var(--ink);
  padding: 11px 12px;
  font-family: inherit;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: background .12s, border-color .12s;
}
.tank-row:hover { background: rgba(255,255,255,0.05); }
.tank-row.active {
  border-color: rgba(212, 181, 106, 0.5);
  background: rgba(212, 181, 106, 0.1);
}
.tank-row .name { display: block; font-weight: 650; letter-spacing: 0.05em; }
.tank-row .meta { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }

.preview-frame {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(100, 120, 70, 0.28), transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.5), transparent 45%),
    linear-gradient(180deg, #161c14, #0a0e0a);
  border: 1px solid rgba(210, 195, 140, 0.2);
  overflow: hidden;
  min-height: 220px;
}
.preview-frame::before {
  content: "ARMOR BAY";
  position: absolute; left: 12px; top: 10px; z-index: 2;
  font-family: var(--font-latin);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: rgba(212, 181, 106, 0.45);
}
.preview-frame::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.4)),
    linear-gradient(90deg, rgba(0,0,0,0.25), transparent 18%, transparent 82%, rgba(0,0,0,0.25));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}
#hangarTankCanvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(48vh, 440px);
}
.tank-dossier {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.stat-box {
  border: 1px solid rgba(210, 195, 140, 0.16);
  background: rgba(0,0,0,0.28);
  padding: 10px 12px;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.stat-box .k {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 4px;
}
.stat-box .v {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.04em;
}
.hangar-actions { display: flex; gap: 10px; margin-top: 14px; }

.shop-layout {
  flex: 1; overflow: auto;
  padding: 16px 18px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.shop-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px 20px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(210, 195, 140, 0.18);
  background: rgba(0,0,0,0.22);
}
.shop-tank {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.16em;
}
.shop-tank-canvas {
  display: block;
  width: min(280px, 100%);
  height: auto;
  border: 1px solid rgba(210, 195, 140, 0.2);
  background:
    radial-gradient(ellipse at 50% 60%, rgba(90,110,70,0.25), transparent 60%),
    #10140e;
}
.shop-preview {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
  max-width: 640px;
  padding-top: 4px;
}
.shop-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-tab {
  border: 1px solid rgba(210, 195, 140, 0.22);
  background: rgba(0,0,0,0.25);
  color: var(--muted);
  padding: 9px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.18em;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.shop-tab.active {
  color: #1a1408;
  border-color: var(--brass-deep);
  background: linear-gradient(180deg, #e0c57a, #b8923e);
}
.shop-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.shop-card {
  border: 1px solid rgba(210, 195, 140, 0.18);
  background: rgba(255,255,255,0.025);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 144px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.shop-card.equipped {
  border-color: rgba(212, 181, 106, 0.55);
  background: rgba(212, 181, 106, 0.08);
}
.shop-card.owned { border-color: rgba(143, 168, 106, 0.45); }
.shop-card h4 { font-size: 15px; letter-spacing: 0.06em; }
.shop-card .desc { flex: 1; font-size: 12px; color: var(--muted); line-height: 1.5; }
.shop-card .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.campaign-wrap, .lobby-wrap {
  flex: 1; overflow: auto;
  padding: 18px 22px 28px;
}
.lobby-wrap { max-width: 920px; margin: 0 auto; width: 100%; }
.lobby-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.lobby-mode {
  text-align: left;
  cursor: pointer;
  border: 1px solid rgba(210, 195, 140, 0.22);
  background: linear-gradient(180deg, rgba(44, 52, 40, 0.9), rgba(14, 18, 14, 0.96));
  color: inherit;
  font-family: inherit;
  padding: 20px 18px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: border-color .15s, transform .12s;
}
.lobby-mode:hover {
  border-color: rgba(212, 181, 106, 0.55);
  transform: translateY(-3px);
}
.lobby-mode h3 {
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  font-size: 20px;
  margin-bottom: 8px;
}
.lobby-mode p { color: var(--muted); font-size: 13px; letter-spacing: 0.05em; }
.campaign-note {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}
.mission-list { display: flex; flex-direction: column; gap: 10px; max-width: 780px; }
.mission-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid rgba(210, 195, 140, 0.18);
  background: linear-gradient(90deg, rgba(40,48,36,0.65), rgba(14,18,14,0.35));
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.mission-card.locked { opacity: 0.4; }
.mission-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.12em;
}
.mission-card .tip { margin-top: 6px; color: var(--muted); font-size: 13px; }
.mission-card .year {
  font-family: var(--font-latin);
  font-size: 28px;
  letter-spacing: 0.08em;
  color: var(--brass);
  text-align: right;
  margin-bottom: 8px;
}

/* —— battle —— */
#screen-battle { background: #080b08; touch-action: none; }
#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.battle-hud { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.battle-hud .btn, .battle-hud .gold-chip { pointer-events: auto; }
.hud-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: 14px;
}
.mission-banner {
  flex: 1; text-align: center;
  font-family: var(--font-display);
  letter-spacing: 0.18em;
  color: var(--ink);
  text-shadow: 0 2px 8px #000;
  padding-top: 8px;
}
.hud-bottom { position: absolute; left: 14px; right: 14px; bottom: 14px; }
.hp-wrap {
  height: 11px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.5);
  margin-bottom: 6px;
}
.hp-bar {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #5a7a32, #c4d48a);
  box-shadow: 0 0 12px rgba(140,180,80,0.3);
}
.hud-stats {
  color: #c8d0b8;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 3px #000;
}
.hit-vignette {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 90px rgba(160,40,30,0.55);
  transition: opacity .08s;
}
.hit-vignette.hit { opacity: 1; }

.overlay {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(6,8,6,0.78);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(5px);
}
.overlay.hidden { display: none; }
.overlay-card {
  width: min(420px, 92vw);
  background: linear-gradient(180deg, #252e24, #141a14);
  border: 1px solid rgba(210, 195, 140, 0.3);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.overlay-title {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 0.2em;
  margin-bottom: 14px;
}
.overlay-title.win { color: var(--olive-hi); }
.overlay-title.lose { color: var(--danger); }
.overlay-stats {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 18px;
}
.overlay-btns { display: flex; flex-direction: column; gap: 8px; }

.toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translateX(-50%);
  z-index: 50;
  background: rgba(10,14,10,0.94);
  border: 1px solid rgba(210, 195, 140, 0.35);
  color: var(--ink);
  padding: 10px 18px;
  letter-spacing: 0.1em;
  font-size: 13px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.toast.hidden { display: none; }

@media (max-width: 860px) {
  .hangar-layout { grid-template-columns: 1fr; }
  .tank-dossier { grid-template-columns: 1fr 1fr; }
  .brand-cn { letter-spacing: 0.1em; text-indent: 0.1em; }
  .shop-head { grid-template-columns: 1fr; }
  .home-hero-canvas { top: 38%; height: min(280px, 34vh); }
}