/* Portrait layouts (lane: core). Every rule is scoped to body.portrait so landscape never changes.
   Stage in portrait: 900 wide x var(--ph) tall (1560-2000). On a 390px phone 1 stage px = ~0.43 CSS px.
   Shared chrome contract for the other portrait lanes:
     --top-h  page header height (.page .top)            120px
     --nav-h  bottom nav bar height (.navbar, docked)     132px
     --gut    side gutter                                  24px
   Page content should sit between calc(var(--top-h) + 12px) and calc(var(--nav-h) + 10px). */

body.portrait { --top-h: 120px; --nav-h: 132px; --gut: 24px; }

/* =====================================================================
   SHARED CHROME: page header, bottom nav, pills, toast, sheets
   ===================================================================== */
/* page header: back chip, title, extras on the right */
body.portrait .page .top { height: var(--top-h); padding: 0 var(--gut); gap: 16px; }
body.portrait .page .top h1 { flex: 0 1 auto; min-width: 0; font-size: 44px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 0; }
/* the first button in the header is always "back": a square gold-chevron chip, label kept for screen readers */
body.portrait .page .top > .btn:first-child { flex: none; width: 96px; height: 96px; min-width: 0; padding: 0; border-radius: 26px; font-size: 0; letter-spacing: 0; display: grid; place-items: center; }
body.portrait .page .top > .btn:first-child > * { display: none; }
body.portrait .page .top > .btn:first-child::before { content: ""; position: static; display: block; width: 44px; height: 44px; left: auto; transform: none; animation: none; z-index: 1;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-1) 50%, var(--gold-2));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4.5 7.5 12l7.5 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4.5 7.5 12l7.5 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
body.portrait .page .top .pill { font-size: 28px; padding: 10px 18px; }
/* default scroll body under the header and above the nav (lanes override per screen) */
body.portrait .page > .body { top: calc(var(--top-h) + 12px); left: var(--gut); right: var(--gut); bottom: calc(var(--nav-h) + 10px); }

/* bottom nav: docked full-width tab bar */
body.portrait .navbar, body.portrait #deckbuilder .navbar { left: 0; right: 0; bottom: 0; transform: none; width: auto; height: var(--nav-h); padding: 10px 8px 12px; gap: 2px;
  border-radius: 34px 34px 0 0; border-bottom: 0; border-left: 0; border-right: 0; z-index: 20; }
body.portrait .navbar::before { left: 18%; right: 18%; }
/* icons only, the active tab widens and shows its name (7 tabs on a phone: labels on all of them would be unreadably small) */
body.portrait .navbar button { flex: 1 1 0; min-width: 0; justify-content: center; gap: 4px; padding: 8px 0 10px; border-radius: 24px; font-size: 0; letter-spacing: 0; white-space: nowrap;
  transition: flex-grow .35s var(--ease-out), background .2s, color .2s; }
body.portrait .navbar button.on { flex-grow: 1.9; font-size: 22px; letter-spacing: .03em; }
body.portrait .navbar button:hover { transform: none; }
body.portrait .navbar button .ic { height: 60px; } body.portrait .navbar button .ic .ico { width: 52px; height: 52px; }
body.portrait .navbar button.on .ic { height: 50px; } body.portrait .navbar button.on .ic .ico { width: 44px; height: 44px; }
body.portrait .navbar button.on::after { bottom: 4px; }
body.portrait .navbar .badge { top: 8px; right: calc(50% - 46px); left: auto; min-width: 32px; height: 32px; padding: 0 8px; font-size: 19px; line-height: 32px; }

/* toast: centred just under the header on every screen */
body.portrait[data-screen] #toast { top: calc(var(--top-h) + 18px); bottom: auto; left: 50%; right: auto; width: max-content; max-width: 820px; transform: translate(-50%, -14px) scale(.96);
  font-size: 26px; padding: 20px 30px 20px 20px; border-radius: 22px; }
body.portrait[data-screen] #toast.on { transform: translate(-50%, 0) scale(1); }
body.portrait[data-screen="hub"] #toast { top: 150px; }

