/* =========================================================================
   Civil War — Design System Stylesheet
   Violet-sky "toy-glass" UI: chunky pressed buttons + soft frosted-glass
   panels floating over a torch-free violet gradient sky. Replaces the
   brown/wood-chrome palette entirely — see the "Civil War" design canvas
   (claude.ai/code/artifact/bb94ae23-5bc8-468f-859f-1b91985dcdff) for the
   reference this implements across every page/view/action.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Baloo+2:wght@500;600;700;800&family=JetBrains+Mono:wght@600;700&display=swap');

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Neutral / chrome — deep violet-black family (was brown/wood) */
  --wood-900: #1a1030;
  --wood-800: #241542;
  --wood-700: #331d5c;
  --wood-600: #432876;
  --parchment: #f3ecff;
  --parchment-dim: #cdbdf0;
  --parchment-faint: #9c86c9;

  /* Glass — frosted panel treatment over the violet sky */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-soft: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 14px 34px rgba(10, 4, 30, 0.32);
  --glass-shadow-lg: 0 18px 44px rgba(10, 4, 30, 0.4);

  /* Semantic ramps */
  --gold-400: #ffe27a;
  --gold-500: #ffc93c;
  --gold-600: #e8a91a;
  --gold-700: #c9861a;
  --ember-400: #ff8a5c;
  --ember-500: #ff6a38;
  --ember-600: #d94a22;
  --ember-700: #c23a1f;
  --leaf-400: #9be27a;
  --leaf-500: #6fc94a;
  --leaf-600: #58ac37;
  --leaf-700: #4a9126;
  /* "Build" — construction/shield actions (Building Block, Shield). Aliased
     to --azure-* so any existing reference to the old shield/info color
     keeps working, just repainted blue-cyan instead of the old azure hue. */
  --build-400: #7dd3f0;
  --build-500: #45b6e0;
  --build-600: #2896c4;
  --build-700: #1c7fae;
  --azure-400: var(--build-400);
  --azure-500: var(--build-500);
  --azure-600: var(--build-600);
  --azure-700: var(--build-700);
  /* "Attack" — weapon buttons + the Attack tab's own accent. Distinct from
     amethyst (diamonds) even though both sit in the purple family. */
  --attack-400: #d199f0;
  --attack-500: #b56ee0;
  --attack-600: #9153c9;
  --attack-700: #7b3fb0;
  --amethyst-400: #c79bf0;
  --amethyst-500: #ab77e6;
  --amethyst-600: #935bd2;
  --amethyst-700: #7b3fb0;
  --silver-400: #e7ecf2;
  --silver-600: #9aa6b8;
  --bronze-400: #e0a870;
  --bronze-600: #a86636;

  /* Civilization accents (default fallback = gold) */
  --civ-pharaohs: #c9a15a;
  --civ-pharaohs-2: #2a4a7a;
  --civ-rome: #c94a3f;
  --civ-rome-2: #7a1f1f;
  --civ-china: #d9463c;
  --civ-china-2: #8a1414;
  --civ-greece: #3a4fa8;
  --civ-greece-2: #1c2a63;

  --success: var(--leaf-500);
  --danger: var(--ember-600);
  --info: var(--build-500);

  /* Typography */
  --font-display: 'Luckiest Guy', cursive;
  --font-ui: 'Baloo 2', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --fs-42: 42px;
  --fs-28: 28px;
  --fs-22: 22px;
  --fs-17: 17px;
  --fs-14: 14px;
  --fs-12: 12px;
  --lh-display: 1.15;
  --lh-body: 1.4;

  --text-display-hero: var(--fs-42);
  --text-title: var(--fs-28);
  --text-panel-title: var(--fs-22);
  --text-body: var(--fs-17);
  --text-label: var(--fs-14);
  --text-caption: var(--fs-12);

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --container-max: 760px;
  --container-min: 640px;

  /* Elevation / motion — buttons keep a hard "pressed toy" shelf shadow;
     panels use the soft --glass-shadow above instead. */
  --shelf-h: 4px;
  --outline-stroke: 2px solid var(--wood-900);
  --focus-ring: 0 0 0 3px var(--gold-400);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 400ms;
  --dur-slow: 700ms;
}

