/* Liman Imparatorlugu 0.6 — Mediterranean daylight visual system.
   Loaded after the legacy styles. All actions and state remain in the game. */
:root {
  color-scheme: light;
  --bg: #f2f5ef;
  --panel: #fffef9;
  --panel2: #edf5f1;
  --line: #cadbd8;
  --muted: #506c78;
  --text: #183847;
  --mint: #146f80;
  --gold: #a26b13;
  --blue: #23658e;
  --radius: 20px;
  --sea: #0c6c82;
  --sea-deep: #09536a;
  --sea-soft: #e0f1f0;
  --sand: #faf1de;
  --gold-fill: #efbd58;
  --forest: #28724d;
  --terracotta: #b96540;
  --shadow: 0 8px 26px rgba(37,73,78,.06);
  --game-gold: #956018;
}
body {
  background: radial-gradient(ellipse at 100% 0, #dcefeb 0, transparent 40%), var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}
::selection {background:#c4e7e5;color:#133f50}
h1,h2,h3,h4 {color:var(--text)}
h1 {font-size:clamp(26px,2.6vw,37px);letter-spacing:-1.1px;line-height:1.22}
h2 {font-size:21px;line-height:1.35}
h3 {font-size:17px;line-height:1.4}
small {font-size:12px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
.whatsapp-support:focus-visible,.market-pagination button:focus-visible {
  outline:3px solid #05627b;outline-offset:3px;
}
button:disabled,.btn:disabled {opacity:1;cursor:not-allowed;background:#e7ece7;color:#62746e;border-color:#d4dfd8;box-shadow:none;filter:none}
button:disabled svg {color:currentColor}
button:not(:disabled),a,input,select,textarea {touch-action:manipulation}

/* The navigation stays quiet so the harbor and illustrations can lead. */
.sidebar {background:#fffdf6;border-right:1px solid #c9dbd6;padding-top:25px;box-shadow:4px 0 28px #244c5410}
.brand {color:#164653;letter-spacing:1px;margin-bottom:37px;padding:0 3px;gap:10px}
.brand>span:last-child>span {color:#607968;font-size:8px;letter-spacing:2px}
.brand-mark {background:#d9efe8;border:1px solid #acd1c5;color:#125e68;border-radius:14px;width:46px;height:46px;box-shadow:0 3px 0 #c4ddd2}
.brand-emblem {display:block;width:48px;height:48px;object-fit:contain;flex-shrink:0}
.brand-mark:has(.brand-emblem) {padding:0;background:transparent;border:0;box-shadow:none}
.brand-mark .brand-emblem {width:100%;height:100%}
.sidebar-caption {color:#526e61;font-size:10px;letter-spacing:1.5px}
.nav-link {color:#526f77;font-size:14px;min-height:47px;border:1px solid transparent;margin:5px 0;padding:12px 13px}
.nav-link svg {color:#64858b;width:20px;height:20px}
.nav-link:hover {color:#174e5c;background:#eff6ef}
.nav-link.active {color:#0c6175;background:#def0eb;border-color:#b9dcd2;font-weight:750;box-shadow:inset 3px 0 0 #0f7890}
.nav-link.active svg {color:#0c6c82}
.nav-link .nav-label {background:#f7ebce;color:#865a1e;font-size:9px}
.nav-divider {background:#d7e2da;margin:21px 10px 18px}
.captain-card {border-color:#d6e3dc}
.captain-card strong {font-size:13px}
.captain-card div span,.settings-link,.build-label {color:#576f74}
.settings-link {font-size:12px;min-height:44px}
.build-label {font-size:8px;line-height:1.7}
.captain-avatar,.top-avatar,.chat-avatar {background:#dfede4;border-color:#afcabc;color:#215d54}
.online-dot,.nav-link .nav-dot,.build-label span {background:#319267}
.topbar {background:#fffcf3f5;border-color:#cbded8;box-shadow:0 2px 12px #2d555408;min-height:78px}
.breadcrumb {font-size:12px;color:#526e78}
.breadcrumb strong {color:#31525f;font-weight:650}
.topbar-right {gap:13px}
.credit-pill {color:#6b4c14;gap:7px}
.credit-pill>svg {color:#a77716}
.credit-pill>span {color:#806332;font-size:11px}
.credit-pill>button {background:#fff0c8;color:#865b0d;border-color:#dfbd73;width:29px;height:29px}
.wallet-pill {background:#e9f2f3;color:#1c556b;border-color:#bad2d6;padding:9px 11px;font-weight:650}
.wallet-pill svg {color:#246f91}
.wallet-pill small {background:#d9e7e9;color:#526e79;font-size:8px}
.icon-button {color:#375f6b;background:#fffdf8;border-color:#c6d9d8;width:40px;height:40px;flex-shrink:0;border-radius:11px}
.icon-button:hover {background:#e5f1ef}
.notification-button i {background:#218461}
.mobile-brand {color:#154a59;letter-spacing:.4px}
.mobile-brand svg {color:#0d7187}
.mobile-brand .brand-emblem {width:33px;height:33px}
main {padding-top:28px;padding-bottom:28px}
.page-heading {margin-bottom:25px;gap:20px}
.page-heading p {font-size:14px;color:#56717c;max-width:640px;line-height:1.65;margin-top:10px}
.eyebrow,.daily-eyebrow,.profile-kicker {color:#897035;font-size:10px;font-weight:800;letter-spacing:1.6px}
.eyebrow .tiny-dot {background:#27826f}
.level-chip {background:#fff4d9;border-color:#e5ca91;color:#886021;box-shadow:0 3px 0 #ead5a750;padding:12px 15px}
.level-chip small {color:#7a6740;font-size:11px}
.level-chip strong {font-size:14px}
.section-title {gap:14px}
.section-title p {color:#587480;font-size:13px;line-height:1.55}
.section-title h2 {font-size:21px}
.section-art {display:block;flex:0 0 auto;width:160px;max-width:27%;height:130px;object-fit:contain;filter:none}

/* One main action, lighter secondary controls, gold reserved for rewards. */
.btn {background:#edf4ef;border:1px solid #bfd4cc;color:#325b62;min-height:46px;font-size:14px;font-weight:700;padding:11px 15px;border-radius:11px;box-shadow:0 2px 0 #cadbd14d;line-height:1.35}
.btn:hover {background:#e0eee7;border-color:#a6c7be;color:#204c57}
.btn.primary {background:#0c6c82;border-color:#0c6c82;color:#fff;box-shadow:0 3px 0 #064e641c}
.btn.primary:hover {background:#09576e;border-color:#09576e;color:#fff}
.btn.gold,.game-screen .gold {background:#efbd58;border:1px solid #d3a143;color:#533b13;box-shadow:0 3px 0 #ba8c342e}
.btn.gold:hover,.game-screen .gold:hover {background:#f5cc77;border-color:#cca04a;color:#4d3510}
.btn.ghost {background:#fffef9;border-color:#bfd2ce;color:#335b66;box-shadow:none}
.btn.ghost:hover {background:#edf5ef;border-color:#98beb5;color:#1b5260}
.btn.danger {background:#fff0e9;border-color:#dfb4a5;color:#9c4034}
.btn.danger:hover {background:#fae2d8;color:#87372d}
.btn.small {font-size:13px;min-height:42px;padding:9px 12px}
.btn svg {width:17px;height:17px}
.btn.primary:disabled,.btn.gold:disabled,.game-screen .gold:disabled {background:#e7ece7;color:#68776e;border-color:#d6dfd7;box-shadow:none}
.text-link {color:#196d83;font-size:13px;font-weight:650}
.text-link:hover {color:#094a63}
.text-mint,.net-preview {color:#196c51}
.form-error {color:#a53f33;font-size:13px}
.inline-help,.fee-note,.inline-price,.balance-small {color:#57727a;font-size:13px;line-height:1.65}
.badge {background:#e8f0ef;color:#45656e;font-size:10px;letter-spacing:.4px;border:1px solid #d4e2dd;padding:5px 8px;line-height:1.2}
.badge.green {background:#e2f1e4;color:#286442;border-color:#bfddc7}
.badge.gold {background:#fff0cc;color:#855b17;border-color:#e7cd96}
.badge.purple,.commission-pill {background:#eeebf8;color:#695884;border-color:#d3cce4}
.mood-chip {background:#e5f2e5;color:#306a4c;border-color:#c4dbc8;font-size:11px}
.notice {background:#fff4da;border-color:#e7d2a2;color:#715329;font-size:13px;line-height:1.65;border-radius:12px;padding:14px 16px}
.notice.blue {background:#e9f3f6;border-color:#c4dbe1;color:#315e73}
.notice svg {flex-shrink:0;margin-top:2px}
.panel,.facility-card,.market-card,.shop-card,.mission-card {background:#fffef9;border-color:#cbded6;box-shadow:var(--shadow)}
.panel-head {padding:20px 22px}
.panel-head h2 {font-size:18px}
.panel-head p {font-size:13px;color:#5d7981}
.stat {background:#fffdf6;border-color:#ccded6;box-shadow:0 3px 12px #3c646106}
.stat-icon {background:#e4f1e3;color:#387147}
.stat-icon.gold {background:#fff0c9;color:#946414}
.stat-icon.blue {background:#e1f0f5;color:#337ba0}
.stat-icon.purple {background:#eeeafa;color:#7b6b9c}
.stat-info>span {font-size:12px;color:#52717a}
.stat-info strong small {color:#526e78;font-size:11px}
.stat-trend {color:#207455;font-size:11px}
.stat-trend.muted {color:#526e78}

/* Productive land and workshops — warm architecture on pale natural surfaces. */
.expansion-nav {padding:5px;gap:7px;margin-bottom:23px;width:fit-content;max-width:100%;background:#e7eeE5;border:1px solid #d0dfd3;border-radius:14px}
.expansion-nav .btn,.world-route .expansion-nav .btn {background:#fffdf6;color:#38616a;border:1px solid #c5d8cf;box-shadow:0 1px 2px #33574d08;font-size:12px;min-height:43px;padding:10px 13px;border-radius:9px}
.expansion-nav .btn:hover,.world-route .expansion-nav .btn:hover {background:#dcefe9;color:#0e667a;border-color:#a8cec3}
.expansion-nav .btn svg {color:#368179}
.resource-estate {background:linear-gradient(120deg,#edf5e7,#f8f5e9);border-color:#c4d8bb;border-radius:24px;padding:26px;box-shadow:var(--shadow)}
.expansion-heading {margin-bottom:24px;gap:18px}
.expansion-heading h2,.exchange-banner h2,.chapter-hero h2,.captain-next-step h3,.project-card h2 {font-family:'Manrope',system-ui,sans-serif;font-weight:800;color:#264a4d;letter-spacing:-.7px;line-height:1.25}
.expansion-heading h2 {font-size:30px}
.expansion-heading p,.exchange-banner p,.chapter-hero p,.captain-next-step p,.project-card p {color:#536f72;font-size:14px;line-height:1.65}
.estate-grid {gap:15px}
.estate-card {background:#fffef8;border-color:#c8dccc;border-radius:17px;padding:15px;gap:10px;box-shadow:0 4px 11px #3d634910}
.estate-card h3 {font-size:17px;color:#234946;line-height:1.35}
.estate-card p {color:#75602d;font-size:13px;font-weight:650;line-height:1.5}
.estate-card small {font-size:12px;color:#617b70;line-height:1.55}
.estate-card .btn {font-size:13px;min-height:45px;margin-top:auto}
.estate-card .btn:last-child {background:#fff9eb;border-color:#dccb9b;color:#795b26;margin-top:0}
.estate-card .btn:last-child:hover {background:#fff0cf}
.estate-card .btn:disabled,.estate-card .btn:last-child:disabled {background:#edf0e9;border-color:#d4decf;color:#68786c}
.estate-art {min-height:125px;height:auto;aspect-ratio:1.25;border-radius:13px;background:radial-gradient(ellipse at 50% 62%,#f8e9bf,#edf1df);overflow:hidden;padding:8px 8px 24px}
.estate-art svg {color:#877151;filter:none;width:56px;height:56px}
.estate-art > span:not(.building-sprite) {background:#fffdf3eF;color:#53735d;font-size:10px;font-weight:700;letter-spacing:.5px;border:1px solid #d7dfc4;border-radius:5px;padding:3px 6px;left:7px;bottom:7px}
.estate-forest .estate-art {background:radial-gradient(ellipse,#e1f2c8,#e7f0de)}
.estate-farm .estate-art {background:radial-gradient(ellipse,#ffebb8,#f8f0d9)}
.estate-card .building-sprite {width:100%;max-width:180px;flex-shrink:0;filter:none}
.facility-card {padding:22px;border-radius:20px}
.facility-head {gap:14px;align-items:center}
.facility-head h3 {font-size:19px}
.facility-head p {font-size:13px;line-height:1.55;color:#56727b}
.facility-head .resource-icon {width:57px;height:57px;border-radius:14px}
.resource-icon {color:#567265;background:color-mix(in srgb,var(--resource,#96b6a7) 22%,#fffdf4);border:1px solid color-mix(in srgb,var(--resource,#96b6a7) 50%,#d5e3d5);filter:none}
.resource-icon svg {color:color-mix(in srgb,var(--resource,#6f947a) 58%,#173c4a)}
.recipe-line {background:#f3f5e9;border-color:#d7dec5;padding:17px 12px;border-radius:12px;flex-wrap:wrap}
.recipe-line>.icon {color:#8b9b83}
.need {background:#edf4eb;color:#426351;border-color:#c9dac9;font-size:12px;padding:6px 8px;border-radius:7px}
.need.missing {background:#fff0e4;color:#9b5434;border-color:#e6c2a8}
.facility-actions {gap:9px}
.facility-actions .btn {font-size:13px}
.economy-banner {background:linear-gradient(110deg,#e3f0e8,#eef5ef);border-color:#bbd4c8;color:#285549;border-radius:17px;padding:19px 23px}
.economy-banner>svg {color:#24786b}
.economy-banner h3 {font-size:17px;color:#25584d}
.economy-banner p {color:#58796d;font-size:13px}
.quick-item {background:#f5f6ed;border-color:#d3dfd0;border-radius:13px}
.quick-top span {color:#577b68;font-size:12px}
.quick-item .btn {font-size:12px;min-height:42px}
.stockbar {background:#f1f5e8;border-color:#d4dfc7}
.stockbar-title {color:#58736a;font-size:12px}
.stock-item {color:#355d52;font-size:13px}
.stock-item span {color:#57776d;font-size:11px}
.stock-item svg {color:color-mix(in srgb,var(--resource,#639171) 55%,#244851)}

/* Fleet: actual ship silhouettes remain unfiltered and visually prominent. */
.fleet-grid {gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
.fleet-card {background:linear-gradient(155deg,#e1f2f0 0,#fffdf5 72%);border-color:#bfd7d3;border-radius:22px;padding:20px;box-shadow:0 7px 24px #295f680d;min-width:0}
.fleet-card:nth-child(3n+2) {background:linear-gradient(155deg,#e6f1f8 0,#fffdf5 72%)}
.fleet-card:nth-child(3n+3) {background:linear-gradient(155deg,#faf0d6 0,#fffdf5 72%)}
.fleet-card .fleet-top {gap:8px;flex-wrap:wrap;margin-bottom:4px}
.fleet-card .badge {font-size:10px}
.fleet-card .ship-art {filter:none;max-width:100%}
.fleet-card img.ship-art {height:205px;margin:7px auto 12px;object-fit:contain}
.fleet-card .ship-art.ship-sprite {width:100%;margin:4px auto 12px;max-width:290px;filter:none}
.fleet-card h3 {font-size:21px;color:#1c5261;letter-spacing:-.5px}
.fleet-card p {font-size:13px;color:#57747c;line-height:1.6;margin:6px 0 17px}
.progress {background:#d8e6df;height:7px;border-radius:8px}
.progress>span {background:#1e8b94;border-radius:8px}
.progress.gold>span {background:#c99a39}
.progress-caption {font-size:12px;color:#607a7f;gap:10px;line-height:1.5}
.fleet-add,.fleet-card.fleet-add {background:linear-gradient(150deg,#f9f9ef,#e9f4ed);border:2px dashed #b9cfc4;box-shadow:none;min-height:300px}
.fleet-add>svg {color:#72a49a;width:45px;height:45px}
.fleet-add h3 {font-size:21px}
.fleet-add p {max-width:210px;text-align:center}
.fleet-add .btn {font-size:14px}
.contract-card {background:#fffdf8;border-color:#cbdcd7;border-radius:17px;padding:18px;box-shadow:0 3px 14px #3c666508}
.contract-top {gap:10px;flex-wrap:wrap}
.contract-top h3 {font-size:17px}
.contract-top p {font-size:12px;color:#526e78}
.contract-top .route-time {font-size:12px;color:#5d7984}
.city-icon {background:#e0eef2;border-color:#c0d6df;color:#336e85;width:43px;height:43px;border-radius:12px;font-size:12px}
.city-icon.gold {background:#fbecd0;border-color:#e4c999;color:#916531}
.reward {color:#8e631f;font-size:17px}
.reward small {color:#827044;font-size:11px}
.contract-bottom {gap:12px;flex-wrap:wrap}
.contract-bottom .btn {font-size:13px}
.shop-image {height:210px;background:radial-gradient(ellipse at center,#fff9df,#dfefeb 76%);padding:10px}
.shop-image .ship-art {filter:none}
.shop-image img.ship-art {height:190px}
.shop-image .ship-art.ship-sprite {width:min(100%,240px)}
.shop-body h3 {font-size:19px}
.shop-body p {color:#587680;font-size:13px;line-height:1.55}
.shop-bottom strong {color:#835f27}
.shop-bottom .btn {font-size:13px}

/* Market: sea tones for trading, distinct amber price/reward treatments. */
.exchange-banner {background:linear-gradient(110deg,#e3f1ee,#f8f7eb);border-color:#bdd8cf;border-radius:22px;padding:22px 26px;margin-bottom:25px;position:relative;overflow:hidden}
.exchange-banner h2 {font-size:29px;max-width:670px;margin:7px 0 9px}
.exchange-banner p {max-width:750px}
.exchange-banner small {font-size:12px;color:#577570;margin-top:10px}
.exchange-banner .btn {margin:10px 8px 3px 0}
.tabs {background:#e7efec;border-color:#c7d9d2;border-radius:13px;padding:5px;gap:4px}
.tabs button {color:#526f79;font-size:13px;min-height:44px;border-radius:9px}
.tabs button.active {background:#fffef9;color:#0f647c;box-shadow:0 2px 7px #234e5713;font-weight:750}
.tabs button:hover {background:#f5faf4}
.market-card {padding:20px;border-radius:18px}
.market-product {gap:12px;min-width:0}
.market-product h3 {font-size:17px;line-height:1.35}
.market-product small {color:#5f7a83;font-size:12px}
.market-product .resource-icon {width:48px;height:48px;border-radius:13px}
.market-price strong {color:#234e5c}
.market-price span {color:#5b7780;font-size:13px}
.market-price small {color:#29724d;font-size:12px}
.market-price small.negative {color:#a25538}
.market-card .btn {font-size:13px;min-height:44px;padding:10px 12px}
.qty-input {background:#fffef9;border-color:#bcd2ce;border-radius:10px}
.qty-input button {color:#245d6e;background:#eff6ef;width:39px;height:43px;font-size:19px}
.qty-input button:hover {background:#deeee5}
.qty-input input {color:#234c5b;font-size:15px;min-height:43px}
.market-note {font-size:12px;color:#526e78;gap:10px;flex-wrap:wrap}
.market-unit-price,.market-seller-rating {font-size:13px;color:#5c7881;line-height:1.55}
.market-purchase-summary {background:#edf6ef;border-color:#c5dbcd;border-radius:15px;padding:18px}
.market-purchase-summary h3 {font-size:19px}
.market-purchase-summary p {font-size:14px;color:#466d68}
.market-filter.market-filter-expanded {margin-top:12px;gap:12px}
.market-pagination {gap:12px;margin:20px 0}
.market-pagination span {color:#526e78;font-size:13px}
.exchange-balances {gap:12px;margin-bottom:17px}
.exchange-balances strong {background:#fff2d2;border-color:#e0c792;color:#795c22;border-radius:14px;padding:15px;font-size:19px}
.exchange-balances strong+strong {background:#e9f2f8;border-color:#c4d9e4;color:#2b657f}
.exchange-balances small {color:#6b765d;font-size:12px;line-height:1.5}
.exchange-balances strong+strong small {color:#526e78}
.exchange-filter {background:#f3f7f0;border:1px solid #d2dfd1;border-radius:14px;padding:14px;gap:12px}
.exchange-filter .field>span {font-size:13px}
.exchange-filter .btn {font-size:13px}
.exchange-toolbar {gap:9px;margin:17px 0}
.exchange-toolbar .btn {min-height:43px;font-size:13px}
.exchange-toolbar .btn:not(:first-child) {background:#fffef9;border-color:#c5d9d2;color:#426c72;box-shadow:none}
.exchange-toolbar .btn:not(:first-child):hover {background:#eaf4ef}
.exchange-orders {gap:15px}
.exchange-order {background:#fffef9;border-color:#c6dcd3;border-radius:16px;padding:18px;box-shadow:0 3px 12px #305d5707;min-width:0;margin-bottom:14px}
.exchange-order h3 {font-size:20px;color:#285563;line-height:1.35}
.exchange-order h3 span {color:#526e61;font-size:13px}
.exchange-order p {color:#54767c;font-size:14px;line-height:1.6}
.exchange-order small {color:#526e78;font-size:12px}
.exchange-order-head .badge {font-size:10px}
.exchange-order .btn {min-height:46px;font-size:14px}
.order-price strong {color:#8d641d;font-size:23px}
.feed-row {color:#57767f;font-size:12px}
.feed-row strong {color:#254f5f;font-size:12px}
.feed-row small {color:#526e78;font-size:11px}
.feed-row .feed-avatar {background:#e0ece6;color:#47716b}
.feed-row .feed-price {color:#8a6627}
.listing-row p {color:#5c7a82;font-size:12px}
.listing-price {color:#855e20;font-size:15px}
.trade-rate {color:#58796b;font-size:12px}
.economy-stats>div {background:#eef5e9;border-color:#ceddc0;border-radius:15px}
.economy-stats span {color:#587168;font-size:12px}
.economy-stats strong {color:#806327;font-size:21px}
.supply-stock>span {color:#536e67;font-size:13px}
.supply-stock>i {background:#dbe8d6}
.supply-stock b {background:linear-gradient(90deg,#368561,#84b17a)}
.supply-offer p {color:#5b797a;font-size:13px}

/* Captain ledger, money and forms never sit on almost-black panels. */
.wallet-card {background:radial-gradient(ellipse at 90% 0,#fff5d3,transparent 60%),linear-gradient(120deg,#e4f2ec,#f6f7e8);border-color:#bed6c5;box-shadow:var(--shadow);border-radius:22px}
.wallet-card .wallet-label {font-size:12px;color:#4d7161}
.wallet-card .balance {color:#285e5a}
.wallet-card .balance sub {color:#597b6d}
.wallet-card .account-line {color:#57756a;border-color:#bdcfbd;font-size:12px}
.wallet-card .btn {font-size:13px}
.wallet-info-row {color:#5d7780;font-size:13px}
.wallet-info-row strong {color:#284f5e;font-size:13px;font-weight:700}
.transaction-icon {background:#e5eff4;color:#427b97}
.transaction-icon.credit {background:#e3f0e1;color:#337346}
.transaction-date {color:#526e78;font-size:12px}
.transaction-amount.credit {color:#28704d}
.fee-breakdown {background:#f4f7ef;border-color:#ccdccc;border-radius:12px;padding:15px 16px}
.fee-breakdown>div {color:#5a7476;font-size:13px;gap:15px;line-height:1.55;padding:6px 0}
.fee-breakdown strong {color:#294f5b;font-weight:650;text-align:right}
.fee-breakdown>div:last-child {color:#345f57;border-color:#cbd9c8;margin-top:8px;padding-top:12px}
.fee-breakdown>div:last-child strong {color:#176950}
.reference-box {background:#f4f9ef;border-color:#a7c6b7;padding:17px;border-radius:13px}
.reference-box small {color:#657c64;font-size:12px}
.reference-box strong {color:#296e61;font-size:20px;overflow-wrap:anywhere}
.reference-box p {color:#5c7972;font-size:13px}
.field {gap:7px;min-width:0}
.field>span {color:#3e626f;font-size:14px;font-weight:650}
.field input,.field select,.field textarea,#team-create textarea,.chat-form input {
  background:#fffef9;color:#244d5d;border:1px solid #adc7c7;border-radius:11px;min-height:48px;font-size:16px;max-width:100%;box-shadow:inset 0 1px 2px #31535b05;
}
.field input:focus,.field select:focus,.field textarea:focus,.chat-form input:focus {border-color:#168199;background:#fff}
.field input::placeholder,.field textarea::placeholder,.chat-form input::placeholder {color:#526e78;opacity:1}
.field small {color:#526e78;font-size:12px;line-height:1.55}
.field input:disabled,.field select:disabled,.field textarea:disabled {color:#526e61;background:#eff2e9;opacity:1}
.amount-presets {gap:8px;flex-wrap:wrap}
.amount-presets button {background:#eef5ed;border-color:#c4d8cc;color:#40665f;font-size:13px;min-height:43px;border-radius:9px}
.amount-presets button:hover {background:#e0f0e4;border-color:#95bfb1;color:#0e6b76}
.settings-row {color:#355d69;font-size:14px;border-color:#d3e0d8;gap:14px}
.settings-row .btn {font-size:13px}
.referral-link input {color:#176f75;background:#fffef7;font-size:14px}
.account-summary span,.top-mini-notice {color:#58766e;font-size:12px}
.admin-summary {background:#e3f0df;color:#37634c;border:1px solid #bbd3b7}
.admin-summary strong {color:#785d24}
.admin-request {background:#f1f6ec;border-color:#c5d9c7}
.admin-request>small,.audit-list small {color:#607a74;font-size:12px}
.audit-list p,.review-trades {border-color:#cbdcd5}
.report-link {color:#93633f;font-size:12px}
.review-trade p {color:#4f747b;font-size:14px}
.review-trade button {background:#fff3d7;color:#94651c;border-color:#dfc590}

/* Social areas use softer paper surfaces and readable message bubbles. */
.chat-panel {background:#fffef9;min-height:520px}
.chat-messages {background:linear-gradient(#fffef9,#f8faf4);padding-top:14px}
.chat-meta strong {color:#2b5662;font-size:13px}
.chat-meta small {color:#526e78;font-size:11px}
.chat-avatar,.friend-row .chat-avatar {background:#e0eee8;color:#417a6a;font-size:13px;border:1px solid #c2dacf}
.chat-message.self .chat-avatar {background:#fff0c9;color:#8e6927;border-color:#e8cc90}
.chat-bubble {background:#edf3f3;color:#355d6b;border:1px solid #d9e5e2;border-radius:4px 14px 14px 14px;font-size:14px;line-height:1.65;padding:11px 14px}
.chat-message.self .chat-bubble {background:#e3f1df;color:#365f48;border-color:#c9dfc1}
.chat-form {background:#f7faf2;border-color:#d0e0d2;padding:17px}
.chat-form .btn {min-height:48px}
.chat-suggestions {gap:8px}
.chat-suggestions button {background:#f0f6ee;color:#4f786d;border-color:#ccdfd1;min-height:40px;font-size:12px;border-radius:9px}
.friend-row {border-color:#d3e0d6;gap:12px}
.friend-row strong {color:#2f5c64}
.friend-row small {color:#526e78;font-size:12px}
.friend-row .btn {min-height:43px;font-size:12px}
.friend-tabs span {color:#526e78;font-size:11px}
.friend-tabs strong {color:#375d6b;font-size:12px}
.friend-invite {background:#edf6e9;border-color:#c5dcc2;border-radius:15px}
.profile-card p {color:#526e78;font-size:13px}
.profile-card h3 {font-size:20px}
.profile-stats span {color:#526e78;font-size:12px}
.rating {color:#956a22;font-size:13px}
.profile-editor {background:radial-gradient(ellipse at top right,#f8e6bd,#e7f3ec);border-color:#c2d8c8;border-radius:20px}
.profile-editor small {color:#5b7b77;font-size:13px}
.profile-editor>.captain-avatar {border-color:#d4b36b}
.league-hero {background:radial-gradient(ellipse at top,#fff0c7,#f5f6e9);border-color:#dfcca0;border-radius:20px}
.league-hero>svg,.league-hero>span {color:#976915}
.league-hero p {color:#627a70;font-size:14px}
.rank-row {border-color:#d2e0d7;padding:16px 13px;min-width:0}
.rank-row>strong,.rank-row:nth-child(-n+3)>strong {color:#8c641b}
.rank-row small {color:#526e78;font-size:12px}
.rank-row.mine {background:#e2f1e8;border:1px solid #afd4c2;border-radius:13px}
.team-hero {background:radial-gradient(ellipse at top,#d5eeed,#f0f5eb);border-color:#bdd7cf;border-radius:20px}
.team-emblem {background:#fff0cc;border-color:#dcc28c;box-shadow:0 5px 0 #bfcfc450}
.team-emblem svg {color:#806520}
.team-hero p {color:#52767d;font-size:14px}
.team-hero>div {color:#6d622e}
.team-join,.team-card {background:#f9fbf1;border-color:#c4d9c8;border-radius:16px}
.team-card p {color:#57747c;font-size:14px}
.team-card small {color:#8c6925}
.team-member,.team-request {background:#f3f8ef;border-color:#c8dccc;border-radius:13px}
.team-member small,.team-request small {color:#526e61}
.team-leave {border-color:#cbded0}
.auth-welcome {background:linear-gradient(125deg,#e3f1ec,#fff1d5);border-color:#bfd8ca;border-radius:16px}
.auth-welcome>svg {color:#9c7627}
.auth-welcome p {color:#537680;font-size:14px}

/* Goals and shared construction have legible, different states. */
.chapter-hero,.captain-next-step {background:linear-gradient(125deg,#fff3d5,#f3f6e8);border-color:#dfcca0;border-radius:20px}
.chapter-hero {padding:23px}
.chapter-hero h2 {font-size:25px;margin:9px 0}
.chapter-hero .btn {margin-top:13px;background:#fffaf0;color:#866a2c;border-color:#d9c699;box-shadow:none}
.chapter-hero .btn:disabled {background:#edf0e7;color:#637565;border-color:#cbd8c7}
.captain-next-step h3 {font-size:25px}
.captain-next-step p {font-size:14px}
.daily-board {background:linear-gradient(125deg,#e6f4ee,#f9f6e8);border-color:#bddacc;border-radius:22px;padding:23px}
.daily-board-head h2 {color:#265d58;font-size:24px}
.daily-board-head p {color:#5b7b77;font-size:14px}
.daily-count {background:#fff1ca;border-color:#e0c58a;color:#8c651b}
.daily-count span {color:#897345;font-size:10px}
.daily-task {background:#fffef7;border-color:#c8ddd1;border-radius:15px;padding:17px;box-shadow:0 3px 10px #3b615406}
.daily-task.ready {background:#fffae9;border:2px solid #d9b456}
.daily-task.claimed {background:#edf5e8;border-color:#b9d2b3}
.daily-task-top .icon {color:#458c77}
.daily-task-top strong {color:#5a7c70;font-size:12px}
.daily-task h3 {color:#28565e;font-size:17px}
.daily-task p {color:#5c7b7b;font-size:13px;line-height:1.6}
.daily-task .progress {background:#deeadc}
.daily-task .progress span {background:#c69c3f}
.daily-task-reward {color:#8a6520;font-size:13px;font-weight:700}
.daily-task-reward small {color:#627a64;font-size:12px;font-weight:400}
.daily-task .btn {min-height:45px}
.daily-bonus {color:#567768;border-color:#cbdcc5;font-size:13px}
.daily-bonus strong {color:#936f23}
.daily-dialog .daily-board {padding:17px}
.mission-card>svg {color:#a88128}
.mission-card p {color:#5e7a81;font-size:13px}
.mission-card .btn {font-size:14px;min-height:46px}
.project-card {background:linear-gradient(145deg,#eff5e9,#fff9e9);border-color:#c9d9bd;border-radius:21px;padding:22px;min-width:0;max-width:100%;box-shadow:0 4px 18px #3c644908}
.project-card h2 {font-size:27px;color:#466044;margin:11px 0}
.project-card p {font-size:14px;line-height:1.65}
.project-card>small {color:#526e61;font-size:12px;line-height:1.55}
.project-card.complete {background:linear-gradient(125deg,#e7f5e3,#fbf8e4);border-color:#8fb888}
.project-art {color:#9d822e;background:radial-gradient(ellipse,#f7e5b0,transparent 70%);text-shadow:none;border-radius:15px;max-width:100%}
.project-art img {max-width:100%;width:100%;height:auto;object-fit:contain;filter:none}
.weekly-row {display:grid;grid-template-columns:minmax(0,1fr) auto;border-color:#d0dec7;gap:13px;padding:16px 0;min-width:0}
.weekly-row>span {color:#456b5b;font-size:14px;min-width:0;overflow-wrap:anywhere}
.weekly-row small {color:#526e61;font-size:12px}
.weekly-row .btn {min-width:0;max-width:none;width:auto;white-space:normal;font-size:13px;min-height:45px}
.order-card {background:#fffdf5;border-color:#d3dec8;border-radius:16px}
.order-card p {color:#5b776e;font-size:14px}
.order-card strong,.order-card>svg {color:#997422}
.adventure-links button {background:#fffdf2;border-color:#d5dcc0;color:#385d58;border-radius:17px;box-shadow:var(--shadow)}
.adventure-links svg {color:#a17c25}
.adventure-links span {color:#526e61;font-size:13px}
.aside-promo {background:linear-gradient(125deg,#eef2dd,#fff5d9);border-color:#d3d8b6;border-radius:18px}
.aside-promo>svg {color:#819c62;opacity:.2}
.aside-promo .eyebrow {color:#6f6d3b;font-size:10px}
.aside-promo h3 {color:#4c5e37;font-size:18px}
.aside-promo p {color:#6b7a54;font-size:13px;line-height:1.6}
.activity-row>svg {color:#448a66}
.activity-row p {color:#456e71;font-size:13px}
.activity-row small {color:#526e78;font-size:11px}

/* Daylight harbor HUD. The world art remains the main visual. */
.game-screen {background:#67c9dd;color:#153f53;--game-gold:#9d7021}
.game-header {background:#fff9edf5;border-bottom:1px solid #bed8cc;color:#164d5c;box-shadow:0 3px 15px #184c5610}
.captain-portrait {border-color:#d2b26e;background:#e6efe1}
.game-title h1 {color:#174e5b}
.game-title h1 span {color:#947025}
.game-title p {color:#537373}
.captain-xp {background:#dae5ce}
.captain-xp i {background:#399c8b}
.game-gold {background:#fff3d5;border-color:#e0c990;color:#815f1d;box-shadow:0 2px 0 #dfc88e20}
.game-gold svg {color:#a27720}
.game-gold small {color:#8a723a}
.game-settings {background:#eff6ec;border-color:#bdd3c7;color:#3e6b6b}
.game-wallet {background:#fffdf2f5;border-color:#bed9cc;color:#294f5e;box-shadow:0 5px 20px #164d5716;backdrop-filter:blur(4px)}
.game-wallet-label {color:#527268}
.game-wallet-label>span {background:#dfefdd;color:#397147}
.game-wallet-values>strong {color:#164f60}
.game-wallet-values>button {border-color:#cadaca;color:#34636b}
.game-wallet-values>button span {color:#526e61}
.game-wallet-main>p {color:#526e61}
.game-wallet-actions .ghost {background:#eef5e9;border-color:#c2d5b7;color:#426955}
.game-wallet-actions .btn {font-size:14px}
.game-session-bar>button {background:#fffdf0f2;border-color:#b8d5c6;color:#315f62;box-shadow:0 3px 8px #123f4d12;backdrop-filter:none}
.game-session-bar>button.session-register {background:#efbd58;border-color:#d7ac59;color:#5d4217}
.game-map .world-spot,.world-spot {background:#fffdf1f5;border-color:#9dbdac;color:#325e54;box-shadow:0 4px 10px #0c49512e;backdrop-filter:none;border-radius:12px}
.game-map .world-spot:hover,.world-spot:hover {background:#fff8de;color:#315c4c}
.game-map .world-spot svg {color:#397c72}
.game-map .world-spot small {color:#537843}
.world-spot em {color:#8a6c30;font-size:10px}
.world-spot.upgraded {filter:drop-shadow(0 2px 4px #c5ad6855)}
.game-map-tools button,.map-tools button {background:#fffaf0f5;border-color:#afcdc0;color:#386c75;box-shadow:0 3px 8px #174a5120}
.game-quests,.game-puzzle-link,.game-dispatch {background:#fffdf3f5;border-color:#b7d3c5;color:#315b60;box-shadow:0 3px 13px #244e511b}
.game-quests>svg,.game-puzzle-link svg {color:#a78130}
.game-quests>svg:last-child {color:#526e61}
.game-quests small {color:#526e61}
.dispatch-info h2 {color:#245765}
.dispatch-info p {color:#5b777e}
.dispatch-info .ready {color:#38734d}
.dispatch-info .missing {color:#a16238}
.dispatch-info>button {color:#3d7682;min-height:31px}
.dispatch-ship {background:#e0f1ef;border:1px solid #c4ded4}
.dispatch-ship .ship-art {filter:none}
.harbor-growth {filter:none;opacity:1}
.harbor-growth span {background:#fff8e9ee;border-color:#c4d3b7;color:#516540;font-size:11px;box-shadow:0 2px 4px #36564015}
.home-trade-copy {color:#5b7780;font-size:14px}
.map-heading,.map-caption {background:#edf6ee;color:#577c74;border-color:#c7ddd0}
.map-heading svg,.live-label {color:#287e63}
.map-heading small {color:#526e61;font-size:11px}
.live-label {font-size:10px}
.live-label:before {background:#329365;box-shadow:none}
.map-panel {border-color:#bdd9cf}
.map-bottom {background:#fffdf1ee;border-color:#b5d4c2;color:#365d5f}
.map-bottom p {color:#526e61;font-size:12px}
.map-bottom .mission-icon {background:#fff0c3;color:#9d781e}
.weather-pill {background:#fffaf0eF;border-color:#c4d9c4;color:#5d7556}
.weather-sun {color:#b58b28}
.spot-plus {background:#daeede;color:#356d51}
.spot-dot {background:#ad873a}
.cargo-toolbar {color:#57747d}
.cargo-tile {background:linear-gradient(#fce7b5,#efd494);border-color:#d5b467;color:#795d26;box-shadow:0 3px 0 #c4a96844;border-radius:14px}
.cargo-tile:hover {background:#ffedc1}
.cargo-empty {background:#eef3e9;border:1px dashed #b5cab9;box-shadow:none}
.mobile-nav {background:#fffdf6f7;border-top:1px solid #bad3c9;box-shadow:0 -5px 20px #234f5810;backdrop-filter:blur(12px)}
.mobile-nav a {color:#557980;font-weight:600}
.mobile-nav a.active {background:#def0e9;color:#0d6980}
.mobile-nav a.active:before {background:#0d6980}

/* Modal and overlays: paper, readable forms, no horizontal clipping. */
dialog {background:#fffef8;border:1px solid #b6d0c7;color:#183f50;width:min(580px,calc(100vw - 28px));max-width:calc(100vw - 28px);max-height:90dvh;border-radius:22px;box-shadow:0 24px 90px #173f4b38;overflow-x:hidden;scrollbar-color:#91b9ac #edf3ea}
dialog::backdrop {background:#1d465778;backdrop-filter:blur(5px)}
dialog::-webkit-scrollbar-thumb {background:#98bdb0;border:2px solid #f0f5ec;border-radius:12px}
dialog::-webkit-scrollbar-track {background:#f0f5ec}
#modal-content {min-width:0;max-width:100%}
.modal-head {padding:22px 23px 18px;border-color:#d4e2d6;gap:14px;background:#fffef8;position:sticky;top:0;z-index:8;border-radius:21px 21px 0 0}
.modal-head>div {min-width:0}
.modal-head h2 {font-size:23px;line-height:1.3;color:#234f5d;overflow-wrap:anywhere}
.modal-head p {font-size:13px;line-height:1.6;color:#526e78;margin-top:6px}
.modal-head .icon-button {width:38px;height:38px;flex-shrink:0}
.modal-body {padding:21px 23px 24px;min-width:0;max-width:100%;color:#365b65}
.modal-body>* {min-width:0;max-width:100%}
.modal-body h3 {font-size:17px;color:#335b62;line-height:1.4}
.modal-body .stock-item {background:#f0f6e9;border:1px solid #d2dfc5;color:#526e56;border-radius:10px}
.modal-body hr {border-color:#d0e0d2}
.modal-actions {gap:10px;flex-wrap:wrap}
.modal-actions .btn {min-height:46px;font-size:14px;min-width:0;white-space:normal}
.modal-body .notice {font-size:13px}
dialog:has(.exchange-orders) {width:min(940px,calc(100vw - 36px));max-width:calc(100vw - 36px)}
.help-step>span {background:#e3f1e3;color:#38755d;border-color:#bed9c3;width:32px;height:32px}
.help-step strong {color:#365e65}
.help-step p {color:#526e78;font-size:13px}
.empty-state>svg {color:#78a099;width:38px;height:38px}
.empty-state h3 {color:#436e75;font-size:18px}
.empty-state p {color:#526e78;font-size:14px;line-height:1.65;max-width:360px}
.toast {background:#e8f4e3;color:#366347;border-color:#9dbf99;box-shadow:0 8px 28px #35584426;font-size:14px;border-radius:13px}
.toast.error {background:#fff0e7;color:#9c4d36;border-color:#d8a28b}
.whatsapp-support {background:#22704f;color:#fff;border-color:#99c7a9;box-shadow:0 4px 12px #285d4318;font-size:14px;min-height:48px}
.whatsapp-support:hover {background:#185b3f;color:#fff}
.support-row {border-color:#d1e1d5}
.support-row small {color:#526e61;font-size:12px}
.app-footer {color:#526e78;font-size:11px;line-height:1.6}
.app-footer button {color:#51777b;font-size:12px;min-height:40px}
.app-footer i {background:#419667}

/* Adapt the composition, rather than shrinking every item on small phones. */
@media(min-width:900px) {
  dialog:has(.exchange-orders) .exchange-orders {grid-template-columns:repeat(2,minmax(0,1fr))}
  dialog:has(.exchange-orders) .exchange-filter:not(.compact-filter) {grid-template-columns:1fr 1fr 1fr 1.25fr;align-items:end}
  dialog:has(.exchange-orders) .exchange-filter:not(.compact-filter) .btn {grid-column:1/-1;justify-self:end;min-width:150px}
  .modal-body .project-art img {max-height:235px}
}
@media(max-width:1100px) {
  .fleet-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .estate-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  .section-art {width:130px;height:115px}
  .page-heading h1 {font-size:30px}
}
@media(max-width:767px) {
  body {font-size:15px}
  main {padding:20px 16px 24px}
  .topbar {min-height:66px;height:66px;padding:0 13px;gap:8px;backdrop-filter:blur(10px)}
  .topbar-right {gap:8px;min-width:0}
  .mobile-brand {gap:5px;font-size:13px;flex-shrink:0}
  .credit-pill {gap:4px;font-size:12px;white-space:nowrap}
  .credit-pill strong {font-size:14px}
  .credit-pill>svg {width:17px;height:17px}
  .wallet-pill {font-size:12px;padding:8px 7px;gap:4px}
  .wallet-pill svg {width:15px;height:15px}
  .page-heading {margin-bottom:23px;gap:12px;align-items:flex-start}
  .page-heading h1 {font-size:28px;letter-spacing:-.8px}
  .page-heading p {font-size:14px;line-height:1.6}
  .section-art {width:95px;height:100px;max-width:27%}
  .eyebrow {font-size:10px;letter-spacing:1.3px}
  .expansion-nav {display:grid;grid-template-columns:1fr 1fr;width:100%;padding:5px;gap:6px;margin-bottom:23px}
  .expansion-nav .btn,.world-route .expansion-nav .btn {font-size:12px;padding:10px 7px;min-height:43px;gap:6px;white-space:normal}
  .expansion-nav .btn svg {width:16px;height:16px}
  .panel-head {padding:18px}
  .panel-head h2 {font-size:18px}
  .panel-head p {font-size:13px}
  .btn,.btn.small {font-size:14px;min-height:46px}
  .btn svg {width:17px;height:17px}
  .facility-card {padding:18px}
  .facility-head h3 {font-size:19px}
  .facility-head p {font-size:13px}
  .facility-actions .btn {font-size:13px;min-height:46px}
  .resource-estate {padding:18px;margin:20px 0 25px;border-radius:20px}
  .expansion-heading h2 {font-size:27px}
  .expansion-heading p {font-size:14px}
  .estate-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .estate-card {padding:13px;border-radius:15px;gap:10px}
  .estate-card h3 {font-size:16px}
  .estate-card p,.estate-card small {font-size:12px}
  .estate-card .btn {font-size:12px;min-height:46px;padding:10px}
  .estate-art {min-height:120px;aspect-ratio:1.1}
  .fleet-grid {gap:15px}
  .fleet-card {padding:17px;border-radius:20px}
  .fleet-card h3 {font-size:20px}
  .fleet-card p {font-size:13px}
  .fleet-card .badge {font-size:10px}
  .fleet-card img.ship-art {height:180px}
  .fleet-card .ship-art.ship-sprite {max-width:250px}
  .fleet-add,.fleet-card.fleet-add {min-height:255px}
  .fleet-add .btn {font-size:14px}
  .contract-card {padding:17px}
  .contract-top h3 {font-size:17px}
  .contract-top p,.contract-top .route-time {font-size:12px}
  .contract-bottom .btn {font-size:14px;min-height:45px}
  .need {font-size:12px}
  .reward {font-size:18px}
  .reward small {font-size:12px}
  .tabs {margin-bottom:19px}
  .tabs button {font-size:12px;min-height:59px;padding:9px 5px;line-height:1.3}
  .tabs svg {width:18px;height:18px}
  .market-card {padding:18px}
  .market-card .btn {font-size:13px;min-height:44px}
  .market-product h3 {font-size:17px}
  .market-product small,.market-note {font-size:12px}
  .market-product .resource-icon {width:44px;height:44px}
  .market-price>span {font-size:13px}
  .exchange-banner {padding:20px;border-radius:19px}
  .exchange-banner h2 {font-size:25px;line-height:1.3}
  .exchange-banner p {font-size:14px}
  .exchange-banner .btn {font-size:13px;min-height:45px;margin-top:9px}
  .exchange-banner small {font-size:12px}
  .exchange-balances strong {font-size:18px;padding:13px;gap:5px}
  .exchange-balances small {font-size:11px}
  .exchange-toolbar .btn {font-size:13px;min-height:44px;padding:10px 12px}
  .exchange-filter {padding:12px;gap:10px}
  .exchange-filter .field>span {font-size:13px}
  .exchange-filter input,.exchange-filter select {font-size:16px}
  .exchange-order {padding:17px}
  .exchange-order h3 {font-size:19px}
  .exchange-order p {font-size:14px}
  .wallet-card {padding:23px}
  .wallet-card .wallet-buttons .btn {font-size:14px;min-height:46px}
  .wallet-info-row,.wallet-info-row strong {font-size:13px}
  .chat-layout {gap:18px}
  .chat-meta strong {font-size:14px}
  .chat-meta small {font-size:11px}
  .chat-bubble {font-size:14px;padding:10px 12px}
  .chat-form {padding:14px;gap:8px}
  .friend-row .btn {font-size:13px;min-height:44px}
  .profile-card p,.profile-stats span {font-size:12px}
  .social-hub .btn {font-size:13px;min-height:46px}
  .daily-board {padding:18px;border-radius:19px}
  .daily-board-head h2 {font-size:22px}
  .daily-board-head p {font-size:13px}
  .daily-task {padding:16px}
  .daily-task h3 {font-size:17px}
  .daily-task p {font-size:13px}
  .daily-task .btn {font-size:13px;min-height:45px}
  .project-card {padding:17px}
  .project-card h2 {font-size:25px}
  .project-card p {font-size:14px}
  .game-header {background:#fffaf0f5;padding:9px 12px;height:74px;gap:7px}
  .game-gold {padding:7px 8px;min-height:46px}
  .game-wallet {padding:11px;gap:8px;border-radius:15px}
  .game-wallet-values>strong {font-size:29px}
  .game-wallet-main>p {font-size:10px}
  .game-wallet-actions .btn {font-size:13px;min-height:44px;padding:9px}
  .game-wallet-values>button span {font-size:11px}
  .game-wallet-values b {font-size:15px}
  .game-map .world-spot {font-size:14px;min-height:45px;padding:8px 10px}
  .game-session-bar>button {font-size:12px;min-height:44px}
  .game-dispatch {padding:10px;gap:8px;border-radius:14px}
  .dispatch-info h2 {font-size:20px}
  .dispatch-info p {font-size:12px}
  .dispatch-info>button {font-size:12px}
  .mobile-nav {min-height:78px;height:calc(78px + env(safe-area-inset-bottom));padding:7px 7px calc(7px + env(safe-area-inset-bottom));gap:3px}
  .mobile-nav a {font-size:12px;min-height:60px;gap:4px;padding:5px 2px;border-radius:13px}
  .mobile-nav a svg {width:25px;height:25px}
  dialog,dialog:has(.exchange-orders) {width:calc(100vw - 20px);max-width:calc(100vw - 20px);max-height:calc(100dvh - 26px);border-radius:19px}
  dialog::backdrop {background:#234b5a80;backdrop-filter:blur(3px)}
  .modal-head {padding:18px 17px 16px;border-radius:18px 18px 0 0;gap:10px}
  .modal-head h2 {font-size:22px;line-height:1.3}
  .modal-head p {font-size:12px;line-height:1.6}
  .modal-head .icon-button {width:36px;height:36px}
  .modal-body {padding:17px}
  .modal-body .btn,.modal-actions .btn {font-size:14px;min-height:46px}
  .modal-body .field>span {font-size:14px}
  .modal-body .field input,.modal-body .field select {font-size:16px}
  .fee-breakdown>div {font-size:13px;gap:13px}
  .modal-body .project-art img {max-height:230px}
  .settings-row {font-size:14px;gap:12px}
  .settings-row>.btn {font-size:12px}
  .app-footer {font-size:10px;padding:18px 16px 22px;gap:12px;flex-wrap:wrap}
  .whatsapp-support {font-size:13px}
}
@media(max-width:600px) {
  .weekly-row {grid-template-columns:1fr;gap:10px;padding:16px 0}
  .weekly-row .btn {width:100%;max-width:100%;font-size:14px}
  .weekly-row>span {font-size:14px}
  .project-card {overflow-wrap:anywhere}
  .captain-next-step {padding:20px}
  .captain-next-step h3 {font-size:24px}
  .section-art {width:88px;height:88px}
  .market-filter.market-filter-expanded {grid-template-columns:1fr 1fr}
  .market-filter-expanded .field:first-child {grid-column:1/-1}
  .market-filter-expanded .btn {grid-column:1/-1}
}
@media(max-width:479px) {
  .fleet-grid {grid-template-columns:1fr}
  .fleet-card {padding:19px 21px}
  .fleet-card .fleet-top {flex-wrap:nowrap}
  .fleet-card .ship-art.ship-sprite {width:100%;max-width:260px}
  .fleet-card img.ship-art {height:225px}
  .fleet-card h3 {font-size:22px}
  .fleet-card p {font-size:14px}
  .fleet-card .badge {font-size:11px}
  .fleet-add,.fleet-card.fleet-add {min-height:245px;padding:25px}
  .fleet-add p {max-width:240px}
  .page-heading .section-art {width:78px;height:83px;max-width:25%}
  .resource-estate {padding:16px}
  .estate-card {padding:12px}
  .estate-art {min-height:105px;padding:5px 5px 22px}
  .estate-card h3 {font-size:15px}
  .estate-card p {font-size:12px}
  .estate-card .btn {font-size:12px}
  .game-wallet-values {gap:8px}
  .game-wallet-values>strong {font-size:27px}
  .dispatch-send {min-width:75px}
  .dispatch-info {min-width:0}
  .dispatch-info p {white-space:normal;line-height:1.35}
  .game-session-bar>button {padding:8px 10px}
  .exchange-toolbar {display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .exchange-toolbar .btn:first-child {grid-column:1/-1}
  .exchange-toolbar .btn {font-size:12px;white-space:normal}
  .exchange-toolbar .btn:last-child:nth-child(even) {grid-column:1/-1}
  .fee-breakdown {padding:13px}
}
@media(max-width:359px) {
  main {padding:18px 12px 22px}
  h1,.page-heading h1 {font-size:26px}
  .page-heading .section-art {width:64px;height:72px;max-width:24%}
  .page-heading p {font-size:14px}
  .topbar {padding:0 8px;gap:5px}
  .topbar-right {gap:5px}
  .mobile-brand {font-size:12px;gap:4px}
  .mobile-brand .brand-emblem {width:27px;height:29px}
  .credit-pill {gap:3px}
  .credit-pill strong {font-size:12px}
  .credit-pill>svg {width:16px;height:16px}
  .wallet-pill {padding:8px 6px;font-size:11px;gap:3px}
  .wallet-pill svg {width:14px;height:14px}
  .icon-button {width:36px;height:38px}
  .expansion-nav {gap:5px;margin-bottom:21px}
  .expansion-nav .btn,.world-route .expansion-nav .btn {font-size:12px;min-height:45px;gap:5px;padding:9px 6px}
  .estate-grid {grid-template-columns:1fr}
  .estate-card {padding:17px;gap:10px}
  .estate-art {aspect-ratio:1.4;min-height:155px;max-height:205px;padding:8px 8px 26px}
  .estate-card .building-sprite {max-width:190px}
  .estate-card h3 {font-size:19px}
  .estate-card p,.estate-card small {font-size:13px}
  .estate-card .btn {font-size:14px;min-height:46px}
  .expansion-heading h2 {font-size:26px}
  .fleet-card {padding:17px}
  .fleet-card img.ship-art {height:210px}
  .fleet-card h3 {font-size:21px}
  .fleet-card .badge {font-size:10px}
  .recipe-line {padding:13px 9px;gap:8px}
  .need {font-size:11px;padding:6px}
  .market-filter.market-filter-expanded {grid-template-columns:1fr}
  .market-card {padding:16px}
  .market-card .btn {font-size:12px}
  .tabs button {font-size:11px;min-height:62px;white-space:normal}
  .exchange-banner {padding:17px}
  .exchange-banner h2 {font-size:24px}
  .exchange-banner .btn {width:100%;margin-right:0;font-size:13px}
  .exchange-balances {grid-template-columns:1fr;gap:10px}
  .exchange-balances strong {font-size:18px;padding:12px}
  .exchange-balances small {font-size:12px}
  .exchange-filter {grid-template-columns:1fr;padding:12px}
  .exchange-toolbar {grid-template-columns:1fr 1fr}
  .exchange-toolbar .btn {font-size:12px}
  .game-header {padding:8px;gap:5px}
  .game-title h1 {font-size:16px}
  .game-gold {padding:7px 6px;gap:3px}
  .game-gold svg {width:19px;height:19px}
  .game-gold strong {font-size:13px}
  .game-gold small {font-size:11px}
  .game-settings {min-width:34px}
  .game-wallet {padding:10px 8px;gap:5px}
  .game-wallet-label {font-size:9px}
  .game-wallet-values {gap:6px}
  .game-wallet-values>strong {font-size:23px}
  .game-wallet-values>button {padding-left:7px}
  .game-wallet-values>button span {font-size:10px}
  .game-wallet-values b {font-size:13px}
  .game-wallet-main>p {font-size:9px}
  .game-wallet-actions .btn {font-size:12px;padding:8px 7px;gap:4px;min-height:43px}
  .game-wallet-actions .btn svg {width:14px;height:14px}
  .dispatch-info h2 {font-size:18px}
  .dispatch-info p {font-size:11px}
  .dispatch-ship {width:53px}
  .dispatch-send {min-width:68px;font-size:14px}
  .mobile-nav a {font-size:11px;min-width:0}
  .mobile-nav a svg {width:24px;height:24px}
  dialog,dialog:has(.exchange-orders) {width:calc(100vw - 14px);max-width:calc(100vw - 14px);max-height:calc(100dvh - 20px);border-radius:16px}
  .modal-head {padding:16px 14px 14px;gap:9px;border-radius:15px 15px 0 0}
  .modal-head h2 {font-size:21px}
  .modal-head p {font-size:12px}
  .modal-body {padding:15px 14px}
  .modal-body .field input,.modal-body .field select,.modal-body .field textarea {font-size:16px;padding:12px}
  .modal-body .btn,.modal-actions .btn {font-size:13px;min-height:46px}
  .modal-actions {gap:8px}
  .project-card {padding:15px}
  .project-card h2 {font-size:24px}
  .project-card p {font-size:14px}
  .daily-board-head h2 {font-size:21px}
  .daily-board-head {align-items:flex-start}
  .daily-count {width:50px;height:50px}
  .daily-task {padding:15px}
  .daily-task .btn {width:100%;font-size:14px}
  .fee-breakdown>div {font-size:12px;gap:10px;align-items:flex-start}
  .fee-breakdown strong {max-width:48%;overflow-wrap:anywhere}
  .settings-row {gap:9px;flex-wrap:wrap}
  .settings-row>.btn {margin-left:auto}
  .profile-editor {padding:17px;gap:12px}
  .friend-row {gap:8px}
  .friend-row .btn {font-size:12px;padding:9px}
  .avatar-controls {flex-wrap:wrap}
  .avatar-controls .btn {font-size:13px;white-space:normal}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

/* Keep all disabled actions visibly distinct from available actions. */
.btn:disabled,.btn.ghost:disabled,.btn.danger:disabled,.exchange-toolbar .btn:disabled,.game-wallet-actions .btn:disabled,.chapter-hero .btn:disabled {background:#e7ece7;color:#5f7068;border-color:#cbd8cd;box-shadow:none;opacity:1}

/* Atlas and compact layouts introduced by the 0.6 frontend. These selectors
   intentionally separate illustrated spans from overlaid HTML labels. */
.estate-art {height:auto;aspect-ratio:auto;min-height:125px;max-height:none;display:grid;place-items:center;padding:7px 7px 31px}
.estate-art>.building-sprite {position:static;inset:auto;display:block;width:min(100%,205px);max-width:100%;height:auto;min-height:0;aspect-ratio:1;margin:0;padding:0;border:0;border-radius:0;opacity:1;transform:none;filter:none;background-color:transparent;background-image:url('assets/buildings-daylight-atlas.webp');background-size:300% 300%;background-position:var(--bx,0%) var(--by,0%);background-repeat:no-repeat}
.estate-art>span:not(.building-sprite) {position:absolute;left:7px;right:7px;bottom:7px;margin:0;max-width:calc(100% - 14px);text-align:center}
.page-heading .section-art {display:grid;place-items:center;flex:0 0 128px;width:128px;max-width:22%;height:128px}
.section-art>.building-sprite {position:static;width:100%;height:auto;aspect-ratio:1;padding:0;border:0}
.exchange-banner.exchange-entry {padding:19px 22px;margin:18px 0 24px;gap:17px;border-radius:19px}
.exchange-entry .exchange-entry-copy h2 {font-size:22px;line-height:1.3;margin:5px 0 7px;max-width:none}
.exchange-entry .exchange-entry-copy p {font-size:14px;line-height:1.55;margin:0}
.exchange-entry-actions .btn {margin:0;font-size:13px;min-height:44px;min-width:0;white-space:normal;line-height:1.35}
.exchange-filter.compact-filter .exchange-filter-main>.btn {grid-column:3;grid-row:1;justify-self:stretch;min-width:0;margin:0;min-height:48px}
.exchange-balances.compact-balances {padding:0!important;margin-bottom:14px!important}
.exchange-goods-name {flex-wrap:wrap;column-gap:8px;row-gap:4px}
.exchange-goods-name>span {flex-basis:100%;padding-left:39px;margin-top:0!important}
.shop-image {height:250px;padding:10px}
.shop-image .ship-art.ship-sprite {width:min(100%,225px);max-width:225px;height:auto;aspect-ratio:1;max-height:none;margin:0 auto}
@media(max-width:767px) {
  .page-heading .section-art {width:88px;flex-basis:88px;height:90px;max-width:24%}
  .page-heading .section-emblem {display:none}
  .shop-image {height:210px}
  .shop-image .ship-art.ship-sprite {width:min(100%,185px);max-width:185px}
}
@media(max-width:700px) {
  .exchange-filter.compact-filter .exchange-filter-main>.btn {grid-column:2;grid-row:1;min-height:48px}
  .exchange-banner.exchange-entry {padding:17px;gap:12px;margin:15px 0 21px}
  .exchange-entry .exchange-entry-copy h2 {font-size:19px}
  .exchange-entry-actions .btn {font-size:13px;margin:0}
}
@media(max-width:479px) {
  .page-heading .section-art {display:none}
  .exchange-entry .exchange-entry-copy h2 {font-size:18px}
  .exchange-entry .exchange-entry-copy p {font-size:13px}
  .exchange-entry-actions .btn {font-size:12px;min-height:45px}
}
@media(max-width:359px) {
  .estate-art {min-height:175px;max-height:none;padding:8px 8px 31px}
  .estate-art>.building-sprite {width:min(100%,190px);max-width:190px}
  .dispatch-ship {width:53px;flex-basis:53px}
  .exchange-entry-actions {flex-direction:column}
  .exchange-entry-actions .btn {width:100%;font-size:13px;margin:0}
}

/* Six primary destinations, including Filo, remain visible on a 320px phone.
   At 320px this gives each link about 50px of width and 60px of height. */
@media(max-width:767px) {
  .mobile-nav {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch;gap:3px;padding-left:7px;padding-right:7px}
  .mobile-nav a {min-width:44px;min-height:60px;width:auto;max-width:100%;font-size:12px;line-height:1.25;gap:5px;padding:5px 1px}
  .mobile-nav a svg {width:24px;height:24px}
  .mobile-nav a:focus-visible {outline:3px solid #05627b;outline-offset:-3px}
  .mobile-nav a.active:before {left:50%;transform:translateX(-50%)}
}
@media(max-width:359px) {
  .mobile-nav {gap:2px;padding-left:6px;padding-right:6px}
  .mobile-nav a {font-size:11px;min-width:44px;min-height:60px;gap:5px}
  .mobile-nav a svg {width:23px;height:23px}
}

/* A background-only span has no intrinsic grid width. Give resource artwork a definite containing block. */
.estate-art{display:block}
.estate-art>.building-sprite{width:100%;max-width:205px;margin:0 auto}