/* sheets: a single centred card the width of the phone, scrolling inside when tall.
   :not(.x) lifts this above the landscape-phone widths; a lane can still win with body.portrait #sheet .box.<its-class> */
body.portrait #sheet { padding: 0; }
body.portrait #sheet .box:not(.x) { width: calc(100% - 2 * var(--gut)); min-width: 0; max-width: none; max-height: calc(var(--ph) - 160px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding: 40px 34px 34px; border-radius: 30px; box-sizing: border-box; }
body.portrait #sheet .box h2 { font-size: 44px; line-height: 1.12; gap: 16px; }
body.portrait #sheet .box h2::before, body.portrait #sheet .box h2::after { width: 60px; }
body.portrait #sheet .lead { font-size: 26px; }
body.portrait #sheet .err { font-size: 24px; }
body.portrait #sheet .actions { flex-wrap: wrap; gap: 18px; margin-top: 26px; }
body.portrait #sheet .actions .btn { min-height: 96px; min-width: 240px; font-size: 26px; padding: 0 34px; display: inline-flex; align-items: center; justify-content: center; }
/* waiting / friend sheets */
body.portrait #sheet .friend { grid-template-columns: 1fr; gap: 20px; }
body.portrait #sheet .friend h3 { font-size: 32px; } body.portrait #sheet .friend p { font-size: 24px; }
body.portrait #sheet .friend .btn { min-height: 96px; font-size: 26px; }
body.portrait #sheet .codein { font-size: 40px !important; padding: 18px !important; }
body.portrait #sheet .waiting h2 { font-size: 40px; } body.portrait #sheet .winfo { font-size: 26px; }

/* =====================================================================
   HOME HUB: header, icon rails, hero leader, deck + PLAY, challenges, nav
   ===================================================================== */
body.portrait #hub .hubui { display: flex; flex-direction: column; gap: 18px; padding: 20px var(--gut) calc(var(--nav-h) + 20px); }
body.portrait #hub .hublogo { display: none; }
body.portrait #hub .vignette { background: radial-gradient(ellipse 110% 70% at 50% 36%, transparent 45%, rgba(5, 2, 14, .8)), linear-gradient(0deg, rgba(5, 2, 14, .92), transparent 40%), linear-gradient(180deg, rgba(5, 2, 14, .75), transparent 12%); }

/* header: profile chip left, currency right */
body.portrait #hub .hubtop { position: relative; top: auto; left: auto; right: auto; flex: none; height: 100px; gap: 14px; }
body.portrait #hub .hubtop .profile { flex: 0 1 auto; min-width: 0; padding: 6px 30px 6px 6px; }
body.portrait #hub .avring { width: 86px; height: 86px; }
body.portrait #hub .hubtop .profile .lvl { font-size: 30px; max-width: 300px; }
body.portrait #hub .hubtop .profile .sub { font-size: 22px; }
body.portrait #hub .xpline { width: 200px; height: 7px; }
body.portrait #hub .netdot { display: none; }
body.portrait #hub .hubtop .pill { font-size: 32px; padding: 12px 22px; height: 76px; box-sizing: border-box; }
/* icon rails: Lore + Museum on the left, Settings on the right (Sound, Fullscreen and the Trailer live in Settings) */
body.portrait #hub .hubtop .iconbtn { position: absolute; width: 96px; height: 96px; margin: 0; z-index: 6; }
body.portrait #hub .hubtop .iconbtn .ico, body.portrait #hub .hubtop .iconbtn > svg { width: 42px; height: 42px; }
body.portrait #hub .hubtop #hLore { left: 0; top: 126px; }
body.portrait #hub .hubtop #hMuseum { left: 0; top: 240px; }
body.portrait #hub .hubtop #hSet { right: 0; top: 126px; }
body.portrait #hub .hubtop .lr-hbadge { top: -6px; right: -6px; left: auto; }