@keyframes ds-pop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes ds-float-up { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-28px); opacity: 0; } }
@keyframes ds-rise-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ds-sparkle { 0% { transform: scale(0) rotate(0deg); opacity: 1; } 100% { transform: scale(1.6) rotate(45deg); opacity: 0; } }
@keyframes ds-sheen { from { transform: translateX(-120%); } to { transform: translateX(220%); } }
@keyframes ds-dots { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes ds-cloud-drift { from { transform: translateX(0); } to { transform: translateX(40px); } }

/* -------------------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  line-height: var(--lh-body);
  color: var(--parchment);
  position: relative;
  background:
    radial-gradient(ellipse 700px 500px at 50% -5%, #6a4aa8 0%, transparent 60%),
    linear-gradient(180deg, #1c1240 0%, #3a2670 32%, #6a4aa8 64%, #a97fc7 100%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Soft drifting cloud blobs — decorative depth over the sky gradient,
   fixed so they don't scroll with content. Pure CSS, no image assets. */
body::before, body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
  animation: ds-cloud-drift 26s ease-in-out infinite alternate;
}
body::before {
  top: 8%; left: -8%;
  width: 260px; height: 90px;
  background: radial-gradient(ellipse, rgba(255,255,255,0.16), transparent 70%);
}
body::after {
  top: 16%; right: -6%;
  width: 220px; height: 80px;
  background: radial-gradient(ellipse, rgba(255,255,255,0.12), transparent 70%);
  animation-delay: -12s;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: var(--lh-display); letter-spacing: 0.5px; }
p { margin: 0; line-height: var(--lh-body); }
button { font-family: inherit; }
input, select, textarea { font-family: var(--font-ui); }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; display: block; }

