/* ══════════════════════════════════════════
   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 Eternal 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 { 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 ETERNAL — 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 Eternal — 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.png") !important;
  background-position: center top;
  background-size: cover;
  filter: grayscale(.16) saturate(.72) contrast(1.04) brightness(1.12);
}

body.rakion-eternal .site-fixed-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 54%, transparent 0 30%, rgba(3, 3, 4, .08) 62%, rgba(3, 3, 4, .30) 100%),
    linear-gradient(180deg, transparent 0, rgba(4, 4, 5, .07) 58%, rgba(4, 4, 5, .78) 100%);
}

body.rakion-eternal > section::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  box-shadow: inset 0 0 130px 18px rgba(0, 0, 0, .34);
}

/* 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 {
  animation: eternal-nav-in .65s cubic-bezier(.2, .8, .25, 1) both;
}

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: 520px !important;
}

body.rakion-eternal .hero-wrap--art {
  min-height: 430px !important;
}

body.rakion-eternal .hero-art-space {
  min-height: 370px;
}

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: 28% top; }
  body.rakion-eternal .hero-wrap { min-height: 430px !important; }
  body.rakion-eternal .hero-art-space { min-height: 370px; }
  body.rakion-eternal .hero-row { min-height: 425px; }
  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; }
}

@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;
}

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;
}

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: grayscale(.44) saturate(.25) contrast(1.11) brightness(.91); }
  48%  { transform: scale(1.03) translate3d(.18%, -.2%, 0); filter: grayscale(.38) saturate(.31) contrast(1.12) brightness(.95); }
  100% { transform: scale(1.022) translate3d(.35%, 0, 0); filter: grayscale(.42) saturate(.27) contrast(1.11) 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 ETERNAL — 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 ETERNAL · 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 Eternal 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 ETERNAL 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;
}
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 { 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 { 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;
}
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(4,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 ETERNAL — 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 ETERNAL · 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-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 ETERNAL · 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 ETERNAL · 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 ETERNAL · 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; }
}