/* Portrait layouts (lane: cards). Every rule is scoped to body.portrait so landscape never changes.
   Collection, Deck Lab, Booster Packs, pack opening and the card inspect modal on a 900 x (1560-2000) stage.
   Sizes are stage px (a 390px phone shows ~0.43 css px per stage px): text >= 28, labels >= 22, tap targets >= 96.
   --top-h / --nav-h come from the core lane (css/portrait-core.css); the fallbacks match the phone header and nav bar. */

body.portrait #collection, body.portrait #deckbuilder, body.portrait #shop, body.portrait #opening, body.portrait #inspect {
  --ct: var(--top-h, 100px); --cn: var(--nav-h, 150px); }

/* ============================================================ shared: filter bar (search + sort + Filter panel) */
body.portrait .cl-bar { top: calc(var(--ct) + 134px); left: 24px; right: 24px; height: 96px; }
body.portrait .cl-bar .cnt { display: none; }
body.portrait .cf.cf-p { gap: 14px; height: 100%; position: static; }
body.portrait .cf-p .cf-search { flex: 1 1 auto; min-width: 0; max-width: none; font-size: 30px; } /* inputs are max(16px, 1em) !important on touch (style.css) */
body.portrait .cf-p .cf-sort { font-size: 28px; }
body.portrait .cf-p .cf-search .search { height: 96px; padding: 0 20px 0 66px; border-radius: 20px; font: 500 30px var(--font-ui); }
body.portrait .cf-p .cf-sort .lci, body.portrait .cf-p .cf-search .lci { left: 22px; width: 30px; height: 30px; }
body.portrait .cf-p .cf-sort select { height: 96px; padding: 0 54px 0 66px; border-radius: 20px; font: 700 28px var(--font-ui); }
body.portrait .cf-p .cf-sort::after { right: 24px; width: 11px; height: 11px; margin-top: -9px; border-width: 0 3px 3px 0; }
body.portrait .cf-ptog { appearance: none; cursor: pointer; flex: none; position: relative; height: 96px; padding: 0 28px 0 24px; border-radius: 20px; display: flex; align-items: center; gap: 12px;
  font: 800 28px var(--font-ui); letter-spacing: .03em; color: #e6dbff;
  background: linear-gradient(180deg, rgba(8, 4, 18, .85), rgba(22, 12, 44, .85)); border: 1px solid rgba(232, 186, 90, .28); box-shadow: 0 2px 8px rgba(0, 0, 0, .35) inset;
  transition: border-color .2s, background .2s, transform .2s var(--ease-back); }
