/* ==========================================================================
   PLANETARY DEFENSE · BRAND SYSTEM v1.1 · pd-tokens.css
   Single source of truth for every Planetary Defense website.
   Rule: never type a hex code, font name, radius or shadow in a site.
   Use these variables and classes. Missing something? Add it HERE first.
   Doc: "Planetary Defense Brand System" (sections refer to it).
   v1.1 (Oct 2026): game stat, shard and rank tokens; badge, tabs, icon button,
   tile, amount chip, asset card, modal, key/value, switch, select, stepper,
   countdown, empty state, planet chip, inset; selected/destructive states.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Saira:wdth,wght@50..125,100..900&family=Barlow:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap");

/* --------------------------------------------------------------------------
   1. TOKENS (doc sections 3, 4, 5, 8)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Core: void, hull, steel */
  --pd-void: #05080C;
  --pd-hull: #0A1018;
  --pd-plate: #101924;
  --pd-plate-hi: #172331;
  --pd-line: #223244;
  --pd-line-hi: #3A5670;
  --pd-chrome: #EEF3F6;
  --pd-steel-100: #C9D3DB;
  --pd-steel-300: #8C99A6;
  --pd-steel-500: #5C6A78;

  /* Signal and reward */
  --pd-cyan: #2FBCD8;      /* reactor cyan: act or live */
  --pd-cyan-hi: #5BE3F0;
  --pd-cyan-deep: #0A6683;
  --pd-amber: #F2A24B;     /* forge amber: earn or own */
  --pd-amber-hi: #F7BD7A;
  --pd-bronze: #A47E53;

  /* Planet accents: only in that planet's context */
  --pd-naron: #E58AA0;
  --pd-kavian: #C4835C;
  --pd-magor: #FF4D1F;
  --pd-veles: #3CCF95;
  --pd-eyeke: #8CCB45;
  --pd-neri: #E9CF4F;

  /* Status: always with an icon and a word */
  --pd-ok: #45D483;
  --pd-warn: #F7B500;
  --pd-alert: #F0473C;

  /* Rarity: only on NFT items, chests, rewards */
  --pd-r-common: #9AA5B1;
  --pd-r-uncommon: #5CC46B;
  --pd-r-rare: #3B9BFF;
  --pd-r-epic: #A86BFF;
  --pd-r-legendary: #F2A24B;
  --pd-r-mythic: #FF4F6D;

  /* Tokens */
  --pd-wax: #F89022;
  --pd-def: #2FBCD8;

  /* Context accent: cyan by default, the planet colour inside [data-planet] */
  --pd-accent: var(--pd-cyan);

  /* Metal edges (sampled from the logo chrome and the NFT card frame) */
  --pd-metal: linear-gradient(160deg, #F2F5F7 0%, #8D99A5 28%, #3E4853 50%, #B9C2CB 72%, #5B6672 100%);
  --pd-bronze-metal: linear-gradient(160deg, #E8C38F 0%, #A47E53 30%, #4F3720 52%, #C79A62 74%, #6E4B23 100%);

  /* Typography */
  --pd-font-display: "Saira", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --pd-font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --pd-font-data: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --pd-fs-hero: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --pd-fs-h1: clamp(1.875rem, 1.5rem + 1.4vw, 2.75rem);
  --pd-fs-h2: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --pd-fs-h3: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --pd-fs-body: 1rem;
  --pd-fs-small: 0.875rem;
  --pd-fs-label: 0.75rem;
  --pd-fs-data-xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);

  /* Shape: the PD cut (radius is always 0) */
  --pd-cut-s: 6px;
  --pd-cut-m: 12px;
  --pd-cut-l: 20px;

  /* Spacing (4px base) */
  --pd-sp-1: 4px;  --pd-sp-2: 8px;  --pd-sp-3: 12px; --pd-sp-4: 16px;
  --pd-sp-5: 24px; --pd-sp-6: 32px; --pd-sp-7: 48px; --pd-sp-8: 64px; --pd-sp-9: 96px;
  --pd-max: 1280px;

  /* Motion */
  --pd-t-fast: 120ms;
  --pd-t: 180ms;
  --pd-t-slow: 320ms;
  --pd-ease: cubic-bezier(.2, .8, .2, 1);

  /* The one glow per screen (apply .pd-glow to a WRAPPER, see section 5) */
  --pd-glow: drop-shadow(0 0 14px rgba(47, 188, 216, .45));
}

[data-planet="naron"]  { --pd-accent: var(--pd-naron); }
[data-planet="kavian"] { --pd-accent: var(--pd-kavian); }
[data-planet="magor"]  { --pd-accent: var(--pd-magor); }
[data-planet="veles"]  { --pd-accent: var(--pd-veles); }
[data-planet="eyeke"]  { --pd-accent: var(--pd-eyeke); }
[data-planet="neri"]   { --pd-accent: var(--pd-neri); }

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

html, body {
  background: var(--pd-void);
  color: var(--pd-steel-100);
  font-family: var(--pd-font-body);
  font-size: var(--pd-fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--pd-cyan-deep); color: var(--pd-chrome); }

:focus-visible { outline: 2px solid var(--pd-cyan); outline-offset: 2px; }

a { color: var(--pd-cyan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pd-cyan-hi); }

/* --------------------------------------------------------------------------
   3. TYPE
   -------------------------------------------------------------------------- */
