:root {
  --bk-atlas-url: url("./bilkroken_atlas_v1.svg");
  --bk-atlas-width: 2048px;
  --bk-atlas-height: 2048px;
  --bk-atlas-rows: 4;
  --bk-atlas-cols: 4;
  --bk-atlas-margin: 16px;
  --bk-atlas-gutter: 32px;
  --bk-atlas-tile-width: 480px;
  --bk-atlas-tile-height: 480px;
  --bk-atlas-cell-pitch: 512px;
  --bk-orange: #ff8a2a;
  --bk-orange-soft: #ffb36c;
  --bk-green: #38d982;
  --bk-glass: rgba(12, 19, 27, 0.78);
  --bk-line: rgba(226, 232, 240, 0.2);
}

.bk-sprite {
  width: var(--bk-atlas-tile-width);
  height: var(--bk-atlas-tile-height);
  background-image: var(--bk-atlas-url);
  background-repeat: no-repeat;
  background-size: var(--bk-atlas-width) var(--bk-atlas-height);
}

.bk-tile-hero-sky { background-position: -16px -16px; }
.bk-tile-mountain-silhouette { background-position: -528px -16px; }
.bk-tile-wet-asphalt { background-position: -1040px -16px; }
.bk-tile-cliff-rock { background-position: -1552px -16px; }
.bk-tile-glass-panel-dark { background-position: -16px -528px; }
.bk-tile-card-panel-light { background-position: -528px -528px; }
.bk-tile-cta-orange { background-position: -1040px -528px; }
.bk-tile-chip-dark { background-position: -1552px -528px; }
.bk-tile-orange-glow-strip { background-position: -16px -1040px; }
.bk-tile-silver-divider { background-position: -528px -1040px; }
.bk-tile-score-ring { background-position: -1040px -1040px; }
.bk-tile-dark-grain { background-position: -1552px -1040px; }
.bk-tile-soft-vignette { background-position: -16px -1552px; }
.bk-tile-success-green { background-position: -528px -1552px; }
.bk-tile-brushed-metal { background-position: -1040px -1552px; }
.bk-tile-premium-orange-glow { background-position: -1552px -1552px; }

.bk-page-texture {
  background:
    linear-gradient(180deg, rgba(7, 11, 16, 0.68), rgba(7, 11, 16, 0.96)),
    var(--bk-atlas-url) -1040px -16px / var(--bk-atlas-width) var(--bk-atlas-height) repeat;
}

.bk-hero-surface {
  position: relative;
  isolation: isolate;
}

.bk-hero-surface::before {
  content: "";
  position: absolute;
  inset: 6px -24px auto -24px;
  height: min(62vh, 560px);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 22%, rgba(255, 138, 42, 0.24), transparent 28%),
    var(--bk-atlas-url) -16px -16px / var(--bk-atlas-width) var(--bk-atlas-height) no-repeat;
  opacity: 0.6;
  mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
}

.bk-panel-surface {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01)),
    rgba(12, 19, 27, 0.86);
  border-color: var(--bk-line);
  backdrop-filter: blur(10px);
}

.bk-card-surface {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(17, 26, 35, 0.86);
}

.bk-cta-surface {
  background:
    linear-gradient(135deg, rgba(255, 179, 108, 0.98), rgba(255, 122, 24, 0.96)),
    var(--bk-orange);
  box-shadow: 0 12px 34px rgba(255, 138, 42, 0.22);
}

.bk-chip-surface {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    rgba(16, 25, 34, 0.9);
}

.bk-divider-glow {
  border-bottom-color: rgba(255, 138, 42, 0.72);
  box-shadow: inset 0 -1px 0 rgba(255, 179, 108, 0.32);
}

.bk-status-success {
  border-color: rgba(56, 217, 130, 0.45);
  background: rgba(56, 217, 130, 0.12);
  color: #d6ffe7;
}

.bk-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.bk-preview-tile {
  width: 100%;
  aspect-ratio: 1;
  background-image: var(--bk-atlas-url);
  background-repeat: no-repeat;
  background-size: 426.6667% 426.6667%;
  border: 1px solid rgba(226, 232, 240, 0.18);
  border-radius: 8px;
}