/* modern.css - 2026 layer over app.css. Loaded last. Keeps the fixed widths (main 750px, sidebar 332px, body 1085px). */

/* 1. Design tokens */
:root {
    --ax-gold: #e2b45f;
    --ax-gold-hi: #f6d998;
    --ax-gold-soft: rgb(226 180 95 / .35);
    --ax-gold-faint: rgb(226 180 95 / .14);
    --ax-ember: rgb(255 128 40);
    --ax-surface-0: #0c0a09;
    --ax-surface-1: rgb(20 16 13 / .74);
    --ax-surface-2: rgb(30 24 19 / .9);
    --ax-line: rgb(255 255 255 / .07);
    --ax-text: #dcd4c7;
    --ax-text-dim: #a89e8f;
    --ax-discord: #5865f2;
    --ax-discord-hi: #4752c4;
    --ax-radius: 10px;
    --ax-radius-sm: 6px;
    --ax-radius-pill: 999px;
    --ax-shadow-1: 0 6px 18px -6px rgb(0 0 0 / .7);
    --ax-shadow-2: 0 14px 34px -10px rgb(0 0 0 / .85);
    --ax-glow: 0 0 0 1px var(--ax-gold-soft), 0 8px 26px -6px rgb(226 180 95 / .45);
    --ax-ease: cubic-bezier(.2, .7, .2, 1);
    --ax-font-body: "Inter", "Segoe UI", Arial, sans-serif;
    --ax-font-title: "Cinzel", "Times New Roman", serif;
}

/* Registered angle for the rotating conic border (interpolates smoothly). */
@property --ax-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* 2. Typography: one family for everything that is read or clicked.
   The old theme sets font-family on about 140 selectors (ptsanscaption, Arial, merriweather sans), and some pages load
   itemStyle.css / register_term.css after this file, so the family is forced here. Icon-font elements keep their font.
   :where() keeps the specificity at "body" (0,0,1), so the !important title rules below win over it. */
html,
body {
    font-family: var(--ax-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body :where(:not(.fa, [class^="fa-"], [class*=" fa-"], [class^="icon-"], [class*=" icon-"], .glyphicon)) {
    font-family: var(--ax-font-body) !important;
    font-feature-settings: "cv11", "ss01";
}

/* Headings balance, paragraphs pretty (zero specificity: nowrap/ellipsis rules of app.css still win) */
:where(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
}

:where(.welcome_content, .post_content p, .sidebox_body p, .seo-links p) {
    text-wrap: pretty;
}

/* 2a. Display titles: Cinzel, 18px and more only, written case (no forced uppercase: Turkish dotted I).
   The title text sits in an <i> / <span> child (app.css 1959, 2108, 2262, 2461, 2570): the child is listed too,
   because the global rule above matches it directly and does not let it inherit Cinzel. */
.mainside .content_header span,
.mainside .content_header span i,
.mainside .welcome_box .welcome_head .welcome_title,
.mainside .welcome_box .welcome_head .welcome_title i,
.mainside .page .page-inner .page-header .page_title,
.mainside .page .page-inner .page-header .page_title i,
.mainside .page .page-inner .page-header .page_title span,
.sidebar .sidebox .sidebox_title,
.sidebar .sidebox .sidebox_title i {
    font-family: var(--ax-font-title) !important;
    font-feature-settings: normal;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    text-rendering: optimizeLegibility;
}

.mainside .content_header span,
.mainside .welcome_box .welcome_head .welcome_title,
.mainside .page .page-inner .page-header .page_title {
    font-size: 21px;
}

/* News list titles: Inter (narrower than Cinzel) so long titles fit the 476px title box; ellipsis only as last resort. */
.mainside .post .post-inner .post-header .post_title a,
.mainside .post .post-inner .post-header .post_title a i {
    font-family: var(--ax-font-body) !important;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* app.css 11px */
.sidebar .sidebox .sidebox_title {
    font-size: 18px;
}

/* The server rows of the status box reuse h4.sidebox_title for the server name and GM list: that is data, not a title. */
.sidebar .sidebox .sidebox_body .sidebox_title,
.sidebar .sidebox .sidebox_body .sidebox_title i {
    font-family: var(--ax-font-body) !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.6;
    text-transform: none;
}

/* 2b. Content text: 15px / 1.65 (app.css welcome_content 11px) */
.mainside .welcome_box .welcome_body .welcome_content,
.mainside .post .post-inner .post-body .post_content,
.sidebar .sidebox .sidebox_body {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ax-text);
}

/* app.css 10px */
#sidebox_status .sidebox_body .realm_holder .realm_row > span {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.6;
}

/* Realm bar: the inner bar is 12px high (34px minus 2 x 11px padding). app.css 8px. */
#sidebox_status .sidebox_body .realm_holder .realm_row.row-2 .r_bar .r_bar-inner .r_bar-fill span {
    font-size: 12px;
    line-height: 12px;
    white-space: nowrap;
}

