/* ============================================================
   OMERTA · BASE + COMPONENT LIBRARY
   Reset, body atmosphere (obsidian + film grain), and the
   shared component classes that reproduce Omerta.dc.html's
   visual language 1:1 (panels, buttons, badges, bars,
   tables, toasts, empty states, scrollbars).
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(1200px 700px at 70% -10%, #171208, var(--bg-obsidian) 60%);
  background-attachment: fixed;
  font-family: var(--font-ui);
  color: var(--text-200);
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-bright); }

h1, h2, h3, p { margin: 0; }

button { font-family: inherit; }

/* Visible focus for keyboard users everywhere */
:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

/* ---- Film grain overlay ---------------------------------- */
.om-grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: omGrain 8s steps(6) infinite;
}

/* ---- Scrollbars ------------------------------------------ */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--surface-scroll); }
::-webkit-scrollbar-thumb { background: #2a2417; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #3a3220; }

/* ============================================================
   PANEL — gradient surface + gold hairline border
   ============================================================ */
.panel {
  background: linear-gradient(180deg, var(--surface-ember), var(--surface-deep));
  border: 1px solid var(--gold-a14);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.panel--map {
  background: linear-gradient(180deg, var(--surface-deep), var(--surface-void));
  border-color: var(--gold-a16);
  border-radius: var(--r-lg);
}
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid var(--gold-a10);
}
.panel__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--text-100);
}
.panel__tag {
  font: 600 var(--fs-sm) var(--font-ui);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold);
}
.panel__body { padding: 16px 20px; }

/* micro section label used across panels */
.eyebrow {
  font: 600 var(--fs-sm) var(--font-ui);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow--mono {
  font: 600 var(--fs-base) var(--font-mono);
  letter-spacing: var(--ls-mono);
  color: var(--text-700);
  text-transform: none;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font: 700 var(--fs-md) var(--font-ui);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 11px 20px;
  border-radius: var(--r-xs);
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
  color: #120d06;
  box-shadow: var(--shadow-btn);
}
.btn--primary:hover { filter: brightness(1.08); }

.btn--ghost {
  border-color: var(--gold-a35);
  background: var(--white-a02);
  color: var(--gold-bright);
}
.btn--ghost:hover { background: var(--gold-a10); }

.btn--danger {
  border-color: var(--blood);
  background: linear-gradient(180deg, var(--blood), var(--blood-lo));
  color: #fff;
}
.btn--danger:hover { filter: brightness(1.08); }

.btn:disabled, .btn--disabled {
  border-color: var(--white-a08);
  background: #1a1712;
  color: var(--text-800);
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
}

.btn--sm { padding: 8px 13px; font-size: var(--fs-base); }
.btn--block { width: 100%; }

kbd {
  font: 600 var(--fs-sm) var(--font-mono);
  color: var(--text-700);
  border: 1px solid var(--gold-a20);
  padding: 2px 5px;
  border-radius: var(--r-xs);
}

/* ============================================================
   BADGES (rank variants)
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 var(--fs-sm) var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
}
.badge--don      { background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); color: #120d06; }
.badge--underboss{ background: var(--gold-a16);            color: var(--gold-bright); border-color: var(--gold-a35); }
.badge--gold     { background: rgba(200,162,74,.12);      color: var(--gold-bright); border-color: var(--gold-a35); }
.badge--sky      { background: rgba(110,168,216,.14);     color: var(--sky);         border-color: rgba(110,168,216,.30); }
.badge--neutral  { background: var(--white-a05);          color: var(--text-600);    border-color: var(--white-a10); }
.badge--success  { background: rgba(63,174,107,.12);      color: var(--emerald-soft);border-color: var(--emerald-a40); }
.badge--danger   { background: rgba(200,50,74,.12);       color: var(--blood-soft);  border-color: rgba(200,50,74,.30); }

/* status dot */
.dot { width: 6px; height: 6px; border-radius: var(--r-round); flex: none; }
.dot--live { animation: omBlink 2s infinite; }
.dot--pulse { animation: omPulse 1.8s infinite; }

/* ============================================================
   STAT BAR (track + fill + glow)
   ============================================================ */
.stat-bar { margin-bottom: 12px; }
.stat-bar__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.stat-bar__label {
  font: 700 var(--fs-md) var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.stat-bar__value {
  font: 600 var(--fs-lg) var(--font-mono);
  color: var(--text-300);
  letter-spacing: var(--ls-mono);
}
.stat-bar__track {
  height: 11px;
  background: var(--track);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--black-a50);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55);
}
.stat-bar__track--sm { height: 8px; }
.stat-bar__fill {
  display: block; /* span defaults to inline → ignores width/height; force block so fill renders */
  position: relative;
  height: 100%;
  min-width: 3px; /* keep a sliver visible even at very low values */
  border-radius: var(--r-sm);
  transition: width var(--dur-slow) var(--ease);
}
/* thin top sheen — additive, renders over any fill background */
.stat-bar__fill::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 45%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0));
  pointer-events: none;
}

