/* ==========================================================================
   Forgotten Highexp - website theme
   "Arcane" theme: purple / black / gray, with subtle motion (fade-ins,
   glow pulses, hover lifts) so the portal feels alive instead of static.
   Original palette and animations -- not copied from any reference site.
   ========================================================================== */

:root {
    --bg-image: url('../img/background.png');
    --ink: #0a0710;
    --panel: rgba(24, 17, 34, 0.92);
    --panel-light: rgba(36, 26, 50, 0.94);
    --border: #4a2f66;
    --border-light: #7c4fc2;
    --gold: #a56cf0;         /* kept var name for compatibility, now violet */
    --gold-bright: #c896ff;
    --text: #e9e1f7;
    --text-dim: #ab9bc7;
    --link: #c896ff;
    --link-hover: #e6cbff;
    --green: #7ec850;
    --red: #e05a5a;
    --purple: #9d5cff;
    --blue: #4aa8e0;
    --yellow: #e0c850;
    --row-alt: rgba(157, 92, 255, 0.06);
    --radius: 8px;
    --parchment: #efe9f7;
    --parchment-ink: #241a35;
    --glow: 0 0 18px rgba(157, 92, 255, 0.45);
}

* { box-sizing: border-box; }

/* Per-category accent color: layout_top.php sets body.cat-<category> based
   on which section the current page belongs to, so News/Library/Community/
   Custom/Shop/Support/Account each pick up a distinct tint instead of every
   page looking like the same gray box. */
body.cat-news      { --cat-color: #9d5cff; }
body.cat-home      { --cat-color: #9d5cff; }
body.cat-library   { --cat-color: #2fb6a8; }
body.cat-community { --cat-color: #e0a83c; }
body.cat-custom    { --cat-color: #e05a9e; }
body.cat-shop      { --cat-color: #4fae5c; }
body.cat-support   { --cat-color: #4f9fe3; }
body.cat-account   { --cat-color: #c896ff; }

.category-eyebrow {
    position: relative;
    font-family: "Cinzel", serif; font-size: 11px; font-weight: 700;
    letter-spacing: 3px; text-transform: uppercase;
    color: var(--cat-color, var(--purple));
    margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--cat-color, var(--purple)) 35%, transparent);
    display: flex; align-items: center; gap: 8px;
    text-shadow: 0 0 10px color-mix(in srgb, var(--cat-color, var(--purple)) 62%, transparent);
    animation: categoryTitleGlow 4.2s ease-in-out infinite;
}
.category-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cat-color, var(--purple)); box-shadow: 0 0 8px var(--cat-color, var(--purple)); animation: categoryPulse 3s ease-in-out infinite; }
.category-eyebrow::after {
    content: ""; height: 1px; width: 42px; margin-left: 2px;
    background: linear-gradient(90deg, var(--cat-color, var(--purple)), transparent);
    box-shadow: 0 0 7px color-mix(in srgb, var(--cat-color, var(--purple)) 55%, transparent);
    transform-origin: left center;
    animation: categoryLineBreath 4.2s ease-in-out infinite;
}

html, body { margin: 0; padding: 0; min-height: 100%; }

.skip-link {
    position: fixed; top: 8px; left: 12px; z-index: 1000;
    padding: 9px 14px; border-radius: var(--radius);
    background: var(--gold-bright); color: var(--ink); font-weight: 700;
    transform: translateY(-150%); transition: transform 0.18s ease;
}
.skip-link:focus { transform: translateY(0); color: var(--ink); }

body {
    font-family: "Inter", "Segoe UI", Verdana, sans-serif;
    color: var(--text);
    background-color: var(--ink);
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

/* Single full-viewport background layer shared by the whole page (hero +
   nav + content), instead of the image being repeated separately in .hero
   and .page-shell. That old approach produced a visible seam where the two
   layers met since each had its own crop/zoom. Fixed attachment here keeps
   it filling the screen edge-to-edge as you scroll, like rubinot.net. */
body::before {
    content: "";
    position: fixed; inset: 0; z-index: -2;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center 25%;
    background-attachment: fixed;
    animation: heroZoom 30s ease-in-out infinite alternate;
    /* background.png is now pre-graded (desaturated + purple/ink duotone,
       see assets/img/background_original_backup.png for the untouched
       source) so it matches the theme without a runtime filter on top. */
}
body::after {
    content: "";
    position: fixed; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(8,4,16,0.35) 0%, rgba(8,4,16,0.55) 30%, rgba(6,3,12,0.88) 100%);
}

h1, h2, h3, .hero-plate-name, .widget-cta-title, .btn-submit, .news-title {
    font-family: "Cinzel", "Georgia", serif;
}

a { color: var(--link); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--link-hover); text-decoration: underline; }
img { max-width: 100%; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex="0"]:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 3px;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(157, 92, 255, 0.25); }
    50% { box-shadow: 0 0 20px rgba(157, 92, 255, 0.45); }
}
@keyframes heroZoom {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}
@keyframes emberRise {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 0.9; }
    80%  { opacity: 0.5; }
    100% { transform: translateY(-300px) translateX(14px); opacity: 0; }
}
@keyframes revealUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes categoryPulse {
    0%, 100% { opacity: 0.72; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.12); }
}
@keyframes balanceArrowPulse {
    0%, 100% { transform: translateX(0); filter: brightness(0.9); }
    50% { transform: translateX(3px); filter: brightness(1.25); }
}

/* ---------------------------------------------------------------------
   Utility bar
   --------------------------------------------------------------------- */

.utilitybar { background: rgba(5, 3, 8, 0.97); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.utilitybar-inner { max-width: 1280px; margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; justify-content: space-between; }
.utilitybar-tag { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
.utilitybar-actions { display: flex; align-items: center; gap: 8px; }
.social-links { display: flex; align-items: center; gap: 6px; }
.social-btn { display: inline-flex; align-items: center; gap: 5px; }
.social-btn svg { width: 14px; height: 14px; flex: 0 0 14px; fill: currentColor; }

.btn { display: inline-block; padding: 9px 18px; border-radius: var(--radius); font-weight: 600; font-size: 13px; border: 1px solid var(--border-light); cursor: pointer; text-align: center; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn-points { background: linear-gradient(135deg, var(--gold-bright), var(--purple)); border-color: #6d3fc2; color: #140a24; }
.btn-points:hover { color: #140a24; box-shadow: var(--glow); }
.btn-secondary { background: var(--panel-light); color: var(--text); }
.btn-secondary:hover { color: var(--gold-bright); border-color: var(--gold-bright); }

.account-pill { display: flex; align-items: center; gap: 8px; background: var(--panel-light); border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px 5px 10px; font-size: 12px; }
.account-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }

/* ---------------------------------------------------------------------
   Hero banner
   --------------------------------------------------------------------- */

.hero {
    position: relative; height: 240px; overflow: hidden; display: flex;
    align-items: flex-end; justify-content: center; background: transparent;
    box-shadow: inset 0 -1px 0 rgba(200,150,255,0.24), inset 0 -18px 32px rgba(95,43,151,0.12);
}
.hero::before {
    /* Fades the hero down into the page's own --ink color instead of
       cutting off with a hard line, so the banner reads as part of the
       same surface as the content below rather than a pasted-on strip. */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,5,20,0.04) 0%, rgba(6,3,14,0.32) 55%, rgba(13,7,24,0.76) 100%);
}
.hero::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 42%, rgba(157,92,255,0.24), transparent 65%),
        linear-gradient(90deg, transparent 8%, rgba(157,92,255,0.08) 32%, rgba(218,174,255,0.15) 50%, rgba(157,92,255,0.08) 68%, transparent 92%);
    pointer-events: none;
}
.hero-overlay { position: relative; z-index: 2; text-align: center; padding-bottom: 22px; }
.hero-plate {
    /* The logo art already has its own glow baked in -- wrapping it in a
       solid box on top of the (bright) hero art was what made it look
       pasted on. Let it float directly on the banner like the emblem on
       rubinot's, with just a drop shadow for depth. */
    display: inline-block;
    animation: fadeInUp 0.6s ease both;
}
.hero-plate a { display: block; }
.hero-plate-name {
    font-size: 22px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
    color: var(--gold-bright);
    text-shadow: 0 0 16px rgba(200,150,255,0.5), 0 2px 4px rgba(0,0,0,0.6);
}
.hero-logo {
    display: block; margin: 0 auto; height: 155px; width: auto; max-width: 100%;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.6)) drop-shadow(0 0 26px rgba(157,92,255,0.35));
}
.hero-tagline {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 10px; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
    color: #cdb9e4; text-shadow: 0 1px 3px #000, 0 0 9px rgba(157,92,255,0.32);
}
.hero-tagline::before, .hero-tagline::after {
    content: ""; width: 54px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,150,255,0.72));
    box-shadow: 0 0 6px rgba(157,92,255,0.42);
}
.hero-tagline::after { transform: scaleX(-1); }

