/**
 * Rising Stars — OLD CLIENT theme
 * Classic League of Legends client era (S3–S5 vibe):
 * deep navy, gold bevels, hextech blue glow, parchment text.
 * Loaded LAST so it only affects the oldclient theme.
 */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=Noto+Sans+KR:wght@400;500;600;700&display=swap");

:root {
  --oc-navy: #06101f;
  --oc-navy-deep: #030912;
  --oc-navy-panel: #0b1830;
  --oc-navy-panel-2: #0e1f3d;
  --oc-frame: #1a3a5c;
  --oc-frame-bright: #2a5a8a;
  --oc-gold: #c8aa6e;
  --oc-gold-bright: #f0e6d2;
  --oc-gold-dim: #785a28;
  --oc-gold-ink: #1a1408;
  --oc-blue: #0a96aa;
  --oc-cyan: #0ac8b9;
  --oc-blue-glow: rgba(10, 200, 185, 0.35);
  --oc-text: #f0e6d2;
  --oc-text-bright: #ffffff;
  --oc-muted: #a09b8c;
  --oc-danger: #c84a4a;
  --oc-radius: 0;
  --oc-font-display: "Cinzel", "Noto Sans KR", serif;
  --oc-font-body: "Spectral", "Noto Sans KR", "Georgia", serif;
  --oc-font-ui: "Cinzel", "Noto Sans KR", sans-serif;

  /* Bridge shared tokens used by rs-*.css / custom.css */
  --rs-bg: var(--oc-navy-deep);
  --rs-bg-deep: #01050c;
  --rs-panel: var(--oc-navy-panel);
  --rs-panel-2: var(--oc-navy-panel-2);
  --rs-panel-edge: rgba(200, 170, 110, 0.35);
  --rs-panel-glow: 0 0 0 1px rgba(26, 58, 92, 0.9), 0 0 24px rgba(10, 150, 170, 0.12);
  --rs-gold: var(--oc-gold);
  --rs-gold-bright: var(--oc-gold-bright);
  --rs-gold-dim: var(--oc-gold-dim);
  --rs-gold-ink: var(--oc-gold-ink);
  --rs-blue: var(--oc-blue);
  --rs-cyan: var(--oc-cyan);
  --rs-text: var(--oc-text);
  --rs-text-bright: var(--oc-text-bright);
  --rs-muted: var(--oc-muted);
  --rs-nav: #c5baa0;
  --rs-radius: 0;
  --rs-radius-lg: 0;
  --rs-font: var(--oc-font-ui);
  --rs-font-num: var(--oc-font-display);
  --gold-accent: var(--oc-gold);
  --gold-light: var(--oc-gold-bright);
  --text-main: var(--oc-text);
  --text-muted: var(--oc-muted);
  --accent-blue: var(--oc-cyan);
  --link-color: var(--oc-gold);
  --header-bg-color-dark: rgba(6, 16, 31, 0.97);
  --card-dark-color: var(--oc-navy-panel);
  --card-dark-input: rgba(3, 9, 18, 0.95);
  --card-dark-divider: rgba(200, 170, 110, 0.28);
  --plyr-color-main: var(--oc-gold);
  --bg-dark-start: #0c1a32;
  --bg-dark-mid: #06101f;
  --bg-dark-end: #02060e;
}

/* ---- Atmosphere: old client map room ---- */
html, body {
  background:
    radial-gradient(ellipse 900px 420px at 50% -5%, rgba(10, 150, 170, 0.18), transparent 55%),
    radial-gradient(ellipse 700px 500px at 15% 40%, rgba(200, 170, 110, 0.06), transparent 50%),
    radial-gradient(ellipse 600px 400px at 90% 70%, rgba(26, 58, 92, 0.45), transparent 55%),
    linear-gradient(180deg, #0c1a32 0%, #06101f 40%, #02060e 100%) !important;
  background-attachment: fixed !important;
  color: var(--oc-text) !important;
  font-family: var(--oc-font-body) !important;
}

body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.07;
  background-image:
    linear-gradient(30deg, transparent 48%, rgba(200, 170, 110, 0.35) 49%, rgba(200, 170, 110, 0.35) 51%, transparent 52%),
    linear-gradient(-30deg, transparent 48%, rgba(10, 150, 170, 0.25) 49%, rgba(10, 150, 170, 0.25) 51%, transparent 52%);
  background-size: 48px 84px;
}

