/*
 * M10-v4 — Public / Player UI/UX & responsive optimization.
 * Legacy-safe CSS for Chromium/Coowon: no Grid, Flexbox dependency, CSS variables, or gap.
 */

html,
body { max-width: 100%; overflow-x: hidden; }

/* Shared tap/focus treatment. */
.player-nav-toggle,
.public-header a,
.site-header a,
.public-header button,
.site-header button,
.page-account .button,
.page-shop .button,
.auth-card .button,
.server-dialog button,
.server-dialog a { -webkit-tap-highlight-color: rgba(224,164,77,.22); }

.player-nav-toggle { display: none; }

.public-header a:focus,
.public-header button:focus,
.site-header a:focus,
.site-header button:focus,
.page-account input:focus,
.page-account select:focus,
.page-shop input:focus,
.page-shop select:focus,
.auth-card input:focus,
.server-dialog input:focus,
.server-dialog button:focus,
.server-dialog a:focus {
    outline: 2px solid #e0a44d;
    outline-offset: 2px;
}

/* HOME / PUBLIC — allow long labels and names to wrap instead of forcing horizontal width. */
.public-nav,
.account-nav,
.dock-server-name,
.footer-links,
.guide-link-column,
.community-action { white-space: normal; }
.dock-server-name,
.footer-copy,
.guide-directory,
.community-frame { overflow-wrap: break-word; word-wrap: break-word; }

/* PLAYER CENTER — keep cards and forms inside the viewport. */
.page-account .card,
.page-shop .card,
.page-login .auth-layout,
.page-register .auth-layout,
.page-forgot .auth-layout,
.page-reset-password .auth-layout { max-width: 100%; }
.page-account .info-list dd,
.page-shop td,
.page-account td,
.auth-card,
.notice { overflow-wrap: break-word; word-wrap: break-word; }

/* Shop history fits normal desktop widths without depending on a horizontal scrollbar. */
.page-shop .shop-history-card .table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
}
.page-shop .shop-history-card table {
    table-layout: fixed;
    border: 1px solid #c9c1b2;
    border-radius: 5px;
}
.page-shop .shop-history-card th,
.page-shop .shop-history-card td {
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    vertical-align: top;
}
.page-shop .shop-history-card th:last-child,
.page-shop .shop-history-card td:last-child { width: 18%; }
.page-shop .shop-history-card td { line-height: 1.45; }

/* Server picker: larger controls and safer wrapping for long server names. */
.server-dialog-panel { max-width: 960px; }
.dialog-server-main strong,
.dialog-server-main small { overflow-wrap: break-word; word-wrap: break-word; }
.dialog-close,
.dialog-foot-close { min-height: 40px; }
.dialog-server-row { min-height: 72px; }
.modal-server-search input { font-size: 14px; }