/* 2c. News list meta: 13px muted; line-height stays 67px (fixed card header). app.css 10px / 8px / 9px. */
.mainside .post .post-inner .post-header .post_author,
.mainside .post .post-inner .post-header .post_date,
.mainside .post .post-inner .post-header .post_comment a {
    font-size: 13px;
    color: var(--ax-text-dim);
}

/* 2d. Menu: Turkish labels, uppercase kept; 14px fits the 73px bar and the 1/3 column width. app.css 12px. */
.header .header-inner .navigation .nav_menu > li > .nav_item span,
.header .header-inner .navigation .nav_menu > li > .nav_item span i {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Dropdown: mixed Turkish / English words ("Warriorlar", "Power Up Store"), so written case. app.css 9px. */
.header .header-inner .navigation .dropdown-holder .dropdown-nav li a {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: none;
}

/* 2e. Sidebar buttons: 15px Inter 600, the theme's own uppercase (Turkish labels). app.css 12px. */
.sidebar .sidebtn a span,
.sidebar .sidebtn a span i {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .03em;
}

.sidebar .coupon_box .coupon_text {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* app.css 10px */
.sidebar .coupon_box .coupon_desc {
    font-size: 12px;
}

/* 2f. Membership bar. The socials text holds the brand name: written case. app.css 8px. */
#membershipbar .membershipbar-inner .membershipbar-socials span,
#membershipbar .membershipbar-inner .membershipbar-socials span i {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
}

.membershipbar .membershipbar-inner .membershipbar-ulinks a,
.membershipbar .membershipbar-inner .membershipbar-welcomemsg span,
.membershipbar .membershipbar-inner .membershipbar-accmenu a {
    font-size: 12px;
    letter-spacing: .03em;
}

/* 2g. Buttons: Inter 600 14px, the theme's uppercase on Turkish labels. app.css 12px. */
.nice_button,
input[type=submit] {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
}

/* 2h. Forms: labels 14px, fields 15px */
.mainside label {
    font-size: 14px;
    font-weight: 500;
}

.mainside input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=button]):not([type=image]),
.mainside select,
.mainside textarea {
    font-size: 15px;
}

/* itemStyle.css is loaded after this file on the guide pages, so "body" adds weight. itemStyle.css 11px. */
body #cform .input input[type=text],
body .input input[type=password],
body .input select,
body .input textarea {
    font-size: 15px;
}

body input#send {
    font-size: 14px;
}

/* 2i. Tables (rankings, guides, store, payment history): 14px, headers 13px 600 uppercase */
body table.rankTable,
body table.rankTable td,
body table.rankTable a,
body table.tablesorter a {
    font-size: 14px;
}

