.character-skills-mobile { display: none; }
.mobile-table-scroll { max-width: 100%; overflow-x: auto; }

@media (min-width: 761px) {
    body[data-page="account/manage"] .legacy-content td { overflow-wrap: break-word; word-break: normal; }
    body[data-page="account/manage"] .legacy-content .button { white-space: nowrap; min-width: 130px; width: max-content; max-width: none; min-height: 44px; }
    body[data-page="account/manage"] .account-status-table > tbody > tr > td:last-child { min-width: 170px; text-align: right; }
    body[data-page="account/manage"] .account-status-table .BigBoldText span { color: var(--gold-light) !important; }
    body[data-page="account/manage"] .mobile-key-values > tbody > tr > td:first-child { min-width: 190px; width: 22%; }
    body[data-page="account/manage"] .mobile-key-values > tbody > tr > td:last-child { width: auto; }
    body[data-page="account/manage"] .account-character-row > td:first-child { min-width: 38px; white-space: nowrap; }
    body[data-page="account/manage"] .account-character-row span { line-height: 1.6 !important; white-space: normal !important; }
    body[data-page="account/manage"] [id^="CharacterOptionsOf_"] { display: block !important; white-space: nowrap; }
    body[data-page="account/manage"] [id^="CharacterOptionsOf_"] > span { white-space: nowrap !important; }
    body[data-page="account/manage"] .account-character-row > td:last-child { min-width: 100px; }
    body[data-page="account/manage"] .TableContainer:has(.account-character-table) { overflow: visible; }
    body[data-page="account/manage"] span[style*="color: green"] { color: #87d89b !important; }
    body[data-page="account/manage"] span[style*="color: red"] { color: #ff9292 !important; }
    body[data-page="account/manage"] [id^="CharacterOptionsOf_"] a { padding: 8px; display: inline-block; }
    body[data-page="account/manage"] .InnerTableButtonRow td { padding: 10px; }
    body[data-page="account/manage"] .legacy-content div:has(> #DowloadBox) { height: auto !important; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    body[data-page="account/manage"] #DowloadBox { float: none !important; order: 2; }
    body[data-page="account/manage"] #DowloadBox > a:has(img) { display: none; }
    body[data-page="account/manage"] #DowloadBox > br { display: none; }
    body[data-page="account/manage"] #DowloadBox > a:last-child { position: static !important; display: inline-flex; padding: 12px 24px; border: 1px solid var(--line); border-radius: 3px; white-space: nowrap; }
    body[data-page="account/manage"] #DowloadBox + span { position: static !important; }
}

@media (max-width: 760px) {
    .container { width: calc(100% - 32px); }
    .inner-heading h1 { font-size: clamp(1.8rem, 7.5vw, 2.4rem); overflow-wrap: break-word; }
    .breadcrumbs { flex-wrap: wrap; font-size: .85rem; }
    .legacy-content { min-width: 0; padding: 12px; font-size: 1rem; }
    .legacy-content td, .legacy-content th { overflow-wrap: break-word; word-break: normal; }
    .legacy-content .TableContainer { min-width: 0; max-width: 100%; }
    .legacy-content .InnerTableContainer { padding: 10px; }
    .legacy-content .TableContentContainer { min-width: 0; max-width: 100%; }
    .legacy-content .mobile-layout-table > tbody > tr > td { padding: 0; }
    .legacy-content .mobile-layout-table { table-layout: fixed; width: 100%; }
    .legacy-content .CaptionContainer { padding: 14px 12px; }
    .legacy-content .CaptionContainer .Text { font-size: 1.05rem; line-height: 1.4; }
    .legacy-content .TableContainer:has(> .BigToggleButton) { position: relative; }
    .legacy-content .TableContainer:has(> .BigToggleButton) > .CaptionContainer { padding-right: 60px; }
    .legacy-content .BigToggleButton { position: absolute; top: 4px !important; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; z-index: 1; }
    .legacy-content .BigToggleButton > div { position: static !important; }
    .legacy-tooltip { position: fixed !important; left: 16px !important; right: auto !important; top: auto !important; bottom: 16px; max-width: calc(100% - 32px); }
    .legacy-content #FragsCollapseContainer .TableContent,
    .legacy-content #FragsCollapseContainer .TableContent > tbody,
    .legacy-content #FragsCollapseContainer .TableContent > tbody > tr,
    .legacy-content #FragsCollapseContainer .TableContent > tbody > tr > td { display: block; width: 100% !important; min-width: 0; }
    .legacy-content #FragsCollapseContainer .input_clipboard,
    .legacy-content #FragsCollapseContainer .btn_clipboard { width: 100%; }
    .legacy-content input:not([type]), .legacy-content input[type=text],
    .legacy-content input[type=email], .legacy-content input[type=password],
    .legacy-content input[type=number], .legacy-content select, .legacy-content textarea {
        max-width: 100%; min-width: 0; font-size: 16px; min-height: 44px;
    }
    .legacy-content input:not([type]) { width: 100% !important; }
    .legacy-content .button, .legacy-content button, .legacy-content input[type=submit] {
        min-height: 44px; max-width: 100%; font-size: 1rem; word-break: normal; overflow-wrap: normal;
    }
    .legacy-content .mobile-key-values, .legacy-content .mobile-key-values > tbody,
    .legacy-content .mobile-key-values > tbody > tr,
    .legacy-content .mobile-key-values > tbody > tr > td {
        display: block; width: 100% !important; max-width: 100%; min-width: 0; text-align: left !important;
    }
    .legacy-content .mobile-key-values > tbody > tr { padding: 12px; border-bottom: 1px solid var(--line); }
    .legacy-content .mobile-key-values > tbody > tr > td { padding: 0; border: 0 !important; }
    .legacy-content .mobile-key-values > tbody > tr > td:first-child { color: #aebfce; font-size: .875rem; margin-bottom: 5px; }
    .legacy-content .mobile-key-values > tbody > tr > td:last-child { color: var(--ivory); font-size: 1rem; overflow-wrap: anywhere; }
    .legacy-content span[style*="color: green"], .legacy-content font[color="green"] { color: #87d89b !important; }
    .legacy-content span[style*="color: red"], .legacy-content font[color="red"] { color: #ff9292 !important; }
    .legacy-content .mobile-key-values .progress { margin-top: 10px; }
    .legacy-content .character-detail-layout, .legacy-content .character-detail-layout > tbody,
    .legacy-content .character-detail-layout > tbody > tr,
    .legacy-content .character-detail-layout > tbody > tr > td {
        display: block; width: 100% !important; min-width: 0; max-width: 100%;
    }
    .legacy-content .character-detail-layout > tbody > tr > td:first-child .TableContent { width: 100%; }
    .legacy-content .character-detail-layout table[width="100"] { width: 180px; margin-inline: auto; }
    .legacy-content .character-detail-layout table[width="100"] td { padding: 5px; }
    .legacy-content .character-detail-layout table[width="100"] td[style*="font-size"] { font-size: .8rem !important; white-space: nowrap; }
    .legacy-content .character-skills-table { display: none; }
    .character-skills-mobile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
    .character-skills-mobile > div { padding: 12px 6px; text-align: center; background: #132b3d; border: 1px solid var(--line); border-radius: 4px; }
    .character-skills-mobile dt { color: #b8c9d8; font-size: .85rem; }
    .character-skills-mobile dd { margin: 4px 0 0; color: var(--gold-light); font-size: 1.25rem; font-weight: 600; }
    .legacy-content .account-status-table, .legacy-content .account-status-table > tbody,
    .legacy-content .account-status-table > tbody > tr,
    .legacy-content .account-status-table > tbody > tr > td {
        display: block; width: 100% !important; min-width: 0; text-align: left;
    }
    .legacy-content .account-status-table > tbody > tr > td:has(.AccountStatusImage) { display: none; }
    .legacy-content .account-status-table .BigBoldText { font-size: 1.25rem !important; color: var(--gold-light); }
    .legacy-content .account-status-table .BigBoldText span { color: var(--gold-light) !important; }
    body[data-page="account/manage"] .legacy-content .Message table,
    body[data-page="account/manage"] .legacy-content .Message tbody,
    body[data-page="account/manage"] .legacy-content .Message tr,
    body[data-page="account/manage"] .legacy-content .Message td { display: block; width: 100% !important; }
    body[data-page="account/manage"] .legacy-content .Message .button { width: 100%; }
    body[data-page="account/manage"] .legacy-content div:has(> #DowloadBox) { height: auto !important; }
    body[data-page="account/manage"] .legacy-content #DowloadBox { float: none !important; margin-bottom: 20px; }
    body[data-page="account/manage"] .legacy-content #DowloadBox + span { position: static !important; }
    .legacy-content .account-status-table form, .legacy-content .account-status-table .button { width: 100%; }
    .legacy-content .premiumbenefits { display: block; }
    .legacy-content .premiumbenefits > div { display: flex; justify-content: flex-start !important; align-items: center; gap: 12px; margin: 12px 0; }
    .legacy-content .premiumbenefits > div > div { flex: 1; min-width: 0; font-size: .95rem; }
    .legacy-content .premiumbenefits img { flex: 0 0 32px; width: 32px; height: 32px; }
    .legacy-content .InnerTableButtonRow, .legacy-content .InnerTableButtonRow > tbody,
    .legacy-content .InnerTableButtonRow > tbody > tr,
    .legacy-content .InnerTableButtonRow > tbody > tr > td {
        display: block; width: 100% !important; min-width: 0; max-width: 100%;
    }
    .legacy-content .InnerTableButtonRow > tbody > tr > td { padding: 6px 0; }
    .legacy-content .InnerTableButtonRow td[width="100%"]:empty { display: none; }
    .legacy-content .InnerTableButtonRow form, .legacy-content .InnerTableButtonRow .button { width: 100%; margin: 0; }
    .legacy-content .account-character-table, .legacy-content .account-character-table > tbody { display: block; width: 100%; }
    .legacy-content .account-character-table .LabelH { display: none; }
    .legacy-content .account-character-row { display: block; height: auto !important; padding: 16px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 4px; }
    .legacy-content .account-character-row > td { display: block; min-width: 100%; max-width: 100%; width: 100% !important; padding: 5px 0; }
    .legacy-content .account-character-row > td:first-child { display: none; }
    .legacy-content .account-character-row span { white-space: normal !important; line-height: 1.55 !important; }
    .legacy-content .account-character-row small { font-size: .9rem; }
    .legacy-content [id^="CharacterOptionsOf_"] { display: flex !important; flex-wrap: wrap; gap: 8px; align-items: center; }
    .legacy-content [id^="CharacterOptionsOf_"] a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; border: 1px solid var(--line); border-radius: 3px; }
    .legacy-content .account-information-layout, .legacy-content .account-information-layout > tbody,
    .legacy-content .account-information-layout > tbody > tr,
    .legacy-content .account-information-layout > tbody > tr > td { display: block; width: 100% !important; max-width: 100%; }
    .legacy-content .account-information-layout form, .legacy-content .account-information-layout .button { width: 100%; }
    .legacy-content .support-box-content { overflow: visible; }
    .mobile-table-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
    .mobile-table-scroll > table { min-width: 480px; }
    .wiki-section p, .wiki-spoiler-content p, .wiki-steps, .news-body { font-size: 1rem; line-height: 1.8; }
    .wiki-search input[type=search], .wiki-filters select { font-size: 16px; }
    .wiki-card-body > p:not(.wiki-card-meta), .wiki-card-meta, .wiki-card-link { font-size: .95rem; }
    .wiki-table { font-size: .95rem; }
    .wiki-table th { font-size: .8rem; }
    .wiki-table td, .wiki-table th { min-width: 110px; }
    .news-navigation { gap: 8px 20px; }
    .news-navigation a { font-size: .95rem; min-height: 40px; display: inline-flex; align-items: center; }
    .update-bar > .container { align-items: flex-start; padding-block: 10px; }
    .update-bar p { font-size: .85rem; white-space: normal; line-height: 1.5; }
    .update-bar .update-label { padding-top: 4px; }
}

@media (max-width: 380px) {
    .legacy-content { padding: 8px; }
    .legacy-content .InnerTableContainer { padding: 8px; }
    .header-inner { gap: 8px; }
    .brand, .brand img { width: 96px; }
}