/* Raya2 2026 panel system
   Loaded after responsive.css so every page shares the same visual language. */

:root {
  --raya-ink: #02191a;
  --raya-surface: rgba(3, 39, 40, 0.92);
  --raya-surface-strong: rgba(2, 30, 31, 0.97);
  --raya-surface-soft: rgba(9, 82, 83, 0.62);
  --raya-gold: #e0bd76;
  --raya-gold-bright: #f5dda7;
  --raya-gold-muted: rgba(224, 189, 118, 0.42);
  --raya-text: #f4ead3;
  --raya-muted: #b9cbc7;
  --raya-line: rgba(224, 189, 118, 0.24);
  --raya-shadow: 0 22px 54px rgba(0, 0, 0, 0.38);
}

/* Blend the hero artwork into the long page background. */
.section-wrapper1 {
  position: relative;
  z-index: 5;
  isolation: isolate;
  overflow: visible;
  background: transparent !important;
}

.section-wrapper1::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-color: #031f20;
  background-image: url("../images/raya-content-background.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.3) 62px, #000 175px);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.3) 62px, #000 175px);
}

.section-wrapper1::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -150px;
  left: 0;
  width: 100%;
  height: 230px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(2, 23, 23, 0) 0%,
    rgba(2, 29, 29, 0.38) 38%,
    rgba(3, 31, 32, 0.88) 78%,
    rgba(3, 31, 32, 0) 100%
  );
}

.section-wrapper1 > .container {
  position: relative;
  z-index: 1;
}

/* Shared panel surface. */
.s-box,
.xy-news-part,
.events-panel,
.news-events-calendar,
.account-form,
.download-game,
.card-d,
.page-content {
  color: var(--raya-text);
  background:
    linear-gradient(145deg, rgba(13, 91, 88, 0.2), transparent 42%),
    var(--raya-surface);
  border: 1px solid var(--raya-gold-muted);
  border-radius: 5px;
  box-shadow: var(--raya-shadow), inset 0 1px 0 rgba(255, 237, 190, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Replace the large decorative PNG frames with compact panel headers. */
.s-box {
  height: auto;
  min-height: 0;
  margin: 0 0 42px;
  padding: 70px 18px 24px;
  overflow: hidden;
}

.s-box-s2 {
  height: auto;
  min-height: 0;
}

.s-box > .border-img,
.s-box-header > .bg-img {
  display: none !important;
}

.s-box-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 28, 29, 0.82);
  border-bottom: 1px solid var(--raya-line);
}

.s-box-header::before,
.s-box-header::after {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--raya-gold));
}

.s-box-header::after {
  background: linear-gradient(90deg, var(--raya-gold), transparent);
}

.s-box-header .header-cont {
  position: static;
  width: auto;
  padding: 0 14px;
}