body.portrait .cf-ptog .lci { width: 32px; height: 32px; color: var(--gold-2, #e2b04a); }
body.portrait .cf-ptog:active { transform: scale(.96); }
body.portrait .cf-ptog.act, body.portrait .cf-ptog[aria-expanded="true"] { color: #fff; border-color: var(--gold-1, #f6d98a);
  background: linear-gradient(180deg, rgba(120, 70, 210, .8), rgba(70, 34, 140, .85)); box-shadow: 0 0 0 1px rgba(232, 186, 90, .5) inset, 0 6px 16px rgba(90, 40, 180, .45); }
body.portrait .cf-ptog em { position: absolute; top: -12px; right: -10px; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 99px; display: grid; place-items: center;
  font: 900 24px var(--font-ui); font-style: normal; color: #2b1600; background: linear-gradient(180deg, #fff0c2, #f2c14e 55%, #c98a22); box-shadow: 0 0 14px rgba(242, 193, 78, .7); }

/* the drop-down panel sits over the grid, anchored to the bar */
body.portrait .cf-panel { position: absolute; top: calc(100% + 14px); left: 0; right: 0; z-index: 30; display: none; flex-direction: column; gap: 10px; padding: 18px 22px 22px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(34, 19, 64, .985), rgba(12, 7, 26, .985)); border: 1px solid rgba(232, 186, 90, .42); box-shadow: 0 34px 70px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .4); }
body.portrait .cf-p.open .cf-panel { display: flex; animation: cfDrop .28s var(--ease-out) both; }
@keyframes cfDrop { from { opacity: 0; transform: translateY(-14px); } }
body.portrait .cf-ph { margin: 8px 4px 0; font: 700 22px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2, #e2b04a); }
body.portrait .cf-panel .cf-g { display: grid; gap: 8px; padding: 6px; border-radius: 18px; }
body.portrait .cf-panel .cf-sets, body.portrait .cf-panel .cf-own { grid-template-columns: repeat(3, 1fr); }
body.portrait .cf-panel .cf-types { grid-template-columns: repeat(2, 1fr); }
body.portrait .cf-panel .cf-g button { width: auto; height: 96px; padding: 0 14px; gap: 14px; border-radius: 14px; font: 700 26px var(--font-ui); letter-spacing: .02em; }
body.portrait .cf-panel .cf-set { width: auto; margin: 0; justify-content: flex-start; padding-left: 26px; }
body.portrait .cf-panel .cf-set .setgem { width: 26px; height: 32px; }
body.portrait .cf-panel .cf-set.cf-promo .setgem { width: 32px; height: 32px; }
body.portrait .cf-panel .cf-set span { color: inherit; }
body.portrait .cf-panel .cf-set.on span { color: color-mix(in srgb, var(--c) 45%, #fff); }
body.portrait .cf-panel .cf-type { width: auto; justify-content: flex-start; padding-left: 28px; }
body.portrait .cf-panel .cf-type span { display: inline; }
body.portrait .cf-panel .cf-type .lci { width: 30px; height: 30px; }
body.portrait .cf-panel .cf-tog { height: 96px; padding: 0 26px; gap: 18px; justify-content: flex-start; border-radius: 18px; font: 700 26px var(--font-ui); }
body.portrait .cf-panel .cf-tog i { width: 64px; height: 36px; }
body.portrait .cf-panel .cf-tog i::after { top: 4px; left: 4px; width: 28px; height: 28px; }
body.portrait .cf-panel .cf-tog.on i::after { transform: translateX(28px); }
body.portrait .cf-pfoot { display: flex; gap: 14px; margin-top: 14px; }
body.portrait .cf-pfoot .cf-clear { width: auto; height: 96px; padding: 0 30px; gap: 10px; border-radius: 18px; font: 700 26px var(--font-ui); transform: none; }
body.portrait .cf-pfoot .cf-clear .lci { width: 28px; height: 28px; }
body.portrait .cf-pfoot .cf-clear.hide { display: none; }
body.portrait .cf-pfoot .cf-done { flex: 1; height: 96px; padding: 0 20px; border-radius: 18px; font-size: 30px; }

/* ============================================================ shared: 3-wide card grid */
body.portrait #collection .grid, body.portrait #deckbuilder .grid { left: 0; right: 0; grid-template-columns: repeat(3, 256px); gap: 46px 26px; padding: 22px 24px 70px; justify-content: center; }
body.portrait .grid .slotc, body.portrait .grid .slotc .card { width: 256px; height: 358px; }
body.portrait .grid .slotc .card:hover { transform: none; }
body.portrait .grid .slotc .card:active { transform: scale(.96); }
body.portrait .cpips { bottom: -30px; gap: 12px; }
body.portrait .cpips i { width: 15px; height: 15px; }
body.portrait .clock { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
body.portrait .clock .lci { width: 36px; height: 36px; }
body.portrait .ccraft { font-size: 22px; padding: 6px 14px; bottom: 12px; }
body.portrait .ccraft.promo { font-size: 22px; line-height: 1.15; width: 92%; padding: 8px 10px; bottom: 6%; border-radius: 14px; letter-spacing: 0; }
body.portrait .cnew { font-size: 22px; padding: 6px 12px; top: -12px; left: -8px; border-radius: 8px; }
body.portrait .cl-band { flex-wrap: wrap; gap: 4px 16px; padding: 6px 4px 10px; margin-bottom: -18px; }
body.portrait .cl-band b { font-size: 32px; letter-spacing: .14em; }
body.portrait .cl-band span { font-size: 22px; }
body.portrait .cl-empty { font-size: 30px; padding: 120px 40px; }
body.portrait .grid .nown { font-size: 20px; padding: 6px 14px; bottom: 14px; }

/* ============================================================ Collection */
body.portrait #collection .grid { top: calc(var(--ct) + 244px); bottom: var(--cn); }
body.portrait #collection .albumsbtn { height: 72px; padding: 0 22px; gap: 10px; font-size: 24px; border-radius: 16px; }
body.portrait #collection .albumsbtn .lci { width: 28px; height: 28px; }
body.portrait #collection .albumsbtn em { font-size: 20px; min-width: 32px; height: 32px; }
body.portrait .cl-sum { position: absolute; top: calc(var(--ct) + 18px); left: 24px; right: 24px; height: 100px; z-index: 4; display: flex; align-items: center; gap: 18px; padding: 0 12px 0 16px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(34, 19, 64, .86), rgba(12, 7, 26, .9)); border: 1px solid rgba(232, 186, 90, .28); box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
body.portrait .cl-sum .cl-prog { gap: 14px; }
body.portrait .cl-sum .cl-prog svg { width: 72px; height: 72px; }
body.portrait .cl-sum .cl-prog b { font-size: 36px; }
body.portrait .cl-sum .cl-prog b small { font-size: 24px; }
body.portrait .cl-sum .cl-prog span { font-size: 20px; letter-spacing: .16em; }
body.portrait .cl-sum .cl-shards { margin-left: auto; gap: 0; padding: 0; background: none; border: 0; box-shadow: none; }
body.portrait .cl-sum .cl-shards .lc-shard { padding: 12px 10px; gap: 9px; }
body.portrait .cl-sum .cl-shards .lc-shard > i { width: 18px; height: 24px; }
body.portrait .cl-sum .cl-shards .lc-shard b { font-size: 30px; min-width: 0; }

/* ============================================================ Deck Lab: card pool on top, the deck docked as a drawer */
body.portrait #deckbuilder .cl-bar { top: calc(var(--ct) + 18px); right: 24px; }
body.portrait #deckbuilder .grid { top: calc(var(--ct) + 128px); right: 0; bottom: calc(var(--cn) + 170px); }
body.portrait .dl-hint { display: none; }

body.portrait #deckbuilder .decklist.af-panel.dl-dock { left: 16px; right: 16px; width: auto; bottom: calc(var(--cn) + 6px); top: calc(var(--ph) - var(--cn) - 164px); padding: 14px 16px; gap: 16px; border-radius: 28px; z-index: 8;
  background: linear-gradient(180deg, rgba(40, 23, 76, .97), rgba(12, 7, 26, .985)); border: 1px solid rgba(232, 186, 90, .4); box-shadow: 0 -18px 40px rgba(0, 0, 0, .55);
  transition: top .42s var(--ease-out); }
body.portrait #deckbuilder .decklist.af-panel.dl-dock.open { top: calc(var(--ct) + 14px); overflow: hidden; }
body.portrait #deckbuilder .dl-dock:not(.open) > :not(.dl-dockbar):not(#dbMsg) { display: none; }
body.portrait .dl-dockbar { display: flex; align-items: center; gap: 14px; flex: none; height: 128px; }
body.portrait .dl-dockbar .dl-ring { width: 112px; height: 112px; cursor: pointer; }
body.portrait .dl-dockbar .dl-ring b { font-size: 40px; }
body.portrait .dl-dockbar .dl-ring span { font-size: 22px; margin-top: 4px; }
body.portrait .dl-dockbar .dl-ring.bump { animation: dlBump .42s var(--ease-back); }
@keyframes dlBump { 40% { transform: scale(1.14); filter: drop-shadow(0 0 16px rgba(185, 138, 255, .9)); } }
body.portrait .dl-dockbar .dl-pick { flex: 1; min-width: 0; position: static; }
body.portrait .dl-dockbar .dl-pickbtn { width: 100%; min-width: 0; max-width: none; height: 104px; padding: 0 20px; gap: 16px; border-radius: 18px; }
body.portrait .dl-dockbar .dl-pickbtn small { font-size: 22px; }
body.portrait .dl-dockbar .dl-pickbtn b { font-size: 32px; }
body.portrait .dl-dockbar .dl-pickbtn .lci { width: 30px; height: 30px; }
body.portrait .dl-dockbar .dl-dot { width: 18px; height: 18px; }
body.portrait .dl-dockbar #save { flex: none; height: 104px; min-width: 164px; padding: 0 26px; border-radius: 18px; font-size: 30px; }
body.portrait .dl-grab { appearance: none; cursor: pointer; flex: none; width: 96px; height: 104px; border-radius: 18px; display: grid; place-items: center; color: var(--gold-1, #f6d98a);
  background: linear-gradient(180deg, rgba(40, 24, 72, .8), rgba(18, 10, 36, .85)); border: 1px solid rgba(232, 186, 90, .35); transition: background .2s, transform .2s var(--ease-back); }
body.portrait .dl-grab .lci { width: 42px; height: 42px; transition: transform .35s var(--ease-back); }
body.portrait .dl-grab:active { transform: scale(.94); }
body.portrait .dl-dock.open .dl-grab .lci { transform: rotate(180deg); }
/* deck picker menu: drops up from the closed drawer, down inside the open one */
body.portrait .dl-dock .dl-menu { left: 0; right: 0; width: auto; top: 150px; bottom: auto; max-height: calc(100% - 170px); padding: 16px; border-radius: 24px; z-index: 30; }
body.portrait .dl-dock:not(.open) .dl-menu { top: auto; bottom: calc(100% + 14px); max-height: 1000px; }
body.portrait .dl-dock .dl-new { font-size: 28px; padding: 28px; border-radius: 16px; gap: 12px; }
body.portrait .dl-dock .dl-new .lci { width: 30px; height: 30px; }
body.portrait .dl-dock .dl-fold h5 { font-size: 22px; margin: 20px 8px 10px; gap: 10px; }
body.portrait .dl-dock .dl-fold h5 .lci { width: 24px; height: 24px; }
body.portrait .dl-dock .dl-fold button { grid-template-columns: 20px 1fr auto; gap: 18px; padding: 28px 20px; border-radius: 14px; }
body.portrait .dl-dock .dl-fold button b { font-size: 30px; }
body.portrait .dl-dock .dl-fold button em { font-size: 26px; }
body.portrait .dl-dock .dl-fold .dl-dot { width: 16px; height: 16px; }
body.portrait .dl-dock .dl-none { font-size: 26px; }
/* open drawer contents */
body.portrait .dl-dock .dl-head { gap: 14px; }
body.portrait .dl-dock .dl-names { flex-direction: row; gap: 14px; font-size: 30px; }
body.portrait #deckbuilder .dl-dock .dl-name { flex: 1.3; min-width: 0; height: 96px; font-size: 30px; padding: 0 20px; border-radius: 16px; }
body.portrait .dl-dock .dl-folder { flex: 1; min-width: 0; font-size: 26px; }
body.portrait .dl-dock .dl-folder input { height: 96px; font-size: 26px; padding: 0 16px 0 58px; border-radius: 16px; }
body.portrait .dl-dock .dl-folder .lci { left: 20px; width: 28px; height: 28px; }
body.portrait .dl-dock .dl-stats { padding: 16px 16px 12px; border-radius: 18px; }
body.portrait #deckbuilder .dl-dock .curve { height: 130px; gap: 8px; }
body.portrait #deckbuilder .dl-dock .curve .cv em { font-size: 22px; height: 26px; line-height: 26px; }
body.portrait #deckbuilder .dl-dock .curve .cv > span { font-size: 22px; margin-top: 6px; }
body.portrait .dl-dock .dl-types { display: flex; margin-top: 14px; }
body.portrait .dl-dock .dl-types span { font-size: 22px; gap: 8px; }
body.portrait .dl-dock .dl-types b { font-size: 28px; }
body.portrait .dl-dock .dl-types .lci { width: 28px; height: 28px; }
body.portrait .dl-dock .dnote { font-size: 24px; min-height: 30px; }
body.portrait .dl-dock .dnote .ok .lci { width: 24px; height: 24px; }
body.portrait #deckbuilder .dl-dock .rows { gap: 6px; margin-right: -8px; padding-right: 8px; }
body.portrait #deckbuilder .dl-dock .drow { height: 84px; grid-template-columns: 62px 1fr auto; gap: 16px; padding: 0 16px 0 10px; border-radius: 12px; }
body.portrait .dl-dock .dr-cost { width: 56px; height: 62px; }
body.portrait .dl-dock .dr-cost span { font-size: 30px; }
body.portrait .dl-dock .dr-name { font-size: 29px; }
body.portrait .dl-dock .dr-q { font-size: 26px; padding: 4px 14px; border-radius: 10px; }
body.portrait .drow.enter { animation-name: drowInM; }
body.portrait .dl-dock .dl-empty { font-size: 26px; gap: 14px; padding: 50px 30px; }
body.portrait .dl-dock .dl-empty b { font-size: 32px; }
body.portrait .dl-dock .dl-empty .lci { width: 44px; height: 44px; }
body.portrait .dl-dock .dl-actions { gap: 12px; padding-top: 14px; }
body.portrait .dl-dock .dl-main { grid-template-columns: 1fr; }
body.portrait .dl-dock .dl-main .btn { height: 96px; padding: 0 20px; font-size: 30px; border-radius: 18px; }
body.portrait .dl-dock .dl-tools { gap: 10px; }
body.portrait .dl-dock .dl-tools button { height: 110px; padding: 0; gap: 8px; justify-content: center; border-radius: 16px; font-size: 20px; letter-spacing: .04em; }
body.portrait .dl-dock .dl-tools button .lci { width: 36px; height: 36px; }
body.portrait .dl-dock #dbMsg { font-size: 24px; min-height: 30px; }
body.portrait .dl-dock:not(.open) #dbMsg { position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%); width: max-content; max-width: 820px; padding: 16px 28px; border-radius: 99px;
  background: rgba(12, 6, 28, .96); border: 1px solid rgba(255, 156, 146, .5); box-shadow: 0 12px 30px rgba(0, 0, 0, .6); pointer-events: none; }
body.portrait .dl-dock:not(.open) #dbMsg.good { border-color: rgba(157, 255, 196, .5); }
body.portrait .dl-dock:not(.open) #dbMsg:empty { display: none; }

/* ============================================================ Booster Packs: 3 + 2 packs, centred in the space between header and note */
body.portrait #shop .packs { top: calc(var(--ct) + 10px); bottom: calc(var(--cn) + 110px); left: 12px; right: 12px; flex-wrap: wrap; align-content: center; gap: 16px 12px; }
body.portrait #shop .shoppack { width: 276px; height: 560px; }
body.portrait #shop .shoppack img { height: 270px; max-width: 220px; }
body.portrait .sp-spot { width: 300px; height: 440px; }
body.portrait .sp-ped { top: 292px; width: 230px; }
body.portrait .sp-info { top: 370px; gap: 8px; padding: 0 6px; }
body.portrait #shop .shoppack .nm { font-size: 32px; letter-spacing: .16em; }
body.portrait #shop .sp-theme { font-size: 22px; letter-spacing: .1em; line-height: 1.2; white-space: normal; text-align: center; min-height: 54px; display: flex; align-items: center; }
body.portrait #shop .shoppack .price { margin-top: 6px; padding: 12px 34px; font-size: 30px; }
body.portrait #shop .shoppack .price .coin { width: 30px; height: 30px; }
body.portrait #shop .shoppack:hover img { transform: none; }
body.portrait #shop .shoppack:active img { transform: translateY(-12px) scale(1.04); }
body.portrait #shop .note { left: 24px; right: 24px; bottom: calc(var(--cn) + 18px); gap: 8px 34px; font-size: 22px; line-height: 1.3; }
body.portrait #shop .note .lci { width: 24px; height: 24px; }
body.portrait #shop .note .dupeNote { font-size: 22px; }

/* ============================================================ pack opening */
body.portrait #opening .hint { bottom: 260px; }
body.portrait #opening .hint b { font-size: 32px; padding: 20px 40px; letter-spacing: .2em; }
body.portrait #opening .pk-hud { top: 24px; right: 24px; padding: 14px 28px 14px 18px; gap: 14px; }
body.portrait #opening .pk-hud small { font-size: 20px; }
body.portrait #opening .pk-hud b { font-size: 36px; }
body.portrait #opening .pk-hud .lc-shard > i { width: 22px; height: 29px; }
body.portrait .pk-banner { top: 150px; padding: 0 30px; }
body.portrait .pk-banner small { font-size: 22px; letter-spacing: .4em; }
body.portrait .pk-banner b { font-size: 60px; line-height: 1.08; }
body.portrait #opening .labels .pk-lab .lc-rar { font-size: 20px; padding: 8px 18px 8px 15px; gap: 9px; }
body.portrait #opening .labels .pk-lab .lc-rar i { width: 10px; height: 10px; }
body.portrait #opening .labels .pk-tag { font-size: 22px; padding: 8px 18px; }
body.portrait #opening .labels .pk-tag .lc-shard > i { width: 14px; height: 18px; }
body.portrait .pk-sum { bottom: 176px; width: 852px; white-space: normal; gap: 12px; }
body.portrait .pk-sumrow { flex-wrap: wrap; justify-content: center; gap: 10px; }
body.portrait .pk-rc { font-size: 22px; padding: 7px 18px 7px 8px; gap: 10px; }
body.portrait .pk-rc b { min-width: 36px; height: 36px; font-size: 22px; }
body.portrait .pk-sumrow.sub { gap: 6px 30px; font-size: 24px; text-align: center; }
body.portrait .pk-sumrow.sub span + span::before { margin: 0 20px 3px -18px; }
body.portrait #opening .bar { bottom: 44px; left: 24px; right: 24px; width: auto; gap: 14px; }
body.portrait #opening .bar .btn { flex: 1 1 0; min-width: 0; max-width: 400px; height: 104px; padding: 0 18px; font-size: 28px; border-radius: 18px; white-space: nowrap; }
body.portrait #opening.zoomed .bar { opacity: 0; pointer-events: none; }
body.portrait #opening .bar { transition: opacity .25s; }
/* zoomed card sits in the top half (js/scene3d.js PackScene.zoom); its details fill the bottom */
body.portrait #opening .inspectTxt { left: 24px; right: 24px; top: auto; bottom: 36px; width: auto; max-height: 44%; overflow-y: auto; transform: none; padding: 30px 34px 26px; border-radius: 26px; }
body.portrait #opening .inspectTxt.on { gap: 14px; animation: pkItUp .35s var(--ease-out) both; }
@keyframes pkItUp { from { opacity: 0; transform: translateY(30px); } }
body.portrait #opening .it-eyebrow { font-size: 22px; gap: 12px; }
body.portrait #opening .it-eyebrow .setgem { width: 22px; height: 28px; }
body.portrait #opening .inspectTxt h3 { font-size: 48px; }
body.portrait #opening .it-tags { font-size: 24px; flex-wrap: wrap; gap: 10px 16px; }
body.portrait #opening .it-tags .lc-rar { font-size: 20px; padding: 7px 16px 7px 13px; }
body.portrait #opening .inspectTxt .it-rules { font-size: 30px; }
body.portrait #opening .inspectTxt .it-flavor { font-size: 26px; }
body.portrait #opening .it-hint { font-size: 22px; }
/* no WebGL: the cards deal into rows of three */
body.portrait .pk-fallback { top: 220px; padding: 0 24px; flex-wrap: wrap; gap: 70px 22px; }
body.portrait .pk-fcell .card { width: 256px !important; height: 358px !important; }
body.portrait .pk-fcell .lc-rar { font-size: 20px; padding: 7px 16px 7px 13px; }
body.portrait .pk-fcell .pk-tag { font-size: 22px; padding: 6px 16px; top: -18px; }

/* ============================================================ card inspect: the card on top, details scroll below */
body.portrait #inspect .box.ci-box { display: flex; flex-direction: column; align-items: center; gap: 26px; width: 860px; max-width: calc(100% - 32px); max-height: calc(100% - 64px); padding: 44px 36px 34px; border-radius: 28px; overflow: hidden; }
body.portrait .ci-box > .ci-bg { -webkit-mask: linear-gradient(180deg, #000 15%, transparent 70%); mask: linear-gradient(180deg, #000 15%, transparent 70%); }
body.portrait .ci-stage, body.portrait #inspect .big, body.portrait #inspect .big .card { width: 430px; height: 602px; }
body.portrait .ci-stage { flex: none; }
body.portrait .ci-x { top: 18px; right: 18px; width: 96px; height: 96px; }
body.portrait .ci-x .lci { width: 40px; height: 40px; }
body.portrait .ci-info { width: 100%; max-height: none; flex: 1 1 auto; min-height: 0; gap: 18px; padding: 0 8px 4px 0; }
body.portrait .ci-eyebrow { font-size: 22px; gap: 12px; }
body.portrait .ci-eyebrow .setgem { width: 22px; height: 28px; }
body.portrait #inspect .ci-info h3 { font-size: 52px; }
body.portrait .ci-tags { gap: 14px 18px; }
body.portrait #inspect .lc-rar { font-size: 22px; padding: 8px 18px 8px 15px; gap: 9px; }
body.portrait #inspect .lc-rar i { width: 10px; height: 10px; }
body.portrait .ci-type { font-size: 26px; }
body.portrait .ci-stats { gap: 14px; }
body.portrait .ci-stats > span { font-size: 22px; gap: 12px; padding: 6px 22px 6px 6px; }
body.portrait .ci-stats i { width: 56px; height: 56px; font-size: 32px; }
body.portrait .ci-rules { font-size: 30px; padding: 20px 24px; border-radius: 16px; }
body.portrait .ci-flavor { font-size: 26px; }
body.portrait .ci-tips { gap: 10px; }
body.portrait .ci-tips li { font-size: 24px; padding-left: 24px; }
body.portrait .ci-tips li::before { width: 9px; height: 9px; }
body.portrait #inspect .craftbox { padding: 22px 24px; gap: 16px; border-radius: 20px; }
body.portrait .ci-own { gap: 16px; }
body.portrait .ci-own > span { font-size: 22px; }
body.portrait .ci-own .cpips i { width: 16px; height: 16px; }
body.portrait .ci-own b { font-size: 30px; }
body.portrait .ci-full { font-size: 26px; gap: 12px; line-height: 1.35; }
body.portrait .ci-full .lci { width: 28px; height: 28px; }
body.portrait .ci-shardline { font-size: 26px; gap: 12px; }
body.portrait .ci-shardline b { font-size: 30px; }
body.portrait .ci-shardline .lc-shard > i { width: 16px; height: 22px; }
body.portrait .ci-bar { height: 14px; }
body.portrait #craftBtn { height: 100px; padding: 0 20px; font-size: 30px; border-radius: 18px; }
body.portrait #inspect .err { font-size: 24px; }