@charset "UTF-8";
/* =========================================================================
   MYTHARA THEME  –  rebuilt from mythara_hp_master.psd
   Palette:  cyan headers #72dbdb · body #ffffff · gold #ddc286 / #f3e8d1
             field text #315b8b · deep #08265a · scene fallback #609bd7
   Fonts  :  Marcellus (≈ Albertus Nova) + Cinzel for heavy display
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Cinzel:wght@500;600;700&display=swap');

/* ----------  reset / base  ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* kill the black/white focus & active outline box on every clickable element, site-wide
   (form fields keep their own cyan glow, which is a box-shadow, not an outline) */
*:focus, *:active,
a:focus, a:active, button:focus, button:active,
input:focus, select:focus, textarea:focus,
.btn:focus, .btn:active, [role="button"]:focus { outline: none !important; }
html, body { margin: 0; padding: 0; }

body.mythara,
body {
    font-family: 'Marcellus', 'Cronos Pro', Georgia, serif;
    color: #eaf4ff;
    font-size: 15px;
    line-height: 1.55;
    /* 100% auto = the scene always keeps its natural proportions (never stretched, on any page). On pages taller than the scene (e.g. admin), the area below it is filled with the scene's bottom-edge colour so it blends seamlessly. */
    background-color: #496786;
    background-image: url(../images/theme/bg-page.jpg?v=2);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-font-smoothing: antialiased;
}

a { color: #9fe4ec; text-decoration: none; transition: color .15s ease; }
a:hover { color: #ffffff; text-decoration: none; }
img { max-width: 100%; border: 0; }
hr { border: 0; border-top: 1px solid rgba(120,200,230,.28); margin: 14px 0; }

.hide-txt { display: inline-block; text-indent: -9999px; overflow: hidden; }

.page-width { width: 1291px; max-width: 95%; margin: 0 auto; }

/* =========================================================================
   TOP NAVIGATION
   ========================================================================= */
.main-hd {
    position: relative;
    z-index: 30;
    background: url(../images/theme/nav-bar.png) center / 100% 100% no-repeat;
    box-shadow: 0 4px 22px rgba(0,15,40,.45);
}
.main-hd .page-width {
    display: flex;
    align-items: center;
    min-height: 74px;
    gap: 18px;
}
.main-hd h1 { margin: 0; flex: 0 0 auto; }
/* on wide screens pin the logo out near the left edge (PSD position); menu stays aligned with content */
@media (min-width: 1600px) {
    .main-hd h1 { position: absolute; top: 50%; left: clamp(40px, 3.6vw, 84px); transform: translateY(-50%); z-index: 2; }
}
.main-hd h1 a {
    display: block;
    width: 54px; height: 54px;
    background: url(../images/theme/logo-m.png) center/contain no-repeat;
}

ul.cms2-g { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
ul#menu-header-nav { gap: 30px; flex: 1 1 auto; margin-left: 22px; }
ul#menu-header-nav > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #e7f2ff;
    text-transform: none;
    letter-spacing: .4px;
    font-size: 14px;
    padding: 22px 2px;
    text-shadow: 0 1px 2px rgba(0,12,34,.7);
}
ul#menu-header-nav > li > a .nav-ico {
    height: 26px; width: auto;
    filter: drop-shadow(0 0 4px rgba(110,200,255,.55));
}
ul#menu-header-nav > li > a:hover,
ul#menu-header-nav > li.current a { color: #8fe6ee; }
/* kill the box/outline that the browser draws on click-focus of links & image buttons */
.main-hd a, .main-hd a:focus, .main-hd a:active,
.nav-right a, .nav-right a:focus,
.foot-menu a:focus, .copyright a:focus,
.btn-create, .lang-select, .btn-viewrank-img,
.hero-join, .hero-arrow, .read-more,
a:focus img, a img { outline: none !important; }
.main-hd a, .nav-right a, .foot-menu a, .hero-join, .hero-arrow,
.btn-create, .lang-select, .btn-viewrank-img { -webkit-tap-highlight-color: transparent; }
/* no text-underline flash on click/active/focus for nav & footer links */
.main-hd a, .main-hd a:link, .main-hd a:visited, .main-hd a:hover, .main-hd a:focus, .main-hd a:active,
.foot-menu a, .foot-menu a:hover, .foot-menu a:focus, .foot-menu a:active { text-decoration: none !important; }
ul#menu-header-nav > li > a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 2px; width: 0; margin: auto;
    transform: translateX(4px);
    background: #72dbdb; transition: width .2s ease; box-shadow: 0 0 8px #72dbdb;
}
ul#menu-header-nav > li.current > a::after,
ul#menu-header-nav > li > a:hover::after { width: 100%; }

/* dropdowns */
ul#menu-header-nav li { position: relative; }
ul#menu-header-nav .sub-menu {
    list-style: none; margin: 0; padding: 6px 0;
    position: absolute; top: 100%; left: 0; min-width: 170px;
    background: rgba(8,34,78,.97);
    border: 1px solid rgba(120,205,235,.35);
    box-shadow: 0 12px 30px rgba(0,10,30,.5);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: all .18s ease; z-index: 40;
}
ul#menu-header-nav li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
ul#menu-header-nav .sub-menu a {
    display: block; padding: 9px 18px; color: #cfe6ff;
    text-transform: uppercase; font-size: 13px; letter-spacing: 1px;
}
ul#menu-header-nav .sub-menu a:hover { background: rgba(60,140,210,.35); color: #fff; }