body > * {
  position: relative;
  z-index: 1;
}

a:not(.btn):not(.rs-btn) {
  color: var(--oc-gold) !important;
}
a:not(.btn):not(.rs-btn):hover {
  color: var(--oc-gold-bright) !important;
  text-shadow: 0 0 12px rgba(200, 170, 110, 0.35);
}

h1, h2, h3, h4, h5, h6,
.headline-font,
.card-header,
.widget-box .title {
  font-family: var(--oc-font-display) !important;
  letter-spacing: 0.08em;
  color: var(--oc-gold-bright) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85), 0 0 18px rgba(200, 170, 110, 0.15);
}

/* ---- Ornate header chrome ---- */
body .main-header,
body header.main-header,
body .site-header {
  background:
    linear-gradient(180deg, rgba(14, 31, 61, 0.98) 0%, rgba(6, 16, 31, 0.98) 100%) !important;
  border-bottom: 2px solid var(--oc-gold-dim) !important;
  box-shadow:
    0 1px 0 rgba(200, 170, 110, 0.35),
    0 12px 40px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 rgba(10, 200, 185, 0.15) !important;
  backdrop-filter: none !important;
}

body .main-header::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--oc-gold), transparent);
  opacity: 0.7;
  pointer-events: none;
}

body .main-header .navbar-nav > li > a,
body .main-navigation ul li a {
  font-family: var(--oc-font-display) !important;
  font-weight: 600 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--oc-text) !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
}

body .main-header .navbar-nav > li > a:hover,
body .main-header .navbar-nav > li.active > a {
  color: var(--oc-gold-bright) !important;
  border-bottom-color: var(--oc-cyan) !important;
  text-shadow: 0 0 10px var(--oc-blue-glow);
}

body .main-header .header-icon,
body .main-header .header-icon *,
body .main-header .main-icon,
body .main-header .main-icon *,
body .main-header svg:not(.logo) {
  color: var(--oc-gold) !important;
  fill: var(--oc-gold) !important;
  stroke: var(--oc-gold) !important;
}

body .main-header .form-control,
body .main-header input[type="search"] {
  background: rgba(3, 9, 18, 0.9) !important;
  border: 1px solid var(--oc-frame) !important;
  border-radius: 0 !important;
  color: var(--oc-text) !important;
  box-shadow: inset 0 0 0 1px rgba(200, 170, 110, 0.12), inset 0 0 18px rgba(0, 0, 0, 0.45) !important;
  font-family: var(--oc-font-body) !important;
}

/* ---- Hextech framed panels ---- */
body .card,
body.night-mode .card,
body .x-card,
body .post,
body .publisher,
body .widget-box,
body .box,
body .modal-content,
body .dropdown-menu,
body .profile-header,
body .esports-team-card,
body .esports-split-card {
  background:
    linear-gradient(180deg, rgba(20, 42, 72, 0.55) 0%, rgba(8, 18, 36, 0.95) 55%, rgba(5, 12, 24, 0.98) 100%) !important;
  border: 1px solid var(--oc-gold-dim) !important;
  border-radius: 0 !important;
  box-shadow:
    0 0 0 1px rgba(26, 58, 92, 0.85),
    0 0 0 2px rgba(6, 16, 31, 0.9),
    inset 0 1px 0 rgba(240, 230, 210, 0.08),
    0 18px 48px rgba(0, 0, 0, 0.55) !important;
  color: var(--oc-text) !important;
  position: relative;
}