body table.rankTable th,
body table.tablesorter thead tr th,
body table.tablesorter tfoot tr th {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* 2j. Footer: 13px, written case ("Copyright", brand names, "Knight Online"). app.css 10px. */
.footer .footer-feedback a,
.footer .footer-inner .footer-left .footer_nav li .nav_item,
.footer .footer-inner .footer-right .footer_copyright span {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: none;
}

.footer .footer-inner .footer-right .footer_copyright span {
    color: var(--ax-text-dim);
}

/* 2k. Old-theme text under 12px raised to 12px or more (same selector as the old rule; this file loads after it). */
.news_pagi-left span,
.news_pagi-right div#news_pagination a {
    font-size: 13px;
}

#ucp_info td {
    font-size: 13px;
}

.topbar .topbar-inner .topbar-noti .noti_title,
.topbar .topbar-inner .topbar-noti .noti_readmore,
.topbar .topbar-inner .topbar-noti .noti_text p,
.topbar .topbar-inner .topbar-misc .misc_readfaq,
.topbar .topbar-inner .topbar-misc select,
.topbar .topbar-inner .topbar-misc .sbHolder {
    font-size: 12px;
}

.slider_container #slider .fluxslider .surface .caption a {
    font-size: 12px;
}

.countdown .countdown_text span,
.countdown .countdown_timer span i {
    font-size: 12px;
}

.mainside .welcome_box .welcome_head .welcome_htc a {
    font-size: 13px;
}

.mainside .welcome_box .welcome_head .welcome_readmore a {
    font-size: 12px;
}

#sidebox_status .sidebox_body .realmlist {
    font-size: 12px;
}

#sidebox_topvoters .sidebox_body #topvoter .topvoter_desc,
#sidebox_topvoters .sidebox_body #topvoter .topvoter_row .topvoter_col.col_vote,
#sidebox_topvoters .sidebox_body #topvoter .topvoter_row .topvoter_col.col_vote i,
#sidebox_topvoters .sidebox_body #topvoter .topvoter_info {
    font-size: 12px;
}

#sidebox_topvoters .sidebox_body #topvoter .topvoter_row .topvoter_col.col_rank,
#sidebox_topvoters .sidebox_body #topvoter .topvoter_row .topvoter_col.col_name a,
#sidebox_topvoters .sidebox_body #topvoter .topvoter_noresult {
    font-size: 13px;
}

.toppvp_realm .toppvp_select .r_name,
.toppvp_realm .toppvp_data .toppvp_table tbody tr .char-kills {
    font-size: 13px;
}

.toppvp_realm .toppvp_data .toppvp_table tbody tr .char-class,
.toppvp_realm .toppvp_data .toppvp_table tbody tr .char-kills span {
    font-size: 12px;
}

#shoutbox form .shout_characters_remaining,
#shoutbox #the_shouts .shout .shout_date,
.comments form .characters_remaining {
    font-size: 12px;
}

.comments .comments_area .comment {
    font-size: 14px;
}

#teleport #select_character .teleport_realm_divider {
    font-size: 12px;
}

/* UCP info rows are 30px high: 12px fits. */
.ucp_ui .ucp_ui-inner .ui_col .info-table .info-row .info-col.col-2,
.ucp_ui .ucp_ui-inner .ui_col .info-table .info-row .info-col.col-3,
.ucp_ui .ucp_ui-inner .ui_col .info-table .info-row .info-col > *,
.ucp_ui .ucp_ui-inner .ui_col.col_1 .ucp_change_avatar {
    font-size: 12px;
    letter-spacing: .02em;
}

.ucp_btns .ucp_btns-inner .ucp_btn a .ucp_btn-text {
    font-size: 13px;
    letter-spacing: .04em;
}

/* css_default.css and ranktable.css */
.characters_remaining,
.shout_characters_remaining,
#realmlist,
#shoutbox .shout .shout_date,
.toppvp_character,
#premium_container .premium_header {
    font-size: 12px;
}

#shoutbox .shout,
.sidebox_info td,
.status,
.noresults,
#home_rankings li a,
#home_rankings #content {
    font-size: 13px;
}

