/* ==========================================================================================
   screens/draft.css — BAND_DRAFT strategy pick (js/screens/bandDraft.js). Research 06 §4.2:
   draft order on the left, portrait grid, detail pane with 初始生命值 and 确认选择 / 跳过; the 本局信息 entry under
   the order list and its dialog (js/ui/matchInfo.js MatchInfoDialog, GitHub issue #8 item 1).
   ========================================================================================== */

.draft__main { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; grid-template-columns: 3.9rem 1fr 5rem; gap: .3rem; padding: .3rem .42rem .36rem; }

.draft-order { display: flex; flex-direction: column; gap: .1rem; min-height: 0; }
.dorder {
  position: relative; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: .12rem;
  padding: .1rem .12rem .1rem .08rem; background: rgba(12, 15, 14, .82); border: 1px solid var(--line);
  transition: border-color var(--t-med), background var(--t-med);
}
.dorder .pavatar { --pa: .66rem; }
.dorder__idx { font-size: calc(.22 * var(--t)); color: var(--text-dim); width: .26rem; text-align: center; }
.dorder__text { display: flex; flex-direction: column; gap: .02rem; min-width: 0; }
.dorder__name { font-size: calc(.18 * var(--t)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: .06rem; }
.dorder__ai { font-family: var(--font-num); font-size: calc(.11 * var(--t)); padding: 0 .04rem; background: #a9c3d8; color: #0b1520; }
.dorder__state { font-size: calc(.14 * var(--t)); }
.dorder__state span { display: inline-flex; align-items: center; gap: .04rem; }
.dorder__state .icon { width: .16rem; height: .16rem; }
.dorder__box { position: relative; width: .6rem; height: .6rem; display: grid; place-items: center; border: 1px dashed var(--line-2); }
.dorder__check { position: absolute; right: -.06rem; bottom: -.06rem; width: .22rem; height: .22rem; display: grid; place-items: center; background: var(--mint-500); color: var(--text-on-mint); }
.dorder__check .icon { width: .16rem; height: .16rem; }
.dorder__finger { width: .44rem; height: .44rem; animation: finger 1s ease-in-out infinite; }
@keyframes finger { 50% { transform: translateX(-.06rem); } }
.dorder.is-cur { border-color: var(--gold); background: linear-gradient(90deg, rgba(255, 198, 0, .12), rgba(12, 15, 14, .82)); box-shadow: 0 0 .2rem rgba(255, 198, 0, .15); }
.dorder.is-done { border-color: var(--mint-800); }
.dorder.is-self .dorder__name { color: var(--mint-400); }
.draft-order__tip { margin-top: auto; font-size: calc(.13 * var(--t)); line-height: 1.6; color: var(--text-dim); }

.draft-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(1.36rem, 1fr)); grid-auto-rows: min-content; gap: .12rem;
  min-height: 0; overflow: auto; padding: .04rem .08rem .04rem .04rem; align-content: start;
}
.dband {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .08rem .06rem .1rem;
  background: rgba(12, 15, 14, .82); border: 1px solid var(--line); color: var(--text-md);
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.dband:hover { transform: translateY(-.03rem); border-color: var(--line-3); }
.dband .bandicon { --bi: 1.1rem; border: 1px solid var(--line-2); }
.dband__name { font-size: calc(.16 * var(--t)); font-weight: 700; color: var(--text-hi); white-space: nowrap; }
.dband__lp { display: inline-flex; align-items: center; gap: .04rem; font-size: calc(.15 * var(--t)); color: var(--mint-400); }
.dband__lp i { width: .12rem; height: .14rem; background: var(--mint-500); clip-path: polygon(0 0, 30% 0, 30% 20%, 45% 20%, 45% 0, 55% 0, 55% 20%, 70% 20%, 70% 0, 100% 0, 100% 35%, 85% 50%, 85% 80%, 100% 90%, 100% 100%, 0 100%, 0 90%, 15% 80%, 15% 50%, 0 35%); }
.dband__who { position: absolute; right: .04rem; top: .04rem; display: flex; flex-direction: column; gap: .02rem; }
.dband__who .pavatar { --pa: .3rem; border-radius: 50%; overflow: hidden; border: 2px solid var(--mint-400); }
.dband.is-sel { border-color: var(--mint-400); background: linear-gradient(180deg, rgba(78, 216, 175, .18), rgba(12, 15, 14, .85)); box-shadow: 0 0 0 1px var(--mint-400), 0 0 .24rem rgba(23, 249, 183, .2); }
.dband.is-mine::after { content: '已选择'; position: absolute; left: 0; top: 0; font-size: calc(.11 * var(--t)); font-weight: 700; padding: 0 .06rem; background: var(--mint-500); color: var(--text-on-mint); }

.draft-detail {
  display: flex; flex-direction: column; align-items: center; gap: .12rem; padding: .26rem .26rem .22rem; min-height: 0;
  background: linear-gradient(180deg, rgba(20, 30, 26, .9), rgba(10, 13, 12, .92)); border: 1px solid var(--line-2);
}
.draft-detail__art { position: relative; padding: .06rem; border: 1px solid var(--mint-800); background: radial-gradient(circle, rgba(78, 216, 175, .14), transparent 70%); }
.draft-detail__art .bandicon { --bi: 2rem; }
.draft-detail__hp { display: flex; align-items: center; gap: .12rem; font-size: calc(.16 * var(--t)); color: var(--text-lo); }
.draft-detail__name { font-size: calc(.42 * var(--t)); font-weight: 900; letter-spacing: .1em; }
.draft-detail__eff { align-self: stretch; display: flex; flex-direction: column; gap: .06rem; padding: .12rem .14rem; background: rgba(0, 0, 0, .3); border-left: 3px solid var(--mint-500); flex: 1; min-height: 0; overflow: auto; }
.draft-detail__eff b { font-size: calc(.2 * var(--t)); color: var(--mint-400); }
.draft-detail__desc { font-size: calc(.16 * var(--t)); line-height: 1.7; color: var(--text-md); }
.draft-detail__actions { align-self: stretch; display: flex; flex-direction: column; gap: .1rem; }
.draft-detail__status { display: flex; align-items: center; gap: .06rem; font-size: calc(.15 * var(--t)); color: var(--text-lo); }
.draft-detail__status .icon { width: .18rem; height: .18rem; }
.draft-detail__btns { display: flex; gap: .1rem; }
.draft-detail__btns .btn { flex: 1; }
.dorder__secs { margin-left: .06rem; font-size: calc(.15 * var(--t)); color: var(--gold); }
/* 队友已选 (research 09 §5): a strategy a teammate picked cannot be chosen again */
.dband.is-taken { cursor: not-allowed; border-color: rgba(246, 163, 41, .35); }
.dband.is-taken .bandicon, .dband.is-taken .dband__name, .dband.is-taken .dband__lp { filter: grayscale(.8) brightness(.62); }
.dband.is-taken:hover { transform: none; }
.dband__taken {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-8deg); white-space: nowrap; pointer-events: none;
  padding: .02rem .12rem; font-size: calc(.15 * var(--t)); font-weight: 900; letter-spacing: .16em; color: #1d1400; background: var(--amber);
  box-shadow: 0 .03rem .1rem rgba(0, 0, 0, .6);
}
.draft-detail__status--taken { color: var(--amber); }
/* a strategy built around a bond this mode switches off (bandDraft.js BandOffTag / BandOffNote, DESIGN §21.26 — the
   §21.7 本局禁用 look: dim, dashed, the bond struck through): information only, it stays selectable. Px floors keep it
   readable on phones (1rem = 40 px). */