/* Corner ornaments */
body .card::before,
body .post::before,
body .publisher::before,
body .widget-box::before,
body .modal-content::before {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  border: 1px solid rgba(10, 150, 170, 0.22);
  box-shadow: inset 0 0 30px rgba(10, 150, 170, 0.06);
  z-index: 0;
}

body .card > *,
body .post > *,
body .publisher > *,
body .widget-box > *,
body .modal-content > * {
  position: relative;
  z-index: 1;
}

body .card-header,
body .card-footer,
body .modal-header,
body .modal-footer,
body .publisher-footer,
body .post-footer,
body .widget-box .title {
  background:
    linear-gradient(180deg, rgba(26, 58, 92, 0.65) 0%, rgba(8, 18, 36, 0.9) 100%) !important;
  border-color: rgba(200, 170, 110, 0.28) !important;
  color: var(--oc-gold-bright) !important;
  font-family: var(--oc-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem !important;
  border-radius: 0 !important;
}

body .card-header.with-icon {
  border-bottom: 1px solid transparent !important;
  background:
    linear-gradient(90deg, transparent, rgba(200, 170, 110, 0.55), transparent) bottom / 70% 1px no-repeat,
    linear-gradient(180deg, rgba(26, 58, 92, 0.7) 0%, rgba(8, 18, 36, 0.95) 100%) !important;
}

body .card-header.with-icon .main-icon,
body .card-header.with-icon .main-icon * {
  color: var(--oc-cyan) !important;
  fill: var(--oc-cyan) !important;
  stroke: var(--oc-cyan) !important;
  filter: drop-shadow(0 0 6px var(--oc-blue-glow));
}

/* ---- Old client gold buttons ---- */
body .btn,
body a.btn {
  font-family: var(--oc-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0 !important;
  transition: filter .15s ease, box-shadow .15s ease, transform .12s ease, background .15s ease;
}

body .btn.btn-primary,
body a.btn.btn-primary,
body .btn.btn-success,
body a.btn.btn-success,
body .btn-esports-primary,
body a.btn-esports-primary {
  background:
    linear-gradient(180deg, #f0d78a 0%, #c8aa6e 42%, #8a6a28 100%) !important;
  border: 1px solid #e0c070 !important;
  color: var(--oc-gold-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 230, 0.45),
    inset 0 -2px 0 rgba(60, 40, 10, 0.45),
    0 0 16px rgba(200, 170, 110, 0.25) !important;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.25);
}

body .btn.btn-primary:hover,
body a.btn.btn-primary:hover,
body .btn-esports-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 230, 0.55),
    0 0 22px rgba(10, 200, 185, 0.25) !important;
}

body .btn.btn-light,
body a.btn.btn-light,
body .btn.btn-outline-primary,
body .btn-esports-secondary,
body a.btn-esports-secondary {
  background: linear-gradient(180deg, rgba(20, 42, 72, 0.9), rgba(8, 18, 36, 0.95)) !important;
  border: 1px solid var(--oc-gold-dim) !important;
  color: var(--oc-gold) !important;
  box-shadow: inset 0 0 0 1px rgba(10, 150, 170, 0.2) !important;
}

body .btn.btn-light:hover,
body .btn-esports-secondary:hover {
  border-color: var(--oc-cyan) !important;
  color: var(--oc-gold-bright) !important;
  box-shadow: 0 0 14px var(--oc-blue-glow) !important;
}

body .btn.btn-secondary,
body a.btn.btn-secondary {
  background: rgba(6, 16, 31, 0.85) !important;
  border: 1px solid var(--oc-frame) !important;
  color: var(--oc-text) !important;
}

/* ---- Forms ---- */
body .form-control,
body .form-select,
body textarea.form-control,
body.night-mode .form-control,
body.night-mode .form-select {
  background: rgba(3, 9, 18, 0.92) !important;
  border: 1px solid var(--oc-frame) !important;
  border-radius: 0 !important;
  color: var(--oc-text) !important;
  box-shadow: inset 0 0 0 1px rgba(200, 170, 110, 0.08), inset 0 0 20px rgba(0, 0, 0, 0.4) !important;
  font-family: var(--oc-font-body) !important;
}

