/*
 * BKWare Golden Liquid Glass
 * Global visual foundation for public, account and administration surfaces.
 */

:root {
  color-scheme: dark;
  --bk-ink: #080704;
  --bk-ink-soft: #111009;
  --bk-gold: #f4c95d;
  --bk-gold-bright: #ffe8a3;
  --bk-gold-deep: #9a6b15;
  --bk-cream: #fff8e8;
  --bk-text: rgba(255, 250, 237, 0.94);
  --bk-text-muted: rgba(255, 246, 222, 0.66);
  --bk-glass: rgba(33, 28, 17, 0.58);
  --bk-glass-strong: rgba(23, 20, 13, 0.78);
  --bk-glass-soft: rgba(255, 240, 197, 0.07);
  --bk-stroke: rgba(255, 222, 133, 0.22);
  --bk-stroke-strong: rgba(255, 222, 133, 0.42);
  --bk-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  --bk-shadow-soft: 0 12px 36px rgba(0, 0, 0, 0.28);
  --bk-glow: 0 0 0 1px rgba(255, 231, 160, 0.08), 0 12px 42px rgba(193, 135, 22, 0.12);
  --bk-radius-xs: 10px;
  --bk-radius-sm: 14px;
  --bk-radius-md: 20px;
  --bk-radius-lg: 28px;
  --bk-radius-xl: 38px;
  --bk-blur: blur(28px) saturate(145%);
  --bk-ease: cubic-bezier(.22, 1, .36, 1);
}

html {
  background: var(--bk-ink);
  scroll-behavior: smooth;
}