.dband__off { font-size: max(calc(.12 * var(--t)), 8px); line-height: 1.5; padding: 0 .05rem; color: var(--text-dim); border: 1px dashed rgba(255, 255, 255, .28); white-space: nowrap; }
.draft-detail__off { align-self: stretch; display: flex; align-items: flex-start; gap: .06rem; margin: 0; padding: .06rem .1rem;
  font-size: max(calc(.14 * var(--t)), 9px); line-height: 1.5; color: var(--text-lo); background: rgba(255, 255, 255, .03); border-left: 2px solid rgba(255, 255, 255, .28); }
.draft-detail__off .icon { width: max(.16rem, 10px); height: max(.16rem, 10px); flex: none; margin-top: .02rem; }
.draft-detail__offname { color: var(--text-dim); text-decoration: line-through; text-decoration-color: rgba(255, 84, 84, .6); }

/* ---- 本局信息 (GitHub issue #8 item 1, DESIGN §21.28): the entry under the order list and the read-only dialog -------
   The dialog shows the briefing's own blocks (.brief-bonds / .brief-legend / .brief-banned, css/screens/briefing.css)
   at the briefing's size on desktop; every size is max(design rem, px floor), so on a phone (1rem = 40 px) the text
   stays at ≥ 9–15 px and the dialog's body scrolls inside the screen (756×366, 844×390) while the header and the
   footer (the turn's countdown, 关闭) stay in view. */
