*,
::before,
::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #4a0f14;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-width: 320px;
    color: #f5ede0;
    background-color: #080808;
    background-image: linear-gradient(90deg, rgba(8, 8, 8, .97) 0%, rgba(18, 10, 12, .78) 44%, rgba(45, 10, 14, .32) 100%), linear-gradient(180deg, rgba(8, 8, 8, .46) 0%, rgba(8, 8, 8, .94) 100%), url("../img/bg-dark-fantasy.jpg");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

:root {
    --ember-950: #080808;
    --ember-900: #131313;
    --ember-800: #1b1415;
    --ember-700: #4a0f14;
    --ember-600: #8b1e24;
    --ember-500: #b3262d;
    --ember-400: #c49b3a;
    --ember-300: #e0b85a;
    --paper-100: #f5ede0;
}

::selection {
    color: #080808;
    background: var(--ember-300);
}

.btn-gold {
    position: relative;
    overflow: hidden;
    border: 1px solid #e0b85a;
    color: #120a0a;
    background: linear-gradient(180deg, #e6c36d 0%, #c49b3a 34%, #8b1e24 100%);
    box-shadow: inset 0 1px 0 rgba(255, 244, 214, .58), 0 10px 24px rgba(73, 10, 16, .38);
    transition: color .2s ease, transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-gold:hover {
    color: #080808;
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 244, 214, .72), 0 14px 30px rgba(139, 30, 36, .44);
}

.btn-gold:focus-visible {
    outline: 2px solid #e0b85a;
    outline-offset: 3px;
}

.panel-glass {
    background: linear-gradient(145deg, rgba(20, 12, 14, .94), rgba(8, 8, 8, .92));
    border: 1px solid rgba(196, 155, 58, .24);
    box-shadow: inset 0 1px 0 rgba(224, 184, 90, .08), 0 16px 34px rgba(0, 0, 0, .35);
    backdrop-filter: blur(9px);
}

.text-glow {
    text-shadow: 0 0 18px rgba(139, 30, 36, .36), 0 0 10px rgba(196, 155, 58, .22), 0 2px 0 rgba(0, 0, 0, .7);
}

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

button,
input,
select,
textarea {
    font: inherit;
}

button,
select {
    text-transform: none;
}

button {
    cursor: pointer;
}

table {
    border-collapse: collapse;
    text-indent: 0;
}

img,
svg {
    display: block;
    max-width: 100%;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.font-cinzel { font-family: "Marcellus SC", serif; }
.font-inter { font-family: "Inter", sans-serif; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.inset-0 { inset: 0; }
.top-0 { top: 0; }
.top-3 { top: .75rem; }
.-top-3 { top: -.75rem; }
.right-0 { right: 0; }
.right-3 { right: .75rem; }
.-right-2 { right: -.5rem; }
.-right-3 { right: -.75rem; }
.bottom-4 { bottom: 1rem; }
.left-4 { left: 1rem; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.inline { display: inline; }
.grid { display: grid; }
.hidden { display: none; }

.flex-col { flex-direction: column; }
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.self-start { align-self: flex-start; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-span-3 { grid-column: span 3 / span 3; }

.min-h-screen { min-height: 100vh; }
.h-1\.5 { height: .375rem; }
.h-2 { height: .5rem; }
.h-4 { height: 1rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-36 { height: 9rem; }
.h-40 { height: 10rem; }
.h-48 { height: 12rem; }
.h-64 { height: 16rem; }
.h-80 { height: 20rem; }
.h-full { height: 100%; }
.max-h-full { max-height: 100%; }
.max-h-\[500px\] { max-height: 500px; }

.w-1\.5 { width: .375rem; }
.w-2 { width: .5rem; }
.w-4 { width: 1rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-16 { width: 4rem; }
.w-64 { width: 16rem; }
.w-full { width: 100%; }
.min-w-full { min-width: 100%; }
.max-w-xs { max-width: 20rem; }
.max-w-md { max-width: 28rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-7xl { max-width: 80rem; }

.mx-auto { margin-left: auto; margin-right: auto; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-12 { margin-top: 3rem; margin-bottom: 3rem; }
.my-16 { margin-top: 4rem; margin-bottom: 4rem; }
.my-20 { margin-top: 5rem; margin-bottom: 5rem; }
.ml-2 { margin-left: .5rem; }
.ml-4 { margin-left: 1rem; }
.ml-auto { margin-left: auto; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }

.p-3 { padding: .75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-1 { padding-left: .25rem; padding-right: .25rem; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.px-2\.5 { padding-left: .625rem; padding-right: .625rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-0\.5 { padding-top: .125rem; padding-bottom: .125rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-2\.5 { padding-top: .625rem; padding-bottom: .625rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.pt-4 { padding-top: 1rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-24 { padding-top: 6rem; }
.pb-2 { padding-bottom: .5rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-32 { padding-bottom: 8rem; }
.pl-2 { padding-left: .5rem; }
.pl-3 { padding-left: .75rem; }
.pr-2 { padding-right: .5rem; }

.gap-1 { gap: .25rem; }
.gap-1\.5 { gap: .375rem; }
.gap-2 { gap: .5rem; }
.gap-2\.5 { gap: .625rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: .5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: .75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
.space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; }
.space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: .75rem; }
.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; }
.space-x-6 > :not([hidden]) ~ :not([hidden]) { margin-left: 1.5rem; }

.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.break-all { word-break: break-all; }
.object-cover { object-fit: cover; }
.cursor-not-allowed { cursor: not-allowed; }

.rounded { border-radius: .25rem; }
.rounded-md { border-radius: .375rem; }
.rounded-lg { border-radius: .5rem; }
.rounded-full { border-radius: 9999px; }
.rounded-l { border-top-left-radius: .25rem; border-bottom-left-radius: .25rem; }
.rounded-r { border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; }
.rounded-t-lg { border-top-left-radius: .5rem; border-top-right-radius: .5rem; }
.rounded-l-lg { border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; }
.rounded-r-lg { border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; }
.rounded-bl-lg { border-bottom-left-radius: .5rem; }
.rounded-br-lg { border-bottom-right-radius: .5rem; }

.border { border-width: 1px; }
.border-t { border-top-width: 1px; }
.border-t-0 { border-top-width: 0; }
.border-t-2 { border-top-width: 2px; }
.border-t-4 { border-top-width: 4px; }
.border-b { border-bottom-width: 1px; }
.border-b-2 { border-bottom-width: 2px; }
.border-l { border-left-width: 1px; }
.border-l-0 { border-left-width: 0; }
.border-l-4 { border-left-width: 4px; }
.border-x { border-left-width: 1px; border-right-width: 1px; }

.border-medieval-600 { border-color: #8b1e24; }
.border-medieval-700 { border-color: #4a0f14; }
.border-medieval-700\/50 { border-color: rgba(63,63,63,.5); }
.border-medieval-700\/60 { border-color: rgba(63,63,63,.6); }
.border-medieval-gold { border-color: #c49b3a; }
.border-gray-600 { border-color: #4b5563; }
.border-gray-700 { border-color: #374151; }
.border-gray-700\/50 { border-color: rgba(55,65,81,.5); }
.border-red-500 { border-color: #ef4444; }
.border-red-700 { border-color: #b91c1c; }
.border-red-800 { border-color: #991b1b; }
.border-red-850 { border-color: #7f1d1d; }
.border-red-900\/40 { border-color: rgba(127,29,29,.4); }
.border-green-500 { border-color: #22c55e; }
.border-green-800\/40 { border-color: rgba(22,101,52,.4); }
.border-blue-500 { border-color: #3b82f6; }
.border-yellow-700\/50 { border-color: rgba(161,98,7,.5); }
.border-yellow-800 { border-color: #9e2430; }

.bg-white { background-color: #fff; }
.bg-medieval-800 { background-color: #1b1415; }
.bg-medieval-900 { background-color: #131313; }
.bg-medieval-900\/30 { background-color: rgba(19,19,19,.3); }
.bg-medieval-900\/40 { background-color: rgba(19,19,19,.4); }
.bg-medieval-900\/60 { background-color: rgba(19,19,19,.6); }
.bg-medieval-900\/80 { background-color: rgba(19,19,19,.8); }
.bg-medieval-gold\/20 { background-color: rgba(229,123,24,.2); }
.bg-gray-800 { background-color: #1f2937; }
.bg-gray-800\/30 { background-color: rgba(31,41,55,.3); }
.bg-gray-900\/80 { background-color: rgba(17,24,39,.8); }
.bg-red-500 { background-color: #ef4444; }
.bg-red-600 { background-color: #dc2626; }
.bg-red-800 { background-color: #991b1b; }
.bg-red-900\/50 { background-color: rgba(127,29,29,.5); }
.bg-red-900\/80 { background-color: rgba(127,29,29,.8); }
.bg-red-950 { background-color: #450a0a; }
.bg-red-950\/10 { background-color: rgba(69,10,10,.1); }
.bg-green-500 { background-color: #22c55e; }
.bg-green-900 { background-color: #14532d; }
.bg-green-900\/50 { background-color: rgba(20,83,45,.5); }
.bg-green-950\/20 { background-color: rgba(5,46,22,.2); }
.bg-yellow-600 { background-color: #c49b3a; }
.bg-yellow-900 { background-color: #6a1c23; }
.bg-yellow-900\/30 { background-color: rgba(113,63,18,.3); }
.bg-yellow-950 { background-color: #2b1013; }
.bg-emerald-700 { background-color: #047857; }
.bg-indigo-700 { background-color: #4338ca; }
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }
.from-medieval-900 { --tw-gradient-from: #131313; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(26,26,26,0)); }
.via-transparent { --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, rgba(0,0,0,0)); }
.to-transparent { --tw-gradient-to: transparent; }

.fill-current { fill: currentColor; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-xs { font-size: .75rem; line-height: 1rem; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-\[8px\] { font-size: 8px; }
.text-\[9px\] { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: .025em; }
.tracking-wider { letter-spacing: .05em; }
.tracking-widest { letter-spacing: .1em; }
.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }

.text-white { color: #fff; }
.text-gray-200 { color: #e5e7eb; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-medieval-gold { color: #c49b3a; }
.text-red-200 { color: #fecaca; }
.text-red-400 { color: #f87171; }
.text-red-500 { color: #ef4444; }
.text-green-200 { color: #bbf7d0; }
.text-green-300 { color: #86efac; }
.text-green-400 { color: #4ade80; }
.text-green-500 { color: #22c55e; }
.text-yellow-400 { color: #facc15; }
.text-yellow-500 { color: #eab308; }
.text-blue-400 { color: #60a5fa; }

.opacity-60 { opacity: .6; }
.opacity-70 { opacity: .7; }
.opacity-80 { opacity: .8; }
.opacity-85 { opacity: .85; }
.opacity-90 { opacity: .9; }

.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.shadow-md { box-shadow: 0 4px 6px rgba(0,0,0,.1); }
.shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,.1); }
.shadow-2xl { box-shadow: 0 25px 50px rgba(0,0,0,.25); }
.shadow-inner { box-shadow: inset 0 2px 4px rgba(0,0,0,.06); }
.shadow-\[0_0_4px_\#22c55e\] { box-shadow: 0 0 4px #22c55e; }
.shadow-\[0_0_4px_\#ef4444\] { box-shadow: 0 0 4px #ef4444; }
.shadow-\[0_0_5px_\#166534\] { box-shadow: 0 0 5px #166534; }
.shadow-\[0_0_5px_\#22c55e\] { box-shadow: 0 0 5px #22c55e; }
.shadow-\[0_0_10px_\#991b1b\] { box-shadow: 0 0 10px #991b1b; }

.list-decimal { list-style-type: decimal; }
.list-inside { list-style-position: inside; }
.divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; }
.divide-medieval-700 > :not([hidden]) ~ :not([hidden]) { border-color: #4a0f14; }

.transition { transition-property: color, background-color, border-color, opacity, box-shadow, transform; transition-duration: .15s; }
.transition-transform { transition-property: transform; transition-duration: .15s; }
.duration-200 { transition-duration: .2s; }
.duration-300 { transition-duration: .3s; }
.duration-500 { transition-duration: .5s; }
.animate-pulse { animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes pulse { 50% { opacity: .5; } }

.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:border-medieval-gold:focus { border-color: #c49b3a; }
.focus\:border-red-800:focus { border-color: #991b1b; }
.focus\:ring-1:focus { box-shadow: 0 0 0 1px currentColor; }
.focus\:ring-medieval-gold:focus { color: #c49b3a; }
.focus\:text-white:focus { color: #fff; }

.hover\:bg-medieval-700:hover { background-color: #4a0f14; }
.hover\:bg-medieval-700\/30:hover { background-color: rgba(63,63,63,.3); }
.hover\:bg-red-700:hover { background-color: #b91c1c; }
.hover\:bg-red-900:hover { background-color: #7f1d1d; }
.hover\:bg-red-950\/20:hover { background-color: rgba(69,10,10,.2); }
.hover\:bg-emerald-600:hover { background-color: #059669; }
.hover\:bg-indigo-600:hover { background-color: #4f46e5; }
.hover\:border-medieval-gold:hover { border-color: #c49b3a; }
.hover\:border-medieval-gold\/50:hover { border-color: rgba(229,123,24,.5); }
.hover\:text-white:hover { color: #fff; }
.hover\:text-gray-300:hover { color: #d1d5db; }
.hover\:text-medieval-gold:hover { color: #c49b3a; }
.hover\:text-red-300:hover { color: #fca5a5; }
.hover\:text-red-400:hover { color: #f87171; }
.hover\:underline:hover { text-decoration: underline; }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-\[1\.02\]:hover { transform: scale(1.02); }
.hover\:-translate-y-1:hover { transform: translateY(-.25rem); }
.hover\:shadow-\[0_0_20px_rgba\(197\,160\,89\,0\.25\)\]:hover { box-shadow: 0 0 20px rgba(229,123,24,.25); }

.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:text-white { color: #fff; }
.group:hover .group-hover\:border-medieval-gold { border-color: #c49b3a; }
.group:hover .group-hover\:translate-x-1 { transform: translateX(.25rem); }

@media (min-width: 640px) {
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 768px) {
    .md\:flex { display: flex; }
    .md\:flex-row { flex-direction: row; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:items-center { align-items: center; }
    .md\:justify-start { justify-content: flex-start; }
    .md\:justify-between { justify-content: space-between; }
    .md\:mb-0 { margin-bottom: 0; }
    .md\:mt-0 { margin-top: 0; }
    .md\:order-1 { order: 1; }
    .md\:p-12 { padding: 3rem; }
    .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .md\:text-5xl { font-size: 3rem; line-height: 1; }
    .md\:text-7xl { font-size: 4.5rem; line-height: 1; }
}

@media (min-width: 1024px) {
    .lg\:block { display: block; }
    .lg\:flex { display: flex; }
    .lg\:hidden { display: none; }
    .lg\:flex-row { flex-direction: row; }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:w-1\/4 { width: 25%; }
    .lg\:w-3\/4 { width: 75%; }
    .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}

/* Medieval Crimson Gold refinement: navigation, hero hierarchy, cards and information pages. */
body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    background: radial-gradient(circle at 72% 20%, rgba(196, 155, 58, .13), transparent 26%), radial-gradient(circle at 16% 68%, rgba(139, 30, 36, .12), transparent 28%);
}

.site-nav {
    background: linear-gradient(180deg, rgba(8, 8, 8, .96), rgba(18, 10, 12, .86));
    border-color: rgba(196, 155, 58, .35);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .34), inset 0 -1px 0 rgba(224, 184, 90, .08);
}

.nav-shell {
    min-height: 5rem;
}

.site-brand {
    position: relative;
    display: inline-block;
    letter-spacing: .08em;
    transition: color .2s ease, text-shadow .2s ease, transform .2s ease;
}

.site-brand::after {
    position: absolute;
    right: 10%;
    bottom: -.35rem;
    left: 10%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(224, 184, 90, .95), transparent);
}

.site-brand:hover {
    color: #f1cc78;
    transform: translateY(-1px);
}

.site-nav-link,
.site-login,
.site-logout,
.mobile-nav-link,
.site-menu-toggle {
    transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.site-nav-link {
    position: relative;
    color: #d6c4aa;
}

.site-nav-link::after {
    position: absolute;
    right: .55rem;
    bottom: .25rem;
    left: .55rem;
    height: 1px;
    content: "";
    background: #e0b85a;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
}

.site-nav-link:hover,
.site-login:hover,
.site-logout:hover,
.mobile-nav-link:hover,
.site-menu-toggle:hover {
    color: #f1cc78;
}

.site-nav-link:hover::after {
    transform: scaleX(1);
}

.status-board {
    background: linear-gradient(135deg, rgba(28, 12, 16, .86), rgba(8, 8, 8, .9));
    border: 1px solid rgba(196, 155, 58, .23);
    box-shadow: inset 0 1px 0 rgba(224, 184, 90, .07);
}

.mobile-nav-drawer {
    background: linear-gradient(180deg, rgba(18, 10, 12, .98), rgba(8, 8, 8, .98));
}

.mobile-nav-link {
    padding: .35rem 0;
    color: #d6c4aa;
}

.hero-stage {
    position: relative;
    isolation: isolate;
    min-height: 43rem;
    padding: 7.5rem 0 3.5rem;
    overflow: hidden;
}

.hero-stage::before {
    position: absolute;
    inset: 0;
    z-index: -2;
    content: "";
    background: linear-gradient(90deg, rgba(8, 8, 8, .98) 0%, rgba(8, 8, 8, .74) 43%, rgba(8, 8, 8, .18) 100%), linear-gradient(0deg, rgba(8, 8, 8, .98), transparent 43%, rgba(8, 8, 8, .5)), url('../img/bg-dark-fantasy.jpg') center 30% / cover no-repeat;
}

.hero-stage::after {
    position: absolute;
    top: 14%;
    right: 12%;
    z-index: -1;
    width: 25rem;
    height: 25rem;
    border-radius: 9999px;
    content: "";
    background: radial-gradient(circle, rgba(179, 38, 45, .22), transparent 68%);
    filter: blur(10px);
}

.hero-ember {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(circle at 19% 31%, rgba(255, 185, 87, .88) 0 1px, transparent 2px), radial-gradient(circle at 62% 22%, rgba(196, 155, 58, .7) 0 1px, transparent 2px), radial-gradient(circle at 78% 48%, rgba(224, 184, 90, .52) 0 1px, transparent 2px);
    background-size: 170px 190px, 210px 160px, 250px 220px;
    opacity: .62;
}

.hero-content {
    max-width: 49rem;
    margin: 0 auto;
    padding: 1.25rem 1rem;
}

.hero-kicker,
.section-kicker {
    display: inline-block;
    margin-bottom: 1rem;
    color: #e0b85a;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.hero-kicker::before,
.hero-kicker::after {
    display: inline-block;
    width: 2.5rem;
    height: 1px;
    margin: 0 .8rem .25rem;
    content: "";
    background: linear-gradient(90deg, transparent, #c49b3a);
}

.hero-kicker::after {
    background: linear-gradient(90deg, #c49b3a, transparent);
}

.hero-title {
    margin: 0;
    font-size: clamp(2.85rem, 7vw, 5.8rem);
    line-height: .98;
    letter-spacing: .075em;
}

.hero-copy {
    margin-top: 1.5rem;
    font-size: 1.08rem;
    line-height: 1.8;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .75);
}

.hero-actions {
    margin-top: 2.5rem;
}

.hero-primary-action,
.hero-secondary-action {
    min-width: 13rem;
    padding: 1rem 1.55rem;
    font-size: .82rem;
}

.hero-secondary-action {
    border: 1px solid rgba(224, 184, 90, .42);
    background: rgba(13, 8, 10, .6);
}

.hero-secondary-action:hover {
    color: #fff7eb;
    border-color: #e0b85a;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .35);
}

.hero-stat-grid {
    max-width: 58rem;
    margin: 4.4rem auto 0;
    gap: .9rem;
}

.hero-stat {
    position: relative;
    padding: 1.2rem 1rem;
    overflow: hidden;
    border-color: rgba(196, 155, 58, .36);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.hero-stat::before {
    position: absolute;
    top: 0;
    right: 21%;
    left: 21%;
    height: 1px;
    content: "";
    background: #e0b85a;
    opacity: .7;
}

.hero-stat:hover {
    border-color: #e0b85a;
    transform: translateY(-3px);
    box-shadow: 0 16px 28px rgba(0, 0, 0, .3), 0 0 20px rgba(196, 155, 58, .11);
}

.hero-stat-value,
.hero-stat-label {
    display: block;
}

.hero-stat-value {
    font-size: 1.75rem;
    line-height: 1;
}

.hero-stat-label {
    margin-top: .5rem;
    color: #b8a68d;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(90, 48, 23, .9);
}

.section-heading h2 {
    margin: 0;
}

.section-kicker {
    margin-bottom: .45rem;
}

.section-meta {
    white-space: nowrap;
    color: #d1b888;
}

.section-link {
    white-space: nowrap;
    transition: color .2s ease, transform .2s ease;
}

.section-link:hover {
    color: #fff7eb;
}

.section-link span {
    display: inline-block;
    transition: transform .2s ease;
}

.section-link:hover span,
.news-card-link:hover span {
    transform: translateX(.25rem);
}

.news-card {
    border-color: rgba(196, 155, 58, .25);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.news-card:hover {
    border-color: #e0b85a;
    transform: translateY(-6px);
    box-shadow: 0 24px 36px rgba(0, 0, 0, .34), 0 0 30px rgba(196, 155, 58, .12);
}

.news-card-image {
    opacity: .78;
    transition: opacity .3s ease, transform .45s ease;
}

.news-card:hover .news-card-image {
    opacity: 1;
    transform: scale(1.05);
}

.news-card-content {
    border-top: 1px solid rgba(224, 184, 90, .08);
}

.news-card-date {
    color: #c7b493;
}

.news-card-title,
.news-card-link {
    transition: color .2s ease;
}

.news-card:hover .news-card-title,
.news-card-link:hover {
    color: #fff7eb;
}

.page-hero {
    position: relative;
    padding: 1rem 1rem 1.5rem;
}

.page-hero::after {
    display: block;
    width: 7rem;
    height: 1px;
    margin: 1.5rem auto 0;
    content: "";
    background: linear-gradient(90deg, transparent, #e0b85a, transparent);
}

.rule-list {
    counter-reset: none;
}

.rule-item {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(90, 48, 23, .72);
}

.rule-item:first-child {
    padding-top: 0;
}

.rule-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.rule-number {
    color: #e0b85a;
    font-family: "Marcellus SC", serif;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.65;
}

.rule-item h3 {
    padding-bottom: .65rem;
    border-bottom: 1px solid rgba(90, 48, 23, .76);
}

.boss-card {
    border-color: rgba(196, 155, 58, .28);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.boss-card:hover {
    border-color: #e0b85a;
    transform: translateY(-5px);
    box-shadow: 0 22px 34px rgba(0, 0, 0, .34), 0 0 28px rgba(196, 155, 58, .12);
}

.boss-card-media img {
    opacity: .72;
    transition: opacity .3s ease, transform .5s ease;
}

.boss-card:hover .boss-card-media img {
    opacity: 1;
    transform: scale(1.07);
}

.boss-state {
    border: 1px solid transparent;
    box-shadow: 0 7px 16px rgba(0, 0, 0, .3);
}

.boss-state-alive {
    color: #ffc37b;
    border-color: rgba(196, 155, 58, .7);
    background: rgba(74, 15, 20, .84);
    box-shadow: 0 0 16px rgba(196, 155, 58, .22);
}

.boss-state-defeated {
    color: #b7b7b7;
    border-color: rgba(148, 163, 184, .45);
    background: rgba(15, 15, 15, .84);
}

.boss-respawn {
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .14));
}

.boss-notice {
    border-color: #c49b3a;
}

@media (max-width: 767px) {
    .hero-stage {
        min-height: auto;
        padding: 5.75rem 0 2.5rem;
    }

    .hero-stage::before {
        background: linear-gradient(180deg, rgba(8, 8, 8, .71), rgba(8, 8, 8, .97)), url('../img/bg-dark-fantasy.jpg') 66% center / cover no-repeat;
    }

    .hero-kicker::before,
    .hero-kicker::after {
        width: 1.25rem;
        margin-right: .45rem;
        margin-left: .45rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .hero-primary-action,
    .hero-secondary-action {
        width: min(100%, 19rem);
    }

    .hero-stat-grid {
        margin-top: 3rem;
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .rule-item {
        grid-template-columns: 2.35rem minmax(0, 1fr);
        gap: .7rem;
    }
}



/* L2 WordLegends PvP – Dorado Imperial. */
:root {
	--wl-black: #06090c;
	--wl-panel: #0b1116;
	--wl-panel-soft: #10181e;
	--wl-gold: #d8a83f;
	--wl-gold-bright: #ffe091;
	--wl-gold-dark: #79521b;
	--wl-text: #ece5d5;
	--wl-muted: #b7ae9f;
	--wl-green: #4ae26c;
	--wl-red: #ed6172;
}
body {
	background: var(--wl-black);
	background-image: radial-gradient(circle at 15% 6%, rgba(180, 116, 30, .12), transparent 24rem), radial-gradient(circle at 87% 32%, rgba(130, 82, 24, .11), transparent 26rem), linear-gradient(180deg, #080b0f 0%, #05080a 100%);
	color: var(--wl-text);
}
body::before {
	position: fixed;
	inset: 0;
	z-index: -3;
	content: "";
	pointer-events: none;
	opacity: .16;
	background-image: radial-gradient(rgba(255, 229, 166, .55) .45px, transparent .55px);
	background-size: 10px 10px;
	mix-blend-mode: screen;
}
.panel-glass {
	background: linear-gradient(145deg, rgba(13, 19, 24, .96), rgba(5, 8, 11, .96));
	border-color: rgba(216, 168, 63, .34);
	box-shadow: inset 0 1px 0 rgba(255, 224, 145, .11), 0 16px 34px rgba(0, 0, 0, .34);
	backdrop-filter: none;
}
.btn-gold {
	color: #191104;
	border-color: #f0c966;
	background: linear-gradient(180deg, #f8d679 0%, #c98b26 55%, #8e5315 100%);
	box-shadow: inset 0 1px 0 rgba(255, 247, 211, .7), 0 12px 24px rgba(0, 0, 0, .3);
}
.wl-container {
	width: min(1240px, calc(100% - 3rem));
	margin: 0 auto;
}
.wl-site-nav {
	position: relative;
	z-index: 100;
	border-bottom: 1px solid rgba(216, 168, 63, .55);
	background: rgba(4, 7, 9, .97);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .48), inset 0 -1px 0 rgba(255, 224, 145, .08);
}
.wl-nav-shell {
	width: min(1510px, calc(100% - 2rem));
	min-height: 80px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 215px minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.25rem;
}
.wl-brand {
	display: flex;
	align-items: center;
	width: 205px;
	height: 80px;
	justify-content: flex-start;
}
.wl-brand img {
	width: 205px;
	height: auto;
	max-height: 76px;
	object-fit: contain;
	filter: drop-shadow(0 4px 11px rgba(0, 0, 0, .82));
}
.wl-nav-links {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: .1rem;
	min-width: 0;
}
.wl-nav-item {
	position: relative;
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	justify-content: center;
	column-gap: .35rem;
	min-width: 64px;
	padding: .85rem .58rem .75rem;
	color: #e9e0d0;
	font-family: "Cinzel", "Marcellus SC", serif;
	font-size: .72rem;
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: .015em;
	text-transform: uppercase;
	transition: color .2s ease, background .2s ease;
}
.wl-nav-item small {
	grid-column: 1 / -1;
	margin-top: .28rem;
	color: #a99981;
	font-family: Inter, sans-serif;
	font-size: .49rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}
.wl-nav-icon {
	color: var(--wl-gold);
	font-family: Georgia, serif;
	font-size: 1rem;
	line-height: 1;
}
.wl-nav-item::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	content: "";
	background: var(--wl-gold-bright);
	box-shadow: 0 0 9px rgba(255, 224, 145, .8);
	transition: width .2s ease, left .2s ease;
}
.wl-nav-item:hover,
.wl-nav-item.is-active { color: var(--wl-gold-bright); }
.wl-nav-item:hover::after,
.wl-nav-item.is-active::after { left: 14%; width: 72%; }
.wl-nav-actions {
	display: flex;
	align-items: center;
	gap: .55rem;
	justify-content: flex-end;
	white-space: nowrap;
}
.wl-language {
	display: flex;
	border: 1px solid rgba(216, 168, 63, .56);
}
.wl-language a {
	display: grid;
	place-items: center;
	width: 39px;
	height: 38px;
	color: #d7d0c3;
	font-family: Cinzel, serif;
	font-size: .72rem;
	font-weight: 700;
}
.wl-language a + a { border-left: 1px solid rgba(216, 168, 63, .43); }
.wl-language a.is-current { color: #170f05; background: linear-gradient(180deg, #f4d67b, #c48927); }
.wl-login-button,
.wl-play-button,
.wl-logout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .42rem;
	min-height: 38px;
	padding: 0 .85rem;
	border: 1px solid rgba(216, 168, 63, .68);
	font-family: Cinzel, serif;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .035em;
	text-transform: uppercase;
	transition: filter .2s ease, transform .2s ease, background .2s ease;
}
.wl-login-button { color: #efe8dc; background: rgba(10, 14, 17, .9); }
.wl-play-button { color: #1b1003; background: linear-gradient(180deg, #f3cf6c, #ae6a18); }
.wl-logout-form { margin: 0; }
.wl-logout-button { color: #d4c6b4; background: transparent; cursor: pointer; }
.wl-login-button:hover,
.wl-play-button:hover,
.wl-logout-button:hover { filter: brightness(1.12); transform: translateY(-1px); }
.wl-mobile-toggle { display: none; }
.wl-mobile-menu { display: none; }
.wl-hero {
	position: relative;
	isolation: isolate;
	min-height: 585px;
	overflow: hidden;
	border-bottom: 1px solid rgba(216, 168, 63, .48);
	background: #090d10 url('../img/wordlegends-hero.webp') center 43% / cover no-repeat;
}
.wl-hero::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	background: linear-gradient(90deg, rgba(4, 7, 9, .93) 0%, rgba(5, 8, 10, .55) 32%, rgba(5, 8, 10, .30) 68%, rgba(4, 7, 9, .84) 100%), linear-gradient(180deg, rgba(4, 7, 9, .28), rgba(4, 7, 9, .35) 44%, rgba(4, 7, 9, .98) 100%);
}
.wl-hero::after {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	background: radial-gradient(circle at 50% 12%, rgba(255, 193, 77, .22), transparent 30rem), radial-gradient(circle at 12% 68%, rgba(176, 91, 19, .18), transparent 22rem);
	mix-blend-mode: screen;
}
.wl-hero-overlay {
	position: absolute;
	inset: auto 0 0;
	height: 110px;
	z-index: -1;
	background: linear-gradient(transparent, #080b0e);
}
.wl-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 310px;
	align-items: center;
	gap: 2rem;
	min-height: 585px;
	padding-top: 1.5rem;
	padding-bottom: 1.75rem;
}
.wl-hero-content {
	max-width: 810px;
	justify-self: center;
	text-align: center;
	padding: 1.1rem 1rem 0;
}
.wl-hero-logo {
	width: min(370px, 70vw);
	height: auto;
	margin: 0 auto -.75rem;
	filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .85));
}
.wl-hero-kicker {
	margin: 0;
	color: #f7e3ac;
	font-family: Cinzel, serif;
	font-size: clamp(.8rem, 1.4vw, 1.1rem);
	font-weight: 700;
	letter-spacing: .45em;
	text-indent: .45em;
	text-transform: uppercase;
	text-shadow: 0 2px 8px rgba(0,0,0,.8);
}
.wl-hero-kicker span { color: var(--wl-gold); }
.wl-hero h1 {
	margin: .45rem 0 0;
	color: #f4ca67;
	font-family: Cinzel, serif;
	font-size: clamp(2.4rem, 5.4vw, 5rem);
	font-weight: 700;
	line-height: 1.03;
	letter-spacing: .02em;
	text-shadow: 0 3px 0 #3a1f07, 0 0 24px rgba(243, 194, 94, .24), 0 14px 24px rgba(0,0,0,.9);
}
.wl-hero-tagline {
	position: relative;
	margin: .68rem auto 0;
	color: #f5f1e8;
	font-family: Cinzel, serif;
	font-size: clamp(.95rem, 1.72vw, 1.35rem);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-shadow: 0 2px 10px rgba(0,0,0,.95);
}
.wl-hero-tagline::after {
	display: block;
	width: 140px;
	height: 1px;
	margin: .85rem auto 0;
	content: "";
	background: linear-gradient(90deg, transparent, var(--wl-gold), transparent);
}
.wl-hero-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .8rem;
	margin-top: 1.05rem;
}
.wl-button {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	align-items: center;
	column-gap: .6rem;
	min-width: 230px;
	padding: .84rem 1.2rem .65rem;
	border: 1px solid #dca83c;
	font-family: Cinzel, serif;
	font-size: .83rem;
	font-weight: 700;
	letter-spacing: .035em;
	text-transform: uppercase;
	transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.wl-button > :first-child { font-size: 1.45rem; line-height: .8; }
.wl-button small { grid-column: 1 / -1; margin-top: .2rem; font-family: Inter, sans-serif; font-size: .52rem; letter-spacing: .16em; }
.wl-button-primary { color: #fff0c8; background: linear-gradient(135deg, #8a240e, #401207 72%); box-shadow: inset 0 1px 0 rgba(255, 232, 166, .2), 0 12px 23px rgba(0,0,0,.45); }
.wl-button-secondary { color: #f5e9d2; background: linear-gradient(135deg, rgba(17, 25, 28, .94), rgba(5, 8, 11, .94)); box-shadow: inset 0 1px 0 rgba(255, 232, 166, .12), 0 12px 23px rgba(0,0,0,.45); }
.wl-button:hover { filter: brightness(1.14); transform: translateY(-3px); box-shadow: 0 15px 28px rgba(0,0,0,.58), 0 0 20px rgba(216,168,63,.18); }
.wl-status-card {
	padding: 1.42rem 1.35rem 1.2rem;
	border: 1px solid rgba(216, 168, 63, .72);
	outline: 1px solid rgba(216, 168, 63, .17);
	outline-offset: -7px;
	background: linear-gradient(150deg, rgba(16, 25, 31, .96), rgba(5, 9, 12, .98));
	box-shadow: 0 18px 36px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,224,145,.13);
}
.wl-status-card h2 {
	margin: 0;
	text-align: center;
	color: #f1c963;
	font-family: Cinzel, serif;
	font-size: 1.02rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.wl-status-state { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: .9rem 0 .33rem; font-family: Cinzel, serif; font-size: 1.5rem; font-weight: 700; text-transform: uppercase; }
.wl-status-state span { width: .68rem; height: .68rem; border-radius: 50%; }
.wl-status-state.is-online { color: var(--wl-green); text-shadow: 0 0 12px rgba(74,226,108,.32); }
.wl-status-state.is-online span { background: var(--wl-green); box-shadow: 0 0 14px rgba(74,226,108,.96); }
.wl-status-state.is-offline { color: var(--wl-red); }
.wl-status-state.is-offline span { background: var(--wl-red); box-shadow: 0 0 12px rgba(237,97,114,.7); }
.wl-status-rate { margin: 0; padding-bottom: .95rem; border-bottom: 1px solid rgba(216,168,63,.32); text-align: center; color: #e8d8b1; font-family: Cinzel, serif; font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.wl-status-metrics > div { display:flex; justify-content:space-between; gap:1rem; padding:.68rem 0; border-bottom:1px solid rgba(216,168,63,.24); }
.wl-status-metrics span { color:#ece4d5; font-size:.75rem; }
.wl-status-metrics strong { color:#f4cb68; font-family:Cinzel,serif; font-size:.86rem; }
.wl-status-link { display:flex; justify-content:center; align-items:center; gap:.48rem; margin-top:1rem; min-height:39px; border:1px solid rgba(216,168,63,.68); color:#f1ca68; font-family:Cinzel,serif; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; transition:background .2s ease, color .2s ease; }
.wl-status-link:hover { color:#171004; background:#e0af47; }
.wl-feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.7rem; margin-top:-.5rem; position:relative; z-index:2; }
.wl-feature-card { display:flex; gap:.72rem; min-height:122px; padding:1.08rem 1rem; border:1px solid rgba(216,168,63,.52); background:linear-gradient(145deg,#111a20,#070b0f); box-shadow:inset 0 1px rgba(255,224,145,.08), 0 11px 25px rgba(0,0,0,.22); }
.wl-feature-icon { display:grid; flex:0 0 46px; place-items:center; width:46px; height:46px; color:#f4ca69; border:1px solid rgba(216,168,63,.55); border-radius:50%; font-family:Georgia,serif; font-size:1.4rem; text-shadow:0 0 12px rgba(216,168,63,.55); }
.wl-feature-card h2 { margin:.1rem 0 .42rem; color:#f1c75e; font-family:Cinzel,serif; font-size:.83rem; line-height:1.15; text-transform:uppercase; }
.wl-feature-card p { margin:0; color:#d9d0c1; font-size:.7rem; line-height:1.45; }
.wl-home-grid { display:grid; grid-template-columns:1.05fr 1fr .9fr; gap:.8rem; margin-top:.85rem; }
.wl-panel { min-width:0; border:1px solid rgba(216,168,63,.58); background:linear-gradient(145deg,#0e171d,#060a0d); box-shadow:inset 0 1px rgba(255,224,145,.08), 0 13px 28px rgba(0,0,0,.2); }
.wl-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-height:46px; padding:0 .95rem; border-bottom:1px solid rgba(216,168,63,.35); }
.wl-panel-heading h2 { margin:0; color:#f2c860; font-family:Cinzel,serif; font-size:.92rem; letter-spacing:.045em; text-transform:uppercase; }
.wl-panel-heading a { color:#e4b74d; font-family:Cinzel,serif; font-size:.62rem; font-weight:700; text-transform:uppercase; }
.wl-panel-heading a:hover { color:#fff0bc; }
.wl-panel-empty { padding:1.25rem .95rem; margin:0; color:#b9b0a2; font-size:.78rem; }
.wl-news-list { padding:.75rem .9rem .9rem; }
.wl-news-item { display:grid; grid-template-columns:118px minmax(0,1fr); gap:.75rem; padding:.65rem 0; border-bottom:1px solid rgba(216,168,63,.22); }
.wl-news-item:last-child { border-bottom:0; padding-bottom:0; }
.wl-news-item img,.wl-news-fallback { width:118px; height:72px; object-fit:cover; border:1px solid rgba(216,168,63,.42); background:linear-gradient(135deg,#4c2e12,#0b1216); }
.wl-news-fallback { display:grid; place-items:center; color:#e2b44b; font-family:Cinzel,serif; font-weight:700; }
.wl-news-item p { margin:0 0 .15rem; color:#bba888; font-size:.59rem; font-weight:700; }
.wl-news-item h3 { overflow:hidden; margin:0 0 .21rem; color:#f0eadc; font-family:Cinzel,serif; font-size:.69rem; line-height:1.27; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.wl-news-item span { display:-webkit-box; overflow:hidden; color:#c7beb0; font-size:.63rem; line-height:1.35; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.wl-top-list { padding:.4rem .95rem .78rem; margin:0; list-style:none; }
.wl-top-list li { display:grid; grid-template-columns:24px 22px minmax(0,1fr) minmax(0,.8fr) 30px; align-items:center; gap:.38rem; min-height:37px; border-bottom:1px solid rgba(216,168,63,.2); color:#d9d1c3; font-size:.7rem; }
.wl-top-list li:last-child { border-bottom:0; }
.wl-top-list b { display:grid; place-items:center; width:21px; height:21px; border-radius:3px; color:#14110a; background:#d9a743; font-family:Cinzel,serif; font-size:.68rem; }
.wl-top-list li:nth-child(2) b { background:#b7bdc0; }
.wl-top-list li:nth-child(3) b { background:#a76737; }
.wl-rank-emblem { color:#e0b54e; font-size:.95rem; }
.wl-top-list strong { overflow:hidden; color:#f5eee0; text-overflow:ellipsis; white-space:nowrap; }
.wl-top-list em { overflow:hidden; color:#a99f91; font-size:.6rem; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.wl-top-list > li > span:last-child { color:#f0c35f; text-align:right; font-family:Cinzel,serif; }
.wl-coin-content { display:flex; justify-content:space-between; gap:.45rem; min-height:185px; padding:1rem; overflow:hidden; }
.wl-coin-content h3 { margin:.1rem 0 .75rem; color:#f5c85c; font-family:Cinzel,serif; font-size:1.1rem; letter-spacing:.035em; text-transform:uppercase; }
.wl-coin-content p { max-width:200px; margin:0; color:#d6cdbf; font-size:.74rem; line-height:1.55; }
.wl-coin-button { display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem; padding:.6rem .8rem; border:1px solid rgba(216,168,63,.7); color:#cdb46f; font-family:Cinzel,serif; font-size:.65rem; font-weight:700; text-transform:uppercase; }
.wl-coin-stack { position:relative; flex:0 0 132px; min-height:150px; }
.wl-coin-stack i { position:absolute; display:grid; place-items:center; width:86px; height:86px; border:6px double #edc66d; border-radius:50%; color:#ffd878; background:radial-gradient(circle at 35% 28%,#fff0a3,#c7801d 43%,#65390d 72%); box-shadow:inset 0 0 0 5px rgba(85,47,7,.65), 0 9px 15px rgba(0,0,0,.55); font-family:Cinzel,serif; font-size:2.1rem; font-style:normal; font-weight:700; text-shadow:0 2px #5c350c; transform:rotate(-18deg); }
.wl-coin-stack i:nth-child(1) { right:3px; bottom:12px; }
.wl-coin-stack i:nth-child(2) { right:35px; bottom:44px; transform:rotate(16deg); }
.wl-coin-stack i:nth-child(3) { right:3px; bottom:72px; transform:rotate(-6deg); }
.wl-action-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:.9rem; border:1px solid rgba(216,168,63,.58); background:linear-gradient(145deg,#10191e,#060b0e); }
.wl-action-strip a { display:flex; align-items:center; gap:.75rem; min-height:91px; padding:1.2rem 1.2rem; border-right:1px solid rgba(216,168,63,.32); transition:background .2s ease; }
.wl-action-strip a:last-child { border-right:0; }
.wl-action-strip a:hover { background:rgba(216,168,63,.08); }
.wl-action-strip > a > span { color:#f2c865; font-family:Georgia,serif; font-size:2.2rem; text-shadow:0 0 11px rgba(216,168,63,.35); }
.wl-action-strip h2 { margin:0 0 .3rem; color:#efc55e; font-family:Cinzel,serif; font-size:.78rem; text-transform:uppercase; }
.wl-action-strip p { margin:0; color:#d5ccbe; font-size:.68rem; line-height:1.38; }
.wl-footer { margin-top:1.1rem; border-top:1px solid rgba(216,168,63,.5); background:linear-gradient(180deg,#0b1115,#05080a 75%); box-shadow:inset 0 1px rgba(255,224,145,.05); }
.wl-footer-main { display:grid; grid-template-columns:1.55fr .75fr .82fr .78fr; gap:2rem; width:min(1240px,calc(100% - 3rem)); padding:2.25rem 0 1.5rem; margin:0 auto; }
.wl-footer-brand { display:grid; grid-template-columns:170px minmax(0,1fr); align-items:center; gap:1rem; }
.wl-footer-brand img { width:160px; height:auto; filter:drop-shadow(0 5px 13px rgba(0,0,0,.9)); }
.wl-footer h2 { margin:0 0 .75rem; color:#efc45e; font-family:Cinzel,serif; font-size:.88rem; letter-spacing:.04em; text-transform:uppercase; }
.wl-footer p { margin:.32rem 0; color:#c8c0b3; font-size:.68rem; line-height:1.5; }
.wl-footer-column { display:flex; flex-direction:column; gap:.45rem; padding-left:1.45rem; border-left:1px solid rgba(216,168,63,.27); }
.wl-footer-column a { color:#ccc3b4; font-size:.68rem; }
.wl-footer-column a:hover,.wl-footer-bottom a:hover { color:#f3c961; }
.wl-footer-column span { color:#f1c65d; }
.wl-footer-support { padding-left:1.45rem; border-left:1px solid rgba(216,168,63,.27); }
.wl-ticket-button { display:inline-flex; align-items:center; gap:.65rem; margin-top:.9rem; padding:.66rem .85rem; border:1px solid rgba(216,168,63,.7); color:#edc65e; font-family:Cinzel,serif; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.wl-socials { display:flex; gap:.5rem; margin-top:.65rem; }
.wl-socials a { display:grid; place-items:center; width:27px; height:27px; border:1px solid rgba(216,168,63,.45); border-radius:50%; color:#e7c05a; font-family:Cinzel,serif; font-size:.7rem; }
.wl-footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:1rem; width:min(1240px,calc(100% - 3rem)); min-height:56px; margin:0 auto; border-top:1px solid rgba(216,168,63,.25); }
.wl-footer-bottom p { margin:0; color:#a79f93; font-size:.61rem; }
.wl-footer-bottom div { display:flex; flex-wrap:wrap; gap:1rem; }
.wl-footer-bottom a { color:#aaa296; font-size:.61rem; }

.wl-page-shell { padding:3.25rem 0 4.5rem; }
.wl-page-heading { max-width:860px; margin:0 auto 2.3rem; text-align:center; }
.wl-page-heading h1 { margin:.35rem 0 .75rem; color:#f0c963; font-family:Cinzel,"Marcellus SC",serif; font-size:clamp(2rem,4vw,3.1rem); font-weight:700; letter-spacing:.035em; line-height:1.12; text-transform:uppercase; text-shadow:0 0 18px rgba(216,168,63,.2); }
.wl-page-heading > p:last-child { max-width:690px; margin:0 auto; color:#bdb5a9; font-size:.92rem; line-height:1.65; }
.wl-page-kicker { margin:0; color:#e7c05c; font-family:Cinzel,serif; font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.wl-page-kicker span { padding:0 .45rem; color:#f7dda0; }
.wl-empty-state { padding:3.25rem 1.5rem; border:1px solid rgba(216,168,63,.36); background:linear-gradient(145deg,rgba(13,19,24,.96),rgba(5,8,11,.96)); box-shadow:inset 0 1px 0 rgba(255,224,145,.1),0 16px 34px rgba(0,0,0,.3); text-align:center; }
.wl-empty-state > span { display:block; color:#e7bf59; font-family:Georgia,serif; font-size:2.4rem; line-height:1; }
.wl-empty-state h2 { margin:.85rem 0 .45rem; color:#ece3d5; font-family:Cinzel,serif; font-size:1rem; text-transform:uppercase; }
.wl-empty-state p { max-width:520px; margin:0 auto; color:#aaa295; font-size:.8rem; line-height:1.55; }
.wl-castle-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.wl-castle-card { overflow:hidden; border:1px solid rgba(216,168,63,.36); background:linear-gradient(145deg,rgba(13,19,24,.98),rgba(5,8,11,.98)); box-shadow:inset 0 1px 0 rgba(255,224,145,.1),0 16px 34px rgba(0,0,0,.3); transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease; }
.wl-castle-card:hover { border-color:rgba(237,198,94,.8); box-shadow:inset 0 1px 0 rgba(255,224,145,.16),0 20px 40px rgba(0,0,0,.48); transform:translateY(-3px); }
.wl-castle-image { position:relative; height:190px; overflow:hidden; background:#0c1115; }
.wl-castle-image img { width:100%; height:100%; object-fit:cover; opacity:.74; transition:opacity .25s ease,transform .35s ease; }
.wl-castle-card:hover .wl-castle-image img { opacity:1; transform:scale(1.035); }
.wl-castle-image-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,6,8,.05) 23%,rgba(3,6,8,.88) 100%); pointer-events:none; }
.wl-castle-image p { position:absolute; right:1rem; bottom:.8rem; left:1rem; margin:0; color:#fff7e4; font-family:Cinzel,"Marcellus SC",serif; font-size:1.38rem; font-weight:700; letter-spacing:.045em; text-shadow:0 2px 10px rgba(0,0,0,.9); text-transform:uppercase; }
.wl-castle-content { padding:1.05rem 1.1rem 1.15rem; }
.wl-castle-owner { min-height:70px; }
.wl-castle-owner > span,.wl-castle-details span { display:block; color:#a69e90; font-family:Inter,sans-serif; font-size:.59rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.wl-castle-owner strong { display:block; margin-top:.28rem; color:#f0c55d; font-family:Cinzel,serif; font-size:.94rem; line-height:1.28; }
.wl-castle-owner strong.is-unclaimed { color:#bdb4a5; }
.wl-castle-owner em { display:block; margin-top:.15rem; color:#8e877b; font-family:Inter,sans-serif; font-size:.66rem; font-style:normal; }
.wl-castle-details { display:grid; grid-template-columns:.68fr 1.32fr; gap:.85rem; margin-top:.9rem; padding-top:.8rem; border-top:1px solid rgba(216,168,63,.22); }
.wl-castle-details strong { display:block; margin-top:.3rem; color:#eee6da; font-family:Cinzel,serif; font-size:.8rem; line-height:1.4; }
.wl-castle-details .wl-castle-date { color:#d8d0c2; font-family:Inter,sans-serif; font-size:.71rem; font-weight:600; }
@media (max-width: 1320px) {
	.wl-nav-shell { grid-template-columns:170px minmax(0,1fr) auto; gap:.6rem; }
	.wl-brand,.wl-brand img { width:164px; }
	.wl-nav-item { min-width:50px; padding-right:.32rem; padding-left:.32rem; font-size:.63rem; }
	.wl-nav-icon { display:none; }
	.wl-nav-actions { gap:.35rem; }
	.wl-login-button,.wl-play-button,.wl-logout-button { padding:0 .65rem; font-size:.62rem; }
}
@media (max-width: 1110px) {
	.wl-nav-shell { grid-template-columns:190px minmax(0,1fr) auto; }
	.wl-brand,.wl-brand img { width:182px; }
	.wl-nav-links,.wl-nav-actions { display:none; }
	.wl-mobile-toggle { display:grid; place-items:center; justify-self:end; width:42px; height:38px; border:1px solid rgba(216,168,63,.6); color:#edc45f; background:#0b1115; font-size:1.25rem; }
	.wl-mobile-menu { position:absolute; top:100%; right:1rem; left:1rem; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; padding:.85rem; border:1px solid rgba(216,168,63,.55); background:rgba(6,10,13,.98); box-shadow:0 19px 36px rgba(0,0,0,.6); }
	.wl-mobile-menu:not(.hidden) { display:grid; }
	.wl-mobile-menu > a { padding:.72rem .6rem; border:1px solid rgba(216,168,63,.28); color:#efe7da; font-family:Cinzel,serif; font-size:.72rem; font-weight:700; text-align:center; text-transform:uppercase; }
	.wl-mobile-language { display:flex; gap:.5rem; }
	.wl-mobile-language a,.wl-mobile-action { display:grid; place-items:center; min-height:38px; border:1px solid rgba(216,168,63,.54); color:#f0c962; font-family:Cinzel,serif; font-size:.7rem; font-weight:700; text-transform:uppercase; }
	.wl-mobile-play { color:#1b1003; background:linear-gradient(180deg,#f3d16e,#b16e1b); }
}
@media (max-width: 900px) {
	.wl-hero-grid { grid-template-columns:1fr; min-height:auto; gap:1.25rem; padding-top:2rem; padding-bottom:2.3rem; }
	.wl-hero-content { order:1; }
	.wl-status-card { width:min(385px,100%); margin:0 auto; order:2; }
	.wl-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.wl-home-grid { grid-template-columns:1fr 1fr; }
	.wl-castle-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.wl-coin-panel { grid-column:1/-1; }
	.wl-coin-content { min-height:145px; }
	.wl-footer-main { grid-template-columns:1fr 1fr; }
	.wl-footer-brand { grid-column:1/-1; }
}
@media (max-width: 620px) {
	.wl-container { width:min(100% - 1.25rem,1240px); }
	.wl-nav-shell { width:min(100% - 1.25rem,1510px); min-height:66px; grid-template-columns:145px minmax(0,1fr) auto; }
	.wl-brand { width:142px; height:66px; }
	.wl-brand img { width:142px; max-height:61px; }
	.wl-hero { min-height:0; }
	.wl-hero-grid { padding:1.35rem 0 1.2rem; }
	.wl-hero-logo { width:min(285px,87vw); margin-bottom:-.45rem; }
	.wl-hero-kicker { font-size:.7rem; letter-spacing:.25em; text-indent:.25em; }
	.wl-hero h1 { font-size:clamp(2rem,11vw,3rem); }
	.wl-hero-tagline { font-size:.82rem; letter-spacing:.07em; line-height:1.45; }
	.wl-hero-buttons { width:100%; flex-direction:column; align-items:center; }
	.wl-button { width:min(100%,330px); min-width:0; }
	.wl-feature-grid { grid-template-columns:1fr; gap:.58rem; margin-top:.65rem; }
	.wl-feature-card { min-height:0; }
	.wl-home-grid { grid-template-columns:1fr; gap:.65rem; }
	.wl-page-shell { padding:2rem 0 3rem; }
	.wl-page-heading { margin-bottom:1.45rem; }
	.wl-page-heading > p:last-child { font-size:.82rem; }
	.wl-castle-grid { grid-template-columns:1fr; gap:.7rem; }
	.wl-castle-image { height:176px; }
	.wl-coin-panel { grid-column:auto; }
	.wl-action-strip { grid-template-columns:1fr; }
	.wl-action-strip a { min-height:74px; border-right:0; border-bottom:1px solid rgba(216,168,63,.25); }
	.wl-action-strip a:last-child { border-bottom:0; }
	.wl-footer-main { grid-template-columns:1fr; width:min(100% - 2rem,1240px); gap:1.25rem; }
	.wl-footer-brand { grid-template-columns:120px 1fr; gap:.75rem; }
	.wl-footer-brand img { width:118px; }
	.wl-footer-column,.wl-footer-support { padding-top:1rem; padding-left:0; border-top:1px solid rgba(216,168,63,.25); border-left:0; }
	.wl-footer-bottom { flex-direction:column; align-items:flex-start; width:min(100% - 2rem,1240px); padding:.85rem 0; }
	.wl-footer-bottom div { gap:.6rem 1rem; }
	.wl-mobile-menu { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
	*,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}

/* WorldLegends: explicit controls for the F8 device screen.
   These colors must not depend on utility classes absent from this stylesheet. */
form[action="dispositivos.php"] button.bg-yellow-700,
#wl-f8-sign-now {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .7rem 1.15rem;
    border: 1px solid #f0cd76;
    border-radius: 6px;
    background: linear-gradient(180deg, #edcb79, #c39536);
    color: #171107;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-shadow: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
    transition: filter .15s ease, box-shadow .15s ease;
}
form[action="dispositivos.php"] button.bg-yellow-700:hover,
#wl-f8-sign-now:hover { filter: brightness(1.08); }
form[action="dispositivos.php"] button.text-red-300 {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: .55rem .9rem;
    border: 1px solid #c5646b;
    border-radius: 6px;
    background: #3b1d21;
    color: #fff2eb;
    font-weight: 700;
    line-height: 1.35;
    transition: background-color .15s ease;
}
form[action="dispositivos.php"] button.text-red-300:hover { background: #59272d; }
form[action$="/logout.php"] > button {
    appearance: none;
    background: transparent;
    color: #ffb5bc;
    border: 1px solid #97434c;
    border-radius: 6px;
    min-height: 40px;
    padding: .45rem .8rem;
    font-weight: 600;
    line-height: 1.35;
}
form[action$="/logout.php"] > button:hover { background: #321b20; color: #fff2eb; }
form[action="dispositivos.php"] button:focus-visible,
#wl-f8-sign-now:focus-visible,
form[action$="/logout.php"] > button:focus-visible {
    outline: 3px solid #f0cd76;
    outline-offset: 3px;
}
form[action="dispositivos.php"] button:disabled,
#wl-f8-sign-now:disabled { opacity: .65; cursor: wait; }