html, body { margin: 0; padding: 0; min-height: 100%; }
body { background: #f2eee4; color: #29414b; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; }
* { box-sizing: border-box; }
a { color: #a84524; text-decoration: none; }
a:hover { color: #c85b2c; text-decoration: none; }
button, input, select, textarea { font-family: Arial, Helvetica, sans-serif; }
button { cursor: pointer; }
.home-shell { width: 94%; max-width: 1240px; margin: 0 auto; }

/* One coherent Pirate 9999 palette: deep navy, sea teal, pirate gold, warm ivory. */
.public-header { position: relative; z-index: 30; min-height: 78px; border-bottom: 3px solid #e0a44d; background: #0b2c3d; background-image: linear-gradient(#143f53, #082536); box-shadow: 0 4px 16px rgba(0,0,0,.32); }
.header-row { min-height: 78px; overflow: hidden; }
.pirate-brand { float: left; display: block; height: 78px; color: #fff4d6; overflow: hidden; }
.pirate-brand img { float: left; width: 70px; height: 70px; margin-top: 3px; }
.brand-copy { float: left; padding: 15px 0 0 3px; }
.brand-copy strong { display: block; color: #fff4d6; font-family: Georgia, 'Times New Roman', serif; font-size: 19px; line-height: 22px; letter-spacing: 1px; text-shadow: 0 1px 2px #000; }
.brand-copy small { display: block; margin-top: 4px; color: #e5a547; font-size: 9px; letter-spacing: 2px; }
.public-nav { float: left; margin-left: 28px; padding-top: 19px; white-space: nowrap; overflow: hidden; }
.public-nav a, .public-nav .nav-button { float: left; display: block; min-height: 40px; margin: 0 1px 0 0; padding: 11px 10px 10px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #e5eeee; font-size: 11px; font-weight: bold; line-height: 16px; text-align: center; text-transform: uppercase; vertical-align: top; }
.public-nav a:hover, .public-nav .nav-button:hover { border-bottom-color: #e0a44d; color: #fff4d6; background: #123f52; }
.account-nav { float: right; padding-top: 19px; white-space: nowrap; }
.account-nav form { display: inline-block; margin: 0; }
.login-link, .logout-link, .account-link, .register-link, .admin-link { display: inline-block; min-height: 38px; margin-left: 5px; padding: 10px 12px; border: 1px solid #3f6678; border-radius: 4px; background: #10384b; color: #eff6f3; font-size: 11px; font-weight: bold; text-transform: uppercase; }
.logout-link { cursor: pointer; }
.register-link, .account-link { border-color: #e0a44d; background: #b94a24; color: #fff4d8; }
.login-link:hover, .logout-link:hover, .admin-link:hover { border-color: #e0a44d; color: #fff; background: #1a596e; }
.account-link:hover, .register-link:hover { color: #fff; background: #c85b2c; }
.account-nav .admin-link { border-color: #d79537; background: #8d3d24; color: #fff9e9; }
.account-nav .admin-link:hover { border-color: #e0a44d; background: #a64b2d; color: #fff; }

/* Full-width hero: preserve the artwork, reduce saturation clash with a subtle navy wash. */
.grand-hero { position: relative; min-height: 710px; border-bottom: 1px solid #c9c0ac; background: #aee2ef url('../images/theme/crew-wave.jpg') center top no-repeat; background-size: cover; overflow: hidden; }
.grand-hero:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #0b2c3d; opacity: .07; }
.hero-stage { position: relative; z-index: 1; min-height: 710px; }
.hero-brand-panel { position: absolute; left: 0; bottom: 188px; width: 475px; min-height: 340px; padding: 15px 24px 18px; border-left: 4px solid #e0a44d; background: #fffaf0; background: rgba(255,250,240,.86); box-shadow: 0 10px 30px rgba(9,44,61,.16); text-align: left; }
.hero-logo { display: block; width: 270px; height: auto; margin: 0 0 -2px 4px; }
.hero-kicker, .section-kicker, .dock-kicker { margin: 0 0 6px; color: #a84524; font-size: 10px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; }
.hero-brand-panel h1 { max-width: 445px; margin: 0; color: #123f52; font-family: Georgia, 'Times New Roman', serif; font-size: 34px; line-height: 1.07; text-shadow: 0 1px 0 #fff; }
.hero-lead { max-width: 430px; margin: 11px 0 16px; color: #4b6369; font-size: 14px; line-height: 1.55; }
.hero-actions { overflow: hidden; }
.primary-cta, .secondary-cta, .ghost-cta { float: left; display: block; min-height: 44px; margin: 0 7px 7px 0; padding: 13px 17px 0; border: 1px solid #8f351f; border-radius: 5px; background: #b94a24; color: #fff4d8; font-size: 11px; font-weight: bold; line-height: 17px; text-align: center; text-transform: uppercase; box-shadow: 0 3px 0 #7f321d; }
.primary-cta { min-width: 150px; padding-top: 11px; }
.secondary-cta { border-color: #24566a; background: #1a596e; box-shadow-color: #123f52; }
.ghost-cta { border-color: #c09248; background: #f3d89d; color: #543621; box-shadow-color: #ad803c; }
.primary-cta:hover, .secondary-cta:hover { color: #fff; background: #c85b2c; }
.ghost-cta:hover { color: #fff; background: #b94a24; }
.launch-note { clear: both; margin: 8px 0 0; color: #675f53; font-size: 10px; }

/* Server dock */
.server-dock { position: absolute; left: 0; bottom: 24px; width: 100%; min-height: 148px; overflow: hidden; border: 1px solid #315b6c; border-top: 4px solid #e0a44d; border-radius: 8px; background: #0b2c3d; background: rgba(8,37,52,.97); box-shadow: 0 15px 28px rgba(0,0,0,.26); }
.server-dock-title { float: left; width: 17%; min-height: 144px; padding: 30px 19px 15px; border-right: 1px solid #315b6c; background: #123f52; }
.server-dock-title .dock-kicker { color: #e5a547; }
.server-dock-title strong { display: block; color: #fff1c9; font-family: Georgia, 'Times New Roman', serif; font-size: 22px; line-height: 1.15; }
.server-dock-slots { float: right; width: 83%; min-height: 144px; overflow: hidden; }
.dock-server, .dock-search { float: left; position: relative; min-height: 144px; border: 0; border-right: 1px solid #315b6c; background: transparent; color: #e8f0ef; text-align: left; }
.dock-server { width: 31%; padding: 20px 52px 15px 18px; }
.dock-search { width: 38%; border-right: 0; padding: 17px 18px 12px; }
.dock-server:hover, .dock-server.selected-server { background: #1a596e; }
.dock-label { display: block; margin-bottom: 6px; color: #e5a547; font-size: 9px; font-weight: bold; letter-spacing: 1.4px; text-transform: uppercase; }
.dock-server-name { display: block; overflow: hidden; color: #fff4d6; font-size: 16px; font-weight: bold; white-space: nowrap; }
.dock-server-name b { margin-right: 5px; color: #f0c56a; font-family: Georgia, 'Times New Roman', serif; font-size: 20px; }
.dock-server small, .dock-server-login small { display: block; margin-top: 7px; color: #b4c7c8; font-size: 10px; }
.dock-server-login { padding-right: 16px; }
.dock-server-login a { display: block; color: #fff1c9; font-weight: bold; }
.dock-server-empty strong { display: block; color: #dce8e7; font-size: 12px; }
.mini-state { position: absolute; right: 12px; top: 22px; display: block; padding: 4px 7px; border-radius: 9px; font-size: 8px; font-style: normal; font-weight: bold; text-transform: uppercase; }
.mini-state.open { background: #34734f; color: #e3f3e6; }
.mini-state.closed { background: #844b3b; color: #f7e1da; }
.dock-search label { display: block; margin-bottom: 6px; color: #e6eeee; font-size: 10px; font-weight: bold; text-transform: uppercase; }
.dock-search-line { display: block; overflow: hidden; }
.dock-search-line input { float: left; width: 70%; height: 39px; padding: 8px 10px; border: 1px solid #7d969c; border-right: 0; border-radius: 4px 0 0 4px; background: #fffdf8; color: #293f48; outline: none; }
.dock-search-line button { float: left; width: 30%; height: 39px; border: 1px solid #e0a44d; border-radius: 0 4px 4px 0; background: #b94a24; color: #fff4d8; font-size: 10px; font-weight: bold; text-transform: uppercase; }
.dock-search-line button:hover { background: #c85b2c; }
.all-server-button { display: block; width: 100%; margin-top: 8px; padding: 5px 0 0; border: 0; background: transparent; color: #f0c56a; font-size: 10px; font-weight: bold; text-align: left; text-transform: uppercase; }
.all-server-button span { color: #a7bcbd; }

/* Selected-server strip continues the dock palette instead of introducing a cold blue band. */
.selected-zone { padding: 22px 0; border-bottom: 1px solid #ddd3c0; background: #f2eee4; }
.selected-server-bar { min-height: 84px; overflow: hidden; border: 1px solid #d3cab9; border-left: 5px solid #9aa8a5; border-radius: 7px; background: #fffaf0; box-shadow: 0 4px 15px rgba(25,64,78,.07); }
.selected-server-bar.has-selection { border-left-color: #e0a44d; }
.selected-mark { float: left; width: 68px; min-height: 82px; padding-top: 27px; background: #123f52; color: #f0c56a; font-size: 23px; font-weight: bold; text-align: center; }
.selected-server-copy { float: left; width: 48%; padding: 14px 17px 10px; }
.selected-server-copy span { display: block; color: #a84524; font-size: 9px; font-weight: bold; letter-spacing: 1.4px; text-transform: uppercase; }
.selected-server-copy strong { display: block; margin-top: 2px; color: #123f52; font-family: Georgia, 'Times New Roman', serif; font-size: 20px; }
.selected-server-copy small { display: block; margin-top: 2px; color: #6f8083; }
.selected-server-state { float: right; width: 39%; padding: 14px 18px 9px; text-align: right; }
.selected-server-state small { display: block; margin-top: 8px; color: #6f8083; font-size: 10px; }
.status-badge { display: inline-block; padding: 5px 9px; border-radius: 11px; font-size: 9px; font-style: normal; font-weight: bold; text-transform: uppercase; }
.status-badge.open { background: #e3f1e6; color: #2f6846; }
.status-badge.closed { background: #f4e3dc; color: #864534; }

/* Guides: warm-ivory surfaces and one shared accent system. */
.section-frame { position: relative; }
.section-heading { margin-bottom: 25px; text-align: center; }
.section-heading .section-kicker { color: #a84524; }
.section-heading h2 { margin: 0; color: #123f52; font-family: Georgia, 'Times New Roman', serif; font-size: 31px; }
.section-heading p { max-width: 720px; margin: 7px auto 0; color: #687b7e; }
.voyage-zone { padding: 58px 0 65px; border-top: 1px solid #e8dfcf; border-bottom: 1px solid #d4c8b2; background: #f2eee4; }
.voyage-frame { padding: 34px 30px 32px; border: 1px solid #d3cab9; border-radius: 10px; background: #fffaf0; box-shadow: 0 10px 28px rgba(20,61,74,.11); }
.feature-guide-row { overflow: hidden; margin: 0 -6px 25px; }
.feature-guide { float: left; display: block; position: relative; width: 23%; min-height: 205px; margin: 0 1%; padding: 22px 18px 17px; border: 1px solid #d8cfbf; border-top: 4px solid #e0a44d; border-radius: 7px; background: #fffdf8; color: #314a52; box-shadow: 0 5px 14px rgba(23,67,83,.07); }
.feature-guide:hover { border-color: #d3a14e; color: #263f47; background: #fff9ec; box-shadow: 0 8px 19px rgba(23,67,83,.13); }
.feature-guide-icon { display: block; width: 64px; height: 54px; margin: -3px 0 4px; }
.feature-guide-icon img { display: block; max-width: 58px; max-height: 42px; }
.feature-guide-tag { display: block; margin-top: 4px; color: #a84524; font-size: 9px; font-weight: bold; letter-spacing: 1.5px; }
.feature-guide strong { display: block; margin-top: 5px; color: #123f52; font-family: Georgia, 'Times New Roman', serif; font-size: 19px; line-height: 1.2; }
.feature-guide small { display: block; min-height: 42px; margin-top: 8px; color: #6b7d80; font-size: 11px; line-height: 1.45; }
.feature-guide em { display: block; margin-top: 11px; color: #a84524; font-size: 10px; font-style: normal; font-weight: bold; text-transform: uppercase; }
.gift-card, .update-card, .play-card, .event-card { border-top-color: #e0a44d; }
.guide-directory { overflow: hidden; padding: 19px 22px 20px; border: 1px solid #d5c8ad; border-radius: 7px; background: #f7f1e4; }
.guide-directory-head { float: left; width: 26%; overflow: hidden; padding: 6px 17px 6px 0; }
.language-badge { float: left; display: block; width: 48px; height: 44px; margin-right: 11px; padding-top: 12px; border: 1px solid #e0a44d; border-radius: 4px; background: #123f52; color: #f0c56a; font-weight: bold; text-align: center; }
.guide-directory-head div { overflow: hidden; }
.guide-directory-head strong { display: block; color: #123f52; font-family: Georgia, 'Times New Roman', serif; font-size: 16px; }
.guide-directory-head small { display: block; margin-top: 3px; color: #6e726b; font-size: 10px; }
.guide-link-columns { float: right; width: 74%; overflow: hidden; }
.guide-link-column { float: left; width: 31.3%; margin-left: 2%; }
.guide-link-column a { display: block; position: relative; padding: 7px 8px 7px 18px; border-bottom: 1px solid #d9cfbd; color: #4f4b42; }
.guide-link-column a:before { content: '›'; position: absolute; left: 4px; color: #a84524; font-weight: bold; }
.guide-link-column a:hover { background: #fffaf0; color: #a84524; }

/* Community */
.community-zone { padding: 62px 0; border-top: 3px solid #e0a44d; background: #0b2c3d; background-image: linear-gradient(#123f52, #082536); }
.community-frame { overflow: hidden; padding: 31px; border: 1px solid #315b6c; border-radius: 10px; background: #10384b; box-shadow: 0 10px 28px rgba(0,0,0,.19); }
.community-intro { float: left; width: 51%; padding: 8px 26px 0 2px; color: #dce7e5; }
.community-intro .section-kicker { color: #e5a547; }
.community-intro h2 { margin: 0; color: #fff1c9; font-family: Georgia, 'Times New Roman', serif; font-size: 31px; }
.community-intro > p { max-width: 590px; color: #bdcece; }
.community-actions { margin-top: 21px; }
.community-action { display: block; min-height: 58px; margin-bottom: 8px; overflow: hidden; border: 1px solid #315b6c; border-radius: 5px; background: #123f52; color: #eff6f3; }
.community-action:hover { border-color: #e0a44d; background: #1a596e; color: #fff; }
.community-action img { float: left; width: 58px; height: auto; max-height: 42px; margin: 8px 11px 0 9px; }
.community-action span { display: block; overflow: hidden; padding: 9px 10px 6px; }
.community-action small { display: block; color: #e5a547; font-size: 8px; font-weight: bold; letter-spacing: 1.4px; }
.community-action strong { display: block; margin-top: 2px; color: #eff6f3; font-size: 13px; }
.facebook-frame { float: right; width: 46%; min-height: 365px; overflow: hidden; border: 1px solid #e0a44d; border-radius: 8px; background: #fffaf0; box-shadow: 0 8px 20px rgba(0,0,0,.20); }
.facebook-frame-head { min-height: 53px; padding: 10px 14px; border-bottom: 1px solid #d8cfbf; background: #f7f1e4; }
.facebook-frame-head strong { display: block; color: #123f52; font-family: Georgia, 'Times New Roman', serif; font-size: 16px; }
.facebook-frame-head span { color: #708083; font-size: 9px; text-transform: uppercase; }
.facebook-frame .fb-page { display: block; min-height: 300px; }

/* Footer: keep the existing sand art, gently navy-tone it so it belongs to the same system. */
.public-footer { clear: both; position: relative; min-height: 175px; padding: 31px 0 27px; border-top: 4px solid #e0a44d; background: #d4b56f url('../images/theme/sand-footer.png') center top repeat-x; color: #4f3925; overflow: hidden; }
.public-footer:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #0b2c3d; opacity: .08; }
.footer-row { position: relative; z-index: 1; min-height: 115px; overflow: hidden; }
.footer-brand { float: left; width: 50%; overflow: hidden; }
.footer-brand img { float: left; width: 90px; height: 90px; margin-right: 13px; }
.footer-copy { overflow: hidden; padding-top: 18px; }
.footer-copy strong { color: #543321; font-family: Georgia, 'Times New Roman', serif; font-size: 19px; }
.footer-copy p { max-width: 430px; margin: 4px 0 0; font-size: 11px; }
.footer-links { float: right; width: 39%; padding: 25px 115px 0 0; text-align: right; }
.footer-links a { display: inline-block; margin: 0 0 8px 12px; color: #543321; font-size: 11px; font-weight: bold; }
.footer-links a:hover { color: #a84524; }
.footer-age { position: absolute; right: 0; top: 8px; width: 105px; height: auto; }

/* Server picker: clean div modal for legacy Chromium / Coowon. */
.server-dialog { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background: #000; background: rgba(0,0,0,.82); }
.server-dialog-panel { width: 90%; max-width: 930px; margin: 28px auto; overflow: hidden; border: 1px solid #e0a44d; border-radius: 8px; background: #fffaf0; color: #29414b; box-shadow: 0 18px 55px rgba(0,0,0,.53); }
.dialog-head { min-height: 105px; overflow: hidden; padding: 20px 23px 16px; border-bottom: 4px solid #e0a44d; background: #0b2c3d; }
.dialog-head-copy { float: left; width: 82%; }
.dialog-head .section-kicker { color: #e5a547; }
.dialog-head h2 { margin: 0; color: #fff1c9; font-family: Georgia, 'Times New Roman', serif; font-size: 29px; }
.dialog-head p { margin: 5px 0 0; color: #bdcece; font-size: 11px; }
.dialog-close { float: right; width: 42px; height: 42px; margin-top: 6px; border: 1px solid #e0a44d; border-radius: 21px; background: #b94a24; color: #fff4d8; cursor: pointer; font-size: 24px; line-height: 33px; }
.dialog-close:hover { background: #c85b2c; }
.modal-server-search { padding: 15px 19px 12px; border-bottom: 1px solid #d8cfbf; background: #f7f1e4; }
.modal-server-search label { display: block; margin-bottom: 6px; color: #526a6e; font-size: 10px; font-weight: bold; text-transform: uppercase; }
.modal-search-input { overflow: hidden; }
.modal-search-input input { float: left; width: 79%; height: 42px; padding: 9px 11px; border: 1px solid #9aadb0; border-radius: 4px 0 0 4px; background: #fffdf8; color: #293f48; outline: none; }
.modal-search-input span { float: left; width: 21%; height: 42px; padding: 11px 9px; border: 1px solid #315b6c; border-left: 0; border-radius: 0 4px 4px 0; background: #123f52; color: #e4eeee; font-size: 10px; text-align: center; }
.modal-search-input span b { color: #f0c56a; }
.dialog-server-list { max-height: 560px; overflow-y: auto; padding: 12px 14px 5px; background: #f2eee4; }
.dialog-server-row { display: block; position: relative; width: 100%; min-height: 67px; margin: 0 0 7px; padding: 10px 162px 9px 86px; border: 1px solid #d2cab9; border-left: 4px solid #879c9d; border-radius: 4px; background: #fffdf8; color: #2d444c; text-align: left; }
.dialog-server-row:hover { border-left-color: #e0a44d; background: #fff9ec; }
.dialog-server-row.selected-server { border-color: #d7b06b; border-left-color: #e0a44d; background: #f9edd1; }
.dialog-server-number { position: absolute; left: 14px; top: 17px; width: 60px; color: #a84524; font-family: Georgia, 'Times New Roman', serif; font-size: 19px; font-weight: bold; }
.dialog-server-main { display: block; }
.dialog-server-main strong, .dialog-server-main small { display: block; }
.dialog-server-main strong { color: #123f52; font-size: 15px; }
.dialog-server-main small { margin-top: 4px; color: #718083; font-size: 10px; }
.dialog-server-row .status-badge { position: absolute; right: 17px; top: 14px; }
.dialog-selected-mark { display: none; position: absolute; right: 16px; bottom: 9px; color: #a84524; font-size: 8px; font-weight: bold; text-transform: uppercase; }
.dialog-server-row.selected-server .dialog-selected-mark { display: block; }
.search-empty { margin: 14px 18px; padding: 12px; border: 1px dashed #b96943; background: #faedd8; color: #843f2b; text-align: center; }
.dialog-empty { margin: 25px; padding: 20px; border: 1px dashed #b8b1a5; background: #fffdf8; text-align: center; }
.dialog-foot { min-height: 54px; overflow: hidden; padding: 11px 17px; border-top: 1px solid #d8cfbf; background: #f7f1e4; }
.dialog-foot span { float: left; width: 76%; padding-top: 7px; color: #6f8083; font-size: 10px; }
.dialog-foot-close { float: right; min-width: 110px; height: 32px; border: 1px solid #8f351f; border-radius: 4px; background: #b94a24; color: #fff4d8; font-size: 9px; font-weight: bold; text-transform: uppercase; }
.dialog-foot-close:hover { background: #c85b2c; }
.modal-open { overflow: hidden; }

@media (max-width: 1180px) {
    .public-nav { clear: both; float: none; margin-left: 0; padding: 2px 0 10px; text-align: center; white-space: normal; }
    .account-nav { padding-top: 19px; }
    .public-header, .header-row { min-height: 119px; }
    .grand-hero, .hero-stage { min-height: 750px; }
    .hero-brand-panel { bottom: 210px; width: 420px; }
    .server-dock { bottom: 18px; }
    .server-dock-title { width: 16%; padding-left: 15px; padding-right: 15px; }
    .server-dock-slots { width: 84%; }
    .dock-server { width: 31%; padding-left: 13px; padding-right: 47px; }
    .dock-search { width: 38%; padding-left: 13px; padding-right: 13px; }
}

@media (max-width: 900px) {
    .public-header, .header-row { min-height: 0; }
    .header-row { text-align: center; }
    .pirate-brand { float: none; display: inline-block; height: 76px; }
    .account-nav { float: none; padding: 0 0 10px; }
    .public-nav { padding-bottom: 5px; }
    .public-nav a, .public-nav .nav-button { padding-left: 7px; padding-right: 7px; }
    .grand-hero { min-height: 930px; background-position: center top; }
    .hero-stage { min-height: 930px; }
    .hero-brand-panel { left: 3%; bottom: 455px; width: 94%; padding-left: 18px; padding-right: 18px; text-align: center; }
    .hero-logo { width: 235px; margin-left: auto; margin-right: auto; }
    .hero-brand-panel h1, .hero-lead { max-width: 620px; margin-left: auto; margin-right: auto; }
    .hero-actions { text-align: center; }
    .primary-cta, .secondary-cta, .ghost-cta { float: none; display: inline-block; vertical-align: top; }
    .server-dock { left: 3%; width: 94%; bottom: 20px; }
    .server-dock-title { float: none; width: auto; min-height: 0; padding: 12px 15px; border-right: 0; border-bottom: 1px solid #315b6c; text-align: center; }
    .server-dock-title strong { font-size: 18px; }
    .server-dock-slots { float: none; width: auto; min-height: 0; }
    .dock-server { width: 50%; min-height: 126px; }
    .dock-search { width: 100%; min-height: 112px; border-top: 1px solid #315b6c; }
    .selected-server-copy { width: 48%; }
    .selected-server-state { width: 37%; }
    .feature-guide { width: 48%; margin-bottom: 12px; }
    .guide-directory-head { float: none; width: auto; padding-bottom: 15px; }
    .guide-link-columns { float: none; width: auto; }
    .community-intro, .facebook-frame { float: none; width: auto; }
    .community-intro { padding-right: 0; margin-bottom: 25px; }
    .facebook-frame { min-height: 350px; }
    .footer-brand { width: 55%; }
    .footer-links { width: 45%; padding-right: 0; padding-top: 16px; }
    .footer-age { position: static; float: right; clear: right; width: 105px; margin-top: 5px; }
}

@media (max-width: 620px) {
    .home-shell { width: 94%; }
    .brand-copy { display: none; }
    .public-nav a, .public-nav .nav-button { height: 35px; padding: 9px 5px 0; font-size: 9px; }
    .login-link, .logout-link, .account-link, .register-link, .admin-link { padding-left: 8px; padding-right: 8px; }
    .grand-hero { min-height: 990px; }
    .hero-stage { min-height: 990px; }
    .hero-brand-panel { bottom: 550px; }
    .hero-logo { width: 205px; }
    .hero-brand-panel h1 { font-size: 26px; }
    .hero-lead { font-size: 12px; }
    .primary-cta, .secondary-cta, .ghost-cta { min-width: 125px; padding-left: 11px; padding-right: 11px; }
    .server-dock { left: 2%; width: 96%; }
    .dock-server, .dock-search { float: none; width: auto; min-height: 112px; border-right: 0; border-bottom: 1px solid #315b6c; }
    .dock-search { border-bottom: 0; }
    .selected-server-bar { min-height: 0; }
    .selected-mark { display: none; }
    .selected-server-copy, .selected-server-state { float: none; width: auto; padding-left: 14px; padding-right: 14px; text-align: left; }
    .selected-server-state { padding-top: 0; padding-bottom: 13px; }
    .section-heading h2, .community-intro h2 { font-size: 25px; }
    .voyage-zone, .community-zone { padding-top: 35px; padding-bottom: 35px; }
    .voyage-frame, .community-frame { padding: 22px 15px; }
    .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; }
    .community-action img { width: 50px; }
    .facebook-frame { min-height: 330px; }
    .footer-brand, .footer-links { float: none; width: auto; text-align: center; }
    .footer-brand img { float: none; display: inline-block; vertical-align: middle; }
    .footer-copy { display: inline-block; max-width: 64%; padding-top: 0; vertical-align: middle; text-align: left; }
    .footer-links { padding: 15px 0 0; }
    .footer-links a { margin-left: 6px; margin-right: 6px; }
    .footer-age { float: none; display: block; width: 105px; margin: 12px auto 0; }
    .server-dialog-panel { width: 95%; margin: 12px auto; }
    .dialog-head { padding-left: 15px; padding-right: 15px; }
    .dialog-head h2 { font-size: 24px; }
    .modal-search-input input, .modal-search-input span { float: none; width: 100%; border: 1px solid #9aadb0; border-radius: 4px; }
    .modal-search-input span { margin-top: 5px; border-color: #315b6c; }
    .dialog-server-list { max-height: 500px; padding-left: 7px; padding-right: 7px; }
    .dialog-server-row { padding-left: 68px; padding-right: 10px; padding-bottom: 38px; }
    .dialog-server-number { left: 10px; width: 50px; }
    .dialog-server-row .status-badge { top: auto; right: auto; left: 68px; bottom: 10px; }
    .dialog-selected-mark { right: 9px; bottom: 13px; }
    .dialog-foot span, .dialog-foot-close { float: none; width: 100%; }
    .dialog-foot-close { margin-top: 7px; }
}

/* M4-v11 — public-player polish, upcoming-server campaign and richer Grand Line scenery. */
.grand-hero:before {
    background: #0b2c3d;
    background-image: linear-gradient(to bottom, rgba(6,35,50,.10), rgba(6,35,50,.02) 48%, rgba(6,35,50,.20));
    opacity: 1;
}
.hero-brand-panel {
    border-top: 1px solid rgba(224,164,77,.58);
    border-bottom: 1px solid rgba(168,69,36,.24);
    background: #fff8e9;
    background: rgba(255,248,233,.91);
    box-shadow: 0 13px 34px rgba(5,35,49,.23);
}
.hero-brand-panel:after {
    content: '';
    position: absolute;
    right: 10px;
    bottom: 8px;
    width: 122px;
    height: 76px;
    background: url('../images/theme/parchment-card.png') right bottom no-repeat;
    background-size: 122px auto;
    opacity: .10;
    pointer-events: none;
}
.hero-brand-panel > * { position: relative; z-index: 1; }
.server-dock {
    background: #082c40;
    background-image: linear-gradient(to bottom, rgba(20,72,91,.97), rgba(7,38,54,.98));
    border-color: #3e6675;
    border-top-color: #e0a44d;
}
.server-dock-title { background: #0d3a4e; background-image: linear-gradient(#174f64, #0d3548); }
.dock-server:hover, .dock-server.selected-server { background: #1b5b70; background-image: linear-gradient(#22697e, #164e62); }

.upcoming-server-zone {
    position: relative;
    padding: 18px 0 20px;
    border-top: 1px solid #7b5b2f;
    border-bottom: 1px solid #bca56f;
    background: #123f52;
    overflow: hidden;
}
.upcoming-server-zone:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -115px;
    height: 360px;
    background: url('../images/theme/sunny-wave.jpg') center 28% no-repeat;
    background-size: cover;
    opacity: .16;
}
.upcoming-server-zone:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #082536;
    background-image: linear-gradient(to right, rgba(8,37,54,.94), rgba(18,63,82,.76), rgba(8,37,54,.94));
    opacity: .90;
}
.upcoming-server-zone .home-shell { position: relative; z-index: 2; }
.upcoming-server-promo {
    min-height: 116px;
    overflow: hidden;
    border: 1px solid #e0a44d;
    border-radius: 8px;
    background: #0d3548;
    background: rgba(13,53,72,.90);
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.upcoming-server-emblem {
    float: left;
    position: relative;
    width: 126px;
    min-height: 114px;
    padding: 25px 18px 12px;
    border-right: 1px solid #3b6573;
    background: #123f52;
    text-align: center;
}
.upcoming-server-emblem img { display: block; width: 66px; height: auto; margin: 0 auto 5px; }
.upcoming-server-emblem span {
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid #e0a44d;
    border-radius: 9px;
    background: #b94a24;
    color: #fff5d9;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 1.3px;
}
.upcoming-server-copy {
    float: left;
    width: 68%;
    min-height: 114px;
    padding: 15px 20px 11px;
}
.upcoming-server-copy p { margin: 0 0 2px; color: #e5a547; font-size: 9px; font-weight: bold; letter-spacing: 1.8px; }
.upcoming-server-copy h2 { display: inline; margin: 0 9px 0 0; color: #fff1c9; font-family: Georgia, 'Times New Roman', serif; font-size: 22px; }
.upcoming-server-copy strong { display: inline; color: #f0c56a; font-family: Georgia, 'Times New Roman', serif; font-size: 21px; }
.upcoming-server-copy span { display: block; margin-top: 7px; color: #eef5f2; font-size: 12px; font-weight: bold; }
.upcoming-server-copy small { display: block; margin-top: 3px; color: #bed0d0; font-size: 10px; }
.upcoming-server-action {
    float: right;
    width: 19%;
    min-height: 114px;
    padding: 35px 18px 10px;
    text-align: right;
}
.upcoming-server-action button {
    width: 100%;
    min-height: 43px;
    padding: 9px 11px;
    border: 1px solid #e0a44d;
    border-radius: 5px;
    background: #b94a24;
    color: #fff4d8;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 3px 0 #74301d;
}
.upcoming-server-action button:hover { background: #c85b2c; }

.selected-zone {
    position: relative;
    background: #eee7d9;
    background-image: linear-gradient(#f5f0e6, #e9e1d2);
}
.voyage-zone {
    position: relative;
    overflow: hidden;
    background: #e9e6dc;
}
.voyage-zone:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url('../images/theme/sunny-wave.jpg') center 35% no-repeat;
    background-size: cover;
    opacity: .15;
}
.voyage-zone:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #f4efe4;
    background-image: linear-gradient(to bottom, rgba(244,239,228,.84), rgba(237,232,219,.78));
    opacity: .92;
}
.voyage-frame { position: relative; z-index: 2; background: #fffaf0; background: rgba(255,250,240,.94); }
.guide-directory { background: #f7f1e4; background-image: linear-gradient(#fbf6ea, #f1e7d4); }

.community-zone {
    position: relative;
    overflow: hidden;
    background: #082536;
    background-image: none;
}
.community-zone:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -130px;
    height: 760px;
    background: url('../images/theme/crew-wave.jpg') center center no-repeat;
    background-size: cover;
    opacity: .10;
}
.community-zone:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #082536;
    background-image: linear-gradient(to bottom, rgba(8,37,54,.90), rgba(7,31,45,.97));
    opacity: .96;
}
.community-frame { position: relative; z-index: 2; background: #10384b; background: rgba(16,56,75,.91); }
.public-footer:before { opacity: .13; }

@media (max-width: 900px) {
    .upcoming-server-copy { width: 61%; }
    .upcoming-server-action { width: 22%; }
}

@media (max-width: 620px) {
    .upcoming-server-zone { padding-top: 12px; padding-bottom: 13px; }
    .upcoming-server-emblem { float: none; width: auto; min-height: 0; padding: 12px 10px; border-right: 0; border-bottom: 1px solid #3b6573; }
    .upcoming-server-emblem img { display: inline-block; width: 50px; margin: 0 8px 0 0; vertical-align: middle; }
    .upcoming-server-emblem span { vertical-align: middle; }
    .upcoming-server-copy, .upcoming-server-action { float: none; width: auto; min-height: 0; text-align: center; }
    .upcoming-server-copy { padding: 13px 14px 8px; }
    .upcoming-server-copy h2, .upcoming-server-copy strong { display: block; margin-right: 0; }
    .upcoming-server-copy h2 { font-size: 19px; }
    .upcoming-server-copy strong { margin-top: 3px; font-size: 20px; }
    .upcoming-server-action { padding: 7px 14px 15px; }
    .upcoming-server-action button { max-width: 240px; }
}

@media (max-width: 900px) and (min-width: 621px) {
    .upcoming-server-emblem { width: 105px; }
    .upcoming-server-copy { width: 60%; }
    .upcoming-server-action { width: 20%; }
}


/* M4-v12 — keep the artwork visible; image-backed Grand Line section flow. */
.grand-hero {
    background: #8fd6ea url('../images/theme/crew-wave.jpg') center top no-repeat;
    background-size: cover;
}
.grand-hero:before {
    background: rgba(8,37,54,.07);
    background-image: linear-gradient(to bottom, rgba(6,35,50,.08), rgba(6,35,50,.01) 52%, rgba(6,35,50,.20));
    opacity: 1;
}
.hero-brand-panel { background: rgba(255,248,233,.88); }

.server-campaign-zone {
    position: relative;
    padding: 20px 0 22px;
    overflow: hidden;
    border-top: 1px solid #9b793e;
    border-bottom: 1px solid #c2aa75;
    background: #16495e url('../images/theme/sunny-wave.jpg') center 58% no-repeat;
    background-size: cover;
}
.server-campaign-zone:after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    background: rgba(8,37,54,.72);
    background-image: linear-gradient(to right, rgba(8,37,54,.90), rgba(15,72,92,.62), rgba(8,37,54,.90));
}
.server-campaign-zone.is-open:after {
    background: rgba(9,48,62,.66);
    background-image: linear-gradient(to right, rgba(8,37,54,.88), rgba(28,91,108,.55), rgba(8,37,54,.88));
}
.server-campaign-zone .home-shell { position: relative; z-index: 2; }
.server-campaign-promo {
    min-height: 122px;
    overflow: hidden;
    border: 1px solid #e0a44d;
    border-radius: 9px;
    background: rgba(10,45,61,.86);
    box-shadow: 0 11px 27px rgba(0,0,0,.27);
}
.server-campaign-emblem {
    float: left;
    width: 132px;
    min-height: 120px;
    padding: 24px 18px 12px;
    border-right: 1px solid rgba(224,164,77,.30);
    background: rgba(9,48,65,.78);
    text-align: center;
}
.server-campaign-emblem img { display: block; width: 68px; height: auto; margin: 0 auto 5px; }
.server-campaign-emblem span {
    display: inline-block;
    padding: 3px 9px;
    border: 1px solid #e0a44d;
    border-radius: 10px;
    background: #b94a24;
    color: #fff5d9;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 1.2px;
}
.server-campaign-zone.is-open .server-campaign-emblem span { background: #1a596e; }
.server-campaign-copy { float: left; width: 68%; min-height: 120px; padding: 16px 20px 11px; }
.server-campaign-copy p { margin: 0 0 2px; color: #f0c56a; font-size: 9px; font-weight: bold; letter-spacing: 1.8px; }
.server-campaign-copy h2 { display: inline; margin: 0 9px 0 0; color: #fff3d1; font-family: Georgia, 'Times New Roman', serif; font-size: 22px; }
.server-campaign-copy strong { display: inline; color: #f0c56a; font-family: Georgia, 'Times New Roman', serif; font-size: 21px; }
.server-campaign-copy span { display: block; margin-top: 7px; color: #eef6f3; font-size: 12px; font-weight: bold; }
.server-campaign-copy small { display: block; margin-top: 3px; color: #c5d6d5; font-size: 10px; }
.server-campaign-action { float: right; width: 19%; min-height: 120px; padding: 37px 18px 10px; text-align: right; }
.server-campaign-action button {
    width: 100%; min-height: 43px; padding: 9px 11px;
    border: 1px solid #e0a44d; border-radius: 5px;
    background: #b94a24; color: #fff4d8;
    font-size: 10px; font-weight: bold; text-transform: uppercase;
    box-shadow: 0 3px 0 #74301d;
}
.server-campaign-action button:hover { background: #c85b2c; }

.selected-zone {
    position: relative;
    overflow: hidden;
    background: #f0e9dc url('../images/theme/sunny-wave.jpg') center 70% no-repeat;
    background-size: cover;
}
.selected-zone:before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    background: rgba(248,243,232,.86);
}
.selected-zone .home-shell { position: relative; z-index: 1; }
.selected-server-bar { background: rgba(255,250,240,.93); }

.voyage-zone { background: #e8e4d8 url('../images/theme/sunny-wave.jpg') center 36% no-repeat; background-size: cover; }
.voyage-zone:before { opacity: 0; }
.voyage-zone:after {
    background: rgba(244,239,228,.78);
    background-image: linear-gradient(to bottom, rgba(248,244,235,.84), rgba(235,230,216,.72));
    opacity: 1;
}
.voyage-frame { background: rgba(255,250,240,.91); }

.community-zone { background: #082536 url('../images/theme/crew-wave.jpg') center 48% no-repeat; background-size: cover; }
.community-zone:before { opacity: 0; }
.community-zone:after {
    background: rgba(7,31,45,.84);
    background-image: linear-gradient(to bottom, rgba(8,37,54,.78), rgba(7,31,45,.92));
    opacity: 1;
}
.community-frame { background: rgba(16,56,75,.88); }

@media (max-width: 900px) {
    .server-campaign-copy { width: 61%; }
    .server-campaign-action { width: 22%; }
}
@media (max-width: 620px) {
    .server-campaign-zone { padding-top: 12px; padding-bottom: 13px; }
    .server-campaign-emblem { float: none; width: auto; min-height: 0; padding: 12px 10px; border-right: 0; border-bottom: 1px solid rgba(224,164,77,.30); }
    .server-campaign-emblem img { display: inline-block; width: 50px; margin: 0 8px 0 0; vertical-align: middle; }
    .server-campaign-emblem span { vertical-align: middle; }
    .server-campaign-copy, .server-campaign-action { float: none; width: auto; min-height: 0; text-align: center; }
    .server-campaign-copy { padding: 13px 14px 8px; }
    .server-campaign-copy h2, .server-campaign-copy strong { display: block; margin-right: 0; }
    .server-campaign-copy h2 { font-size: 19px; }
    .server-campaign-copy strong { margin-top: 3px; font-size: 20px; }
    .server-campaign-action { padding: 7px 14px 15px; }
    .server-campaign-action button { max-width: 240px; }
}

/* M4-v13 — remove redundant server blocks, stronger campaign hero, distinct section scenery */
.grand-hero {
    min-height: 680px;
    background-image: linear-gradient(to bottom, rgba(7,37,54,.16), rgba(7,37,54,.08) 35%, rgba(7,37,54,.18)), url('../images/theme/crew-wave.jpg');
    background-position: center top;
}
.hero-brand-panel.hero-server-campaign {
    width: 470px;
    min-height: 0;
    padding: 20px 24px 18px;
}
.hero-campaign-copy { position: relative; z-index: 1; }
.hero-server-campaign .hero-kicker { margin-bottom: 10px; }
.hero-server-campaign h1 { max-width: 420px; font-size: 28px; line-height: 1.14; }
.hero-server-name { display: block; margin-top: 10px; color: #c58d2a; font-family: Georgia, 'Times New Roman', serif; font-size: 22px; line-height: 1.15; }
.hero-note { display: block; margin-top: 7px; color: #5a6f74; font-size: 10px; line-height: 1.45; }
.hero-actions { margin-top: 18px; }

.voyage-zone {
    background: linear-gradient(rgba(245,241,230,.97), rgba(245,241,230,.97)), url('../images/theme/sunny-wave.jpg') center 30% no-repeat;
    background-size: cover;
}
.voyage-zone:after { opacity: .18; }

.community-zone {
    position: relative;
    background: linear-gradient(135deg, #082536 0%, #0c3346 48%, #123f52 100%);
}
.community-zone:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 34%;
    background: url('../images/theme/crew-wave.jpg') left center no-repeat;
    background-size: cover;
    opacity: .16;
}
.community-zone:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30%;
    background: url('../images/theme/sunny-wave.jpg') right center no-repeat;
    background-size: cover;
    opacity: .18;
}
.community-frame {
    background: rgba(11,44,61,.88);
    border-color: rgba(68,113,130,.72);
    box-shadow: 0 18px 36px rgba(0,0,0,.22);
}
.community-intro p,
.community-intro h2,
.community-intro .section-kicker { position: relative; z-index: 1; }
.community-action { background: rgba(17,65,86,.8); border-color: rgba(68,113,130,.74); }
.facebook-frame { box-shadow: 0 12px 24px rgba(0,0,0,.24); }

/* Hide removed legacy sections if cached markup still renders */
.selected-zone,
.server-campaign-zone,
.upcoming-server-zone { display: none !important; }

@media (max-width: 1180px) {
    .hero-brand-panel.hero-server-campaign { width: 420px; }
}
@media (max-width: 900px) {
    .grand-hero, .hero-stage { min-height: 840px; }
    .hero-brand-panel.hero-server-campaign { width: 94%; bottom: 395px; }
    .hero-server-campaign h1 { max-width: none; font-size: 24px; }
    .community-zone:before, .community-zone:after { width: 50%; opacity: .12; }
}
@media (max-width: 620px) {
    .grand-hero, .hero-stage { min-height: 920px; }
    .hero-brand-panel.hero-server-campaign { bottom: 490px; padding-left: 18px; padding-right: 18px; }
    .hero-server-name { font-size: 20px; }
}

/* M4-v14 — visual alignment and original Community art direction. */
.public-nav .nav-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0 1px 0 0;
    line-height: 16px;
    vertical-align: top;
}

.community-zone {
    background-color: #082536;
    background-image: linear-gradient(rgba(5,31,44,.26), rgba(5,31,44,.30)), url('../images/theme/v14/community-nautical.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.community-zone:before,
.community-zone:after { display: none; }
.community-frame {
    background: rgba(8,44,61,.88);
    border-color: rgba(224,164,77,.48);
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.community-action {
    background: rgba(15,64,84,.84);
    border-color: rgba(224,164,77,.28);
}
.community-action:hover {
    background: rgba(25,87,108,.92);
    border-color: rgba(224,164,77,.68);
}

/* The old duplicate campaign/selected strips remain retired. */
.selected-zone,
.server-campaign-zone,
.upcoming-server-zone { display: none !important; }


/* M4-v16 test fix — align the legacy-safe server button with anchor navigation. */
.public-nav .nav-button.nav-server {
    position: static;
    top: auto;
    min-height: 40px;
    padding-top: 11px;
    line-height: 16px;
}




/* M4-v17 final polish — normalize every primary nav item, including the Servers button. */
.public-nav a,
.public-nav .nav-button,
.public-nav .nav-server {
    -webkit-appearance: none;
    appearance: none;
    float: left;
    display: block;
    position: static;
    top: auto;
    width: auto;
    height: 40px;
    min-height: 0;
    margin: 0 1px 0 0;
    padding: 11px 10px 10px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #e5eeee;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    text-transform: uppercase;
    vertical-align: top;
    cursor: pointer;
}
.public-nav a:hover,
.public-nav .nav-button:hover,
.public-nav .nav-server:hover {
    border-bottom-color: #e0a44d;
    color: #fff4d6;
    background: #123f52;
}


@media (max-width: 1180px) {
    .public-nav a,
    .public-nav .nav-button,
    .public-nav .nav-server {
        float: none;
        display: inline-block;
    }
}

/* M5-v1: server entries are real legacy game-launch links. */
.dock-server, .dialog-server-row { text-decoration: none; cursor: pointer; }
.dock-server:hover, .dialog-server-row:hover { text-decoration: none; }

/* M8-v2.3 — authenticated Home exposes the same Play Game picker from the header. */
.account-nav .play-link {
    display: inline-block;
    min-height: 38px;
    margin-left: 5px;
    padding: 10px 12px;
    border: 1px solid #e0a44d;
    border-radius: 4px;
    background: #b94a24;
    color: #fff4d8;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}
.account-nav .play-link:hover { background: #c85b2c; color: #fff; }

/* M8-v2.4 — public header cleanup: Home no longer shows Servers; Play Game becomes a real highlighted button. */
.account-nav .play-link {
    display: inline-block;
    min-height: 38px;
    margin-left: 5px;
    padding: 10px 14px;
    border: 1px solid #e0a44d;
    border-radius: 4px;
    background: #c45728;
    color: #fff4d8;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(255,240,198,.12);
}
.account-nav .play-link:hover {
    background: #d36533;
    color: #fff;
}