::selection { background: var(--gold-500); color: var(--wood-900); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: var(--radius-pill); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------
   3. App shell / layout
   ------------------------------------------------------------------------- */
#root { min-height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 1; }

.app-shell {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) 96px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

@media (min-width: 860px) {
  .app-shell { padding-bottom: var(--sp-6); }
}

.center-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------------------
   4. Logo / brand lockup
   ------------------------------------------------------------------------- */
.brand-lockup { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.brand-lockup .brand-title {
  font-family: var(--font-display);
  font-size: var(--text-display-hero);
  letter-spacing: 1px;
  color: var(--gold-400);
  background: linear-gradient(180deg, #fff2c4 0%, var(--gold-400) 40%, var(--gold-600) 75%, var(--gold-700) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 var(--wood-900)) drop-shadow(0 6px 14px rgba(0,0,0,0.45));
}
.brand-lockup .brand-sub {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-label);
  color: #e4d6ff;
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* -------------------------------------------------------------------------
   5. Panels — frosted glass (the base "chunky card", now soft not solid)
   ------------------------------------------------------------------------- */
.panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  padding: var(--sp-5);
}
.panel + .panel { margin-top: 0; }
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.panel-title {
  font-family: var(--font-display);
  font-size: var(--text-panel-title);
  color: var(--gold-400);
  text-shadow: 0 2px 0 var(--wood-900);
}
.panel-sub { font-size: var(--text-label); color: var(--parchment-dim); font-weight: 800; }

/* -------------------------------------------------------------------------
   6. Buttons — the pressed-button system (kept hard/toy on purpose, the
   one place the UI stays chunky-plastic rather than glassy). Pill-shaped
   by default now, not rounded-rect.
   ------------------------------------------------------------------------- */
.btn {
  --shelf: var(--shelf-h);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--text-body);
  letter-spacing: 0.3px;
  color: var(--wood-900);
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast) ease;
  user-select: none;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { filter: brightness(1.06); }
.btn:active:not(:disabled) { transform: translateY(var(--shelf)); }

.btn-primary {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
  color: var(--wood-900);
  box-shadow: 0 var(--shelf) 0 var(--gold-700);
}
.btn-primary:active:not(:disabled) { box-shadow: 0 0 0 var(--gold-700); }

.btn-attack {
  background: linear-gradient(180deg, var(--attack-400), var(--attack-600));
  color: #2c0f42;
  box-shadow: 0 var(--shelf) 0 var(--attack-700);
}
.btn-attack:active:not(:disabled) { box-shadow: 0 0 0 var(--attack-700); }

.btn-danger {
  background: linear-gradient(180deg, var(--ember-400), var(--ember-600));
  color: #3a0d02;
  box-shadow: 0 var(--shelf) 0 #8a2f13;
}
.btn-danger:active:not(:disabled) { box-shadow: 0 0 0 #8a2f13; }

.btn-steel {
  background: linear-gradient(180deg, var(--build-400), var(--build-600));
  color: #062634;
  box-shadow: 0 var(--shelf) 0 var(--build-700);
}
.btn-steel:active:not(:disabled) { box-shadow: 0 0 0 var(--build-700); }

.btn-ghost {
  background: var(--glass-bg);
  color: var(--parchment);
  border: 1px solid var(--glass-border);
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,0.1); }
.btn-ghost:active:not(:disabled) { transform: translateY(2px); }

.btn:disabled,
.btn.is-disabled {
  cursor: not-allowed;
  color: var(--parchment-faint);
  opacity: 0.55;
  filter: grayscale(0.4);
  --shelf: 1px;
  transform: none !important;
}
.btn-ghost:disabled { box-shadow: none; }

.btn-sm { padding: 9px 16px; font-size: var(--text-label); }
.btn-lg { padding: 17px 30px; font-size: var(--text-panel-title); }
.btn-block { width: 100%; }

.btn-loading { position: relative; color: transparent !important; }
.btn-loading::after {
  content: '\2022 \2022 \2022';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: currentColor;
  letter-spacing: 3px;
  animation: ds-dots 1s steps(3) infinite;
}

/* -------------------------------------------------------------------------
   7. Stat chips
   ------------------------------------------------------------------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.stat-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-pill);
  padding: 7px 16px 7px 7px;
}
.stat-chip .stat-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-400), var(--gold-700));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 12px;
  color: var(--wood-900);
  flex-shrink: 0;
}
.stat-chip--gold .stat-icon { background: radial-gradient(circle at 35% 30%, var(--gold-400), var(--gold-700)); }
.stat-chip--gold .stat-icon::before { content: 'G'; }
.stat-chip--diamond .stat-icon { background: radial-gradient(circle at 35% 30%, var(--amethyst-400), var(--amethyst-700)); }
.stat-chip--diamond .stat-icon::before { content: 'D'; }
.stat-chip--hp .stat-icon { background: radial-gradient(circle at 35% 30%, var(--leaf-400), var(--leaf-700)); }
.stat-chip--hp .stat-icon::before { content: 'H'; }
.stat-chip--shield .stat-icon { background: radial-gradient(circle at 35% 30%, var(--build-400), var(--build-700)); }
.stat-chip--shield .stat-icon::before { content: 'S'; }

.stat-chip .stat-value { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-body); }
.stat-chip--gold .stat-value { color: var(--gold-400); }
.stat-chip--diamond .stat-value { color: var(--amethyst-400); }
.stat-chip--hp .stat-value { color: var(--leaf-400); }
.stat-chip--shield .stat-value { color: var(--build-400); }
.stat-chip .stat-label { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-caption); color: var(--parchment-faint); text-transform: uppercase; letter-spacing: 0.5px; }

.stat-pop { animation: ds-pop var(--dur-fast) var(--ease-pop); }

.floating-delta {
  position: absolute;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-body);
  pointer-events: none;
  animation: ds-float-up var(--dur-slow) var(--ease-out) forwards;
  z-index: 20;
}
.floating-delta.positive { color: var(--leaf-400); }
.floating-delta.negative { color: var(--ember-400); }

/* -------------------------------------------------------------------------
   8. Bars (HP / Shield)
   ------------------------------------------------------------------------- */
.bar {
  position: relative;
  height: 14px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.bar-fill {
  position: relative;
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--dur-slow) var(--ease-out);
}
.bar-fill::after {
  content: '';
  position: absolute; inset: 1px 1px auto 1px;
  height: 45%;
  background: rgba(255,255,255,0.4);
  border-radius: var(--radius-pill);
}
.bar--hp .bar-fill { background: linear-gradient(180deg, var(--leaf-400), var(--leaf-600)); }
.bar--hp.is-low .bar-fill { background: linear-gradient(180deg, var(--gold-400), var(--gold-600)); }
.bar--hp.is-critical .bar-fill { background: linear-gradient(180deg, var(--ember-400), var(--ember-600)); }
.bar--shield .bar-fill { background: linear-gradient(180deg, var(--build-400), var(--build-600)); }
.bar-sheen {
  position: absolute; top: 0; bottom: 0; width: 35%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: ds-sheen 0.6s ease-out;
}

.bar-row { display: flex; flex-direction: column; gap: 4px; }
.bar-labels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--text-caption); font-weight: 700; color: var(--parchment-dim); }