.s-box-header h3 {
  margin: 0;
  color: var(--raya-gold-bright);
  font-family: "Marcellus SC", Georgia, serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

/* Login and account controls. */
.s-box-form {
  padding: 3px 0 0;
}

.single-input-x {
  margin-bottom: 11px;
}

.single-input-x-input {
  height: 42px;
  color: #fff;
  background: rgba(1, 28, 29, 0.82);
  border: 1px solid rgba(224, 189, 118, 0.2);
  border-radius: 3px;
  box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.24);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.single-input-x-input:focus {
  outline: none;
  background: rgba(4, 52, 52, 0.92);
  border-color: rgba(245, 221, 167, 0.72);
}

.single-input-x-input::placeholder {
  color: #809b96;
}

.form-fgt {
  min-height: 38px;
  color: var(--raya-gold-bright);
  background: rgba(9, 78, 78, 0.48);
  border: 1px solid rgba(224, 189, 118, 0.14);
  border-radius: 3px;
  box-shadow: none;
}

.form-fgt a {
  color: var(--raya-gold-bright);
}

.default-button {
  min-width: 116px;
  min-height: 36px;
  padding: 9px 18px !important;
  color: #092b2b !important;
  background: linear-gradient(180deg, #ffe2aa 0%, #d5a052 100%) !important;
  border: 1px solid #f1ca80 !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 #fff1c8 !important;
  font-family: "Marcellus SC", Georgia, serif;
  font-weight: 700;
  line-height: 1;
  text-shadow: none !important;
}

.default-button:hover {
  color: #061f20 !important;
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Rankings and statistics. */
.gold-player {
  margin: 0 0 14px;
  padding: 14px;
  gap: 13px;
  background: rgba(8, 90, 88, 0.62);
  border: 1px solid rgba(224, 189, 118, 0.18);
  border-left: 2px solid var(--raya-gold);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.table-st1-str1 {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(224, 189, 118, 0.1);
  border-radius: 3px;
}

.table-st1 tbody tr,
.table-user a {
  background: rgba(3, 47, 48, 0.74);
}

.table-st1 tbody tr:nth-child(odd),
.table-user a:nth-child(odd) {
  background: rgba(11, 99, 97, 0.56);
}

.table-st1 table td {
  color: #eef3e9;
}

.table-user a {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(224, 189, 118, 0.08);
}

.table-update-time__outer {
  border-top-color: var(--raya-line);
}

.table-update-time {
  margin-top: 4px;
  color: var(--raya-text);
  background: rgba(3, 48, 49, 0.78);
  border: 1px solid rgba(224, 189, 118, 0.12);
  border-radius: 3px;
}

/* Center slider and news pages. */
.m-slider {
  margin-bottom: 14px;
  border: 1px solid var(--raya-gold-muted);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: var(--raya-shadow);
}

.m-box-design1 {
  height: 260px;
}

.m-slide-caption {
  top: 16px;
  padding: 12px 24px;
  background: linear-gradient(90deg, rgba(1, 25, 26, 0.9), rgba(1, 25, 26, 0.25));
  border-left: 2px solid var(--raya-gold);
}

.slider-arrow-1 .owl-nav button {
  background: rgba(8, 99, 98, 0.9) !important;
  border: 1px solid rgba(224, 189, 118, 0.24) !important;
  border-radius: 3px;
}

.xy-news-part {
  min-height: 400px;
  padding-bottom: 28px;
  overflow: hidden;
}

.xy-news-header,
.page-hd {
  margin: 0;
  padding: 14px 18px;
  background: rgba(1, 28, 29, 0.55);
  border-bottom: 1px solid var(--raya-line);
}

.xy-news-header h3,
.page-hd h3,
.pre-social {
  margin: 0;
  color: var(--raya-gold-bright);
  font-family: "Marcellus SC", Georgia, serif;
  font-size: 19px;
  font-weight: 400;
}

.xy-nh-ul li a {
  color: var(--raya-gold-bright);
  background: rgba(5, 61, 62, 0.7);
  border-color: rgba(224, 189, 118, 0.26);
}

.xy-nh-ul li a.active,
.xy-nh-ul li a:hover {
  color: #082a2d;
  background: linear-gradient(180deg, #ffe0a3 0%, #d9a150 100%);
}

.content-xy {
  padding: 30px 30px 12px;
}

.content-xy .xy-title {
  padding: 15px 18px;
  background: rgba(2, 35, 36, 0.74);
  border: 1px solid rgba(224, 189, 118, 0.18);
  border-left: 2px solid var(--raya-gold);
  border-right: 1px solid rgba(224, 189, 118, 0.18);
  border-radius: 3px;
  box-shadow: none;
}

.xy-text-cont p {
  color: var(--raya-text);
  font-size: 13px;
  line-height: 1.62;
}

/* Event panels follow the same surface and spacing. */
.events-panel {
  margin: 0 0 42px !important;
  padding: 18px 14px;
}

.events-panel::before {
  background: linear-gradient(90deg, transparent, var(--raya-gold), transparent);
}

.events-panel__item {
  background: rgba(7, 86, 84, 0.66);
  border: 1px solid rgba(224, 189, 118, 0.12);
  border-left: 2px solid var(--raya-gold);
  border-radius: 3px;
  box-shadow: none;
}

.m-sidebar-right .s-box + .events-panel,
.m-sidebar-right .events-panel + .s-box-s2 {
  margin-top: 0 !important;
}

/* Footer becomes a quiet continuation of the page instead of a teal stripe. */
.footer-section {
  position: relative;
  margin-top: -1px;
  color: var(--raya-muted);
  background: rgba(1, 20, 21, 0.96);
  border-top: 1px solid rgba(224, 189, 118, 0.2);
  box-shadow: 0 -20px 48px rgba(0, 0, 0, 0.24);
}

.footer-bottom {
  padding: 20px 0;
}

.footer-p {
  color: var(--raya-muted);
}

.footer-p .blue-c {
  color: var(--raya-gold-bright);
}

/* Keep columns airy and aligned. */
.main-section-inner {
  gap: 28px;
}

.m-sidebar {
  flex: 0 0 23.5%;
}

.m-main-part {
  flex: 1 1 auto;
  min-width: 0;
}

/* Tablet and phone layout. */
@media (max-width: 1199px) {
  .main-section-inner {
    gap: 32px;
  }

  .m-sidebar {
    flex-basis: 290px;
  }

  .m-main-part {
    flex-basis: 100%;
  }

  .section-wrapper1::before {
    top: -110px;
    height: 180px;
  }
}

@media (max-width: 768px) {
  .section-wrapper1 {
    background-position: 58% top;
  }

  .section-wrapper1::before {
    top: -80px;
    height: 140px;
  }

  .main-section-inner {
    gap: 26px;
  }

  .m-sidebar,
  .m-main-part {
    width: min(100%, 590px);
    flex-basis: auto;
  }

  .s-box,
  .events-panel {
    margin-bottom: 26px !important;
  }
}

@media (max-width: 575px) {
  .section-wrapper1 {
    padding: 28px 0 55px;
  }

  .s-box {
    width: 100%;
    padding: 66px 14px 20px;
  }

  .s-box-header {
    height: 50px;
  }

  .m-sidebar {
    width: min(100%, 340px);
  }

  .xy-news-header,
  .page-hd {
    padding: 16px 12px;
  }

  .content-xy {
    padding: 20px 14px 8px;
  }

  .m-slider,
  .xy-news-part,
  .s-box,
  .events-panel {
    border-radius: 4px;
  }

  .m-box-design1 {
    height: 210px;
  }

  .xy-text-cont p {
    text-align: left;
  }
}
/* Compact voting links inside the real footer. */
.footer-bottom .container {
  gap: 16px 28px;
  justify-content: space-between;
}

.raya-vote-links {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.raya-vote-links a {
  flex: 0 0 auto;
}

.raya-vote-links__nostalgic {
  width: 112px;
  height: 45px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(224, 189, 118, 0.2);
  border-radius: 4px;
}

.raya-vote-links__nostalgic img {
  width: 112px;
  height: auto;
  display: block;
}

.raya-vote-links__text {
  color: var(--raya-gold-bright);
  font-size: 12px;
  white-space: nowrap;
}

.raya-vote-links__text:hover {
  color: #fff;
}

@media (max-width: 575px) {
  .footer-bottom .container {
    flex-direction: column;
    justify-content: center;
  }

  .raya-vote-links {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }
}
/* Video dragon hero: same framing as the source image, motion lives in MP4. */
.header {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #021b1b;
}

.header .hero-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  background: #021b1b url("../images/raya-dragon-background.png") no-repeat center top / cover !important;
  border-bottom: 0 !important;
}

.header-video {
  position: absolute !important;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}

.header .hero-section > .container {
  position: relative;
  z-index: 3;
}

.header .hero-section::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 21, 20, 0.12), rgba(0, 43, 41, 0.02) 46%, rgba(0, 20, 20, 0.12));
}

.header .hero-section::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 18, 17, 0) 68%, rgba(0, 39, 38, 0.18) 100%);
}

.raya-ambient-effects {
  display: none !important;
}

.raya-hero-brand {
  z-index: 6;
  transform: translateZ(0);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.7));
}