:root {
  --c-page: #0b1015;
  --c-surface: #131a22;
  --c-surface-2: #1a232e;
  --c-surface-3: #212c39;
  --c-border: #2e3a47;
  --c-border-strong: #56636f;
  --c-ink: #e9e4d8;
  --c-mut: #8d99a6;
  --c-accent: #d9a441;
  --c-accent-ink: #f0c979;
  --c-accent-soft: rgb(217 164 65 / 0.14);
  --c-accent-dim: rgb(217 164 65 / 0.5);
  --c-on-accent: #241a07;
  --c-primary: #d9a441;
  --c-ok: #4fae6e;
  --c-ok-ink: #7cc79a;
  --c-ok-soft: rgb(79 174 110 / 0.16);
  --c-ok-glow: rgb(96 214 134 / 0.75);
  --c-ok-glow-out: rgb(96 214 134 / 0);
  --c-danger-glow: rgb(226 92 92 / 0.75);
  --c-danger-glow-out: rgb(226 92 92 / 0);
  --dim-faded: 0.35;
  --pulse-duration: 1.8s;
  --c-danger: #d05252;
  --c-danger-ink: #e08585;
  --c-danger-soft: rgb(208 82 82 / 0.16);
  --c-intel-red: #c4453e;
  --c-intel-blue: #4f7fd9;
  --c-intel-black: #15161a;
  --c-intel-black-edge: #9c8a5c;
  --c-card-face: #e7dfc9;
  --c-card-ink: #2a2620;
  --c-card-ink-soft: #574e3e;
  --c-card-name: #d5c9a8;
  --c-card-art: #ded4bb;
  --c-card-effect: #ddd3ba;
  --c-card-border: #4a4234;
  --c-backface: #223140;
  --c-backface-stripe: #2e4359;
  --backface-pattern: repeating-linear-gradient(
    -45deg,
    var(--c-backface),
    var(--c-backface) 0.4rem,
    var(--c-backface-stripe) 0.4rem,
    var(--c-backface-stripe) 0.8rem
  );
  /* 滿版內縮：基準 1vmin（≈短邊 1%），逐邊再與瀏海安全區取大值（viewport-fit=cover 下必要） */
  --app-inset: 1vmin;
  --app-inset-top: max(var(--app-inset), env(safe-area-inset-top, 0rem));
  --app-inset-right: max(var(--app-inset), env(safe-area-inset-right, 0rem));
  --app-inset-bottom: max(var(--app-inset), env(safe-area-inset-bottom, 0rem));
  --app-inset-left: max(var(--app-inset), env(safe-area-inset-left, 0rem));
  --top-icon-size: 2rem;
  --top-icon-gap: 0.35rem;
  --c-wait-spin: #a5dced;
  --c-card-fresh: #f0533f;
  --selfmark-stripe: rgb(58 48 30 / 0.16);
  --selfmark-pattern: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 0.4rem,
    var(--selfmark-stripe) 0.4rem,
    var(--selfmark-stripe) 0.8rem
  );
  --bw: 0.07rem;
  --bw-bold: 0.14rem;
  --radius-s: 0.3rem;
  --radius-m: 0.6rem;
  --radius-l: 1rem;
  --t-fast: 0.18s ease;
  --shadow-pop: 0 0.5rem 1.4rem rgb(0 0 0 / 0.55);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@keyframes target-pulse {
  0% {
    box-shadow: 0 0 0 var(--bw) var(--c-ok), 0 0 0 0.1rem var(--c-ok-glow);
  }
  70% {
    box-shadow: 0 0 0 var(--bw) var(--c-ok), 0 0 0 1rem var(--c-ok-glow-out);
  }
  100% {
    box-shadow: 0 0 0 var(--bw) var(--c-ok), 0 0 0 1rem var(--c-ok-glow-out);
  }
}

@keyframes target-armed-pulse {
  0% {
    box-shadow: 0 0 0 var(--bw) var(--c-danger), 0 0 0 0.1rem var(--c-danger-glow);
  }
  70% {
    box-shadow: 0 0 0 var(--bw) var(--c-danger), 0 0 0 1rem var(--c-danger-glow-out);
  }
  100% {
    box-shadow: 0 0 0 var(--bw) var(--c-danger), 0 0 0 1rem var(--c-danger-glow-out);
  }
}

html {
  font-size: min(2vh, 4vw);
}

@supports (height: 1dvh) {
  html {
    font-size: min(2dvh, 4vw);
  }
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--c-page);
  color: var(--c-ink);
  font-family: "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
}

button {
  font: inherit;
  color: inherit;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--c-border-strong) var(--c-surface-2);
}

*::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

*::-webkit-scrollbar-track {
  background: var(--c-surface-2);
}

*::-webkit-scrollbar-thumb {
  background: var(--c-border-strong);
  border-radius: 0.25rem;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--c-accent);
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}