/* hero: the leader card fills whatever height is left, centred between the rails */
body.portrait #hub .hubleader { position: relative; left: auto; top: auto; width: auto; flex: 1 1 0; min-height: 0; margin: 4px 120px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
body.portrait #hub .hubleader .hl-aura { left: -30%; right: -30%; top: 0; bottom: 60px; height: auto; }
body.portrait #hub .hubleader .hl-float { flex: 0 1 auto; min-height: 0; height: min(780px, 100% - 130px); display: flex; justify-content: center; }
body.portrait #hub .hubleader .lwrap { height: 100%; aspect-ratio: 262 / 390; }
body.portrait #hub .hubleader .lc { width: 100%; height: 100%; border-radius: 20px; }
body.portrait #hub .hubleader .hl-plinth { flex: none; width: 70%; max-width: 360px; margin: 8px auto 0; }
body.portrait #hub .hubleader .change { flex: none; width: auto; min-width: 360px; min-height: 92px; margin-top: 12px; padding: 0 36px; font-size: 24px; letter-spacing: .08em; border-radius: 22px; }
body.portrait #hub .hubleader .change .ico { width: 30px; height: 30px; }

/* deck + battlefield row, then the big PLAY */
body.portrait #hub .hubright { position: relative; right: auto; top: auto; width: auto; flex: none; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "deck loc" "play play"; gap: 16px 14px; }
body.portrait #hub .hubright:not(:has(.locChip)) { grid-template-areas: "deck deck" "play play"; }
body.portrait #hub .hdeck { grid-area: deck; min-height: 108px; padding: 10px 18px 10px 10px; border-radius: 22px; gap: 16px; }
body.portrait #hub .hdeck .hd-art { width: 86px; height: 86px; border-radius: 16px; }
body.portrait #hub .hdeck em { font-size: 18px; } body.portrait #hub .hdeck b { font-size: 30px; } body.portrait #hub .hdeck .hd-txt > span { font-size: 22px; }
body.portrait #hub .hdeck > .ico { width: 30px; height: 30px; }
body.portrait #hub .hubright .locChip { grid-area: loc; align-self: stretch; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 8px; margin: 0; padding: 12px 18px; border-radius: 22px;
  font-size: 22px; line-height: 1.3; white-space: normal; text-align: center; }
body.portrait #hub .hubright .locChip .ico { width: 26px; height: 26px; }
body.portrait #hub .bp-wrap { grid-area: play; }
body.portrait #hub .bigplay { min-height: 176px; padding: 18px 24px 20px; border-radius: 30px; }
body.portrait #hub .bigplay .bp-t { font-size: 100px; }
body.portrait #hub .bigplay small { font-size: 22px; margin-top: 8px; }

/* daily challenges: a thumb-swipe carousel (season card first) */
body.portrait #hub .hubquests { position: relative; left: auto; right: auto; bottom: auto; flex: none; gap: 12px; }
body.portrait #hub .hq-head { padding: 0 2px; gap: 12px; }
body.portrait #hub .hq-head b { font-size: 22px; gap: 10px; } body.portrait #hub .hq-head b .ico { width: 28px; height: 28px; }
body.portrait #hub .hq-head b i { font-size: 18px; padding: 5px 10px; }
body.portrait #hub .hq-time { font-size: 22px; } body.portrait #hub .hq-time .ico { width: 22px; height: 22px; }
body.portrait #hub .hq-row { margin: 0 calc(-1 * var(--gut)); padding: 2px var(--gut) 8px; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); scrollbar-width: none; }
body.portrait #hub .hq-row::-webkit-scrollbar { display: none; }
body.portrait #hub .hq-row .seasonHub { flex: 0 0 520px; scroll-snap-align: start; }
body.portrait #hub .hq-row .seasonHub .shArt { width: 118px; }
body.portrait #hub .hq-row .seasonHub .shTxt { padding: 12px 18px 12px 8px; }
body.portrait #hub .hq-row .seasonHub .shEy { font-size: 17px; } body.portrait #hub .hq-row .seasonHub .shTxt > b { font-size: 30px; }
body.portrait #hub .hq-row .seasonHub .shEv, body.portrait #hub .hq-row .seasonHub .shTr { font-size: 20px; }
body.portrait #hub .hq-cards { flex: none; display: flex; gap: 14px; }
body.portrait #hub .hq { flex: 0 0 270px; min-height: 150px; padding: 16px 20px; border-radius: 22px; gap: 10px; scroll-snap-align: start; }
body.portrait #hub .hq p { font-size: 25px; line-height: 1.25; }
body.portrait #hub .hq-bar, body.portrait #hub .hq-pips i { height: 10px; }
body.portrait #hub .hq-n { font-size: 22px; } body.portrait #hub .hq-gold { font-size: 26px; }
body.portrait #hub .hq .coin { width: 26px; height: 26px; } body.portrait #hub .hq .packicon { width: 18px; height: 26px; }
body.portrait #hub .hq-claim { font-size: 22px; padding: 12px 18px; }
body.portrait #hub .hq-done { font-size: 20px; }