.draft-order__info {
  margin-top: .04rem; justify-content: flex-start; padding: 0 .16rem;
  height: max(.5rem, 28px); font-size: max(calc(.18 * var(--t)), 10px);
  --btn-bd: var(--mint-800); --btn-bg: rgba(78, 216, 175, .06); --btn-bg-hover: rgba(78, 216, 175, .14);
}
.draft-order__info .btn__icon { color: var(--mint-400); }
.modal__box.minfo-dlg {
  width: min(max(12rem, 600px), calc(100vw - .6rem - var(--sa-l, 0px) - var(--sa-r, 0px)));
  max-height: calc(100vh - .6rem);
  max-height: calc(100svh - .6rem);
}
.minfo-dlg .modal__head { padding: .16rem .3rem .02rem; }
.minfo-dlg .modal__head .micro { font-size: max(.11rem, 8px); }
.minfo-dlg .modal__title { font-size: max(.26rem, 15px); }
.minfo-dlg .modal__body { display: flex; flex-direction: column; gap: max(.16rem, 6px); padding: .1rem .3rem .2rem; }
.minfo-dlg .modal__actions { align-items: center; padding: .12rem .3rem; }
.minfo-dlg .modal__actions .btn { height: max(.5rem, 30px); font-size: max(.18rem, 12px); }
.minfo-dlg__status { margin-right: auto; min-width: 0; }
.minfo-dlg__turn { display: inline-flex; align-items: center; gap: .06rem; font-size: max(.17rem, 11px); font-weight: 700; color: var(--gold); white-space: nowrap; }
.minfo-dlg__turn .icon { width: max(.18rem, 12px); height: max(.18rem, 12px); }
.minfo-dlg__turn b { margin-left: .04rem; font-size: max(.22rem, 14px); }
.minfo-dlg__turn.is-warn { color: var(--orange-hi); }
.minfo-dlg__turn.is-mint { color: var(--mint-400); }
.minfo-dlg__turn.is-dim { color: var(--text-lo); }
.minfo-dlg .brief-bonds, .minfo-dlg .brief-banned { padding: max(.16rem, 6px) max(.2rem, 8px) max(.2rem, 8px); }
.minfo-dlg .brief-h { font-size: max(.21rem, 12px); margin-bottom: max(.12rem, 5px); }
.minfo-dlg .brief-h::before { width: max(.06rem, 3px); height: max(.2rem, 11px); }
.minfo-dlg .brief-bonds__row { gap: max(.16rem, 6px) max(.1rem, 4px); }
.minfo-dlg .brief-bond { width: max(1rem, 50px); }
.minfo-dlg .brief-bond .bond { --disc: max(.66rem, 32px); }
.minfo-dlg .brief-bond .bond__name { font-size: max(.16rem, 10px); }
.minfo-dlg .brief-bond__ban { font-size: max(.12rem, 9px); padding: 0 max(.05rem, 2px); }
.minfo-dlg .brief-bond__ban .icon { width: max(.12rem, 9px); height: max(.12rem, 9px); }
.minfo-dlg .brief-legend { margin-top: 0; font-size: max(.14rem, 10px); }
.minfo-dlg .brief-legend__off { width: max(.16rem, 9px); height: max(.16rem, 9px); }
.minfo-dlg .brief-legend__ban { width: max(.2rem, 12px); height: max(.18rem, 11px); }
.minfo-dlg .brief-legend__ban .icon { width: max(.12rem, 8px); height: max(.12rem, 8px); }
.minfo-dlg .brief-banned__n { font-size: max(.22rem, 13px); }
.minfo-dlg .brief-banned__grid { grid-template-columns: repeat(auto-fill, minmax(max(.6rem, 34px), 1fr)); gap: max(.08rem, 3px); }
.minfo-dlg .brief-banned__grid .uthumb { --ut: max(.6rem, 34px); }
.minfo-dlg .brief-banned__diy { font-size: max(.14rem, 12px); }
.minfo-dlg .t-dim { font-size: max(.16rem, 10px); }