/* ============================================================
   DATA TABLE (zebra + micro header)
   ============================================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
}
.data-table th {
  padding: 9px 20px;
  text-align: left;
  font: 600 9.5px var(--font-ui);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-700);
}
.data-table td {
  padding: 11px 20px;
  font: 500 var(--fs-lg) var(--font-ui);
  color: var(--text-300);
}
.data-table tbody tr:nth-child(even) { background: rgba(255,255,255,.012); }
.data-table tbody tr { border-top: 1px solid var(--gold-a06); }
.data-table .num { font-family: var(--font-mono); text-align: right; }
.data-table .muted { color: var(--text-700); }
.right { text-align: right; }
.center { text-align: center; }

/* ============================================================
   TOAST
   ============================================================ */
.toast-stack {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 18px;
  background: rgba(14,11,7,.96);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-xs);
  box-shadow: var(--shadow-toast);
  animation: omFloat .35s var(--ease) both;
  pointer-events: auto;
}
.toast__icon { font-size: var(--fs-xl); color: var(--gold-bright); }
.toast__text { font: 500 var(--fs-lg) var(--font-ui); color: var(--bone); }
.toast--success { border-left-color: var(--emerald); }
.toast--success .toast__icon { color: var(--emerald); }
.toast--danger { border-left-color: var(--blood); }
.toast--danger .toast__icon { color: var(--blood-soft); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  text-align: center;
  padding: 26px 10px;
  border: 1px dashed var(--gold-a18);
  border-radius: var(--r-md);
}
.empty-state__icon { font-size: 30px; opacity: .5; }
.empty-state__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--text-500);
  margin-top: 10px;
}
.empty-state__sub {
  font: 400 var(--fs-md) var(--font-ui);
  color: var(--text-700);
  margin-top: 6px;
}

/* ============================================================
   FORM INPUT
   ============================================================ */
.input {
  background: var(--surface-input);
  border: 1px solid var(--gold-a16);
  border-radius: var(--r-xs);
  padding: 8px 10px;
  color: var(--text-200);
  font: 400 var(--fs-md) var(--font-ui);
  outline: none;
}
.input:focus { border-color: var(--gold-a45); }
.input::placeholder { color: var(--text-700); }

/* ============================================================
   DASHBOARD COMPONENTS
   ============================================================ */
/* quick action card */
.quick-card {
  position: relative;
  display: block;
  text-align: left;
  min-height: 128px;
  background: linear-gradient(180deg, #181309, var(--surface-deep));
  border: 1px solid var(--gold-a16);
  border-radius: var(--r-md);
  padding: 15px 15px 14px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.quick-card:hover,
.quick-card:focus-visible {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.75), 0 0 0 1px var(--gold-a20) inset;
}
/* embedded thematic art on the right, faded (smoke mask) into the card body */
.quick-card__art {
  position: absolute;
  inset: 0 0 0 auto;
  width: 52%;
  pointer-events: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: .4;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 66%);
  mask-image: linear-gradient(90deg, transparent 0, #000 66%);
  transition: opacity var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.quick-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.9) contrast(1.05);
}
.quick-card__art svg { width: 84px; height: 84px; }
.quick-card:hover .quick-card__art,
.quick-card:focus-visible .quick-card__art {
  opacity: .62;
  filter: brightness(1.2);
}
/* keyboard shortcut hint pinned to the corner */
.quick-card__kbd {
  position: absolute;
  top: 11px;
  right: 12px;
  z-index: 3;
  opacity: .65;
}
/* left content column sits above the art */
.quick-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 98px;
}
.quick-card__label {
  font: 700 var(--fs-3xl) var(--font-display);
  line-height: 1.02;
}
.quick-card__desc {
  font: 500 var(--fs-md) var(--font-ui);
  line-height: 1.28;
  color: var(--text-500);
  max-width: 62%;
}
.quick-card__foot {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: auto;
}
.quick-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 var(--fs-sm) var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
  white-space: nowrap;
}
.quick-card__chip--ready {
  background: rgba(63,174,107,.14);
  color: var(--emerald-soft);
  border-color: var(--emerald-a40);
}
.quick-card__chip--cost {
  background: var(--white-a05);
  color: var(--text-400);
  border-color: var(--gold-a20);
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
.quick-card__cta {
  font: 700 var(--fs-sm) var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-bright);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.quick-card:hover .quick-card__cta,
.quick-card:focus-visible .quick-card__cta {
  opacity: 1;
  transform: none;
}

/* keep quick-action cards ~128px tall instead of stretching to the vitals row */
#quickActions { align-self: start; }

/* vitals panel (centered) */
.vitals-panel { display: flex; flex-direction: column; justify-content: center; }

/* notifications list */
.notif {
  display: flex;
  gap: 11px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--gold-a06);
}
.notif:last-child { border-bottom: none; }
.notif__body { flex: 1; }
.notif__text { font: 500 12.5px/1.4 var(--font-ui); color: var(--text-400); }
.notif__time { font: 400 var(--fs-sm) var(--font-mono); color: var(--text-700); margin-top: 4px; }