.pd-hero-title, .pd-h1, .pd-h2 {
  font-family: var(--pd-font-display);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.08;
  color: var(--pd-chrome);
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: break-word;
  margin: 0;
}
.pd-hero-title { font-size: var(--pd-fs-hero); }
.pd-h1 { font-size: var(--pd-fs-h1); }
.pd-h2 { font-size: var(--pd-fs-h2); line-height: 1.14; }
.pd-h3 {
  font-family: var(--pd-font-display);
  font-stretch: 100%;
  font-weight: 700;
  font-size: var(--pd-fs-h3);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pd-chrome);
  overflow-wrap: break-word;
  word-break: break-word;
  margin: 0;
}
.pd-text { max-width: 68ch; margin: 0; overflow-wrap: break-word; }
.pd-small { font-size: var(--pd-fs-small); color: var(--pd-steel-300); }

/* Tactical label / eyebrow: // SECTOR 04 */
.pd-label {
  font-family: var(--pd-font-display);
  font-stretch: 75%;
  font-weight: 600;
  font-size: var(--pd-fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pd-steel-300);
  line-height: 1.25;
  overflow-wrap: break-word;
}
.pd-label--eyebrow::before { content: "// "; color: var(--pd-accent); }

/* Numbers: mono, tabular, integers only */
.pd-num {
  font-family: var(--pd-font-data);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--pd-chrome);
}
.pd-num--xl { font-size: var(--pd-fs-data-xl); font-weight: 700; line-height: 1; }
.pd-unit { color: var(--pd-steel-300); font-size: .8em; margin-left: .35em; }
.pd-num--def { color: var(--pd-def); }
.pd-num--wax { color: var(--pd-wax); }

/* --------------------------------------------------------------------------
   4. SHAPE: the PD cut (top-left + bottom-right)
   Clipped elements draw their edge as the element background and their
   fill as ::before, so the edge also follows the cut.
   -------------------------------------------------------------------------- */
.pd-btn, .pd-plate, .pd-frame, .pd-tag, .pd-field, .pd-alert,
.pd-icon-btn, .pd-tile, .pd-chip, .pd-asset, .pd-modal, .pd-tabs {
  --cut: var(--pd-cut-m);
  --edge-w: 1px;
  position: relative;
  isolation: isolate;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.pd-btn::before, .pd-plate::before, .pd-frame::before, .pd-tag::before, .pd-field::before, .pd-alert::before,
.pd-icon-btn::before, .pd-tile::before, .pd-chip::before, .pd-asset::before, .pd-modal::before, .pd-tabs::before {
  content: "";
  position: absolute;
  inset: var(--edge-w);
  z-index: -1;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background: var(--fill, var(--pd-hull));
}

/* Glow wrapper: clip-path hides box-shadow, so the glow lives on a parent */
.pd-glow { display: inline-block; filter: var(--pd-glow); }

/* --------------------------------------------------------------------------
   5. SURFACES (doc section 5)
   -------------------------------------------------------------------------- */
/* Plate: default container */
.pd-plate {
  background: var(--pd-line);
  padding: var(--pd-sp-5);
}
.pd-plate::before {
  background: linear-gradient(to bottom, rgba(255,255,255,.045), rgba(255,255,255,0) 2px), var(--fill, var(--pd-hull));
}
.pd-plate--raised { --fill: var(--pd-plate); }
.pd-plate--interactive { cursor: pointer; transition: background var(--pd-t-fast) var(--pd-ease); }
.pd-plate--interactive::before { transition: background var(--pd-t-fast) var(--pd-ease); }
.pd-plate--interactive:hover { --fill: var(--pd-plate); background: var(--pd-line-hi); }

/* Frame: forged, 1 or 2 per screen */
.pd-frame {
  --cut: var(--pd-cut-l);
  --edge-w: 2px;
  background: var(--pd-metal);
  padding: var(--pd-sp-6);
}
.pd-frame::after { /* light strip notch, as on the NFT card frames */
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 28%; height: 3px;
  transform: translateX(-50%);
  background: var(--pd-accent);
}
.pd-frame--bronze { background: var(--pd-bronze-metal); }
.pd-frame--bronze::after { background: var(--pd-amber); }

/* HUD: corner brackets, no fill. Data and overlays only. */
.pd-hud {
  --b: var(--pd-accent);
  --len: 14px;
  position: relative;
  padding: var(--pd-sp-5);
  background:
    linear-gradient(var(--b), var(--b)) top left / var(--len) 1px no-repeat,
    linear-gradient(var(--b), var(--b)) top left / 1px var(--len) no-repeat,
    linear-gradient(var(--b), var(--b)) top right / var(--len) 1px no-repeat,
    linear-gradient(var(--b), var(--b)) top right / 1px var(--len) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom left / var(--len) 1px no-repeat,
    linear-gradient(var(--b), var(--b)) bottom left / 1px var(--len) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom right / var(--len) 1px no-repeat,
    linear-gradient(var(--b), var(--b)) bottom right / 1px var(--len) no-repeat;
}
.pd-hud--lined { box-shadow: inset 0 0 0 1px rgba(58, 86, 112, .45); }

/* Planet or mission art with the void fade (the only background gradient) */
.pd-art {
  position: relative;
  background:
    linear-gradient(to bottom, rgba(5,8,12,0) 35%, rgba(5,8,12,.75) 70%, var(--pd-void) 100%),
    var(--pd-art-src, none) center / cover no-repeat,
    var(--pd-void);
}

/* Optional 3% tactical grid on the void */
.pd-grid-bg {
  background-image:
    linear-gradient(rgba(47,188,216,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,188,216,.035) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Divider with accent tick */
.pd-divider {
  height: 1px; border: 0; margin: var(--pd-sp-5) 0;
  background: linear-gradient(90deg, var(--pd-accent) 0 6px, var(--pd-line) 6px);
}

/* Locked state: hazard stripes */
.pd-locked { position: relative; }
.pd-locked::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(247,181,0,.08) 0 10px, transparent 10px 20px);
}

/* --------------------------------------------------------------------------
   6. COMPONENTS (doc section 6)
   -------------------------------------------------------------------------- */
/* Buttons: verb first, one primary per view */
.pd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pd-sp-2);
  min-height: 44px;
  max-width: 100%;
  padding: 6px var(--pd-sp-5);
  border: 0;
  background: var(--pd-cyan);
  --fill: var(--pd-cyan);
  color: var(--pd-void);
  font-family: var(--pd-font-display);
  font-stretch: 75%;
  font-weight: 700;
  font-size: .8125rem;
  line-height: 1.2;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  overflow-wrap: break-word;
  cursor: pointer;
  transition: transform var(--pd-t-fast) var(--pd-ease), color var(--pd-t-fast) var(--pd-ease);
}
.pd-btn > span { min-width: 0; }
.pd-btn::before { transition: background var(--pd-t-fast) var(--pd-ease); }
.pd-btn:hover { --fill: var(--pd-cyan-hi); background: var(--pd-cyan-hi); color: var(--pd-void); }
.pd-btn:active { transform: translateY(1px); --fill: var(--pd-cyan-deep); background: var(--pd-cyan-deep); color: var(--pd-chrome); }
.pd-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--pd-chrome); }
.pd-btn:focus-visible::before { inset: 3px; }