/* (stronghold-ui package: 对局动画与结算 — appended by tools/install.mjs) */
/* ---- 「请选择策略」 (ui/matchIntro.js TurnBanner) ---- */
.pmark { display: inline-flex; align-items: center; gap: .1rem; color: currentColor; }
.pmark__glyph { width: .5rem; height: .5rem; fill: currentColor; flex: none; }
.pmark__type { font-family: var(--font-num); font-size: calc(.17 * var(--t)); font-weight: 700; line-height: 1.05; letter-spacing: .08em; }
.tbanner { position: fixed; inset: 0; z-index: var(--z-banner, 40); display: grid; align-items: center; pointer-events: none; overflow: hidden; }
.tbanner__dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; animation: tbanner-dim 1650ms linear both; }
@keyframes tbanner-dim { 0% { opacity: 0; } 8%, 88% { opacity: 1; } 100% { opacity: 0; } }
.tbanner__band { position: relative; display: flex; align-items: center; gap: .26rem; height: 2.1rem; animation: tbanner-band 1650ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes tbanner-band { 0% { transform: translateX(-46%); } 12% { transform: translateX(-1.6%); } 90% { transform: translateX(1.2%) scaleY(1); }
  97% { transform: translateX(1.2%) scaleY(.06); } 100% { transform: translateX(1.2%) scaleY(0); } }
.tbanner__bar { position: relative; flex: none; width: 84vw; height: 100%; overflow: hidden; background: linear-gradient(180deg, #d5d7da, #b8bbbf); box-shadow: 0 .06rem .3rem rgba(0, 0, 0, .5); }
.tbanner__grey { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 1.3rem; color: #45494d; }
.tbanner__logo { transform: scale(1.5); transform-origin: left center; }
.tbanner__map { position: absolute; inset: 0 0 0 38%; pointer-events: none;
  background: repeating-radial-gradient(ellipse at 72% 64%, rgba(0, 0, 0, .08) 0 1px, transparent 1px 14px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 1.2rem);
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%); mask: linear-gradient(90deg, transparent, #000 30%); }
.tbanner__mint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 2.5rem;
  background: linear-gradient(180deg, #59e6bd, #3dd1a5); clip-path: inset(0 100% 0 0); animation: tbanner-wipe 1650ms cubic-bezier(.5, 0, .2, 1) both; }
@keyframes tbanner-wipe { 0%, 34% { clip-path: inset(0 100% 0 0); } 62%, 100% { clip-path: inset(0 0 0 0); } }
.tbanner__mint .tbanner__map { inset: 0; background: repeating-radial-gradient(ellipse at 40% 50%, rgba(8, 60, 44, .13) 0 1px, transparent 1px 16px); -webkit-mask: none; mask: none; }
.tbanner__text { position: relative; padding-bottom: .06rem; font-size: calc(.52 * var(--t)); font-weight: 900; letter-spacing: .1em; color: #0b2a21; border-bottom: .05rem solid #0b2a21;
  animation: tbanner-text 1650ms ease-out both; }
@keyframes tbanner-text { 0%, 46% { opacity: 0; transform: translateX(-.4rem); } 64% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; transform: translateX(.14rem); } }
.tbanner__ring { position: absolute; right: .7rem; top: 50%; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: .1rem solid rgba(11, 42, 33, .7);
  border-left-color: transparent; border-bottom-color: transparent; animation: tbanner-ring 1650ms ease-out both; }
@keyframes tbanner-ring { 0%, 40% { opacity: 0; transform: translateY(-50%) rotate(-150deg); } 70% { opacity: 1; } 100% { opacity: 1; transform: translateY(-50%) rotate(30deg); } }
.tbanner__bot { flex: none; width: 1.12rem; height: 1.12rem; display: grid; place-items: center; background: #3dd1a5; color: #0b2a21; box-shadow: 0 0 .2rem rgba(61, 209, 165, .6);
  animation: tbanner-bot 1650ms ease-out both; }
.tbanner__bot .icon { width: 70%; height: 70%; }
@keyframes tbanner-bot { 0%, 4% { opacity: 0; transform: scale(.4); } 12% { opacity: 1; transform: scale(1); } }

/* ---- 协议启动！ (ui/matchIntro.js ProtocolBoot, BATTLE_CHECK): a 16:9 stage, sizes in container units ---- */
.pboot { position: fixed; inset: 0; z-index: calc(var(--z-conn, 75) - 1); overflow: hidden; pointer-events: none;
  background: radial-gradient(50% 62% at 50% 47%, #1c5a4b, #0b2722 58%, #051311); }
.pboot::before { content: ''; position: absolute; inset: 0; background: #000; opacity: 0; animation: pboot-black 1900ms linear backwards; }
@keyframes pboot-black { 0%, 58% { opacity: 1; } 70% { opacity: 0; } }
.pboot.is-leaving { animation: tr-out 360ms ease-in forwards; }
.pboot__stage { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); /* the browser floor has no container queries: the stage IS the container, so its cqw becomes calc(N * var(--cqw) / 100) */
  --cqw: min(100vw, 177.78vh); }
.pboot__bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: tr-fade 500ms ease-out 1150ms backwards; }
.pboot__orbit { fill: rgba(40, 150, 122, .12); stroke: rgba(110, 240, 200, .22); stroke-width: 3; }
.pboot__orbit--in { fill: none; stroke-dasharray: 6 12; stroke-opacity: .5; }
.pboot__topo { fill: none; stroke: rgba(110, 240, 200, .09); stroke-width: 2; }
.pboot__cross { fill: none; stroke: rgba(110, 240, 200, .55); stroke-width: 3; }
.pboot__chip { position: absolute; left: 50%; top: 47.8%; width: 40%; aspect-ratio: 2 / 1; opacity: .3; transform: translate(-50%, -50%) rotate(-30deg) scale(.62);
  animation: pboot-chip 1900ms cubic-bezier(.3, .1, .2, 1) backwards; }
.pboot__chip svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pboot__chip rect { fill: #46e4b6; fill-opacity: var(--o); stroke: #c4fff0; stroke-width: 1.5; stroke-opacity: .75; animation: pboot-bit 240ms steps(2, end) backwards; animation-delay: calc(140ms + var(--d, 0ms)); }
.pboot__port { fill: none; stroke: #a6ffe6; stroke-width: 3; }
@keyframes pboot-bit { from { opacity: 0; } }
@keyframes pboot-chip {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(-32deg) scale(2.9); filter: brightness(2.1); }
  34% { opacity: 1; transform: translate(-50%, -50%) rotate(-32deg) scale(2.45); filter: brightness(1.7); }
  62% { opacity: .9; transform: translate(-50%, -50%) rotate(-31deg) scale(.66); filter: brightness(1.1); }
}
.pboot__flash { position: absolute; left: 50%; top: 47.8%; width: 62%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: .2; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(180, 255, 234, .95), rgba(63, 230, 180, .5) 28%, transparent 64%); animation: pboot-flash 1900ms ease-out backwards; }
@keyframes pboot-flash { 0%, 56% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 64% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
.pboot__mark { position: absolute; left: 36.6%; top: 24.5%; color: rgba(150, 255, 225, .42); animation: tr-fade 400ms ease-out 1300ms backwards; }
.pboot__mark .pmark__glyph { width: calc(3.2 * var(--cqw) / 100); height: calc(3.2 * var(--cqw) / 100); }
.pboot__mark .pmark__type { font-size: calc(1.3 * var(--cqw) / 100); }
.pboot__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pboot__lines line { stroke: #7cf5d0; stroke-width: 3; stroke-dasharray: 1; animation: pboot-line 420ms ease-out backwards; animation-delay: calc(1520ms + var(--i, 0) * 60ms); }
@keyframes pboot-line { from { stroke-dashoffset: 1; } }
.pboot__node { fill: #7cf5d0; animation: tr-fade 200ms ease-out backwards; animation-delay: calc(1880ms + var(--i, 0) * 60ms); }
.pboot__anchor { fill: #0b2621; stroke: #7cf5d0; stroke-width: 4; animation: tr-fade 200ms ease-out backwards; animation-delay: calc(1460ms + var(--i, 0) * 60ms); }
.pcardx { position: absolute; display: flex; align-items: stretch; background: linear-gradient(180deg, #55e4ba, #3ccfa4);
  box-shadow: 0 0 0 calc(.18 * var(--cqw) / 100) rgba(210, 255, 240, .45), 0 calc(.4 * var(--cqw) / 100) calc(1.2 * var(--cqw) / 100) rgba(0, 0, 0, .35);
  animation: pcardx-in 540ms cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(1260ms + var(--i, 0) * 50ms); }
.pcardx::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-radial-gradient(ellipse at 30% 120%, rgba(8, 60, 44, .14) 0 1px, transparent 1px calc(1.1 * var(--cqw) / 100)); }
.pcardx--l { flex-direction: row; transform-origin: 100% 50%; }
.pcardx--r { flex-direction: row-reverse; transform-origin: 0 50%; }
.pcardx--c { transform-origin: 50% 50%; }
@keyframes pcardx-in { 0% { opacity: 0; transform: scaleX(.1); filter: brightness(2.6) saturate(0); } 40% { opacity: 1; filter: brightness(2) saturate(.2); } 75% { filter: brightness(1.15); } }
.pcardx__mark { position: relative; flex: none; width: 17%; display: grid; place-items: center; }
.pcardx__mark svg { width: 52%; fill: rgba(8, 56, 42, .4); }
.pcardx__txt { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: calc(.15 * var(--cqw) / 100); padding: 0 calc(1.3 * var(--cqw) / 100); color: #0b2a21; }
.pcardx--r .pcardx__txt { align-items: flex-start; }
.pcardx__txt b { font-family: var(--font-num); font-size: calc(2.6 * var(--cqw) / 100); font-weight: 700; line-height: 1; }
.pcardx__txt span { font-family: var(--font-num); font-size: calc(.95 * var(--cqw) / 100); font-weight: 700; letter-spacing: .05em; line-height: 1; }
.pcardx__txt i { width: calc(1.5 * var(--cqw) / 100); height: calc(1.5 * var(--cqw) / 100); margin-top: calc(.35 * var(--cqw) / 100); display: grid; place-items: center; background: #0b2a21; color: #55e4ba; }
.pcardx__txt i .icon { width: 85%; height: 85%; }
.pcardx__face { position: relative; flex: none; height: 100%; aspect-ratio: 1; overflow: hidden; background: #0b2621; box-shadow: 0 0 0 calc(.2 * var(--cqw) / 100) #e8fff7; }
.pcardx__face .pavatar { --pa: 100%; border: 0; }
.pboot__title { position: absolute; left: 0; right: 0; top: 66.4%; margin: 0; text-align: center; font-size: calc(4.4 * var(--cqw) / 100); font-weight: 900; letter-spacing: calc(.3 * var(--cqw) / 100); line-height: 1.2;
  color: #4ff0c0; text-shadow: 0 0 calc(1.2 * var(--cqw) / 100) rgba(80, 255, 200, .45); animation: pboot-title 520ms cubic-bezier(.2, .8, .2, 1) 1400ms backwards; }
@keyframes pboot-title { 0% { opacity: 0; transform: scale(1.35); filter: brightness(2.2) blur(2px); } 60% { opacity: 1; filter: brightness(1.4); } }
.pboot__sub { position: absolute; left: 50%; top: 77.4%; transform: translateX(-50%); padding: calc(.12 * var(--cqw) / 100) calc(1.5 * var(--cqw) / 100); font-family: var(--font-num); font-size: calc(1.3 * var(--cqw) / 100); font-weight: 700;
  letter-spacing: calc(.08 * var(--cqw) / 100); color: #0b2a21; background: #4fe0b8; white-space: nowrap; animation: tr-fade 300ms ease-out 1560ms backwards; }
.pboot__conn { position: absolute; right: 6%; bottom: 4.5%; font-size: calc(1.6 * var(--cqw) / 100); color: rgba(120, 240, 205, .72); animation: tr-fade 400ms ease-out 2000ms backwards; }
.pboot__dots { display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; white-space: nowrap; animation: tr-dots 1.2s steps(4) infinite; }
.pboot__dots::before { content: '...'; }
@media (prefers-reduced-motion: reduce) {
  .pboot::before, .pboot__bg, .pboot__chip, .pboot__chip rect, .pboot__flash, .pboot__mark, .pboot__lines line, .pboot__node, .pboot__anchor, .pcardx, .pboot__title, .pboot__sub, .pboot__conn { animation: none; }
  .pboot__dots { width: auto; animation: none; }
}