/* The campaign board on a phone held sideways (css/phone.css has the gate and the icons). The cockpit art thins
   to an edge; one 38px bar; a strip of mission chips; the mission, the map and the crew side by side; START
   under them. The board's elements are the same (js/ui/phone-board.js adds the chips); only the places move. */
.ph-chip { display: none; }
:root.ph #campaign::after { display: none; }
:root.ph #campaign .cp-sheet { inset: calc(6px + var(--safe-t)) calc(6px + var(--safe-r)) calc(6px + var(--safe-b)) calc(6px + var(--safe-l)); border: 1px solid var(--line-dim); border-top: 2px solid var(--line); }
/* The bar: back, where, three tabs, funds. */
:root.ph #campaign .cp-top, :root.ph #campaign[data-view="board"] .cp-top { display: flex; align-items: center; gap: 8px; min-height: 0; height: 40px; padding: 0 calc(96px + var(--safe-r)) 0 4px; }
:root.ph #campaign .cp-back { flex: none; width: 36px; min-width: 36px; min-height: 36px; padding: 0; }
:root.ph #campaign .cp-head { flex: none; }
:root.ph #campaign[data-view="board"] .cp-head h1 { font-size: 14px; letter-spacing: 0.08em; }
:root.ph #campaign[data-view="board"] .cp-tabs { grid-row: auto; grid-column: auto; min-height: 0; padding: 0; margin-left: 4px; flex: none; width: auto; display: flex; gap: 2px; border: 0; background: none; }
:root.ph #campaign[data-view="board"] .cp-tabs button { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 36px; padding: 0 12px; font-size: 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--dim); }
:root.ph #campaign[data-view="board"] .cp-tabs button::after { content: attr(data-short); font: 700 12px 'Chakra Petch', var(--cjk), sans-serif; letter-spacing: 0.06em; }
:root.ph #campaign[data-view="board"] .cp-tabs button .ph-i { font-size: 14px; }
:root.ph #campaign[data-view="board"] .cp-tabs button[aria-pressed="true"], :root.ph #campaign[data-view="board"] .cp-tabs button[aria-selected="true"], :root.ph #campaign[data-view="board"] .cp-tabs button.on { color: var(--amber); border-bottom-color: var(--amber); background: none; }
:root.ph #campaign .cp-funds { flex: none; margin-left: auto; padding-left: 0; border-left: 0; flex-direction: row; align-items: center; gap: 6px; }
:root.ph #campaign .cp-funds > span:first-child { display: none; }
:root.ph #campaign[data-view="board"] .cp-funds b { font-size: 15px; }
:root.ph #campaign .cp-body { padding: 6px !important; }
:root.ph #campaign[data-view="board"][data-tab="ops"] .cp-panel { overflow: hidden; height: 100%; }