/* day-one companion chooser: a framed card over the hero; the companion pet stands beside the leader */
body.portrait #hub .lcs-starter { left: var(--gut); right: var(--gut); top: 136px; bottom: auto; width: auto; z-index: 9; padding: 26px 24px 24px; border-radius: 28px; }
body.portrait #hub .lcs-sthead { flex-wrap: wrap; gap: 16px; }
body.portrait #hub .lcs-sthead > div { flex: 1 1 460px; min-width: 0; }
body.portrait #hub .lcs-sthead b { font-size: 36px; } body.portrait #hub .lcs-sthead span { font-size: 23px; }
body.portrait #hub .lcs-sthead .btn { min-height: 80px; font-size: 22px; padding: 0 26px; }
body.portrait #hub .lcs-strow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
body.portrait #hub .lcs-strow button { padding: 10px 4px 14px; border-radius: 18px; }
body.portrait #hub .lcs-strow button b { font-size: 24px; } body.portrait #hub .lcs-strow button span { font-size: 17px; white-space: normal; line-height: 1.2; text-align: center; }
body.portrait #hub .lcs-stpet { height: 120px; }
body.portrait #hub .hubui.choosing .hubleader { opacity: .35; filter: blur(2px); transition: opacity .4s, filter .4s; }
body.portrait #hub .cz-hubpet { left: 40px; top: auto; bottom: calc(var(--nav-h) + 560px); width: 150px !important; height: 150px !important; }

/* =====================================================================
   PLAY SHEET (modes): three stacked banner tiles, leader strip, close
   ===================================================================== */
body.portrait .modesheet .modes { display: flex; flex-direction: column; gap: 18px; margin: 26px 0 20px; }
body.portrait .modesheet .mode { width: 100%; height: 250px; flex: none; }
body.portrait .modesheet .mode::before { background: linear-gradient(90deg, rgba(8, 4, 18, .92) 0%, rgba(8, 4, 18, .55) 55%, rgba(8, 4, 18, .15) 100%), linear-gradient(0deg, rgba(8, 4, 18, .7), transparent 50%); }
body.portrait .modesheet .mode.off::before { background: linear-gradient(90deg, rgba(8, 4, 18, .96), rgba(8, 4, 18, .7)); }
body.portrait .modesheet .mode .mt-ic { left: 26px; top: 26px; width: 84px; height: 84px; font-size: 42px; }
body.portrait .modesheet .mode .mt-tag { right: 22px; top: 24px; font-size: 18px; padding: 10px 16px; }
body.portrait .modesheet .mode .mt-txt { left: 28px; right: 28px; bottom: 26px; gap: 8px; }
body.portrait .modesheet .mode .mt-txt b { font-size: 48px; }
body.portrait .modesheet .mode .mt-txt span { font-size: 25px; }
body.portrait .modesheet .mode .mt-lock { left: auto; right: 22px; top: 26px; transform: none; font-size: 18px; padding: 12px 18px; }
body.portrait .modesheet .mode:has(.mt-lock) .mt-tag { display: none; }
body.portrait .modesheet .modesub { min-height: 112px; padding: 12px 20px 12px 12px; gap: 18px; border-radius: 20px; }
body.portrait .modesheet .ms-av { width: 86px; height: 86px; border-radius: 16px; }
body.portrait .modesheet .ms-t { flex-direction: column; align-items: flex-start; gap: 4px; flex-wrap: nowrap; }
body.portrait .modesheet .ms-t em { font-size: 17px; } body.portrait .modesheet .ms-t b { font-size: 32px; }
body.portrait .modesheet .ms-t span { font-size: 22px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.portrait .modesheet .ms-ch { font-size: 20px; } body.portrait .modesheet .ms-ch .ico { width: 26px; height: 26px; }

/* =====================================================================
   LEADER SELECT: one scrolling column, sticky header, pinned Battle bar
   ===================================================================== */
body.portrait #select.on { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
body.portrait #select::-webkit-scrollbar { display: none; }
body.portrait #select .top { position: sticky; top: 0; }
body.portrait #select .selhint { display: none; }
body.portrait #select .leaders { position: relative; top: auto; left: auto; right: auto; transform: none; width: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center;
  gap: 36px 18px; padding: 42px var(--gut) 34px; }