/* -------------------------------------------------------------------------
   9. Banners / ribbons (clip-path)
   ------------------------------------------------------------------------- */
.ribbon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 18px;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  background: var(--wood-700);
  clip-path: polygon(9% 0, 91% 0, 100% 50%, 91% 100%, 9% 100%, 0 50%);
}
.ribbon-civ { background: linear-gradient(180deg, var(--civ-accent, var(--wood-600)), var(--civ-accent-2, var(--wood-700))); }
.ribbon-level0 { background: linear-gradient(180deg, #8a92a6, #4a5164); }
.ribbon-level1 { background: linear-gradient(180deg, var(--civ-accent, var(--wood-600)), var(--civ-accent-2, var(--wood-700))); }
.ribbon-level2,
.ribbon-level3 {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
  color: var(--wood-900);
  text-shadow: none;
  box-shadow: 0 3px 0 var(--gold-700);
}
.ribbon-protected { background: linear-gradient(180deg, #8a92a6, #4a5164); }
.ribbon-rank1 { background: linear-gradient(180deg, var(--gold-400), var(--gold-600)); color: var(--wood-900); text-shadow: none; box-shadow: 0 3px 0 var(--gold-700); }

.ribbon-sparkle { animation: ds-pop var(--dur-med) var(--ease-pop); }
.ribbon-sparkle::after {
  content: '';
  position: absolute; top: -6px; right: -6px;
  width: 8px; height: 8px;
  background: var(--gold-400);
  animation: ds-sparkle var(--dur-med) ease-out;
}

/* -------------------------------------------------------------------------
   10. Imagery frame — homogenizing the castle photography into the glass
   UI rather than letting it sit as a pasted static rectangle: a violet
   soft-light color-grade wash ties its palette to the sky, a glow instead
   of a hard border blends its edge into the surrounding panel, and the
   plaque-safe top-only darkening (never the bottom, where every render's
   own "LEVEL X" plaque lives) is preserved unchanged.
   ------------------------------------------------------------------------- */
.art-frame {
  position: relative;
  overflow: hidden;
  background: var(--wood-900);
}
.art-frame img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(1.02);
  transition: filter var(--dur-med) ease;
}
.art-frame::before {
  /* the homogenizing wash — ties the photo's palette to the violet sky */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 35%, transparent 35%, rgba(36, 21, 66, 0.5) 100%),
    linear-gradient(160deg, rgba(105, 74, 168, 0.22), rgba(26, 16, 48, 0.3));
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 1;
}
.art-frame::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,16,48,0.55) 0%, transparent 24%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.art-frame .art-overlay {
  position: absolute; inset: 0;
  padding: var(--sp-3);
  z-index: 2;
}
.art-frame .art-overlay-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }

/* Shield "dome" force-field glow — appears over the art when shield > 0,
   the game-state visual counterpart to the homogenizing wash above. */
.art-frame .dome {
  position: absolute; inset: -4px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 40%, rgba(120,200,255,0.08), rgba(80,170,240,0.18) 70%, rgba(60,140,220,0.3) 100%);
  border: 2px solid rgba(160,220,255,0.6);
  box-shadow: 0 0 20px rgba(110,190,255,0.5), inset 0 0 24px rgba(140,210,255,0.3);
  opacity: 0;
  transition: opacity var(--dur-med) ease;
}
.art-frame .dome.on { opacity: 1; }

