/* Maven RO website-ui.1 (2026-09-27, owner: "Make the UI of the Website page more efficient and clean when login on mobile
 * iOS/Android on landscape mode ... i dont want too much scroll ... make the UI for mobile ios/Android and desktop more
 * clean"). Overrides only: the site bundle is untouched. Loaded after the older overlays by /index.html.
 *   1. phones (<= 900 px wide): ONE header row (the account links sit in the logo row, the "MAVEN" word hides);
 *   2. phones in landscape (<= 540 px tall): every page is compacted so the first screen shows content, not chrome;
 *   3. phones in portrait: lighter compaction;
 *   4. desktop: "Choose how to play" shows Browser + Desktop Client only (site-ui.js sends phones straight to the game);
 *   5. the Cashpoints exchange card on /marketplace (site-ui.js).
 * website-ui.2: account page and server info compacted in landscape (menu as one row), narrow-phone header without
 *   "Create account" (the hero and the menu carry it), the account link to the exchange. */

/* ---------------------------------------------------------------- 1. one header row on phones */
@media (max-width: 900px) {
  .portal-header { position: relative; }
  .portal-utility {
    position: absolute; top: 0; right: 112px; left: auto; z-index: 3;
    height: 56px; width: auto; padding: 0; margin: 0;
    background: transparent; border: 0; box-shadow: none;
  }
  .portal-utility .portal-word { display: none; }
  .portal-utility .portal-account { gap: 10px; height: 56px; align-items: center; }
  .portal-utility .portal-account > * { min-height: 40px; display: inline-flex; align-items: center; font-size: 13px; }
  .portal-mast { height: 56px; }
  .portal-logo, .portal-logo.official-maven-logo { overflow: visible; }   /* the logo image keeps its designed overflow */
  .portal-menu-button { min-height: 42px; }
  .portal-utility .portal-account > a { white-space: nowrap; }
  .portal-utility .portal-account > a[href="/account"] { display: inline-block; max-width: 130px; overflow: hidden; text-overflow: ellipsis; line-height: 40px; }
}
@media (max-width: 440px) {                                   /* narrow phones: the hero and the menu carry "Create account" */
  .portal-utility .portal-account > a[href="/register"] { display: none; }
  .portal-utility .portal-login span { display: none; }
}
@media (max-width: 380px) {                                   /* very narrow: keep the account links on their own row */
  .portal-utility { position: static; height: 34px; right: auto; padding: 0 14px; justify-content: flex-end; display: flex; }
  .portal-utility .portal-account { height: 34px; }
}