body.portrait #select .leaderPick { width: 196px; }
body.portrait #select .leaderPick .lc { width: 196px; height: 292px; }
body.portrait #select .leaderPick.sel { transform: translateY(-6px) scale(1.04); }
body.portrait #select .leaderPick .setname { margin-top: 14px; }
body.portrait #select .leaderPick .setname b { font-size: 26px; } body.portrait #select .leaderPick .setname span { font-size: 17px; }
body.portrait #select .detail { position: relative; left: auto; right: auto; top: auto; bottom: auto; height: auto; margin: 0 var(--gut); padding: 0; display: flex; flex-direction: column; gap: 0;
  overflow: visible; border-radius: 30px; }
body.portrait #select .detail .dt-portrait { flex: none; height: 380px; margin: 0; border-radius: 30px 30px 0 0; background-position: 50% 22%;
  -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent); }
body.portrait #select .detail .dt-info { margin-top: -120px; padding: 0 30px 10px; gap: 16px; overflow: visible; position: relative; }
body.portrait #select .detail .af-eyebrow { font-size: 19px; }
body.portrait #select .detail h2 { font-size: 54px; }
body.portrait #select .detail .dt-id { display: block; font-size: 25px; line-height: 1.45; }
body.portrait #select .detail .dt-box { padding: 18px 22px; border-radius: 18px; }
body.portrait #select .dt-lb { font-size: 18px; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } body.portrait #select .dt-lb .ico { width: 24px; height: 24px; }
body.portrait #select .dt-tx { font-size: 28px; line-height: 1.38; }
body.portrait #select .detail .dt-sig { padding: 20px 30px 30px; }
body.portrait #select .sigrow { gap: 22px; }
body.portrait #select .sigc, body.portrait #select .sigc .card { width: 196px; height: 274px; }
/* deck, rival and Battle ride along the bottom of the screen while the details scroll */
body.portrait #select .detail .side { position: sticky; bottom: 0; z-index: 4; margin: 0 calc(-1 * var(--gut)); padding: 22px var(--gut) 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
  background: linear-gradient(180deg, rgba(14, 8, 28, .9), rgba(8, 4, 18, .98)); border-top: 1px solid rgba(232, 186, 90, .4); box-shadow: 0 -18px 40px rgba(0, 0, 0, .55); backdrop-filter: blur(8px); }
body.portrait #select .detail .side { font-size: 26px; }
body.portrait #select .detail .side label { grid-row: 1; margin: 0; font-size: 18px; }
body.portrait #select .detail .side select { grid-row: 2; font-size: 26px; padding: 0 18px; height: 84px; border-radius: 16px; min-width: 0; }
body.portrait #select .detail #begin { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; min-height: 120px; font-size: 44px; border-radius: 24px; }
body.portrait #select .detail #begin .ico { width: 40px; height: 40px; }

/* =====================================================================
   ACCOUNT SHEET
   ===================================================================== */