/* Protected scrim — replaces the art with a locked, desaturated read
   instead of just a corner badge, matching the reference's "protected"
   treatment. */
.art-frame.is-protected img { filter: saturate(0.5) brightness(0.7); }
.art-frame .protected-scrim {
  position: absolute; inset: 0;
  background: rgba(20, 12, 32, 0.68);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  z-index: 2;
  text-align: center;
  padding: var(--sp-3);
}
.art-frame .protected-scrim svg { width: 30px; height: 30px; color: #c9d0e0; }
.art-frame .protected-scrim span {
  font-family: var(--font-ui); font-weight: 800; font-size: var(--text-label);
  color: #e4e8f2; text-transform: uppercase; letter-spacing: 1px;
}

/* Combat-hit flash — a brief attack-colored glow ring on the card that was
   just hit. */
.opponent-card.is-hit,
.hero-banner.is-hit {
  box-shadow: 0 0 0 3px var(--attack-400), 0 14px 36px rgba(155,80,220,0.5);
}

/* Standalone framed art (used where no stats strip follows, e.g. plain previews) */
.art-frame.standalone {
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--glass-border), 0 0 28px -6px var(--civ-accent, var(--attack-500)), var(--glass-shadow-lg);
  aspect-ratio: 16 / 10;
}

/* Hero banner: art-frame on top + a stats strip below, sharing one frame */
.hero-banner {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--glass-border), 0 0 32px -6px var(--civ-accent, var(--attack-500)), var(--glass-shadow-lg);
  transition: box-shadow var(--dur-med) ease;
}
.hero-banner .art-frame { aspect-ratio: 16 / 10; }
.hero-stats {
  background: linear-gradient(180deg, var(--wood-700), var(--wood-800));
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* -------------------------------------------------------------------------
   11. Icon sockets
   ------------------------------------------------------------------------- */
.icon-socket {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.icon-socket img { width: 68%; height: 68%; object-fit: contain; }
.icon-socket--sm { width: 40px; height: 40px; }

/* -------------------------------------------------------------------------
   12. Cards
   ------------------------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); }

.action-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  text-align: center;
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-3);
  box-shadow: var(--glass-shadow);
  animation: ds-rise-fade var(--dur-med) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.action-card .action-name { font-weight: 800; font-size: var(--text-label); color: var(--parchment); }
.action-card .action-meta { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--parchment-dim); }
.action-card .action-cta { width: 100%; }

.opponent-card {
  border-radius: var(--radius-xl);
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  position: relative;
  animation: ds-rise-fade var(--dur-med) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 40ms);
  transition: box-shadow var(--dur-med) ease;
}
.opponent-card .opponent-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.opponent-card .opponent-stats { display: flex; flex-direction: column; gap: var(--sp-2); }
.opponent-card .protected-banner {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-4);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-body);
  color: var(--parchment-dim);
  text-align: center;
}

/* -------------------------------------------------------------------------
   13. Tabs / bottom nav — glass pill, consistent with the reference navbar
   ------------------------------------------------------------------------- */
.tab-bar {
  display: flex;
  gap: var(--sp-2);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-pill);
  padding: 8px;
  position: fixed;
  left: 50%;
  bottom: var(--sp-3);
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 520px;
  z-index: 40;
  box-shadow: var(--glass-shadow-lg);
}
@media (min-width: 860px) {
  .tab-bar { position: static; transform: none; width: 100%; max-width: none; margin: 0 auto; }
}
.tab-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: var(--parchment-faint);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform 140ms var(--ease-pop), background 140ms ease, color 140ms ease;
}
.tab-btn.active {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
  color: var(--wood-900);
  transform: translateY(-3px);
  box-shadow: 0 4px 0 var(--gold-700);
}