/* right side : language selector + create account (PSD art) */
.nav-right { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; }
.lang-select {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 12px;
    background: linear-gradient(180deg, rgba(20,74,150,.75), rgba(9,42,96,.8));
    border: 1px solid rgba(126,205,236,.5);
    border-radius: 19px;
    color: #eaf4ff; text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(150,210,255,.3);
    transition: filter .15s ease;
}
.lang-select:hover { filter: brightness(1.12); color: #fff; }
.lang-flag { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px; object-fit: cover; }
.lang-code { font-family: 'Cinzel', serif; font-weight: 600; font-size: 13px; letter-spacing: 1px; }
.lang-caret { font-size: 13px; opacity: .85; }
.lang-wrap .lang-menu a { display: flex; align-items: center; gap: 8px; }
.lang-wrap .lang-menu .lang-flag { width: 18px; height: 18px; flex: 0 0 18px; }
.btn-create {
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; min-width: 164px; padding: 0 26px;
    background: url(../images/theme/createacc-bg.png) center / 100% 100% no-repeat;
    color: #f3e8d1; text-decoration: none;
    font-family: 'Cinzel', serif; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 12px;
    transition: filter .15s ease;
}
.btn-create:hover { filter: brightness(1.12); color: #fffaf0; }

/* keep themed link/button text visible on click (override Bootstrap's a:focus/:active color) */
.btn-create, .btn-create:link, .btn-create:visited, .btn-create:focus, .btn-create:active,
.btn-frame, .btn-frame:link, .btn-frame:visited, .btn-frame:focus, .btn-frame:active,
.hero-join, .hero-join:link, .hero-join:visited, .hero-join:focus, .hero-join:active { color: #f3e8d1 !important; }
.btn-create:hover, .btn-frame:hover, .hero-join:hover { color: #fffaf0 !important; }
ul#menu-header-nav > li > a, ul#menu-header-nav > li > a:focus, ul#menu-header-nav > li > a:active { color: #e7f2ff !important; }
ul#menu-header-nav > li > a:hover, ul#menu-header-nav > li.current > a { color: #8fe6ee !important; }
.lang-select, .lang-select:focus, .lang-select:active { color: #eaf4ff !important; }
.foot-menu a, .foot-menu a:focus, .foot-menu a:active { color: #dcebff !important; }
.foot-menu a:hover { color: #8fe6ee !important; }
.read-more, .read-more:focus, .read-more:active { color: #ddc286 !important; }
.copyright a, .copyright a:focus, .copyright a:active { color: #9fe4ec !important; }
.lang-wrap { position: relative; }
.lang-wrap .lang-menu {
    list-style: none; margin: 0; padding: 6px 0;
    position: absolute; top: 100%; right: 0; min-width: 140px;
    background: rgba(8,34,78,.97); border: 1px solid rgba(120,205,235,.35);
    box-shadow: 0 12px 30px rgba(0,10,30,.5);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .18s ease; z-index: 40;
}
.lang-wrap:hover .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-wrap .lang-menu a { display: block; padding: 8px 16px; color: #cfe6ff; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; }
.lang-wrap .lang-menu a:hover { background: rgba(60,140,210,.35); color: #fff; }
/* fallback for any remaining external links */
ul#menu-external-nav { flex: 0 0 auto; gap: 10px; }
ul#menu-external-nav .menu-item a {
    display: inline-block; padding: 8px 14px; color: #cfe6ff;
    text-transform: uppercase; letter-spacing: 1px; font-size: 12px;
    font-family: 'Cinzel', serif; font-weight: 600;
    border: 1px solid rgba(120,205,235,.4); border-radius: 3px;
    background: rgba(20,74,150,.4);
}
ul#menu-external-nav .menu-item a:hover { background: rgba(60,140,220,.6); color: #fff; }

/* =========================================================================
   LAYOUT COLUMNS
   ========================================================================= */
/* min-height keeps the homepage ≈ the scene's aspect (111vw) so the full scene (down to the temple/landscape) shows above the footer; the bg uses 100% auto so it never stretches even when a page is taller than this (the area below fills with the scene's bottom-edge colour) */
#content { position: relative; z-index: 5; padding-top: clamp(190px, 27vw, 520px); padding-bottom: 40px; min-height: calc(111vw - 224px); }

/* animated Mythara logo, centered in the upper hero sky */
.site-logo {
    position: absolute; left: 50%; top: clamp(100px, 12vw, 215px); transform: translateX(-50%);
    z-index: 6; width: clamp(330px, 38vw, 600px); pointer-events: none;
    filter: drop-shadow(0 8px 22px rgba(0,12,34,.6));
}
.site-logo img { display: block; width: 100%; height: auto; }
@media (max-width: 600px) { .site-logo { top: 74px; width: 60%; } }

.article > .page-width > .page-padding,
.mt2cms2-c, .cols { display: flex; gap: 11px; align-items: flex-start; }

.col-rail { flex: 0 0 299px; width: 299px; }
.col-rail.left  { order: 1; }
.col-rail.right { order: 3; }
.col-center { flex: 1 1 auto; min-width: 0; order: 2; }

/* legacy 2-col fallback */
.mt2cms2-c-s { flex: 0 0 299px; width: 299px; order: 3; }
.mt2cms2-c-l { flex: 1 1 auto; min-width: 0; order: 2; }

/* =========================================================================
   GLASS PANELS
   ========================================================================= */
.panel {
    position: relative;
    margin-bottom: 18px;
    background: linear-gradient(180deg, rgba(20,74,150,.62) 0%, rgba(9,42,96,.66) 100%);
    border: 1px solid rgba(126,205,236,.38);
    border-radius: 5px;
    box-shadow: inset 0 0 34px rgba(54,132,210,.30),
                inset 0 1px 0 rgba(180,225,255,.25),
                0 6px 22px rgba(2,14,38,.40);
    padding: 18px 18px 20px;
    list-style: none;
}
/* corner glints */
.panel::before, .panel::after {
    content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
    border-color: rgba(150,225,255,.75); border-style: solid; border-width: 0;
}
.panel::before { top: 5px; left: 5px; border-top-width: 1px; border-left-width: 1px; }
.panel::after  { top: 5px; right: 5px; border-top-width: 1px; border-right-width: 1px; }

.mt2cms2-c-s ul { list-style: none; margin: 0; padding: 0; }
.widget-container { list-style: none; }
/* included sidebars start with a bare <li> placed directly inside .panel */
.panel > li, .panel > .widget-container { display: block; list-style: none; margin: 0; padding: 0; }
.widget, .widget .bd { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }

/* panel headers (reuses .top-sidebar h4 / .page-hd h2 / .panel-hd) */
.top-sidebar h4, .panel-hd, .page-hd h2 {
    margin: 2px 0 16px;
    text-align: center;
    color: #72dbdb;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 3px;
    text-transform: uppercase !important;
    text-shadow: 0 0 14px rgba(76,200,210,.55);
    padding-bottom: 12px;
    position: relative;
}
.top-sidebar h4::after, .panel-hd::after, .page-hd h2::after {
    content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(120,220,235,.85), transparent);
}
.top-sidebar h4::before, .panel-hd::before {
    content: "◆"; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
    color: #72dbdb; font-size: 9px; text-shadow: 0 0 8px #72dbdb;
}
.top-sidebar { margin: 0; }
.page-hd { background: none !important; padding: 0; }
.page-hd .bd-c { background: none; border: 0; box-shadow: none; padding: 0; }
/* secondary heading under the page title (ranking "Players/Guilds", account name, etc.) */
.page-hd h6, .page-hd small, .page-hd h3 {
    display: block; text-align: center; color: #9ec6ef; font-weight: 400;
    font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin: 4px 0 0;
}

/* =========================================================================
   HERO  (center column top)
   ========================================================================= */
.hero-plate {
    position: relative;
    min-height: 210px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 60px;
    background: url(../images/theme/hero-scene.png) center / 100% 100% no-repeat,
                url(../images/theme/hero-plate-bg.png) center / 100% 100% no-repeat;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 6px 22px rgba(2,14,38,.4);
    overflow: hidden;
}
.hero-plate .hero-title { width: 360px; max-width: 80%; filter: drop-shadow(0 2px 10px rgba(0,20,50,.6)); }
.hero-plate .hero-join {
    margin-top: 22px; display: inline-block;
    font-family: 'Cinzel', serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: 14px;
    color: #f3e8d1; text-decoration: none; padding: 12px 34px; border-radius: 4px;
    background: linear-gradient(180deg,#1f74c8 0%, #155aa6 45%, #0d3f86 100%);
    border: 1px solid #2b86d6;
    box-shadow: inset 0 1px 0 rgba(150,210,255,.5), 0 4px 14px rgba(2,18,46,.55);
    transition: transform .15s ease, filter .15s ease;
}
.hero-plate .hero-join:hover { transform: translateY(-2px); filter: brightness(1.12); color: #fff; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); opacity: .85; transition: opacity .15s ease; }
.hero-arrow:hover { opacity: 1; }
.hero-arrow img { height: 30px; }
.hero-arrow.left  { left: 20px; }
.hero-arrow.right { right: 20px; }

/* =========================================================================
   LOGIN / USER PANEL  +  global form fields
   ========================================================================= */
.form-group { margin-bottom: 12px; }
.form-control,
input[type=text], input[type=password], input[type=email], input[type=number], textarea, select {
    width: 100%;
    background: linear-gradient(180deg,#dcecfb,#bcd9f6);
    border: 1px solid #7fb4e3;
    border-radius: 3px;
    color: #315b8b;
    padding: 11px 14px;
    font-family: 'Marcellus', serif;
    font-size: 14px;
    box-shadow: inset 0 2px 5px rgba(20,60,110,.25);
    outline: none;
}
.form-control::placeholder { color: #5a82b0; }
.form-control:focus { border-color: #72dbdb; box-shadow: inset 0 2px 5px rgba(20,60,110,.25), 0 0 0 2px rgba(114,219,219,.4); }

/* primary action buttons */
.btn, .btn-success, .btn-primary, input[type=submit] {
    display: inline-block;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    font-size: 13px;
    color: #f3e8d1 !important;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    padding: 11px 16px;
    border-radius: 3px;
    border: 1px solid #1d63b4;
    background: linear-gradient(180deg,#1f74c8 0%, #155aa6 45%, #0d3f86 100%);
    box-shadow: inset 0 1px 0 rgba(150,210,255,.45), 0 3px 10px rgba(2,18,46,.45);
    transition: filter .15s ease, transform .1s ease;
    text-decoration: none;
}
.btn:hover, .btn-success:hover, .btn-primary:hover, input[type=submit]:hover { filter: brightness(1.13); color: #fff !important; }
.btn:active { transform: translateY(1px); }
.btn-block { display: block; width: 100%; }
.btn-sm { padding: 7px 10px; font-size: 11px; letter-spacing: .4px; }

/* gold-accent variant */
.btn-gold {
    background: linear-gradient(180deg,#f4e3bb 0%, #d8be86 50%, #b8975a 100%);
    border-color: #caa86b; color: #4a3410 !important;
}
.btn-gold:hover { color: #2c1d04 !important; }

.btn-danger, .list-group-item-danger { color: #ffd9d9 !important; }
.btn-danger { background: linear-gradient(180deg,#c0463f,#8d2a25); border-color: #b03b34; }

/* login + similar buttons use the PSD button frame with translatable text on top */
.btn-frame {
    display: block; width: 100%; height: 42px; line-height: 42px;
    background: url(../images/theme/btn-bg.png) 0 0 / 100% 100% no-repeat;
    color: #f3e8d1; text-align: center; text-decoration: none;
    font-family: 'Cinzel', serif; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 13px;
    border: 0; border-radius: 4px; transition: filter .15s ease; cursor: pointer;
}
.btn-frame:hover { filter: brightness(1.12); color: #fffaf0; }
/* login button: same frame + arrow on the right (only the login button has the arrow) */
.panel-login input[type=submit] {
    display: block; width: 100%; height: 46px; border: 0; cursor: pointer; border-radius: 4px;
    background: url(../images/theme/login-arrow.png) right 18px center / 14px no-repeat,
                url(../images/theme/btn-bg.png) 0 0 / 100% 100% no-repeat;
    color: #f3e8d1 !important; text-align: left; padding: 0 20px;
    font-family: 'Marcellus', serif; text-transform: none; letter-spacing: .5px; font-size: 15px;
    box-shadow: none !important;
}
.panel-login input[type=submit]:hover { filter: brightness(1.12); color: #fffaf0 !important; transform: none; }

/* logged-in account menu */
.list-group { display: block; }
.list-group-item {
    display: block;
    padding: 10px 14px;
    margin-bottom: 6px;
    color: #dff0ff;
    background: linear-gradient(180deg, rgba(38,96,170,.45), rgba(14,58,120,.45));
    border: 1px solid rgba(120,200,230,.30);
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
}
/* focus must look like the normal state so it doesn't linger after release; only hover/press highlight */
.list-group-item:focus { background: linear-gradient(180deg, rgba(38,96,170,.45), rgba(14,58,120,.45)); color: #dff0ff; outline: none; }
.list-group-item:hover, .list-group-item:active { background: linear-gradient(180deg, rgba(58,120,200,.6), rgba(24,78,150,.6)); color: #fff; }
/* admin item titles: Bootstrap colours .list-group-item-heading dark (#333), which reads as a dull brown on the blue panels. Recolour the heading (and its icon, which inherits) to the theme cyan, keep the description light blue, and brighten to white on hover. */
.list-group-item-action .list-group-item-heading,
.list-group-item .list-group-item-heading { color: #8fe6ee; }
.list-group-item .list-group-item-text { color: #cfe6ff; }
.list-group-item-action:hover .list-group-item-heading,
.list-group-item-action:hover .list-group-item-text { color: #ffffff; }
/* drop Bootstrap's lingering focus ring on buttons too */
.btn:focus, .btn-primary:focus, .btn-success:focus, .btn-danger:focus, .nav-link:focus {
    box-shadow: inset 0 1px 0 rgba(150,210,255,.45), 0 3px 10px rgba(2,18,46,.45) !important;
}
.list-group-item.disabled {
    opacity: 1;
    color: #8fe6ee !important;
    background: rgba(12,52,112,.4);
    border-style: dashed;
    cursor: default;
}
.list-group-item.disabled:hover { background: rgba(12,52,112,.4); color: #8fe6ee !important; }
.tag, .tag-pill { font-size: 11px; background: rgba(114,219,219,.25); padding: 2px 8px; border-radius: 10px; color:#eaf4ff; }

/* ===== admin panel home: responsive card grid ===== */
.blogroll .list-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 10px;
}
/* section header spans the whole row */
.blogroll .list-group-item.active {
    grid-column: 1 / -1;
    margin-bottom: 2px;
    background: linear-gradient(180deg, rgba(58,120,200,.55), rgba(24,78,150,.55));
    border-color: rgba(150,220,250,.40);
    font-size: 14px;
}
/* each action link becomes a card */
.blogroll .list-group-item-action {
    display: flex;
    flex-direction: column;
    min-height: 116px;
    margin-bottom: 0;
    padding: 16px;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 9px;
    border: 1px solid rgba(120,200,230,.30);
    box-shadow: 0 4px 14px rgba(2,18,46,.25);
}
.blogroll .list-group-item-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 22px rgba(2,18,46,.42);
    border-color: rgba(150,220,250,.55);
}
.blogroll .list-group-item-action .list-group-item-heading {
    margin: 0 0 8px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.blogroll .list-group-item-action .list-group-item-heading .fa {
    margin-right: 9px;
    opacity: .9;
}
.blogroll .list-group-item-action .list-group-item-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    text-transform: none;
    letter-spacing: 0;
}

/* neutralise bootstrap grid inside the login panel */
.panel-login .row { display: block; margin: 0; }
.panel-login [class^="col-md"], .panel-login [class*=" col-md"] { width: 100%; max-width: 100%; padding: 0; float: none; }
.panel-login form { margin-top: 4px; }
/* user / lock icons (with divider) inside the login fields */
.panel-login input[name="username"], .panel-login input[name="password"] {
    background-repeat: no-repeat, no-repeat;
    background-position: 14px center, 0 0;
    background-size: auto 13px, auto;
    padding-left: 44px;
}
.panel-login input[name="username"] { background-image: url(../images/theme/ico-user.png), linear-gradient(180deg,#dcecfb,#bcd9f6); }
.panel-login input[name="password"] { background-image: url(../images/theme/ico-lock.png), linear-gradient(180deg,#dcecfb,#bcd9f6); }
.panel-login center, .panel-login .row center { margin-top: 6px; font-size: 13px; }
.panel-center > .mt2cms2-c-l { width: 100%; flex: none; }
.panel-center .bd-c { background: none; border: 0; box-shadow: none; padding: 0; }

/* =========================================================================
   SERVER DETAILS / STATISTICS
   ========================================================================= */
.panel-server .featured {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(180deg, rgba(40,110,195,.5), rgba(16,64,130,.5));
    border: 1px solid rgba(120,205,235,.35);
    border-radius: 4px; padding: 12px 14px; margin-bottom: 14px;
}
.panel-server .featured img { width: 38px; filter: drop-shadow(0 0 6px rgba(110,200,255,.5)); }
.panel-server .featured .big { font-family: 'Cinzel', serif; font-size: 22px; color: #fff; line-height: 1.1; }
.panel-server .featured .sub { font-size: 12px; color: #bcd8f5; }

/* server-details stat rows with icons */
.stat-list { list-style: none; margin: 4px 0 2px; padding: 0; }
.stat-list li { display: flex; align-items: center; gap: 12px; padding: 9px 6px; }
.stat-list li + li { border-top: 1px solid rgba(120,205,235,.14); }
.stat-list .ico { flex: 0 0 30px; width: 30px; text-align: center; }
.stat-list .ico img { max-height: 26px; max-width: 30px; vertical-align: middle; filter: drop-shadow(0 0 4px rgba(110,200,255,.5)); }
.stat-list .lbl { flex: 1 1 auto; color: #d6e9ff; text-transform: uppercase; font-size: 12px; letter-spacing: .4px; }
.stat-list .val { color: #fff; font-family: 'Cinzel', serif; font-weight: 600; font-size: 13px; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 9px 12px; font-size: 13px; border: 0; vertical-align: middle; }
.table tbody tr { background: linear-gradient(180deg, rgba(40,110,195,.34), rgba(16,64,130,.34)); }
.table tbody tr + tr { box-shadow: inset 0 1px 0 rgba(0,20,50,.25); }
.table th[scope=row], .table > tbody > tr > th { color: #d6e9ff; font-weight: 400; text-align: left; text-transform: uppercase; letter-spacing: .5px; font-size: 12px; }
.table thead th, .table > thead > tr > th, .thead-inverse th, thead.thead-inverse th {
    background: linear-gradient(180deg, #cfe6fb, #a9d0f4) !important;
    color: #1d4f87 !important;
    font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: .6px; font-size: 12px;
    border: 0; border-bottom: 1px solid rgba(120,205,235,.5);
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.table thead tr th:first-child { border-top-left-radius: 5px; }
.table thead tr th:last-child { border-top-right-radius: 5px; }
.table td { color: #ffffff; text-align: left; }
.panel-server .table td { text-align: right; }      /* stat values right-aligned */
.table-hover tbody tr:hover { background: linear-gradient(180deg, rgba(60,140,220,.5), rgba(24,80,150,.5)); }

/* =========================================================================
   RANKING PANELS
   ========================================================================= */
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-list li {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 8px; margin-bottom: 5px;
    background: linear-gradient(180deg, rgba(168,210,248,.92), rgba(140,190,240,.92));
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 3px;
}
.rank-list li .rk {
    flex: 0 0 22px; width: 22px; height: 22px; line-height: 22px; text-align: center;
    font-family: 'Cinzel', serif; font-weight: 700; font-size: 12px; color: #c5eeff;
    background: linear-gradient(180deg,#2b73c4,#13509f);
    border: 1px solid #6fb0e6; border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(180,225,255,.5);
}
.rank-list li .nm { flex: 1 1 auto; color: #315b8b; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list li .val { color: #315b8b; font-family: 'Cinzel', serif; font-weight: 600; font-size: 12px; }
.rank-list li .lv { flex: 0 0 auto; color: #2a4f7a; font-family: 'Cinzel', serif; font-weight: 700; font-size: 11px; background: rgba(120,200,230,.30); padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.rank-list li .emp { flex: 0 0 auto; height: 18px; width: auto; border-radius: 2px; }
.rank-empty { color: #cfe6ff; text-align: center; padding: 14px; font-size: 13px; }
.rank-foot { text-align: center; margin-top: 12px; }

/* bootstrap tab ranking (fallback for /ranking pages) */
.nav-tabs { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 12px; justify-content: center; }
.nav-tabs .nav-link { display: block; padding: 6px 14px; border: 1px solid rgba(120,205,235,.35); border-radius: 3px; background: rgba(20,74,150,.4); }
.nav-tabs .nav-link.active { background: rgba(60,140,220,.6); }
.tab-pane { display: none; } .tab-pane.active { display: block; }

/* =========================================================================
   NEWS
   ========================================================================= */
.blogroll { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; min-height: 460px; }
.news-card, .blogroll > li, .blogroll article {
    position: relative;
    padding: 16px 18px 16px;
    background: linear-gradient(180deg, rgba(33,92,170,.5), rgba(14,58,120,.5));
    border: 1px solid rgba(120,205,235,.35);
    border-radius: 4px;
    box-shadow: inset 0 0 22px rgba(40,120,205,.18);
    list-style: none;
    flex: 1 1 auto;          /* one post fills the area; several share it */
}
/* decorative UPDATE tag on each news card (matches the PSD) */
.blogroll .blog-post::before {
    content: var(--news-tag, "UPDATE");
    display: inline-block;
    background: linear-gradient(180deg,#2b86d6,#15538f);
    color: #fff; font-family: 'Cinzel', serif; font-weight: 600; font-size: 10px; letter-spacing: 2px;
    padding: 3px 12px; border-radius: 3px; text-transform: uppercase; margin-bottom: 10px;
    border: 1px solid #5aa0e0;
}
.blogroll .wp-pagenavi { flex: 0 0 auto; margin-top: auto; }   /* pager pinned to the bottom */
.blogroll h2, .blogroll h3, .blog-title {
    font-family: 'Cinzel', serif; font-weight: 600; color: #ffffff; font-size: 18px;
    margin: 0 0 8px; letter-spacing: .5px;
}
.blogroll .blog-attribution, .blogroll .meta, .news-meta { color: #a9cdf2; font-size: 12px; margin: 0 0 8px; }
.blogroll p, .blogroll .copy, .blogroll .text { color: #e8f3ff; font-size: 14px; }
.badge-update {
    display: inline-block; background: linear-gradient(180deg,#2b86d6,#15538f);
    color: #fff; font-family:'Cinzel',serif; font-weight:600; font-size: 10px; letter-spacing: 2px;
    padding: 3px 12px; border-radius: 3px; text-transform: uppercase; margin-bottom: 8px;
    border: 1px solid #5aa0e0;
}
.read-more, .blogroll a.more, .blogroll .more a {
    display: inline-block; margin-top: 8px; color: #ddc286;
    font-family: 'Cinzel', serif; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1.5px; font-size: 12px;
}
.blogroll .more { margin: 8px 0 0; }
.read-more:hover, .blogroll .more a:hover { color: #f3e8d1; }

/* pagination */
.pagination, .pages, ul.pagination { display: flex; gap: 6px; justify-content: center; list-style: none; padding: 12px 0 0; margin: 0; }
.pagination a, .pagination span, .pages a, .pages span {
    display: inline-block; min-width: 30px; text-align: center; padding: 6px 8px;
    background: rgba(20,74,150,.5); border: 1px solid rgba(120,205,235,.35);
    border-radius: 3px; color: #cfe6ff; font-size: 13px;
}
.pagination a:hover, .pagination .active span, .pagination .current { background: rgba(60,140,220,.7); color: #fff; }

/* unified boxed-number pager (.wp-pagenavi) — news, rankings, admin, everywhere */
.wp-pagenavi {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center;
    margin: 20px 0 6px; font-size: 0;            /* collapses the &nbsp; spacers */
}
.wp-pagenavi a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 10px;
    font-size: 13px; line-height: 1; text-decoration: none !important;
    color: #dcecff !important;
    background: linear-gradient(180deg, rgba(40,110,195,.55), rgba(16,64,130,.55));
    border: 1px solid rgba(120,205,235,.45); border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(150,210,255,.3);
    transition: filter .15s ease;
}
.wp-pagenavi a:hover { filter: brightness(1.18); color: #fff !important; }
.wp-pagenavi a.current, .wp-pagenavi span.current {
    background: linear-gradient(180deg,#2f86d8,#15539a);
    border-color: #6fb6ee; color: #fff !important; font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(180,225,255,.5), 0 0 10px rgba(80,170,240,.5);
}

/* =========================================================================
   FORMS / ALERTS (inner pages)
   ========================================================================= */
.alert { padding: 12px 16px; border-radius: 4px; margin-bottom: 14px; border: 1px solid rgba(120,205,235,.4); background: rgba(20,74,150,.4); color: #eaf4ff; }
.alert-danger { background: rgba(150,50,50,.4); border-color: rgba(220,120,120,.5); }
.alert .close { float: right; background: none; border: 0; color: #fff; font-size: 18px; cursor: pointer; }
label { color: #cfe6ff; font-size: 13px; }
.copy a, .text a { color: #9fe4ec; text-decoration: underline; }
h2, h3, h4 { color: #eaf4ff; }
center { text-align: center; }
.text-danger { color: #ff9a9a !important; }
.text-success { color: #9ce8b0 !important; }
.text-muted { color: #a9cdf2 !important; }

/* ---- normalise Bootstrap inner-page content inside the center column ---- */
.panel-center .container, .panel-center .container-fluid { width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; margin: 0; }
.panel-center .row { margin-left: 0; margin-right: 0; }
.panel-center [class*="offset"] { margin-left: 0 !important; }
.panel-center .jumbotron {
    background: rgba(20,74,150,.45) !important;
    border: 1px solid rgba(120,205,235,.3);
    border-radius: 5px; padding: 16px 20px !important; margin-bottom: 16px; color: #eaf4ff;
}
.panel-center .well, .panel-center .panel-default, .panel-center .card {
    background: rgba(20,74,150,.4); border: 1px solid rgba(120,205,235,.3); border-radius: 5px; color: #eaf4ff;
}
.panel-center .table td img { vertical-align: middle; border-radius: 4px; }
.captcha-input { letter-spacing: 2px; }
/* class/job icons ship on a dark-red plate — shift it to the theme's blue */
img[src*="/images/job/"] {
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(120,205,235,.35);
}

/* ---- admin pages: full width (the wide tables need room) ---- */
.page-admin .col-rail { display: none; }
.page-admin .col-center { flex: 1 1 100%; }
.page-admin .panel-center { overflow-x: auto; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.mt2cms2-footer {
    position: relative; z-index: 5; margin-top: 0;
    background: url(../images/theme/footer-bg.png) center / 100% 100% no-repeat;
}
.mt2cms2-footer .page-width { position: relative; height: 150px; }
/* nav links sit in the top band */
.foot-menu {
    position: absolute; top: 26px; left: 0; right: 0;
    display: flex; flex-wrap: wrap; gap: 42px; list-style: none; margin: 0; padding: 0; justify-content: center;
}
.foot-menu a { color: #dcebff; text-transform: uppercase; letter-spacing: 1.8px; font-size: 13px; }
.foot-menu a:hover { color: #8fe6ee; }
/* copyright sits in the bottom band, flanking the baked Mythara logo */
.copyright {
    position: absolute; bottom: 24px; left: 0; right: 0;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin: 0; padding: 0; border: 0; color: #cfe2f7; font-size: 12px; letter-spacing: .5px;
}
.copyright .left { text-align: left; }
.copyright .right { text-align: right; }
.copyright a { color: #9fe4ec; }
.social { display: none; }   /* old-theme block (not rendered); ours is .foot-social */

/* social buttons (Admin > Links > social fields) — top band, right side */
.foot-social { position: absolute; top: 15px; right: 0; display: flex; gap: 9px; }
.soc-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(180deg, rgba(20,74,150,.75), rgba(9,42,96,.8));
    border: 1px solid rgba(126,205,236,.5);
    box-shadow: inset 0 1px 0 rgba(150,210,255,.3);
    color: #cfe6ff !important; font-size: 15px; text-decoration: none !important;
    transition: filter .15s ease, transform .15s ease, color .15s ease, box-shadow .15s ease;
}
.soc-btn svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.soc-btn:hover, .soc-btn:focus {
    filter: brightness(1.2); color: #fff !important;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(150,210,255,.3), 0 0 10px rgba(80,170,240,.55);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1320px) {
    .page-width { width: 96%; }
}
@media (max-width: 980px) {
    /* nav wraps and centers */
    .main-hd .page-width { flex-wrap: wrap; justify-content: center; min-height: 0; padding: 8px 0; gap: 6px 16px; }
    .main-hd h1 { position: static; transform: none; }
    .main-hd h1 a { width: 46px; height: 46px; }
    ul#menu-header-nav { order: 3; flex: 1 1 100%; justify-content: center; flex-wrap: wrap; gap: 4px 18px; margin-left: 0; }
    ul#menu-header-nav > li > a { padding: 8px 4px; font-size: 14px; }
    ul#menu-header-nav > li > a::after { bottom: 4px; transform: none; }
    .nav-right { order: 2; }

    /* stack the three columns; banner / page content first */
    .article > .page-width > .page-padding, .mt2cms2-c, .cols { flex-direction: column; }
    .col-rail, .col-center, .mt2cms2-c-s, .mt2cms2-c-l { width: 100% !important; flex: 1 1 100% !important; order: 0; }
    .col-center { order: -1; }

    /* The page is far taller than the scene's aspect, so stretching it on <body> distorted the art AND the nav sat on top of the scene, cutting it off. Move the scene onto #content (which starts right below the nav) so the full scene shows beneath the header at natural proportions; fill the area below it with the scene's bottom-edge colour so it blends seamlessly. */
    body.mythara, body { background-image: none; background-color: #496786; }
    #content {
        background: url(../images/theme/bg-page.jpg?v=2) top center / 100% auto no-repeat;
        padding-top: clamp(150px, 50vw, 340px); min-height: 0;
    }
    .site-logo { top: clamp(80px, 26vw, 150px); width: clamp(180px, 56vw, 320px); }
    .hero-arrow { display: none; }
    .hero-plate { padding: 22px 24px; min-height: 0; }
    .hero-plate .hero-title { width: 70%; }

    /* wide tables scroll instead of overflowing */
    .panel-center { overflow-x: auto; }

    /* footer: clean stacked layout (the band image distorts when tall) */
    .mt2cms2-footer { background: linear-gradient(180deg, #0e4d99, #082b64); border-top: 1px solid #5fb0ea; }
    .mt2cms2-footer .page-width { height: auto; padding: 22px 0; }
    .foot-menu { position: static; flex-wrap: wrap; justify-content: center; gap: 14px 22px; }
    .foot-social { position: static; justify-content: center; flex-wrap: wrap; margin: 14px 0 0; }
    .copyright { position: static; flex-direction: column; text-align: center; gap: 6px; margin-top: 16px; }
}
@media (max-width: 520px) {
    .page-width { width: 92%; }
    #content { padding-top: clamp(120px, 54vw, 230px); }
    .site-logo { top: 66px; width: 66%; }
    .nav-ico { height: 20px !important; }
    ul#menu-header-nav > li > a { font-size: 13px; gap: 6px; }
    .hero-plate .hero-title { width: 82%; }
    .panel, .panel-center, .news-card, .blogroll > li { padding-left: 14px; padding-right: 14px; }
    .blogroll h2, .blogroll h3, .blog-title { font-size: 16px; }
    .lang-select { height: 34px; padding: 0 9px; }
    .btn-create { height: 36px; padding: 0 14px; font-size: 11px; }
    .top-sidebar h4, .panel-hd, .page-hd h2 { font-size: 14px; letter-spacing: 2px; }
    .table th, .table td { padding: 8px 9px; font-size: 12px; }
}

/* =========================================================================
   ANIMATION & POLISH LAYER  (Session 3)
   Micro-interactions + entrance motion. Everything motion-related is wrapped
   in prefers-reduced-motion:no-preference, so reduced-motion users get the
   static theme untouched. No layout-affecting properties are animated
   (transform / opacity / filter / box-shadow / background-position only).
   ========================================================================= */

/* ---- theme-coloured text selection + scrollbar (matches admin overflow tables too) ---- */
::selection { background: rgba(114,219,219,.45); color: #fff; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #0a2d5e; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,#2f86d8,#15539a);
    border-radius: 6px; border: 2px solid #0a2d5e;
}
::-webkit-scrollbar-thumb:hover { background: #3e9be8; }

/* ---- keyboard accessibility: visible focus ring for TAB users only
       (mouse clicks still show no box — :focus-visible doesn't match them) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
.btn:focus-visible, .btn-frame:focus-visible, .btn-create:focus-visible,
.lang-select:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid rgba(114,219,219,.8) !important;
    outline-offset: 2px;
}

/* ---- top-3 ranking medals (gold / silver / bronze) ---- */
.rank-list li:nth-child(1) .rk {
    background: linear-gradient(180deg,#f7e09a,#c9a44a);
    border-color: #e6c878; color: #5a4310;
    box-shadow: inset 0 1px 0 rgba(255,245,210,.8), 0 0 8px rgba(230,200,110,.55);
}
.rank-list li:nth-child(2) .rk {
    background: linear-gradient(180deg,#eef3f8,#aebccb);
    border-color: #cfdae6; color: #3e4a57;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 0 7px rgba(190,210,230,.5);
}
.rank-list li:nth-child(3) .rk {
    background: linear-gradient(180deg,#e3ab7e,#a96a3c);
    border-color: #cd9261; color: #46280e;
    box-shadow: inset 0 1px 0 rgba(250,220,190,.7), 0 0 7px rgba(200,140,80,.5);
}

@media (prefers-reduced-motion: no-preference) {

    html { scroll-behavior: smooth; }

    /* =====  entrance: panels & hero rise in with a soft stagger  ===== */
    @keyframes panelRise {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: none; }
    }
    @keyframes logoIn {
        from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
        to   { opacity: 1; transform: translateX(-50%); }
    }
    .col-center .hero-plate   { animation: panelRise .55s cubic-bezier(.22,.61,.36,1) .05s both; }
    .col-center .panel-center { animation: panelRise .55s cubic-bezier(.22,.61,.36,1) .14s both; }
    .col-rail.left  .panel:nth-of-type(1) { animation: panelRise .55s cubic-bezier(.22,.61,.36,1) .20s both; }
    .col-rail.left  .panel:nth-of-type(2) { animation: panelRise .55s cubic-bezier(.22,.61,.36,1) .30s both; }
    .col-rail.right .panel:nth-of-type(1) { animation: panelRise .55s cubic-bezier(.22,.61,.36,1) .25s both; }
    .col-rail.right .panel:nth-of-type(2) { animation: panelRise .55s cubic-bezier(.22,.61,.36,1) .35s both; }
    .site-logo { animation: logoIn .9s cubic-bezier(.22,.61,.36,1) .08s both; }

    /* gentle idle float on the hero logo (on the img, so the container's centering transform is untouched) */
    @keyframes logoFloat {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-7px); }
    }
    .site-logo img { animation: logoFloat 6.5s ease-in-out infinite; }

    /* =====  panel header ◆ : soft glow pulse  ===== */
    @keyframes diamondPulse {
        0%, 100% { opacity: .8;  text-shadow: 0 0 6px #72dbdb; }
        50%      { opacity: 1;   text-shadow: 0 0 12px #72dbdb, 0 0 22px rgba(114,219,219,.55); }
    }
    .top-sidebar h4::before, .panel-hd::before { animation: diamondPulse 3.6s ease-in-out infinite; }

    /* =====  nav: icons lift & brighten on hover  ===== */
    ul#menu-header-nav > li > a .nav-ico { transition: transform .18s ease, filter .18s ease; }
    ul#menu-header-nav > li > a:hover .nav-ico,
    ul#menu-header-nav > li.current > a .nav-ico {
        transform: translateY(-2px) scale(1.08);
        filter: drop-shadow(0 0 7px rgba(140,220,255,.95));
    }

    /* =====  buttons: press feedback + hover lift  ===== */
    .btn-create, .btn-frame, .lang-select { transition: filter .15s ease, transform .15s ease; }
    .btn-create:hover, .btn-frame:hover { transform: translateY(-1px); }
    .btn-create:active, .btn-frame:active, .hero-join:active, .btn:active { transform: translateY(1px); filter: brightness(.96); }

    /* light sheen that sweeps across CTAs on hover (anchors only — inputs can't host pseudo-elements).
       The sheen is a wide gradient swept via background-position on a full-size overlay; the
       image-framed buttons (.btn-create / .btn-frame) additionally MASK the overlay with their own
       frame PNG, so the light only lands on the frame's opaque pixels — no white rectangle floating
       over the transparent corners/edges of the art. */
    @keyframes sheen {
        from { background-position: 175% 0; }
        to   { background-position: -75% 0; }
    }
    .hero-join, .btn-create, a.btn-frame { position: relative; overflow: hidden; }
    .hero-join::after, .btn-create::after, a.btn-frame::after {
        content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
        background: linear-gradient(105deg, transparent 41%, rgba(255,255,255,.3) 50%, transparent 59%) no-repeat;
        background-size: 320% 100%;
        background-position: 175% 0;        /* parked off-art; invisible at rest */
        pointer-events: none;
    }
    .hero-join:hover::after, .btn-create:hover::after, a.btn-frame:hover::after {
        animation: sheen .7s ease forwards;
    }
    /* clip the sheen to the frame art; if a browser lacks mask support, show no sheen on the
       framed buttons at all (they keep their brightness hover) rather than the ugly box */
    .btn-create::after, a.btn-frame::after { opacity: 0; }
    @supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
        .btn-create::after, a.btn-frame::after { opacity: 1; }
        .btn-create::after {
            -webkit-mask: url(../images/theme/createacc-bg.png) center / 100% 100% no-repeat;
                    mask: url(../images/theme/createacc-bg.png) center / 100% 100% no-repeat;
        }
        a.btn-frame::after {
            -webkit-mask: url(../images/theme/btn-bg.png) center / 100% 100% no-repeat;
                    mask: url(../images/theme/btn-bg.png) center / 100% 100% no-repeat;
        }
    }

    /* JOIN NOW: slow idle glow pulse so the main CTA breathes */
    @keyframes ctaGlow {
        0%, 100% { box-shadow: inset 0 1px 0 rgba(150,210,255,.5), 0 4px 14px rgba(2,18,46,.55), 0 0 0 rgba(80,170,240,0); }
        50%      { box-shadow: inset 0 1px 0 rgba(150,210,255,.5), 0 4px 14px rgba(2,18,46,.55), 0 0 20px rgba(80,170,240,.55); }
    }
    .hero-join { animation: ctaGlow 3.4s ease-in-out infinite; }

    /* login button: arrow nudges toward the edge on hover */
    .panel-login input[type=submit] { transition: filter .15s ease, background-position .22s ease; }
    .panel-login input[type=submit]:hover { background-position: right 12px center, 0 0; }

    /* hero arrows: scale + nudge */
    .hero-arrow { transition: opacity .15s ease, transform .18s ease; }
    .hero-arrow.left:hover  { transform: translateY(-50%) translateX(-3px) scale(1.12); }
    .hero-arrow.right:hover { transform: translateY(-50%) translateX(3px) scale(1.12); }

    /* =====  panels: corner glints grow + brighten on hover  ===== */
    .panel::before, .panel::after { transition: width .25s ease, height .25s ease, border-color .25s ease; }
    .panel:hover::before, .panel:hover::after {
        width: 24px; height: 24px; border-color: rgba(180,240,255,.95);
    }

    /* =====  ranking rows: slide + brighten  ===== */
    .rank-list li { transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
    .rank-list li:hover {
        transform: translateX(4px);
        filter: brightness(1.05);
        box-shadow: 0 2px 8px rgba(2,18,46,.35);
    }

    /* =====  server-detail stat rows: subtle tint + icon glow  ===== */
    .stat-list li { transition: background-color .18s ease; border-radius: 3px; }
    .stat-list li:hover { background-color: rgba(90,165,235,.14); }
    .stat-list .ico img { transition: transform .18s ease, filter .18s ease; }
    .stat-list li:hover .ico img {
        transform: scale(1.12);
        filter: drop-shadow(0 0 7px rgba(140,220,255,.95));
    }
    .panel-server .featured { transition: box-shadow .2s ease, border-color .2s ease; }
    .panel-server .featured:hover { border-color: rgba(150,225,255,.6); box-shadow: 0 0 14px rgba(70,160,235,.35); }

    /* =====  news cards: lift + border glow, read-more nudges  ===== */
    .blogroll .blog-post, .news-card {
        transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .blogroll .blog-post:hover, .news-card:hover {
        transform: translateY(-3px);
        border-color: rgba(150,225,255,.65);
        box-shadow: inset 0 0 22px rgba(40,120,205,.18), 0 8px 20px rgba(2,14,38,.45), 0 0 12px rgba(70,160,235,.3);
    }
    .read-more, .blogroll a.more, .blogroll .more a { transition: color .15s ease, transform .15s ease; }
    .read-more:hover, .blogroll .more a:hover { transform: translateX(3px); }

    /* =====  tables: row hover brightens smoothly  ===== */
    .table tbody tr { transition: filter .15s ease; }
    .table tbody tr:hover { filter: brightness(1.12); }

    /* =====  pager & list-group: tactile hover  ===== */
    .wp-pagenavi a { transition: filter .15s ease, transform .15s ease; }
    .wp-pagenavi a:hover { transform: translateY(-1px); }
    .list-group-item { transition: background .15s ease, color .15s ease, transform .15s ease; }
    .list-group-item:hover { transform: translateX(3px); }
    .list-group-item.disabled:hover { transform: none; }

    /* =====  form fields: focus glow eases in  ===== */
    .form-control,
    input[type=text], input[type=password], input[type=email], input[type=number], textarea, select {
        transition: border-color .18s ease, box-shadow .18s ease;
    }

    /* mobile: skip hover-lift transforms (no hover) and heavy entrance stagger */
    @media (max-width: 980px) {
        .col-rail.left .panel, .col-rail.right .panel,
        .col-center .hero-plate, .col-center .panel-center {
            animation-delay: .05s;
        }
        .rank-list li:hover, .list-group-item:hover { transform: none; }
    }
}