body .form-control:focus,
body .form-select:focus {
  border-color: var(--oc-cyan) !important;
  box-shadow: 0 0 0 1px var(--oc-cyan), 0 0 16px var(--oc-blue-glow) !important;
}

/* ---- Sidebar / left nav ---- */
body .main-side-nav,
body .side-nav,
body .js_sticky-sidebar .card {
  background:
    linear-gradient(180deg, rgba(14, 31, 61, 0.75), rgba(6, 16, 31, 0.95)) !important;
  border: 1px solid rgba(200, 170, 110, 0.28) !important;
  border-radius: 0 !important;
}

body .main-side-nav li > a,
body .side-nav li > a {
  font-family: var(--oc-font-display) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem !important;
  color: var(--oc-text) !important;
  border-radius: 0 !important;
  border-left: 2px solid transparent;
}

body .main-side-nav li > a:hover,
body .side-nav li > a:hover,
body .main-side-nav li.active > a,
body .side-nav li.active > a {
  color: var(--oc-gold-bright) !important;
  background: linear-gradient(90deg, rgba(10, 150, 170, 0.18), transparent 70%) !important;
  background-image: linear-gradient(90deg, rgba(10, 150, 170, 0.18), transparent 70%) !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  border-left-color: var(--oc-cyan) !important;
}

body .main-side-nav small.text-muted,
body .side-nav small.text-muted {
  font-family: var(--oc-font-display) !important;
  color: var(--oc-gold) !important;
  letter-spacing: 0.22em;
  opacity: 0.9;
}

/* ---- Feed / posts ---- */
body .post-header .post-header-name a,
body .feeds-item .name a {
  font-family: var(--oc-font-display) !important;
  color: var(--oc-gold-bright) !important;
  letter-spacing: 0.04em;
}

body .post-text,
body .post-text *,
body .js_readmore {
  color: var(--oc-text) !important;
  font-family: var(--oc-font-body) !important;
  line-height: 1.6 !important;
}

/* Read more — no mid-glyph clip; clear toggle placement */
body .post-text.js_readmore,
body .js_readmore[data-readmore] {
  overflow: hidden !important;
}
body .post-text + [data-readmore-toggle],
body .post-replace > a[data-readmore-toggle],
body a[data-readmore-toggle] {
  display: inline-block !important;
  margin: 0.35rem 16px 0.15rem !important;
  padding: 0 !important;
  font-family: var(--oc-font-display) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--oc-gold) !important;
  text-decoration: none !important;
}
body .post-replace > a[data-readmore-toggle] {
  margin-left: 0 !important;
}
body a[data-readmore-toggle]:hover {
  color: var(--oc-cyan) !important;
}

/* Post action hover — gold tint, no gray pill */
body .post-actions .action-btn {
  border-radius: 0 !important;
  background: transparent !important;
}
body .post-actions .action-btn:hover,
body.night-mode .post-actions .action-btn:hover {
  background: rgba(200, 170, 110, 0.1) !important;
  color: var(--oc-gold-bright) !important;
  box-shadow: inset 0 0 0 1px rgba(200, 170, 110, 0.28);
}

body .text-muted,
body .post-time,
body .stats-item {
  color: var(--oc-muted) !important;
}

/* ---- Badges / pills ---- */
body .badge,
body .badge.bg-success,
body .badge.bg-secondary,
body .badge.bg-primary {
  border-radius: 0 !important;
  font-family: var(--oc-font-display) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid rgba(200, 170, 110, 0.35);
}