body.portrait #sheet .box.acctsheet { padding-top: 0; }
body.portrait .acct-hero { margin: 0 -34px 26px; padding: 44px 34px 30px; gap: 26px; }
body.portrait .acct-hero::before { left: 30%; }
body.portrait .ah-av .avring { width: 160px; height: 160px; }
body.portrait .ah-av .ah-edit { width: 54px; height: 54px; } body.portrait .ah-av .ah-edit .ico { width: 26px; height: 26px; }
body.portrait .ah-av .avring .lvb { font-size: 22px; height: 38px; min-width: 42px; }
body.portrait #sheet .ah-txt h2 { font-size: 50px; }
body.portrait .ah-chips { gap: 10px; }
body.portrait .ah-chips span { font-size: 22px; padding: 10px 16px; }
body.portrait .avpick { padding: 20px; border-radius: 22px; }
body.portrait .avp-head { flex-wrap: wrap; gap: 10px 16px; }
body.portrait .avp-head b { font-size: 30px; } body.portrait .avp-head span { font-size: 22px; flex-basis: 100%; order: 3; }
body.portrait .avp-head .avp-done { min-height: 80px; font-size: 22px; padding: 0 28px; }
body.portrait .avgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
body.portrait .avo em { font-size: 14px; }
body.portrait .acctsheet .acct { grid-template-columns: 1fr; gap: 22px; }
body.portrait .acctsheet .acf { padding: 26px 26px 28px; border-radius: 22px; gap: 16px; }
body.portrait .acctsheet .acf h3 { font-size: 32px; } body.portrait .acctsheet .acf p { font-size: 23px; }
body.portrait .acctsheet .acf-h > .ico { width: 40px; height: 40px; }
body.portrait .acctsheet .fld { font-size: 28px; }
body.portrait .acctsheet .fld > span { font-size: 18px; }
body.portrait .acctsheet .fld input, body.portrait .acct input { font-size: 28px !important; padding: 0 22px; height: 88px; }
body.portrait .acctsheet .ferr { font-size: 22px; }
body.portrait .acctsheet .acf .btn { min-height: 96px; font-size: 26px; }
body.portrait .acctsheet .acf-tag { font-size: 16px; padding: 7px 14px; top: -14px; }
body.portrait .acct-note { padding: 22px 24px; gap: 18px; border-radius: 20px; }
body.portrait .acct-note b { font-size: 28px; } body.portrait .acct-note span { font-size: 24px; } body.portrait .acct-note > .ico { width: 40px; height: 40px; }
body.portrait .acct-info { grid-template-columns: 1fr 1fr; gap: 14px; }
body.portrait .acct-info > div { padding: 18px 20px; border-radius: 18px; }
body.portrait .acct-info span { font-size: 17px; } body.portrait .acct-info b { font-size: 30px; }
body.portrait .acctsheet .actions { justify-content: center; }

/* =====================================================================
   SETTINGS PANEL (Profile > Settings): text on top, big full-width segmented controls under it
   ===================================================================== */
body.portrait .settings.m-panel { max-width: none; }
body.portrait .settings .set { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px 20px; padding: 26px 8px; }
body.portrait .settings .setic { width: 72px; height: 72px; font-size: 32px; }
body.portrait .settings .settxt b { font-size: 30px; } body.portrait .settings .settxt p { font-size: 23px; line-height: 1.4; margin-top: 6px; }
body.portrait .settings .seg.mseg { grid-column: 1 / -1; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 6px; border-radius: 20px; }
body.portrait .settings .seg.mseg .segpill { top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / var(--n)); border-radius: 15px; }
body.portrait .settings .seg.mseg button { min-height: 84px; font-size: 25px; padding: 0 8px; border-radius: 15px; }
body.portrait .settings .switch { font-size: 24px; min-height: 96px; }
body.portrait .settings .switch i { width: 96px; height: 52px; } body.portrait .settings .switch i::after { width: 42px; height: 42px; top: 4px; left: 4px; }
body.portrait .settings .switch.on i::after { transform: translateX(44px); } body.portrait .settings .switch span { width: 44px; }
body.portrait .settings #fs { min-height: 88px; font-size: 22px; padding: 0 24px; }