.pd-btn--ghost { background: var(--pd-cyan); --fill: var(--pd-hull); color: var(--pd-cyan); }
.pd-btn--ghost:hover { --fill: var(--pd-plate); background: var(--pd-cyan-hi); color: var(--pd-cyan-hi); }

.pd-btn--reward { background: var(--pd-amber); --fill: var(--pd-amber); }
.pd-btn--reward:hover { background: var(--pd-amber-hi); --fill: var(--pd-amber-hi); }

.pd-btn--danger { background: var(--pd-alert); --fill: var(--pd-hull); color: var(--pd-alert); }
.pd-btn--danger:hover { --fill: var(--pd-plate); background: var(--pd-alert); color: var(--pd-alert); }

.pd-btn--sm { --cut: var(--pd-cut-s); min-height: 32px; padding: 4px var(--pd-sp-4); font-size: .75rem; }

.pd-btn:disabled, .pd-btn[aria-disabled="true"] {
  background: var(--pd-line); --fill: var(--pd-hull); color: var(--pd-steel-500);
  cursor: not-allowed; transform: none;
}

/* Tags: rarity, planet, state */
.pd-tag {
  --cut: var(--pd-cut-s);
  --tag: var(--pd-steel-300);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--tag);
  color: var(--tag);
  font-family: var(--pd-font-display);
  font-stretch: 75%;
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
}
.pd-tag--accent    { --tag: var(--pd-accent); }
.pd-tag--common    { --tag: var(--pd-r-common); }
.pd-tag--uncommon  { --tag: var(--pd-r-uncommon); }
.pd-tag--rare      { --tag: var(--pd-r-rare); }
.pd-tag--epic      { --tag: var(--pd-r-epic); }
.pd-tag--legendary { --tag: var(--pd-r-legendary); }
.pd-tag--mythic    { --tag: var(--pd-r-mythic); }

/* Stat row: icon, label, value (copied from the NFT card stat block) */
.pd-stat {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: var(--pd-sp-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--pd-line);
}
.pd-stat:last-child { border-bottom: 0; }
.pd-stat__icon { width: 20px; height: 20px; color: var(--pd-steel-300); }
.pd-stat__label { color: var(--pd-steel-100); font-size: var(--pd-fs-small); }
.pd-stat__value { font-family: var(--pd-font-data); font-variant-numeric: tabular-nums; color: var(--pd-chrome); text-align: right; }