/* family wire */
.wire { display: flex; flex-direction: column; height: 300px; }
.wire__messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.wire-msg { font: 400 12.5px/1.45 var(--font-ui); }
.wire-msg__user { font-weight: 600; }
.wire-msg__sep { color: var(--text-700); }
.wire-msg__text { color: #c8bfab; }
.wire__compose {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--gold-a10);
}
.wire__compose .input { flex: 1; }

/* season inline block (page head) */
.season-block { text-align: right; }
.season-block__label {
  font: 600 var(--fs-sm) var(--font-ui);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-700);
  margin-bottom: 6px;
}
.season-block__count { font: 500 var(--fs-3xl) var(--font-mono); color: var(--gold-bright); }

/* Dünya Hakimiyeti mini ilerleme (kalıcı dünya) */
.dash-dom { margin-top: 10px; min-width: 180px; }
.dash-dom__row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.dash-dom__crown { font-size: 12px; line-height: 1; filter: drop-shadow(0 0 4px rgba(230, 198, 106, .6)); }
.dash-dom__fam { font: 700 var(--fs-md) var(--font-display); }
.dash-dom__pct { font: 500 var(--fs-md) var(--font-mono); color: var(--gold-bright); }
.dash-dom__track {
  position: relative;
  height: 6px;
  margin-top: 6px;
  background: var(--track);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--black-a50);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5);
}
.dash-dom__fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 3px;
  filter: saturate(1.2) brightness(1.05);
}
.dash-dom__cap {
  font: 600 var(--fs-2xs) var(--font-ui);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-800);
  margin-top: 5px;
}

/* ============================================================
   LANDING COMPONENTS
   ============================================================ */
.map-panel {
  position: relative;
  background: linear-gradient(180deg, var(--surface-deep), var(--surface-void));
  border: 1px solid var(--gold-a16);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-panel);
}
.map-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 14px;
}
.map-tip {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(10,8,6,.94);
  border: 1px solid var(--gold);
  border-radius: var(--r-sm);
  padding: 12px 15px;
  min-width: 180px;
  box-shadow: 0 14px 40px -12px #000;
}
.map-tip__city { font: 600 var(--fs-sm) var(--font-mono); letter-spacing: var(--ls-wide); color: var(--text-700); margin-bottom: 6px; }
.map-tip__fam { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); }
.map-tip__meter { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.map-tip__track { flex: 1; height: 4px; background: var(--track); border-radius: 2px; overflow: hidden; }
.map-tip__fill { height: 100%; border-radius: 2px; }
.map-tip__dom { font: 500 var(--fs-base) var(--font-mono); color: var(--text-500); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding: 16px 6px 4px;
  border-top: 1px solid var(--gold-a10);
  margin-top: 12px;
}
.legend-item { display: flex; align-items: center; gap: 8px; }
.legend-item__name { font: 600 var(--fs-base) var(--font-ui); letter-spacing: .05em; color: var(--text-500); }

/* hero pieces */
.live-badge { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.live-badge__dot { width: 7px; height: 7px; border-radius: var(--r-round); background: var(--blood); box-shadow: 0 0 10px var(--blood); }
.live-badge__text { font: 600 var(--fs-base) var(--font-mono); letter-spacing: var(--ls-mono); color: var(--gold); }
.hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-hero);
  line-height: .92;
  letter-spacing: var(--ls-tight);
  color: var(--text-100);
  text-shadow: 0 4px 24px rgba(0,0,0,.6);
}
.hero-tagline {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--gold);
  margin: 14px 0 22px;
}
.hero-lead { max-width: 460px; font-size: var(--fs-2xl); line-height: 1.65; color: var(--text-600); margin: 0 0 34px; }
.hero-actions { display: flex; gap: 14px; margin-bottom: 40px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 34px; flex-wrap: wrap; }
.hero-stat__num { font: 500 26px var(--font-mono); color: var(--text-100); }
.hero-stat__num--blood { color: var(--blood); }
.hero-stat__label {
  font: 600 var(--fs-sm) var(--font-ui);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-700);
  margin-top: 6px;
}

/* five families grid */
.families-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1000px) { .families-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .families-grid { grid-template-columns: 1fr; } }
.family-card {
  background: linear-gradient(180deg, var(--surface-ember), var(--surface-deep));
  border: 1px solid var(--gold-a20);
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.family-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.family-card__rank { font: 700 var(--fs-lg) var(--font-mono); color: var(--text-700); }
.family-card__crest { display: block; }
.family-card__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.1; }
.family-card__city {
  font: 600 var(--fs-sm) var(--font-ui);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-700);
  margin: 6px 0 16px;
}
.family-card__stats {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--gold-a10);
  padding-top: 12px;
}
.family-card__num { font: 500 var(--fs-3xl) var(--font-mono); color: var(--text-100); }
.family-card__num.sm { font-size: var(--fs-xl); color: var(--text-500); }
.family-card__cap {
  font: 600 var(--fs-xs) var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-700);
  margin-top: 4px;
}

/* utility */
.mono { font-family: var(--font-mono); }
.divider-v { width: 1px; background: var(--gold-a16); flex: none; align-self: stretch; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}