/* Hard viewport lock: prevents page scrollbar and right-side drift. */
  html.pa193-ui-lock,
  html.pa193-ui-lock body,
  body.pa188-active {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
  body.pa188-active {
    position: fixed !important;
    inset: 0 !important;
  }
  #pa188-shell {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    contain: layout paint style;
  }
  #pa188-shell .pa188-root {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: clamp(10px, 1.05vw, 18px) !important;
    gap: clamp(7px, .7vw, 12px) !important;
    grid-template-rows: clamp(68px, 8.4dvh, 94px) minmax(0, 1fr) clamp(72px, 9.4dvh, 96px) !important;
  }
  #pa188-shell .pa188-top {
    min-width: 0 !important;
    grid-template-columns: minmax(190px, .72fr) minmax(360px, 1.16fr) minmax(300px, .72fr) !important;
    gap: clamp(8px, .8vw, 14px) !important;
  }
  #pa188-shell .pa188-title h1 {
    font-size: clamp(32px, 4.1vw, 54px) !important;
    letter-spacing: .22em !important;
  }
  #pa188-shell .pa188-main,
  #pa188-shell .pa188-page,
  #pa188-shell .pa188-layout {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Percent columns + gap caused overflow. Use fr columns that include gap in layout math. */
  #pa188-shell .pa188-layout.terminal {
    grid-template-columns: minmax(0, 1.03fr) minmax(0, .98fr) minmax(0, 1.09fr) !important;
  }
  #pa188-shell .pa188-layout.match {
    grid-template-columns: minmax(0, .76fr) minmax(0, 1.48fr) minmax(0, .92fr) !important;
  }
  #pa188-shell .pa188-layout.orbital {
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.32fr) minmax(0, .96fr) !important;
  }
  #pa188-shell .pa188-panel {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden auto !important;
    padding: clamp(12px, 1.05vw, 17px) !important;
  }
  #pa188-shell .pa188-projection {
    height: min(42dvh, 405px) !important;
    min-height: 250px !important;
  }
  #pa188-shell .pa188-bottom {
    min-width: 0 !important;
    grid-template-columns: minmax(210px, 1fr) minmax(0, 2.95fr) minmax(310px, 1.42fr) !important;
  }
  #pa188-shell .pa188-resources { min-width: 0 !important; }
  #pa188-shell .pa188-resource { min-width: 0 !important; }
  #pa188-shell .pa188-bottom-actions { min-width: 0 !important; }

  /* Remove wrong flashing loops; keep UI alive through controlled hover and selected states. */
  body.pa193-still-motion #pa188-shell .pa188-panel::after {
    animation: none !important;
    opacity: .12 !important;
    transform: none !important;
  }
  body.pa193-still-motion #pa188-shell::before {
    animation-duration: 26s !important;
    opacity: .14 !important;
  }
  body.pa193-still-motion #pa188-shell .pa188-page[data-active="true"] .left,
  body.pa193-still-motion #pa188-shell .pa188-page[data-active="true"] .center,
  body.pa193-still-motion #pa188-shell .pa188-page[data-active="true"] .right {
    animation-duration: .18s !important;
    animation-iteration-count: 1 !important;
  }
  body.pa193-still-motion #pa188-shell .pa191-icon svg {
    filter: drop-shadow(0 0 2px currentColor) !important;
  }

  /* Main-interface-like option style: slanted, stable, selected-ribbon energy, no random flash. */
  #pa188-shell .pa188-node-list {
    --pa188-node-track-x: 52px;
    gap: clamp(9px, 1.05vh, 13px) !important;
    padding: 9px 18px 9px 16px !important;
  }
  #pa188-shell .pa188-node-list::before {
    left: var(--pa188-node-track-x) !important;
    top: 3% !important;
    bottom: -2% !important;
    width: 2px !important;
    background:
      linear-gradient(180deg, rgba(255,241,189,.78), rgba(124,255,213,.56), rgba(192,140,255,.48), rgba(255,102,137,.52)) !important;
    box-shadow:
      0 0 12px rgba(124,255,213,.32),
      0 0 28px rgba(255,217,117,.10) !important;
    opacity: .64 !important;
  }
  #pa188-shell .pa188-node,
  #pa188-shell .pa188-mode,
  #pa188-shell .pa188-appearance button,
  #pa188-shell .pa188-tab,
  #pa188-shell .pa188-btn {
    position: relative;
    isolation: isolate;
    will-change: transform;
  }
  #pa188-shell .pa188-node {
    min-height: clamp(62px, 7.25vh, 76px) !important;
    grid-template-columns: 62px minmax(0, 1fr) 46px !important;
    padding: 7px 12px 7px 11px !important;
    color: rgba(235,241,255,.90) !important;
    border-color: color-mix(in srgb, var(--node-color, #72b8ff) 58%, transparent) !important;
    background:
      linear-gradient(90deg, rgba(9,15,28,.88), rgba(5,10,20,.66) 56%, rgba(3,6,14,.36)),
      repeating-linear-gradient(90deg, transparent 0 78px, color-mix(in srgb, var(--node-color, #72b8ff) 22%, transparent) 78px 79px, transparent 79px 150px),
      linear-gradient(180deg, rgba(255,255,255,.030), rgba(0,0,0,0)) !important;
    clip-path: polygon(36px 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 36px 100%, 0 50%) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.030),
      inset 0 0 30px rgba(0,0,0,.28),
      0 0 0 rgba(0,0,0,0) !important;
    overflow: visible !important;
  }
  #pa188-shell .pa188-node::before,
  #pa188-shell .pa188-mode::before,
  #pa188-shell .pa188-appearance button::before {
    content: "";
    position: absolute;
    inset: 4px 26px 4px 52px;
    pointer-events: none;
    opacity: .26;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--node-color, #72b8ff) 18%, transparent), transparent 34%, rgba(255,217,117,.08) 54%, transparent 78%),
      linear-gradient(180deg, transparent 0 46%, color-mix(in srgb, var(--node-color, #72b8ff) 42%, transparent) 46% 48%, transparent 48% 100%);
    transform: translateX(-12px);
    transition: opacity .18s ease, transform .22s ease, filter .22s ease;
    z-index: -1;
  }
  #pa188-shell .pa188-node > .pa188-node-text::before,
  #pa188-shell .pa188-node > .pa188-node-text::after {
    content: "";
    position: absolute;
    left: 86px;
    right: 66px;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, color-mix(in srgb, var(--node-color, #72b8ff) 64%, transparent), rgba(255,217,117,.22), transparent);
    opacity: .52;
    transform: scaleX(.72);
    transform-origin: left center;
    transition: transform .22s ease, opacity .22s ease;
  }
  #pa188-shell .pa188-node > .pa188-node-text::before { top: 13px; }
  #pa188-shell .pa188-node > .pa188-node-text::after { bottom: 12px; opacity: .36; }
  #pa188-shell .pa188-node::after,
  #pa188-shell .pa188-mode::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: 0;
    bottom: 0;
    height: auto;
    pointer-events: none;
    background:
      linear-gradient(105deg, transparent 0 34%, rgba(255,241,189,.22) 45%, color-mix(in srgb, var(--node-color, #72b8ff) 24%, transparent) 55%, transparent 68% 100%);
    opacity: 0;
    transform: translateX(-48%);
    transition: opacity .18s ease;
  }
  #pa188-shell .pa188-node:hover::before,
  #pa188-shell .pa188-mode:hover::before,
  #pa188-shell .pa188-appearance button:hover::before,
  #pa188-shell .pa188-node[data-selected="true"]::before,
  #pa188-shell .pa188-mode[data-active="true"]::before {
    opacity: .86;
    transform: translateX(0);
  }
  #pa188-shell .pa188-node:hover > .pa188-node-text::before,
  #pa188-shell .pa188-node:hover > .pa188-node-text::after,
  #pa188-shell .pa188-node[data-selected="true"] > .pa188-node-text::before,
  #pa188-shell .pa188-node[data-selected="true"] > .pa188-node-text::after {
    opacity: .9;
    transform: scaleX(1);
  }
  #pa188-shell .pa188-node:hover::after,
  #pa188-shell .pa188-mode:hover::after,
  #pa188-shell .pa188-node[data-selected="true"]::after,
  #pa188-shell .pa188-mode[data-active="true"]::after {
    opacity: .95;
    animation: pa206NodeSweep 1.15s cubic-bezier(.16, 1, .30, 1) both;
  }
  #pa188-shell .pa188-node:hover,
  #pa188-shell .pa188-mode:hover {
    transform: translateX(8px) !important;
    filter: brightness(1.12) !important;
  }
  #pa188-shell .pa188-node[data-selected="true"],
  #pa188-shell .pa188-mode[data-active="true"] {
    transform: translateX(9px) !important;
    color: var(--pa188-gold2) !important;
    border-color: color-mix(in srgb, var(--node-color, #ffd975) 70%, #fff 18%) !important;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--node-color, #ffd975) 16%, transparent), rgba(255,217,117,.10) 47%, rgba(7,12,22,.70)),
      repeating-linear-gradient(90deg, transparent 0 78px, color-mix(in srgb, var(--node-color, #72b8ff) 32%, transparent) 78px 79px, transparent 79px 150px),
      linear-gradient(180deg, rgba(255,255,255,.052), rgba(0,0,0,0)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,241,189,.13),
      inset 0 0 34px color-mix(in srgb, var(--node-color, #ffd975) 10%, transparent),
      0 0 24px color-mix(in srgb, var(--node-color, #ffd975) 18%, transparent) !important;
  }
  #pa188-shell .pa188-node-icon,
  #pa188-shell .pa188-mode-icon,
  #pa188-shell .pa188-detail-icon {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  #pa188-shell .pa188-node:hover .pa188-node-icon,
  #pa188-shell .pa188-node[data-selected="true"] .pa188-node-icon,
  #pa188-shell .pa188-mode:hover .pa188-mode-icon,
  #pa188-shell .pa188-mode[data-active="true"] .pa188-mode-icon {
    box-shadow: inset 0 0 18px rgba(255,217,117,.09), 0 0 16px rgba(124,255,213,.18) !important;
  }
  #pa188-shell .pa188-node-icon {
    position: relative !important;
    width: 49px !important;
    height: 49px !important;
    margin-left: 1px !important;
    background:
      radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--node-color, #72b8ff) 18%, transparent), transparent 64%),
      rgba(3,6,13,.82) !important;
    border-color: color-mix(in srgb, var(--node-color, #72b8ff) 78%, white 10%) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.035),
      inset 0 0 18px color-mix(in srgb, var(--node-color, #72b8ff) 10%, transparent),
      0 0 14px color-mix(in srgb, var(--node-color, #72b8ff) 16%, transparent) !important;
  }
  #pa188-shell .pa188-node-icon::before,
  #pa188-shell .pa188-node-icon::after {
    content: "";
    position: absolute;
    border: 1px solid currentColor;
    pointer-events: none;
  }
  #pa188-shell .pa188-node-icon::before {
    inset: 6px;
    opacity: .52;
  }
  #pa188-shell .pa188-node-icon::after {
    inset: -8px;
    opacity: .26;
  }
  #pa188-shell .pa188-node[data-selected="true"] .pa188-node-icon {
    animation: pa206NodeBadge 2.5s ease-in-out infinite !important;
  }
  #pa188-shell .pa188-node-text b {
    font-family: Georgia, "Times New Roman", "Noto Serif SC", serif !important;
    font-weight: 900 !important;
    letter-spacing: .10em !important;
    text-shadow: 2px 2px 0 rgba(0,0,0,.72), 0 0 10px color-mix(in srgb, var(--node-color, #72b8ff) 12%, transparent) !important;
  }
  #pa188-shell .pa188-node-text small {
    color: color-mix(in srgb, var(--node-color, #72b8ff) 78%, #fff 10%) !important;
    letter-spacing: .17em !important;
  }
  #pa188-shell .pa188-node-index {
    width: 38px !important;
    height: 38px !important;
    border-color: color-mix(in srgb, var(--node-color, #ffd975) 58%, transparent) !important;
    color: color-mix(in srgb, var(--node-color, #ffd975) 86%, white 8%) !important;
    background: rgba(3,6,13,.60) !important;
    box-shadow: 0 0 12px color-mix(in srgb, var(--node-color, #ffd975) 9%, transparent) !important;
  }
  #pa188-shell .pa188-node[data-selected="true"] .pa188-node-index span {
    color: transparent !important;
  }
  #pa188-shell .pa188-node[data-selected="true"] .pa188-node-index::before {
    content: "›";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform: rotate(-45deg);
    color: var(--pa188-gold2);
    font-size: 34px;
    line-height: 1;
  }
  #pa188-shell .pa188-mode-list {
    gap: clamp(10px, 1.15vh, 14px) !important;
    padding: 8px 8px 8px 14px !important;
    position: relative;
  }
  #pa188-shell .pa188-mode-list::before {
    content: "";
    position: absolute;
    left: 46px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(180deg, rgba(255,241,189,.62), rgba(112,255,224,.42), rgba(192,140,255,.36), rgba(255,157,176,.40));
    box-shadow: 0 0 12px rgba(112,255,224,.22);
    opacity: .52;
  }
  #pa188-shell .pa188-mode {
    min-height: clamp(68px, 7.8vh, 84px) !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    padding: 9px 14px 9px 10px !important;
    border-color: color-mix(in srgb, var(--mode-color, #72b8ff) 58%, transparent) !important;
    background:
      linear-gradient(90deg, rgba(8,14,26,.86), rgba(5,9,18,.64) 56%, rgba(3,6,12,.42)),
      repeating-linear-gradient(90deg, transparent 0 72px, color-mix(in srgb, var(--mode-color, #72b8ff) 18%, transparent) 72px 73px, transparent 73px 145px),
      linear-gradient(180deg, rgba(255,255,255,.024), rgba(0,0,0,0)) !important;
    clip-path: polygon(38px 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 38px 100%, 0 50%) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.034),
      inset 0 0 24px rgba(0,0,0,.24),
      0 0 0 1px color-mix(in srgb, var(--mode-color, #72b8ff) 28%, transparent) !important;
    overflow: visible !important;
  }
  #pa188-shell .pa188-mode::before {
    inset: 4px 22px 4px 46px !important;
    opacity: .24 !important;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--mode-color, #72b8ff) 18%, transparent), transparent 34%, rgba(255,217,117,.08) 54%, transparent 78%),
      linear-gradient(180deg, transparent 0 46%, color-mix(in srgb, var(--mode-color, #72b8ff) 40%, transparent) 46% 48%, transparent 48% 100%) !important;
  }
  #pa188-shell .pa188-mode::after {
    left: 20px !important;
    right: 20px !important;
    background: linear-gradient(105deg, transparent 0 34%, rgba(255,241,189,.22) 45%, color-mix(in srgb, var(--mode-color, #72b8ff) 20%, transparent) 56%, transparent 70% 100%) !important;
    opacity: 0 !important;
    transform: translateX(-48%) !important;
  }
  #pa188-shell .pa188-mode:hover {
    transform: translateX(8px) !important;
    border-color: color-mix(in srgb, var(--mode-color, #72b8ff) 84%, white 12%) !important;
    filter: brightness(1.08) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.032),
      inset 0 0 28px color-mix(in srgb, var(--mode-color, #72b8ff) 8%, transparent),
      0 0 18px color-mix(in srgb, var(--mode-color, #72b8ff) 12%, transparent) !important;
  }
  #pa188-shell .pa188-mode[data-active="true"] {
    transform: translateX(10px) !important;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--mode-color, #72b8ff) 16%, transparent), rgba(255,217,117,.10) 42%, rgba(6,10,18,.72)),
      repeating-linear-gradient(90deg, transparent 0 72px, color-mix(in srgb, var(--mode-color, #72b8ff) 26%, transparent) 72px 73px, transparent 73px 145px),
      linear-gradient(180deg, rgba(255,255,255,.052), rgba(0,0,0,0)) !important;
    color: var(--pa188-gold2) !important;
    border-color: color-mix(in srgb, var(--mode-color, #ffd975) 72%, #fff 18%) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,241,189,.18),
      inset 0 0 38px color-mix(in srgb, var(--mode-color, #ffd975) 12%, transparent),
      0 0 26px color-mix(in srgb, var(--mode-color, #ffd975) 22%, transparent) !important;
  }
  #pa188-shell .pa188-mode:hover::before,
  #pa188-shell .pa188-mode[data-active="true"]::before {
    opacity: .92 !important;
    transform: translateX(0) !important;
  }
  #pa188-shell .pa188-mode:hover::after,
  #pa188-shell .pa188-mode[data-active="true"]::after {
    opacity: .96 !important;
    animation: pa206NodeSweep 1.2s cubic-bezier(.16, 1, .30, 1) both !important;
  }
  #pa188-shell .pa188-mode-icon {
    position: relative !important;
    width: 46px !important;
    height: 46px !important;
    border-color: color-mix(in srgb, var(--mode-color, #72b8ff) 80%, white 10%) !important;
    background:
      radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--mode-color, #72b8ff) 18%, transparent), transparent 64%),
      rgba(3,6,13,.82) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.032),
      inset 0 0 18px color-mix(in srgb, var(--mode-color, #72b8ff) 10%, transparent),
      0 0 18px color-mix(in srgb, var(--mode-color, #72b8ff) 20%, transparent) !important;
  }
  #pa188-shell .pa188-mode-icon::before,
  #pa188-shell .pa188-mode-icon::after {
    content: "";
    position: absolute;
    border: 1px solid currentColor;
    pointer-events: none;
  }
  #pa188-shell .pa188-mode-icon::before {
    inset: 6px;
    opacity: .52;
  }
  #pa188-shell .pa188-mode-icon::after {
    inset: -8px;
    opacity: .26;
  }
  #pa188-shell .pa188-mode[data-active="true"] .pa188-mode-icon {
    animation: pa206NodeBadge 2.5s ease-in-out infinite !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.045),
      inset 0 0 22px color-mix(in srgb, var(--mode-color, #ffd975) 14%, transparent),
      0 0 22px color-mix(in srgb, var(--mode-color, #ffd975) 22%, transparent) !important;
  }
  #pa188-shell .pa188-mode b {
    font-family: Georgia, "Times New Roman", "Noto Serif SC", serif !important;
    font-weight: 900 !important;
    text-shadow: 2px 2px 0 rgba(0,0,0,.72), 0 0 10px color-mix(in srgb, var(--mode-color, #72b8ff) 12%, transparent) !important;
  }
  #pa188-shell .pa188-mode small {
    color: color-mix(in srgb, var(--mode-color, #72b8ff) 76%, #fff 12%) !important;
    letter-spacing: .18em !important;
  }
  #pa188-shell .pa188-tab[data-current="true"] {
    background: linear-gradient(180deg, rgba(124,255,213,.12), rgba(3,7,16,.78)) !important;
    border-color: rgba(124,255,213,.65) !important;
  }
  #pa188-shell .pa188-btn.primary {
    background:
      linear-gradient(90deg, transparent, rgba(255,217,117,.10), transparent),
      linear-gradient(180deg, rgba(255,217,117,.20), rgba(3,7,16,.86)) !important;
  }

  /* Prevent raw placeholder character flash before SVG polish applies. */
  #pa188-shell .pa188-node-icon span:not(:has(.pa191-icon)),
  #pa188-shell .pa188-mode-icon span:not(:has(.pa191-icon)),
  #pa188-shell .pa188-detail-icon span:not(:has(.pa191-icon)),
  #pa188-shell .pa188-resource-icon:not(:has(.pa191-icon)),
  #pa188-shell .pa188-equip:not(:has(.pa191-icon)),
  #pa188-shell .pa188-enemy:not([data-pa188-real-preview="true"]):not(:has(.pa191-icon)),
  #pa188-shell .pa188-reward b:not(:has(.pa191-icon)) {
    color: transparent !important;
    text-shadow: none !important;
  }

  /* The unified portrait bridge sometimes paints a black card matte; make the projection blend like an in-world hologram. */
  #pa188-shell .pa190-projection-avatar,
  #pa188-shell canvas[data-pa190-avatar],
  #pa188-shell .pa191-portrait-canvas {
    background: transparent !important;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  @media (max-width: 1180px) {
    #pa188-shell .pa188-top {
      grid-template-columns: minmax(160px, .65fr) minmax(300px, 1.15fr) minmax(260px, .75fr) !important;
    }
    #pa188-shell .pa188-layout.terminal,
    #pa188-shell .pa188-layout.match,
    #pa188-shell .pa188-layout.orbital {
      gap: 9px !important;
    }
    #pa188-shell .pa188-panel { padding: 11px !important; }
  }