/* Tablet/laptop: player forms get breathing room before they become cramped. */
@media (max-width: 1020px) {
    .home-shell,
    .shell { width: 94%; }

    .page-shop .shop-grid { margin-left: 0; margin-right: 0; }
    .page-shop .shop-card,
    .page-shop .shop-card-full {
        float: none;
        width: auto;
        min-height: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .page-account .security-grid { margin-left: 0; margin-right: 0; }
    .page-account .security-card {
        float: none;
        width: auto;
        min-height: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .page-shop .shop-history-card { padding-left: 20px; padding-right: 20px; }
}

/* Unified mobile navigation and content flow. */
@media (max-width: 760px) {
    .home-shell,
    .shell { width: 94%; }

    /* Public header — JS only collapses the menu after enhancement is ready. */
    .public-header,
    .header-row { min-height: 68px; }
    .header-row { position: relative; overflow: visible; text-align: left; }
    .pirate-brand { float: left; height: 68px; }
    .pirate-brand img { width: 60px; height: 60px; margin-top: 3px; }
    .brand-copy { display: block; padding-top: 12px; }
    .brand-copy strong { font-size: 16px; }
    .brand-copy small { font-size: 8px; }

    .public-header .player-nav-toggle {
        display: none;
        position: absolute;
        right: 0;
        top: 13px;
        z-index: 3;
        min-width: 92px;
        min-height: 42px;
        padding: 8px 10px;
        border: 1px solid #e0a44d;
        border-radius: 6px;
        background: #123f52;
        color: #fff4d8;
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
    }
    .public-header .player-nav-toggle span:first-child { margin-right: 5px; font-size: 17px; line-height: 10px; vertical-align: -1px; }
    .public-header .player-nav-ready .player-nav-toggle { display: block; }
    .public-header .player-nav-ready .public-nav,
    .public-header .player-nav-ready .account-nav { display: none; }
    .public-header .player-nav-ready.player-nav-open .public-nav,
    .public-header .player-nav-ready.player-nav-open .account-nav { display: block; }

    .public-nav,
    .account-nav {
        clear: both;
        float: none;
        width: 100%;
        margin: 0;
        padding: 7px 0;
        border-top: 1px solid #315b6c;
        text-align: left;
        white-space: normal;
    }
    .public-nav a,
    .public-nav .nav-button,
    .public-nav .nav-server,
    .account-nav .play-link,
    .login-link,
    .logout-link,
    .account-link,
    .register-link,
    .admin-link {
        float: none;
        display: block;
        width: 100%;
        height: auto;
        min-height: 42px;
        margin: 0 0 5px;
        padding: 11px 12px;
        border: 1px solid #315b6c;
        border-radius: 5px;
        background: #10384b;
        color: #eff6f3;
        font-size: 10px;
        line-height: 18px;
        text-align: left;
    }
    .account-nav form { display: block; width: 100%; }
    .account-nav .play-link,
    .account-link,
    .register-link { border-color: #e0a44d; background: #b94a24; color: #fff4d8; }

    /* Home hero becomes normal document flow instead of multiple absolute blocks. */
    .grand-hero,
    .hero-stage { min-height: 0; }
    .grand-hero {
        background-position: 62% top;
        background-size: auto 440px;
    }
    .hero-stage {
        min-height: 0;
        padding-top: 245px;
        padding-bottom: 24px;
    }
    .hero-brand-panel,
    .hero-brand-panel.hero-server-campaign {
        position: relative;
        left: auto;
        bottom: auto;
        width: auto;
        min-height: 0;
        margin: 0 0 14px;
        padding: 18px;
        background: rgba(255,250,240,.94);
        text-align: left;
    }
    .hero-server-campaign h1,
    .hero-brand-panel h1 { max-width: none; font-size: 25px; }
    .hero-lead { max-width: none; font-size: 13px; }
    .hero-actions { margin-top: 14px; }

    .server-dock {
        position: relative;
        left: auto;
        bottom: auto;
        width: auto;
        min-height: 0;
        margin: 0;
    }
    .server-dock-title {
        float: none;
        width: auto;
        min-height: 0;
        padding: 13px 15px;
        border-right: 0;
        border-bottom: 1px solid #315b6c;
        text-align: left;
    }
    .server-dock-title strong { font-size: 18px; }
    .server-dock-slots { float: none; width: auto; min-height: 0; overflow: hidden; }
    .dock-server {
        float: left;
        width: 50%;
        min-height: 126px;
        padding: 16px 48px 13px 14px;
        border-right: 1px solid #315b6c;
        border-bottom: 1px solid #315b6c;
    }
    .dock-server:nth-child(2) { border-right: 0; }
    .dock-search {
        clear: both;
        float: none;
        width: auto;
        min-height: 0;
        padding: 14px;
        border-right: 0;
    }
    .dock-server-name { font-size: 14px; }
    .dock-server-name b { font-size: 17px; }
    .all-server-button { min-height: 36px; padding-top: 9px; }

    /* Public content cards. */
    .voyage-zone,
    .community-zone { padding-top: 30px; padding-bottom: 30px; }
    .voyage-frame,
    .community-frame { padding: 22px 16px; }
    .feature-guide-row { margin-left: -4px; margin-right: -4px; }
    .feature-guide { width: 48%; margin-left: 1%; margin-right: 1%; }
    .guide-directory { padding: 16px; }
    .section-heading h2,
    .community-intro h2 { font-size: 25px; }

    .footer-row { min-height: 0; }
    .footer-brand,
    .footer-links { float: none; width: auto; text-align: center; }
    .footer-brand img { float: none; display: inline-block; width: 76px; height: 76px; vertical-align: middle; }
    .footer-copy { display: inline-block; max-width: 68%; padding-top: 0; vertical-align: middle; text-align: left; }
    .footer-links { padding: 16px 0 0; }
    .footer-links a { margin: 0 6px 9px; }
    .footer-age { position: static; float: none; display: block; width: 96px; margin: 12px auto 0; }

    /* Account/Shop/Auth shared header. */
    .site-header,
    .header-inner { min-height: 68px; }
    .header-inner { position: relative; overflow: visible; text-align: left; }
    .brand { float: left; height: 68px; }
    .brand img { width: 60px; height: 60px; }
    .brand span { display: block; padding-top: 12px; }

    .site-header .player-nav-toggle {
        display: none;
        position: absolute;
        right: 0;
        top: 13px;
        z-index: 3;
        min-width: 92px;
        min-height: 42px;
        padding: 8px 10px;
        border: 1px solid #e0a44d;
        border-radius: 6px;
        background: #123f52;
        color: #fff4d8;
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
    }
    .site-header .player-nav-toggle span:first-child { margin-right: 5px; font-size: 17px; line-height: 10px; vertical-align: -1px; }
    .site-header .player-nav-ready .player-nav-toggle { display: block; }
    .site-header .player-nav-ready .nav { display: none; }
    .site-header .player-nav-ready.player-nav-open .nav { display: block; }
    .site-header .nav {
        clear: both;
        float: none;
        width: 100%;
        padding: 7px 0;
        border-top: 1px solid #315b6c;
        text-align: left;
        white-space: normal;
    }
    .site-header .nav a,
    .site-header .link-button {
        display: block;
        width: 100%;
        min-height: 42px;
        margin: 0 0 5px;
        padding: 11px 12px;
        text-align: left;
    }
    .site-header .nav form { display: block; width: 100%; }

    /* Decorative hero remains visible but no longer consumes most of a phone screen. */
    .page-account .account-hero,
    .page-shop .account-hero,
    .page-account .account-hero-inner,
    .page-shop .account-hero-inner { height: 175px; }
    .page-login .account-hero,
    .page-register .account-hero,
    .page-forgot .account-hero,
    .page-reset-password .account-hero,
    .page-login .account-hero-inner,
    .page-register .account-hero-inner,
    .page-forgot .account-hero-inner,
    .page-reset-password .account-hero-inner { height: 145px; }
    .page-account .main-content,
    .page-shop .main-content,
    .page-login .main-content,
    .page-register .main-content,
    .page-forgot .main-content,
    .page-reset-password .main-content { margin-top: 14px; padding-bottom: 42px; }

    /* Account information and security forms. */
    .account-summary-main,
    .account-pow-box { float: none; width: auto; }
    .account-summary-main { padding: 20px; }
    .account-summary-main h1 { font-size: 24px; overflow-wrap: break-word; word-wrap: break-word; }
    .account-pow-box {
        min-height: 0;
        padding: 15px 20px;
        border-left: 0;
        border-top: 1px solid #315b6c;
        text-align: left;
    }
    .account-pow-box strong { font-size: 27px; }
    .info-list-wide > div { float: none; width: auto; margin-right: 0; }
    .info-list dt { width: 38%; }
    .info-list dd { margin-left: 40%; }
    .security-card { padding: 19px 18px; }
    .page-account .button,
    .page-shop .button,
    .auth-card .button { min-height: 46px; }

    /* Shop forms and history. */
    .shop-banner { min-height: 0; }
    .shop-banner-copy,
    .shop-pow-balance { float: none; width: auto; }
    .shop-pow-balance {
        margin-top: 14px;
        padding: 13px 0 0;
        border-left: 0;
        border-top: 1px solid #ddd5c5;
        text-align: left;
    }
    .shop-pow-balance strong { font-size: 27px; }
    .page-shop .shop-card,
    .page-shop .shop-history-card { padding: 20px 18px; }
    .page-shop .gold-server-fast-tools input,
    .page-shop .gold-server-fast-button {
        float: none;
        width: 100%;
        border: 1px solid #9cb0b5;
        border-radius: 7px;
    }
    .page-shop .gold-server-fast-button { margin-top: 7px; }
    .page-shop .shop-guidance span { display: block; margin: 5px 0 0; }

    .page-shop .shop-history-tabs { overflow: hidden; padding: 5px; }
    .page-shop .shop-history-tab {
        float: left;
        width: 50%;
        min-height: 44px;
        margin: 0;
        padding: 9px 7px;
        white-space: normal;
        line-height: 1.3;
    }

    /* Responsive record cards: table header disappears and every cell gets its own localized label. */
    .page-shop .shop-history-card .table-wrap { overflow: visible; border: 0; }
    .page-shop .shop-history-card table,
    .page-shop .shop-history-card tbody,
    .page-shop .shop-history-card tr,
    .page-shop .shop-history-card td { display: block; width: 100%; }
    .page-shop .shop-history-card table { border: 0; background: transparent; }
    .page-shop .shop-history-card thead { display: none; }
    .page-shop .shop-history-card tr {
        margin: 0 0 12px;
        padding: 7px 12px;
        border: 1px solid #d4c7b3;
        border-top: 4px solid #e0a44d;
        border-radius: 7px;
        background: #fffdf8;
        box-shadow: 0 4px 12px rgba(20,61,74,.07);
    }
    .page-shop .shop-history-card tr:nth-child(even) td { background: transparent; }
    .page-shop .shop-history-card td,
    .page-shop .shop-history-card td:last-child {
        position: relative;
        width: 100%;
        min-height: 37px;
        padding: 9px 0 9px 42%;
        border-bottom: 1px dashed #ddd2c0;
        background: transparent;
        text-align: right;
        white-space: normal;
    }
    .page-shop .shop-history-card td:last-child { border-bottom: 0; }
    .page-shop .shop-history-card td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 9px;
        width: 38%;
        color: #6a7474;
        font-size: 9px;
        font-weight: bold;
        line-height: 1.35;
        text-align: left;
        text-transform: uppercase;
    }

    .pager { line-height: 2.4; }
    .pager a { min-height: 38px; padding: 8px 11px; }

    /* Auth: story becomes a compact introduction above the form. */
    .auth-layout { margin-bottom: 24px; }
    .auth-story,
    .auth-card {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        float: none;
        width: auto;
        min-height: 0;
        margin-left: 0;
    }
    .auth-story {
        padding: 22px 20px;
        border-right: 0;
        border-bottom: 3px solid #e0a44d;
    }
    .auth-story h2 { font-size: 24px; }
    .auth-story p { max-width: none; margin-bottom: 0; }
    .auth-story-links { margin-top: 14px; }
    .auth-card { padding: 24px 20px 26px; }
    .auth-card h1 { font-size: 26px; }

    /* Server picker uses nearly the full mobile viewport but never requires horizontal scrolling. */
    .server-dialog { padding: 8px 0; }
    .server-dialog-panel { width: 94%; margin: 0 auto; }
    .dialog-head { min-height: 0; padding: 16px 15px 14px; }
    .dialog-head-copy { width: 80%; }
    .dialog-head h2 { font-size: 23px; }
    .dialog-close { width: 42px; height: 42px; margin-top: 2px; }
    .modal-server-search { padding: 12px; }
    .modal-search-input input,
    .modal-search-input span {
        float: none;
        width: 100%;
        height: 44px;
        border: 1px solid #9aadb0;
        border-radius: 5px;
    }
    .modal-search-input span { margin-top: 6px; border-color: #315b6c; }
    .dialog-server-list { max-height: 410px; padding: 9px; }
    .dialog-server-row {
        min-height: 90px;
        padding: 12px 10px 36px 68px;
    }
    .dialog-server-number { left: 10px; top: 14px; width: 50px; }
    .dialog-server-row .status-badge { left: 68px; right: auto; top: auto; bottom: 10px; }
    .dialog-selected-mark { right: 9px; bottom: 13px; }
    .dialog-foot { padding: 10px 12px; }
    .dialog-foot span,
    .dialog-foot-close { float: none; width: 100%; }
    .dialog-foot span { display: block; padding: 0 0 8px; }
    .dialog-foot-close { min-height: 42px; }
}

@media (max-width: 520px) {
    .brand-copy,
    .brand span { display: none; }

    .public-header .player-nav-toggle,
    .site-header .player-nav-toggle { min-width: 86px; }

    .hero-stage { padding-top: 220px; }
    .grand-hero { background-size: auto 390px; }
    .hero-brand-panel,
    .hero-brand-panel.hero-server-campaign { padding: 16px 14px; }
    .hero-server-campaign h1,
    .hero-brand-panel h1 { font-size: 22px; }
    .hero-server-name { font-size: 18px; }
    .hero-actions .primary-cta,
    .hero-actions .secondary-cta,
    .hero-actions .ghost-cta {
        float: none;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        margin: 0 0 8px;
        padding: 12px 10px;
    }

    .dock-server,
    .dock-server:nth-child(2) {
        float: none;
        width: auto;
        min-height: 112px;
        border-right: 0;
    }
    .mini-state { right: 10px; }
    .dock-search-line input,
    .dock-search-line button {
        float: none;
        width: 100%;
        height: 42px;
        border: 1px solid #7d969c;
        border-radius: 5px;
    }
    .dock-search-line button { margin-top: 6px; border-color: #e0a44d; }

    .feature-guide-row { margin-left: 0; margin-right: 0; }
    .feature-guide { float: none; width: auto; min-height: 0; margin: 0 0 11px; }
    .feature-guide small { min-height: 0; }
    .guide-link-column { float: none; width: auto; margin-left: 0; }

    .page-account .account-hero,
    .page-shop .account-hero,
    .page-account .account-hero-inner,
    .page-shop .account-hero-inner { height: 130px; }
    .page-login .account-hero,
    .page-register .account-hero,
    .page-forgot .account-hero,
    .page-reset-password .account-hero,
    .page-login .account-hero-inner,
    .page-register .account-hero-inner,
    .page-forgot .account-hero-inner,
    .page-reset-password .account-hero-inner { height: 105px; }

    .card,
    .page-shop .shop-card,
    .page-shop .shop-history-card,
    .auth-card { padding: 17px 14px; }
    .account-summary-main { padding: 17px 14px; }
    .account-pow-box { padding: 13px 14px; }

    .info-list dt,
    .info-list dd {
        float: none;
        width: auto;
        margin: 0;
        text-align: left;
    }
    .info-list dd { margin-top: 3px; }

    .page-shop .shop-history-tab {
        float: none;
        width: 100%;
        margin-bottom: 4px;
    }
    .page-shop .shop-history-card td,
    .page-shop .shop-history-card td:last-child {
        min-height: 0;
        padding: 8px 0;
        text-align: left;
    }
    .page-shop .shop-history-card td:before {
        position: static;
        display: block;
        width: auto;
        margin-bottom: 3px;
    }

    .auth-story { padding: 18px 14px; }
    .auth-story-links a { display: block; margin-right: 0; text-align: center; }
    .auth-links a:first-child,
    .auth-links a:last-child { float: none; display: block; padding: 5px 0; }

    .dialog-head-copy { width: 76%; }
    .dialog-head h2 { font-size: 20px; }
    .dialog-head p { font-size: 10px; }
    .dialog-server-list { max-height: 355px; }
    .dialog-server-row { padding-left: 62px; }
    .dialog-server-number { width: 45px; font-size: 17px; }
    .dialog-server-row .status-badge { left: 62px; }
}