body .badge.bg-success {
  background: linear-gradient(180deg, #1a6a4a, #0d3a28) !important;
  color: var(--oc-gold-bright) !important;
}

body .badge.bg-secondary {
  background: linear-gradient(180deg, #1a3a5c, #0b1830) !important;
  color: var(--oc-text) !important;
}

/* ---- Progress / bars (old client XP feel) ---- */
body .progress {
  background: rgba(3, 9, 18, 0.9) !important;
  border: 1px solid var(--oc-frame) !important;
  border-radius: 0 !important;
  height: 10px;
  overflow: hidden;
}

body .progress-bar,
body .progress-bar-info {
  background: linear-gradient(90deg, #0a5a6a, var(--oc-cyan), #7ae0d4) !important;
  box-shadow: 0 0 12px var(--oc-blue-glow);
}

/* ---- Dropdowns ---- */
body .dropdown-menu {
  border-radius: 0 !important;
  border: 1px solid var(--oc-gold-dim) !important;
  background: linear-gradient(180deg, #0e1f3d, #06101f) !important;
  box-shadow: 0 0 0 1px rgba(10, 150, 170, 0.2), 0 16px 40px rgba(0, 0, 0, 0.55) !important;
}

body .dropdown-item {
  color: var(--oc-text) !important;
  font-family: var(--oc-font-body) !important;
}

body .dropdown-item:hover,
body .dropdown-item:focus {
  background: rgba(10, 150, 170, 0.18) !important;
  color: var(--oc-gold-bright) !important;
}

/* ---- Tables / esports ---- */
body .table,
body .table > :not(caption) > * > * {
  color: var(--oc-text) !important;
  border-color: rgba(200, 170, 110, 0.18) !important;
  background: transparent !important;
}

body .table thead th {
  font-family: var(--oc-font-display) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oc-gold) !important;
  font-size: 0.72rem !important;
  background: rgba(14, 31, 61, 0.65) !important;
}

body .btn-esports-primary,
body .btn-esports-secondary {
  border-radius: 0 !important;
}

/* ---- Scrollbar ---- */
body ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body ::-webkit-scrollbar-track {
  background: var(--oc-navy-deep);
}
body ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--oc-frame-bright), var(--oc-navy-panel));
  border: 1px solid var(--oc-gold-dim);
}
body ::-webkit-scrollbar-thumb:hover {
  background: var(--oc-gold-dim);
}

/* ---- Landing / empty / offcanvas polish ---- */
body .sg-offcanvas-sidebar,
body .js_sticky-sidebar {
  z-index: 2;
}

body .alert-info {
  background: rgba(10, 150, 170, 0.12) !important;
  border: 1px solid rgba(10, 200, 185, 0.35) !important;
  color: var(--oc-text) !important;
  border-radius: 0 !important;
}

body .alert-success {
  background: rgba(26, 106, 74, 0.2) !important;
  border: 1px solid rgba(200, 170, 110, 0.35) !important;
  color: var(--oc-gold-bright) !important;
  border-radius: 0 !important;
}

/* Soften modern pills that fight the old look */
body .rounded-pill:not(.feeds-item .btn):not(.badge) {
  border-radius: 2px !important;
}

/* LoL Female / special pages inherit frame */
body .rs-lol-female-card {
  border-color: var(--oc-gold-dim) !important;
  background:
    linear-gradient(165deg, rgba(14, 31, 61, 0.95), rgba(6, 16, 31, 0.98)) !important;
}
body .rs-lol-female-lang-label {
  color: var(--oc-gold) !important;
  font-family: var(--oc-font-display) !important;
}

/* Night mode keep tokens */
body.night-mode {
  --link-color: var(--oc-gold);
  --header-bg-color-dark: rgba(6, 16, 31, 0.97);
  --body-bg-color-dark: var(--oc-navy-deep);
  --card-dark-color: var(--oc-navy-panel);
  --card-dark-input: rgba(3, 9, 18, 0.95);
  --card-dark-divider: rgba(200, 170, 110, 0.28);
  --plyr-color-main: var(--oc-gold);
}

@media (max-width: 991px) {
  body .main-header::after {
    left: 4%;
    right: 4%;
  }
}