/* ══════════════════════════════════════════
   Shared fixed-viewport background
   Used by Classic, Geria and Aurora — one image covers the entire
   viewport and stays put while content scrolls over it. Nuyah handles
   its own video/image background separately and does NOT use this.
   ══════════════════════════════════════════ */

.site-fixed-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--site-bg-image, url("../../images/bg2.webp"));
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: var(--bg-darkest);
  pointer-events: none;
}

/* ══════════════════════════════════════════
   Hide the global default footer for layouts that render their own.
   ══════════════════════════════════════════ */

html.layout-classic body > footer:not(.classic-footer),
html.layout-classic body > section > footer:not(.classic-footer),
html.layout-geria body > footer:not(.geria-footer),
html.layout-geria body > section > footer:not(.geria-footer),
html.layout-aurora body > footer:not(.aurora-footer),
html.layout-aurora body > section > footer:not(.aurora-footer) {
  display: none !important;
}

/* ══════════════════════════════════════════
   CLASSIC FOOTER — centered stacked strip
   (logo, separated links row, copyright). Distinct per-layout style.
   ══════════════════════════════════════════ */

.classic-footer {
  width: 100%;
  background-color: var(--bg-darkest);
  border-top: 1px solid rgba(var(--rgb-gold), 0.15);
  /* Sticky-footer trick: in a flex-col parent, margin-top auto consumes
     all free space, pinning the footer to the bottom when content is short. */
  margin-top: auto;
  color: var(--text-muted);
}

.classic-footer-logo {
  display: block;
  max-height: 42px;
  width: auto;
  margin-bottom: 2px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.classic-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
}

.classic-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.2s ease;
}

.classic-footer-links a:hover {
  color: var(--color-primary);
  transform: translateY(-1px);
}

.classic-footer-sep {
  color: var(--text-dim);
  opacity: 0.5;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.classic-footer-copy {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════
   GERIA FOOTER — split row (brand left, links right),
   gold framed bar, heading-font links. Distinct style.
   ══════════════════════════════════════════ */

.geria-footer {
  width: 100%;
  background-color: rgba(var(--rgb-medium), 0.9);
  border-top: 2px solid rgba(var(--rgb-gold), 0.3);
  border-bottom: 1px solid rgba(var(--rgb-gold), 0.15);
  margin-top: auto;
  padding: 18px 0;
  color: var(--text-muted);
}

.geria-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.geria-footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.geria-footer-logo {
  display: block;
  max-height: 42px;
  width: auto;
}

.geria-footer-copy {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-heading);
  letter-spacing: 1px;
}

.geria-footer-links {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.geria-footer-links a {
  color: var(--color-primary-muted, var(--color-primary));
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.2s ease;
  position: relative;
}

.geria-footer-links a:hover {
  color: var(--color-primary);
}

.geria-footer-links a:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: rgba(var(--rgb-gold), 0.5);
}

@media (max-width: 720px) {
  .geria-footer-inner {
    justify-content: center;
    text-align: center;
  }

  .geria-footer-brand, .geria-footer-links {
    justify-content: center;
  }
}

@font-face {
  font-family: "Albertus Nova";

  src: url("../../fonts/AlbertusNova.woff2") format("woff2"),
       url("../../fonts/AlbertusNova.woff") format("woff"),
       url("../../fonts/AlbertusNova.ttf") format("truetype");

  font-weight: 400;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Strong Sword";

  src: url("../../fonts/Strong_Sword.woff2") format("woff2"),
       url("../../fonts/Strong_Sword.ttf") format("truetype");

  font-weight: 400;

  font-style: normal;

  font-display: optional;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Inter, system-ui, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

html, body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

nav, nav * {
  font-family: var(--font-heading);
}

body {
  background-color: var(--bg-dark);
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}

@media (max-width: 1023px) {
  body {
    padding-top: 0;
  }
}

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

::-webkit-scrollbar-track {
  background: var(--bg-darkest);
}

::-webkit-scrollbar-thumb {
  background-color: var(--bg-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-primary);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: var(--text-link-hover);
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* Container */

.site-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1320px;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (max-width: 767px) {
  .geria-layout .site-container > div:first-child {
    min-height: 260px;
  }
}

/* Buttons */

.btn-primary {
  cursor: pointer;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  border-radius: var(--border-radius);
  background: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
  color: var(--btn-primary-text);
}

.btn-primary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 15px rgba(var(--rgb-gold), 0.08);
}

.btn-gold {
  cursor: pointer;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  border-radius: var(--border-radius);
  background: linear-gradient(180deg, var(--btn-gold-from), var(--btn-gold-to));
  color: var(--btn-gold-text);
  border: 1px solid rgba(var(--rgb-gold), 0.4);
}

.btn-gold:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 20px rgba(var(--rgb-gold), 0.15);
}

.btn-secondary {
  cursor: pointer;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  border-radius: var(--border-radius);
  background: var(--bg-light);
  border: 1px solid rgba(var(--rgb-gold), 0.12);
  color: var(--text-muted);
}

.btn-secondary:hover {
  border-color: rgba(var(--rgb-gold), 0.3);
  color: var(--color-primary-muted);
}

.btn-danger {
  cursor: pointer;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  border-radius: var(--border-radius);
  background: var(--btn-danger-bg);
  border: 1px solid rgba(180, 50, 50, 0.4);
  color: var(--color-danger);
}

.btn-danger:hover {
  border-color: rgba(180, 50, 50, 0.7);
  color: #ff8888;
}

/* Input fields */

.input-field {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 14px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (max-width: 767px) {
  .geria-layout .input-field > div:first-child {
    min-height: 260px;
  }
}

.input-field {
  border-radius: var(--border-radius);
  height: 55px;
  background: var(--bg-dark);
  color: var(--text-body);
  border: 1px solid rgba(var(--rgb-gold), 0.2);
}

.input-field::-moz-placeholder {
  color: var(--text-dim);
}

.input-field::placeholder {
  color: var(--text-dim);
}

.input-field:focus {
  outline: none;
  border-color: rgba(var(--rgb-gold), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--rgb-gold), 0.06);
}

/* Cards / Panels */

.card {
  border-radius: var(--border-radius);
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  color: var(--text-body);
}

.panel {
  overflow: hidden;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-gold);
}

/* Page header */

/* Tables */

.data-table {
  width: 100%;
  border-collapse: collapse;
}

@media (max-width: 767px) {
  .geria-layout .data-table > div:first-child {
    min-height: 260px;
  }
}

.data-table {
  min-width: 480px;
}

.data-table thead {
  background: transparent;
}

.data-table th {
  white-space: nowrap;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  border-bottom: 1px solid var(--border-gold);
}

.data-table td {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-size: 14px;
  color: var(--text-body);
  border-bottom: 1px solid var(--bg-medium);
}

.data-table tbody tr {
  transition: all 0.2s;
}

.data-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.275);
  color: var(--text-heading);
}

.data-table tbody tr:nth-child(odd) {
  background: rgba(0, 0, 0, 0.15);
}

/* Tabs */

.nav-tab {
  cursor: pointer;
  white-space: nowrap;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  font-family: var(--font-heading);
}

.nav-tab:hover {
  color: var(--color-primary-muted);
  border-bottom-color: var(--color-primary-dim);
}

.nav-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.nav-tab.\!active {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
}

/* Badges */

.badge {
  display: inline-block;
  border-radius: 0.125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
}

.badge-danger {
  background: var(--btn-danger-bg);
  color: var(--color-danger);
}

.badge-warning {
  background: rgba(var(--rgb-gold), 0.15);
  color: var(--color-primary);
}

.badge-info {
  background: rgba(45, 62, 82, 0.8);
  color: var(--color-info);
}

.badge-success {
  background: rgba(12, 227, 172, 0.15);
  color: var(--color-success);
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.-right-1 {
  right: -0.25rem;
}

.-top-1 {
  top: -0.25rem;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-0\.5 {
  bottom: 0.125rem;
}

.bottom-2 {
  bottom: 0.5rem;
}

.left-0 {
  left: 0px;
}

.left-0\.5 {
  left: 0.125rem;
}

.left-2 {
  left: 0.5rem;
}

.left-3 {
  left: 0.75rem;
}

.left-\[20\%\] {
  left: 20%;
}

.right-0 {
  right: 0px;
}

.right-0\.5 {
  right: 0.125rem;
}

.right-2 {
  right: 0.5rem;
}

.right-\[20\%\] {
  right: 20%;
}

.top-0 {
  top: 0px;
}

.top-0\.5 {
  top: 0.125rem;
}

.top-1\/2 {
  top: 50%;
}

.top-2 {
  top: 0.5rem;
}

.top-3 {
  top: 0.75rem;
}

.top-\[86px\] {
  top: 86px;
}

.top-full {
  top: 100%;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-50 {
  z-index: 50;
}

.z-\[1000\] {
  z-index: 1000;
}

.z-\[1\] {
  z-index: 1;
}

.z-\[60\] {
  z-index: 60;
}

.z-\[9999\] {
  z-index: 9999;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.m-0 {
  margin: 0px;
}

.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-1\.5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.mb-0\.5 {
  margin-bottom: 0.125rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-2\.5 {
  margin-bottom: 0.625rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-1\.5 {
  margin-left: 0.375rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.ml-8 {
  margin-left: 2rem;
}

.ml-\[196px\] {
  margin-left: 196px;
}

.ml-\[216px\] {
  margin-left: 216px;
}

.ml-auto {
  margin-left: auto;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-1\.5 {
  margin-right: 0.375rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mt-0 {
  margin-top: 0px;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.\!h-10 {
  height: 2.5rem !important;
}

.\!h-11 {
  height: 2.75rem !important;
}

.\!h-8 {
  height: 2rem !important;
}

.\!h-9 {
  height: 2.25rem !important;
}

.\!h-auto {
  height: auto !important;
}

.h-1 {
  height: 0.25rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-32 {
  height: 8rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[120px\] {
  height: 120px;
}

.h-\[180px\] {
  height: 180px;
}

.h-\[18px\] {
  height: 18px;
}

.h-\[22px\] {
  height: 22px;
}

.h-\[28px\] {
  height: 28px;
}

.h-\[3px\] {
  height: 3px;
}

.h-\[40px\] {
  height: 40px;
}

.h-\[44px\] {
  height: 44px;
}

.h-\[50px\] {
  height: 50px;
}

.h-\[60\%\] {
  height: 60%;
}

.h-\[64px\] {
  height: 64px;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.max-h-\[200px\] {
  max-height: 200px;
}

.max-h-\[400px\] {
  max-height: 400px;
}

.max-h-\[70vh\] {
  max-height: 70vh;
}

.max-h-full {
  max-height: 100%;
}

.min-h-\[200px\] {
  min-height: 200px;
}

.min-h-\[400px\] {
  min-height: 400px;
}

.min-h-\[52px\] {
  min-height: 52px;
}

.min-h-\[64px\] {
  min-height: 64px;
}

.min-h-screen {
  min-height: 100vh;
}

.\!w-24 {
  width: 6rem !important;
}

.\!w-36 {
  width: 9rem !important;
}

.\!w-40 {
  width: 10rem !important;
}

.\!w-48 {
  width: 12rem !important;
}

.\!w-auto {
  width: auto !important;
}

.w-1 {
  width: 0.25rem;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-32 {
  width: 8rem;
}

.w-4 {
  width: 1rem;
}

.w-40 {
  width: 10rem;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-52 {
  width: 13rem;
}

.w-6 {
  width: 1.5rem;
}

.w-7 {
  width: 1.75rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

.w-\[100px\] {
  width: 100px;
}

.w-\[120px\] {
  width: 120px;
}

.w-\[140px\] {
  width: 140px;
}

.w-\[180px\] {
  width: 180px;
}

.w-\[18px\] {
  width: 18px;
}

.w-\[190px\] {
  width: 190px;
}

.w-\[200px\] {
  width: 200px;
}

.w-\[22px\] {
  width: 22px;
}

.w-\[230px\] {
  width: 230px;
}

.w-\[28px\] {
  width: 28px;
}

.w-\[40px\] {
  width: 40px;
}

.w-\[44px\] {
  width: 44px;
}

.w-\[60px\] {
  width: 60px;
}

.w-\[min\(320px\2c 90vw\)\] {
  width: min(320px, 90vw);
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-\[18px\] {
  min-width: 18px;
}

.min-w-\[200px\] {
  min-width: 200px;
}

.min-w-\[70px\] {
  min-width: 70px;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-\[1320px\] {
  max-width: 1320px;
}

.max-w-\[1400px\] {
  max-width: 1400px;
}

.max-w-\[140px\] {
  max-width: 140px;
}

.max-w-\[1460px\] {
  max-width: 1460px;
}

.max-w-\[250px\] {
  max-width: 250px;
}

.max-w-\[280px\] {
  max-width: 280px;
}

.max-w-\[300px\] {
  max-width: 300px;
}

.max-w-\[400px\] {
  max-width: 400px;
}

.max-w-\[420px\] {
  max-width: 420px;
}

.max-w-\[440px\] {
  max-width: 440px;
}

.max-w-\[600px\] {
  max-width: 600px;
}

.max-w-\[800px\] {
  max-width: 800px;
}

.max-w-\[900px\] {
  max-width: 900px;
}

.max-w-full {
  max-width: 100%;
}

.max-w-none {
  max-width: none;
}

.max-w-xl {
  max-width: 36rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-\[2\] {
  flex: 2;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.shrink-0 {
  flex-shrink: 0;
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-5 {
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.cursor-help {
  cursor: help;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize {
  resize: both;
}

.scroll-mt-20 {
  scroll-margin-top: 5rem;
}

.list-inside {
  list-style-position: inside;
}

.list-decimal {
  list-style-type: decimal;
}

.list-none {
  list-style-type: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols-\[70px_1fr_80px_auto\] {
  grid-template-columns: 70px 1fr 80px auto;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-0 {
  gap: 0px;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-\[10px\] {
  gap: 10px;
}

.gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-y-0\.5 {
  row-gap: 0.125rem;
}

.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.self-stretch {
  align-self: stretch;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-\[3px\] {
  border-radius: 3px;
}

.rounded-\[4px\] {
  border-radius: 4px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-sm {
  border-radius: 0.125rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-b {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.rounded-b-\[10px\] {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.rounded-l {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.rounded-r {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-\[rgba\(var\(--rgb-accent\)\2c 0\.12\)\] {
  border-color: rgba(var(--rgb-accent),0.12);
}

.bg-\[rgba\(var\(--rgb-gold\)\2c 0\.08\)\] {
  background-color: rgba(var(--rgb-gold),0.08);
}

.bg-\[var\(--bg-light\)\] {
  background-color: var(--bg-light);
}

.bg-\[var\(--color-primary\)\] {
  background-color: var(--color-primary);
}

.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-12 {
  padding: 3rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.\!px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.\!px-5 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

.\!px-6 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.\!py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.\!py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-\[10px\] {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-\[11px\] {
  padding-top: 11px;
  padding-bottom: 11px;
}

.py-\[15px\] {
  padding-top: 15px;
  padding-bottom: 15px;
}

.\!pl-9 {
  padding-left: 2.25rem !important;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-2\.5 {
  padding-bottom: 0.625rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pt-\[64px\] {
  padding-top: 64px;
}

.pt-\[72px\] {
  padding-top: 72px;
}

.pt-\[80px\] {
  padding-top: 80px;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.align-middle {
  vertical-align: middle;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.\!text-\[10px\] {
  font-size: 10px !important;
}

.\!text-\[11px\] {
  font-size: 11px !important;
}

.\!text-\[12px\] {
  font-size: 12px !important;
}

.\!text-\[13px\] {
  font-size: 13px !important;
}

.\!text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

.\!text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-\[1\.7em\] {
  font-size: 1.7em;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[18px\] {
  font-size: 18px;
}

.text-\[28px\] {
  font-size: 28px;
}

.text-\[32px\] {
  font-size: 32px;
}

.text-\[40px\] {
  font-size: 40px;
}

.text-\[8px\] {
  font-size: 8px;
}

.text-\[9px\] {
  font-size: 9px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.normal-case {
  text-transform: none;
}

.italic {
  font-style: italic;
}

.leading-\[64px\] {
  line-height: 64px;
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[2px\] {
  letter-spacing: 2px;
}

.tracking-\[3px\] {
  letter-spacing: 3px;
}

.tracking-\[4px\] {
  letter-spacing: 4px;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-\[color\:var\(--color-danger\)\] {
  color: var(--color-danger);
}

.text-\[color\:var\(--color-primary\)\] {
  color: var(--color-primary);
}

.text-\[color\:var\(--color-primary-muted\)\] {
  color: var(--color-primary-muted);
}

.text-\[color\:var\(--color-success\)\] {
  color: var(--color-success);
}

.text-\[color\:var\(--color-warning\)\] {
  color: var(--color-warning);
}

.text-\[color\:var\(--text-body\)\] {
  color: var(--text-body);
}

.text-\[color\:var\(--text-dim\)\] {
  color: var(--text-dim);
}

.text-\[color\:var\(--text-heading\)\] {
  color: var(--text-heading);
}

.text-\[color\:var\(--text-muted\)\] {
  color: var(--text-muted);
}

.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.line-through {
  text-decoration-line: line-through;
}

.no-underline {
  text-decoration-line: none;
}

.accent-\[var\(--color-primary\)\] {
  accent-color: var(--color-primary);
}

.opacity-0 {
  opacity: 0;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* ══════════════════════════════════════════
   THEME VARIABLES — All configurable from ACP
   ══════════════════════════════════════════ */

:root {
  /* ── RGB channels (MUST be first — other vars reference these) ── */
  --rgb-dark: 15,20,25;
  --rgb-medium: 26,35,50;
  --rgb-accent: 100,160,220;
  --rgb-gold: 229,182,107;
  /* ── Backgrounds ── */
  --bg-darkest: #0a0e14;
  --bg-dark: #0f1419;
  --bg-medium: #1a2332;
  --bg-light: #1f2937;
  --bg-card: #0f1419;
  --bg-card-header: linear-gradient(180deg, rgba(var(--rgb-medium),0.8), rgba(var(--rgb-dark),0.9));
  /* ── Primary / Gold ── */
  --color-primary: #e5b66b;
  --color-primary-light: #dbd2b2;
  --color-primary-muted: #c8b882;
  --color-primary-dim: rgba(var(--rgb-gold),0.18);
  /* ── Text ── */
  --text-heading: #dbd2b2;
  --text-body: #b0c4d8;
  --text-muted: #8899aa;
  --text-dim: #5a6b7d;
  --text-link: #c8b882;
  --text-link-hover: #e5b66b;
  /* ── Borders ── */
  --border-gold: rgba(var(--rgb-gold),0.12);
  --border-gold-strong: rgba(var(--rgb-gold),0.25);
  --border-blue: rgba(var(--rgb-accent),0.12);
  /* ── Accents ── */
  --color-success: #0ce3ac;
  --color-danger: #d07070;
  --color-warning: #f59e0b;
  --color-info: #5b8ab8;
  /* ── Buttons ── */
  --btn-gold-from: rgb(180, 155, 105);
  --btn-gold-to: rgb(130, 105, 65);
  --btn-gold-text: #1a1410;
  --btn-primary-bg: #1a2332;
  --btn-primary-text: #c8b882;
  --btn-primary-border: rgba(var(--rgb-gold),0.18);
  --btn-danger-bg: #581414;
  --btn-danger-text: #d07070;
  /* ── Fonts ── */
  --font-heading: "Albertus Nova", Georgia, serif;
  --font-body: inherit;
  /* ── Border Radius ── */
  --border-radius: 4px;
}

/* ── Text utility classes ── */

.t-heading {
  color: var(--text-heading);
  font-family: var(--font-heading);
}

.t-body {
  color: var(--text-body);
}

.t-muted {
  color: var(--text-muted);
}

.t-dim {
  color: var(--text-dim);
}

.t-primary {
  color: var(--color-primary);
}

.t-success {
  color: var(--color-success);
}

.t-danger {
  color: var(--color-danger);
}

.t-warning {
  color: var(--color-warning);
}

.t-info {
  color: var(--color-info);
}

/* ── Text size classes ── */

.t-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-heading);
}

.t-subtitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary-muted);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 3px;
}

.t-section {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.t-label {
  font-size: 13px;
  color: var(--text-dim);
}

.t-small {
  font-size: 12px;
  color: var(--text-muted);
}

.t-tiny {
  font-size: 11px;
  color: var(--text-dim);
}

/* ── Rich Text Editor (TipTap) ── */

.rich-editor-content {
  padding: 12px 16px;
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.7;
  background: var(--bg-medium);
  outline: none;
}

.rich-editor-content:focus {
  outline: none;
}

.rich-editor-content p {
  margin: 0 0 0.75em;
}

.rich-editor-content p:last-child {
  margin-bottom: 0;
}

.rich-editor-content h1 {
  font-size: 1.8em;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0.5em 0 0.3em;
}

.rich-editor-content h2 {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0.5em 0 0.3em;
}

.rich-editor-content h3 {
  font-size: 1.15em;
  font-weight: 600;
  color: var(--text-heading);
  margin: 0.5em 0 0.3em;
}

.rich-editor-content strong {
  color: var(--text-heading);
}

.rich-editor-content em {
  font-style: italic;
}

.rich-editor-content u {
  text-decoration: underline;
}

.rich-editor-content s {
  text-decoration: line-through;
  opacity: 0.6;
}

.rich-editor-content a.editor-link {
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
}

.rich-editor-content blockquote {
  border-left: 3px solid rgba(var(--rgb-gold),0.4);
  padding-left: 14px;
  margin: 0.75em 0;
  color: var(--text-muted);
  font-style: italic;
}

.rich-editor-content ul {
  list-style: disc;
  padding-left: 1.5em;
  margin: 0.5em 0;
}

.rich-editor-content ol {
  list-style: decimal;
  padding-left: 1.5em;
  margin: 0.5em 0;
}

.rich-editor-content li {
  margin: 0.2em 0;
}

.rich-editor-content code {
  background: rgba(var(--rgb-accent),0.1);
  color: var(--color-primary);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'Consolas', monospace;
  font-size: 0.9em;
}

.rich-editor-content pre {
  background: var(--bg-dark);
  border: 1px solid rgba(var(--rgb-accent),0.12);
  border-radius: 4px;
  padding: 12px;
  margin: 0.75em 0;
  overflow-x: auto;
}

.rich-editor-content pre code {
  background: none;
  padding: 0;
  color: var(--text-body);
}

.rich-editor-content hr {
  border: none;
  border-top: 1px solid rgba(var(--rgb-accent),0.15);
  margin: 1em 0;
}

.rich-editor-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 0.75em 0;
}

.rich-editor-content mark {
  background: rgba(var(--rgb-gold),0.25);
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}

.rich-editor-content .ProseMirror-focused {
  outline: none;
}

.tiptap p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--text-dim);
  pointer-events: none;
  height: 0;
}

/* Logo */

.site-logo {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
  width: 50%;
  max-width: 600px;
}

@media (max-width: 1199px) {
  .site-logo {
    display: none;
  }
}

/* Cookie consent — hidden by default, shown via blocking script */

.cookie-consent {
  visibility: hidden !important;
  transform: translateY(100vh) !important;
  position: fixed !important;
}

html.show-cookie .cookie-consent {
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Discord widget */

.discord-widget {
  position: fixed;
  right: -150px;
  z-index: 45;
  opacity: 0.5;
  transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
  border-radius: 8px 0 0 8px;
  overflow: hidden;
  box-shadow: -4px 0 20px rgba(0,0,0,0.5);
}

.discord-widget:hover {
  right: 0;
  opacity: 1;
}

@media (max-width: 768px) {
  .discord-widget {
    display: none;
  }
}

/* Back to top button */

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 45;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--btn-gold-from), var(--btn-gold-to));
  color: var(--btn-gold-text);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
  transition: opacity 0.3s, transform 0.3s;
}

.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(var(--rgb-gold),0.3);
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
  }
}

/* Loading bar */

#loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(to right, #2d3e52, #e5b66b);
  z-index: 9999;
  transition: width 0.3s ease, opacity 0.3s ease;
}

/* Navbar link animation */

.nav-link-animated {
  position: relative;
}

.nav-link-animated::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: #e5b66b;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-link-animated:hover::after {
  width: 100%;
  left: 0;
  transform: translateX(0);
}

/* News card styling */

.news-card {
  background: linear-gradient(199deg, #0f1419 0%, #1a2332 100%);
  border: 1px solid rgba(var(--rgb-gold), 0.12);
  border-radius: 4px;
  overflow: hidden;
}

.news-card-title {
  background: linear-gradient(199deg, #131f2e 0%, #1a2332 100%);
  border-bottom: 1px solid rgba(var(--rgb-gold), 0.18);
}

/* Forum category cards */

.forum-category-card {
  background: #1a2332;
  border: 1px solid rgba(var(--rgb-gold), 0.12);
  border-radius: 4px;
  transition: all 0.3s;
}

.forum-category-card:hover {
  border-color: rgba(var(--rgb-gold), 0.25);
  background: var(--bg-light);
}

/* Select dropdown */

select.input-field {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23c8b882' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 16px;
}

/* ═══ Page Transitions ═══ */

.pt-fade {
  animation: pt-fade-in 0.4s ease-out;
}

.pt-slide-up {
  animation: pt-slide-up-in 0.4s ease-out;
}

.pt-slide-down {
  animation: pt-slide-down-in 0.4s ease-out;
}

.pt-slide-left {
  animation: pt-slide-left-in 0.35s ease-out;
}

.pt-slide-right {
  animation: pt-slide-right-in 0.35s ease-out;
}

.pt-zoom {
  animation: pt-zoom-in 0.4s ease-out;
}

.pt-zoom-out {
  animation: pt-zoom-out-in 0.4s ease-out;
}

.pt-blur-fade {
  animation: pt-blur-fade-in 0.45s ease-out;
}

.pt-flip {
  animation: pt-flip-in 0.5s ease-out;
  perspective: 1000px;
}

.pt-rotate {
  animation: pt-rotate-in 0.45s ease-out;
}

.pt-bounce {
  animation: pt-bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pt-swing {
  animation: pt-swing-in 0.5s ease-out;
  transform-origin: top center;
}

.pt-drop {
  animation: pt-drop-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.pt-glitch {
  animation: pt-glitch-in 0.4s steps(8);
}

.pt-curtain {
  animation: pt-curtain-in 0.5s ease-out;
}

@keyframes pt-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes pt-slide-up-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pt-slide-down-in {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pt-slide-left-in {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pt-slide-right-in {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pt-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pt-zoom-out-in {
  from {
    opacity: 0;
    transform: scale(1.06);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pt-blur-fade-in {
  from {
    opacity: 0;
    filter: blur(8px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes pt-flip-in {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateY(-15deg);
  }

  to {
    opacity: 1;
    transform: perspective(1000px) rotateY(0);
  }
}

@keyframes pt-rotate-in {
  from {
    opacity: 0;
    transform: rotate(-3deg) scale(0.97);
  }

  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

@keyframes pt-bounce-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pt-swing-in {
  0% {
    opacity: 0;
    transform: rotateX(-10deg);
  }

  50% {
    transform: rotateX(3deg);
  }

  100% {
    opacity: 1;
    transform: rotateX(0);
  }
}

@keyframes pt-drop-in {
  from {
    opacity: 0;
    transform: translateY(-40px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pt-glitch-in {
  0% {
    opacity: 0;
    transform: translate(-3px, 2px);
  }

  12% {
    opacity: 0.3;
    transform: translate(2px, -1px);
  }

  25% {
    opacity: 0.5;
    transform: translate(-1px, 3px);
  }

  37% {
    opacity: 0.7;
    transform: translate(3px, 0px);
  }

  50% {
    opacity: 0.8;
    transform: translate(-2px, -2px);
  }

  62% {
    opacity: 0.9;
    transform: translate(1px, 1px);
  }

  75% {
    opacity: 0.95;
    transform: translate(0px, -1px);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes pt-curtain-in {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

/* ═══════════════════════════════════════════════════
   GERIA LAYOUT — Three-column layout variant
   ═══════════════════════════════════════════════════ */

/* Hero stats bar — inside bottom of hero area */

.geria-hero-stats {
  display: flex;
  gap: 0;
  padding-left: 40px;
  margin-bottom: 20px;
}

.geria-hero-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 32px 10px 0;
  position: relative;
  font-family: var(--font-heading);
}

.geria-hero-stat::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 25%;
  height: 50%;
  width: 1px;
  background: rgba(var(--rgb-gold), 0.25);
}

.geria-hero-stat:last-child::after {
  display: none;
}

.geria-hero-stat i {
  font-size: 28px;
  color: var(--color-primary);
  opacity: 0.8;
}

.geria-hero-stat-img {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
  flex-shrink: 0;
}

/* Background icon mode — icon is large, centered behind the text as a watermark */

.geria-hero-stat-bg {
  position: relative;
  min-width: 180px;
  min-height: 70px;
  padding: 14px 28px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.geria-hero-stat-bg::after {
  display: none;
}

/* hide the divider line for bg mode */

.geria-hero-stat-bg-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px;
  color: var(--color-primary);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  line-height: 1;
}

.geria-hero-stat-bg-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

.geria-hero-stat-bg .geria-hero-stat-content {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.geria-hero-stat-bg .geria-hero-stat-value {
  display: block;
  font-size: 28px;
  line-height: 1;
}

.geria-hero-stat-bg .geria-hero-stat-label {
  display: block;
  margin-top: 4px;
}

.geria-hero-stat-value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary-light);
  line-height: 1.1;
  font-family: var(--font-heading);
}

.geria-hero-stat-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Three-column grid */

.geria-three-col {
  display: flex;
  justify-content: space-between;
  gap: 0;
}

.geria-sidebar {
  width: 23.5%;
  flex-shrink: 0;
}

.geria-main {
  flex: 1;
  min-width: 0;
  margin: 10px 16px 0;
}

/* Sidebar box */

.geria-sbox {
  position: relative;
  margin-bottom: 24px;
  border: 1px solid rgba(var(--rgb-gold), 0.15);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-dark);
}

/* Framed variant — when admin uploads border images */

.geria-sbox-framed {
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  padding-top: 60px;
}

.geria-sbox-framed .geria-sbox-body {
  background: rgba(var(--rgb-dark), 0.85);
}

.geria-sbox-tall.geria-sbox-framed {
  padding-top: 60px;
}

.geria-sbox-border-img {
  position: absolute;
  top: -9.7%;
  left: -6.3%;
  height: 109.5%;
  width: 112%;
  max-width: initial;
  z-index: 0;
  pointer-events: none;
}

.geria-sbox-framed .geria-sbox-header,
.geria-sbox-framed .geria-sbox-body,
.geria-sbox-framed .geria-sbox-footer {
  position: relative;
  z-index: 1;
}

/* Header with background image */

.geria-sbox-header-img {
  position: relative;
  padding: 0;
  background: none;
  border-bottom: none;
  margin-top: -56px;
}

.geria-sbox-header-bg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.geria-sbox-header-img h3 {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  padding: 0 16px;
}

/* Default header (no image) */

.geria-sbox-header {
  padding: 10px 16px;
  text-align: center;
  background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
  border-bottom: 1px solid rgba(var(--rgb-gold), 0.2);
}

.geria-sbox-header h3 {
  margin: 0;
  font-size: 13px;
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 0 0 10px rgba(var(--rgb-gold), 0.2);
}

.geria-sbox-body {
  background: var(--bg-medium);
  padding: 0;
}

.geria-sbox-footer {
  padding: 8px 12px;
  text-align: center;
  border-top: 1px solid rgba(var(--rgb-gold), 0.08);
  background: var(--bg-dark);
}

.geria-sbox-btn {
  display: inline-block;
  padding: 6px 24px;
  font-size: 11px;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--btn-gold-text);
  background: linear-gradient(180deg, rgb(148, 124, 80), rgb(105, 84, 50));
  border: none;
  border-radius: 2px;
  text-decoration: none;
  transition: 0.3s;
  cursor: pointer;
}

.geria-sbox-btn:hover {
  filter: brightness(1.2);
}

/* Account links */

.geria-account-links {
  padding: 8px 0;
}

.geria-account-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text-body);
  text-decoration: none;
  transition: 0.2s;
  border-bottom: 1px solid rgba(var(--rgb-accent), 0.05);
}

.geria-account-link:hover {
  background: rgba(var(--rgb-gold), 0.06);
  color: var(--color-primary);
}

.geria-account-link i {
  width: 18px;
  text-align: center;
  color: var(--color-primary-muted);
  font-size: 13px;
}

/* Account balance */

.geria-account-balance {
  display: flex;
  border-top: 1px solid rgba(var(--rgb-gold), 0.1);
}

.geria-account-balance > div {
  flex: 1;
  padding: 10px 12px;
  text-align: center;
  background: rgba(var(--rgb-dark), 0.15);
}

.geria-account-balance > div:first-child {
  border-right: 1px solid rgba(var(--rgb-gold), 0.08);
}

.geria-balance-label {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 2px;
}

.geria-balance-value {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary-light);
  font-family: var(--font-heading);
}

/* Gold #1 player card */

.geria-gold-player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(var(--rgb-gold), 0.08), rgba(var(--rgb-dark), 0.6));
  border-bottom: 1px solid rgba(var(--rgb-gold), 0.12);
}

.geria-gold-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.geria-gold-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(var(--rgb-gold), 0.35);
}

.geria-gold-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  filter: drop-shadow(0 0 4px rgba(var(--rgb-gold), 0.4));
}

.geria-gold-info h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-heading);
}

.geria-gold-info h5 {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}

.geria-gold-divider {
  display: inline-block;
  width: 1px;
  height: 10px;
  background: rgba(var(--rgb-gold), 0.25);
  margin: 0 8px;
  vertical-align: middle;
}

/* Ranking list rows */

.geria-ranking-list {
  padding: 0;
}

.geria-ranking-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 12px;
  border-bottom: 1px solid rgba(var(--rgb-accent), 0.05);
  transition: 0.15s;
}

.geria-ranking-row:nth-child(even) {
  background: rgba(var(--rgb-dark), 0.12);
}

.geria-ranking-row:hover {
  background: rgba(var(--rgb-gold), 0.04);
}

.geria-ranking-pos {
  width: 22px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  flex-shrink: 0;
}

.geria-ranking-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(var(--rgb-accent), 0.15);
}

.geria-ranking-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.geria-ranking-level {
  font-size: 10px;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* Server stats table */

.geria-stats-table {
  padding: 4px 0;
}

.geria-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  font-size: 12px;
  border-bottom: 1px solid rgba(var(--rgb-accent), 0.05);
}

.geria-stats-row:nth-child(even) {
  background: rgba(var(--rgb-dark), 0.12);
}

.geria-stats-label {
  color: var(--text-body);
}

.geria-stats-label i {
  color: var(--color-primary-muted);
  margin-right: 2px;
}

.geria-stats-value {
  font-weight: 600;
  color: var(--color-primary-light);
  font-family: var(--font-heading);
}

/* Login form */

.geria-login-form {
  padding: 12px 16px 16px;
}

.geria-login-field {
  position: relative;
  margin-bottom: 10px;
}

.geria-login-field i {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--color-primary-muted);
  pointer-events: none;
}

.geria-login-field input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 36px;
  border: none;
  background: var(--bg-darkest);
  color: var(--text-body);
  font-size: 12px;
  box-shadow: 0 1px 0 0 rgba(var(--rgb-gold), 0.15);
  outline: none;
  transition: 0.2s;
}

.geria-login-field input:focus {
  box-shadow: 0 1px 0 0 var(--color-primary);
}

.geria-login-field input::-moz-placeholder {
  color: var(--text-dim);
}

.geria-login-field input::placeholder {
  color: var(--text-dim);
}

.geria-login-remember {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
  cursor: pointer;
}

.geria-login-remember input {
  accent-color: var(--color-primary);
}

.geria-login-btn {
  width: 100%;
  padding: 10px;
  font-size: 13px;
  letter-spacing: 3px;
}

.geria-login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.geria-login-links {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--rgb-gold), 0.08);
}

.geria-login-links a {
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  transition: 0.2s;
}

.geria-login-links a:hover {
  color: var(--color-primary);
}

/* Sidebar custom button */

.geria-sidebar-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 12px;
  margin-bottom: 24px;
  text-align: center;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 1px solid rgba(var(--rgb-gold), 0.15);
  border-radius: 4px;
  cursor: pointer;
  transition: 0.3s;
  min-height: 70px;
  position: relative;
  overflow: hidden;
}

.geria-sidebar-button:hover {
  filter: brightness(1.2);
  transform: translateY(-1px);
}

.geria-sidebar-button-label {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 1;
}

.geria-sidebar-button-subtitle {
  font-size: 11px;
  margin-top: 4px;
  opacity: 0.9;
  letter-spacing: 1px;
}

/* Guild icon placeholder */

.geria-guild-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--rgb-gold), 0.1);
  border: 2px solid rgba(var(--rgb-gold), 0.35);
  font-size: 18px;
  color: var(--color-primary);
}

/* ── Geria News Carousel ── */

.geria-carousel {
  position: relative;
  margin-bottom: 16px;
  border: 1px solid rgba(var(--rgb-gold), 0.15);
  border-radius: 4px;
  overflow: hidden;
}

.geria-carousel-slide {
  position: relative;
  height: 240px;
  background: var(--bg-dark);
}

.geria-carousel-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.geria-carousel-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-medium), var(--bg-dark));
}

.geria-carousel-placeholder i {
  font-size: 48px;
  color: rgba(var(--rgb-gold), 0.12);
}

.geria-carousel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--rgb-dark),0.8) 0%, rgba(var(--rgb-dark),0.2) 50%, transparent 100%);
  pointer-events: none;
}

.geria-carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 24px;
  z-index: 2;
}

.geria-carousel-caption h3 {
  margin: 4px 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-heading);
  font-family: var(--font-heading);
}

.geria-carousel-caption p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.geria-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--rgb-dark),0.5);
  border: 1px solid rgba(var(--rgb-gold), 0.2);
  color: var(--color-primary);
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
  z-index: 3;
  border-radius: 2px;
}

.geria-carousel-arrow:hover {
  background: rgba(var(--rgb-dark),0.8);
  border-color: var(--color-primary);
}

.geria-carousel-prev {
  left: 8px;
}

.geria-carousel-next {
  right: 8px;
}

.geria-carousel-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 3;
}

.geria-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(var(--rgb-gold), 0.4);
  background: transparent;
  cursor: pointer;
  transition: 0.2s;
}

.geria-carousel-dot.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* ── Geria: hide default navbar + remove top padding ── */

html.layout-geria > body > div > nav.fixed,
html.layout-geria nav.fixed.top-0 {
  display: none !important;
}

html.layout-geria main.pt-\[64px\] {
  padding-top: 0 !important;
}

/* ── Geria Navbar ── */

.geria-navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: linear-gradient(rgba(var(--rgb-dark),0.47), transparent);
  padding: 0;
}

.geria-navbar-inner {
  display: flex;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 16px;
}

.geria-nav-menu {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.geria-nav-menu li a {
  font-size: 13px;
  color: var(--text-heading);
  font-weight: 400;
  transition: 0.3s;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 22px 0;
  display: block;
}

.geria-nav-menu li a:hover {
  color: var(--color-primary);
}

.geria-nav-logo {
  width: 265px;
  margin: 0 7px;
  display: block;
  flex-shrink: 0;
}

.geria-nav-logo img {
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* Language selector in Geria navbar */

.geria-nav-lang {
  margin-left: 50px;
  flex-shrink: 0;
  position: relative;
}

.geria-nav-lang-btn {
  background: rgba(var(--rgb-dark),0.5);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 50px;
  border: 1px solid rgba(var(--rgb-accent),0.15);
  cursor: pointer;
  transition: 0.2s;
  color: var(--text-heading);
  font-size: 12px;
}

.geria-nav-lang-btn:hover {
  border-color: var(--color-primary);
}

.geria-nav-lang-btn img {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1px solid rgba(var(--rgb-accent),0.3);
  -o-object-fit: cover;
     object-fit: cover;
}

.geria-nav-lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: rgba(var(--rgb-dark),0.95);
  border: 1px solid rgba(var(--rgb-accent),0.1);
  border-radius: 4px;
  min-width: 130px;
  z-index: 200;
  overflow: hidden;
}

.geria-nav-lang-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-body);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: 0.15s;
}

.geria-nav-lang-dropdown button:hover {
  background: rgba(var(--rgb-gold), 0.1);
  color: var(--color-primary);
}

.geria-nav-lang-dropdown img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Geria mobile nav */

.geria-nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text-heading);
  font-size: 24px;
  cursor: pointer;
  margin-left: auto;
  padding: 8px;
}

.geria-mobile-menu {
  display: none;
}

@media (max-width: 1199px) {
  .geria-nav-menu {
    display: none;
  }

  .geria-nav-lang {
    display: none;
  }

  .geria-nav-hamburger {
    display: block;
  }

  .geria-nav-logo {
    width: 100px;
    margin: 8px 0;
  }

  .geria-mobile-menu {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    background: var(--bg-darkest);
    z-index: 1000;
    padding: 20px 16px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s;
    border-right: 1px solid rgba(var(--rgb-gold), 0.15);
  }

  .geria-mobile-menu.open {
    transform: translateX(0);
  }

  .geria-mobile-menu a {
    display: block;
    padding: 10px 0;
    font-size: 13px;
    color: var(--text-body);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(var(--rgb-accent), 0.08);
  }

  .geria-mobile-menu a:hover {
    color: var(--color-primary);
  }

  .geria-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(var(--rgb-dark),0.5);
    z-index: 999;
  }
}

/* ── Geria Responsive ── */

@media (max-width: 1199px) {
  .geria-three-col {
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 20px;
  }

  .geria-main {
    order: -3;
    width: 100%;
    /* Reset the base horizontal margins — with width:100% they pushed the
       main column off-center on tablets/mobile. */
    margin: 0 0 30px;
  }

  .geria-sidebar {
    width: 290px;
  }
}

@media (max-width: 767px) {
  .geria-three-col {
    flex-direction: column;
    align-items: stretch;
  }

  .geria-sidebar {
    width: 100%;
  }

  /* Hero area is forced to min-height: 500px via inline style on desktop.
     Too tall on small screens, but can't go to auto — the navbar is
     position:absolute on top of the hero and content below it would overlap
     it. Keep just enough room for the navbar + logo + stats (~260px). */

  .geria-layout .w-full > div:first-child {
    min-height: 260px !important;
  }

  .geria-hero-stats {
    padding-left: 0;
    justify-content: center;
    /* Explicitly stretch + center so an admin-set container bg doesn't shrink
       off to the left. */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
  }

  .geria-hero-stat {
    padding: 8px 20px;
  }

  .geria-carousel-slide {
    height: 180px;
  }
}

@media (max-width: 480px) {
  .geria-hero-stats {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .geria-hero-stat {
    padding: 8px 0;
    width: 100%;
    justify-content: center;
  }

  .geria-hero-stat::after {
    display: none;
  }

  .geria-sbox-header h3 {
    font-size: 12px;
    letter-spacing: 1.5px;
  }

  .geria-ranking-row {
    padding: 6px 8px;
    font-size: 11px;
  }

  .geria-stats-row {
    padding: 6px 10px;
    font-size: 11px;
  }

  .geria-carousel-slide {
    height: 150px;
  }

  .geria-carousel-caption h3 {
    font-size: 14px;
  }

  .geria-carousel-caption p {
    display: none;
  }
}

.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.01\]:hover {
  --tw-scale-x: 1.01;
  --tw-scale-y: 1.01;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.02\]:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:bg-\[rgba\(239\2c 68\2c 68\2c 0\.1\)\]:hover {
  background-color: rgba(239,68,68,0.1);
}

.hover\:bg-\[rgba\(31\2c 41\2c 55\2c 0\.3\)\]:hover {
  background-color: rgba(31,41,55,0.3);
}

.hover\:bg-\[rgba\(var\(--rgb-accent\)\2c 0\.03\)\]:hover {
  background-color: rgba(var(--rgb-accent),0.03);
}

.hover\:bg-\[rgba\(var\(--rgb-gold\)\2c 0\.03\)\]:hover {
  background-color: rgba(var(--rgb-gold),0.03);
}

.hover\:bg-\[rgba\(var\(--rgb-gold\)\2c 0\.08\)\]:hover {
  background-color: rgba(var(--rgb-gold),0.08);
}

.hover\:bg-\[var\(--bg-light\)\]:hover {
  background-color: var(--bg-light);
}

.hover\:text-\[color\:var\(--color-danger\)\]:hover {
  color: var(--color-danger);
}

.hover\:text-\[color\:var\(--color-primary\)\]:hover {
  color: var(--color-primary);
}

.hover\:text-\[color\:var\(--text-heading\)\]:hover {
  color: var(--text-heading);
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:brightness-110:hover {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.hover\:brightness-125:hover {
  --tw-brightness: brightness(1.25);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.hover\:brightness-\[1\.2\]:hover {
  --tw-brightness: brightness(1.2);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.disabled\:opacity-30:disabled {
  opacity: 0.3;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.group:hover .group-hover\:text-\[color\:var\(--color-primary\)\] {
  color: var(--color-primary);
}

@media (min-width: 640px) {
  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:table-cell {
    display: table-cell;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-10 {
    height: 2.5rem;
  }

  .sm\:h-11 {
    height: 2.75rem;
  }

  .sm\:h-7 {
    height: 1.75rem;
  }

  .sm\:h-8 {
    height: 2rem;
  }

  .sm\:max-h-\[280px\] {
    max-height: 280px;
  }

  .sm\:min-h-\[85px\] {
    min-height: 85px;
  }

  .sm\:min-h-\[96px\] {
    min-height: 96px;
  }

  .sm\:w-10 {
    width: 2.5rem;
  }

  .sm\:w-11 {
    width: 2.75rem;
  }

  .sm\:w-7 {
    width: 1.75rem;
  }

  .sm\:w-8 {
    width: 2rem;
  }

  .sm\:w-\[140px\] {
    width: 140px;
  }

  .sm\:w-\[70px\] {
    width: 70px;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:max-w-\[480px\] {
    max-width: 480px;
  }

  .sm\:max-w-\[520px\] {
    max-width: 520px;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:gap-1 {
    gap: 0.25rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:\!px-5 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .sm\:pt-\[100px\] {
    padding-top: 100px;
  }

  .sm\:pt-\[120px\] {
    padding-top: 120px;
  }

  .sm\:\!text-xs {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
}

@media (min-width: 768px) {
  .md\:block {
    display: block;
  }

  .md\:table-cell {
    display: table-cell;
  }

  .md\:hidden {
    display: none;
  }

  .md\:w-1\/3 {
    width: 33.333333%;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:ml-auto {
    margin-left: auto;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:w-1\/2 {
    width: 50%;
  }

  .lg\:w-\[300px\] {
    width: 300px;
  }

  .lg\:w-\[330px\] {
    width: 330px;
  }

  .lg\:w-\[400px\] {
    width: 400px;
  }

  .lg\:flex-shrink-0 {
    flex-shrink: 0;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:p-5 {
    padding: 1.25rem;
  }

  .lg\:p-6 {
    padding: 1.5rem;
  }

  .lg\:p-8 {
    padding: 2rem;
  }

  .lg\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lg\:text-\[38px\] {
    font-size: 38px;
  }
}

@media (min-width: 1280px) {
  .xl\:order-1 {
    order: 1;
  }

  .xl\:order-2 {
    order: 2;
  }

  .xl\:w-\[268px\] {
    width: 268px;
  }

  .xl\:w-\[310px\] {
    width: 310px;
  }

  .xl\:flex-shrink-0 {
    flex-shrink: 0;
  }

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:flex-row {
    flex-direction: row;
  }

  .xl\:gap-3 {
    gap: 0.75rem;
  }

  .xl\:self-start {
    align-self: flex-start;
  }
}

/* ═══════════════ PART B - layout glue ═══════════════ */

.page-frame { position: relative; display: flex; flex-direction: column; min-height: 100vh; }

/* Navbar */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--bg-dark); border-bottom: 1px solid rgba(var(--rgb-accent),0.15); }
.navbar-inner { max-width: 1320px; margin: 0 auto; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; gap: 16px; }
.navbar-brand { display: flex; align-items: center; gap: 10px; }
.navbar-brand img { height: 40px; width: auto; display: block; }
.navbar-brand .brand-text { font-family: "Strong Sword", var(--font-heading); font-size: 28px; color: var(--color-primary); letter-spacing: 1px; line-height: 1; }
.navbar-menu { display: none; align-items: center; gap: 2px; flex: 1; }
.navbar-menu a { display: block; padding: 0 16px; height: 64px; line-height: 64px; font-size: 14px; text-transform: uppercase;
  letter-spacing: 2px; color: var(--text-muted); font-family: var(--font-heading); }
.navbar-menu a:hover, .navbar-menu a.active { color: var(--text-heading); }
.navbar-actions { display: none; align-items: center; gap: 12px; margin-left: auto; }
.navbar-toggle { display: block; background: none; border: none; color: var(--color-primary); font-size: 24px; cursor: pointer; margin-left: auto; }
@media (min-width: 1024px) { .navbar-menu { display: flex; } .navbar-actions { display: flex; } .navbar-toggle { display: none; } }

.user-chip { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--border-gold);
  border-radius: var(--border-radius); color: var(--text-heading); background: var(--bg-medium); font-size: 13px; font-family: var(--font-body); }
.user-chip .coins { color: var(--color-primary); font-weight: 600; }

.mobile-menu { display: none; position: fixed; top: 64px; left: 0; right: 0; z-index: 49;
  background: var(--bg-dark); border-bottom: 1px solid var(--border-gold); padding: 6px 0; }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 12px 20px; font-family: var(--font-heading); text-transform: uppercase;
  letter-spacing: 1.5px; font-size: 14px; color: var(--text-muted); }
.mobile-menu a:hover { color: var(--color-primary); background: rgba(var(--rgb-gold),0.04); }

/* Main shell */
.page-shell { flex: 1 0 auto; padding-top: 88px; padding-bottom: 48px; }
.page-head { margin-bottom: 24px; }
.page-head h1 { font-size: 28px; margin: 0 0 6px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-heading);
  text-shadow: 0 2px 20px rgba(var(--rgb-gold),0.15); }
.page-head p { color: var(--text-muted); margin: 0; }
.section-title { font-size: 15px; text-transform: uppercase; letter-spacing: 3px; color: var(--text-heading); font-family: var(--font-heading);
  font-weight: 700; padding-bottom: 14px; margin: 0 0 18px; border-bottom: 1px solid rgba(var(--rgb-gold),0.18); }

/* Classic two-column: left sidebar (rankings/events) + right main */
.classic-cols { display: flex; flex-direction: column; gap: 0; }
.classic-left { width: 100%; }
.classic-right { flex: 1; min-width: 0; }
@media (min-width: 1200px) {
  .classic-cols { flex-direction: row; align-items: flex-start; gap: 20px; }
  .classic-left { width: 310px; flex-shrink: 0; }
}

/* Hero area (character background shows through the fixed bg) */
.hero-area { position: relative; min-height: 500px; display: flex; flex-direction: column; }
.hero-lang { display: flex; justify-content: flex-end; padding-top: 12px; }
.hero-lang .lang-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12px;
  color: var(--text-muted); border: 1px solid var(--border-gold); border-radius: 4px; background: rgba(10,14,20,0.4); }
.hero-text { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 0; }
@media (min-width: 1024px) { .hero-text { align-items: flex-end; text-align: right; padding-right: 4%; } }
.hero-text .inner { max-width: 480px; }
.hero-text h2 { font-family: "Strong Sword", var(--font-heading); font-size: clamp(30px, 4vw, 40px); text-transform: uppercase;
  color: var(--text-heading); line-height: 1.15; margin: 0 0 8px; text-shadow: 0 3px 24px rgba(0,0,0,0.8); }
.hero-text p { font-family: "Strong Sword", var(--font-heading); text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-muted); margin: 0 0 22px; text-shadow: 0 2px 12px rgba(0,0,0,0.8); }
.play-btn { display: flex; align-items: center; justify-content: center; margin: 0 auto; width: 305px; max-width: 100%; height: 74px;
  background-image: var(--play-btn-image, url("../images/play_button.png")); background-repeat: no-repeat; background-size: contain; background-position: center;
  font-family: var(--font-heading); font-size: 30px; font-weight: 800; color: var(--bg-dark); border: none; cursor: pointer;
  text-decoration: none; transition: all 0.2s; }
@media (min-width: 1024px) { .play-btn { margin: 0; } }
.play-btn:hover { filter: brightness(1.1); color: var(--bg-dark); }

/* Left column DOWNLOAD box */
.dl-box { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px 0;
  background: linear-gradient(180deg, rgb(148,124,80) 0%, rgb(105,84,50) 100%); color: var(--btn-gold-text);
  font-family: var(--font-heading); font-size: 12px; letter-spacing: 1px; border: none; cursor: pointer; text-decoration: none;
  transition: 0.4s; margin-bottom: 24px; }
.dl-box:hover { filter: brightness(1.2); color: var(--btn-gold-text); }
.dl-box .big { font-size: 26px; font-weight: 700; margin-bottom: 3px; letter-spacing: 2px; }

/* ===== Action bar =====
   Auto-fitting grid so it looks right with any number of configured buttons.
   Labels never wrap - the old fixed 6-column grid broke "Invite Friends"
   onto two lines and squashed the cells. */
.action-bar {
  display: grid;
  gap: 1px;
  /* Sits flush on top of the content panel: no gap, and the bottom corners
     stay square so the two read as one block. */
  margin-bottom: 0;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  background: rgba(var(--rgb-gold), 0.10);
  border: 1px solid rgba(var(--rgb-gold), 0.16);
  border-bottom: none;
}
.action-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 18px 10px;
  text-align: center;
  text-decoration: none;
  color: var(--text-heading);
  font-family: var(--font-heading);
  transition: transform .18s ease, filter .18s ease;
}
.action-cell:hover { filter: brightness(1.18); transform: translateY(-2px); }
.action-cell .ac-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 17px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: inherit;
}
.action-cell.is-gold .ac-icon { background: rgba(0, 0, 0, 0.12); border-color: rgba(0, 0, 0, 0.15); }
.action-cell .ac-label {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  white-space: nowrap;
  line-height: 1;
}
.action-cell.is-stat .ac-label { font-size: 10px; letter-spacing: 1px; color: var(--text-dim); }
.action-cell .ac-value {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-primary-light);
  line-height: 1;
}
@media (max-width: 480px) {
  .action-cell { padding: 14px 6px; }
  .action-cell .ac-icon { width: 32px; height: 32px; font-size: 15px; }
  .action-cell .ac-label { font-size: 11px; letter-spacing: 1px; }
}

/* Featured news cards */
.featured-grid { display: grid; grid-template-columns: 1fr; gap: 4px; margin-bottom: 22px; }
@media (min-width: 768px) { .featured-grid { grid-template-columns: repeat(3, 1fr); } }
.featured-card { display: block; border-radius: 4px; overflow: hidden; transition: all 0.2s; }
.featured-card:hover { filter: brightness(1.2); }
.featured-card .fc-img { position: relative; height: 180px; background: linear-gradient(160deg, var(--bg-medium), var(--bg-dark)); }
.featured-card .fc-img img { width: 100%; height: 100%; object-fit: cover; }
.featured-card .fc-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(var(--rgb-dark),0.92)); }
.featured-card .fc-body { padding: 12px; text-align: center; background: var(--bg-dark); }
.featured-card .fc-title { font-size: 14px; color: var(--text-heading); display: block; margin-top: 4px; }
.featured-card .fc-desc { font-size: 12px; color: var(--text-muted); margin: 4px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* News feed */
.news-feed { display: flex; flex-direction: column; gap: 20px; }

/* ===== News feed row =====
   The stripe colour keys off the tag so the feed is scannable without reading.
   The whole card is clickable via .nr-overlay; the title and "Read more" sit
   above it so they keep their own hover states. */
.news-row {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  padding-left: 3px;
  background: linear-gradient(160deg, var(--bg-dark) 0%, var(--bg-medium) 100%);
  border: 1px solid rgba(var(--rgb-gold), 0.12);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.news-row:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--rgb-gold), 0.34);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
}
.nr-stripe {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--nr-accent, rgba(var(--rgb-gold), 0.55));
}
.news-row--news       { --nr-accent: #b85b5b; }
.news-row--update     { --nr-accent: #4a7fbf; }
.news-row--patchnotes { --nr-accent: #8b6bb1; }
.news-row--events     { --nr-accent: #d0a24c; }

.nr-head {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(var(--rgb-gold), 0.10);
}
.nr-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  color: var(--nr-accent, var(--color-primary));
  background: rgba(var(--rgb-gold), 0.07);
  border: 1px solid rgba(var(--rgb-gold), 0.18);
  transition: background .2s ease, border-color .2s ease;
}
.news-row:hover .nr-icon {
  background: rgba(var(--rgb-gold), 0.13);
  border-color: rgba(var(--rgb-gold), 0.34);
}
.nr-headtext { min-width: 0; flex: 1; }
.nr-title {
  position: relative; z-index: 2;
  display: block;
  font-family: var(--font-heading), Georgia, serif;
  font-size: 17px;
  line-height: 1.3;
  color: var(--text-heading);
  transition: color .2s ease;
}
.news-row:hover .nr-title { color: var(--color-primary); }
.nr-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-dim);
}
.nr-meta i { margin-right: 3px; opacity: .8; }
.nr-dot { opacity: .4; }
.nr-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #fff;
  background: var(--nr-accent, rgba(var(--rgb-gold), 0.5));
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

.nr-body { padding: 16px 18px 6px; }
.nr-body--media { display: flex; gap: 16px; align-items: flex-start; }
.nr-thumb {
  flex-shrink: 0;
  width: 168px; height: 100px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(var(--rgb-gold), 0.14);
}
.nr-text { min-width: 0; flex: 1; }
.nr-teaser {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-body);
}

.nr-foot {
  display: flex; justify-content: flex-end;
  padding: 10px 18px 15px;
}
.nr-more {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-primary-muted);
  transition: color .2s ease;
}
.nr-more i { transition: transform .2s ease; }
.news-row:hover .nr-more { color: var(--color-primary); }
.news-row:hover .nr-more i { transform: translateX(4px); }

/* Full-card click target, kept under the real links. */
.nr-overlay { position: absolute; inset: 0; z-index: 1; }

/* "All news" divider button */
.all-news {
  display: flex; align-items: center; gap: 16px;
  margin-top: 26px; padding-bottom: 6px;
}
.all-news::before, .all-news::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--rgb-gold), 0.28), transparent);
}
.all-news a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 22px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-primary-muted);
  background: rgba(var(--rgb-gold), 0.05);
  border: 1px solid rgba(var(--rgb-gold), 0.24);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.all-news a:hover {
  color: #fff;
  background: rgba(var(--rgb-gold), 0.14);
  border-color: rgba(var(--rgb-gold), 0.5);
}

@media (max-width: 640px) {
  .nr-body--media { flex-direction: column; }
  .nr-thumb { width: 100%; height: 150px; }
  .nr-title { font-size: 15px; }
}

.news-clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

/* Tag pills */
.tag-news { background: #7b3d3d; border: 1px solid #b85b5b; color: #fff; }
.tag-update { background: #3d5a7b; border: 1px solid #5b8ab8; color: #fff; }
.tag-patchnotes { background: #3d7b5a; border: 1px solid #5bb88a; color: #fff; }
.tag-events { background: #7b5a3d; border: 1px solid #b88a5b; color: #fff; }
.tag-default { background: #475569; border: 1px solid #64748b; color: #fff; }

/* Chips (news filter) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip { font-family: var(--font-heading); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; padding: 8px 16px;
  border-radius: 3px; background: var(--bg-medium); border: 1px solid var(--border-blue); color: var(--text-muted); }
.chip.active { background: linear-gradient(180deg, rgb(148,124,80), rgb(105,84,50)); border-color: rgba(var(--rgb-gold),0.4); color: #1a1410; font-weight: 600; }

/* Sidebar panel rows (rankings / events) */
.sbox-body { background: var(--bg-medium); }
.rank-row { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; border-bottom: 1px solid var(--border-blue); }
.rank-row:last-child { border-bottom: none; }
.rank-row:nth-child(even) { background: rgba(0,0,0,0.12); }
.rank-row .pos { width: 24px; text-align: center; font-size: 12px; font-weight: 700; color: var(--text-dim); font-family: var(--font-heading); }
.rank-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--text-heading); }
.rank-row .lv { font-size: 11px; color: var(--text-muted); }
.sbox-foot { padding: 8px 12px; text-align: center; border-top: 1px solid rgba(var(--rgb-gold),0.08); background: var(--bg-dark); }
.sbox-foot a { font-size: 12px; color: var(--text-muted); }
.ev-row { display: flex; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--border-blue); }
.ev-row:last-child { border-bottom: none; }
.ev-row .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ev-row .ev-n { flex: 1; font-size: 13px; color: var(--text-heading); }
.ev-row .ev-d { font-size: 11px; color: var(--text-muted); }

/* Avatars, empires, rank numbers */
.avatar { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-blue); object-fit: cover; }
.cell-name { display: flex; align-items: center; gap: 10px; }
.empire-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.empire-red { background: #e74c3c; } .empire-yellow { background: #f1c40f; } .empire-blue { background: #3498db; } .empire-none { background: var(--text-dim); }
.rank-num { font-family: var(--font-heading); color: var(--color-primary-muted); font-weight: 700; }
.rank-1 { color: #ffd76b; } .rank-2 { color: #d8d8d8; } .rank-3 { color: #cd8a52; }

/* Forms */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 7px; }
.form-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.form-check input { accent-color: var(--color-primary); margin-top: 3px; }
.form-hint { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.field-error { color: var(--color-danger); font-size: 12px; margin-top: 6px; }

/* Alerts */
.alert { padding: 12px 16px; border-radius: var(--border-radius); border: 1px solid; margin-bottom: 16px; font-size: 14px; }
.alert-success { background: rgba(12,227,172,0.08); border-color: rgba(12,227,172,0.3); color: #7ff0d3; }
.alert-error { background: rgba(208,112,112,0.08); border-color: rgba(208,112,112,0.35); color: #e2a0a0; }
.alert-info { background: rgba(91,138,184,0.08); border-color: rgba(91,138,184,0.3); color: #a9c8e4; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 28px; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 8px 13px; border: 1px solid var(--border-gold); border-radius: 3px; color: var(--text-muted); font-size: 13px; }
.pagination a:hover { color: var(--color-primary); border-color: rgba(var(--rgb-gold),0.4); }
.pagination .current { background: linear-gradient(180deg, rgb(148,124,80), rgb(105,84,50)); color: #1a1410; border-color: rgba(var(--rgb-gold),0.4); font-weight: 700; }
.pagination .disabled { opacity: 0.4; }

/* Tabs row */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-gold); margin-bottom: 22px; }

/* Misc */
.table-scroll { overflow-x: auto; }
.muted { color: var(--text-muted); }
.text-gold { color: var(--color-primary); }
.text-center { text-align: center; }
.mt-2 { margin-top: 12px; } .mt-4 { margin-top: 24px; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state i { font-size: 44px; color: var(--text-dim); display: block; margin-bottom: 14px; }
.prose { line-height: 1.8; color: var(--text-body); }
.prose h2, .prose h3 { margin-top: 28px; color: var(--text-heading); }
.prose a { text-decoration: underline; }
.prose img { border-radius: 4px; margin: 10px 0; }
.searchbar { display: flex; gap: 8px; margin-bottom: 20px; max-width: 360px; }
.dl-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px;
  border: 1px solid var(--border-gold); border-radius: var(--border-radius); background: var(--bg-medium); margin-bottom: 12px; }
.dl-item .n { font-family: var(--font-heading); color: var(--text-heading); font-size: 16px; }
.info-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--bg-medium); }
.info-row:last-child { border-bottom: none; }
.info-row .k { color: var(--text-muted); } .info-row .v { color: var(--text-heading); font-weight: 500; }
.grid-2 { display: grid; gap: 20px; grid-template-columns: 1fr; }
.layout-sidebar { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 992px) { .layout-sidebar { grid-template-columns: minmax(0,1fr) 320px; } }

/* ===== Bright-wallpaper readability + solid sidebar panels ===== */

/* Optional scrim over the fixed background. Kept very light so the artwork
   stays visible - panels are opaque on their own. Tunable from the admin
   (Appearance > background_overlay, 0-100). */
.site-fixed-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(0, 0, 0, calc(var(--bg-overlay, 0.22) * 0.25)) 0%,
              rgba(0, 0, 0, var(--bg-overlay, 0.22)) 100%);
  pointer-events: none;
}

/* Sidebar panels: opaque surface so they never look see-through. */
.sbox-panel {
  position: relative;
  margin-bottom: 24px;
  border: 1px solid rgba(var(--rgb-gold), 0.18);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-dark);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}

/* ===== Article (news detail) =====
   The key fix is the reading measure: body copy is capped at ~68 characters
   per line instead of stretching the full 1320px container, which is what
   made long posts unreadable. */
.article-card {
  background: var(--bg-card);
  border: 1px solid rgba(var(--rgb-gold), 0.16);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}
.article-hero { position: relative; max-height: 320px; overflow: hidden; }
.article-hero img { width: 100%; height: 320px; object-fit: cover; display: block; }
.article-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(var(--rgb-dark), 0.92) 100%);
}
.article-head {
  max-width: 760px; margin: 0 auto; padding: 30px 24px 0;
}
.article-title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.2;
  color: var(--text-heading);
  margin: 0 0 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(var(--rgb-gold), 0.18);
}
.article-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 8px;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.85;
  overflow-wrap: break-word;
}
.article-body > *:first-child { margin-top: 0; }
.article-body p { margin: 0 0 1.25em; }
.article-body h2 { font-size: 24px; margin: 1.8em 0 .6em; color: var(--text-heading); }
.article-body h3 { font-size: 19px; margin: 1.6em 0 .5em; color: var(--text-heading); }
.article-body ul, .article-body ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin: .35em 0; }
.article-body a { color: var(--color-primary); text-decoration: underline; }
.article-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 1.4em 0; }
.article-body blockquote {
  margin: 1.4em 0; padding: .2em 0 .2em 1.1em;
  border-left: 3px solid rgba(var(--rgb-gold), 0.45);
  color: var(--text-muted); font-style: italic;
}
.article-body code {
  background: rgba(0, 0, 0, .35); color: var(--color-primary);
  padding: 1px 6px; border-radius: 3px; font-size: .9em;
}
.article-body hr { border: none; border-top: 1px solid rgba(var(--rgb-gold), 0.15); margin: 2em 0; }

/* Everything the rich-text editor can emit has to render here too, otherwise
   a post written with tables or an embedded video comes out unstyled. */
.article-body h4 { font-size: 16.5px; margin: 1.4em 0 .45em; color: var(--color-primary); }
.article-body pre {
  margin: 1.4em 0; padding: 14px 16px; overflow-x: auto;
  border-radius: 6px; background: rgba(0, 0, 0, .42);
  border: 1px solid rgba(var(--rgb-accent), .16);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13.5px; line-height: 1.65;
}
.article-body pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
/* Tables scroll inside their own box rather than widening the page. */
.article-body table {
  width: 100%; margin: 1.4em 0;
  border-collapse: collapse;
  font-size: 14.5px;
  display: block; overflow-x: auto;
}
.article-body th, .article-body td {
  padding: 9px 12px;
  border: 1px solid rgba(var(--rgb-accent), .18);
  text-align: left;
}
.article-body th { background: rgba(var(--rgb-gold), .08); color: var(--text-heading); font-weight: 600; }
.article-body tr:nth-child(even) td { background: rgba(0, 0, 0, .16); }
/* Responsive 16:9 frame for YouTube/Vimeo embeds. */
.article-body .nx-embed { margin: 1.5em 0; }
.article-body iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  max-width: 100%;
  border: 1px solid rgba(var(--rgb-gold), .18);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}
.article-body figure { margin: 1.5em 0; }
.article-body figcaption { margin-top: 8px; font-size: 13px; color: var(--text-dim); text-align: center; }
.article-body .align-left   { text-align: left; }
.article-body .align-center { text-align: center; }
.article-body .align-right  { text-align: right; }
.article-body .align-center img,
.article-body .align-right img { display: inline-block; }
.article-body u { text-decoration: underline; }
.article-body s, .article-body strike { text-decoration: line-through; opacity: .75; }
.article-foot {
  max-width: 760px; margin: 0 auto; padding: 8px 24px 30px;
  display: flex; justify-content: flex-start;
}
@media (max-width: 640px) {
  .article-head, .article-body, .article-foot { padding-left: 18px; padding-right: 18px; }
  .article-hero img { height: 200px; }
}

/* Back link rendered as a solid chip so it stays legible on top of the
   background artwork (plain text disappeared over bright wallpapers). */
.back-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-heading);
  background: rgba(var(--rgb-dark), 0.85);
  border: 1px solid rgba(var(--rgb-gold), 0.22);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: all .2s;
}
.back-chip:hover {
  color: var(--color-primary);
  border-color: rgba(var(--rgb-gold), 0.5);
  background: rgba(var(--rgb-dark), 0.95);
}

/* Opaque surface for inner pages. The home page opts out (it renders its own
   hero + columns over the artwork); everywhere else this keeps headings and
   body copy readable on top of a bright background image. */
.content-surface {
  background: linear-gradient(146deg, var(--bg-dark), var(--bg-medium));
  border: 1px solid rgba(var(--rgb-gold), 0.14);
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  /* Symmetric breathing room: the container only offsets the fixed navbar, so
     without this the panel sits flush against it. */
  margin: 32px 0 40px;
}
@media (max-width: 640px) {
  .content-surface { margin: 20px 0 28px; }
}
/* The article page brings its own card, so avoid a double frame. */
.content-surface > .p-4 > .article-card,
.content-surface > .p-6 > .article-card {
  box-shadow: none;
}

/* ============================================================
   HERO - the wallpaper behind it is a bright sky, so every
   element here carries its own contrast rather than relying
   on the background being dark.
   ============================================================ */
.hero-row { position: relative; }

/* The scrim fills the row exactly (inset:0), so it can never overflow and
   never needs clipping - the previous version was wider than its box and the
   clip sliced the still-opaque gradient into a visible straight edge.
   The ending shape is explicit and small enough that alpha reaches 0 well
   inside the box on every axis, so no edge can appear at all. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Both radii must stay under the distance from the centre to EVERY edge,
     otherwise the gradient is still opaque where the box ends and you get a
     straight line. The vertical radius was 60% from a centre at 50%, i.e. it
     ran 10% past the top and bottom - that was the horizontal seam. */
  background: radial-gradient(ellipse 44% 46% at 50% 50%,
              rgba(8, 6, 4, 0.80) 0%,
              rgba(8, 6, 4, 0.62) 34%,
              rgba(8, 6, 4, 0.34) 60%,
              rgba(8, 6, 4, 0.12) 82%,
              rgba(8, 6, 4, 0) 100%);
}
/* From lg up the copy sits in the right half, so the pool moves with it.
   Centre 72% + radius 26% = 98%, so it still lands inside the right edge. */
@media (min-width: 1024px) {
  .hero-scrim {
    background: radial-gradient(ellipse 26% 46% at 72% 50%,
                rgba(8, 6, 4, 0.80) 0%,
                rgba(8, 6, 4, 0.62) 34%,
                rgba(8, 6, 4, 0.34) 60%,
                rgba(8, 6, 4, 0.12) 82%,
                rgba(8, 6, 4, 0) 100%);
  }
}

.hero-copy { position: relative; z-index: 1; }

.hero-title {
  margin: 0 0 10px;
  font-family: 'Strong Sword', serif;
  font-size: clamp(30px, 5.2vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 1px;
  /* Metallic gold fill, brightest in the middle. */
  background: linear-gradient(180deg, #fffbef 0%, #f0dfae 34%, #c9a44f 62%, #f5e7bd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Dark halo so the light letters survive the pale sky behind them. */
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .95))
          drop-shadow(0 6px 20px rgba(0, 0, 0, .8))
          drop-shadow(0 0 34px rgba(201, 164, 79, .35));
  animation: hero-rise .9s cubic-bezier(.2, .8, .3, 1) both;
}

/* The sweep is a second copy of the text masked to a moving highlight,
   so it glints across the letters without washing the fill out. */
.hero-title::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  pointer-events: none;
  background: linear-gradient(105deg,
              transparent 38%,
              rgba(255, 255, 255, .92) 48%,
              rgba(255, 255, 255, .55) 53%,
              transparent 62%);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: hero-sweep 5.5s ease-in-out 1.1s infinite;
}

.hero-sub {
  margin: 0 0 30px;
  font-family: 'Strong Sword', serif;
  font-size: clamp(13px, 1.5vw, 16px);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #efe3c8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 2px 16px rgba(0, 0, 0, .85);
  animation: hero-rise .9s cubic-bezier(.2, .8, .3, 1) .16s both;
}
/* Hairlines flanking the subtitle - cheap way to make it feel composed. */
.hero-sub::before, .hero-sub::after {
  content: "";
  display: block;
  height: 1px;
  margin: 12px auto;
  width: 190px;
  background: linear-gradient(90deg, transparent, rgba(var(--rgb-gold), .55), transparent);
}
.hero-sub::before { margin-top: 0; }

.hero-play {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  max-width: 305px;
  width: 100%;
  height: 74px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: transform .25s cubic-bezier(.2, .8, .3, 1), filter .25s ease;
  animation: hero-rise .9s cubic-bezier(.2, .8, .3, 1) .32s both,
             hero-pulse 2.8s ease-in-out 1.2s infinite;
}

/* Masked to the button artwork's own alpha, so the sweep inside follows the
   hexagon instead of lighting up a rectangle. The mask stays on this inner
   plate rather than on .hero-play, because a mask on the anchor would also
   clip its drop-shadow glow. */
.hp-plate {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: var(--play-mask);
          mask-image: var(--play-mask);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.hero-play:hover { transform: scale(1.045); filter: brightness(1.12) saturate(1.1); }
.hero-play:active { transform: scale(.99); }

.hp-label {
  position: relative;
  z-index: 3;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 800;
  letter-spacing: 1px;
  color: #241a06;
  /* Light on top, shadow underneath: reads as stamped into the metal. */
  text-shadow: 0 1px 0 rgba(255, 246, 214, .55), 0 -1px 0 rgba(0, 0, 0, .28);
}

/* Diagonal light bar that travels across the plate. */
.hp-shine {
  position: absolute;
  top: -60%;
  left: -70%;
  width: 45%;
  height: 220%;
  z-index: 1;
  pointer-events: none;
  transform: rotate(18deg);
  background: linear-gradient(90deg,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, .70) 50%,
              rgba(255, 255, 255, 0) 100%);
  animation: hp-sweep 4.5s ease-in-out 1.6s infinite;
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-sweep {
  0%        { background-position: 190% 0; }
  38%, 100% { background-position: -90% 0; }
}
@keyframes hp-sweep {
  0%        { left: -70%; }
  45%, 100% { left: 135%; }
}
@keyframes hero-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(212, 175, 90, .30)); }
  50%      { filter: drop-shadow(0 0 22px rgba(240, 205, 120, .62)); }
}

/* ===== Language switcher ===== */
.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 6px;
  background: rgba(12, 10, 8, .72);
  border: 1px solid rgba(var(--rgb-gold), .28);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  backdrop-filter: blur(3px);
}
.lang-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
  transition: background .18s ease, color .18s ease;
}
.lang-opt img {
  width: 20px; height: 14px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  /* Inactive flags are dimmed so the current one is obvious. */
  filter: grayscale(.75) brightness(.8);
  transition: filter .18s ease, transform .18s ease;
}
.lang-opt:hover { color: var(--text-heading); background: rgba(var(--rgb-gold), .08); }
.lang-opt:hover img { filter: none; transform: scale(1.06); }
.lang-opt.is-active {
  color: #1c1509;
  background: linear-gradient(180deg, var(--btn-gold-from, #c9a44f), var(--btn-gold-to, #9d7c38));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.lang-opt.is-active img { filter: none; }

/* ===== Navbar user menu ===== */
.user-menu { position: relative; }
.um-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-heading);
  background: rgba(var(--rgb-gold), .05);
  border: 1px solid rgba(var(--rgb-gold), .18);
  transition: background .18s ease, border-color .18s ease;
}
.um-trigger:hover,
.user-menu.is-open .um-trigger {
  background: rgba(var(--rgb-gold), .12);
  border-color: rgba(var(--rgb-gold), .38);
}
.um-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 12px;
  color: var(--color-primary);
  background: rgba(var(--rgb-gold), .12);
  border: 1px solid rgba(var(--rgb-gold), .3);
}
.um-avatar--lg { width: 40px; height: 40px; font-size: 16px; flex-shrink: 0; }
.um-name { text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.um-coins {
  display: inline-flex; align-items: center; gap: 5px;
  padding-left: 10px;
  color: var(--color-primary);
  font-weight: 700;
  border-left: 1px solid rgba(var(--rgb-gold), .2);
}
.um-caret { font-size: 10px; opacity: .6; transition: transform .2s ease; }
.user-menu:hover .um-caret,
.user-menu.is-open .um-caret { transform: rotate(180deg); }

/* Opens on hover, on keyboard focus, and on tap (JS adds .is-open).
   The 10px gap is bridged by ::before so the pointer can cross it. */
.um-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 250px;
  padding: 6px;
  z-index: 60;
  border-radius: 8px;
  background: linear-gradient(165deg, #171410 0%, #100e0b 100%);
  border: 1px solid rgba(var(--rgb-gold), .26);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .62);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.um-panel::before {
  content: "";
  position: absolute;
  top: -12px; left: 0; right: 0;
  height: 12px;
}
.user-menu:hover .um-panel,
.user-menu:focus-within .um-panel,
.user-menu.is-open .um-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.um-head {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 12px 13px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(var(--rgb-gold), .14);
}
.um-head-name {
  display: block;
  font-size: 14px;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.um-head-mail {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.um-wallet {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 4px 6px;
  padding: 9px 11px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(var(--rgb-gold), .07);
  border: 1px solid rgba(var(--rgb-gold), .14);
}
.um-wallet i { margin-right: 6px; color: var(--color-primary); }
.um-wallet strong { color: var(--color-primary); font-size: 13px; }

.um-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 5px;
  background: none;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.um-item i { width: 16px; font-size: 13px; opacity: .85; }
.um-item:hover {
  color: var(--text-heading);
  background: rgba(var(--rgb-gold), .10);
  padding-left: 15px;
}
.um-item--admin { color: var(--color-primary); }
.um-item--admin:hover { background: rgba(var(--rgb-gold), .16); color: #fff; }
.um-lvl {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  color: #1c1509;
  background: var(--color-primary);
}
.um-item--out { color: #c96a6a; }
.um-item--out:hover { background: rgba(180, 70, 70, .16); color: #ef8f8f; }
.um-sep { height: 1px; margin: 5px 8px; background: rgba(var(--rgb-gold), .14); }


/* ============================================================
   SIDEBAR PANELS - statistics, events, ranking.
   Rows fade in staggered on load via --d, then everything is
   hover-driven.
   ============================================================ */
@keyframes panel-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(90, 200, 120, .65); }
  70%  { box-shadow: 0 0 0 7px rgba(90, 200, 120, 0); }
  100% { box-shadow: 0 0 0 0 rgba(90, 200, 120, 0); }
}
@keyframes crown-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-4px) rotate(2deg); }
}
@keyframes ring-spin { to { transform: rotate(360deg); } }

/* ===== Statistics ===== */
.stat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(var(--rgb-accent), 0.05);
  border-left: 2px solid transparent;
  transition: background .2s ease, border-left-color .2s ease, padding-left .2s ease;
  animation: panel-in .5s ease both;
  animation-delay: var(--d, 0ms);
}
.stat-row:hover {
  background: rgba(var(--rgb-gold), .09) !important;
  border-left-color: var(--color-primary);
  padding-left: 15px;
}
.sr-ico {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 5px;
  font-size: 12px;
  color: var(--color-primary);
  background: rgba(var(--rgb-gold), .10);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.stat-row:hover .sr-ico {
  background: rgba(var(--rgb-gold), .22);
  transform: scale(1.12) rotate(-6deg);
  box-shadow: 0 0 12px rgba(var(--rgb-gold), .35);
}
.sr-label { flex: 1; min-width: 0; font-size: 12px; color: var(--text-muted); transition: color .2s ease; }
.stat-row:hover .sr-label { color: var(--text-heading); }
.sr-val { flex-shrink: 0; text-align: right; }
.sr-num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-light);
  font-variant-numeric: tabular-nums;
}
.sr-num.is-live { color: var(--color-success); }
.sr-hint { display: block; font-size: 10px; color: var(--text-dim); }
.sr-dot {
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--color-success);
  animation: dot-pulse 2s ease-out infinite;
}

/* ===== Events ===== */
.ev-card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-dark);
  border: 1px solid rgba(var(--rgb-accent), 0.12);
  border-left: 3px solid var(--ev, var(--color-primary));
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), border-color .22s ease, box-shadow .22s ease;
  animation: panel-in .5s ease both;
  animation-delay: var(--d, 0ms);
}
.ev-card:hover {
  transform: translateX(3px);
  border-color: rgba(var(--rgb-gold), .3);
  border-left-color: var(--ev, var(--color-primary));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
/* A running event gets a faint sheen so it stands out from the ended ones. */
.ev-card--live::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 40%, rgba(90, 200, 120, .07) 50%, transparent 60%);
  background-size: 250% 100%;
  animation: hero-sweep 6s ease-in-out infinite;
}
.ev-card--ended { opacity: .62; }
.ev-card--ended:hover { opacity: 1; }

/* The event art is transparent and runs edge to edge (the "EVENT" ribbon sits
   on the very bottom row), so it must not be clipped or rescaled: the box is
   bigger than the artwork and the image renders at its natural size. */
.ev-ico {
  display: flex; align-items: center; justify-content: center;
  /* 56 - 2x4 padding - 2x1 border = 46px of content, so the 45px artwork
     renders at its exact native size: no half-pixel rescale, no softening. */
  width: 56px; height: 56px;
  flex-shrink: 0;
  padding: 4px;
  border-radius: 8px;
  font-size: 18px;
  color: var(--color-primary);
  background: rgba(var(--rgb-accent), .06);
  border: 1px solid rgba(var(--rgb-accent), .10);
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.ev-ico img {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}
.ev-card:hover .ev-ico {
  background: rgba(var(--rgb-gold), .1);
  border-color: rgba(var(--rgb-gold), .24);
}
.ev-card:hover .ev-ico { transform: scale(1.08); }

.ev-name {
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .2s ease;
}
.ev-card:hover .ev-name { color: var(--color-primary); }
.ev-when { margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.ev-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ev-status {
  display: inline-flex; align-items: center;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ev, var(--color-primary));
}
.ev-pulse {
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--ev);
  animation: dot-pulse 2s ease-out infinite;
}
.ev-cd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ev, var(--color-primary));
}

/* ===== Ranking podium ===== */
.podium {
  text-align: center;
  padding: 12px 4px 8px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgba(var(--rgb-medium), 1) 0%, rgba(var(--rgb-medium), .6) 75%, transparent 100%);
  transition: transform .25s cubic-bezier(.2, .8, .3, 1);
  animation: panel-in .55s ease both;
}
.podium:not(.podium--first) { margin-top: 12px; }
.podium--silver { animation-delay: 60ms; }
.podium--bronze { animation-delay: 120ms; }
.podium:hover { transform: translateY(-4px); }

.pod-crown {
  display: block;
  height: 20px;
  margin: 0 auto 4px;
  animation: crown-float 3.4s ease-in-out infinite;
}
.podium--silver .pod-crown { animation-delay: .4s; }
.podium--bronze .pod-crown { animation-delay: .8s; }

.pod-avatar {
  position: relative;
  width: 44px; height: 44px;
  margin: 0 auto 8px;
}
.pod-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(var(--rgb-accent), .2);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.podium:hover .pod-avatar img { transform: scale(1.09); }
.podium--gold .pod-avatar img {
  border-color: rgba(212, 175, 90, .75);
  box-shadow: 0 0 14px rgba(212, 175, 90, .4);
}
.podium--silver .pod-avatar img { border-color: rgba(196, 196, 196, .6); }
.podium--bronze .pod-avatar img { border-color: rgba(176, 118, 66, .6); }

/* Slowly rotating halo on first place only. */
.podium--gold .pod-avatar::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px dashed rgba(212, 175, 90, .5);
  animation: ring-spin 12s linear infinite;
}
.pod-rank {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 17px; height: 17px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  color: #1b1409;
  border: 2px solid var(--bg-medium);
}
.podium--gold   .pod-rank { background: linear-gradient(180deg, #f0d68a, #c9a44f); }
.podium--silver .pod-rank { background: linear-gradient(180deg, #e6e6e6, #a9a9a9); }
.podium--bronze .pod-rank { background: linear-gradient(180deg, #d79a63, #a56a38); }

.pod-name {
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pod-lv { margin-top: 2px; font-size: 10px; color: var(--color-info); }

/* ===== Ranking rows 4-10 ===== */
.rk-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 14px;
  border-bottom: 1px solid rgba(var(--rgb-accent), 0.04);
  border-left: 2px solid transparent;
  transition: background .2s ease, border-left-color .2s ease, padding-left .2s ease;
  animation: panel-in .45s ease both;
  animation-delay: var(--d, 0ms);
}
.rk-row:hover {
  background: rgba(var(--rgb-gold), .09) !important;
  border-left-color: var(--color-primary);
  padding-left: 15px;
}
.rk-pos {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(133deg, rgba(var(--rgb-medium), .8), rgba(var(--rgb-accent), .4), rgba(var(--rgb-medium), .8));
  border: 2px solid var(--bg-dark);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.rk-row:hover .rk-pos {
  transform: scale(1.1);
  color: #1b1409;
  background: linear-gradient(180deg, #f0d68a, #c9a44f);
}
.rk-avatar {
  width: 24px; height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--rgb-accent), .25);
  transition: transform .2s ease, border-color .2s ease;
}
.rk-row:hover .rk-avatar { transform: scale(1.12); border-color: rgba(var(--rgb-gold), .55); }
.rk-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-heading); }
.rk-lv { font-size: 11px; color: var(--text-dim); transition: color .2s ease; }
.rk-row:hover .rk-lv { color: var(--color-primary); }


/* ===== DOWNLOAD button ===== */
.dl-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  padding: 16px 0;
  overflow: hidden;
  font-family: 'Albertus Nova', Georgia, serif;
  color: var(--btn-gold-text);
  background: linear-gradient(180deg, rgb(148, 124, 80) 0%, rgb(105, 84, 50) 100%);
  transition: filter .25s ease, transform .25s cubic-bezier(.2, .8, .3, 1), box-shadow .25s ease;
}
.dl-btn:hover {
  filter: brightness(1.16);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  color: var(--btn-gold-text);
}
.dl-big {
  display: flex; align-items: center; gap: 10px;
  font-size: 26px; font-weight: 700; letter-spacing: 2px;
}
.dl-big i { font-size: 20px; transition: transform .25s ease; }
.dl-btn:hover .dl-big i { transform: translateY(3px); }
.dl-sub { font-size: 12px; letter-spacing: 1px; opacity: .85; }
.dl-shine {
  position: absolute;
  top: -60%; left: -70%;
  width: 40%; height: 220%;
  pointer-events: none;
  transform: rotate(18deg);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 100%);
  animation: hp-sweep 5.5s ease-in-out 2.4s infinite;
}

/* ===== VIP ranking ===== */
.rk-row--vip .rk-pos--vip {
  background: linear-gradient(180deg, rgb(182,166,120), rgb(199,186,143));
  color: #1a1410;
}
.rk-row--vip:hover .rk-pos--vip { background: var(--vip, #f0d68a); }
.rk-avatar--vip { border-color: rgba(var(--rgb-gold), .35); }
.rk-row--vip:hover { background: color-mix(in srgb, var(--vip, #c9a44f) 12%, transparent) !important; }
.rk-row--vip:hover .rk-avatar--vip { border-color: var(--vip, #c9a44f); box-shadow: 0 0 8px var(--vip, #c9a44f); }
.rk-row--vip { border-left-color: transparent; }
.rk-row--vip:hover { border-left-color: var(--vip, var(--color-primary)); }
.vip-tag {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--vip, var(--color-primary));
  border: 1px solid color-mix(in srgb, var(--vip, #c9a44f) 45%, transparent);
  background: color-mix(in srgb, var(--vip, #c9a44f) 12%, transparent);
  transition: background .2s ease, box-shadow .2s ease;
}
.rk-row--vip:hover .vip-tag {
  background: color-mix(in srgb, var(--vip, #c9a44f) 26%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--vip, #c9a44f) 40%, transparent);
}
.vip-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 26px 12px;
  font-size: 12px;
  color: var(--text-dim);
}
.vip-empty i {
  font-size: 22px;
  color: var(--color-primary);
  opacity: .5;
  animation: crown-float 3.6s ease-in-out infinite;
}

/* ============================================================
   AUTH - login / register.
   One card only: the layout skips .content-surface on these
   routes, which is what produced the card-inside-a-card look.
   ============================================================ */
.auth-stage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 0 56px;
}
.auth-card {
  width: 100%;
  max-width: 720px;
  padding: 34px 32px 30px;
  border-radius: 10px;
  background: linear-gradient(168deg, rgba(26, 21, 18, .97) 0%, rgba(15, 13, 11, .97) 100%);
  border: 1px solid rgba(var(--rgb-gold), .22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .04);
  animation: auth-in .5s cubic-bezier(.2, .8, .3, 1) both;
}
.auth-card--sm { max-width: 440px; }
@keyframes auth-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes auth-field-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-head { text-align: center; margin-bottom: 26px; }
.auth-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  margin-bottom: 14px;
  border-radius: 50%;
  font-size: 21px;
  color: var(--color-primary);
  background: rgba(var(--rgb-gold), .10);
  border: 1px solid rgba(var(--rgb-gold), .32);
  box-shadow: 0 0 0 0 rgba(var(--rgb-gold), .35);
  animation: auth-badge-pulse 3s ease-out infinite;
}
@keyframes auth-badge-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--rgb-gold), .32); }
  70%  { box-shadow: 0 0 0 12px rgba(var(--rgb-gold), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--rgb-gold), 0); }
}
.auth-head h1 {
  margin: 0;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-heading);
}
.auth-head p { margin: 8px 0 0; font-size: 13.5px; color: var(--text-muted); }

/* Section header with a step number */
.auth-step {
  display: flex; align-items: center; gap: 10px;
  margin: 26px 0 16px;
  padding: 10px 14px;
  border-radius: 5px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-heading);
  background: rgba(var(--rgb-gold), .07);
  border-left: 3px solid var(--color-primary);
}
.auth-step > i { color: var(--color-primary); font-size: 13px; }
.as-num {
  display: flex; align-items: center; justify-content: center;
  width: 21px; height: 21px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: #1b1409;
  background: linear-gradient(180deg, #f0d68a, #c9a44f);
}
.as-label { flex: 1; }
.as-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-dim);
  background: rgba(var(--rgb-accent), .12);
  border: 1px solid rgba(var(--rgb-accent), .18);
}

.auth-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .auth-grid { grid-template-columns: 1fr 1fr; } }

.auth-field {
  margin-bottom: 16px;
  animation: auth-field-in .45s ease both;
  animation-delay: var(--d, 0ms);
}
.auth-grid .auth-field { margin-bottom: 0; }
.auth-field > label {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-heading);
}
.auth-field > label i { color: var(--color-primary); font-size: 12px; width: 14px; }

/* Input shell: icon inside, focus ring, error state */
.auth-input {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 5px;
  background: rgba(0, 0, 0, .32);
  border: 1px solid rgba(var(--rgb-accent), .18);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.auth-input:focus-within {
  border-color: rgba(var(--rgb-gold), .55);
  background: rgba(0, 0, 0, .45);
  box-shadow: 0 0 0 3px rgba(var(--rgb-gold), .12);
}
.auth-input.is-bad { border-color: rgba(190, 70, 70, .6); box-shadow: 0 0 0 3px rgba(190, 70, 70, .12); }
.auth-input-ico {
  position: absolute;
  left: 13px;
  font-size: 13px;
  color: var(--text-dim);
  pointer-events: none;
  transition: color .2s ease, transform .2s ease;
}
.auth-input:focus-within .auth-input-ico { color: var(--color-primary); transform: scale(1.1); }
.auth-input input {
  flex: 1;
  min-width: 0;
  padding: 13px 14px 13px 38px;
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  color: var(--text-heading);
}
.auth-input input::placeholder { color: var(--text-dim); opacity: .75; }
.auth-eye {
  padding: 0 13px;
  align-self: stretch;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-dim);
  transition: color .2s ease;
}
.auth-eye:hover { color: var(--color-primary); }

.auth-state {
  padding-right: 13px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.auth-state.is-checking { color: var(--text-dim); }
.auth-state.is-free  { color: var(--color-success); }
.auth-state.is-taken { color: var(--color-danger); }

.auth-hint {
  display: flex; align-items: center; gap: 6px;
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.auth-hint i { font-size: 10px; }
.auth-hint--bad { display: none; color: var(--color-danger); }
.auth-hint--bad.is-on { display: flex; animation: auth-shake .35s ease; }
@keyframes auth-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

.auth-strength {
  height: 3px;
  margin-top: 9px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, .07);
  opacity: 0;
  transition: opacity .2s ease;
}
.auth-strength.is-on { opacity: 1; }
.auth-strength > div { height: 100%; width: 0; border-radius: 2px; transition: width .3s ease, background .3s ease; }

.auth-note {
  display: flex; align-items: center; gap: 9px;
  margin: 0;
  padding: 13px 15px;
  border-radius: 5px;
  font-size: 13px;
  color: var(--text-muted);
  background: rgba(var(--rgb-gold), .06);
  border: 1px solid rgba(var(--rgb-gold), .16);
}
.auth-note i { color: var(--color-primary); }

/* Consents - real checkbox is hidden, .consent-box is the visual one */
.auth-consents {
  margin: 24px 0 22px;
  animation: auth-field-in .45s ease both;
  animation-delay: var(--d, 0ms);
}
.consent {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 9px;
  padding: 12px 14px;
  border-radius: 5px;
  cursor: pointer;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(var(--rgb-accent), .14);
  transition: border-color .2s ease, background .2s ease;
}
.consent:hover { border-color: rgba(var(--rgb-gold), .3); background: rgba(0, 0, 0, .36); }
.consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.consent-box {
  display: flex; align-items: center; justify-content: center;
  width: 19px; height: 19px;
  flex-shrink: 0;
  border-radius: 3px;
  font-size: 10px;
  color: #1b1409;
  background: rgba(0, 0, 0, .4);
  border: 1px solid rgba(var(--rgb-accent), .3);
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.consent-box i { opacity: 0; transform: scale(.4); transition: opacity .15s ease, transform .15s ease; }
.consent input:checked + .consent-box {
  background: linear-gradient(180deg, #f0d68a, #c9a44f);
  border-color: rgba(var(--rgb-gold), .7);
}
.consent input:checked + .consent-box i { opacity: 1; transform: scale(1); }
.consent input:focus-visible + .consent-box { box-shadow: 0 0 0 3px rgba(var(--rgb-gold), .25); }
.consent:has(input:checked) { border-color: rgba(var(--rgb-gold), .34); }
.consent-text { font-size: 13px; color: var(--text-body); }
.consent-text a { color: var(--color-primary); text-decoration: none; }
.consent-text a:hover { text-decoration: underline; }

/* Submit */
.auth-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 6px;
  padding: 14px 20px;
  overflow: hidden;
  border: 1px solid rgba(var(--rgb-gold), .45);
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1b1409;
  background: linear-gradient(180deg, var(--btn-gold-from, #c9a44f), var(--btn-gold-to, #9d7c38));
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease, filter .2s ease;
  animation: auth-field-in .45s ease both;
  animation-delay: var(--d, 0ms);
}
/* El :not(.as-shine) NO es cosmetico. El brillo del boton es
   <span class="as-shine">, o sea que un ".auth-submit > span" pelado tambien
   lo cogia, y con mas peso: (0,1,1) contra (0,1,0) de .as-shine. Le ganaba el
   position:relative al position:absolute, el brillo pasaba a ser un hijo mas
   del flex ocupando su width:38% a la izquierda, y empujaba el texto ~19% del
   ancho del boton hacia la derecha. Medido en /login: 120px de 374, texto
   desviado +63px. Ademas le ponia z-index:2 y lo sacaba DELANTE del texto. */
.auth-submit > span:not(.as-shine) { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; }
.auth-submit i { transition: transform .2s ease; }
.auth-submit:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
.auth-submit:hover i { transform: translateX(4px); }
.auth-submit:active { transform: translateY(0); }
.auth-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: grayscale(.4); }
.as-shine {
  position: absolute;
  top: -60%; left: -70%;
  width: 38%; height: 220%;
  z-index: 1;
  pointer-events: none;
  transform: rotate(18deg);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transition: left .55s ease;
}
.auth-submit:hover .as-shine { left: 135%; }

.auth-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
  margin-top: 20px;
  animation: auth-field-in .45s ease both;
  animation-delay: var(--d, 0ms);
}
.auth-links a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .2s ease;
}
.auth-links a i { font-size: 11px; opacity: .7; }
.auth-links a:hover { color: var(--color-primary); }

.auth-foot {
  margin-top: 20px;
  padding-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  border-top: 1px solid rgba(var(--rgb-accent), .12);
  animation: auth-field-in .45s ease both;
  animation-delay: var(--d, 0ms);
}
.auth-foot a {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 5px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.auth-foot a i { transition: transform .2s ease; }
.auth-foot a:hover i { transform: translateX(4px); }

@media (max-width: 640px) {
  .auth-stage { padding: 24px 0 40px; }
  .auth-card { padding: 26px 18px 24px; }
  .auth-head h1 { font-size: 18px; letter-spacing: 2px; }
}

/* Event card row: the icon has a fixed 40px height, so under the default
   align-items:stretch it pinned to the top of a ~66px text block. */
.ev-card > .flex { align-items: center; }

/* Shared podium grid - used by BOTH the main ranking and the VIP one. */
.pod-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 16px 8px 0; }

/* VIP podium variant: the metal palette is replaced by the tag colour. */
.podium--vip .pod-avatar img { border-color: color-mix(in srgb, var(--vip, #c9a44f) 65%, transparent); }
.podium--vip.podium--first .pod-avatar img { box-shadow: 0 0 14px color-mix(in srgb, var(--vip, #c9a44f) 55%, transparent); }
.podium--vip.podium--gold .pod-avatar::before { border-color: color-mix(in srgb, var(--vip, #c9a44f) 60%, transparent); }
.podium--vip .pod-rank { background: var(--vip, #c9a44f); color: #12100c; }
.pod-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--vip, var(--color-primary));
  border: 1px solid color-mix(in srgb, var(--vip, #c9a44f) 45%, transparent);
  background: color-mix(in srgb, var(--vip, #c9a44f) 12%, transparent);
}
.podium--vip:hover .pod-tag {
  background: color-mix(in srgb, var(--vip, #c9a44f) 26%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--vip, #c9a44f) 40%, transparent);
}

/* ============================================================
   ACCOUNT PAGE
   ============================================================ */
.acct { padding: 4px; }

.acct-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 22px 24px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(var(--rgb-gold), .10) 0%, rgba(0, 0, 0, .22) 55%);
  border: 1px solid rgba(var(--rgb-gold), .20);
  animation: auth-in .5s cubic-bezier(.2, .8, .3, 1) both;
}
.acct-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 24px;
  color: var(--color-primary);
  background: rgba(var(--rgb-gold), .12);
  border: 1px solid rgba(var(--rgb-gold), .35);
  animation: auth-badge-pulse 3.2s ease-out infinite;
}
.acct-id { flex: 1; min-width: 180px; }
.acct-id h2 {
  margin: 0;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-heading);
}
.acct-id p {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
.acct-id p i { color: var(--color-primary); font-size: 12px; }

.acct-wallets { display: flex; gap: 10px; flex-wrap: wrap; }
.wallet {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 132px;
  padding: 11px 15px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .32);
  border: 1px solid rgba(var(--rgb-gold), .18);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), border-color .2s ease, box-shadow .2s ease;
}
.wallet:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--rgb-gold), .45);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
}
.wallet > i { font-size: 15px; color: var(--color-primary); transition: transform .2s ease; }
.wallet:hover > i { transform: scale(1.15) rotate(-8deg); }
.wallet .w-label { font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--text-dim); }
.wallet strong { font-size: 19px; font-weight: 700; color: var(--color-primary-light); font-variant-numeric: tabular-nums; }
.wallet--jd > i { color: #8fd3e8; }
.wallet--jd strong { color: #b6e4f2; }

/* Quick links */
.acct-quick { display: grid; gap: 12px; margin-bottom: 18px; }
@media (min-width: 720px) { .acct-quick { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.qlink {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-heading);
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(var(--rgb-accent), .14);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), border-color .2s ease, background .2s ease, box-shadow .2s ease;
  animation: auth-field-in .45s ease both;
  animation-delay: var(--d, 0ms);
}
.qlink > i:first-child { font-size: 16px; color: var(--color-primary); transition: transform .2s ease; }
.qlink span { flex: 1; font-weight: 600; letter-spacing: .5px; }
.qlink em {
  font-style: normal;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #1b1409;
  background: linear-gradient(180deg, #f0d68a, #c9a44f);
}
.ql-arrow { font-size: 12px; opacity: .5; transition: transform .2s ease, opacity .2s ease; }
.qlink:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--rgb-gold), .38);
  background: rgba(var(--rgb-gold), .08);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .38);
  color: var(--text-heading);
}
.qlink:hover > i:first-child { transform: scale(1.15); }
.qlink:hover .ql-arrow { transform: translateX(4px); opacity: 1; }
.qlink--gold {
  color: #241a06;
  background: linear-gradient(180deg, var(--btn-gold-from, #c9a44f), var(--btn-gold-to, #9d7c38));
  border-color: rgba(var(--rgb-gold), .5);
}
.qlink--gold > i:first-child { color: #241a06; }
.qlink--gold:hover { color: #241a06; background: linear-gradient(180deg, #dcb96a, #ad8b41); }
.qlink--gold em { background: rgba(0, 0, 0, .25); color: #f6e7bd; }

/* Panels */
.acct-panel {
  padding: 20px 22px 22px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .24);
  border: 1px solid rgba(var(--rgb-accent), .12);
}
.acct-panel > h3 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
  border-bottom: 1px solid rgba(var(--rgb-gold), .15);
}
.acct-panel > h3 > i { font-size: 13px; }
.acct-count {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(var(--rgb-accent), .12);
  border: 1px solid rgba(var(--rgb-accent), .16);
}

/* Action cards */
.acct-actions { display: grid; gap: 12px; }
@media (min-width: 720px) { .acct-actions { grid-template-columns: 1fr 1fr; } }
.act-card {
  display: flex; align-items: center; gap: 13px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(var(--rgb-accent), .14);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), border-color .2s ease, background .2s ease, box-shadow .2s ease;
  animation: auth-field-in .45s ease both;
  animation-delay: var(--d, 0ms);
}
.act-ico {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 8px;
  font-size: 15px;
  color: var(--color-primary);
  background: rgba(var(--rgb-gold), .10);
  border: 1px solid rgba(var(--rgb-gold), .18);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.act-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.act-text strong { font-size: 13.5px; font-weight: 600; letter-spacing: .5px; color: var(--text-heading); }
.act-text small { font-size: 11.5px; color: var(--text-dim); }
.act-arrow { font-size: 12px; opacity: .4; color: var(--color-primary); transition: transform .2s ease, opacity .2s ease; }
.act-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--rgb-gold), .38);
  background: rgba(var(--rgb-gold), .07);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .38);
}
.act-card:hover .act-ico {
  background: rgba(var(--rgb-gold), .2);
  transform: scale(1.08) rotate(-6deg);
  box-shadow: 0 0 12px rgba(var(--rgb-gold), .3);
}
.act-card:hover .act-arrow { transform: translateX(4px); opacity: 1; }

/* Character cards */
.char-list { display: grid; gap: 10px; }
.char-card {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 15px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(var(--rgb-accent), .12);
  border-left: 3px solid var(--emp, var(--color-primary));
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), border-color .2s ease, background .2s ease, box-shadow .2s ease;
  animation: auth-field-in .45s ease both;
  animation-delay: var(--d, 0ms);
}
.char-card:hover {
  transform: translateX(3px);
  background: rgba(var(--rgb-gold), .06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.char-avatar {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--rgb-gold), .28);
  transition: transform .2s ease, border-color .2s ease;
}
.char-card:hover .char-avatar { transform: scale(1.09); border-color: rgba(var(--rgb-gold), .6); }
.char-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.char-name { font-size: 14.5px; color: var(--text-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.char-job { font-size: 11.5px; color: var(--text-dim); }
.char-lv { display: flex; flex-direction: column; align-items: center; gap: 1px; flex-shrink: 0; }
.char-lv span { font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--text-dim); }
.char-lv strong { font-size: 17px; color: var(--color-primary-light); font-variant-numeric: tabular-nums; }
.char-emp {
  display: inline-flex; align-items: center; gap: 7px;
  min-width: 92px;
  font-size: 12px;
  color: var(--text-muted);
}
.char-emp i { font-size: 8px; color: var(--emp, #888); }

.acct-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 30px 12px;
  font-size: 13px;
  color: var(--text-dim);
}
.acct-empty i { font-size: 26px; color: var(--color-primary); opacity: .45; animation: crown-float 3.6s ease-in-out infinite; }

/* Modals */
.acct-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 90px 16px 16px;
}
.am-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .18s ease;
}
.acct-modal.is-open .am-backdrop { opacity: 1; }
.am-box {
  position: relative;
  width: 100%;
  max-width: 520px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(168deg, rgba(26, 21, 18, .99), rgba(15, 13, 11, .99));
  border: 1px solid rgba(var(--rgb-gold), .26);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .65);
  opacity: 0;
  transform: translateY(-14px) scale(.98);
  transition: opacity .2s ease, transform .2s cubic-bezier(.2, .8, .3, 1);
}
.acct-modal.is-open .am-box { opacity: 1; transform: translateY(0) scale(1); }
.am-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(var(--rgb-gold), .16);
}
.am-head h3 {
  display: flex; align-items: center; gap: 10px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
}
.am-x {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-dim);
  transition: color .2s ease, transform .2s ease;
}
.am-x:hover { color: var(--color-danger); transform: rotate(90deg); }
.am-body { padding: 18px; }
.am-foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 6px; }
.am-cancel {
  padding: 13px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  background: none;
  border: 1px solid rgba(var(--rgb-accent), .2);
  transition: color .2s ease, border-color .2s ease;
}
.am-cancel:hover { color: var(--text-heading); border-color: rgba(var(--rgb-accent), .4); }
.am-save { width: auto; margin-top: 0; animation: none; }

@media (max-width: 640px) {
  .acct-hero { padding: 18px; gap: 14px; }
  .acct-id h2 { font-size: 19px; }
  .acct-panel { padding: 16px 14px 18px; }
  .char-emp { display: none; }
}

/* ============================================================
   ITEM SHOP
   ============================================================ */
.shop { padding: 4px; }

.shop-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 20px 24px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(var(--rgb-gold), .10) 0%, rgba(0, 0, 0, .22) 55%);
  border: 1px solid rgba(var(--rgb-gold), .20);
  animation: auth-in .5s cubic-bezier(.2, .8, .3, 1) both;
}
.shop-title { display: flex; align-items: center; gap: 16px; }
.shop-badge {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 21px;
  color: var(--color-primary);
  background: rgba(var(--rgb-gold), .12);
  border: 1px solid rgba(var(--rgb-gold), .35);
  animation: auth-badge-pulse 3.2s ease-out infinite;
}
.shop-title h2 {
  margin: 0;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 22px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-heading);
}
.shop-title p { margin: 5px 0 0; font-size: 12.5px; color: var(--text-muted); }
.shop-wallets { display: flex; gap: 10px; flex-wrap: wrap; }

.shop-body { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) { .shop-body { grid-template-columns: 232px 1fr; } }

/* Sidebar */
.ss-panel {
  padding: 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .26);
  border: 1px solid rgba(var(--rgb-accent), .12);
}
.ss-panel > h4 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 11px;
  padding-bottom: 10px;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--color-primary);
  border-bottom: 1px solid rgba(var(--rgb-gold), .15);
}
/* Category rail: each row carries a real item icon from its own contents and
   a hairline showing how much of the catalogue it holds. */
.ss-panel--cats { position: sticky; top: 78px; }

.ss-cat {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 8px;
  color: var(--text-muted);
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s cubic-bezier(.2,.8,.3,1);
  animation: auth-field-in .4s ease both;
  animation-delay: var(--d, 0ms);
}
.sc-tile {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 7px;
  font-size: 13px;
  color: var(--color-primary);
  /* Hue is derived from the category id so each rail entry reads differently. */
  background:
    linear-gradient(150deg,
      hsl(var(--hue, 40) 45% 22% / .55),
      rgba(0, 0, 0, .4));
  border: 1px solid rgba(var(--rgb-gold), .16);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.sc-tile img {
  width: 26px; height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
  transition: transform .2s ease;
}
.ss-cat--all .sc-tile { background: rgba(var(--rgb-gold), .1); }

.sc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sc-name {
  font-size: 12.5px;
  line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-sub { font-size: 10px; color: var(--text-dim); }
/* Share-of-catalogue hairline */
.sc-bar {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.sc-bar > span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, hsl(var(--hue, 40) 55% 55% / .85), rgba(var(--rgb-gold), .5));
  transition: filter .2s ease;
}
.sc-count {
  flex-shrink: 0;
  font-style: normal;
  min-width: 30px;
  padding: 2px 8px;
  border-radius: 9px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-dim);
  background: rgba(var(--rgb-accent), .12);
  border: 1px solid rgba(var(--rgb-accent), .1);
  transition: color .18s ease, background .18s ease;
}

.ss-cat:hover {
  transform: translateX(3px);
  background: rgba(var(--rgb-gold), .07);
  border-color: rgba(var(--rgb-gold), .18);
  color: var(--text-heading);
}
.ss-cat:hover .sc-tile {
  border-color: rgba(var(--rgb-gold), .45);
  box-shadow: 0 0 12px hsl(var(--hue, 40) 55% 45% / .35);
}
.ss-cat:hover .sc-tile img { transform: scale(1.14); }
.ss-cat:hover .sc-count { color: var(--color-primary); background: rgba(var(--rgb-gold), .14); }

.ss-cat.is-active {
  color: var(--text-heading);
  background: linear-gradient(100deg, rgba(var(--rgb-gold), .18), rgba(var(--rgb-gold), .06));
  border-color: rgba(var(--rgb-gold), .34);
  box-shadow: inset 2px 0 0 var(--color-primary);
}
.ss-cat.is-active .sc-tile {
  border-color: rgba(var(--rgb-gold), .5);
  box-shadow: 0 0 14px rgba(var(--rgb-gold), .3);
}
.ss-cat.is-active .sc-name { font-weight: 600; }
.ss-cat.is-active .sc-count {
  color: #1b1409;
  background: linear-gradient(180deg, #f0d68a, #c9a44f);
  border-color: transparent;
}

.ss-hist {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .24);
  border-left: 2px solid rgba(var(--rgb-gold), .3);
}
.sh-name { font-size: 12px; color: var(--text-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-meta { font-size: 10.5px; color: var(--text-dim); }

/* Search */
.shop-search { display: flex; align-items: stretch; gap: 9px; margin-bottom: 16px; }
.shop-search .auth-input { flex: 1; }
.shop-searchbtn {
  padding: 0 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1b1409;
  background: linear-gradient(180deg, var(--btn-gold-from, #c9a44f), var(--btn-gold-to, #9d7c38));
  border: 1px solid rgba(var(--rgb-gold), .45);
  transition: filter .2s ease, transform .2s ease;
}
.shop-searchbtn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.shop-clear {
  display: flex; align-items: center; justify-content: center;
  width: 42px;
  border-radius: 5px;
  color: var(--text-dim);
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(var(--rgb-accent), .18);
  transition: color .2s ease, border-color .2s ease;
}
.shop-clear:hover { color: var(--color-danger); border-color: rgba(190, 70, 70, .4); }

.shop-secttl, .shop-top > h4 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 11px;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
  border-bottom: 1px solid rgba(var(--rgb-gold), .15);
}
.shop-count {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(var(--rgb-accent), .12);
}
.shop-top { margin-bottom: 26px; }

/* Item grid */
.si-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
.si-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 12px 12px;
  border-radius: 9px;
  text-align: center;
  background: linear-gradient(170deg, rgba(30, 24, 19, .85), rgba(15, 13, 11, .9));
  border: 1px solid rgba(var(--rgb-accent), .13);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), border-color .2s ease, box-shadow .2s ease;
  animation: auth-field-in .4s ease both;
}
.si-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--rgb-gold), .38);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
}
.si-card--sale { border-color: rgba(190, 90, 70, .3); }
.si-sale {
  position: absolute;
  top: 8px; right: 8px;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #fff;
  background: #b8452f;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.si-thumb {
  display: flex; align-items: center; justify-content: center;
  height: 62px;
  margin-bottom: 10px;
}
.si-thumb img {
  max-width: 100%; max-height: 100%;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55));
  transition: transform .2s ease;
}
.si-card:hover .si-thumb img { transform: scale(1.12); }
/* 78 of the catalogue's vnums ship no icon in any client pack. */
.si-noicon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 8px;
  font-size: 19px;
  color: var(--color-primary);
  background: rgba(var(--rgb-gold), .08);
  border: 1px dashed rgba(var(--rgb-gold), .25);
  opacity: .7;
}
.si-name {
  margin: 0 0 5px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-heading);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 32px;
}
.si-meta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 9px;
  font-size: 10px;
  color: var(--text-dim);
}
.si-cat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-sold { flex-shrink: 0; }
.si-sold i { color: #c8703a; }

.si-price { margin-bottom: 9px; }
.si-price s { display: block; font-size: 11px; color: var(--text-dim); opacity: .7; }
.si-price strong {
  display: block;
  font-size: 16px;
  color: var(--color-primary-light);
  font-variant-numeric: tabular-nums;
}
.si-price strong.is-jd { color: #9fdcef; }
.si-price strong i { font-size: 12px; margin-right: 4px; }
.si-cur { display: block; font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--text-dim); }

.si-limit {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-bottom: 9px;
  font-size: 10px;
  color: #c8a45e;
}

.si-buy {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-top: auto;
  padding: 9px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #1b1409;
  background: linear-gradient(180deg, var(--btn-gold-from, #c9a44f), var(--btn-gold-to, #9d7c38));
  border: 1px solid rgba(var(--rgb-gold), .45);
  transition: filter .18s ease, transform .18s ease;
}
.si-buy:hover { filter: brightness(1.1); transform: translateY(-1px); }
.si-buy[data-poor] {
  color: var(--text-dim);
  background: rgba(0, 0, 0, .32);
  border-color: rgba(var(--rgb-accent), .18);
  cursor: not-allowed;
  filter: none;
  transform: none;
}
.si-buy--guest { color: var(--text-muted); background: rgba(0, 0, 0, .3); border-color: rgba(var(--rgb-accent), .18); }
.si-buy--guest:hover { color: var(--color-primary); border-color: rgba(var(--rgb-gold), .4); }

/* Purchase modal extras */
.buy-preview {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 15px;
  margin-bottom: 16px;
  border-radius: 7px;
  background: rgba(var(--rgb-gold), .06);
  border: 1px solid rgba(var(--rgb-gold), .16);
}
.bp-thumb {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 7px;
  font-size: 18px;
  color: var(--color-primary);
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(var(--rgb-gold), .2);
}
.bp-thumb img { max-width: 100%; max-height: 100%; }
.buy-preview strong { display: block; font-size: 14px; color: var(--text-heading); }
.bp-unit { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-dim); }

.qty-row { display: flex; align-items: stretch; gap: 8px; }
.qty-btn {
  width: 40px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-primary);
  background: rgba(0, 0, 0, .32);
  border: 1px solid rgba(var(--rgb-accent), .18);
  transition: background .18s ease, border-color .18s ease;
}
.qty-btn:hover { background: rgba(var(--rgb-gold), .12); border-color: rgba(var(--rgb-gold), .4); }
.qty-row input {
  flex: 1;
  min-width: 0;
  padding: 12px;
  text-align: center;
  border-radius: 5px;
  outline: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
  background: rgba(0, 0, 0, .32);
  border: 1px solid rgba(var(--rgb-accent), .18);
}
.auth-input select {
  flex: 1;
  min-width: 0;
  padding: 13px 14px 13px 38px;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--text-heading);
  background: none;
  appearance: none;
}
.auth-input select option { background: #17140f; color: var(--text-heading); }

.buy-total {
  display: flex; align-items: center; justify-content: space-between;
  margin: 16px 0 4px;
  padding: 13px 15px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(var(--rgb-gold), .18);
}
.buy-total span { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.buy-total strong { font-size: 18px; color: var(--color-primary-light); font-variant-numeric: tabular-nums; }
.buy-total strong.is-poor { color: var(--color-danger); }

@media (max-width: 640px) {
  .shop-head { padding: 16px; }
  .shop-title h2 { font-size: 18px; }
  .si-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ============================================================
   DOWNLOAD PAGE
   ============================================================ */
.dl { padding: 4px; }

.dl-hero {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 22px 24px;
  margin-bottom: 20px;
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(var(--rgb-gold), .10) 0%, rgba(0, 0, 0, .22) 55%);
  border: 1px solid rgba(var(--rgb-gold), .20);
  animation: auth-in .5s cubic-bezier(.2, .8, .3, 1) both;
}
.dl-badge {
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 22px;
  color: var(--color-primary);
  background: rgba(var(--rgb-gold), .12);
  border: 1px solid rgba(var(--rgb-gold), .35);
  animation: auth-badge-pulse 3.2s ease-out infinite;
}
.dl-hero-text { flex: 1; min-width: 190px; }
.dl-hero-text h2 {
  margin: 0;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 23px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-heading);
}
.dl-hero-text p { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); }

.dl-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dl-steps > i { font-size: 9px; color: var(--text-dim); opacity: .5; }
.dl-step {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  border-radius: 20px;
  font-size: 11.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(var(--rgb-accent), .16);
}
.dl-step em {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  font-style: normal;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #1b1409;
  background: linear-gradient(180deg, #f0d68a, #c9a44f);
}

.dl-section { margin-bottom: 20px; }
.dl-section > h3 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 11px;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
  border-bottom: 1px solid rgba(var(--rgb-gold), .15);
}
.dl-count {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(var(--rgb-accent), .12);
}

.dl-list { display: flex; flex-direction: column; gap: 10px; }
.dl-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(30, 24, 19, .8), rgba(15, 13, 11, .88));
  border: 1px solid rgba(var(--rgb-accent), .13);
  border-left: 3px solid var(--host, rgba(var(--rgb-gold), .45));
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), border-color .2s ease, box-shadow .2s ease;
  animation: auth-field-in .45s ease both;
  animation-delay: var(--d, 0ms);
}
.dl-row:hover {
  transform: translateX(4px);
  border-color: rgba(var(--rgb-gold), .34);
  border-left-color: var(--host, var(--color-primary));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .42);
}
.dl-num {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(var(--rgb-accent), .16);
  transition: color .2s ease, background .2s ease;
}
.dl-row:hover .dl-num { color: #1b1409; background: linear-gradient(180deg, #f0d68a, #c9a44f); }
.dl-ico {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 9px;
  font-size: 18px;
  color: var(--host, var(--color-primary));
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(var(--rgb-accent), .14);
  transition: transform .2s ease, box-shadow .2s ease;
}
.dl-row:hover .dl-ico { transform: scale(1.08) rotate(-5deg); box-shadow: 0 0 14px rgba(var(--rgb-gold), .22); }
.dl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dl-info strong {
  font-size: 14.5px;
  color: var(--text-heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-host {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.dl-host i { font-size: 9px; }
.dl-cta {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #1b1409;
  background: linear-gradient(180deg, var(--btn-gold-from, #c9a44f), var(--btn-gold-to, #9d7c38));
  border: 1px solid rgba(var(--rgb-gold), .45);
  transition: filter .2s ease;
}
.dl-row:hover .dl-cta { filter: brightness(1.12); }
.dl-cta i { transition: transform .2s ease; }
.dl-row:hover .dl-cta i { transform: translateY(2px); }

.dl-note {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 16px;
  margin-bottom: 20px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-body);
  background: rgba(200, 150, 60, .07);
  border: 1px solid rgba(200, 150, 60, .24);
}
.dl-note-ico {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 14px;
  color: #d8a24a;
  background: rgba(200, 150, 60, .13);
}
.dl-note strong { color: var(--text-heading); }
.dl-note a { color: var(--color-primary); text-decoration: none; border-bottom: 1px solid rgba(var(--rgb-gold), .35); }
.dl-note a i { font-size: 9px; margin-left: 5px; }
.dl-note a:hover { color: #fff; border-bottom-color: #fff; }

.dl-specs { display: grid; gap: 11px; }
@media (min-width: 700px) { .dl-specs { grid-template-columns: 1fr 1fr; } }
.dl-spec {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 15px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .26);
  border: 1px solid rgba(var(--rgb-accent), .12);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), border-color .2s ease, background .2s ease;
  animation: auth-field-in .45s ease both;
  animation-delay: var(--d, 0ms);
}
.dl-spec:hover { transform: translateY(-2px); border-color: rgba(var(--rgb-gold), .3); background: rgba(var(--rgb-gold), .05); }
.dl-spec.has-warn { border-left: 3px solid rgba(200, 150, 60, .55); }
.ds-ico {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 9px;
  font-size: 17px;
  color: var(--color-primary);
  background: rgba(var(--rgb-gold), .07);
  border: 1px solid rgba(var(--rgb-gold), .16);
  transition: transform .2s ease;
}
.dl-spec:hover .ds-ico { transform: scale(1.08); }
.ds-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ds-body strong { font-size: 13.5px; color: var(--text-heading); }
.ds-desc { font-size: 12.5px; color: var(--text-body); }
.ds-warn { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #d8a24a; }

.dl-help { display: grid; gap: 12px; }
@media (min-width: 700px) { .dl-help { grid-template-columns: 1fr 1fr; } }
.dl-help-item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(var(--rgb-gold), .07), rgba(0, 0, 0, .24));
  border: 1px solid rgba(var(--rgb-gold), .16);
  transition: border-color .2s ease, transform .2s ease;
}
.dl-help-item:hover { border-color: rgba(var(--rgb-gold), .34); transform: translateY(-2px); }
.dl-help-item > i { font-size: 22px; color: var(--color-primary); flex-shrink: 0; }
.dl-help-item > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-help-item strong { font-size: 13.5px; color: var(--text-heading); }
.dl-help-item span { font-size: 12px; color: var(--text-dim); }
.dl-help-btn {
  display: inline-flex; align-items: center; gap: 7px;
  flex-shrink: 0;
  padding: 8px 15px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(var(--rgb-gold), .08);
  border: 1px solid rgba(var(--rgb-gold), .28);
  transition: background .2s ease, color .2s ease;
}
.dl-help-btn i { transition: transform .2s ease; }
.dl-help-item:hover .dl-help-btn { background: rgba(var(--rgb-gold), .18); color: #fff; }
.dl-help-item:hover .dl-help-btn i { transform: translateX(3px); }

/* Rakion Evolution download hub. This intentionally overrides the generic
   fantasy card styling above with the site's iron/stone visual language. */
body.rakion-eternal .dl {
  --dl-line: rgba(174, 137, 72, .28);
  --dl-line-soft: rgba(145, 153, 158, .13);
  --dl-iron: #111417;
  --dl-iron-deep: #080a0c;
  position: relative;
  padding: 0;
  color: #b8bdc1;
}

body.rakion-eternal .dl::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 2%, rgba(191, 137, 59, .08), transparent 25%),
    repeating-linear-gradient(118deg, transparent 0 18px, rgba(255,255,255,.008) 19px, transparent 20px);
}

body.rakion-eternal .dl-hero {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 23px;
  min-height: 190px;
  margin: 0 0 18px;
  padding: 28px 30px;
  overflow: hidden;
  border: 1px solid var(--dl-line);
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(177, 117, 43, .08), transparent 30%),
    radial-gradient(circle at 84% 50%, rgba(79, 108, 117, .09), transparent 31%),
    linear-gradient(145deg, #181b1e, #090b0d 65%, #111417);
  box-shadow: inset 0 0 0 1px rgba(153, 161, 166, .05), 0 18px 38px rgba(0,0,0,.38);
  animation: dl-eternal-rise .55s cubic-bezier(.2,.78,.25,1) both;
}

body.rakion-eternal .dl-hero::before,
body.rakion-eternal .dl-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

body.rakion-eternal .dl-hero::before {
  inset: 0;
  opacity: .32;
  background:
    linear-gradient(110deg, transparent 0 72%, rgba(180, 188, 193, .05) 72.2%, transparent 72.5%),
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,255,255,.012) 9px, transparent 10px);
}

body.rakion-eternal .dl-hero::after {
  left: 30px;
  right: 30px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #a66b2d 17%, #d0a456 50%, #64777c 83%, transparent);
  box-shadow: 0 0 12px rgba(192, 133, 52, .22);
}

body.rakion-eternal .dl-hero-sigil {
  position: relative;
  width: 88px;
  height: 106px;
  display: grid;
  place-items: center;
  color: #c68a3c;
  font-size: 32px;
  clip-path: polygon(50% 0, 92% 17%, 84% 77%, 50% 100%, 16% 77%, 8% 17%);
  background: linear-gradient(145deg, #5b3a19, #bf8540 30%, #4b321a 55%, #9f713a);
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.55));
}

body.rakion-eternal .dl-hero-sigil::before {
  content: "";
  position: absolute;
  inset: 3px;
  clip-path: inherit;
  background: linear-gradient(160deg, #24282b, #090b0d 58%, #181b1d);
  box-shadow: inset 0 0 18px #000;
}

body.rakion-eternal .dl-hero-sigil i { position: relative; z-index: 1; filter: drop-shadow(0 0 9px rgba(198,138,60,.25)); }
body.rakion-eternal .dl-hero-sigil span { position: absolute; z-index: 1; bottom: 19px; width: 25px; height: 2px; background: #6ba0a7; box-shadow: 0 0 7px rgba(77,176,186,.5); }

body.rakion-eternal .dl-hero-text { position: relative; z-index: 1; min-width: 0; }
body.rakion-eternal .dl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: #b78749;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.8px;
  text-transform: uppercase;
}
body.rakion-eternal .dl-eyebrow i { font-size: 6px; color: #5d9aa1; }
body.rakion-eternal .dl-hero-text h1 {
  margin: 0;
  color: #d9dcdd;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: clamp(28px, 4vw, 43px);
  font-weight: 400;
  letter-spacing: 3px;
  line-height: 1;
  text-shadow: 0 3px 3px #000;
}
body.rakion-eternal .dl-hero-text h1 b { color: #b98542; font-weight: 400; }
body.rakion-eternal .dl-hero-text > p { margin: 11px 0 14px; color: #959ca1; font-size: 13px; }
body.rakion-eternal .dl-hero-meta { display: flex; flex-wrap: wrap; gap: 7px; }
body.rakion-eternal .dl-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  color: #8f989e;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(144,151,156,.13);
  border-radius: 2px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
}
body.rakion-eternal .dl-hero-meta i { color: #bd8541; }

body.rakion-eternal .dl-status {
  position: relative;
  z-index: 1;
  min-width: 174px;
  padding: 14px 16px 14px 38px;
  border: 1px solid var(--dl-line-soft);
  border-radius: 2px;
  background: rgba(0,0,0,.3);
}
body.rakion-eternal .dl-status-dot {
  position: absolute;
  left: 16px;
  top: 19px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #b56e35;
  box-shadow: 0 0 0 4px rgba(181,110,53,.1), 0 0 10px rgba(181,110,53,.35);
  animation: dl-status-pulse 2.2s ease-in-out infinite;
}
body.rakion-eternal .dl-status.is-ready .dl-status-dot { background: #75a34c; box-shadow: 0 0 0 4px rgba(117,163,76,.1), 0 0 10px rgba(117,163,76,.35); }
body.rakion-eternal .dl-status small,
body.rakion-eternal .dl-status strong { display: block; }
body.rakion-eternal .dl-status small { color: #687076; font-size: 8px; letter-spacing: 1.8px; text-transform: uppercase; }
body.rakion-eternal .dl-status strong { margin-top: 3px; color: #c6c9ca; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; }

body.rakion-eternal .dl-stage { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 16px; align-items: start; }
body.rakion-eternal .dl-main { min-width: 0; }
body.rakion-eternal .dl-section { margin: 0 0 16px; }
body.rakion-eternal .dl-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  min-height: 46px;
  padding: 0 16px;
  color: #c9cdd0;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #171a1d, #0d0f11);
  border: 1px solid var(--dl-line);
  border-bottom-color: rgba(174,137,72,.15);
}
body.rakion-eternal .dl-title > span { display: flex; align-items: center; gap: 10px; }
body.rakion-eternal .dl-title i { color: #b97c38; }
body.rakion-eternal .dl-title em { color: #626b70; font-family: Inter, sans-serif; font-size: 8px; font-style: normal; letter-spacing: 1.2px; }

body.rakion-eternal .dl-empty {
  position: relative;
  min-height: 196px;
  display: grid;
  grid-template-columns: 66px minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 50%, rgba(175,116,47,.09), transparent 30%),
    linear-gradient(145deg, #111417, #090b0d);
  border: 1px solid var(--dl-line-soft);
  border-top: 0;
  box-shadow: inset 0 0 34px rgba(0,0,0,.28);
}
body.rakion-eternal .dl-empty::after {
  content: "";
  position: absolute;
  right: -50px;
  top: -90px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(114,130,136,.05);
  transform: rotate(45deg);
}
body.rakion-eternal .dl-empty-icon {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  color: #c28a45;
  font-size: 22px;
  background: linear-gradient(145deg, #202428, #0b0d0f);
  border: 1px solid rgba(181,134,69,.32);
  box-shadow: inset 0 0 0 3px #0b0d0f, 0 9px 20px rgba(0,0,0,.35);
  transform: rotate(45deg);
}
body.rakion-eternal .dl-empty-icon i { transform: rotate(-45deg); }
body.rakion-eternal .dl-empty-copy { position: relative; z-index: 1; min-width: 0; }
body.rakion-eternal .dl-empty-kicker { display: block; margin-bottom: 5px; color: #64747a; font-size: 8px; font-weight: 700; letter-spacing: 2px; }
body.rakion-eternal .dl-empty-copy strong { display: block; color: #d0d3d5; font-family: 'Albertus Nova', Georgia, serif; font-size: 17px; font-weight: 400; }
body.rakion-eternal .dl-empty-copy p { max-width: 510px; margin: 8px 0 0; color: #858d92; font-size: 12px; line-height: 1.6; }
body.rakion-eternal .dl-empty-action,
body.rakion-eternal .dl-admin-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  color: #d4bc89;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: #171a1d;
  border: 1px solid rgba(181,134,69,.34);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
body.rakion-eternal .dl-empty-action:hover,
body.rakion-eternal .dl-admin-link:hover { transform: translateY(-2px); color: #f0dfb7; border-color: #a87638; background: #202326; }
body.rakion-eternal .dl-admin-link { position: absolute; right: 12px; bottom: 10px; padding: 6px 9px; color: #788187; font-size: 7px; border-color: rgba(144,151,156,.15); }

body.rakion-eternal .dl-row {
  border-radius: 1px;
  background: linear-gradient(145deg, #171a1d, #0b0d0f);
  border-color: var(--dl-line-soft);
  border-left-color: var(--host, #9d6a35);
}
body.rakion-eternal .dl-row:hover { background: linear-gradient(145deg, #1d2124, #0e1012); }
body.rakion-eternal .dl-info small { color: #687177; font-size: 7px; letter-spacing: 1.5px; }

body.rakion-eternal .dl-install { animation: dl-eternal-rise .55s cubic-bezier(.2,.78,.25,1) .16s both; }
body.rakion-eternal .dl-flow { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-left: 1px solid var(--dl-line-soft); }
body.rakion-eternal .dl-flow-step {
  position: relative;
  min-height: 112px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  gap: 13px;
  padding: 18px;
  background: linear-gradient(145deg, rgba(20,23,25,.96), rgba(8,10,12,.98));
  border-right: 1px solid var(--dl-line-soft);
  border-bottom: 1px solid var(--dl-line-soft);
  animation: dl-eternal-rise .45s ease var(--d) both;
}
body.rakion-eternal .dl-flow-num { position: absolute; right: 9px; top: 7px; color: rgba(178,137,72,.18); font-family: Georgia, serif; font-size: 26px; }
body.rakion-eternal .dl-flow-icon { width: 41px; height: 41px; display: grid; place-items: center; color: #b47c3d; background: #0b0d0f; border: 1px solid rgba(174,137,72,.24); transform: rotate(45deg); }
body.rakion-eternal .dl-flow-icon i { transform: rotate(-45deg); }
body.rakion-eternal .dl-flow-step strong { display: block; color: #c9ccce; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; }
body.rakion-eternal .dl-flow-step p { margin: 5px 0 0; color: #747d82; font-size: 10.5px; line-height: 1.5; }

body.rakion-eternal .dl-aside { display: grid; gap: 16px; animation: dl-eternal-rise .55s cubic-bezier(.2,.78,.25,1) .1s both; }
body.rakion-eternal .dl-side-card {
  padding: 18px;
  background: linear-gradient(155deg, #15181b, #090b0d);
  border: 1px solid var(--dl-line);
  box-shadow: inset 0 0 0 1px rgba(144,151,156,.035);
}
body.rakion-eternal .dl-side-card > h2,
body.rakion-eternal .dl-secure h2 { margin: 0; color: #c8cbcd; font-family: 'Albertus Nova', Georgia, serif; font-size: 11px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; }
body.rakion-eternal .dl-side-card > h2 { display: flex; align-items: center; gap: 9px; padding-bottom: 13px; border-bottom: 1px solid rgba(174,137,72,.16); }
body.rakion-eternal .dl-side-card > h2 i { color: #b47b3c; }
body.rakion-eternal .dl-checks { margin: 5px 0 0; padding: 0; list-style: none; }
body.rakion-eternal .dl-checks li { display: flex; align-items: center; gap: 12px; min-height: 58px; border-bottom: 1px solid rgba(144,151,156,.09); }
body.rakion-eternal .dl-checks li:last-child { border-bottom: 0; }
body.rakion-eternal .dl-checks li > i { width: 27px; color: #738b91; font-size: 16px; text-align: center; }
body.rakion-eternal .dl-checks span { display: flex; flex-direction: column; gap: 2px; }
body.rakion-eternal .dl-checks strong { color: #bbc0c3; font-size: 11px; }
body.rakion-eternal .dl-checks small { color: #606a70; font-size: 9px; }
body.rakion-eternal .dl-secure { display: flex; align-items: flex-start; gap: 13px; border-color: rgba(81,131,138,.26); }
body.rakion-eternal .dl-secure-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: #67a3aa; background: rgba(63,111,117,.08); border: 1px solid rgba(80,143,151,.25); }
body.rakion-eternal .dl-secure p { margin: 7px 0 0; color: #778187; font-size: 10px; line-height: 1.6; }

body.rakion-eternal .dl-note,
body.rakion-eternal .dl-spec,
body.rakion-eternal .dl-help-item { border-radius: 1px; background: linear-gradient(145deg, #15181b, #090b0d); }
body.rakion-eternal .dl-note { margin-top: 16px; border-color: rgba(174,137,72,.26); }
body.rakion-eternal .dl-help { margin-top: 16px; }
body.rakion-eternal .dl-help-item { border-color: var(--dl-line-soft); }

@keyframes dl-eternal-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dl-status-pulse {
  0%, 100% { transform: scale(.85); opacity: .65; }
  50% { transform: scale(1); opacity: 1; }
}

@media (max-width: 960px) {
  body.rakion-eternal .dl-hero { grid-template-columns: 82px minmax(0,1fr); }
  body.rakion-eternal .dl-hero-sigil { width: 75px; height: 92px; }
  body.rakion-eternal .dl-status { grid-column: 1 / -1; width: 100%; }
  body.rakion-eternal .dl-stage { grid-template-columns: 1fr; }
  body.rakion-eternal .dl-aside { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  body.rakion-eternal .dl-hero { grid-template-columns: 58px minmax(0,1fr); gap: 15px; min-height: 0; padding: 21px 18px; }
  body.rakion-eternal .dl-hero-sigil { width: 55px; height: 68px; font-size: 21px; }
  body.rakion-eternal .dl-hero-sigil span { bottom: 13px; width: 17px; }
  body.rakion-eternal .dl-hero-text h1 { font-size: 25px; letter-spacing: 1px; }
  body.rakion-eternal .dl-eyebrow { letter-spacing: 1.5px; }
  body.rakion-eternal .dl-hero-text > p { font-size: 11px; }
  body.rakion-eternal .dl-hero-meta span { font-size: 7px; }
  body.rakion-eternal .dl-empty { grid-template-columns: 52px minmax(0,1fr); padding: 22px 18px; }
  body.rakion-eternal .dl-empty-icon { width: 48px; height: 48px; font-size: 17px; }
  body.rakion-eternal .dl-empty-action { grid-column: 1 / -1; }
  body.rakion-eternal .dl-flow { grid-template-columns: 1fr; }
  body.rakion-eternal .dl-aside { grid-template-columns: 1fr; }
  body.rakion-eternal .dl-row { gap: 9px; padding: 12px 10px; }
  body.rakion-eternal .dl-num { display: none; }
  body.rakion-eternal .dl-cta { padding: 9px; font-size: 0; }
  body.rakion-eternal .dl-cta i { font-size: 12px; }
  body.rakion-eternal .dl-help-item { flex-wrap: wrap; }
}

/* ============================================================
   ADMIN PANEL
   ============================================================ */
body.adm { background: var(--bg-darkest); }
.adm-shell { display: flex; min-height: 100vh; }

.adm-side {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 40;
  width: 252px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: linear-gradient(180deg, #17130f 0%, #100d0b 100%);
  border-right: 1px solid rgba(var(--rgb-gold), .16);
}
.adm-side::-webkit-scrollbar { width: 6px; }
.adm-side::-webkit-scrollbar-thumb { background: rgba(var(--rgb-gold), .2); border-radius: 3px; }

.adm-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px;
  border-bottom: 1px solid rgba(var(--rgb-gold), .14);
}
.adm-brand-ico {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  font-size: 16px;
  color: #1b1409;
  background: linear-gradient(180deg, #f0d68a, #c9a44f);
  box-shadow: 0 4px 12px rgba(201, 164, 79, .3);
}
.adm-brand-txt { display: flex; flex-direction: column; min-width: 0; }
.adm-brand-txt b {
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-heading);
}
.adm-brand-txt small { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }

.adm-nav-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 10px 2px;
  padding: 0 9px;
  min-height: 39px;
  color: var(--text-dim);
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(var(--rgb-gold), .14);
  border-radius: 6px;
}
.adm-nav-search > i { flex: 0 0 auto; font-size: 11px; }
.adm-nav-search input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0;
  color: var(--text-heading);
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 11.5px;
}
.adm-nav-search input::placeholder { color: var(--text-dim); opacity: .72; }
.adm-nav-search kbd {
  flex: 0 0 auto;
  padding: 2px 4px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 3px;
  font: 700 8px/1.2 inherit;
}
.adm-nav-search button {
  display: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  color: var(--text-dim);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.adm-nav-search:focus-within {
  border-color: rgba(var(--rgb-gold), .42);
  box-shadow: 0 0 0 2px rgba(var(--rgb-gold), .07);
}
.adm-nav-search:focus-within kbd,
.adm-nav-search input:not(:placeholder-shown) ~ kbd { display: none; }
.adm-nav-search input:not(:placeholder-shown) ~ button { display: inline-grid; place-items: center; }
.adm-nav.is-filtering .adm-link { animation: none; }
.adm-group[hidden], .adm-link[hidden] { display: none !important; }
.adm-nav-empty {
  min-height: 92px;
  margin: 14px 5px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--text-dim);
  border: 1px dashed rgba(var(--rgb-gold), .16);
  text-align: center;
  font-size: 10px;
}
.adm-nav-empty[hidden] { display: none !important; }
.adm-nav-empty i { color: rgba(var(--rgb-gold), .48); font-size: 15px; }

.adm-nav { flex: 1; padding: 8px 10px 14px; }
.adm-group {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 10px 7px;
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.adm-group i { font-size: 9px; opacity: .6; }

.adm-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px;
  margin-bottom: 2px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
  animation: auth-field-in .4s ease both;
  animation-delay: var(--d, 0ms);
}
.adm-link-ico {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--color-primary);
  background: rgba(var(--rgb-gold), .06);
  border: 1px solid rgba(var(--rgb-gold), .12);
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.adm-link-txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-link-arrow { font-size: 9px; opacity: 0; transform: translateX(-4px); transition: opacity .16s ease, transform .16s ease; }

.adm-link:hover {
  background: rgba(var(--rgb-gold), .07);
  border-color: rgba(var(--rgb-gold), .16);
  color: var(--text-heading);
  transform: translateX(2px);
}
.adm-link:hover .adm-link-ico { background: rgba(var(--rgb-gold), .16); transform: scale(1.06); }
.adm-link:hover .adm-link-arrow { opacity: .5; transform: translateX(0); }

.adm-link.on {
  color: var(--text-heading);
  background: linear-gradient(100deg, rgba(var(--rgb-gold), .2), rgba(var(--rgb-gold), .06));
  border-color: rgba(var(--rgb-gold), .34);
  box-shadow: inset 2px 0 0 var(--color-primary);
}
.adm-link.on .adm-link-ico {
  color: #1b1409;
  background: linear-gradient(180deg, #f0d68a, #c9a44f);
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(201, 164, 79, .35);
}
.adm-link.on .adm-link-arrow { opacity: 1; transform: translateX(0); color: var(--color-primary); }

.adm-side-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(var(--rgb-gold), .14);
  background: rgba(0, 0, 0, .25);
}
.adm-me { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.adm-me-av {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 13px;
  color: var(--color-primary);
  background: rgba(var(--rgb-gold), .1);
  border: 1px solid rgba(var(--rgb-gold), .28);
}
.adm-me-txt { display: flex; flex-direction: column; min-width: 0; }
.adm-me-txt strong {
  font-size: 12.5px;
  color: var(--text-heading);
  text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm-me-txt small { font-size: 10px; color: var(--text-dim); }
.adm-out {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  color: #c96a6a;
  background: rgba(180, 70, 70, .1);
  border: 1px solid rgba(180, 70, 70, .22);
  transition: background .18s ease, color .18s ease;
}
.adm-out:hover { background: rgba(180, 70, 70, .24); color: #ef8f8f; }

.adm-main { flex: 1; min-width: 0; margin-left: 252px; }
.adm-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 13px 24px;
  background: rgba(19, 16, 13, .96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(var(--rgb-gold), .14);
}
.adm-burger {
  display: none;
  width: 36px; height: 36px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 15px;
  color: var(--color-primary);
  background: rgba(var(--rgb-gold), .08);
  border: 1px solid rgba(var(--rgb-gold), .2);
}
.adm-crumb { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.adm-crumb > i { font-size: 8px; color: var(--text-dim); opacity: .5; }
.ac-group { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim); }
.ac-page {
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 14.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm-top-actions { display: flex; align-items: center; gap: 10px; }
.adm-top-link {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(var(--rgb-accent), .14);
  transition: color .18s ease, border-color .18s ease;
}
.adm-top-link:hover { color: var(--color-primary); border-color: rgba(var(--rgb-gold), .35); }
.adm-top-user {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--text-heading);
  background: rgba(var(--rgb-gold), .06);
  border: 1px solid rgba(var(--rgb-gold), .16);
}
.adm-top-user i { color: var(--color-primary); font-size: 12px; }
.adm-top-user em {
  font-style: normal;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  color: #1b1409;
  background: linear-gradient(180deg, #f0d68a, #c9a44f);
}

.adm-body { padding: 24px; }
.adm-scrim {
  position: fixed; inset: 0;
  z-index: 39;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.adm-scrim.is-on { opacity: 1; visibility: visible; }

/* Stat cards */
.adm-stats { display: grid; gap: 12px; margin-bottom: 20px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px)  { .adm-stats { grid-template-columns: repeat(4, 1fr); } }
.adm-stat {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  padding: 16px 17px;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(150deg, rgba(32, 26, 21, .9), rgba(16, 14, 11, .95));
  border: 1px solid rgba(var(--rgb-gold), .14);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), border-color .2s ease, box-shadow .2s ease;
  animation: auth-field-in .45s ease both;
  animation-delay: var(--d, 0ms);
}
.adm-stat:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--rgb-gold), .36);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
}
.as-ico {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 10px;
  font-size: 17px;
  color: var(--color-primary);
  background: rgba(var(--rgb-gold), .09);
  border: 1px solid rgba(var(--rgb-gold), .18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.adm-stat:hover .as-ico { transform: scale(1.08) rotate(-6deg); box-shadow: 0 0 14px rgba(var(--rgb-gold), .28); }
.as-text { display: flex; flex-direction: column; min-width: 0; }
.as-v {
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-primary-light);
  font-variant-numeric: tabular-nums;
}
.as-l {
  margin-top: 3px;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm-stat--live .as-ico { color: var(--color-success); background: rgba(90, 200, 120, .1); border-color: rgba(90, 200, 120, .28); }
.adm-stat--live .as-v { color: var(--color-success); }
.adm-stat--good .as-ico { color: #7fc98a; background: rgba(120, 200, 140, .09); border-color: rgba(120, 200, 140, .22); }
.adm-stat--bad .as-ico { color: #d07070; background: rgba(200, 100, 100, .09); border-color: rgba(200, 100, 100, .24); }
.adm-stat--bad .as-v { color: #e19595; }
.as-pulse {
  position: absolute;
  top: 12px; right: 12px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  animation: dot-pulse 2s ease-out infinite;
}

.adm-grid2 { display: grid; gap: 14px; }
@media (min-width: 1000px) { .adm-grid2 { grid-template-columns: 1fr 1fr; } }

.adm-card {
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(28, 23, 19, .8), rgba(16, 14, 11, .9));
  border: 1px solid rgba(var(--rgb-gold), .14);
}
.adm-card-h {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 12.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(0, 0, 0, .2);
  border-bottom: 1px solid rgba(var(--rgb-gold), .14);
}
.adm-card-h i { font-size: 12px; }
.adm-card-b { padding: 16px 18px 18px; }

.adm-quick { display: grid; gap: 10px; }
@media (min-width: 560px) { .adm-quick { grid-template-columns: 1fr 1fr; } }
.aq {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-heading);
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(var(--rgb-accent), .14);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), border-color .2s ease, background .2s ease;
  animation: auth-field-in .45s ease both;
  animation-delay: var(--d, 0ms);
}
.aq span { flex: 1; }
.aq-ico {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-primary);
  background: rgba(var(--rgb-gold), .08);
  border: 1px solid rgba(var(--rgb-gold), .16);
  transition: transform .2s ease;
}
.aq-arrow { font-size: 11px; opacity: .4; transition: transform .2s ease, opacity .2s ease; }
.aq:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--rgb-gold), .36);
  background: rgba(var(--rgb-gold), .07);
  color: var(--text-heading);
}
.aq:hover .aq-ico { transform: scale(1.1) rotate(-6deg); }
.aq:hover .aq-arrow { opacity: 1; transform: translateX(4px); }
.aq--gold {
  color: #241a06;
  background: linear-gradient(180deg, var(--btn-gold-from, #c9a44f), var(--btn-gold-to, #9d7c38));
  border-color: rgba(var(--rgb-gold), .5);
}
.aq--gold .aq-ico { color: #241a06; background: rgba(0, 0, 0, .16); border-color: rgba(0, 0, 0, .16); }
.aq--gold .aq-arrow { color: #241a06; }
.aq--gold:hover { color: #241a06; background: linear-gradient(180deg, #dcb96a, #ad8b41); }

.adm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(var(--rgb-accent), .08);
  transition: padding-left .18s ease;
}
.adm-row:hover { padding-left: 8px; }
.adm-row--last { border-bottom: none; }
.ar-k { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-muted); }
.ar-k i { width: 15px; font-size: 12px; color: var(--color-primary); opacity: .8; }
.ar-v { font-size: 14px; font-weight: 700; color: var(--color-primary-light); font-variant-numeric: tabular-nums; }
.adm-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 11px;
  border-radius: 11px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
}
.adm-pill i { font-size: 6px; }
.adm-pill.is-ok { color: #7fc98a; background: rgba(120, 200, 140, .12); border: 1px solid rgba(120, 200, 140, .28); }
.adm-pill.is-warn { color: #e0b055; background: rgba(220, 170, 70, .13); border: 1px solid rgba(220, 170, 70, .32); }

@media (max-width: 900px) {
  .adm-side { transform: translateX(-100%); transition: transform .24s cubic-bezier(.2, .8, .3, 1); }
  .adm-side.is-open { transform: translateX(0); }
  .adm-main { margin-left: 0; }
  .adm-burger { display: flex; align-items: center; justify-content: center; }
  .adm-top-user { display: none; }
  .adm-body { padding: 16px; }
}

/* ============================================================
   TOASTS + DIALOGS  (public/js/dialogs.js)

   The old .alert box used an 8%-opacity tint, which vanished
   against the light wallpaper. Everything here is opaque and
   sits above the page instead of inside it.
   ============================================================ */
.am-toasts {
  position: fixed;
  top: 78px;
  right: 18px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(370px, calc(100vw - 36px));
  pointer-events: none;
}

.am-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px 15px;
  overflow: hidden;
  pointer-events: auto;
  border-radius: 10px;
  /* Fully opaque: this has to read over bright artwork. */
  background: linear-gradient(150deg, #1d1813 0%, #131009 100%);
  border: 1px solid rgba(var(--rgb-gold), .26);
  border-left: 3px solid var(--am-accent, var(--color-primary));
  box-shadow: 0 16px 40px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .05);
  opacity: 0;
  transform: translateX(28px) scale(.97);
  transition: opacity .26s cubic-bezier(.2, .8, .3, 1), transform .26s cubic-bezier(.2, .8, .3, 1);
}
.am-toast.is-in  { opacity: 1; transform: translateX(0) scale(1); }
.am-toast.is-out { opacity: 0; transform: translateX(28px) scale(.97); }

.am-toast--success { --am-accent: #4bd39a; }
.am-toast--error   { --am-accent: #d76a6a; }
.am-toast--warning { --am-accent: #e0a94b; }
.am-toast--info    { --am-accent: #6fa8dc; }

.amt-ico {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 13px;
  color: var(--am-accent);
  background: color-mix(in srgb, var(--am-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--am-accent) 40%, transparent);
  animation: amt-pop .34s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes amt-pop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.amt-body { flex: 1; min-width: 0; padding-right: 6px; }
.amt-title {
  display: block;
  margin-bottom: 3px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--am-accent);
}
.amt-text { font-size: 13px; line-height: 1.5; color: #ded5c4; word-break: break-word; }
.amt-list { margin: 2px 0 0; padding-left: 16px; }
.amt-list li { margin-bottom: 2px; }

.amt-x {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-dim);
  background: none;
  transition: color .18s ease, background .18s ease;
}
.amt-x:hover { color: #fff; background: rgba(255, 255, 255, .08); }

.amt-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, .06);
}
.amt-bar > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--am-accent);
  opacity: .8;
}

/* Fallback when JavaScript is off */
.am-static {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 16px;
  margin-bottom: 14px;
  border-radius: 8px;
  font-size: 13.5px;
  color: #ded5c4;
  background: #1b1712;
  border: 1px solid rgba(var(--rgb-gold), .3);
  border-left: 3px solid var(--color-primary);
}
.am-static--success { border-left-color: #4bd39a; }
.am-static--error   { border-left-color: #d76a6a; }
.am-static i { margin-top: 2px; }
.am-static ul { margin: 0; padding-left: 18px; }

/* ---------------------------------------------------------- dialogs */
body.am-locked { overflow: hidden; }

.am-dialog {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.amd-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 5, 4, .74);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .2s ease;
}
.am-dialog.is-in .amd-backdrop { opacity: 1; }

.amd-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 30px 26px 22px;
  text-align: center;
  border-radius: 12px;
  background: linear-gradient(168deg, #1d1813 0%, #120f0c 100%);
  border: 1px solid rgba(var(--rgb-gold), .3);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
  opacity: 0;
  transform: translateY(-16px) scale(.94);
  transition: opacity .22s ease, transform .22s cubic-bezier(.2, 1.2, .4, 1);
}
.am-dialog.is-in .amd-box { opacity: 1; transform: translateY(0) scale(1); }

.amd-ico {
  display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  font-size: 24px;
  color: var(--am-accent, var(--color-primary));
  background: color-mix(in srgb, var(--am-accent, #c9a44f) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--am-accent, #c9a44f) 38%, transparent);
}
/* Halo that expands once when the dialog appears. */
.amd-ico::after {
  content: "";
  position: absolute;
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 1px solid var(--am-accent, var(--color-primary));
  opacity: 0;
  animation: amd-ring 1.1s ease-out .12s;
}
@keyframes amd-ring {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.6); opacity: 0; }
}
.am-dialog--success  { --am-accent: #4bd39a; }
.am-dialog--error    { --am-accent: #d76a6a; }
.am-dialog--warning  { --am-accent: #e0a94b; }
.am-dialog--info     { --am-accent: #6fa8dc; }
.am-dialog--question { --am-accent: #c9a44f; }

.amd-title {
  margin: 0 0 9px;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: 1px;
  color: var(--text-heading);
}
.amd-text { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
.amd-input-wrap { margin-top: 16px; text-align: left; }

.amd-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.amd-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition: filter .18s ease, transform .18s ease, background .18s ease, color .18s ease;
}
.amd-btn:hover { transform: translateY(-2px); }
.amd-btn:active { transform: translateY(0); }
.amd-cancel {
  color: var(--text-muted);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(var(--rgb-accent), .22);
}
.amd-cancel:hover { color: var(--text-heading); border-color: rgba(var(--rgb-accent), .4); }
.amd-ok {
  color: #1b1409;
  background: linear-gradient(180deg, var(--btn-gold-from, #c9a44f), var(--btn-gold-to, #9d7c38));
  border: 1px solid rgba(var(--rgb-gold), .5);
}
.amd-ok:hover { filter: brightness(1.1); }
/* Destructive actions get a red confirm button, never gold. */
.am-dialog.is-danger .amd-ok {
  color: #fff;
  background: linear-gradient(180deg, #c04b4b, #9b3535);
  border-color: rgba(200, 90, 90, .5);
}

@media (max-width: 640px) {
  .am-toasts { top: auto; bottom: 14px; right: 12px; left: 12px; width: auto; }
  .am-toast { transform: translateY(20px) scale(.97); }
  .am-toast.is-in { transform: translateY(0) scale(1); }
  .am-toast.is-out { transform: translateY(20px) scale(.97); }
  .amd-box { padding: 24px 18px 18px; }
  .amd-actions { flex-direction: column-reverse; }
}

/* ============================================================
   RICH-TEXT EDITOR  (public/assets/js/editor.js)
   ============================================================ */
.nx-editor {
  border-radius: 9px;
  overflow: hidden;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(var(--rgb-accent), .18);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nx-editor:focus-within {
  border-color: rgba(var(--rgb-gold), .5);
  box-shadow: 0 0 0 3px rgba(var(--rgb-gold), .1);
}

.nx-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 7px 9px;
  background: linear-gradient(180deg, rgba(38, 31, 25, .95), rgba(24, 20, 16, .95));
  border-bottom: 1px solid rgba(var(--rgb-gold), .16);
}
.nx-sep {
  width: 1px;
  height: 20px;
  margin: 0 5px;
  background: rgba(var(--rgb-accent), .18);
}
.nx-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-muted);
  background: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.nx-btn--text { font-family: 'Albertus Nova', Georgia, serif; font-weight: 700; font-size: 12px; letter-spacing: .5px; }
.nx-btn:hover:not(:disabled) {
  color: var(--text-heading);
  background: rgba(var(--rgb-gold), .12);
  border-color: rgba(var(--rgb-gold), .22);
  transform: translateY(-1px);
}
.nx-btn.is-on {
  color: #1b1409;
  background: linear-gradient(180deg, #f0d68a, #c9a44f);
  border-color: transparent;
}
.nx-btn:disabled { opacity: .3; cursor: not-allowed; }

/* The editable canvas mirrors the public article styles so what you type is
   what the visitor sees. */
.nx-area {
  min-height: 320px;
  max-height: 62vh;
  overflow-y: auto;
  padding: 18px 20px;
  outline: none;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-body);
}
.nx-area.is-drop { box-shadow: inset 0 0 0 2px rgba(var(--rgb-gold), .5); }
.nx-area:empty::before {
  content: attr(data-placeholder);
  color: var(--text-dim);
}
.nx-area > *:first-child { margin-top: 0; }
.nx-area p { margin: 0 0 1em; }
.nx-area h2 {
  margin: 1.4em 0 .5em;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 21px;
  color: var(--text-heading);
}
.nx-area h3 {
  margin: 1.3em 0 .45em;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 17px;
  color: var(--color-primary);
}
.nx-area a { color: var(--color-primary); text-decoration: underline; }
.nx-area ul, .nx-area ol { margin: 0 0 1em; padding-left: 24px; }
.nx-area li { margin-bottom: .3em; }
.nx-area blockquote {
  margin: 1em 0;
  padding: 10px 16px;
  border-left: 3px solid var(--color-primary);
  background: rgba(var(--rgb-gold), .06);
  color: var(--text-muted);
  font-style: italic;
}
.nx-area pre {
  margin: 1em 0;
  padding: 12px 14px;
  overflow-x: auto;
  border-radius: 6px;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(var(--rgb-accent), .16);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
}
.nx-area img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid rgba(var(--rgb-gold), .18);
}
.nx-area hr { margin: 1.4em 0; border: none; height: 1px; background: rgba(var(--rgb-gold), .25); }
.nx-area table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.nx-area th, .nx-area td { padding: 8px 10px; border: 1px solid rgba(var(--rgb-accent), .18); }
.nx-area .nx-embed { text-align: center; }
.nx-area iframe { max-width: 100%; border: 0; border-radius: 6px; }
.nx-area .align-center { text-align: center; }
.nx-area .align-right  { text-align: right; }

.nx-source {
  width: 100%;
  min-height: 320px;
  max-height: 62vh;
  padding: 16px 18px;
  border: none;
  outline: none;
  resize: vertical;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: #cfd8c8;
  background: #0d0b09;
}

.nx-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(0, 0, 0, .28);
  border-top: 1px solid rgba(var(--rgb-accent), .12);
}
.nx-hint i { margin-right: 5px; color: var(--color-primary); opacity: .7; }

@media (max-width: 640px) {
  .nx-toolbar { padding: 6px; }
  .nx-btn { min-width: 28px; height: 28px; }
  .nx-sep { margin: 0 2px; }
}

/* Deployment warnings on the admin dashboard - settings that are fine locally
   and dangerous on a public server. */
.adm-warn {
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(30, 20, 12, .7);
  border: 1px solid rgba(200, 150, 60, .3);
}
.aw-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 12.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #e0b055;
  background: rgba(200, 150, 60, .1);
  border-bottom: 1px solid rgba(200, 150, 60, .22);
}
.aw-count {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  color: #1b1409;
  background: #e0b055;
}
.aw-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(var(--rgb-accent), .08);
  animation: auth-field-in .4s ease both;
  animation-delay: var(--d, 0ms);
}
.aw-item:last-child { border-bottom: none; }
.aw-item > i { margin-top: 2px; font-size: 14px; }
.aw-item--critical > i { color: #d76a6a; }
.aw-item--warning  > i { color: #e0b055; }
.aw-item > div { display: flex; flex-direction: column; gap: 3px; }
.aw-item strong { font-size: 13.5px; color: var(--text-heading); }
.aw-item span { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }

/* Square date chip - day over month, like a torn-off calendar page. */
.nr-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 42px;
  margin-left: auto;
  border-radius: 7px;
  line-height: 1;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(var(--rgb-gold), .14), rgba(0, 0, 0, .3));
  border: 1px solid rgba(var(--rgb-gold), .24);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nr-date strong {
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}
.nr-date span {
  margin-top: 2px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--color-primary);
}
.news-row:hover .nr-date {
  transform: translateY(-2px);
  border-color: rgba(var(--rgb-gold), .5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .38);
}
.nr-date--lg { width: 48px; height: 50px; margin-left: 0; }
.nr-date--lg strong { font-size: 20px; }

/* View counter */
.nr-views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.nr-views i { opacity: .75; }
.nr-views-l { opacity: .7; }

.art-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-dim);
}
.art-meta i { font-size: 11px; opacity: .8; }



/* ============================================================
   TIERED-ITEM RANKING
   Compact rows; the full stat sheet is a hover tooltip / tap modal.
   ============================================================ */
.ti-hint {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.ti-hint i { color: var(--color-primary); opacity: .7; }

.ti-list { display: flex; flex-direction: column; gap: 8px; }

.ti-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 9px;
  cursor: pointer;
  outline: none;
  background: linear-gradient(120deg, rgba(28, 23, 18, .85), rgba(15, 13, 11, .9));
  border: 1px solid rgba(var(--rgb-accent), .12);
  border-left: 3px solid var(--tier, var(--color-primary));
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), border-color .18s ease, box-shadow .18s ease;
  animation: auth-field-in .4s ease both;
  animation-delay: var(--d, 0ms);
}
.ti-row:hover,
.ti-row:focus-visible {
  transform: translateX(3px);
  border-color: color-mix(in srgb, var(--tier) 45%, transparent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  z-index: 20;
}
.ti-row:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tier) 60%, transparent); }

.ti-pos {
  flex-shrink: 0;
  width: 26px;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: color-mix(in srgb, var(--tier) 70%, transparent);
}

.ti-owner { display: flex; align-items: center; gap: 9px; min-width: 0; width: 170px; flex-shrink: 0; }
.ti-avatar {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--rgb-gold), .3);
  transition: transform .18s ease;
}
.ti-row:hover .ti-avatar { transform: scale(1.1); }
.ti-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ti-who strong {
  font-size: 13px;
  color: var(--text-heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ti-who small { font-size: 10.5px; color: var(--text-dim); }

.ti-item { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ti-icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  padding: 3px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--text-dim);
  background: rgba(0, 0, 0, .34);
  border: 1px solid color-mix(in srgb, var(--tier) 30%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* Icons are 32x32 up to 64x96; contain keeps them whole in the small chip. */
.ti-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ti-row:hover .ti-icon {
  transform: scale(1.08);
  box-shadow: 0 0 14px color-mix(in srgb, var(--tier) 40%, transparent);
}
.ti-name {
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 14.5px;
  color: var(--tier);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ti-tier {
  display: inline-flex; align-items: center; gap: 5px;
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  color: #14100c;
  background: var(--tier);
}
.ti-tier i { font-size: 9px; color: #5a4410; }
.ti-row.is-max .ti-tier { animation: tier-throb 2.2s ease-in-out 1s infinite; }
@keyframes tier-throb {
  0%, 100% { box-shadow: none; }
  50%      { box-shadow: 0 0 13px var(--tier); }
}

.ti-where {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(var(--rgb-accent), .14);
}
.ti-where.is-eq { color: #7fc98a; border-color: rgba(120, 200, 140, .32); background: rgba(120, 200, 140, .1); }
.ti-more { flex-shrink: 0; font-size: 12px; color: var(--text-dim); opacity: .5; transition: opacity .18s ease, color .18s ease; }
.ti-row:hover .ti-more { opacity: 1; color: var(--tier); }

/* ---------- detail panel ----------
   Click/tap only - it is never shown in place. It used to open on hover as a
   floating tooltip, which had to be position:fixed (the page wrapper clips
   with overflow:hidden) and therefore hand-placed against the viewport in JS.
   That placement only ran on mouseenter, so scrolling with the cursor resting
   on a row left the panel stranded mid-page. Opening it as a centred modal
   removes the placement problem entirely instead of patching it.

   The in-row copy is the template the modal clones; display:none guarantees
   no stray panel can ever appear over the list. */
.ti-detail { display: none; }

.td-head {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--tier) 20%, transparent);
  background: color-mix(in srgb, var(--tier) 8%, transparent);
}
.td-icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  flex-shrink: 0;
  padding: 3px;
  border-radius: 8px;
  font-size: 16px;
  color: var(--text-dim);
  background: rgba(0, 0, 0, .4);
  border: 1px solid color-mix(in srgb, var(--tier) 35%, transparent);
}
.td-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.td-head h3 {
  margin: 0 0 5px;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 15px;
  line-height: 1.2;
  color: var(--tier);
}
.td-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.td-pip {
  padding: 2px 7px; border-radius: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  color: #14100c; background: var(--tier);
}
.td-pct {
  padding: 2px 6px; border-radius: 4px;
  font-size: 9.5px; font-weight: 700;
  color: var(--tier);
  border: 1px solid color-mix(in srgb, var(--tier) 40%, transparent);
}
.td-lv {
  padding: 2px 6px; border-radius: 4px;
  font-size: 9.5px; color: var(--text-dim);
  border: 1px solid rgba(var(--rgb-accent), .18);
}

.td-body {
  flex: 1;
  min-height: 0;
  padding: 4px 14px 10px;
  overflow-y: auto;
}
.td-body::-webkit-scrollbar { width: 5px; }
.td-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--tier) 45%, transparent); border-radius: 3px; }
.td-body section { padding: 9px 0; border-bottom: 1px dashed rgba(var(--rgb-accent), .12); }
.td-body section:last-child { border-bottom: none; }
.td-body h4 {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 6px;
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-dim);
}
.td-body h4 i { font-size: 9px; color: var(--tier); }

.td-stat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 2px 0;
  font-size: 12px;
}
.td-label { color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-val { flex-shrink: 0; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.td-val.is-up { color: #7fc98a; }
.td-val.is-down { color: #d78585; }
.td-val.is-boosted { color: var(--tier); }
.td-val small {
  margin-left: 6px; font-weight: 400; font-size: 10px;
  color: var(--text-dim); text-decoration: line-through; opacity: .7;
}

.td-sockets { display: flex; gap: 6px; flex-wrap: wrap; }
.td-socket {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(0, 0, 0, .34);
  border: 1px dashed rgba(var(--rgb-accent), .24);
}
.td-socket.is-filled {
  color: var(--color-primary);
  border-style: solid; border-color: rgba(var(--rgb-gold), .45);
  background: rgba(var(--rgb-gold), .1);
}
.td-socket img { max-width: 100%; max-height: 100%; object-fit: contain; }

.td-foot {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  font-size: 10.5px;
  color: var(--text-dim);
  background: rgba(0, 0, 0, .3);
  border-top: 1px solid rgba(var(--rgb-accent), .1);
}
.td-foot i { font-size: 10px; }
.td-owner { margin-left: auto; color: var(--text-muted); font-weight: 600; }

/* ---------- modal (tap / click) ---------- */
.ti-modal {
  position: fixed; inset: 0; z-index: 2100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ti-modal-back {
  position: absolute; inset: 0;
  background: rgba(6, 5, 4, .76);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .18s ease;
}
.ti-modal.is-open .ti-modal-back { opacity: 1; }
.ti-modal-box {
  position: relative;
  width: 100%; max-width: 380px;
  opacity: 0;
  transform: translateY(-14px) scale(.95);
  transition: opacity .2s ease, transform .2s cubic-bezier(.2, 1.2, .4, 1);
}
.ti-modal.is-open .ti-modal-box { opacity: 1; transform: translateY(0) scale(1); }
.ti-modal-x {
  position: absolute; top: -14px; right: -12px;
  z-index: 2;
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  background: #1d1813;
  border: 1px solid rgba(var(--rgb-gold), .3);
  transition: color .18s ease, transform .18s ease;
}
.ti-modal-x:hover { color: var(--color-danger); transform: rotate(90deg); }
.ti-detail.is-modal {
  display: flex;
  flex-direction: column;
  position: static;
  width: 100%;
  /* Header and footer stay put; the stat list scrolls inside. */
  max-height: min(78vh, 620px);
  border-radius: 11px;
  overflow: hidden;
  background: linear-gradient(170deg, #1d1813 0%, #100d0b 100%);
  border: 1px solid color-mix(in srgb, var(--tier) 40%, transparent);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .7);
}
.ti-detail.is-modal { max-height: calc(100vh - 80px); }

@media (max-width: 760px) {
  .ti-owner { width: auto; }
  .ti-who small { display: none; }
  .ti-name { font-size: 13px; }
}

/* ============================================================
   PLAYER RANKING
   Shares the tiered-item row/tooltip chrome (.ti-row, .ti-detail);
   everything below is the player-specific anatomy.
   ============================================================ */
.pr-search { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.pr-search-field { position: relative; flex: 1; display: flex; align-items: center; }
.pr-search-field i {
  position: absolute; left: 12px;
  font-size: 12px;
  color: var(--text-dim);
  pointer-events: none;
  transition: color .18s ease;
}
.pr-search-field .input-field { width: 100%; padding-left: 32px; }
.pr-search-field:focus-within i { color: var(--color-primary); }
.pr-clear {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 7px;
  font-size: 12px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(var(--rgb-accent), .16);
  transition: color .18s ease, transform .18s ease, border-color .18s ease;
}
.pr-clear:hover { color: var(--color-danger); border-color: rgba(var(--rgb-accent), .3); transform: rotate(90deg); }

/* ---------- podium ---------- */
.pr-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 12px;
  margin-bottom: 20px;
}
.pr-pod {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 5px;
  padding: 16px 10px 14px;
  border-radius: 11px;
  cursor: pointer;
  outline: none;
  text-align: center;
  background: linear-gradient(170deg, rgba(30, 25, 19, .92), rgba(15, 13, 11, .95));
  border: 1px solid color-mix(in srgb, var(--lv) 22%, transparent);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), border-color .22s ease, box-shadow .22s ease;
  animation: auth-field-in .5s ease both;
  animation-delay: var(--d, 0ms);
}
/* The winner sits taller and wider than the flanks. */
.pr-pod.is-1 { padding-top: 24px; padding-bottom: 18px; border-color: rgba(var(--rgb-gold), .38); }
.pr-pod:hover, .pr-pod:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--lv) 55%, transparent);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .5), 0 0 22px color-mix(in srgb, var(--lv) 20%, transparent);
  z-index: 20;
}
.pr-pod:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--lv) 60%, transparent); }

/* Metallic rank marker straddling the top edge of the tile. Gradient rather
   than a flat fill so gold/silver/bronze read as metal at 26px. */
.pr-medal {
  /* Centred with a negative margin, NOT translateX(-50%): the winner's medal
     runs the crown-float animation, whose keyframes set `transform` outright
     and would wipe a centring translate, shunting it half its width right. */
  position: absolute; top: -13px; left: 50%;
  margin-left: -13px;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 12px; font-weight: 700; line-height: 1;
  color: #2a2118;
  background: linear-gradient(160deg, #d8dde3 0%, #a9b0b8 55%, #cfd5db 100%);
  border: 2px solid var(--bg-medium);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.pr-pod.is-1 .pr-medal {
  width: 30px; height: 30px;
  top: -15px;
  margin-left: -15px;          /* half of 30px - keep in step with width */
  font-size: 12px;
  background: linear-gradient(160deg, #ffe9a8 0%, #e8b64a 55%, #f5d27a 100%);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .55), 0 0 16px rgba(240, 200, 96, .45),
              inset 0 1px 0 rgba(255, 255, 255, .6);
  animation: crown-float 3s ease-in-out infinite;
}
.pr-pod.is-3 .pr-medal {
  background: linear-gradient(160deg, #e3b892 0%, #b87a4c 55%, #d69c6e 100%);
}

.pr-pod-face { position: relative; display: block; margin-bottom: 2px; }
.pr-pod-face img {
  display: block;
  width: 56px; height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .6));
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.pr-pod.is-1 .pr-pod-face img { width: 68px; height: 68px; }
.pr-pod:hover .pr-pod-face img { transform: scale(1.08); }
.pr-pod-name {
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 14px;
  color: var(--text-heading);
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-pod.is-1 .pr-pod-name { font-size: 16px; color: var(--color-primary); }
.pr-pod-class { font-size: 10.5px; color: var(--text-dim); }
/* Outlined, not a solid fill: at a glance a filled block reads as a status
   chip (and turns the page into one colour when everyone is at the cap). */
.pr-pod-lv {
  padding: 2px 10px;
  border-radius: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
  color: var(--lv);
  background: color-mix(in srgb, var(--lv) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--lv) 40%, transparent);
}
.pr-pod-emp { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-muted); }
.pr-pod-emp i { font-size: 6px; }

/* ---------- list row ---------- */
.pr-face {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  transition: transform .18s cubic-bezier(.2, .8, .3, 1);
}
/* Portraits are 63x64 with their own gold ring baked in - contain keeps that
   ring circular instead of squashing it into the 38px box. */
.pr-face img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ti-row:hover .pr-face { transform: scale(1.12) rotate(-3deg); }

.pr-id { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.35; }
.pr-id strong {
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 14.5px;
  color: var(--text-heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .18s ease;
}
.ti-row:hover .pr-id strong { color: var(--tier); }
.pr-id small {
  font-size: 10.5px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-id small i { font-size: 9px; opacity: .8; }

/* Ghost badge. The row already carries the level colour on its left edge;
   a second solid block of the same colour just shouts. */
.pr-lv {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  font-variant-numeric: tabular-nums;
  color: var(--tier);
  background: color-mix(in srgb, var(--tier) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier) 38%, transparent);
  transition: background .18s ease, border-color .18s ease;
}
.pr-lv i { font-size: 9px; opacity: .9; }
.ti-row:hover .pr-lv {
  background: color-mix(in srgb, var(--tier) 20%, transparent);
  border-color: color-mix(in srgb, var(--tier) 60%, transparent);
}
/* No throb here, unlike the tier ranking: tier 8 is rare, but level 120 is
   most of the server - 20 pulsing badges at once is just noise. The crown
   glyph is enough of a marker. */
.ti-row.is-max .pr-lv i { color: #f0c860; }

.pr-emp {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  width: 82px;
  font-size: 11px;
  color: var(--text-muted);
}
.pr-emp i { font-size: 7px; }
.pr-emp.is-none { color: var(--text-dim); }
.pr-emp.is-none i { color: #555; }

.pr-time {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  width: 76px;
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.pr-time i { font-size: 10px; opacity: .7; }

/* Square portrait in the detail header: no dark plate behind it, the art
   already carries its own frame. */
.td-face { background: none; border-color: transparent; }

@media (max-width: 860px) {
  .pr-emp span { display: none; }
  .pr-emp { width: auto; }
}
@media (max-width: 760px) {
  .pr-time { display: none; }
  .pr-id small { font-size: 10px; }
  .pr-podium { gap: 7px; }
  .pr-pod { padding: 14px 6px 12px; }
  .pr-pod-face img, .pr-pod.is-1 .pr-pod-face img { width: 48px; height: 48px; }
  .pr-pod-name, .pr-pod.is-1 .pr-pod-name { font-size: 12.5px; }
  .pr-pod-class { display: none; }
}

/* ============================================================
   ADMIN - REPORT QUEUE
   ============================================================ */
.adm-link-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px; font-weight: 700;
  text-align: center;
  color: #2a1410;
  background: #e0a94b;
  box-shadow: 0 0 10px rgba(224, 169, 75, .35);
}

.rp-count {
  margin-left: auto;
  padding: 1px 9px;
  border-radius: 10px;
  font-size: 11px; font-weight: 700;
  color: var(--color-primary);
  background: rgba(var(--rgb-gold), .12);
  border: 1px solid rgba(var(--rgb-gold), .25);
}

.rp-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px;
           border-bottom: 1px solid rgba(var(--rgb-accent), .12); }
.rp-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.rp-tab span {
  padding: 0 6px; border-radius: 8px;
  font-size: 10.5px; font-weight: 700;
  color: var(--text-dim);
  background: rgba(255, 255, 255, .05);
}
.rp-tab:hover { color: var(--text-heading); }
.rp-tab.on { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.rp-tab.on span { color: #2a1410; background: var(--color-primary); }

/* An open report is work to do - give it a visible edge. */
.rp-row.is-open td:first-child { box-shadow: inset 3px 0 0 #e0a94b; }
.rp-reason { display: inline-flex; align-items: center; gap: 7px; }
.rp-reason i { font-size: 11px; color: var(--color-primary); opacity: .8; }
.rp-act { display: block; font-size: 10px; color: var(--text-dim); margin-top: 2px; }

/* ---------- detail ---------- */
.rp-detail { display: flex; flex-direction: column; gap: 16px; }
.rp-back { margin-left: auto; }

.rp-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rp-head-ico {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 10px;
  font-size: 18px;
  color: var(--color-primary);
  background: rgba(var(--rgb-gold), .1);
  border: 1px solid rgba(var(--rgb-gold), .22);
}
.rp-head-txt { flex: 1; min-width: 0; }
.rp-head-txt h3 {
  margin: 0 0 3px;
  font-family: 'Albertus Nova', Georgia, serif;
  font-size: 18px;
  color: var(--text-heading);
}
.rp-head-txt p { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.rp-head-txt b { color: var(--text-heading); }

.rp-closed, .rp-warn, .rp-hint, .rp-banned {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px;
  padding: 10px 13px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
}
.rp-closed { color: #9fd8a8; background: rgba(120, 200, 140, .08); border: 1px solid rgba(120, 200, 140, .2); }
.rp-warn   { color: #e0b48a; background: rgba(224, 169, 75, .08);  border: 1px solid rgba(224, 169, 75, .22); }
.rp-hint   { color: var(--text-muted); background: rgba(255, 255, 255, .03); border: 1px solid rgba(var(--rgb-accent), .12); }
.rp-banned { color: #e59a9a; background: rgba(224, 82, 82, .08);   border: 1px solid rgba(224, 82, 82, .25); flex-wrap: wrap; }
.rp-banned b { color: #f0b4b4; }
.rp-inline { margin-left: auto; }
.rp-note { margin: 10px 0 0; font-size: 12.5px; color: var(--text-muted); font-style: italic; }

/* Nota escrita por QUIEN REPORTA (player_note), no por el staff. Se marca como cita para
   que no se confunda con .rp-note, que es la respuesta del moderador. */
.rp-playernote {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 3px solid rgba(var(--rgb-accent), .45);
  background: rgba(var(--rgb-accent), .05);
  border-radius: 0 6px 6px 0;
}
.rp-playernote p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  /* Texto libre de un jugador: puede venir sin espacios y reventar el ancho de la tarjeta. */
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.rp-target {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.rp-lbl { display: block; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 3px; }
.rp-val { font-size: 13.5px; color: var(--text-heading); }
.rp-val small { color: var(--text-dim); font-size: 11px; }
.rp-link { color: var(--color-primary); text-decoration: none; }
.rp-link:hover { text-decoration: underline; }
.rp-on  { font-size: 8px; color: #7fc98a; }
.rp-off { font-size: 8px; color: #6b6560; }

.rp-check { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; }
.rp-check input { accent-color: var(--color-primary); }

.rp-actions { display: flex; flex-wrap: wrap; gap: 22px; }
.rp-act-group { display: flex; flex-direction: column; gap: 8px; }
.rp-act-lbl {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-dim);
}
.rp-act-lbl i { font-size: 10px; color: var(--color-primary); opacity: .75; }
.rp-ban-row { display: flex; flex-wrap: wrap; gap: 8px; }

.rp-ban, .rp-soft {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 62px;
  padding: 9px 15px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.rp-ban {
  color: #e59a9a;
  background: rgba(224, 82, 82, .08);
  border: 1px solid rgba(224, 82, 82, .28);
}
.rp-ban:hover { transform: translateY(-2px); background: rgba(224, 82, 82, .18); border-color: rgba(224, 82, 82, .55); color: #f4bcbc; }
/* Permanent is the irreversible one - make it look different, not just bigger. */
.rp-ban--perm { color: #f0b4b4; background: rgba(224, 82, 82, .16); border-color: rgba(224, 82, 82, .45); }
.rp-ban--perm:hover { background: #b23c3c; border-color: #d05454; color: #fff; }

.rp-soft {
  color: var(--text-muted);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(var(--rgb-accent), .16);
}
.rp-soft:hover { transform: translateY(-2px); color: var(--text-heading); border-color: rgba(var(--rgb-gold), .4); background: rgba(var(--rgb-gold), .08); }
.rp-soft i { font-size: 11px; }

.rp-warnrow {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(var(--rgb-accent), .12);
  font-size: 12.5px;
}
.rp-warnrow:last-child { border-bottom: none; }
.rp-warnrow > div { flex: 1; min-width: 0; }
.rp-warnrow b { color: var(--text-heading); }
.rp-warnrow small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--text-dim); }
.rp-warnrow p { margin: 6px 0 0; color: var(--text-muted); }

@media (max-width: 620px) {
  .rp-actions { gap: 16px; }
  .rp-ban, .rp-soft { flex: 1; min-width: 0; }
}

/* ---------- account: moderation warnings ---------- */
.acct-warns {
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: 11px;
  background: linear-gradient(170deg, rgba(40, 30, 20, .85), rgba(20, 16, 12, .9));
  border: 1px solid rgba(224, 169, 75, .22);
  animation: auth-field-in .45s ease both;
}
.acct-warns.has-unread { border-color: rgba(224, 169, 75, .5); box-shadow: 0 0 22px rgba(224, 169, 75, .12); }
.acct-warns > header {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
  color: #e0b48a;
}
.acct-warns > header i { color: #e0a94b; }
.acct-warns > header b {
  margin-left: auto;
  padding: 2px 8px; border-radius: 9px;
  font-size: 10px; letter-spacing: .4px; text-transform: none;
  color: #2a1410; background: #e0a94b;
}
.acct-warns article {
  padding: 10px 0;
  border-top: 1px dashed rgba(var(--rgb-accent), .13);
  font-size: 13px;
}
.acct-warns article:first-of-type { border-top: none; }
.acct-warns article.is-unread { padding-left: 10px; box-shadow: inset 3px 0 0 #e0a94b; }
.aw-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.aw-top strong { color: var(--text-heading); }
.aw-top small { margin-left: auto; font-size: 10.5px; color: var(--text-dim); }
.aw-char { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; color: var(--text-dim); }
.aw-char i { font-size: 9px; }
.acct-warns article p { margin: 6px 0 0; color: var(--text-muted); line-height: 1.55; }
.aw-ack { margin-top: 12px; }

/* ===== admin: legibilidad y espaciado ===================================== */

/* La fuente de marca ('Albertus Nova') es la del juego y en titulares funciona,
   pero en el panel el contenido es texto denso -- rutas, tamanos, fechas -- y
   ahi se lee mal: si la webfont no carga cae a Georgia/Times, con serifas que
   emborronan las minusculas y las cifras. Se cambia SOLO el cuerpo del panel;
   las cabeceras .adm-card-h mantienen la fuente de marca a proposito. */
body.adm,
body.adm input,
body.adm select,
body.adm textarea,
body.adm button,
body.adm .data-table {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body.adm .data-table td { line-height: 1.5; }

/* Las tarjetas no traian separacion: apiladas una tras otra quedaban pegadas y
   parecian una sola. Las paginas que usan rejilla de Tailwind ya tienen gap, asi
   que se aplica solo entre hermanas consecutivas y no rompe esos layouts. */
.adm-card + .adm-card { margin-top: 18px; }

/* .btn-sm se usaba en 8 vistas del panel pero no estaba definida en ninguna
   parte: los botones "pequenos" salian a tamano completo. */
.btn-sm {
  padding: 6px 11px;
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1.2;
}
.btn-sm i { font-size: 11px; }

/* Filas de acciones dentro de una celda: que no se peguen entre si. */
.data-table td form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.data-table td form + form { margin-left: 6px; }

/* ========================================================================
   RAKION EVOLUTION — public CMS skin
   Dark carved stone, black iron, aged bronze, controlled cyan and embers.
   Kept as a final override layer so every migrated CMS screen inherits the
   same identity without duplicating markup in each view.
   ======================================================================== */
body.rakion-eternal {
  --rgb-dark: 11, 13, 15;
  --rgb-medium: 21, 24, 27;
  --rgb-accent: 112, 122, 128;
  --rgb-gold: 181, 143, 78;
  --bg-darkest: #070809;
  --bg-dark: #0b0d0f;
  --bg-medium: #15181b;
  --bg-light: #202429;
  --bg-card: #101316;
  --color-primary: #c2954e;
  --color-primary-light: #ead8a5;
  --color-primary-muted: #b5a06f;
  --text-heading: #ece2c8;
  --text-body: #c6c8ca;
  --text-muted: #92979b;
  --text-dim: #61676c;
  --text-link: #d0b06d;
  --text-link-hover: #f0ca78;
  --color-success: #77c8a2;
  --color-info: #818b91;
  --btn-gold-from: #d0a85c;
  --btn-gold-to: #765023;
  --btn-primary-bg: #141618;
  --btn-primary-text: #dbc486;
  --border-radius: 2px;
  min-width: 320px;
  background: #070809;
  color: var(--text-body);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Rakion Evolution — one visual language for every ranking ------------------ */
body.rakion-eternal .rk-table-wrap {
  overflow-x: auto; border: 1px solid rgba(156,126,69,.34); background: #0c1013;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 16px 38px rgba(0,0,0,.28);
}
body.rakion-eternal .rk-table { width: 100%; border-collapse: collapse; min-width: 670px; }
body.rakion-eternal .rk-table thead {
  background: linear-gradient(180deg,#181d20,#101417); color: #aeb4b6;
  border-bottom: 1px solid rgba(180,140,68,.42);
}
body.rakion-eternal .rk-table th {
  padding: 13px 16px; text-align: left; font: 800 10px/1 Arial,sans-serif;
  letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap;
}
body.rakion-eternal .rk-table td {
  padding: 13px 16px; color: #aeb4b6; font-size: 13px;
  border-bottom: 1px solid rgba(135,145,150,.1); vertical-align: middle;
}
body.rakion-eternal .rk-table tbody tr { transition: transform .2s ease,background .2s ease,box-shadow .2s ease; }
body.rakion-eternal .rk-table tbody tr:hover {
  background: rgba(197,126,48,.07); transform: translateX(2px); box-shadow: inset 2px 0 #c2772d;
}
body.rakion-eternal .rk-table tbody tr:last-child td { border-bottom: 0; }
body.rakion-eternal .rk-table tr.is-top { background: linear-gradient(90deg,rgba(168,111,43,.09),transparent 55%); }
body.rakion-eternal .rk-table tr.is-top-1 { background: linear-gradient(90deg,rgba(202,153,62,.16),transparent 62%); }
body.rakion-eternal .rk-rank {
  display: grid; place-items: center; width: 30px; height: 30px; color: #9da4a7;
  border: 1px solid #343c40; background: #12171a; font-weight: 900;
  clip-path: polygon(50% 0,92% 21%,92% 79%,50% 100%,8% 79%,8% 21%);
}
body.rakion-eternal .is-top-1 .rk-rank { color: #f2c45e; border-color: #b67b28; background: #2a1d0c; }
body.rakion-eternal .is-top-2 .rk-rank { color: #c6ccd0; }
body.rakion-eternal .is-top-3 .rk-rank { color: #c78b58; }
body.rakion-eternal .rk-primary { display: inline-flex; align-items: center; gap: 11px; color: #e1e3df; }
body.rakion-eternal .rk-primary > i { color: #bd873e; font-size: 16px; }
body.rakion-eternal .rk-primary img {
  width: 36px; height: 36px; object-fit: cover; border-radius: 50%;
  border: 1px solid #8c6a35; background: #080b0d; box-shadow: 0 0 0 3px #151a1d;
}
body.rakion-eternal .rk-level {
  display: inline-flex; padding: 5px 8px; border: 1px solid #3b4447; background: #12171a;
  color: #b5bdc0; font: 800 10px/1 Arial,sans-serif; letter-spacing: .8px;
}
body.rakion-eternal .rk-score, body.rakion-eternal .rk-refine { color: #e4ad4b; font-size: 15px; }
body.rakion-eternal .rk-refine { text-shadow: 0 0 12px rgba(235,118,33,.42); }
body.rakion-eternal .rk-date { color: #727b7f !important; font-size: 11px !important; white-space: nowrap; }
body.rakion-eternal .rk-periods { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
body.rakion-eternal .rk-periods a {
  padding: 8px 14px; border: 1px solid #343b3f; background: #101518; color: #858e91;
  font: 800 10px/1 Arial,sans-serif; letter-spacing: 1px; text-decoration: none;
}
body.rakion-eternal .rk-periods a:hover, body.rakion-eternal .rk-periods a.active {
  color: #f3d188; border-color: #a77430; background: linear-gradient(180deg,#312414,#17130d);
}
body.rakion-eternal .rk-empty {
  min-height: 220px; display: grid; place-items: center; align-content: center; gap: 10px;
  border: 1px solid rgba(156,126,69,.28); background: #0d1114; text-align: center; color: #7f888b;
}
body.rakion-eternal .rk-empty > i { font-size: 36px; color: #9c7138; filter: drop-shadow(0 0 15px rgba(193,110,32,.2)); }
body.rakion-eternal .rk-empty strong { color: #d6d8d5; font: 700 18px Georgia,serif; }
body.rakion-eternal .rk-empty span { font-size: 12px; }

/* Account economy --------------------------------------------------------- */
body.rakion-eternal .eternal-economy { display: grid; gap: 12px; margin: 14px 0; }
body.rakion-eternal .economy-card {
  position: relative; display: grid; grid-template-columns: 66px minmax(0,1fr) auto; align-items: center;
  gap: 16px; padding: 17px; overflow: hidden; border: 1px solid #394044; background:
  linear-gradient(110deg,rgba(255,255,255,.025),transparent 42%),#0d1215;
  box-shadow: inset 0 1px rgba(255,255,255,.025),0 12px 30px rgba(0,0,0,.24);
}
body.rakion-eternal .economy-card::before { content:"";position:absolute;inset:0 auto 0 0;width:3px;background:#8a5c28;box-shadow:0 0 15px #a55d20; }
body.rakion-eternal .economy-card--power.is-active::before { background:#c89d44;box-shadow:0 0 18px #e39e29; }
body.rakion-eternal .economy-icon {
  width:58px;height:58px;display:grid;place-items:center;color:#e2b85d;font-size:24px;
  border:1px solid #76582d;background:radial-gradient(circle,#322612,#111519 68%);transform:rotate(45deg);
}
body.rakion-eternal .economy-icon i { transform:rotate(-45deg); }
body.rakion-eternal .economy-kicker { color:#c47e35;font:900 9px/1 Arial,sans-serif;letter-spacing:2px; }
body.rakion-eternal .economy-copy h3 { margin:5px 0;color:#e4e5e1;font:700 20px Georgia,serif; }
body.rakion-eternal .economy-copy h3 b { margin-left:7px;color:#897d68;font:800 9px Arial,sans-serif;letter-spacing:1.2px; }
body.rakion-eternal .economy-card.is-active .economy-copy h3 b { color:#ecc663; }
body.rakion-eternal .economy-copy p, body.rakion-eternal .economy-copy small { margin:0;color:#889194;font-size:11px; }
body.rakion-eternal .economy-copy small { display:block;margin-top:5px;color:#b6a47c; }
body.rakion-eternal .economy-action { display:grid;gap:7px;text-align:center; }
body.rakion-eternal .economy-action strong { color:#e6c675;font:800 13px Arial,sans-serif; }
body.rakion-eternal .economy-action button, body.rakion-eternal .redeem-form button {
  border:1px solid #b0792f;background:linear-gradient(#c39243,#6d451b);color:#150f08;padding:10px 17px;
  font:900 10px Arial,sans-serif;letter-spacing:1px;cursor:pointer;box-shadow:inset 0 1px #e8c178;
}
body.rakion-eternal .economy-action button:hover, body.rakion-eternal .redeem-form button:hover { filter:brightness(1.15);transform:translateY(-1px); }
body.rakion-eternal .redeem-form { display:flex;gap:7px; }
body.rakion-eternal .redeem-form input {
  width:190px;border:1px solid #3d4649;background:#080c0e;color:#e1d7bc;padding:11px 12px;
  text-transform:uppercase;font:800 11px Arial,sans-serif;letter-spacing:1.4px;outline:none;
}
body.rakion-eternal .redeem-form input:focus { border-color:#9c7138;box-shadow:0 0 0 2px rgba(156,113,56,.14); }
body.rakion-eternal .cash-ledger-list > div { display:grid;grid-template-columns:1fr 1fr auto;gap:15px;padding:10px 12px;border-bottom:1px solid rgba(130,140,145,.1); }
body.rakion-eternal .cash-ledger-list code { color:#d1b26c; }
body.rakion-eternal .cash-ledger-list span { color:#778084;font-size:11px; }
body.rakion-eternal .cash-ledger-list strong { color:#e3a64e; }
body.rakion-eternal .wallet--gold i { color:#d9a73c; } body.rakion-eternal .wallet--gift i { color:#c48742; }

@media(max-width:760px){
  body.rakion-eternal .economy-card{grid-template-columns:52px 1fr;}
  body.rakion-eternal .economy-icon{width:45px;height:45px;font-size:18px;}
  body.rakion-eternal .economy-action,body.rakion-eternal .redeem-form{grid-column:1/-1;}
  body.rakion-eternal .redeem-form input{width:auto;flex:1;}
}

body.rakion-eternal .site-fixed-bg {
  background-image: url("../../images/rakion-eternal-bg-v2.png") !important;
  background-position: center 10%;
  background-size: cover;
  filter: saturate(.94) contrast(1.02) brightness(.92);
}

body.rakion-eternal .site-fixed-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 40%, transparent 0 38%, rgba(3, 7, 10, .05) 68%, rgba(3, 6, 9, .18) 100%),
    linear-gradient(180deg, rgba(3, 8, 12, .03) 0, rgba(4, 7, 10, .08) 62%, rgba(4, 6, 8, .54) 100%);
}

body.rakion-eternal > section::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  box-shadow: inset 0 0 105px 10px rgba(0, 0, 0, .18);
}

/* Black-iron navbar with a restrained turquoise lower engraving. */
body.rakion-eternal nav.fixed {
  background:
    linear-gradient(90deg, transparent, rgba(138, 145, 150, .07) 35%, rgba(138, 145, 150, .07) 65%, transparent),
    linear-gradient(180deg, rgba(15, 17, 19, .98), rgba(7, 8, 10, .97)) !important;
  border-bottom: 1px solid rgba(185, 145, 72, .48) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .55), inset 0 -2px 0 rgba(150, 156, 160, .07);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

body.rakion-eternal .nav-brand {
  width: 178px;
  height: 64px;
  overflow: hidden;
}

body.rakion-eternal .nav-brand-frame {
  position: relative;
  display: block;
  width: 154px;
  height: 58px;
  overflow: hidden;
}

body.rakion-eternal .nav-brand-frame img {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 154px;
  height: 154px;
  max-width: none;
  object-fit: contain;
  object-position: center top;
  filter: drop-shadow(0 2px 4px #000) drop-shadow(0 0 9px rgba(201, 131, 42, .16));
}

body.rakion-eternal .nav-link-animated {
  position: relative;
  font-family: "Albertus Nova", Georgia, serif;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 1.65px !important;
  text-shadow: 0 2px 3px #000;
}

body.rakion-eternal .nav-link-animated::after {
  height: 2px;
  background: linear-gradient(90deg, transparent, #8b9297, #c2883d, #8b9297, transparent);
  box-shadow: 0 0 10px rgba(188, 140, 63, .24);
}

body.rakion-eternal nav.fixed {
  /* This shell is rebuilt on every PHP navigation. Replaying the old
     translateY entrance made the whole page appear to drop and settle after
     every click, even though the layout itself had not changed. */
  animation: none;
}

body.rakion-eternal .btn-primary,
body.rakion-eternal .btn-gold {
  border-radius: 1px;
  border: 1px solid rgba(194, 149, 78, .5);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .65), 0 4px 12px rgba(0, 0, 0, .32);
  font-family: "Albertus Nova", Georgia, serif;
  font-weight: 700;
  letter-spacing: 1.4px;
}

body.rakion-eternal .btn-primary {
  background: linear-gradient(180deg, #1c1f22, #0b0c0e);
}

/* Hero content is intentionally confined to the calm right half of the art. */
body.rakion-eternal .hero-wrap {
  min-height: var(--home-art-height, 300px) !important;
}

body.rakion-eternal .hero-wrap--art {
  min-height: var(--home-art-height, 300px) !important;
}

body.rakion-eternal .hero-art-space {
  flex: 1 1 auto;
  min-height: 240px;
}

body.rakion-eternal .hero-row {
  min-height: 455px;
  margin-bottom: 0 !important;
}

body.rakion-eternal .hero-row > .lg\:w-1\/2 {
  position: relative;
  z-index: 2;
}

body.rakion-eternal .hero-scrim {
  inset: 0 0 0 39%;
  background: radial-gradient(ellipse at center, rgba(6, 6, 7, .46) 0, rgba(6, 6, 7, .24) 44%, transparent 76%);
  filter: blur(10px);
}

body.rakion-eternal .hero-copy {
  padding: 34px 0 18px !important;
}

body.rakion-eternal .hero-brand-frame {
  position: relative;
  display: block;
  width: min(470px, 88vw);
  height: 184px;
  margin: 0 auto -4px;
  overflow: hidden;
  animation: eternal-brand-in .9s cubic-bezier(.2, .8, .25, 1) both;
}

body.rakion-eternal .hero-brand {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, .88)) drop-shadow(0 0 18px rgba(180, 92, 27, .16));
}

body.rakion-eternal .hero-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 8px;
  color: #a9b0b4;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3.2px;
  text-shadow: 0 2px 5px #000;
  animation: hero-rise .75s ease .12s both;
}

body.rakion-eternal .hero-kicker i {
  color: #bd843a;
  font-size: 6px;
}

body.rakion-eternal .hero-title {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0;
  font-size: clamp(31px, 3.4vw, 49px);
  line-height: 1.12;
  letter-spacing: 3px;
  color: #efe1bd;
  background: linear-gradient(180deg, #fff8df 5%, #efd598 40%, #bd873b 72%, #f0d397 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .7px rgba(35, 21, 8, .88);
  text-shadow: none;
  filter:
    drop-shadow(0 2px 1px #000)
    drop-shadow(0 5px 7px rgba(0, 0, 0, .95))
    drop-shadow(0 0 12px rgba(196, 143, 61, .2));
}

body.rakion-eternal .hero-title::after {
  inset: 0;
  width: 100%;
  background: linear-gradient(105deg,
    transparent 40%,
    rgba(255, 249, 225, .92) 49%,
    rgba(218, 165, 76, .78) 54%,
    transparent 63%);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.rakion-eternal .hero-sub {
  max-width: 470px;
  margin: 12px auto 18px;
  color: #aeb9b7;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.2px;
  line-height: 1.7;
}

body.rakion-eternal .hero-play {
  filter: hue-rotate(154deg) saturate(.62) brightness(.92) drop-shadow(0 6px 10px rgba(0, 0, 0, .68));
}

body.rakion-eternal .hero-play .hp-label {
  filter: hue-rotate(-154deg) saturate(1.55) brightness(1.2);
}

/* Every content surface reads as a carved plate, not a modern floating card. */
body.rakion-eternal .content-surface,
body.rakion-eternal .card,
body.rakion-eternal .acct-panel,
body.rakion-eternal .adm-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,.018), transparent 28%),
    linear-gradient(170deg, rgba(20, 22, 24, .98), rgba(7, 8, 9, .99));
  border: 1px solid rgba(175, 137, 70, .3);
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(146, 153, 158, .06),
    inset 0 18px 30px rgba(255,255,255,.012),
    0 16px 35px rgba(0, 0, 0, .45);
}

body.rakion-eternal .content-surface {
  position: relative;
  overflow: hidden;
}

body.rakion-eternal .content-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(115deg, transparent 0 12px, rgba(255,255,255,.008) 13px, transparent 14px),
    radial-gradient(circle at 100% 0, rgba(144, 151, 156, .07), transparent 36%);
}

body.rakion-eternal .dl-btn,
body.rakion-eternal .action-tile {
  border-radius: 1px;
  border-color: rgba(186, 143, 70, .42);
}

body.rakion-eternal .classic-footer {
  background: linear-gradient(180deg, rgba(13, 14, 16, .98), rgba(5, 6, 7, .99));
  border-top-color: rgba(181, 143, 78, .38);
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
}

@keyframes eternal-brand-in {
  from { opacity: 0; transform: scale(.92) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 1023px) {
  body.rakion-eternal .site-fixed-bg { background-position: 50% top; }
  body.rakion-eternal .hero-wrap { min-height: min(var(--home-art-height, 280px), 280px) !important; }
  body.rakion-eternal .hero-wrap--art { min-height: min(var(--home-art-height, 280px), 280px) !important; }
  body.rakion-eternal .hero-art-space { min-height: 220px; }
  body.rakion-eternal .hero-row { min-height: 280px; }
  body.rakion-eternal .hero-scrim {
    inset: 8% 2%;
    background: radial-gradient(ellipse at center, rgba(5, 5, 6, .8), rgba(5, 5, 6, .38) 55%, transparent 80%);
  }
}

@media (max-width: 640px) {
  body.rakion-eternal .nav-brand { width: 142px; }
  body.rakion-eternal .nav-brand-frame,
  body.rakion-eternal .nav-brand-frame img { width: 134px; }
  body.rakion-eternal .nav-brand-frame img { height: 134px; }
  body.rakion-eternal .hero-brand-frame { height: 145px; }
  body.rakion-eternal .hero-title { font-size: 29px; letter-spacing: 1.8px; }
  body.rakion-eternal .hero-kicker { font-size: 8px; letter-spacing: 2px; }
  body.rakion-eternal .hero-sub { font-size: 10px; letter-spacing: 1.4px; }
  body.rakion-eternal .hero-wrap,
  body.rakion-eternal .hero-wrap--art { min-height: 230px !important; }
  body.rakion-eternal .hero-art-space { min-height: 178px; }
}

@media (max-width: 390px) {
  body.rakion-eternal .hero-title {
    font-size: 24px;
    letter-spacing: .8px;
    -webkit-text-stroke-width: .5px;
  }
}

/* QA pass: remove the inherited fantasy-generic image button and fix narrow
   action cells so labels never paint over a neighbour. */
body.rakion-eternal .hero-play {
  width: min(292px, 84vw);
  height: 66px;
  background-image: none !important;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .72));
  isolation: isolate;
  overflow: hidden;
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
}

body.rakion-eternal .hero-play::before,
body.rakion-eternal .hero-play::after {
  content: "";
  position: absolute;
  pointer-events: none;
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
}

body.rakion-eternal .hero-play::before {
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, #5b3919, #d1a45a 26%, #6e481f 52%, #d6ae66 74%, #553416);
}

body.rakion-eternal .hero-play::after {
  inset: 3px;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent, rgba(150, 157, 162, .12), transparent),
    linear-gradient(180deg, #202326, #0a0b0d 54%, #151719);
  box-shadow: inset 0 0 0 1px rgba(234, 211, 153, .18);
}

body.rakion-eternal .hero-play .hp-plate {
  inset: 3px;
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
  -webkit-mask-image: none;
  mask-image: none;
}

body.rakion-eternal .hero-play .hp-label {
  color: #ead7a3;
  font-size: 18px;
  letter-spacing: 2px;
  text-shadow: 0 2px 3px #000, 0 0 12px rgba(202, 147, 64, .22);
  filter: none;
}

body.rakion-eternal .hero-play:hover {
  filter: brightness(1.12) drop-shadow(0 9px 16px rgba(0, 0, 0, .76)) drop-shadow(0 0 12px rgba(196, 143, 61, .15));
}

body.rakion-eternal .hero-wrap + .flex {
  margin-top: 8px;
}

body.rakion-eternal .action-bar {
  overflow: hidden;
  border-color: rgba(181, 143, 78, .34);
  background: rgba(181, 143, 78, .18);
}

body.rakion-eternal .action-cell {
  min-width: 0;
  min-height: 116px;
  padding: 15px 8px;
  gap: 8px;
  background: linear-gradient(180deg, #1b1e21, #0b0d0f) !important;
  box-shadow: inset 0 0 0 1px rgba(147, 154, 159, .05);
  animation: eternal-panel-rise .58s cubic-bezier(.2, .78, .25, 1) backwards;
}

body.rakion-eternal .action-cell:nth-child(1) { animation-delay: .06s; }
body.rakion-eternal .action-cell:nth-child(2) { animation-delay: .11s; }
body.rakion-eternal .action-cell:nth-child(3) { animation-delay: .16s; }
body.rakion-eternal .action-cell:nth-child(4) { animation-delay: .21s; }
body.rakion-eternal .action-cell:nth-child(5) { animation-delay: .26s; }
body.rakion-eternal .action-cell:nth-child(6) { animation-delay: .31s; }

body.rakion-eternal .dl-btn,
body.rakion-eternal .sbox-panel {
  animation: eternal-panel-rise .68s cubic-bezier(.2, .78, .25, 1) .22s backwards;
}

body.rakion-eternal .sbox-panel:nth-of-type(2) { animation-delay: .3s; }
body.rakion-eternal .sbox-panel:nth-of-type(3) { animation-delay: .38s; }

body.rakion-eternal .action-cell:hover .ac-icon {
  transform: translateY(-2px) scale(1.06);
  border-color: rgba(194, 149, 78, .52);
  box-shadow: 0 0 18px rgba(194, 149, 78, .12), inset 0 0 10px rgba(255, 255, 255, .025);
}

body.rakion-eternal .action-cell .ac-icon {
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

body.rakion-eternal .action-cell.is-gold {
  color: #24180b !important;
  background: linear-gradient(180deg, #d0be8b, #9d7a42) !important;
}

body.rakion-eternal .action-cell .ac-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  color: #b89a62;
}

body.rakion-eternal .action-cell.is-gold .ac-icon {
  color: #5a3517;
}

body.rakion-eternal .action-cell .ac-label {
  width: 100%;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: .8px;
}

/* Rakion news covers: cinematic 16:9 art with a restrained iron-card hover.
   The image remains an image; labels and titles stay accessible HTML. */
body.rakion-eternal .eternal-news-card {
  position: relative;
  border: 1px solid rgba(181, 143, 78, .24);
  background: #0d0f11;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .34);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
  animation: eternal-panel-rise .62s cubic-bezier(.2, .78, .25, 1) backwards;
}

body.rakion-eternal .eternal-news-card:nth-child(2) { animation-delay: .08s; }
body.rakion-eternal .eternal-news-card:nth-child(3) { animation-delay: .16s; }

body.rakion-eternal .eternal-news-card:hover {
  transform: translateY(-4px);
  border-color: rgba(210, 163, 83, .58);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .52), 0 0 18px rgba(194, 126, 45, .09);
}

body.rakion-eternal .eternal-news-art {
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
}

body.rakion-eternal .eternal-news-art img {
  transition: transform .55s cubic-bezier(.2, .75, .25, 1), filter .35s ease;
  filter: saturate(.84) contrast(1.06) brightness(.9);
}

body.rakion-eternal .eternal-news-card:hover .eternal-news-art img {
  transform: scale(1.045);
  filter: saturate(.98) contrast(1.08) brightness(1);
}

/* Official 64px Rakion portraits already contain their own lighting; preserve
   the square crop and add only a thin Eternal metal rim. */
body.rakion-eternal .rk-avatar,
body.rakion-eternal .pr-face img,
body.rakion-eternal .char-avatar {
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
  background: #0c0d0f;
  border-color: rgba(181, 143, 78, .5);
}

/* Living backdrop: a slow camera-breath plus independent ash and ember motes.
   Particles only animate transform/opacity; they never participate in layout. */
body.rakion-eternal {
  overflow-x: hidden;
}

html.layout-classic {
  overflow-x: clip;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body.rakion-eternal .site-fixed-bg {
  transform: scale(1.018);
  transform-origin: 48% 42%;
  animation: eternal-backdrop-breathe 18s ease-in-out infinite alternate;
  will-change: transform, filter;
  backface-visibility: hidden;
}

body.rakion-eternal .eternal-embers {
  position: fixed;
  inset: 64px 0 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 88%, transparent);
}

body.rakion-eternal .eternal-embers::before,
body.rakion-eternal .eternal-embers::after {
  content: "";
  position: absolute;
  inset: -12% -10%;
  pointer-events: none;
  opacity: .22;
  background:
    radial-gradient(ellipse at 18% 76%, rgba(176, 180, 180, .22), transparent 18%),
    radial-gradient(ellipse at 72% 58%, rgba(132, 136, 138, .13), transparent 20%),
    radial-gradient(ellipse at 43% 92%, rgba(189, 174, 151, .1), transparent 16%);
  filter: blur(28px);
  animation: eternal-ash-haze 22s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

body.rakion-eternal .eternal-embers::after {
  opacity: .14;
  transform: scaleX(-1);
  animation-duration: 29s;
  animation-direction: alternate-reverse;
}

body.rakion-eternal .eternal-embers i {
  position: absolute;
  left: calc(var(--x) * 1%);
  bottom: -18px;
  display: block;
  width: var(--size);
  height: calc(var(--size) * .72);
  border-radius: 55% 25% 60% 35%;
  opacity: 0;
  animation: eternal-mote-rise var(--dur) linear var(--delay) infinite;
  will-change: transform, opacity;
}

body.rakion-eternal .eternal-embers .is-ash {
  --peak: .72;
  background: #c1c2c0;
  box-shadow: 0 0 4px rgba(207, 208, 205, .4);
  filter: blur(.2px);
}

body.rakion-eternal .eternal-embers .is-ash-near {
  --peak: .86;
  width: calc(var(--size) * 1.55);
  height: calc(var(--size) * 1.05);
  background: #d0d1ce;
  box-shadow: 0 0 5px rgba(205, 207, 204, .32);
  filter: blur(.65px);
}

body.rakion-eternal .eternal-embers .is-ember {
  --peak: .9;
  background: #e58b2d;
  box-shadow: 0 0 5px #dc6d1f, 0 0 11px rgba(220, 91, 22, .42);
}

/* Normal page content remains above the particles; the motes live only in the
   artwork plane and cannot wash out buttons or text. */
body.rakion-eternal > section > nav,
body.rakion-eternal > section > .w-full,
body.rakion-eternal > section > footer {
  position: relative;
  z-index: 2;
}

body.rakion-eternal > section > nav {
  position: fixed;
  z-index: 50;
}

@keyframes eternal-backdrop-breathe {
  0%   { transform: scale(1.018) translate3d(-.15%, 0, 0); filter: saturate(.92) contrast(1.02) brightness(.90); }
  48%  { transform: scale(1.03) translate3d(.18%, -.2%, 0); filter: saturate(1.02) contrast(1.03) brightness(.94); }
  100% { transform: scale(1.022) translate3d(.35%, 0, 0); filter: saturate(.96) contrast(1.02) brightness(.92); }
}

@keyframes eternal-nav-in {
  from { opacity: 0; transform: translate3d(0, -12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes eternal-panel-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes eternal-mote-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 4vh, 0) rotate(0deg) scale(.65);
  }
  9% { opacity: .1; }
  22% { opacity: var(--peak, .62); }
  68% { opacity: .4; }
  88% { opacity: .16; }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift), -108vh, 0) rotate(430deg) scale(1.15);
  }
}

@keyframes eternal-ash-haze {
  0% { opacity: .08; transform: translate3d(-3%, 4%, 0) scale(1); }
  45% { opacity: .18; transform: translate3d(2%, -1%, 0) scale(1.04); }
  100% { opacity: .1; transform: translate3d(5%, -5%, 0) scale(1.08); }
}

/* ========================================================================
   RAKION EVOLUTION — player ranking
   A compact black-iron HUD: no Metin brown cards, pill-heavy UI or rainbow
   level ladder. Rank metals and gameplay state remain the only accents.
   ======================================================================== */
body.rakion-eternal .rk-ranking-page {
  position: relative;
  color: #c6c8ca;
}

body.rakion-eternal .rk-ranking-header {
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 104px;
  padding: 16px 20px;
  overflow: hidden;
  background:
    linear-gradient(105deg, rgba(255,255,255,.025), transparent 34%),
    linear-gradient(180deg, rgba(25, 28, 31, .98), rgba(9, 10, 12, .99));
  border: 1px solid rgba(181, 143, 78, .42);
  border-radius: 1px;
  box-shadow:
    inset 0 0 0 1px rgba(150, 156, 160, .055),
    inset 0 -18px 28px rgba(0,0,0,.24),
    0 12px 28px rgba(0,0,0,.38);
  animation: eternal-panel-rise .58s cubic-bezier(.2,.78,.25,1) backwards;
}

body.rakion-eternal .rk-ranking-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background:
    repeating-linear-gradient(112deg, transparent 0 14px, rgba(255,255,255,.018) 15px, transparent 16px),
    radial-gradient(circle at 82% 0, rgba(196, 128, 46, .15), transparent 34%);
}

body.rakion-eternal .rk-ranking-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #80602e 18%, #d09a48 50%, #80602e 82%, transparent);
  opacity: .78;
}

body.rakion-eternal .rk-ranking-emblem {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 54px;
  height: 62px;
  color: #dcad5b;
  font-size: 21px;
  background:
    linear-gradient(145deg, rgba(187, 139, 63, .3), rgba(15, 17, 19, .96) 44%),
    #101214;
  border: 1px solid rgba(198, 151, 75, .52);
  clip-path: polygon(50% 0, 92% 16%, 92% 72%, 50% 100%, 8% 72%, 8% 16%);
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.65));
}

body.rakion-eternal .rk-ranking-emblem::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(150, 156, 160, .16);
  clip-path: inherit;
}

body.rakion-eternal .rk-ranking-heading {
  position: relative;
  z-index: 1;
  min-width: 0;
}

body.rakion-eternal .rk-ranking-heading > span {
  display: block;
  margin-bottom: 2px;
  color: #bd8740;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 3.2px;
}

body.rakion-eternal .rk-ranking-heading h2 {
  margin: 0;
  color: #eee3c7;
  font-family: "Albertus Nova", Georgia, serif;
  font-size: clamp(20px, 2.4vw, 29px);
  line-height: 1.12;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px #000;
}

body.rakion-eternal .rk-ranking-heading p {
  margin: 5px 0 0;
  color: #888f94;
  font-size: 11px;
  letter-spacing: .55px;
}

body.rakion-eternal .rk-ranking-total {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 92px;
  padding-left: 20px;
  border-left: 1px solid rgba(181, 143, 78, .25);
}

body.rakion-eternal .rk-ranking-total strong {
  color: #e2bd72;
  font-family: "Albertus Nova", Georgia, serif;
  font-size: 27px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

body.rakion-eternal .rk-ranking-total span {
  margin-top: 4px;
  color: #737a7f;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

body.rakion-eternal .rk-ranking-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 12px 0 14px;
  overflow: hidden;
  background: #090b0d;
  border: 1px solid rgba(137, 145, 150, .2);
  border-bottom-color: rgba(181, 143, 78, .34);
}

body.rakion-eternal .rk-ranking-tabs .nav-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 11px 8px 10px;
  color: #737a7f;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 1.1px;
  border: 0;
  border-right: 1px solid rgba(137, 145, 150, .13);
  transition: color .2s ease, background .2s ease;
}

body.rakion-eternal .rk-ranking-tabs .nav-tab:last-child { border-right: 0; }
body.rakion-eternal .rk-ranking-tabs .nav-tab i { font-size: 12px; color: #626a70; transition: color .2s ease; }
body.rakion-eternal .rk-ranking-tabs .nav-tab:hover {
  color: #d2c5a5;
  background: rgba(255,255,255,.025);
}
body.rakion-eternal .rk-ranking-tabs .nav-tab:hover i { color: #a77a3c; }
body.rakion-eternal .rk-ranking-tabs .nav-tab.active {
  color: #f0d698;
  background: linear-gradient(180deg, rgba(181,143,78,.17), rgba(181,143,78,.045));
}
body.rakion-eternal .rk-ranking-tabs .nav-tab.active i { color: #d39b49; }
body.rakion-eternal .rk-ranking-tabs .nav-tab.active::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d39b49, transparent);
  box-shadow: 0 0 8px rgba(211,155,73,.4);
}

body.rakion-eternal .rk-ranking-page .pr-search {
  margin-bottom: 22px;
  padding: 9px;
  background: rgba(8, 10, 11, .82);
  border: 1px solid rgba(137, 145, 150, .18);
  box-shadow: inset 0 0 12px rgba(0,0,0,.34);
}

body.rakion-eternal .rk-ranking-page .pr-search-field .input-field {
  height: 38px;
  padding-left: 38px;
  color: #d5d7d8;
  background: #0d0f11;
  border: 1px solid rgba(137, 145, 150, .2);
  border-radius: 1px;
}

body.rakion-eternal .rk-ranking-page .pr-search-field .input-field:focus {
  border-color: rgba(194, 149, 78, .58);
  box-shadow: 0 0 0 2px rgba(194, 149, 78, .07);
}

body.rakion-eternal .rk-ranking-page .pr-search .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 19px;
}

body.rakion-eternal .rk-ranking-page .pr-clear {
  width: 38px;
  height: 38px;
  color: #7a8185;
  background: #111315;
  border-radius: 1px;
}

/* Podium plates match Rakion's rectangular character-selection HUD. */
body.rakion-eternal .rk-ranking-page .pr-podium {
  align-items: end;
  gap: 10px;
  margin: 30px 0 24px;
}

body.rakion-eternal .rk-ranking-page .pr-pod {
  min-height: 174px;
  gap: 4px;
  padding: 25px 10px 13px;
  overflow: visible;
  border-radius: 1px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.024), transparent 38%),
    linear-gradient(180deg, #171a1d, #0b0d0f);
  border: 1px solid rgba(137, 145, 150, .24);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 10px 24px rgba(0,0,0,.4);
  animation: eternal-panel-rise .5s cubic-bezier(.2,.78,.25,1) var(--d,0ms) backwards;
}

body.rakion-eternal .rk-ranking-page .pr-pod::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150,156,160,.34), transparent);
}

body.rakion-eternal .rk-ranking-page .pr-pod.is-1 {
  min-height: 194px;
  padding-top: 29px;
  padding-bottom: 16px;
  border-color: rgba(205, 158, 78, .5);
  background:
    radial-gradient(circle at 50% 24%, rgba(189, 132, 47, .14), transparent 36%),
    linear-gradient(180deg, #1b1c1d, #0c0d0f);
}
body.rakion-eternal .rk-ranking-page .pr-pod.is-2 { border-top-color: rgba(164,172,177,.6); }
body.rakion-eternal .rk-ranking-page .pr-pod.is-3 { border-top-color: rgba(159,101,60,.7); }

body.rakion-eternal .rk-ranking-page .pr-pod:hover,
body.rakion-eternal .rk-ranking-page .pr-pod:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(205, 158, 78, .58);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 15px 32px rgba(0,0,0,.56);
}

body.rakion-eternal .rk-ranking-page .pr-medal {
  top: -15px;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  color: #101214;
  background: linear-gradient(145deg, #c8ced1, #737b80 58%, #aeb5b9);
  border: 2px solid #111315;
  border-radius: 0;
  clip-path: polygon(50% 0, 92% 22%, 92% 78%, 50% 100%, 8% 78%, 8% 22%);
}

body.rakion-eternal .rk-ranking-page .pr-pod.is-1 .pr-medal {
  top: -17px;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  color: #201508;
  background: linear-gradient(145deg, #f0d38b, #a76e28 60%, #d8ad5a);
  box-shadow: 0 0 15px rgba(207,151,66,.3), inset 0 1px rgba(255,255,255,.35);
}

body.rakion-eternal .rk-ranking-page .pr-pod.is-3 .pr-medal {
  background: linear-gradient(145deg, #c7946c, #724326 60%, #a96f49);
}

body.rakion-eternal .rk-ranking-page .pr-pod-face {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 0 0 3px;
  background: radial-gradient(circle, #191c1e 48%, #08090a 72%);
  border: 1px solid rgba(145, 153, 158, .3);
  clip-path: polygon(16% 0, 84% 0, 100% 16%, 100% 84%, 84% 100%, 16% 100%, 0 84%, 0 16%);
}

body.rakion-eternal .rk-ranking-page .pr-pod.is-1 .pr-pod-face {
  width: 90px;
  height: 90px;
  border-color: rgba(205, 158, 78, .48);
}

body.rakion-eternal .rk-ranking-page .pr-pod-face img,
body.rakion-eternal .rk-ranking-page .pr-pod.is-1 .pr-pod-face img {
  width: 68px;
  height: 68px;
  object-fit: contain;
}

body.rakion-eternal .rk-ranking-page .pr-pod.is-1 .pr-pod-face img { width: 78px; height: 78px; }
body.rakion-eternal .rk-ranking-page .pr-pod:hover .pr-pod-face img { transform: scale(1.045); }

body.rakion-eternal .rk-ranking-page .pr-pod-name,
body.rakion-eternal .rk-ranking-page .pr-pod.is-1 .pr-pod-name {
  color: #e7dfcc;
  font-size: 14px;
  letter-spacing: .45px;
}

body.rakion-eternal .rk-ranking-page .pr-pod.is-1 .pr-pod-name {
  color: #f0cf88;
  font-size: 16px;
}

body.rakion-eternal .rk-ranking-page .pr-pod-class {
  color: #70777c;
  font-size: 9px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

body.rakion-eternal .rk-ranking-page .pr-pod-lv {
  padding: 2px 9px;
  color: #b7bdc0;
  background: rgba(0,0,0,.26);
  border-color: rgba(139,147,152,.24);
  border-radius: 1px;
}

body.rakion-eternal .rk-ranking-page .pr-pod.is-1 .pr-pod-lv {
  color: #e2bd72;
  border-color: rgba(205,158,78,.38);
}

body.rakion-eternal .rk-ranking-page .ti-hint {
  margin-bottom: 8px;
  color: #686f74;
  font-size: 10px;
  letter-spacing: .35px;
}

body.rakion-eternal .rk-list-caption {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px 7px;
  color: #555d62;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}
body.rakion-eternal .rk-cap-pos { width: 30px; text-align: center; flex-shrink: 0; }
body.rakion-eternal .rk-cap-player { flex: 1; min-width: 0; padding-left: 46px; }
body.rakion-eternal .rk-cap-level { width: 72px; text-align: center; flex-shrink: 0; }
body.rakion-eternal .rk-cap-ratio { width: 70px; text-align: center; flex-shrink: 0; }
body.rakion-eternal .rk-cap-more { width: 12px; flex-shrink: 0; }

body.rakion-eternal .rk-ranking-page .ti-list { gap: 5px; }
body.rakion-eternal .rk-ranking-page .ti-row.pr-row {
  min-height: 58px;
  gap: 14px;
  padding: 7px 14px;
  overflow: hidden;
  border: 1px solid rgba(137,145,150,.16);
  border-left: 2px solid var(--tier);
  border-radius: 1px;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--tier) 5%, transparent), transparent 22%),
    linear-gradient(180deg, rgba(22,25,28,.98), rgba(11,13,15,.98));
  box-shadow: inset 0 1px rgba(255,255,255,.018);
  animation: eternal-panel-rise .4s cubic-bezier(.2,.78,.25,1) var(--d,0ms) backwards;
}

body.rakion-eternal .rk-ranking-page .ti-row.pr-row:hover,
body.rakion-eternal .rk-ranking-page .ti-row.pr-row:focus-visible {
  transform: translateX(2px);
  border-color: rgba(194,149,78,.38);
  border-left-color: var(--tier);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--tier) 9%, transparent), transparent 26%),
    linear-gradient(180deg, #1a1d20, #0d0f11);
  box-shadow: 0 8px 18px rgba(0,0,0,.4);
}

body.rakion-eternal .rk-ranking-page .ti-pos {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #a5abad;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  background: #090b0c;
  border: 1px solid rgba(137,145,150,.2);
  clip-path: polygon(50% 0, 92% 23%, 92% 77%, 50% 100%, 8% 77%, 8% 23%);
}

body.rakion-eternal .rk-ranking-page .pr-face {
  width: 40px;
  height: 40px;
  padding: 2px;
  background: #0a0c0d;
  border: 1px solid rgba(137,145,150,.25);
  clip-path: polygon(13% 0, 87% 0, 100% 13%, 100% 87%, 87% 100%, 13% 100%, 0 87%, 0 13%);
}

body.rakion-eternal .rk-ranking-page .ti-row:hover .pr-face {
  transform: scale(1.055);
  border-color: rgba(194,149,78,.42);
}

body.rakion-eternal .rk-ranking-page .pr-id strong {
  color: #d8dadd;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .2px;
}
body.rakion-eternal .rk-ranking-page .ti-row:hover .pr-id strong { color: #f0d394; }
body.rakion-eternal .rk-ranking-page .pr-id small {
  color: #676e73;
  font-size: 9px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

body.rakion-eternal .rk-ranking-page .pr-lv {
  justify-content: center;
  width: 72px;
  padding: 4px 7px;
  color: #b5babe;
  background: #0b0d0f;
  border-color: color-mix(in srgb, var(--tier) 42%, rgba(137,145,150,.18));
  border-radius: 1px;
  font-size: 10px;
}

body.rakion-eternal .rk-ranking-page .pr-ratio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 70px;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
body.rakion-eternal .rk-ranking-page .pr-ratio i { color: #727a7f; font-size: 9px; }

body.rakion-eternal .rk-ranking-page .ti-more {
  width: 12px;
  color: #646c71;
  font-size: 9px;
}

/* Detail sheet: engraved graphite instead of the inherited brown tooltip. */
body.rakion-eternal .rk-ranking-page + .ti-modal .ti-modal-back {
  background: rgba(3,4,5,.84);
  backdrop-filter: blur(5px);
}
body.rakion-eternal .rk-ranking-page + .ti-modal .ti-modal-box { max-width: 420px; }
body.rakion-eternal .rk-ranking-page + .ti-modal .ti-detail.is-modal {
  border-radius: 2px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.025), transparent 34%),
    linear-gradient(180deg, #171a1d, #090b0d);
  border: 1px solid rgba(194,149,78,.42);
  box-shadow: inset 0 0 0 1px rgba(139,147,152,.055), 0 28px 70px rgba(0,0,0,.78);
}
body.rakion-eternal .rk-ranking-page + .ti-modal .td-head {
  padding: 15px 17px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 9%, transparent), rgba(255,255,255,.015));
  border-bottom-color: rgba(194,149,78,.25);
}
body.rakion-eternal .rk-ranking-page + .ti-modal .td-head h3 { color: #f0d394; font-size: 17px; }
body.rakion-eternal .rk-ranking-page + .ti-modal .td-pip {
  color: #e5d6b4;
  background: #171a1d;
  border: 1px solid rgba(194,149,78,.34);
  border-radius: 1px;
}
body.rakion-eternal .rk-ranking-page + .ti-modal .td-pct { border-radius: 1px; color: #aeb4b8; }
body.rakion-eternal .rk-ranking-page + .ti-modal .td-body section { border-bottom-color: rgba(139,147,152,.12); }
body.rakion-eternal .rk-ranking-page + .ti-modal .td-foot {
  color: #8a9195;
  background: #080a0b;
  border-top-color: rgba(194,149,78,.2);
}
body.rakion-eternal .rk-ranking-page + .ti-modal .ti-modal-x {
  top: -11px;
  right: -11px;
  width: 30px;
  height: 30px;
  color: #aeb4b8;
  background: #111315;
  border-color: rgba(194,149,78,.5);
  border-radius: 1px;
}

@media (max-width: 700px) {
  body.rakion-eternal .rk-ranking-header {
    grid-template-columns: 48px minmax(0,1fr);
    min-height: 92px;
    padding: 13px 14px;
  }
  body.rakion-eternal .rk-ranking-emblem { width: 44px; height: 52px; font-size: 17px; }
  body.rakion-eternal .rk-ranking-total { display: none; }
  body.rakion-eternal .rk-ranking-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body.rakion-eternal .rk-ranking-tabs .nav-tab:nth-child(2) { border-right: 0; }
  body.rakion-eternal .rk-ranking-tabs .nav-tab:nth-child(-n+2) { border-bottom: 1px solid rgba(137,145,150,.13); }
  body.rakion-eternal .rk-ranking-page .pr-pod { min-height: 156px; padding-inline: 5px; }
  body.rakion-eternal .rk-ranking-page .pr-pod.is-1 { min-height: 170px; }
  body.rakion-eternal .rk-ranking-page .pr-pod-face,
  body.rakion-eternal .rk-ranking-page .pr-pod.is-1 .pr-pod-face { width: 62px; height: 62px; }
  body.rakion-eternal .rk-ranking-page .pr-pod-face img,
  body.rakion-eternal .rk-ranking-page .pr-pod.is-1 .pr-pod-face img { width: 56px; height: 56px; }
}

@media (max-width: 560px) {
  body.rakion-eternal .rk-ranking-page { padding-inline: 10px !important; }
  body.rakion-eternal .rk-ranking-page .pr-search { flex-wrap: wrap; }
  body.rakion-eternal .rk-ranking-page .pr-search-field { flex-basis: 100%; }
  body.rakion-eternal .rk-ranking-page .pr-search .btn-primary { flex: 1; }
  body.rakion-eternal .rk-list-caption { display: none; }
  body.rakion-eternal .rk-ranking-page .ti-row.pr-row { gap: 9px; padding-inline: 9px; }
  body.rakion-eternal .rk-ranking-page .pr-face { width: 36px; height: 36px; }
  body.rakion-eternal .rk-ranking-page .pr-ratio { display: none; }
  body.rakion-eternal .rk-ranking-page .pr-lv { width: auto; min-width: 54px; }
  body.rakion-eternal .rk-ranking-page .pr-podium { gap: 5px; }
  body.rakion-eternal .rk-ranking-page .pr-pod-name,
  body.rakion-eternal .rk-ranking-page .pr-pod.is-1 .pr-pod-name { font-size: 11px; }
}

/* Graphite correction: inherited Metin-style brown is not a surface colour. */
body.rakion-eternal .auth-card,
body.rakion-eternal .shop,
body.rakion-eternal .shop-head,
body.rakion-eternal .ss-panel,
body.rakion-eternal .si-card,
body.rakion-eternal .acct-hero,
body.rakion-eternal .acct-panel,
body.rakion-eternal .am-box {
  background-color: #101316 !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,.022), transparent 48%) !important;
  border-color: rgba(120,130,136,.26) !important;
}
body.rakion-eternal .si-card:hover,
body.rakion-eternal .act-card:hover,
body.rakion-eternal .qlink:hover {
  background-color: #171b1e !important;
  border-color: rgba(185,129,55,.55) !important;
}

/* ========================================================================
   RAKION EVOLUTION · CLASS ADVANCEMENT
   ======================================================================== */
.evo-page {
    --evo-ember: #d87529;
    --evo-gold: #c8a55c;
    --evo-cyan: #68aeb2;
    color: #c7c9c8;
    padding: 26px;
    background:
        radial-gradient(circle at 80% -15%, rgba(198, 126, 42, .10), transparent 34%),
        linear-gradient(180deg, rgba(17, 19, 20, .98), rgba(8, 9, 10, .99));
}
.evo-hero {
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-height: 130px;
    padding: 22px 26px;
    overflow: hidden;
    border: 1px solid rgba(193, 158, 83, .34);
    border-left: 3px solid var(--evo-ember);
    background:
        linear-gradient(90deg, rgba(216, 117, 41, .09), transparent 32%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 1px, transparent 1px 8px),
        #101315;
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 14px 35px rgba(0,0,0,.34);
}
.evo-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(216,117,41,.08) 50%, transparent 62%);
    transform: translateX(-120%);
    animation: evoHeroSweep 5.5s ease-in-out infinite;
}
@keyframes evoHeroSweep { 0%, 62% { transform:translateX(-120%) } 88%, 100% { transform:translateX(120%) } }
.evo-hero-mark {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 68px;
    height: 76px;
    color: #f2b465;
    font-size: 31px;
    border: 1px solid rgba(211, 167, 86, .65);
    clip-path: polygon(50% 0, 93% 17%, 86% 76%, 50% 100%, 14% 76%, 7% 17%);
    background: radial-gradient(circle, rgba(198, 75, 23, .42), rgba(19, 21, 22, .92) 64%);
    filter: drop-shadow(0 0 12px rgba(213, 95, 26, .25));
}
.evo-hero-mark i { animation: evoFlame 1.9s ease-in-out infinite; }
@keyframes evoFlame { 0%,100% { transform:scale(.96);filter:brightness(.9) } 50% { transform:scale(1.08);filter:brightness(1.35) drop-shadow(0 0 8px rgba(230,104,35,.65)) } }
.evo-hero-copy { position: relative; z-index: 1; min-width: 0; }
.evo-kicker, .evo-section-title span, .evo-history header span {
    color: var(--evo-ember);
    font: 700 10px/1.2 Arial, sans-serif;
    letter-spacing: 2.3px;
}
.evo-hero h1 {
    margin: 4px 0 6px;
    color: #e9e5da;
    font: 700 35px/1 Georgia, serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 2px 1px #000;
}
.evo-hero h1 em { color: var(--evo-gold); font-style: normal; }
.evo-hero-copy p { margin: 0; color: #8f9697; font-size: 13px; letter-spacing: .3px; }
.evo-summary {
    position: relative;
    z-index: 1;
    display: flex;
    border: 1px solid rgba(153, 159, 156, .17);
    background: rgba(3, 5, 6, .46);
}
.evo-summary span { min-width: 84px; padding: 12px 13px; color: #777f81; font-size: 9px; text-align: center; text-transform: uppercase; letter-spacing: .9px; border-left: 1px solid rgba(153,159,156,.13); }
.evo-summary span:first-child { border-left: 0; }
.evo-summary b { display:block; margin-bottom: 3px; color:#d5d5cf; font:700 22px/1 Georgia,serif; }
.evo-summary .is-ready b { color:#e49a4d; text-shadow:0 0 10px rgba(216,117,41,.28); }
.evo-alert {
    display:flex;
    gap:14px;
    align-items:center;
    margin-top:14px;
    padding:14px 17px;
    border:1px solid rgba(189,72,55,.42);
    border-left:3px solid #bc4939;
    background:linear-gradient(90deg,rgba(111,35,26,.24),rgba(16,18,19,.9));
}
.evo-alert > i { color:#d6614e;font-size:23px; }
.evo-alert strong { color:#e2b1a9;font-size:12px;text-transform:uppercase;letter-spacing:1.2px; }
.evo-alert p { margin:3px 0 0;color:#a9908d;font-size:12px; }
.evo-rules {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    margin:14px 0 30px;
    border:1px solid rgba(162,139,87,.22);
    background:rgba(171,146,89,.2);
}
.evo-rules article { display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;column-gap:10px;padding:15px 18px;background:#0e1112; }
.evo-rules i { grid-row:1/3;align-self:center;color:#85765b;font-size:19px;text-align:center; }
.evo-rules span { color:#747b7b;font:700 9px/1.2 Arial,sans-serif;letter-spacing:1.2px;text-transform:uppercase; }
.evo-rules strong { margin-top:4px;color:#ded8c7;font:700 18px/1 Georgia,serif; }
.evo-rules-reset i { color:var(--evo-ember)!important; }
.evo-rules-reset strong { color:#d69352; }
.evo-section-title { display:flex;justify-content:space-between;align-items:end;gap:20px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid rgba(174,145,81,.22); }
.evo-section-title h2, .evo-history h2 { margin:3px 0 0;color:#dedbd2;font:700 23px/1.15 Georgia,serif;letter-spacing:.5px;text-transform:uppercase; }
.evo-section-title p { max-width:520px;margin:0;color:#747b7c;font-size:12px;text-align:right; }
.evo-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.evo-card {
    position:relative;
    overflow:hidden;
    border:1px solid rgba(136,144,142,.20);
    background:linear-gradient(145deg,#121617,#0a0c0d 70%);
    box-shadow:0 13px 25px rgba(0,0,0,.23),inset 0 1px rgba(255,255,255,.025);
    opacity:0;
    transform:translateY(12px);
    animation:evoCardIn .5s cubic-bezier(.2,.8,.25,1) forwards;
    animation-delay:var(--evo-delay);
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
@keyframes evoCardIn { to { opacity:1;transform:translateY(0) } }
.evo-card:hover { transform:translateY(-3px);border-color:rgba(197,160,83,.42);box-shadow:0 18px 34px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.04); }
.evo-card::before { content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:#555e5d; }
.evo-card.is-ready::before { background:var(--evo-ember);box-shadow:0 0 13px rgba(216,117,41,.7); }
.evo-card.is-advanced::before { background:var(--evo-gold); }
.evo-card-head { display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:13px;padding:16px 16px 13px; }
.evo-portrait { position:relative;width:58px;height:58px;padding:3px;border:1px solid #555c59;background:#060708;clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%); }
.evo-portrait::before { content:'';position:absolute;inset:1px;border:1px solid rgba(190,151,77,.25);pointer-events:none; }
.evo-portrait img { width:100%;height:100%;object-fit:cover;filter:saturate(.76) contrast(1.12); }
.evo-portrait span { position:absolute;right:1px;bottom:1px;display:grid;place-items:center;min-width:20px;height:18px;padding:0 4px;color:#f1d58e;font:700 10px Arial,sans-serif;background:#17130b;border:1px solid #7e642f; }
.evo-card.is-ready .evo-portrait { border-color:#bd712f;box-shadow:0 0 13px rgba(202,91,24,.2); }
.evo-identity span { color:#707879;font:700 9px Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase; }
.evo-identity h3 { margin:2px 0 4px;color:#e1dfd8;font:700 19px/1.1 Georgia,serif; }
.evo-identity p { display:flex;align-items:center;gap:6px;margin:0;color:#c09451;font-size:11px;letter-spacing:.5px; }
.evo-identity p i { color:#76582d;font-size:8px; }
.evo-status { display:flex;flex-direction:column;align-items:center;gap:5px;min-width:84px;padding:9px;color:#737b7b;font-size:16px;border:1px solid rgba(137,143,141,.15);background:rgba(0,0,0,.25); }
.evo-status strong { font:700 8px Arial,sans-serif;letter-spacing:1.05px;white-space:nowrap; }
.is-ready .evo-status { color:#e78e3c;border-color:rgba(216,117,41,.37);background:rgba(100,43,13,.18); }
.is-ready .evo-status i { animation:evoPulse 1.75s ease-in-out infinite; }
@keyframes evoPulse { 0%,100% { filter:drop-shadow(0 0 0 transparent) } 50% { filter:drop-shadow(0 0 7px rgba(230,104,32,.8)) } }
.is-advanced .evo-status { color:#d8b767;border-color:rgba(195,158,79,.34); }
.evo-reward { display:grid;grid-template-columns:39px minmax(0,1fr) auto;align-items:center;gap:10px;margin:0 16px 13px;padding:9px 11px;border:1px solid rgba(173,146,83,.18);background:rgba(0,0,0,.22); }
.evo-reward-icon { display:grid;place-items:center;width:35px;height:35px;color:#b8a16c;border:1px solid #4e493b;background:radial-gradient(circle,#272316,#0b0c0c); }
.evo-reward small { display:block;color:#6f7675;font:700 8px Arial,sans-serif;letter-spacing:1px; }
.evo-reward strong { display:block;margin-top:2px;color:#cfc9b8;font:700 12px Georgia,serif;letter-spacing:.4px; }
.evo-reward code,.evo-history code { color:#9e8a5d;font:700 10px Consolas,monospace; }
.evo-progress-list { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0 16px;background:rgba(136,144,142,.13);border:1px solid rgba(136,144,142,.13); }
.evo-requirement { padding:10px;background:#0c0f10; }
.evo-requirement > div { display:flex;justify-content:space-between;gap:5px;color:#737b7c;font:700 9px Arial,sans-serif; }
.evo-requirement > div span { display:flex;align-items:center;gap:4px; }
.evo-requirement > div b { color:#a7abaa;white-space:nowrap; }
.evo-meter { display:block;height:3px;margin:8px 0 6px;overflow:hidden;background:#222727; }
.evo-meter i { display:block;width:var(--progress);height:100%;background:#5f6968;box-shadow:0 0 5px rgba(108,176,178,.25);transform-origin:left;animation:evoMeterGrow .75s ease-out both; }
@keyframes evoMeterGrow { from { transform:scaleX(0) } to { transform:scaleX(1) } }
.evo-requirement small { color:#596161;font:700 7px Arial,sans-serif;letter-spacing:.65px; }
.evo-requirement.is-complete > div b,.evo-requirement.is-complete small { color:#83a995; }
.evo-requirement.is-complete .evo-meter i { background:#6e987e; }
.evo-advanced-stats .evo-requirement { display:flex;min-height:58px;flex-direction:column;justify-content:center;gap:9px; }
.evo-advanced-stats .evo-requirement > div b { color:#d4b565; }
.evo-advanced-stats .evo-requirement small { color:#7e897f; }
.evo-form { padding:14px 16px 16px; }
.evo-form label { display:flex;align-items:center;gap:9px;margin-bottom:10px;color:#858c8c;font-size:10px;cursor:pointer; }
.evo-form input[type=checkbox] { width:15px;height:15px;margin:0;accent-color:#c86c24; }
.evo-form button { position:relative;width:100%;height:40px;overflow:hidden;color:#f4d69e;font:700 10px Arial,sans-serif;letter-spacing:1.5px;border:1px solid #bc6b28;background:linear-gradient(180deg,#5d2b10,#321508);box-shadow:inset 0 1px rgba(255,191,107,.16),0 0 15px rgba(197,82,19,.10);cursor:pointer;transition:filter .2s ease,transform .2s ease; }
.evo-form button:hover:not(:disabled) { filter:brightness(1.24);transform:translateY(-1px); }
.evo-form button:disabled { color:#737676;border-color:#404545;background:#1b1f20;box-shadow:none;cursor:not-allowed; }
.evo-button-shine { position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,219,160,.20),transparent);transform:skewX(-20deg) translateX(-280%);animation:evoButtonShine 2.7s ease-in-out infinite; }
@keyframes evoButtonShine { 0%,48% { transform:skewX(-20deg) translateX(-280%) } 75%,100% { transform:skewX(-20deg) translateX(400%) } }
.evo-card-locked,.evo-card-result { margin:14px 16px 16px;padding:12px;color:#626a6a;font:700 9px Arial,sans-serif;text-align:center;letter-spacing:.9px;text-transform:uppercase;border:1px dashed #333a3a;background:rgba(0,0,0,.18); }
.evo-card-locked i,.evo-card-result i { margin-right:7px; }
.evo-card-result { color:#c7aa65;border-style:solid;border-color:rgba(191,155,76,.25); }
.evo-details { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px; }
.evo-details article { display:flex;gap:13px;min-height:94px;padding:16px;border-top:1px solid rgba(194,157,79,.36);background:#0e1112; }
.evo-detail-icon { display:grid;place-items:center;flex:0 0 38px;height:38px;color:#72a7a6;border:1px solid rgba(100,160,160,.34);background:rgba(49,103,105,.10); }
.evo-detail-icon.is-ember { color:#d97d32;border-color:rgba(211,116,42,.35);background:rgba(120,49,14,.12); }
.evo-details h3 { margin:0 0 6px;color:#d0cdc5;font:700 12px Arial,sans-serif;letter-spacing:.8px;text-transform:uppercase; }
.evo-details p { margin:0;color:#707878;font-size:11px;line-height:1.55; }
.evo-history { margin-top:26px;border:1px solid rgba(160,139,88,.20);background:#0d1011; }
.evo-history > header { display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border-bottom:1px solid rgba(160,139,88,.18); }
.evo-history > header > i { color:#665b43;font-size:22px; }
.evo-history h2 { font-size:17px; }
.evo-history > div { padding:0 16px; }
.evo-history article { display:grid;grid-template-columns:34px 1fr auto 120px;align-items:center;gap:10px;padding:12px 2px;border-bottom:1px solid rgba(142,148,145,.10); }
.evo-history article:last-child { border-bottom:0; }
.evo-history-mark { display:grid;place-items:center;width:29px;height:29px;color:#c7a85d;border:1px solid #51482e;background:#17150d; }
.evo-history article strong { display:block;color:#cecac0;font-size:12px; }
.evo-history article small { display:block;color:#777e7d;font-size:9px; }
.evo-history time { color:#626a6a;font-size:10px;text-align:right; }
.evo-empty { padding:60px 20px;color:#777f7f;text-align:center;border:1px dashed #394040;background:#0d1011; }
.evo-empty i { color:#75694e;font-size:35px; }.evo-empty h2 { margin:12px 0 5px;color:#c6c3bb;font:700 20px Georgia,serif; }.evo-empty p { margin:0;font-size:12px; }
@media (max-width:1050px) {
    .evo-hero { grid-template-columns:66px 1fr }.evo-summary { grid-column:1/3;width:100% }.evo-summary span { flex:1 }
    .evo-rules { grid-template-columns:repeat(2,1fr) }.evo-grid { grid-template-columns:1fr }
}
@media (max-width:700px) {
    .evo-page { padding:14px }.evo-hero { grid-template-columns:50px 1fr;padding:17px 14px;gap:12px }.evo-hero-mark { width:48px;height:56px;font-size:22px }
    .evo-hero h1 { font-size:25px }.evo-hero-copy p { font-size:11px }.evo-summary { overflow-x:auto }.evo-summary span { min-width:78px;padding:10px 7px }
    .evo-rules { grid-template-columns:1fr 1fr }.evo-rules article { padding:12px }.evo-section-title { align-items:start;flex-direction:column }.evo-section-title p { text-align:left }
    .evo-card-head { grid-template-columns:52px 1fr;padding:13px }.evo-portrait { width:49px;height:49px }.evo-status { grid-column:1/3;flex-direction:row;justify-content:center;width:100%;min-width:0 }
    .evo-reward { margin:0 13px 11px }.evo-progress-list { grid-template-columns:1fr;margin:0 13px }.evo-details { grid-template-columns:1fr }.evo-history article { grid-template-columns:31px 1fr auto }.evo-history time { grid-column:2/4;text-align:left }
}

.char-evo-badge { display:inline-flex;align-items:center;gap:5px;padding:4px 7px;color:#737b7c;font:700 8px Arial,sans-serif;letter-spacing:.7px;border:1px solid #353c3d;background:#111516;white-space:nowrap; }
.char-evo-badge.is-ready { color:#e29348;border-color:#9b5725;background:#2d160a; }
.char-evo-badge.is-advanced { color:#d4b565;border-color:#65552f;background:#1b180d; }
body.rakion-eternal .auth-step,
body.rakion-eternal .auth-consents,
body.rakion-eternal .consent,
body.rakion-eternal .shop-search,
body.rakion-eternal .buy-preview {
  background-color: #0c0f11 !important;
  background-image: linear-gradient(90deg, rgba(122,132,137,.04), transparent) !important;
}
body.rakion-eternal .auth-input input,
body.rakion-eternal .auth-input select,
body.rakion-eternal .auth-input textarea,
body.rakion-eternal .input-field { background: #090c0e !important; }

/* Events — Rakion Evolution command board --------------------------------- */
body.rakion-eternal .ev-page { padding: 24px; color: #a7afb2; }
body.rakion-eternal .ev-hero {
  position: relative; display: grid; grid-template-columns: 68px minmax(0,1fr) auto; align-items: center;
  gap: 18px; min-height: 116px; padding: 20px 24px; overflow: hidden;
  border: 1px solid rgba(151,122,69,.38); background:
  radial-gradient(circle at 12% 50%,rgba(191,98,29,.09),transparent 28%),
  linear-gradient(105deg,#171b1e,#0b0e10 62%,#121517);
  box-shadow: inset 0 1px rgba(255,255,255,.03),0 18px 42px rgba(0,0,0,.3);
}
body.rakion-eternal .ev-hero::after { content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#b05d25,#d2a344,#b05d25,transparent);opacity:.75; }
body.rakion-eternal .ev-emblem {
  width:58px;height:68px;display:grid;place-items:center;color:#dc8a36;font-size:23px;
  background:linear-gradient(150deg,#252a2d,#0c0f11);border:1px solid #4b4f4f;
  clip-path:polygon(50% 0,94% 18%,86% 78%,50% 100%,14% 78%,6% 18%);
  filter:drop-shadow(0 0 12px rgba(201,91,25,.18));
}
body.rakion-eternal .ev-kicker { color:#c57931;font:900 9px Arial,sans-serif;letter-spacing:2.7px; }
body.rakion-eternal .ev-hero h1 { margin:5px 0 4px;color:#ebe8df;font:700 29px/1 Georgia,serif;text-transform:uppercase;letter-spacing:1.4px; }
body.rakion-eternal .ev-hero p { margin:0;color:#7e878b;font-size:12px; }
body.rakion-eternal .ev-summary { min-width:120px;padding-left:24px;border-left:1px solid #303639;text-align:center; }
body.rakion-eternal .ev-summary strong { display:block;color:#d9b45b;font:700 30px Georgia,serif; }
body.rakion-eternal .ev-summary > span { display:block;color:#697276;font:900 8px Arial,sans-serif;letter-spacing:1.4px; }
body.rakion-eternal .ev-summary b { display:block;margin-top:7px;color:#86bb78;font:900 9px Arial,sans-serif; }
body.rakion-eternal .ev-summary b i { display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#83bd72;box-shadow:0 0 8px #83bd72;animation:evPulse 1.2s ease-in-out infinite; }
body.rakion-eternal .ev-monthbar {
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:13px;padding:11px 14px;
  border:1px solid #30373a;background:#0c1012;box-shadow:inset 0 1px rgba(255,255,255,.02);
}
body.rakion-eternal .ev-monthbar > div { text-align:center; }
body.rakion-eternal .ev-monthbar small { display:block;color:#687176;font:900 8px Arial,sans-serif;letter-spacing:2px; }
body.rakion-eternal .ev-monthbar strong { display:block;margin-top:3px;color:#e6e2d7;font:700 22px Georgia,serif;letter-spacing:2px; }
body.rakion-eternal .ev-monthbar strong b { color:#b88239;font-weight:400; }
body.rakion-eternal .ev-monthbar a { justify-self:start;display:inline-flex;align-items:center;gap:10px;padding:9px 13px;color:#838d91;border:1px solid #323a3d;background:#121619;text-decoration:none;font:800 9px Arial,sans-serif;letter-spacing:1px; }
body.rakion-eternal .ev-monthbar a:last-child { justify-self:end; }
body.rakion-eternal .ev-monthbar a:hover { color:#edc972;border-color:#9e7134;background:#191714; }
body.rakion-eternal .ev-layout { display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:13px;margin-top:13px; }
body.rakion-eternal .ev-calendar, body.rakion-eternal .ev-aside, body.rakion-eternal .ev-announcements {
  border:1px solid #30373a;background:#0b0f11;box-shadow:inset 0 1px rgba(255,255,255,.018);
}
body.rakion-eternal .ev-calendar { padding:12px; }
body.rakion-eternal .ev-week, body.rakion-eternal .ev-grid { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px; }
body.rakion-eternal .ev-week span { padding:7px 0;text-align:center;color:#7f898d;font:900 9px Arial,sans-serif;letter-spacing:1.5px; }
body.rakion-eternal .ev-day {
  position:relative;min-height:101px;padding:9px;overflow:hidden;text-decoration:none;
  border:1px solid #1b2225;background:linear-gradient(150deg,#101417,#090c0e);color:#697276;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
body.rakion-eternal .ev-day:hover { transform:translateY(-2px);border-color:#596166;background:#151a1d; }
body.rakion-eternal .ev-day.has-event { border-color:#4c4030;background:linear-gradient(145deg,#17191a,#0d1012); }
body.rakion-eternal .ev-day.is-selected { border-color:#b17932;box-shadow:inset 0 0 0 1px rgba(220,143,49,.18),0 0 18px rgba(191,91,22,.12); }
body.rakion-eternal .ev-day.is-today:not(.is-selected) { border-color:#68747a; }
body.rakion-eternal .ev-num { font:800 11px Arial,sans-serif;color:#737d81; }
body.rakion-eternal .ev-day.has-event .ev-num, body.rakion-eternal .ev-day.is-today .ev-num { color:#d2b069; }
body.rakion-eternal .ev-today { position:absolute;right:7px;top:7px;padding:3px 5px;color:#d7bd7a;background:#252117;font:900 7px Arial,sans-serif;letter-spacing:.8px; }
body.rakion-eternal .ev-day-icon { display:grid;place-items:center;width:31px;height:31px;margin:4px auto;color:#ca722e;border:1px solid #4c3b2a;background:#181513;transform:rotate(45deg); }
body.rakion-eternal .ev-day-icon i { transform:rotate(-45deg); }
body.rakion-eternal .ev-day > strong { display:block;margin-top:5px;overflow:hidden;color:#d0d2cf;font:700 10px Arial,sans-serif;text-align:center;white-space:nowrap;text-overflow:ellipsis; }
body.rakion-eternal .ev-day > small { display:block;margin-top:3px;color:#788186;font:900 7px Arial,sans-serif;text-align:center;letter-spacing:1px; }
body.rakion-eternal .ev-day > small.is-live { color:#8cca7a; }
body.rakion-eternal .ev-day > small.is-upcoming { color:#c78a3f; }
body.rakion-eternal .ev-count { position:absolute;right:6px;bottom:5px;color:#d2a44f;font:800 8px Arial,sans-serif; }
body.rakion-eternal .ev-aside > header { display:flex;align-items:center;gap:11px;padding:14px 15px;border-bottom:1px solid #30373a;background:linear-gradient(180deg,#181d20,#101416); }
body.rakion-eternal .ev-aside > header > i { color:#c57b36;font-size:17px; }
body.rakion-eternal .ev-aside > header small { display:block;color:#697277;font:900 8px Arial,sans-serif;letter-spacing:1.6px; }
body.rakion-eternal .ev-aside > header strong { display:block;margin-top:3px;color:#d8d9d5;font:700 13px Georgia,serif; }
body.rakion-eternal .ev-detail-list { padding:11px; }
body.rakion-eternal .ev-empty { min-height:220px;display:grid;place-items:center;align-content:center;gap:8px;text-align:center; }
body.rakion-eternal .ev-empty i { color:#4e585c;font-size:28px; }
body.rakion-eternal .ev-empty strong { color:#aeb4b4;font:700 14px Georgia,serif; }
body.rakion-eternal .ev-empty span { max-width:230px;color:#626c70;font-size:11px; }
body.rakion-eternal .ev-detail { display:grid;grid-template-columns:44px 1fr;gap:11px;padding:13px;border:1px solid #2c3336;background:#101518; }
body.rakion-eternal .ev-detail + .ev-detail { margin-top:8px; }
body.rakion-eternal .ev-detail-icon { width:40px;height:40px;display:grid;place-items:center;color:#c87832;border:1px solid #564028;background:#171513; }
body.rakion-eternal .ev-state { color:#c7843d;font:900 8px Arial,sans-serif;letter-spacing:1.2px; }
body.rakion-eternal .ev-detail.is-live .ev-state { color:#8ac879; }
body.rakion-eternal .ev-detail h3 { margin:3px 0;color:#e0e1dc;font:700 15px Georgia,serif; }
body.rakion-eternal .ev-detail time { color:#818a8e;font-size:10px; }
body.rakion-eternal .ev-detail p { margin:9px 0 0;color:#929a9c;font-size:11px;line-height:1.55; }
body.rakion-eternal .ev-announcements { margin-top:13px;padding:16px; }
body.rakion-eternal .ev-announcements > header { display:flex;align-items:center;justify-content:space-between;padding:0 2px 13px;border-bottom:1px solid #30373a; }
body.rakion-eternal .ev-announcements > header span { color:#c27832;font:900 8px Arial,sans-serif;letter-spacing:2px; }
body.rakion-eternal .ev-announcements > header h2 { margin:3px 0 0;color:#dedfd9;font:700 19px Georgia,serif; }
body.rakion-eternal .ev-announcements > header > i { color:#686f72;font-size:22px; }
body.rakion-eternal .ev-announcement-empty { display:flex;align-items:center;justify-content:center;gap:16px;min-height:120px;color:#586267; }
body.rakion-eternal .ev-announcement-empty > i { font-size:28px; }
body.rakion-eternal .ev-announcement-empty strong { color:#b8bdbb;font:700 15px Georgia,serif; }
body.rakion-eternal .ev-announcement-empty p { margin:4px 0 0;color:#687277;font-size:11px; }
body.rakion-eternal .ev-announcement-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:13px; }
body.rakion-eternal .ev-announcement { display:grid;grid-template-columns:48px 38px 1fr auto;align-items:center;gap:11px;padding:10px;color:#899296;text-decoration:none;border:1px solid #2d3437;background:#0e1214;transition:.2s ease; }
body.rakion-eternal .ev-announcement:hover { transform:translateX(2px);border-color:#75552f;background:#15191b; }
body.rakion-eternal .ev-ann-date { display:grid;place-items:center;height:48px;border-right:1px solid #30373a; }
body.rakion-eternal .ev-ann-date b { color:#d8b662;font:700 19px Georgia,serif; }
body.rakion-eternal .ev-ann-date small { color:#6f787c;font:900 8px Arial,sans-serif;letter-spacing:1px; }
body.rakion-eternal .ev-ann-icon { width:34px;height:34px;display:grid;place-items:center;color:#c87832;border:1px solid #45392c;background:#151413; }
body.rakion-eternal .ev-ann-copy em { display:block;color:#9c713d;font:900 7px Arial,sans-serif;letter-spacing:1px;font-style:normal; }
body.rakion-eternal .ev-announcement.is-live .ev-ann-copy em { color:#83bd75; }
body.rakion-eternal .ev-ann-copy strong { display:block;margin:3px 0;color:#d5d7d3;font-size:12px; }
body.rakion-eternal .ev-ann-copy small { color:#6d777b;font-size:9px; }
body.rakion-eternal .ev-announcement > i { color:#566064;font-size:9px; }
@keyframes evPulse { 50% { opacity:.35;transform:scale(.7); } }

@media(max-width:900px){
  body.rakion-eternal .ev-layout{grid-template-columns:1fr;}
  body.rakion-eternal .ev-aside{order:-1;}
  body.rakion-eternal .ev-empty{min-height:100px;}
}
@media(max-width:650px){
  body.rakion-eternal .ev-page{padding:10px;}
  body.rakion-eternal .ev-hero{grid-template-columns:52px 1fr;padding:15px;}
  body.rakion-eternal .ev-emblem{width:47px;height:54px;font-size:18px;}
  body.rakion-eternal .ev-hero h1{font-size:21px;}
  body.rakion-eternal .ev-summary{display:none;}
  body.rakion-eternal .ev-monthbar a span{display:none;}
  body.rakion-eternal .ev-monthbar strong{font-size:16px;}
  body.rakion-eternal .ev-day{min-height:58px;padding:5px;}
  body.rakion-eternal .ev-day-icon{width:23px;height:23px;font-size:9px;}
  body.rakion-eternal .ev-day > strong,body.rakion-eternal .ev-day > small{display:none;}
  body.rakion-eternal .ev-announcement-grid{grid-template-columns:1fr;}
}

/* ============================================================
   RAKION EVOLUTION ADMINCP — graphite command center
   Final overrides intentionally live at EOF so every legacy admin view
   inherits the same metal/stone language without brown Metin surfaces.
   ============================================================ */
body.rakion-admin {
  --adm-bg: #07090a;
  --adm-void: #090c0e;
  --adm-panel: #101417;
  --adm-panel-2: #14191c;
  --adm-line: #2a3236;
  --adm-line-hot: #76532b;
  --adm-ash: #899297;
  --adm-steel: #d2d5d3;
  --adm-gold: #d1ad61;
  --adm-bronze: #b66b2e;
  margin: 0;
  color: var(--adm-ash);
  background:
    radial-gradient(circle at 72% 0, rgba(174, 94, 32, .075), transparent 27%),
    linear-gradient(135deg, rgba(255,255,255,.012) 25%, transparent 25%) 0 0/8px 8px,
    var(--adm-bg);
  font-family: Inter, Arial, sans-serif;
  min-height: 100vh;
}
body.rakion-admin::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .22;
  background:
    radial-gradient(circle at 14% 24%, rgba(255,255,255,.08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 68%, rgba(206,118,49,.12) 0 1px, transparent 1.6px);
  background-size: 47px 43px, 71px 67px;
  animation: adminAshDrift 18s linear infinite;
}
@keyframes adminAshDrift { to { transform: translate3d(24px,-42px,0); } }

body.rakion-admin .adm-side {
  width: 264px;
  background:
    linear-gradient(180deg, rgba(24,29,32,.32), transparent 155px),
    linear-gradient(180deg, #0c1012 0%, #080a0c 100%);
  border-right: 1px solid #30383c;
  box-shadow: 14px 0 40px rgba(0,0,0,.34), inset -1px 0 rgba(196,130,54,.08);
}
body.rakion-admin .adm-main { min-height: 100vh; margin-left: 264px; }
body.rakion-admin .adm-brand {
  min-height: 78px; padding: 14px 16px; gap: 10px;
  border-bottom: 1px solid #31383b;
  background: linear-gradient(90deg, rgba(183,103,41,.07), transparent);
}
body.rakion-admin .adm-brand-ico {
  width: 72px; height: 42px; padding: 0; overflow: hidden;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
body.rakion-admin .adm-brand-ico img { width: 72px; height: 72px; object-fit: cover; object-position: 50% 0; filter: drop-shadow(0 3px 5px #000); }
body.rakion-admin .adm-brand-txt b { color: #e1e2df; font-size: 12px; letter-spacing: 1.7px; }
body.rakion-admin .adm-brand-txt small { color: #758087; font-size: 8px; letter-spacing: 1.25px; }
body.rakion-admin .adm-nav-search {
  margin: 10px 9px 0;
  min-height: 40px;
  border-radius: 2px;
  color: #747f84;
  background: #090d0f;
  border-color: #293236;
}
body.rakion-admin .adm-nav-search:focus-within {
  border-color: #76502b;
  box-shadow: inset 2px 0 #d17a31, 0 0 0 2px rgba(209,122,49,.055);
}
body.rakion-admin .adm-nav-search input { min-height: 0; color: #e0e3e1; box-shadow: none; }
body.rakion-admin .adm-nav-search kbd { color: #788287; border-color: #30383c; }
body.rakion-admin .adm-nav-empty { border-color: #293236; background: rgba(7,10,12,.36); }
body.rakion-admin .adm-nav { padding: 8px 9px 15px; }
body.rakion-admin .adm-group { padding: 15px 10px 6px; color: #626d73; font-size: 8px; letter-spacing: 1.8px; }
body.rakion-admin .adm-group i { color: #a96b36; opacity: .85; }
body.rakion-admin .adm-link {
  min-height: 42px; margin-bottom: 3px; padding: 6px 9px;
  border-radius: 2px; color: #818b90; font-size: 12px;
  animation: none;
}
body.rakion-admin .adm-link-ico {
  width: 29px; height: 29px; border-radius: 2px;
  color: #8f999e; background: #12171a; border-color: #293135;
}
body.rakion-admin .adm-link:hover { color: #d6d9d8; background: #151a1d; border-color: #333c40; }
body.rakion-admin .adm-link:hover .adm-link-ico { color: #d5a75d; background: #171b1d; }
body.rakion-admin .adm-link.on {
  color: #f0eee7; background: linear-gradient(90deg, rgba(179,101,42,.18), #15191b 60%, #101416);
  border-color: #4b4032; box-shadow: inset 2px 0 #d17a31, 0 6px 18px rgba(0,0,0,.18);
}
body.rakion-admin .adm-link.on .adm-link-ico {
  color: #f3c774; background: #211810; border-color: #76502b; box-shadow: inset 0 0 12px rgba(203,108,37,.16);
}
body.rakion-admin .adm-link-badge { color: #f8d589; background: #7b3022; border: 1px solid #a84e35; }
body.rakion-admin .adm-side-foot { border-color: #2d3438; background: #090c0e; }
body.rakion-admin .adm-me-av { color: #d4ae62; background: #15191b; border-color: #574127; }
body.rakion-admin .adm-me-txt strong { color: #d9dcda; }
body.rakion-admin .adm-me-txt small { color: #a87038; }
body.rakion-admin .adm-out { border-radius: 2px; }

body.rakion-admin .adm-top {
  min-height: 58px; padding: 10px 24px;
  background: rgba(11,14,16,.96); border-bottom: 1px solid #30383c;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
body.rakion-admin .ac-group { color: #737d82; }
body.rakion-admin .ac-page { color: #dadddb; font-size: 13px; }
body.rakion-admin .adm-top-link,
body.rakion-admin .adm-top-user,
body.rakion-admin .adm-burger { border-radius: 2px; background: #121619; border-color: #30383c; }
body.rakion-admin .adm-top-user { color: #cbd0ce; }
body.rakion-admin .adm-top-user em { color: #f1c678; background: #241a11; border: 1px solid #704c28; border-radius: 2px; }
body.rakion-admin .adm-body { max-width: 1660px; margin: 0 auto; padding: 22px 26px 42px; }

body.rakion-admin .adm-card,
body.rakion-admin .adm-stat {
  border-radius: 2px; background: linear-gradient(145deg, rgba(20,25,28,.98), rgba(11,14,16,.98));
  border-color: #30383c; box-shadow: inset 0 1px rgba(255,255,255,.018), 0 13px 32px rgba(0,0,0,.18);
}
body.rakion-admin .adm-card-h {
  min-height: 48px; padding: 13px 17px; color: #d4ad62;
  background: linear-gradient(90deg, rgba(255,255,255,.025), transparent);
  border-color: #30383c; font-family: Georgia, serif; font-size: 11px; letter-spacing: 1.8px;
}
body.rakion-admin .adm-card-h > span { flex: 1; }
body.rakion-admin .adm-card-h > small { color: #626d72; font: 700 8px Inter,Arial,sans-serif; letter-spacing: 1.2px; }
body.rakion-admin .adm-card-b { padding: 17px; }
body.rakion-admin .adm-stat { padding: 15px; border-color: #2d3539; }
body.rakion-admin .adm-stat:hover { border-color: #6b4a29; box-shadow: 0 15px 34px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.025); }
body.rakion-admin .as-ico { border-radius: 2px; color: #b7c0c3; background: #151a1d; border-color: #343d41; }
body.rakion-admin .as-v { color: #d9dcda; font-family: Georgia,serif; font-size: 24px; }
body.rakion-admin .as-l { color: #929b9f; font-size: 9px; }
body.rakion-admin .as-hint { margin-top: 5px; color: #586267; font-size: 8px; letter-spacing: .35px; }
body.rakion-admin .adm-stat--gold .as-ico { color: #edc66f; border-color: #66502e; background: #1d1913; }
body.rakion-admin .adm-stat--ember .as-ico { color: #e37d38; border-color: #654027; background: #1d1511; }
body.rakion-admin .adm-stat--live .as-ico { color: #73c48c; border-color: #315c42; background: #101a16; }
body.rakion-admin .adm-stat--live .as-v { color: #8dcc9d; }
body.rakion-admin .adm-stat--good .as-ico { color: #73c48c; border-color: #315c42; background: #101a16; }
body.rakion-admin .adm-stat--bad .as-ico { color: #df7770; border-color: #663a38; background: #1d1212; }

/* Make every legacy admin form and table obey the command-center palette. */
body.rakion-admin .data-table th { color: #8f999d; background: #0c1012; border-color: #30383c; }
body.rakion-admin .data-table td { color: #aeb5b6; background: #111518; border-color: #293135; }
body.rakion-admin .data-table tr:hover td { background: #171c1f; }
body.rakion-admin .input-field,
body.rakion-admin input:not([type="checkbox"]):not([type="radio"]),
body.rakion-admin select,
body.rakion-admin textarea { color: #d3d7d5; background: #090c0e; border-color: #354045; border-radius: 2px; }
body.rakion-admin .input-field:focus,
body.rakion-admin input:focus,
body.rakion-admin select:focus,
body.rakion-admin textarea:focus { border-color: #8a5b2c; box-shadow: 0 0 0 2px rgba(181,105,45,.12); }
body.rakion-admin .info-row { border-color: #293135; }
body.rakion-admin .info-row .k,
body.rakion-admin .form-hint { color: #707b80; }
body.rakion-admin .info-row .v,
body.rakion-admin .form-label { color: #c8ccca; }
body.rakion-admin code { color: #dfae61; background: #0a0d0f; border: 1px solid #30373a; }
body.rakion-admin .btn-primary,
body.rakion-admin .btn-gold { border-radius: 2px; color: #17110a; background: linear-gradient(#d2ad61,#a87636); border-color: #e0be75; }
body.rakion-admin .btn-secondary { border-radius: 2px; color: #c5cac8; background: #151a1d; border-color: #394348; }

.ops-hero {
  position: relative; display: flex; align-items: center; gap: 17px; min-height: 108px;
  margin-bottom: 14px; padding: 18px 21px; overflow: hidden;
  border: 1px solid #343d41; background:
    linear-gradient(90deg, rgba(181,98,38,.13), transparent 44%),
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(255,255,255,.01) 13px 14px),
    #0f1315;
  box-shadow: inset 3px 0 #b9652e, 0 12px 32px rgba(0,0,0,.22);
  animation: opsEnter .46s ease both;
}
.ops-hero::after { content:"";position:absolute;right:-30px;top:-85px;width:290px;height:240px;border:1px solid rgba(193,118,51,.12);transform:rotate(32deg);box-shadow:0 0 0 22px rgba(255,255,255,.008),0 0 0 44px rgba(255,255,255,.006); }
.ops-hero-mark { position:relative;z-index:1;display:grid;place-items:center;width:62px;height:68px;clip-path:polygon(50% 0,92% 18%,85% 76%,50% 100%,15% 76%,8% 18%);color:#ee9a4c;font-size:23px;background:linear-gradient(#2a1c12,#0e1214);border:1px solid #76502b;filter:drop-shadow(0 5px 8px #000); }
.ops-hero-copy { position:relative;z-index:1;flex:1; }
.ops-kicker { color:#ba7138;font-size:8px;font-weight:900;letter-spacing:2.5px; }
.ops-hero h1 { margin:4px 0 3px;color:#e3e4e0;font:700 25px Georgia,serif;letter-spacing:1.2px;text-transform:uppercase; }
.ops-hero p { margin:0;color:#778186;font-size:11px; }
.ops-health { position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding:10px 14px;border-left:1px solid #333b3f; }
.ops-health-dot { width:9px;height:9px;border-radius:50%;background:#777;box-shadow:0 0 0 4px rgba(120,120,120,.1); }
.ops-health-dot.is-live { background:#69bd82;box-shadow:0 0 0 4px rgba(105,189,130,.1);animation:opsPulse 2s ease infinite; }
.ops-health span { display:flex;flex-direction:column;gap:3px; }
.ops-health small { color:#626d72;font-size:7px;letter-spacing:1.5px; }
.ops-health strong { color:#aab2b4;font-size:9px;letter-spacing:1px; }

.ops-alerts { margin-bottom:14px;border:1px solid #573c28;background:#130f0d;animation:opsEnter .45s .05s ease both; }
.ops-alerts-title { display:flex;align-items:center;gap:9px;padding:10px 14px;color:#df9b54;font-size:10px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;border-bottom:1px solid #493424; }
.ops-alerts-title span { margin-left:auto;display:grid;place-items:center;min-width:20px;height:18px;color:#f4c276;background:#612b20;border:1px solid #8d3f2c; }
.ops-alert { display:flex;align-items:center;gap:11px;padding:10px 14px;color:#aab0b0;text-decoration:none;border-bottom:1px solid #322923; }
.ops-alert:last-child { border-bottom:0; }
.ops-alert > i:first-child { color:#d27638; }
.ops-alert > i:last-child { margin-left:auto;color:#7f552e;font-size:9px; }
.ops-alert span { display:flex;flex-direction:column;gap:2px; }
.ops-alert strong { color:#d8d6d0;font-size:11px; }
.ops-alert small { color:#887f79;font-size:9px; }
.ops-alert:hover { background:rgba(190,101,38,.06); }

.ops-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.ops-grid { display:grid;gap:14px;margin-bottom:14px; }
.ops-grid--primary { grid-template-columns:minmax(0,1.55fr) minmax(310px,.75fr); }
.ops-grid--logs { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ops-state { display:inline-flex!important;align-items:center;justify-content:center;gap:6px;flex:0 0 auto!important;padding:4px 8px;color:#aeb5b5;font:800 7px Inter,Arial,sans-serif!important;letter-spacing:1px;border:1px solid #394247;background:#12171a; }
.ops-state i { font-size:5px!important; }
.ops-state.is-ok { color:#7cca91;border-color:#335c40;background:#101914; }
.ops-state.is-warn { color:#e1a15e;border-color:#66432a;background:#1a130f; }
.ops-launcher-summary { display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-bottom:16px;background:#30383c;border:1px solid #30383c; }
.ops-launcher-summary > div { min-width:0;padding:12px;background:#0c1012; }
.ops-launcher-summary small { display:block;min-height:20px;color:#606b70;font-size:7px;font-weight:800;letter-spacing:.8px; }
.ops-launcher-summary strong { display:block;color:#d6d9d7;font:700 18px Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ops-launcher-summary strong.is-danger { color:#dc766e; }
.ops-meter-head { display:flex;justify-content:space-between;color:#768086;font-size:9px; }
.ops-meter-head strong { color:#d1aa60; }
.ops-meter { height:5px;margin:7px 0 16px;padding:1px;background:#07090a;border:1px solid #313a3e; }
.ops-meter span { display:block;height:100%;background:linear-gradient(90deg,#905326,#e28a3e);box-shadow:0 0 9px rgba(217,119,48,.3);animation:opsBar 1s cubic-bezier(.2,.8,.3,1) both; }
.ops-subtitle { display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;padding-bottom:8px;border-bottom:1px solid #293135; }
.ops-subtitle span { color:#aeb4b3;font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase; }
.ops-subtitle small { color:#5f696e;font-size:8px; }
.ops-builds { display:grid;gap:7px; }
.ops-build-row { display:grid;grid-template-columns:100px 1fr 44px 70px;align-items:center;gap:9px; }
.ops-build-id { color:#8f989c;font-size:8px;font-weight:800;letter-spacing:.5px; }
.ops-build-bar { height:4px;background:#090c0e; }
.ops-build-bar i { display:block;height:100%;background:linear-gradient(90deg,#555f63,#b27a3c);animation:opsBar .8s ease both; }
.ops-build-row strong { color:#d6d8d5;font-size:10px;text-align:right; }
.ops-build-row small { color:#606a6f;font-size:8px;text-align:right; }

.ops-runtime .adm-card-b { padding:8px 17px 14px; }
.ops-runtime-row { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:49px;border-bottom:1px solid #293135; }
.ops-runtime-row > span { display:flex;align-items:center;gap:10px;color:#8c969a; }
.ops-runtime-row > span i { width:18px;color:#b4763e;text-align:center; }
.ops-runtime-row small { font-size:9px; }
.ops-runtime-row > strong { color:#d5d8d6;font:700 16px Georgia,serif; }
.ops-runtime-row .ops-runtime-text { max-width:160px;color:#d0aa60;font-size:11px;text-align:right; }
.ops-season { margin-top:12px;padding:10px 11px;border:1px solid #493a29;background:#151310; }
.ops-season span { display:block;color:#dfaa5e;font-size:9px;font-weight:800;letter-spacing:1px; }
.ops-season small { display:block;margin-top:4px;color:#716b65;font-size:8px; }

.ops-log-list { padding:0 15px 7px; }
.ops-log-row { display:grid;grid-template-columns:28px minmax(100px,1fr) 90px 88px;align-items:center;gap:9px;min-height:49px;border-bottom:1px solid #293135;transition:.16s ease; }
.ops-log-row:last-child { border-bottom:0; }
.ops-log-row:hover { padding-left:4px;background:linear-gradient(90deg,rgba(185,108,44,.055),transparent); }
.ops-log-icon { display:grid;place-items:center;width:24px;height:24px;color:#899398;background:#151a1d;border:1px solid #343d41;font-size:8px; }
.ops-log-icon.is-ok { color:#79c58d;background:#101a14;border-color:#31583e; }
.ops-log-icon.is-bad { color:#d66f68;background:#1b1111;border-color:#623735; }
.ops-log-icon.is-wait { color:#d3a35b;background:#19150f;border-color:#59452c; }
.ops-log-main { display:flex;flex-direction:column;min-width:0;gap:2px; }
.ops-log-main strong { overflow:hidden;color:#cdd1cf;font-size:10px;text-overflow:ellipsis;white-space:nowrap; }
.ops-log-main small { overflow:hidden;color:#626d72;font-size:8px;text-overflow:ellipsis;white-space:nowrap; }
.ops-log-build { color:#9c7449;font-size:7px;font-weight:800;letter-spacing:.5px; }
.ops-log-row time { color:#596469;font-size:8px;text-align:right;font-variant-numeric:tabular-nums; }
.ops-empty { display:flex;align-items:center;justify-content:center;gap:9px;padding:14px;color:#5e696e;font-size:9px; }
.ops-empty--large { min-height:120px;flex-direction:column; }
.ops-empty--large i { font-size:22px;color:#3f494e; }

.ops-actions-card { margin-top:0; }
.ops-actions { display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px; }
.ops-action { display:flex;align-items:center;gap:10px;min-width:0;padding:12px;color:#aeb5b6;text-decoration:none;border:1px solid #30383c;background:#0d1113;animation:opsEnter .42s var(--d,0ms) ease both;transition:.18s ease; }
.ops-action > span { display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;color:#bd7b3e;background:#171819;border:1px solid #4d3d2c; }
.ops-action b { display:flex;flex:1;min-width:0;flex-direction:column;color:#cdd1cf;font-size:10px; }
.ops-action b small { margin-top:3px;overflow:hidden;color:#606b70;font-size:7px;font-weight:500;text-overflow:ellipsis;white-space:nowrap; }
.ops-action > i { color:#545e63;font-size:8px;transition:.18s ease; }
.ops-action:hover { transform:translateY(-2px);color:#fff;border-color:#6b4a2a;background:#15191b;box-shadow:0 10px 22px rgba(0,0,0,.26); }
.ops-action:hover > i { color:#d1904d;transform:translateX(3px); }
.ops-action.is-primary { background:linear-gradient(120deg,#21170f,#111517);border-color:#714924; }
.ops-action.is-primary > span { color:#f0b568;border-color:#895629;background:#25170e;box-shadow:0 0 16px rgba(213,111,37,.12); }

@keyframes opsEnter { from { opacity:0;transform:translateY(8px); } to { opacity:1;transform:none; } }
@keyframes opsPulse { 50% { box-shadow:0 0 0 8px rgba(105,189,130,0); } }
@keyframes opsBar { from { transform:scaleX(0);transform-origin:left; } }

@media (max-width:1200px) {
  .ops-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ops-grid--primary { grid-template-columns:1fr; }
  .ops-actions { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
  body.rakion-admin .adm-main { margin-left:0; }
  .ops-grid--logs { grid-template-columns:1fr; }
  .ops-health { display:none; }
}
@media (max-width:620px) {
  body.rakion-admin .adm-body { padding:14px 10px 28px; }
  .ops-hero { min-height:90px;padding:14px; }
  .ops-hero-mark { width:48px;height:54px; }
  .ops-hero h1 { font-size:19px; }
  .ops-hero p { display:none; }
  .ops-stats,.ops-actions { grid-template-columns:1fr; }
  .ops-launcher-summary { grid-template-columns:repeat(2,1fr); }
  .ops-build-row { grid-template-columns:82px 1fr 35px; }
  .ops-build-row small { display:none; }
  .ops-log-row { grid-template-columns:26px 1fr 74px; }
  .ops-log-row time { display:none; }
}
/* WPF update command centre */
.wpf-hero{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;background:linear-gradient(120deg,#11151a,#171b20 65%,#241b10);border-left:3px solid #c08a39}.wpf-kicker{font-size:11px;letter-spacing:.18em;color:#c99a50;font-weight:800}.wpf-hero h1{margin:7px 0 3px;color:#f0eee9;font-size:28px}.wpf-hero h1 em{font-style:normal;color:#d6a653}.wpf-hero p{margin:0;color:#8d959d}.wpf-ver{width:92px;height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #6e542c;box-shadow:inset 0 0 25px #000,0 0 22px #bd7b2420;background:#0b0d10;clip-path:polygon(15% 0,85% 0,100% 15%,100% 85%,85% 100%,15% 100%,0 85%,0 15%)}.wpf-ver small,.wpf-ver span{font-size:9px;letter-spacing:.1em;color:#8e9499}.wpf-ver strong{font-size:30px;color:#e5bd70}.wpf-checks,.wpf-metrics{display:grid;gap:10px;margin:14px 0}.wpf-checks{grid-template-columns:repeat(5,minmax(0,1fr))}.wpf-check{display:grid;grid-template-columns:30px 1fr;align-items:center;padding:12px;background:#11151a;border:1px solid #2c3239}.wpf-check i{grid-row:1/3;color:#65a675}.wpf-check.bad i{color:#cf625c}.wpf-check span{font-size:12px;color:#d2d5d7}.wpf-check b{font-size:9px;letter-spacing:.12em;color:#65a675}.wpf-check.bad b{color:#cf625c}.wpf-metrics{grid-template-columns:repeat(5,minmax(0,1fr))}.wpf-metrics>div{padding:15px;background:#101419;border:1px solid #2b3138;display:grid;grid-template-columns:28px 1fr}.wpf-metrics i{grid-row:1/3;color:#b9873f}.wpf-metrics span{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:#7f878e}.wpf-metrics strong{font-size:18px;color:#e4e1db}.wpf-contract{display:grid;grid-template-columns:90px 1fr;gap:10px;margin-bottom:14px;align-items:center}.wpf-contract span{color:#858d94;font-size:11px;text-transform:uppercase}.wpf-contract code{word-break:break-all}.wpf-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}.wpf-files{max-height:520px}.wpf-integrity{display:flex;gap:22px;flex-wrap:wrap}.wpf-integrity span{color:#8c949b;font-size:12px}.wpf-integrity b{color:#dfb35f;font-size:18px;margin-right:4px}@media(max-width:1050px){.wpf-checks,.wpf-metrics{grid-template-columns:repeat(2,1fr)}.wpf-grid{grid-template-columns:1fr}}@media(max-width:650px){.wpf-hero{align-items:flex-start}.wpf-ver{width:70px;height:70px}.wpf-checks,.wpf-metrics{grid-template-columns:1fr}.wpf-contract{grid-template-columns:1fr}}
/* GM character, inventory and mailbox controls */
.gift-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.gift-form label,.gm-stat-form label{display:flex;flex-direction:column;gap:5px;color:#aeb4ba;font-size:11px;text-transform:uppercase;letter-spacing:.06em}.gift-form small{color:#697179;text-transform:none}.gift-wide,.gm-wide{grid-column:1/-1}.gm-stats{margin-top:14px;border-top:1px solid #2c3238;padding-top:12px}.gm-stats summary{cursor:pointer;color:#c89a4d;font-size:12px;font-weight:700;letter-spacing:.06em}.gm-stat-form{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px}.gm-inline{display:flex;align-items:center;gap:7px;min-width:360px}.gm-inline input[type=number]{width:66px}.gm-inline input[name=reason]{min-width:130px}.gm-items{max-height:580px}.data-table td small{display:block;color:#737b82;margin-top:3px}@media(max-width:1100px){.gm-stat-form{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.gift-form,.gm-stat-form{grid-template-columns:1fr}.gm-wide,.gift-wide{grid-column:auto}}

/* AdminCP precision pass: brand crop, compact forms and predictable grids. */
body.rakion-admin .adm-brand{min-height:84px;padding:13px 16px;gap:12px;overflow:hidden}
body.rakion-admin .adm-brand-ico{position:relative;width:72px;height:48px;overflow:hidden;align-self:center}
body.rakion-admin .adm-brand-ico img{position:absolute;top:2px;left:50%;width:96px;height:96px;max-width:none;object-fit:fill;transform:translateX(-50%);filter:drop-shadow(0 4px 6px #000)}
body.rakion-admin .adm-brand-txt{justify-content:center;gap:3px}
body.rakion-admin .adm-brand-txt b{font-size:12.5px;line-height:1.15;white-space:nowrap}
body.rakion-admin .adm-brand-txt small{font-size:7.5px;line-height:1.2;white-space:nowrap}
body.rakion-admin .adm-link{animation:none;opacity:1;transform:none}
body.rakion-admin .adm-card-h>span{flex:0 0 auto}
body.rakion-admin .adm-card-h>span:not(.rp-count):not(.ops-state){flex:1 1 auto;min-width:0}
body.rakion-admin .adm-card-h .rp-count{flex:0 0 auto!important;display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 8px;border:1px solid #59442b;background:#1c1711;color:#ddb76c;font:800 10px Inter,Arial,sans-serif;letter-spacing:.04em}
.wpf-grid{align-items:start}
.wpf-grid>.adm-card{height:auto;align-self:start}
body.rakion-admin .adm-card h1,body.rakion-admin .adm-card h2,body.rakion-admin .adm-card h3{margin-top:0}
body.rakion-admin .gm-account-summary,body.rakion-admin .gm-character-section,body.rakion-admin .gm-audit-section{padding:18px 20px}
.gm-account-summary>.flex{margin-bottom:18px!important;padding-bottom:15px;border-bottom:1px solid #2d3539}
.gm-account-summary h1{color:#eeeae0!important;font:700 25px Georgia,serif!important;letter-spacing:.03em}
.gm-account-summary>.grid{row-gap:15px}
.gm-account-summary>.grid>div{min-width:0;padding:10px 12px;border-left:2px solid #3c4549;background:#0c1012}
.gm-account-summary>.grid p{margin:0}.gm-account-summary>.grid p+p{margin-top:5px;color:#d2d6d4!important}
body.rakion-admin .gm-account-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:18px 20px}
.gm-account-actions>h2{grid-column:1/-1;margin:0 0 2px!important;padding-bottom:12px;border-bottom:1px solid #343c40;color:#d7b36b!important;font:700 16px Georgia,serif}
.gm-account-actions>div{min-width:0;margin:0!important;padding:15px!important;border:1px solid #30383c!important;background:#0c1012}
.gm-account-actions>.grid{grid-column:1/-1;gap:14px!important}
.gm-account-actions form>div+div{margin-top:11px}
.gm-account-actions label{display:block;margin-bottom:6px;color:#aeb5b7!important;font-size:11px!important;letter-spacing:.025em}
body.rakion-admin .gm-account-actions input.input-field,body.rakion-admin .gm-account-actions textarea.input-field{width:100%;margin-top:5px!important}
body.rakion-admin .gm-account-actions textarea.input-field{min-height:68px;resize:vertical}
.gm-account-actions button{min-height:38px;margin-top:12px}
.gm-character-section>h2,.gm-audit-section>h2{padding-bottom:12px;border-bottom:1px solid #343c40;color:#d7b36b!important;font:700 16px Georgia,serif}
.gm-character-section>.space-y-4>div{border-radius:2px!important;border-color:#30383c!important;background:#0c1012}
body.rakion-admin .table-scroll{max-width:100%;scrollbar-color:#6a4b2d #0a0d0f;scrollbar-width:thin}
body.rakion-admin .data-table{width:100%;min-width:100%}
body.rakion-admin .data-table th{white-space:nowrap;font-size:9px;letter-spacing:.08em}
body.rakion-admin .data-table td{font-size:12px;vertical-align:middle}
body.rakion-admin .btn-primary,body.rakion-admin .btn-secondary,body.rakion-admin .btn-danger{min-height:36px;padding:8px 14px;letter-spacing:.08em}
body.rakion-admin input:not([type="checkbox"]):not([type="radio"]),body.rakion-admin select{min-height:40px}
body.rakion-admin textarea{line-height:1.45}
body.rakion-admin input[type="checkbox"]{width:15px;height:15px;accent-color:#bd7b36;vertical-align:middle}
.wpf-grid>.adm-card+.adm-card{margin-top:0}
.gm-account-page .gm-inline{display:grid;grid-template-columns:58px minmax(92px,1fr) auto auto;align-items:center;gap:7px;min-width:0}
.gm-account-page .gm-inline input[name="reason"]{min-width:0;width:100%}
.gm-account-page .gm-inline label{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:10px;color:#8c9598}
.gm-account-page .gm-inline .btn-sm{min-width:72px;padding-inline:9px}
.gm-account-page .gm-items .data-table{table-layout:auto}
.gm-account-page .gm-items .data-table th:nth-child(1){width:52px}
.gm-account-page .gm-items .data-table th:nth-child(2){width:92px}
.gm-account-page .gm-items .data-table th:nth-child(3){width:112px}
.gm-account-page .wpf-grid>section:nth-child(2) .data-table{min-width:100%}
@media(max-width:1050px){body.rakion-admin .gm-account-actions{grid-template-columns:1fr}.gm-account-actions>.grid{grid-template-columns:1fr!important}.gm-account-summary>.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){body.rakion-admin .adm-brand{min-height:78px}.gm-account-summary>.grid{grid-template-columns:1fr}.gm-account-summary>.flex{align-items:flex-start;gap:12px}.gm-account-summary .text-right{min-width:130px}body.rakion-admin .gm-account-summary,body.rakion-admin .gm-account-actions,body.rakion-admin .gm-character-section,body.rakion-admin .gm-audit-section{padding:14px}}
.gm-index-page>.adm-card{padding:18px 20px}
.gm-index-page>.adm-card>h2{margin:0 0 14px;padding-bottom:11px;border-bottom:1px solid #343c40;color:#d7b36b!important;font:700 16px Georgia,serif}
.gm-search-card form{align-items:stretch;gap:8px}
.gm-search-card form .input-field{min-width:0;margin:0}
.gm-search-card form button{min-width:108px;margin:0}
.gm-results-card .table-scroll,.gm-recent-card .table-scroll{border:1px solid #2d3539;background:#0b0f11}
.gm-results-card .data-table td:first-child{color:#e0d4bd!important;font-weight:700}
@media(max-width:620px){.gm-index-page>.adm-card{padding:14px}.gm-search-card form{display:grid;grid-template-columns:1fr}.gm-search-card form button{width:100%}}

/* ============================================================
   RAKION EVOLUTION — CLAN CENTER
   ============================================================ */
.clan-hub{--cl-line:rgba(173,132,67,.28);--cl-steel:rgba(126,143,149,.18);--cl-gold:#c08a45;--cl-cyan:#6b9ca3;color:#a9b0b4}
.clan-page-head{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px;padding:24px 26px;overflow:hidden;border:1px solid var(--cl-line);background:linear-gradient(135deg,#171b1e,#090b0d 68%);box-shadow:0 14px 32px #0008;animation:clan-rise .5s ease both}
.clan-page-head:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 4% 0,rgba(188,122,47,.12),transparent 35%),repeating-linear-gradient(115deg,transparent 0 15px,rgba(255,255,255,.008) 16px,transparent 17px)}
.clan-page-head>div,.clan-page-head>a{position:relative;z-index:1}.clan-kicker{display:flex;align-items:center;gap:8px;margin-bottom:5px;color:#a7773d;font-size:8px;font-weight:700;letter-spacing:2.8px}.clan-kicker i{font-size:5px;color:#5d969d}.clan-page-head h1{margin:0;color:#d4d7d9;font:400 27px 'Albertus Nova',Georgia,serif;letter-spacing:2px;text-transform:uppercase}.clan-page-head p{margin:7px 0 0;color:#737c81;font-size:11px}.clan-rank-link{display:inline-flex;align-items:center;gap:9px;padding:10px 13px;color:#cfb477;font-size:9px;font-weight:700;letter-spacing:1px;border:1px solid #78562f;background:#141719;transition:.2s}.clan-rank-link:hover{color:#f1dbab;border-color:#b17b3a;transform:translateY(-2px)}
.clan-banner{position:relative;display:grid;grid-template-columns:100px minmax(0,1fr) auto;align-items:center;gap:23px;min-height:178px;margin-bottom:13px;padding:25px 28px;overflow:hidden;border:1px solid var(--cl-line);background:radial-gradient(circle at 8% 50%,rgba(170,106,39,.12),transparent 27%),radial-gradient(circle at 88% 50%,rgba(69,114,122,.09),transparent 31%),linear-gradient(145deg,#181c1f,#090b0d);box-shadow:inset 0 0 0 1px #ffffff08,0 18px 38px #0007;animation:clan-rise .55s ease .06s both}.clan-banner:after{content:"";position:absolute;left:25px;right:25px;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#a66b2d,#6b9ca3,transparent)}
.clan-emblem{position:relative;width:54px;height:62px;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;color:#b77b38;clip-path:polygon(50% 0,94% 18%,84% 78%,50% 100%,16% 78%,6% 18%);background:linear-gradient(145deg,#5d3a19,#b47c3d 28%,#372617 58%,#8a6234);filter:drop-shadow(0 7px 8px #0008)}.clan-emblem:before{content:"";position:absolute;inset:3px;clip-path:inherit;background:linear-gradient(145deg,#22272a,#080a0c 60%,#171a1c)}.clan-emblem i,.clan-emblem b{position:relative;z-index:1}.clan-emblem b{position:absolute;bottom:10px;color:#d2b36f;font:700 9px Georgia,serif}.clan-emblem.has-image{clip-path:polygon(50% 0,94% 18%,84% 78%,50% 100%,16% 78%,6% 18%);padding:4px}.clan-emblem.has-image:before{display:none}.clan-emblem img{position:relative;width:100%;height:100%;object-fit:cover;clip-path:inherit}.clan-emblem--large{width:88px;height:104px;font-size:27px}.clan-emblem--large b{bottom:18px;font-size:12px}
.clan-banner-copy>span{color:#a8773c;font-size:8px;font-weight:700;letter-spacing:2px}.clan-banner-copy h2{margin:4px 0 7px;color:#e0e2e3;font:400 29px 'Albertus Nova',Georgia,serif;letter-spacing:1px}.clan-banner-copy p{max-width:570px;margin:0;color:#7c858a;font-size:11.5px;line-height:1.6}.clan-banner-stats{display:grid;grid-template-columns:repeat(3,90px);background:#07090a99;border:1px solid var(--cl-steel)}.clan-banner-stats div{min-height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid var(--cl-steel)}.clan-banner-stats div:last-child{border:0}.clan-banner-stats small{color:#5f696e;font-size:7px;letter-spacing:1.5px}.clan-banner-stats strong{margin-top:5px;color:#d0c19c;font:400 17px Georgia,serif}.clan-banner-stats em{color:#596267;font:400 9px Inter,sans-serif}
.clan-tabs{display:flex;gap:1px;margin-bottom:14px;border:1px solid var(--cl-line);background:#6d4d2c}.clan-tabs a{min-height:42px;display:flex;align-items:center;gap:8px;padding:0 16px;color:#899196;background:linear-gradient(#161a1d,#0c0f11);font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}.clan-tabs a:hover{color:#dbca9f;background:#1c2023}.clan-tabs i{color:#a87539}.clan-tabs b{min-width:17px;height:17px;display:grid;place-items:center;border-radius:50%;color:#171008;background:#b67c3a;font-size:8px}
.clan-master-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:13px;margin-bottom:13px}.clan-panel{margin-bottom:13px;border:1px solid var(--cl-line);background:linear-gradient(145deg,#14181a,#080a0c);box-shadow:inset 0 0 0 1px #ffffff05;animation:clan-rise .5s ease .1s both}.clan-panel>header{min-height:54px;display:flex;align-items:center;gap:11px;padding:11px 15px;border-bottom:1px solid rgba(173,132,67,.16);background:linear-gradient(#191d20,#0e1113)}.clan-panel>header>i{width:28px;color:#b77c39;font-size:14px;text-align:center}.clan-panel>header>div{flex:1;min-width:0}.clan-panel>header h3{margin:0;color:#cdd1d3;font:400 11px 'Albertus Nova',Georgia,serif;letter-spacing:1px;text-transform:uppercase}.clan-panel>header p{margin:3px 0 0;color:#616b70;font-size:9px}.clan-count{min-width:27px;height:24px;display:grid;place-items:center;color:#bfa66f;background:#0a0c0e;border:1px solid #51422e;font-size:9px}
.clan-form{display:grid;gap:12px;padding:16px}.clan-form label{display:grid;gap:6px;color:#858e93;font-size:9px;font-weight:600;letter-spacing:.5px}.clan-form label small{color:#586166;font-weight:400}.clan-form input:not([type=radio]),.clan-form textarea,.clan-inline-form input,.clan-request-form input,.clan-danger-zone input{width:100%;min-height:39px;padding:9px 11px;color:#d1d4d5;background:#090b0d;border:1px solid #30383c;border-radius:1px;outline:0;font:400 11px Inter,sans-serif}.clan-form textarea{resize:vertical}.clan-form input:focus,.clan-form textarea:focus,.clan-inline-form input:focus,.clan-request-form input:focus{border-color:#8b6336;box-shadow:0 0 0 2px #a8703015}.clan-btn{min-height:39px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;color:#e2c98e;background:linear-gradient(#322719,#1a150f);border:1px solid #76542e;font-size:8px;font-weight:800;letter-spacing:1px;cursor:pointer;transition:.2s}.clan-btn:hover{color:#ffe7b1;border-color:#b47b38;filter:brightness(1.15);transform:translateY(-1px)}.clan-btn--large{min-height:48px;font-size:10px}.clan-inline-form{display:grid;grid-template-columns:1fr auto;gap:8px;padding:16px 16px 9px}.clan-rule{display:flex;gap:7px;padding:0 16px 16px;color:#596267;font-size:9px;line-height:1.5}.clan-rule i{color:#658b91}
.clan-pay-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px}.clan-pay-choice>label{cursor:pointer}.clan-pay-choice input{position:absolute;opacity:0;pointer-events:none}.clan-pay-choice span{min-height:58px;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;padding:9px 11px;color:#747d82;background:#090b0d;border:1px solid #30383c;transition:.2s}.clan-pay-choice span i{grid-row:1/3;color:#a97737;font-size:16px}.clan-pay-choice span b{color:#c9cdd0;font-size:12px}.clan-pay-choice span small{grid-column:2;color:#535c61;font-size:7px}.clan-pay-choice input:checked+span{color:#d6c39a;border-color:#9e7038;background:#17130e;box-shadow:inset 0 0 14px #b5792510}.clan-pay-choice input[value=cash]:checked+span i{color:#6c9da5}
.clan-request-list,.clan-member-list,.clan-audit-list{display:grid}.clan-request-list article,.clan-member{display:flex;align-items:center;gap:12px;min-height:66px;padding:10px 15px;border-bottom:1px solid #252c2f}.clan-request-list article:last-child,.clan-member:last-child{border:0}.clan-avatar{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;color:#a87639;background:#090b0d;border:1px solid #353c40;transform:rotate(45deg)}.clan-avatar i{transform:rotate(-45deg)}.clan-request-list article>div{flex:1}.clan-request-list strong,.clan-member-id strong{display:flex;align-items:center;gap:7px;color:#c9ccce;font-size:11px}.clan-request-list small,.clan-member-id small{display:block;margin-top:3px;color:#60696e;font-size:9px}.clan-request-list p{margin:5px 0 0;color:#858d92;font-size:10px}.clan-request-list form,.clan-member-actions,.clan-invite-grid form{display:flex;align-items:center;gap:5px}.clan-icon-btn{width:34px;height:34px;display:grid;place-items:center;color:#bd9b5d;background:#111416;border:1px solid #4a4030;cursor:pointer;transition:.2s}.clan-icon-btn:hover{transform:translateY(-2px);border-color:#b37b3b}.clan-icon-btn.is-ok{color:#8fc263;border-color:#3d5a32}.clan-icon-btn.is-danger{color:#cc675c;border-color:#653832}.clan-icon-btn.is-ok:hover{background:#14200f}.clan-icon-btn.is-danger:hover{background:#25110f}
.clan-member{display:grid;grid-template-columns:42px minmax(145px,1fr) 105px 105px auto;min-height:72px}.clan-member.is-master{background:linear-gradient(90deg,rgba(171,111,40,.08),transparent 46%)}.clan-member-id em{padding:2px 5px;color:#d5bb7e;background:#5d421f;border:1px solid #7b582d;font-size:6px;font-style:normal;letter-spacing:1px}.clan-member-stat small{display:block;color:#50595e;font-size:7px;letter-spacing:1px}.clan-member-stat strong{display:block;margin-top:4px;color:#aeb4b7;font-size:10px}.clan-member-actions{justify-content:flex-end}.clan-parent-form{display:flex}.clan-parent-form select{max-width:115px;height:34px;padding:0 7px;color:#8d969a;background:#0b0e10;border:1px solid #31383c;font-size:8px}.clan-parent-form>button{width:31px;color:#6e9ca2;background:#101416;border:1px solid #324448;cursor:pointer}
.clan-audit-list>div{min-height:51px;display:flex;align-items:center;gap:11px;padding:8px 15px;border-bottom:1px solid #252c2f}.clan-audit-list>div:last-child{border:0}.clan-audit-list>div>i{width:29px;height:29px;display:grid;place-items:center;color:#8b673b;background:#0a0c0e;border:1px solid #34393c}.clan-audit-list span{display:flex;flex-direction:column;gap:3px}.clan-audit-list strong{color:#aeb4b7;font-size:9px;text-transform:uppercase}.clan-audit-list small{color:#555f64;font-size:8px}.clan-empty{min-height:80px;display:flex;align-items:center;justify-content:center;gap:9px;color:#5d666b;font-size:10px}.clan-empty-major{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid var(--cl-line);background:#0b0e10}.clan-empty-major i{color:#ae7839;font-size:27px}.clan-empty-major strong{color:#c5c9cb}.clan-empty-major span{color:#697277;font-size:10px}
.clan-danger-zone{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border:1px solid #63352f;background:linear-gradient(90deg,rgba(98,34,27,.14),#0a0c0e)}.clan-danger-zone h3{margin:0;color:#c87970;font:400 12px Georgia,serif;text-transform:uppercase}.clan-danger-zone p{margin:4px 0 0;color:#6d5a58;font-size:9px}.clan-danger-zone form{display:flex;gap:7px}.clan-danger-zone input{width:210px}.clan-danger-zone button{padding:0 14px;color:#e1877d;background:#25100e;border:1px solid #743c35;font-size:8px;font-weight:700;letter-spacing:1px;cursor:pointer}
.clan-onboarding{display:grid;gap:14px}.clan-create-card{position:relative;display:grid;grid-template-columns:100px minmax(190px,.8fr) 1.2fr;align-items:center;gap:22px;padding:28px;overflow:hidden;border:1px solid var(--cl-line);background:radial-gradient(circle at 6% 50%,rgba(184,116,38,.12),transparent 28%),linear-gradient(145deg,#181c1f,#090b0d)}.clan-create-card:after{content:"";position:absolute;right:-100px;top:-170px;width:420px;height:420px;border:1px solid #75868d12;transform:rotate(45deg)}.clan-create-card>*{position:relative;z-index:1}.clan-create-sigil{width:84px;height:98px;display:grid;place-items:center;color:#c28740;font-size:29px;clip-path:polygon(50% 0,94% 18%,84% 78%,50% 100%,16% 78%,6% 18%);background:linear-gradient(145deg,#5f3b19,#b57d3d 30%,#322318 60%,#8d6433);box-shadow:inset 0 0 0 4px #0b0d0f}.clan-create-copy>span{color:#9c6f38;font-size:7px;font-weight:700;letter-spacing:2px}.clan-create-copy h2{margin:4px 0 7px;color:#dadcdd;font:400 24px Georgia,serif}.clan-create-copy p{margin:0;color:#727b80;font-size:10.5px;line-height:1.6}.clan-create-form{display:grid;gap:10px}.clan-create-form>label{display:grid;gap:5px;color:#788186;font-size:8px;letter-spacing:.7px}.clan-create-form>label input{min-height:41px;padding:0 11px;color:#d0d3d4;background:#080a0c;border:1px solid #353c40;outline:0}
.clan-invite-grid,.clan-discover-grid{display:grid;gap:1px;background:#242b2e}.clan-invite-grid{grid-template-columns:repeat(2,1fr)}.clan-invite-grid article{display:flex;align-items:center;gap:12px;padding:13px 15px;background:#0d1012}.clan-invite-grid article>div{flex:1}.clan-invite-grid strong{display:block;color:#c8ccce;font-size:11px}.clan-invite-grid small{color:#626b70;font-size:8px}.clan-discover-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.clan-discover-grid article{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;padding:16px;background:linear-gradient(145deg,#14181a,#090b0d)}.clan-discover-copy strong{display:block;color:#ccd0d2;font:400 14px Georgia,serif}.clan-discover-copy>small{color:#687176;font-size:8px}.clan-discover-copy p{min-height:30px;margin:6px 0;color:#747d82;font-size:9px;line-height:1.5}.clan-discover-copy>span{color:#5c666b;font-size:8px}.clan-discover-copy>span b{color:#a98b55}.clan-request-form,.clan-discover-grid article>form{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:6px}.clan-request-form input{min-height:34px}.clan-request-btn{min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 11px;color:#cfb576;background:#1e1912;border:1px solid #6b4c2b;font-size:7px;font-weight:700;letter-spacing:.8px;cursor:pointer}.clan-request-btn.is-pending{grid-column:1/-1;color:#839095;background:#101416;border-color:#344347}
@keyframes clan-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:1050px){.clan-master-grid{grid-template-columns:1fr 1fr}.clan-profile-panel{grid-row:span 2}.clan-banner{grid-template-columns:85px 1fr}.clan-banner-stats{grid-column:1/-1}.clan-create-card{grid-template-columns:80px 1fr}.clan-create-form{grid-column:1/-1}.clan-member{grid-template-columns:42px 1fr 85px auto}.clan-member-stat:nth-of-type(2){display:none}.clan-member-actions{grid-column:2/-1}}
@media(max-width:700px){.clan-page-head{align-items:flex-start;padding:19px}.clan-page-head h1{font-size:21px}.clan-page-head p{display:none}.clan-rank-link{padding:8px;font-size:0}.clan-rank-link i{font-size:11px}.clan-banner{grid-template-columns:65px 1fr;padding:19px;gap:14px}.clan-emblem--large{width:62px;height:75px}.clan-banner-copy h2{font-size:22px}.clan-banner-stats{grid-template-columns:repeat(3,1fr)}.clan-tabs{overflow-x:auto}.clan-tabs a{white-space:nowrap}.clan-master-grid,.clan-invite-grid,.clan-discover-grid{grid-template-columns:1fr}.clan-profile-panel{grid-row:auto}.clan-create-card{grid-template-columns:60px 1fr;padding:20px;gap:14px}.clan-create-sigil{width:58px;height:70px;font-size:21px}.clan-pay-choice{grid-template-columns:1fr}.clan-member{grid-template-columns:37px minmax(0,1fr) auto;padding:11px}.clan-member-stat{display:none}.clan-member-actions{grid-column:1/-1;justify-content:flex-end;flex-wrap:wrap}.clan-parent-form{flex:1}.clan-parent-form select{max-width:none;flex:1}.clan-danger-zone{align-items:stretch;flex-direction:column}.clan-danger-zone form{display:grid}.clan-danger-zone input{width:100%}.clan-request-list article{align-items:flex-start;flex-wrap:wrap}.clan-request-list article form{margin-left:auto}.clan-inline-form{grid-template-columns:1fr}.clan-discover-grid article{grid-template-columns:54px 1fr}}

/* AdminCP — clan operations */
.adm-clans{--ac-gold:#bd8842;--ac-line:#30383d;display:grid;gap:14px;color:#aeb5b8}
.clan-admin-head,.clan-admin-detail-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:126px;padding:22px 26px;overflow:hidden;border:1px solid #4d402d;border-left:3px solid var(--ac-gold);background:radial-gradient(circle at 86% 20%,#4d351633,transparent 31%),linear-gradient(122deg,#151a1e,#090c0e 72%);box-shadow:inset 0 0 0 1px #ffffff05,0 12px 30px #0006}
.clan-admin-head:after,.clan-admin-detail-head:after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,#a76f2f,transparent 62%)}
.clan-admin-head>div{position:relative;z-index:1}.clan-admin-head span,.clan-admin-detail-head>div>small{color:#a8783d;font-size:9px;font-weight:800;letter-spacing:.18em}.clan-admin-head h1,.clan-admin-detail-head h1{margin:5px 0;color:#e1e4e4;font:400 27px Georgia,serif;letter-spacing:.035em}.clan-admin-head p,.clan-admin-detail-head p{margin:0;color:#757f84;font-size:11px}.clan-admin-head>i{color:#b17a3b;font-size:48px;filter:drop-shadow(0 5px 8px #000)}
.clan-admin-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.clan-admin-metrics>div{min-height:76px;display:grid;grid-template-columns:38px 1fr;align-items:center;padding:13px 16px;border:1px solid var(--ac-line);background:linear-gradient(145deg,#14191c,#0a0d0f)}.clan-admin-metrics i{grid-row:1/3;color:#a7763b;font-size:18px}.clan-admin-metrics span{display:grid}.clan-admin-metrics small{color:#697278;font-size:8px;letter-spacing:.13em}.clan-admin-metrics strong{margin-top:3px;color:#ddd7c8;font:400 20px Georgia,serif}
.clan-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.clan-admin-card,.clan-admin-list,.clan-admin-danger{padding:0!important;overflow:hidden;border:1px solid var(--ac-line)!important;background:linear-gradient(145deg,#13181b,#090c0e)!important}.clan-admin-card>h2,.clan-admin-list>header{min-height:53px;display:flex;align-items:center;gap:10px;margin:0!important;padding:13px 17px;border-bottom:1px solid #30383c;color:#d2d5d5!important;font:700 13px Georgia,serif!important;letter-spacing:.03em}.clan-admin-card>h2 i{color:#b78240}.clan-admin-card>h2 em{margin-left:auto;color:#6e787d;font:400 8px Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em}
.admin-clan-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:17px}.admin-clan-form label{display:grid;gap:6px;color:#939ca0;font-size:9px;font-weight:700;letter-spacing:.055em;text-transform:uppercase}.admin-clan-form .is-wide{grid-column:1/-1}.admin-clan-form input,.admin-clan-form textarea,.clan-admin-danger input,.clan-admin-hierarchy input,.clan-admin-hierarchy select,.clan-admin-actions input{width:100%;min-width:0;color:#d4d7d8!important;background:#090c0e!important;border:1px solid #353d41!important;border-radius:1px!important}.admin-clan-form input:focus,.admin-clan-form textarea:focus,.clan-admin-hierarchy input:focus,.clan-admin-hierarchy select:focus{border-color:#906636!important;box-shadow:0 0 0 2px #a8782918!important}.admin-clan-prices{grid-template-columns:repeat(3,minmax(0,1fr))}.clan-admin-note{margin:0 17px 17px;padding:10px 12px;color:#788389;background:#0b1012;border-left:2px solid #51747a;font-size:9px}.clan-admin-note i{margin-right:7px;color:#6e9ca3}
.clan-admin-list>header{justify-content:space-between}.clan-admin-list>header h2{margin:0;color:#d2d5d5;font:700 13px Georgia,serif}.clan-admin-list>header p{margin:4px 0 0;color:#657075;font:400 9px Inter,sans-serif}.clan-admin-list>header form{display:flex}.clan-admin-list>header input{min-width:250px;height:36px;padding:0 10px;color:#d0d4d5;background:#090c0e;border:1px solid #343d41}.clan-admin-list>header button{width:38px;color:#c19553;background:#17130e;border:1px solid #5b462e}.clan-admin-list .data-table{min-width:920px}.clan-admin-list .data-table tr{background:#0d1113}.clan-admin-list .data-table tbody tr:hover{background:#151a1d}.clan-admin-list code{color:#7fabb0}.clan-admin-list td strong{color:#d1d4d5}.clan-admin-list td small{color:#667075}.clan-desync,.adm-master-badge{display:inline-flex;margin-left:7px;padding:2px 5px;color:#e2a85a;background:#2a1a0c;border:1px solid #724a20;font-size:7px;font-style:normal}.is-clan-master{box-shadow:inset 3px 0 #b27d3a}.adm-pill{min-width:46px;padding:5px 9px;color:#d2b679;background:#18140e;border:1px solid #5e492f;font-size:9px;text-align:center}
.clan-admin-detail-head{justify-content:flex-start}.clan-admin-detail-head>a{width:36px;height:36px;display:grid;place-items:center;color:#9aa3a7;background:#0c1012;border:1px solid #343c40}.clan-admin-shield{width:58px;height:66px;display:grid;place-items:center;color:#c18a42;font-size:23px;background:#0a0d0f;border:1px solid #5e492f;clip-path:polygon(50% 0,95% 18%,84% 80%,50% 100%,16% 80%,5% 18%)}.clan-admin-detail-head>div:nth-of-type(1){flex:1}.clan-admin-detail-stats{display:grid!important;grid-template-columns:repeat(3,95px);border:1px solid #343d41}.clan-admin-detail-stats span{min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid #343d41}.clan-admin-detail-stats span:last-child{border:0}.clan-admin-detail-stats small{color:#687177!important;font-size:7px!important}.clan-admin-detail-stats b{margin-top:5px;color:#d8ccb0;font:400 15px Georgia,serif}
.clan-admin-actions{display:flex;gap:6px}.clan-admin-actions form{display:grid;grid-template-columns:minmax(105px,1fr) 34px;gap:5px;min-width:155px}.clan-admin-actions input{height:34px;padding:0 7px;font-size:9px}.clan-admin-actions button{min-width:34px!important;padding:0!important}.clan-admin-pending{display:grid}.clan-admin-pending>div{display:grid;grid-template-columns:120px 1fr auto;gap:10px;padding:11px 15px;border-bottom:1px solid #272e32}.clan-admin-pending strong{color:#cbd0d1;font-size:10px}.clan-admin-pending span,.clan-admin-pending small{color:#697378;font-size:9px}.clan-admin-empty{padding:22px;color:#646e73;font-size:10px;text-align:center}
.clan-admin-hierarchy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#293034}.clan-admin-hierarchy-grid form{display:grid;grid-template-columns:minmax(105px,.8fr) minmax(120px,.8fr) minmax(150px,1.2fr) 36px;gap:7px;align-items:center;padding:10px 12px;background:#0d1113}.clan-admin-hierarchy-grid span{display:grid;min-width:0}.clan-admin-hierarchy-grid strong{overflow:hidden;color:#cbd0d1;font-size:10px;text-overflow:ellipsis}.clan-admin-hierarchy-grid small{color:#606a6f;font-size:8px}.clan-admin-hierarchy-grid select,.clan-admin-hierarchy-grid input{height:36px;padding:0 8px;font-size:9px}.clan-admin-hierarchy-grid button:disabled,.clan-admin-hierarchy-grid input:disabled,.clan-admin-hierarchy-grid select:disabled{opacity:.35;cursor:not-allowed}
.clan-admin-danger{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 19px!important;border-color:#633a34!important;background:linear-gradient(90deg,#271310,#090c0e 45%)!important}.clan-admin-danger h2{margin:0;color:#d27e72;font:700 13px Georgia,serif}.clan-admin-danger p{margin:4px 0 0;color:#785e5a;font-size:9px}.clan-admin-danger form{display:grid;grid-template-columns:170px 220px auto;gap:7px}.clan-admin-danger input{height:38px;padding:0 9px;font-size:9px}
@media(max-width:1180px){.clan-admin-hierarchy-grid{grid-template-columns:1fr}.clan-admin-detail-stats{grid-template-columns:repeat(3,78px)}.admin-clan-prices{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.clan-admin-grid,.clan-admin-metrics{grid-template-columns:repeat(2,1fr)}.clan-admin-detail-head{flex-wrap:wrap}.clan-admin-detail-stats{width:100%;grid-template-columns:repeat(3,1fr)}.clan-admin-danger{align-items:stretch;flex-direction:column}.clan-admin-danger form{grid-template-columns:1fr 1fr auto}}
@media(max-width:620px){.clan-admin-head{padding:17px}.clan-admin-head h1{font-size:21px}.clan-admin-head>i{font-size:34px}.clan-admin-grid,.clan-admin-metrics{grid-template-columns:1fr}.admin-clan-form,.admin-clan-prices{grid-template-columns:1fr}.admin-clan-form .is-wide{grid-column:auto}.clan-admin-list>header{align-items:stretch;flex-direction:column}.clan-admin-list>header input{min-width:0;width:100%}.clan-admin-hierarchy-grid form{grid-template-columns:1fr 1fr 36px}.clan-admin-hierarchy-grid form>span{grid-column:1/-1}.clan-admin-danger form{grid-template-columns:1fr}.clan-admin-pending>div{grid-template-columns:1fr}.clan-admin-detail-head{padding:16px}}

/* Discord beta chest — AdminCP */
.dbot-hero{position:relative;min-height:250px;display:grid;grid-template-columns:340px minmax(0,1fr) 255px;align-items:stretch;margin-bottom:14px;overflow:hidden;border:1px solid #3b4348;border-left:3px solid #aa7135;background:radial-gradient(circle at 22% 40%,#80501d29,transparent 34%),linear-gradient(112deg,#151a1e,#090b0d 65%);box-shadow:0 18px 46px #0008,inset 0 0 0 1px #ffffff05}
.dbot-hero:after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,#e49338,#80501e 35%,transparent 75%)}
.dbot-hero-art{position:relative;min-height:250px;overflow:hidden;background:#080a0b}.dbot-hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 48%,#111518),linear-gradient(0deg,#0c0f1180,transparent 60%)}.dbot-hero-art img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.12)}
.dbot-hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:28px 30px}.dbot-eyebrow{color:#bd8443;font-size:9px;font-weight:800;letter-spacing:.2em}.dbot-eyebrow i{margin-right:9px;color:#6f80e9}.dbot-hero-copy h1{margin:8px 0 9px;color:#ece6d8;font:400 32px Georgia,serif;letter-spacing:.035em}.dbot-hero-copy h1 b{color:#d7903e;font-weight:400}.dbot-hero-copy p{max-width:620px;margin:0;color:#8d969b;font-size:11px;line-height:1.7}.dbot-actions{display:flex;gap:8px;margin-top:19px}.dbot-actions form{margin:0}.dbot-actions button{height:39px}
.dbot-health{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:24px 20px;border-left:1px solid #343c40;background:#090c0ed9}.dbot-health>strong{margin-bottom:5px;color:#d7dadd;font-size:10px;letter-spacing:.08em}.dbot-health>strong i{margin-right:8px}.dbot-health span{display:flex;align-items:center;gap:7px;color:#788288;font-size:9px}.dbot-health span i{width:15px;height:15px;display:grid;place-items:center;border:1px solid currentColor;font-size:7px}.dbot-health .ok{color:#82b35c}.dbot-health .bad{color:#bc6659}
.dbot-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.dbot-stats article{min-height:76px;display:grid;grid-template-columns:42px 1fr;align-items:center;padding:13px 17px;border:1px solid #343d42;background:linear-gradient(145deg,#151a1e,#0a0d0f);box-shadow:inset 0 1px #ffffff05}.dbot-stats article>i{grid-row:1/3;color:#b97d3d;font-size:19px}.dbot-stats span{display:grid}.dbot-stats b{color:#e0d7c4;font:400 21px Georgia,serif}.dbot-stats small{margin-top:3px;color:#667076;font-size:8px;letter-spacing:.09em;text-transform:uppercase}
.dbot-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,.8fr);gap:14px;margin-bottom:14px}.dbot-config-card{overflow:hidden}.dbot-config-card .adm-card-h,.dbot-live .adm-card-h,.dbot-outcomes .adm-card-h,.dbot-history .adm-card-h{gap:9px}.dbot-config-card .adm-card-h i,.dbot-live .adm-card-h i,.dbot-outcomes .adm-card-h i,.dbot-history .adm-card-h i{color:#b97f40}.dbot-form{display:grid;gap:13px}.dbot-form .form-group{display:grid;gap:6px;margin:0}.dbot-form .form-label{color:#7f898f;font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.dbot-form .input-field{min-height:39px;border-radius:1px!important;background:#090c0e!important;border-color:#343d42!important;color:#ced3d5!important}.dbot-form textarea.input-field{padding-top:10px}.dbot-form .input-field:focus{border-color:#9c6b37!important;box-shadow:0 0 0 2px #ae77351b!important}.dbot-mono{font:10px Consolas,monospace!important;letter-spacing:.04em}.dbot-section-title{display:flex;align-items:center;gap:10px;margin-top:7px;color:#c8c0ad;font:700 10px Georgia,serif;letter-spacing:.08em;text-transform:uppercase}.dbot-section-title:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,#40474a,transparent)}
.dbot-switch-line{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid #3b4448;background:#0b0f11}.dbot-switch-line div{display:grid;gap:3px}.dbot-switch-line strong{color:#d6d9da;font-size:10px}.dbot-switch-line small{color:#69747a;font-size:8px}.switch{position:relative;display:inline-flex;flex:none}.switch input{position:absolute;opacity:0}.switch>span{position:relative;width:42px;height:22px;border:1px solid #465056;background:#171c1f;cursor:pointer;transition:.2s}.switch>span:before{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;background:#6b7478;transition:.2s}.switch input:checked+span{border-color:#a16e37;background:#2b1d0f;box-shadow:0 0 12px #c8802530}.switch input:checked+span:before{left:23px;background:#dfa250}.switch.sm>span{width:34px;height:18px}.switch.sm>span:before{width:10px;height:10px}.switch.sm input:checked+span:before{left:19px}
.dbot-endpoint{display:grid;grid-template-columns:32px 1fr 34px;align-items:center;gap:10px;padding:10px 12px;border:1px solid #344349;border-left:2px solid #4c929b;background:#091013}.dbot-endpoint>i{color:#65aab3;text-align:center}.dbot-endpoint span{display:grid;min-width:0}.dbot-endpoint small{color:#52777c;font-size:7px;font-weight:800;letter-spacing:.14em}.dbot-endpoint code{overflow:hidden;color:#94bfc3;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.dbot-endpoint button{width:31px;height:31px;color:#8fa9ac;background:#12191c;border:1px solid #34474c;cursor:pointer}.dbot-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.dbot-options label{display:flex;align-items:center;gap:8px;padding:9px 10px;color:#8f989d;background:#0a0e10;border:1px solid #30383c;font-size:9px}.dbot-options input{accent-color:#b97d3c}
.dbot-side-stack{display:flex;flex-direction:column;gap:14px}.dbot-live-body{display:grid;gap:10px;padding:18px}.dbot-live-id{color:#c3833f;font-size:8px;font-weight:900;letter-spacing:.16em}.dbot-live-body>strong{color:#d7dadb;font:700 14px Georgia,serif}.dbot-progress{height:7px;padding:1px;border:1px solid #394348;background:#07090a}.dbot-progress i{display:block;height:100%;background:linear-gradient(90deg,#9c5829,#e3993d);box-shadow:0 0 10px #df8e3c66}.dbot-live-body small{color:#6b757a;font-size:8px}.dbot-live-body form{margin-top:6px}.dbot-empty{min-height:175px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px;color:#596267;text-align:center}.dbot-empty>i{margin-bottom:12px;color:#4c5559;font-size:28px}.dbot-empty strong{color:#92999c;font-size:10px}.dbot-empty span{margin-top:5px;font-size:8px}.dbot-muted{margin:0 0 12px;color:#707a7f;font-size:9px;line-height:1.6}.dbot-muted code{color:#9eb4b6}.dbot-log{max-height:335px;overflow:auto}.dbot-log-line{display:grid;grid-template-columns:8px 1fr;gap:9px;padding:10px 13px;border-bottom:1px solid #293034}.dbot-log-line>i{width:6px;height:6px;margin-top:4px;border-radius:50%;background:#729e56}.dbot-log-line.is-warning>i{background:#c98d3d}.dbot-log-line.is-error>i{background:#bc554a}.dbot-log-line span{display:grid;gap:2px;color:#7d878c;font-size:8px}.dbot-log-line strong{color:#b9c0c2;font-size:9px}.dbot-log-line small{color:#4f595e;font-size:7px}
.dbot-outcomes,.dbot-history{margin-bottom:14px;overflow:hidden}.dbot-outcomes .adm-card-h>span{margin-left:auto;color:#6e787d;font:400 8px Inter,sans-serif;letter-spacing:.06em}.dbot-outcome-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:#343c40}.dbot-outcome{display:flex;flex-direction:column;gap:11px;padding:14px;background:linear-gradient(155deg,#12171a,#090c0e);transition:.2s}.dbot-outcome:hover{position:relative;z-index:1;background:#151b1e;box-shadow:0 0 0 1px #586065}.dbot-outcome.is-off{opacity:.46}.dbot-outcome-top{display:flex;align-items:center;gap:9px;padding-bottom:10px;border-bottom:1px solid #30383c}.dbot-outcome-top>i{width:31px;height:31px;display:grid;place-items:center;color:#d69a4c;border:1px solid #5a442d;background:#21160d}.dbot-outcome.kind-trap .dbot-outcome-top>i{color:#d16b5d;border-color:#603b36;background:#21100e}.dbot-outcome.kind-empty .dbot-outcome-top>i{color:#829095;border-color:#3f494e;background:#101518}.dbot-outcome-top>span{display:grid;min-width:0;flex:1}.dbot-outcome-top b{overflow:hidden;color:#cbd0d1;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.dbot-outcome-top small{margin-top:2px;color:#6e787d;font-size:7px}.dbot-outcome label{display:grid;gap:4px;color:#687278;font-size:7px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.dbot-outcome .input-field{min-width:0;height:33px;padding:0 7px;color:#bbc1c3!important;background:#080b0c!important;border:1px solid #333b3f!important;border-radius:1px!important;font-size:8px}.dbot-outcome button{margin-top:auto}.dbot-id{display:block;margin-top:2px;color:#566166;font-size:7px}.dbot-kind{display:inline-flex;padding:3px 6px;border:1px solid #425055;color:#8fa0a5;background:#10171a;font-size:7px;font-weight:900}.dbot-kind.kind-cash{color:#d7a254;border-color:#5e4527;background:#1c140b}.dbot-kind.kind-trap{color:#d07769;border-color:#623c36;background:#1d100e}

/* Account link hand-off from Discord */
.discord-link-shell{min-height:calc(100vh - 190px);display:grid;place-items:center;padding:45px 15px}.discord-link-card{position:relative;width:min(560px,100%);padding:40px 42px;overflow:hidden;color:#9da5a8;text-align:center;border:1px solid #3f484c;border-top:2px solid #b87b3a;background:radial-gradient(circle at 50% 0,#8b542224,transparent 38%),linear-gradient(145deg,#151a1d,#080b0d);box-shadow:0 25px 70px #000b,inset 0 0 0 1px #fff04}.discord-link-card:after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,transparent,#c9873d,transparent)}.discord-link-sigil{width:70px;height:70px;display:grid;place-items:center;margin:0 auto 17px;color:#9aa7ff;font-size:30px;border:1px solid #4e598c;background:#171a2b;clip-path:polygon(50% 0,93% 20%,84% 82%,50% 100%,16% 82%,7% 20%)}.discord-kicker{margin:0;color:#be8444;font-size:8px;font-weight:900;letter-spacing:.2em}.discord-link-card h1{margin:8px 0 12px;color:#e3ded1;font:400 25px Georgia,serif}.discord-link-card>p:not(.discord-kicker){margin:0 auto 22px;line-height:1.7;font-size:10px}.discord-link-card strong{color:#e0c791}.discord-link-map{display:grid;grid-template-columns:1fr 32px 1fr;align-items:center;gap:8px;margin:22px 0;padding:15px;border:1px solid #343e42;background:#090d0f}.discord-link-map span{display:flex;align-items:center;justify-content:center;gap:8px;color:#c8cccd;font-size:10px}.discord-link-map span:first-child i{color:#8796f0}.discord-link-map span:last-child i{color:#cf8d43}.discord-link-map>i{color:#586368}.discord-link-note,.discord-link-error{display:flex;align-items:flex-start;gap:9px;margin:0 0 20px;padding:11px 13px;color:#75868a;text-align:left;background:#0b1214;border-left:2px solid #4d8992;font-size:9px;line-height:1.5}.discord-link-error{color:#bd746b;border-color:#a44c41;background:#1a0d0c}.discord-link-card form{margin:0}

@media(max-width:1350px){.dbot-hero{grid-template-columns:285px 1fr 225px}.dbot-outcome-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1050px){.dbot-hero{grid-template-columns:220px 1fr}.dbot-health{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);border-left:0;border-top:1px solid #343c40}.dbot-health>strong{grid-column:1/-1}.dbot-grid{grid-template-columns:1fr}.dbot-side-stack{display:grid;grid-template-columns:repeat(2,1fr)}.dbot-log-card{grid-column:1/-1}.dbot-options{grid-template-columns:1fr}.dbot-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.dbot-hero{grid-template-columns:1fr}.dbot-hero-art{height:180px;min-height:0}.dbot-hero-art:after{background:linear-gradient(0deg,#111518,transparent)}.dbot-hero-copy{padding:21px}.dbot-hero-copy h1{font-size:25px}.dbot-health{grid-template-columns:repeat(2,1fr)}.dbot-actions{align-items:stretch;flex-direction:column}.dbot-actions form,.dbot-actions button{width:100%}.dbot-side-stack,.dbot-outcome-grid{grid-template-columns:1fr}.dbot-stats{grid-template-columns:1fr 1fr}.discord-link-card{padding:30px 20px}.discord-link-map{grid-template-columns:1fr}.discord-link-map>i{transform:rotate(90deg)}}

/* ========================================================================
   RAKION EVOLUTION · GLOBAL VISUAL POLISH
   Less wireframe, more forged stone and readable state surfaces.
   ======================================================================== */

/* Shared status badges: every state owns a real surface, rim and silhouette. */
body.rakion-eternal :is(.badge,.badge-success,.badge-danger,.badge-warning,.badge-info),
body.rakion-admin :is(.badge,.badge-success,.badge-danger,.badge-warning,.badge-info) {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:21px;
  padding:3px 8px;
  border:1px solid #3d474b;
  border-radius:1px;
  background:linear-gradient(180deg,#171c1f,#0c1012);
  box-shadow:inset 2px 0 #617078,inset 0 1px rgba(255,255,255,.035),0 3px 8px rgba(0,0,0,.22);
  color:#aeb7ba;
  font:800 8px/1 Inter,Arial,sans-serif;
  letter-spacing:.65px;
  text-transform:uppercase;
  white-space:nowrap;
}
body.rakion-eternal :is(.badge-success),body.rakion-admin :is(.badge-success) { color:#9ed3aa;background:linear-gradient(#132019,#0b130f);border-color:#315c40;box-shadow:inset 2px 0 #65a979,inset 0 1px rgba(255,255,255,.03),0 3px 8px rgba(0,0,0,.22); }
body.rakion-eternal :is(.badge-danger),body.rakion-admin :is(.badge-danger) { color:#e49a91;background:linear-gradient(#271515,#160c0c);border-color:#6a3937;box-shadow:inset 2px 0 #c7584f,inset 0 1px rgba(255,255,255,.03),0 3px 8px rgba(0,0,0,.22); }
body.rakion-eternal :is(.badge-warning),body.rakion-admin :is(.badge-warning) { color:#e2bf75;background:linear-gradient(#251d10,#151007);border-color:#6b512c;box-shadow:inset 2px 0 #c58b3f,inset 0 1px rgba(255,255,255,.03),0 3px 8px rgba(0,0,0,.22); }
body.rakion-eternal :is(.badge-info),body.rakion-admin :is(.badge-info) { color:#8fc6ca;background:linear-gradient(#102024,#091316);border-color:#31565c;box-shadow:inset 2px 0 #4b959b,inset 0 1px rgba(255,255,255,.03),0 3px 8px rgba(0,0,0,.22); }

/* Public surfaces: remove the visible diagonal grid and keep organic stone depth. */
body.rakion-eternal .content-surface,
body.rakion-eternal .card,
body.rakion-eternal .acct-panel {
  border-color:rgba(132,142,146,.22);
  background:
    radial-gradient(circle at 12% 0,rgba(194,122,48,.045),transparent 27%),
    radial-gradient(circle at 90% 85%,rgba(82,135,139,.025),transparent 31%),
    linear-gradient(155deg,#15191b,#090b0c 72%);
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 18px 42px rgba(0,0,0,.40);
}
body.rakion-eternal .content-surface::before {
  opacity:.34;
  background:
    radial-gradient(circle at 18% 34%,rgba(255,255,255,.07) 0 1px,transparent 1.5px) 0 0/83px 71px,
    radial-gradient(circle at 76% 62%,rgba(197,116,42,.07) 0 1px,transparent 1.6px) 0 0/109px 97px;
}

/* Hero plates no longer have stray diagonal rails or ornamental boxes. */
.evo-hero,
.ops-hero,
body.rakion-eternal .ev-hero {
  background:
    radial-gradient(circle at 11% 45%,rgba(196,91,28,.115),transparent 23%),
    radial-gradient(circle at 85% 20%,rgba(86,137,141,.04),transparent 28%),
    linear-gradient(112deg,#171b1d,#0c0f11 68%,#101416);
  border-color:rgba(129,138,141,.30);
  box-shadow:inset 3px 0 #b7662d,inset 0 1px rgba(255,255,255,.035),0 15px 34px rgba(0,0,0,.31);
}
.evo-hero::after,
.ops-hero::after,
body.rakion-eternal .ev-hero::after,
body.rakion-eternal .dl-hero::after {
  content:"";
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  border:0;
  opacity:.48;
  transform:none;
  pointer-events:none;
  background:radial-gradient(circle at 93% 50%,rgba(192,111,42,.08),transparent 19%);
  box-shadow:none;
  animation:none;
}

/* Real forged shields: bronze outer plate, black iron inset and cyan rune. */
.evo-hero-mark,
.ops-hero-mark,
body.rakion-eternal .ev-emblem {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:0;
  color:#f0a751;
  background:linear-gradient(145deg,#5f391d 0%,#c0813f 28%,#382719 56%,#8d6031 78%,#4a2d19 100%);
  box-shadow:inset 0 0 0 1px rgba(255,224,170,.19),0 8px 14px rgba(0,0,0,.55);
  filter:drop-shadow(0 0 10px rgba(194,89,25,.18));
}
.evo-hero-mark::before,
.ops-hero-mark::before,
body.rakion-eternal .ev-emblem::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:3px;
  clip-path:inherit;
  background:
    radial-gradient(circle at 50% 35%,rgba(171,72,25,.24),transparent 39%),
    linear-gradient(155deg,#252a2c,#090b0c 62%,#171b1d);
  box-shadow:inset 0 0 18px #000,inset 0 1px rgba(255,255,255,.055);
}
.evo-hero-mark::after,
.ops-hero-mark::after,
body.rakion-eternal .ev-emblem::after {
  content:"";
  position:absolute;
  z-index:1;
  left:50%;
  bottom:10px;
  width:6px;
  height:6px;
  background:#65aeb2;
  border:1px solid #a1d1d1;
  transform:translateX(-50%) rotate(45deg);
  box-shadow:0 0 8px rgba(86,191,197,.62);
}
.evo-hero-mark > i,
.ops-hero-mark > i,
body.rakion-eternal .ev-emblem > i { position:relative;z-index:2;filter:drop-shadow(0 2px 2px #000) drop-shadow(0 0 7px rgba(221,102,31,.32)); }

/* Evolution cards: state accents are short forged tabs, not full-height rails. */
.evo-card { border-color:rgba(111,122,126,.20);background:radial-gradient(circle at 0 0,rgba(198,119,43,.045),transparent 25%),linear-gradient(145deg,#14191b,#090c0d 74%); }
.evo-card::before { top:16px;bottom:auto;width:3px;height:54px;background:#4b5659;box-shadow:none; }
.evo-card.is-ready::before { background:#dc752b;box-shadow:0 0 11px rgba(216,117,41,.52); }
.evo-card.is-advanced::before { background:#c4a052;box-shadow:0 0 9px rgba(195,158,79,.28); }
.evo-card.is-unsupported::before { background:#6d6252;box-shadow:none; }
.evo-card.is-unsupported { border-color:rgba(126,111,86,.26);background:linear-gradient(145deg,#131617,#090b0c 74%); }
.evo-card.is-unsupported .evo-status { color:#a18d70;border-color:#514838;background:linear-gradient(#211d16,#0f0e0b); }
.evo-card.is-unsupported .evo-reward { border-color:rgba(139,117,79,.22); }
.evo-unsupported-note { display:flex;align-items:center;gap:11px;margin:0 16px;padding:13px;color:#8f806b;border:1px solid rgba(139,117,79,.24);border-left:3px solid #79684d;background:rgba(55,46,32,.16); }
.evo-unsupported-note>i { color:#a28a61;font-size:16px; }.evo-unsupported-note strong,.evo-unsupported-note small { display:block; }.evo-unsupported-note strong { color:#b9a484;font-size:10px; }.evo-unsupported-note small { margin-top:3px;color:#746d61;font-size:9px;line-height:1.45; }
.evo-status { border-color:#30383c;background:linear-gradient(#161b1d,#0b0e10);box-shadow:inset 0 1px rgba(255,255,255,.025),0 4px 10px rgba(0,0,0,.25); }
.is-ready .evo-status { background:linear-gradient(#31190c,#190b05);border-color:#7b4522;box-shadow:inset 2px 0 #d46f28,0 4px 11px rgba(0,0,0,.3); }
.is-advanced .evo-status { background:linear-gradient(#241e10,#100e08);border-color:#62502b;box-shadow:inset 2px 0 #c5a354,0 4px 11px rgba(0,0,0,.3); }
.evo-reward,.evo-progress-list { border-color:rgba(102,113,117,.18);background-color:rgba(5,7,8,.34); }

/* Admin foundations: less framing, better layers and consistent depth. */
body.rakion-admin {
  background:
    radial-gradient(circle at 75% 0,rgba(177,94,33,.065),transparent 29%),
    radial-gradient(circle at 23% 67%,rgba(73,112,116,.025),transparent 24%),
    #07090a;
}
body.rakion-admin .adm-card,
body.rakion-admin .adm-stat {
  border-color:#252d31;
  background:radial-gradient(circle at 5% 0,rgba(193,115,42,.035),transparent 28%),linear-gradient(145deg,#151a1d,#0a0d0f 76%);
  box-shadow:inset 0 1px rgba(255,255,255,.026),0 12px 28px rgba(0,0,0,.26);
}
body.rakion-admin .adm-card-h {
  border-bottom-color:#242c30;
  background:linear-gradient(90deg,rgba(199,128,52,.045),rgba(255,255,255,.012) 35%,transparent);
  box-shadow:inset 0 1px rgba(255,255,255,.018);
}
body.rakion-admin .adm-stat { min-height:92px;padding:16px; }
body.rakion-admin .as-ico {
  width:44px;height:48px;
  clip-path:polygon(50% 0,92% 16%,86% 78%,50% 100%,14% 78%,8% 16%);
  border:0;
  border-radius:0;
  background:linear-gradient(155deg,#263034,#0d1214 68%);
  box-shadow:inset 0 0 0 2px #343e42,inset 0 0 15px #000;
}
body.rakion-admin .adm-stat--gold .as-ico { background:linear-gradient(155deg,#45371e,#151109);box-shadow:inset 0 0 0 2px #6a552e,inset 0 0 15px #000; }
body.rakion-admin .adm-stat--ember .as-ico { background:linear-gradient(155deg,#472513,#170b06);box-shadow:inset 0 0 0 2px #754321,inset 0 0 15px #000; }
body.rakion-admin .adm-stat--live .as-ico,
body.rakion-admin .adm-stat--good .as-ico { background:linear-gradient(155deg,#183324,#09130d);box-shadow:inset 0 0 0 2px #315e43,inset 0 0 15px #000; }
body.rakion-admin .adm-stat--bad .as-ico { background:linear-gradient(155deg,#3f1e1e,#150909);box-shadow:inset 0 0 0 2px #693837,inset 0 0 15px #000; }

/* Command-center hero uses the same forged shield as the player-facing CMS. */
.ops-hero { min-height:116px;padding:20px 23px; }
.ops-hero-mark { width:66px;height:76px;font-size:25px; }

/* GM controls: turn nested wireframes into raised work surfaces. */
body.rakion-admin .gm-account-summary>.flex { border-bottom:0;box-shadow:inset 0 -1px rgba(107,120,125,.16); }
body.rakion-admin .gm-account-summary>.grid { gap:10px; }
body.rakion-admin .gm-account-summary>.grid>div {
  padding:12px 14px;
  border:0;
  background:linear-gradient(145deg,#0d1214,#090c0e);
  box-shadow:inset 0 1px rgba(255,255,255,.018),0 5px 12px rgba(0,0,0,.18);
}
body.rakion-admin .gm-account-actions { gap:12px; }
body.rakion-admin .gm-account-actions>h2 { border-bottom:0;box-shadow:inset 0 -1px rgba(107,120,125,.16); }
body.rakion-admin .gm-account-actions>div {
  border:0!important;
  background:linear-gradient(145deg,#101517,#090c0e)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.022),0 7px 17px rgba(0,0,0,.22)!important;
}
body.rakion-admin .gm-account-actions>div:hover { box-shadow:inset 3px 0 #77502b,inset 0 1px rgba(255,255,255,.025),0 9px 20px rgba(0,0,0,.28)!important; }
body.rakion-admin .gm-character-section>.space-y-4>div { border:0!important;background:linear-gradient(145deg,#101517,#090c0e)!important;box-shadow:inset 0 1px rgba(255,255,255,.02),0 7px 17px rgba(0,0,0,.20); }

/* Tables keep row separation, but lose the spreadsheet-like cage. */
body.rakion-admin .data-table { border-collapse:separate;border-spacing:0; }
body.rakion-admin .data-table th { border-left:0;border-right:0;border-top:0;background:#0b0f11; }
body.rakion-admin .data-table td { border-left:0;border-right:0;border-top:0;border-bottom-color:#222a2e;background:#0f1416; }
body.rakion-admin .data-table tbody tr:last-child td { border-bottom-color:transparent; }
body.rakion-admin .input-field,
body.rakion-admin input:not([type="checkbox"]):not([type="radio"]),
body.rakion-admin select,
body.rakion-admin textarea { border-color:#303a3e;background:linear-gradient(#090c0e,#0b0f11);box-shadow:inset 0 1px 5px rgba(0,0,0,.45); }
body.rakion-admin :is(.btn-primary,.btn-gold,.btn-secondary,.btn-danger,.btn-success) { box-shadow:inset 0 1px rgba(255,255,255,.12),0 4px 10px rgba(0,0,0,.25);letter-spacing:.65px;text-transform:uppercase; }

/* Compact visual hierarchy at intermediate widths. */
@media(max-width:1250px) {
  .ops-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ops-grid--primary,.ops-grid--logs { grid-template-columns:1fr; }
}

/* ========================================================================
   RAKION EVOLUTION · EVO RANKING
   Advancement is a real competitive tier, not a decorative label.
   ======================================================================== */
body.rakion-eternal .rk-ranking-tabs { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch; }
body.rakion-eternal .rk-ranking-tabs .nav-tab { min-width:0;justify-content:center;border-right:1px solid rgba(121,132,136,.18); }
body.rakion-eternal .rk-ranking-tabs .nav-tab:last-child { border-right:0; }
.rk-ranking-tabs .evo-tab-active,
.rk-ranking-tabs a[href*="/ranking/evolution"]:hover {
  color:#f2c77b;
  background:radial-gradient(circle at 50% 100%,rgba(222,105,37,.18),transparent 70%),#121719;
}

.pr-pod-face,.pr-face,.pod-avatar { position:relative; }
.pr-evo-seal,.pod-evo-seal {
  position:absolute;z-index:4;display:inline-flex;align-items:center;justify-content:center;
  height:17px;min-width:30px;padding:0 5px;border:1px solid #a85d27;border-radius:2px;
  background:linear-gradient(180deg,#35180a,#160a05);color:#ffd892;
  font-size:7px;font-weight:900;line-height:1;letter-spacing:1px;
  box-shadow:inset 0 1px rgba(255,223,165,.14),0 0 9px rgba(218,104,38,.35),0 2px 5px #000;
  text-shadow:0 1px #000;
}
.pr-evo-seal { right:-5px;bottom:1px; }
.pod-evo-seal { right:-8px;bottom:-3px; }
.pr-pod.is-1 .pr-evo-seal { bottom:0;right:-3px; }

.pr-pod-evo,.pr-inline-evo,.td-evo,.evo-rank-class,.pod-evo-name {
  display:inline-flex;align-items:center;gap:5px;color:#e9b862;
  font-weight:800;letter-spacing:.65px;text-transform:uppercase;
}
.pr-pod-evo { margin-top:4px;font-size:9px; }
.pr-inline-evo { margin-left:7px;font-size:8px;vertical-align:middle; }
.td-evo { padding:3px 7px;border:1px solid rgba(204,119,49,.4);background:#211006;font-size:9px; }
.pod-evo-name { display:flex;justify-content:center;margin-top:2px;font-size:8px; }

.rk-row--evo { box-shadow:inset 2px 0 #b45b24; }
.rk-row--evo .rk-avatar { border-color:#8d552b; }
.rk-evo-tag,.rk-evo-mini {
  display:inline-flex;align-items:center;justify-content:center;border:1px solid #8d4d22;
  background:linear-gradient(#32170a,#160a05);color:#ffd17d;font-weight:900;
  letter-spacing:.75px;text-transform:uppercase;box-shadow:inset 0 1px rgba(255,255,255,.07);
}
.rk-evo-tag { margin-left:auto;padding:3px 5px;font-size:7px; }
.rk-evo-mini { margin-left:7px;padding:2px 5px;font-size:7px;vertical-align:middle; }

.home-evo-ranking { border-color:rgba(191,101,38,.3); }
.pod-grid--evo { background:radial-gradient(circle at 50% 0,rgba(211,102,37,.11),transparent 62%); }
.home-evo-all {
  display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;
  border-top:1px solid rgba(177,94,37,.25);color:#d8aa5f;font-size:8px;font-weight:900;letter-spacing:1.25px;
  background:linear-gradient(90deg,transparent,rgba(132,67,28,.1),transparent);transition:.2s ease;
}
.home-evo-all:hover { color:#ffe0a0;background:rgba(144,72,28,.13); }
.home-evo-empty {
  min-height:132px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  color:#8e999d;text-align:center;background:radial-gradient(circle at 50% 20%,rgba(195,91,31,.1),transparent 55%);
}
.home-evo-empty>i { color:#d66c28;font-size:25px;filter:drop-shadow(0 0 8px rgba(215,102,36,.32)); }
.home-evo-empty strong { color:#e7c77e;font-family:"Albertus Nova",Georgia,serif;font-size:12px;letter-spacing:.7px; }
.home-evo-empty span { font-size:9px; }

.evo-ranking-header {
  background:radial-gradient(circle at 8% 50%,rgba(218,101,34,.18),transparent 24%),linear-gradient(112deg,#171b1d,#0b0e10 70%,#13100d);
}
.evo-ranking-emblem { color:#f3b75d!important;box-shadow:inset 0 0 0 2px #78502c,inset 0 0 18px #000,0 0 18px rgba(212,95,29,.12)!important; }
.evo-ranking-total strong { color:#edb75d; }
.evo-rank-podium { margin-bottom:20px; }
.evo-rank-pod { --lv:#c36c32;border-color:rgba(181,95,39,.34);cursor:default; }
.evo-rank-pod:hover { transform:translateY(-3px);border-color:#9d5c2f; }
.evo-rank-pod .pr-pod-face img { border-color:#8d552b;box-shadow:0 0 0 3px #111719,0 0 19px rgba(215,104,38,.2); }
.evo-rank-class { font-size:10px; }
.evo-rank-table .rk-table tbody tr { box-shadow:inset 2px 0 rgba(183,91,34,.45); }
.evo-rank-empty>i { color:#dc762c; }

@media(max-width:680px) {
  body.rakion-eternal .rk-ranking-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.rakion-eternal .rk-ranking-tabs .nav-tab { width:auto;border-right:1px solid rgba(121,132,136,.18);border-bottom:1px solid rgba(121,132,136,.16); }
  body.rakion-eternal .rk-ranking-tabs .nav-tab:nth-child(even) { border-right:0; }
  body.rakion-eternal .rk-ranking-tabs .nav-tab:last-child:nth-child(odd) { grid-column:1/-1;border-right:0;border-bottom:0; }
  .evo-rank-table .rk-table th:nth-child(3),.evo-rank-table .rk-table td:nth-child(3),
  .evo-rank-table .rk-table th:nth-child(6),.evo-rank-table .rk-table td:nth-child(6) { display:none; }
  .pr-inline-evo { display:flex;margin:3px 0 0; }
}

/* ========================================================================
   RAKION EVOLUTION · CHARACTER ROSTER
   ======================================================================== */
.characters-page { padding:22px; }
.characters-head {
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 0 18px;margin-bottom:18px;
  border-bottom:1px solid rgba(153,126,72,.25);position:relative;
}
.characters-head::after { content:"";position:absolute;left:0;bottom:-1px;width:130px;height:2px;background:linear-gradient(90deg,#b7672e,transparent); }
.characters-title { min-width:0; }
.characters-kicker { display:flex;align-items:center;gap:8px;color:#c77736;font-size:9px;font-weight:900;letter-spacing:2.2px; }
.characters-kicker i { font-size:6px;color:#68a3a4; }
.characters-title h2 { margin:4px 0 3px;color:#ede3ca;font-family:"Albertus Nova",Georgia,serif;font-size:22px;line-height:1.1;letter-spacing:1.6px;text-transform:uppercase; }
.characters-title p { margin:0;color:#80888c;font-size:11px; }
.characters-evo-link { flex:0 0 auto;min-height:38px; }
.characters-evo-link .fa-chevron-right { font-size:8px;opacity:.7; }

.characters-table-shell { overflow-x:auto;border:1px solid #273035;background:#0a0d0f;box-shadow:0 12px 30px rgba(0,0,0,.3); }
.characters-table { min-width:990px; }
.characters-table th { height:40px;padding:0 13px!important;color:#929b9e!important;font-size:8px!important;letter-spacing:1.35px!important;background:linear-gradient(#111719,#0b0f11)!important; }
.characters-table td { height:68px;padding:9px 13px!important; }
.characters-table tbody tr { position:relative; }
.characters-table tbody tr.is-evo-character td { background:linear-gradient(90deg,rgba(112,55,24,.11),rgba(15,20,22,.95) 24%,#0f1416)!important; }
.characters-table tbody tr.is-evo-character td:first-child { box-shadow:inset 3px 0 #b9622b; }

.character-rank {
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  clip-path:polygon(50% 0,92% 17%,86% 77%,50% 100%,14% 77%,8% 17%);
  background:linear-gradient(155deg,#263034,#0c1113);color:#b7c0c2;font-size:10px;font-weight:900;
  box-shadow:inset 0 0 0 2px #465054,inset 0 0 12px #000;
}
.character-rank.is-first { color:#ffe09a;background:linear-gradient(155deg,#5b421e,#1d1409);box-shadow:inset 0 0 0 2px #8a6a30,inset 0 0 13px #000; }
.character-identity { display:flex;align-items:center;gap:10px;min-width:150px; }
.character-avatar { width:42px;height:42px;flex:0 0 auto;position:relative;display:block;padding:2px;background:linear-gradient(145deg,#80613a,#273237 50%,#151a1d);clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%); }
.character-avatar::before { content:"";position:absolute;inset:2px;background:#080b0d;clip-path:inherit; }
.character-avatar img { position:relative;z-index:1;width:100%;height:100%;object-fit:cover;clip-path:inherit; }
.character-avatar i { position:absolute;z-index:3;right:-5px;bottom:-3px;padding:2px 4px;border:1px solid #a75928;background:#241006;color:#ffd485;font:900 6px/1 Arial,sans-serif;letter-spacing:.8px;box-shadow:0 0 7px rgba(216,101,36,.35); }
.character-identity>span:last-child { min-width:0;display:flex;flex-direction:column;gap:2px; }
.character-identity strong { color:#ede3c9;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.character-identity small { color:#697276;font-size:7px;font-weight:800;letter-spacing:1px; }
.character-class { display:inline-flex;align-items:center;gap:6px;color:#c5cacc;font-size:11px; }
.character-class i { color:#668e91;font-size:9px; }
.character-level { display:inline-flex;align-items:baseline;gap:3px;color:#d8bd7e; }
.character-level small { font-size:7px;letter-spacing:1px; }
.character-level b { font-size:17px; }
.character-exp { color:#7f898d;font-variant-numeric:tabular-nums; }
.character-pvp { display:inline-flex;gap:4px; }
.character-pvp b { min-width:29px;padding:4px 5px;border:1px solid #30383b;background:#0a0e10;color:#8b9699;font-size:8px;text-align:center; }
.character-pvp .is-win { color:#8ec289;border-color:#34523b; }
.character-pvp .is-loss { color:#d2957c;border-color:#59372d; }
.character-srank { width:88px;display:flex;flex-direction:column;gap:5px; }
.character-srank>span { display:flex;align-items:baseline;gap:3px;color:#d8bd7e; }
.character-srank b { font-size:12px; }.character-srank small { color:#697277;font-size:8px; }
.character-srank>i { height:3px;display:block;background:#242c2f;overflow:hidden; }
.character-srank>i>em { height:100%;display:block;background:linear-gradient(90deg,#9e5125,#dfa44e);box-shadow:0 0 7px rgba(218,111,42,.4); }
.char-evo-badge.is-progress { color:#899397;border-color:#384247;background:#111719; }

.characters-mobile-list { display:none;gap:10px; }
.character-mobile-card { position:relative;overflow:hidden;border:1px solid #293236;background:radial-gradient(circle at 0 0,rgba(74,114,116,.06),transparent 34%),linear-gradient(145deg,#151a1d,#0a0d0f 78%);box-shadow:0 9px 22px rgba(0,0,0,.27); }
.character-mobile-card::before { content:"";position:absolute;left:0;top:12px;width:3px;height:44px;background:#4a575b; }
.character-mobile-card.is-evo-character::before { background:#c4682c;box-shadow:0 0 10px rgba(216,105,39,.45); }
.character-mobile-card>header { display:flex;align-items:center;gap:11px;padding:13px 13px 11px 15px; }
.character-mobile-name { flex:1;min-width:0;display:flex;flex-direction:column-reverse;gap:2px; }
.character-mobile-name strong { color:#eee4ca;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.character-mobile-name small { color:#7b8589;font-size:8px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase; }
.character-mobile-stats { display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #242c30;border-bottom:1px solid #242c30;background:rgba(3,5,6,.25); }
.character-mobile-stats>span { min-width:0;padding:9px 10px;display:flex;flex-direction:column;gap:2px;border-right:1px solid #242c30; }
.character-mobile-stats>span:last-child { border-right:0; }
.character-mobile-stats small { color:#687175;font-size:7px;font-weight:900;letter-spacing:1px; }
.character-mobile-stats b { color:#d9c388;font-size:14px;font-variant-numeric:tabular-nums; }
.character-mobile-stats em { margin-left:2px;color:#697277;font-size:8px;font-style:normal; }
.character-mobile-card>footer { min-height:41px;padding:8px 11px 8px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px; }
.character-mobile-record { color:#707a7e;font-size:8px;font-weight:800;letter-spacing:.6px;white-space:nowrap; }
.character-mobile-record i { margin-right:5px;color:#5e8c8e; }
.characters-empty { min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#737d81;text-align:center; }
.characters-empty>i { color:#5f7779;font-size:25px; }.characters-empty strong { color:#d3c59f; }.characters-empty span { font-size:10px; }

@media(max-width:760px) {
  .characters-page { padding:16px; }
  .characters-head { align-items:flex-start;margin-bottom:14px; }
  .characters-title p { display:none; }
  .characters-title h2 { font-size:18px; }
  .characters-evo-link span { display:none; }
  .characters-evo-link { width:40px;padding:0;justify-content:center; }
  .characters-evo-link .fa-chevron-right { display:none; }
  .characters-table-shell { display:none; }
  .characters-mobile-list { display:grid; }
}
@media(max-width:390px) {
  .characters-page { padding:12px; }
  .character-mobile-card>header { padding-right:10px; }
  .character-mobile-card>footer { align-items:flex-start;flex-direction:column; }
}

/* ========================================================================
   RAKION EVOLUTION · PLAYER CENTER + REFERRALS
   A single navigation and surface language across every authenticated tool.
   ======================================================================== */
.user-hub {
  margin:0 22px 6px;padding:10px 11px;display:flex;align-items:center;gap:13px;
  border:1px solid #293237;border-top-color:#5a5138;
  background:linear-gradient(180deg,rgba(18,23,26,.98),rgba(8,11,13,.98));
  box-shadow:0 10px 25px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.025);
  position:relative;overflow:hidden;
}
.user-hub::before { content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:linear-gradient(#d17b35,#5b2a18);box-shadow:0 0 12px rgba(210,100,38,.45); }
.user-hub-label { padding:0 12px 0 5px;display:flex;align-items:center;gap:8px;color:#776f5c;font-size:7px;font-weight:900;letter-spacing:1.35px;white-space:nowrap;border-right:1px solid #2b3235; }
.user-hub-label i { color:#bd6c32;font-size:11px; }
.user-hub>div { min-width:0;flex:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px; }
.user-hub a { min-width:0;height:34px;padding:0 8px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;color:#7e888b;font-size:8px;font-weight:850;letter-spacing:.45px;text-transform:uppercase;text-decoration:none;transition:transform .18s ease,color .18s ease,border-color .18s ease,background .18s ease; }
.user-hub a i { color:#62787a;font-size:10px;transition:color .18s ease,filter .18s ease; }
.user-hub a:hover { transform:translateY(-1px);color:#d9cfb3;border-color:#374246;background:#151b1e; }
.user-hub a.is-active { color:#ffe0a0;border-color:#74512d;background:linear-gradient(180deg,#2b2115,#15120d);box-shadow:inset 0 0 12px rgba(185,98,35,.09); }
.user-hub a.is-active i { color:#e17e34;filter:drop-shadow(0 0 5px rgba(225,107,41,.35)); }

.ref-page { --ref-gold:#d9b66b;--ref-ember:#ce692f;--ref-teal:#5c9293;padding:16px 22px 24px; }
.ref-hero { min-height:142px;padding:22px 25px;display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:19px;position:relative;overflow:hidden;border:1px solid #343a3c;border-left:3px solid var(--ref-ember);background:radial-gradient(circle at 80% 20%,rgba(113,62,27,.13),transparent 34%),linear-gradient(120deg,#151a1d,#0a0d0f 70%);box-shadow:0 16px 38px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.025); }
.ref-hero::before { content:"";position:absolute;inset:0;opacity:.16;background:repeating-linear-gradient(135deg,transparent 0 13px,rgba(255,255,255,.024) 14px 15px);pointer-events:none; }
.ref-hero::after { content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--ref-ember),#a68a4e 45%,transparent 90%); }
.ref-hero-mark { width:70px;height:78px;display:grid;place-items:center;position:relative;color:#ffd697;font-size:29px;clip-path:polygon(50% 0,92% 16%,88% 78%,50% 100%,12% 78%,8% 16%);background:radial-gradient(circle,#713717,#21150e 52%,#090c0e 54%);box-shadow:inset 0 0 0 2px #8a6437;filter:drop-shadow(0 8px 11px rgba(0,0,0,.45)); }
.ref-hero-mark::after { content:"";position:absolute;inset:6px;clip-path:inherit;border:1px solid rgba(218,169,83,.35); }
.ref-hero>div { position:relative;z-index:1; }
.ref-kicker { color:#c97035;font-size:8px;font-weight:900;letter-spacing:2.2px; }
.ref-hero h1 { margin:5px 0 5px;color:#eee6d3;font:700 29px/1.05 "Albertus Nova",Georgia,serif;letter-spacing:.6px;text-transform:uppercase; }
.ref-hero h1 em { color:var(--ref-gold);font-style:normal; }
.ref-hero p { max-width:660px;margin:0;color:#8b9497;font-size:11px;line-height:1.55; }
.ref-reward { min-width:170px;padding:13px 16px;display:flex;flex-direction:column;align-items:flex-end;border-left:1px solid #343b3e; }
.ref-reward span { color:#777f82;font-size:7px;font-weight:900;letter-spacing:1.2px; }
.ref-reward strong { margin:3px 0;color:#f2ca75;font-size:26px;line-height:1; }
.ref-reward strong i { margin-right:6px;color:#db7d33;font-size:17px; }
.ref-reward small { color:#766f5e;font-size:8px; }
.ref-notice { margin-top:10px;padding:12px 15px;display:flex;align-items:center;gap:12px;border:1px solid #664532;background:#241710;color:#c88d67; }
.ref-notice>i { font-size:18px; }.ref-notice div { display:flex;flex-direction:column;gap:2px; }.ref-notice strong { color:#edc394;font-size:11px; }.ref-notice span { font-size:9px; }

.ref-share { margin-top:12px;padding:15px 16px;display:grid;grid-template-columns:minmax(260px,.75fr) minmax(380px,1.25fr);gap:18px;align-items:center;border:1px solid #293337;background:#0d1214; }
.ref-share-copy { display:flex;align-items:center;gap:12px; }
.ref-step { color:#4d5b60;font:800 25px/1 Georgia,serif; }
.ref-share-copy>div { display:flex;flex-direction:column;gap:3px; }.ref-share-copy strong { color:#d9c79e;font-size:11px; }.ref-share-copy p { margin:0;color:#6f797d;font-size:8px;line-height:1.45; }
.ref-linkbox { height:43px;display:flex;align-items:center;border:1px solid #3a4447;background:#080b0d;box-shadow:inset 0 2px 8px #000; }
.ref-linkbox>i { padding:0 11px;color:#64888a; }.ref-linkbox input { min-width:0;flex:1;height:100%;padding:0 4px;border:0!important;outline:0!important;background:transparent!important;color:#aeb6b8!important;font:500 9px/1 Consolas,monospace!important;box-shadow:none!important; }
.ref-linkbox button { height:100%;padding:0 17px;display:flex;align-items:center;gap:7px;border:0;border-left:1px solid #78522f;background:linear-gradient(#5f401f,#352512);color:#f2d590;font-size:8px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;transition:filter .2s,transform .2s; }
.ref-linkbox button:hover { filter:brightness(1.18); }.ref-linkbox button:active { transform:scale(.98); }.ref-linkbox button.is-copied { border-color:#44663c;background:#22341e;color:#b9e28e; }

.ref-metrics { margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.ref-metrics article { min-height:82px;padding:13px 15px 13px 54px;display:flex;flex-direction:column;justify-content:center;position:relative;border:1px solid #293236;background:linear-gradient(145deg,#141a1d,#0b0e10);overflow:hidden; }
.ref-metrics article::after { content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:linear-gradient(90deg,#4e6b6d,transparent 65%);opacity:.55; }
.ref-metrics article>i { position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#58777a;font-size:21px; }.ref-metrics span { color:#7c8689;font-size:7px;font-weight:900;letter-spacing:1px;text-transform:uppercase; }.ref-metrics strong { color:#dfd3b7;font-size:20px;line-height:1.15; }.ref-metrics small { color:#626c70;font-size:8px; }
.ref-metrics article.is-ready { border-color:#694b29;background:linear-gradient(145deg,#21180f,#0c0f11); }.ref-metrics article.is-ready>i,.ref-metrics article.is-ready strong { color:#e2aa55; }.ref-metrics article.is-ready::after { background:linear-gradient(90deg,#d2742e,transparent 70%);opacity:1; }

.ref-requirements { margin-top:16px;border:1px solid #293236;background:#0b0f11; }
.ref-requirements>header,.ref-roster>header { min-height:49px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #293236;background:linear-gradient(#13191c,#0c1012); }
.ref-requirements>header div,.ref-roster>header div { display:flex;flex-direction:column;gap:2px; }.ref-requirements>header span,.ref-roster>header span { color:#be6a33;font-size:7px;font-weight:900;letter-spacing:1.5px; }.ref-requirements h2,.ref-roster h2 { margin:0;color:#dbd1b8;font:700 14px/1.1 "Albertus Nova",Georgia,serif;text-transform:uppercase;letter-spacing:.6px; }.ref-requirements>header p { margin:0;color:#687276;font-size:8px; }
.ref-requirements>div { padding:14px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:12px; }
.ref-requirements article { min-height:60px;padding:9px 11px;display:flex;align-items:center;gap:11px;border:1px solid #2c3639;background:#111619; }.ref-req-icon { width:39px;height:39px;display:grid;place-items:center;flex:0 0 auto;border:1px solid #3a4b4e;background:#0a0e10;color:#6d9899;font-size:15px;clip-path:polygon(10% 0,90% 0,100% 10%,100% 90%,90% 100%,10% 100%,0 90%,0 10%); }.ref-requirements article>div { display:flex;flex-direction:column;gap:3px; }.ref-requirements article strong { color:#dcd3bb;font-size:11px; }.ref-requirements article small { color:#697276;font-size:8px;line-height:1.3; }.ref-plus,.ref-equals { color:#4a5559;font-size:10px; }.ref-requirements article.is-prize { border-color:#664b2d;background:#1b160f; }.ref-requirements article.is-prize .ref-req-icon { border-color:#84613a;color:#edaa50;background:#26190c; }

.ref-roster { margin-top:16px;border:1px solid #293236;background:#080b0d; }.ref-roster>header>b { width:29px;height:29px;display:grid;place-items:center;border:1px solid #4f4631;color:#cfb36e;background:#17140e;font-size:10px; }
.ref-list { padding:9px;display:grid;gap:7px; }.ref-card { min-height:91px;padding:11px 12px;display:grid;grid-template-columns:minmax(190px,.8fr) minmax(300px,1.35fr) 150px;align-items:center;gap:18px;border:1px solid #293236;background:linear-gradient(100deg,#121719,#0b0f11);position:relative;overflow:hidden;animation:refCardIn .45s ease both;animation-delay:var(--ref-delay); }
.ref-card::before { content:"";position:absolute;left:0;top:14px;width:3px;height:55px;background:#536266; }.ref-card.is-ready { border-color:#65472a;background:radial-gradient(circle at 88% 50%,rgba(142,74,28,.11),transparent 24%),linear-gradient(100deg,#15191a,#0c1012); }.ref-card.is-ready::before { background:#dc742f;box-shadow:0 0 10px rgba(222,106,41,.5); }.ref-card.is-paid::before { background:#6b954d; }
.ref-player { min-width:0;display:flex;align-items:center;gap:10px; }.ref-player-avatar { width:44px;height:49px;display:grid;place-items:center;flex:0 0 auto;clip-path:polygon(50% 0,92% 15%,87% 78%,50% 100%,13% 78%,8% 15%);background:linear-gradient(150deg,#344348,#0d1214);color:#7d9a9c;font-size:17px;box-shadow:inset 0 0 0 2px #46575b; }.ref-player>div { min-width:0;display:flex;flex-direction:column;gap:2px; }.ref-player strong { color:#e2d9c2;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.ref-player span:not(.ref-player-avatar) { color:#7e898c;font-size:8px; }.ref-player small { color:#596367;font-size:7px; }
.ref-progress { display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:0 18px;border-left:1px solid #283034;border-right:1px solid #283034; }.ref-progress-row { min-width:0;display:grid;grid-template-columns:1fr auto;gap:5px 8px; }.ref-progress-row span { color:#737d80;font-size:7px;font-weight:900;letter-spacing:.7px;text-transform:uppercase; }.ref-progress-row span i { margin-right:5px;color:#5e7d7f; }.ref-progress-row b { color:#9da5a7;font-size:8px;font-variant-numeric:tabular-nums; }.ref-progress-row em { grid-column:1/3;height:4px;display:block;background:#242c2f;overflow:hidden;box-shadow:inset 0 1px 2px #000; }.ref-progress-row em i { width:var(--value);height:100%;display:block;background:linear-gradient(90deg,#4d797a,#87a5a1);transition:width .7s ease; }.ref-progress-row.is-complete span,.ref-progress-row.is-complete b { color:#93bc79; }.ref-progress-row.is-complete em i { background:linear-gradient(90deg,#628e45,#9dc66f);box-shadow:0 0 7px rgba(126,179,81,.4); }
.ref-card-action { display:flex;flex-direction:column;align-items:stretch;gap:4px;text-align:center; }.ref-card-action form { margin:0; }.ref-card-action button { width:100%;height:37px;position:relative;overflow:hidden;border:1px solid #a0652c;background:linear-gradient(#793d19,#3c200e);color:#ffd99b;font-size:8px;font-weight:950;letter-spacing:.8px;cursor:pointer;box-shadow:0 0 13px rgba(186,80,28,.17); }.ref-card-action button i { margin-right:6px; }.ref-button-shine { position:absolute;top:-30%;left:-35%;width:30%;height:160%;transform:skewX(-24deg);background:linear-gradient(90deg,transparent,rgba(255,231,174,.25),transparent);animation:refShine 2.7s ease-in-out infinite; }.ref-status { min-height:25px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #384247;background:#111719;color:#7c898d;font-size:7px;font-weight:900;letter-spacing:.8px; }.ref-status.is-paid { border-color:#435a39;background:#121a10;color:#95be78; }.ref-card-action small { color:#667075;font-size:7px; }
.ref-empty { min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#737d81; }.ref-empty>i { margin-bottom:9px;color:#566f71;font-size:29px; }.ref-empty h3 { margin:0 0 4px;color:#d3c8aa;font-size:13px; }.ref-empty p { max-width:430px;margin:0;font-size:9px;line-height:1.5; }
@keyframes refCardIn { from { opacity:0;transform:translateY(9px); } to { opacity:1;transform:none; } }
@keyframes refShine { 0%,55% { left:-35%;opacity:0; } 66% { opacity:1; } 88%,100% { left:120%;opacity:0; } }

/* Shared finishing pass: stronger hierarchy, no brown Metin-like surfaces. */
body.rakion-eternal .acct-hero,body.rakion-eternal .shop-head,body.rakion-eternal .evo-hero,body.rakion-eternal .clan-page-head,body.rakion-eternal .ev-hero { box-shadow:0 15px 34px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.025); }
body.rakion-eternal .si-card,body.rakion-eternal .economy-card,body.rakion-eternal .clan-card,body.rakion-eternal .ev-card { transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
body.rakion-eternal .si-card:hover,body.rakion-eternal .economy-card:hover,body.rakion-eternal .clan-card:hover,body.rakion-eternal .ev-card:hover { transform:translateY(-2px);border-color:#465155;box-shadow:0 12px 25px rgba(0,0,0,.32); }

@media(max-width:1000px) {
  .user-hub { align-items:stretch;flex-direction:column;gap:7px; }.user-hub-label { border-right:0;padding:0 3px; }.user-hub>div { grid-template-columns:repeat(7,minmax(74px,1fr));overflow-x:auto;padding-bottom:3px; }.user-hub a { padding:0 9px; }
  .ref-hero { grid-template-columns:62px 1fr; }.ref-reward { grid-column:1/3;min-width:0;padding:10px 0 0;align-items:flex-start;border-left:0;border-top:1px solid #343b3e; }.ref-reward strong { font-size:20px; }
  .ref-share { grid-template-columns:1fr; }.ref-card { grid-template-columns:minmax(180px,.8fr) 1.3fr; }.ref-card-action { grid-column:1/3;display:grid;grid-template-columns:150px 1fr;align-items:center;justify-content:end; }.ref-card-action form { grid-column:2;justify-self:end;width:170px; }.ref-card-action>small { text-align:right; }
}
@media(max-width:720px) {
  .user-hub { margin:0 12px 4px;padding:8px; }.user-hub>div { grid-template-columns:repeat(7,75px); }.user-hub a { height:37px;flex-direction:column;gap:2px;font-size:6px; }.user-hub a i { font-size:10px; }
  .ref-page { padding:12px; }.ref-hero { min-height:0;padding:16px;grid-template-columns:48px 1fr;gap:12px; }.ref-hero-mark { width:47px;height:54px;font-size:19px; }.ref-hero h1 { font-size:19px; }.ref-hero p { font-size:9px; }.ref-reward { grid-column:1/3;display:grid;grid-template-columns:1fr auto;align-items:center; }.ref-reward strong { grid-column:2;grid-row:1/3; }.ref-reward small { grid-column:1; }
  .ref-share { padding:12px;grid-template-columns:1fr; }.ref-share-copy p { font-size:8px; }.ref-linkbox { height:auto;display:grid;grid-template-columns:auto 1fr; }.ref-linkbox input { height:38px; }.ref-linkbox button { grid-column:1/3;height:36px;justify-content:center;border-left:0;border-top:1px solid #78522f; }
  .ref-metrics { grid-template-columns:1fr; }.ref-metrics article { min-height:66px; }.ref-requirements>header { align-items:flex-start;flex-direction:column;gap:4px; }.ref-requirements>div { grid-template-columns:1fr; }.ref-plus,.ref-equals { justify-self:center;transform:rotate(90deg); }
  .ref-card { grid-template-columns:1fr;gap:11px; }.ref-progress { padding:10px 0;border-left:0;border-right:0;border-top:1px solid #283034;border-bottom:1px solid #283034; }.ref-card-action { grid-column:1;display:flex; }.ref-card-action form { width:100%; }.ref-roster>header { padding:10px; }.ref-roster h2 { font-size:12px; }
}
@media(max-width:390px) {
  .ref-progress { grid-template-columns:1fr; }.ref-card { padding:10px; }.ref-hero h1 { font-size:17px; }.ref-kicker { font-size:6px;letter-spacing:1.4px; }
}

/* ========================================================================
   PLAYER CENTER V2 · compact action rail and warrior dossiers
   ======================================================================== */
body.rakion-eternal .user-hub {
  min-height:54px;margin:0 22px 14px;padding:0 10px;flex-direction:row;align-items:center;gap:6px;
  overflow:hidden;border-color:#30383b;border-top-color:#5c5138;
  background:linear-gradient(180deg,#111719,#090d0f);box-shadow:0 8px 20px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.025);
}
body.rakion-eternal .user-hub::before { top:9px;bottom:9px;height:auto;width:2px; }
body.rakion-eternal .user-hub-label {
  width:153px;flex:0 0 153px;height:34px;padding:0 15px 0 9px;border-right:1px solid #30383b;
  color:#8a8371;font-size:7px;letter-spacing:1.35px;
}
body.rakion-eternal .user-hub-label i { width:24px;height:27px;display:grid;place-items:center;position:relative;color:#d27431;font-size:11px;clip-path:polygon(50% 0,92% 15%,86% 78%,50% 100%,14% 78%,8% 15%);background:#21150e;box-shadow:inset 0 0 0 1px #65452a; }
body.rakion-eternal .user-hub>div { min-width:0;flex:0 1 auto;display:flex;grid-template-columns:none;gap:3px;overflow:visible;padding:0; }
body.rakion-eternal .user-hub a { min-width:103px;width:auto;height:36px;padding:0 13px;flex-direction:row;gap:7px;position:relative;border-color:transparent;color:#7e898c;font-size:7px;letter-spacing:.55px; }
body.rakion-eternal .user-hub a::after { content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:1px;transform:scaleX(0);background:#cf6b2e;box-shadow:0 0 7px rgba(212,102,40,.5);transition:transform .2s ease; }
body.rakion-eternal .user-hub a:hover { transform:none;color:#d1c8b1;border-color:#303a3e;background:#151b1e; }
body.rakion-eternal .user-hub a.is-active { color:#f4d18d;border-color:#704b29;background:linear-gradient(180deg,#2b1e12,#15110d);box-shadow:inset 0 0 13px rgba(198,101,38,.1); }
body.rakion-eternal .user-hub a.is-active::after { transform:scaleX(1); }
body.rakion-eternal .user-hub a i { font-size:9px; }
.user-hub-ornament { min-width:38px;flex:1;display:flex;align-items:center;gap:7px;margin-left:5px;opacity:.75; }
.user-hub-ornament i { height:1px;flex:1;background:linear-gradient(90deg,#333c3f,transparent); }
.user-hub-ornament b { width:7px;height:7px;display:block;transform:rotate(45deg);border:1px solid #66492c;background:#17120d; }

body.rakion-eternal .characters-page { padding:8px 22px 24px; }
body.rakion-eternal .characters-head { min-height:77px;margin-bottom:14px;padding:0 0 14px; }
body.rakion-eternal .characters-head::after { width:190px;background:linear-gradient(90deg,#c0652d,#546f70 70%,transparent); }
body.rakion-eternal .characters-title h2 { font-size:24px; }
body.rakion-eternal .characters-evo-link {
  min-height:38px;padding:0 14px;border:1px solid #704b29;background:#17120d;color:#d8ba76;
  box-shadow:inset 0 0 13px rgba(194,94,35,.08);font-size:8px;letter-spacing:.7px;
}
body.rakion-eternal .characters-evo-link:hover { transform:translateY(-1px);border-color:#aa6a32;background:#24180e;color:#ffe0a2; }

.warrior-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.warrior-grid>.characters-empty { grid-column:1/-1;border:1px solid #293236;background:#0a0e10; }
.warrior-card {
  min-width:0;position:relative;overflow:hidden;border:1px solid #2d373a;background:radial-gradient(circle at 8% 0,rgba(72,111,113,.075),transparent 29%),linear-gradient(145deg,#141a1d,#090d0f 76%);
  box-shadow:0 13px 28px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.022);animation:warriorCardIn .42s ease both;animation-delay:var(--warrior-delay);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.warrior-card:hover { transform:translateY(-2px);border-color:#465357;box-shadow:0 17px 34px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.025); }
.warrior-card.is-advanced { border-color:#59462d;background:radial-gradient(circle at 8% 0,rgba(164,91,37,.12),transparent 32%),linear-gradient(145deg,#17191a,#090d0f 76%); }
.warrior-card.is-ready { border-color:#6c4928;box-shadow:0 13px 28px rgba(0,0,0,.3),inset 0 0 20px rgba(193,84,30,.055); }
.warrior-edge { position:absolute;z-index:3;left:0;top:16px;width:3px;height:62px;background:#4e6669; }
.warrior-card.is-advanced .warrior-edge,.warrior-card.is-ready .warrior-edge { background:#dc732f;box-shadow:0 0 11px rgba(221,104,42,.48); }
.warrior-head { min-height:92px;padding:13px 14px 11px 17px;display:grid;grid-template-columns:68px minmax(0,1fr) 60px;align-items:center;gap:12px;border-bottom:1px solid #283135;position:relative; }
.warrior-head::after { content:"";position:absolute;right:0;bottom:-1px;width:42%;height:1px;background:linear-gradient(90deg,transparent,rgba(92,140,142,.38)); }
.warrior-card.is-advanced .warrior-head::after { background:linear-gradient(90deg,transparent,rgba(208,113,48,.45)); }
.warrior-portrait { width:68px;height:68px;display:block;padding:3px;position:relative;clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%);background:linear-gradient(145deg,#7a633f,#425155 50%,#1a2022);filter:drop-shadow(0 7px 8px rgba(0,0,0,.38)); }
.warrior-portrait::before { content:"";position:absolute;inset:3px;clip-path:inherit;background:#080b0d; }
.warrior-portrait img { position:relative;z-index:1;width:100%;height:100%;object-fit:cover;clip-path:inherit; }
.warrior-portrait>i { position:absolute;z-index:3;right:-4px;bottom:2px;padding:3px 5px;border:1px solid #a45c2b;background:#2a1409;color:#ffd68f;font:900 6px/1 Arial,sans-serif;letter-spacing:1px;box-shadow:0 0 8px rgba(209,97,38,.4); }
.warrior-identity { min-width:0;display:flex;flex-direction:column;gap:3px; }
.warrior-identity>small { color:#709092;font-size:7px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase; }.warrior-identity>small i { margin-right:6px;color:#c06830; }
.warrior-identity>strong { color:#eee4cc;font:700 19px/1.05 "Albertus Nova",Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.warrior-identity>em { color:#687276;font-size:6px;font-style:normal;font-weight:900;letter-spacing:1.25px; }
.warrior-card.is-advanced .warrior-identity>em { color:#c47945; }
.warrior-rank { height:54px;padding:7px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;clip-path:polygon(50% 0,92% 16%,86% 78%,50% 100%,14% 78%,8% 16%);background:linear-gradient(155deg,#283236,#0b1012);color:#9ba7aa;box-shadow:inset 0 0 0 2px #3f4d51; }
.warrior-rank small { font-size:5px;font-weight:900;letter-spacing:.7px; }.warrior-rank b { font-size:10px; }.warrior-rank.is-first { color:#ffe19a;background:linear-gradient(155deg,#5c411b,#1c1308);box-shadow:inset 0 0 0 2px #8e6b30; }

.warrior-statline { display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #283135;background:rgba(3,5,6,.2); }
.warrior-statline>span { min-width:0;height:58px;padding:9px 11px;display:flex;flex-direction:column;justify-content:center;gap:2px;border-right:1px solid #252e31; }
.warrior-statline>span:last-child { border-right:0; }.warrior-statline small { color:#657074;font-size:6px;font-weight:900;letter-spacing:1px; }.warrior-statline strong { color:#d9c69b;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums; }.warrior-statline strong em { color:#777f82;font-size:8px;font-style:normal; }
.warrior-combat { min-height:68px;padding:11px 13px 10px 16px;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:14px;border-bottom:1px solid #283135; }
.warrior-record>span,.warrior-srank>span { display:block;margin-bottom:7px;color:#697478;font-size:6px;font-weight:900;letter-spacing:.9px; }.warrior-record>span i,.warrior-srank>span i { margin-right:5px;color:#60888a; }.warrior-record p { margin:0;display:flex;gap:4px; }.warrior-record p b { min-width:31px;padding:4px 5px;border:1px solid #354044;background:#0a0e10;color:#849094;font-size:7px;text-align:center; }.warrior-record p b.is-win { color:#99c580;border-color:#3d5c39; }.warrior-record p b.is-loss { color:#d4987c;border-color:#59392d; }
.warrior-srank>span { display:flex;align-items:center; }.warrior-srank>span b { margin-left:auto;color:#d8c189;font-size:8px; }.warrior-srank>em { height:5px;display:block;overflow:hidden;background:#222a2d;box-shadow:inset 0 1px 2px #000; }.warrior-srank>em>i { width:var(--value);height:100%;display:block;background:linear-gradient(90deg,#9e5126,#dfa34c);box-shadow:0 0 8px rgba(215,105,42,.35); }

.warrior-footer { min-height:68px;padding:10px 12px 10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(180deg,#101517,#0b0f11); }
.warrior-ascension { min-width:0;flex:1;display:grid;grid-template-columns:1fr auto;gap:4px 8px; }.warrior-ascension>span { color:#7d878a;font-size:6px;font-weight:900;letter-spacing:1px; }.warrior-ascension>div { display:flex;gap:3px; }.warrior-ascension>div i { width:18px;height:4px;background:#293236; }.warrior-ascension>div i.is-done { background:#ba642e;box-shadow:0 0 6px rgba(207,95,36,.35); }.warrior-ascension>small { grid-column:1/3;color:#606a6e;font-size:7px; }
.warrior-action { flex:0 0 auto;display:flex;align-items:center;gap:6px; }.warrior-action .char-evo-badge { min-height:25px;white-space:nowrap; }.warrior-action>a { width:30px;height:30px;display:grid;place-items:center;border:1px solid #3b484c;background:#101719;color:#759395;text-decoration:none;transition:border-color .18s,color .18s,background .18s; }.warrior-action>a span { display:none; }.warrior-action>a:hover { border-color:#8e582e;background:#25170d;color:#efb66a; }
@keyframes warriorCardIn { from { opacity:0;transform:translateY(8px); } to { opacity:1;transform:none; } }

@media(max-width:1120px) {
  body.rakion-eternal .user-hub-label { width:48px;flex-basis:48px;padding:0 9px; }.user-hub-label>span { display:none; }
  body.rakion-eternal .user-hub a { min-width:91px;padding:0 10px; }.user-hub-ornament { min-width:12px; }
  .warrior-grid { grid-template-columns:1fr; }
}
@media(max-width:760px) {
  body.rakion-eternal .user-hub { min-height:50px;margin:0 12px 10px;padding:0 7px;gap:4px;overflow:hidden; }
  body.rakion-eternal .user-hub-label { width:37px;flex-basis:37px;height:32px;padding:0 5px; }.user-hub-label i { margin:auto; }
  body.rakion-eternal .user-hub>div { flex:1;display:flex;overflow-x:auto;gap:2px;padding:0;scrollbar-width:none;-ms-overflow-style:none; }
  body.rakion-eternal .user-hub>div::-webkit-scrollbar { display:none;width:0;height:0; }
  body.rakion-eternal .user-hub a { min-width:74px;height:35px;padding:0 6px;flex-direction:column;gap:2px;font-size:5px; }.user-hub-ornament { display:none; }
  body.rakion-eternal .characters-page { padding:7px 12px 17px; }.characters-head { align-items:center!important; }.characters-title h2 { font-size:19px!important; }.characters-evo-link { width:auto!important;height:36px!important;min-height:36px!important;padding:0 10px!important; }.characters-evo-link>span { display:inline!important;font-size:6px;letter-spacing:.6px; }.characters-evo-link>.fa-chevron-right { display:none!important; }
  .warrior-head { grid-template-columns:58px minmax(0,1fr) 52px;padding:11px 10px 10px 14px;gap:9px; }.warrior-portrait { width:58px;height:58px; }.warrior-identity>strong { font-size:16px; }.warrior-rank { height:48px; }
  .warrior-statline>span { height:51px;padding:8px; }.warrior-statline strong { font-size:12px; }.warrior-combat { grid-template-columns:1fr 1fr;padding-left:12px;gap:9px; }.warrior-footer { align-items:flex-start;flex-direction:column; }.warrior-action { width:100%; }.warrior-action>a { width:auto;min-width:31px;padding:0 10px;margin-left:auto;display:flex;gap:6px; }.warrior-action>a span { display:inline;font-size:6px;font-weight:900;letter-spacing:.6px; }
}
@media(max-width:430px) {
  .warrior-statline { grid-template-columns:repeat(2,1fr); }.warrior-statline>span:nth-child(2) { border-right:0; }.warrior-statline>span:nth-child(-n+2) { border-bottom:1px solid #252e31; }
  .warrior-combat { grid-template-columns:1fr; }.warrior-record { padding-bottom:8px;border-bottom:1px solid #252e31; }
}

/* ============================================================
   RELEASE CONSOLE — staged LauncherWeb publishing
   ============================================================ */
body.rakion-admin .release-hero { margin-bottom:0; }
.release-hero h1 { font-family:"Albertus Nova",Georgia,serif;letter-spacing:.01em; }
.release-channel { width:148px;min-height:92px;display:grid;grid-template-columns:31px 1fr;align-content:center;gap:3px 9px;padding:15px;border:1px solid #5a3b34;background:#140d0c;box-shadow:inset 3px 0 #b45d52,inset 0 0 25px #000; }
.release-channel>i { grid-row:1/3;align-self:center;color:#c96f62;font-size:20px; }
.release-channel>span { color:#788287;font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; }
.release-channel>strong { color:#d88b7f;font-size:9px;letter-spacing:.08em; }
.release-channel.is-online { border-color:#345942;background:#0c1510;box-shadow:inset 3px 0 #66aa7b,inset 0 0 25px #000; }
.release-channel.is-online>i,.release-channel.is-online>strong { color:#81c593; }

.release-pipeline { position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 15px;padding:17px 24px;list-style:none;border:1px solid #30373d;border-top:0;background:#0e1216; }
.release-pipeline:before { content:"";position:absolute;top:31px;left:12%;right:12%;height:1px;background:#303a40; }
.release-pipeline li { position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:9px;color:#677279; }
.release-pipeline li>span { width:29px;height:29px;display:grid;place-items:center;border:1px solid #3b454b;background:#11171b;color:#778188;font:800 9px Inter,sans-serif; }
.release-pipeline li>b { font-size:8px;letter-spacing:.1em;text-transform:uppercase; }
.release-pipeline li.is-complete>span { color:#a8d4b3;border-color:#426c50;background:#102016;box-shadow:0 0 0 3px #0e1216,0 0 13px rgba(95,168,117,.17); }
.release-pipeline li.is-complete>b { color:#9bb8a3; }
.release-pipeline li[aria-current="step"]>span { color:#e2b96b;border-color:#7e5e2c;background:#24190d;box-shadow:0 0 0 3px #0e1216,0 0 15px rgba(190,133,55,.2); }
.release-pipeline li[aria-current="step"]>b { color:#d2a85b; }

.release-workbench { display:grid;grid-template-columns:minmax(360px,.85fr) minmax(0,1.35fr);gap:14px;margin-bottom:14px;align-items:start; }
.release-workbench>.adm-card { margin:0!important;overflow:hidden; }
.release-compose .adm-card-h i,.release-diff-card .adm-card-h i,.release-approval .adm-card-h i,.release-history .adm-card-h i,.release-observability .adm-card-h i,.release-integrity-dashboard .adm-card-h i { color:#c18a42; }
.release-form { display:grid;gap:14px; }
.release-field { min-width:0;display:grid;gap:6px;margin:0; }
.release-field>span { color:#899399;font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; }
.release-field>small { color:#687379;font-size:8px;line-height:1.5; }
.release-field textarea.input-field { min-height:72px;padding-top:10px;resize:vertical; }
.release-version { max-width:180px;font-size:18px!important;font-variant-numeric:tabular-nums; }
.release-field-pair { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.release-file-picker { padding:10px 12px;border:1px dashed #3b464d;background:#0b0f12; }
.release-file-picker input[type="file"] { max-width:100%;color:#9fa7ab;font-size:9px; }
.release-file-picker input[type="file"]::file-selector-button { margin-right:10px;padding:7px 10px;border:1px solid #514129;background:#20180e;color:#d9b775;font:800 8px Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer; }
.release-advanced { border:1px solid #3a3430;background:#100e0c; }
.release-advanced>summary { padding:10px 12px;color:#a58e74;font-size:8px;font-weight:800;letter-spacing:.06em;cursor:pointer; }
.release-advanced>summary i { margin-right:7px;color:#c27a42; }
.release-advanced>div { display:grid;gap:11px;padding:0 12px 12px;border-top:1px solid #312b27; }
.release-switch { display:flex;align-items:center;gap:8px;margin-top:10px;color:#bbb2a5;font-size:9px; }
.release-switch input { accent-color:#bc8440; }
.release-upload-progress { display:grid;gap:7px;padding:10px 12px;border:1px solid #315342;background:#0b1510; }
.release-upload-progress>div { display:flex;justify-content:space-between;gap:12px;color:#91af9a;font-size:8px; }
.release-upload-progress progress { width:100%;height:5px;border:0;background:#1d2923;accent-color:#6aaa7b; }
.release-upload-progress progress::-webkit-progress-bar { background:#1d2923; }.release-upload-progress progress::-webkit-progress-value { background:#6aaa7b; }
.release-draft-meta { display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:-1px -1px 15px;background:#313940; }
.release-draft-meta>div { min-width:0;padding:11px;background:#101519;display:grid;gap:4px; }
.release-draft-meta span { color:#69747a;font-size:7px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; }
.release-draft-meta code,.release-draft-meta b,.release-draft-meta strong,.release-draft-meta time { overflow:hidden;color:#c7ccce;font-size:9px;text-overflow:ellipsis;white-space:nowrap; }
.release-draft-meta strong { color:#dfb467;letter-spacing:.08em; }
.release-draft-actions { display:flex;justify-content:space-between;gap:10px;margin-top:15px;padding-top:14px;border-top:1px solid #30383d; }
.release-draft-actions form { margin:0; }
.release-empty { min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px;color:#657078;text-align:center; }
.release-empty>i { margin-bottom:3px;color:#4d5a62;font-size:29px; }.release-empty>b { color:#a8afb2;font-size:11px; }.release-empty>span { max-width:310px;font-size:9px;line-height:1.55; }
.release-empty.compact { min-height:100px; }
.release-file-table { max-height:460px; }.release-file-table .data-table { min-width:690px; }.release-file-table code { word-break:break-all; }

.release-approval { margin-bottom:14px!important;border-left:3px solid #6c4a2c!important; }
.release-approval.is-ready { border-left-color:#5d9d70!important;box-shadow:inset 10px 0 24px rgba(77,145,96,.035),0 8px 22px rgba(0,0,0,.18); }
.release-readiness { margin-left:auto;color:#c48c4c!important;font-size:8px!important;font-weight:900!important;letter-spacing:.08em; }
.release-approval.is-ready .release-readiness { color:#82bd91!important; }
.release-approval-form { grid-template-columns:minmax(250px,1fr) minmax(180px,.42fr) auto;align-items:end;margin-top:14px; }
.release-confirm input { font-family:Consolas,monospace;letter-spacing:.12em;text-transform:uppercase; }
.release-approval-form>button { min-height:41px!important; }

.release-history { margin-bottom:14px!important;overflow:hidden; }.release-history .data-table { min-width:800px; }
.release-restore-row>td { padding:0!important;background:#0b0f12!important; }
.release-restore-form { display:grid;grid-template-columns:140px minmax(220px,1fr) 170px auto;gap:10px;align-items:end;padding:14px;border-left:3px solid #b45d52; }
.release-restore-form .input-field { min-width:0; }.release-restore-form button { min-height:39px;white-space:nowrap; }
.release-restore-toggle[aria-expanded="true"] { border-color:#795046!important;color:#db8d80!important; }

.release-observability { margin-bottom:14px; }.release-observability>.adm-card { margin:0!important;overflow:hidden; }
.release-audit-list { max-height:340px;overflow:auto; }
.release-audit-list article { display:grid;grid-template-columns:29px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 15px;border-bottom:1px solid #293137; }
.release-audit-list article:last-child { border-bottom:0; }.release-audit-list article>i { width:29px;height:29px;display:grid;place-items:center;border:1px solid #3a484f;background:#10171b;color:#79939d; }
.release-audit-list article>div { min-width:0;display:grid;gap:3px; }.release-audit-list article b { color:#bdc3c5;font-size:9px; }.release-audit-list article span { overflow:hidden;color:#727d82;font-size:8px;text-overflow:ellipsis;white-space:nowrap; }
.release-audit-list article b em { margin-left:6px;color:#7db88d;font:800 6px Inter,sans-serif;letter-spacing:.08em;white-space:nowrap; }
.release-audit-list article small { color:#606b71;font-size:7px;line-height:1.5;text-align:right; }
.release-integrity-dashboard { overflow:hidden; }.release-integrity-dashboard .wpf-checks { margin-top:0; }.release-integrity-dashboard .wpf-contract { margin:17px 0; }.release-integrity-dashboard .wpf-files { border-top:1px solid #2d353a; }

@media(max-width:1100px) {
  .release-workbench { grid-template-columns:1fr; }.release-approval-form { grid-template-columns:1fr 1fr; }.release-approval-form>button { grid-column:1/3; }.release-restore-form { grid-template-columns:1fr 1fr; }.release-restore-form>button { grid-column:1/3; }
}
@media(max-width:720px) {
  .release-hero { gap:14px;padding:19px!important; }.release-hero h1 { font-size:22px; }.release-channel { width:112px;min-height:76px;padding:10px; }
  .release-pipeline { padding:14px 7px; }.release-pipeline:before { top:27px; }.release-pipeline li { flex-direction:column;gap:5px;text-align:center; }.release-pipeline li>span { width:25px;height:25px; }.release-pipeline li>b { font-size:6px; }
  .release-workbench { grid-template-columns:minmax(0,1fr); }.release-field-pair,.release-approval-form,.release-restore-form { grid-template-columns:1fr; }.release-approval-form>button,.release-restore-form>button { grid-column:auto; }
  .release-draft-meta { grid-template-columns:1fr; }.release-draft-actions { flex-direction:column; }.release-draft-actions button,.release-draft-actions form { width:100%; }
}
@media(max-width:480px) {
  .release-hero { align-items:flex-start;flex-direction:column; }.release-channel { width:100%;min-height:58px; }.release-channel>i { grid-row:1/3; }
  .release-pipeline li>b { max-width:62px;line-height:1.35; }.release-form .btn-primary,.release-form .btn-secondary,.release-form .btn-danger { width:100%; }
}