/* Meter: segmented, 20 segments of 5%. Set --value: 62% inline. */
.pd-meter { display: grid; gap: var(--pd-sp-2); }
.pd-meter__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pd-sp-3); flex-wrap: wrap; }
.pd-meter__track {
  --seg: repeating-linear-gradient(90deg, #000 0 calc(5% - 3px), transparent calc(5% - 3px) 5%);
  position: relative; height: 12px;
  transform: skewX(-18deg);
  background: var(--pd-plate-hi);
  -webkit-mask: var(--seg); mask: var(--seg);
}
.pd-meter__fill {
  position: absolute; inset: 0 auto 0 0;
  width: var(--value, 0%);
  background: var(--pd-accent);
  transition: width var(--pd-t-slow) steps(8, end);
}
@supports (width: round(down, 50%, 5%)) {
  .pd-meter__fill { width: round(down, var(--value, 0%), 5%); }
}
.pd-meter--reward .pd-meter__fill { background: var(--pd-amber); }

/* Table: leaderboards, missions, history */
.pd-table-wrap { overflow-x: auto; }
.pd-table { width: 100%; border-collapse: collapse; font-size: var(--pd-fs-small); }
.pd-table th {
  background: var(--pd-plate);
  text-align: left;
  padding: 10px var(--pd-sp-4);
  font-family: var(--pd-font-display); font-stretch: 75%; font-weight: 600;
  font-size: var(--pd-fs-label); letter-spacing: .14em; text-transform: uppercase;
  color: var(--pd-steel-300);
  border-bottom: 1px solid var(--pd-line-hi);
  white-space: nowrap;
}
.pd-table td { padding: 10px var(--pd-sp-4); border-bottom: 1px solid var(--pd-line); color: var(--pd-steel-100); }
.pd-table tbody tr:hover td { background: var(--pd-plate); }
.pd-table .is-num { text-align: right; font-family: var(--pd-font-data); font-variant-numeric: tabular-nums; color: var(--pd-chrome); }
.pd-table th.is-num { text-align: right; font-family: var(--pd-font-display); }
.pd-rank {
  font-family: var(--pd-font-display); font-stretch: 125%; font-weight: 800;
  color: var(--pd-steel-300); width: 3.5rem;
}
.pd-table tr.is-top .pd-rank { color: var(--pd-amber); }

/* Alerts: icon + word, always */
.pd-alert {
  --cut: var(--pd-cut-s);
  --tone: var(--pd-cyan);
  display: flex; gap: var(--pd-sp-3); align-items: flex-start;
  padding: var(--pd-sp-3) var(--pd-sp-4) var(--pd-sp-3) calc(var(--pd-sp-4) + 3px);
  background: var(--pd-line);
  font-size: var(--pd-fs-small);
}
.pd-alert::before { background: linear-gradient(90deg, var(--tone) 0 3px, var(--pd-hull) 3px); }
.pd-alert__title { font-family: var(--pd-font-display); font-stretch: 75%; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tone); font-size: var(--pd-fs-label); }
.pd-alert--ok    { --tone: var(--pd-ok); }
.pd-alert--warn  { --tone: var(--pd-warn); }
.pd-alert--alert { --tone: var(--pd-alert); }

/* Input: wrap the <input> in .pd-field so the edge follows the cut */
.pd-field { --cut: var(--pd-cut-s); display: flex; background: var(--pd-line); transition: background var(--pd-t-fast) var(--pd-ease); }
.pd-field:focus-within { background: var(--pd-cyan); }
.pd-input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  padding: 11px var(--pd-sp-4);
  color: var(--pd-chrome);
  font: 500 var(--pd-fs-body)/1.2 var(--pd-font-data);
}
.pd-input::placeholder { color: var(--pd-steel-500); }

/* Command bar */
.pd-nav {
  display: flex; align-items: center; gap: var(--pd-sp-5); flex-wrap: wrap;
  padding: var(--pd-sp-3) var(--pd-sp-5);
  background: var(--pd-void);
  border-bottom: 1px solid var(--pd-line);
}
.pd-nav__logo { height: 36px; width: auto; display: block; }
.pd-nav__links { display: flex; gap: var(--pd-sp-5); flex-wrap: wrap; margin-right: auto; }
.pd-nav__link {
  position: relative; padding: 6px 0;
  font-family: var(--pd-font-display); font-stretch: 75%; font-weight: 600;
  font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pd-steel-300); text-decoration: none;
}
.pd-nav__link:hover { color: var(--pd-chrome); }
.pd-nav__link[aria-current="page"] { color: var(--pd-chrome); }
.pd-nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 16px; height: 2px; background: var(--pd-cyan);
}

/* Status strip */
.pd-statusbar {
  display: flex; gap: var(--pd-sp-5); flex-wrap: wrap; align-items: center;
  padding: 6px var(--pd-sp-5);
  border-bottom: 1px solid var(--pd-line);
  font-family: var(--pd-font-data); font-size: .75rem; color: var(--pd-steel-300);
  text-transform: uppercase; letter-spacing: .06em;
}
.pd-statusbar b { color: var(--pd-chrome); font-weight: 500; }
.pd-live { display: inline-flex; align-items: center; gap: 8px; color: var(--pd-ok); }
.pd-live::before { content: ""; width: 7px; height: 7px; background: var(--pd-ok); animation: pd-pulse 2s steps(2, end) infinite; }

/* --------------------------------------------------------------------------
   7. MOTION (doc section 8)
   -------------------------------------------------------------------------- */