/* the grid: chips on top, three panels, START under them */
:root.ph .cp-simple.simple-board { height: 100%; grid-template-columns: 250px minmax(0, 1fr) 252px; grid-template-rows: 38px 82px minmax(0, 1fr) 50px; gap: 6px; }
:root.ph .simple-board > .simple-center, :root.ph .simple-board .brief-content { display: contents; }
:root.ph .simple-board .mission-rail { grid-column: 1 / -1; grid-row: 1; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
:root.ph .simple-board .rail-title, :root.ph .simple-board .rail-group { display: none; }
:root.ph .simple-board .mission-card { flex: 1 0 70px; height: 38px; min-height: 38px; margin: 0; display: flex; align-items: center; justify-content: center; }
:root.ph .simple-board .mission-card > :not(.ph-chip) { display: none; }
:root.ph .simple-board .mission-card .ph-chip { display: inline-flex; align-items: center; gap: 5px; font: 800 12.5px 'Chakra Petch', var(--cjk), sans-serif; color: var(--muted); }
:root.ph .simple-board .mission-card .ph-chip .ph-i { font-size: 14px; }
:root.ph .simple-board .mission-card .ph-chip i { font-style: normal; }
:root.ph .simple-board .mission-card[aria-pressed="true"] { flex-grow: 1.3; border-color: var(--amber); background: rgba(255, 177, 46, 0.12); box-shadow: none; }
:root.ph .simple-board .mission-card[aria-pressed="true"] .ph-chip { color: var(--amber); }
:root.ph .simple-board .mission-card[data-ph-kind="urgent"]:not(:disabled) .ph-chip { color: #ff8a7c; }
:root.ph .simple-board .mission-card:disabled { opacity: 0.55; }
/* the mission: its picture and name, then the briefing in three lines */
:root.ph .simple-board .mission-hero { grid-column: 1; grid-row: 2; height: auto; border: 1px solid var(--line); }
:root.ph .simple-board .mission-hero > div { padding: 6px 10px; justify-content: flex-end; background: linear-gradient(0deg, #04101af0 10%, transparent); }
:root.ph .simple-board .mission-hero small { display: none; }
:root.ph .simple-board .mission-hero h2 { margin: 0 0 2px; font-size: 17px; }
:root.ph .simple-board .mission-hero p { font-size: 11px; color: #c5d4ea; }
:root.ph .simple-board .brief-copy { grid-column: 1; grid-row: 3; min-height: 0; overflow: hidden; padding: 8px 10px; border: 1px solid var(--line); background: #08151d; cursor: pointer; }
:root.ph .simple-board .brief-copy.open { overflow-y: auto; }
:root.ph .simple-board .brief-summary h3:first-child { display: none; }
:root.ph .simple-board .brief-summary > p:first-of-type { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; font-size: 12px; line-height: 1.45; }
:root.ph .simple-board .brief-copy.open .brief-summary > p:first-of-type { display: block; }
:root.ph .simple-board .brief-summary h3:nth-of-type(2), :root.ph .simple-board .brief-summary .enemy-intel { display: none; }
:root.ph .simple-board .brief-copy.open .brief-summary h3:nth-of-type(2), :root.ph .simple-board .brief-copy.open .brief-summary .enemy-intel { display: block; margin-top: 6px; font-size: 11px; }
:root.ph .simple-board .brief-objectives h3 { display: none; }
:root.ph .simple-board .objectives { margin: 6px 0 0; gap: 4px; }
:root.ph .simple-board .objectives li { gap: 8px; font-size: 11.5px; }
:root.ph .simple-board .objectives li p, :root.ph .simple-board .objectives li small { display: none; }
:root.ph .simple-board .brief-copy.open .objectives li p, :root.ph .simple-board .brief-copy.open .objectives li small { display: block; }
/* the map */
:root.ph .simple-board .tactical { grid-column: 2; grid-row: 2 / 4; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--line); background: #07101e; position: relative; }
:root.ph .simple-board .tactical h3 { margin: 0 0 4px; font-size: 11px; letter-spacing: 0.08em; }
:root.ph .simple-board .simple-map { flex: 1; min-height: 0; height: auto; }
:root.ph .simple-board .map-legend { display: none; }
/* the crew: the chosen pilot large, the others as chips under them */
:root.ph .simple-board .mech-selection { grid-column: 3; grid-row: 2 / 4; display: flex; flex-direction: column; min-height: 0; padding: 0; border: 1px solid var(--line); background: #08151d; }
:root.ph .simple-board .selection-title { display: none; }
:root.ph .simple-board .mech-roster { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) 44px; gap: 5px; padding: 6px; max-width: none; }
:root.ph .simple-board .mech-card { min-width: 0; }
:root.ph .simple-board .mech-card[data-selected="true"] { grid-row: 1; grid-column: 1 / -1; }
:root.ph .simple-board .mech-card[data-selected="false"] { grid-row: 2; height: 44px; }
:root.ph .simple-board .mech-card[data-selected="false"] .mech-card-content { min-height: 0; height: 42px; display: block; }
:root.ph .simple-board .mech-card[data-selected="false"] .mech-card-content > :not(.pilot-visual):not(.mech-pick) { display: none; }
:root.ph .simple-board .mech-card[data-selected="false"] .pilot-skill-badges { display: none; }
:root.ph .simple-board .mech-card[data-selected="false"] .pilot-visual { height: 42px; }
:root.ph .simple-board .mech-card[data-selected="false"] .pilot-portrait { -webkit-mask-image: none; mask-image: none; }
:root.ph .simple-board .mech-card[data-selected="true"] .mech-card-content { min-height: 0; height: 100%; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0 8px; }
:root.ph .simple-board .mech-card[data-selected="true"] .pilot-visual { grid-column: 1; grid-row: 1 / 3; min-height: 100px; }
:root.ph .simple-board .mech-card[data-selected="true"] .pilot-skill-badges { display: none; }
:root.ph .simple-board .mech-card[data-selected="true"] .pilot-info { grid-column: 2; grid-row: 1; padding: 8px 0 4px; }
:root.ph .simple-board .mech-card[data-selected="true"] .pilot-info > b { font-size: 17px; }
:root.ph .simple-board .mech-card .pilot-real-name { margin-top: 1px; font-size: 10.5px; }
:root.ph .simple-board .mech-card[data-selected="true"] .mech-specs { display: grid; gap: 5px; margin-top: 8px; }
:root.ph .simple-board .mech-card[data-selected="true"] .spec.boost { display: none; }
:root.ph .simple-board .mech-card[data-selected="true"] .spec > span { display: flex; justify-content: space-between; font-size: 10px; color: #a7c0cd; }
:root.ph .simple-board .mech-card[data-selected="true"] .spec i { display: block; height: 4px; background: #28404b; margin-top: 2px; }
:root.ph .simple-board .mech-card[data-selected="true"] .spec em { display: block; height: 100%; background: #a5d8af; }
:root.ph .simple-board .mech-card[data-selected="true"] .move-buttons { display: flex; gap: 5px; margin-top: 8px; pointer-events: auto; position: relative; z-index: 3; }
:root.ph .simple-board .mech-card .move-button { position: relative; flex: none; width: 36px; min-width: 0; min-height: 36px; height: 36px; padding: 0; overflow: hidden; }
:root.ph .simple-board .mech-card .move-button img { width: 100%; height: 100%; object-fit: cover; }
:root.ph .simple-board .mech-card .move-button span { display: none; }
:root.ph .simple-board .mech-card .move-button::after { content: ''; position: absolute; inset: -3px; }
:root.ph .simple-board .mech-card[data-selected="true"] .mech-visual { grid-column: 2; grid-row: 2; padding: 4px 0 6px; place-items: start; align-self: end; }
:root.ph .simple-board .mech-card[data-selected="true"] .mech-visual img { display: none; }
:root.ph .simple-board .mech-card[data-selected="true"] .mech-meta { flex-direction: row; justify-content: flex-start; gap: 6px; text-align: left; }
:root.ph .simple-board .mech-card[data-selected="true"] .mech-name { font-size: 13px; }
/* START: the reward and the chosen crew, then the button */
:root.ph .simple-board .launch-bar { grid-column: 1 / -1; grid-row: 4; position: static; gap: 12px; padding: 0 8px 0 12px; border: 1px solid var(--line); }
:root.ph .simple-board .launch-bar b { font-size: 18px; }
:root.ph .simple-board .launch-bar .primary { min-width: 200px; min-height: 40px; padding: 0 18px; font-size: 16px; letter-spacing: 0.08em; }

/* the saving mark: in the bar's empty middle, not over the reward */
:root.ph #campaign .cp-saving { left: 340px; right: auto; top: calc(14px + var(--safe-t)); bottom: auto; }
/* the facilities: a row each (icon, name over its text, pips, the price), the price one line */
:root.ph #campaign .cp-up { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 2px 14px; padding: 8px 12px; }
:root.ph #campaign .cp-up > .cp-icon { grid-row: 1 / 3; width: 40px; height: 40px; }
:root.ph #campaign .cp-up > b { grid-column: 2; grid-row: 1; font-size: 14px; }
:root.ph #campaign .cp-up > .cp-desc { grid-column: 2; grid-row: 2; font-size: 11.5px; }
:root.ph #campaign .cp-up > .cp-pips { grid-column: 3; grid-row: 1 / 3; }
:root.ph #campaign .cp-up > button { grid-column: 4; grid-row: 1 / 3; width: auto; min-width: 84px; min-height: 40px; padding: 0 12px; white-space: nowrap; writing-mode: horizontal-tb; }