/* Floating embers behind the hero title -- small drifting sparks, pure CSS. */
.hero-embers { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hero-embers span {
    position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%;
    background: var(--gold-bright); box-shadow: 0 0 8px 2px rgba(200,150,255,0.8);
    animation: emberRise 9s linear infinite;
    opacity: 0;
}
.hero-embers span:nth-child(1) { left: 8%;  animation-delay: 0s;   animation-duration: 8s; }
.hero-embers span:nth-child(2) { left: 22%; animation-delay: 1.4s; animation-duration: 10s; }
.hero-embers span:nth-child(3) { left: 41%; animation-delay: 2.8s; animation-duration: 7.5s; }
.hero-embers span:nth-child(4) { left: 58%; animation-delay: 0.6s; animation-duration: 9.5s; }
.hero-embers span:nth-child(5) { left: 76%; animation-delay: 3.6s; animation-duration: 8.5s; }
.hero-embers span:nth-child(6) { left: 90%; animation-delay: 2s;   animation-duration: 11s; }

/* ---------------------------------------------------------------------
   Left sidebar nav: ornamented accordion buttons (RubinOT-style), one
   per category, expanding to a sub-link list with a smooth height
   transition driven by assets/js/site.js toggling the .open class.
   --------------------------------------------------------------------- */

.sidenav { width: 230px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 20px; }

.nav-category-home, .nav-category-account   { --nav-accent: #c896ff; }
.nav-category-library                       { --nav-accent: #45d1c2; }
.nav-category-community                     { --nav-accent: #efba54; }
.nav-category-custom                        { --nav-accent: #ef72b6; }
.nav-category-shop                          { --nav-accent: #70cf7c; }
.nav-category-support                       { --nav-accent: #67b8f5; }
.nav-category-admin                         { --nav-accent: #f07373; }

.sidenav-btn {
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%;
    padding: 13px 16px;
    background: linear-gradient(180deg, #241a38 0%, #150f22 100%);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    color: var(--gold-bright);
    font-family: "Cinzel", "Georgia", serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.4);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.25s ease;
    overflow: hidden;
}
.sidenav-btn::before {
    content: "\25C6";
    color: var(--nav-accent);
    font-size: 9px;
    margin-right: 4px;
    text-shadow: 0 0 7px var(--nav-accent);
}
/* Diagonal shine sweep on hover -- a bit of "life" without being gimmicky. */
.sidenav-btn::after {
    content: "";
    position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.14), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
    pointer-events: none;
}
.sidenav-btn:hover::after { left: 130%; }
.sidenav-btn:hover, .sidenav-item.open > .sidenav-btn, .sidenav-btn.active {
    border-color: var(--nav-accent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--nav-accent) 38%, transparent), inset 0 1px 0 rgba(255,255,255,0.1);
    transform: translateX(3px);
    text-decoration: none;
}
.sidenav-btn.active, .sidenav-item.open > .sidenav-btn { background: linear-gradient(180deg, color-mix(in srgb, var(--nav-accent) 18%, #241a38) 0%, #171022 100%); }
.sidenav-label {
    position: relative; z-index: 2;
    display: block;
    flex: 1; min-width: 0; text-align: left;
    color: var(--nav-accent);
    text-shadow: 0 0 9px color-mix(in srgb, var(--nav-accent) 48%, transparent);
    animation: navLabelGlow 4.6s ease-in-out infinite;
}
.sidenav-label::after {
    content: ""; position: absolute; left: 0; bottom: -3px;
    width: 28px; height: 1px;
    background: linear-gradient(90deg, var(--nav-accent), transparent);
    opacity: .48;
    transform-origin: left center;
    animation: navLabelLine 4.6s ease-in-out infinite;
}
.sidenav-btn.has-art .sidenav-label { padding-right: 44px; }
.sidenav-art {
    position: absolute;
    right: 31px;
    bottom: -2px;
    z-index: 1;
    width: 42.5px;
    height: 42.5px;
    pointer-events: none;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.8));
    animation: sidenav-art-float 3.4s ease-in-out infinite;
    transition: filter 0.2s ease;
}
.sidenav-art img,
.sidenav-art-sprite {
    display: block;
    width: 42.5px;
    height: 42.5px;
    image-rendering: pixelated;
}
.sidenav-art img { object-fit: contain; }
.sidenav-art-sprite {
    background-image: var(--nav-art);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: var(--nav-size) 100%;
    animation: sidenav-art-frames var(--nav-duration) steps(var(--nav-steps)) infinite;
}
.sidenav-btn:hover .sidenav-art,
.sidenav-item.open > .sidenav-btn .sidenav-art {
    filter: drop-shadow(0 0 7px rgba(230,190,255,0.75)) drop-shadow(0 3px 3px rgba(0,0,0,0.85));
}
.sidenav-chevron { position: relative; z-index: 2; font-size: 10px; color: var(--text-dim); transition: transform 0.3s ease, color 0.2s ease; }
.sidenav-item.open .sidenav-chevron { transform: rotate(180deg); color: var(--gold-bright); }

@keyframes sidenav-art-frames { to { background-position: 100% 0; } }
@keyframes sidenav-art-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.sidenav-sub {
    list-style: none; margin: 4px 0 0; padding: 0;
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s ease;
}
.sidenav-item.open .sidenav-sub { max-height: 420px; }
.sidenav-sub li a {
    display: block;
    padding: 9px 16px 9px 30px;
    font-size: 12.5px;
    color: var(--text-dim);
    border-left: 2px solid transparent;
    margin-left: 8px;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, padding-left 0.15s ease;
}
.sidenav-sub li a:hover, .sidenav-sub li a.active {
    color: var(--nav-accent, var(--gold-bright));
    background: color-mix(in srgb, var(--nav-accent, var(--purple)) 9%, transparent);
    border-left-color: var(--nav-accent, var(--purple));
    padding-left: 36px;
    text-decoration: none;
}

@keyframes navLabelGlow {
    0%, 100% { filter: brightness(.94); }
    50% { filter: brightness(1.12); }
}
@keyframes navLabelLine {
    0%, 100% { transform: scaleX(.62); opacity: .32; }
    50% { transform: scaleX(1); opacity: .72; }
}
@keyframes categoryTitleGlow {
    0%, 100% { filter: brightness(.96); }
    50% { filter: brightness(1.12); }
}
@keyframes categoryLineBreath {
    0%, 100% { transform: scaleX(.65); opacity: .4; }
    50% { transform: scaleX(1); opacity: .82; }
}

/* ---------------------------------------------------------------------
   Page shell
   --------------------------------------------------------------------- */

.page-shell {
    display: flex; align-items: flex-start; max-width: 1280px; margin: 20px auto; padding: 0 20px; gap: 20px;
    position: relative;
}
.main-col { flex: 1; min-width: 0; }
.side-col { width: 280px; flex-shrink: 0; }

/* Minimal shell (includes/layout_top_minimal.php) -- no sidenav/side-col,
   so wide report tables get the full width instead of being squeezed into
   .main-col's ~690px between them. */
.minimal-topbar {
    display: flex; align-items: center; justify-content: space-between;
    max-width: 1280px; margin: 0 auto; padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}
.minimal-topbar-brand { display: flex; align-items: center; }
.minimal-topbar-brand img { height: 40px; display: block; }
.minimal-main { max-width: 1280px; margin: 20px auto; padding: 0 20px; min-width: 0; }

/* Private administration dashboard. Kept independent from player-facing pages. */
.cat-admin .minimal-main { max-width: 1540px; }
.admin-dashboard { display: grid; gap: 18px; min-width: 0; }
.admin-hero,
.admin-section {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(176, 111, 255, 0.42);
    border-left: 3px solid #a765ff;
    border-radius: 10px;
    background:
        radial-gradient(circle at 92% 4%, rgba(167, 101, 255, 0.14), transparent 26%),
        linear-gradient(145deg, rgba(27, 19, 39, 0.98), rgba(14, 11, 23, 0.98));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}
.admin-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px;
}
.admin-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #a765ff, #d7b5ff, transparent);
    opacity: 0.8;
}
.admin-eyebrow,
.admin-section-title span {
    color: #ba86ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.admin-hero h1 { margin: 5px 0 7px; color: #f4e7ff; font: 800 28px/1.15 'Cinzel', serif; }
.admin-hero p { margin: 0; color: var(--text-dim); font-size: 14px; }
.admin-live {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 10px 14px;
    border: 1px solid rgba(255, 94, 108, 0.45);
    border-radius: 999px;
    color: #ff9aa4;
    background: rgba(255, 69, 86, 0.08);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.admin-live span { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.admin-live.is-online { color: #75efa2; border-color: rgba(93, 226, 138, 0.45); background: rgba(48, 194, 100, 0.08); }
.admin-jump {
    position: sticky;
    top: 8px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px;
    border: 1px solid rgba(176, 111, 255, 0.3);
    border-radius: 9px;
    background: rgba(12, 9, 19, 0.92);
    box-shadow: 0 9px 25px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}
.admin-jump a {
    padding: 8px 13px;
    border-radius: 6px;
    color: #cdbbdd;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.admin-jump a:hover { color: #fff; background: rgba(167, 101, 255, 0.18); transform: translateY(-1px); }
.admin-section { padding: 22px; scroll-margin-top: 75px; }
.admin-section-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 17px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(176, 111, 255, 0.3);
}
.admin-section-title h2 { margin: 4px 0 0; color: #f0dfff; font: 800 20px/1.2 'Cinzel', serif; }
.admin-section-title small { color: #9587a6; font-size: 11px; white-space: nowrap; }
.admin-section h3 { margin: 24px 0 9px; color: #d9bdf9; font-size: 14px; }
.admin-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.admin-stat {
    position: relative;
    min-width: 0;
    padding: 15px 16px;
    overflow: hidden;
    border: 1px solid rgba(167, 101, 255, 0.24);
    border-radius: 8px;
    background: linear-gradient(140deg, rgba(55, 37, 75, 0.58), rgba(28, 21, 39, 0.78));
}
.admin-stat::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 2px; background: #a765ff; }
.admin-stat > span { display: block; color: #ad9cbd; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.admin-stat strong { display: block; margin: 6px 0 3px; overflow: hidden; color: #fff; font-size: clamp(19px, 2vw, 26px); text-overflow: ellipsis; white-space: nowrap; }
.admin-stat small { display: block; overflow: hidden; color: #8f819d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.admin-stat--status::before { background: #62e494; }
.admin-stat--warning::before { background: #ffbd59; }
.admin-stat--danger::before { background: #ff6474; }
.admin-network-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid rgba(167, 101, 255, 0.22);
    border-radius: 8px;
    background: rgba(167, 101, 255, 0.2);
}
.admin-network-strip > div { min-width: 0; padding: 12px 14px; background: rgba(17, 13, 25, 0.96); }
.admin-network-strip span { display: block; margin-bottom: 5px; color: #8f819d; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.admin-network-strip code { display: block; overflow: hidden; color: #dcbfff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.admin-two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.admin-two-columns > div { min-width: 0; }
.admin-table { width: 100%; min-width: 760px; margin: 0; }
.admin-table th { position: sticky; top: 0; z-index: 2; white-space: nowrap; background: #271a35; }
.admin-table td { vertical-align: middle; white-space: nowrap; }
.admin-table td.admin-wrap { min-width: 190px; max-width: 380px; white-space: normal; overflow-wrap: anywhere; }
.cat-admin .table-scroll {
    max-width: 100%;
    border: 1px solid rgba(167, 101, 255, 0.2);
    border-radius: 7px;
    scrollbar-color: #8d53d1 #171020;
    scrollbar-width: thin;
}
.cat-admin .table-scroll::-webkit-scrollbar { height: 9px; }
.cat-admin .table-scroll::-webkit-scrollbar-track { background: #171020; }
.cat-admin .table-scroll::-webkit-scrollbar-thumb { border-radius: 8px; background: #8d53d1; }
.admin-ip { display: inline-block; padding: 3px 6px; border: 1px solid rgba(100, 189, 255, 0.25); border-radius: 4px; color: #8fd1ff; background: rgba(49, 137, 202, 0.08); font-size: 11px; }
.admin-note { margin: -3px 0 10px; color: #9b8da8; font-size: 12px; }
.admin-empty { padding: 14px; border: 1px dashed rgba(167, 101, 255, 0.25); border-radius: 7px; color: #8f819d; font-size: 12px; text-align: center; background: rgba(19, 14, 28, 0.55); }
.admin-danger-text { color: #ff8490; font-weight: 700; }
.admin-success-text { color: #78efa3; font-weight: 700; }
.admin-details { margin-top: 20px; border: 1px solid rgba(167, 101, 255, 0.28); border-radius: 8px; background: rgba(19, 14, 28, 0.62); }
.admin-details summary { padding: 13px 15px; color: #d7b8f7; font-size: 12px; font-weight: 700; cursor: pointer; }
.admin-details[open] summary { border-bottom: 1px solid rgba(167, 101, 255, 0.2); }
.admin-details .table-scroll { margin: 12px; }

@media (max-width: 1050px) {
    .admin-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-two-columns { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .cat-admin .minimal-main { padding: 0 10px; }
    .admin-hero { align-items: flex-start; flex-direction: column; padding: 20px; }
    .admin-hero h1 { font-size: 23px; }
    .admin-section { padding: 15px; }
    .admin-section-title { align-items: flex-start; flex-direction: column; gap: 5px; }
    .admin-summary-grid, .admin-network-strip { grid-template-columns: 1fr; }
    .admin-jump { position: static; }
}

.panel {
    position: relative;
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--cat-color, var(--purple)) 14%, transparent), transparent 260px),
        radial-gradient(circle at 0 100%, color-mix(in srgb, var(--cat-color, var(--purple)) 7%, transparent), transparent 210px),
        var(--panel);
    border: 1px solid var(--border); border-radius: var(--radius);
    border-left: 3px solid var(--cat-color, var(--purple));
    padding: 20px 24px; margin-bottom: 18px;
    box-shadow: 0 7px 24px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.025);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.panel::before {
    content: ""; position: absolute; top: -1px; left: 18px; right: 18px; height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cat-color, var(--purple)) 78%, white), transparent);
    opacity: 0.28; transform: scaleX(0.38);
    transition: opacity 0.3s ease, transform 0.35s ease;
    pointer-events: none;
}
.panel::after {
    content: ""; position: absolute; right: 9px; bottom: 9px; z-index: 0;
    width: 42px; height: 42px; pointer-events: none; opacity: 0.28;
    border-right: 1px solid var(--cat-color, var(--purple));
    border-bottom: 1px solid var(--cat-color, var(--purple));
    background: linear-gradient(135deg, transparent 68%, color-mix(in srgb, var(--cat-color, var(--purple)) 18%, transparent));
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.panel:hover::after { opacity: 0.62; transform: translate(-2px, -2px); }
.panel > * { position: relative; z-index: 1; }
.panel:hover { border-color: var(--border-light); border-left-color: var(--cat-color, var(--purple)); box-shadow: 0 10px 30px rgba(0,0,0,0.34), 0 0 20px color-mix(in srgb, var(--cat-color, var(--purple)) 8%, transparent); }
.panel:hover::before { opacity: 0.9; transform: scaleX(1); }
.panel h1, .panel h2, .panel h3 { color: var(--gold-bright); margin-top: 0; }
.panel h1 { font-size: 20px; border-bottom: 2px solid var(--cat-color, var(--border)); padding-bottom: 10px; }
.panel h2 { font-size: 16px; }
.panel > h1, .panel > h2 {
    display: flex; align-items: center; gap: 9px;
    letter-spacing: 0.35px;
    text-shadow: 0 0 14px color-mix(in srgb, var(--cat-color, var(--purple)) 30%, transparent);
}
.panel > h1::before, .panel > h2::before {
    content: ""; width: 7px; height: 7px; flex: 0 0 7px;
    background: var(--cat-color, var(--purple)); transform: rotate(45deg);
    box-shadow: 0 0 9px var(--cat-color, var(--purple));
}
.panel > h2::after {
    content: ""; height: 1px; flex: 1 1 auto;
    background: linear-gradient(90deg, color-mix(in srgb, var(--cat-color, var(--purple)) 55%, transparent), transparent);
}
.panel > h1 + p:not([class]) {
    padding: 9px 12px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--cat-color, var(--purple)) 9%, transparent), transparent);
    border-left: 2px solid color-mix(in srgb, var(--cat-color, var(--purple)) 70%, transparent);
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* Scroll-reveal: assets/js/site.js adds .reveal-pending right before it
   starts observing each panel, then swaps in .is-revealed once it enters
   the viewport. If JS never runs, .reveal-pending is never applied, so
   panels stay at their default opacity -- no blank-page fallback risk. */
.reveal-pending { opacity: 0; transform: translateY(18px); }
.is-revealed { animation: revealUp 0.55s cubic-bezier(0.16, 0.84, 0.44, 1) both; }

/* ---------------------------------------------------------------------
   Widget rail
   --------------------------------------------------------------------- */

.widget-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; overflow: hidden; transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.widget-box:hover { border-color: var(--border-light); }

/* Grand opening countdown */
.widget-launch {
    text-align: center;
    padding: 18px 14px 16px;
    background:
        radial-gradient(120% 90% at 20% 0%, rgba(157,92,255,0.30), transparent 60%),
        radial-gradient(120% 90% at 85% 100%, rgba(232,120,220,0.22), transparent 60%),
        var(--panel-light);
    border: 1px solid var(--purple);
    box-shadow: 0 0 0 1px rgba(157,92,255,0.15), var(--glow);
    position: relative;
    overflow: hidden;
}
/* The pulsing glow lives on ::after (not the element itself) because
   site.js's scroll-reveal also sets `animation` on this same element via
   .is-revealed (revealUp, which fades/slides it in) -- two rules setting
   the `animation` shorthand on one element can't both apply, so whichever
   rule wins the cascade replaces the other outright. Putting this one on a
   pseudo-element keeps it out of that fight entirely; inset:0 + inherited
   radius makes its own box match the widget's, so the glow still reads as
   surrounding the whole card.
   v2 (owner report, "se ve muy feo"): dropped the old ::before (a radial
   blob spinning via `transform: rotate()` combined with a `hue-rotate()`
   filter cycling through the FULL color wheel every 12s). Replaced with a
   static (non-animated) two-tone radial-gradient background instead --
   still on-palette, no motion at all.
   v3 (owner report, "ya no se ve el timer"): v2 ALSO put a background-
   position animation directly on .widget-launch itself, which is exactly
   the same `animation`-shorthand collision this comment already warns
   about -- it silently blocked site.js's own .is-revealed/revealUp
   animation from ever running, so the widget stayed stuck at
   .reveal-pending's opacity:0 forever (invisible, not just static).
   Fixed by dropping that animation entirely (the gradient background
   above is now fully static) instead of relocating it to a pseudo-
   element -- the owner asked for the background animation gone, not
   just moved. */
.widget-launch::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    animation: launchGlowCycle 9s ease-in-out infinite;
    pointer-events: none;
}
/* Diagonal light sweep -- a real element (not a pseudo-element, ::before/
   ::after are already spoken for above) that slides across the card every
   few seconds, same idiom as a premium/shop-item shine effect. Sits above
   the background but below the actual content. v2: narrower and slower
   than before, with a longer pause between passes, so it reads as one
   deliberate glint instead of a constant sweep. */
.widget-launch-shimmer {
    position: absolute; top: -20%; left: -40%;
    width: 26%; height: 140%;
    background: linear-gradient(75deg, transparent, rgba(255,255,255,0.10) 45%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.10) 55%, transparent);
    animation: launchShimmerSweep 7s ease-in-out infinite;
    pointer-events: none;
}
.widget-launch-ribbon {
    display: inline-block;
    font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    color: #1c1128;
    background: linear-gradient(135deg, var(--gold-bright), #f0dcff);
    padding: 4px 14px;
    border-radius: 999px;
    margin-bottom: 10px;
    box-shadow: 0 0 14px rgba(200,150,255,0.55);
    position: relative;
}
.widget-launch-date {
    font-size: 22px; font-weight: 800; color: #fff;
    letter-spacing: 0.5px;
    text-shadow: 0 0 16px rgba(157,92,255,0.65);
    margin-bottom: 14px;
    position: relative;
}
.widget-launch-date sup { font-size: 12px; color: var(--gold-bright); }
.widget-launch-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    position: relative;
}
.widget-launch-unit {
    background: rgba(10,6,18,0.55);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 8px 2px 6px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.widget-launch-value {
    font-size: 26px; font-weight: 800; line-height: 1;
    color: var(--gold-bright);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 10px rgba(200,150,255,0.5);
    transition: transform 0.15s ease, color 0.15s ease;
}
.widget-launch-value.is-ticking { animation: launchDigitPop 0.4s ease; }
.widget-launch-label {
    font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim);
}
.widget-launch-sub {
    margin-top: 12px; font-size: 11px; color: var(--text-dim); line-height: 1.5;
    position: relative;
}

/* Same crown used above the Grand Opening ribbon (owner request), next to
   the Highscores heading instead of standalone above a ribbon. */
.highscores-heading { display: flex; align-items: center; gap: 10px; }
.highscores-crown {
    width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated;
    filter: drop-shadow(0 0 8px rgba(200,150,255,0.7));
}

/* Decorations: corner glyphs, a starfield of small sparks, a crown above the
   ribbon, an ornamental divider, and the live accounts-created counter. */
.widget-launch-crown {
    display: block; width: 40px; height: 40px; margin: 0 auto 4px;
    object-fit: contain; image-rendering: pixelated;
    filter: drop-shadow(0 0 10px rgba(200,150,255,0.75));
    position: relative;
    animation: launchCrownFloat 3.2s ease-in-out infinite;
}
.widget-launch-corner {
    position: absolute; font-size: 12px; color: var(--gold-bright);
    opacity: 0.75; text-shadow: 0 0 8px rgba(200,150,255,0.7);
    animation: launchTwinkle 2.4s ease-in-out infinite;
}
.corner-tl { top: 6px; left: 8px; animation-delay: 0s; }
.corner-tr { top: 6px; right: 8px; animation-delay: 0.6s; }
.corner-bl { bottom: 6px; left: 8px; animation-delay: 1.2s; }
.corner-br { bottom: 6px; right: 8px; animation-delay: 1.8s; }
.widget-launch-spark {
    position: absolute; color: #fff; pointer-events: none;
    animation: launchTwinkle 3s ease-in-out infinite;
}
.spark-1 { top: 22%; left: 14%; font-size: 8px; animation-delay: 0.2s; }
.spark-2 { top: 38%; right: 12%; font-size: 6px; animation-delay: 1s; }
.spark-3 { top: 60%; left: 20%; font-size: 7px; animation-delay: 1.8s; }
.spark-4 { top: 15%; right: 28%; font-size: 6px; animation-delay: 2.4s; }
.spark-5 { bottom: 28%; right: 18%; font-size: 8px; animation-delay: 0.7s; }
.widget-launch-divider {
    display: flex; align-items: center; gap: 8px;
    margin: 14px 0 10px; position: relative;
    color: var(--gold-bright); font-size: 10px;
}
.widget-launch-divider::before, .widget-launch-divider::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-light), transparent);
}
.widget-launch-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; }
.widget-launch-accounts { position: relative; }
.widget-launch-accounts-value {
    display: block; font-size: 24px; font-weight: 800; line-height: 1.1;
    color: #fff; text-shadow: 0 0 14px rgba(157,92,255,0.6);
    font-variant-numeric: tabular-nums;
}
.widget-launch-accounts-label {
    display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-dim); margin-top: 2px;
}
/* Shown once the countdown hits zero, replacing the digit grid (see
   site.js's updateLaunchCountdown). */
.widget-launch-live {
    font-size: 16px; font-weight: 800; letter-spacing: 1px;
    color: #fff; text-shadow: 0 0 16px rgba(232,184,90,0.8);
    padding: 10px 0; position: relative;
    animation: launchLivePulse 1.6s ease-in-out infinite;
}
@keyframes launchCrownFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@keyframes launchTwinkle {
    0%, 100% { opacity: 0.15; transform: scale(0.8); }
    50% { opacity: 0.9; transform: scale(1.15); }
}
/* Cycles the glow through the site's own fantasy palette (violet, pink,
   gold) instead of a plain two-stop pulse -- lives on ::after, see
   the comment above .widget-launch::after for why it can't be on the
   element itself. */
@keyframes launchGlowCycle {
    0%   { box-shadow: 0 0 0 1px rgba(157,92,255,0.32), 0 0 20px rgba(157,92,255,0.5); }
    33%  { box-shadow: 0 0 0 1px rgba(232,120,220,0.30), 0 0 20px rgba(232,120,220,0.5); }
    66%  { box-shadow: 0 0 0 1px rgba(232,184,90,0.28), 0 0 20px rgba(232,184,90,0.5); }
    100% { box-shadow: 0 0 0 1px rgba(157,92,255,0.32), 0 0 20px rgba(157,92,255,0.5); }
}
@keyframes launchShimmerSweep {
    0%, 15% { left: -40%; }
    45%, 100% { left: 130%; }
}
@keyframes launchLivePulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.04); }
}
@keyframes launchDigitPop {
    0% { transform: scale(1.35); color: #fff; }
    100% { transform: scale(1); color: var(--gold-bright); }
}
@media (max-width: 520px) {
    .widget-launch-value { font-size: 20px; }
    .widget-launch-date { font-size: 18px; }
}

.widget-cta { text-align: center; background: var(--panel-light); border-color: var(--border-light); }
.widget-cta-title { font-weight: 800; font-size: 15px; color: var(--gold-bright); letter-spacing: 0.5px; }
.widget-cta-tagline { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin: 4px 0 14px; }
.btn-cta-primary, .btn-cta-secondary { display: block; width: 100%; padding: 10px; border-radius: var(--radius); font-weight: 700; font-size: 13px; margin-bottom: 8px; text-align: center; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.btn-cta-primary { background: linear-gradient(135deg, var(--purple), #6d28d9); color: #f5edff; border: 1px solid #6d28d9; }
.btn-cta-primary:hover { color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: var(--glow); }
.btn-cta-secondary { background: transparent; border: 1px solid var(--border-light); color: var(--text); }
.btn-cta-secondary:hover { border-color: var(--gold-bright); color: var(--gold-bright); text-decoration: none; transform: translateY(-2px); }

.widget-ribbon {
    background: linear-gradient(135deg, #5b2d9e, #2c1550);
    color: #ecdcff; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 8px 14px; margin: -16px -16px 12px -16px;
}
.widget-links { list-style: none; margin: 0; padding: 0; }
.widget-links li { border-bottom: 1px solid var(--border); }
.widget-links li:last-child { border-bottom: none; }
.widget-links li a { display: block; padding: 8px 4px; font-size: 13px; color: var(--text-dim); transition: color 0.15s ease, padding-left 0.15s ease; }
.widget-links li a:hover { color: var(--gold-bright); text-decoration: none; padding-left: 6px; }

/* Server status widget */
.widget-status { text-align: center; }
.status-row { display: flex; align-items: center; gap: 10px; text-align: left; }
.status-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.status-dot-on { background: var(--green); box-shadow: 0 0 10px var(--green); animation: glowPulse 2s ease-in-out infinite; }
.status-dot-off { background: #5a5068; }
.status-title { font-size: 13px; font-weight: 700; color: var(--text); }
.status-sub { font-size: 11px; color: var(--text-dim); }

/* Discord widget */
.widget-discord { text-align: center; background: linear-gradient(180deg, var(--panel-light), var(--panel)); border-color: #4752c4; }
.discord-widget-frame { display: block; width: 100%; max-width: 100%; height: 500px; margin: 0; border: 0; border-radius: 5px; background: #1e1f22; }

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th { text-align: left; background: linear-gradient(180deg, color-mix(in srgb, var(--cat-color, var(--purple)) 12%, rgba(0,0,0,0.38)), rgba(0,0,0,0.38)); color: var(--gold-bright); padding: 8px 10px; border-bottom: 2px solid var(--border-light); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
table.grid td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; transition: background 0.15s ease; }
table.grid tr:nth-child(even) td { background: var(--row-alt); }
table.grid tr:hover td { background: rgba(157,92,255,0.1); }
table.grid tbody tr:hover td:first-child { box-shadow: inset 3px 0 var(--cat-color, var(--purple)); }

/* One row = one line, no matter how long a cell's content is (a full UUID,
   a long reason string) -- .table-scroll's horizontal scrollbar handles
   overflow instead of the cell wrapping and ballooning every row's height.
   Scoped to .grid--compact (pages/admin_reports.php) rather than every
   table.grid site-wide, since other tables (highscores, etc.) may rely on
   normal wrapping for longer text columns. */
table.grid--compact td, table.grid--compact th { white-space: nowrap; }
.table-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { border-radius: 4px; }
.rank-1 { color: #e6cbff; font-weight: 700; text-shadow: 0 0 8px rgba(230,203,255,0.6); }
.rank-2 { color: #d7d1e6; font-weight: 700; }
.rank-3 { color: #b48ee0; font-weight: 700; }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */

.form-row { margin-bottom: 14px; }
.form-row label { display: block; margin-bottom: 5px; font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.form-row input[type=text], .form-row input[type=email], .form-row input[type=password], .form-row select, .form-row textarea {
    width: 100%; max-width: 360px; padding: 9px 12px; background: rgba(0,0,0,0.35);
    border: 1px solid var(--border-light); border-radius: var(--radius); color: var(--text); font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-row select, select:not([multiple]) {
    appearance: none; -webkit-appearance: none; color-scheme: dark;
    padding-right: 42px !important;
    background-color: #140d20;
    background-image:
        linear-gradient(135deg, color-mix(in srgb, var(--cat-color, var(--purple)) 10%, transparent), transparent 60%),
        linear-gradient(45deg, transparent 50%, var(--gold-bright) 50%),
        linear-gradient(135deg, var(--gold-bright) 50%, transparent 50%),
        linear-gradient(90deg, color-mix(in srgb, var(--cat-color, var(--purple)) 45%, transparent), color-mix(in srgb, var(--cat-color, var(--purple)) 45%, transparent));
    background-position: 0 0, calc(100% - 18px) 50%, calc(100% - 13px) 50%, calc(100% - 36px) 50%;
    background-size: auto, 5px 5px, 5px 5px, 1px 55%;
    background-repeat: no-repeat;
    border-color: color-mix(in srgb, var(--cat-color, var(--purple)) 65%, var(--border));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 3px 10px rgba(0,0,0,0.18);
    cursor: pointer;
}
select:not([multiple]):hover {
    background-color: #1a1128;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 13px color-mix(in srgb, var(--cat-color, var(--purple)) 16%, transparent);
}
select option { background: #171020; color: var(--text); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--purple); box-shadow: var(--glow); }
.form-row input:hover, .form-row select:hover, .form-row textarea:hover { border-color: color-mix(in srgb, var(--cat-color, var(--purple)) 70%, var(--border-light)); }
.form-hint { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

.btn-submit { background: linear-gradient(135deg, var(--gold-bright), var(--purple)); border: 1px solid #6d3fc2; color: #140a24; padding: 10px 26px; border-radius: var(--radius); font-weight: 700; font-size: 14px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.btn-submit:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.4); }
.btn-submit:disabled:hover { transform: none; box-shadow: none; }

/* Scroll-to-accept legal box (pages/purchase_confirm.php) -- gates the
   real "Pay with card" button until the donation terms have actually
   been scrolled through, not just present on the page. */
.legal-gate-label { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; display: flex; justify-content: space-between; gap: 8px; }
.legal-gate-scroll-hint { color: var(--gold-bright); font-weight: 600; }
.legal-gate-box {
    max-height: 220px; overflow-y: auto; padding: 12px 14px;
    background: var(--panel-light); border: 1px solid var(--border-light); border-radius: var(--radius);
    font-size: 12px; line-height: 1.6; color: var(--text-dim);
}
.legal-gate-box h4 { margin: 0 0 8px; color: var(--gold-bright); font-size: 13px; }
.legal-gate-box p { margin: 0 0 10px; }
.legal-gate-box ol { margin: 0 0 4px; padding-left: 18px; }
.legal-gate-box li { margin-bottom: 8px; }
.legal-gate-box li strong { color: #ddd2bd; }
.legal-gate-box .legal-gate-end { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font-weight: 600; color: #ddd2bd; }
.legal-gate-box-done { border-color: var(--green); }

/* Purchase and service confirmations use one centered reading/action
   column. This prevents summaries, balances, legal text and buttons from
   looking like unrelated blocks with different widths. */
.checkout-flow { width: 100%; max-width: 560px; margin: 0 auto; }
.shop-offer.checkout-summary { width: 100%; padding: 18px; box-sizing: border-box; }
.stat-grid.checkout-balances {
    display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
    gap: 12px; margin: 16px 0 0;
    align-items: center;
}
.checkout-balances .stat-chip {
    min-width: 0; min-height: 76px; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; box-sizing: border-box;
}
.checkout-balance-arrow {
    align-self: center; justify-self: center;
    width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    border: 1px solid color-mix(in srgb, var(--cat-color, var(--green)) 68%, var(--border));
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.1), rgba(0,0,0,.38) 62%);
    color: var(--cat-color, var(--green)); font-size: 28px; line-height: 1; font-weight: 800;
    text-shadow: 0 0 8px color-mix(in srgb, var(--cat-color, var(--green)) 65%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px color-mix(in srgb, var(--cat-color, var(--green)) 30%, transparent);
    animation: balanceArrowPulse 2.4s ease-in-out infinite;
}
.checkout-balances .balance-after { border-color: color-mix(in srgb, var(--cat-color, var(--green)) 65%, var(--border)); }
.checkout-legal { margin-top: 18px; }
.checkout-form { width: 100%; margin-top: 14px; }
.checkout-form .form-row input,
.checkout-form .form-row select,
.checkout-form .form-row textarea { max-width: none; }
.checkout-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.checkout-actions .btn { width: 100%; min-width: 0; text-align: center; }
.checkout-actions > :only-child { grid-column: 1 / -1; }
.checkout-note { margin: 9px 0 0; color: var(--text-dim); font-size: 12px; line-height: 1.55; }
.checkout-test-alert { margin-top: 24px; }
.checkout-test-form { padding-top: 0; }
.service-flow { width: 100%; max-width: 420px; margin: 0 auto; }
.service-flow > .form-row, .service-flow > form, .service-flow > .alert { max-width: none !important; }
@media (max-width: 520px) {
    .stat-grid.checkout-balances, .checkout-actions { grid-template-columns: 1fr; }
    .checkout-balance-arrow { animation-name: balanceArrowPulseMobile; }
    .shop-offer-image--outfit { width: 100%; height: 132px; gap: 4px; }
    .shop-offer-image--outfit img { width: calc((100% - 4px) / 2); height: 126px; }
}
@keyframes balanceArrowPulseMobile {
    0%, 100% { transform: rotate(90deg) translateX(0); filter: brightness(0.9); }
    50% { transform: rotate(90deg) translateX(3px); filter: brightness(1.25); }
}

.alert { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 13px; border: 1px solid; animation: fadeInUp 0.3s ease both; }
.alert-success { background: rgba(126,200,80,0.12); border-color: var(--green); color: #b7e69a; }
.alert-error { background: rgba(224,90,90,0.12); border-color: var(--red); color: #f0a8a5; }
.alert-info { background: rgba(157,92,255,0.12); border-color: var(--purple); color: #d3bdf2; }

/* ---------------------------------------------------------------------
   Account dashboard
   --------------------------------------------------------------------- */

.account-box { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; background: var(--panel-light); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 18px; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.badge-free { background: rgba(224,90,90,0.18); color: #f0a8a5; }
.badge-vip { background: rgba(157,92,255,0.22); color: var(--gold-bright); }
.stat-chip { background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; font-size: 12px; color: var(--text-dim); min-width: 140px; transition: border-color 0.15s ease, transform 0.15s ease; }
.stat-chip:hover { border-color: var(--purple); transform: translateY(-2px); }
.stat-chip strong { display: block; color: var(--gold-bright); font-size: 15px; }
.stat-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }

.guild-settings-copy { margin: 0 0 14px; color: var(--text-dim); font-size: 13px; }
.guild-inline-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.guild-inline-form .form-row { flex: 1 1 260px; margin-bottom: 0; }
.guild-rank-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.guild-rank-form .form-row { margin-bottom: 0; }
.guild-rank-form .form-row input { width: 100%; max-width: none; box-sizing: border-box; }
.guild-rank-form .btn-submit { grid-column: 1 / -1; justify-self: start; }
.guild-empty-value { color: var(--text-dim); }
@media (max-width: 620px) {
    .guild-rank-form { grid-template-columns: 1fr; }
    .guild-rank-form .btn-submit { width: 100%; }
}
.char-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); transition: background 0.15s ease; }
.char-row:hover { background: rgba(157,92,255,0.06); }
.char-row:last-child { border-bottom: none; }
.char-row .name { font-weight: 700; color: var(--gold-bright); }
.char-row .meta { font-size: 12px; color: var(--text-dim); }
.char-row > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); margin-right: 6px; }
.offline-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5a5068; margin-right: 6px; }

/* One vocation palette everywhere a class or promotion is shown. */
.vocation-name,
.hs-chip.vocation-sorcerer, .hs-chip.vocation-druid,
.hs-chip.vocation-paladin, .hs-chip.vocation-knight,
.ultimate-spell-content h3.vocation-sorcerer,
.ultimate-spell-content h3.vocation-druid,
.ultimate-spell-content h3.vocation-paladin,
.ultimate-spell-content h3.vocation-knight,
.vocation-preview-copy h3 {
    font-weight: 700;
    -webkit-text-stroke: 0.45px rgba(0,0,0,0.98);
    paint-order: stroke fill;
}
.vocation-name.vocation-sorcerer,
.hs-chip.vocation-sorcerer,
.ultimate-spell-content h3.vocation-sorcerer { color: #b47cff !important; text-shadow: 0 0 8px rgba(180,124,255,0.3); }
.vocation-name.vocation-druid,
.hs-chip.vocation-druid,
.ultimate-spell-content h3.vocation-druid { color: #65d58a !important; text-shadow: 0 0 8px rgba(101,213,138,0.25); }
.vocation-name.vocation-paladin,
.hs-chip.vocation-paladin,
.ultimate-spell-content h3.vocation-paladin { color: #efc75e !important; text-shadow: 0 0 8px rgba(239,199,94,0.28); }
.vocation-name.vocation-knight,
.hs-chip.vocation-knight,
.ultimate-spell-content h3.vocation-knight { color: #f06a6a !important; text-shadow: 0 0 8px rgba(240,106,106,0.28); }
.vocation-name.vocation-none { color: var(--text-dim); }
select[data-vocation-select] { color: var(--selected-vocation-color, #b47cff); font-weight: 700; }
select[data-vocation-select] option.vocation-sorcerer { color: #b47cff; }
select[data-vocation-select] option.vocation-druid { color: #65d58a; }
select[data-vocation-select] option.vocation-paladin { color: #efc75e; }
select[data-vocation-select] option.vocation-knight { color: #f06a6a; }

.account-panel {
    background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--cat-color, var(--purple)) 19%, transparent), transparent 220px),
        linear-gradient(145deg, rgba(32,21,46,0.96), rgba(17,12,26,0.96));
}
.account-status-panel .account-box {
    background: linear-gradient(125deg, color-mix(in srgb, var(--cat-color, var(--purple)) 13%, #21172e), #171020);
}
.account-characters-panel .char-row {
    margin-bottom: 7px; border: 1px solid rgba(157,92,255,0.18); border-radius: 7px;
    background: rgba(8,5,13,0.28);
}
.account-characters-panel .char-row:last-child { margin-bottom: 0; border-bottom: 1px solid rgba(157,92,255,0.18); }
.account-characters-panel .char-row:hover {
    border-color: color-mix(in srgb, var(--cat-color, var(--purple)) 66%, var(--border));
    background: color-mix(in srgb, var(--cat-color, var(--purple)) 8%, rgba(8,5,13,0.45));
}

.character-create-layout {
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
    gap: 20px; align-items: stretch;
}
.character-create-form {
    padding: 16px; border: 1px solid var(--border); border-radius: 10px;
    background: rgba(7,4,12,0.32); box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}
.character-create-form .form-row input,
.character-create-form .form-row select { max-width: none; }
.vocation-preview {
    --vocation-accent: var(--purple); position: relative; min-height: 390px; overflow: hidden;
    display: flex; flex-direction: column; align-items: center;
    border: 1px solid color-mix(in srgb, var(--vocation-accent) 68%, var(--border)); border-radius: 10px;
    background:
        radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--vocation-accent) 24%, transparent), transparent 46%),
        linear-gradient(160deg, rgba(29,19,42,0.98), rgba(9,6,15,0.98));
    box-shadow: 0 10px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.vocation-preview:not(.is-empty) { box-shadow: 0 12px 28px rgba(0,0,0,0.32), 0 0 18px color-mix(in srgb, var(--vocation-accent) 17%, transparent); }
.vocation-artwork-stage {
    position: relative; width: 100%; height: 214px; display: grid; place-items: end center;
    overflow: hidden; border-bottom: 1px solid color-mix(in srgb, var(--vocation-accent) 45%, var(--border));
}
.vocation-artwork-stage::after {
    content: ""; position: absolute; inset: auto 0 0; height: 55px; pointer-events: none;
    background: linear-gradient(transparent, rgba(10,6,16,0.9));
}
.vocation-artwork {
    --vocation-artwork-offset: 0px;
    position: relative; z-index: 0; display: block; width: auto; height: 205px; max-width: 92%;
    margin: 0 auto; justify-self: center; object-fit: contain; object-position: center bottom;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.7)); animation: vocationReveal 0.35s ease both;
}
.vocation-preview[data-vocation="knight"] .vocation-artwork { --vocation-artwork-offset: 18px; }
.vocation-banner {
    position: relative; z-index: 2; display: block; width: min(230px, 82%); height: auto;
    align-self: center; margin: -13px auto 3px !important; object-position: center;
    transform: translateX(12px);
    filter: drop-shadow(0 5px 8px rgba(0,0,0,0.72));
}
.vocation-preview-copy {
    width: 100%; padding: 5px 18px 18px; display: flex; flex-direction: column;
    align-items: center; text-align: center;
}
.vocation-preview-copy h3 { width: 100%; margin: 3px auto 8px; color: var(--vocation-accent); font-size: 18px; text-align: center !important; text-shadow: 0 0 10px color-mix(in srgb, var(--vocation-accent) 42%, transparent); }
.vocation-preview-copy p { margin: 0; color: #c9bdd7; font-size: 12.5px; line-height: 1.58; }
.vocation-role {
    color: var(--vocation-accent); font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
    text-transform: uppercase; text-shadow: 0 0 9px color-mix(in srgb, var(--vocation-accent) 45%, transparent);
}
.vocation-placeholder {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 24px; text-align: center; color: var(--text-dim);
}
.vocation-placeholder::before {
    content: ""; width: 44px; height: 44px; margin-bottom: 5px; transform: rotate(45deg);
    border: 1px solid var(--border-light); box-shadow: inset 0 0 15px rgba(157,92,255,0.16), 0 0 14px rgba(157,92,255,0.14);
}
.vocation-placeholder strong { color: var(--gold-bright); font-family: "Cinzel", serif; font-size: 16px; }
.vocation-placeholder span { max-width: 230px; font-size: 12px; }
.vocation-preview.is-empty .vocation-artwork,
.vocation-preview.is-empty .vocation-banner { display: none; }
.vocation-preview:not(.is-empty) .vocation-placeholder { display: none; }
@keyframes vocationReveal {
    from { opacity: 0; transform: translate(var(--vocation-artwork-offset), 8px) scale(0.97); }
    to { opacity: 1; transform: translate(var(--vocation-artwork-offset), 0) scale(1); }
}
@media (max-width: 760px) {
    .character-create-layout { grid-template-columns: 1fr; }
    .vocation-preview { min-height: 370px; }
}

/* Shared page polish. Every route is built from these surfaces, so cards,
   lists, forms and data pages gain the same depth without page-specific
   decorations or duplicated scripts. */
.account-box, .stat-chip, .faq-item, .shop-list-row, .guild-list-card,
.guild-war-card, .event-calendar, .legal-gate-box, .char-about,
.equip-inventory {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 5px 16px rgba(0,0,0,0.18);
    transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.account-box:hover, .stat-chip:hover, .faq-item:hover, .shop-list-row:hover,
.guild-list-card:hover, .guild-war-card:hover, .event-calendar:hover,
.legal-gate-box:hover, .char-about:hover, .equip-inventory:hover {
    border-color: color-mix(in srgb, var(--cat-color, var(--purple)) 72%, var(--border-light));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 9px 24px rgba(0,0,0,0.27), 0 0 15px color-mix(in srgb, var(--cat-color, var(--purple)) 8%, transparent);
}
.stat-chip:hover, .faq-item:hover, .shop-list-row:hover,
.guild-list-card:hover, .guild-war-card:hover { transform: translateY(-2px); }

/* ---------------------------------------------------------------------
   News: parchment cards with a diagonal date ribbon
   --------------------------------------------------------------------- */

.news-parchment { background: var(--parchment); color: var(--parchment-ink); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; border: 1px solid #cbb8e8; animation: fadeInUp 0.5s ease both; }
.news-ribbon-row { position: relative; background: linear-gradient(135deg, #7b3fd4, #3d1a75); padding: 10px 20px; }
.news-ribbon-row::after { content: ""; position: absolute; right: -14px; top: 0; bottom: 0; width: 28px; background: inherit; transform: skewX(-18deg); }
.news-ribbon-text { position: relative; z-index: 1; color: #f2e8ff; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.news-body-block { padding: 18px 22px; }
.news-title { font-size: 19px; font-weight: 800; color: #4c1d95; margin: 0 0 10px; }
.news-excerpt { font-size: 13px; line-height: 1.6; color: #302545; }
.news-footer-bar { display: flex; justify-content: space-between; align-items: center; background: #160f24; padding: 10px 22px; font-size: 11px; color: #ab9bc7; text-transform: uppercase; letter-spacing: 0.5px; }
.news-footer-bar a { color: var(--gold-bright); text-transform: none; letter-spacing: normal; font-weight: 700; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 10px; text-transform: uppercase; font-weight: 700; margin-right: 6px; }
.tag-news { background: rgba(157,92,255,0.18); color: var(--purple); }
.tag-event { background: rgba(126,200,80,0.18); color: var(--green); }
.news-meta { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; }
.news-card { border-bottom: 1px solid var(--border); padding: 14px 0; }
.news-card:first-child { padding-top: 0; }
.news-card:last-child { border-bottom: none; }

/* ---------------------------------------------------------------------
   Event Schedule: month calendar grid
   --------------------------------------------------------------------- */

.event-calendar {
    background: var(--panel-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 16px;
    animation: fadeInUp 0.5s ease both;
}
.event-calendar-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.event-calendar-title {
    font-family: "Cinzel", "Georgia", serif;
    font-size: 17px; font-weight: 800; letter-spacing: 1px;
    color: var(--gold-bright);
    text-shadow: 0 0 12px rgba(200,150,255,0.35);
}
.event-calendar-nav {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(0,0,0,0.3); border: 1px solid var(--border-light);
    color: var(--text); font-size: 13px;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.event-calendar-nav:hover {
    color: var(--gold-bright); border-color: var(--gold-bright);
    transform: translateY(-1px); text-decoration: none;
}
.event-calendar-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.event-calendar-weekdays {
    margin-bottom: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--text-dim); text-align: center;
}
.event-calendar-day {
    position: relative;
    min-height: 74px;
    padding: 6px;
    border-radius: 6px;
    background: rgba(0,0,0,0.28);
    border: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 3px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.event-calendar-day:hover { border-color: var(--border-light); background: rgba(0,0,0,0.4); }
.event-calendar-day-empty { background: transparent; border-color: transparent; }
.event-calendar-day-today {
    border-color: var(--gold-bright);
    box-shadow: 0 0 0 1px var(--gold-bright), 0 0 14px rgba(157,92,255,0.35);
}
.event-calendar-daynum {
    font-size: 11px; font-weight: 700; color: var(--text-dim);
}
.event-calendar-day-today .event-calendar-daynum { color: var(--gold-bright); }
.event-calendar-pill {
    display: block;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px;
    padding: 2px 6px; border-radius: 20px;
    background: rgba(157,92,255,0.18); color: var(--gold-bright);
    border: 1px solid rgba(157,92,255,0.4);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.event-calendar-legend {
    display: flex; flex-wrap: wrap; gap: 18px;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
    font-size: 11px; color: var(--text-dim);
}
.event-calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.event-calendar-swatch {
    display: inline-block; width: 10px; height: 10px; border-radius: 3px;
}
.event-calendar-swatch-event { background: rgba(157,92,255,0.4); border: 1px solid rgba(157,92,255,0.6); }

@media (max-width: 620px) {
    .event-calendar-day { min-height: 56px; padding: 4px; }
    .event-calendar-pill { font-size: 8.5px; padding: 1px 4px; }
}

/* Featured posts use the normal News metadata while keeping their own art direction. */
.featured-news-entry {
    --featured-accent: #c896ff;
    margin-bottom: 26px;
    animation: fadeInUp 0.5s ease both;
}
.featured-news-pets { --featured-accent: #76df9a; }
.featured-news-sets { --featured-accent: #e8c45f; }
.featured-news-spells { --featured-accent: #c896ff; }
.featured-news-opening { --featured-accent: #ffd166; }
.featured-news-testers { --featured-accent: #63e6be; }
.featured-news-meta,
.featured-news-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid color-mix(in srgb, var(--featured-accent) 52%, #251733);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--featured-accent) 23%, #1b1127), #120b1d 72%);
    color: #d8cce7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}
.featured-news-meta {
    margin-bottom: 8px;
    padding: 9px 14px;
    border-radius: 9px 9px 4px 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.featured-news-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--featured-accent);
}
.featured-news-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--featured-accent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--featured-accent) 72%, transparent);
}
.featured-news-footer {
    margin-top: 8px;
    padding: 8px 14px;
    border-radius: 4px 4px 9px 9px;
    color: #a99ab9;
}
.featured-news-entry > .fair-progression-feature,
.featured-news-entry > .ultimate-spells-feature { margin-bottom: 0; }

/* Featured Ultimate Spells announcement on the Latest News page. */
.ultimate-spells-feature {
    position: relative;
    margin-bottom: 24px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(200, 150, 255, 0.55);
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% -20%, rgba(157, 92, 255, 0.3), transparent 48%),
        linear-gradient(155deg, rgba(31, 18, 47, 0.98), rgba(10, 7, 17, 0.98));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: fadeInUp 0.5s ease both;
}
.ultimate-spells-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 20%, rgba(200, 150, 255, 0.05) 48%, transparent 75%);
}
.ultimate-spells-intro { position: relative; z-index: 1; max-width: 760px; margin-bottom: 20px; }
.ultimate-spells-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--gold-bright);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.ultimate-spells-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 10px rgba(200, 150, 255, 0.9);
}
.ultimate-spells-intro h2 {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(22px, 3vw, 31px);
    line-height: 1.2;
    text-shadow: 0 0 20px rgba(157, 92, 255, 0.35);
}
.ultimate-spells-intro h2 span { color: var(--gold-bright); }
.ultimate-spells-intro p { margin: 5px 0 0; color: #c9bddb; font-size: 13px; }
.ultimate-spells-intro .ultimate-spells-lead { color: #f0e9fa; font-size: 14px; }

.ultimate-spells-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.ultimate-spell-card {
    --spell-accent: #c896ff;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--spell-accent) 58%, #241832);
    border-radius: 10px;
    background: rgba(11, 8, 18, 0.82);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ultimate-spell-card:hover {
    transform: translateY(-3px);
    border-color: var(--spell-accent);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--spell-accent) 22%, transparent);
}
.ultimate-spell-ms { --spell-accent: #ff725f; }
.ultimate-spell-rp { --spell-accent: #f4c766; }
.ultimate-spell-ed { --spell-accent: #65d58b; }
.ultimate-spell-ek { --spell-accent: #69aef5; }
.ultimate-spell-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1.09 / 1;
    background: #09060e;
    border-bottom: 2px solid var(--spell-accent);
}
.ultimate-spell-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 -35px 35px rgba(5, 3, 9, 0.35);
}
.ultimate-spell-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.news-lightbox-trigger {
    cursor: zoom-in;
    transition: transform 0.35s cubic-bezier(0.2, 0.75, 0.25, 1), filter 0.35s ease;
    transform-origin: center;
}
.ultimate-spell-image:hover .news-lightbox-trigger,
.fair-progression-image:hover .news-lightbox-trigger {
    transform: scale(1.045);
    filter: brightness(1.08) saturate(1.06);
}
.news-lightbox-trigger:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: -4px;
}
.ultimate-vocation-code {
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 10px;
    min-width: 36px;
    padding: 4px 8px;
    border: 1px solid var(--spell-accent);
    border-radius: 20px;
    background: rgba(8, 5, 13, 0.88);
    color: var(--spell-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
    box-shadow: 0 0 12px color-mix(in srgb, var(--spell-accent) 35%, transparent);
}
.ultimate-spell-content { padding: 14px 16px 16px; }
.ultimate-spell-content h3 { margin: 0; color: #fff; font-size: 16px; }
.ultimate-role { margin: 3px 0 13px; color: var(--spell-accent); font-size: 12px; font-weight: 700; }
.ultimate-spell-label {
    display: block;
    margin-bottom: 2px;
    color: #8f819f;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.ultimate-spell-content strong { color: #eee6f8; font-size: 13px; }

/* Free progression and endgame sets announcement. */
.fair-progression-feature {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(232, 196, 95, 0.55);
    border-radius: 12px;
    background:
        radial-gradient(circle at 12% 8%, rgba(221, 188, 93, 0.2), transparent 44%),
        linear-gradient(145deg, rgba(31, 25, 18, 0.98), rgba(13, 10, 8, 0.98));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: fadeInUp 0.5s ease both;
}
.fair-progression-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 231, 160, 0.045) 50%, transparent 78%);
}
.fair-progression-copy,
.fair-progression-image { position: relative; z-index: 1; }
.fair-progression-kicker {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--gold-bright);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.fair-progression-copy h2 {
    margin: 0 0 13px;
    color: #fff4c9;
    font-size: clamp(25px, 3.5vw, 36px);
    line-height: 1.12;
    text-shadow: 0 0 22px rgba(232, 196, 95, 0.3);
}
.fair-progression-copy p {
    margin: 0 0 12px;
    color: #ddd2bd;
    font-size: 13px;
    line-height: 1.65;
}
.fair-progression-copy strong { color: var(--gold-bright); }
.fair-progression-copy .fair-progression-closing {
    margin: 17px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(232, 196, 95, 0.25);
    color: #fff4d3;
    font-weight: 700;
}
.fair-progression-image {
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(232, 196, 95, 0.48);
    border-radius: 10px;
    background: #0b0806;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
}
.fair-progression-image img {
    display: block;
    width: 100%;
    height: auto;
}
.fair-progression-image figcaption {
    padding: 9px 12px;
    color: #bbaa86;
    font-size: 10px;
    letter-spacing: 0.6px;
    text-align: center;
    text-transform: uppercase;
}

/* Featured Old Fishing Area announcement -- same two-column card language
   as .fair-progression-feature/.pet-system-feature, aquatic accent. */
.fishing-area-feature {
    border-color: rgba(95, 212, 232, 0.58);
    background:
        radial-gradient(circle at 12% 8%, rgba(48, 168, 199, 0.22), transparent 44%),
        linear-gradient(145deg, rgba(12, 26, 31, 0.98), rgba(6, 13, 16, 0.98));
}
.fishing-area-feature .fair-progression-kicker { color: #6fe0ff; }
.fishing-area-feature .fair-progression-copy h2 {
    color: #d8fbff;
    text-shadow: 0 0 22px rgba(95, 212, 232, 0.32);
}
.fishing-area-feature .fair-progression-closing { border-top-color: rgba(95, 212, 232, 0.3); }
.fishing-area-feature .fair-progression-image { border-color: rgba(95, 212, 232, 0.5); }
.featured-news-fishing { --featured-accent: #5fd4e8; }
.pet-system-feature {
    border-color: rgba(104, 205, 139, 0.58);
    background:
        radial-gradient(circle at 12% 8%, rgba(74, 182, 112, 0.22), transparent 44%),
        linear-gradient(145deg, rgba(18, 31, 22, 0.98), rgba(8, 14, 10, 0.98));
}
.pet-system-feature .fair-progression-kicker { color: #76df9a; }
.pet-system-feature .fair-progression-copy h2 {
    color: #dcffe8;
    text-shadow: 0 0 22px rgba(74, 182, 112, 0.32);
}
.pet-system-feature .fair-progression-closing { border-top-color: rgba(104, 205, 139, 0.3); }
.pet-system-feature .fair-progression-image { border-color: rgba(104, 205, 139, 0.5); }

/* Featured Crafting Area announcement -- same two-column card language
   as .fair-progression-feature/.pet-system-feature/.fishing-area-feature,
   amber/forge accent. */
.crafting-area-feature {
    border-color: rgba(255, 159, 67, 0.58);
    background:
        radial-gradient(circle at 12% 8%, rgba(214, 118, 45, 0.24), transparent 44%),
        linear-gradient(145deg, rgba(31, 20, 12, 0.98), rgba(14, 9, 6, 0.98));
}
.crafting-area-feature .fair-progression-kicker { color: #ffb26b; }
.crafting-area-feature .fair-progression-copy h2 {
    color: #ffe6cc;
    text-shadow: 0 0 22px rgba(255, 159, 67, 0.32);
}
.crafting-area-feature .fair-progression-closing { border-top-color: rgba(255, 159, 67, 0.3); }
.crafting-area-feature .fair-progression-image { border-color: rgba(255, 159, 67, 0.5); }
.featured-news-crafting { --featured-accent: #ff9f43; }

/* Featured Shop Showcase announcement -- same card language as
   .fair-progression-feature, but STACKED (text on top, image below at
   full width) instead of the usual two-column grid. The source
   screenshot is a wide store-window capture; forcing it into the narrow
   ~1.1fr image column every other featured card uses would shrink it far
   too small to read. Single-column grid + a width cap on the image
   keeps it large without letting it overrun the card on wide screens. */
.shop-showcase-feature {
    grid-template-columns: 1fr;
    border-color: rgba(120, 200, 255, 0.55);
    background:
        radial-gradient(circle at 50% -10%, rgba(90, 170, 255, 0.22), transparent 46%),
        linear-gradient(155deg, rgba(14, 22, 34, 0.98), rgba(7, 11, 17, 0.98));
}
.shop-showcase-feature .fair-progression-kicker { color: #8fd0ff; }
.shop-showcase-feature .fair-progression-copy h2 {
    color: #eaf6ff;
    text-shadow: 0 0 22px rgba(120, 200, 255, 0.32);
}
.shop-showcase-feature .fair-progression-closing { border-top-color: rgba(120, 200, 255, 0.3); }
.shop-showcase-feature .fair-progression-image {
    max-width: 760px;
    margin: 0 auto;
    border-color: rgba(120, 200, 255, 0.5);
}

/* Animated image viewer shared by every featured News image. */
.news-lightbox {
    position: fixed;
    z-index: 2000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(18px, 4vw, 52px);
    visibility: hidden;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(123, 63, 212, 0.2), transparent 46%),
        rgba(7, 4, 12, 0.9);
    backdrop-filter: blur(9px);
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.news-lightbox.is-open {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}
.news-lightbox-dialog {
    position: relative;
    width: min(1100px, 94vw);
    max-height: 92vh;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(200, 150, 255, 0.66);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(32, 20, 47, 0.98), rgba(12, 8, 18, 0.99));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7), 0 0 34px rgba(157, 92, 255, 0.2);
    transform: translateY(24px) scale(0.88);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.18, 0.82, 0.25, 1), opacity 0.24s ease;
}
.news-lightbox.is-open .news-lightbox-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.news-lightbox-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(92vh - 74px);
    margin: 0 auto;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.news-lightbox-caption {
    min-height: 30px;
    margin: 0;
    padding: 10px 46px 2px;
    color: #e8dcf5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
}
.news-lightbox-close {
    position: absolute;
    z-index: 2;
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(200, 150, 255, 0.65);
    border-radius: 50%;
    background: rgba(12, 8, 18, 0.9);
    color: #fff;
    font: 700 25px/1 Inter, sans-serif;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.news-lightbox-close:hover,
.news-lightbox-close:focus-visible {
    transform: rotate(8deg) scale(1.08);
    border-color: var(--gold-bright);
    background: #542495;
    outline: none;
}
body.news-lightbox-open { overflow: hidden; }

/* ---------------------------------------------------------------------
   FAQ accordion
   --------------------------------------------------------------------- */

.faq-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; background: var(--panel-light); }
.faq-question { padding: 8px 12px; cursor: pointer; font-weight: 700; font-size: 12.5px; line-height: 1.3; color: var(--gold-bright); display: flex; justify-content: space-between; align-items: center; list-style: none; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after { content: "+"; font-size: 18px; color: var(--purple); transition: transform 0.2s ease; }
details[open] .faq-question::after { transform: rotate(45deg); }
.faq-answer { padding: 0 16px 14px; font-size: 13px; color: var(--text-dim); line-height: 1.6; animation: fadeInUp 0.25s ease both; }
.faq-question-label { display: flex; align-items: center; gap: 8px; }
.faq-icon-inline { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; flex: 0 0 auto; }
/* Single-icon answers (owner report: icons must stay hidden until the
   item is opened, never in the collapsed summary bar). */
.faq-answer-with-icon { display: flex; gap: 12px; align-items: flex-start; }
.faq-answer-icon { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; flex: 0 0 auto; }
/* 2026-09-17 (owner report: single-item icon rows like "Loot Backpack"
   showed a huge mostly-empty box with the icon stuck on the left). This
   div had no width of its own, so it stretched to the full answer width;
   `.faq-chain-plain`'s `justify-content: flex-start` then left a single
   66px item pinned to the left edge of that wide box. `width: fit-content`
   makes the box hug however many items it actually holds (wrapping at
   the answer's full width only once it needs to), and centering it makes
   both a lone item and a full row read as one deliberate, centered unit. */
.faq-chain { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 10px auto 0; padding: 10px; width: fit-content; max-width: 100%; background: rgba(0,0,0,0.18); border: 1px solid var(--border); border-radius: 10px; }
.faq-chain-plain { gap: 18px; }
.faq-chain-step { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--text-dim); text-align: center; width: 66px; }
.faq-chain-step img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.faq-chain-arrow { color: var(--purple); font-weight: 700; font-size: 16px; flex: 0 0 auto; }
@media (max-width: 520px) {
    .faq-chain-step { width: 54px; }
    .faq-chain-step img { width: 30px; height: 30px; }
}

/* ---------------------------------------------------------------------
   Shop
   --------------------------------------------------------------------- */

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.shop-offer { background: var(--panel-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; text-align: center; transition: transform 0.15s ease, border-color 0.15s ease; }
.shop-offer:hover { transform: translateY(-3px); border-color: var(--purple); }
.shop-offer .points { color: var(--gold-bright); font-weight: 700; font-size: 15px; margin: 8px 0; }
.points-packages-intro {
    position: relative; margin: 18px 0 14px; padding: 14px 18px 14px 20px; overflow: hidden;
    background: linear-gradient(110deg, color-mix(in srgb, var(--cat-color, var(--green)) 14%, transparent), rgba(0,0,0,0.18));
    border: 1px solid color-mix(in srgb, var(--cat-color, var(--green)) 38%, var(--border));
    border-left: 3px solid var(--cat-color, var(--green)); border-radius: var(--radius);
}
.points-packages-intro::after {
    content: ""; position: absolute; top: -45px; right: -28px; width: 130px; height: 130px;
    border: 1px solid color-mix(in srgb, var(--cat-color, var(--green)) 25%, transparent);
    border-radius: 50%; box-shadow: 0 0 24px color-mix(in srgb, var(--cat-color, var(--green)) 12%, transparent);
}
.points-packages-intro > * { position: relative; z-index: 1; }
.points-packages-intro > span,
.points-package-label {
    color: var(--cat-color, var(--green)); font-size: 10px; font-weight: 800;
    letter-spacing: 1.4px; text-transform: uppercase;
}
.points-packages-intro h2 { margin: 3px 0 2px; color: #efe7f6; }
.points-packages-intro p { margin: 0; color: var(--text-dim); font-size: 13px; }
.points-package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.points-package-card {
    min-height: 142px; display: flex; flex-direction: column; justify-content: center;
    background: linear-gradient(150deg, color-mix(in srgb, var(--cat-color, var(--green)) 8%, var(--panel-light)), var(--panel-light));
}
.points-package-card .btn { margin-top: auto !important; }
.points-package-label { margin-bottom: 2px; opacity: 0.86; }
@media (max-width: 700px) {
    .points-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
    .points-package-grid { grid-template-columns: 1fr; }
}
.shop-offer-image {
    width: 128px; height: 128px; margin: 0 auto 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--panel); border: 1px solid var(--border-light); border-radius: var(--radius);
}
.shop-offer-image img { max-width: 96%; max-height: 96%; image-rendering: pixelated; }
/* Outfits only, 15% bigger than the 128px baseline (128 * 1.15 = 147).
   The cropped outfit PNGs are much smaller than 147px in their own actual
   pixel dimensions, so max-width/max-height (a ceiling, never scales a
   smaller image up) would leave them rendering at that same tiny native
   size in a bigger empty box -- these need width/height + object-fit
   instead, so the image actually stretches up to fill the space. Mounts
   and items keep the max-width/max-height behavior above untouched. */
/* Two previews (Male + Female) side by side, not stacked/overlapping --
   widened from the single-image 147x147 box just enough to fit both at a
   readable size, height unchanged. */
.shop-offer-image--outfit { width: 300px; height: 147px; gap: 10px; }
.shop-offer-image--outfit img { width: 140px; height: 140px; max-width: none; max-height: none; object-fit: contain; flex: 0 0 auto; }

/* Shop catalog as a list (one row per offer) instead of a card grid --
   used by shop_browse.php for every category, item/outfit/mount alike.
   Image boxes were 128px (147 for outfits) -- fine for shop_confirm.php's
   single-item hero preview (.shop-offer-image below, left untouched), but
   in a scrollable list of ~130+ offers that made every row roughly as
   tall as the icon itself, way heavier than a normal shop list should
   feel (checked against solarisot.net's own gift-shop list for scale:
   its icons run well under half this size relative to its row height).
   Shrunk to 56px (64px for outfits, same 15% bump ratio as before). */
.shop-list { display: flex; flex-direction: column; gap: 10px; }
.shop-list-row {
    display: flex; align-items: center; gap: 16px;
    background: var(--panel-light); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 12px 16px; transition: border-color 0.15s ease;
}
.shop-list-row:hover { border-color: var(--purple); }
.shop-list-image {
    flex: 0 0 56px; width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: var(--panel); border: 1px solid var(--border-light); border-radius: var(--radius);
}
.shop-list-image img { max-width: 96%; max-height: 96%; image-rendering: pixelated; }
/* Outfits only, 15% bigger than the 56px baseline (56 * 1.15 = 64) --
   see the matching comment on .shop-offer-image--outfit for why this
   needs width/height + object-fit instead of max-width/max-height. */
/* Two previews (Male + Female) side by side -- widened just enough to fit
   both without overlapping; row height (64px) and every other offer
   type's box are untouched, so the list's overall footprint barely moves. */
.shop-list-image--outfit { flex-basis: 108px; width: 108px; height: 64px; gap: 6px; }
.shop-list-image--outfit img { width: 46px; height: 46px; max-width: none; max-height: none; object-fit: contain; flex: 0 0 auto; }
.shop-list-info { flex: 1 1 auto; min-width: 0; }
.shop-list-name { font-weight: 600; font-size: 15px; }
.shop-list-desc { color: var(--text-dim); font-size: 12px; margin-top: 4px; white-space: pre-line; }
.shop-list-action { flex: 0 0 auto; min-width: 160px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.shop-list-action .points { color: var(--gold-bright); font-weight: 700; font-size: 15px; margin: 0; }
@media (max-width: 560px) {
    .shop-list-row { flex-wrap: wrap; }
    .shop-list-action { min-width: 0; width: 100%; align-items: stretch; }
}

.shop-tabs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px;
    align-items: stretch; margin-top: 16px;
    padding: 10px 0 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.shop-tab {
    width: 100%; min-height: 42px; padding: 8px 12px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; border: 1px solid var(--border-light);
    background: var(--panel-light); color: var(--text-dim); font-weight: 600; font-size: 13px;
    line-height: 1.25; text-align: center;
    cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.shop-tab:hover { transform: translateY(-2px); color: var(--text); border-color: var(--purple); }
.shop-tab.active { background: linear-gradient(135deg, var(--gold-bright), var(--purple)); border-color: #6d3fc2; color: #140a24; box-shadow: 0 4px 14px rgba(157, 92, 255, 0.35); }

/* ---------------------------------------------------------------------
   Character profile: stat bars + equipment grid
   --------------------------------------------------------------------- */

.statbar {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    height: 34px; border-radius: 17px; margin-bottom: 10px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.06);
    animation: fadeInUp 0.4s ease both;
}
.statbar:last-child { margin-bottom: 0; }
.statbar-health { background: linear-gradient(180deg, #e3564f, #a52a24); }
.statbar-mana   { background: linear-gradient(180deg, #4f9fe3, #23578f); }
.statbar-rebirth{ background: linear-gradient(180deg, var(--purple), #4a1f8f); }
.statbar-label {
    position: absolute; left: 16px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.statbar-value { font-weight: 800; font-size: 14px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }

/* Ficha de personaje: EQUIPO a la izquierda, PERSONAJE a la derecha.
   Alineado a la IZQUIERDA, como el resto de paneles de la pagina. Antes
   estuvo centrado para tapar el vacio de la derecha, pero eso hacia que el
   contenido de este panel empezara ~150px mas adentro que el de todos los
   demas y se notaba muchisimo. El vacio se resuelve abajo dandole al
   outfit una columna real y centrando la caja DENTRO de ella. */
/* Character page: capped narrower than the rest of the site's ~960px main
   column -- this page was reading as one wide, sparse row of stats before.
   Basic information and About live in the left column; health, mana,
   outfit and equipment are stacked on the right. Skills span both columns
   below them. */
.char-page { max-width: 760px; }
.char-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; align-items: start; }
.char-info-col { min-width: 0; }
.char-visual-col { display: flex; flex-direction: column; align-items: center; gap: 14px; height: 100%; align-self: stretch; }
.char-vitals { width: 100%; }
.char-vitals .statbar {
    height: 30px; margin-bottom: 8px; padding: 0 14px;
    justify-content: flex-end;
}
.char-vitals .statbar-label { left: 12px; font-size: 9px; letter-spacing: 0.7px; }
.char-vitals .statbar-value { font-size: 12px; text-align: right; }
.char-col-equip { margin-top: auto; }
.char-about {
    min-height: 190px; margin-top: 18px; padding: 15px;
    background: rgba(0,0,0,0.22); border: 1px solid var(--border);
    border-radius: var(--radius);
}
.char-about h3 {
    margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
    font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px;
}
.char-about-empty { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.6; }
.char-about-list { display: flex; flex-direction: column; gap: 10px; }
.char-about-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; font-size: 13px; line-height: 1.5; }
.char-about-label { color: var(--text-dim); }
.char-about-value { min-width: 0; overflow-wrap: anywhere; }
.char-skills-grid {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto); grid-auto-flow: column;
    gap: 0 24px; margin-top: 2px;
}
.char-skill {
    --skill-color: var(--gold-bright);
    position: relative; padding-inline: 8px;
    border-bottom-color: color-mix(in srgb, var(--skill-color) 42%, var(--border));
    background: linear-gradient(90deg, color-mix(in srgb, var(--skill-color) 8%, transparent), transparent 72%);
    transition: background 0.18s ease, padding-left 0.18s ease;
}
.char-skill:hover {
    padding-left: 11px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--skill-color) 15%, transparent), transparent 78%);
}
.char-skill .info-label { color: color-mix(in srgb, var(--skill-color) 78%, var(--text)); }
.char-skill .info-value { color: var(--skill-color); text-shadow: 0 0 9px color-mix(in srgb, var(--skill-color) 45%, transparent); }
.char-skill-magic     { --skill-color: #c896ff; }
.char-skill-fist      { --skill-color: #ef7668; }
.char-skill-club      { --skill-color: #d69b58; }
.char-skill-sword     { --skill-color: #91c7ff; }
.char-skill-axe       { --skill-color: #83d276; }
.char-skill-distance  { --skill-color: #65d7d0; }
.char-skill-shielding { --skill-color: #e6c96f; }
.char-skill-fishing   { --skill-color: #5bbce8; }
@media (max-width: 720px) {
    .char-main-grid { grid-template-columns: 1fr; }
    .char-visual-col { flex-direction: column; }
    .char-vitals { max-width: 320px; }
    .char-skills-grid {
        grid-column: auto; grid-template-columns: 1fr; grid-template-rows: none;
        grid-auto-flow: row;
    }
}

.char-showcase-col h3 {
    font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--text-dim); margin: 0 0 14px; font-family: inherit;
}

/* --- Inventario: misma disposicion que el cliente --- */
.equip-inventory {
    width: 196px; padding: 6px;
    background: rgba(0,0,0,0.30);
    border: 1px solid var(--border); border-radius: var(--radius);
}
/* Disposicion EXACTA del inventario del cliente, 3 columnas x 4 filas.
   Confirmado contra el cliente real: amuleto/mano-izquierda/anillo van en
   la MISMA fila que casco/armadura/piernas respectivamente (columna 1),
   no una fila mas abajo como quedo en la version anterior. Solo la fila 4
   se queda con huecos a los lados (nada bajo el anillo ni bajo la
   municion).

   Columna 1:  amuleto / mano-izq / anillo / vacio
   Columna 2:  casco   / armadura / piernas / botas
   Columna 3:  mochila / mano-der / municion / vacio */
.equip-paperdoll {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(3, 58px);
    grid-template-rows: repeat(4, 58px);
    grid-template-areas:
        "necklace  head   backpack"
        "lefthand  armor  righthand"
        "ring      legs   ammo"
        "soul      feet   cap";
    gap: 4px;
}
.equip-slot-necklace  { grid-area: necklace; }
.equip-slot-head      { grid-area: head; }
.equip-slot-backpack  { grid-area: backpack; }
.equip-slot-righthand { grid-area: righthand; }
.equip-slot-armor     { grid-area: armor; }
.equip-slot-lefthand  { grid-area: lefthand; }
.equip-slot-ring      { grid-area: ring; }
.equip-slot-legs      { grid-area: legs; }
.equip-slot-ammo      { grid-area: ammo; }
.equip-slot-feet      { grid-area: feet; }

.equip-slot {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    background: var(--panel-light); border: 1px solid var(--border-light); border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 6px rgba(0,0,0,0.3);
    transition: border-color 0.15s ease, transform 0.15s ease;
    overflow: hidden;
}
.equip-slot:hover { border-color: var(--gold-bright); transform: translateY(-2px); }
.equip-slot img {
    width: auto; height: auto; max-width: 51px; max-height: 51px;
    image-rendering: pixelated;
}
/* Empty slot: the same real-item art as a filled slot (see `placeholder`
   in $slotConfig, community_characters.php) so the shape reads at a
   glance -- faded and desaturated so it never looks equipped. */
.equip-slot img.equip-slot-placeholder { opacity: 0.32; filter: grayscale(0.6); }
.equip-slot-fallback {
    font-size: 9px; color: var(--text-dim); text-align: center; padding: 3px;
    text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.25;
}

/* Soul y Cap ocupan las esquinas inferiores, junto a las botas, igual que
   en el inventario del cliente. Son bajos para conservar la silueta del
   paperdoll sin competir visualmente con los slots de objetos. */
.equip-footer-soul { grid-area: soul; }
.equip-footer-cap { grid-area: cap; }
.equip-footer-cell {
    align-self: end; min-width: 0; height: 38px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    background: var(--panel-light); border: 1px solid var(--border-light);
    border-radius: 6px; padding: 3px 2px; overflow: hidden;
}
.equip-footer-label { font-size: 8px; line-height: 1; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-dim); }
.equip-footer-value {
    max-width: 100%; font-size: 10px; line-height: 1.1; font-weight: 700;
    color: var(--gold-bright); white-space: nowrap;
}

/* --- Personaje: UN solo sprite, de frente.
   Es la misma vista (direccion 2 = South) que ya usan los sprites de
   Highscores y de "Other Characters", asi que todos los personajes se ven
   igual en todo el sitio. --- */
/* Small identity glance above Equipment, not a showcase -- was a 246px
   box (same width as the inventory) with the sprite blown up to 160px,
   which read as "too big" for what's just a thumbnail. Centered (not
   left-aligned) to line up with the equipment box below, now that
   .char-visual-col itself centers both boxes as a pair. */
.outfit-single { display: flex; justify-content: center; margin-bottom: 10px; }
.outfit-image-wrap {
    width: 104px; height: 104px;
    display: flex; align-items: center; justify-content: center;
    background: var(--panel-light); border: 1px solid var(--border-light); border-radius: var(--radius);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 6px rgba(0,0,0,0.3);
    overflow: hidden;
}
/* render_outfit_on_demand.py crops each sprite to its actual visible
   content (see that script's crop_to_content()) before caching -- source
   dimensions vary per looktype and are usually NOT 64x64 or even square
   once cropped, so this fills the box by aspect-preserving scale
   (object-fit: contain) instead of a fixed width/height, which would
   restretch a cropped, non-square image right back out of shape. */
.outfit-image-wrap img.outfit-frame {
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain;
    transform: scale(1.32);
    image-rendering: pixelated; image-rendering: crisp-edges;
}
.outfit-fallback {
    font-size: 11px; color: var(--text-dim); text-align: center; padding: 10px; line-height: 1.6;
    background: var(--panel-light); border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 16px;
}

.char-mini-table { margin: 0; }

@media (max-width: 720px) {
    /* Outfit now renders first in DOM order (small thumbnail above
       Equipment) -- the divider belongs above whichever one wraps to its
       own line second now, i.e. Equipment, not Outfit. */
    .char-col-equip { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 6px; }
}
@media (max-width: 380px) {
    .equip-inventory { width: 100%; }
}

/* ---------------------------------------------------------------------
   Footer / responsive
   --------------------------------------------------------------------- */

.site-footer { text-align: center; font-size: 11px; color: var(--text-dim); padding: 24px 20px 40px; background: transparent; }

@media (max-width: 900px) {
    .page-shell { flex-direction: column; }
    .side-col { width: 100%; }
    .sidenav { width: 100%; padding-top: 12px; }
    .hero { height: 175px; }
    .hero-plate-name { font-size: 17px; }
    .hero-logo { height: 105px; }
    .social-btn span { display: none; }
    .social-btn { padding-inline: 8px; }
    .ultimate-spells-feature { padding: 18px; }
	.fair-progression-feature { grid-template-columns: 1fr; padding: 18px; }
}

.castle-list-section { margin-top: 24px; }
.castle-list-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}
.castle-list-heading h2 { margin-bottom: 3px; }
.castle-list-heading p { margin: 0; color: var(--text-dim); font-size: 13px; }
.castle-availability {
    flex-shrink: 0;
    padding: 5px 9px;
    border: 1px solid rgba(117,224,164,0.35);
    border-radius: 999px;
    background: rgba(117,224,164,0.08);
    color: var(--green);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

@media (max-width: 620px) {
    .utilitybar-inner { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
    .utilitybar-tag { flex: 1 1 100%; text-align: center; }
    .utilitybar-actions { flex: 1 1 100%; justify-content: center; flex-wrap: wrap; }
    .page-shell { padding: 0 12px; gap: 14px; }
    .char-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .char-row > div:last-child { justify-content: flex-start; }
    .panel { padding: 16px; }
    .table-scroll table.grid { min-width: 560px; }
    .ultimate-spells-grid { grid-template-columns: 1fr; }
    .ultimate-spells-feature { padding: 15px; }
    .ultimate-spells-intro h2 span { display: block; margin-top: 3px; }
	.fair-progression-feature { padding: 15px; }
    .castle-list-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- Highscores / Last Kills: filtros, outfit y paginacion ----------
   Reutiliza las variables y el lenguaje visual que ya usa el resto del
   sitio (--panel-light, --border-light, el degradado violeta de .btn-submit
   para el chip activo), para que las paginas nuevas no se noten pegadas. */
.hs-filters { display: flex; flex-wrap: wrap; gap: 18px; margin: 14px 0 18px; }
.hs-filter-group { flex: 1 1 260px; }
.hs-filter-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 8px; }
.hs-filter-options { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-chip { display: inline-block; padding: 5px 11px; font-size: 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel-light); color: var(--text-dim); transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.hs-chip:hover { border-color: var(--border-light); color: var(--text); }
.hs-chip.is-active { background: linear-gradient(135deg, var(--gold-bright), var(--purple)); border-color: #6d3fc2; color: #140a24; font-weight: 700; }
.hs-filters-rankings { display: grid; grid-template-columns: 1fr; gap: 14px; }
.hs-ranking-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.hs-ranking-options .hs-chip,
.hs-vocation-options .hs-chip { display: flex; align-items: center; justify-content: center; min-height: 36px; text-align: center; }
.hs-vocation-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
@media (max-width: 680px) {
    .hs-ranking-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hs-vocation-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hs-outfit-cell { width: 46px; text-align: center; }
.hs-outfit { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.hs-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.hs-page-indicator { font-size: 12px; color: var(--text-dim); }

/* ---------- Houses: busqueda explicita por ciudad ---------- */
.house-search {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px;
    margin: 18px 0; padding: 16px;
    background: var(--panel-light); border: 1px solid var(--border); border-radius: var(--radius);
}
.house-search-field { flex: 1 1 280px; margin-bottom: 0; }
.house-search-field select { max-width: none; }
.house-search .btn-submit { flex: 0 0 auto; }
.house-results-summary { margin: 16px 0 8px; color: var(--text-dim); font-size: 13px; }
.house-sort-controls { margin-top: 10px; }
.house-results-table { min-width: 590px; }
.house-search-empty {
    padding: 28px 18px; text-align: center; color: var(--text-dim);
    background: rgba(0,0,0,0.16); border: 1px dashed var(--border-light); border-radius: var(--radius);
}

.ban-status {
    display: inline-block; min-width: 58px; padding: 3px 8px; text-align: center;
    border: 1px solid var(--border); border-radius: 999px; font-size: 11px; font-weight: 700;
}
.ban-status.is-active { color: #ff8585; border-color: rgba(255,105,105,0.5); background: rgba(160,30,30,0.18); }
.ban-status.is-expired { color: var(--text-dim); background: rgba(0,0,0,0.18); }

@media (max-width: 620px) {
    .house-search .btn-submit { width: 100%; }
}

/* ---------- Server Info, Rules, Guilds and Guild Wars ---------- */
.server-rate-grid .stat-chip span {
    display: block; margin-top: 2px; color: var(--text-dim); font-size: 11px;
}
.rules-list h2 { margin: 22px 0 4px; font-size: 16px; color: var(--gold-bright); }
.rules-list h2:first-child { margin-top: 0; }
.rules-list p { margin: 0; color: var(--text-dim); font-size: 13px; }

.guild-search-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.guild-search-form .form-row { flex: 1 1 280px; margin-bottom: 0; }
.guild-profile-hero { position: relative; text-align: center; padding-top: 28px; }
.guild-manage-action { position: absolute; top: 18px; right: 18px; }
.guild-logo-frame {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 176px; height: 176px; margin: 0 auto 15px; overflow: hidden;
    border: 1px solid var(--border-light); border-radius: 14px;
    background: radial-gradient(circle, rgba(157,92,255,0.18), rgba(0,0,0,0.28));
    box-shadow: inset 0 0 28px rgba(157,92,255,0.12), 0 8px 24px rgba(0,0,0,0.34);
}
.guild-logo-frame img { position: relative; z-index: 1; width: 100%; height: 100%; padding: 10px; object-fit: contain; }
.guild-logo-fallback {
    position: absolute; font-family: "Cinzel", serif; font-size: 76px; font-weight: 800;
    color: rgba(200,150,255,0.25); text-shadow: 0 0 18px rgba(157,92,255,0.25);
}
.guild-profile-name { margin: 0; font-size: 27px; }
.guild-profile-description { max-width: 680px; margin: 10px auto 20px; color: var(--text-dim); white-space: pre-line; }
.guild-profile-description.is-empty { font-style: italic; }
.guild-profile-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
    max-width: 760px; margin: 0 auto;
}
.guild-profile-stats > div {
    min-width: 0; padding: 11px 8px; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--panel-light);
}
.guild-profile-stats strong { display: block; overflow-wrap: anywhere; color: var(--gold-bright); font-size: 14px; }
.guild-profile-stats span { display: block; margin-top: 2px; color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: .7px; }
.guild-motd { max-width: 760px; margin: 12px auto 0; padding: 10px 12px; border-left: 3px solid var(--gold-bright); background: rgba(157,92,255,.08); text-align: left; }
.guild-motd strong { display: block; color: var(--gold-bright); font-size: 11px; text-transform: uppercase; }
.guild-motd span { white-space: pre-line; }
.guild-rank-section { margin-top: 20px; }
.guild-rank-section:first-of-type { margin-top: 8px; }
.guild-rank-section h3 { margin: 0 0 7px; font-size: 14px; color: var(--gold-bright); }
.guild-rank-section h3 span { color: var(--text-dim); font-family: "Inter", sans-serif; font-size: 11px; }

.guild-list-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.guild-list-heading h1 { margin: 0; }
.guild-list-heading p { margin: 5px 0 0; color: var(--text-dim); font-size: 13px; }
.guild-list-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.guild-list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 10px; margin-top: 18px; }
.guild-list-card { display: flex; align-items: center; gap: 14px; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-light); }
.guild-list-logo {
    position: relative; flex: 0 0 76px; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center;
    overflow: hidden; border: 1px solid var(--border-light); border-radius: 9px; background: rgba(0,0,0,.28);
}
.guild-list-logo > span { position: absolute; color: rgba(200,150,255,.35); font-family: "Cinzel", serif; font-size: 34px; font-weight: 800; }
.guild-list-logo img { position: relative; z-index: 1; width: 100%; height: 100%; padding: 5px; object-fit: contain; }
.guild-list-copy { min-width: 0; }
.guild-list-copy h2 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.guild-list-copy p { margin: 3px 0 8px; color: var(--text-dim); font-size: 12px; }
.guild-list-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--text-dim); font-size: 10px; text-transform: uppercase; }
.guild-online-count { color: var(--green); }

.guild-war-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.guild-war-card { position: relative; padding: 28px 14px 13px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-light); text-align: center; }
.guild-war-state { position: absolute; top: 7px; right: 8px; padding: 2px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }
.guild-war-state.is-active { color: var(--green); border: 1px solid rgba(126,200,80,.45); background: rgba(40,110,30,.16); }
.guild-war-matchup { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 10px; }
.guild-war-matchup a { overflow-wrap: anywhere; font-weight: 700; }
.guild-war-matchup strong { color: var(--gold-bright); font-size: 21px; white-space: nowrap; }
.guild-war-matchup strong span { color: var(--text-dim); }
.guild-war-date { margin-top: 8px; color: var(--text-dim); font-size: 11px; }
.guild-war-empty { padding: 24px; border: 1px dashed var(--border-light); border-radius: var(--radius); color: var(--text-dim); text-align: center; }

@media (max-width: 620px) {
    .guild-manage-action { position: static; display: table; margin: 0 0 14px auto; }
    .guild-logo-frame { width: 140px; height: 140px; }
    .guild-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .guild-rank-section table.grid th:nth-child(2), .guild-rank-section table.grid td:nth-child(2),
    .guild-rank-section table.grid th:nth-child(3), .guild-rank-section table.grid td:nth-child(3) { display: none; }
}

/* ---------- Migas de pan, widgets del lateral y pie con datos ----------
   Todo reutiliza las variables y los patrones que ya usa el sitio
   (--panel-light, --border-light, .rank-1/2/3, .widget-ribbon) para que
   las secciones nuevas no se noten pegadas de otro sitio. */
.breadcrumb { font-size: 12px; color: var(--text-dim); margin-bottom: 14px; }
.breadcrumb a { color: var(--link); }
.breadcrumb a:hover { color: var(--link-hover); }
.breadcrumb-sep { margin: 0 6px; opacity: 0.6; }
.breadcrumb-current { color: var(--text); }

.widget-top-list { list-style: none; margin: 0; padding: 0; }
.widget-top-players {
    position: relative;
    border-color: rgba(157, 92, 255, 0.42);
    background:
        radial-gradient(circle at 100% 0, rgba(255, 180, 72, 0.11), transparent 42%),
        radial-gradient(circle at 0 100%, rgba(157, 92, 255, 0.13), transparent 46%),
        linear-gradient(155deg, rgba(31, 20, 45, 0.98), rgba(12, 8, 19, 0.98));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 10px 26px rgba(0, 0, 0, 0.24);
}
.widget-top-players::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 10px;
    width: 38px;
    height: 38px;
    pointer-events: none;
    border: 1px solid rgba(255, 211, 107, 0.12);
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(157, 92, 255, 0.08);
}
/* 2026-09-17 (owner report: "la corona tenia que ser en el circulo, lo
   pusiste a lado de un player"): that ::after circle above was already
   here, empty, clearly meant to hold something -- the crown belongs
   INSIDE it, not next to the #1 name. Same size/position as the circle
   itself so it sits centered inside it. */
.widget-top-players-badge {
    position: absolute;
    right: 12px;
    bottom: 10px;
    width: 38px;
    height: 38px;
    padding: 8px;
    box-sizing: border-box;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(255, 211, 107, 0.35));
}
.widget-top-players-title {
    background:
        linear-gradient(90deg, transparent, rgba(157, 92, 255, 0.22), transparent),
        linear-gradient(135deg, #5b2d9e, #2c1550);
}
.widget-top-players-title span {
    color: transparent;
    background: linear-gradient(90deg, #fff3a5, #ff9f43, #ff6fd8, #8bdcff, #fff3a5);
    background-size: 240% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    text-shadow: none;
    animation: topArenaTextShift 3s linear infinite;
}
.widget-top-list li {
    display: flex; align-items: center; gap: 8px;
    position: relative; z-index: 1;
    padding: 8px 5px; border-bottom: 1px solid rgba(157, 92, 255, 0.18); font-size: 13px;
    transition: padding-left .18s ease, background .18s ease;
}
.widget-top-players .widget-top-list li:hover { padding-left: 9px; background: rgba(157, 92, 255, 0.08); }
.widget-top-list li:last-child { border-bottom: none; }
.widget-top-rank {
    flex: 0 0 20px; text-align: center; font-weight: 700;
    font-size: 12px; color: var(--text-dim);
}
.widget-top-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-top-value { flex: 0 0 auto; font-weight: 700; color: var(--gold-bright); font-size: 12px; }
.widget-top-more {
    display: block; margin-top: 10px; font-size: 12px;
    color: var(--text-dim); text-align: center;
}
.widget-top-more:hover { color: var(--link-hover); }

.widget-event-list { list-style: none; margin: 0; padding: 0; }
.widget-event-list li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 7px 2px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.widget-event-list li:last-child { border-bottom: none; }
.widget-event-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-event-countdown {
    flex: 0 0 auto; font-size: 11px; font-weight: 700;
    color: var(--gold-bright); font-variant-numeric: tabular-nums;
}

.news-discuss { font-size: 12px; color: var(--link); }
.news-discuss:hover { color: var(--link-hover); }

.site-footer-stats {
    display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center;
    font-size: 12px; color: var(--text-dim); margin-bottom: 6px;
}
.site-footer-stats strong { color: var(--gold-bright); }

/* Pares etiqueta/valor de la ficha, en DOS columnas.
   Historia de esto, para que no se repita: con una tabla de ancho completo
   quedaba medio panel de distancia entre "Vocation" y su valor; capando la
   tabla a 520px se juntaban, pero entonces sobraba vacia la mitad derecha
   del panel. La rejilla resuelve las dos cosas -- llena el ancho y a la vez
   mantiene cada etiqueta pegada a su valor.
   auto-fit + minmax hace que caigan a UNA sola columna en pantallas
   estrechas sin necesidad de media query. */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0 32px;
    margin-top: 14px;
}
.info-cell {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 8px 2px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.info-label { color: var(--text-dim); white-space: nowrap; }
.info-value { font-weight: 600; text-align: right; }

/* ---------- Barra superior: online + buscador, banner de anuncio y
   etiquetas de noticia. Mismas variables y el mismo degradado violeta que
   ya usan .btn-submit y los chips de Highscores. ---------- */
.utilitybar-online { font-size: 12px; color: var(--text-dim); white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: color 0.15s ease; }
.utilitybar-online:hover { color: var(--gold-bright); text-decoration: none; }
.utilitybar-online strong { color: var(--green); }

.utilitybar-search { display: flex; align-items: center; gap: 4px; }
.utilitybar-search input {
    width: 150px; padding: 5px 9px; font-size: 12px;
    background: rgba(0,0,0,0.35); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text);
}
.utilitybar-search input::placeholder { color: var(--text-dim); }
.utilitybar-search input:focus { outline: none; border-color: var(--border-light); }
.utilitybar-search button {
    padding: 5px 9px; font-size: 12px; cursor: pointer;
    background: var(--panel-light); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text-dim);
}
.utilitybar-search button:hover { border-color: var(--border-light); color: var(--text); }

/* Franja de anuncio bajo la barra: siempre es el titulo de la noticia mas
   reciente, asi que no puede quedarse desactualizada. */
.site-announce {
    display: block; text-align: center; padding: 9px 16px;
    background: linear-gradient(90deg, rgba(157,92,255,0.10), rgba(157,92,255,0.28), rgba(157,92,255,0.10));
    border-bottom: 1px solid var(--border-light);
    color: var(--gold-bright); font-weight: 700; font-size: 14px;
    letter-spacing: 0.3px;
}
.site-announce:hover { color: var(--link-hover); }

/* Etiqueta de categoria en las noticias -- patron de rubinot.com.br, donde
   cada actualizacion va precedida de "[Algo]". Aqui se saca del propio
   titulo, sin columna nueva en la base de datos. */
.news-tag {
    display: inline-block; vertical-align: middle;
    padding: 2px 8px; margin-right: 6px;
    background: linear-gradient(135deg, var(--gold-bright), var(--purple));
    border-radius: var(--radius); color: #140a24;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
}

@media (max-width: 720px) {
    .utilitybar-search input { width: 110px; }
    .utilitybar-online { display: none; }
}

/* Insignia de staff en la ficha de personaje. Antes habia una fila
   "Position" que decia "Player" para todo el mundo; ahora solo se marca a
   quien de verdad es staff, junto al nombre. */
.badge-staff {
    background: linear-gradient(135deg, #ffd479, #e0952f);
    border: 1px solid #a8701f; color: #2b1a05;
}

/* ---------- Events ---------- */
.events-widget {
    display: block; color: var(--text); text-decoration: none;
    border-color: color-mix(in srgb, var(--purple) 52%, var(--border));
}
.events-widget:hover { color: var(--text); text-decoration: none; }
.events-widget-card {
    margin-top: 10px; padding: 10px;
    background: rgba(0,0,0,0.24); border: 1px solid var(--border); border-radius: var(--radius);
}
.events-widget-card:first-of-type { border-color: color-mix(in srgb, var(--cat-color, var(--purple)) 70%, var(--border)); }
.events-widget-label, .event-next-label {
    color: var(--text-dim); font-size: 11px; font-weight: 700;
    letter-spacing: 0.45px; text-transform: uppercase;
}
.events-widget-label, .event-next-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.events-widget-main, .event-next-main, .event-detail-heading {
    display: flex; align-items: center; gap: 8px; min-width: 0;
}
.events-widget-main { margin-top: 5px; }
.events-widget-main > div, .event-next-copy { flex: 1 1 auto; min-width: 0; }
.events-widget-main strong, .event-next-copy strong {
    display: block; overflow: hidden; color: var(--gold-bright);
    font-size: 14px; text-overflow: ellipsis; white-space: nowrap;
}
.events-widget-main time, .event-next-copy time {
    display: block; margin-top: 2px; color: var(--text-dim); font-size: 11px;
}
.event-gif {
    width: 42px; height: 42px; flex: 0 0 42px; object-fit: contain;
    image-rendering: pixelated; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--cat-color, var(--purple)) 55%, transparent));
}
.event-banner-gif { animation: eventBannerSway 1.8s ease-in-out infinite; transform-origin: 50% 88%; }
.event-banner-gif-right { transform: scaleX(-1); animation-name: eventBannerSwayRight; }
.event-gif-right:not(.event-banner-gif-right) { transform: scaleX(-1); }
.event-countdown {
    margin-top: 8px; padding: 6px 8px; text-align: center;
    background: rgba(0,0,0,0.35); border-radius: 4px;
    color: #c8bfd6; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.event-countdown::before { content: "◷"; margin-right: 6px; color: var(--cat-color, var(--purple)); }
.event-countdown.is-live { color: #aee587; }
.events-widget-more {
    display: block; margin-top: 10px; text-align: center;
    color: var(--text-dim); font-size: 12px;
}
.events-widget:hover .events-widget-more { color: var(--link-hover); }

.events-page > h1 {
    text-shadow: 0 0 9px color-mix(in srgb, var(--cat-color, var(--purple)) 58%, transparent),
                 0 0 22px color-mix(in srgb, var(--gold-bright) 20%, transparent);
}
.events-intro {
    position: relative; margin: 0 0 18px; padding: 11px 14px 11px 34px;
    color: #d8cde3; background: linear-gradient(90deg, rgba(157,92,255,0.13), transparent);
    border-left: 2px solid var(--purple); border-radius: 0 var(--radius) var(--radius) 0;
}
.events-intro::before {
    content: "✦"; position: absolute; left: 12px; top: 10px;
    color: var(--gold-bright); text-shadow: 0 0 8px var(--purple);
}
.events-next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.event-next-card {
    --cat-color: var(--purple); min-width: 0; padding: 14px;
    background: linear-gradient(145deg, rgba(35,25,47,0.96), rgba(20,15,29,0.96));
    border: 1px solid color-mix(in srgb, var(--cat-color) 55%, var(--border)); border-radius: var(--radius);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 6px 18px rgba(0,0,0,0.22);
}
.event-next-main { margin-top: 9px; }
.event-next-copy strong { font-size: 17px; }
.event-next-copy time { font-size: 12px; }
.events-section { margin-top: 26px; }
.events-section > h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.events-section > h2::after {
    content: ""; height: 1px; flex: 1 1 auto;
    background: linear-gradient(90deg, color-mix(in srgb, var(--purple) 70%, transparent), transparent);
}
.event-week-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.event-day-card {
    min-width: 0; padding: 12px; background: rgba(0,0,0,0.22);
    border: 1px solid var(--border); border-radius: var(--radius);
}
.event-day-card h3 {
    margin: 0 0 8px; padding-bottom: 7px; border-bottom: 1px solid var(--border);
    color: var(--gold-bright); font-size: 14px;
}
.event-day-card-weekend { border-color: color-mix(in srgb, var(--gold) 42%, var(--border)); }
.event-day-row {
    --cat-color: var(--purple); display: grid; grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center; gap: 8px; padding: 7px 5px; border-bottom: 1px solid rgba(157,92,255,0.12);
}
.event-day-row:last-child { border-bottom: none; }
.event-day-row span { color: var(--cat-color); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.event-day-row strong { color: #e6dced; font-size: 13px; text-shadow: 0 0 8px color-mix(in srgb, var(--cat-color) 35%, transparent); }
.event-day-row small { color: var(--text-dim); font-size: 11px; }
.event-details-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px; align-items: stretch;
}
.event-detail-card {
    --cat-color: var(--purple); min-width: 0; padding: 15px; display: flex; flex-direction: column;
    background: rgba(0,0,0,0.24); border: 1px solid var(--border); border-left: 3px solid var(--cat-color);
    border-radius: var(--radius); transition: transform 0.18s ease, border-color 0.18s ease;
}
.event-detail-card:hover { transform: translateY(-2px); border-color: var(--cat-color); }
.event-detail-heading { min-height: 45px; }
.event-detail-heading h3 {
    flex: 1 1 auto; margin: 0; text-align: center;
    color: #eee4f6; text-shadow: 0 0 10px color-mix(in srgb, var(--cat-color) 45%, transparent);
}
.event-detail-heading-compact { justify-content: center; }
.event-detail-heading-compact h3 { flex: 0 1 auto; }
.event-pending-note { margin-top: 6px; text-align: center; }
.event-detail-card p {
    flex: 1 1 auto; margin: 10px 0; padding: 9px 10px;
    color: #cfc4da; font-size: 13px; line-height: 1.55;
    background: linear-gradient(90deg, color-mix(in srgb, var(--cat-color) 8%, transparent), transparent);
    border-left: 1px solid color-mix(in srgb, var(--cat-color) 55%, transparent);
}
.event-reward, .event-command {
    padding: 8px 10px; background: rgba(0,0,0,0.25); border-radius: 4px;
    color: #ddd2e8; font-size: 12px; line-height: 1.45;
}
.event-reward span {
    display: block; margin-bottom: 2px; color: var(--cat-color);
    font-size: 10px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
}
.event-reward { border: 1px solid color-mix(in srgb, var(--cat-color) 24%, transparent); }
.event-command { margin-top: 7px; }
.event-status-pending {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    padding: 3px 7px; border: 1px solid rgba(255,178,72,0.62); border-radius: 999px;
    background: rgba(255,150,45,0.12); color: #ffc276 !important;
    font-size: 9px !important; font-weight: 800; line-height: 1.2; letter-spacing: 0.55px;
    text-transform: uppercase; text-shadow: 0 0 7px rgba(255,151,55,0.36);
}
.event-theme-firestorm { --cat-color: #ff8b42; }
.event-theme-zombie { --cat-color: #78c95b; }
.event-theme-ctf { --cat-color: #d66cff; }
.event-theme-top-arena { --cat-color: #ffd36b; }
.event-theme-mega-gazharagoth { --cat-color: #b18cff; }
.event-theme-infernal-revenant { --cat-color: #ff654f; }
.event-theme-forgotten-king { --cat-color: #e4b64f; }
.event-theme-xeraxz { --cat-color: #62d9ff; }
.event-theme-candyland-overlord { --cat-color: #f07bc2; }
.event-theme-mega-morshabaal { --cat-color: #b774ff; }
.event-theme-top-arena .event-next-copy strong,
.event-theme-top-arena .events-widget-main strong,
.event-theme-top-arena.event-day-row strong,
.event-theme-top-arena .event-detail-heading h3 {
    color: transparent;
    background: linear-gradient(90deg, #fff3a5, #ff9f43, #ff6fd8, #8bdcff, #fff3a5);
    background-size: 240% 100%; background-clip: text; -webkit-background-clip: text;
    text-shadow: none; animation: topArenaTextShift 3s linear infinite;
}

@keyframes eventBannerSway {
    0%, 100% { transform: rotate(-3deg) translateY(0); }
    50% { transform: rotate(3deg) translateY(-2px); }
}
@keyframes eventBannerSwayRight {
    0%, 100% { transform: scaleX(-1) rotate(-3deg) translateY(0); }
    50% { transform: scaleX(-1) rotate(3deg) translateY(-2px); }
}
@keyframes topArenaTextShift {
    to { background-position: -240% 0; }
}

@media (max-width: 720px) {
    .events-next-grid, .event-week-grid, .event-details-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .event-day-row { grid-template-columns: 48px minmax(0, 1fr); }
    .event-day-row small { grid-column: 2; }
}

/* Player Wiki and public system guides */
.wiki-hero, .guide-page-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.wiki-hero h1, .guide-page-heading h1 { margin: 3px 0 7px; }
.wiki-hero p, .guide-page-heading p {
    max-width: 660px; margin: 0; color: var(--text-dim); line-height: 1.55;
}
.wiki-kicker, .wiki-section-heading span {
    color: var(--purple); font-size: 10px; font-weight: 800;
    letter-spacing: 1.7px; text-transform: uppercase;
}
.wiki-hero-mark, .guide-page-badge {
    display: grid; place-items: center; flex: 0 0 auto; width: 66px; height: 66px;
    border: 1px solid color-mix(in srgb, var(--purple) 70%, transparent);
    border-radius: 18px; color: var(--gold-bright); font-family: Georgia, serif;
    font-size: 34px; font-weight: 800;
    background: radial-gradient(circle at 50% 30%, rgba(183,107,255,0.24), rgba(35,19,48,0.82));
    box-shadow: inset 0 0 18px rgba(190,116,255,0.12), 0 0 24px rgba(135,69,194,0.12);
}
.guide-page-badge { width: 78px; color: #efd7ff; font-size: 22px; letter-spacing: 1px; }
.wiki-search { display: block; margin-top: 20px; }
.wiki-search > span {
    display: block; margin-bottom: 7px; color: #d4c4df;
    font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.wiki-search input {
    width: 100%; min-height: 44px; padding: 10px 14px 10px 40px;
    border: 1px solid var(--border); border-radius: 8px; color: var(--text);
    background:
        radial-gradient(circle at 20px 50%, var(--purple) 0 3px, transparent 4px),
        rgba(8,5,14,0.42);
}
.wiki-search input:focus {
    outline: none; border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(173,95,255,0.12);
}
.wiki-topic-nav {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}
.wiki-topic-nav a {
    padding: 7px 11px; border: 1px solid rgba(169,105,218,0.34);
    border-radius: 999px; color: #d8c8e5; background: rgba(131,63,174,0.08);
    font-size: 11px; font-weight: 700; text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, color .18s ease;
}
.wiki-topic-nav a:hover { transform: translateY(-1px); border-color: var(--purple); color: #fff; }
.wiki-section { scroll-margin-top: 18px; }
.wiki-section-heading {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    margin-bottom: 14px; padding-bottom: 11px; border-bottom: 1px solid rgba(168,95,216,0.25);
}
.wiki-section-heading h2 { margin: 3px 0 0; }
.wiki-section-heading p {
    max-width: 360px; margin: 0; color: var(--text-dim); font-size: 12px; text-align: right;
}

/* 2026-09-17 (owner report: "la imagen ni siquiera se puede ver, pon la
   imagen a la derecha y el contenido a la izquierda"): the previous 72px
   inline badge was too small to actually read. Real two-column layout
   now -- heading+FAQ list on the left (flexible width), the full guide
   artwork on the right at a size you can actually make out, matching the
   news cards' own image-on-the-right convention. */
/* 2026-09-17 (owner report, confirmed by rendering it locally: "espacio
   muerto, imagen demasiado chica"): the art used to be `position: sticky`
   with no height, so it only ever rendered at its own square aspect ratio
   (~240px tall) pinned to the top of a much taller button column, leaving
   a large empty gap below it for every section with more than 2-3
   questions. Stretching the column to match the list's full height and
   having the image cover-fill it removes that gap outright and makes the
   art read noticeably larger at the same time -- one fix for both
   complaints, since they were the same root cause. */
.wiki-section-body { display: flex; gap: 22px; align-items: center; }
.wiki-section-main { flex: 1 1 auto; min-width: 0; align-self: flex-start; }
/* 2026-09-17 (owner report, confirmed live on high-exp.com, not just
   locally: "no quitaste el espacio muerto, solo pusiste la imagen en el
   centro"). The bug: this was `width: min(320px, 34%)`, meant as "320px,
   or smaller if the column itself is narrow". But the real FAQ column is
   only ~640px wide, so 34% of that (~217px) is ALWAYS less than 320px --
   the 320px branch could never actually win, so the image never got any
   bigger than the old broken version, it just moved to the middle.
   Fixed width, no percentage games this time: verified by measuring the
   live page's own getBoundingClientRect(), not a local mock. */
.wiki-section-art { flex: 0 0 320px; align-self: center; aspect-ratio: 1 / 1; }
.wiki-section-art img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--purple) 70%, transparent);
    box-shadow: inset 0 0 18px rgba(190,116,255,0.12), 0 0 24px rgba(135,69,194,0.12);
}
/* 2026-09-17 (owner report, still misaligned after the above): this was
   860px, way past where it needed to be -- the main content column on
   this site's actual 3-column shell (sidenav + content + widget rail) is
   only ~700-750px wide even on a normal desktop, so every real page load
   was hitting this "mobile" rule and stacking the image under a full-
   width single-column FAQ list (confirmed by testing at the real ~750px
   column width, not a full 1400px browser window). 560px leaves the
   side-by-side layout active at the real content width it actually
   renders in, only stacking on genuinely narrow screens. */
@media (max-width: 560px) {
    .wiki-section-body { flex-direction: column; }
    .wiki-section-art { width: 100%; max-width: 320px; margin: 0 auto; }
    .wiki-section-art img { height: auto; min-height: 0; }
}
/* 2026-09-17 (owner report, repeated across multiple screenshots: rows
   uneven, dead space, "necesito que este bien ordenado"): a 2-column
   grid is fundamentally fragile here -- an odd item count always leaves
   a lone dangling button, and any two questions of different lengths in
   the same row never line up no matter how the cross-axis sizing is
   tuned (tried align-self, tried stretch+flex, both still look uneven
   the moment text lengths differ, which they always do). Dropped the
   whole column concept: one column, full width, stacked top to bottom.
   Nothing to misalign against, no dangling last item, no dead space --
   every button is exactly as tall as its own content and nothing else. */
.wiki-faq-list { display: flex; flex-direction: column; gap: 8px; }
.wiki-faq-list .faq-item { margin: 0; }
.wiki-faq-list .faq-answer a { color: var(--gold-bright); font-weight: 700; }
.wiki-empty { color: var(--text-dim); text-align: center; }

/* Elemental keyword coloring in news copy (owner: "poner en rojo fire,
   water azul etc") -- plain inline color, no background, so it reads as
   a highlighted word, not a badge. */
.el-fire { color: var(--red); font-weight: 700; }
.el-water { color: var(--blue); font-weight: 700; }
.el-earth { color: var(--green); font-weight: 700; }
.el-energy { color: var(--yellow); font-weight: 700; }

/* Real in-game sprite, extracted straight from the client (Tibia.dat/.spr,
   see tools/extract_thing_image.py and website/assets/img/outfits/
   extract_outfit_mount_icons.py) -- static ones are a plain <img>, animated
   ones use a horizontal frame-strip PNG with the same steps() background-
   position trick already used for the sidenav icons (.sidenav-art-sprite
   in this same file) rather than a GIF, so both stay one consistent system. */
.wiki-sprite { image-rendering: pixelated; display: inline-block; vertical-align: middle; }
.wiki-sprite-frame {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: var(--sprite-size) 100%;
    animation: wiki-sprite-frames var(--sprite-duration, 1.2s) steps(var(--sprite-steps)) infinite;
    image-rendering: pixelated;
    vertical-align: middle;
}
@keyframes wiki-sprite-frames { to { background-position: 100% 0; } }
.wiki-pet-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 10px; background: rgba(0,0,0,0.18); border: 1px solid var(--border); border-radius: 12px; }
.wiki-pet-card .wiki-sprite-frame { width: 44px; height: 44px; margin-bottom: 2px; }
.wiki-pet-card h4 { margin: 0; font-size: 13px; }
.wiki-pet-card p { margin: 0; font-size: 11px; line-height: 1.35; color: var(--text-dim); }
/* 2026-09-17 (owner report: opening "What pets are there?" crushed this
   into 4 unreadably-narrow columns). The old fix keyed off the PAGE's
   viewport width, but this grid actually lives in the ~260-300px FAQ
   text column next to the how-to art, which is narrow on every screen
   size -- a viewport media query here could never fire correctly.
   Flat 2 columns fits that real width comfortably (unlike auto-fit at a
   130px floor, which measured out to only 1 per row here -- readable,
   but four stacked cards makes the answer far taller than the art next
   to it). 2x2 keeps it readable AND keeps the open answer's height in
   the same ballpark as the art column instead of towering over it. */
.wiki-pet-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 10px; }
.guide-highlight-grid { margin-top: 20px; }
.guide-highlight-grid .info-cell {
    border-color: rgba(177,99,231,0.3);
    background: linear-gradient(135deg, rgba(151,72,200,0.12), rgba(0,0,0,0.18));
}
.vip-expiry-note { margin-top: 16px; }
.guide-step-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 20px;
}
.guide-step-grid article {
    position: relative; min-height: 130px; padding: 17px 16px 14px;
    border: 1px solid rgba(171,98,222,0.32); border-radius: 8px;
    background: linear-gradient(145deg, rgba(143,69,184,0.12), rgba(0,0,0,0.2));
}
.guide-step-grid article > span {
    display: grid; place-items: center; width: 26px; height: 26px;
    border: 1px solid var(--purple); border-radius: 50%; color: var(--gold-bright);
    font-weight: 800; background: rgba(89,35,122,0.5);
}
.guide-step-grid h3 { margin: 10px 0 5px; color: #e8d4f5; }
.guide-step-grid p { margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.5; }
.progression-milestones {
    display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 8px; margin-top: 15px;
}
.progression-milestones > div {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 7px;
    border: 1px solid rgba(169,98,218,0.3); border-radius: 7px;
    background: linear-gradient(180deg, rgba(145,69,190,0.14), rgba(0,0,0,0.18));
    text-align: center;
}
.progression-milestones strong { color: var(--gold-bright); font-size: 18px; }
.progression-milestones span { color: var(--text-dim); font-size: 10px; line-height: 1.25; }

@media (max-width: 720px) {
    .guide-step-grid { grid-template-columns: 1fr; }
    .progression-milestones { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 520px) {
    .wiki-hero, .guide-page-heading { align-items: flex-start; }
    .wiki-hero-mark, .guide-page-badge { width: 52px; height: 52px; font-size: 24px; }
    .wiki-section-heading { display: block; }
    .wiki-section-heading p { margin-top: 6px; text-align: left; }
    .progression-milestones { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Casino guide */
.casino-page {
    --casino-gold: #f2bd55;
    --casino-red: #dc5668;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 2%, rgba(242,189,85,.12), transparent 28%),
        radial-gradient(circle at 2% 42%, rgba(157,92,255,.1), transparent 32%),
        var(--panel);
}
.casino-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding-bottom: 20px; border-bottom: 1px solid rgba(242,189,85,.25);
}
.casino-hero h1 { margin: 3px 0 7px; text-shadow: 0 0 18px rgba(242,189,85,.22); }
.casino-hero p { max-width: 610px; margin: 0; color: var(--text-dim); line-height: 1.55; }
.casino-hero-mark {
    position: relative; display: grid; place-items: center; flex: 0 0 auto;
    width: 72px; height: 72px; border: 1px solid rgba(242,189,85,.62);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, rgba(255,240,166,.2), rgba(65,34,17,.92) 68%, #160d09 100%);
    box-shadow: 0 0 28px rgba(242,189,85,.18), inset 0 0 0 5px rgba(52,23,8,.2);
    animation: casinoCoinFloat 3s ease-in-out infinite;
}
.casino-hero-mark img {
    position: relative; z-index: 1; display: block; width: 52px; height: 52px;
    object-fit: contain; image-rendering: pixelated;
    filter: drop-shadow(0 0 7px rgba(242,189,85,.55));
}
.casino-hero-mark::before, .casino-hero-mark::after {
    content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(65,29,10,.5); border-radius: 50%;
}
.casino-hero-mark::after { inset: -5px; border-color: rgba(242,189,85,.2); }
.casino-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 20px; }
.casino-mode-card {
    min-width: 0; padding: 18px; border: 1px solid rgba(172,102,224,.35);
    border-radius: 9px; background: linear-gradient(145deg, rgba(42,27,53,.92), rgba(15,11,22,.94));
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 10px 24px rgba(0,0,0,.2);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.casino-mode-card:hover { transform: translateY(-2px); box-shadow: 0 13px 28px rgba(0,0,0,.26); }
.casino-mode-roulette { border-top: 2px solid var(--casino-gold); }
.casino-mode-dealer { border-top: 2px solid var(--casino-red); }
.casino-mode-heading { display: flex; align-items: center; gap: 12px; }
.casino-mode-number {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px;
    color: #1d1010; background: var(--casino-gold); font-weight: 900; box-shadow: 0 0 14px rgba(242,189,85,.2);
}
.casino-mode-dealer .casino-mode-number { color: #fff; background: var(--casino-red); box-shadow: 0 0 14px rgba(220,86,104,.2); }
.casino-mode-heading small { color: var(--text-dim); font-size: 9px; font-weight: 800; letter-spacing: 1.3px; }
.casino-mode-heading h2 { margin: 1px 0 0; color: #f0e3f7; }
.casino-mode-card > p { color: #cfc3d8; font-size: 13px; line-height: 1.6; }
.casino-steps { display: grid; gap: 8px; margin: 15px 0 0; padding: 0; list-style: none; }
.casino-steps li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid rgba(242,189,85,.16); border-radius: 6px; background: rgba(0,0,0,.22); }
.casino-steps li > span { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; color: var(--casino-gold); background: rgba(242,189,85,.1); font-size: 11px; font-weight: 900; }
.casino-steps strong, .casino-steps small { display: block; }
.casino-steps strong { color: #ebdfef; font-size: 12px; }
.casino-steps small { margin-top: 2px; color: var(--text-dim); font-size: 10px; line-height: 1.35; }
.casino-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-top: 15px; }
.casino-choice-grid > div { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 0 9px; padding: 12px; border: 1px solid rgba(220,86,104,.24); border-radius: 7px; background: rgba(0,0,0,.23); }
.casino-choice-grid span { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; color: #fff; background: linear-gradient(145deg, #e76677, #8d2738); font-weight: 900; }
.casino-choice-grid strong { color: #f0dce1; }
.casino-choice-grid small { color: var(--text-dim); font-size: 10px; line-height: 1.3; }
.casino-dealer-note { margin: 14px 0 0; padding: 10px 12px; border-left: 2px solid var(--casino-red); background: linear-gradient(90deg, rgba(220,86,104,.1), transparent); }
.casino-dealer-note strong { color: #ff8997; }
.casino-section { margin-top: 28px; }
.casino-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 13px; padding-bottom: 10px; border-bottom: 1px solid rgba(174,105,222,.25); }
.casino-section-heading span { color: var(--casino-gold); font-size: 9px; font-weight: 900; letter-spacing: 1.4px; }
.casino-section-heading h2 { margin: 3px 0 0; }
.casino-section-heading p { max-width: 330px; margin: 0; color: var(--text-dim); font-size: 11px; line-height: 1.45; text-align: right; }
.casino-reward-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.casino-reward-grid > div { position: relative; overflow: hidden; padding: 13px 14px 13px 18px; border: 1px solid rgba(171,101,222,.26); border-radius: 7px; background: rgba(0,0,0,.22); }
.casino-reward-grid > div::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--purple); box-shadow: 0 0 9px var(--purple); }
.casino-reward-grid strong, .casino-reward-grid span { display: block; }
.casino-reward-grid strong { color: #eadcf2; font-size: 12px; }
.casino-reward-grid span { margin-top: 3px; color: var(--text-dim); font-size: 10px; line-height: 1.4; }
.casino-reward-grid .casino-reward-featured { grid-column: 1 / -1; background: linear-gradient(90deg, rgba(242,189,85,.13), rgba(0,0,0,.22)); border-color: rgba(242,189,85,.36); }
.casino-reward-grid .casino-reward-featured::before { background: var(--casino-gold); box-shadow: 0 0 10px var(--casino-gold); }
.casino-reward-featured strong { color: #ffd979; }
.casino-guide-section {
    padding: 18px;
    border: 1px solid rgba(242,189,85,.2);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(45,29,51,.45), rgba(8,6,13,.4));
}
.casino-guide-section .casino-section-heading { align-items: center; }
.casino-media-frame { position: relative; display: grid; place-items: center; width: min(100%, 780px); margin: 0 auto; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid rgba(242,189,85,.42); border-radius: 9px; background: radial-gradient(circle at center, rgba(111,49,148,.18), rgba(5,3,9,.9)); box-shadow: inset 0 0 34px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.28); }
.casino-media-frame::before { content: ""; position: absolute; inset: 7px; pointer-events: none; border: 1px solid rgba(242,189,85,.1); border-radius: 6px; }
.casino-media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.casino-media-frame video { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; background: #050309; }
.casino-media-placeholder { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #e9dcef; text-align: center; }
.casino-media-placeholder small { color: var(--text-dim); font-size: 10px; letter-spacing: .8px; text-transform: uppercase; }
.casino-play-symbol { display: grid; place-items: center; width: 43px; height: 43px; margin-bottom: 3px; padding-left: 3px; border: 1px solid rgba(242,189,85,.6); border-radius: 50%; color: var(--casino-gold); background: rgba(242,189,85,.09); box-shadow: 0 0 20px rgba(242,189,85,.14); }
.casino-rules { margin-top: 18px; padding: 13px 15px; border: 1px solid rgba(153,91,202,.3); border-radius: 7px; background: linear-gradient(90deg, rgba(116,53,153,.13), rgba(0,0,0,.18)); }
.casino-rules strong { color: var(--gold-bright); font-size: 12px; }
.casino-rules p { margin: 4px 0 0; color: var(--text-dim); font-size: 11px; line-height: 1.5; }
@keyframes casinoCoinFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }

@media (max-width: 720px) {
    .casino-mode-grid, .casino-reward-grid { grid-template-columns: 1fr; }
    .casino-reward-grid .casino-reward-featured { grid-column: auto; }
}

@media (max-width: 520px) {
    .casino-hero, .casino-section-heading { align-items: flex-start; }
    .casino-hero-mark { width: 54px; height: 54px; font-size: 25px; }
    .casino-hero-mark img { width: 40px; height: 40px; }
    .casino-section-heading { display: block; }
    .casino-section-heading p { margin-top: 6px; text-align: left; }
    .casino-choice-grid { grid-template-columns: 1fr; }
    .casino-guide-section { padding: 12px; }
    .casino-media-frame { aspect-ratio: 4 / 3; }
}

/* ---------- Reusable illustrated page headings ---------- */
.page-art-panel { overflow: hidden; background: radial-gradient(circle at 94% 4%,rgba(177,104,226,.1),transparent 28%),var(--panel); }
.visual-page-heading { display: grid; grid-template-columns: minmax(0,1fr) 92px; align-items: center; gap: 20px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(171,101,222,.22); }
.visual-page-heading-compact { margin-bottom: 16px; }
.visual-page-heading h1 { margin: 3px 0 6px; }
.visual-page-heading p { max-width: 670px; margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.55; }
.visual-page-art, .page-art-icon { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 76px; height: 76px; justify-self: end; border: 1px solid rgba(177,104,226,.42); border-radius: 12px; background: radial-gradient(circle at 35% 28%,rgba(205,150,245,.17),rgba(18,11,27,.92) 72%); box-shadow: 0 10px 25px rgba(0,0,0,.25),0 0 20px rgba(171,101,222,.08); }
.visual-page-art::after, .page-art-icon::after { content: ""; position: absolute; inset: 5px; pointer-events: none; border: 1px solid rgba(255,255,255,.045); border-radius: 8px; }
.visual-page-art img, .page-art-icon img { position: relative; z-index: 1; display: block; width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 7px rgba(180,112,230,.34)); transition: transform .2s ease; }
.visual-page-heading:hover .visual-page-art img, .wiki-hero:hover .page-art-icon img, .guide-page-heading:hover .page-art-icon img { transform: translateY(-2px) scale(1.06); }
.visual-page-art-pair { grid-template-columns: repeat(2,1fr); width: 92px; }
.visual-page-art-pair img { width: 49px; height: 49px; margin: 0 -7px; }
.visual-page-art-pair img:first-child { transform: translate(6px,5px) rotate(-7deg); }
.visual-page-art-pair img:last-child { transform: translate(-6px,-5px) rotate(7deg); }
.visual-page-heading:hover .visual-page-art-pair img:first-child { transform: translate(6px,2px) rotate(-7deg) scale(1.05); }
.visual-page-heading:hover .visual-page-art-pair img:last-child { transform: translate(-6px,-8px) rotate(7deg) scale(1.05); }
.visual-page-art.art-gold, .page-art-icon.art-gold { border-color: rgba(232,184,90,.48); background: radial-gradient(circle at 35% 28%,rgba(232,184,90,.18),rgba(22,14,22,.94) 72%); }
.visual-page-art.art-gold img, .page-art-icon.art-gold img { filter: drop-shadow(0 0 7px rgba(232,184,90,.4)); }
.visual-page-art.art-blue, .page-art-icon.art-blue { border-color: rgba(92,174,235,.45); background: radial-gradient(circle at 35% 28%,rgba(92,174,235,.17),rgba(10,17,28,.94) 72%); }
.visual-page-art.art-blue img, .page-art-icon.art-blue img { filter: drop-shadow(0 0 7px rgba(92,174,235,.4)); }
.visual-page-art.art-red, .page-art-icon.art-red { border-color: rgba(220,86,104,.46); background: radial-gradient(circle at 35% 28%,rgba(220,86,104,.17),rgba(28,10,16,.94) 72%); }
.visual-page-art.art-red img, .page-art-icon.art-red img { filter: drop-shadow(0 0 7px rgba(220,86,104,.38)); }
.visual-page-art.brand-page-art img { width: 50px; height: 50px; image-rendering: auto; filter: drop-shadow(0 0 8px rgba(232,184,90,.42)); }
.wiki-hero-mark.page-art-icon, .guide-page-badge.page-art-icon { color: transparent; font-size: 0; }

@media (max-width: 520px) {
    .visual-page-heading { grid-template-columns: minmax(0,1fr) 66px; gap: 12px; }
    .visual-page-art, .page-art-icon { width: 60px; height: 60px; border-radius: 10px; }
    .visual-page-art img, .page-art-icon img { width: 47px; height: 47px; }
    .visual-page-art-pair { width: 66px; }
    .visual-page-art-pair img { width: 39px; height: 39px; }
}

/* ---------- Castles ---------- */
.castle-page {
    --castle-gold: #e8b85a; --castle-blue: #7eabff;
    overflow: hidden;
    background: radial-gradient(circle at 92% 3%, rgba(232,184,90,.13), transparent 30%), radial-gradient(circle at 5% 42%, rgba(126,171,255,.08), transparent 32%), var(--panel);
}
.castle-hero { display: grid; grid-template-columns: minmax(0,1fr) 180px; align-items: center; gap: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(232,184,90,.26); }
.castle-hero-copy h1 { margin: 4px 0 9px; color: #f4e4bd; text-shadow: 0 0 20px rgba(232,184,90,.18); }
.castle-hero-copy p { max-width: 630px; margin: 0; color: #cfc4d7; line-height: 1.65; }
.castle-shop-link { display: inline-block; margin-top: 16px; text-align: center; }
.castle-token-showcase { position: relative; display: flex; align-items: center; justify-content: center; min-height: 135px; }
.castle-token-showcase::before { content: ""; position: absolute; width: 122px; height: 122px; border: 1px solid rgba(232,184,90,.25); border-radius: 50%; box-shadow: 0 0 30px rgba(232,184,90,.12), inset 0 0 30px rgba(126,171,255,.08); }
.castle-token-showcase span { position: relative; display: grid; place-items: center; width: 78px; height: 78px; border: 1px solid rgba(232,184,90,.5); border-radius: 12px; background: rgba(12,8,18,.9); box-shadow: 0 12px 28px rgba(0,0,0,.36); }
.castle-token-showcase span:first-child { z-index: 2; transform: translate(16px,18px) rotate(-5deg); }
.castle-token-showcase span:last-child { transform: translate(-12px,-17px) rotate(6deg); }
.castle-token-showcase img, .castle-choice-icon img { width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 8px rgba(232,184,90,.35)); }
.castle-benefit-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin: 18px 0 30px; overflow: hidden; border: 1px solid rgba(232,184,90,.2); border-radius: 8px; background: rgba(232,184,90,.16); }
.castle-benefit-strip div { padding: 13px; background: rgba(17,11,25,.94); text-align: center; }
.castle-benefit-strip strong, .castle-benefit-strip span { display: block; }
.castle-benefit-strip strong { color: var(--castle-gold); font-size: 12px; }
.castle-benefit-strip span { margin-top: 3px; color: var(--text-dim); font-size: 10px; line-height: 1.35; }
.castle-hunt-showcase { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(240px,.75fr); align-items: center; gap: 22px; margin: 0 0 30px; padding: 14px; border: 1px solid rgba(232,184,90,.27); border-radius: 10px; background: radial-gradient(circle at 18% 50%,rgba(126,171,255,.11),transparent 38%),linear-gradient(135deg,rgba(32,22,38,.94),rgba(11,8,17,.96)); box-shadow: 0 15px 32px rgba(0,0,0,.24); }
.castle-hunt-frame { position: relative; overflow: hidden; min-width: 0; border: 1px solid rgba(126,171,255,.34); border-radius: 8px; background: #08070c; box-shadow: 0 0 22px rgba(126,171,255,.1); }
.castle-hunt-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(232,184,90,.13); box-shadow: inset 0 0 30px rgba(0,0,0,.38); }
.castle-hunt-frame img { display: block; width: 100%; aspect-ratio: 1043/751; object-fit: cover; transition: transform .45s ease,filter .45s ease; }
.castle-hunt-showcase:hover .castle-hunt-frame img { transform: scale(1.025); filter: saturate(1.08) contrast(1.03); }
.castle-hunt-frame span { position: absolute; z-index: 1; left: 10px; bottom: 10px; padding: 6px 9px; border: 1px solid rgba(232,184,90,.42); border-radius: 5px; color: #ffe3a9; background: rgba(12,8,17,.88); box-shadow: 0 0 14px rgba(232,184,90,.12); font-size: 8px; font-weight: 900; letter-spacing: 1.2px; }
.castle-hunt-copy h2 { margin: 4px 0 8px; color: #f4e4bd; font-size: 19px; line-height: 1.2; text-shadow: 0 0 16px rgba(232,184,90,.16); }
.castle-hunt-copy > p { margin: 0; color: #cfc4d7; font-size: 11px; line-height: 1.6; }
.castle-hunt-points { display: grid; gap: 6px; margin-top: 13px; }
.castle-hunt-points span { position: relative; padding: 7px 9px 7px 24px; border-left: 2px solid var(--castle-blue); color: #e9e0ed; background: linear-gradient(90deg,rgba(126,171,255,.1),transparent); font-size: 10px; }
.castle-hunt-points span::before { content: "◆"; position: absolute; left: 9px; color: var(--castle-gold); font-size: 7px; }
.castle-section-title { margin-bottom: 14px; }
.castle-section-title > span { color: var(--castle-gold); font-size: 9px; font-weight: 900; letter-spacing: 1.45px; }
.castle-section-title h2 { margin: 3px 0 5px; }
.castle-section-title p { max-width: 680px; margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.55; }
.castle-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.castle-choice-card { position: relative; overflow: hidden; padding: 18px; border: 1px solid rgba(232,184,90,.3); border-top: 2px solid var(--castle-gold); border-radius: 9px; background: linear-gradient(145deg,rgba(43,28,45,.95),rgba(13,9,20,.96)); box-shadow: 0 12px 28px rgba(0,0,0,.22); transition: transform .2s ease,border-color .2s ease; }
.castle-choice-card:hover { transform: translateY(-3px); border-color: rgba(232,184,90,.62); }
.castle-choice-dedicated { border-color: rgba(126,171,255,.34); border-top-color: var(--castle-blue); background: linear-gradient(145deg,rgba(29,34,55,.96),rgba(13,9,20,.96)); }
.castle-choice-dedicated:hover { border-color: rgba(126,171,255,.68); }
.castle-choice-top { display: flex; align-items: center; gap: 13px; }
.castle-choice-icon { display: grid; place-items: center; flex: 0 0 auto; width: 68px; height: 68px; border: 1px solid rgba(232,184,90,.35); border-radius: 9px; background: rgba(0,0,0,.25); }
.castle-choice-dedicated .castle-choice-icon { border-color: rgba(126,171,255,.38); }
.castle-choice-top span { color: var(--castle-gold); font-size: 8px; font-weight: 900; letter-spacing: 1.3px; }
.castle-choice-dedicated .castle-choice-top span { color: var(--castle-blue); }
.castle-choice-top h3 { margin: 2px 0 0; color: #f1e7f4; font-size: 19px; }
.castle-choice-card > p { min-height: 58px; color: #cbbfd2; font-size: 12px; line-height: 1.55; }
.castle-choice-card ul { display: grid; gap: 7px; margin: 14px 0; padding: 0; list-style: none; }
.castle-choice-card li { position: relative; padding-left: 18px; color: #e6dbea; font-size: 11px; }
.castle-choice-card li::before { content: "◆"; position: absolute; left: 1px; color: var(--castle-gold); font-size: 8px; }
.castle-choice-dedicated li::before { color: var(--castle-blue); }
.castle-choice-availability { padding-top: 11px; border-top: 1px solid rgba(255,255,255,.08); color: var(--text-dim); font-size: 10px; }
.castle-choice-availability strong { color: var(--green); font-size: 16px; }
.castle-claim-guide { margin-top: 30px; }
.castle-claim-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.castle-claim-steps article { position: relative; padding: 16px 14px 14px 48px; border: 1px solid rgba(171,101,222,.25); border-radius: 8px; background: rgba(0,0,0,.2); }
.castle-claim-steps b { position: absolute; top: 14px; left: 13px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #1a1010; background: var(--castle-gold); }
.castle-claim-steps strong { color: #eee3f2; font-size: 12px; }
.castle-claim-steps p { margin: 5px 0 0; color: var(--text-dim); font-size: 10px; line-height: 1.45; }
.castle-important-note { margin-top: 11px; padding: 12px 14px; border-left: 3px solid var(--castle-gold); background: linear-gradient(90deg,rgba(232,184,90,.1),transparent); }
.castle-important-note strong { color: var(--castle-gold); }
.castle-important-note p { display: inline; margin-left: 6px; color: var(--text-dim); font-size: 11px; line-height: 1.5; }

/* ---------- Fishing System ---------- */
.fishing-page { --sea: #50cbd0; --deep-sea: #267fba; overflow: hidden; background: radial-gradient(circle at 95% 5%,rgba(80,203,208,.13),transparent 30%),radial-gradient(circle at 4% 44%,rgba(38,127,186,.11),transparent 34%),var(--panel); }
.fishing-hero { display: grid; grid-template-columns: minmax(0,1fr) 190px; align-items: center; gap: 22px; padding-bottom: 22px; border-bottom: 1px solid rgba(80,203,208,.25); }
.fishing-hero-copy h1 { margin: 4px 0 9px; color: #d9fbff; text-shadow: 0 0 20px rgba(80,203,208,.2); }
.fishing-hero-copy p { margin: 0; color: #c8d2da; line-height: 1.65; }
.fishing-hero-tools { position: relative; display: flex; align-items: center; justify-content: center; min-height: 120px; }
.fishing-hero-tools::before { content: ""; position: absolute; width: 112px; height: 112px; border: 1px solid rgba(80,203,208,.25); border-radius: 50%; background: radial-gradient(circle,rgba(80,203,208,.1),transparent 68%); box-shadow: 0 0 28px rgba(80,203,208,.08); }
.fishing-hero-tools span { position: relative; display: grid; place-items: center; width: 60px; height: 60px; margin: 0 -7px; border: 1px solid rgba(80,203,208,.35); border-radius: 9px; background: rgba(7,18,24,.9); box-shadow: 0 10px 22px rgba(0,0,0,.28); }
.fishing-hero-tools span:nth-child(1) { z-index: 2; transform: translateY(18px) rotate(-5deg); }
.fishing-hero-tools span:nth-child(2) { z-index: 3; transform: translateY(-17px); }
.fishing-hero-tools span:nth-child(3) { z-index: 2; transform: translateY(18px) rotate(5deg); }
.fishing-hero-tools img { width: 49px; height: 49px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 7px rgba(80,203,208,.3)); }
.fishing-purpose-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.fishing-purpose-grid article { padding: 15px; border: 1px solid rgba(80,203,208,.25); border-radius: 8px; background: linear-gradient(145deg,rgba(28,49,59,.62),rgba(10,8,17,.86)); transition: transform .2s ease,border-color .2s ease; }
.fishing-purpose-grid article:hover { transform: translateY(-2px); border-color: rgba(80,203,208,.55); }
.fishing-purpose-grid span, .fishing-section-heading > span { color: var(--sea); font-size: 8px; font-weight: 900; letter-spacing: 1.4px; }
.fishing-purpose-grid h2 { margin: 5px 0; color: #e2f5f5; font-size: 15px; }
.fishing-purpose-grid p { margin: 0; color: var(--text-dim); font-size: 10px; line-height: 1.5; }
.fishing-section { margin-top: 30px; }
.fishing-section-heading { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 22px; margin-bottom: 13px; padding-bottom: 9px; border-bottom: 1px solid rgba(80,203,208,.2); }
.fishing-section-heading > span { grid-column: 1; }
.fishing-section-heading h2 { grid-column: 1; margin: 1px 0 0; }
.fishing-section-heading p { grid-column: 2; grid-row: 1/3; max-width: 330px; margin: 0; color: var(--text-dim); font-size: 10px; line-height: 1.45; text-align: right; }
.fishing-steps { display: grid; gap: 8px; }
.fishing-steps article { display: grid; grid-template-columns: 26px 46px 1fr; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(80,203,208,.18); border-radius: 7px; background: rgba(0,0,0,.2); }
.fishing-steps b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #07181b; background: var(--sea); }
.fishing-steps img { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 6px rgba(80,203,208,.3)); }
.fishing-steps strong { color: #e3f5f5; font-size: 12px; }
.fishing-steps p { margin: 3px 0 0; color: var(--text-dim); font-size: 10px; line-height: 1.42; }
.fishing-gear-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.fishing-gear-grid article { min-width: 0; padding: 14px; border: 1px solid rgba(80,203,208,.23); border-radius: 8px; background: linear-gradient(180deg,rgba(34,55,65,.65),rgba(8,7,14,.78)); text-align: center; }
.fishing-item-frame { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 9px; border: 1px solid rgba(80,203,208,.32); border-radius: 9px; background: rgba(0,0,0,.26); }
.fishing-item-frame img { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; transition: transform .2s ease; }
.fishing-gear-grid article:hover img { transform: scale(1.12) rotate(-2deg); }
.fishing-gear-grid h3 { margin: 0 0 5px; color: #dbf4f4; font-size: 12px; }
.fishing-gear-grid p { margin: 0; color: var(--text-dim); font-size: 9px; line-height: 1.45; }
.fishing-bestiary-section { position: relative; padding: 18px; border: 1px solid rgba(80,203,208,.2); border-radius: 10px; background: radial-gradient(circle at 50% 0,rgba(80,203,208,.08),transparent 48%),rgba(0,0,0,.16); }
.fishing-creature-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.fishing-creature-grid article { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px; border: 1px solid rgba(134,102,176,.28); border-radius: 7px; background: rgba(12,8,19,.68); }
.fishing-creature-icon { display: grid; place-items: center; flex: 0 0 auto; width: 43px; height: 43px; border-radius: 7px; background: rgba(80,203,208,.07); }
.fishing-creature-icon img { width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 5px rgba(80,203,208,.25)); }
.fishing-creature-grid strong { color: #e2d9e8; font-size: 10px; line-height: 1.3; }
.fishing-final-note { margin-top: 18px; padding: 13px 15px; border-left: 3px solid var(--sea); background: linear-gradient(90deg,rgba(80,203,208,.11),transparent); }
.fishing-final-note strong { color: var(--sea); }
.fishing-final-note p { margin: 4px 0 0; color: var(--text-dim); font-size: 11px; line-height: 1.5; }

@media (max-width: 780px) {
    .castle-benefit-strip, .fishing-gear-grid, .fishing-creature-grid, .fishing-purpose-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .castle-hunt-showcase { grid-template-columns: 1fr; }
    .fishing-hero { grid-template-columns: 1fr; }
    .fishing-hero-tools { min-height: 105px; }
}
@media (max-width: 620px) {
    .castle-hero { grid-template-columns: 1fr; }
    .castle-token-showcase { min-height: 115px; }
    .castle-choice-grid, .castle-claim-steps, .fishing-purpose-grid { grid-template-columns: 1fr; }
    .castle-choice-card > p { min-height: 0; }
    .fishing-section-heading { display: block; }
    .fishing-section-heading p { margin-top: 5px; text-align: left; }
}
@media (max-width: 420px) {
    .castle-benefit-strip, .fishing-gear-grid, .fishing-creature-grid { grid-template-columns: 1fr; }
    .fishing-steps article { grid-template-columns: 25px 38px 1fr; gap: 7px; }
    .fishing-steps img { width: 36px; height: 36px; }
}

/* ---------- Pit of 100 Trials ---------- */
.pit-page {
    --pit-orange: #f09a45; --pit-red: #d24d5f; --pit-violet: #ad62e8;
    overflow: hidden;
    background: radial-gradient(circle at 91% 5%,rgba(240,154,69,.14),transparent 27%),radial-gradient(circle at 4% 52%,rgba(173,98,232,.12),transparent 34%),linear-gradient(160deg,rgba(31,17,31,.98),rgba(10,7,15,.98));
}
.pit-hero { display: grid; grid-template-columns: minmax(0,1fr) 230px; align-items: center; gap: 30px; padding-bottom: 25px; border-bottom: 1px solid rgba(240,154,69,.28); }
.pit-hero-copy h1 { margin: 4px 0 9px; color: #ffe0b8; text-shadow: 0 0 22px rgba(240,154,69,.22); }
.pit-hero-copy p { max-width: 650px; margin: 0; color: #d7cbd8; font-size: 14px; line-height: 1.65; }
.pit-hero-callout { display: inline-block; margin-top: 16px; padding: 9px 13px; border-left: 3px solid var(--pit-orange); color: #f0d8c2; background: linear-gradient(90deg,rgba(240,154,69,.13),transparent); font-size: 11px; font-weight: 700; }
.pit-hero-stage { position: relative; display: grid; place-items: center; min-height: 180px; }
.pit-aura { position: absolute; width: 155px; height: 155px; border: 1px solid rgba(240,154,69,.28); border-radius: 50%; background: radial-gradient(circle,rgba(173,98,232,.18),transparent 66%); box-shadow: 0 0 38px rgba(210,77,95,.14),inset 0 0 28px rgba(240,154,69,.08); animation: pitAuraPulse 2.6s ease-in-out infinite; }
.pit-gnome { position: relative; z-index: 2; width: 126px; height: 126px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 12px 8px rgba(0,0,0,.5)) drop-shadow(0 0 9px rgba(240,154,69,.28)); animation: pitGnomeFloat 3s ease-in-out infinite; }
.pit-relic-frame { position: absolute; z-index: 3; right: 0; bottom: 4px; display: grid; place-items: center; width: 67px; height: 67px; border: 1px solid rgba(173,98,232,.58); border-radius: 12px; background: rgba(12,7,18,.92); box-shadow: 0 0 22px rgba(173,98,232,.2); }
.pit-relic-animation { display: block; width: 64px; height: 64px; background-image: url('../img/items/36546-animation.png'); background-repeat: no-repeat; background-size: 320px 64px; image-rendering: pixelated; animation: pitRelicFrames 1.15s linear infinite; }
.pit-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin: 18px 0 30px; overflow: hidden; border: 1px solid rgba(240,154,69,.2); border-radius: 8px; background: rgba(240,154,69,.16); }
.pit-facts article { padding: 14px 9px; background: rgba(18,11,23,.96); text-align: center; }
.pit-facts strong,.pit-facts span { display: block; }
.pit-facts strong { color: var(--pit-orange); font-family: Georgia,serif; font-size: 21px; text-shadow: 0 0 12px rgba(240,154,69,.2); }
.pit-facts span { margin-top: 3px; color: var(--text-dim); font-size: 9px; letter-spacing: .25px; text-transform: uppercase; }
.pit-section { margin-top: 30px; }
.pit-section-heading > span,.pit-enemy-section > div:last-child > span,.pit-relic-section > div:last-child > span { color: var(--pit-orange); font-size: 9px; font-weight: 900; letter-spacing: 1.45px; }
.pit-section h2 { margin: 4px 0 7px; color: #f0e4ef; }
.pit-section p { color: var(--text-dim); line-height: 1.6; }
.pit-enemy-section { display: grid; grid-template-columns: 125px 1fr; align-items: center; gap: 22px; padding: 18px; border: 1px solid rgba(210,77,95,.28); border-radius: 10px; background: linear-gradient(120deg,rgba(210,77,95,.1),rgba(0,0,0,.23)); }
.pit-enemy-portrait { display: grid; place-items: center; width: 112px; height: 112px; border: 1px solid rgba(210,77,95,.42); border-radius: 50%; background: radial-gradient(circle,rgba(240,154,69,.13),rgba(10,6,14,.82)); box-shadow: inset 0 0 24px rgba(210,77,95,.09); }
.pit-enemy-portrait img { width: 94px; height: 94px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 8px 7px rgba(0,0,0,.45)); }
.pit-enemy-section p { margin: 0; font-size: 12px; }
.pit-section-heading { padding-bottom: 11px; border-bottom: 1px solid rgba(173,98,232,.24); }
.pit-section-heading p { max-width: 700px; margin: 0; font-size: 11px; }
.pit-challenge-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin-top: 14px; }
.pit-challenge-grid article { position: relative; min-height: 128px; padding: 17px 16px 15px 54px; overflow: hidden; border: 1px solid rgba(173,98,232,.27); border-radius: 8px; background: linear-gradient(145deg,rgba(49,27,59,.72),rgba(10,7,15,.88)); transition: transform .2s ease,border-color .2s ease; }
.pit-challenge-grid article:hover { transform: translateY(-2px); border-color: rgba(240,154,69,.5); }
.pit-challenge-grid b { position: absolute; top: 16px; left: 15px; color: rgba(240,154,69,.78); font-family: Georgia,serif; font-size: 18px; }
.pit-challenge-grid h3 { margin: 0 0 6px; color: #f2e1ee; font-size: 14px; }
.pit-challenge-grid p { margin: 0; font-size: 10px; }
.pit-relic-section { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 22px; padding: 17px 20px; border: 1px solid rgba(173,98,232,.3); border-radius: 10px; background: radial-gradient(circle at 7% 50%,rgba(173,98,232,.16),transparent 23%),rgba(0,0,0,.2); }
.pit-relic-showcase { display: grid; place-items: center; width: 90px; height: 90px; border: 1px solid rgba(173,98,232,.4); border-radius: 12px; background: rgba(8,5,13,.7); box-shadow: 0 0 24px rgba(173,98,232,.12); }
.pit-relic-section p { margin: 0; font-size: 11px; }
.pit-final-warning { margin-top: 20px; padding: 14px 16px; border-left: 3px solid var(--pit-red); background: linear-gradient(90deg,rgba(210,77,95,.13),transparent); }
.pit-final-warning strong { color: #ff9aaa; }
.pit-final-warning p { margin: 4px 0 0; color: var(--text-dim); font-size: 11px; line-height: 1.5; }
@keyframes pitAuraPulse { 0%,100% { transform: scale(.96); opacity: .72; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes pitGnomeFloat { 0%,100% { transform: translateY(2px); } 50% { transform: translateY(-5px); } }
@keyframes pitRelicFrames {
    0%,19.99% { background-position: 0 0; }
    20%,39.99% { background-position: -64px 0; }
    40%,59.99% { background-position: -128px 0; }
    60%,79.99% { background-position: -192px 0; }
    80%,100% { background-position: -256px 0; }
}

/* ---------- Cast System ---------- */
.cast-page {
    --cast-cyan: #66d9ef; --cast-violet: #b66cff; --cast-live: #ff526f;
    overflow: hidden;
    background: radial-gradient(circle at 92% 4%,rgba(102,217,239,.13),transparent 28%),radial-gradient(circle at 4% 48%,rgba(182,108,255,.12),transparent 34%),linear-gradient(155deg,rgba(24,18,39,.98),rgba(8,7,14,.98));
}
.cast-hero { display: grid; grid-template-columns: minmax(250px,.72fr) minmax(380px,1.28fr); align-items: center; gap: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(102,217,239,.25); }
.cast-hero-copy h1 { margin: 4px 0 9px; color: #e9faff; text-shadow: 0 0 22px rgba(102,217,239,.2); }
.cast-hero-copy p { max-width: 660px; margin: 0; color: #cfc7d9; font-size: 13px; line-height: 1.65; }
.cast-hero-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 12px; border: 1px solid rgba(102,217,239,.2); border-radius: 999px; color: #d9eef2; background: rgba(102,217,239,.07); font-size: 10px; font-weight: 700; }
.cast-hero-note span { width: 7px; height: 7px; border-radius: 50%; background: var(--cast-live); box-shadow: 0 0 10px var(--cast-live); animation: castLiveBlink 1.25s ease-in-out infinite; }
.cast-live-preview { position: relative; min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgba(102,217,239,.5); border-radius: 10px; background: #09070d; box-shadow: 0 15px 34px rgba(0,0,0,.42),0 0 26px rgba(102,217,239,.12); }
.cast-live-preview::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 28px rgba(5,3,9,.46); }
.cast-live-preview img { display: block; width: 100%; height: auto; transition: transform .45s ease,filter .45s ease; }
.cast-live-preview:hover img { transform: scale(1.018); filter: saturate(1.08); }
.cast-live-preview figcaption { position: absolute; z-index: 2; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.22); border-radius: 5px; color: #fff; background: rgba(173,24,53,.9); box-shadow: 0 4px 14px rgba(0,0,0,.35); font-size: 8px; font-weight: 900; letter-spacing: .9px; }
.cast-live-preview figcaption i { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; animation: castLiveBlink 1.25s ease-in-out infinite; }
.cast-feature-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin: 18px 0 30px; overflow: hidden; border: 1px solid rgba(102,217,239,.18); border-radius: 8px; background: rgba(102,217,239,.14); }
.cast-feature-strip article { padding: 13px 10px; background: rgba(16,12,25,.96); text-align: center; }
.cast-feature-strip strong,.cast-feature-strip span { display: block; }
.cast-feature-strip strong { color: var(--cast-cyan); font-size: 11px; letter-spacing: 1px; }
.cast-feature-strip span { margin-top: 4px; color: var(--text-dim); font-size: 11px; line-height: 1.4; }
.cast-section { margin-top: 30px; }
.cast-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(182,108,255,.24); }
.cast-section-heading span,.cast-experience > div:last-child > span { color: var(--cast-cyan); font-size: 10px; font-weight: 900; letter-spacing: 1.45px; }
.cast-section-heading h2,.cast-experience h2 { margin: 3px 0 0; color: #f0e7f5; }
.cast-section-heading p { max-width: 350px; margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.5; text-align: right; }
.cast-command-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.cast-command-grid article { position: relative; min-height: 132px; padding: 16px 16px 14px 51px; border: 1px solid rgba(182,108,255,.27); border-radius: 9px; background: linear-gradient(145deg,rgba(45,27,57,.72),rgba(9,7,15,.9)); transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.cast-command-grid article:hover { transform: translateY(-2px); border-color: rgba(102,217,239,.5); box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.cast-command-grid b { position: absolute; top: 15px; left: 14px; color: rgba(102,217,239,.8); font-family: Georgia,serif; font-size: 17px; }
.cast-command-grid code,.cast-password-note code { display: inline-block; padding: 5px 8px; border: 1px solid rgba(102,217,239,.25); border-radius: 5px; color: #9cecff; background: rgba(4,15,20,.55); font-family: Consolas,monospace; font-size: 11px; }
.cast-command-grid h3 { margin: 10px 0 5px; color: #ecdef4; font-size: 13px; }
.cast-command-grid p { margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.5; }
.cast-password-note { display: flex; align-items: center; gap: 10px 14px; margin-top: 11px; padding: 11px 13px; border-left: 3px solid var(--cast-violet); background: linear-gradient(90deg,rgba(182,108,255,.11),transparent); }
.cast-password-note strong { color: #e8d6f4; font-size: 12px; }
.cast-password-note span { color: var(--text-dim); font-size: 11px; }
.cast-watch-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.cast-watch-grid article { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 13px; padding: 16px; border: 1px solid rgba(102,217,239,.22); border-radius: 9px; background: rgba(0,0,0,.22); }
.cast-watch-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(102,217,239,.45); border-radius: 50%; color: #07171b; background: linear-gradient(145deg,#9cf0ff,#42aac2); box-shadow: 0 0 17px rgba(102,217,239,.15); font-weight: 900; }
.cast-watch-lock { color: #1a0b26; border-color: rgba(182,108,255,.48); background: linear-gradient(145deg,#d8a5ff,#9650c9); }
.cast-watch-grid span { color: var(--cast-cyan); font-size: 9px; font-weight: 900; letter-spacing: 1.2px; }
.cast-watch-grid h3 { margin: 3px 0 5px; color: #ebdff0; font-size: 12px; }
.cast-watch-grid p { margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.5; }
.cast-experience { display: grid; grid-template-columns: 115px 1fr; align-items: center; gap: 22px; margin-top: 30px; padding: 18px 20px; border: 1px solid rgba(182,108,255,.28); border-radius: 10px; background: radial-gradient(circle at 8% 50%,rgba(102,217,239,.12),transparent 22%),rgba(0,0,0,.2); }
.cast-experience-visual { display: flex; align-items: end; justify-content: center; gap: 7px; height: 66px; }
.cast-experience-visual span { width: 12px; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg,var(--cast-cyan),var(--cast-violet)); box-shadow: 0 0 10px rgba(102,217,239,.2); animation: castAudioWave 1.1s ease-in-out infinite; }
.cast-experience-visual span:nth-child(1) { height: 32px; }
.cast-experience-visual span:nth-child(2) { height: 58px; animation-delay: -.35s; }
.cast-experience-visual span:nth-child(3) { height: 43px; animation-delay: -.7s; }
.cast-experience p { margin: 6px 0 0; color: var(--text-dim); font-size: 12px; line-height: 1.55; }
@keyframes castLiveBlink { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes castAudioWave { 0%,100% { transform: scaleY(.65); opacity: .65; } 50% { transform: scaleY(1); opacity: 1; } }
@media (max-width: 900px) {
    .cast-hero { grid-template-columns: 1fr; }
    .cast-live-preview { width: min(100%,640px); margin: 0 auto; }
    .cast-feature-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .cast-command-grid,.cast-watch-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .cast-section-heading { display: block; }
    .cast-section-heading p { margin-top: 6px; text-align: left; }
    .cast-password-note { display: grid; }
    .cast-experience { grid-template-columns: 76px 1fr; gap: 12px; padding: 15px; }
}
@media (max-width: 720px) {
    .pit-hero { grid-template-columns: 1fr; }
    .pit-hero-stage { min-height: 155px; }
    .pit-relic-frame { right: calc(50% - 100px); }
    .pit-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 520px) {
    .pit-challenge-grid { grid-template-columns: 1fr; }
    .pit-enemy-section,.pit-relic-section { grid-template-columns: 1fr; text-align: center; }
    .pit-enemy-portrait,.pit-relic-showcase { margin: 0 auto; }
}

/* Readability pass: increase player-facing copy without resizing item slots,
   artwork or tightly packed schedule pills. Cards are allowed to grow in
   height so desktop and mobile columns remain intact. */
.sidenav-link { font-size: 14px; }
.sidenav-submenu a, .widget-links li a { font-size: 13.5px; }
.utilitybar-tag, .status-sub, .widget-cta-tagline, .site-footer { font-size: 12px; }
.main-col .breadcrumb, .main-col .category-eyebrow { font-size: 12px; }
.main-col .panel p, .main-col .panel li, .main-col .faq-answer { font-size: 13px; }
.main-col .panel small { font-size: 12px; line-height: 1.45; }
.main-col .panel .form-hint, .main-col .panel .badge, .main-col .panel .tag,
.main-col .hs-filter-label, .main-col .guild-profile-stats span,
.main-col .guild-list-meta, .main-col .guild-war-date,
.main-col .news-meta, .main-col .news-footer-bar { font-size: 12px; }
.main-col table.grid { font-size: 14px; }
.main-col table.grid th { font-size: 13px; }
.main-col .casino-mode-heading small,
.main-col .casino-section-heading span,
.main-col .castle-section-title > span,
.main-col .castle-choice-top span,
.main-col .fishing-purpose-grid span,
.main-col .fishing-section-heading > span,
.main-col .pit-section-heading > span,
.main-col .pit-enemy-section > div:last-child > span,
.main-col .pit-relic-section > div:last-child > span { font-size: 11px; }
.main-col .casino-reward-grid span,
.main-col .castle-benefit-strip span,
.main-col .castle-choice-availability,
.main-col .progression-milestones span,
.main-col .fishing-creature-grid strong,
.main-col .pit-facts span { font-size: 12px; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal-pending { opacity: 1; transform: none; }
}

/* Custom Spells --------------------------------------------------------- */
.custom-spells-page { --spell-purple:#b47cff; --spell-green:#65d58a; --spell-red:#f06a6a; --spell-gold:#efc75e; overflow:hidden; }
.custom-spells-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); min-height:265px; margin:-18px -18px 0; padding:30px 30px 22px; overflow:hidden; border-bottom:1px solid rgba(180,124,255,.34); background:radial-gradient(circle at 78% 35%,rgba(180,124,255,.22),transparent 34%),radial-gradient(circle at 18% 0,rgba(239,199,94,.11),transparent 34%),linear-gradient(135deg,rgba(18,11,29,.96),rgba(9,7,15,.9)); }
.custom-spells-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 0 47%,rgba(255,255,255,.035) 49%,transparent 51%); animation:customSpellShine 7s ease-in-out infinite; }
.custom-spells-hero-copy { position:relative; z-index:2; align-self:center; max-width:570px; }
.custom-spells-hero h1 { margin:5px 0 10px; color:#e8c7ff; font-size:29px; text-shadow:0 0 18px rgba(180,124,255,.32); }
.custom-spells-hero p { max-width:550px; margin:0; color:#cfc1d8; font-size:14px !important; line-height:1.65; }
.custom-spells-facts { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.custom-spells-facts span { padding:7px 11px; border:1px solid rgba(180,124,255,.25); border-radius:6px; color:#bfb1c9; background:rgba(0,0,0,.26); font-size:11px; letter-spacing:.35px; }
.custom-spells-facts strong { margin-right:4px; color:#efc75e; font-size:14px; }
.custom-spells-vocations { position:relative; z-index:1; display:flex; align-items:end; justify-content:center; height:235px; margin-bottom:-22px; filter:drop-shadow(0 12px 12px rgba(0,0,0,.55)); }
.custom-spells-vocations img { width:112px; height:230px; margin-left:-38px; object-fit:contain; object-position:center bottom; transition:transform .2s ease,filter .2s ease; }
.custom-spells-vocations img:first-child { margin-left:0; }
.custom-spells-vocations img:nth-child(odd) { transform:translateY(9px); }
.custom-spells-vocations:hover img { filter:brightness(1.08); }
.custom-spells-vocations img:hover { position:relative; z-index:3; transform:translateY(-3px) scale(1.05); }
.custom-spells-jump { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:18px 0 28px; }
.custom-spells-jump a { padding:9px 8px; border:1px solid rgba(180,124,255,.25); border-radius:7px; color:#d8c2e4; background:linear-gradient(180deg,rgba(180,124,255,.11),rgba(0,0,0,.2)); text-align:center; font-weight:800; letter-spacing:.7px; transition:border-color .18s ease,color .18s ease,transform .18s ease; }
.custom-spells-jump a:hover { border-color:rgba(239,199,94,.6); color:#efc75e; transform:translateY(-2px); }
.custom-spell-family { margin:0 0 32px; scroll-margin-top:20px; }
.custom-spell-family-heading { display:grid; grid-template-columns:76px minmax(0,1fr); align-items:center; gap:15px; margin-bottom:12px; padding:12px 15px; border:1px solid rgba(180,124,255,.22); border-radius:9px; background:linear-gradient(90deg,rgba(180,124,255,.12),rgba(0,0,0,.16)); }
.custom-spell-rb { display:grid; place-items:center; align-content:center; width:66px; height:60px; border:1px solid rgba(239,199,94,.42); border-radius:8px; background:radial-gradient(circle,rgba(239,199,94,.14),rgba(0,0,0,.22)); box-shadow:inset 0 0 13px rgba(239,199,94,.06); }
.custom-spell-rb small { color:#a99777; font-size:8px; font-weight:900; letter-spacing:1.2px; }
.custom-spell-rb strong { color:#efc75e; font-size:19px; line-height:1.15; }
.custom-spell-family-heading span { color:#b47cff; font-size:9px; font-weight:900; letter-spacing:1.35px; }
.custom-spell-family-heading h2 { margin:2px 0 4px; color:#eadff0; font-size:18px; }
.custom-spell-family-heading p { margin:0; color:#ac9eb7; font-size:12px !important; }
.custom-spell-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.custom-spell-card { --voc-color:#b47cff; position:relative; display:grid; grid-template-columns:66px minmax(0,1fr); gap:12px; min-height:145px; padding:15px; overflow:hidden; border:1px solid color-mix(in srgb,var(--voc-color) 38%,#392b44); border-radius:9px; background:radial-gradient(circle at 7% 35%,color-mix(in srgb,var(--voc-color) 13%,transparent),transparent 28%),linear-gradient(145deg,rgba(34,24,43,.92),rgba(17,13,23,.92)); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.custom-spell-card::after { content:""; position:absolute; top:0; right:0; width:55px; height:2px; background:linear-gradient(90deg,transparent,var(--voc-color)); opacity:.8; }
.custom-spell-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--voc-color) 68%,#fff); box-shadow:0 9px 20px rgba(0,0,0,.22),0 0 14px color-mix(in srgb,var(--voc-color) 10%,transparent); }
.custom-spell-card.vocation-sorcerer { --voc-color:var(--spell-purple); }
.custom-spell-card.vocation-druid { --voc-color:var(--spell-green); }
.custom-spell-card.vocation-knight { --voc-color:var(--spell-red); }
.custom-spell-card.vocation-paladin { --voc-color:var(--spell-gold); }
.custom-spell-icon-frame { display:grid; place-items:center; width:62px; height:62px; align-self:start; border:1px solid color-mix(in srgb,var(--voc-color) 55%,#33263d); border-radius:10px; background:radial-gradient(circle,rgba(255,255,255,.08),rgba(0,0,0,.44)); box-shadow:inset 0 0 14px rgba(0,0,0,.4),0 0 12px color-mix(in srgb,var(--voc-color) 12%,transparent); }
.custom-spell-icon { display:block; width:48px; height:48px; background-image:url('../img/spells/defaultspells.png'); background-repeat:no-repeat; background-size:576px 576px; background-position:var(--spell-x) var(--spell-y); image-rendering:pixelated; }
.custom-spell-card-copy { min-width:0; }
.custom-spell-vocation { color:var(--voc-color); font-size:9px; font-weight:900; letter-spacing:1.2px; text-transform:uppercase; text-shadow:0 0 8px color-mix(in srgb,var(--voc-color) 35%,transparent); }
.custom-spell-card h3 { margin:2px 0 5px; color:#f0e7f4; font-size:15px; }
.custom-spell-card code { display:inline-block; max-width:100%; padding:3px 7px; overflow:hidden; border:1px solid color-mix(in srgb,var(--voc-color) 24%,#33263d); border-radius:4px; color:color-mix(in srgb,var(--voc-color) 75%,#fff); background:rgba(0,0,0,.28); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.custom-spell-card p { margin:9px 0 0; color:#b9acbf; font-size:12.5px !important; line-height:1.5; }
.custom-spells-final-note { display:flex; align-items:center; gap:16px; margin-top:6px; padding:16px 18px; border:1px solid rgba(239,199,94,.3); border-radius:9px; background:linear-gradient(90deg,rgba(239,199,94,.1),rgba(180,124,255,.08)); }
.custom-spells-final-note strong { flex:0 0 auto; color:#efc75e; font-size:13px; }
.custom-spells-final-note p { margin:0; color:#bcaec5; font-size:12.5px !important; }
@keyframes customSpellShine { 0%,70%,100% { transform:translateX(-55%); opacity:0; } 82% { opacity:1; } 95% { transform:translateX(55%); opacity:0; } }
@media (max-width:900px) {
    .custom-spells-hero { grid-template-columns:1fr; }
    .custom-spells-vocations { height:185px; margin-top:8px; }
    .custom-spells-vocations img { width:105px; height:185px; }
}
@media (max-width:660px) {
    .custom-spell-grid { grid-template-columns:1fr; }
    .custom-spells-jump { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .custom-spells-hero { padding:24px 20px 18px; }
    .custom-spells-vocations img { width:88px; margin-left:-32px; }
    .custom-spells-final-note { display:block; }
    .custom-spells-final-note p { margin-top:5px; }
}
@media (max-width:430px) {
    .custom-spell-family-heading { grid-template-columns:58px minmax(0,1fr); gap:10px; padding:10px; }
    .custom-spell-rb { width:54px; height:54px; }
    .custom-spell-card { grid-template-columns:56px minmax(0,1fr); padding:12px; }
    .custom-spell-icon-frame { width:54px; height:54px; }
    .custom-spell-icon { transform:scale(.9); }
}

/* ---------------------------------------------------------------------
   Gallery (Library > Gallery) -- title-only photo grid, no descriptions
   per explicit request. Reuses the shared news-lightbox JS (site.js
   queries [data-news-lightbox] globally, not just on the News page).
   --------------------------------------------------------------------- */
.gallery-panel { padding-top: 18px; }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.gallery-frame {
    margin: 0;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--panel-light);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.gallery-frame::before {
    /* Ornamental corner glints on hover -- a small "framed photo" touch
       instead of a plain thumbnail grid. */
    content: "";
    position: absolute; inset: 0;
    border: 1px solid transparent;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px transparent;
    pointer-events: none;
    transition: box-shadow 0.2s ease;
}
.gallery-frame:hover {
    transform: translateY(-4px);
    border-color: var(--border-light);
    box-shadow: 0 10px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(157,92,255,0.25);
}
.gallery-frame:hover::before {
    box-shadow: inset 0 0 0 1px rgba(200,150,255,0.5);
}
.gallery-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.35s ease, filter 0.35s ease;
    filter: saturate(0.94);
}
.gallery-frame:hover .gallery-thumb {
    transform: scale(1.06);
    filter: saturate(1.05);
}
.gallery-frame figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 20px 12px 10px;
    background: linear-gradient(0deg, rgba(10,6,18,0.92), rgba(10,6,18,0));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    pointer-events: none;
}
@media (max-width: 520px) {
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}