/* -------------------------------------------------------------------------
   14. Topbar / window status strip
   ------------------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
}
.topbar-brand { display: flex; align-items: center; gap: var(--sp-2); }
.topbar-brand .brand-title {
  font-family: var(--font-display); font-size: var(--text-panel-title);
  color: var(--gold-400); text-shadow: 0 2px 0 var(--wood-900);
}

.conn-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ember-500); box-shadow: 0 0 6px var(--ember-500); transition: background 200ms ease, box-shadow 200ms ease; }
.conn-dot.online { background: var(--leaf-500); box-shadow: 0 0 6px var(--leaf-500); }
.conn-dot.reconnecting { background: var(--gold-500); box-shadow: 0 0 6px var(--gold-500); animation: ds-pop 900ms infinite; }

.window-strip {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  flex-wrap: wrap;
}
.window-strip .ws-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ember-600); }
.window-strip .ws-dot.open { background: var(--leaf-500); box-shadow: 0 0 6px var(--leaf-500); }
.window-strip .ws-round { font-weight: 800; font-size: var(--text-label); color: var(--parchment); }
.window-strip .ws-countdown {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--text-label);
  background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill); padding: 4px 12px;
  color: var(--parchment);
}
.window-strip .ws-countdown.pulsing { animation: ds-pop 900ms infinite; color: var(--ember-400); }
.window-strip .ws-pips { display: flex; gap: 4px; margin-left: auto; }
.ws-pip {
  width: 12px; height: 12px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(255,255,255,0.18);
}
.ws-pip.filled { background: var(--gold-400); }

/* -------------------------------------------------------------------------
   15. Toasts
   ------------------------------------------------------------------------- */
.toast-host {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 100;
  width: calc(100% - 32px);
  max-width: 480px;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--wood-800);
  border: 2px solid var(--gold-500);
  border-radius: var(--radius-md);
  padding: 12px 22px;
  font-weight: 700;
  font-size: var(--text-label);
  color: var(--parchment);
  box-shadow: var(--glass-shadow-lg);
  animation: ds-rise-fade var(--dur-med) ease-out;
}
.toast::before {
  content: '\2713';
  color: var(--gold-400);
  font-family: var(--font-display);
}
.toast.error { border-color: var(--attack-500); }
.toast.error::before { content: '!'; color: var(--ember-400); }

/* -------------------------------------------------------------------------
   16. Tables
   ------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--glass-border); }
table.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-label); }
table.data-table th, table.data-table td { padding: 10px 14px; text-align: left; white-space: nowrap; }
table.data-table thead th {
  background: rgba(0,0,0,0.18); color: var(--parchment-dim);
  font-weight: 800; text-transform: uppercase; font-size: var(--text-caption); letter-spacing: 0.4px;
}
table.data-table tbody tr { background: var(--glass-bg-soft); }
table.data-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.03); }
table.data-table td.numeric { font-family: var(--font-mono); font-weight: 700; }

.medal { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 800; font-size: 13px; font-family: var(--font-mono); color: var(--wood-900); }
.medal-1 { background: linear-gradient(180deg, var(--gold-400), var(--gold-600)); box-shadow: 0 3px 0 var(--gold-700); }
.medal-2 { background: linear-gradient(180deg, var(--silver-400), var(--silver-600)); box-shadow: 0 3px 0 #6b7688; }
.medal-3 { background: linear-gradient(180deg, var(--bronze-400), var(--bronze-600)); box-shadow: 0 3px 0 #7a4a26; }
.rank-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--wood-900); color: var(--parchment-dim); font-family: var(--font-mono); font-weight: 700; font-size: 12px; box-shadow: 0 3px 0 #100a1e; }

/* -------------------------------------------------------------------------
   17. Forms
   ------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 800; font-size: var(--text-caption); color: var(--parchment-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.field input, .field select {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--parchment);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: 700;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.3);
  outline: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.field input::placeholder { color: var(--parchment-faint); }
.field input:focus, .field select:focus { border-color: var(--gold-500); }
.form-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.form-row .field { flex: 1; min-width: 120px; }
.form-error {
  color: var(--ember-400); font-weight: 700; font-size: var(--text-label);
  background: rgba(217, 74, 34, 0.15);
  border: 1px solid var(--ember-600);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.form-hint { color: var(--parchment-faint); font-size: var(--text-caption); }

/* -------------------------------------------------------------------------
   18. Civ badge
   ------------------------------------------------------------------------- */