/* Store boxes have fixed sizes: 12px. ranktable.css and puscss.css 11px. */
.store_product_list .category,
.store_product_list .items .item,
.enes_product_list .category,
.enes_product_list .jaless .jales {
    font-size: 12px;
}

.store_product_list #middle p,
.enes_product_list #middle1 p,
#download_box .download_item,
#forgotpw_container {
    font-size: 14px;
}

/* jquery.modal.css and css_news.css */
#modal-window .modal-box .modal-buttons a.modal-btn.btn-small,
.comment_date {
    font-size: 12px;
}

/* guide_premium.blade.php inline style (loads after this file, so "body" adds weight): 11px and 10px. */
body .premium_container > div > .premium_header,
body .premium_container > .premium_header {
    font-size: 12px;
}

/* userprofile.blade.php: inline style="font-size: 10px" on the character info table; only !important beats it. */
body #Inventory > .left .proper > table {
    font-size: 12px !important;
}

/* 2l. Written case on old-theme uppercase rules that hold brand, server, class or mixed English text
   (lang="tr" makes "i" a dotted capital I). Uppercase stays on the menu, sidebar buttons, buttons and table headers. */
.news_pagi-left span,
#ucp_characters h1,
.online_realm_button,
.topbar .topbar-inner .topbar-noti .noti_title,
.slider_container #slider .fluxslider .surface .caption span,
.countdown .countdown_title span,
.countdown .countdown_title span i,
.countdown .countdown_text span,
.countdown .countdown_timer span i,
.membershipbar .membershipbar-inner .membershipbar-ulinks a,
.membershipbar .membershipbar-inner .membershipbar-welcomemsg span,
.membershipbar .membershipbar-inner .membershipbar-accmenu a,
.mainside .welcome_box .welcome_head .welcome_htc a,
.mainside .welcome_box .welcome_head .welcome_readmore a,
.sidebar .coupon_box .coupon_text,
.sidebar .coupon_box .coupon_desc,
#sidebox_status .sidebox_body .realm_holder .realm_row.row-1 .r_name,
#sidebox_topvoters .sidebox_body #topvoter .topvoter_desc,
#sidebox_topvoters .sidebox_body #topvoter .topvoter_row .topvoter_col,
.toppvp_realm .toppvp_select .r_name,
.toppvp_realm .toppvp_data .toppvp_table tbody tr .char-class,
.toppvp_realm .toppvp_data .toppvp_table tbody tr .char-kills span,
.ucp_ui .ucp_ui-inner .ui_col .info-table .info-row .info-col,
.ucp_ui .ucp_ui-inner .ui_col .info-table .info-row .info-col > *,
.ucp_ui .ucp_ui-inner .ui_col.col_1 .ucp_change_avatar,
.ucp_btns .ucp_btns-inner .ucp_btn a .ucp_btn-text,
.ucp_btns .ucp_btns-inner .ucp_staff_info .ucp_staff_info-inner,
.noresults,
.addon-info h1,
.addon-info .war-links a.download,
body .terms-of-usage h1,
body .terms-of-usage a.agree,
body .terms-of-usage a.dissagree {
    text-transform: none;
}

/* 3a. Sidebar buttons: animated gold conic border on the existing a::after ring, glow on hover (no movement) */
.sidebar .sidebtn {
    transition: box-shadow .25s var(--ax-ease);
}