/* ---------------------------------------------------------------- 2. phones in landscape */
@media (orientation: landscape) and (max-height: 540px) {
  .portal-mast { height: 48px; }
  .portal-utility, .portal-utility .portal-account { height: 48px; }
  .portal-menu-button { min-height: 38px; padding-top: 4px; padding-bottom: 4px; }

  /* home */
  .portal-home { padding-top: 10px !important; }
  .portal-home .adventure { margin-top: 0 !important; height: calc(100svh - 64px); min-height: 250px; max-height: 380px; }
  .portal-home .adventure__art, .portal-home .adventure__art img { height: 100% !important; }
  .portal-home .adventure__art img { object-fit: cover; }
  .portal-home .adventure__copy { padding: 14px 22px !important; height: 100%; min-height: 0 !important; display: flex; flex-direction: column; justify-content: center; }
  .portal-home .portal-eyebrow { margin-bottom: 6px !important; }
  .portal-home #adventure-title { font-size: 26px !important; line-height: 1.04 !important; }
  .portal-home .adventure__intro { margin: 8px 0 10px !important; font-size: 13.5px !important; line-height: 1.35; }
  .portal-home .adventure__note { margin-top: 8px !important; }
  .portal-home .adventure__actions .portal-button, .portal-home .adventure__actions a { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .portal-home .world-strip {
    margin-top: 10px !important; padding: 8px 14px !important;
    display: grid !important; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); align-items: center; gap: 6px 10px; min-height: 0 !important;
  }
  .portal-home .world-strip__status { padding: 0 !important; border: 0 !important; margin: 0 !important; }
  .portal-home .world-stat { min-height: 0 !important; padding: 0 !important; border: 0 !important; }
  .portal-home .world-stat strong { font-size: 18px !important; }
  .portal-home .portal-content { margin-top: 16px !important; }
  .portal-home .dispatches, .portal-home .journey { padding: 14px 16px !important; }
  .portal-home .portal-section-heading { margin-bottom: 10px !important; }
  .portal-home .field-guide { margin-top: 16px !important; }
  .portal-home .guide-tile { padding: 14px 16px !important; min-height: 0 !important; }
  .portal-home .portal-finale { display: none !important; }            /* repeats the hero's Play button; phones skip it */
  .portal-home .journey ol { margin: 6px 0 !important; }
  .portal-home .journey h2, .portal-home #journey-title { font-size: 22px !important; }
  .portal-home .journey__star { display: none !important; }
  /* Marketplace "Coming soon": short, so the Cashpoints exchange shows on the first screen */
  .mm-soon { padding: 12px 18px !important; margin-top: 6px !important; min-height: 0 !important; }
  .mm-soon h1 { font-size: 24px !important; margin: 2px 0 4px !important; }
  .mm-soon p { margin: 4px 0 8px !important; font-size: 14px !important; }
  .mm-soon a { min-height: 36px; padding-top: 6px !important; padding-bottom: 6px !important; }

  /* interior pages: page head, panels */
  .ui-route { padding-bottom: 20px !important; }
  .ui-head { margin-bottom: 12px !important; }
  .ui-head__inner { padding-top: 10px !important; padding-bottom: 10px !important; min-height: 0 !important; }
  .ui-head__inner h1, .ui-head h1 { font-size: 26px !important; line-height: 1.1 !important; margin-top: 2px !important; }
  .ui-panel, .dash-panel, .play-option, .server-info-stats > div { padding: 14px 16px !important; }
  .dashboard, .topup-page { padding-top: 12px !important; padding-bottom: 24px !important; }
  .dash-welcome { margin-bottom: 12px !important; }
  .dash-welcome h1 { font-size: 20px !important; margin-bottom: 0 !important; }
  .dash-welcome > div > p:not(.dash-eyebrow) { display: none !important; }
  /* account: the side menu becomes one scrollable row (the phone-portrait layout), content takes the full width */
  .dash-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  .dash-sidebar { position: static !important; border-radius: 4px !important; }
  .dash-player, .dash-sidebar-foot { display: none !important; }
  .dash-sidebar nav { display: flex !important; flex-wrap: nowrap; overflow-x: auto; padding: 4px 6px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .dash-sidebar nav::-webkit-scrollbar { display: none; }
  .dash-sidebar nav a { flex: 0 0 auto; white-space: nowrap; border-left: 0 !important; border-bottom: 2px solid transparent; min-height: 40px !important; padding: 6px 12px !important; font-size: 14px !important; }
  .dash-sidebar nav a.active { border-bottom-color: var(--brand); }
  .dash-sidebar nav a > span { display: none !important; }
  .dash-content { gap: 12px !important; }
  .dash-two { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .cash-wallet-grid { margin: 8px 0 10px !important; gap: 10px !important; }
  .cash-wallet-grid > div { padding: 10px 14px !important; }
  .cash-wallet-grid h3 { font-size: 15px !important; margin-bottom: 2px !important; }
  .cash-wallet-grid strong { font-size: 28px !important; }
  .cash-wallet-grid p { margin-top: 2px !important; font-size: 12.5px !important; }
  .dash-feature { padding: 14px 18px !important; }
  .dash-feature h2 { font-size: 22px !important; margin-bottom: 6px !important; }
  .dash-feature p:not(.dash-eyebrow) { margin-bottom: 10px !important; font-size: 14px !important; }
  .dash-feature img { width: 110px !important; }
  .dash-panel-head { margin-bottom: 10px !important; }
  .topup-hero { padding: 14px 18px !important; }
  .topup-hero h1 { font-size: 28px !important; margin-bottom: 8px !important; }
  .topup-hero img { max-height: 84px; width: auto; }
  .server-info { padding-top: 12px !important; padding-bottom: 20px !important; }
  .server-info-intro { margin-bottom: 12px !important; font-size: 16px !important; }
  .server-info-columns { margin: 14px 0 !important; gap: 14px !important; }
  .server-info-features { margin: 18px 0 !important; }
  .server-info h2 { font-size: 21px !important; margin-bottom: 10px !important; }
  .server-info-stats > div { padding: 10px 14px !important; }
  .server-info-stats strong { font-size: 24px !important; }
  .server-info-stats span { margin-bottom: 4px !important; }
  .server-info-note { margin: 8px 0 10px !important; }
  .server-info-columns dl { margin: 6px 0 8px !important; }
  .server-info-columns dt, .server-info-columns dd { padding-top: 5px !important; padding-bottom: 5px !important; }
  .server-info-columns dd { font-size: 15px !important; line-height: 1.4 !important; }
  .server-info-online { margin: 12px 0 !important; }
  .server-info-actions { margin-top: 12px !important; }
  .server-info-features > div { gap: 12px !important; }
  .server-info-features article { padding: 12px 16px !important; }
  .server-info-features h3 { font-size: 18px !important; margin-bottom: 4px !important; }
  .server-info-features p, .server-info-steps { font-size: 14.5px !important; line-height: 1.45 !important; }
  .server-info-steps li + li { margin-top: 6px !important; }

  /* "Choose how to play" (only desktop-sized landscape tablets reach it; phones go straight to the game) */
  .play-options { padding-top: 4px !important; gap: 12px !important; }
  .play-option__screen, .play-option__desktop, .play-option__phone { transform: scale(.72); margin: -14px auto !important; }
  .play-account-note { margin: 12px 0 16px !important; }

  /* sign-in / register */
  [data-auth="true"] .event-auth__body, [data-auth="true"] .ui-auth { padding-top: 6px !important; padding-bottom: 6px !important; }

  /* footer */
  .portal-footer { padding: 14px 16px 12px !important; }
  .portal-footer__inner { padding: 6px 0 !important; gap: 8px 16px !important; }
  .portal-footer nav a { min-height: 36px; }
  .portal-legal { padding-top: 6px !important; margin-top: 4px !important; }
}

/* ---------------------------------------------------------------- 3. phones in portrait: lighter compaction */
@media (max-width: 640px) and (orientation: portrait) {
  .portal-home { padding-top: 12px !important; }
  .ui-head { margin-bottom: 16px !important; }
  .ui-head__inner { padding-top: 14px !important; padding-bottom: 14px !important; }
  .ui-route { padding-bottom: 28px !important; }
  .dashboard, .topup-page { padding-top: 18px !important; padding-bottom: 32px !important; }
  .dash-welcome { margin-bottom: 18px !important; }
  .portal-home .portal-finale { padding: 36px 20px !important; }
  .portal-footer { padding: 22px 18px 18px !important; }
}

/* ---------------------------------------------------------------- 4. desktop: two ways to play */
html.mvs-desktop .play-option--mobile { display: none !important; }
html.mvs-desktop .play-options--three { grid-template-columns: repeat(2, minmax(0, 340px)) !important; justify-content: center; }

/* ---------------------------------------------------------------- 5. Cashpoints exchange card (/marketplace) */
.mvs-cash { max-width: 760px; margin: 18px auto 8px; padding: 20px 22px; background: #fff; border: 1px solid rgb(30 48 73 / .12);
  border-radius: 6px 18px; box-shadow: 0 10px 30px rgb(22 61 90 / .08); font-family: inherit; color: var(--text, #253c58); text-align: left; }
.mvs-cash h2 { margin: 0 0 4px; font-size: 22px; color: var(--text-strong, #1e3049); }
.mvs-cash .mvs-cash__lede { margin: 0 0 14px; color: var(--text-muted, #4a6b88); font-size: 14.5px; }
.mvs-cash__row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 10px 0; }
.mvs-cash__bal { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; }
.mvs-cash__pill { background: var(--sky-50, #f2fafe); border: 1px solid var(--sky-200, #bfe5fa); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 14px; }
.mvs-cash__pill b { color: var(--sky-700, #0e6ba0); font-size: 16px; margin-left: 4px; }
.mvs-cash select, .mvs-cash input[type=number] { min-height: 42px; border: 1px solid rgb(30 48 73 / .22); border-radius: 8px; padding: 0 12px; font: inherit; background: #fff; width: auto; }
.mvs-cash input[type=number] { width: 120px; }
.mvs-cash__seg { display: inline-flex; border: 1px solid var(--sky-300, #93d2f7); border-radius: 10px; overflow: hidden; }
.mvs-cash__seg button { border: 0; background: #fff; padding: 10px 14px; font: inherit; font-weight: 700; color: var(--sky-800, #14527a); cursor: pointer; min-height: 42px; }
.mvs-cash__seg button[aria-pressed="true"] { background: var(--sky-600, #0e86c6); color: #fff; }
.mvs-cash__btn { border: 1px solid #68b2d2; border-radius: 3px 12px; min-height: 44px; padding: 10px 20px; font: inherit; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #2588b9, #145f97); }
.mvs-cash__btn[disabled] { opacity: .5; cursor: not-allowed; }
.mvs-cash__btn--quiet { background: #fff; color: var(--sky-800, #14527a); border-color: var(--sky-300, #93d2f7); }
.mvs-cash__btn--gold { background: linear-gradient(120deg, #ffdf8f, #edbf59); color: #343623; border-color: #ffeeb9; }
.mvs-cash__msg { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--sky-50, #f2fafe); font-size: 14px; }
.mvs-cash__msg[data-tone="bad"] { background: #fdeeea; color: #8e2c1f; }
.mvs-cash__msg[data-tone="good"] { background: #eaf6d5; color: #3c6419; }
.mvs-cash__note { font-size: 13px; color: var(--text-faint, #6b87a1); margin: 8px 0 0; }
@media (orientation: landscape) and (max-height: 540px) { .mvs-cash { margin-top: 10px; padding: 14px 16px; } .mvs-cash h2 { font-size: 19px; } }
/* the account page's "Your Cashpoints" panel links to the exchange */
.mvs-cash-cta { margin: 10px 0 0; font-size: 15px; font-weight: 700; }
.mvs-cash-cta a { color: var(--brand-deep, #14527a); }