/* Scan-in: add .pd-scan-in, stagger with style="--i:1", "--i:2"... */
.pd-scan-in {
  -webkit-mask: linear-gradient(#000 0 0) left / 100% 100% no-repeat;
  mask: linear-gradient(#000 0 0) left / 100% 100% no-repeat;
  animation: pd-scan var(--pd-t-slow) var(--pd-ease) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes pd-scan {
  from { -webkit-mask-size: 0% 100%; mask-size: 0% 100%; }
  to   { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
}
@keyframes pd-pulse { 50% { opacity: .25; } }

/* Lock-in flash after a confirmed transaction: toggle .pd-lock-in */
.pd-lock-in { animation: pd-lock var(--pd-t) var(--pd-ease) 1; }
@keyframes pd-lock { 50% { background: var(--pd-cyan-hi); } }

@media (prefers-reduced-motion: reduce) {
  .pd-scan-in, .pd-lock-in { animation: pd-fade var(--pd-t-fast) linear both; -webkit-mask: none; mask: none; }
  .pd-live::before { animation: none; }
  .pd-meter__fill { transition: none; }
  * { scroll-behavior: auto !important; }
}
@keyframes pd-fade { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   v1.1 ADDITIONS (from the beta site audit, Oct 2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   8. TOKENS v1.1
   -------------------------------------------------------------------------- */
:root {
  /* Game stats. Always shown with their icon: sword, shield, boots.
     "DEF" the stat (shield, green) is never the DEF token (logo, cyan). */
  --pd-stat-atk: #F2604A;
  --pd-stat-def: #45D483;
  --pd-stat-move: #C9D3DB;

  /* Alien Worlds shards (the crystal mark). Amounts stay chrome. */
  --pd-shard: #4ECBFF;
  --pd-shard-hi: #B9F4FF;
  --pd-shard-edge: #E7FBFF;

  /* Leaderboard ranks */
  --pd-rank-1: var(--pd-amber);
  --pd-rank-2: var(--pd-steel-100);
  --pd-rank-3: var(--pd-bronze);

  /* Smallest text allowed anywhere (11px). Nothing below. */
  --pd-fs-micro: 0.6875rem;
}

/* --------------------------------------------------------------------------
   9. SURFACE LEVELS AND SELECTION
   Level 1: .pd-plate / .pd-frame (cut corners).
   Level 2, inside a plate: .pd-inset (square, hairline). Never nest cuts.
   -------------------------------------------------------------------------- */
.pd-inset {
  padding: var(--pd-sp-3) var(--pd-sp-4);
  background: color-mix(in srgb, var(--pd-chrome) 2%, transparent);
  box-shadow: inset 0 0 0 1px var(--pd-line);
}
.pd-inset--accent { box-shadow: inset 0 0 0 1px var(--pd-line), inset 2px 0 0 var(--pd-accent); }

/* Selection: cyan. Inside a destructive context (unstake, remove): alert. */
.pd-plate.is-selected, .pd-asset.is-selected, .pd-tile.is-selected { background: var(--pd-cyan); }
.is-destructive .pd-plate.is-selected,
.is-destructive .pd-asset.is-selected { background: var(--pd-alert); }

/* --------------------------------------------------------------------------
   10. BADGE: a state, not a category (categories use .pd-tag)
   Square dot + word in the tone colour. No tinted pill.
   tones: ok, warn, alert, info, reward, neutral (default)
   -------------------------------------------------------------------------- */
.pd-badge {
  --tone: var(--pd-steel-300);
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  font-family: var(--pd-font-display); font-stretch: 75%; font-weight: 700;
  font-size: var(--pd-fs-micro); letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.25; color: var(--tone); white-space: normal; overflow-wrap: break-word;
}
.pd-badge::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--tone); }
.pd-badge[data-tone="ok"]     { --tone: var(--pd-ok); }
.pd-badge[data-tone="warn"]   { --tone: var(--pd-warn); }
.pd-badge[data-tone="alert"]  { --tone: var(--pd-alert); }
.pd-badge[data-tone="info"]   { --tone: var(--pd-cyan); }
.pd-badge[data-tone="reward"] { --tone: var(--pd-amber); }
.pd-badge--live::before { animation: pd-pulse 2s steps(2, end) infinite; }
/* On top of art: a void plate behind the badge */
.pd-badge--solid { padding: 4px 8px; background: color-mix(in srgb, var(--pd-void) 85%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 50%, transparent); }
/* Critical: inverted */
.pd-badge--strong { padding: 4px 8px; background: var(--tone); color: var(--pd-void); }
.pd-badge--strong::before { background: var(--pd-void); }

/* --------------------------------------------------------------------------
   11. TABS / SEGMENTED CONTROL
   <div class="pd-tabs" role="tablist"><button class="pd-tab" aria-selected="true">
   -------------------------------------------------------------------------- */
.pd-tabs {
  --cut: var(--pd-cut-s);
  display: flex; gap: 2px; padding: 2px;
  width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--pd-line);
}
.pd-tabs::-webkit-scrollbar { display: none; }
.pd-tab {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: var(--pd-sp-2);
  min-height: 36px; padding: 0 var(--pd-sp-4);
  border: 0; background: var(--pd-hull); color: var(--pd-steel-300);
  font-family: var(--pd-font-display); font-stretch: 75%; font-weight: 600;
  font-size: var(--pd-fs-label); letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer;
  transition: color var(--pd-t-fast) var(--pd-ease), background var(--pd-t-fast) var(--pd-ease);
}
.pd-tab:hover { color: var(--pd-chrome); background: var(--pd-plate); }
.pd-tab[aria-selected="true"], .pd-tab.is-active { color: var(--pd-chrome); background: var(--pd-plate-hi); }
.pd-tab[aria-selected="true"]::after, .pd-tab.is-active::after {
  content: ""; position: absolute; left: var(--pd-sp-4); bottom: 0; width: 16px; height: 2px; background: var(--pd-accent);
}
.pd-tab:disabled { color: var(--pd-steel-500); cursor: not-allowed; }
.pd-tab .pd-badge, .pd-tab__count { font-family: var(--pd-font-data); letter-spacing: 0; color: var(--pd-steel-300); }

/* --------------------------------------------------------------------------
   12. ICON BUTTON (header tools, close, menu)
   -------------------------------------------------------------------------- */
.pd-icon-btn {
  --cut: var(--pd-cut-s);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 40px; height: 40px; padding: 0 10px;
  border: 0; background: var(--pd-line); color: var(--pd-steel-300);
  font-family: var(--pd-font-display); font-stretch: 75%; font-weight: 600;
  font-size: var(--pd-fs-label); letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; transition: background var(--pd-t-fast) var(--pd-ease), color var(--pd-t-fast) var(--pd-ease);
}
.pd-icon-btn:hover { background: var(--pd-line-hi); --fill: var(--pd-plate); color: var(--pd-chrome); }
.pd-icon-btn.is-active, .pd-icon-btn[aria-pressed="true"] { background: var(--pd-cyan); --fill: var(--pd-plate); color: var(--pd-cyan-hi); }
.pd-icon-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--pd-chrome); }
.pd-icon-btn svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   13. AMOUNT and CHIP: token logo + mono value + unit
   <span class="pd-amount"><img src="Logo_token_DEF.png" alt="">12,500<span class="pd-amount__unit">DEF</span></span>
   -------------------------------------------------------------------------- */
.pd-amount {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--pd-font-data); font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--pd-chrome); white-space: nowrap;
}
.pd-amount img, .pd-amount svg { width: 1.1em; height: 1.1em; object-fit: contain; flex: none; }
.pd-amount__unit {
  font-family: var(--pd-font-display); font-stretch: 75%; font-weight: 600;
  font-size: .72em; letter-spacing: .12em; text-transform: uppercase; color: var(--pd-steel-300);
}
.pd-chip {
  --cut: var(--pd-cut-s);
  display: inline-flex; align-items: center; gap: var(--pd-sp-2);
  min-height: 40px; padding: 0 var(--pd-sp-3);
  background: var(--pd-line); color: var(--pd-chrome); text-decoration: none;
}
a.pd-chip:hover, button.pd-chip:hover { background: var(--pd-cyan); --fill: var(--pd-plate); }

