/* ==========================================================================
   Divine Mythic UI Design System — NoPixel V Style (Divine Palette)
   ========================================================================== */

:root {
  /* Divine Mythic Palette Tokens */
  --gold: #eccb63;
  --gold-fill: linear-gradient(180deg, #f3d885, #e0b850);
  --gold-hi: #fff3cf;
  --gold-dim: #8a6b28;
  
  --ink: #120a0d;
  --cream: #f6efe3;
  --cream-fill: linear-gradient(180deg, #f6efe3, #e8dccb);
  
  --text-main: #f2e8dc;
  --text-muted: rgba(242, 232, 220, 0.66);
  --text-faint: rgba(242, 232, 220, 0.40);
  
  --crimson-pick: #ff4d5e;
  --pick-fill: linear-gradient(180deg, #ff4d5e 0%, #b8162a 55%, #8f1222 100%);
  --crimson-deep: #7e1220;
  
  --status-success: #3ecf6d;
  --status-warning: #f4ae2f;
  --status-danger: #ff4d5e;
  
  /* Panel Ladder (Solid Plum Black) */
  --head-bg: #0d080a;
  --body-bg: #1a1215;
  --field-bg: #241a1e;
  --line-border: #2e2226;
  --edge-border: #4a3b40;
  --tile-bg: rgba(16, 9, 12, 0.92);

  /* Fonts */
  --font-v: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
}

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

body {
  background-color: var(--head-bg);
  background-image: 
    linear-gradient(180deg, rgba(13, 8, 10, 0.82) 0%, rgba(13, 8, 10, 0.92) 100%),
    url('/assets/images/bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* NoPixel V Style Barlow Condensed Uppercase Text */
.v-text, .v, h1, h2, h3, h4, .btn, .nav-link, .badge, .form-label, .table th {
  font-family: var(--font-v);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.04em;
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--gold-hi);
}

/* Header & Navigation Bar */
.site-header {
  background-color: var(--head-bg);
  border-bottom: 2px solid var(--line-border);
  padding: 16px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
}

.brand-badge {
  background: var(--gold-fill);
  color: var(--ink);
  font-family: var(--font-v);
  font-weight: 800;
  font-style: italic;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 2px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--gold-dim);
}

.nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
}

.nav-link {
  color: var(--text-muted);
  font-size: 16px;
  padding: 8px 16px;
  border-radius: 0;
  transition: all 0.15s ease;
  position: relative;
}

.nav-link:hover, .nav-link.active {
  color: var(--ink);
  background: var(--gold-fill);
}

/* Keycap Component */
.keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 2px;
  background: var(--gold-fill);
  color: var(--ink);
  font-family: var(--font-v);
  font-weight: 700;
  font-style: normal; /* Keycap letters are upright */
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 2px 0 var(--gold-dim);
}

/* Q/E Tab Strip */
.tab-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  background: var(--body-bg);
  padding: 8px;
  border: 1px solid var(--line-border);
}

.tab-btn {
  padding: 10px 20px;
  font-family: var(--font-v);
  font-weight: 800;
  font-style: italic;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tab-btn.active {
  background: var(--gold-fill);
  color: var(--ink);
  border-color: var(--gold);
}

/* Container */
.main-content {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 36px 24px;
}

/* Panels & Cards — Square Corners */
.card {
  background: var(--body-bg);
  border: 1px solid var(--line-border);
  border-left: 4px solid var(--gold);
  border-radius: 0; /* Square corners */
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.card-title {
  font-size: 20px;
  font-weight: 800;
  font-style: italic;
  color: var(--gold);
  margin-bottom: 12px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

/* Buttons — Square Corners */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 0; /* Square corners */
  font-size: 15px;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.btn-primary {
  background: var(--gold-fill);
  color: var(--ink);
  border-color: var(--gold);
  box-shadow: 0 3px 0 var(--gold-dim);
}

.btn-primary:hover {
  background: linear-gradient(180deg, #fff3cf, #f3d885);
  color: var(--ink);
}

.btn-secondary {
  background: var(--field-bg);
  border-color: var(--edge-border);
  color: var(--text-main);
}

.btn-secondary:hover {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

.btn-danger {
  background: var(--pick-fill);
  color: #FFF;
  border-top: 2px solid var(--crimson-pick);
}

.btn-danger:hover {
  background: linear-gradient(180deg, #ff4d5e 0%, #d01c32 100%);
  color: #FFF;
}

.btn-discord {
  background: #5865F2;
  color: #FFF;
  border-bottom: 3px solid #404EED;
}

.btn-discord:hover {
  background: #4752C4;
}

.btn-steam {
  background: #171A21;
  border: 1px solid #2A475E;
  color: #C6D4DF;
}

.btn-steam:hover {
  background: #2A475E;
  color: #FFF;
}

/* NoPixel V Style Status Chips — Square corners, uppercase */
.chip, .badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 2px;
  font-family: var(--font-v);
  font-weight: 800;
  font-style: italic;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}

.badge-success { background: rgba(62, 207, 109, 0.15); color: var(--status-success); border-color: rgba(62, 207, 109, 0.4); }
.badge-warning { background: rgba(244, 174, 47, 0.15); color: var(--status-warning); border-color: rgba(244, 174, 47, 0.4); }
.badge-danger  { background: rgba(255, 77, 94, 0.15); color: var(--status-danger); border-color: rgba(255, 77, 94, 0.4); }
.badge-muted   { background: rgba(242, 232, 220, 0.1); color: var(--text-muted); border-color: var(--line-border); }

/* Alerts */
.alert {
  padding: 16px 20px;
  border-radius: 0;
  margin-bottom: 24px;
  font-family: var(--font-body);
  font-size: 14px;
  border-left: 5px solid;
}

.alert-error {
  background: rgba(126, 18, 32, 0.4);
  border-color: var(--crimson-pick);
  color: #ff9da6;
}

.alert-success {
  background: rgba(62, 207, 109, 0.15);
  border-color: var(--status-success);
  color: #92f0b2;
}

/* Form Controls — Square Corners */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 8px;
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  background-color: var(--field-bg);
  border: 1px solid var(--line-border);
  border-radius: 0;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease;
}

.form-control:focus {
  border-color: var(--gold);
  background-color: #2e2227;
}

/* Tables — Divine Plum Black Frame */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.table th, .table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-border);
  font-size: 14px;
}

.table th {
  color: var(--gold);
  background: var(--head-bg);
  font-size: 14px;
}

.table tr:hover td {
  background: var(--field-bg);
}

/* Slant Decorative Accent */
.slant-accent {
  transform: skewX(-7deg);
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line-border);
  padding: 24px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
  background: var(--head-bg);
}