.sidebar .sidebtn a::after {
    --ax-angle: 0deg;
    border: 0;
    padding: 2px;
    pointer-events: none;
    background:
        conic-gradient(from var(--ax-angle), transparent 0 58%, var(--ax-gold) 72%, var(--ax-gold-hi) 78%, var(--ax-gold) 84%, transparent 96%),
        linear-gradient(#42413e, #42413e);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: ax-spin 7s linear infinite;
}

.sidebar .sidebtn a:hover::after,
.sidebar .sidebtn a:focus-visible::after {
    animation-duration: 2.4s;
}

.sidebar .sidebtn:hover,
.sidebar .sidebtn:focus-within {
    box-shadow: 0 0 16px 0 rgb(0 0 0 / .4), 0 0 18px 0 rgb(226 180 95 / .4);
}

.sidebar .sidebtn a:hover span {
    color: #f1e9df;
}

@keyframes ax-spin {
    to { --ax-angle: 360deg; }
}

/* 3b. Download button: soft pulsing glow */
.sidebar .sidebtn:has(> a[download]) {
    animation: ax-pulse 2.8s ease-in-out infinite;
}

@keyframes ax-pulse {
    0%, 100% { box-shadow: 0 0 16px 0 rgb(0 0 0 / .4), 0 0 0 0 rgb(226 180 95 / 0); }
    50% { box-shadow: 0 0 16px 0 rgb(0 0 0 / .4), 0 0 22px 2px rgb(226 180 95 / .45); }
}

/* 3c. News list items as cards (width unchanged: only radius, background, spacing and shadow) */
.mainside .post {
    margin-bottom: 12px;
    border-radius: var(--ax-radius);
    overflow: clip;
    background: linear-gradient(180deg, rgb(255 255 255 / .035), transparent 60%), var(--ax-surface-1);
    -webkit-backdrop-filter: blur(6px) saturate(1.15);
    backdrop-filter: blur(6px) saturate(1.15);
    box-shadow: inset 0 0 0 1px var(--ax-line), var(--ax-shadow-1);
    transition: box-shadow .25s var(--ax-ease);
}

.mainside .post:hover,
.mainside .post:focus-within {
    box-shadow: inset 0 0 0 1px var(--ax-gold-soft), inset 3px 0 0 0 var(--ax-gold), var(--ax-shadow-2);
}

.mainside .post .post-inner .post-header .post_title a img {
    border-radius: var(--ax-radius-sm);
    vertical-align: middle;
}

.mainside .post .post-inner .post-header .post_title a:hover i {
    color: var(--ax-gold-hi);
}

/* Buttons: rounded, gold on hover */
.nice_button,
input[type=submit] {
    border-radius: var(--ax-radius-sm);
    transition: color .2s ease, box-shadow .2s ease;
}

.nice_button:hover,
input[type=submit]:hover {
    color: var(--ax-gold);
    box-shadow: inset 0 0 0 1px var(--ax-gold-soft), 0 2px 0 0 #0a0a0a, 0 0 12px 0 rgb(226 180 95 / .25);
}

/* Sidebar boxes: soft rounded corners */
.sidebar .sidebox {
    border-radius: var(--ax-radius-sm);
}

/* 3d. Scroll-driven entry of news cards and sidebar boxes: opacity fade only */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .mainside .post,
        .sidebar .sidebox {
            animation: ax-fade linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 30%;
        }
    }
}

@keyframes ax-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 3e. Ember shimmer behind the header (pure CSS; .header is a z-index 8 stacking context, so -1 stays inside it) */
.header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .3;
    background:
        radial-gradient(38% 140% at 18% 110%, rgb(255 128 40 / .55), transparent 70%),
        radial-gradient(30% 120% at 78% 115%, rgb(226 180 95 / .5), transparent 70%),
        radial-gradient(22% 90% at 50% 130%, rgb(200 60 20 / .5), transparent 70%),
        radial-gradient(12% 60% at 34% 100%, rgb(255 200 120 / .35), transparent 70%);
    background-size: 200% 100%, 180% 100%, 160% 100%, 220% 100%;
    background-repeat: no-repeat;
    animation: ax-ember 16s ease-in-out infinite alternate;
}

@keyframes ax-ember {
    0% { background-position: 0% 0, 100% 0, 50% 0, 20% 0; opacity: .22; }
    50% { opacity: .36; }
    100% { background-position: 100% 0, 0% 0, 30% 0, 80% 0; opacity: .26; }
}

/* 4. Cross-document view transitions: short cross-fade */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: ease;
}

/* 5. Top banner link: full-width image, no gap, hidden on small screens */
.ax-topbar {
    display: block;
    line-height: 0;
}

