/* Responsive layout layered over the original desktop skin. */
body .video-bg {
 background: radial-gradient(ellipse at 18% 12%, rgba(54,83,121,.38), transparent 60%), radial-gradient(ellipse at 94% 68%, rgba(68,51,94,.28), transparent 58%), linear-gradient(145deg, #111d2d 0%, #080d16 62%, #151c2c 100%);
}
@media (width < 800px), (hover: none) and (pointer: coarse) {
 body { background-color: #0a101b; }
 body .video-bg video, body .video-overlay { display: none; }
}
.site-navigation > summary, .mobile-shortcuts { display: none; }
.community-links { display: contents; }
.mobile-panel { width: 100%; }
.mobile-panel > summary { list-style: none; cursor: default; }
.mobile-panel > summary::-webkit-details-marker { display: none; }
.mobile-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.mobile-table-scroll:focus-visible { outline: 2px solid #b3ff50; outline-offset: 3px; }
@media (min-width: 901px) {
 .bg-nav > .main-width { width: calc(100% - 48px); max-width: 1440px; box-sizing: border-box; }
 .bg-nav .header-nav { justify-content: center; gap: clamp(4px,1vw,20px) !important; }
 .bg-nav .header-nav li a { font-size: clamp(18px,1.3vw,25px) !important; padding: 10px 12px !important; }
}
/* Keep decorations clear of the content before the desktop gutters disappear. */
@media (max-width: 1799px) {
 .community-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; max-width: 960px; margin: 28px auto; padding: 16px; }
 body .community-links > a { position: static; transform: none; filter: none; z-index: auto; min-height: 44px; display: flex; align-items: center; justify-content: center; }
 .community-links img { width: auto; max-width: 130px; max-height: 64px; height: auto; }
}
@media (min-width: 901px) and (max-width: 1390px) {
 body .main-width, body .main > .main-width { width: calc(100% - 40px); max-width: 1340px; padding: 0; box-sizing: border-box; }
 body .main > .main-width { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 20px; align-items: start; }
 .main > .main-width > .sidebar { width: 100% !important; margin: 0 !important; float: none !important; min-width: 0; }
 .main > .main-width > .content { width: 100% !important; margin: 0; grid-column: 2; grid-row: 1 / span 2; }
 .main > .main-width > .sidebar-account { grid-column: 1; }
 .bg-nav .header-nav { gap: 4px !important; flex-wrap: wrap !important; justify-content: center; }
 .bg-nav .header-nav li { flex: 0 1 auto; }
 .bg-nav .header-nav li a { font-size: 20px !important; padding: 12px !important; }
 .main .quick-nav { flex-wrap: wrap !important; gap: 8px; }
 .main .quick-nav a.quick-card { padding: 12px 10px; gap: 6px; }
 .main .quick-card__text strong { font-size: 16px; }
 .quick-card__arrow { display: none; }
}
@media (max-width: 900px) {
 html { height: auto !important; min-height: 100%; overflow-x: visible !important; }
 body { height: auto !important; min-height: 100dvh; overflow: visible !important; -webkit-text-size-adjust: 100%; }
 html.evo-rules-open, body.video-popup-open, body:has(#evo-login:target:not(.is-dismissed)), body:has(#select_server[style*="display: block"]) { overflow: hidden !important; }
 .site-wrapper { min-width: 0; }
 body .main-width, body .main > .main-width { width: calc(100% - 24px); max-width: 720px; padding: 0; box-sizing: border-box; margin-left: auto; margin-right: auto; }
 body .main > .main-width { display: flex; flex-direction: column; gap: 12px; }
 .main > .main-width > :is(.content,.sidebar) { flex: none; width: 100% !important; max-width: 100%; min-width: 0; float: none !important; margin: 0 !important; box-sizing: border-box; }
 .main > .main-width > .content { order: 0; }
 .main > .main-width > .sidebar-account { order: 1; }
 .main > .main-width > .sidebar-worlds { order: 2; }
 .main > .main-width > :is(.clear,.clearfix) { display: none; }
 .main .sidebar > :is(.information,.control-panel) { margin: 0 0 12px; width: 100%; box-sizing: border-box; scroll-margin-top: 72px; }
 .main .sidebar .heading { font-size: 21px; }
 .mobile-panel > summary.heading { display: flex; justify-content: center; align-items: center; gap: 8px; cursor: pointer; min-height: 56px; padding: 12px 16px; height: auto; box-sizing: border-box; }
 .mobile-panel > summary.heading::after { content: '+'; margin-left: auto; font: 24px/1 sans-serif; color: #a7b8d3; }
 .mobile-panel[open] > summary.heading::after { content: '−'; }
 .mobile-panel > summary.heading #ServerTime { margin-right: auto; }
 .mobile-panel:not([open]) > summary.heading { border-bottom: 0; }
 .mobile-panel-body { padding-bottom: 12px; }
 .mobile-panel .left-block { width: auto; }
 .main .status .server .name a { display: flex; align-items: center; justify-content: center; min-height: 44px; }
 .main .sidebar .server { max-width: 340px; margin-left: auto; margin-right: auto; }
 .main .sidebar #events { padding: 16px 20px; }
 .main .sidebar #events > div { display: flex; justify-content: space-between; gap: 12px; min-height: 32px; }
 .main .sidebar #events small { white-space: nowrap; }
 .mobile-shortcuts { position: sticky; top: 0; z-index: 100; display: flex; gap: 6px; width: calc(100% - 24px); max-width: 720px; margin: 0 auto 12px; padding: 8px 0; background: rgba(9,14,22,.96); box-sizing: border-box; border: 1px solid #303b50; }
 .mobile-shortcuts a { display: flex; flex: 1; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 0 8px; color: #d4dfef; text-align: center; border-right: 1px solid #303b50; font-size: 14px; }
 .mobile-shortcuts a:last-child { border: 0; }
 .mobile-shortcuts a.mobile-return { flex: 0 0 44px; padding: 0; font-size: 22px; }
 .mobile-shortcuts a[hidden] { display: none; }
 .bg-nav { position: relative; height: auto !important; margin: 12px 0 0; animation: none !important; visibility: visible !important; }
 .site-navigation > summary { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 16px; color: #dbe4f3; font-size: 18px; background: rgba(13,18,28,.94); border: 1px solid #354057; cursor: pointer; list-style: none; }
 .site-navigation > summary::-webkit-details-marker { display: none; }
 .site-navigation > summary::after { content: '+'; }
 .site-navigation[open] > summary::after { content: '−'; }
 .bg-nav .header-nav { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; padding: 8px; margin: 0; gap: 4px !important; box-sizing: border-box; background: rgba(11,16,25,.97); }
 .site-navigation:not([open]) > .header-nav { display: none !important; }
 .language-picker summary { min-height: 44px; height: 44px !important; }
 .language-picker .language-picker__menu { top: 50px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: min(340px,calc(100vw - 24px)); max-width: calc(100vw - 24px); padding: 8px; gap: 6px; background: #0e1521; border: 1px solid #354057; overflow: visible; }
 .language-picker .language-picker__item { min-width: 0; min-height: 44px; height: auto; font-size: 13px; padding: 8px 6px !important; }
 .bg-nav .header-nav li { width: auto; min-width: 0; margin: 0; text-align: left; }
 .bg-nav .header-nav li a { display: flex; align-items: center; min-height: 48px; padding: 10px 12px !important; font-size: 18px !important; box-sizing: border-box; white-space: normal; }
 body .bg-nav .header-nav li a:hover { transform: none; animation: none; }
 .logo-container { margin: 18px auto 8px !important; padding: 0 24px; max-width: 480px; }
 .logo-container img { width: 100%; max-height: 210px; object-fit: contain; }
 .hero-online { margin: 0 auto 20px !important; padding: 0 12px; gap: 8px; flex-wrap: wrap; }
 .hero-online > span { font-size: clamp(21px,5vw,30px); }
 .hero-online > strong { font-size: clamp(30px,7vw,42px); }
 .main .quick-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 0 0 16px; }
 .main .quick-nav a.quick-card { display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 86px; padding: 12px 6px; gap: 6px; margin: 0; }
 .main .quick-card__text strong { font-size: 15px; letter-spacing: 0; overflow-wrap: anywhere; }
 .main .quick-card__text small, .main .quick-card__arrow { display: none; }
 .quick-card__icon { flex-basis: auto; height: 24px; }
 .quick-card__icon svg { width: 25px; height: 25px; }
 .main #content { width: 100%; min-width: 0; margin: 0; box-sizing: border-box; scroll-margin-top: 76px; }
 .main #content :is(#box1,.entry,.rankings,.ranking-card,.tool-card) { min-width: 0; max-width: 100%; box-sizing: border-box; }
 .main #box1 > .box-style1:not(.download-card) { padding: 0 16px 20px; }
 .main #content .form { width: 100%; max-width: 100%; box-sizing: border-box; }
 .main #content .form :is(.lcol,.rcol) { display: block; width: 100%; text-align: left; margin: 0 0 8px; }
 .main #content .form form > table, .main #content .form form > table > tbody { display: block; width: 100%; }
 .main #content .form form > table > tbody > tr { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; margin: 0 0 16px; }
 .main #content .form form > table > tbody > tr > td { width: auto !important; padding: 0; text-align: left; }
 .main #content .form :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { display: block; width: 100%; max-width: 100%; box-sizing: border-box; padding: 12px; color: #e0e7f2; background: #0a0e16; border: 1px solid #374158; border-radius: 0; }
 .main #content .wh_items { float: none !important; margin: 12px auto; }
 #item_filter { width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box; left: 50% !important; margin-left: 0 !important; transform: translateX(-50%); }
 .main :is(.download-card,.ncontent) { padding: 20px 16px; box-sizing: border-box; }
 .main .title1 h1 { font-size: 30px; }
 .main .title1 { height: auto; padding: 18px 12px; }
 .main .registration-card, .main .account-tool-page .tool-card { margin: 0 12px 16px !important; }
 .main .g-recaptcha { transform: scale(var(--captcha-scale,1)); transform-origin: left top; }
 .QapTcha .slider { touch-action: none; }
 .QapTcha .slider::before { content: ''; position: absolute; inset: -7px; }
 .main :is(.profile-sections,.server-sections,.account-sections) { margin-left: 12px; margin-right: 12px; }
 .main .tabrow { gap: 6px; flex-wrap: wrap; padding: 0; height: auto; }
 .main .tabrow a, .main .custom_button { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 10px 12px; }
 .main .ranking-filters { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: flex-start; overflow-x: auto; padding: 4px 0 10px; overscroll-behavior-x: contain; }
 .main .ranking-filters .custom_button { margin: 0; flex: 0 0 auto; white-space: nowrap; }
 .main :is(.mobile-table-scroll,.tool-table-scroll,.server-guilds-table)[data-overflow="true"]::before { content: attr(aria-label) ' ↔'; position: sticky; left: 0; display: block; width: fit-content; padding: 8px 0; color: #a6b7cf; font-size: 12px; }
 .main :is(#ranking_content,.mobile-table-scroll,.tool-table-scroll,.server-guilds-table) { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
 .main :is(.ranking-results,.mobile-table-scroll) > table:not(.vip-benefits) { min-width: 540px; }
 .main .server-stats-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .main .server-stats-tabs a { padding: 12px; min-height: 44px; box-sizing: border-box; }
 .main :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea), #evo-login input, #select_server select { max-width: 100%; min-height: 46px; font-size: 16px !important; }
 .main :is(button,.tool-button,.button-style,.registration-submit,.account-switch,.account-menu a,.sidebar-server-button,.server-rules-action a,.release-weather button), .site-dialog .dialog-close, .sidebar-slide-toggle { min-height: 44px; }
 .site-dialog .dialog-close { min-width: 44px; top: 8px; right: 8px; }
 .evo-rules-dialog .evo-rules-x { width: 44px; height: 44px; flex-shrink: 0; }
 .main .account-tool-page form > table > tbody > tr { grid-template-columns: minmax(0,1fr); gap: 8px; }
 .main .account-tool-page .tool-button { min-width: 0; white-space: normal; }
 .main .account-tool-page #sell_character { grid-template-columns: minmax(0,1fr); }
 .main .account-tool-page .tool-subcard { padding: 16px 12px; }
 .main .account-tool-page .tool-character-details { grid-template-columns: minmax(0,1fr); }
 .main .vip-plan { grid-template-columns: minmax(0,1fr) 64px; padding: 16px 12px; gap: 14px; }
 .main .vip-plan .tool-button { grid-column: 1 / -1; width: 100%; }
 .main .vip-plan__info h3 { font-size: 21px; }
 .main .account-tool-page #vote-options .vote-card { grid-template-columns: 76px minmax(0,1fr); gap: 12px; padding: 14px 12px; }
 .main .vote-card__logo { width: 76px; }
 .main .vote-card__action { grid-column: 1 / -1; }
 .main .support-page .cleditorMain { width: 100% !important; }
 .main .support-page .cleditorMain iframe { width: 100% !important; }
 .main .support-page .cleditorToolbar { height: auto !important; min-height: 54px; }
 .main .support-page .cleditorGroup { height: 28px; }
 .main .support-page .cleditorButton { width: 28px; height: 28px; background-position-y: 5px; }
 .main .support-page .support-attachment input { white-space: normal; height: auto; }
 .main .support-attachment input::file-selector-button { max-width: 100%; min-height: 44px; }
 .main .news-article { padding: 22px 14px; }
 .main .release-hero { padding: 28px 20px 106px; }
 .main .release-weather { flex-wrap: wrap; }
 .main .release-weather > div { flex-wrap: wrap; }
 .main .release-weather button { min-width: 44px; min-height: 44px; }
 .main :is(.release-cta,.release-reveal summary) { min-height: 44px; }
 #evo-login { padding: 12px; }
 #evo-login .loginnow { padding: 24px 20px; max-height: calc(100dvh - 24px); }
 #streamPopup .sp-box { width: calc(100% - 24px); max-width: 720px; margin: 12px auto; padding: 12px; box-sizing: border-box; max-height: calc(100dvh - 24px); overflow-y: auto; }
 #streamPopup .sp-tabs { flex-wrap: wrap; padding-right: 32px; }
 #streamPopup .sp-tabs button { min-height: 44px; padding: 8px 10px; font-size: 14px; }
 #streamPopup .sp-content { height: auto; aspect-ratio: 16 / 9; }
 #streamPopup iframe { width: 100%; height: 100%; }
 #streamPopup .sp-close { min-width: 44px; min-height: 44px; }
 body .community-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: calc(100% - 24px); max-width: 720px; padding: 16px 8px; box-sizing: border-box; gap: 16px 8px; border-top: 1px solid #303b50; }
 .community-links img { max-width: 100%; max-height: 52px; object-fit: contain; }
 .site-wrapper .footer, .site-wrapper footer { width: 100%; box-sizing: border-box; }
 .main :is(.wow,.animated) { visibility: visible !important; animation: none !important; }
 .main :is(.control-panel,.information,.download-card,.ncontent) { animation: none; }
 .main :is(.control-panel,.information,.download-card,.ncontent)::after { animation: none; opacity: .12; }
}
@media (max-width: 540px) {
 .registration-fields, .main .account-page #ucp_info.account-details, .main .account-page #character-info.account-actions { grid-template-columns: minmax(0,1fr); }
 .main .profile-details > div, .main .equipment-row { grid-template-columns: minmax(0,1fr); gap: 6px; }
 .main .equipment-row dd { gap: 8px; }
 .main .ranking-search__controls { flex-wrap: wrap; }
 .main .ranking-search__controls input { flex-basis: 100%; width: 100%; }
 .main .ranking-search__controls button { width: 100%; }
 .main .support-ticket-meta { grid-template-columns: minmax(0,1fr); }
 .main .download-card__header { flex-wrap: wrap; gap: 12px; }
 .main .vip-package-metrics > div { padding: 14px 10px; }
 .main .vip-benefits :is(td,th) { padding: 12px 4px; }
 .main .account-tool-page .tool-back { margin: 16px 12px; }
 .main .news-article h1 { font-size: 28px; }
 .main .release-hero { padding: 24px 16px 124px; }
 .main .release-hero h2 { font-size: 36px; }
}
@media (hover: none) and (pointer: coarse) {
 .logo-container img:hover { animation: none !important; transform: none; }
 .main a:hover, .main button:hover { transform: none; }
}