/* Pink Cat design system: tokens and components, taken from the clan tracker's in-game look.
   Every page on the site loads this file, so all tools share one visual language:
   gold-framed windows, sky-blue title banners, cream panels, outlined display type
   and chunky bevelled buttons over a dark block world.
   One deliberate look, so there are no separate light/dark palettes. */
:root {
  --world: #0a1424;        /* night sky behind the blocks */
  --block: #1b2738;        /* background block faces */
  --block-hi: #223146;     /* lit top-left half of a block */
  --block-edge: #26354a;   /* seams between blocks */
  --gold: #f6c700;         /* window frame */
  --gold-dk: #9a7a00;
  --olive: #a7bb1d;        /* frame inner bevel */
  --olive-dk: #74870d;
  --cream: #f6efd3;        /* window body */
  --cream-dk: #ece4c6;
  --cyan: #a3def0;         /* stat rows */
  --cyan-dk: #6fc0dc;
  --banner-hi: #b6e9fb;
  --banner: #7dd0f0;       /* title pill */
  --banner-dk: #2f8ec4;
  --navy: #1d5b86;         /* labels, pills */
  --navy-dk: #0e2741;
  --ink: #163a57;          /* text on light surfaces */
  --white: #ffffff;
  --sky-text: #bfe2f5;     /* small text on navy */
  --orange-hi: #ffc04a;
  --orange: #ffa21f;       /* main button */
  --orange-dk: #e26a00;
  --green-hi: #8ee85a;
  --green: #57c81c;        /* progress bar green */
  --green-dk: #2f9e1e;
  --pink: #ff7ccf;
  --pink-hi: #ffc6ea;
  --purple: #8e3fe0;
  --gem: #1777c2;          /* gem amounts */
  --xp: #3b9a0e;           /* XP amounts */
  --bad: #d23b22;

  --font-display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --font-body: "Fira Sans", "Segoe UI", system-ui, sans-serif;

  --outline: 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink),
             1.5px 1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px -1.5px 0 var(--ink),
             0 4px 0 rgba(0, 0, 0, .35);
  --outline-sm: 0 1px 0 var(--ink), 0 -1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 2px 0 var(--ink);

  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
[hidden] { display: none !important; }
img { max-width: 100%; }
body {
  color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.45;
  background-color: var(--world);
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; line-height: 1.1; text-wrap: balance; letter-spacing: .01em; }
p { margin: 0; }
a { color: var(--banner-dk); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.outlined { color: var(--white); text-shadow: var(--outline); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- game window: gold frame, olive bevel, cream body ---------- */
.window {
  position: relative; border-radius: 16px; padding: 12px;
  background: linear-gradient(var(--olive), var(--olive-dk));
  border: 5px solid var(--gold);
  box-shadow: 0 0 0 2px var(--gold-dk), inset 0 0 0 2px rgba(255, 255, 255, .35), 0 18px 40px rgba(0, 0, 0, .55);
}
.window-in { background: var(--cream); border-radius: 10px; padding: 40px 18px 18px; display: grid; gap: 16px; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .08); }
.banner {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -55%);
  max-width: calc(100% - 32px); width: max-content; padding: 8px 34px 10px;
  border-radius: 999px; border: 3px solid var(--banner-dk);
  background: linear-gradient(var(--banner-hi) 0 40%, var(--banner) 40% 100%);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12), 0 3px 0 rgba(0, 0, 0, .25);
  font-size: clamp(26px, 6vw, 40px); text-align: center; white-space: nowrap;
  color: var(--white); text-shadow: var(--outline);
}

/* ---------- buttons (also used on links) ---------- */
.btn, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; border-radius: 10px; padding: 6px 16px; text-decoration: none;
  font-family: var(--font-display); font-size: 16px; letter-spacing: .02em; line-height: 1.3;
  color: var(--white); text-shadow: var(--outline-sm);
  background: linear-gradient(#a9e4f8 0 45%, #5fbde6 45% 100%); border: 3px solid var(--banner-dk);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15), 0 3px 0 rgba(0, 0, 0, .3);
  transition: transform .15s var(--ease-spring), filter .15s;
}
@media (hover: hover) { .btn:hover, button:hover { filter: brightness(1.08); transform: translateY(-1px); } }
.btn:active, button:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15), 0 1px 0 rgba(0, 0, 0, .3); }
.btn.primary { background: linear-gradient(var(--orange-hi) 0 45%, var(--orange) 45% 100%); border-color: #4aa8dc; box-shadow: inset 0 -3px 0 var(--orange-dk), 0 0 0 2px #1f6f9f, 0 4px 0 rgba(0, 0, 0, .35); }
.btn[aria-disabled="true"] { opacity: .55; filter: grayscale(.6); pointer-events: none; }
.btn.go { background: linear-gradient(#7fe24c 0 45%, #3fae10 45% 100%); border-color: #1f6f9f; box-shadow: inset 0 -3px 0 #2c7e08, 0 3px 0 rgba(0, 0, 0, .3); }

/* ---------- small parts ---------- */
.pill { display: inline-block; background: var(--navy); color: var(--white); border-radius: 999px; padding: 3px 12px; font-weight: 700; font-size: 13px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--navy); color: var(--white); white-space: nowrap; letter-spacing: .02em; }
.tile { background: var(--cyan); border-radius: 8px; padding: 10px 12px; display: grid; gap: 8px; box-shadow: inset 0 -3px 0 var(--cyan-dk), inset 0 2px 0 rgba(255, 255, 255, .5); }
.tile .eyebrow { justify-self: start; background: var(--navy); color: var(--white); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.tile .big { background: var(--white); border: 2px solid var(--navy); border-radius: 4px; padding: 2px 10px; text-align: right; font-family: var(--font-display); font-size: 28px; line-height: 1.2; color: var(--ink); }
.bar { height: 14px; border-radius: 99px; background: #0f3554; border: 2px solid #0b2740; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(var(--green-hi) 0 40%, var(--green) 40% 100%); border-radius: 99px; }

@media (prefers-reduced-motion: reduce) {
  .btn, button { transition: none; }
  .btn:hover, .btn:active, button:hover, button:active { transform: none; }
}