body {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 2%, rgba(242, 190, 68, 0.16), transparent 32rem),
    radial-gradient(circle at 90% 18%, rgba(255, 224, 141, 0.09), transparent 28rem),
    radial-gradient(circle at 48% 105%, rgba(130, 86, 10, 0.14), transparent 38rem),
    linear-gradient(145deg, #070704 0%, #111007 48%, #070705 100%) !important;
  color: var(--bk-text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI", sans-serif !important;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

body::after {
  content: "";
  position: fixed;
  width: min(50vw, 720px);
  height: min(50vw, 720px);
  top: -28vw;
  left: 25vw;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 219, 119, 0.12);
  filter: blur(110px);
}

::selection {
  color: #161006;
  background: var(--bk-gold-bright);
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: #080704;
}

::-webkit-scrollbar-thumb {
  border: 3px solid #080704;
  border-radius: 999px;
  background: linear-gradient(var(--bk-gold-bright), var(--bk-gold-deep));
}

a {
  color: var(--bk-gold-bright);
  text-underline-offset: 0.2em;
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

a:hover {
  color: #fff3c9;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--bk-cream);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p,
li {
  line-height: 1.65;
}

/* Glass surfaces */
.card,
.panel,
.container,
.content-card,
.content-section,
.section-card,
.feature-card,
.game-card,
.project-card,
.news-card,
.community-card,
.profile-card,
.settings-card,
.form-container,
.login-container,
.register-container,
.modal-content,
.dropdown-menu,
.profile-dropdown,
.sidebar,
.toolbar,
.admin-section,
.stat-card,
.product-card,
.post,
.comment,
.message,
.inbox-item,
.wiki-content,
.forum-container,
.shop-container {
  border: 1px solid var(--bk-stroke) !important;
  border-radius: var(--bk-radius-md);
  background:
    linear-gradient(135deg, rgba(255, 242, 205, 0.105), rgba(255, 222, 137, 0.025) 42%, rgba(16, 14, 9, 0.2)),
    var(--bk-glass) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--bk-shadow-soft) !important;
  backdrop-filter: var(--bk-blur);
  -webkit-backdrop-filter: var(--bk-blur);
}

.card,
.content-card,
.section-card,
.feature-card,
.game-card,
.project-card,
.news-card,
.community-card,
.profile-card,
.settings-card,
.stat-card,
.product-card {
  transition: transform 350ms var(--bk-ease), border-color 350ms ease,
    box-shadow 350ms ease, background 350ms ease;
}

.card:hover,
.content-card:hover,
.section-card:hover,
.feature-card:hover,
.game-card:hover,
.project-card:hover,
.news-card:hover,
.community-card:hover,
.stat-card:hover,
.product-card:hover {
  border-color: var(--bk-stroke-strong) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.17), var(--bk-shadow), var(--bk-glow) !important;
}

/* Navigation */
.navbar {
  top: 12px !important;
  left: 50% !important;
  width: calc(100% - 24px) !important;
  max-width: 1540px;
  min-height: 68px;
  padding: 8px 12px 8px 16px !important;
  border: 1px solid rgba(255, 225, 145, 0.25) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(255, 244, 214, 0.12), transparent 42%),
    rgba(15, 13, 9, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 18px 50px rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  transform: translateX(-50%);
}

.navbar::after {
  content: "";
  position: absolute;
  right: 12%;
  bottom: -1px;
  left: 12%;
  height: 1px;
  opacity: 0.8;
  background: linear-gradient(90deg, transparent, var(--bk-gold), transparent);
}

.navbar .logo {
  width: auto !important;
  height: 52px !important;
  object-fit: contain;
  filter: drop-shadow(0 5px 14px rgba(234, 180, 48, 0.18));
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 3px !important;
}

.nav-links a,
.navbar .login-link {
  position: relative;
  padding: 9px 12px !important;
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgba(255, 250, 235, 0.72) !important;
  font-size: 0.88rem !important;
  font-weight: 560 !important;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: 220ms var(--bk-ease) !important;
}

.nav-links a:hover,
.nav-links a.active,
.navbar .login-link:hover {
  border-color: rgba(255, 225, 143, 0.2);
  color: var(--bk-cream) !important;
  background: rgba(255, 232, 166, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.android-note {
  border-bottom: 1px solid var(--bk-stroke) !important;
  color: var(--bk-text-muted) !important;
  background: rgba(13, 11, 7, 0.88) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.profile-dropdown,
.dropdown-menu {
  padding: 10px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255, 240, 198, 0.11), transparent 48%),
    rgba(13, 12, 8, 0.9) !important;
}

.dropdown-btn,
.profile-dropdown a {
  border-radius: 11px !important;
}

/* Controls */
button,
.btn,
.button,
input[type="submit"],
input[type="button"],
.cta-button,
.primary-button,
.login-button,
.register-button {
  min-height: 42px;
  border: 1px solid rgba(255, 231, 164, 0.34) !important;
  border-radius: 13px !important;
  color: #211704 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 48%),
    linear-gradient(135deg, #ffe399, #c99025) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56), 0 8px 24px rgba(143, 94, 10, 0.22) !important;
  font-family: inherit;
  font-weight: 680 !important;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 220ms var(--bk-ease), filter 220ms ease, box-shadow 220ms ease !important;
}

button:hover,
.btn:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.cta-button:hover,
.primary-button:hover,
.login-button:hover,
.register-button:hover {
  filter: brightness(1.08) saturate(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 12px 32px rgba(187, 126, 17, 0.3) !important;
  transform: translateY(-2px);
}

button:active,
.btn:active,
.button:active,
input[type="submit"]:active,
input[type="button"]:active {
  transform: translateY(0) scale(0.985);
}

button:disabled,
.btn:disabled,
input:disabled {
  cursor: not-allowed;
  filter: grayscale(0.5);
  opacity: 0.48;
  transform: none;
}

.secondary,
.secondary-button,
.btn-secondary,
.cancel-button,
button.cancel,
button.close {
  border-color: var(--bk-stroke) !important;
  color: var(--bk-text) !important;
  background:
    linear-gradient(135deg, rgba(255, 244, 210, 0.1), rgba(255, 221, 126, 0.025)),
    rgba(24, 21, 14, 0.68) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
  border: 1px solid rgba(255, 225, 145, 0.18) !important;
  border-radius: 13px !important;
  outline: none;
  color: var(--bk-text) !important;
  background:
    linear-gradient(145deg, rgba(255, 244, 214, 0.055), transparent),
    rgba(8, 8, 6, 0.56) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 6px 18px rgba(0, 0, 0, 0.12) !important;
  font-family: inherit;
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease !important;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: rgba(255, 218, 116, 0.58) !important;
  background-color: rgba(18, 15, 9, 0.78) !important;
  box-shadow: 0 0 0 4px rgba(242, 190, 68, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255, 246, 220, 0.37) !important;
}

select option {
  color: var(--bk-text);
  background: #17130c;
}

label {
  color: rgba(255, 247, 224, 0.76);
  font-weight: 560;
}

/* Data-heavy surfaces */
table {
  overflow: hidden;
  border: 1px solid var(--bk-stroke) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--bk-radius-sm);
  background: rgba(14, 12, 8, 0.48) !important;
  box-shadow: var(--bk-shadow-soft);
}

th {
  color: var(--bk-gold-bright) !important;
  background: rgba(255, 221, 127, 0.08) !important;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

th,
td {
  border-color: rgba(255, 226, 147, 0.1) !important;
}

tr {
  transition: background 160ms ease;
}

tbody tr:hover {
  background: rgba(255, 225, 139, 0.045) !important;
}

.badge,
.tag,
.chip,
.status {
  border: 1px solid rgba(255, 224, 137, 0.22) !important;
  border-radius: 999px !important;
  color: var(--bk-gold-bright) !important;
  background: rgba(255, 221, 125, 0.075) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.modal,
.overlay,
.dialog-overlay {
  background: rgba(4, 4, 3, 0.64) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

hr {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--bk-stroke-strong), transparent);
}

/* Footer */
footer,
.footer {
  border-top: 1px solid var(--bk-stroke) !important;
  color: var(--bk-text-muted) !important;
  background:
    linear-gradient(180deg, rgba(255, 223, 137, 0.035), transparent),
    rgba(8, 7, 5, 0.72) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Accessible interaction */
:focus-visible {
  outline: 2px solid var(--bk-gold-bright) !important;
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  .navbar {
    border-radius: 18px !important;
  }

  .nav-links a {
    padding-inline: 9px !important;
    font-size: 0.82rem !important;
  }
}

@media (max-width: 900px) {
  .navbar {
    top: 8px !important;
    width: calc(100% - 16px) !important;
    min-height: 62px;
    border-radius: 18px !important;
  }

  .navbar .logo {
    height: 44px !important;
  }

  .nav-links {
    border: 1px solid var(--bk-stroke) !important;
    border-radius: 18px !important;
    background: rgba(14, 12, 8, 0.92) !important;
    box-shadow: var(--bk-shadow) !important;
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
  }
}

@media (max-width: 600px) {
  :root {
    --bk-radius-md: 16px;
    --bk-radius-lg: 22px;
  }

  .card,
  .panel,
  .content-card,
  .section-card,
  .form-container,
  .login-container,
  .register-container,
  .modal-content {
    border-radius: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar,
  .card,
  .panel,
  .container,
  .content-card,
  .modal-content,
  .profile-dropdown,
  .dropdown-menu {
    background-color: rgba(20, 17, 11, 0.96) !important;
  }
}