.civ-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--civ-accent, var(--gold-400));
}
.civ-badge::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: var(--civ-accent, var(--gold-400));
  box-shadow: 0 0 0 2px var(--civ-accent-2, var(--gold-600));
}

/* Civ scoping — apply data-civ="pharaohs|rome|china|greece" on any container */
[data-civ="pharaohs"] { --civ-accent: var(--civ-pharaohs); --civ-accent-2: var(--civ-pharaohs-2); }
[data-civ="rome"] { --civ-accent: var(--civ-rome); --civ-accent-2: var(--civ-rome-2); }
[data-civ="china"] { --civ-accent: var(--civ-china); --civ-accent-2: var(--civ-china-2); }
[data-civ="greece"] { --civ-accent: var(--civ-greece); --civ-accent-2: var(--civ-greece-2); }

/* -------------------------------------------------------------------------
   19. Utility
   ------------------------------------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.wrap { flex-wrap: wrap; }
.muted { color: var(--parchment-dim); }
.faint { color: var(--parchment-faint); }
.mono { font-family: var(--font-mono); font-weight: 700; }
.text-center { text-align: center; }
.grow { flex: 1; }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.hidden { display: none !important; }

.section-title {
  font-family: var(--font-ui); font-weight: 800; font-size: var(--text-caption);
  color: var(--parchment-faint); text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: var(--sp-2);
}

.empty-state {
  text-align: center; padding: var(--sp-6) var(--sp-4);
  color: var(--parchment-faint);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   20. Page enter animation
   ------------------------------------------------------------------------- */
.tab-content > * { animation: ds-rise-fade var(--dur-med) var(--ease-out) both; }

/* -------------------------------------------------------------------------
   21. Login page specific
   ------------------------------------------------------------------------- */
.login-card { width: 100%; max-width: 400px; }
.login-card .panel { padding: var(--sp-6) var(--sp-5); border-radius: var(--radius-xl); }
.login-card .brand-lockup { margin-bottom: var(--sp-5); }

/* -------------------------------------------------------------------------
   22. Notice banners
   ------------------------------------------------------------------------- */
.notice {
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
  border-left: 4px solid var(--gold-500);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  font-weight: 700;
  font-size: var(--text-label);
  color: var(--parchment-dim);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.notice b { color: var(--parchment); }
.notice.notice-warn { border-left-color: var(--ember-500); }

/* -------------------------------------------------------------------------
   23. Role pill (admin accounts table)
   ------------------------------------------------------------------------- */
.role-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.role-pill--admin { background: rgba(255, 226, 122, 0.18); color: var(--gold-400); border: 1px solid var(--gold-600); }
.role-pill--player { background: rgba(125, 211, 240, 0.18); color: var(--build-400); border: 1px solid var(--build-600); }
.role-pill--viewer { background: var(--glass-bg-soft); color: var(--parchment-dim); border: 1px solid var(--glass-border); }

/* -------------------------------------------------------------------------
   24. Admin live-castle row
   ------------------------------------------------------------------------- */
.admin-castle-row {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--glass-border);
}
.admin-castle-row:last-child { border-bottom: none; }
.admin-castle-row .acr-civ { min-width: 130px; font-weight: 800; }
.admin-castle-row .acr-civ small { display: block; font-family: var(--font-mono); font-weight: 700; color: var(--parchment-faint); font-size: 11px; }
.admin-castle-row .acr-stat { font-size: var(--text-caption); color: var(--parchment-dim); font-weight: 700; }
.admin-castle-row .acr-stat b { color: var(--parchment); font-family: var(--font-mono); }
.admin-castle-row .acr-controls { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.admin-castle-row .acr-controls input {
  width: 90px;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--parchment);
  font-family: var(--font-mono);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   25. Responsive tweaks
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .brand-lockup .brand-title { font-size: 32px; }
  .panel { padding: var(--sp-4); }
}