.ax-topbar img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767.98px) {
    .ax-topbar {
        display: none;
    }
}

/* 5. Language menu: pill button with flag and code (the code is printed upper case by the template) */
.ax-lang {
    display: inline-flex;
    align-items: center;
    height: 100%;
    vertical-align: top;
}

.ax-lang__btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--ax-gold-soft);
    border-radius: var(--ax-radius-pill);
    background: var(--ax-surface-1);
    color: var(--ax-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .04em;
    cursor: pointer;
    anchor-name: --ax-lang;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.ax-lang__btn:hover {
    border-color: var(--ax-gold);
    color: var(--ax-gold-hi);
}

.ax-lang__btn img,
.ax-lang__item img {
    flex: none;
    width: 18px;
    height: auto;
    border-radius: 2px;
}

/* 5. Language list: popover panel. app.css "* { position: relative; margin: 0 }" overrides the UA popover style, so set fixed position here. */
.ax-lang__menu[popover] {
    position: fixed;
    inset: auto;
    top: 40px;
    right: max(12px, calc((100vw - 1118px) / 2 + 19px));
    min-width: 170px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--ax-gold-soft);
    border-radius: var(--ax-radius);
    background: var(--ax-surface-2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: var(--ax-shadow-2);
    color: var(--ax-text);
    opacity: 0;
    transition: opacity .18s ease, overlay .18s allow-discrete, display .18s allow-discrete;
}

@supports (anchor-name: --a) {
    .ax-lang__menu[popover] {
        position-anchor: --ax-lang;
        top: anchor(bottom);
        right: anchor(right);
        margin-top: 6px;
    }
}

.ax-lang__menu[popover]:popover-open {
    opacity: 1;
}

@starting-style {
    .ax-lang__menu[popover]:popover-open {
        opacity: 0;
    }
}

.ax-lang__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--ax-radius-sm);
    color: var(--ax-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    transition: background-color .15s ease, color .15s ease;
}

.ax-lang__item:hover,
.ax-lang__item:focus-visible {
    background: var(--ax-gold-faint);
    color: var(--ax-gold-hi);
}

/* 5. Discord button: same box as .sidebtn (full width, 55px, 16px gap below). Written case: "Discord" must not become "DİSCORD". */
.ax-discord {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 55px;
    margin: 0 0 16px;
    border-radius: var(--ax-radius-sm);
    background: var(--ax-discord);
    box-shadow: 0 0 16px 0 rgb(0 0 0 / .4), inset 0 -3px 0 0 rgb(0 0 0 / .25);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background-color .2s ease, box-shadow .25s var(--ax-ease);
}

.sidebar .sidebtn.ax-discord a span,
.sidebar .sidebtn.ax-discord a span i {
    text-transform: none;
}

.ax-discord svg,
.ax-discord img {
    flex: none;
    width: 24px;
    height: 24px;
}

.ax-discord:hover,
.ax-discord:focus-visible {
    background: var(--ax-discord-hi);
    color: #fff;
    box-shadow: 0 0 16px 0 rgb(0 0 0 / .4), 0 0 18px 0 rgb(88 101 242 / .55);
}

/* 6. Focus: visible gold outline (beats app.css "*:focus { outline: none }" by specificity) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ax-gold);
    outline-offset: 2px;
}

/* 6. Smooth scrolling only when motion is allowed */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Reduced motion: every animation and transition off */
@media (prefers-reduced-motion: reduce) {
    .header::before,
    .sidebar .sidebtn a::after,
    .sidebar .sidebtn:has(> a[download]),
    .mainside .post,
    .sidebar .sidebox {
        animation: none;
    }

    .sidebar .sidebtn,
    .mainside .post,
    .nice_button,
    input[type=submit],
    .ax-lang__btn,
    .ax-lang__menu[popover],
    .ax-lang__item,
    .ax-discord {
        transition: none;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none;
    }
}