/* --------------------------------------------------------------------------
   14. TILE: one key figure (dashboard, landing stats, leaderboard totals)
   The icon takes the tone; the value stays chrome. No coloured side bars.
   -------------------------------------------------------------------------- */
.pd-tile {
  --cut: var(--pd-cut-m);
  --tile-tone: var(--pd-steel-300);
  display: grid; gap: var(--pd-sp-1); align-content: start;
  min-width: 0;
  padding: var(--pd-sp-4) var(--pd-sp-5);
  background: var(--pd-line);
}
.pd-tile__icon { width: 22px; height: 22px; color: var(--tile-tone); margin-bottom: var(--pd-sp-2); }
.pd-tile__icon img { width: 100%; height: 100%; object-fit: contain; }
.pd-tile__value {
  font-family: var(--pd-font-data); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: var(--pd-fs-h2); line-height: 1.1; color: var(--pd-chrome);
  min-width: 0; overflow-wrap: anywhere;
}
.pd-tile__label {
  font-family: var(--pd-font-display); font-stretch: 75%; font-weight: 600;
  font-size: var(--pd-fs-label); letter-spacing: .12em; line-height: 1.3;
  text-transform: uppercase; color: var(--pd-steel-300);
  min-width: 0; overflow-wrap: break-word;
}
.pd-tile[data-tone="atk"]    { --tile-tone: var(--pd-stat-atk); }
.pd-tile[data-tone="def"]    { --tile-tone: var(--pd-stat-def); }
.pd-tile[data-tone="info"]   { --tile-tone: var(--pd-cyan); }
.pd-tile[data-tone="reward"] { --tile-tone: var(--pd-amber); }
a.pd-tile, button.pd-tile { color: inherit; text-align: left; border: 0; cursor: pointer; text-decoration: none; transition: background var(--pd-t-fast) var(--pd-ease); }
a.pd-tile:hover, button.pd-tile:hover { background: var(--pd-line-hi); --fill: var(--pd-plate); }

/* Stat values (ATK / DEF / MOVE) inside cards and rows */
.pd-val-atk { color: var(--pd-stat-atk); }
.pd-val-def { color: var(--pd-stat-def); }
.pd-val-move { color: var(--pd-stat-move); }

/* --------------------------------------------------------------------------
   15. ASSET CARD: any NFT you pick (mercenary, warlord, equipment, division)
   <button class="pd-asset" data-rarity="rare"> art / meta / check
   The edge carries the rarity colour: the main "this is a game" signal.
   -------------------------------------------------------------------------- */
