/* War room home: slim command bar, smaller faction tanks, army rank, and one tile
   each for Army, Store, Tournament, Alliance, Top 50 and the Daily contract. */

/* ---------- Command bar */
.phone-ui .phone-menu-head { height: 46px; flex: 0 0 46px; gap: 8px; padding: 0 2px; border-bottom: 1px solid #ffffff14; background: linear-gradient(180deg, #0d151fe6, #0d151f00); }
.phone-ui .phone-menu-head .phone-brand { font: 800 21px/1 'Barlow Condensed', sans-serif; letter-spacing: 2px; color: #f4ead7; white-space: nowrap; text-shadow: 0 2px 6px #000; }
.phone-ui .phone-menu-head .phone-page-title { flex: 1; text-align: left; font: 700 13px 'Chakra Petch', sans-serif; color: #9fb0c0; letter-spacing: .5px; text-transform: uppercase; padding-left: 10px; border-left: 1px solid #ffffff24; margin-left: 2px; }
.phone-ui .phone-menu-head[data-page="home"] .phone-page-title { visibility: hidden; }
.phone-ui .phone-menu-head .phone-menu-toggle { min-height: 36px; border-radius: 8px; border-color: #3d556b; background: linear-gradient(180deg, #1b2a3b, #121d29); font: 700 13px 'Chakra Petch', sans-serif; letter-spacing: .5px; }
.phone-ui .phone-menu-head .phone-nav .phone-menu-toggle { padding: 6px 12px; color: #e8e2d4; }

.phone-ui .phone-account-menu .phone-commander-chip { max-width: 250px; gap: 8px; padding: 3px 10px 3px 3px; justify-content: flex-start; border-color: #8a6d36; background: linear-gradient(180deg, #2a2316, #17140f); }
.phone-chip-portrait { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; object-position: top; border: 1px solid #f2c46a; background: #23303d; flex: none; }
.phone-chip-copy { display: flex; flex-direction: column; min-width: 0; text-align: left; line-height: 1.05; }
.phone-chip-name { font: 800 15px 'Barlow Condensed', sans-serif; letter-spacing: .4px; color: #fff4dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.phone-chip-sub { font: 600 10px 'Chakra Petch', sans-serif; color: #e6b966; white-space: nowrap; }
.phone-chip-caret { color: #e6b966; font-size: 11px; margin-left: 2px; }

.phone-ui .phone-scrap-chip { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 4px 0 6px; box-sizing: border-box; border: 1px solid #3d556b; border-radius: 8px; background: #0f1823; color: #fff2d0; cursor: pointer; font: 800 16px 'Barlow Condensed', sans-serif; letter-spacing: .5px; }
.phone-scrap-icon { width: 24px; height: 24px; object-fit: contain; }
.phone-scrap-plus { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #f2b02a; color: #1a1408; font: 900 16px/1 'Chakra Petch', sans-serif; }
.phone-ui .phone-scrap-chip:active, .phone-ui .phone-commander-chip:active { filter: brightness(1.2); }

/* ---------- Home layout */
.phone-ui #main-menu .phone-home .phone-hero { display: grid; grid-template-columns: minmax(0, 37fr) minmax(0, 63fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; height: 100%; padding-top: 6px; box-sizing: border-box; }
.phone-home-label { grid-column: 1; grid-row: 1; font: 700 10px 'Chakra Petch', sans-serif; letter-spacing: 2px; color: #93a4b5; }
.phone-ui #main-menu .phone-home .phone-faction-stage { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-height: 0; }
.phone-ui #main-menu .phone-home .phone-faction-tile { display: block; min-height: 0; border-radius: 10px; }
.phone-ui #main-menu .phone-home .phone-faction-art { top: 10%; left: 10%; width: 80%; height: 62%; padding: 0; object-fit: contain; filter: drop-shadow(0 6px 6px #000a); }
.phone-ui #main-menu .phone-home .phone-faction-tile strong { top: auto; bottom: 20px; left: 0; right: 0; text-align: center; font-size: 15px; letter-spacing: .6px; }
.phone-ui #main-menu .phone-home .phone-faction-state { left: 0; right: 0; bottom: 6px; text-align: center; font-size: 9px; letter-spacing: 1px; }

.phone-ui .phone-army-card { grid-column: 1; grid-row: 3; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 6px 10px 6px 6px; box-sizing: border-box; border: 1px solid #4a6a58; border-radius: 10px; background: linear-gradient(110deg, #1d3326, #121d18); color: #e8f2e6; cursor: pointer; text-align: left; }
.phone-army-num { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: linear-gradient(180deg, #f8d27a, #d39a2a); color: #1b1407; font: 900 26px/1 'Barlow Condensed', sans-serif; box-shadow: inset 0 -3px #0003; }
.phone-army-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.phone-army-copy strong { font: 800 15px 'Barlow Condensed', sans-serif; letter-spacing: .6px; color: #fff4dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-army-copy small { font: 500 10px 'Chakra Petch', sans-serif; color: #a9c2b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-army-cta { font: 700 10px 'Chakra Petch', sans-serif; color: #8ce9ac; letter-spacing: .5px; white-space: nowrap; }

.phone-ui #main-menu .phone-home .phone-home-actions { grid-column: 2; grid-row: 1 / 4; display: grid; grid-template-columns: none; grid-template-rows: minmax(70px, 34fr) minmax(0, 66fr); gap: 8px; min-height: 0; }
.phone-ui #main-menu .phone-home .phone-home-actions [data-home-action="battle"] { width: 100%; min-height: 0; height: 100%; font-size: clamp(30px, 5vw, 44px); border-radius: 10px; }
.phone-home-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; min-height: 0; }
.phone-ui #main-menu .phone-home .phone-home-shortcut { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; min-height: 0; height: 100%; padding: 6px 8px; box-sizing: border-box; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #1f3045, #131f2c); border: 1px solid #3f5870; }
.phone-tile-icon { width: 40px; height: 40px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 3px #0008); }
.phone-tile-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.phone-ui #main-menu .phone-home .phone-home-shortcut strong { font: 800 19px/1 'Barlow Condensed', sans-serif; letter-spacing: .6px; color: #f4ead7; }
.phone-ui #main-menu .phone-home .phone-home-shortcut .phone-tile-copy span { font: 500 10px/1.25 'Chakra Petch', sans-serif; color: #b8c8d7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.phone-ui #main-menu .phone-home [data-home-action="store"] { background: linear-gradient(135deg, #47361c, #221c14); border-color: #a07c3c; }
.phone-ui #main-menu .phone-home [data-home-action="store"] strong { color: #ffce75; }
.phone-ui #main-menu .phone-home [data-home-action="tournament"] { background: linear-gradient(135deg, #3b2a12, #1d1a12); border-color: #c49a3d; }
.phone-ui #main-menu .phone-home [data-home-action="tournament"] strong { color: #ffd77e; }
.phone-ui #main-menu .phone-home [data-home-action="alliance"] { background: linear-gradient(135deg, #1d3a2b, #122019); border-color: #4f8a66; }
.phone-ui #main-menu .phone-home [data-home-action="alliance"] strong { color: #b8f2c9; }
.phone-ui #main-menu .phone-home .phone-home-shortcut:active { filter: brightness(1.2); }

/* Short phones: tighter bar and tiles */
@media (max-height: 380px) {
    .phone-ui .phone-menu-head { height: 40px; flex-basis: 40px; }
    .phone-ui .phone-menu-head .phone-menu-toggle, .phone-ui .phone-scrap-chip { min-height: 32px; height: 32px; }
    .phone-chip-portrait { width: 26px; height: 26px; }
    .phone-tile-icon { width: 32px; height: 32px; }
    .phone-ui #main-menu .phone-home .phone-home-shortcut strong { font-size: 16px; }
    .phone-army-num { min-width: 38px; height: 38px; font-size: 22px; }
    .phone-ui .phone-army-card { min-height: 48px; }
}
@media (max-width: 760px) {
    .phone-ui .phone-menu-head .phone-brand { font-size: 17px; letter-spacing: 1px; }
    .phone-ui .phone-menu-head .phone-page-title { display: none; }
    .phone-chip-name { max-width: 100px; }
    .phone-ui #main-menu .phone-home .phone-home-shortcut .phone-tile-copy span { display: none; }
    .phone-tile-icon { width: 30px; height: 30px; }
}
/* The old dropdown header rules wrapped the bar on narrow screens; keep it on one line. */
@media (max-width: 740px) {
    .phone-ui .phone-menu-head { flex-wrap: nowrap; }
    .phone-ui .phone-menu-head > strong.phone-brand { flex: none; }
    .phone-ui #main-menu .phone-home .phone-hero { grid-template-columns: minmax(0, 37fr) minmax(0, 63fr); grid-template-rows: auto minmax(0, 1fr) auto; }
    .phone-ui #main-menu .phone-home .phone-home-actions { grid-template-columns: none; grid-template-rows: minmax(60px, 34fr) minmax(0, 66fr); }
}

/* ---------- Army rank badge on the commander dossier */
.army-rank-badge { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 6px 10px 6px 6px; border: 1px solid #4a6a58; border-radius: 8px; background: #132019cc; max-width: 360px; }
.army-rank-badge .arb-num { display: grid; place-items: center; min-width: 40px; height: 40px; border-radius: 7px; background: linear-gradient(180deg, #f8d27a, #d39a2a); color: #1b1407; font: 900 22px/1 'Barlow Condensed', sans-serif; }
.army-rank-badge .arb-copy { display: flex; flex-direction: column; gap: 2px; }
.army-rank-badge strong { font: 800 14px 'Barlow Condensed', sans-serif; letter-spacing: .6px; color: #f4ead7; }
.army-rank-badge small { font: 500 10px 'Chakra Petch', sans-serif; color: #a9c2b0; }

/* Main menu: two columns so every destination fits on a landscape phone. */
.phone-ui .phone-nav .phone-dropdown-options { width: 330px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; max-height: calc(100dvh - 60px); overflow-y: auto; }
.phone-ui .phone-nav .phone-nav-button { min-height: 40px; padding: 6px 10px; }