.pd-asset {
  --cut: var(--pd-cut-m);
  --rar: var(--pd-line);
  --edge-w: 2px;
  display: flex; flex-direction: column; padding: var(--edge-w); border: 0;
  background: var(--rar); color: inherit; text-align: left; cursor: pointer;
  transition: background var(--pd-t-fast) var(--pd-ease);
}
.pd-asset[data-rarity="common"]    { --rar: color-mix(in srgb, var(--pd-r-common) 55%, var(--pd-line)); }
.pd-asset[data-rarity="uncommon"]  { --rar: var(--pd-r-uncommon); }
.pd-asset[data-rarity="rare"]      { --rar: var(--pd-r-rare); }
.pd-asset[data-rarity="epic"]      { --rar: var(--pd-r-epic); }
.pd-asset[data-rarity="legendary"] { --rar: var(--pd-r-legendary); }
.pd-asset[data-rarity="mythic"]    { --rar: var(--pd-r-mythic); }
.pd-asset:hover { --fill: var(--pd-plate); }
.pd-asset__art { display: block; aspect-ratio: 1 / 1.05; max-width: 100%; background: var(--pd-void); }
.pd-asset__art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pd-asset__meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pd-sp-2);
  padding: var(--pd-sp-2) var(--pd-sp-3); border-top: 1px solid var(--pd-line);
}
.pd-asset__name { font-size: var(--pd-fs-small); font-weight: 600; color: var(--pd-chrome); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-asset__id { font-family: var(--pd-font-data); font-size: var(--pd-fs-label); color: var(--pd-steel-300); }
.pd-asset__check {
  position: absolute; top: var(--pd-sp-2); right: var(--pd-sp-2); z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  background: color-mix(in srgb, var(--pd-void) 75%, transparent);
  box-shadow: inset 0 0 0 1px var(--pd-steel-500); color: transparent;
}
.pd-asset.is-selected .pd-asset__check { background: var(--pd-cyan); box-shadow: none; color: var(--pd-void); }
.is-destructive .pd-asset.is-selected .pd-asset__check { background: var(--pd-alert); }
.pd-asset.is-locked, .pd-asset:disabled { cursor: not-allowed; }
.pd-asset.is-locked .pd-asset__art, .pd-asset:disabled .pd-asset__art { opacity: .45; filter: grayscale(.6); }

/* --------------------------------------------------------------------------
   16. MODAL and KEY/VALUE ROWS
   -------------------------------------------------------------------------- */
.pd-modal-backdrop {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: var(--pd-sp-4);
  background: color-mix(in srgb, var(--pd-void) 82%, transparent);
}
.pd-modal {
  --cut: var(--pd-cut-m);
  --fill: var(--pd-plate);
  display: grid; gap: var(--pd-sp-4);
  width: min(100%, 32rem); max-height: calc(100vh - 2 * var(--pd-sp-4)); overflow-y: auto;
  padding: var(--pd-sp-5);
  background: var(--pd-line-hi);
}
.pd-modal--wide { width: min(100%, 72rem); }
.pd-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pd-sp-4); padding-bottom: var(--pd-sp-3); border-bottom: 1px solid var(--pd-line); }
.pd-modal__title { margin: 4px 0 0; font-family: var(--pd-font-display); font-weight: 700; font-size: var(--pd-fs-h3); text-transform: uppercase; letter-spacing: .04em; color: var(--pd-chrome); }
.pd-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pd-sp-3); }

.pd-kv { display: grid; box-shadow: inset 0 0 0 1px var(--pd-line); }
.pd-kv__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pd-sp-4); padding: 9px var(--pd-sp-3); }
.pd-kv__row + .pd-kv__row { border-top: 1px solid var(--pd-line); }
.pd-kv__k { font-family: var(--pd-font-display); font-stretch: 75%; font-weight: 600; font-size: var(--pd-fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--pd-steel-300); }
.pd-kv__v { font-family: var(--pd-font-data); font-variant-numeric: tabular-nums; color: var(--pd-chrome); text-align: right; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   17. FORM CONTROLS: switch, select, stepper
   -------------------------------------------------------------------------- */
.pd-switch {
  appearance: none; -webkit-appearance: none; flex: none;
  position: relative; width: 40px; height: 22px; margin: 0; cursor: pointer;
  background: var(--pd-line-hi);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  transition: background var(--pd-t) var(--pd-ease);
}
.pd-switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 14px; height: 14px; background: var(--pd-steel-100); transition: left var(--pd-t) var(--pd-ease); }
.pd-switch:checked { background: var(--pd-cyan); }
.pd-switch:checked::after { left: 22px; background: var(--pd-void); }
.pd-switch:focus-visible { outline: 2px solid var(--pd-cyan); outline-offset: 2px; }

.pd-select {
  appearance: none; -webkit-appearance: none;
  width: 100%; min-height: 40px; padding: 0 36px 0 var(--pd-sp-3);
  border: 0; box-shadow: inset 0 0 0 1px var(--pd-line-hi); outline: 0;
  color: var(--pd-chrome); font: 500 var(--pd-fs-small)/1.2 var(--pd-font-data);
  background:
    linear-gradient(45deg, transparent 50%, var(--pd-steel-300) 50%) calc(100% - 17px) 50% / 5px 5px no-repeat,
    linear-gradient(135deg, var(--pd-steel-300) 50%, transparent 50%) calc(100% - 12px) 50% / 5px 5px no-repeat,
    var(--pd-hull);
  cursor: pointer;
}
.pd-select:focus { box-shadow: inset 0 0 0 1px var(--pd-cyan); }
.pd-select--auto { width: auto; }

.pd-stepper { display: inline-flex; align-items: stretch; box-shadow: inset 0 0 0 1px var(--pd-line-hi); }
.pd-stepper button { width: 32px; min-height: 32px; border: 0; background: transparent; color: var(--pd-steel-100); font: 700 1rem/1 var(--pd-font-data); cursor: pointer; }
.pd-stepper button:hover { background: var(--pd-plate); color: var(--pd-chrome); }
.pd-stepper input {
  width: 3.2rem; border: 0; border-inline: 1px solid var(--pd-line); background: var(--pd-hull);
  color: var(--pd-chrome); text-align: center; font: 500 var(--pd-fs-small)/1 var(--pd-font-data);
  -moz-appearance: textfield; appearance: textfield;
}
.pd-stepper input::-webkit-outer-spin-button, .pd-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Thin meter for tight places (cooldowns, forge steps, card progress) */
.pd-meter--thin .pd-meter__track { height: 6px; transform: none; }

/* --------------------------------------------------------------------------
   18. COUNTDOWN, EMPTY STATE, PLANET CHIP, RANKS
   -------------------------------------------------------------------------- */
.pd-countdown {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  font-family: var(--pd-font-data); font-weight: 500; font-size: var(--pd-fs-small); font-variant-numeric: tabular-nums;
  color: var(--pd-chrome);
  background: color-mix(in srgb, var(--pd-void) 85%, transparent);
  box-shadow: inset 0 0 0 1px var(--pd-line-hi);
}
.pd-countdown.is-urgent { color: var(--pd-warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pd-warn) 55%, transparent); }
.pd-countdown.is-closed { color: var(--pd-steel-500); }

.pd-empty { display: grid; justify-items: center; gap: var(--pd-sp-2); padding: var(--pd-sp-7) var(--pd-sp-5); text-align: center; color: var(--pd-steel-300); }
.pd-empty__title { margin: 0; font-family: var(--pd-font-display); font-weight: 700; font-size: var(--pd-fs-h3); text-transform: uppercase; letter-spacing: .04em; color: var(--pd-chrome); }
.pd-empty p { margin: 0; max-width: 44ch; font-size: var(--pd-fs-small); }

.pd-planet-chip {
  display: inline-flex; align-items: center; gap: var(--pd-sp-2);
  min-height: 36px; padding: 4px var(--pd-sp-3) 4px 4px;
  border: 0; background: var(--pd-hull); color: var(--pd-steel-300);
  box-shadow: inset 0 0 0 1px var(--pd-line), inset 0 -2px 0 transparent;
  font-family: var(--pd-font-display); font-stretch: 75%; font-weight: 600;
  font-size: var(--pd-fs-label); letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; transition: color var(--pd-t-fast) var(--pd-ease), box-shadow var(--pd-t-fast) var(--pd-ease);
}
.pd-planet-chip img { width: 26px; height: 26px; object-fit: contain; }
.pd-planet-chip:hover { color: var(--pd-chrome); }
.pd-planet-chip.is-active, .pd-planet-chip[aria-pressed="true"] {
  color: var(--pd-chrome);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pd-accent) 60%, transparent), inset 0 -2px 0 var(--pd-accent);
}

.pd-rank--1 { color: var(--pd-rank-1); }
.pd-rank--2 { color: var(--pd-rank-2); }
.pd-rank--3 { color: var(--pd-rank-3); }

@media (prefers-reduced-motion: reduce) {
  .pd-badge--live::before { animation: none; }
}

/* --------------------------------------------------------------------------
   19. MULTILINGUAL TYPOGRAPHY & OVERFLOW SAFEGUARDS
   - FR / ES / DE expand strings by +30% to +150%.
   - HI (Devanagari) breaks connecting shirorekha bars when letter-spacing > 0
     and clips top/bottom vowel matras when line-height < 1.35.
   - ZH / KO (CJK) distort synthetic font-stretch and need cleaner spacing.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .pd-hero-title, .pd-h1, .pd-h2 {
    font-stretch: 108%;
  }
}

html:lang(de) .pd-hero-title,
html:lang(de) .pd-h1,
html:lang(de) .pd-h2,
html:lang(fr) .pd-hero-title,
html:lang(fr) .pd-h1,
html:lang(fr) .pd-h2,
html:lang(es) .pd-hero-title,
html:lang(es) .pd-h1,
html:lang(es) .pd-h2 {
  font-stretch: 112%;
  hyphens: auto;
}

html:lang(de) .pd-btn,
html:lang(fr) .pd-btn,
html:lang(es) .pd-btn {
  letter-spacing: .08em;
}

html:lang(hi) body,
html:lang(hi) .pd-hero-title,
html:lang(hi) .pd-h1,
html:lang(hi) .pd-h2,
html:lang(hi) .pd-h3,
html:lang(hi) .pd-label,
html:lang(hi) .pd-btn,
html:lang(hi) .pd-tag,
html:lang(hi) .pd-badge,
html:lang(hi) .pd-tab,
html:lang(hi) .pd-icon-btn,
html:lang(hi) .pd-tile__label,
html:lang(hi) .pd-kv__k,
html:lang(hi) .pd-planet-chip {
  font-stretch: 100%;
  letter-spacing: 0 !important;
  text-transform: none;
}

html:lang(hi) .pd-hero-title,
html:lang(hi) .pd-h1,
html:lang(hi) .pd-h2,
html:lang(hi) .pd-h3 {
  line-height: 1.38;
}

html:lang(hi) .pd-label,
html:lang(hi) .pd-btn,
html:lang(hi) .pd-badge,
html:lang(hi) .pd-tile__label {
  line-height: 1.45;
}

html:lang(zh) .pd-hero-title,
html:lang(zh) .pd-h1,
html:lang(zh) .pd-h2,
html:lang(zh) .pd-h3,
html:lang(zh) .pd-label,
html:lang(zh) .pd-btn,
html:lang(zh) .pd-tag,
html:lang(zh) .pd-badge,
html:lang(zh) .pd-tab,
html:lang(zh) .pd-tile__label,
html:lang(ko) .pd-hero-title,
html:lang(ko) .pd-h1,
html:lang(ko) .pd-h2,
html:lang(ko) .pd-h3,
html:lang(ko) .pd-label,
html:lang(ko) .pd-btn,
html:lang(ko) .pd-tag,
html:lang(ko) .pd-badge,
html:lang(ko) .pd-tab,
html:lang(ko) .pd-tile__label {
  font-stretch: 100%;
  letter-spacing: .04em;
  line-height: 1.35;
}